/*

Contents: 
1. Reset

2. Typography

3. Navigation

4. Homepage & common layout

5. Project Pages Layout
	-> 5.1 Project Overview
	
6. Extras
	-> 6.1 Clearfix
		
*/


/* - ###### - 1.0 RESET - ###### - */

/* - Adapted from http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/, Thanks Eric - */

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, strong, sub, sup, tt, var,
b, u, i, center,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body {
   height: 100%;
   margin: 0 0 1px;
   padding: 0;
}



/* - ###### - 2.0 TYPOGRAPHY - ###### - */ 

p{
	line-height:1.3em;
	margin:0 0 10px 0;
}

h1, h3, h4, h5{
	color:#ffffff;
	font-weight:normal;
}

h2{
	font-size:18px;
	margin-bottom:5px;
	font-weight:normal;
}



h2#tagline{
	color:#fff;
	letter-spacing:-1px;
	font-weight:normal;
	font-size:38px;
	margin-bottom:15px;
	margin-top:-5px;
}

h2.client_title{
	clear:both;
	font-weight:normal;
	color:#fff;
	font-size:38px;
	padding-top:10px;
	height:33px;
}

h2.portfolio-title{
	clear:both;
	font-weight:normal;
	display:inline;
	color:#fff;
	font-size:38px;
}

h3{
	font-size:38px;
	margin:15px 0;
	line-height:1.2em;
}

h3.project_title{
	font-size:13px;
	font-style:italic;
}

h3.portfolio-sub-title{
	display:none;/*---change to inline when implemented--*/
	font-size:25px;
	margin-left:10px;
}

h3.grey{
	font-size:23px;
	line-height:1.2em;
	font-style: italic;
	color:#939598;
	margin-top:0;
}

h4{
	line-height:1.2em;
	font-style:italic;
}

h5{
	font-style:italic;
	font-weight:normal;
}
	
a {	
	color:#D7D7D7;
	text-decoration:none;
	font-style:italic;
	margin:2px 0; 
	padding:2px
}


a:hover {
	color:#F3F3F3;
	text-decoration:none;
}

.white{
color:#fff;
}

.text-column{
	width:312px;
	float:left;
	margin-right:15px;
	margin-top:10px;
	overflow:hidden;
}

.text-column2{
	width:640px;
	float:left;
}

.bright{
	font-weight:bold;
	font-size:14px;
	color:#D7D7D7;
}


/* - ###### - 3.0 NAVIGATION - ###### - */

.nav a, a.slide, ul#portfolio a, ul#filter a, p.slide, ul.client-list a {
	background: url("images/nav_bg.png") -330px -0px no-repeat ;
	display:block;
	background-color:#939598;
	color: #1E1E1F;
	cursor:pointer;
}

.nav a:hover, a.slide:hover, ul#portfolio a:hover, ul#filter a:hover {
	background-color:#ffffff;
}

#nav_latest, #nav_portfolio, #nav_profile {
	float:left;
	margin-right:13px;
}
			
#nav_latest{
	width:315px;
}
		
#nav_portfolio{
	width:151px;
}
		
#nav_profile{
	margin-right:13px;
	width:151px;
}
	
#nav_contact{
	width:315px;
	float:left;
	margin-right:0px;
}

#nav_contact li{
	width:315px;
	float:left;
	margin-right:0px;
	padding:2px 0;
}



#nav_contact li ul li{
width:151px;
}


ul#social-icons{
	position:absolute;
	top:153px;
	left:656px;
	width:302px;
	height:40px;
	border-right:10px solid #818285;
}


ul#social-icons li{
	position:absolute;
	width:19px;
	height:19px;
	background:url('images/social_icons.png');
	background-color:none;
}

ul#social-icons li a{
	position:absolute;
	display:none;
	top:16px;
	width:200px;
	height:20px;
	line-height:20px;
	background:none;
	color:#939598;
}

ul#social-icons li#linkedin{
	left:0px;
	background-position:-1px -22px;
}

ul#social-icons li#linkedin:hover{
	background-position:-1px -2px;
}

ul#social-icons li#linkedin:hover a{
	display:block;
}

ul#social-icons li#twitter{
	left:20px;
	background-position:-20px -22px;
}

ul#social-icons li#twitter:hover{
	background-position:-20px -2px;
}

ul#social-icons li#twitter:hover a{
	display:block;
	left:-20px;
}

ul#social-icons li#facebook{
	left:40px;
	background-position:-40px -22px;
}

ul#social-icons li#facebook:hover{
	background-position:-40px -2px;
}

ul#social-icons li#facebook:hover a{
	display:block;
	left:-40px;
}

ul#social-icons li#delicious{
	left:60px;
	background-position:-60px -22px;
}

ul#social-icons li#delicious:hover{
	background-position:-60px -2px;
}

ul#social-icons li#delicious:hover a{
	display:block;
	left:-60px;
}

ul#social-icons li#youtube{
	left:80px;
	background-position:-80px -22px;
}

ul#social-icons li#youtube:hover{
	background-position:-80px -2px;
}

ul#social-icons li#youtube:hover a{
	display:block;
	left:-80px;
}


ul#social-icons li#flickr{
	left:100px;
	background-position:-100px -22px;
}

ul#social-icons li#flickr:hover{
	background-position:-100px -2px;
}

ul#social-icons li#flickr:hover a{
	display:block;
	left:-100px;
}






/* - ###### - 4.0 HOMEPAGE & COMMON ELEMENTS LAYOUT - ###### - */


body{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	background-color: #383838;
	color:#939598;
	background: #000000 url(images/bg.jpg) top center no-repeat fixed;

}

#header{
	position:relative;
}


#twitter-holder{
	border-bottom:1px solid;
	padding:10px 0px;
	margin-bottom:5px;
	height:10px;
}

#twitter-holder ul, #twitter-holder span{
	float:left;
}


#twitter-holder a{
}

#wrapper {
	height: 650px;
	width: 974px;
	padding: 0px 15px;
	margin:0 auto;
}
	
		
h1#logo{
	font-size:50px;
	border-top:1px solid #939598;
	border-bottom:1px solid #939598;
	margin:10px 0px 20px 0px;;
	padding: 2px 0px;
	background:url(images/frank.png) 0px 6px no-repeat;
}

h1#logo a{
	display:block;
	width:150px;
	height:43px;
	text-indent:-999em;
}


div#middle-content{
	width:970px;
height:350px;
border-bottom:1px solid;
}


div.featured{
	float:left;
	width:640px;
	overflow:hidden;
}

div.featured img{
margin-bottom:5px;
}
			
	
#project_info{
	width:315px;
	float:right;
}

/*-grid on homepage, different from projects page-*/



ul.home-grid{
width:990px !important;
	padding-top:0px;
	margin-top:0px;
}

ul.home-grid li{
position:relative !important;
top:0 !important;
border-bottom:none !important;
margin-right:8px; !important;
padding-left:0 !important;
}





#footer{
	position:relative;
	top:10px;
    clear:both;
	width:974px;
    border-top:1px solid #939598;
    border-bottom:1px solid #939598;
    margin:10px 0px 80px 0px;
    padding: 20px 0px;
}

#footer a, #footer p{
	width:315px;
	float:left;
	margin:0;
	margin-right:15px;
	font-style:italic;
}

#footer a{
	width:310px;
	float:left;
	padding:2px 0px;
}

a.addthis_button{
	background:none;
	margin-bottom:30px;
}

.date {
	padding-bottom:5px;
	display:block;
}


ul.thumb {
	float: left;
	list-style: none;
	margin: 0; padding: 10px;
	width: 360px;
}
ul.thumb li {
	margin: 0; padding: 5px;
	float: left;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 110px;
	height: 110px;
}





/* - ###### - 5.0 PROJECT PAGES LAYOUTS - ###### - */


#project_holder{
	width:975px;
}



ul.breadcrumb {
	margin-top:-10;
	margin-bottom:15px;
	height:1px;
}

ul.breadcrumb li{
	float:left;
	color:#fff;
	margin-right:10px;
	display:none; /*---To hide unused nav items until implemented properly---*/
}

ul.breadcrumb li:first-child{
	display:block;/*---To show home link---*/
}

ul.breadcrumb li a{
	background:none;
	padding:0;
	margin:0;
	color:#939598;
}

.left{float:left;}
.right{float:right;}

.grid_left {
	width:481px;
	float:left;
}
.grid_right {
	width:481px;
	float:right;
	margin-left:12px;
}

.pad_top{margin-top:14px;}
.pad_right{margin-right:14px;}
.pad_bottom{margin-bottom:14px;}
.pad_left{margin-left:14px;}




/* - 5.1 PROJECT OVERVIEW - */

.col_left {
	width:300px;
	float:left;
	margin-bottom:30px;
}

.col_right {
	width:300px;
	float:right;
	margin-top:12px;
}

#project_overview {
	width:620px;
	float:left;
}

#project_subnav {
	width:350px;
	float:right;
	margin-right:-17px;
}
#project_subnav ul{
	float:left;
	width:160px;
	margin-right:15px;
	color:#fff;
}

#project_subnav ul li:first-child{
	margin-bottom:5px;
}


#video{
	width:650px;
	float:left;
}





/* - ###### - 6.EXTRAS - ###### - */

hr{
	background-color: #939598;
	height: 1px;
	border:none;
	margin:10px 0 10px 0;
}

br.clear{clear:both;}



/* - 6.1CLEARFIX - */


.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%;
}



/* Portfolio Filter System*/

ul#portfolio{
	width:655px;
	float:left
}

ul#portfolio li{
	width:151px;
	float:left;
	padding-bottom:15px;
	padding:10px 6px 1px 6px;
	margin-bottom:15px;
	border-bottom:1px solid grey;
	height:200px;
	overflow:hidden;
	position:absolute;
line-height:14px;
	top:-1000px;
}

body#brand ul#portfolio li.brand,
body#print ul#portfolio li.print,
body#digital ul#portfolio li.digital,
body#moving ul#portfolio li.moving,
body#all-projects ul#portfolio li	{
	position:relative;
	top:0;
}



ul#portfolio li a{
	width:147px;
	margin-top:11px;
	margin-bottom:0px;
	padding:1px;
}

ul#portfolio li a.img-link{
	position:relative;
	background:none;
	padding:0;
	margin:0;
	top:0;
	width:151px;
	height:106px;
	overflow:hidden;
}

ul#portfolio li a.img-link:hover{
	border:2px solid #CBCBCB;
	width:147px;
	height:102px;
-moz-box-shadow:0px 0px 10px rgba(0,0,0,0.5) ;
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.5) ;
box-shadow:0px 0px 10px rgba(0,0,0,0.5) ;
}

ul#portfolio li img{
	position:absolute;
	top:0px;
	left:0px;
	margin:0 auto;
}

ul#portfolio li a.img-link:hover img{
	top:-2px;
	left:-2px;
}

ul#portfolio li .date{
	margin: 5px 0 -13px 0;
}

ul#filter{
	width:315px;
	margin-bottom:10px;
	margin-top:10px;
	float:right;
	display:none;/*--hidden until implemented fully--*/
}

.hidden{
	visibility: hidden;
	display: none;
}

ul#filter li.current a{
	background:none;
	background-color:#bbbbbb;
}

/*---sign up dropdown---*/

div.signup{
	width:305px;
	position:absolute;
	top:36px;
	background: #2B2B2B;
	padding:5px;
}

div.signup .label{
	margin:7px 0px 13px 0px;
	border:1px solid red;
}
div.signup #mce-EMAIL{
	height:15px;
	width:250px;
	border:none;
	background: #767676;
	font-size:10px;
	margin:5px 0;
}

div.signup .btn{
	margin-top:5px;
	background:#767676;
	border:none;
}

div.signup .btn:hover{
	background:#B7B7B7;
}
p.slide{
	height:16px;
}

/*---company pages---*/

ul.services-related-nav{
	width:151px;
	float:right;
}

.services-text p{
	float:left;
	width:465px;
}

ul.client-list li{
	padding:1px 0;
}

ul.client-list li a{
	margin:0px 0;
}

.bright{
	font-weight:bold;
	font-size:14px;
	color:#D7D7D7;
}