/** File: layout.css Validates: CSS Level 2.1 Project: [Worktown Future Energy] Author: [Tony Feltham - Gabude Limited (www.gabude.com)] Date Created: [2009-05-27] About: Contains styles for the main layout and framework of the site Notes: Place second in the cascade. File content: html body .access #pageWrap #header #mainMenu #footer Cascade index: 01 undo.css - Resets browser default styles 02 layout.css - Styles for the main layout and framework of the site 03 content.css - Styles for general content 04 elements.css - Styles for specific page elements 05 ie6.css - IE6 specific styles. 06 ie7.css - IE7 specific styles. 07 clearing.css - Enables the use of .clearfix across the site. 08 main.css - Continuity generated stylesheet 09 print.css - Print specific styles */ /* START html */ /* this ensures FF always has a scrollbar */ html { margin-bottom: 0.1em; height: 100%; } /* END html */ /* START body */ body { background: #7d8588; color: #4f595d; font: 11px/18px "Lucida Grande", Lucida, Arial, Verdana, sans-serif; } /* END body */ /* START ACCESSIBILITY */ .access { position: absolute; left: -1000px; width: 100px; top: 0; } /* END ACCESSIBILITY */ /* START #pageWrap */ #pageWrap { position: relative; width: 100%; background: #DBDCD7; } .pageWrap { position: relative; margin-left: auto; margin-right: auto; width: 960px; z-index: 9999; background: url(/futureenergy/images/layout/white-bg.gif) repeat-y; } /* END #pageWrap */ /* START #header */ #header { background: #E8E8E8 url(/futureenergy/images/banners/todaysworld1.png) no-repeat; height: 403px; position: relative; width: 960px; } #header.home { background: #E8E8E8 url(/futureenergy/images/banners/banner-home.png) no-repeat;} #header.whoweare { background: #E8E8E8 url(/futureenergy/images/banners/banner-whoweare.png) no-repeat;} #header.whatwedo { background: #E8E8E8 url(/futureenergy/images/banners/banner-whatwedo.png) no-repeat;} #header.contactus { background: #E8E8E8 url(/futureenergy/images/banners/banner-contactus.png) no-repeat;} #header.batterygurus { background: #E8E8E8 url(/futureenergy/images/banners/banner-batterygurus.png) no-repeat;} #header.cellstrom { background: #E8E8E8 url(/futureenergy/images/banners/banner-cellstrom.png) no-repeat;} #header.electroflow { background: #E8E8E8 url(/futureenergy/images/banners/banner-electroflow.png) no-repeat;} #header h1.white a { background: url(/futureenergy/images/logos/logo-white.png) no-repeat; display: block; height: 41px; left: 27px; overflow: hidden; position: absolute; text-indent: -9999px; top: 42px; width: 165px; } #header h1.blue a { background: url(/futureenergy/images/logos/logo-blue.png) no-repeat; display: block; height: 41px; left: 27px; overflow: hidden; position: absolute; text-indent: -9999px; top: 42px; width: 165px; } #header h1.grey a { background: url(/futureenergy/images/logos/logo-grey.png) no-repeat; display: block; height: 41px; left: 27px; overflow: hidden; position: absolute; text-indent: -9999px; top: 42px; width: 165px; } #header h1.darkblue a { background: url(/futureenergy/images/logos/logo-darkblue.png) no-repeat; display: block; height: 41px; left: 27px; overflow: hidden; position: absolute; text-indent: -9999px; top: 42px; width: 165px; } #header h2.home a { background: url(/futureenergy/images/logos/roundel-green.png) no-repeat; display: block; height: 100px; left: 160px; overflow: hidden; position: absolute; text-indent: -9999px; top: 240px; width: 100px; } #header h2.whoweare a { background: url(/futureenergy/images/logos/roundel-black.png) no-repeat; display: block; height: 100px; left: 650px; overflow: hidden; position: absolute; text-indent: -9999px; top: 290px; width: 100px; } #header h2.whatwedo a { background: url(/futureenergy/images/logos/roundel-orange.png) no-repeat; display: block; height: 100px; left: 180px; overflow: hidden; position: absolute; text-indent: -9999px; top: 110px; width: 100px; } #header h2.contactus a { background: url(/futureenergy/images/logos/roundel-darkblue.png) no-repeat; display: block; height: 100px; left: 850px; overflow: hidden; position: absolute; text-indent: -9999px; top: 10px; width: 100px; } #header h2.batterygurus a { background: url(/futureenergy/images/logos/roundel-royalblue.png) no-repeat; display: block; height: 100px; left: 185px; overflow: hidden; position: absolute; text-indent: -9999px; top: 75px; width: 100px; } #header h2.electroflow a { background: url(/futureenergy/images/logos/roundel-gold.png) no-repeat; display: block; height: 100px; left: 20px; overflow: hidden; position: absolute; text-indent: -9999px; top: 250px; width: 100px; } #header h2.cellstrom a { background: url(/futureenergy/images/logos/roundel-red.png) no-repeat; display: block; height: 100px; left: 120px; overflow: hidden; position: absolute; text-indent: -9999px; top: 130px; width: 100px; } /* END #header */ /* START #mainMenu */ #mainMenu { } #mainMenu ul { bottom: 30px; left: 30px; position: absolute; } #mainMenu ul li { display: inline; } #mainMenu ul li a { display: block; float: left; height: 20px; margin-right: 3px; overflow: hidden; text-indent: -9999px;} /* #mainMenu ul li.home a, #mainMenu ul li.homeSelected a { width: 75px; background: url(/futureenergy/images/nav/nav-home.png) no-repeat;} #mainMenu ul li.home a:hover { background-position: 0px -29px; } #mainMenu ul li.whatwedo a, #mainMenu ul li.whatwedoSelected a { width: 95px; background: url(/futureenergy/images/nav/nav-whatwedo.png) no-repeat;} #mainMenu ul li.whatwedo a:hover, #mainMenu ul li.whatwedoSelected a { background-position: 0px -29px; } #mainMenu ul li.whoweare a, #mainMenu ul li.whoweareSelected a { width: 135px; background: url(/futureenergy/images/nav/nav-whoweare.png) no-repeat; } #mainMenu ul li.whoweare a:hover, #mainMenu ul li.whoweareSelected a { background-position: 0px -20px; } #mainMenu ul li.contactus a, #mainMenu ul li.contactusSelected a{ width: 120px; background: url(/futureenergy/images/nav/nav-contactus.png) no-repeat; } #mainMenu ul li.contactus a:hover, #mainMenu ul li.contactusSelected a { background-position: 0px -20px; } */ #mainMenu ol { } #mainMenu li { } #mainMenu a { } #mainMenu a:hover { } #mainMenu .selected a { } /* END #mainMenu */ #subMenu { } #mainContent #subMenu ul { margin: 0px; padding: 0px; height:24px; padding-bottom:20px;} #subMenu ul.whatwedomenu { left: 246px;} #subMenu ul.whowearemenu { left: 108px;} #subMenu ul li { display: inline; } #subMenu ul li a { display: block; float: left; height: 29px; margin-right: 3px; overflow: hidden; text-indent: -9999px;} #subMenu ul li.home a, #subMenu ul li.homeSelected a { width: 75px; background: url(/futureenergy/images/titles/nav-home.gif) no-repeat;} #subMenu ul li.home a:hover { background-position: 0px -16px; } #subMenu ul li.companyhistory a, #subMenu ul li.companyhistorySelected a{ width: 115px; background: url(/futureenergy/images/nav/subnav-companyhistory.png) no-repeat; } #subMenu ul li.companyhistory a:hover, #subMenu ul li.companyhistorySelected a { background-position: 0px -29px; } #subMenu ul li.meettheteam a, #subMenu ul li.meettheteamSelected a{ width: 100px; background: url(/futureenergy/images/nav/subnav-meettheteam.png) no-repeat; } #subMenu ul li.meettheteam a:hover, #subMenu ul li.meettheteamSelected a { background-position: 0px -29px; } #subMenu ul li.bgabout a, #subMenu ul li.bgaboutSelected a { width: 90px; background: url(/futureenergy/images/nav/subnav-batterygurus.png) no-repeat; } #subMenu ul li.bgabout a:hover, #subMenu ul li.bgaboutSelected a { background-position: 0px -29px; } #subMenu ul li.cellabout a, #subMenu ul li.cellaboutSelected a { width: 62px; background: url(/futureenergy/images/nav/subnav-cellstrom.png) no-repeat; } #subMenu ul li.cellabout a:hover, #subMenu ul li.cellaboutSelected a { background-position: 0px -29px; } #subMenu ul li.electabout a, #subMenu ul li.electaboutSelected a { width: 77px; background: url(/futureenergy/images/nav/subnav-electroflow.png) no-repeat; } #subMenu ul li.electabout a:hover, #subMenu ul li.electaboutSelected a { background-position: 0px -29px; } #subMenu ul li.subproducts a, #subMenu ul li.subproductsSelected a { width: 72px; background: url(/futureenergy/images/nav/subnav-products.png) no-repeat; } #subMenu ul li.subproducts a:hover, #subMenu ul li.subproductsSelected a { background-position: 0px -29px; } #subMenu ul li.contact a, #subMenu ul li.contactSelected a{ width: 80px; background: url(/futureenergy/images/nav/subnav-contact.png) no-repeat; } #subMenu ul li.contact a:hover, #subMenu ul li.contactSelected a { background-position: 0px -29px; } #subMenu ul li.distribution a, #subMenu ul li.distributionSelected a{ width: 140px; background: url(/futureenergy/images/nav/subnav-distributionnetwork.png) no-repeat; } #subMenu ul li.distribution a:hover, #subMenu ul li.distributionSelected a { background-position: 0px -29px; } #subMenu ul li.casestudies a, #subMenu ul li.casestudiesSelected a{ width: 100px; background: url(/futureenergy/images/nav/subnav-casestudies.png) no-repeat; } #subMenu ul li.casestudies a:hover, #subMenu ul li.casestudiesSelected a { background-position: 0px -29px; } #subMenu ul li.dealerlogin a, #subMenu ul li.dealerloginSelected a{ width: 95px; background: url(/futureenergy/images/nav/subnav-dealerlogin.png) no-repeat; } #subMenu ul li.dealerlogin a:hover, #subMenu ul li.dealerloginSelected a { background-position: 0px -29px; } #subMenu ul li.downloads a, #subMenu ul li.downloadsSelected a{ width: 85px; background: url(/futureenergy/images/nav/subnav-downloads.png) no-repeat; } #subMenu ul li.downloads a:hover, #subMenu ul li.downloadsSelected a { background-position: 0px -29px; } #subMenu ul li.calculator a, #subMenu ul li.calculatorSelected a{ width: 85px; background: url(/futureenergy/images/nav/subnav-calculator.png) no-repeat; } #subMenu ul li.calculator a:hover, #subMenu ul li.calculatorSelected a { background-position: 0px -29px; } #subMenu ol { } #subMenu li { } #subMenu a { } #subMenu a:hover { } #subMenu .selected a { } /* END #mainMenu */ /* START #mainContent */ #mainContent { background: #ffffff url(/futureenergy/images/layout/white-bg.gif) repeat-y; margin-left: auto; margin-right: auto; min-height: 400px; padding: 12px 27px 10px; position: relative; } #mainContent.withoutMenu { padding-top: 55px; } #mainContent.home { padding-top: 48px; } #mainContent #threeColumns {clear: both; display: inline; float: left; margin-right: 32px; position: relative; width: 900px; z-index: 99;} #mainContent #productInfo { background-color: #ffffff; width: 900px; } #mainContent #caseStudyInfo { background-color: #ffffff; width: 900px; } #mainContent #teamInfo { background-color: #ffffff; width: 900px; } #mainContent #contactInfo { background-color: #ffffff; width: 900px; } /*END #mainContent */ /* START #footer */ #footer { clear: both; padding-top: 5px; } #footer .mainContent { height: 23px; padding: 10px 30px 5px; background: #7d8588 ;} #footer ul { } #footer ul.copyright { font-size: 9px; left: 60px; line-height: 11px; position: absolute; top: 12px; width: 120px;} #footer ul.copyright li { margin-left: 20px;} #footer ul.accreditation { font-size: 9px; left: 360px; line-height: 11px; position: absolute; top: 10px; } #footer ul li.too { top: -1px; background: url(/images/footer/too.gif) no-repeat; display: block; text-indent: -9999px; overflow: hidden; width: 165px; height: 26px; right: 100px; position: absolute; text-align: left;} #footer ul.accreditation li { display: inline; margin-left: 20px;} #footer ul li.isoinfo { color: #a4a4a4; display: inline; position: absolute; top: 3px;} #footer ul li.isoinfo a { background: url(/images/footer/accreditation.png) no-repeat; display: block; text-indent: -9999px; overflow: hidden; width: 143px; height: 26px;} #footer ul li.isoinfo a:hover { background-position: 0 -26px;} #footer ul li.corporate {color: #a4a4a4; display: inline; position: absolute; right: 0; top: -1px; } #footer ul li.corporate a { background: url(/images/footer/corporate.gif) no-repeat;display: block;text-indent: -9999px;overflow: hidden;width: 101px;height: 26px;text-align: left;} #footer ul li.corporate a:hover { background-position: 0 -26px;} #footer ul.links { font-size: 9px; line-height: 11px; position: absolute; right: 28px; text-align: right; top: 14px; } #footer ol { } #footer li.bright { color: #ffffff;} #footer li { color: #a4a4a4; display: inline; } #footer a { color: #ffffff; text-decoration: underline; } #footer a:hover { color: #000000; text-decoration: underline; } #footer h3 a { width: 36px; height: 24px; text-indent: -9999px; overflow: hidden; background: url(/images/footer/logo.gif) no-repeat; display: block;} /* END #footer */ #home #mainMenu ul { position: absolute; left: 36px; bottom: 233px; } /* @group nav */ #mainMenu ul { position: absolute; left: 17px; top: 374px; } #mainMenu ul li { display: inline; } #mainMenu ul li a { display: block; float: left; height: 29px; text-indent: -9999px; overflow: hidden; margin-right: 3px; behavior: url(http://www.worktown.com/css/iepngfix.htc); } #mainMenu ul li.home a, #mainMenu ul li.homeSelected a { width: 56px; background: url(/futureenergy/images/nav/nav-home.png); } #mainMenu ul li.whoweare a, #mainMenu ul li.whoweareSelected a { width: 100px; background: url(/futureenergy/images/nav/nav-whoweare.png); } #mainMenu ul li.whatwedo a, #mainMenu ul li.whatwedoSelected a { width: 100px; background: url(/futureenergy/images/nav/nav-whatwedo.png); } #mainMenu ul li.contactus a, #mainMenu ul li.contactusSelected a { width: 89px; background: url(/futureenergy/images/nav/nav-contactus.png); } #mainMenu ul li.homeSelected a, #mainMenu ul li.whoweareSelected a, #mainMenu ul li.whatwedoSelected a, #mainMenu ul li.contactusSelected a, #mainMenu ul li.home a:hover, #mainMenu ul li.whoweare a:hover, #mainMenu ul li.whatwedo a:hover, #mainMenu ul li.contactus a:hover, #mainMenu ul li.home a.active, #mainMenu ul li.whoweare a.active, #mainMenu ul li.whatwedo a.active, #mainMenu ul li.contactus a.active { background-position: 0 -29px; } .imageFloatLeft {float:left; margin-right: 10px ;} #distributorInfo {margin-bottom: 30px; margin-top: 30px;} #distributorDetails {border: dashed 1px #DBDCD7; padding: 10px; height: 1%; float: left; } #distributorDetails:hover {background-color: #e8e8e8; border: dashed 1px #4F595D; height: 1%; padding: 10px; float: left; } #distributorMap {float: left; height: 300px; margin-left: 30px;}