/* Constants 

Orange: #EEAA22

*/

/* #----- Defaults -----# */
body { text-rendering:optimizeLegibility; font-family: "Lucida Sans Unicode", Verdana, sans-serif; font-size:14px; margin:0 auto; width:100%; line-height:22px; color:#636363; background:#000 url(/assets/images/body-bg.jpg); margin:0; padding:0;}
img {border:none;}
ul, div, span, h1, h2, h3, h4, h5 {margin:0; padding:0;}

/* #----- Links -----# */
a { outline:0; }
a:link, a:visited { color:#eeaa22; }
a:hover, a:focus { color:#636363; }

/* #----- Layout -----# */
.container { display:block; clear:both; width:940px; padding:22px 20px; margin:0 auto;}
#header {display:block; float:left; width:100%; background-color:#ffffff;}
#masthead {display:block; float:left; width:100%; background:#ffffff url(/assets/images/header-border-bottom.png) center bottom repeat-x; padding-bottom:22px; border-bottom:6px solid #000000;}
.home #masthead .container {background:transparent url(/assets/images/masthead-home.png) no-repeat right top;}
#subfooter {display:block; float:left; width:100%; background-color:transparent;}
#footer {display:block; float:left; width:100%; background-color:#000; margin-bottom:0;}


/* #----- Header -----# */

#whoooz-logo {display:inline; float:left;}
ul#navigation-top {list-style-type:none; display:block; float:right; margin-top:6px;}
ul#navigation-top li {display:block; position:relative; float:left; margin:0 10px;}
ul#navigation-top li.lf {margin-left:0px;}
ul#navigation-top li.ll {margin-right:0px;}
ul#navigation-top li a {display:block; float:left; text-decoration:none; font-size:18px; color:#636363; padding-bottom:6px; padding-top:16px; overflow:hidden;}
ul#navigation-top li a:hover, ul#navigation-top li a.active {} 
ul#navigation-top li a .marker {display:block; background-color: #eeaa22; width:100%; height:0px; position:absolute; bottom:0; left:0;}
ul#navigation-top li a.selected .marker {height:4px;}

/* #----- Masthead -----# */

h1#blurb {display:block; width:540px; font-size:44px; line-height:48px; color:#ababab; letter-spacing:-1px; font-weight:normal; margin:22px 0 20px 0;}
.wf-active h1#blurb {font-size:52px; line-height:58px;}
h1#blurb strong {color:#636363; font-weight:bold;}
ul#tell-expertise {list-style-type:none; display:block; float:left; width:560px;}
ul#tell-expertise li {display:inline; float:left; width:160px; padding:0 20px 10px 0; font-size:12px;}
ul#tell-expertise li h2.title {display:inline; float:left; width:540px; font-size:22px; line-height:28px; font-weight:normal; padding-top:22px;}


/* #----- Subfooter -----# */

div#recent-work, div#recent-post, div#about-whoooz {display:block; float:left; margin-bottom: 44px;}
#subfooter .title-block {display:inline; float:left; clear:both; width:940px; border-bottom: 0px solid #262626; margin:20px 0px 20px 0px; background:transparent url(/assets/images/feature_bg.png) right 32px repeat-x;}
#subfooter .title-block h3 {display:inline; float:left; width:440px; font-size:28px; line-height:32px; color:#e6e6e6;}
#subfooter .title-block a.view-more {display:inline; float:right; padding:6px 8px 12px; font-size:16px; line-height:20px; background-color:#262626; color:#666; text-align:right; text-decoration:none; margin-right:12px; background:transparent url(/assets/images/feature_bg.png) right bottom}
#subfooter ul.overview {display:block; float:left; clear:both;}
#subfooter ul.overview li {display:block; float:left; width:220px; margin-right:20px; overflow:hidden;}
#subfooter ul.overview li:hover {cursor:pointer;}
#subfooter ul.overview li.ll {margin-right:0;}
#subfooter ul.overview li > a {text-decoration:none; color:#636363; font-size:12px;} 
#subfooter ul.overview li .project-blurb strong {text-decoration:none; color:#eeaa26; font-size:14px; background-color:#262626; padding: 5px 6px;} 
#subfooter ul.overview li > a > img {width:208px; border:6px solid #262626;}

/* #----- Toolkit -----# */

.clearfix:after {content:"."; display:block; clear:both; visibility: hidden; line-height: 0; height: 0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}


/* #----- Media Queries -----# */

@media 	(min-device-width:1024px) and (max-width:989px),	
		screen and (max-device-width:480px), 
		(max-device-width:480px) and (orientation:landscape), 
		(min-device-width:481px) and (orientation:portrait) {
	
		body { width:980px;}
}

@media 	(min-device-width:1024px) and (max-width:509px),
       	(max-device-width:480px) and (orientation:portrait),
 		(min-device-width:481px) and (orientation:landscape) and (max-width:1024px){
	
		body { width:980px;}
}