/* @override http://classicalrainwater/styles/default.css */

@import url(nav.css);
@import url(headings.css);

/* FORCE VERTICAL SCROLLBAR TO ALWAYS APPEAR IN FIREFOX */
html, body {min-height: 100%; margin-bottom: 1px;} 

/***********************************/
/*        STANDARD ELEMENTS        */
/***********************************/
body {
	background-color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #4b4b4b;
	margin: 0 0 15px;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: bold; line-height: 1.3em;}

/* SCRIPT STYLE HEADINGS - empty <em> tags are placed inside the <h1> tags and
   positioned absolutely on top of the <h1> plain text content. The <em> tags
   have the script style headings in gif format set as the background image.
   Therefore if images are disabled the plain text headings can still be seen. */
h1 {width: 300px; height: 26px; position: relative; font-size: 140%; color: #51a299; overflow: hidden; margin-bottom: 0.3em; padding-top: 10px;text-indent:-1000px;}
h1 img {position: absolute; top: 0; left: 0;height: 36px;}
/*h1 em {width: 300px; height: 36px; position: absolute; top: 0; left: 0; background: top left no-repeat;}*/

h1.short, h1.short img {width: 122px;}

h2 {font-size: 120%; margin-bottom: 1em;}
h3 {font-size: 120%; margin-bottom: 0.5em;}
h4 {font-size: 100%; margin-bottom: 0.3em;}

a img {border: none;}
a {color: #51a299;}
a:hover {}
.hoverLink {text-decoration:none;}
.hoverLink:hover {text-decoration:underline;}

p {margin: 0; padding: 0 0 1.3em; line-height: 1.3em;}
p.skipNav {position: absolute; left: -9999em;}

ol, ul {margin: 0 0 1.3em; padding-left: 2em;}
ul li, ol li {line-height: 1.3em; margin-bottom: 0.3em; margin-left: 0.5em;}
li ol, li ul {margin: 0.3em 0 0;}

form {margin: 0 0 1em; padding: 0;}
input, select {font-family: Arial, Helvetica, sans-serif; font-size: 100%;}

blockquote {margin: 0.5em auto;}


/***********************************/
/*           PAGE LAYOUT           */
/***********************************/
#container {width: 770px; background: url(/images/backgrounds/header.jpg) top left no-repeat #fff; padding: 0 110px; margin: 0 auto;}

#header {width: 770px; position: relative; border-bottom: 2px solid #808080; padding: 18px 0 0;}
#logo {display: block; margin-left: 138px;}
body#landing #logo {
	margin-bottom: 70px;
}
#classical {margin: 0px 0 10px 20px;}

#leftColumn {width: 160px; float: left; padding: 0 0 20px 0;}
#content {width: 586px; float: left; padding: 15px 0 15px 24px;font-size:110%;}

#footer {width: 760px; clear: both; background-color: #e7e9ee; color: #808080; overflow: hidden; padding: 5px;}
#footer p {float: right; line-height: 1.2em; margin: 0; padding: 0;}
#footer p.callUs {float: left; font-size: 120%; line-height: 1em;}


/***********************************/
/*            HOMEPAGE             */
/***********************************/

/* PRODUCT RANGE BOXES */
#productRanges {position: relative; border: 1px solid #999; margin-top: 10px;}
#productRanges ul {list-style: none; margin: 0; padding: 0; background: url(/images/backgrounds/range.gif) top left repeat-x #222; overflow: hidden; height: 1%;}
#productRanges ul li {float: left; width: 116px; border-right: 1px solid #999; margin: 0; padding: 0;}
#productRanges ul li.last {border-right: none;}
#productRanges ul a {display: block; width: 110px; min-height: 129px; color: #fff; font-weight: bold; text-decoration: none; padding: 3px;}
#productRanges ul a span {display: block; padding: 3px 5px 0;}
#productRanges ul a:hover span {text-decoration: underline;}

*html #productRanges ul a {height: 129px;} /* SET MIN-HEIGHT FOR IE6 */

/* SEARCH BOX */
#search {width: 564px; background: url(/images/backgrounds/search.gif) top left repeat-y; overflow: hidden; padding: 10px 20px 10px 0;}
#searchCorner {width: 20px; height: 20px; position: absolute; bottom: -1px; right: -1px; background: url(/images/backgrounds/search-corner.gif) bottom right no-repeat;}
#search form {margin: 0; padding: 0;}
#search label {float: left; color: #444;
	padding: 5px 10px 0 0;
font-weight: bold;width:296px;text-align:right;}
#search input#searchBox, input#searchSiteBox {float: left; padding: 1px 2px;}
#frmHomeSearch input#searchBox {
	border: 1px solid #878A8E;
	padding: 3px;
}
#frmHomeSearch input#searchBox:focus {
	border: 1px solid #5C5E61;
}
#search input#submit, input#submitSite {float: left; padding: 4px;} 
#search input#submit {
	padding-top: 6px;
}

#search #frmHomeSearchSite {border-bottom:1px dotted #999;overflow:hidden;height:1%;padding-bottom:4px;margin-bottom:4px;}
#search .example {color:#888;}

/* COLUMNS */
/*#column1 {width: 200px; float: left; padding-right: 15px; margin-top: 20px;}*/
#column1 {margin-top:10px; padding-right:10px; border-right:1px #CCCCCC solid; float:left; width:350px;}
/*#column2 {width: 200px; float: left; border-left: 2px solid #e7e9ee; border-right: 2px solid #e7e9ee; padding: 0 15px; margin-top: 20px;}*/
#column2 {margin-top:10px; padding-bottom:10px; border-bottom:1px #CCCCCC solid; float:right; width:200px;}
#column3 {float:left; margin-top:20px; padding-left:3px; width:200px; overflow:hidden;}
#column3 #star {position:absolute; margin:-15px 0px 0px 135px;}
#column3 #name {background-color:#444444; color:#FFFFFF; padding:3px 50px 3px 3px; font-weight:bold;}
#column3 #image {width:200px; text-align:center;}
#column3 #description {background-color:#EEEEEE; padding:5px; color:#333333; font-weight:bold; width:199px; overflow:hidden; border:1px #EEEEEE solid;}
#column3 #price {
	display:block;
	background-image:url(/images/products/feature-bottom.gif);
	width:199px;
	height:50px;
	color:#FFFFFF;
	font-size:2.2em;
	text-align:center;
	line-height:45px;
	overflow:hidden;
	text-decoration:none;
}
#bsi {padding-right: 15px;}
.caseThumb {float: left;}
.caseBrief {padding-left: 80px;}

/* Mailing List */

#mailinglistbox {
	margin-top:8px;
	background: #f3f3f3 url(/images/backgrounds/mailing-list-top.gif) no-repeat top right;
	min-height:72px;
	padding:12px 82px 8px 8px;
}
#mailinglistboxbottom {
	display:block;
	background: url(/images/backgrounds/mailing-list-bottom.gif) no-repeat;
	min-height:33px;
	padding:1px 10px;
	color:#FFF;
	font-weight:bold;
	text-decoration:none;
}

/***********************************/
/*       PRODUCT LIST PAGES        */
/***********************************/

.productRange {width: 90px; float: left; padding-right: 10px; font-size: 120%; color: #51a299; font-weight: bold;}
.productRangeIntro {border-left: 1px solid #808080; padding: 0 0 0 10px; margin: 0 0 10px 100px;}

.productRangeIntronew { }
#productRangeimage {
	float: left;
	border: 1px solid #84807f;
	padding: 2px;
	margin: 0 15px 10px 0;
}

/* PRODUCT TYPE LIST */
ul.products {list-style: none; border-top: 2px solid #808080; margin: 0; padding: 0;}
ul.products li {background: url(/images/backgrounds/dots.gif) bottom left repeat-x; font-size: 100%; padding-bottom: 1px; margin: 0;}
ul.products li a {
	display: block;
	background: url(/images/backgrounds/green-bar.gif) left -25px repeat-x #fff;
	font-size: 110%;
	font-weight: bold;
	text-decoration: none;
	padding: 0;
	cursor: pointer;
}
ul.products li a span {display: block; width: 550px; background: url(/images/backgrounds/red-arrow.gif) 7px center no-repeat; color: #686868; padding: 5px 18px;}
ul.products li a:hover, ul.products li a.current {background-position: left top; background-color: #51a299;}
ul.products li a:hover span {background: url(/images/backgrounds/white-arrow.gif) 7px center no-repeat; color: #fff;}
ul.products li a.current span {background: url(/images/backgrounds/white-arrow-down.gif) 6px center no-repeat; color: #fff;}

/* PRODUCT LIST (SUB-LIST OF 'PRODUCT TYPE' ABOVE) */
ul.productList {
	display: none;
	list-style: none;
	width: 580px;
	background: url(/images/backgrounds/grey-fade.jpg) top left repeat-x #fff;
	margin: 0;
	padding: 6px 3px 4px;
	overflow: hidden;
}
ul.productList li {
	float: left;
	width: 100px; 
	background: none;
	margin: 0; 
	padding: 8px;
}
ul.productList li a {background: none; color: #51a299; text-align: center; padding: 0;}
ul.productList li a img {display: block; margin: 0 auto 2px;}
ul.productList li a:hover {background: none; text-decoration: underline;}
ul.productListnew {
	overflow: hidden;
	display: none;
}

ul.products li ul.productListnew li {
	list-style: none;
	border-bottom: 1px solid #ccc;
	background: none;
	background-image: none;
	clear: left;
	float: left;
	width: 100%;
	padding: 10px 0;
}

ul.productListnew li a {
	background: none;
	color: #51a299;
	padding: 0;
}
ul.productListnew li a img {
	float: left;
	margin: 0 15px 0 0;
	}
ul.productListnew li a:hover {
	background: none;
	text-decoration: underline;
	}
ul.productListnew li p.buynow {
	float: right;
}

ul.productListnew li p.buynow a {
	background: url(../images/buy-now.png);
	width: 105px;
	height: 26px;
	display: block;
	text-indent: -999em;
}
ul.productListnew li p.description {
	margin-right: 120px;
}
ul.productListnew li p.description a:link, ul.productListnew li p.description a:visited {
	display: block;
	background: url(../images/backgrounds/red-arrow.gif) no-repeat 0 center;
	padding-left: 10px;
	font-size: 100%;
	font-weight: normal;
	text-decoration: underline;
}
div.productinfo {
	float: left;
	width: 480px;
}

div.productinfo.noimage {
	width: 555px;
}

ul.products li a:hover span {
	clear: both;
	}
ul.products li a.current span {
	clear: both;
	}
/***********************************/
/*      PRODUCT DETAIL PAGES       */
/***********************************/
table.product {background: url(/images/backgrounds/grey-fade.jpg) top left repeat-x; border-top: 2px solid #808080; font-size: 110%; margin-bottom: 15px;}
table.product th {
	background: url(/images/backgrounds/green-bar.gif) left top repeat-x #51a299;
	color: #fff;
	text-align: left;
	padding: 0px 5px;
}
table.product td {vertical-align: top;}
table.product td.image {padding: 10px 5px;}

table.productDetail form {margin-bottom: 0;}
table.productDetail td {background: url(/images/backgrounds/dots.gif) left bottom repeat-x; padding-left: 0;}
table.productDetail td.addToBasket {padding-right: 0;}


/***********************************/
/*         BASKET PAGES          */
/***********************************/

.basketHeader {background-color:#51a299;color:#FFF;}

/***********************************/
/*         GENERAL STYLES          */
/***********************************/
.clear {clear: both;}
.left {float: left;}
.right {float: right;}
.topOfPage {text-align: right; padding-bottom: 0.5em;}
.buildGreen {float: right; margin-bottom: 10px;}

ul.arrows {padding-left: 0;}
ul.arrows li {list-style: none; background: url(/images/arrows.gif) left 0.2em no-repeat; padding: 0 0 0.3em 16px;}
ul.arrows li a {text-decoration: none; font-weight: bold; color: #4b4b4b;}
ul.arrows li a:hover {text-decoration: underline;}

/***********************************/
/*         PPC LANDING PAGE          */
/***********************************/
ul#ppcboxes {
	border: 1px solid #999;
	padding: 10px 6px 10px 10px;
	margin: 0 0 5px 0;
	float: left;
	background: #242424 url(../images/ppc-boxes-grad.jpg) top left repeat-x;
	color: #fff;
	text-align: center;
}

ul#ppcboxes li {
	padding: 0 7px 0 0;
	margin: 0 5px 0 0;
	list-style: none;
	width: 179px;
	float: left;
	position: relative;
	min-height: 300px;
	_height: 300px;
	text-align: center;
	background: url(../images/ppc-li-border.jpg) top right no-repeat;
}

ul#ppcboxes li h2 {
	margin-top: 5px;
	margin-bottom: 5px;
}

ul#ppcboxes li p.info {
	font-size: 11px;
}

ul#ppcboxes li p.info {
	padding: 0 7px;
}


ul#ppcboxes li a.more {
	background: url(../images/view-full-range.png) 0 0 no-repeat;
	width: 175px;
	height: 26px;
	text-indent: -999em;
	display: block;
	position: absolute;
	bottom: 0;
	margin-left: 5px;
	left: 0;
}

ul#ppcboxes li a:hover {
	background: url(../images/view-full-range.png) 0 -26px no-repeat;
}

ul#ppcboxes li#last {
	margin-right: 0;
	border-right: none;
	background: none;

}
ul#ppcboxes li img {
	margin: 0;
}
div#specialoffer {
	width: 176px;
	float: left;
	position: relative;
}

div#specialoffer.sidebar {
	width: 158px;
	position: relative;
	border: 1px solid #444;
	border-bottom: none;
	border-top: none;
	margin-top: 20px;
}

div#offersrow {
	border: 1px solid #676767;
	float: left;
}
div#specialoffer h2 {
	background: #000;
	color: #fff;
	margin: 0;
	padding: 10px;
	font-size: 100%;
}

div#specialoffer.sidebar h2 {
	background: #444444;
}
div#specialoffer p {
	text-align: center;
	padding: 20px 15px 23px 15px;
	border-right: 1px solid #676767;
}

div#specialoffer.sidebar p#offerimage {
	padding: 15px 15px 10px 15px;
}
div#specialoffer.sidebar p {
	border-right: none;
	padding: 0 10px 8px 10px;
}
p#offerpercent {
	background: url(../images/10-percent.png) 50% 0 no-repeat;
	clear: both;
	height: 28px;
	text-indent: -999em;
	padding: 0;
	margin: 0;
}
div#monthoffer {
	float: left;
	width: 407px;
	border-left: 0;
	padding: 10px 0 0 0;
}

div#monthoffer p, div#monthoffer h2 {
	padding-left: 30px;
	padding-right: 15px;
}
div#monthoffer h2 {
	margin-bottom: 3px;
}
div#monthoffer p#noticeme {
	background: url(../images/ppc-reg-grad.jpg) 0 0 repeat-x;
	color: #fff;
	font-size: 150%;
	text-align: center;
	padding: 10px 0;
	position: relative;
	bottom: -1px;
}
div#specialoffer p#specialstar {
	border: none;
	float: none;
	width: 78px;
	height: 78px;
	border-left: 0;
	padding: 0;
	position: absolute;
	right: -25px;
	top: -10px;
}
p#freesitesurvey {
	margin: 30px 0 0 0;
	padding: 0;
}

p#freesitesurvey a {
	margin: 0;
	padding: 0;
	width: 166px;
	height: 109px;
	background: url(../images/free-site-survey.jpg) 0 0 no-repeat;
	display: block;
	text-indent: -999em;
}

p#freesitesurvey a:hover {
	background-position: 0 -111px;
}


/* @group Forms */
form#survey {
	margin: 0;

}
form#survey fieldset {
	border: 0;
	padding: 0;

}
form#survey h3 {
	margin-top: 1em;
}
.hide {
	display: none;
}
form#survey legend {
	font-weight: bold;
	font-size: 120%;
	padding-bottom: 20px;

}
form#survey li {
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
}
form#survey ol {
	margin: 0;
	padding: 0;
	margin-left: 0;
}
form#survey label {
	display: block;
	margin-bottom: .3em;
	font-weight: bold;
	padding-top: 5px;
}

form#survey li.inline {
	padding: 10px 0;
}

li.inline input {
	margin-right: .4em;
}

li.inline label {
	display: inline;
	font-weight: normal;
}
form#survey input.text, form#survey textarea, form#survey textarea select {
	border-top: 1px solid #abadb3;
	border-right: 1px solid #dbdfe6;
	border-bottom: 1px solid #e3e9ef;
	border-left: 1px solid #e2e3ea;
	font-family: arial;
	padding: 4px;
	font-size: 13px;
	width: 27em;
	margin-bottom: 6px;
}
form#survey select#title {
	width: auto;
	padding-right: 0;
}
form#survey select {
	background-image: none;
}
form#survey p#securityq {
	margin-top: 2em;
	border: 1px solid #E1E5EB;
	background: #fff;
	padding: 10px;
	margin-right: 40px;
	position: relative;
}
form#survey form input.datefield {
	color: #6E6E6E;
}
form#survey input.required {
	background: #fff url(../images/required.gif) no-repeat 98% 0;
}
form#survey textarea {
	margin-bottom: 10px;

}
form#survey input.text:focus, form#survey textarea:focus {
	border: 1px solid #9A9BA1;
	background: #FBFBFB;
}
form#survey input.small {
	width: 12em;
}

form#survey form p img {
	display: inline;
}

form#survey p#submit {
	margin-top: 1em;
	text-align: right;
	padding-right: 220px;
	border-top: 1px solid #ccc;
	padding-top: 20px;
	clear: both;
}
form#survey li.warning input.text {
	background: #FFE6E6;
}
form#survey div#warning {
	border: 2px solid #D85454;
	background: #FFE6E6;
	padding: 15px 15px 5px 15px;
	color: #CB3A3A;
	margin-bottom: 20px;
	margin-top: 20px;
}

form#survey div#warning h2 {
	color: #CB3A3A;
	font-size: 120%;
	margin-top: 0;
}
form#survey div#warning li {
	list-style: disc;
	list-style-position: inside;
}
form#survey.checkbox {
	display: block;
	position: relative;
	top: 8px;
}
form#surveydiv#checkboxbox {
	margin-top: 20px;
}
form#survey input[type=submit],label,select,.pointer {
	cursor:pointer;
}
form#survey input, form#survey textarea {
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
}
form#survey li.checkbox {
	margin-top: 1em;
	width: 30em;
}

form#survey li.checkbox label {
	display: inline;
	font-weight: normal;
}

/* @end */
p#viewproducts {
	
}

p#viewproducts a {
	background: url(../images/view-our-product-range.png) 0 0 no-repeat;
	width: 335px;
	height: 42px;
	display: block;
	text-indent: -999em;
}
img.rightimage {
	float: right;
	margin: 0 0 0 20px;
}
ul#teasers {
	margin: 20px 0 0 0;
	padding: 0;
	float: left;
	width: 580px;
}

ul#teasers li {
	margin: 0;
	padding: 0 25px;
	float: left;
	list-style: none;
	background-image: url(../images/home-divider-small.jpg);
	background-repeat: no-repeat;
	background-position: 100% 50%;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
ul#teasers li.first {
	padding-left: 0;
}


ul#teasers li#survey a {
	width: 135px;

}

ul#teasers li a {
	display: block;
	padding-top: 100px;
	background-repeat: no-repeat;
	background-position: 50% 0;
	width: 90px;
}

ul#teasers li a:link, ul#teasers li a:visited {
	text-decoration: none;
	color: #444;
	
}

ul#teasers li a:hover {
	color: #000;
}
ul#teasers li#benefits a {
	background-image: url(../images/home-cast-iron.jpg);
}
ul#teasers li#contact a {
	background-image: url(../images/home-contact-us.jpg);
}
ul#teasers li#survey a {
	background-image: url(../images/home-site-survey.jpg);
}
ul#teasers li#mailing a {
	background-image: url(../images/home-mailing-list.jpg);
}
ul#teasers li#green a {
	background-image: url(../images/home-build-green.jpg);
}
ul#teasers li.horizontal {
	width: 100px;
	float: right;
	clear: right;
	background: none;
	margin-bottom: 20px;
	margin-left: 15px;
	padding-right: 0;
}
ul#teasers li#mailing, ul#teasers li#green {
	position: relative;
	top: -80px;
}
ul#teasers li.horizontal a {
	padding-top: 70px;
	font-weight: normal;
}
p#viewproducts {
	
}

p#viewproductshome a {
	background: url(../images/view-our-products-home.png) 0 0 no-repeat;
	width: 454px;
	height: 47px;
	display: block;
	text-indent: -999em;
}

p#viewproductshome a:hover {
	background-position: 0 -46px;
}