/* ====================================================
   General styles
   ==================================================== */

body {
background-color: #e8effe;
line-height: 1.7;
}

a {
outline: none;
color: #027fd0;
}
	a:hover,
	a:focus {
	color: #36baff;
	}
	
h1 {
font-size: 13px;
margin: 10px 0 15px 0;
text-decoration: underline;
}	
	#homepage h1 {
	text-decoration: none;
	}
	
h2 {
font-size: 12px;
margin: 0 0 10px 0;
text-decoration: underline;
}
h3 {
font-size: 12px;
text-decoration: underline;
}
.clear {
clear: both;
}
.fl_right {
float: right;
}
.fl_left {
float: left;
}

/* ================================================== 
   Styles for index.php
   ================================================== */

#wrapper {
width: 942px;
height: 550px;
margin: 0 auto;
background: url(../images/bg_box.png) left top no-repeat;
margin-top: 20px;
}
.left_col {
float: left;
padding: 25px 30px 30px 30px;
padding-right: 0;
width: 588px;
}
	img#logo {
	float: left;
	margin-bottom: 19px;
	}
	.line {
	height: 1px;
	clear: both;
	border-top: 1px solid #46b0ee;
	margin-right: 30px;
	}
	.content {
	padding-top: 5px;
	}
	#homepage .content {
	padding-top: 16px;
	}
	a.icon1, a.icon2 {
	float: left;
	padding: 10px 0 10px 45px;
	margin-right: 20px;
	color: #00225d;
	font-size: 12px;
	}
	#homepage .content p a:hover {
	color: #027fd0;
	}
	a.icon1 {
	background: url(../images/icon_brochure.png) left center no-repeat;
	}
	a.icon2 {
	background: url(../images/icon_manual.png) left center no-repeat;
	margin-right: 0;
	}
	#BannerDiv {
	float: right;
	width: 232px;
	margin-left: 10px;
	}
	ul.bullets {
	background: #E5F1FE;
	margin: 0;
	width: 235px;
	padding: 15px 45px 10px 50px;
	margin-top: 25px;
	margin-bottom: 30px;
	line-height: 1.5;
	}
	ul.bullets li {
	margin-bottom: 10px;
	list-style-image: url(../images/arrow.png);
	padding-left: 5px;
	}
	
.right_col {
width: 324px;
float: right;
height: 550px;
background: url(../images/blue_corner_bottom.png) right bottom no-repeat;
}
	img.safe {
	margin: 13px 0 5px 30px;
	}
	.right_col h1 {
	background: url(../images/orange_bar.png) left center no-repeat;
	color: #fff;
	font-size: 13px;
	margin-top: 0;
	margin-bottom: 8px;
	padding: 7px 0 8px 5px;
	text-decoration: none;
	}
	.right_col p {
	line-height: 1.1;
	font-size: 12px;
	padding-left: 67px;
	}
	form.calculate {
	overflow: hidden;
	background: url(../images/calculator.png) center top no-repeat;
	margin-top: 10px;
	margin-left: 40px;
	width: 244px;
	padding: 58px 0 0 0;
	line-height: 1;
	}
	form.calculate input {
	width: 78px;
	text-align: center;
	margin-bottom: 4px;
	margin-left: 86px;
	padding: 1px;
	border: 1px solid #263840;
	}
	.right_col form.calculate p {
	padding-left: 0;
	text-align: center;
	font-size: 11px;
	}
	.watervolume {
	padding-top: 22px;
	}
	form.calculate .watervolume input {
	margin-left: 0;
	}
	form.calculate a {
	color: #025dc0;
	font-weight: bold;
	}
	
	.shape {
	clear: both;
	overflow: hidden;
	padding-left: 15px;
	}
	.shape select {
	float: right;
	margin: 29px 37px 0 0;
	width: 80px;
	}
	
	.volume {
	clear: both;
	overflow: hidden;
	margin-top: 29px;
	}
	form.calculate .volume input {
	width: 45px;
	margin: 0;
	}
		
	img.submit {
	margin: 8px 0 0 55px;
	}

/* ================================================== 
   Styles for aboutus.php
   ================================================== */
   
#aboutus .content {
padding-right: 30px;
}
#aboutus .content p {
padding-bottom: 15px;
}
.text {
background-color: #E5F1FE;
padding: 15px 20px;
height: 290px;
line-height: 1.4;
}

/* ================================================== 
   Styles for faqs.php
   ================================================== */
   
#faqs .content {
padding-right: 30px;
}
#faqs .content h1 {
margin-bottom: 20px;
}
#faqs .right_col {
background: url(../images/blue_side.png) right bottom no-repeat;
}
.overflow {
height: 300px;
overflow: auto;
padding: 0 5px;
}
.questions {
float: left;
width: 245px;
margin-bottom: 15px;
background: #E5F1FE;
padding: 15px;
}
.questions p {
line-height: 1.3;
margin-bottom: 10px;
font-weight: bold;
}
	.questions ol {
	margin-left: 23px;
	line-height: 1.3;
	margin-bottom: 10px;
	}
	.questions ol li {
	margin-bottom: 8px;
	}
	.questions a {
	display: block;
	}
	
.answers {
clear: both;
}
.answers ol {
list-style-type: lower-alpha;
margin-left: 23px;
line-height: 1.3;
}
.answers ol li {
padding-bottom: 5px;
}
.answers h2 {
margin-bottom: 10px;
margin-top: 10px;
color: #027fd0;
text-decoration: none;
}
.answers p {
line-height: 1.3;
}
a.up {
display: block;
padding-right: 11px;
background: url(../images/arrow_up.png) right center no-repeat;
text-align: right;
padding-bottom: 10px;
border-bottom: 1px dashed #46b0ee;
}
table.steps  {
margin-left: 12px;
line-height: 1.2;
font-size: 12px;
margin-top: 3px;
}
table.steps p {
padding: 0;
}
table.steps img {
margin-bottom: 5px;
}
table.steps tr td {
padding: 3px;
border-bottom: 1px dashed #02629e;
}
table.steps tr th {
font-size: 17px;
text-decoration: underline;
text-align: left;
padding: 10px 0;
}
table.steps tr td strong {
font-size: 14px;
}

/* ================================================== 
   Styles for contact.php
   ================================================== */
   
#contact .content {
padding-right: 30px;
}
#contact .content h1 {
margin-bottom: 0;
}
.error {
background-color: #FF5520;
color: #fff;
font-weight: bold;
padding: 0 5px;
}
.required {
color: #FF5520;
text-align: right;
font-size: 11px;
margin-bottom: 5px;
}
table.form span {
color: #FF5520;
}
table.form {
background-color: #E5F1FE;
padding: 20px 10px;
font-size: 12px;
}
table.form tr td {
padding: 6px 3px;
}
table.form input,
table.form select {
width: 160px;
font-size: 12px;
}
table.form textarea {
width: 400px;
height: 60px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#contact .right_col p {
line-height: 1.6;
padding: 0;
}
#contact .right_col h2 {
margin-top: 20px;
margin-bottom: 8px;
}
.address {
padding-left: 85px;
}
.address a {
color: #02629e;
}


/* ================================================== 
   Styles for success.php
   ================================================== */
   
#success .content {
padding-right: 30px;
text-align: center;
padding-top: 30px;
line-height: 3;
}


/* ================================================== 
   Styles for calculator.php
   ================================================== */

#calculator #wrapper {  
width: 911px;
height: 525px;
padding: 25px 1px 0 30px;
}
#calculator .content {
margin-right: 30px;
overflow: auto;
height: 395px;
border: 1px solid #aed7ef;
padding: 5px 10px;
background-color: #eaf3fc;
}
#calculator h1 {
margin: 5px 0 8px 0;
}
p.clickhere {
float: right;
font-size: 11px;
}
#calculator .content p {
padding-bottom: 10px;
line-height: 1.3;
}
#calculator .text {
background-color: #bee1f6;
padding: 10px 15px 10px 15px;
height: auto;
margin-bottom: 17px;
}
table.chemicals {
font-weight: bold;
margin-top: 5px;
}
table.chemicals span {
font-weight: normal;
font-size: 11px;
}
table.chemicals input {
width: 70px;
text-align: center;
}
.text select {
width: 130px;
margin-left: 5px;
}
#calculator h2 {
margin-bottom: 5px;
}
.message {
background-color: #bee1f6;
line-height: 1.3;
padding: 10px 15px;
font-size: 12px;
margin-bottom: 17px;
overflow: hidden;
}
.message select,
.message input {
margin-left: 5px;
margin-right: 5px;
}
#calculator img.submit {
margin: 7px 0 0 0;
}
#calculator img.fl_left {
margin-left: 10px;
}