@charset "utf-8";
/* 
  studiopoints.com v3.0 stylesheet 
  created 08 august 2011
  updated 17 october 2011
  created by www.souldesigngroup.com
  copyright ml robles 	
*/

/* INDEX //////////////////
I    UNIVERSAL 
II   LAYOUT
       background image
	   left column
	   brand
	   navigation
III  MAIN CONTENT
IV   FOOTER
V    LIGHTBOX
//////////////////////// */

/********************************************************* UNIVERSAL */
* {
	margin:0px;
	padding:0px;
	outline:none;
}

html {height:100%;}

body {
	width:100%;
	min-width:800px;
	background:url(img/bg.jpg) repeat #FFF;
	font-family:Tahoma, Verdana, sans-serif;
	font-size:11px;
	line-height:1.5em;
	letter-spacing:1.6px;
	color:#FFF;
	margin:0;
	border:none;
}

p {margin-bottom:15px;}

h1 {
	font-size:24px;
	line-height:36px;
}

h2 {
	color:#CCC;
	font-size:18px;
	line-height:20px;
}

h3 {
	font-size:12px;
	line-height:16px; 
	letter-spacing:.08em;
}

a:link {text-decoration:none; color:#DDD;}
a:visited {text-decoration:none; color:#666;}
a:hover {text-decoration:none; color:#999;}
a:active {text-decoration:none; color:#444;}

p a {font-style:normal; border-bottom:1px solid #555;}
p a:link {color:#BBB;}
p a:hover {color:#777;}
p a:active {color:#444;}

.clear {clear:both;}
.clear-right {clear:right;}
.clear-left {clear:left;}

img {border:none;}

.bg-img-right {float:right; text-indent:-9999px;}
.bg-img-left {float:left; text-indent:-9999px;}

.sml {font-size:10px;}
.sml-caps {font-size:10px; font-variant:small-caps;}

.center {text-align:center;}


/********************************************************* LAYOUT */

/******************* background image */
#background {width:100%;}	

#bg-image {
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	position:fixed;
	z-index: -1;
}

#bg-image img {width:100%;}

/******************* left column */
#left-column {width:350px; height:100%; float:left;}

#home #left-column {width:100%; height:100%;}

#logo {
	width:371px;
	height:117px;
	background:url(assets/img/studio-points-logo-lg.png) center no-repeat;
	position:fixed;
	top:0;
	left:0;
	z-index:99;
}

/******************* brand */
#opening-logo-wrapper {
	width:100%;
	position:absolute;
	top:0;
	left:0;
}

#opening-logo {
	z-index:99;
}

#home-statement {
	width:754px;
	height:150px;
	background:url(assets/img/home-motto.png) center no-repeat;
	position:absolute;
	top:30%;
	left:50px;
}

#architecture-and-research {
	width:350px;
	height:26px;
	margin-top:-27px;
	position:fixed;
	top:100%;
	left:0;
	display:inline;
}

#architecture {
	width:195px;
	height:26px;
	background:url(assets/img/Architecture.png) center no-repeat;
}

#research {
	width:155px;
	height:26px;
	background:url(assets/img/+-research.png) center no-repeat;
}

/******************* navigation */
#nav {
	position:fixed;
	top:45%;
	left:50px;
}

#home #nav {
	position:absolute;
	margin-top:200px;
	top:30%;
	left:50px;
}

#nav ul li {list-style:url(assets/img/nav/nav-arrow.gif);}
#nav ul li h2 {margin-top:-8px;}

#nav-living-built-environments {width:350px; height:12px; background:url(assets/img/nav/living-built-environments.png) left no-repeat;}
#nav-existing-buildings {width:350px; height:12px; background:url(assets/img/nav/existing-buildings.png) left no-repeat;}
#nav-inkstains {width:350px; height:12px; background:url(assets/img/nav/inkstains.png) left no-repeat;}
#nav-beauty-that-works {width:143px; height:12px; background:url(assets/img/nav/beauty-that-works.png) left no-repeat;}
#nav-architecture-by-the-hour {width:193px; height:12px; background:url(assets/img/nav/architecture-by-the-hour.png) left no-repeat;}
#nav-ml-robles {width:350px; height:12px; background:url(assets/img/nav/ml-robles.png) left no-repeat;}
#nav-contact {width:350px; height:12px; background:url(assets/img/nav/contact.png) left no-repeat;}

.nav-wrapper-lbe, .nav-wrapper-eb, 
.nav-wrapper-is, .nav-wrapper-btw,
.nav-wrapper-abth, .nav-wrapper-ml,
.nav-wrapper-ct {
	width:350px;
	height:12px;
	margin:-14px 0 0 0;
	padding:1px 0;
	background:none;
}

#lbe .nav-wrapper-lbe, #eb .nav-wrapper-eb, 
#is .nav-wrapper-is, #btw .nav-wrapper-btw, 
#abth .nav-wrapper-abth, #ml .nav-wrapper-ml,
#ct .nav-wrapper-ct {
	width:300px;
	margin-left:-15px;
	padding-left:15px; 
	background:rgba(248,153,31,0.70); 
}

#lbe #nav-living-built-environments, 
#eb #nav-existing-buildings, #is #nav-inkstains,
#btw #nav-beauty-that-works, #abth #nav-architecture-by-the-hour,
#ml #nav-ml-robles, #ct #nav-contact {
	list-style:none;
}

.nav-wrapper-lbe:hover, .nav-wrapper-eb:hover, 
.nav-wrapper-is:hover, .nav-wrapper-btw:hover,
.nav-wrapper-abth:hover, .nav-wrapper-ml:hover,
.nav-wrapper-ct:hover {
	width:300px; 
	margin-left:-3px;	
	padding-left:3px;
	background:rgba(255,255,255,0.25);
}

#nav-oldIE {display:none;}

/********************************************************* MAIN CONTENT */
#main-content {
	 width:650px; 
	 min-height:100%;
	 margin-left:350px;
	 padding:0 13px 0 13px;
	 background:rgba(0,0,0,0.70);
	 float:right;
	 position:absolute;
	 top:0;
}

#main-top-spacer {margin-top:103px;}

#main-content p {text-align:justify; margin-left:12px; margin-right:12px;}
#main-content h2 {text-align:left; margin:-3px 12px 0 12px;}


#main-thumbnail {margin-top:25px;}
#main-thumbnail img {width:100px; margin:25px 13px 0 12px; vertical-align:top;}
.lbe-thumbs {display:inline;} /** attempt for random order div on LBE - come back to this **/

.thumbnail-wrapper {width:126px; height:125px; overflow:hidden; display:inline-block;}
#eb .thumbnail-wrapper {width:126px; height:166px; overflow:hidden; display:inline-block;}

#main-projects {margin-top:25px;}
#main-projects img{width:187px; margin:12px; vertical-align:top;}

#ml-robles {width:142px; height:26px; margin:-11px 0 40px 0; background:url(assets/img/ml-Robles.png) center no-repeat;}
#contact-studio-points {width:188px; height:26px; margin:-11px 0 40px 0; background:url(assets/img/contact-studio-points.png) center no-repeat;}
#beauty-that-WORKS {width:301px; height:34px; margin:-11px 0 0 0; background:url(assets/img/beauty-that-works.png) center no-repeat;}
#architecture-by-the-hour {width:369px; height:34px; margin:-11px 0 0 0; background:url(assets/img/architecture-by-the-hour.png) center no-repeat;}

#abth #main-content a {border:none;}

#nav-arrows {
	width:161px;
	height:30px;
	position:absolute;
	top:20px;
	left:485px;
}

#arrow-prev {
	width:60px;
	height:30px;
	background:url(assets/img/arrow-prev.gif) center no-repeat;
	opacity:.25; 
	filter:alpha(opacity=25);
}

#arrow-home {
	width:23px;
	height:23px;
	margin:0 9px -4px 9px;
	background:url(assets/img/arrow-home.gif) center no-repeat;
	opacity:.25; 
	filter:alpha(opacity=25);
}

#arrow-next {
	width:60px;
	height:30px;
	background:url(assets/img/arrow-next.gif) center no-repeat;
	opacity:.25; 
	filter:alpha(opacity=25);
}

#arrow-prev:hover, #arrow-next:hover, #arrow-home:hover {opacity:0.8; filter:alpha(opacity=80);}

/********************************************************* FOOTER */
#footer {
	width:100%;
	margin:50px auto 20px auto;
	text-align:center;
	font-size:9px;
	color:#444;
}

#footer a:link {text-decoration:none; color:#444;}
#footer a:hover {text-decoration:none; color:#888;}
	

/********************************************************* LIGHTBOX */
#lightbox{
	background-color:#FFF;
	border:1px solid #f8991f;
	padding:40px; 
	color:#666;
}

#lightboxDetails{
	font-size:0.9em;
	padding-top:0.4em;
}
	
#lightboxCaption{float:left; margin-left:3px;}
#keyboardMsg{display:none;}
#closeButton{position:absolute; top:-10px; right:-9px; border:none;}

#lightbox img{} 
#overlay img{border:none;}

#overlay{background:url(assets/img/lightbox-overlay.gif) center repeat;}

* html #overlay {
	background-color:#FFF;
	background-color:transparent;
	background-image:url(blank.gif);
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/lightbox-overlay.gif", sizingMethod="scale");
}


/******************************************************** IE6 NOPE */
#background, #left-column {_display:none;}

#IE6-nope {
	width:100%;
	height:100%;
	background:#FFF;
	position:fixed;
	top:0;
	right:0;
	z-index:50;
	display:none;
	_display:block;
	overflow:hidden;
	color:#333;
	text-align:center;
}

#IE6-note-contact {
	width:540px; 
	position:absolute; 
	top:35%; 
	left:50%;
	margin:0 0 0 -270px;
	padding:20px 20px 0 20px;
	background:#FFF;
	border:10px solid #666;
}

.IE6-nope-browsers {
	width:92px;
	padding:10px;
	float:left;
}