/***************************************** Cleantech CSS by nwonline.co.uk *****************************************/ body { background: #ebebeb url('../images/site/bg-body.jpg') 0 0 repeat-x; margin:0; font: normal 11px/14px Verdana, Geneva, sans-serif;} /*components*/ #index_wrapper {width:980px;height:auto;margin:0 auto;position:relative} #navbox {width: 980px; height:100px;margin:0 auto; position: relative;} #header {width:200px;height:97px; margin: 0; float: left; padding: 0;} #maincontent{width:980px;height:auto; float: left; position: relative; top:0; margin-top: 10px} #leftcontent {width:530px;float:left;padding:10px 10px 20px 20px; background-color: #FFF; border: 1px solid #ddd;} #leftcontent-full {width:960px;float:left;padding:5px; background-color: #FFF; border: 1px solid #ddd; margin: 0 auto;} #rightcontent {width:725px;float:right;padding:15px} #legalcontent {width:820px;height:auto;float:left;background: #fff;padding: 25px 40px} #rightcol { float: left; width: 400px; padding: 0; margin: 0 0 0 10px; } #header span a { display: block; width: 200px; height: 97px; text-indent: -9999px; background: url('../images/site/cleantech_logo.jpg') no-repeat;} .green { color: #090;} .red { color: #103c63;} .small { font-size: 11px;} span.img_wrap { float: right } #leftcontent ul.machines { width: 500px; padding: 0; margin: 10px; position: relative; top: 20px; border: none; clear: both } #leftcontent ul.machines li { list-style: none; list-style-type: none; float: left; display: inline; width: 151px; margin: 5px; padding: 0; border: 1px solid #A3A3A3} /*Options*/ #options-container { background-color: #fff; padding: 5px; border: 1px solid #ddd; width: 960px; } div#options { position: relative; top: 0; left: 0; height: 240px; width: 960px; clear: both;} div#options ul { width: 960px; height: 235px; float: left; position: relative; padding: 0;} div#options ul li { float: left; display: inline; width: 235px; margin: 0; padding: 2px;} div#options ul li a { display: block; width: 235px; height: 235px; text-align: center; font: bold 12px/18px sans-serif; color: #ababab;} div#options ul li a#product_001 { background: url('../images/site/product_001.jpg') 2px 2px no-repeat} div#options ul li a#product_002 { background: url('../images/site/product_002.jpg') 2px 2px no-repeat} div#options ul li a#product_003 { background: url('../images/site/product_003.jpg') 2px 2px no-repeat} div#options ul li a#product_004 { background: url('../images/site/product_004.jpg') 2px 2px no-repeat} div#options ul li a#product_005 { background: url('../images/site/product_005.jpg') 2px 2px no-repeat} div#options ul li a#product_006 { background: url('../images/site/product_006.jpg') 2px 2px no-repeat} div#options ul li a:hover { color: #F66; text-decoration: none;} /*------------------------------ Products Nav -------------------------------*/ #products-nav { width: 957px ; height: 37px; background-image: url('../images/site/products-nav_bg.jpg'); margin: 5px 0; } #products-nav ul{ list-style-type: none; padding-left: 0;} #products-nav ul li { float: left; display: inline; margin: 0; padding: 10px 7px; border-right: 1px solid #ddd;font: bold 12px/16px Verdana, Geneva, sans-serif; color:#0f3c64; position: relative;} #products-nav ul li a{ color: #000; text-decoration: none; font-family: Verdana, Geneva, sans-serif; font-weight: normal; } #products-nav ul li a:hover { text-decoration: underline; } #products-nav li ul { list-style: none; position: absolute; visibility: hidden; overflow: hidden; top: 35px; left: 0; float: left; z-index: 100; padding: 5px 10px 10px 10px; background: #007e57 url('../images/site/nav_li_ul.jpg') 0 0 repeat-x; margin: 0; text-align: left; z-index: 10; } #products-nav li.hover ul, #products-nav li:hover ul { visibility:visible; z-index: 10} #products-nav li li { margin: 0; padding:0; text-align: left; min-height: 30px; float: left;clear: both; min-width: 210px; font: bold 12px/18px sans-serif; background: url('../images/site/png_dn.png') bottom repeat-x; border: none} #products-nav li li:first-child { border: none !important;} #products-nav li li a {font: bold 12px/30px sans-serif;width: 100%;color: #FFF;margin: 0;padding: 0 10px;text-decoration: none; text-shadow: none;} #products-nav li li a:hover {color: #fff;text-decoration: underline;} /*********************** headers ************************/ h1 { color: #013b70; font: bold 22px "Helvetica Neue", Arial, sans-serif; letter-spacing: -1px; padding: 0; margin: 10px 0 0 0; z-index: 0 !important;} h1 small { color: #e0213a !important;} h1 em { font-style: italic;} h2 { font: bold 16px/20px sans-serif; color: #009567; padding: 5px 10px 0 0; letter-spacing: -1px} h4 { font: bold 12px/20px sans-serif; color: #333;} #leftcontent h2 {font: bold 17px sans-serif; color: #009567; padding: 5px 10px 0 0;} #leftcontent h3 {font: bold 12px sans-serif; color: #009567; padding: 5px 10px 0 0;} /***************** Typography ******************/ p {color: #4d4d4d; font: normal 11px/15px Verdana, Geneva, sans-serif;} em { font: italic 11px/13px Verdana, Geneva, sans-serif; } a:link, a:visited { text-decoration: none; color: #009567; font-family:Arial, Helvetica, sans-serif;} a:hover, a:active { text-decoration: underline; color: #009567;} a.more { color: #06C; display: block; font: bold 11px/25px sans-serif; text-align: left;} /***************** Left Content *****************/ #leftcontent p a { color: #0f3c64; font: bold 12px Verdana, Geneva, sans-serif; text-decoration: underline; padding-top: 5px;} #leftcontent p a:hover { color: #444; font: bold 12px sans-serif; text-decoration: none;} #leftcontent blockquote { font: normal 12px/19px sans-serif; color: #666; font-style: italic; margin: 10px 40px 10px 40px; border-left: 2px solid #e0213a; padding: 5px 0 5px 10px;} #leftcontent cite { font: bold italic 12px/23px "Helvetic", Arial, sans-serif; color:#999; margin: 0 0 10px 0; display: block; width: 430px;} #leftcontent ul { clear: both; padding: 0; width: 590px; list-style-type: disc !important; list-style: disc !important; margin: 0;} #leftcontent ol { clear: both; padding: 10px 0; width: 590px; list-style-type: decimal !important; list-style: decimal !important; margin: 0;} #leftcontent ul li { font: normal 12px/19px sans-serif; color: #666; list-style-type: disc !important; list-style: disc !important; margin: 0 0 0 30px; width: 440px;} #leftcontent ol li { font: normal 12px/19px sans-serif; color: #666; list-style-type: decimal !important; list-style: decimal !important; margin: 0 0 0 30px} #leftcontent ol li li{ font: normal 12px/19px sans-serif; color: #666; list-style-type: lower-roman !important; list-style: lower-roman !important; margin: 0 0 0 30px} #leftcontent address { font: normal 12px/19px sans-serif; color: #666; font-style: italic;} #leftcontent abbr { font: bold 12px/19px sans-serif;} /*Gallery*/ #leftcontent .gallery { float: left; list-style-type: none !important; list-style: none !important; width: 620px; padding: 0 0 10px 0; margin: 0;} #leftcontent .gallery li { width: 126px; height: 106px; float: left; border: 1px solid #ccc; padding: 1px; background: #fff; margin: 0 0 0 27px; list-style-type: none !important; list-style: none !important;} #leftcontent .gallery li:first-child { margin: 0;} /*Contact Forms*/ #form { width: 500px; padding: 15px 10px 10px 10px; float: left; margin: 10px 0; background: #F7F7F7; border-top: 1px solid #dedede; border-bottom: 1px solid #ccc; overflow: hidden;} #form label { width: 180px; float: left; clear: both; font: normal 12px/26px sans-serif; color: #666;} #form label#textarea{ width: 180px; float: left; clear: both; font: normal 12px/26px sans-serif; color: #666; height: 110px;} #form label.full { width: 400px;} #form input { float: right; font: normal 12px/21px sans-serif; color: #666; width: 280px; margin: 2px 0; padding: 2px 4px;} #form submit { width: 90px; float: right; margin: 0; clear: both;} #form textarea { font: normal 12px/18px sans-serif; color: #666; padding: 4px; float: right; width: 260px; height: 110px; margin: 0;} #form select { font: normal 12px/23px sans-serif; color: #666; height: 23px; float: right; width: 272px; margin: 0;} #form small { font: normal 11px/34px sans-serif; color: #666;} #form em { font-style: italic;} /***************************** Contact Page *****************************/ /*Contact Forms*/ #contact-form_dup { width: 460px; padding: 15px 10px; float: left; margin: 10px 0; border-top: 1px dashed #ccc ; background-color: #F0F0F0; border-bottom: 1px dashed #ccc; overflow: hidden;} #contact-form_dup div.form { float: left; width: 400px; margin: 0 0 0 10px; } #contact-form_dup label { width: 180px; float: left; clear: both; font: normal 12px/26px sans-serif; color: #666;} #contact-form_dup label#textarea{ width: 100px; float: left; clear: both; font: normal 12px/26px sans-serif; color: #666; height: 100px;} #contact-form_dup label.full { width: 330px;} #contact-form_dup input { float: left; font: normal 12px/21px sans-serif; color: #666; width: 200px; margin: 2px 0; padding: 2px 4px;} #contact-form_dup .submit { width: 90px; float: right; margin: 0; clear: both;} #contact-form_dup textarea { font: normal 12px/18px sans-serif; color: #666; padding: 4px; float: left; width: 202px; height: 110px; margin: 0;} #contact-form_dup select { font: normal 12px/23px sans-serif; color: #666; height: 23px; float: left; width: 210px; margin: 0;} #contact-form_dup small { font: normal 11px/34px sans-serif; color: #666;} #contact-form_dup em { font-style: italic;} /*************************** Navigation ****************************/ .navigation-wrapper { width: 750px; height: 43px; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; float: right; position: absolute; top: 23px; right: 10px; background: #fff url('../images/site/nav_bg.jpg') 0 0 no-repeat; } #topmenu ul{ width: 750px; font-family: Arial, Helvetica, sans-serif; margin: 0 auto; padding: 0; height: 23px; float: right; position: relative;} #topmenu li { height: 25px; display: inline; letter-spacing: 0px; font-size: 12px; list-style: none; margin: 0 2px 0 2px; } #topmenu li.telno { float: right; padding: 6px 10px; color: #013b70; font: bold 12px/18px Verdana, Geneva, sans-serif; text-decoration: none; border-radius: 2px; position: relative; top: 6px; right: 23px } #topmenu li a { float: left; padding: 6px 10px; color: #2E2E2E; font: bold 12px/18px Verdana, Geneva, sans-serif; text-decoration: none; text-transform: uppercase; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; position: relative; top: 6px; left: 23px } #topmenu li a.selected{ color: #fff !important; background: #3a3a3a url('../images/site/nav_hover.jpg') 0 0 repeat-x;} .active { color: #fff !important; background-image: url('../images/site/nav_hover.jpg'); } #account-nav { width: 400px; clear: both; float: right; position: absolute; top:70px; right: 10px;} #account-nav ul{ list-style: none;} #account-nav ul li{ display: inline; padding: 10px; font: normal 12px/24px Verdana, Geneva, sans-serif;} /*----------------------*/ /*left col nav*/ /*----------------------*/ #leftcol_short { float: left; width: 212px; padding: 20px 0 20px 10px;} #leftcol_short ul { list-style-type: none; font: bold 12px/24px sans-serif;} #leftcol_short li { float: left; position: relative; clear: both; display: block; width: 212px;} #leftcol_short li a { border-top: 1px solid #fff; border-bottom: 1px solid #ccc; padding: 0 0 0 30px; display: block; background: #eee url('../images/site/chevron.jpg') 10px 8px no-repeat; color: #666;} #leftcol_short li a:hover{ background: #fff url('../images/site/chevron.jpg') 10px 8px no-repeat; color: #2171af;} #leftcol_short li#bot { background: url('../images/site/left_nav_bot.jpg') 0 0 no-repeat; height: 12px;} #leftcol_short li#top { background: url('../images/site/left_nav_top.jpg') 0 0 no-repeat; height: 35px;} #leftcol_short li#top { font: bold 12px/35px sans-serif; color: #29588c; padding: 0 0 0 10px; border-bottom: 1px solid #ccc; width: 202px;} /*------------------ Slider -------------------*/ .anythingSlider { width: 395px; height: 225px; position: relative; margin: 0; border: 1px solid #cac9c9; } .anythingSlider .wrapper { width: 390px; overflow: auto; height: 215px; margin: 0; position: absolute; top: 0; left: 2px;} .anythingSlider .wrapper ul { width: 9999px; list-style: none; position: relative; margin: 0; } .anythingSlider ul li { display: block; float: left; padding: 0; height: 215px; width: 395px; margin: 0; } .anythingSlider ul li img { height: 210px; width: 390px;} .anythingSlider .arrow { display: none } .anythingSlider .forward { display: none } .anythingSlider .back { display: none } #thumbNav { display: none;} #start-stop { display: none;} /*Prevents*/ .anythingSlider .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; } .anythingSlider .wrapper ul ul li { float: none; height: auto; width: auto; background: none; } /*Right Col Boxes*/ #rightcol ul { list-style-type: none; padding: 0; margin: 0;} #rightcol li { width: 395px; position: relative; float: left; background: #fff; margin: 0 0 10px 0; padding: 0;} #rightcol ul li ul li{ margin: 0; padding: 5px 0;} #rightcol li div.container { width: 390px; height: 211px; background:#FFF; position: relative; padding: 3px; text-align: center; border: 1px solid #cac9c9;} #rightcol li h2 { color: #4d4d4d; font: bold 15px/16px sans-serif; margin: 0; padding: 10px 0 0 20px; text-align: left;} #rightcol li p { color: #4d4d4d; font: normal 11px/18px 'Tahoma', Arial, sans-serif; margin: 0 0 5px 0;} #rightcol li p a { color: #06F;} /*footer*/ #footer{ width: 980px; height: 95px; background: #ebebeb url('../images/site/foot-bg.jpg') no-repeat; clear:both; padding: 5px 0; margin-top: 15px;} #footer .foot_sec { width: 300px; float: left; padding: 0; margin: 0;} #footer .foot_sec.right { width: 400px; float: right; padding: 10px 15px; text-align: right;} #footer .foot_sec p { font: normal 11px/14px 'Tahoma', sans-serif; margin: 0; padding: 5px; color: #fff;} #footer .foot_sec ul{ margin: 0; padding: 0 ; width: 320px; list-style:none; text-align: right; float:right; clear: both;} #footer .foot_sec li { font: normal 11px/13px 'Tahoma', sans-serif; display: inline; float: left; padding: 0 7px; border-right: 1px dotted #999;} #footer .foot_sec a { list-style-type: none; font: normal 11px/17px 'Tahoma', sans-serif; color: #fff;} #footer .foot_sec a:hover{ list-style-type: none; margin: 0; font: normal 11px/17px 'Tahoma', sans-serif; color: #F66;} #footer .foot_sec li:first-child { padding: 0 7px 0 0 !important; border-left: none !important;} address { font: normal 11px/13px Verdana, Geneva, sans-serif; color: #fff; padding: 10px 0 0 25px } /*Product Results 4 Col ul#prod_results { width: 840px; padding: 10px 0 0 0; margin: 0 auto;} ul#prod_results li { float: left; display: inline; width: 175px; border-bottom: 1px dotted #ccc; padding: 0; text-align: center; margin: 0 20px 15px 0;} ul#prod_results li img { border: 1px solid #ccc;} ul#prod_results li span { font: normal 12px/18px sans-serif; color: #666; padding: 10px 0; float: left; clear: both; width: 170px;} ul#prod_results li a span { font: bold 12px/18px sans-serif; color: #009466; text-align: left;} ul#prod_results li a span.red { color: #154b7b; font-weight: bold;} ul#prod_results li a:hover { cursor: pointer;} ul#prod_results li a:hover img { border: 1px solid #666;} ul#prod_results li a:hover span { color: #c90000; text-decoration: underline;}*/ /*Product Results 5 Col*/ ul#prod_results { width: 950px; padding: 10px 0 0 0; margin-left:15px;} ul#prod_results li { float: left; display: inline; width: 175px; border-bottom: 1px dotted #ccc; padding: 0; text-align: center; margin: 0 10px 15px 0; height: 260px;} ul#prod_results li.nomargin { margin: 0;} ul#prod_results li img { border: 1px solid #ccc; width: 175px;} ul#prod_results li span { font: normal 11px/17px 'Tahoma', Arial, sans-serif; color: #666; padding: 5px 0; float: left; clear: both; width: 175px;} ul#prod_results li a span { font: normal 11px/17px 'Tahoma', Arial, sans-serif; color: #666; text-align: left;} ul#prod_results li a span.red { color: #009466; font-weight: bold; padding: 0 0 5px 0;} ul#prod_results li a:hover { cursor: pointer;} ul#prod_results li a:hover img { border: 1px solid #666;} ul#prod_results li a:hover span { color: #0c4583; text-decoration: underline;} /*Pagination*/ div.pagination { float: right; width: 745px; height: 45px; margin-bottom: 15px} div.pagination ul { float: right; position: relative; height: 35px; padding: 10px 0 0 0;} div.pagination ul li { float: left; display: block; margin: 0 5px 0 0 } div.pagination ul li a { float: left; position: relative; display: block; background: url('../imgres/silver_pag.jpg') 0 0 repeat-x; font: bold 12px/24px Arial, sans-serif; text-align: center; width: 24px; height: 24px; border: 1px solid #b9b9b9; color: #666; text-decoration: none;} div.pagination ul li a:hover { text-decoration: none; border: 1px solid #666; color: #666;} div.pagination ul li a.current { background: url('../imgres/pag_dark.jpg') 0 0 repeat-x; border: 1px solid #000; color: #000; top: -2px; left: 0;} div.pagination ul li.nxt a { font-size: 16px;} div.pagination ul li a:active { left: 1px; top: 1px; cursor: pointer;} .clear { clear: both} #prod_img { width: 300px; float: left; } #prod_details { width: 600px; float: left; padding: 15px; margin-left: 10px;} #prod_spec h2 { font: bold 16px/20px sans-serif; color: #656565; padding: 15px 10px 10px 0; letter-spacing: -1px} #brochures { padding: 10px; } #brochures p { font: bold 12px/18px Verdana, Geneva, sans-serif;} #brochures ul li a { font: bold 12px/14px Verdana, Geneva, sans-serif; color: #0056a4; padding: 0;} /*Contact Forms*/ #prod_spec { width: 280px; padding: 10px 10px; float: left; margin: 0; border-top: 1px dashed #ccc ; border-bottom: 1px dashed #ccc; border-top: 1px dashed #ccc; overflow: hidden; clear: both;} #prod_spec div.form { float: left; width: 170px; margin: 0; } #prod_spec label { width: 120px; float: left; clear: both; font: normal 13px/20px sans-serif; color: #000; margin: 5px 0} #prod_spec label.full { width: 330px;} #prod_spec input { float: left; font: normal 12px/21px sans-serif; color: #000; margin: 5px 0; padding: 2px 4px; width: 100px;} #prod_spec .quantity { float: right; font: normal 12px/21px sans-serif; color: #666; margin: 2px 0; padding: 2px 4px; width: 30px;} #prod_spec #submit { width: 150px; float: left; margin: 0; clear: both;} #prod_spec textarea { font: normal 12px/18px sans-serif; color: #666; padding: 4px; float: right; width: 202px; height: 110px; margin: 0;} #prod_spec select { font: normal 12px/23px sans-serif; color: #666; height: 23px; float: right; width: 102px; margin: 0;} #prod_spec span { color: #0c4583; font: bold 16px/17px bold Verdana, Geneva, sans-serif; letter-spacing: 0; } /* breadcrumb */ #breadcrumb { float: left; position: relative; clear: both; width: 100%;} #breadcrumb ul { float: left; width: 100%; clear: both;} #breadcrumb ul li { float: left; display: inline; margin: 0 5px 0 0; font: normal 11px/30px 'Tahoma', sans-serif; color: #666;} #breadcrumb ul li a { font: normal 11px/30px 'Tahoma', sans-serif; color: #009567;} #breadcrumb a.back { position: absolute; top: -20px; right: 0; display: block; width: 95px; height: 46px; background: url('../img/go_back.jpg') 0 -14px no-repeat; text-indent: -9999px; overflow: hidden} #breadcrumb span.blue { color: #006 }