/*
   main.css
   Studio Bergtraun
   
   Created by Loren Sanz on 2010-11-10.
   Copyright 2010 Loren Sanz. All rights reserved.
*/


@import "reset.css";
@import "fonts.css";

#body 					{ background-color:white;}
.pagewrap 				{ width:845px; margin:24px auto 0;}

.pagewrap .houzz_link {
	margin:8px auto 0;
	float:right;
}

#header { 
	display:block; 
	height:60px; 
	width:845px;
}

/* navigiation styling */
#nav ul { 
	position:relative; 
	font-family: BravoRG, Arial, Helvetica,sans-serif;
	font-size:22px;
	letter-spacing: 1px;
	width:845px;
	clear:both;
}
#nav ul ul { 
	clear:none;
}
/*#nav ul li a                    	{ float:left; text-indent:-9999px; height:30px; background:white url(../img/nav-sprite.gif) no-repeat; width:118px; }*/
#nav ul li a { 
	text-decoration: none;
	color:#999999; 
	float:left; 
	height:30px;
	margin-top: 6px;
	/*width:118px;*/
}
#nav ul ul li a { 
	height:16px;
	margin-top: 0px;
}
#nav ul li a:hover { 
	color:#b15c12;
}

#nav ul li a.indoor { 
	/*background-position:0 0; */
	width:129px; 
}
/*#nav ul li a.indoor:hover, body.indoor #nav ul li a.indoor { background-position:0 -30px; }*/

#nav ul li a.light {
 /*background-position:-118px 0px; */
 width:107px; 
}
/*#nav ul li a.light:hover, body.light #nav ul li a.light        { background-position:-118px -30px;}*/

#nav ul li a.transformation { 
	/*background-position:-218px 0px; */
	width:129px; 
}
/*#nav ul li a.transformation:hover, body.trans #nav ul li a.transformation    { background-position:-218px -30px;}*/

#nav ul li a.building { 
	/*background-position:-336px 0px; */
	width:160px; }
/*#nav ul li a.building:hover, body.building #nav ul li a.building     { background-position:-336px -30px;}*/

#nav ul li a.case { 
	/*background-position:-474px 0px; */
	width:103px; 
}
/*#nav ul li a.case:hover, body.case #nav ul li a.case     { background-position:-474px -30px;}*/

#nav ul li a.studio { 
	/*background-position:-572px 0px; */
	width:50px; 
}
/*#nav ul li a.studio:hover, body.studio #nav ul li a.studio     { background-position:-572px -30px;}*/

#nav ul li a.info { 
	/*background-position:-704px 0px; */
	font-size:16px;
	width:140px; 
	float:right; 
}

#nav ul li a.tele { 
	/*background-position:-704px 0px; */
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	font-size:13px;
	width:123px; 
	float:right; 
}
/*#nav ul li a.info:hover, body.info #nav ul li a.info     { background-position:-704px -30px;}*/

div.main-content              { margin-top:10px; position:relative; clear:both;}
div.main-content div          { margin-left:4px;position:relative; width:208px height:480px; background-color:#333333;float:left;}
div.main-content div:first-child { margin-left:0px;}

 .hoverpanel		{ display:block;height:480px; width:208px;overflow:hidden; }
 .inside			{background-image:url(../img/inside-out-hover.jpg)}
 
p { color:#4D4D4D; font: normal normal normal 11px/14px Arial, 'Helvetica Neue', Helvetica, sans-serif; }

/* Intro page styles */
.heading-indoor { 
	background: url('../img/home/inout_home_color_new_arrow.jpg') no-repeat scroll top left;
}

.heading-lightcraft { 
	background: url('../img/home/light_home_color_new_arrow.jpg') no-repeat scroll top left;
}

.heading-community  {
	background: url('../img/home/community_home_color_new_arrow.jpg') no-repeat scroll top left;	
}

.heading-inout {
	background: url('../img/home/inout_home_color_new_arrow.jpg') no-repeat scroll top left;	
}
.heading-transform {
	background: url('../img/home/transform_home_color_new_arrow.jpg') no-repeat scroll top left;	
}

/* Landing page styles */
.picture .caption {
	position:absolute;
	width:275px;
	top:100px;
	left:500px;
	text-shadow: 1px 1px 0px rgba(0,0,0,.1);
}

/* HEADERS */
.h1-indoor { position:absolute; display:block;
					background: url('../img/headings/indoor-outdoor.png') no-repeat scroll top left;  height:49px; width:552px; text-indent:-9999px; z-index:15;
	 				top:27px; left:204px; }
.indoor .caption { top:100px; }
					
.h1-trans { position:absolute; display:block;
					background:url('../img/headings/transformation.png') no-repeat scroll top left;
					height:49px; width:533px; text-indent:-9999px; z-index:15;
	 				top:217px; left:256px; }

.trans .caption { top:284px;}

.h1-light { position:absolute; display:block;
					background:url('../img/headings/light-and-craft.png') no-repeat scroll top left;
					height:49px; width:425px; text-indent:-9999px; z-index:15;
	 				top:111px; left:267px; }

.light .caption { top:304px;}
	 			

.h1-building { position:absolute; display:block;
					background: url('../img/headings/building.png') no-repeat scroll top left;
					height:49px; width:583px; text-indent:-9999px; z-index:15;
	 				top:327px; left:195px; }

.building .caption { top:394px; left: 480px;}	 				

/* indoor page styles */

.picture { 
	margin-top: 10px; 
	position:relative;
	width:845px;
	height: 480px;
}
.picture img {
	position:absolute;
}

.picture img.main {`
	left:35px;
	top:0px;
	border-right:3px white solid;
	z-index:10;
}
.picture .bwimg {
	position:absolute;
	opacity:0.1; /* do this or else!!! */
	top:0px;
	right:0px;
	z-index:5;	
}

.case .bwimg {
	position:absolute;
	left:33px;
	right:auto;
}

 .prev  {
 	float:left;
 	text-indent:-9999px;
	width:32px;
	height:480px;
	overflow:hidden;
	background: url('../img/prevarrow.png') no-repeat scroll bottom left;
	background-color: #CCCCCC;
	border-right:solid 3px white;
}

.prev-indoor {
	float:left;
 	text-indent:-9999px;
	width:32px;
	height:480px;
	overflow:hidden;
	background: url('../img/indoor/indoor-prev.png') no-repeat scroll bottom left;
	border-right:2px white solid;
}
.prev-indoor:hover {
	background: url('../img/indoor/indoor-prev-hover.png') no-repeat scroll bottom left;
}

.prev-trans {
	float:left;
 	text-indent:-9999px;
	width:32px;
	height:480px;
	overflow:hidden;
	background: url('../img/trans/trans-prevarrow.png') no-repeat scroll bottom left;
	border-right:2px white solid;
}
.prev-trans:hover {
	background: url('../img/trans/trans-prevarrow-hover.png') no-repeat scroll bottom left;
}


.prev-building {
	float:left;
 	text-indent:-9999px;
	width:32px;
	height:480px;
	overflow:hidden;
	background: url('../img/community/building-prevarrow.png') no-repeat scroll bottom left;
	border-right:2px white solid;
}
.prev-building:hover {
	background: url('../img/community/building-prevarrow-hover.png') no-repeat scroll bottom left;
}



.prev-light {
	float:left;
 	text-indent:-9999px;
	width:32px;
	height:480px;
	overflow:hidden;
	background: #FFFFFF url('../img/light/light-prevarrow.png') no-repeat scroll bottom left;
	border-right:2px white solid;
}
.prev-light:hover {
	background: #FFFFFF url('../img/light/light-prevarrow-hover.png') no-repeat scroll bottom left;
}

.prev_case {
	float:left;
 	text-indent:-9999px;
	width:32px;
	height:480px;
	overflow:hidden;
	background: url('../img/casestudy/case_prevbar.jpg') no-repeat scroll bottom left;
	border-right:3px white solid;
}
/*
.prev_case:hover {
	background: url('../img/casestudy/case_prevbar-hover.jpg') no-repeat scroll top left;
}
*/

 .next {
 	position:absolute;
 	right:0;
 	top:0;
 	text-indent:-9999px;
	width:32px; float:right;
	height:480px;
	background: #555555 url('../img/nextarrow.png') no-repeat scroll bottom left;
	background-color:rgba(0,0,0,.5);
	overflow:hidden;
	z-index:20;
}

.next:hover {
	background: #666666 url('../img/nextarrow.png') no-repeat scroll bottom left;
	background-color:rgba(0,0,0,.6);
	
}

p.footerCaption {
	margin-top:9px;
	margin-left:34px; /* 32 px for the banner +2px for the spacer.*/
	width:260px;
	float:left;
	color:#555;
	font: normal normal normal 11px/13px Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
p.footerCaption a:active {
	position:relative;
	top:1px;
}
p.footerCaption a {
	color:#727272;
	text-decoration:none;
}

p.footerCaption a:hover {
	color:#727272;
	text-decoration:underline;
}

/* Transformation before picture adjustments */
body img.b4 		{ position:absolute; border:3px solid white; z-index:7;}

.slide1 .b4 { left:579px; top:32px; }
.slide2 .b4 { left:575px; top:32px; }
.slide3 .b4 { left:578px; top:32px; }
.slide4 .b4 { left:610px; top:32px; }
.slide5 .b4 { left:566px; top:32px; }
.slide6 .b4 { left:582px; top:32px; }
.slide7 .b4 { left:623px; top:32px; }
.slide8 .b4 { left:593px; top:32px; }
.slide9 .b4 { left:574px; top:32px; }
.slide10 .b4 { left:545px; top:32px; }
.slide11 .b4 { left:572px; top:32px; }
.slide12 .b4 { left:573px; top:32px; }
.slide13 .b4 { left:620px; top:32px; }
.slide14 .b4 { left:579px; top:32px; }
.slide15 .b4 { left:579px; top:32px; }
.slide16 .b4 { left:580px; top:32px; }
.slide17 .b4 { left:557px; top:32px; }
.slide18 .b4 { left:565px; top:32px; }
.slide19 .b4 { left:577px; top:32px; }
.slide20 .b4 { left:579px; top:32px; }

.case .content {
	position:absolute;
	width:200px;
	top:70px;left:80px;
	z-index:110;
}
.case h2 	{ color:#666; font: normal normal bold 12px/14px Helvetica, 'Helvetica Neue', Arial, sans-serif;text-transform:uppercase;
	margin-bottom:20px;
 }
.case p 	{ color:#666; font: normal normal normal 12px/14px Helvetica, 'Helvetica Neue', Arial, sans-serif;
	margin-bottom:14px;
}
.case li 	{ color:#666; font: normal normal normal 12px/14px Helvetica, 'Helvetica Neue', Arial, sans-serif;}
.case img.feat {
	position:relative;
	float:right;
	border-right:solid 15px white;
	background-color:#FFF;
	z-index:10;
}

.case img.feat:first-child {
	border-right:none;
}

.about .content {
	position:absolute;
	width:370px;
	top:20px;
	left:287px;
	z-index:110;
}

.about h2 	{ color:#666; font: normal normal bold 12px/14px Helvetica, 'Helvetica Neue', Arial, sans-serif;text-transform:uppercase;
	margin-bottom:10px;
 }

.about p,.about .vcard 	{ color:#666; font: normal normal normal 11px/14px Arial, 'Helvetica Neue', Helvetica, sans-serif;
	margin-bottom:14px;
}


.about .url,.about .country-name {display:none;}

.about .tel:before {content:'P: ';}
.about .note {font-style:italic;}
.about .email { color:#af5c18;}
.about .email:before {content:'[';}
.about .email:after {content:']';}
.about .email {text-decoration:underline;}
.about .email:hover {text-decoration:none;}

.next {
 	position:absolute;
 	right:0;
 	top:0;
 	text-indent:-9999px;
	width:32px; float:right;
	height:480px;
	background: #555555 url('../img/nextarrow.png') no-repeat scroll bottom left;
	background-color:rgba(0,0,0,.5);
	overflow:hidden;
	z-index:20;
}

.next:hover {
	background: #666666 url('../img/nextarrow.png') no-repeat scroll bottom left;
	background-color:rgba(0,0,0,.6);	
}
.studio .first 					{position:absolute; position:right; top:0; right:112px; width:26px; float:right; height:480px;overflow:hidden; z-index:20;}
.studio .second					{position:absolute; position:right; top:0; right:84px; width:26px; float:right; height:480px;overflow:hidden; z-index:20;}
.studio .third					{position:absolute; position:right; top:0; right:56px; width:26px; float:right; height:480px; overflow:hidden; z-index:20;}
.studio .fourth					{position:absolute; position:right; top:0; right:28px; width:26px; float:right; height:480px; overflow:hidden; z-index:20;}
.studio .fifth					{position:absolute; position:right; top:0; right:0px; width:26px; float:right; height:480px; overflow:hidden; z-index:20;}

.studio .next_bio 	  			{ background:transparent url('../img/studio/bio_right.png'); }
.studio .next_bio:hover 	  	{ background:transparent url('../img/studio/bio_right_arrow.png'); }
.studio .next_sustain		 	{ background:transparent url('../img/studio/sustain_right.png'); }
.studio .next_sustain:hover	 	{ background:transparent url('../img/studio/sustain_right_arrow.png'); }
.studio .next_journeys		 	{ background:transparent url('../img/studio/journey_right.png'); }
.studio .next_journeys:hover 	{ background:transparent url('../img/studio/journey_right_arrow.png'); }
.studio .next_travels		 	{ background:transparent url('../img/studio/travels_right.png'); }
.studio .next_travels:hover 	{ background:transparent url('../img/studio/travels_right_arrow.png'); }
.studio .next_art		 	    { background:transparent url('../img/studio/art_right.png'); }
.studio .next_art:hover 	    { background:transparent url('../img/studio/art_right_arrow.png'); }
.studio .next_events		 	{ background:transparent url('../img/studio/events_right.png'); }
.studio .next_events:hover   	{ background:transparent url('../img/studio/events_right_arrow.png'); }
.studio .next_about	 			{ background:transparent url('../img/studio/about_right.png'); }
.studio .next_about:hover	 	{ background:transparent url('../img/studio/about_right_arrow.png'); }


.prev-about {
	float:left;
 	text-indent:-9999px;
	width:32px;
	height:480px;
	overflow:hidden;
	background: url('../img/studio/about_left.png') no-repeat scroll bottom left;
	border-right:2px white solid;
}

.prev-journeys {
	float:left;
 	text-indent:-9999px;
	width:32px;
	height:480px;
	overflow:hidden;
	background: url('../img/studio/journeys_left.png') no-repeat scroll bottom left;
	border-right:2px white solid;
}

.prev-travels {
	float:left;
 	text-indent:-9999px;
	width:32px;
	height:480px;
	overflow:hidden;
	background: url('../img/studio/travels_left.png') no-repeat scroll bottom left;
	border-right:2px white solid;
}

.prev-art {
	float:left;
 	text-indent:-9999px;
	width:32px;
	height:480px;
	overflow:hidden;
	background: url('../img/studio/art_left.png') no-repeat scroll bottom left;
	border-right:2px white solid;
}

.prev-events {
	float:left;
 	text-indent:-9999px;
	width:32px;
	height:480px;
	overflow:hidden;
	background: url('../img/studio/events_left.png') no-repeat scroll bottom left;
	border-right:2px white solid;
}

.prev-bio {
	float:left; 
 	text-indent:-9999px;
	width:32px;
	height:480px;
	overflow:hidden;
	background: url('../img/studio/bio_left.png') no-repeat scroll bottom left;
	border-right:2px white solid;
}

.prev-sustain {
	float:left;
 	text-indent:-9999px;
	width:32px;
	height:480px;
	overflow:hidden;
	background: url('../img/studio/sustain_left.png') no-repeat scroll bottom left;
	border-right:2px white solid;
}

/* v card styling */
.bio h2 	{ color:#666; font: normal normal bold 10px/12px Helvetica, 'Helvetica Neue', Arial, sans-serif;text-transform:uppercase;
	margin-bottom:10px;
 }

.bio p	{ color:#555; font: normal normal normal 10px/12px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin-bottom:10px;}
.bio p+h2 {margin-top:30px;}
.bio2 p+h2 {margin-top:30px;}
.bio a {color:#af5c18; font: normal normal bold 12px/14px Helvetica, 'Helvetica Neue', Arial, sans-serif;  }

.bio .bwimg					{ left:32px;right:auto;}
.leftcol					{ position:relative; height:480px;z-index:10;}
.leftcol a 					{ float:right; overflow:hidden; width:100px;margin:5px 443px 0 0px; top:45px; display:block; position:relative; text-decoration:none; }
.leftcol a.bio2 			{ float:left;overflow:hidden; width:130px;margin:5px 0 0 20px; top:57px;position:relative; }
.leftcol a:hover 			{ text-decoration:underline; }
.rightbio					{ float:right; width:300px;}
.pictureset 				{ position:relative; z-index:50; display:block; width:650px;overflow:hidden; }
.pictureset img 			{ position:relative; float:left; width:97px; margin:25px 0 0 10px; border:solid 3px white;}
.pictureset img:first-child { margin-left:0; }

.first-bio 						{ top:25px;left:15px; }
.second-bio 					{ top:45px; left:15px;}

.journeys img.main 			{ left:32px;}
.journeys .content 			{ position:absolute;z-index:20;left:477px;top:20px; width:220px;}

.journeys p	{ color:#666; font: normal normal normal 11px/14px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin-bottom:10px;}
.journeys h2 	{ color:#666; font: normal normal bold 11px/14px Helvetica, 'Helvetica Neue', Arial, sans-serif;text-transform:uppercase;
	margin-bottom:25px;}
.journeys h3 				{ color:#666h; margin-top:36px;text-transform:none;  
							  font: normal normal bold 12px/14px Helvetica, 'Helvetica Neue', Arial, sans-serif;}
.journeys a {color:#af5c18; font: normal normal bold 11px/14px Helvetica, 'Helvetica Neue', Arial, sans-serif; text-decoration:none; }
.journeys a:hover 			{ text-decoration:underline;}
.sustain img.main 				{ left:32px;}
.sustain .content 			{ position:absolute;z-index:20;left:397px;top:20px; width:300px;}
.sustain p	{ color:#666; font: normal normal normal 10px/14px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin-bottom:7px;}
.sustain h2 	{ color:#666; font: normal normal bold 10px/14px Helvetica, 'Helvetica Neue', Arial, sans-serif;text-transform:uppercase;
	margin-bottom:10px;}
	

/*  SUBNAV */

.subnav {
	margin-top:10px;
	width:533px;
	float:right;
}

.subnav li:first-child {
	margin-left:0;
}
.subnav li {
	float:left;
	width:20px;
	height:20px;
	margin-left:7px;
}

.subnav a {
	background-image: url('../img/numberbar.png');
	background-repeat:no-repeat;
	width:20px;
	height:20px;	
	background-color:#b4b4b4;
	color:#FFFFFF;
	display:block;
	text-indent:-9999px;
	background-position:0 0px;
}

.subnav a:hover,
.slide1 .subnav a.a1 ,
.slide2 .subnav a.a2 ,
.slide3 .subnav a.a3 ,
.slide4 .subnav a.a4 ,
.slide5 .subnav a.a5 ,
.slide6 .subnav a.a6 ,
.slide7 .subnav a.a7 ,
.slide8 .subnav a.a8 ,
.slide9 .subnav a.a9 ,
.slide10 .subnav a.a10 ,
.slide11 .subnav a.a11 ,
.slide12 .subnav a.a12 ,
.slide13 .subnav a.a13 ,
.slide14 .subnav a.a14 ,
.slide15 .subnav a.a15 ,
.slide16 .subnav a.a16 ,
.slide17 .subnav a.a17 ,
.slide18 .subnav a.a18 ,
.slide19 .subnav a.a19 ,
.slide20 .subnav a.a20 {
	background-color:#B15C12;
}

.subnav a.a2 {
	background-position: -20px 0px;
}




.subnav a.a3 {
	background-position: -40px 0px;
}

.subnav a.a4 {
	background-position: -60px 0px;
}

.subnav a.a5 {
	background-position: -80px 0;
}
.subnav a.a6 {
	background-position:-100px 0;
}

.subnav a.a7 {
	background-position: -120px 0;
}

.subnav a.a8 {
	background-position: -140px 0;
}

.subnav a.a9 {
	background-position:  -160px 0;
}
.subnav a.a10 {
	background-position:  -180px 0;
}

.subnav a.a11 {
	background-position:  -200px 0;
}

.subnav a.a12 {
	background-position:  -220px 0;
}

.subnav a.a13 {
	background-position: -240px 0;
}

.subnav a.a14 {
	background-position: -260px 0;
}

.subnav a.a15 {
	background-position: -280px 0;
}

.subnav a.a16 {
	background-position: -300px 0;
}

.subnav a.a17 {
	background-position: -320px 0;
}

.subnav a.a18 {
	background-position: -340px 0;
}

.subnav a.a19 {
	background-position: -360px 0;
}

.subnav a.a20 {
	background-position: -380px 0;
}