@import 'reset.css';


/*********
 **************** Backgrounds and Widths *****************
                                                 ********/
body, #content, #masthead, #footer, #logo, #logo a, .origami{
	background-position: 65% 0;
	background-repeat: no-repeat;
}

.constrained{
	max-width: 1016px;
	min-width: 862px;
	margin-left: auto;
	margin-right: auto;
}


#content, #footer{ 
	padding: 40px 22px;
	max-width: 972px; /* .constrained - padding = 1016-44 */
	min-width: 818px;
}


/*********
 ******************** Full Document Styles *******************
                                                      ********/
body{
	background-color: #fff;
	font-family: "Arial Narrow", Arial, Helvetica, Verdana, sans-serif;
	font-size: 10pt;
	line-height: normal;
	color: #666;
	
}

a{
	color: #000;
	text-decoration: none;
}

h1,h2{
	font-weight: bold;
	text-transform: capitalize;
	font-size: 1.5em;
	line-height: normal;
	margin-bottom: .5em;
	color: #999;
}

h3{
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.6em;
}

h4{
	font-weight: bold;
}

h1 strong,
h2 strong,
h3 strong,
h4 strong{
	font-weight: normal;
}

#content ul li{
	list-style-type: disc;
	margin-left: 20px;
}

#content ul ul{
	margin-top: 4px;
}

#content li li{
	list-style-type: circle;
}

#content ul{
	margin-bottom: 20px;
}

#secondary-nav ul ul{
	margin-bottom: 10px;
	margin-top: 10px;
}

#content .outlinks li{
	list-style-image: url(/images/listmarker.gif);
	list-style-type: none;
	list-style-position: inside;
}

p{
	margin-bottom: 1em;
}

blockquote{
	margin: 0 2em;
}

.lower{
	text-transform: lowercase !important;
}

.introduction{
	margin-bottom: 27em;
}

.divider{
	padding-top: 3em;
}

/***********
 *********************** Regions *************************
                                                 *********/


/******* Header **********/
#logo{
	padding-top: 40px;
	background-color: #fff;
	line-height: normal;
}

#logo a{
	display: block;
	width: auto;
	background-color: #fff;
}

#logo .studio1011{
	background-image: url(/images/studio1011.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	text-indent: -9999em;
	display: block;
	width: 239px;
	height: 57px;
	line-height: 57px;
}


/********* Top content ****************/

#masthead, .origami{
	background-image: url(/images/bg_origami_gray.jpg);
	background-color: #000;
	margin-top: 5px;
}

#masthead .constrained{
	position: relative
}


#secondary-nav{
	padding: 40px 650px 0px 22px;
	height: 322px; /* Flash height + Flash offset - (logo height + logo padding + border + nav padding) = 419 + 43 -(57+40+5+40) */
	color: #fff;
	line-height: 33px;
	text-transform: capitalize;
}

#secondary-nav .selected{
	list-style-image: url(/images/thispage.png);
}

#secondary-nav a{
	color: #fff;
	font-weight: bold;
}

#secondary-nav .description{
	display: block;
	padding-bottom: 1em;
	line-height: normal;
}

#secondary-nav li:hover span{
}

#secondary-nav.compressed{
	line-height: 20pt;
}

#media,
#mediawrapper{
	position: absolute;
	z-index: 1;
	width: 635px;
	right: 0px;
	top: -57px; /* logo padding + logo height + border = 40 + 57 + 5 */
}

#mediawrapper{
	height: 419px;
}

#primary-nav{
	float: right;
	margin-top:40px;
}

#primary-nav li{
	padding-left: 10px;
	display: block;
	float: left;
}

#primary-nav li ul{
	display: none;
}

#primary-nav li:hover ul,
#primary-nav li.hover ul{
	display: block;
}

#primary-nav li li{
	float: none;
}

/************** Media replacement styles **********/
#media-replacement img{
	margin-top: 30px;
}

.main-solutions #media-replacement img{
	margin-top: 0px;
}

/*********** Internal nav *********************/


.nav-internal{
	text-align: right;
	float: right;
	margin-top: 3em;
}

.nav-internal li{
	display: inline;
	list-style-type: none;
	padding: 0;
}

.nav-internal li a{
	padding-left: 13px;
}


.nav-internal .current,
.nav-internal a:hover,
.nav-internal a.hover{
	background-image: url(/images/thispage_black.png);
	background-repeat: no-repeat;
	background-position: left center;
}

/*********** Body content *********************/
#content{
}


/************ Footer ************************/
#footer{
	margin-top: 22px;
	font-size: .8em;
	line-height: 15pt;
	text-align: center;
}

#footer p{
	display: inline;
	margin: 0;
}

#footer #address, #footer #copyright{
	color: #999;
	padding-left: 10px;
}



/***********
 ******************** Unique styles **********************
                                                 *********/

/******* New Home Page *********/

.newhome #footer{
	padding-top: 0;
}

.newhome #footer p{
	display: inline;
	margin-right: 22px;
}

.newhome .origami{
	background-image: url(/images/bg_origami_newhome.jpg);
}

#decoration-1, #decoration-2{
	color: #fff;
}

.newhome #decoration-2{
	height: 420px;
	clear: left;
}


.newhome #wrap{
}

.newhome #decoration-1{
	height: 60px;
	background-image: url(/images/bg_origami_newhome_top.jpg);
	border: 0;
	margin-top: 0;
}

#newhome-flashcontent{
	background-image: url(/images/bg_origami_newhome.jpg);
	background-repeat: repeat-x;
	background-position: center 400px;
}

#newhome-flashcontent embed{
	display: block;
	margin: 0 auto;
}

.newhome .home-vertical img{
	float: left;
	margin: 0 30px 22px 0;
}

.newhome .home-vertical li{
	list-style-type: disc;
	list-style-position: inside;
	padding-left: 22px;
}

.newhome #logo{
	padding-bottom: 4em;
	margin: 0;
}

.newhome .home-vertical{
	clear: left;
	font-size: 1.5em;
}

.newhome .home-vertical h1,
.newhome .home-vertical h2{
	padding-top: 150px;
}

#site-introduction{
	padding-top: 22px;
	clear: left;
}

#site-introduction p{
	padding: 0 22px;
}

/******* Case studies **********/


.main-casestudies #secondary-nav{
	padding-top: 22px;
	padding-bottom: 18px;
}

.main-casestudies #secondary-nav a{
	text-indent: -9999em;
	display: block;
	width: 173px;
	height: 76px;
	background-position: top left;
	background-repeat: no-repeat;	
}

#secondary-nav #sylvania{
	background-image: url(/images/case_sylvania_grey.gif);
}
#casestudies-sylvania #secondary-nav #sylvania{
	background-image: url(/images/case_sylvania.gif);
}
#secondary-nav #hushamok{
	background-image: url(/images/case_hushamok_grey.gif);
}
#casestudies-hushamok #secondary-nav #hushamok{
	background-image: url(/images/case_hushamok.gif);
}
#secondary-nav #revention{
	background-image: url(/images/case_revention_grey.gif);
}
#casestudies-revention #secondary-nav #revention{
	background-image: url(/images/case_revention.gif);
}
#secondary-nav #kendell{
	background-image: url(/images/case_kendell_grey.gif);
}
#casestudies-kendell #secondary-nav #kendell{
	background-image: url(/images/case_kendell.gif);
}

/*************** Pressroom *********************/

.date{
	display:block;
	float: left;
	clear: both;
	width: 8%;
}

.news-content{
	float: left;
	width: 90%;
	padding-bottom: 20px;
}

#archive-link{
	clear: both;
}


/************** Solutions *****************/

.sub-web #masthead,
.thin #masthead{
	background-image: url(/images/bg_origami.jpg);
}
.sub-exhibit #masthead{
	background-image: url(/images/bg_origami_blue.jpg);
}
.sub-interactive #masthead{
	background-image: url(/images/bg_origami_cyan.jpg);
}
.sub-multimedia #masthead{
	background-image: url(/images/bg_origami_orange.jpg);
}
.sub-print #masthead{
	background-image: url(/images/bg_origami_magenta.jpg);
}
.sub-brand #masthead{
	background-image: url(/images/bg_origami_yellow.jpg);
}
.main-portfolio #masthead{
/*	background-image: url(/images/bg_origami_gray.jpg); */
}



/************************** Web/Exhibit Solutions *****************/
	
	.sub-web #secondary-nav a,
	.sub-exhibit #secondary-nav a,
	#studio #secondary-nav a,
	#secondary-nav.descriptive a
	{
		font-size: 1.5em;
	}
	
	.sub-web #secondary-nav li,
	.sub-exhibit #secondary-nav li,
	#studio #secondary-nav li,
	#secondary-nav.descriptive li
	{
		margin-bottom: 45px;
	}
	
	.sub-web #secondary-nav .sub-sub-web-technical,
	.sub-exhibit #secondary-nav .sub-sub-exhibit-management,
	#studio #secondary-nav  .sub-clients,
	#secondary-nav.descriptive .last
	{
		margin-bottom: 0;
	}




/************** Portfolio/Tour Layout *****************/

.thin #masthead{
	height: 30px;
}

.thin h1,
.thin h2{
	letter-spacing: .05em;
	text-align: left;
	white-space: nowrap;
}

#inner-content h3{
	font-size: 2.1em;
	border-bottom: 1px solid;
	line-height: normal;
	line-height: 33px;
}


.thin #masthead h1,
.thin #masthead h2{
	color: #fff;
	line-height: 30px;
	padding-left: 22px;
}

.thin #content{
	padding: 22px 0 0 0;
	min-width: 955px;
	overflow: hidden;
}

	.thin #inner-content{
		overflow: hidden;
		width: 760px;
		padding-top:48px;
		float: right;
/*
		position: relative;
		z-index: 2;
*/
	}

	.thin #inner-content img{
		float: left;
	}
		


.thin #secondary-nav,
.thin #secondary-content{
	float: left;
	height: auto;
	width: 150px;
	padding: 0 10px 0 0;
	text-align: right;
}

.thin #footer{
	clear: both;
}
.thin #footer img{
	float: none;
}

.thin #secondary-nav li{
	margin-bottom: 0;
}

	.thin #secondary-nav .selected{
		list-style-image: url(/images/thispage_black.gif);
	}
	
	.thin #secondary-nav li a,
	.thin #secondary-content,
	.thin #secondary-content a{
		color: #999;
		font-size: 1em;
	}

/******** Portfolio *******/

  /* Portfolio Landing page */
  
  .popout-nav{
  	width: 712px;
  	height: 336px;
  	background: url(/images/portfolio_nav.jpg);
  	margin: 0 auto;
  	position: relative;
  }
  
  #inner-content .popout-nav li{
  	position: absolute;
  	top: -100px;
  	left: -100px;
  	margin: 0;
  	padding: 0;
  	list-style-type: none;
  	overflow: hidden;
  	display: block;
  }
  
  #inner-content .popout-nav li a{
  	width: 100%;
  	height: 100%;
  	display: block;
  	text-indent: -9999em;
  	background: url(/images/portfolio_nav.jpg);
  }
  
  #inner-content .popout-nav li a:hover,
  #inner-content .popout-nav li a:active
  {
  	background-position: 0 -336px;
  }
  
  #inner-content .popout-nav #popout-nav-web{
  	width: 265px;
  	height: 105px;
  	top: 0;
  	left: 0;
  }
  #inner-content .popout-nav #popout-nav-multimedia{
  	width: 381px;
  	height: 74px;
  	top: 50px;
  	left: 311px;
  }
  #inner-content .popout-nav #popout-nav-multimedia a{
  	background-position: -311px -50px;
  }
  #inner-content .popout-nav #popout-nav-multimedia a:hover{
  	background-position: -311px -386px;
  }
  #inner-content .popout-nav #popout-nav-exhibit{
  	width: 301px;
  	height: 87px;
  	top: 135px;
  	left: 60px;
  }
  #inner-content .popout-nav #popout-nav-exhibit a{
  	background-position: -60px -135px;
  }
  #inner-content .popout-nav #popout-nav-exhibit a:hover{
  	background-position: -60px -471px;/* off x offset, off y offset - 336 */
  }
  #inner-content .popout-nav #popout-nav-brand{
  	width: 251px;
  	height: 82px;
  	top: 140px;
  	left: 385px;
  }
  #inner-content .popout-nav #popout-nav-brand a{
  	background-position: -385px -140px;
  }
  #inner-content .popout-nav #popout-nav-brand a:hover{
  	background-position: -385px -476px;/* off x offset, off y offset - 336 */
  }
  #inner-content .popout-nav #popout-nav-print{
  	width: 235px;
  	height: 78px;
  	top: 250px;
  	left: 0px;
  }
  #inner-content .popout-nav #popout-nav-print a{
  	background-position: 0 -250px;
  }
  #inner-content .popout-nav #popout-nav-print a:hover{
  	background-position: 0 -586px;/* off x offset, off y offset - 336 */
  }
  #inner-content .popout-nav #popout-nav-interactive{
  	width: 364px;
  	height: 81px;
  	top: 240px;
  	left: 350px;
  }
  #inner-content .popout-nav #popout-nav-interactive a{
  	background-position: -350px -240px;
  }
  #inner-content .popout-nav #popout-nav-interactive a:hover{
  	background-position: -350px -576px;/* off x offset, off y offset - 336 */
  }
  
  /* Everything else */


	#details{width: 604px;}

	.project-item{
		clear: both;
		position: relative;
		overflow: hidden;
		margin-bottom: 22px;
		z-index: 0;
	}
	
	.main-portfolio #inner-content h3{
		margin-bottom: 22px;
	}
	
	
	/*** Portfolio Landing ***/
	
	#portfolio-carousel{
		position: relative;
		z-index: 2;
	}
	
	#portfolio #inner-content,
	#solutions #inner-content{
		float: none;
		width: 800px;
		margin: 0 auto;
	}

	/****** Photo Gallery Interface ******/

		#slideshow-container{
			position: relative;
			margin-bottom: 7px;
		}
		
		#slideshow{
			width: 604px;
			overflow: auto;
		}
		
		#photo-container{
			left: 0;
			overflow: hidden;
			position: relative;
		}
		
		.slide{
			width: 604px;
			margin-bottom: 7px;
			float: left;
		}

		.launcher{
			clear: both;
		}
		
	
		.thin #project-nav{
			position: absolute;
			bottom: 0;
			left: 604px;	
			list-style-type: none;
			display: none;
			z-index: 2;
			margin-bottom: 35px;
		}
		
		.sub-exhibit #project-nav{
			margin-bottom: 20px;
		}
		
		#project-nav li{
			list-style-type: none !important;
		}
		
		/*** .onready class applied by javascript ***/
		.onready #project-nav{display:block;}
		.onready #slideshow{overflow: hidden;}
		.onready .slide{display:inline;visibility:hidden;clear:none;}
		.onready #photo-1{visibility:visible;}
		

	/****** Section-specific ******/
	.main-portfolio #secondary-nav,
	.main-contact   #secondary-nav{
		width: auto;
		max-width: 185px;
		line-height: normal;
		margin-top: 56px; /* Line height of h3 + border + padding: 33+22+1 */
	}
	.main-studio #secondary-nav.sub{
		line-height: normal;
		margin-top:10px;
	}
	.main-portfolio #secondary-nav li,
	.main-studio #secondary-nav.sub li{
		padding-bottom: 10px;
	}
	
	.main-portfolio #secondary-nav li{
		padding-bottom: 2px;
	}
	
	.main-portfolio #secondary-nav li a{
		color: #444;
	}

	.main-portfolio #secondary-nav li li a{
		color: #aaa;
		font-weight: normal;
	}
	
	.main-portfolio #inner-content,
	#solutions #inner-content{
		padding-top: 0;
	}
		
	.main-portfolio.sub-web #secondary-nav{
		margin-top: 70px;
	}
	
	.main-solutions.sub-web #secondary-nav{
		/* 
			It's wrong to wish death on a person, but a browser isn't a person.
			IE, please do everyone a favor and die.
		*/
		margin-top: 0px;
	}


/****** Blog ******/

	.post{
		margin-bottom: 4em;
		clear: left;
	}
	
	.byline,
	.position{
		text-align: right;
		margin-bottom: 0.5em;
	}
	
	.main-studio.sub #inner-content{
		padding-top: 10px;
	}
	
	.sub-blog #inner-content img,
	.sub-team #inner-content img,
	.sub-team #inner-content object{
		float: none;
		margin: 0 auto;
		display: block;
	}
	
	#inner-content .clientlist li{
		list-style-type: none;
		line-height: normal;
		letter-spacing: 0;
	}
	
	#inner-content .clientlist,
	#inner-content .clientlist ul{
		margin-top: 0;
	}
	
	#inner-content .clientlist{
		float: left;
		width: 253px;
	}
	
	.sub-clients #inner-content{
		margin-top: 0;
	}
	
	
	.sub-team #inner-content .team-picture{
		float: left;
		width: 150px;
		height: 180px;
		margin-right: 22px;
		margin-bottom: 22px;
		background-color: #ccc;
	}
	
/**** Forms (Contact page) ****/
	#contact #secondary-content{
		padding-top: 48px;
	}
	
	#contact #inner-content,
	#contact #secondary-content{
		padding-top: 74px;
	}

	#contactform{
		position: relative;
		z-index: 2;
	}

	#contactform label{
		float: left;
		clear: left;
		text-align: right;
		width: 80px;
	}
	
	#contactform input[type=text],
	#contactform textarea{
		float: left;
		width: 300px;
		margin-left: 22px;
		border: 1px inset #ddd;
	}
	#submit_btn{
		clear: both;
		float: left;
		margin-left: 102px;
	}