/*
-------------------------------------------------------------------
Raynes Associates -- Site 2009 -- Master Styles

authors:   maggie@maggiethayer.com
		   andrewpgordon@gmail.com
		   web@spacewalk.com
		   Coco Raynes Associates, Inc.
		   
version:  2009.12.23
-------------------------------------------------------------------
*/


/* Common Styles
------------------------------------------------------------- */

/* reset elements */
* {
/* body, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, a {  */
	padding: 0;
	margin: 0;
}

html, body {    
   height: 100%; 
}

img { 
	border: none; 
	margin: 0;
} 

html {
}

* { 
	outline: none; 
}

/*
---------------- =BODY------------------- */

body {
	text-align: center;
	color: #000000;	
	font-family: Helvetica, Arial, sans-serif;
	font-size: small;
	background: #FFFFFF url(/images/interface/body-bg.png) repeat-x 0 0;
}

body#home div#page {				
	background: #FFFFFF url(/images/interface/body-bg.png) repeat-x 0 0;
}

body#home, body#home #content {		
	background: #FFFFFF; 
}

body#portfolio-visual-identity {	
	background: #FFFFFF url(/images/interface/body-visual-identity-bg-white.png) repeat-x 0 0;
}
			
#body-maindesc {					
	position:absolute;
	top:0px;
	left:0px;
	color:#FFFFFF;
	z-index:3;
	font-size: 24px;
	font-weight: bold;
	margin: 30px 0 0 40px;
	line-height: 1.7em;
}
			
.body-outer {
	width:1000px;
	height:358px;
	overflow:hidden;
	z-index:2;
}
			
.body-inner {
	width:11000px;
	position:relative;
}

/*
---------------- =PAGE-------------------- */

#page {
	display: none; 				
	width: 1000px;
	margin: 0 auto 20px auto;
	text-align: left;
	position: relative;
	min-height: 100%;
	margin-bottom: -40px; 		
}

/*
---------------- =HEADER------------------- */

#header {
	width: 1000px;
	float: left;
	height: 128px;
}
	
#header h1 a {					
	width: 623px;
	float: right;
	background: transparent url(/images/interface/cr.embossnew_LIGHT600.jpg) no-repeat 16px 9px;
	margin: 50px 0px 0 0;
	padding: 0;
	height: 128px;
	padding-top: 60px;			 
	overflow: hidden;
	text-indent: -3000px;
}

/*
---------------- =CONTENT------------------- */

#content {
	width: 1000px;
	float: left;
	height: 358px;
	color: #FFFFFF;
	vertical-align: middle;
}
	
#content h3, #content h4{		 
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;				
}
#content h3 {
	margin-bottom: 3px;
}

/*
------------ =MAIN NAVIGATION BAR------------- */


#navbar, #navbar ul {
	line-height: 1em;
	list-style: none;
}

#navbar {
	margin: 0 0 20px 0;
	width: 1000px;
	height:220px;
	clear: left;
	position: relative;
	z-index: 1;
	height: 325px;
	overflow:hidden;
}
#navbar a {
	width: auto;
	float: left;
	height: 20px;
	text-transform: uppercase;		
	font-size: 11px;				
	letter-spacing: .7px;
	color: #000000;	
	font-weight: bold;
	line-height: 20px;				
	text-decoration: none;
	text-align: left;
}

#navbar li.bg {					
	height: 100%;
	position: static;
	float: left;
	padding-right: 0.25em;
	margin-right: 0.25em;
	background: url('/images/nav sliver.jpg') top left repeat-y;
}
			
			/*-------- =SUBNAV ------ */
			
	
			#navbar li.bg a{ 					
				padding: 0px 0 0px 10px;
				height: 11px;				
			}
			
			#navbar li.bg ul a{ 					
				padding: 7px 0 0px 10px;
				height: 11px;				
				float:none;
			}
			
			#navbar li ul {					
				position: absolute;
				left: auto;
				top: 25px; 
				display: none; 
				padding: 10px 0 0px 0; 
				z-index: 1;
				background: url('/images/subnav sliver.jpg') top left repeat-y;
			}

			#navbar li ul a {				
				width: 40em;
				margin-top: 2px;
				padding: 0;
				opacity: 1;
				font-weight: normal;
				font-size: 14px;		
				text-transform: none;
				letter-spacing: 0px;
			}
			
			#navbar li ul a.you-are-here {
				font-weight:bold;
			}
	
			#submenu ul li a:hover {
				font-weight:bold;
			}

/*
---------------- =PORTFOLIO--------------- */

			/*-------- =TYPE ------ */
				
			div.portfolio-maindesc {	
				line-height: 1.25em;
				font-size: 14px;
			}
			
			.portfolio-project-header {
				width: 100%;
				float: left;
				height: 70px; 						
				margin: 25px 0 0 240px;				
			}
			
			body#portfolio-visual-identity .portfolio-project-header {
				margin: 25px 0 0 0px;				
			}

			.portfolio-project-headlines {
				width: 100%;
				float: left;
				height: inherit;
				margin: 0;
			}

			.portfolio-project-headlines h3 {		
				margin: 0;
				letter-spacing: 0;
			}
			
			.portfolio-project-headlines h4 {		
				font-weight: lighter;
				letter-spacing: -1px;
			}

div.portfolio-slideshow-holder { 		
	width: 1000px; 
	height: 358px;
	float: left;
	padding: 0;
	overflow: hidden;
	position: relative;
}

div.portfolio-slideshow { 				
	width: 12000px;
	height: 360px;
	float: left;
}

div.portfolio-slideshow-project { 		
	min-width: 1100px; 
	width: auto;
	float: left;
	height: 330px;
	margin: 2px 10px 0 0;				
	padding: 0 0 0 12px;				
	position: relative; 			
}

div.portfolio-image-wrapper { 		
	width: 742px; 
	overflow: hidden; 					
	float: left;
	margin-top: 18px;					
	height: 255px;
	position: absolute;
	top: 80px;							
	left: 253px;						
}

.portfolio-project-images {
	width: 12000px; 
	list-style: none;
}

.portfolio-project-images li {
	width: auto;
	float: left;
	clear: none;
	margin: 0 15px 0 0;
	list-style: none;
	display: block;
	height: 250px;
}

.portfolio-project-images li div {
	height:80px;
	line-height: 1.05em;
}


/*
---------------- =VISUAL IDENTITY --------------- */
			

			/*-------- =TYPE ------ */
			
			body#portfolio-visual-identity h3 {
				color: #000000;
			}
			
			#content.visual-identities h3 {
				width: 750px; 
				margin: 0px 0 0px 0px;		
			}
			
			body#portfolio-visual-identity .portfolio-project-images li span {
				text-align:left;
				width: auto; 
				float: left; 
				clear: left; 
				padding: 0; 
				font-size: 13px; 
				line-height: 16px; 
			}

			body#portfolio-visual-identity .portfolio-project-images li span.caption {
				font-weight: bold;
			}

body#portfolio-visual-identity div.portfolio-image-wrapper { 
	width: 1000px;
	overflow: hidden; 
	float: left;
	margin: 0;
	height: 340px;
	position: absolute;
	top: 50px;	
	left: 12px;		
}

body#portfolio-visual-identity .portfolio-project-images li {
	margin: 0 60px 0 0;
	text-align: center;
	color:#000000;  
}


body#portfolio-visual-identity .portfolio-project-images li img {
	width: auto;
	float: left;
	clear: left;
	margin: 0px 0 0 0;
}
			


/*
---------------- =ACCESSIBILITY PRODUCTS---------------------- */


			/*-------- =TYPE ------ */
			
			.accessibility-venue-header{
				text-transform: none;
				position:relative;
			}	

			.accessibility-venue-headlines {
				position:absolute;
				top:-25px;
				width:300px;
				left: -1px;
			}
			
			.accessibility-venue-header h3 {
				margin: 27px 0 0 252px;
				letter-spacing: 0;
			}	

			div.accessibility-slideshow-project h3 {
				text-transform: none;
			}
	
			div.accessibility-slideshow-project h4 {
				color: #FFCB2D;
			}

#accessibility-venues-list {		
	width: 200px; 	
	height: auto;
	float: left;
	line-height: 17px; 
	margin: 0;
	padding: 50px 43px 20px 10px;
}

li div.spacer {
	width:50px;
	height:1px;
	display:block;
}

div.accessibility-slideshow-holder { 
	width: 742px; 
	float: left;
	margin-top: 0px;
	overflow: hidden;
	position: relative;
}

div.accessibility-slideshow-project { 
	height: 360px;
}	

div.accessibility-image-wrapper { 
	width: 742px; 
	overflow: hidden; 
}

.accessibility-project-images { 
	width: 12000px; 
}

.accessibility-project-images li {
	float: left;
	margin: 52px 15px 0 0;
	list-style: none;
}

.accessibility-project-images li.header {
	margin-right:0px;
}

.accessibility-project-images li span {
	display: block;
}


/*
---------------- =ABOUT OUR FIRM---------------------- */



#content.about-our-firm {
	height: 338px;
	padding-bottom: 20px;
	width: 1000px;
	float: left;
	overflow: hidden;
	position: relative;
}


	#content.about-our-firm h3 {
		width: 750px; 
		margin: 25px 0 30px 10px;		
	}
	
	#content.about-our-firm .about-entry {
		float: left;
		clear: left;
		margin: 0 0 10px 0;
	}	
	#content.about-our-firm span {
		float: left;
		clear: left;
		display: block;
		font-size: 14px; 
		line-height: 18px;
		text-align: left;
	}
	#content.firm-profile span {
		float: none;
		clear: none;
		display: inline;
	}
	#content.about-our-firm.awards span {
		width: 360px;
	}
	#content.about-our-firm.publications span {
		width: 240px;
	}
	span.caps {
		text-transform: uppercase;
	}
	
	#content.about-our-firm .headline {
		font-weight: bold;
	}
	
	#content.about-our-firm div.outer-viewport {
		width: 1000px;
		float: left;
		height: 100%;
		overflow: hidden;
		position: relative;
	}


			/*-------- =FIRM PROFILE ------ */


			#content.firm-profile #firm-profile-text {
				width: 990px;
				margin: 25px 0 0 10px;				
			}
		
			#content.firm-profile p {
				font-weight: normal;
				font-size: 18px;					
				line-height: 27px;
				margin: 0 0 0px 0;
				text-align: justify;
			}
	
			.hidden {
				display: none;
			}
			
			/*-------- =AWARDS & PUBLICATIONS-------- */



			#content.awards .inner-viewport, #content.publications .inner-viewport {
				width: 1000px;
				margin: 0 0 0 10px;				/* left start of awards */
				float: left;
				height: 280px;
				overflow: hidden;
				cursor: default;
				position: absolute;
				top: 57px;					
				left: 0;
			}
	
			#content.awards .inner-strip, #content.publications .inner-strip {
				width: 12000px;
				list-style: none;
			}

			/* for the columnizing divs created by the EE Splitter plugin */
			#content.about-our-firm div.about-entry-column {
				float: left;
				height: 360px;
				margin: 0 0 0 0;
				text-align: left;
			}


			/*-------- =CLIENT LIST-------- */
			


			.client-list .portfolio-project-images li {
				height: auto;
			}

			.displayBlock {
				display: block;
			}

			#content.client-list {
				margin: 0 0 0 0;
				width: 1000px;
				color: #FFFFFF;
			}

			#content.client-list h3 {
				width: 700px; 
				float: left;
				margin: 24px 20px 0 21px;
			}

			ul#client-categories-list { 
				width: 198px; 
				height: auto;
				float: left;
				clear: left;
				font-size: 14px;
				line-height: 13px;
				padding: 70px 21px 20px 12px;
				list-style: none;
			}

			ul#client-categories-list li a {
				color: #FFCB2D;		
				text-decoration: none;
				display: block;
				padding: 2px 0;
			}
			
			ul#client-categories-list li a:hover, ul#client-categories-list li a.you-are-here {
				font-weight: bold;
			}

			#content.client-list div.outer-viewport {
				width: 735px;
				height: 320px;
				float: left;
				padding: 0;
				margin: 0;
				overflow: hidden;
				position: relative;
			}
			
			#content.client-list .inner-strip {
				width: 12000px;
				list-style: none;
			}

			#content.client-list div.outer-strip {
				width: 12000px;
				height: 320px;
				float: left;
				padding: 0 0 0 0;
				margin: 48px 0 0 0;
			}

			#content.client-list div.client-list-category-wrapper { 
				min-width: 900px;
				width: auto;
				float: left;
				height: 330px;
				margin: -20px 10px 0 0;
				position: relative; 
			}

			#content.client-list div.inner-viewport {
				width: 735px;
				height: 280px;
				float: left;
				overflow: hidden;
				margin: 0 0 0 21px;
				padding: 0;
				cursor: default;
			}



			/*-------- =CONTACT-------- */
			

			#content.contact #firm-contact-text {
				width: 250px;
				margin: 60px 0 0 10px;
			}
			
			#content.contact p {
				font-weight: normal;
				font-size: 18px;
				line-height: 22px;
				margin: 0 0 15px 0;
			}
	
			#content.about-our-firm a {
				color: #FFFFFF;	
				text-decoration: none;
			}

			#content.client-list a.project-link {
				display: block;
			}

			#content.client-list a.project-link span {
				text-decoration: underline;
			}

			#content.client-list a.project-link: hover {
				color: #FFFFFF;
			}
	
			#content.contact a:hover {
				text-decoration: none;
				border-bottom: 1px dotted;
			}



/*
---------------- =FOOTER---------------------- */


#footercontainer {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 10px;
	padding-bottom: 20px;
	position: relative;
}

#footer {
	display: none; /* for javascript fade-in after fully loaded; #page needs this also */
	width: 100%;
	min-width: 1000px;
	height: 20px;
	position: relative;
	float: left;
	font-weight: normal;
	line-height: normal;	
	margin: 0 0 0px 0;
}

#footer p {
	width: auto;
	float: right;
	font-size: 12px;
	margin: 0 0 0 10px;
	letter-spacing: .17em;
	text-transform: uppercase;
}

#footer a {
	color: #000000;	
	text-decoration: none;
}

#footer a:hover {
	border-bottom: 1px dotted;
	text-decoration: none;
}
	
.clearfooter {
   height: 10px;
   clear: both;
}