@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700,600);


/*=====  INITIALIZE  ===============*/

html, body {
	width:100%;
	height:100%;
	position:relative;
	color:#757575;
	font-family:"Open Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight:400;
	font-size:15px;
}
h1, h2, h3 { font-weight:700; }
h1, h2 { margin:.3em 0; }
h1 + h2 { margin-top:-.3em; }

.col-short, .col-short > ul {
	width:100%;
	overflow:hidden;
}
.col-short > ul { overflow:visible; }
.col-short > ul > li {
	width:50%;
	min-width:150px;
	float:left;
}


/*=====  AREA : BANNER  ===============*/

#banner {
	width:290px;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	z-index:20;
}
#banner > * { position:relative; }
#banner #menu {
	display:none;
	width:66px;
	height:80px;
	margin-left:12px;
	z-index:25;
	outline:none;
	overflow:hidden;
	background:transparent url(../images/banner-menu.png) no-repeat left top;
	text-indent:-9999em;
}
#banner #menu:hover { background-position:left bottom; }
#banner #menu.active { background-position:right top; }
#banner #menu.active:hover { background-position:right bottom; }
#banner .container {
	width:250px;
	height:100%;
	left:20px;
	z-index:23;
	background-color:#FFF;
}
/*====================*/
#banner .site-brand {
	width:250px;
	margin-top:30px;
}
#banner .site-brand h1 {
	margin:0;
	position:relative;
	top:-5px;
	font-weight:400;
	font-size:1.2em;
	text-transform:uppercase;
	letter-spacing:.1em;
	white-space:nowrap;
}
#banner .site-brand h1 span {
	display:block;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:transparent url(../images/text-gradient-white.png) repeat-x center bottom;
}
/*====================*/
nav ul {
	width:250px;
	padding-left:0;
	list-style:none;
}
nav li { margin:8px 0; }
nav a:link, nav a:visited, nav a:hover {
	display:block;
	border-left:2px solid #999;
	border-bottom:1px solid rgba(255,255,255,0);
	padding:0 9px;
	color:#757575;
	font-weight:600;
	font-size:1.1em;
	text-decoration:none;
	text-transform:uppercase;
	letter-spacing:.2em;
}
nav a.active, nav a:hover {
	border-color:#006666;
	color:#006666;
}
/*====================*/
#footer {
	width:100%;
	height:40px;
	position:absolute;
	left:0;
	bottom:40px;
}
#footer p {
	margin:0;
	font-size:.75em;
}


/*=====  AREA : PRIMARY  ===============*/

#primary {
	position:absolute;
	left:290px;
	right:0;
	top:0;
	z-index:10;
}
#primary a:link, #primary a:visited { color:#006666; }
#primary a:hover { text-decoration:none; }
#primary header.mobile {
	height:1px;
	visibility:hidden;
}
#primary > section {
	width:500px;
	margin:20px auto 30px;
	overflow:hidden;
}

/*=====  MEDIA QUERIES  ===============*/

@media all and (min-width:1824px) {
	#primary > section { width:1500px; }
}
@media all and (min-width:1324px) and (max-width:1823px) {
	#primary > section { width:1000px; }
}
@media all and (max-width:829px) {
	#banner {
		width:100%;
		height:50px;
		bottom:initial;
		background: #e5e5e5;
		background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C */
	}
	#banner #menu { display:block; }
	#banner .container {
		display:none;
		width:100%;
		height:auto;
		padding:1px 20px;
		left:0;
		top:-30px;
		box-shadow:0 2px 8px rgba(0,0,0,0.6);
	}
	#banner .container.active { display:block; }
	#footer {
		width:auto;
		margin:15px 0 25px;
		position:relative;
		bottom:initial;
		top:0;
	}
	#primary { left:0px; top:50px; }
	#primary header.mobile {
		visibility:visible;
		height:auto;
		margin-bottom:1.5em;
		font-size:.9em;
	}
}
@media all and (max-width:499px) {
	#primary > section { width:100%; }
}
@media screen and (max-width:534px) {
	#menu { background-position: top left !important; }
	#menu.active { background-position: top right !important; }
	#banner .container {
		min-height:270px;
		top:-30px;
	}
	#banner .site-brand {
		position:absolute;
		right:45px;
		bottom:5px;
	}
	#banner nav { margin-top:20px; }
}
@media screen and (max-width:534px) and (orientation:landscape) {
	#banner { background:none; }
	#banner .container { top:-80px; }
	#banner nav {
		margin-top:10px;
		margin-left:70px;
	}
	#footer { margin-left:70px; }
	#primary { top:15px; }
}
@media screen and (max-width:320px) and (orientation:portrait) {
	#banner .container { min-height:370px; }
}
@media print {
	#banner { display:none; }
	#primary { top:0; }
	#primary header h1 br { display:none; }
	#primary > section { width:100% }
}

/*=====  END OF CODE  ===============*/