@import url('reset.css');

body{font: 76%/1.5em Verdana, Arial, San Serif; background: url(../images/bg.png) 0 0 repeat-x #1568be; color: #384b5c;}

h1{width: 564px; height: 39px; display: block; overflow: hidden; text-indent: -999em; }
h2{font-size: 1.2em; color: #2461a4; font-weight: normal; margin:0 0 4px 0;}
h3{font-size: 1.2em; color: #2461a4; margin:0 0 4px 0;}
h4{font-size: 1.1em; color: #2461a4; font-weight: normal; font-style: italic;  margin:0 0 26px 0;}
h5{font-size: 1.0em;}

p{margin-bottom:10px;}

a {text-decoration: underline; color:#1a61a0;}
.highlight {color: #5c8b83;}
.img-right {float: right;}

#text .p-heading {margin: 0;}
#text p{margin-bottom:40px;}
#text ol, #text ul{margin-bottom:40px;}
#text ul li{ list-style: disc; margin: 0 0 0 40px;}
#text ol li{}


/************************
	Website Structure
*************************/

#wrap {width:790px; margin:35px auto 0; background:url(../images/bg-wrap.gif) 0 0 repeat-y;}
#top-curv { background: url(../images/bg-header.gif) 0 0 no-repeat; height: 27px;}
#bottom-curve {background: url(../images/bottom-curve.gif) 0 0 no-repeat; height: 19px; clear: both;}

#uniform-col {float: left; width: 210px; background:url(../images/bg-uniform.gif) 0 bottom repeat-y;}
#uniform-col h2#logo {margin: 0;}
#uniform-col h2#logo a{ background: url(../images/logo-numo.jpg) 5px 0 no-repeat #d2f4ee; display: block; overflow: hidden; text-indent: -999em; height: 178px; width: 210px;}

#content-col {float: right; width: 580px;}
#content-col h3#slogan {background: url(../images/slogan.gif) 0 0 no-repeat; height: 31px; width: 575px; display: block; overflow: hidden; text-indent: -999em; margin: 0;}

ul#nav{padding: 0 0 0 5px; background: #d2f4ee;}
ul#nav li{}
ul#nav li a{background-repeat:no-repeat; background-position: 0 0; overflow: hidden; text-indent: -999em; display: block; height:31px;  width:205px;}
	ul#nav li#nav-home a{background-image: url(../images/nav-home.png);}
	ul#nav li#nav-about a{background-image: url(../images/nav-about.png);}
	ul#nav li#nav-diy a{background-image: url(../images/nav-diy.png);}
	ul#nav li#nav-specs a{background-image: url(../images/nav-technical.png);}
	ul#nav li#nav-faqs a{background-image: url(../images/nav-faq.png);}
	ul#nav li#nav-distro a{background-image: url(../images/nav-distributors.png);}
	ul#nav li#nav-contact a{background-image: url(../images/nav-contact.png);}
	ul#nav li#nav-buy a{background-image: url(../images/nav-buy.png);}
ul#nav li a:hover {background-position: -205px 0;}

#p-index ul#nav li#nav-home a, #p-about ul#nav li#nav-about a, #p-diy ul#nav li#nav-diy a, #p-specs ul#nav li#nav-specs a, #p-distro ul#nav li#nav-distro a, #p-faqs ul#nav li#nav-faqs a,
#p-contact ul#nav li#nav-contact a, #p-buy ul#nav li#nav-buyt a {background-position: -205px 0;}
#p-index h1 {background: url(../images/h1-index.gif) 0 0; margin: 0 0 0 5px;}
#p-about h1 {background: url(../images/h1-about.gif) 0 0; margin: 0 0 0 5px;}
#p-diy h1 {background: url(../images/h1-diy.gif) 0 0; margin: 0 0 0 5px;}
#p-specs h1 {background: url(../images/h1-tech.gif) 0 0; margin: 0 0 0 5px;}
#p-faqs h1 {background: url(../images/h1-faqs.gif) 0 0; margin: 0 0 0 5px;}
#p-distro h1 {background: url(../images/h1-distributors.gif) 0 0; margin: 0 0 0 5px;}
#p-contact h1 {background: url(../images/h1-contact.gif) 0 0; margin: 0 0 0 5px;}
#p-buy h1 {background: url(../images/h1-buy.gif) 0 0; margin: 0 0 0 5px;}



#featured-prod {padding: 27px 16px; color: #000000;}
#featured-prod img {margin: 0 0 10px 0;}

#banner {margin-bottom: 5px;}
body#p-index #banner { background: url('../images/bg-cycle.jpg') no-repeat 0 0; }
#banner img{display: block; float: left; clear: both;}

#text {padding: 20px; background: url(../images/bg-content.gif) right 0 repeat-y;}

#footer {background:url(../images/bg-footer.gif) 0 0 no-repeat; height: 31px; width:750px; margin: 6px auto; padding: 15px 20px 20px;}
#footer p {margin-bottom: 5px;}
p#copyright {float: left; width: 180px; display: inline-block; color: #000000;}
#footer img {float: left;}
p#footer-nav {float: left; width: 530px; margin: 0 0 0 25px; color:#2b8373;}
p#footer-nav a {color:#2b8373;}
p#footer-nav a:hover {color:#0f594b;}

/*=============================================================
	cmx forms
=============================================================*/

form.cmxform fieldset, form.cmxform ol, form.cmxform li, form.cmxform legend {  padding: 0; font: normal 12px/20px "Verdana"; color: #000; }
form.cmxform ol { list-style: none; }
form.cmxform li { margin-bottom: 5px; }
form.cmxform label { display: inline-block; vertical-align: top; margin: 3px 0 0 10px; width: 140px; }
form.cmxform label.extended { width: 270px; }
form.cmxform input, form.cmxform select, form.cmxform textarea {
	width: 240px;
	padding: 3px 5px;
	border: 1px solid #d2d2d2;
	background: #e5e5e5;
	font: normal 12px/14px "Verdana";
	color: #000;
}
form.cmxform select { width: 251px; padding-right: 0; margin: 0; }
form.cmxform textarea { display: inline-block; height: 100px; overflow: auto; }
form.cmxform textarea.collasped { height: 50px; }
form.cmxform input.checkbox { width: 16px; height: 16px; border: 0; background: none; padding: 0; margin: 0 5px 0 0; vertical-align: middle; }
form.cmxform input.send { border: 0; width: 90px; height: 30px; padding: 00; text-align: center; font-size: 11px; font-weight: bold; color: #fff; text-decoration: none; background: #2b8373; display: inline; margin: 0 5px 0 0; }
form.cmxform input.send:hover, form.cmxform input.send.inputhover { color: #fff; text-decoration: none; background: #2461a4; }

td { padding:  2px 0 2px 10px; vertical-align: top; }