/***************************************
   =HEADER STYLES
-------------------------------------- */
/* import styles that apply to all sections - branded and non- */
@import url("header.css");

/* styles just for non-branded section */


/***************************************
   =LAYOUT
-------------------------------------- */

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0; 
  text-align: center;
}

#wrapper {
  position: relative;  
  width: 772px;
  margin: 0 auto 20px auto;
  padding: 20px 0 0 0;
  text-align: left;
}

#container {
  position: relative;
}
#content {
  float: right;
  width: 560px;
/*  margin-left: 210px;*/
/*  display: inline;*/
  padding: 25px 0;
} 

#navigation {
  width: 200px;
  float:left;
  top: 0;
  left: 0;
  display: inline;
  padding: 25px 0;
}

#navigation .link-description{
	padding: 0 5px;
}

#footer {
  padding: 10px 20px;
}

/***************************************
   =TYPOGRAPHY and BACKGROUNDS
-------------------------------------- */

body {
  font-size: 62.5%; /* Sets 1em to 10px */
  font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
  background: #264c55 url(../images/2007/background.jpg) repeat-x 0 0;
  color: #fff;
}

#wrapper {
  background: url(../images/2007/top.jpg) no-repeat 0 0;  
}

#container {
  font-size: 1.2em;
  color: #0b3344;
  margin-top: 10px;
  border: 1px solid #fff;
  border-bottom: 0;
  background: url(../images/2007/container.gif) repeat-y 0 0;
}

#footer {
  color: #dd530f;
  border: 1px solid #fff;  
  border-top: 0;
  background: #3e6269;
  font-size: 1.1em;
}
#footer .legal {
  padding: 2px 0;
  color: #fff;
}

h2 {
  font-size: 1.2em;
  margin-bottom: 1em;
}

h3 {
  font-size: 1.1em;
  margin-top: 1em;
}

h4 {
  font-size: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
}

h5 {
  font-size: 1em;
  margin-top: .1em;
  margin-bottom: .1em;
}

h6 {
font-size: 1em;
  margin-top: -1em;
   margin-bottom: 1em;
  }

p {
  margin-bottom: 1em;
}
#content * {
  padding-right: 15px;
  padding-left: 15px;
}
#content * * {
  padding-right: 0;
  padding-left: 0;
}

#content ul,
#content ol {
  margin-left: 1.1em;
  margin-bottom: 1em;
}
#content ol li {
  margin-top: .5em;
}

/* links */
a {
  color: #dd530f;
}
#content a:visited {
  color: #777;
}
#navigation h2 a:visited {
  color: #dd530f;  
}

#container .heading a:visited,
#container .subhead a:visited {
  color: #fff;
}

a img {
  border: 0;
}

/* striping */
.odd {

}
.even {
  background-color: #eff7ff;
}

#content ul.alternate li {
  padding: .25em;
}

/* active class */
#container .active {
  color: #708d93;
}
#container a.active {
  cursor: text;
  color: #708d93;
}
/***************************************
 =General floating and clearing
-------------------------------------- */

.float-left {
  float: left;
  padding: 1em 1em 1em 0;  
}
.float-right {
  float: right;
  padding: 1em 0 1em 1em;  
}
.align-right {
  text-align: right;
}

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

.float-center {
  margin-left: auto;
  margin-right: auto;
  clear: both;
}
#content .align-center {
  text-align: center;
}
#content .callout {
  float: right;
  padding: .5em;  
  margin: 1em 0 1em 1em;
  width: 35%;  
  background: #ccc;
  border-top: 1px solid ##999;
  border-bottom: 1px solid ##999;
  font-size: 1.2em;
}
/***************************************
   =main content area
-------------------------------------- */
#content .feature-image {
  float: right;
  margin-top: -25px;
  padding: 0 0 1em 1em;
}
#content .feature-logo {
  float: right;
  clear: right;
  padding: 0 0 1em 1em;
  margin-top: 5px;
}
/***************************************
 =NAVIGATION
-------------------------------------- */

/* navigation column */
#navigation * {
  margin-right: 12px;
}
#navigation * * {
  margin-right: 0;
}
#navigation h2 {
  text-transform: uppercase;
  padding-left: 12px;
}
#navigation ul {
  list-style-type: none;
  z-index:1000;
}
#navigation a {
  text-decoration: none;
}

/* =primary nav */
#navigation ul.primary-nav {
  margin-top: .1em 0;
  padding-left: 12px;
}
.primary-nav li {
  background: url(../images/2007/whitearrow2.gif) no-repeat 0 0;  
  margin: .5em 0;
  padding-left: 12px;
}

.primary-nav li li {
  background: none;
}
/* =secondary nav */
.secondary-nav li {
  margin-top: .8em;
  }

#howtobuy {
  background: #eef6f6  url(../images/2007/howtobuy.gif) no-repeat 0 0;
}

#blog {
  background: #eef6f6  url(../images/2007/blog.jpg) no-repeat 0 0;
  clear:both;
  height:39px;
}

#literature {
  background: #eef6f6  url(../images/2007/literature.gif) no-repeat 0 0;
}
#navigation li.down {
  background: url(../images/2007/literature.gif) no-repeat 0 -75px;
}
.secondary-nav li a {
  position: relative;
  display: block;
  padding: 12px 0;
  text-indent: -9000em;
  overflow: hidden;
}

.secondary-nav li ul {
  position: absolute;
  width: 198px;
  background: #c5d6d8;
}
.secondary-nav li li {
  margin: .5em 0 .5em 24px;
}
.secondary-nav li li a {
  display: inline;
  margin-top: 0;
  padding: 0;
  background: none;
  text-indent: 0;
}

/***************************************
   =SPECIAL STYLES
-------------------------------------- */
#content .notes ol,
#content .notes ul {
  font-size: .95em;
  margin: .5em 0 1em 3em;
}
.hover {
  cursor: pointer;
}
.float-half {
  float: left;
  width: 42%;
}
.float-half ul {
  list-style-type: none;
  margin-left: 0;
}
.float-half li {
  margin-left: 0;
}

#content .heading,
#navigation .heading {
  background-color: #dd530f;
  font-weight: bold;
  color: #fff;
  padding: 5px;
  margin: .25em 0;
}
#container .heading a {
  color: #fff;
}
#content h3.heading {
  font-weight: bold;
  margin-right: 20px;
  margin-left: 20px;
}
#content .footnote {
  color: #444;
  font-size: .95em;
  font-style: italic;
}

#content .footnote2 {
  color: #0B3344;
  font-size: .95em;
  font-style: italic;
}

#htb #content table {
  margin-bottom: 0;
}

#htb table table td {
  padding: 0 8px 6px 0;
}

/*  legacy styles */

.boldtext {
  font-weight: bold;
}
.trowalt {
  background-color: #eff7ff;
}

/***************************************
   =TABLES 
-------------------------------------- */

#content table {
  border-collapse: collapse;
  font-size: 1em;
  margin: .5em 20px 1em 20px;
  color: #0b3344;
}
#content form table {
  margin: 0 0 1em 0;
}
#content thead tr {
  background-color: #dd530f;
  color: #fff;
}

#content thead tr a {
  color: #fff;
}

#content thead tr a:visited {
  color: #fff;
}

#content thead tr,
#content thead th {
  font-weight: bold;
}
#content th {
  padding: 5px 5px 2px;
  text-align: left;
}
#content tbody th,
.subhead {
  background: #3e6269;
  color: #eff7ff;
  font-weight: normal;  
}
#content th.align-right {
  text-align: right;
}
#content td {
  padding: 5px;
}

/***************************************
   =FORMS
-------------------------------------- */
#content select {
  padding-right: 3px;
}

select[name="selfind"],
select[name="selState"],
select[name="CompanyType"] {
  min-width: 265px;
}

label.error 
{
  color: red;
  display: block;
}

/***************************************
   =SPECIAL PAGE TYPES
-------------------------------------- */

/***************************************
   =HOME PAGE
-------------------------------------- */
.home #wrapper {
  padding-top: 18px;
  background: url(../images/2007/home-wrapper.jpg) no-repeat 0 0;
}
.home #branding {
  border-left: 0;
  border-right: 0;
  width: 770px;
}
.home #feature-image {
  margin-left: 1px;
  padding: 7px 0 30px 0;
}

.home #container {
  border-top: 0;
  background: url(../images/2007/home-container.jpg) repeat-y 0 0;
}

.home #content {
  background: url(../images/2007/home-content.jpg) no-repeat 0 0;  
  width: 450px;
  position: relative;
  float:left;
  padding: 12px 0;
  min-height: 265px;
}

.home #content a:visited {
   color: #dd530f;
}

.home dt {
  text-transform: uppercase;
  margin-top: 1em;
}
.home dd {
  margin: 2px 6px;
}
.home #container a {
  text-decoration: none;
  font-weight: bold;
}
.home #navigation {
  background: url(../images/2007/home-nav.jpg) no-repeat 0 0;  
  width: 320px;
  position: relative;
  float: right;
  margin-left: 0;  
  padding: 12px 0;
  min-height: 265px;
}
.home #navigation img {
  padding: 0 20px;
}
.home #navigation h2 {
  padding: 15px 18px 0 18px;
}

.home #navigation p {
  padding: 0 18px;
  margin-top:-10px;
}

/***************************************
   =plant results
-------------------------------------- */
#content .location-state,
#content .location-other {
  margin-right: 20px;
  margin-left: 20px;
  padding: 5px;
  background: #f5f7f6;
}
.location-state {
  border: 2px solid #ddd;
  border-bottom: 0;
}

.location-other {
  font-size:.9em;
  margin-top: .7em;
  margin-bottom: .2em;
  padding: 3px 0px 0px 0px;
  border: 2px solid #ddd;
  border-top: 0;

}

/***************************************
   =PRODUCT INDEX page 
-------------------------------------- */
.product-index #container {
  background: #c6d0d2 url(../images/2007/prodcat-container.jpg) repeat-y 0 0;
  border-top: 0;
}  
.product-index #content {
  padding-top: 1em;
  float: left;
  position: relative;
  margin-left: 0;
  width: 493px;
  background: url(../images/2007/prodcat-content.jpg) no-repeat 0 0;
}
.product-index #content h2 {
  text-transform: uppercase;
  padding: 1em 20px .75em 20px;
  margin-right: 12px;
  background: #c5d6d8;
}
.product-index #content h3 {
  font-weight: normal;
  margin: 0;
  font-size: 1em;
  text-transform: uppercase;
}

.product-index #content h3 a {
  text-decoration: none;
}

#content .browse-category {
  float: left;
  width: 222px;
  height: 120px;
  padding-right:0px;
}

.browse-category img {
  float: left;
}
.product-text {
  margin-left: 80px;
}


#content .product-list {
  list-style-type: none;
  width: 125px;
  margin: 0;
  padding: 5px 5px 3px 5px;
  background: #f5faf9;
  font-size: 11px;
}
#content .product-list li {
  padding: 0 0 2px 0;
}

.product-index #navigation {
  float: left;
  position: relative;  
  margin-left: 0;
  padding-top: 1em;
  width: 277px;
  background: url(../images/2007/prodcat-nav.jpg) no-repeat 0 0;  
}
.product-index #navigation h2 {
  padding-top: 2em;
  margin-bottom: .5em;
}
.product-index #navigation .secondary-nav {
  margin-top: 0;
  margin-right: 0;
}
.product-index .secondary-nav li ul {
  width: 277px;
} 

/* quick find */

#quick-find {
  display: none;
  height: 265px;
  width: 260px;
}
#quick-find form {
  display: inline;
}
#quick-find select {
  width: 215px;
  margin-left: 12px;
}

#go {
  font-weight: bold;
  color: #dd530f;
  padding: 10px 8px 10px 2px;
  line-height: 2em;
  background: url(../images/2007/greenarrow.gif) no-repeat 100% 46%;
}
#navigation .response {
 visibility: hidden;
 height: 2em;
 margin-right: 0;
 padding: 1em;
}

/***************************************
   =PRODUCT CATEGORY LANDING pages
-------------------------------------- */
.product-category #content {
padding-top:1em;
width:559px;
}

.product-category #navigation {
  padding-top: 1em;
}
.product-category #content h2 {
  padding: 0 1em 1.25em 1em;
  margin-bottom: 0;
  background: url(../images/2007/h2-productcat.jpg) no-repeat 0 100%;  
}
#content .product-info {
  padding: 1em 1em .75em 1em;
  border-bottom: 1px solid #c6d0d2;
}

.product-info h3 {
  margin: 0 0 1em 0;
  text-transform: uppercase;
}
.product-info p {
  margin-bottom: 0;
}
.product-summary {
  float: left;
  width: 320px;
  
}
.product-image {
  float: right;
}

/***************************************
   =PRODUCT TOP PAGES (for individual products)
-------------------------------------- */

.product-top #container {
  background: transparent url(../images/2007/top.jpg) repeat-y 0 0;
  position: relative;
}
.product-top #content {
/*  float: right;
  clear: both;*/
  float: none;
  width: 770px;
  margin: 268px 0 0 0;
  padding-top: 1.5em;;
  background-image: none;
  background-color: #d6ddde;
  min-height: 3em;
}

.product-top #content .feature-image {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 0;
}

.product-top #navigation {
  position:absolute;
  width: 242px;
  padding-top: 10px;
  background: url(../images/2007/leftnav-prodtop.jpg) no-repeat 0 0;  
}
.product-top .secondary-nav li ul {
  width: 230px;
}

/***************************************
   =SITE MAP
-------------------------------------- */
body.sitemap #content, 
body.sitemap #navigation {
  padding: 0;
}
body.sitemap #navigation {
  width: 277px;
  background: url(../images/2007/prodcat-nav.jpg) no-repeat 0 0;  
}

.sitemap #navigation * {
  padding-right: 5px;
  padding-left: 5px;
}
.sitemap #navigation * * {
  padding-right: 0;
  padding-left: 0;
}
body.sitemap #content h3 {
  margin-right: 12px;
  font-weight: bold;
}
body.sitemap #container .heading {
  margin-top: 0;
}

body.sitemap #container h4 {
  margin-bottom: .5em;
}
.sitemap .float-half {
  float: left;
  width: 40%;
}
.sitemap #container ul {
  list-style-type: disc;
  margin-left: 1.2em;
}
.sitemap #container li {
  margin-left: 0; 
  line-height: 16px;
  padding-left: 0;
}

body.sitemap #container a {
  text-decoration: underline;
}
.sitemap #navigation h4 a:visited,
.sitemap #navigation li a:visited {
  color: #777;
}

/***************************************
   =SINGLE-COLUMN PAGES
-------------------------------------- */
body.single #container {
  background-image: url(../images/2007/single-content.jpg);
  background-color: #d9dee1;
}
body.single #navigation {
  display: none;
}
body.single #content {
  width: 100%;
  background-image: none;
  background-color: #d9dee1;
}


body.single #content table {
  width: 730px;
}

.js #HowToBuyControl_rblProduct tr,
.js #ContactForm_cblProduct tr {
  display: none;
}



/***************************************
   =HTB
-------------------------------------- */

.stepone {
margin-top:-6px;
}


/***************************************
   =Allow clears after the element the style is applied to.
-------------------------------------- */

.clear-after:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clear-after {display: inline-block;}

/* Hides from IE-mac \*/
* html .clear-after {height: 1%;}
.clear-after {display: block;}
/* End hide from IE-mac */

.js #rblProduct tr,
.js #cblProduct tr {
     display: none;
}

#HowToBuyControl_trProduct td.product-label 
{
	padding: 12px 0 0 4px;
}
#HowToBuyControl_trProduct td.product-label a.change-selection {
	padding-left: 2em;
	font-size: 8pt;
}
#HowToBuyControl_tblHTB 
{
	width: 450px;
}

/*******************************************
  =Newsletter Archive Pages.
-----------------------------------------*/

.newsletter-archive tr td a img{
	border-top: 1px solid #999999;
	border-left: 1px solid #999999;
	border-bottom: 2px solid #999999;
	border-right: 2px solid #999999;
}


/*******************************************
  =LEED Pages
------------------------------------------*/
#green-header{
	overflow: auto;
}

#green-header h2,
#green-header h3,
#green-header p{
	width: 75%;
	}
	#green-header h2{
		color: #669900;
		font-size: 1.4em;
		margin: 0;
	}
	#green-header h3{
		margin: 0 0 20px 0;
	}

.leed #green-header .green-logo{
	float: right;
	height: 75px;
	width: 75px;
}

#leed-tables{
	width: 100%;
}

h2.leed-table-title{
	height: 16px;
	width: 100%;
	margin: 10px 0 5px 0;
	padding: 5px 0;
	background: orange url('/about/images/green-title-bar.gif') top left repeat-x;
	font-size: 1em;
	color: #FFFFFF;
	border: 1px solid #669933;
}

.leed-buttons{
	display: block;
	position: relative;
	top: -5px;
	width: 26px;
	height: 26px;
	margin-right: 5px;
	float: left;
	}

.leed-disclaimer{
	font-size: .8em;
	font-style: italic;
	color: #999999;
	padding-top: 20px;
}

#content .materials-resources-table{
	width: 100%;
	margin: 0;
	padding: 0;
	}
	.materials-resources-table tr{
		vertical-align: top;
		width: 100%;
		}
		.materials-resources-table tr td{
			font-size: .9em;
			border: 1px solid #cccccc;
		}
		.materials-resources-table tr h3{
			margin: 0 0 10px 0;
		}
		.materials-resources-table tr.even{
		 	background: #FFFFFF url('/about/images/gray-gradient.jpg') top left repeat-x;
		}
		.materials-resources-table tr.odd{
			background: #FFFFFF url('/about/images/blue-gradient.jpg') top left repeat-x;
		}
		.materials-resources-table tr td .note{
			font-size: .8em;
			font-style: italic;
			color: #666666;
		}
.leed .float-half{
	border: 1px solid #999999;
	margin: 5px 0 5px 10px;
	background: #FFFFFF url('/about/images/gray-gradient.jpg') top left repeat-x;
	}
	#content.leed .float-half ul{
		padding: 0;
		margin: 10px 0;
		}
		#content.leed .float-half ul li{
			font-size: .9em;
			padding: 0;
			margin: 0 0 5px 0;
		}
	#content.leed img.float-half{
		padding: 0;
	}
	
/*******************************************
  =LEED Map Page
------------------------------------------*/
#map-holder{
	position: relative;
	display:block;
	width: 540px;
	height: 275px;
	overflow: auto;
	margin-bottom: 5px;
	}
	#leed-location-map{
		position:  relative;
		display: block;
		width: 390px;
		height: 275px;
		background-image: url('/about/images/all-locations-map.jpg');
	}
	#leed-location-map img{
		position: absolute;
		width: 390px;
		height: 275px;
		top: 0;
		left: 0;
		display: block;
	}

#leed-plant-locations{
	width: 520px;
	padding: 0 0 0 15px;
	margin: 20px 0 0 0;
}
#leed-plant-locations li{
	font-weight: bold;
	font-size: 11px;
	list-style: none;
	float: left;
	display: block;
	width: 145px;
	height: 15px;
	margin: 3px 4px;
	padding: 2px 7px;
	background: #999999 url('/about/images/leed-location-list-bg.jpg') top left no-repeat;
	-webkit-border-radius: 3px;
	-moz-border-radius: 5px;
	cursor: pointer;
	}
	#container #leed-plant-locations li a{
		text-decoration: none;
		color: #0B3344;
	}

#product-names ul{
	position: absolute;
	width: 150px;
	height: 234px;
	display: block;
	overflow: hidden;
	top: 0;
	left: 386px;
	background: #CCCCCC url('/about/images/leed-map-nav-bg.gif') top left no-repeat;
	padding-top: 41px;
}
#product-names li{
	display: block;
	width: 150px;
	height: 25px;
	color: #000000;
	cursor: pointer;
	text-indent: -9999px;
	text-decoration: none;
	list-style: none;
	background-image: url('/about/images/leed-map-nav-bg.gif');
	}
	#product-names li.enerflex    {background-position: 0  -41px;}
	#product-names li.latitudes   {background-position: 0  -66px; height: 35px;}
	#product-names li.floortruss  {background-position: 0 -101px;}
	#product-names li.rooftrusses {background-position: 0 -126px;}
	#product-names li.ijoists		  {background-position: 0 -151px;}
	#product-names li.openjoist   {background-position: 0 -176px;}
	#product-names li.pwmicro     {background-position: 0 -201px;}
	#product-names li.wallpanels  {background-position: 0 -226px;}
	
	#product-names li.enerflex:hover    {background-position: -150px  -41px;}
	#product-names li.latitudes:hover   {background-position: -150px  -66px;}
	#product-names li.floortruss:hover  {background-position: -150px -101px;}
	#product-names li.rooftrusses:hover {background-position: -150px -126px;}
	#product-names li.ijoists:hover		  {background-position: -150px -151px;}
	#product-names li.openjoist:hover   {background-position: -150px -176px;}
	#product-names li.pwmicro:hover     {background-position: -150px -201px;}
	#product-names li.wallpanels:hover  {background-position: -150px -226px;}
	
	#product-names li.enerflex.selected    {background-position: -150px  -41px;}
	#product-names li.latitudes.selected   {background-position: -150px  -66px;}
	#product-names li.floortruss.selected  {background-position: -150px -101px;}
	#product-names li.rooftrusses.selected {background-position: -150px -126px;}
	#product-names li.ijoists.selected		 {background-position: -150px -151px;}
	#product-names li.openjoist.selected   {background-position: -150px -176px;}
	#product-names li.pwmicro:.selected    {background-position: -150px -201px;}
	#product-names li.wallpanels.selected  {background-position: -150px -226px;}
	
	.send-to-friend{
		font-size: 10px;
		}
		.send-to-friend input{
			font-size: 10px;
			padding: 2px;
			width: 400px;
			background-color: transparent;
			border: none;
		}