/*
|
|  where i put css
|
|  VER. 3.0
|  DATE. 10.20.13
|  AUTH. WILLIAM BIWER
|
*/

/*RESETS*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}

:focus {outline:0;}
body {line-height:1; color:#333; background:#E2E3E4;}
ol, ul {list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:separate; border-spacing:0;}
hr {border:0; color:#333; background-color:#333; width:100%; height:1px;}
caption, th, td {text-align:left; font-weight:normal;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}

.left {float:left; padding:.5em .5em .5em 0;}
.right {float:right; padding:.5em 0 .5em .5em;}
.clear {clear:both;}

/* clear fix */
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hides from IE-mac */
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

/*LAYOUT*/
#layout {width:100%; height:100%; margin:0; padding:0; background:#E2E3E4;}
#layout-header {width:100%; max-width:960px; height:112px; margin:0 auto; padding:40px 0;}
#layout-body {width:100%; max-width:960px; height:100%; margin:0 auto; padding:0;}
#layout-footer {width:100%; max-width:960px; height:100%; margin:12px auto; padding:0;} 

/*HEADER*/
#layout-header h1 {margin:28px 0 2px 0;}
#layout-header p {font-size:.8em; margin:0; padding:0;}
#layout-header img {float:left; padding:6px 12px 0 200px; display:inline;}

#header-about {width:100%; height:auto; display:none; padding:24px 0; background:#60B999;}
#about-content {width:100%; max-width:936px; height:auto; position:relative; margin:0 auto; color:#FFFFFF;}
	#about-content h1 {margin:0 0 6px 0;}
	#about-content ul {float:left; margin:12px 36px 0 0;}

/*BODY*/
#body-work {width:100%; max-width:936px; height:auto; margin:0 12px;}
	#body-work img {width:100%; max-width:936px; height:auto; display:block;}
	#body-work .video {position:relative; padding-bottom:56.25%;/* 16:9 */ padding-top:25px; height:0;}
	#body-work .video iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
	#body-work p {margin:12px 0 60px 0;}
	
/*FOOTER*/
#layout-footer p {padding:6px 0; font-size:.8em; text-align:center;}


/* typography */
h1 {font-family:"proxima-nova-1", "proxima-nova-2", Helvetica-Neue, Arial, sans-serif; font-size:18px; font-weight:100; letter-spacing:.1em; margin:0; padding:0;}
h2 {}
h3 {}
h4 {}
p, li {font-family:"proxima-nova-1", "proxima-nova-2", Helvetica-Neue, Arial, sans-serif; font-size:1.10em; font-weight:100; line-height:1.2em;}

#current {background:#60B99A;}

a:link, a:visited {color:#333; text-decoration:underline; padding:2px 2px 2px 2px;}
a:hover, a:active {color:#FFF; background:#60B99A; text-decoration:none; padding:2px 2px 2px 2px;}

#header-about a:link, #header-about a:visited {color:#FFF; text-decoration:underline; padding:2px 2px 2px 2px;}
#header-about a:hover, #header-about a:active {background:#FFF; color:#60B999; text-decoration:none; padding:2px 2px 2px 2px;}