/* .oooo. ooooooooo oooooooooo. oooooooooooo .oooooo..o ooooo .oooooo. ooooo ooo .oooooo..o .dP""Y88b d"""""""8' `888' `Y8b `888' `8 d8P' `Y8 `888' d8P' `Y8b `888b. `8' d8P' `Y8 ]8P' .8' 888 888 888 Y88bo. 888 888 8 `88b. 8 Y88bo. <88b. .8' 888 888 888oooo8 `"Y8888o. 888 888 8 `88b. 8 `"Y8888o. `88b. .8' 888 888 888 " `"Y88b 888 888 ooooo 8 `88b.8 `"Y88b o. .88P .o. .8' 888 d88' 888 o oo .d8P 888 `88. .88' 8 `888 oo .d8P `8bd88P' Y8P .8' o888bood8P' o888ooooood8 8""88888P' o888o `Y8bood8P' o8o `8 8""88888P' Like the code you see? - www.3point7designs.com =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- || TABLE OF CONTENTS || =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- =01 : UNIVERSAL SELECTORS =02 : BODY STRUCTURE =03 : LINKS =04 : NAVIGATION =05 : HELPER CLASSES =06 : ACCESSIBILITY =07 : TABLES MARGINS: SMALL t10px / b10px DEFAULT t20px / b20px LARGE t30px / b30px */ /* =01 : UNIVERSAL SELECTORS */ * { } html, body { margin: 0; font: 90%/1.4 georgia, arial, helvetica, san-serif; } body { background: url(../images/Background-Pattern.jpg); } h1 { text-indent: -9999px; overflow: hidden; } /* =02: HTML5 BASED NAMING CONVENTIONS + BODY STRUCTURE */ #pagewidth { width: 960px; margin: 0 auto; padding: 10px; background: #fff; } #header { background: url(../images/masthead.jpg) no-repeat; height: 250px; border-bottom: 5px solid #011973; position: relative; } #header-about { background: url(../images/about-mast.jpg) no-repeat; height: 250px; border-bottom: 5px solid #011973; position: relative; } #header-delivery { background: url(../images/service-mast.jpg) no-repeat; height: 250px; border-bottom: 5px solid #011973; position: relative; } #header-environment { background: url(../images/environment-mast.jpg) no-repeat; height: 250px; border-bottom: 5px solid #011973; position: relative; } #header-products { background: url(../images/water-product-mast.jpg) no-repeat; height: 250px; border-bottom: 5px solid #011973; position: relative; } #header-dispensers { background: url(../images/dispensers-mast.jpg) no-repeat; height: 250px; border-bottom: 5px solid #011973; position: relative; } #header-news { background: url(../images/news-mast.jpg) no-repeat; height: 250px; border-bottom: 5px solid #011973; position: relative; } #header-faq { background: url(../images/faq-mast.jpg) no-repeat; height: 250px; border-bottom: 5px solid #011973; position: relative; } #header-contact { background: url(../images/contact-mast.jpg) no-repeat; height: 250px; border-bottom: 5px solid #011973; position: relative; } #header-community { background: url(../images/community-mast.jpg) no-repeat; height: 250px; border-bottom: 5px solid #011973; position: relative; } #header-agreement { background: url(../images/agreement-mast.jpg) no-repeat; height: 250px; border-bottom: 5px solid #011973; position: relative; } #header-history { background: url(../images/history-mast.jpg) no-repeat; height: 250px; border-bottom: 5px solid #011973; position: relative; } #header-quality { background: url(../images/water-quality-mast.jpg) no-repeat; height: 250px; border-bottom: 5px solid #011973; position: relative; } #footer { background: url(../images/footer.jpg) no-repeat; height: 37px; border-top: 6px solid #011973; font: bold .8em arial; color: #122070; margin-top: 10px;} #content-main { float: right; width: 530px; padding: 30px 20px 0px 20px; background: #fff; } #content-faq { float: right; width: 510px; padding: 30px 20px; background: #fff; } #content-faq h2, .community-heading,.agreement-heading { font-size: 1.4em; color: #122070; margin: 15px 0 0 0; } #content-faq ul { margin-left: 8px; } #media, .media { margin: 0; font: 90% arial; } #media li, .media li { display: inline; margin: 0; padding: 0 15px 0 45px; } .pdf { background: url(../images/pdf.gif) left no-repeat; } .pdf2 { background: url(../images/pdf.gif) right no-repeat; float: right; } .movie { background: url(../images/movie.gif) left no-repeat; } .red { color: #bc2d2c; } .red li { margin: 13px 0; } #news-heading { color: #122070; font-size: 1.3em; font-weight: bold; border-top: 4px solid #c6e0f6; padding-top: 15px; } #article-excerpt { border-bottom: 2px solid #c6e0f6; padding-bottom: 20px; } .vcard { float: left; width: 260px; } address { font-style: normal; } #east p, #west p { font-weight: bold; margin: 20px 0 0 0; } #content-main .contact-heading { color: #122070; margin: 15px 0; } #west .nobold { font-weight: normal; } .products, .dispensers { margin: -25px 30px 20px 30px; } .products h2, .dispensers h2 { font-size: 1.8em; color: #122070; margin: 25px 0 15px 54px; } .product-item { float: left; width: 209; height: 370px; margin-bottom: 20px; display: inline; } .product-item p { margin-bottom: 0; font-size: 1.2em; } .products table, .dispensers table { width: 450px; float: left; margin-left: 54px; font-size: 1.2em; display: inline; } .products table { width: 400px; } .products tr, .dispensers tr { border-top: 2px solid #c6e0f6; } .products td, .dispensers td { padding: 10px; } .bottom-border { border-bottom: 2px solid #c6e0f6; } .dispensers #media .pdf { margin-left: 54px; } #right-table { margin-left: 15px; } .first, .products em { margin-left: 54px; } .top-space { padding-top: 57px; } .top-space2 { padding-top: 43px; } .arial { font-family: arial; } /* =03: LINKS */ a { text-decoration: underline; color: #122070; } a:hover { text-decoration: none; } a:visited {} a:active {} /* =04: NAVIGATION */ #nav-box { background: url(../images/nav-box.png) top no-repeat; width: 301px; height: 460px; position: relative; left: 50px; top: -78px; float: left; text-align: center; } #nav-box p { background: url(../images/phone.gif) no-repeat; width: 227px; height: 33px; text-indent: -9999px; overflow: hidden; margin: 10px 0 0 35px; padding-left: 10px; } #nav-box img { margin: 15px 0; } #main-navigation { list-style: none; margin: 0; padding: 24px 0 30px 24px; } #main-navigation li { float: left; padding: 0; margin: 0; width: 86px; height: 110px; text-indent: -9999px; overflow: hidden; } #home, #about, #delivery, #environment, #water-product, #water-dispenser, #news, #faq, #contact { display: block; width: 86px; height: 110px; cursor: pointer; } #home { background: url(../images/nav/home.jpg) no-repeat; } #home:hover { background: url(../images/nav/home-over.jpg) no-repeat; } #about { background: url(../images/nav/about.jpg) top no-repeat; } #about:hover { background: url(../images/nav/about-over.jpg) top no-repeat; } #delivery { background: url(../images/nav/delivery.jpg) top no-repeat; } #delivery:hover { background: url(../images/nav/delivery-over.jpg) top no-repeat; } #environment { background: url(../images/nav/environment.jpg) top no-repeat; } #environment:hover { background: url(../images/nav/environment-over.jpg) top no-repeat; } #water-product { background: url(../images/nav/water-product.jpg) top no-repeat; } #water-product:hover { background: url(../images/nav/water-product-over.jpg) top no-repeat; } #water-dispenser { background: url(../images/nav/water-dispenser.jpg) top no-repeat; } #water-dispenser:hover { background: url(../images/nav/water-dispenser-over.jpg) top no-repeat; } #news { background: url(../images/nav/news.jpg) top no-repeat; } #news:hover { background: url(../images/nav/news-over.jpg) top no-repeat; } #faq { background: url(../images/nav/faq.jpg) top no-repeat; } #faq:hover { background: url(../images/nav/faq-over.jpg) top no-repeat; } #contact { background: url(../images/nav/contact.jpg) top no-repeat; } #contact:hover { background: url(../images/nav/contact-over.jpg) top no-repeat; } #footer-navigation { list-style: none; margin: 10px 0 0 0; } #footer-navigation li { float: right; border-right: 1px solid #122070; padding: 0 15px; display: inline; } #footer-navigation li.last { border-style: none; margin-right: 15px; } #footer-navigation a { text-decoration: none; } /******** Currently Only On The Index Page 9/29/09 ******/ #main-navigation ul { position: absolute; left: -99999px; margin-top: -35px; margin-left: -1px;} #main-navigation li:hover ul, #main-navigation li.sfhover ul { left: auto; } #main-navigation ul li { background: #011973; height: auto !important; text-indent: 0px !important; border-top: 1px solid #fff; line-height: 14px;} #main-navigation ul li a:hover { background: #61a5dd; } #main-navigation ul li a { color: #fff !important; display:block; padding: 3px 0 3px 0; height: auto !important; font-family: 'Arial','Helvetica',San-serif; font-size: 11px; font-weight: bold; text-decoration: none;} #main-navigation ul li { } #main-navigation ul li a { } #sub-navigation {} #breadcrumbs { list-style: none; margin: 0 0 18px 0; padding: 0; } #breadcrumbs li { display: inline; font-size: 10px; color: #999; } #breadcrumbs li a { color: #666; } /* =06: HELPER CLASSES */ .tac, .center { text-align: center; } .tal { text-align: left; } .tar { text-align: right; } .fl, .left { float: left; } .fr, .right { float: right; } img.left { float: left; margin: 0 20px 20px 0; padding: 5px; border: 1px solid #999; } /* Floated images with borders */ img.right { float: right; margin: 0 0 20px 20px; padding: 5px; border: 1px solid #999; } /* Floated images with borders */ .imgfl { float: left; margin-right: 18px; } .imgfr { float: right; margin-left: 18px; } .clear { clear: both; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .nolist, .nolist li { margin: 0; padding: 0; list-style: none;} /* =07: ACCESSIBILITY */ #skip-links { position: absolute; top: -500px; } /* =08: TABLES */ table table tr table td summary {} th {} legend {} /* =09: FORMS */ .adj-form { list-style: none; margin: 0; padding: 0; } .adj-form label { float: left; } .adj-form input, .adj-form textarea { float: right; padding: 5px; font-family: arial, helvetica, san-serif; color: #333; } .adj-form li { clear: both; padding: 10px 0 10px 0; } .adj-form input:focus, .adj-form textarea:focus { color: #000; } .norm-form { list-style: none; margin: 0; padding: 0; } .norm-form label { display: block; font-weight: bold; padding: 0 0 5px 0; } .norm-form input, .norm-form textarea { padding: 5px; font-family: arial, helvetica, san-serif; color: #333;} .norm-form input:focus, .norm-form textarea:focus { color: #000; } #order-form { width: 400px; } #order-form { list-style: none; margin-left: 0; padding-left: 0; } #order-form label { display: block; float: left; } #order-form input, #order-form select, #order-form textarea { float: right; } #order-form li { clear: both; padding: 10px 0 10px 0; } #order-form label span, span.req { color: #aa0000; } .nobold { font-weight: 100 !important; } #video { display: none; }