/* Keep It Kool Style Sheets
----------------------------------------------- */

body {
margin: 0;
font-size: small;
font-family: Arial,Verdana,Helvetica,sans-serif;
background: url(images/blue-main-bg.gif) repeat-y top center;
}

a, a:visited {
font-weight: bold;
text-decoration: underline;
color: #006;
}

a:hover {
font-weight: bold;
text-decoration: none;
color: #006;
}

#wrapper {
width: 770px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}

h1, h2, h3, p, ul, li, form {
margin-top: 0;
margin-bottom: 0;
}

img {
border: none;
}

/* Header
----------------------------------------------- */

#header {
width: 770px;
background: url(images/header-bg.gif) no-repeat top left;
border-bottom: #006 solid 3px;
margin-bottom: 20px;
}

#header #logo {
float: left;
width: 175px;
}

#header #buttons {
float: right;
margin-top: 22px;
text-align: right;
}

#header #buttons .shade {
display: block;
height: 44px;
width: 262px;
background: url(images/but-shade-sails.gif) no-repeat;
text-decoration: none;
background-position: 0 0;
}

#header #buttons .shade:hover {
background-position: -262px 0;
}

#header #buttons .shade span {
position: absolute;
left: -1999em;
}

#header #buttons .waterproof {
display: block;
height: 44px;
width: 262px;
background: url(images/but-umbrellas.gif) no-repeat;
text-decoration: none;
background-position: 0 0;
}

#header #buttons .waterproof:hover {
background-position: -262px 0;
}

#header #buttons .waterproof span {
position: absolute;
left: -1999em;
}

/* Content
----------------------------------------------- */

#content {
width: 770px;
float: left;
}

#content #top-image {
width: 728px;
margin: /* Top */ 0 /* Right */ 21px /* Bottom */ 20px /* Left */ 21px;
}

#content #text-area-index {
width: 405px;
float: right;
}

#content #text-area-index p {
font-size: .9em;
font-weight: normal;
text-decoration: none;
color: #006;
margin: /* Top */ 0 /* Right */ 21px /* Bottom */ 1em /* Left */ 0;
}

#content #text-area-index a, #content #text-area-index a:visited, #content #text-area a, #content #text-area a:visited {
font-weight: bold;
text-decoration: underline;
color: #006;
}

#content #text-area-index a:hover, #content #text-area a:hover {
font-weight: bold;
text-decoration: none;
color: #FC3;
}

#content #left-button-area-index {
width: 345px;
float: left;
}

#content #left-button-area-index #left-column {
width: 177px;
float: left;
}

#content #left-button-area-index #left-column p {
float: right;
}

#content #left-button-area-index #left-column .products {
display: block;
height: 110px;
width: 156px;
background: url(images/but-products.gif) no-repeat;
text-decoration: none;
background-position: 0 0;
}

#content #left-button-area-index #left-column .products:hover {
background-position: -156px 0;
}

#content #left-button-area-index .products span, #content #left-button-area-index .technical span , #content #left-button-area-index .about span , #content #left-button-area-index .benefits span {
position: absolute;
left: -1999em;
}

#content #left-button-area-index #left-column .technical {
display: block;
height: 110px;
width: 156px;
background: url(images/but-tech-info.gif) no-repeat;
text-decoration: none;
background-position: 0 0;
}

#content #left-button-area-index #left-column .technical:hover {
background-position: -156px 0;
}

#content #left-button-area-index #right-column .about {
display: block;
height: 110px;
width: 156px;
background: url(images/but-about-us.gif) no-repeat;
text-decoration: none;
background-position: 0 0;
}

#content #left-button-area-index #right-column .about:hover {
background-position: -156px 0;
}

#content #left-button-area-index #right-column .benefits {
display: block;
height: 110px;
width: 156px;
background: url(images/but-benefits.gif) no-repeat;
text-decoration: none;
background-position: 0 0;
}

#content #left-button-area-index #right-column .benefits:hover {
background-position: -156px 0;
}

#content #left-button-area-index #right-column {
width: 160px;
float: right;
text-align: right;
}

#content #left-button-area-index #award {
width: 150px;
float: left;
clear: both;
}

#content #left-button-area-index #award p {
margin: /* Top */ 10px /* Right */ 0 /* Bottom */ 1em /* Left */ 21px;
}

#content #left-button-area-index #award img {
border: #339 solid 1px;
}

#content #breadcrumbs {
width: 770px;
float: left;
font-weight: normal;
text-decoration: none;
color: #006;
font-size: .8em;
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ 20px /* Left */ 0;
}

#content #breadcrumbs p {
margin: /* Top */ 0 /* Right */ 21px /* Bottom */ 0 /* Left */ 291px;
}

#content #breadcrumbs a, #content #breadcrumbs a:visited, #content #breadcrumbs a:hover {
font-weight: normal;
text-decoration: none;
color: #006;
}

#content #text-area {
width: 480px;
float: right;
border-left: #006 solid 1px;
}

#content #text-area h1 {
font-size: 1.8em;
font-weight: bold;
font-style: italic;
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ .5em /* Left */ 5px;
color: #006;
}

#content #text-area h2 {
font-size: 1.1em;
font-weight: bold;
margin: /* Top */ 0 /* Right */ 21px /* Bottom */ .5em /* Left */ 5px;
color: #006;
}

#content #text-area p {
font-size: .9em;
font-weight: normal;
text-decoration: none;
color: #006;
margin: /* Top */ 0 /* Right */ 21px /* Bottom */ 1em /* Left */ 5px;
}

#content #text-area p.sub-menu {
font-size: .9em;
font-weight: bold;
text-decoration: none;
color: #3CF;
margin: /* Top */ 0 /* Right */ 21px /* Bottom */ 1em /* Left */ 5px;
}

#content #text-area p.sub-menu a, #content #text-area p.sub-menu a:visited {
font-weight: bold;
text-decoration: underline;
color: #3CF;
}

#content #text-area p.sub-menu a:hover {
font-weight: bold;
text-decoration: none;
color: #FC3;
}

#content #text-area ol {
font-size: .9em;
color: #006;
margin-right: 21px;
margin-bottom: 1em;
}

#content #text-area ul {
font-size: .9em;
color: #006;
margin-right: 21px;
margin-bottom: 1em;
}

#content #text-area ul ul {
list-style: disc url(none) outside;
font-size: 1em;
color: #006;
margin-right: 21px;
margin-bottom: 1em;
}

#content #text-area ol li {
list-style: decimal url(none) outside;
margin-bottom: 3px;
}

#content #text-area ul li {
list-style: disc url(none) outside;
font-weight: bold;
color: #006;
margin-bottom: 3px;
}

#content #left-button-area {
width: 280px;
float: left;
margin-bottom: /* Top */ 0 /* Right */ 0 /* Bottom */ 1em /* Left */ 0;
}

#content #left-button-area #left-column {
width: 177px;
float: left;
}

#content #left-button-area #left-column p {
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ 3px /* Left */ 21px;
}

/* Form
----------------------------------------------- */

#content #text-area table {
font-size: .9em;
text-decoration: none;
color: #39C;
margin: /* Top */ 0 /* Right */ 21px /* Bottom */ 1em /* Left */ 5px;
}

#content #text-area table td {
padding: 5px;
}

.input-box {
width:200px;
color:#006;
background-color:#FFF;
border:1px #39C solid;
}

.button-form {
color: #FFF;
font-weight: bold;
padding: 1px;
background-color: #39C;
border: 1px #39C solid;
}

/* Buttons
----------------------------------------------- */

#content #left-button-area #left-column .products {
display: block;
height: 37px;
width: 156px;
background: url(images/but-sml-products.gif) no-repeat;
text-decoration: none;
}

#content #left-button-area #left-column .products:hover {
background-position: 0px -37px;
}

#content #left-button-area #left-column .products span {
position: absolute;
left: -1999em;
}

#content #left-button-area #left-column .aboutus {
display: block;
height: 37px;
width: 156px;
background: url(images/but-sml-about-us.gif) no-repeat;
text-decoration: none;
}

#content #left-button-area #left-column .aboutus:hover {
background-position: 0px -37px;
}

#content #left-button-area #left-column .aboutus span {
position: absolute;
left: -999em;
}

#content #left-button-area #left-column .technicalinformation {
display: block;
height: 37px;
width: 156px;
background: url(images/but-sml-tech-info.gif) no-repeat;
text-decoration: none;
}

#content #left-button-area #left-column .technicalinformation:hover {
background-position: 0px -37px;
}

#content #left-button-area #left-column .technicalinformation span {
position: absolute;
left: -999em;
}

#content #left-button-area #left-column .benefits {
display: block;
height: 37px;
width: 156px;
background: url(images/but-sml-benefits.gif) no-repeat;
text-decoration: none;
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ 10px /* Left */ 0;
}

#content #left-button-area #left-column .benefits:hover {
background-position: 0px -37px;
}

#content #left-button-area #left-column .benefits span {
position: absolute;
left: -999em;
}

/* ------- */

#content #left-button-area #right-column {
width: 89px;
float: right;
text-align: left;
}

#content #left-button-area #right-column p {
font-size: .8em;
font-weight: normal;
text-decoration: none;
color: #006;
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ .5em /* Left */ 0;
}

#content #left-button-area #right-column a, #content #left-button-area #right-column a:visited {
font-weight: bold;
text-decoration: underline;
color: #006;
}

#content #left-button-area #right-column a:hover {
text-decoration: none;
color: #006;
}

#content #left-image-area {
width: 271px;
float: left;
font-weight: bold;
font-style: italic;
text-decoration: none;
color: #F00;
font-size: 1.1em;
}

#content #left-image-area img {
display: block;
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ .5em /* Left */ 21px;
}

#content #left-image-area p {
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ .5em /* Left */ 21px;
}

/* Footer
----------------------------------------------- */

#footer {
width: 770px;
float: left;
font-weight: normal;
text-decoration: none;
color: #006;
font-size: .8em;
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ 10px /* Left */ 0;
clear: both;
}

#footer p {
margin: /* Top */ 0 /* Right */ 21px /* Bottom */ 0 /* Left */ 21px;
}

#footer a, #footer a:visited {
font-weight: bold;
text-decoration: underline;
color: #006;
}

#footer a:hover {
font-weight: bold;
text-decoration: none;
color: #FC3;
}

#footer #footer-left {
text-align: left;
width: 250px;
float: left;
}

#footer #footer-right {
text-align: right;
width: 450px;
float: right;
}

/* Hacks
----------------------------------------------- */


#wrapper:after, #header:after, #content:after, #footer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#wrapper, #header, #content, #footer {display: inline-block;}

/* Hides from IE-mac \*/
* html #wrapper, * html #header, * html #content, * html #footer {height: 1%;}

#wrapper, #header, #content, #footer {display: block;}
/* End hide from IE-mac */