/* ------------------------------------------------------------------------------------------------
	* FONT FACE
*/


/* first for IE 4–8 */
@font-face {
  font-family: DINWeb;
  src: url("DINWeb.eot");
  font-weight: 400;
}

/* then for WOFF-capable browsers */
@font-face {
  font-family: DINWeb;
  src: url("DINWeb.woff") format("woff");
  font-weight: 400;
}


/* first for IE 4–8 */
@font-face {
  font-family: DINWeb;
  src: url("DINWeb-Light.eot");
  font-weight: 200;
}

/* then for WOFF-capable browsers */
@font-face {
  font-family: DINWeb;
  src: url("DINWeb-Light.woff") format("woff");
  font-weight: 200;
}

/* define which elements use this font */

.main-heading, #contact-info h2, #project-sort h2, .person h1, #public-menu a, #project-sort a, #public-info, #contact-info p, .person h2, .project-title, .layout-a h2, .layout-a h3, .layout-b h2, .layout-b h3 {
	font-family: DINWeb, sans-serif;
}

.main-heading, .person h1 {
	font-weight: 200;
}



/* ------------------------------------------------------------------------------------------------
	* GENERIC STYLES
*/
html, body {
	width: 100%;
	min-width: 800px;
	background-color: #F2F2F0;
	font-family: Arial,Helvetica,Verdana,sans-serif;
	font-size: 100%;
    line-height:1.125em; /* 16×1.125=18 */
    color: #333333;
}

a, a:link {
	text-decoration: none;
	color:  #000;
	outline: none;
}
	
a:visited {
	color:  #000;
}

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

a:active {
	color:  #000;
}

.main-heading {
	text-transform: uppercase;
	font-size: 1.35em;
}

/*.hand-cursor {
	cursor: pointer;
	cursor: hand;
} */

#overlay-body{
	position:fixed;
	z-index: 5;				/* Place the new body above the background image */
	overflow:hidden; 			/* restore scrollbars for the content */
	height:100%;width:100%;	/* Make the new body fill the screen */
	min-height: 580px;
	min-width: 700px;
}


/* ------------------------------------------------------------------------------------------------
	* PUBLIC HEADER / MAIN NAV STYLES
*/
#public-head {
	width: 100%;
	min-width: 550px;
	height: 34px;
	background-color: #000;
	color: #fff;
	overflow: hidden;
	clear: both;
	position: fixed;
	z-index: 999;
}

/* ######################################
	* SPECIFIC FONT FORMATTING
	- public-head
*/
#public-head {
	font-size: 0.75em;
}

#public-head h1 {
	width: 115px;
	height: 34px;
	float: left;
	background: #000 url(/_assets/img/public-logo.jpg) no-repeat scroll 0 0;
}

#public-head h1 a {
	display: block;
	width: 115px;
	height: 34px;
	overflow: hidden;
	text-indent: -999px;
}

#public-head a, #public-head a:link {
	text-decoration: none;
	color:  #fff;
	outline: none;
}
	
#public-head a:visited {
	color:  #fff;
}

#public-head a:hover {
	color: #f00;
}

#public-head a:active {
	color:  #fff;
}

#public-menu {
	float: left;
}

#public-menu a {
	text-transform: uppercase;
}


#public-menu li {
	float: left;
	width: 50px;
	padding: 8px 20px 0 0;
}

#public-info {
	position: absolute;
	right: 15px;
	padding-top: 8px;
}


/* ------------------------------------------------------------------------------------------------
	* PAGE BODY STYLES
*/

#page-body {
	padding-top: 50px;
	overflow: hidden;
}
	#body-project #page-body {
		overflow: visible;
	}

	.project-listings {
		min-width: 696px;/*928px*/;
		margin-left: 15px;
	}
	
	.studio {
		min-width: 1125px;
	}
	
	.contact {
		color: #fff;
	}
	
	.project-single {
		margin-left: 20px;
		overflow: visible;
	}



/* ------------------------------------------------------------------------------------------------
	* HOME/LANDING PAGE
*/

.entry {
	width:100%;
	position: relative;
	overflow: hidden;
}

.entry-bg {
	position: absolute;
	z-index: 1;
}

.entry-content {
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
}

.entry-content-wrapper {
	position: absolute;
	overflow-x: hidden;
}

/* ######################################
	* LAYOUT-A FORMATTING
	- h2, h3 - black header with DIN font
	- p, a - white text
*/
.layout-a {
	padding: 15px;
	padding-bottom: 5px;
	background: transparent url(/_assets/img/red-back.png) repeat scroll 0 0;
}

.layout-a h2, .layout-a h3 {
	color: #000;
	font-size: 1.15em;
	text-transform: uppercase;
	margin-bottom: 15px;
}

.layout-a p {
	color: #fff;
	font-size: 0.8em;
	line-height: 1.3em;
	margin-bottom: 10px;
}

.layout-a a.learn-more, .layout-a a.learn-more:link {	
	font-size: 0.8em;
	text-transform: uppercase;
	color: #fff;
	display: block;
	padding-top: 10px;
}

.layout-a a.learn-more:hover {
	color: #000;
	text-decoration: none;
}


.layout-a a, .layout-a a:link {
	text-decoration: none;
	color:  #CCC;
	outline: none;
}
	
.layout-a a:visited {
	color:  #CCC;
}

.layout-a a:hover {
	color: #CCC;
	text-decoration: underline;
}

.layout-a a:active {
	color:  #CCC;
}





/* ######################################
	* LAYOUT-B FORMATTING
	- h2, h3 - white header with DIN font
	- h2.red-back, .layout-b h3.red-back - add red background to text
*/

.layout-b h2, .layout-b h3 {
	color: #fff;
	font-size: 4.0em;
	font-weight: 200;
	line-height: 1.3em;
	text-transform: uppercase;
	padding: 0 10px;
	margin-bottom: 10px;
}

.layout-b h2.red-back, .layout-b h3.red-back {
	float: left;
	background: transparent url(/_assets/img/red-back.png) repeat scroll 0 0;
}

.layout-b br.clear-fix {
/* .layout-b .red-back br { */
	clear: left;
}

.layout-b h2 a, .layout-b h2 a:active, .layout-b h2 a:visited {
	color: #fff;
}
.layout-b h2 a:hover {
	color: #fff;
	text-decoration: underline;
}


/* ------------------------------------------------------------------------------------------------
	* PROJECT LISTING'S
*/
#project-nav {
	overflow: hidden;
	clear: left;
	margin-bottom: 23px;
	color: #fff;
}

#project-nav h1 {
	float: left;
	width: 199px; /* 209-10 padding */
	height: 57px;
	background-color: #f00;
	padding: 10px 0 0 10px;
}

#project-sort {
	float: left;
	margin-left: 6px;
}

#project-sort h2 {
	width: 453px; /* 458 - 5 padding */
	height: 21px;
	padding: 15px 0 0 5px;
	margin-bottom: 6px;
	background-color: #f00;
	text-transform: uppercase;
}

#project-sort ul {
	/* no rules set */
}

	#project-sort li {
		margin-right:6px;
		list-style: none none;
		float: left;
		width: 110px; /* (458 - 3x6px margin) / 4 */
		height: 25px;
	}
	
	#project-sort li a, #project-sort li a:link {
		height: 20px;
		padding: 5px 0 0 5px;
		display: block;
		background-color: #ccc;
		color: #000;
		text-decoration: none;
		text-transform: uppercase;
	}
	
	#project-sort li a:visited {
		/* same as above */
	}
	
	#project-sort li a:hover {
		background-color: #f00;
		color: #fff;
	}
	
	#project-sort li a:active {
		/* same as above */
	}

	#project-sort li a.active {
		background-color: #f00;
		color: #fff;
	}


.project {
	width: 209px;
	height: 148px;
	margin: 0 23px 23px 0;
	float: left;
	background: #ccc no-repeat scroll 0 0;
}

.project .img-grayscale {
	position: absolute;
	z-index: 7;
	width:209px;
	height:114px;
	overflow: hidden;
}

.project .img-color {
	position: absolute;
	width:209px;
	height:114px;
	z-index: 8;
	/*display:none;*/
}

.project-title {
	position: absolute;
	z-index: 9;
	width: 209px;
	height: 148px;
}

.project-title a, .project-title a:link {
	display:block;
	padding: 120px 0 8px 8px;
	height: 20px;
	text-transform: uppercase;
	line-height: 1.0em;
	vertical-align: bottom;
}

.project-title a:visited {}
.project-title a:hover {
	text-decoration: none;
	color: #000;
}
.project-title a:active {
	color: #000;
}

.project-over {
	/*background-color: #f00;*/
	color: #000;
}
	

/* ######################################
	* SPECIFIC FONT FORMATTING
	- project-sort
	- project-title
*/
#project-sort h2, #project-sort a { font-size:  0.75em; }
.project-title { font-size:  0.75em; }

.data {
	visibility: hidden;
}


.separator {
	background: #f00;
}
.separator a:visited,
.separator a, 
.separator a:hover, 
.separator a:active {
	text-decoration: none;
	color: #fff;
}


/* ------------------------------------------------------------------------------------------------
	* PROJECT SINGLE
*/
#project-images {
	position:absolute;
	z-index: -1;
}

#project-images ul {
    left: 0;
    overflow: hidden;
    position: relative;
    visibility: visible;
    z-index: 2;
}

#project-images li {
	margin-right: 6px;
	float: left;
}

#project-images li:last-child {
	margin-right: 0;
}

#project-details {
	width: 617px;
	background: transparent url(/_assets/img/wht.png) repeat scroll 0 0;
	padding: 10px;
	padding-bottom: 0;
	overflow: hidden;
}

#project-details h1 {
	padding-bottom: 10px;
}

#project-info ul {
	float: left;
	width: 50%;
}

	#project-info ul li p {
		display: inline;
	}

#project-expand {
	clear: left;
	padding: 10px 0;
}

#project-expand a.learn-more, #project-expand a.learn-more:link {
	display: block;
	padding-left: 18px;
	height: 13px;
	background: transparent url(/_assets/img/open-close-icon.png) no-repeat scroll 0 -13px;
	color: #666;
}

#project-expand a.learn-more:visited {}
#project-expand a.learn-more:hover { color: #f00; text-decoration: none; }
#project-expand a.learn-more:visited {}


#project-desc {
	display: none;
	padding: 20px 0 30px 0;
	border-top: 1px dashed #f00;
	overflow: hidden;
}

#project-desc p {
	width: 280px;
	padding-right: 20px;
	float: left;
}

#project-icon {
	width: 60px;
	height: 60px;
	background: transparent url(/_assets/img/project-icon.png) no-repeat scroll 0 0;
	position: absolute;
	left: 627px;
	margin-top: -30px;
}
	
	
/* ######################################
	* SPECIFIC FONT FORMATTING
	- #project-info
	- project-desc
*/
#project-info { font-size: 0.7em; line-height: 1.3em; color: #666; }
#project-desc { font-size: 0.7em; line-height: 1.3em; }

.drop-shadow {
   -webkit-box-shadow:	5px 5px 10px rgba(0, 0, 0, 0.3);
   -moz-box-shadow:		5px 5px 10px rgba(0, 0, 0, 0.3);
   box-shadow:			5px 5px 10px rgba(0, 0, 0, 0.3);
}


/* ------------------------------------------------------------------------------------------------
	* STUDIO PAGE
*/
#studio-details {
	width: 559px;
	float:left;
/* 	margin-bottom: 6px; */
}

#studio-people {
	width: 545px;
	margin: 66px 15px 0 6px;
	float:left;
	background: transparent url(/_assets/img/wht.png) repeat scroll 0 0;
}

#studio-details h1 {
	margin: 0 0 6px 15px;
	padding: 10px 0 0 10px;
	height: 50px;
	background: transparent url(/_assets/img/wht.png) repeat scroll 0 0;
}

#studio-info {
	margin: 0 0 6px 15px;
	background: transparent url(/_assets/img/wht.png) repeat scroll 0 0;
	padding: 10px;
	height: 206px; /* NOTE - hard coded height so if content changes may need to change */
	/* 420px (total height) - [#studio-folks.height+20padding + 6margin + 20padding] */
	overflow: hidden;
}
	#studio-info .spacer {
		display: block;
		height: 10px;
	}
	/*.studio-column {
		float: left;
		width: 50%;
	}*/
	#studio-info p {
		float:left;
		width:242px;
	}	
	#studio-info p:first-child {
		margin-right:25px;
	}
	#studio-info p:last-child {
		margin-right:5px;
	}

#studio-folks {
	margin: 0 0 6px 15px;
	padding: 10px;
	height: 168px; 
	/* NOTE - hard coded height so if content changes may need to change => 14px per line */
	/* 12 staff => 168 ; 11 => 154 ;  10 => 140 */
	background: transparent url(/_assets/img/wht.png) repeat scroll 0 0;
}
	.staff-name {
		text-transform: uppercase;
	}
	#studio-folks a.active {
		color: #f00;
	}

.person {
	padding: 15px;
	background: transparent url() no-repeat scroll 270px 15px;
	min-height: 390px;
	display: none;
}
	.person h1 {
		padding: 4px 27px 0 0;
		/* background: transparent url(/_assets/img/person-icon.png) no-repeat scroll right 0; */
		float: left;
		text-transform: uppercase;
	}
	.person h2 {
		clear: left;
		text-transform: uppercase;
	}
	
#people-icons {
	width: 1094px;
	height: 64px;
	margin: 0 0 6px 15px;
	clear: both;
}
	#people-icons ul {
		width: 1094px; /* (total staff)*42 + (total staff - 1)*6 = 570 [THIS LINE NEEDS TO BE REVISED WHEN STAFF IS ADDED/REMOVED] */ 
		height: 64px;
		margin: 0 auto;
	}
	#people-icons li {
		list-style: none none;
		float: left;
		width: 42px;
		height: 64px;
		margin-left: 6px;
	}
	#people-icons li:first-child {
		margin-left: 0;
	}
	#people-icons a {
/* 		text-indent: -999px; */
		overflow: hidden;
		display: block;
		height: 64px;
		text-transform: uppercase;
	}
	#people-icons img {
		position: absolute;
		width: 42px;
		height: 64px;
		z-index: 8;
	}
/*
	#people-icons a.active {
		background: transparent url(/_assets/img/person-icon-down.png) no-repeat scroll center 45px;
	}
	#people-icons a:hover {
		background: transparent url(/_assets/img/person-icon-down.png) no-repeat scroll center 45px;
	}
*/
	
/* ######################################
	* GENERIC FONT FORMATTING
	- studio
	- person
*/
.studio h1, .studio h2 {
	margin-bottom: 5px;
}
.studio p {
	margin-bottom: 10px;
}

.person h2, .person p {
	padding-right: 280px;
}

/* ######################################
	* SPECIFIC FONT FORMATTING
	- studio-info
	- studio-folks
	- person
*/
#studio-info p { 
	font-size: 0.7em; 
	line-height: 1.25em; 
}
#studio-folks li { 
	font-size: 0.7em; 
	line-height: 1.25em; 
}
.person h1 { font-size: 1.35em; line-height:auto; }
.person h2 { font-size: 0.65em; line-height: 1.25em; } 
.person p { font-size: 0.7em; line-height: 1.25em; }



/* ------------------------------------------------------------------------------------------------
	* CONTACT PAGE
*/
#contact-details {
	width: 637px;
}

#contact-details h1 {
	margin: 0 0 6px 15px;
	padding: 10px 0 0 10px;
	height: 50px;
	background: transparent url(/_assets/img/blk.png) repeat scroll 0 0;
}

#contact-info {
	margin: 0 0 6px 15px;
	height: 128px;
	background: transparent url(/_assets/img/public-map-2011-12-15.png) no-repeat 0 -20px;
	padding: 10px;
}

#contact-folks {
	margin: 0 0 0 15px;
	background: transparent url(/_assets/img/blk.png) repeat scroll 0 0;
	padding: 10px;
}

.contact a, .contact a:link {
	text-decoration: none;
	color:  #fff;
	outline: none;
}
	
.contact a:visited {
	color:  #fff;
}

.contact a:hover {
	color: #f00;
	text-decoration: none;
}

.contact a:active {
	color:  #fff;
}


/* ######################################
	* SPECIFIC FONT FORMATTING
	- contact-info
	- contact-folks
*/
#contact-info h2, #contact-info p {
	margin-bottom: 5px;
	font-size: 0.7em;
	line-height: 1.25em;
}

#contact-folks li { 
	font-size: 0.7em; 
	line-height: 1.25em;
}
	


/* FULLSCREENR STYLES */

body.body-contact, 
body.body-projects,
body.body-error {
	overflow:hidden; 		/* needed to eliminate scrollbars caused by the background image */
	padding:0;margin:0;		/* necesarry for the raster to fill the screen */
	height:100%;width:100%;
}

#bgimg {
	position:absolute;
	z-index: -1;
}

#realBody{
	position:absolute;
	z-index: 5;				/* Place the new body above the background image */
	overflow:auto; 			/* restore scrollbars for the content */
	height:100%;width:100%;	/* Make the new body fill the screen */
}