/* stylesheet for Larry Sauer Design Studio.

   also see the print media stylesheet that overrides 
   several selectors here
   
 */
 

body {
  background-color:silver; /* this gives the page outside the design a coloration. c.f. background-color on the SiteEnclosure div */
  margin:0;
  padding:0;  
}

 
/* used to enclose the entire design, to provide positioning choices */   
#SiteEnclosure {
  position:relative;
  background-image:url(../images/bg_floorplan_with_logo.jpg);
  background-repeat:no-repeat;
  background-position:top left;
  width:880px;
  border-right:1px #eeeeee solid; /* gives the design a slight separation from adjoining white space */ 
  background-color:white;
}   

/* LS Design Studio logo (appears on all pages) */
/* update: 2/08 adding the logo to the background image in order to register logo with background position. 
   see background_with_logo.jpg and using 01.gif for this LSLogo layer. */
#LSLogo {
	position:absolute;
	top:40px;
	left:36px;
}

/* the site nav are the main buttons that get you from section to section. they appear under the logo. */
#SiteNav {
	position:absolute;
	left:35px;
	top:175px;
	width: 154px;
}
#SiteNav img {
	margin-bottom: 5px;
}


/* the actual page content, which includes title, body but not optional quote (portfolio) */
#PageContent {
  position:relative;
  margin-left:245px;
  padding-top:94px; /* marks the start of the page title */
  /*border-bottom:1px silver solid;*/ /* for debugging */
  padding-right:15px; /* keep text from bumping up against right edge */
}

/* style of the PageContent, used as a class so you can override this when necessary (using css and ids is very weighty) */
.PageContent,
.PageContent td,
.PageContent th {
  font-size:12px;
  font-family:Georgia,'Times Roman','Times New Roman',Serif;
  line-height:1.8em;
}

/* sometimes you want to override the expanded line-height which is the default within PageContent */
.lineheightnormal { line-height:normal !important; }

/* links in the PageContent div are generally green */
.PageContent a,
.PageContent a:visited {
  color:#368C96;
}
.PageContent a:hover {
  color:#62A5AD;
}

/* the graphical header, the title of the page. on the img tag, i.e. <img class='PageTitle'...> */
.PageTitle {
  display:block;
  margin-bottom:47px; /* you need to override this manually (e.g., on the element itself) when you want to use the space under the page title */
}

/* across the page bottom is a bar of features, which extends across the entire design */
#FeaturesBar {
  border-top:1px #368C96 solid;
  margin-top:45px; /* put some spacing between the Features Bar and the page content above it */
}
#FeaturesBar div {
  border-top:2px #85B8BF solid;
  background-color:#F7F8F9;
  padding:12px 0 12px 245px; /* padding around the graphical feature buttons which are 32px high */
}

/* text colors */
.red { color:#a91e22; }
.green { color:#368C96; }
.black { color:black; }

/* apply to span's, div's, etc. */
.nobreak { white-space:nowrap; }

/* small descriptive text */
.note { font-size:10px; font-family:Verdana,Arial,Helvetica,Sans-Serif; }

/* slightly smaller text */
.smallgreen { color:#368C96;font-size:12px; }

/* larger text for subheadings */
.subhead { font-size:18px;  }

/* plain links are not underlined, but underlined on hover */
a.plain { text-decoration:none; color:black; }
a.plain:hover { text-decoration:underline; }

/* ********************************** */
/* styles for the main Portfolio page */
/* ********************************** */

/* the PROJECT label on the main Portfolio page */
.ProjectLabel {
 font-family:Helvetica,Arial,Sans-serif;
 font-weight:bold;
 letter-spacing:1px;
 color:#a92e22;
}

/* the panel show/hides on the main Portfolio page */
.ProjectPanel {
 visibility:hidden;
 position:absolute;
 top:0;left:0;
 border-top:2px #368C96 solid;
}

/* the "view details" link on project panels */
.ProjectViewDetails {
 font-size:10px;
 font-family:Verdana,Helvetica,Arial,Sans-serif;
}

/* ******************************* */
/* styling for each portfolio page */
/* ******************************* */

.ProjectDescriptionLabel {
 font-family:Helvetica,Arial,Sans-serif;
 font-weight:bold;
 letter-spacing:1px;
 color:#a92e22;
}

/* optional project quote, upper right of page */
#ProjectQuote {
 position:absolute;
 top:15px; right:15px;
 width:365px;
 font-size:14px;
 color:#368C96;
 line-height:1.4em;
}

/* detail pages, the imagery */
td#PortfolioImages {
 padding-right:17px; 
}

/* detail pages, the little images you choose to see the big ones */
#ProjectImageChooser {
 margin-top:5px;
}
#ProjectImageChooser img {
 border:0;
 border-bottom:4px white solid;
 margin-right:4px;
}

/* detail pages, the narrative text description */
td#ProjectDescriptionText {line-height:1.4em; }

/* Prev/Next selector moves you through projects */
.PrevNext {
 position:absolute;top:130px;left:0;
 color:silver; /* links turn green */
}
.PrevNext a { text-decoration:none; }
.PrevNext a:hover { text-decoration:underline; }
#SiteEnclosure #HomeCopy {
	position: absolute;
	left: 35px;
	top: 380px;
	font: 12px/22px Georgia, "Times New Roman", Times, serif;
	width: 156px;
	color: #368D97;
}
#HomeCopy p {
	margin: 0px 0px 8px;
	padding: 0px;
}



#PageContent .HomeHeader {
	font: normal 1.1em/100% Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}
.HomeQuote  {
	font-style: italic;
	margin: 0px;
	padding: 0px;
}
.HomeQuoteAuthor  {
	margin: 0px;
	padding: 0px;
	text-align: right;
	font-size: 11px;
}
#PageContent .PullQuote {
	font-style: italic;
	font-weight: bold;
	margin-bottom: 5px;
	padding-bottom: 0px;
}

#PageContent  .PullQuoteAuthor {
	text-align: right;
	margin: 0px;
	padding: 0px;
	font-size: 11px;
}
h2 {
	font-size: 1.6em;
}
h3 {
	font-size: 1.4em;
}
h4 {
	font-size: 1.2em;
}
#GreenCost  th {
	text-align: left;
	padding: 5px;
	white-space: nowrap;
	border-bottom: 1px solid #999999;
}
#GreenCost td {
	padding: 5px;
}
.HelpfulLinks {
	font-size: 1em;
	line-height: 2em;
	margin: 5px;
	padding: 0px;
	list-style: none;
}
.HaveNeverDoneThis {
	font-size: 1.3em;
	font-style: italic;
}
.BackToLinks a {
	color: #368D97;
	text-decoration: none;
}
.BackToLinks a:hover {
	text-decoration: underline;
}