* {margin:0; padding:0;}
html {background:#fff;}
body {color:#000; font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.7em; line-height: 18px;}
 
p, li, a, h4, #primary-nav > div > a {color:#444;}
p, li {line-height:1.5em;}
p {text-align:justify;}
p, ul, ol {margin-bottom:1em;}
a {font-weight:bold; padding:1px; text-decoration:none; color: #8D8D8D; }
a:hover {color:#000; background:#ccc;}
a img {border:none;}

label {
	padding: 2px;
}

input, select, textarea {
	padding: 2px;
}
.hidden {
	display: none;
}

.popup {
	width: 500px;
}

#form-popup {
	background-color: #FFFFFF;
	padding: 20px;
	height: 260px;
}
 
/* HEADER */
header, footer, section, article, nav, aside {display:block;}
 
header {background:#fff url(../images/header-bg.jpg) center top no-repeat; height: 76px; width:100%;	}
header > div, footer > div {margin:0 auto; position:relative; width:960px;}
h1 {padding:10px 0 0 25px; height:51px;/* Header bg is 63px, minus 13px padding */ text-align:center; text-indent:-9999px;}
h1 a, h1 a:hover {background:transparent url(../images/logo.png) center center no-repeat !important; display:block; height:37px; width:147px;}
header li {color:#000;}
header a {color:#333; font-weight:normal;}
header a:hover {background:#666; color:#fff;}
 
/* PRIMARY TOP NAVIGATION */
#primary-nav {height:51px; position:absolute; top:10px; right:20px;}
#primary-nav > div {float:left; position:relative;}
#primary-nav > div > a {display:block; font-size:28px; height:66px; letter-spacing:-0.05em; line-height:51px; margin:0 20px; padding:0 30px 0 30px; text-transform:uppercase;}/* These anchors don't have fixed widths so that the whitespace between them is even. Adjust padding as needed to fit width of container element. */
#primary-nav > div > a:hover {background:none; text-decoration:underline;}
 
/* SECONDARY DROPDOWN NAVIGATION */
.secondary-nav {background:rgba(255,255,255,0.9); border-left:1px solid #999; border-right:1px solid #999; display:none; height:435px; left:18px; padding:0 30px 20px; position:absolute; top:66px; z-index: 999999;/* Height of anchor + image top margin */ width:300px;}/* Fallback for IE uses BG image */
.media {width:150px;}
.secondary-nav ul {float:left; list-style:none; text-align:left; width:150px;}
.secondary-nav ul:nth-child(2n-1) {clear:left;}
.secondary-nav ul li {font-size:11px; line-height:18px; text-transform:lowercase;}
.secondary-nav .category {font-size:12px; font-weight:bold; margin-top:16px;}
 
#primary-nav > div:hover > .secondary-nav {display:block; z-index:100;}
/*#primary-nav > div:first-child > .secondary-nav {right:auto; left:0;}*/
 
/* TEXT STYLES */
h2 {font-size:1.8em; font-weight:200; letter-spacing:-0.03em;}
h3 {font-size:1.3em;}
h2, h3 {color:#666; margin-bottom:0.4em;}
 
 
/* PAGE IMAGE */
aside {
	width: 960px;
	margin: 0px auto;
	position: relative;
	z-index: 1;
}

#overlay {
	width: 960px;
	height: 454px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	background-image: url(../images/overlay.png);
	background-repeat: no-repeat;
	overflow: hidden;
}
 
/* PAGE LAYOUTS */
section {background:url(../images/content-bg.jpg) center top no-repeat; margin:10px auto 0; width:960px; padding: 5px 0 0 0;}
article {float:left; padding:1% 2%; width:96%;}/* (96 + 2*2) = 100% width */

article ul, article ol {
	margin: 0 0 10px 30px;
}
article.halves {width:45%;}
article.halves + article.halves {width:45%;}/* (70 + 2*2) + (22 + 2*2) = 100% width */
article.twos {width:68%;}
article.twos + article.twos {width:24%;}/* (70 + 2*2) + (22 + 2*2) = 100% width */
/* Overall goal for .threes: 960px width */
article.threes {padding:0 32px 0 0; width:250px;}/* (250 + 32) = 282px width */
article.threes + article.threes {padding:0 40px; width:306px;}/* (306 + 40*2) = 386px width */
article.threes + article.threes p, article.threes + article.threes h2 {text-align:center;}
article.threes + article.threes + article.threes {padding:0 0 0 32px;width:250px;}/* (250 + 32) = 282px width */
article.threes + article.threes + article.threes p, article.threes + article.threes + article.threes h2 {text-align:left;}
article.fours {width:21%;}/* (21 + 2*2) * 4 = 100% width */
article.fifty {width:46%;}/* (46 + 2*2) * 2 = 100% width */

#form {
	background: #FFFFFF;
	width: 420px;
	padding: 40px;
}

/* FOOTER */ 
footer {height:50px; width:100%;}
footer > div {padding:10px 0 0;}
footer p {color:#aaa; font-size:0.8em; text-align:right;}
 
.clearfix {clear:both;}