@import url("reset.css"); 
*{
	margin:0;
	padding:0;
}

html { font:62.5%/140% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	height: 880px; 
	
	}
body { 

	margin:0 10px;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 10px;
	height:100%;
	color: #999;
	text-align:center;
	 }

	
a { 
	color: #646464;
	font-size: 11px;
	text-decoration: none;
}



/* @end */
a:hover {
	color: #66cccc;
}

p { 
	color: #999;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-variant: small-caps;
	font-weight: normal;
	margin-bottom: 15px;
	margin-top: 5px;
	text-transform: uppercase;
	line-height: 14px;
	
	}
	
p img { 
	float: right; 
	margin: 10px 0px 10px 10px; }


h2{
	color:#999;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-variant: small-caps;
	font-weight: normal;
	margin-top: 5px;
	margin-bottom: 15px;
	text-transform: uppercase;
	line-height:14px;
	
}

h4 { /*work info headers*/
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #999; 	}
	
	 
	h5 { 
	color: #6b6b6b;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	margin-top: 5px;
	text-transform: none;
	line-height: 24px;
	
	}
	
h5 a { 
	font-size: 12px;
	color:#fff;	
	background-color: gray;
	}
	
#contentwrap {
	min-width:720px;
	max-width:976px;
	margin: 0 auto;
	text-align:center;
	text-align:left;
	/*padding-top: 45px;
	margin-bottom: 75px; */
	position:relative;
	}	

#header { 
	
	background: #ffffff;
	 }
	
/*logo*/
#header h1 {
	display:block;
	width: 403px;
	margin-bottom: 5px;
	
}
#header h1#logo{
	color:#999;
	text-indent: -9999px;
	background: url(../imgs/logo_full_pv.png) no-repeat 0 50%;
}
#header h1#logo a { 
	display: block;
	height: 174px;
	width:160px ;
	}
	

#header #navigation {
	list-style-type: none;
	float: right;
	margin: -106px 30px 0px 0px;
	 }
	


#content{ /*just added needs adjusting was 0 0 0 0*/
	height:625px;
	margin:0 20px 0 20px;
	
}

body#contentwrap #left-content {
	
	padding-top: 0px;
	width: 645px;
	 }
body#contentwrap #right-content {
width: 295px; } /*295*/


#page-header {
	width: 976px; 
	margin-bottom: 10px;
	float: left;
	border-bottom: 1px solid #282828;
	}	
#page-header h2 {
	display: inline;
	float: right;
	margin-top: 10px;
	margin-bottom: 10px; 
	}





#left-content { 
	width: 645px; /*moves nav bar right*/
	float: left; }
	


#right-content .page_name{
	float: right;
}	
	
#right-content { 
	width: 295px;
	float: right; }





/* WORK PAGE  */

#project h2.project_name {

}


#project p.read_info{
	float:right;
	margin-right: 12px;
}


#project p.read_info a{
	color:#999;
	
	
}
#project p.read_info a:hover{
	color:#66cccc;
	

}


#info{
	font-size:9px;
	background:#fff;
	display:none;
	overflow:hidden;
	
}

#info div.overview{
	width:550px;
	margin:0 0px 0 0;
	float:left;
}


#info p{
	margin:0 0 1em 0;
	height:1%;
}
#info p.close_info{
	text-align:right;
}
#info p.close_info a{
	display:block;
	float:right;
	background:#000;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
	padding:12px 10px;
	margin-top:10px;
}

#project{
	width: 625px;
	background:none;
	clear:left;
	float:left;
}


#contentwrap #portfolio-navigation {
	height: 531px;
	width: 300px;
	overflow: hidden;
	display: block;
	float: right; }
#contentwrap #portfolio-navigation ul {
	position: relative;
	top: 0;
	left: 0; }
#contentwrap #portfolio-navigation ul li {
	width: 295px;
	padding: 15px 0px;
	height: 75px;
	float: right;
	border-top: 1px solid #fff;
	background-image: url(../imgs/back1.png);
}


#contentwrap #portfolio-navigation ul li h4 {
	padding: 3px 3px 3px 0px;}
#contentwrap #portfolio-navigation ul li h4 a {
	color: #999;
}
#contentwrap #portfolio-navigation ul li h4 a:hover {
	color: #999;
	
	 }
#contentwrap #portfolio-navigation ul li.current {
background-color: #fff;

}

#contentwrap #portfolio-navigation ul li:hover {
	background-image: url(../imgs/back2.png);
	}
	
#contentwrap #portfolio-navigation ul li h3 {
	float: right;}	
#contentwrap #portfolio-navigation ul li img {
	float: right;
	margin: 0px 10px 0px 0px;
}

#contentwrap #portfolio-scroll a {
	width: 60px; /*147*/
	height: 57px;
	float: right;
	display: block;
	text-indent: -9999px; 
	}
	
#contentwrap #portfolio-scroll a#up {
	background: url(../imgs/scrollup.png) no-repeat; }

#contentwrap #portfolio-scroll a#down {
	background: url(../imgs/scrolldown.png) no-repeat; }
	
	
#contentwrap #portfolio-scroll a#up:hover, #contentwrap #portfolio-scroll a#down:hover {
	background-position: -60px 0px; }
	
#contentwrap #portfolio-scroll a#up:active, #contentwrap #portfolio-scroll a#down:active  {
	background-position: -120px 0px; }
	
	
#contentwrap ul#portfolio-scroll li a#up.still, #contentwrap ul#portfolio-scroll li a#down.still {
background-position: -180px 0px; } /*was -441 */

#wrap a {
	float:right;
	height:75px;
	text-indent:-10000px;
	position:relative;
	cursor:pointer;
	width:272px;
	margin: 0px 10px 0px 0px;

}
/*identity*/
	a.linkClass { background: url(../work/identity/thumb/mark1.jpg)  top left no-repeat;}

	a.linkClass2 { background:url(../work/identity/thumb/mark2.jpg) top left no-repeat;}
	
	a.linkClass3 { background:url(../work/identity/thumb/mark3.jpg) top left no-repeat;}
	
	a.linkClass4 { background:url(../work/identity/thumb/mark4.jpg) top left no-repeat;}
	
	a.linkClass5 { background:url(../work/identity/thumb/mark5.jpg) top left no-repeat;}
		a.linkClass6 { background:url(../work/identity/thumb/mark6.jpg) top left no-repeat;}
			
	/*identity*/
	/*experimental*/
		a.linkClass7 { background: url(../work/experimental/thumb/bond_thumb.jpg)  top left no-repeat;}

	a.linkClass8 { background:url(../work/experimental/thumb/fabrica_thumb.jpg) top left no-repeat;}
	
	a.linkClass9 { background:url(../work/experimental/thumb/fivecars_thumb.jpg) top left no-repeat;}
	
	a.linkClass10 { background:url(../work/experimental/thumb/kingkong_thumb.jpg) top left no-repeat;}
	
	a.linkClass11 { background:url(../work/experimental/thumb/moma_thumb.jpg) top left no-repeat;}
		a.linkClass12 { background:url(../work/experimental/thumb/multi_thumb.jpg) top left no-repeat;}
			a.linkClass13 { background:url(../work/experimental/thumb/phono_thumb.jpg) top left no-repeat;}
	
	a.linkClass14 { background:url(../work/experimental/thumb/trailers_thumb.jpg) top left no-repeat;}
		a.linkClass15 { background:url(../work/experimental/thumb/quotes_thumb.jpg) top left no-repeat;}
	/*experimental*/
	
	/*interactive*/
			a.linkClass16 { background: url(../work/interactivemotion/thumb/ocs_thumb.jpg)  top left no-repeat;}

	a.linkClass17 { background:url(../work/interactivemotion/thumb/grotto_thumb.jpg)  top left no-repeat;}	
	a.linkClass18 { background:url(../work/interactivemotion/thumb/hotelchev_thumb.jpg)  top left no-repeat;}	
	a.linkClass19 { background:url(../work/interactivemotion/thumb/lod_thumb.jpg)  top left no-repeat;}	
	a.linkClass20 { background:url(../work/interactivemotion/thumb/pak_thumb.jpg)  top left no-repeat;}
	a.linkClass21 { background:url(../work/interactivemotion/thumb/fuel_thumb.jpg)  top left no-repeat;}			
	a.linkClass22 { background:url(../work/interactivemotion/thumb/gemostro_thumb.jpg)  top left no-repeat;}	
	a.linkClass23 { background:url(../work/interactivemotion/thumb/gems_thumb.jpg)  top left no-repeat;}	
	
	/*interactive*/
	
	
	a:hover {background-position:left bottom;}
	a.open {background-position:left bottom !important;}


/* WORK PAGINATION */
#bar {
	width: 500px;
	float: left;}
#contentwrap #pagination-wrap { 
	width: 100%; 
	float: left;
	clear: both;
	overflow: hidden; 
	 }
	
#contentwrap #pagination { 
	float: left;
	left: 50%;
	margin: 0 auto;
	padding: 4px 0px 0px 30px;
	position: relative; 
	}	
#contentwrap #pagination-wrap #pagination li { 
	float: left;
	position: relative;
	right: 50%;
	margin-right: 1px; }
#contentwrap #pagination-wrap #pagination a {
	font-size: 9px;
	margin-right: 2px;
	height: 15px;
	width: 10px;
	line-height: 15px;
	padding-left: 4px;
	float: left;
	color: #FFF;
	text-decoration: none;
	background: url(../imgs/pagination.png) 0 3px no-repeat; text-indent: -999px; }
#contentwrap #pagination-wrap  #pagination a:hover {
	background-position: -14px 3px; text-indent: -999px; }
#contentwrap #pagination-wrap #pagination a.activeSlide { background-position: -30px 3px; text-indent: -999px;}

#contentwrap .work-photos { 
    height:  385px;  
    width:   615px;  
    padding: 0;  
	overflow: hidden;
    margin:  0; } 
#contentwrap .work-photos div{
	position: relative; }


.work-photos div p {
	position: absolute;
	top: 349px;
	left: 0;
	padding: 10px;
	width: 595px; 
	color: #c4c4c4;
	background: url(../imgs/transparent.png) ;
	}
.work-photos img {  
    height:  385px;  
    width:   615px;  
    top:  0; 
    left: 0;  }	
#work-photos-navigation { 
	clear: left; 
	width: 591px;   
	padding: 8px 12px 15px; 
	background: url(../imgs/slideshow_bar.png) no-repeat scroll;
	/*background: #222;*/
	float: left; 
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 9px; 
	list-style-type: none;
	margin-bottom: 5px; }


#work-photos-navigation li {
	line-height: 15px; } 
#work-photos-navigation li.next { 
	float: right;
 }
#work-photos-navigation li.previous { 
	float: left;
	 }
	 
	
#work-photos-navigation li a { 
	color: #999;
	text-decoration: none; 
	}
	
#work-photos-navigation li.previous a:hover { 
	color: #999; }
#work-photos-navigation li.next a:hover { 
	color: #999; }
	
/* END WORK */

/*RIGHT CONTACT*/
.contact_info {
	border-top: 1px solid #666666;
	float: left;
	padding-top:10px;
	width: 295px;

	 }
	.contact_info h3 {
	float:left;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size:9px;
	margin:0 0 0px;
	width:180px;
	font-style: normal;
	font-weight: normal;
	margin-top: 5px;
	margin-bottom: 5px;
	text-transform: uppercase;
	line-height:14px;
	color:#999;
	}
	 
.contact_info dl{
	width: 295px;
	margin:5px 0;
	border-bottom: 1px solid #666666;
	float: left;
	padding-top:10px;
	line-height:14px;
	font-size: 9px;
	text-transform: uppercase;
	
	 }
.contact_info dt {
	
	color:#999;
	float:left;
	margin-bottom:7px;
	
	}

.contact_info dd {
	float:right;
	margin-bottom:7px;
	}
	
.contact_info ul {
	margin:5px 0;
	border-bottom: 1px solid #666666;
	float: left;
	padding-top:10px;
	line-height:14px;
	font-size: 9px;
	text-transform: uppercase;
	width: 295px;
	}

	.contact_info li {
	color:#999;
	margin-bottom:7px;
	
	}
	a.twitter, a.flickr, a.lastfm {
	display:block;
	line-height:16px;
	padding-left:20px;
	width: 140px;
	
	}
	a.twitter{
	background:transparent url(../imgs/twitter.jpg) no-repeat scroll 0 -16px;
	}
	a.twitter:hover{
	background-position: 0 0;
	}
	
	a.flickr{
	background:transparent url(../imgs/flickr.png) no-repeat scroll 0 -16px;
	}
	
	a.flickr:hover{
	background-position: 0 0;
	}
	a.lastfm{
	background:transparent url(../imgs/lastfm.png) no-repeat scroll 0 -16px;
	}
	
	a.lastfm:hover{
	background-position: 0 0;
	}

	
/* LEFT CONTACT */

#left_hello{
border-top:1px solid #666666;
float:left;
margin-right:20px;
padding-top:10px;
padding-bottom:10px;
width:150px;
position:relative;
}

#right_hello{
border-top:1px solid #666666;
float:left;
margin-right:0;
padding:10px 0 10px;
width:450px;
position:relative;
	
}
#right_hello h4{
	font-size: 9px;
	color: #999;
	font-family:"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	margin-bottom: 15px;
	margin-top: 5px;
	line-height:14px;


}

/*
FORM
#contact_form{
	border-top:1px solid #666666;
	float: left;
	margin-top:10px;
}
#contact_form h2{
	
	margin-top:10px;
}

.note {
float:left;
font-size:9px;
left:20px;
line-height:14px;
margin-bottom:15px;
margin-top:5px;
position:relative;
top:50px;
width:145px;


}


form table{width:100%;}
form span{display:block;padding:1px;border:1px solid #EEE;}
form input{font-size:10px;vertical-align:middle;
-moz-border-radius: 3px;
margin: 3px;
border: 1px solid #999999; 
border-top-color: #CCCCCC; 
border-left-color: #CCCCCC; 

color: #333333; 
}
label{font-weight:normal;text-transform:uppercase;font-size:9px;}
form span input,form span textarea,form span select{
	margin:0;
	font-size:10px;
	font-family:inherit;
	width:100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	color:#999;
	padding:2px;
	background-color:#DDD;
	border:1px solid #C3C3C3;
	border-top-color:#7C7C7C;
	border-bottom-color:#DDD;
	-moz-border-radius: 3px;
	
	}
	
	form span input:focus,form span textarea:focus,form span select:focus{color:#666;background-color:#FFF;}
	form span.inline{
	display:inline-block;float:left;width:auto;margin-top:5px;margin-right:4px;
	}
	form span.inline input{width:auto;border:none;background-color:transparent !important;}
	
	form{
	width:384px;font-size:9px;position:relative;
	margin:0px;
	text-transform:uppercase;
	}

	form td{padding-left:12px;}
	form td:first-child{padding-left:0;}
	#comment_body,#contact_form_msg{height:240px;}
	.btn-row{position:relative;line-height:24px;padding-top:3px;}

	input.over:hover {
	opacity:0.5;
	}

.notification_error
{
border: 1px solid #A25965;
height: auto;
width: 90%;
padding: 8px;
background: #F8F0F1;
text-align: left;
-moz-border-radius: 5px;
margin-bottom: 20px;
}

.notification_ok
{
border: 1px #567397 solid;
height: auto;
width: 90%;
padding: 8px;
background: #f5f9fd;
text-align: center;
-moz-border-radius: 5px;
}
*/


/*FOOTER*/
	
#footer, .push {
     height: 100px; }
     
#footer{
	color:#999;
	margin:0 auto;
	font-size:9px;
	clear:both;
}
	#footer p{
		font-size: 9px;
		float:right;
		margin-top: 50px;
		margin-right: 19px;
	}
		#footer p div{
			float:none;
		}
	
	#footer p.paloma{
		float:right;
		color:#999;
		line-height:20px;
		
	}
	
	#footer p.blog_link{
		float: left;
		background: url(../imgs/blog_link.png) no-repeat scroll 13px -2px;
		display: block;
		line-height:20px;
		width: 80px;
	}
	
	
#footer a p.blog_link:hover{
		float: left;
		background: url(../imgs/blog_link_over.png) no-repeat scroll 13px -2px;
		display: block;
		line-height:20px;
		
	}