/* ------------------------------------------------- URI: http://www./ Created by Forte Trinity ------------------------------------------------- CONTENTS 1: SITE MASTER SETUP (including reset from Tripoli) 2: TYPOGRAPHY/DESIGN 3: LAYOUT 3.1 main form 3.2 container 3.3 header 3.4 content 3.5 primary content 3.6 secondary content 3.7 tertiary content 3.8 footer 4: GLOBAL ELEMENTS / CONTROLS 4.1 accessibility 5: TEMPLATE / PAGE SPECIFIC 6: USEFUL CLASSES /* ----------------------------------------------- 1. SITE MASTER SETUP ----------------------------------------------- */ /* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */ * { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:top } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal } /* end of import */ body { height:100%; text-align:center; min-width:775px } ul { list-style:disc outside } ol { list-style:decimal outside } /* ----------------------------------------------- 2. TYPOGRAPHY / DESIGN ----------------------------------------------- */ html { font-size:62.5%; font-family:arial, verdana, "microsoft sans serif", helvetica, sans-serif; line-height:1.4em; color:#000 } code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size:1.1em; font-family:monaco, "Lucida Console", courier, mono-space } h1 { font-size:1.6em; color:#000; margin:0 0 12px 0 } h2 { font-size:1.5em; color:#000; margin:0 0 12px 0 } h3 { font-size:1.4em; color:#000; margin:0 0 12px 0 } h4 { font-size:1.3em; color:#000; margin:0 0 12px 0 } h5 { font-size:1.2em; color:#000; margin:0 0 12px 0 } h6 { font-size:1.1em; color:#000; margin:0 0 12px 0 } p { font-size:1.1em; color:#000; margin:0 0 12px 0 } a { } a:hover { } a:visited { } a:active { } ul { margin:0 0 12px 0; font-size:1.1em } ol { margin:0 0 12px 0; font-size:1.1em } dl { margin:0 0 12px 0; font-size:1.1em } hr { display:block; background:#aaa; color:#aaa; width:100%; height:1px; border:none } address { font-size:1.1em; color:#000 } blockqoute { } table { border-top:1px solid #ccc; border-left:1px solid #ccc } th, td { border-bottom:1px solid #ddd; border-right:1px solid #ccc } fieldset { border:1px solid #ccc; } legend { background:#fff; } label { font-size:1.1em } textarea, input[type='text'], select { border:1px solid #000; background:#fff; font-size:11px; color:#000 } /* 2.1 - index page */ h1.ttl-name {} h2.ttl-select-products {} /* ----------------------------------------------- 3. LAYOUT ----------------------------------------------- */ /* 3.1 - main form */ form.main { width:100%; height:100% } /* 3.2 - container */ div#container { width:100%; margin:0 auto; position:relative; text-align:left } div#top-contact-bar{background:#a6a6a6 url(../images/global/top-grey-bar-bg.gif) repeat-x;} div#top-contact-bar ul{float:right; list-style:none; padding:5px 0; margin:0} div#top-contact-bar ul li{float:left; padding:0 5px} div#top-contact-bar ul li em{font-weight:bold; font-style:normal} div#top-contact-bar ul li a{color:#000000;} /* 3.3 - header */ div#header { background:url(../images/global/top-border-bg.gif) top no-repeat; padding:0 12px; } /* 3.4 - content */ div#content { background:url(../images/global/bottom-border-bg.gif) bottom no-repeat; padding:50px 0 75px 0;} body.index div#content { background:url(../images/global/bottom-border-bg.gif) bottom no-repeat; padding:50px 0 75px 0; margin-bottom:100px} /* 3.5 - primary content */ body.index div#primary-content { background:#fff; padding:12px 12px 12px 12px; border-left:#eeeeee 1px solid; border-right:#eeeeee 1px solid; width:934px } body.sub div#primary-content { background:#fff; padding:12px 12px 150px 12px; border-left:#eeeeee 1px solid; float:left; width:556px } body.sub div#primary-content p{color:#666666; line-height:1.8em} /* 3.6 - secondary content */ div#secondary-content { } body.sub div#secondary-content { background:#fff; padding:12px 12px 12px 12px; float:left; width:354px } body.sub div#secondary-content p{color:#87aa87; line-height:1.8em} /* 3.7 - tertiary content */ div#tertiary-content { background:#fff; padding:12px 12px 12px 12px; border-right:#eeeeee 1px solid; border-left:#eeeeee 1px solid; width:934px; float:left } .chemical-analysis-lower-banner{background:url(../images/global/chemical-lower-banner.jpg) no-repeat; width:934px; height:113px; display:block; float:left} .paint-lower-banner{background:url(../images/global/paint-lower-banner.jpg) no-repeat; width:934px; height:113px; display:block; float:left} .flooring-lower-banner{background:url(../images/global/flooring-lower-banner.jpg) no-repeat; width:934px; height:113px; display:block; float:left} #consulting-list{background:url(../images/global/consulting-list.gif) no-repeat; width:213px; height:78px; text-indent:-3000em; list-style:none; float:left; margin:15px 0 15px 570px} div#tertiary-content #contact-us-btn a{background:url(../images/global/contact-us-btn.gif) top no-repeat; width:118px; height:29px; text-indent:-3000em; display:block; float:left; margin:60px 10px 0 0; } div#tertiary-content #contact-us-btn a:hover{background:url(../images/global/contact-us-btn.gif) bottom no-repeat;} /* 3.8 - footer */ div#footer { background:url(../images/global/footer-top-bg.gif) no-repeat top; width:935px; padding:30px 12px 0 12px; } div#footer span {color:#666; font-size:1.0em;} div#footer span a{color:#666; font-size:1.0em;} div#footer ul {float:right; list-style:none} div#footer ul li {float:left;color:#666; font-size:1.0em;} div#footer ul li a{color:#666; font-size:1.0em; padding:0 5px} #background-fix{background:url(../images/global/footer-bottom-bg.gif) no-repeat bottom; padding:0 0 15px 0} div#seo{ padding:50px 12px 12px 12px; background:url(../images/global/seo-border-bg.gif) no-repeat top; width:934px; } div#seo h1{ color:#666; line-height:1.8em; font-size:1.2em; margin-top:50px} div#seo p{ color:#666; line-height:1.8em; font-size:1.1em} /* ----------------------------------------------- 4. GLOBAL ELEMENTS / CONTROLS ----------------------------------------------- */ /* 4.1 - accessibility */ ul#skiplinks { display:none } ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden } ul#skiplinks a:active, ul#skiplinks a:focus { position:static; width:auto; height:auto } /* ----------------------------------------------- 5. TEMPLATE/PAGE SPECIFIC ----------------------------------------------- */ div#header #john-ashworth-logo a{background:url(../images/global/john-ashworth-logo.gif) no-repeat; width:368px; height:81px; text-indent:-3000em; float:left; display:block; margin:20px 0px} /*Primary Navigation*/ ul#primary-navigation {float:right; list-style:none; margin-top:75px} ul#primary-navigation li{float:left; padding:0 2px} ul#primary-navigation li a{ float:left; height:32px; text-indent:-3000em; display:block; } #home-btn a{ width:71px; background:url(../images/global/primary-navigation.gif) 0 0 } #home-btn a:hover{ background-position:0 100% } #home-btn a.current{ background-position:0 100% } #paint-btn a{ width:71px; background:url(../images/global/primary-navigation.gif) -77px 0px } #paint-btn a:hover{background-position:-77px 100% } #paint-btn a.current{background-position:-77px 100% } #flooring-btn a{ width:78px; background:url(../images/global/primary-navigation.gif) -155px 0px } #flooring-btn a:hover{ background-position:-155px 100% } #flooring-btn a.current{ background-position:-155px 100% } #chemical-btn a{ width:158px; background:url(../images/global/primary-navigation.gif) -242px 0px } #chemical-btn a:hover{ background-position:-242px 100% } #chemical-btn a.current{ background-position:-242px 100% } #contact-btn a{ width:88px; background:url(../images/global/primary-navigation.gif) -404px 0px } #contact-btn a:hover{ background-position:-404px 100% } #contact-btn a.current{ background-position:-404px 100% } /*Banner*/ #fader{ z-index:999; list-style:none; width:555px; position:relative} #banner{ background:#fff; padding:0 12px; border-left:#eeeeee 1px solid; border-right:#eeeeee 1px solid; width:934px; position:relative; z-index:9} #banner #cta{float:left; width:558px; height:334px; position:absolute; z-index:9999; top:0px; left:11px } #banner #cta ul{list-style:none;} #banner #cta ul li{background:url(../images/global/banner-panels-bg.png) no-repeat; width:155px; height:96px; float:left; margin:0 10px 0 0; padding:10px} #banner #cta ul li h3#paint-ttl{ background:url(../images/global/banner-panels-paint-ttl.png) no-repeat; width:40px; height:17px; text-indent:-3000em; display:block} #banner #cta ul li h3#flooring-ttl{ background:url(../images/global/banner-panels-flooring-ttl.png) no-repeat; width:65px; height:17px; text-indent:-3000em; display:block} #banner #cta ul li h3#chemical-ttl{ background:url(../images/global/banner-panels-chemical-ttl.png) no-repeat; width:148px; height:17px; text-indent:-3000em; display:block} #banner #cta ul li p{color:#979b9b; font-size:11px} #banner #cta ul li a{background:url(../images/global/banner-temp-more-info-btn.gif) no-repeat; width:60px; height:21px; text-indent:-3000em; display:block; float:right} #banner #we-solve-problems{background:#b4d6b4; width:375px; float:left; padding:0 0 12px 0; position:relative} #banner #we-solve-problems h2{background:url(../images/global/we-solve-technical-problems-ttl.png) no-repeat; width:360px; height:164px; text-indent:-3000em; display:block; float:left; margin:25px 0 0 10px} #banner #we-solve-problems #technical-list{background:url(../images/global/technical-list-ttl.png) no-repeat; width:304px; height:74px; text-indent:-3000em; display:block; float:left; list-style:none; margin:20px 0 0 20px} #banner #we-solve-problems #contact-us-btn a{background:url(../images/global/contact-us-btn.gif) top no-repeat; width:118px; height:29px; text-indent:-3000em; display:block; float:right; margin:10px 10px 0 0} #banner #we-solve-problems #contact-us-btn a:hover{background:url(../images/global/contact-us-btn.gif) bottom no-repeat; width:118px; height:29px; text-indent:-3000em; display:block; float:right; margin:10px 10px 0 0} /*SLIDER*/ .pane-content{background:url(../images/global/panels-bg.gif) repeat-y; position:relative; left:0; height:160px;} .pane-content .about-us-ttl{background:url(../images/global/about-us-ttl.gif) no-repeat; width:248px; height:20px; text-indent:-3000em; display:block} .pane-content .clients-includes-ttl{background:url(../images/global/clients-includes-ttl.gif) no-repeat; width:248px; height:20px; text-indent:-3000em; display:block; } .pane-content .accreditations-ttl{background:url(../images/global/accreditations-ttl.gif) no-repeat; width:248px; height:20px; text-indent:-3000em; display:block} .next-panel-btn{position:absolute; left:525px; margin:0} .pane-content ul.sliding-content-desc{float:left; width:290px; list-style:none; padding:10px} .pane-content ul.sliding-content-desc li p{color:#666666; line-height:1.6em} .pane-content dl.sliding-content-accreditations{float:left; width:250px; list-style:none; padding:10px 0px 10px 70px} .pane-content dl.sliding-content-accreditations dd{float:left;} /*OTHER TITLES*/ #chemical-analysis-ttl{background:url(../images/global/chemical-analysis-ttl.gif) no-repeat; width:170px; height:26px; text-indent:-3000em;} #paint-ttl{background:url(../images/global/paint-ttl.gif) no-repeat; width:170px; height:26px; text-indent:-3000em;} #flooring-ttl{background:url(../images/global/flooring-ttl.gif) no-repeat; width:200px; height:26px; text-indent:-3000em;} #contact-us-ttl{background:url(../images/global/contact-us-ttl.gif) no-repeat; width:170px; height:26px; text-indent:-3000em;} #compliance-ttl{background:url(../images/global/compliance-ttl.gif) no-repeat; width:170px; height:26px; text-indent:-3000em;} #services-ttl{background:url(../images/global/services-ttl.gif) no-repeat; width:244px; height:29px; text-indent:-3000em;} #specialist-equipment-ttl{background:url(../images/global/specialist-equipment-ttl.gif) no-repeat; width:244px; height:29px; text-indent:-3000em;} #equipment-includes-ttl{background:url(../images/global/equipment-includes-ttl.gif) no-repeat; width:244px; height:29px; text-indent:-3000em;} /*PRIMARY CONTENT*/ .paint-tests { list-style-position:inside; line-height:1.8em} .paint-tests li{color:#87aa87;} .materials-list{list-style:none; line-height:1.8em} .materials-list li{display:inline; color:#87aa87;} .specialist-equipment-list {list-style-position:inside; line-height:1.8em} .specialist-equipment-list dt{color:#666666;} .specialist-equipment-list dd{color:#87aa87; background:url(../images/global/bullet.gif) left no-repeat; padding-left:15px} #compliance{padding-left:5px;} #compliance address{color:#87aa87; line-height:1.8em; padding:0 0 12px} #compliance dl dt{color:#87aa87; line-height:1.8em; padding:0 0 5px; font-weight:bold} #compliance dl dd{color:#87aa87; line-height:1.8em; padding:0 0 5px} #compliance dl dd a{color:#000000;} #basewords { width:935px; margin:auto; list-style:none } #basewords li { display:inline; padding:0 4px 0 6px; color:#666; border-left:solid 1px #666 } #basewords li.first { border:0; padding-left:0 } #basewords strong { font-weight:normal } /* ----------------------------------------------- 6. USEFUL CLASSES ----------------------------------------------- */ .content-wrapper{border-right:#eeeeee 1px solid; float:left} .wrapper{width:960px; margin:0 auto; text-align:left;} .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden } .clr { overflow:hidden; clear:both; height:1px; margin-top:-1px } .la { text-align:left } .ra { text-align:right } .ca { text-align:center } .fl { float:left } .fr { float:right } .vt { vertical-align:top } .vm { vertical-align:middle } .vb { vertical-align:bottom } .nb { border:0 none }