.zilla-bar-wrapper {
	position: fixed;
	width: 100%;
	z-index: 10000;
	top: 0;
	left: 0;
	display: none;
}
.zilla-bar-wrapper.effect-overlay {
    max-height: 100%;
	overflow: auto;
}

.zilla-bar {
	position: relative;
	z-index: 1000;
	padding: 40px 0;
	width: 100%;
}

.zilla-bar-content,
.zilla-bar-widgets {
	width: 960px;
	margin: 0 auto;
}

.zilla-bar-widget { margin-top: 1em; }

.zilla-bar-switch {
    border-radius: 0 0 3px 3px;
	cursor: pointer;
	display: block;
	height: 30px;
	position: absolute;
	top: 0;
	right: 17px;
	text-decoration: none;
	width: 30px;
	z-index: 10001;
}
.zilla-bar-switch.effect-overlay { position: fixed; }
.zilla-bar-switch:hover { 
    cursor: pointer;
    text-decoration: none; 
}
.zilla-bar-switch .open,
.zilla-bar-switch .close {
	position: absolute;
	top: -3px;
	left: 8px;
	font-weight: bold;
}
.zilla-bar-switch .close { display: none; }
.zilla-bar-switch.open .close { display: inline; }
.zilla-bar-switch.open .open { display: none; }

/* Default Theme */
.zilla-bar-wrapper {
	background: #3F434C;
	color: #CCCFD5;
}

.zilla-bar a { color: #fff; }

.zilla-bar-switch {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 23px;
	line-height: 30px;
	background-color: #3F434C;
	color: #fff;
}

.zilla-bar-switch:hover { background-color: #3F434C; }

.zilla-bar-widgets ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Columns */
.zilla-bar .one_half { width: 48%; }
.zilla-bar .one_third { width: 30.66%; }
.zilla-bar .two_third { width: 65.33%; }
.zilla-bar .one_fourth { width: 22%; }
.zilla-bar .three_fourth { width: 74%; }
.zilla-bar .one_fifth { width: 16.8%; }
.zilla-bar .two_fifth { width: 37.6%; }
.zilla-bar .three_fifth { width: 58.4%; }
.zilla-bar .four_fifth { width: 67.2%; }
.zilla-bar .one_sixth { width: 13.33%; }
.zilla-bar .five_sixth { width: 82.67%; }

.zilla-bar .one_half,
.zilla-bar .one_third,
.zilla-bar .two_third,
.zilla-bar .three_fourth,
.zilla-bar .one_fourth,
.zilla-bar .one_fifth,
.zilla-bar .two_fifth,
.zilla-bar .three_fifth,
.zilla-bar .four_fifth,
.zilla-bar .one_sixth,
.zilla-bar .five_sixth {
	position: relative;
	margin-right: 4%;
	margin-bottom: 20px;
	float: left;
}

.zilla-bar .column-last {
	margin-right: 0!important;
	clear: right;
}

/* Micro Clearfix */
.zilla-bar .cf:before,
.zilla-bar .cf:after {
    content:"";
    display:table;
}

.zilla-bar .cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.zilla-bar .cf { zoom:1; }

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-width : 480px) {

  .zilla-bar { -webkit-text-size-adjust: none; }

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  
  .zilla-bar { -webkit-text-size-adjust: none; }

}

/* Desktops and laptops ----------- */
@media only screen 
and (max-width : 1000px) {
    
    .zilla-bar-content, 
    .zilla-bar-widgets { width: 90%; }
    
    .zilla-bar-widgets .one_fourth { 
        width: 48%; 
        margin: 0 1% 20px 1%;
    }
    
}

@media only screen 
and (max-width : 660px) {

    .zilla-bar-widgets .one_fourth,
    .zilla-bar-widgets .one_third,
    .zilla-bar-widgets .one_half { 
        width: 100%; 
        margin: 0 0 20px 0;
    }

}