
/* --- fonts --- */


/* GuildDIN */
/*
@font-face {
	font-family: GuildDINReg;
	font-style: normal;
	font-weight: normal;
	src: url('assets/fonts/GDINProRegular.eot?') format('eot'), url('assets/fonts/GDINProRegular.ttf') format('truetype');
}

@font-face {
	font-family: GuildDINReg;
	font-style: normal;
	font-weight: bold;
	src: url('assets/fonts/GDINProBold.eot?') format('eot'), url('assets/fonts/GDINProBold.ttf') format('truetype');
}


@font-face {
	font-family: GuildDINBold;
	font-style: normal;
	font-weight: normal;
	src: url('assets/fonts/GDINProBold.eot?') format('eot'), url('assets/fonts/GDINProBold.ttf') format('truetype');
}

@font-face {
	font-family: GuildDINLight;
	font-style: normal;
	font-weight: normal;
	src: url('assets/fonts/GDINProLight.eot?') format('eot'), url('assets/fonts/GDINProLight.ttf') format('truetype');
}
*/


/* - setup and utility - */

* {
	margin:0px;
	padding:0px;
}


html {
	width:100%;
	height: 100%;
}

body {
	background-color: #FFFFFF;
	width:100%;
	height: 100%;
	overflow: auto;
	font-family: Helvetica, Arial, sans-serif;
	font-size:12px;
	color: #000000;
}

img {
	border: none;
	vertical-align: middle;
}

a {
	color: inherit;
	text-decoration:none;
	outline: none;
	/*font-weight: normal;*/
	cursor: pointer;
}

a:hover {
	text-decoration:none; 
	color:#009ddc;
	/*font-weight: normal;*/
}

.clearing_div {
	clear:both;
	font-size: 0px;
	line-height: 0px;
}

.hidden{
	display: none;
}

.vCenterA {
    display: table;
    height: 100%;
}

.vCenterB {
    display: table-cell;
    vertical-align: middle;
}

.centered{
	margin-left: auto;
	margin-right: auto;
}

.bold{
	font-weight: bold;
}



/* - general structure classes - */

/* - site width - */
/*
	width: 828px
	content width: 732px
	double margins on either side: 24px
*/
#scroll_box, .container, .content_container{
	width: 828px;
}

#stage, #header, .section, .section_bg, #white_wash{
	min-width: 828px;
}


.paralax_layer{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
}

.section, .section_bg{
	width: 100%;
	position: absolute;
}

.section{
	padding: 125px 0px 0px 0px;/*190px 0px 40px 0px;*/
	height:100%;
}

.container{
	position: relative;
	
	/*width: 828px;*/
	margin-left: auto;
	margin-right: auto;
}

.content_container{
	position: relative;
	
	/*width: 828px;*/
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.content_wrapper{
	position: relative;
	/*
	padding-top: 65px;
	padding-bottom: 60px;
	*/
	padding: 65px 0px 60px 48px;
}

.coord_set{
	position: relative;
}

/* - main nodes - */

#scroll_box{
	/*width: 1024px;*/
	height: 101%;/*22000px;/*12000px;/*3132px; */
}

#loading_layer{
	width:100%;
	height: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 3;
}

#stage{
	width:100%;
	/*min-width: 1024px;*/
	height: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 1;
	display: none;
}

#content_layer{
	position: absolute;
	left: 0px;
	top: 0px;
}

#header{
	display: none;
	background-color: transparent;
	background: url(assets/headerBGTile.png) repeat-x;
	background-position: 0px 112px;/*28px;*/
	width:100%;
	height: 150px;/*66px;*/
	overflow: visible;
	position: fixed;
	left: 0px;
	top: 0px;/*84px;*/
	z-index: 2;
	
}


/* - loading - */

#loading_logo{
	padding-top: 86px;
} 

#loading_animation{
	position: absolute;
	left: -1px;
	top: 168px;
} 

.image_load_layer{
	background: url(assets/FFFFFF_A69.png) repeat;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#no_js{
	position: absolute;
	left: 0px;
	top: 100px;
	width: 100%;
	text-align: center;
}

/* - header bar - */
.logo{
	position: absolute;
	left: 325px;/* 828/2 - 92 */
	top: 86px;/*0px;*/
	
}

#logo_a{
	position: absolute;
	left: 0px;
	top: -22px;
}

.logo_color{
	position: absolute;
	left: -1px;
	top: 29px;
}

.logo_hit_area{
	width: 179px;
	height: 56px;
}

#logo_outline{
	display: none;
	position: absolute;
	left: -2px;
	top: 28px;
}

#menu_smudge{
	position: absolute;
	left: 237px;
	top: 4px;
	
}

#menu{
	position: absolute;
	top: 112px;/*28px;*/
}


#plus_who{
	display: none;
	position: absolute;
	left: 22px;/*width: 23px*/
}
#who_btn{
	position: absolute;
	left: 45px;
}

#plus_work{
	display: none;
	position: absolute;
	left: 176px;
}
#work_btn{
	position: absolute;
	left: 199px;
}

#plus_talent{
	display: none;
	position: absolute;
	left: 547px;
}
#talent_btn{
	position: absolute;
	left: 570px;
}

#plus_where{
	display: none;
	position: absolute;
	left: 690px;
}
#where_btn{
	position: absolute;
	left: 713px;
}







/* --- layer elements --- */

#white_wash{
	background-color: #FFFFFF;
	position: fixed;
	top: 125px;
	width: 100%;
	height: 100%;
	
}

#white_wash_pg0{
	top: 0px;
	height: 125px;
}

.layer_element{
	position: absolute;
}

/* - pg 0 - */
#pg0_lr1_0{
	left: -215px;
	top: -61px;
}

#pg0_lr2_0{
	left: 400px;
	top: 79px;
}


/* - pg 1 - */
#pg1_lr0_0{
	left: -142px;
	top: 25px;/* 450 */
}

#pg1_lr1_0{
	left: -116px;
	top: -176px;/*-226px;*/
}

#pg1_lr2_0{
	left: -225px;
	top: 289px;
}



/* - pg 2 - */
#pg2_lr4_0{
	left: -295px;
	top: -109px;
}

#pg2_lr1_0{
	left: 399px;/*495px;/*561px;/*361px;*/
	top: -229px;/*-225px;/*-84px;/*-34px;*/
}

#pg2_lr1_1{
	left: -900px;/*-1300px;/*-1200px;*/
	top: 120px;/*150px;/*300px;*/
}

#pg2_lr2_0{
	left: -440px;/*-493px;/*-760px;/*-542px;/*-383px;*/
	top: 220px;/*280px;/*351px;/*60px;*/
}

#pg2_lr2_1{
	left: 600px;
	top: 450px;
}



/* - pg 3 - */
#pg3_lr5_0{
	left: -492px;/*-571px;/*-631px;/*-471px;*/
	top: 595px;/*660px;/*460px;/*320px;/*220px;/*125px;*/
}

#pg3_lr2_1{
	left: -507px;/*-436px;/*-595px;/*-650px;*/
	top: -6px;/*-3px;/*-15px;*/
}

#pg3_lr2_0{
	left: 575px;/*203px;/*-105px;*/
	top: 36px;/*-86px;/*-94px;*/
}



/* - pg 4 - */
#pg4_lr1_0{
	left: 226px;
	top: -71px;
}







/* --- section parts --- */

/* - multi-page general purpose - */
.emphasized{
	font-weight: bold;
	text-transform: uppercase;
}

.title, .title_sub, .title_sub_sub{
	font-family: GuildDINBold;
	line-height: 110%;
}

.title{
	font-size: 30px;
}

.title_sub{
	font-size: 26px;
}

.title_sub_sub{
	font-size: 20px;
}

.overview_item{
	position: relative;
	float: left;
}

.overview_bw, .overview_color{
	position: absolute;
	left: 0px;
	top: 0px;
}

.overview_color{
	display: none;
}

.over_image_label{
	background: url(assets/overImageBarBG.png) repeat-x;
	width: 100%;
	height: 37px;
	position: absolute;
	left: 0px;
	top: 70%;
	overflow: hidden;
	font-size: 11px;
}

.over_image_label_padding{
	padding: 4px 0px 0px 6px;
}
.work_over_image_label_padding{
	padding: 0px 0px 0px 6px;
	height: 100%;
}

.arrow{
	padding-bottom: 3px;
	margin: 0px 8px 0px 6px;
}

.left_image{
	margin: 0px 6px 0px 0px;
	vertical-align: bottom;
}

.specialcase_lemondrop{
	display: inline-block;
	width: 27px;
	height: 33px;
	background: url(assets/lemonDrop_rollover.png) no-repeat;
	background-position: top;
	margin-top: -4px;
	margin-bottom: -4px;
}

a:hover .specialcase_lemondrop{
	background-position: bottom;
}

.hit{
	background: url(assets/1x1_A0.png) repeat;/* hack for IE8 only registering mouseover over content and not the standard of in boundary */
	font-size: 0px;
	line-height: 0px;
}


/* - home - */
.home_colored{
	color: #162c54;
}

.home_section a:hover {
	color:#162c54;
}

#home_text{
	margin: 14px 0px 0px 0px;
}





/* - who - */
.who_colored{
	color: #b93995;
}

.who_section a:hover {
	color:#b93995;
}

#who_left_col{
	float: left;
	width: 464px;
	margin-right: 32px;
}

#who_right_col{
	float: left;
	width: 260px;
}

.who_sidebar{
	font-family: GuildDINLight;
	color: #808080;
	font-size: 42px;
	letter-spacing: -3px;
	line-height: 100%;
}





/* - work - */

.work_colored{
	color: #4ab969;
}

.work_section a:hover {
	color: #4ab969;
}

.work_overview_item, .work_overview_image{
	width: 240px;
	height: 240px;
}

.over_image_title_container{
	max-height: 27px;/*30px;*/
	overflow: hidden;
}

.over_image_description_container{
	float: left;
	width: 216px;
	height: 16px;
	overflow: hidden;
}

.work_overview_item{
	margin: 0px 6px 6px 0px;
}


.cover{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

.overview_cover{
	background: url(assets/FFFFFF_A85.png) repeat;
	display: none;
}

/* - project - */

#project_layer{
	position: absolute;
	left: 0px;
	top: 0px;
	display: none;
}

#project_content{
	background-color: #000000;
}

#project_main, #project_thumbnail_bar{
	width: 732px;
	font-size: 0px;
	line-height: 0px;
}

#project_main{
	height: 366px;
	position: relative;
}

#project_main_loading_layer{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
}

#video_player_container{
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

#project_close_btn{
	position: absolute;
	right: 0px;
	top: 0px;
}

#project_back_btn{
	position: absolute;
	left: -36px;
	top: 168px;
}

#project_next_btn{
	position: absolute;
	right: -36px;
	top: 168px;
}

#project_text{
	background: #ffffff url(assets/projects/project_textBar.png) repeat-x;
	width: 708px;/* 732 - padding (stupid css) */
	font-size: 11px;
	display: table-cell;
	vertical-align: middle;
	padding: 12px;
}

#project_thumbnail_bar{
	background: #040404 url(assets/projects/project_TNBar.png) repeat-x;
	min-height: 81px;/* 84-padding */
	padding-bottom: 3px;
}

.project_overview_item, .project_thumbnail_image{
	width: 78px;
	height: 78px;
}

.project_overview_item{
	margin: 3px 0px 0px 3px;
}

.selected_thumbnail{
	border: 1px solid #4ab969;
	margin: 2px -1px -1px 2px;/* because of the 1px border */
}


.video_icon{
	display: none;
}





/* - talent - */
.talent_colored{
	color: #fcaf17;
}

.talent_section a:hover {
	color:#fcaf17;
}

.talent_section .content_container{
	min-height: 458px;
}

#talent_left_col{
	position: absolute;
}

#talent_text{
	width: 156px;
}

#bios_coulmn{
	margin-left: 160px;
}

.talent_overview_item, .talent_overview_image{
	width: 140px;
	height: 160px;
}

.talent_overview_item{
	margin: 0px 4px 4px 0px;
}

.talent_section .over_image_label_padding{
	text-transform: uppercase;
	font-weight: bold;
}





/* - where - */
.where_section{
	color: #666666;/*#808080;*/
}

.where_colored{
	/*color: #08a0dd;*/
	color: #009ddc;
}

.where_section a:hover {
	color:#009ddc;
}

.where_strong_color{
	color: #000000;
}

.seperator{
	background-color: #dfdfdf;
	width: 732px;
	height: 2px;
}

.social_subsection{
	padding: 30px 0px 20px 0px;
	color: #808080;
}
/*
.location, .social_link{
	float:left;
	width: 244px;
}
*/
.three_col{
	float:left;
	width: 262px;
}

.three_col_last{
	float:left;
	width: 206px;
}

.two_col_location_left{
	float:left;
	width: 245px;/* 365 - padding */
	padding-left: 120px;
}

.two_col_location_right{
	float:left;
	width: 245px;/* same as two_col_location_left */
	padding-left: 90px;
}

.location{
	font-size: 14px;
}

.locations_subsection{
	padding: 40px 0px 40px 0px;
}

.jobs_subsection{
	padding: 25px 0px 0px 0px;
}

.where_job_title{
	font-size: 14px;
}

.where_job_email{
	font-size: 13px;
}

.job{
	margin: 25px 48px 25px 0px;
}

