@charset "utf-8";
/* CSS clear: set default tag style and basic tag styles */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, img {
	margin:0 auto;
	padding:0;
	border:none;
}
body {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	background: url(../images/bkgradient.gif) #dfeef5 top left repeat-x;
	margin: 0;
	padding: 30px 0 30px 30px;
	text-align: center;
	color: #666666;
}
a {	color: #333333;	text-decoration: none;	border: none;}
a:link {	color: #333333;	text-decoration: none;	border: none;}
a:visited {	color: #666666;	text-decoration: none;	border: none;}
a:active {	color: #999999;	text-decoration: none;	border: none;}
a:focus {	color: #999999;	text-decoration: none;	border: none;	outline: 0;}
a:hover {	color: #000;	text-decoration: none;	border: none;}
h1 {	font: Verdana, sans-serif;	font-size: 120%;	margin: 0 0 5px 0;	padding: 0 0 5px 0;	line-height:1.3em;	text-transform:uppercase;}
h2 {	font: Verdana, sans-serif;	font-size: 120%;	margin: 10px 0 5px 0;	padding: 0 0 5px 0;	line-height:1.3em;	text-transform:uppercase; font-stretch: narrower; letter-spacing: -1px; clear:both;}
h3 {	font: Verdana, sans-serif;	font-size: 100%;	margin: 0 0 5px 0;	padding: 0 0 0px 0;	line-height:1.3em;	}
h4 {	font: Verdana, sans-serif;	font-size: 100%;	margin: 0 0 5px 0;	padding: 0 0 2px 0;	line-height:1.3em;	}
h5 {	font: Verdana, sans-serif;	font-size: 100%;	margin: 0 0 5px 0;	padding: 0 0 0px 0;	line-height:1.3em;	}
ul {	list-style: none;}
li {	list-style: none; }
li a {	text-decoration:none;	border:none;}
p {	font:Verdana, sans-serif;	font-size: 100%;	margin: 5px 0 5px 0;	padding: 0 0 5px 0;	line-height:1.5em;}
img {	border:none; margin: 0 0 5px 0;}
address, address a{ text-transform:none; text-decoration:none; font-variant:normal; font-style:normal; padding: 0; line-height:1.3em; color:#000; font: Tahoma;}

blockquote {
/*border : 1px solid #336600;
width: 500px;
float: right;*/

}
blockquote:before { content: open-quote; font-weight: bold; }
blockquote:after { content: close-quote; font-weight: bold; }
blockquote.gogreen {border : 1px solid #336600; margin: 10px 0;padding: 10px;quotes: "\201C" "\201D";}
span.repimg { display:none;} p.repimg { display:none;}/*Use to replace text with image*/
.fltrt {float: right;margin-left: 8px; margin-right: 12px;}
.fltlft {float: left;margin-right: 8px;}
.clearfloat {clear:both;height:0;font-size:1px;	line-height: 0px;}
.skylight #container {
	width: 931px;
	background: #fff url(../images/containbkg.gif) top left repeat-y;
	margin: 0 auto;
	text-align: left;
	overflow: hidden;
}

.mainWrapper {
	width: 926px;
	background: url(../images/leftNavbkg.gif) bottom left repeat-x #dfeef5;
	margin: 0 0 0 1px;
	border-left: #006cc7 2px solid;
	border-right: #999 2px solid;
}
.skylight #header {
	background: url(../images/toplogo.jpg) top left no-repeat;
	width: 931px;
	height: 66px; 
	padding: 10px 0 0 20px; font: Verdana, sans-serif;text-transform:uppercase; font-stretch: narrower;font-size:8px; color:#000; font-weight:bold;
}
.skylight #header span {display: none;}
.skylight #header h1  {padding: 0; margin: 0;height: 50px; display: block; width:500px; margin-left: 400px;}
.skylight #header a {display: inline; color:#666666; }
.skylight #header a.logo {height: 50px; display: block; width:500px;}

.skylight #mainFooter {
	margin: 0 0 0 0;
	padding: 0;
	background: url(../images/footcap.gif) bottom left no-repeat;
	border-top: #006cc7 4px solid;
	text-align: left;
	height:115px;
}
.leftFooter {margin: 0 0 0 3px; padding: 2px 5px 5px 10px; background: url(../images/leftFootbkg.gif) top left repeat-x; width:218px; border-right:dotted 2px #e1e1e1;}
.leftFooter a, .leftFooter a:hover, .leftFooter a:visited, .leftFooter a:active{color:#000000;}
.footnav a, .footnav a:visited, .footnav a:active{color:#000000;}
.footnav a:hover {color:#333333; text-decoration:underline;}
.footnav { margin: 0 90px 0 0; padding:0 0 5px 0px; float:right; background:url(../images/ccardlogo.gif) #fff 0px 50px no-repeat; display:inline; height:100px;}

.skylight #mainBody {
	float: right;
	width: 692px;
	display: inline;
	text-align:left;
	padding: 0px 0px 5px 0px;
	background:#fff;
	margin: 0 0 0 0;
	border-left: #006cc7 2px solid;
	
}
.skylight #banner {
	float:right;
	width:686px;
	height: 164px;
	background: url(../images/banner.jpg) top right no-repeat;
	padding: 0 0 0 0;
	display: inline;
	margin:0 0px 10px 0;
}
.skylight #mainContent {
	text-align:left;
	margin: 5px 5px 5px 15px;
	background: none;
}
.skylight #leftCol { /*http://www.positioniseverything.net/articles/onetruelayout/equalheight*/
	float:left;
	overflow: hidden;
	width:232px;
	/*margin: 0 0 -600px 0px;padding: 0 0 600px 5px;
	background: url(../images/leftNavbkg.gif) bottom left repeat-x #dfeef5 ;*/
}

.optionalMeasurementBlock {
	display: none;
}
.visibleMeasurementBlock {
	display: auto;
}
/* NAVIGATION */
#mainnav ul {
	list-style-type: none;
	font-weight:bold;
	text-transform:uppercase;
	background:#fff;
	}
#mainnav li {
	margin: 0 0 0 0;
}
#mainnav a
{font-family: Arial;
font-size: 14px;
display: block;
height: 27px;
width: 232px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #016cc7;
line-height: 23px;
padding-left: 15px;
padding-top: 5px;
color: #000;
text-decoration: none;
}
 /*{
	display: block;
	padding: 5px 0 0 73px;
	height: 22px;
	background-image: url(../images/nav_off.gif);
	border-top: 1px solid #d4d4d4;
	border-bottom: 1px solid #f0f0f0;
	border-right: 1px solid #f0f0f0;
}*/
#mainnav a:link, #menu a:visited {
	color: #000;
	text-decoration: none;
}
#mainnav a:hover {
	/*background-image: url(../images/nav_on.gif);*/
	color: #333;
	background:#e6f1f7;
}
#mainactive a:link, #mainactive a:visited, #mainactive a:hover {
	/*background-image: url(../images/nav_on.gif);*/
	color: #000;
	background:#e6f1f7;
}
div.sidebartext {margin: 0 5px 10px 5px;}
.skylight #rightCol {
	float: right;
	width: 160px;
	padding: 15px 5px 15px 20px;
	margin:0 10px 0 0 ;
}
/*COLOR CLASSES AND EFFECTS*/

	.red {color:#d54040;}
	.green {color:#336600;}
	.org { color:#f48b22;}
	.blue {	color:#006cc7;}
	
	a.green {color:#336600; font-weight:bold;} 
	a:hover.green {color:#003300; font-weight:bold; text-decoration:none;}
	a.blue {color:#006cc7; font-weight:bold;} 
	a:hover.blue {color:#003366; font-weight:bold; text-decoration:none;}
	a.red {color:#d54040; font-weight:bold;} 
	a:hover.red {color:#990000; font-weight:bold; text-decoration:none;}
	a.org {color:#f48b22; font-weight:bold;} 
	a:hover.org {color:#993300; font-weight:bold; text-decoration:none;}
	
	.bkgred {background:#d54040;}
	.bkggreen {background:#cce088;}
	.bkgorg {background:#fced9e;}
	.bkgblue {background:#bae4fe;}
/*LIST COLORS*/
ul.bluelist {line-height:1.5em;margin: 0 0 15px 0}
ul.bluelist li {list-style-type: none;background: transparent url(../images/bullet_b.gif) 0px 5px no-repeat;padding:0 0 0 15px;}
ul.bluelist li a {color: #999;}
ul.bluelist li a:hover {color: black; }
ul.bluelist li a#current {color: #666;}
ul.orangelist {line-height:1.5em;margin: 0 0 15px 0}
ul.orangelist li {list-style-type: none;background: transparent url(../images/bullet_o.gif) 0px 5px no-repeat;padding:0 0 0 15px;}
ul.orangelist li a {color: #999;}
ul.orangelist li a:hover {color: black; }
ul.orangelist li a#current {color: #666;}
ul.greenlist {line-height:1.5em;margin: 0 0 15px 0}
ul.greenlist li {list-style-type: none;background: transparent url(../images/bullet_g.gif) 0px 5px no-repeat;padding:0 0 0 15px;}
ul.greenlist li a {color: #999;}
ul.greenlist li a:hover {color: black; }
ul.greenlist li a#current {color: #666;}
ul.redlist {line-height:1.5em;margin: 0 0 15px 0}
ul.redlist li {list-style-type: none;background: transparent url(../images/bullet_r.gif) 0px 5px no-repeat;padding:0 0 0 15px;}
ul.redlist li a {color: #999;}
ul.redlist li a:hover {color: black; }
ul.redlist li a#current {color: #666;}

.btn a, .btn a:visited {padding:5px; font-size: 10px; text-align: center; BORDER-RIGHT: #999999 thin outset; BORDER-TOP: gray thin outset; FONT-WEIGHT: bold; BORDER-LEFT: gray thin outset; COLOR: #ffffff; BORDER-BOTTOM: gray thin outset; FONT-FAMILY:  Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #006cc7;}
.btn a:hover {padding:5px; font-size: 10px; text-align: center; BORDER-RIGHT: #999999 thin inset; BORDER-TOP: gray thin inset; FONT-WEIGHT: bold; BORDER-LEFT: gray thin inset; COLOR: #ffffff; BORDER-BOTTOM: gray thin inset; FONT-FAMILY:  Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #d54040;}

/*HEADER-DIV UNDERLINE*/
.solid {background:url(../images/line_grey.gif) bottom left repeat-x;}
.dashed {background:url(../images/line_dashed.gif) bottom left repeat-x;}
/*PAGE TITLES*/
h2.pagetitle { width:670px; height:18px; display: block; border-bottom:solid 2px #CCCCCC;}
.t-reduce-ac-bills {background:url(../images/reduce_ac_bills.jpg) top left no-repeat;}
.t-identify-skylight {background:url(../images/type_of_skylight.jpg) top left no-repeat;}
.t-how-it-works {background:url(../images/how_does_it_work.jpg) top left no-repeat;}
.t-how-to-measure {background:url(../images/how_to_measure.jpg) top left no-repeat;}
.t-pricing-guide {background:url(../images/our_pricing_guide.jpg) top left no-repeat;}
.t-ready-to-order {background:url(../images/ready_to_order.jpg) top left no-repeat;}
.t-contact-us {background:url(../images/contact_us.jpg) top left no-repeat;}
.t-vs-heatblocker {background:url(../images/skylight_blinds_vs_heat.jpg) top left no-repeat;}
.t-people-say {background:url(../images/what_people_say.jpg) top left no-repeat;}
.t-privacy {background:url(../images/protect_privacy.jpg) top left no-repeat;}
.t-sitemap {background:url(../images/heatblocker_sitemap.jpg) top left no-repeat;}
.t-about-us {background:url(../images/about_us.jpg) top left no-repeat;}	
.t-ten-ways {background:url(../images/ten_ways_to_save.jpg) top left no-repeat;}
.t-installation {background:url(../images/installation_covers.jpg) top left no-repeat;}
.t-faqs {background:url(../images/faq_header.jpg) top left no-repeat;}	
.t-80-vs-90 {background:url(../images/80_vs_90_material.jpg) top left no-repeat;}
/*PAGE TITLES FOR EACH SKYLIGHT TYPE*/
.t-round-dome {background:url(../images/round-dome-hdr.jpg) top left no-repeat;}
.t-rectangular-dome {background:url(../images/rectangular-dome-hdr.jpg) top left no-repeat;}
.t-square-dome {background:url(../images/square-dome-hdr.jpg) top left no-repeat;}
.t-cluster-dome { background:url(../images/cluster-dome-hdr.jpg) top left no-repeat;}
.t-barrel-vaulted-flat { background:url(../images/barrel-vaulted-flat-hdr.jpg) top left no-repeat;}
.t-flat-glass { background:url(../images/flat-glass-hdr.jpg) top left no-repeat;}
.t-sbarrel-vaulted-rnd { background:url(../images/barrel-vaulted-rnd-hdr.jpg)top left no-repeat;}
.t-continuous-ridge { background:url(../images/continuous-ridge-hdr.jpg)top left no-repeat;}
.t-multiple-dome { background:url(../images/multiple-dome-hdr.jpg) top left no-repeat;}
.t-pyramid-hdr { background:url(../images/pyramid-hdr.jpg) top left no-repeat;}
.t-vaulted-trapezoid { background:url(../images/vaulted-trapezoid-hdr.jpg) top left no-repeat;}





	
/* LEFT SIDE BANNER BOXES	 */
	.sideBanner{ border-bottom:solid 2px #90bce1; border-left:solid 2px #cde2f1; border-right:solid 1px #cde2f1;  padding: 0px; margin:5px 6px 10px 6px;height:100%;}
	.sideBanner h3 {font-family: Arial; font-size: 14px; padding:8px 0 0 10px; margin:0; border-bottom:solid 2px #006cc7; height:23px;}
	.sidebanner p {}
	.reviews p {margin: 5px 5px 10px 10px;}
    .reviews a {}
	.reviews {background:url(../images/reviewbkgBlue.gif) top left repeat-x #d7e9f4; /*height:113px;*/}
	.gogreen {background:url(../images/boxhdrGreen.jpg) bottom right no-repeat #f3f9fb; color:#336600;}
	.installer {background:url(../images/boxhdrRed.jpg) bottom right no-repeat #f3f9fb; color:#d54040;}
	.talkblue {background:url(../images/boxhdrBlue.jpg) top right no-repeat #f3f9fb; color:#006cc7;}
	.readmore { text-align:right; padding: 5px;}
	
/* EASYSTEPSMENU */	
	#navSteps{ border-bottom:solid 2px #90bce1; border-left:solid 2px #cde2f1; border-right:solid 1px #cde2f1;  padding: 0px; margin:5px 6px 10px 6px;height:100%; background:#eaf3f9;}
	#navSteps h3 { height:100%; padding:0; margin:0;}
	#navSteps ul a:link, #navSteps ul a:visited {display: block;}
	#navSteps ul {list-style: none; margin: 0; padding: 0;}
	#navSteps span {	display: none;	}
	#steps {height: 150px;	margin:0;}
	#steps li {margin: 0; padding: 0; list-style: none; display: block; line-height:normal;}
	#steps a {display: block; margin:0;padding: 0; text-decoration:none; border:none;}
	#steps-one 		{height: 50px;}
	#steps-two 		{height: 50px;}
	#steps-three 	{height: 50px;}
	#steps-one a 	{height: 50px;background: url(../images/identify.gif) no-repeat;}
	#steps-two a 	{height: 50px;background: url(../images/measure.gif) no-repeat;}
	#steps-three a 	{height: 50px;background: url(../images/order.gif) no-repeat;}
    #steps-one a:hover {height: 50px;background: url(../images/identify3.gif) no-repeat;}
	#steps-two a:hover {height: 50px;background: url(../images/measure3.gif) no-repeat;}
	#steps-three a:hover{height: 50px;background: url(../images/order3.gif) no-repeat;}
    #identify #steps-one a:active {height: 50px;background: url(../images/identify3.gif) no-repeat;}
	#measure #steps-two a:active {height: 50px;background: url(../images/measure3.gif) no-repeat;}
	#order #steps-three a:active {height: 50px;background: url(../images/order3.gif) no-repeat;}	

.review-quote {
height: 96px;
padding:0;
margin: 20px 0 0 0;
background: url(../images/quote_left_b.gif) top left no-repeat #b8e4fe;
font: Verdana, sans-serif; font-weight:bold; font-size: 110%;line-height:1.3em;font-stretch: narrower; letter-spacing: -1px;
text-align:left;
}
.review-quote blockquote {
color:#666666;
background: url(../images/quote_right_b.gif) top right no-repeat; 
background-color: none;
height: 76px;
margin:0;
padding:10px 20px 10px 40px; 
}
.review-quote b { text-align:right; font-style:italic;}

.type-select {
height: 94px;
width:312px;
margin:5px 10px 5px 0px;
padding:2px;
background:#f2e49b;
float: left;
border: 2px solid #cac8c3;}

.type-select img {   
  float: left;
  width: 90px;
  height: 90px;
  margin: 0 4px 2px 0;
  display: inline;
  padding: 0;
  border: 1px solid #cac8c3;
}
.type-select h4 {	font: Verdana, sans-serif;	font-size: 110%;	margin: 0 0 5px 0;	padding: 0 0 5px 0;	line-height:1.3em;	text-transform:uppercase; font-stretch: narrower; letter-spacing: -1px; color:#333333;}


.type-select-n {
height: 114px;
width:660px;
margin:5px 0px 5px 0px;
padding:2px 2px 0 2px;
background:#f0f0f0;
float: left;
border: 2px solid #cac8c3;}

.type-select-n img {   
  float: left;
  width: 260px;
  height: 109px;
  margin: 0 4px 2px 0;
  display: inline;
  padding: 0;
  border: 1px solid #cac8c3;
}
.type-select-n h4 {	font: Verdana, sans-serif;	font-size: 110%;	margin: 0 0 5px 0;	padding: 0 0 5px 0;	line-height:1.3em;	text-transform:uppercase; font-stretch: narrower; letter-spacing: -1px; color:#333333;}

/*FORM SHOPPING CART STYLES	
#orderFormStd {width:400px; float: right; margin-bottom:10px;}
#orderFormStd .cart {border:#FF0000 solid 1px;}
#orderFormStd legend {width: 40px; margin:5px 20px 2px 5px;}*/
.orderForm {width:400px; float: right; margin-bottom:10px; }

fieldset {
border: 1px solid #dddddd;
}
label {
width: 80px;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
color: #666666;
font-size: 95%;
font-weight:bold;
}
.ordercustom label {
width: 120px;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
color: #666666;
font-size: 95%;
font-weight:bold;
}

input {
color: #666666;
background: #fff;
border: 1px solid #dddddd;
}
select
{
color: #666666;
background: #fff;
border: 1px solid #dddddd;
}
select.singlesky {border:none; background:url(../images/spacer.gif);}
.submit input {
margin-left: 8em;
color: #fff;
background: #d54040;
border: 2px outset #dddddd;
display: inline;
font-size: 88%;
} 
.viewcartbtn input {
float:right;
color: #666;
background: #dddddd;
border: 1px solid #dddddd;
display: inline;
font-size: 88%;
} 

.pricecalc {width: 250px;
margin:0;

}

.price {

text-align: right;
margin: 5px;
display: inline;
color: #FF0000;
font-size: 95%;
font-weight:bold;
}
.calc {}
.calc input {
margin-left:5px;
color: #666;
background: #fff;
border: 2px outset #dddddd;
display: inline;
font-size: 88%;
} 


legend {
color: #666666;
background: #ddd;
border: 1px solid #dddddd;
padding: 2px 6px 2px 6px;
margin-left:10px;
} 

form fieldset div.notes {
  float: right;
  width: 130px;
  height: auto;
  margin: 0 0 10px 5px;
  padding: 5px;
  border: ;
  background-color: ;
  color: #666666;
  font-size: 80%;
}

form fieldset div.notes h4 {
  background-image: url(/images/icon_info.gif);
  background-repeat: no-repeat;
  background-position: top left;
  padding: 3px 0 3px 0px;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #CCCCCC;
  color: #666666;
  font-size: 100%;
}

form fieldset div.notes p {
  margin: 0em 0em 1.2em 0em;
  color: #666666;
}

form fieldset div.notes p.last {
  margin: 0em;
}

.imgdesc{ border:#999999 1px solid; text-align:center; clear:both;}
.imgdesc p { background: #CCCCCC; color: #333333; margin:0; padding:2px;}

table.guide { text-align:left; width:660px; margin:10px 0; padding:0; font-weight:bold; border-bottom:solid 2px #90bce1; border-left:solid 2px #cde2f1; border-right:solid 2px #cde2f1;}
tr.guidehdr {background:#cde2f1; }
tr.guidehdr td{border-bottom:solid 2px #006cc7;}
table.guide td {height:25px; padding-left:10px;}
tr.guidebold {background:#dfeef5;}

tr.guidecat { color: #d54040;}
tr.guidecat td {border-bottom:2px #90bce1 solid;}

.choices {width:660px; clear:both;}


.picbox dl {text-align:center;margin-top:25px;} 
.picbox dt, .picbox dd {width:130px;float:left;} 
.picbox dt {margin-bottom:20px;} 
.picbox dd {margin:50px 0 0 -130px;} 
.picbox img {vertical-align:bottom;border:1px solid #999;padding:2px;background:#fff;} 
.picbox em {display:block;font-weight:bold;margin-bottom:5px;} 
.picbox dl a:hover img, .picbox dl a:active img, .picbox dl a:focus img {background:#006cc7;}  

/* faq syles */
div.faq {width:650px; margin-bottom:50px;}
div.faq h2, div.faq h2 a  {margin-top:20px; color:#006cc7;}
div.faq h2 a, div.faq h2 a:hover, div.faq h2 a:visited, div.faq h2 a:link { text-decoration:none; color:#006cc7;}    
div.faq div {border-top:1px solid #ededed;cursor:pointer;cursor:hand;clear:left;}
div.faq span {display:block;float:left;margin:10px 10px 8px 5px;}
div.faq h3 {font-weight:bold;color: #333333;display:block;float:left;width:600px;margin:8px 0px 8px 0px;}
div.faq p {padding:0px 10px 8px 10px;clear:left;}