/* ------------------------------------------------- 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.2em; color:#333; margin:0 0 12px 0 } a { color:#000; text-decoration:underline } a:hover { text-decoration:none } a:visited { } a:active { } ul { margin:0 0 12px 32px; font-size:1.2em; color:#333 } 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.2em; color:#666; margin:0 0 12px 0 } 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 - titles */ h1.welcome-ttl { background:url(../images/titles/welcome-ttl.jpg) top left no-repeat; height:49px; text-indent:-9000px; margin:0 } h1.generator-hire-ttl { background:url(../images/titles/generator-hire-ttl.jpg) top left no-repeat; height:49px; text-indent:-9000px; margin:0 0 18px 0 } h1.ancillary-equipment-ttl { background:url(../images/titles/ancillary-equipment-ttl.jpg) top left no-repeat; height:49px; text-indent:-9000px; margin:0 0 18px 0; } h1.emergency-power-ttl { background:url(../images/titles/emergency-power-ttl.jpg) top left no-repeat; height:49px; text-indent:-9000px; margin:0 0 18px 0 } h1.volt-safe-ttl { background:url(../images/titles/volt-safe-ttl.jpg) top left no-repeat; height:49px; text-indent:-9000px; margin:0 0 18px 0 } h1.downloads-ttl { background:url(../images/titles/downloads-ttl.jpg) top left no-repeat; height:49px; text-indent:-9000px; margin:0 0 18px 0 } h1.contact-ttl { background:url(../images/titles/contact-ttl.jpg) top left no-repeat; height:49px; text-indent:-9000px; margin:0 0 18px 0 } h1.carbon-reduction-generators-ttl { background:url(../images/titles/carbon-reduction-generators-ttl.jpg) top left no-repeat; height:49px; text-indent:-9000px; margin:0 0 18px 0 } h1.turn-key-solutions-ttl { background:url(../images/titles/turn-key-solutions-ttl.jpg) top left no-repeat; height:49px; text-indent:-9000px; margin:0 0 18px 0 } h1.fuel-management-ttl { background:url(../images/titles/fuel-management-ttl.jpg) top left no-repeat; height:49px; text-indent:-9000px; margin:0 0 18px 0 } h1.multi-mega-watt-hire-ttl { background:url(../images/titles/multi-mega-watt-hire-ttl.jpg) top left no-repeat; height:49px; text-indent:-9000px; margin:0 0 18px 0 } h2.award-winning-generators-ttl { background:url(../images/titles/award-winning-generators.gif) no-repeat; height:26px; text-indent:-9000px } h2.total-reliability-ttl { background:url(../images/titles/total-reliability.gif) no-repeat; height:26px; text-indent:-9000px } h2.service-has-built-our-reputation-ttl { background:url(../images/titles/service-has-built-our-reputation.gif) no-repeat; height:26px; text-indent:-9000px } h2.many-high-profile-clients-ttl { background:url(../images/titles/many-high-profile-clients.gif) no-repeat; height:26px; text-indent:-9000px } h2.earth-leakage-protection-ttl { background:url(../images/titles/earth-leakage-protection.gif) no-repeat; height:26px; text-indent:-9000px } h2.valve-connections-modem-ttl { background:url(../images/titles/valve-connections-modem.gif) no-repeat; height:26px; text-indent:-9000px } h2.fuel-efficient-generators-ttl { background:url(../images/titles/fuel-efficient-generators.gif) no-repeat; height:26px; text-indent:-9000px } h2.bunded-fuel-tanks-ttl { background:url(../images/titles/bunded-fuel-tanks.gif) no-repeat; height:26px; text-indent:-9000px } h2.transformers-ttl { background:url(../images/titles/transformers.gif) no-repeat; height:26px; text-indent:-9000px } h2.cables-ttl { background:url(../images/titles/cables.gif) no-repeat; height:26px; text-indent:-9000px } h2.cable-ramps-ttl { background:url(../images/titles/cable-ramps.gif) no-repeat; height:26px; text-indent:-9000px } h2.distribution-boards-ttl { background:url(../images/titles/distribution-boards.gif) no-repeat; height:26px; text-indent:-9000px } h2.automatic-mains-failure-panels-ttl { background:url(../images/titles/automatic-mains-failure-panels.gif) no-repeat; height:26px; text-indent:-9000px } h2.fuel-management-ttl { background:url(../images/titles/fuel-management.gif) no-repeat; height:26px; text-indent:-9000px } h2.dedicated-response-team-ttl { background:url(../images/titles/dedicated-response-team.gif) no-repeat; height:26px; text-indent:-9000px } h2.disaster-recovery-team-ttl { background:url(../images/titles/disaster-recovery-team.gif) no-repeat; height:26px; text-indent:-9000px } h2.hour-response-ttl { background:url(../images/titles/24-hour-response.gif) no-repeat; height:26px; text-indent:-9000px } h2.ancillary-equipment-ttl { background:url(../images/titles/ancillary-equipment.gif) no-repeat; height:26px; text-indent:-9000px } h2.niceic-registered-ttl { background:url(../images/titles/niceic-registered.gif) no-repeat; height:26px; text-indent:-9000px } h2.our-own-fleet-of-trucks-ttl { background:url(../images/titles/our-own-fleet-of-trucks.gif) no-repeat; height:26px; text-indent:-9000px } h2.the-voltsafe-ttl { background:url(../images/titles/the-voltsafe.gif) no-repeat; height:26px; text-indent:-9000px } h2.voltsafe-advantages-ttl { background:url(../images/titles/voltsafe-advantages.gif) no-repeat; height:26px; text-indent:-9000px } h2.protection-for-the-environment-ttl { background:url(../images/titles/protection-for-the-environment.gif) no-repeat; height:26px; text-indent:-9000px } h2.options-available-ttl { background:url(../images/titles/options-available.gif) no-repeat; height:26px; text-indent:-9000px } h2.typical-applications-include-ttl { background:url(../images/titles/typical-applications-include.gif) no-repeat; height:26px; text-indent:-9000px } h2.contact-form-ttl { background:url(../images/titles/contact-form.gif) no-repeat; height:26px; text-indent:-9000px } h2.downloads-ttl { background:url(../images/titles/downloads.gif) no-repeat; height:26px; text-indent:-9000px } h2.carbon-reduction-generators2-ttl { background:url(../images/titles/carbon-reduction-generators.gif) no-repeat; height:26px; text-indent:-9000px } h2.disaster-team-ttl { background:url(../images/titles/disaster-team.gif) no-repeat; height:26px; text-indent:-9000px } h2.other-products-ttl { background:url(../images/titles/other-products.gif) no-repeat; height:26px; text-indent:-9000px } h2.strap-ttl { background:url(../images/titles/strap.jpg) no-repeat; height:46px; text-indent:-9000px } h3.testimonials-ttl { background:url(../images/titles/testimonials.gif) no-repeat; height:26px; text-indent:-9000px; margin:0 } p#ancillary-strap { background:url(../images/titles/ancillary-strap.jpg) no-repeat; height:46px; text-indent:-9000px } /* ----------------------------------------------- 3. LAYOUT ----------------------------------------------- */ /* 3.1 - main form */ form.main { width:100%; height:100% } /* 3.2 - wrapper */ div.wrapper { width:949px; margin:0 auto; text-align:left } /* 3.3 - header */ div#header { width:949px; margin:0 auto; text-align:left } /* 3.4 - banner */ div#banner { background:url(../images/background/banner-background.gif) top left repeat-x; height:258px } /* 3.5 - content */ div#content { background:url(../images/background/strap-line-bar.gif) top left repeat-x } /* 3.6 - primary content */ body.index div#primary-content { width:949px; float:left } body.sub div#primary-content { width:723px; float:right } body.contact div#primary-content { width:640px; float:right } div#primary-content p { padding:0 10px } /* 3.7 - secondary content */ div#secondary-content { width:209px; float:left } body.contact div#secondary-content { width:272px; float:left } body.contact div#secondary-content p { color:#666 } /* 3.8 - tertiary content */ div#tertiary-content { } /* 3.9 - footer */ div#footer { background:#000; padding:28px 0 100px 0 } div#footer a { color:#fff; text-decoration:none; float:left } div#footer a:hover { background:#fff; color:#000 } div#footer ul { list-style:none; float:right } div#footer li { display:inline; float:left; margin-left:8px; font-size:0.9em } /* ----------------------------------------------- 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 } /* 4.2 - primary navigation */ ul#primary-navigation { list-style:none; float:right; width:602px; margin:0 0 28px 0 } ul#primary-navigation li { float:left; padding:0 0 0 4px; } ul#primary-navigation li a { background-position:100% 0; } ul#primary-navigation li a:hover { background-position:0 100%} ul#primary-navigation li a.current { background-position:0 100%} #home-btn { width:58px; text-indent:-3000px } #home-btn a { width:58px; height:24px; background:url("../images/navigation/home.gif") top left no-repeat; display:block } #generator-hire-btn { width:118px; text-indent:-3000px } #generator-hire-btn a { width:118px; height:24px; background:url("../images/navigation/generator-hire.gif") top left no-repeat; display:block } #emergency-power-btn { width:140px; text-indent:-3000px } #emergency-power-btn a { width:140px; height:24px; background:url("../images/navigation/emergency-power.gif") top left no-repeat; display:block } #volt-safe-btn { width:88px; text-indent:-3000px } #volt-safe-btn a { width:88px; height:24px; background:url("../images/navigation/volt-safe.gif") top left no-repeat; display:block } #downloads-btn { width:101px; text-indent:-3000px } #downloads-btn a { width:101px; height:24px; background:url("../images/navigation/downloads.gif") top left no-repeat; display:block } #contact-btn { width:73px; text-indent:-3000px } #contact-btn a { width:73px; height:24px; background:url("../images/navigation/contact.gif") top left no-repeat; display:block } /* 4.3 - secondary navigation */ ul#secondary-navigation { list-style:none; margin:0 0 18px 0 } ul#secondary-navigation li { padding:0 0 4px 0 } ul#secondary-navigation li a { background-position:100% 0; } ul#secondary-navigation li a:hover { background-position:0 100%} ul#secondary-navigation li a.current { background-position:0 100%} #ancillary-equipment-btn { width:209px; text-indent:-3000px } #ancillary-equipment-btn a { width:209px; height:26px; background:url("../images/navigation/secondary/ancillary-equipment.gif") top left no-repeat; display:block } #carbon-reduction-generators-btn { width:209px; text-indent:-3000px } #carbon-reduction-generators-btn a { width:209px; height:26px; background:url("../images/navigation/secondary/carbon-reduction-generators.gif") top left no-repeat; display:block } #turn-key-solutions-btn { width:209px; text-indent:-3000px } #turn-key-solutions-btn a { width:209px; height:26px; background:url("../images/navigation/secondary/turn-key-solutions.gif") top left no-repeat; display:block } #fuel-management-btn { width:209px; text-indent:-3000px } #fuel-management-btn a { width:209px; height:26px; background:url("../images/navigation/secondary/fuel-management.gif") top left no-repeat; display:block } #multi-mega-watt-hire-btn { width:209px; text-indent:-3000px } #multi-mega-watt-hire-btn a { width:209px; height:26px; background:url("../images/navigation/secondary/multi-mega-watt-hire.gif") top left no-repeat; display:block } /* ----------------------------------------------- 5. TEMPLATE/PAGE SPECIFIC ----------------------------------------------- */ /* 5.1 - calls to action */ ul#index-cta { list-style:none; margin:56px 0 30px 0; float:left } ul#index-cta li { float:left;} ul#index-cta li a { background-position:100% 0; } ul#index-cta li a:hover { background-position:0 100%} ul#index-cta li a.current { background-position:0 100%} #generator-hire-cta { width:301px; text-indent:-3000px } #generator-hire-cta a { width:301px; height:221px; background:url("../images/cta/generator-hire-cta.jpg") top left no-repeat; display:block } #emergency-power-cta { width:301px; text-indent:-3000px; margin:0 22px } #emergency-power-cta a { width:301px; height:221px; background:url("../images/cta/emergency-power-cta.jpg") top left no-repeat; display:block } #volt-safe-cta { width:301px; text-indent:-3000px } #volt-safe-cta a { width:301px; height:221px; background:url("../images/cta/volt-safe-cta.jpg") top left no-repeat; display:block } div#sheffield-floods { background:url(../images/cta/sheffield-floods.jpg); height:136px; width:208px; margin:0 0 18px 0; position:relative } div#sheffield-floods a#read-more-btn { background:url(../images/misc/read-more-btn.jpg) top left no-repeat; width:92px; height:26px; text-indent:-9000px; position:absolute; bottom:5px; right:5px } div#sheffield-floods a#read-more-btn:hover { background-position:50% -26px } /* 5.2 - Misc */ a#hire-now-btn { background:url(../images/cta/hire-now-cta.jpg) top left no-repeat; width:208px; height:136px; text-indent:-9000px; display:block; } a#hire-now-btn:hover { background-position:50% -136px } a#buy-now-btn { background:url(../images/cta/buy-now-cta.jpg) top left no-repeat; width:208px; height:136px; text-indent:-9000px; display:block; margin-top:18px } a#buy-now-btn:hover { background-position:50% -136px } ul.carbon-reduction { color:#92d050 } p.carbon-reduction { color:#92d050; font-size:1.8em; font-weight:bold } ul.inline-images { list-style:none; } ul.inline-images li { float:left; margin-right:10px; margin-bottom:12px } ul#index-links { list-style:none; } ul#index-links li { display:inline; float:left; width:200px; padding-bottom:40px } /* 5.3 - testimonials */ div#testimonials { width:207px; margin:18px 0; background:url(../images/background/testimonials.gif) bottom left no-repeat } div#testimonials #marqueecontainer { position:relative; height:209px; overflow: hidden; } div#testimonials #vmarquee { position:absolute; padding:8px } div#testimonials #vmarquee p { color:#666; } div#testimonials #vmarquee blockquote { color:#666; font-style:italic } div#testimonials #vmarquee cite { font-style:normal; font-size:1.1em; color:#666; font-weight:bold } /* 5.4 - contact form */ #formHolder {float:left; } #formHolder span.required {color:#ff0000; font-style:italic} #formHolder legend {margin:0; border:0; padding:0; font-size:14px; color:black; font-weight:bold} #formHolder fieldset {margin-bottom:20px; border:none; padding:0; width:320px; float:left} #formHolder fieldset.submit {margin-bottom:20px; border:none; padding:0 20px 0 0; text-align:right} #formHolder fieldset.nature { margin-left:10px } #formHolder label {width:90px; float:left; text-align:right; display:block; cursor:pointer; padding:9px 10px 0 0; font:12px/18px Arial, Verdana, Times,; color:#333} #formHolder input.text, #formHolder textarea, #formHolder select {width:197px; margin:2px 15px 2px 0; border:1px solid #999; padding:3px; font:12px/18px Arial, Verdana, Times, serif; color:#444; background:#fff url(../images/background/contact-form.gif) left bottom repeat-x} #formHolder input.required, #formHolder textarea.required, #formHolder select.required {width:197px; margin:2px 15px 2px 0; padding:3px; font:12px/18px Arial, Verdana, Times, serif; color:#444; border:1px solid #999; background:#fff url(../images/background/contact-form.gif) left bottom repeat-x} #formHolder form ol {margin:20px 0 0 0; padding:0} #formHolder form ol li {list-style:none; padding:2px 0 ; margin:0; } #formHolder form ol li.last {border:0 none} #formHolder form ol li input {margin:0; } #formHolder form ol li.chk label {margin:0 0 0 7px; float:none; padding:0; display:inline} #formHolder form ol li.chk input {margin:0 0 0 150px; border:0 none} #formHolder form ol li select.thin-select { width: 5em; } #formHolder form input#submit { font-size:1.3em } #formHolder fieldset.nature { margin-left:10px; width:310px } #formHolder fieldset.nature label { width:80px } div#formHolder div.error { background:#fcf9ce url(../images/misc/alert.gif) no-repeat top left; padding:15px 15px 5px 15px } div#formHolder div.error h3 { color:#ff7e39; font-weight:bold; font-size:2em; margin:1px 0 10px 35px } div#formHolder div.error p {color:#ff7e39; margin-left:35px } div#formHolder div.error ul li { margin-left:35px; list-style:none; padding-left:15px; margin-bottom:3px; color:#ff7e39; background:transparent url(../images/icons/bullet.png) center left no-repeat } div#formHolder form ol li.input-error { background:#FCF9CE url(../images/misc/alert.gif) no-repeat scroll 470px 10px; } div#formHolder form ol li.input-error input { border:solid 1px #FF7E39 } div#formHolder div.input-error { color:#FF7E39; margin-right:16px; padding:5px 0; text-align:right } div#formHolder span.note { color:#999999; display:block; font-size:0.8em; margin-bottom:10px; margin-left:160px; width:305px; } div#formHolder span { color:#ff0000 } /* 5.5 - Downloads */ ul#downloads { list-style:none } ul#downloads li { background:url(../images/misc/pdf.gif) top left no-repeat; padding:0px 0 2px 25px; margin-bottom:8px } /* 5.6 - Pop up content */ #pop-up-contact li{list-style:none; font-size:1.4em; line-height:1.8em;} #pop-up-contact li address{font-style:normal; font-size:1.2em;} #pop-up-contact li span{color:#FF2B2B; font-weight:bold;} #pop-up-contact li a{color:#FF2B2B; font-weight:bold;} .hire-contact {height:120px;} .hire-contact dt, dd{font-size:1.0em; padding:5px 0;} .hire-contact dt, dd strong{color:#FF0000} .hire{font-size:1.4em; padding:5px; } .hire a{color:#FF0000;} /* ----------------------------------------------- 6. USEFUL CLASSES ----------------------------------------------- */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden } .clr { clear:both; margin-top:28px } .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 } .text-cta { color:#ff0000; font-size:2.8em; text-align:center; font-weight:bold } .bullet-list { width:40%; float:left; font-size:1.5em; font-weight:bold } .bullet-list li { padding: 1px 0 }