/** 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(/images/home-banner.png) no-repeat;} #header h1 a { background: url(/images/roundel.png) no-repeat; display: block; height: 100px; left: 10px; overflow: hidden; position: absolute; text-indent: -9999px; top: 10px; 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: 135px; background: url(/futureenergy/images/titles/subnav-companyhistory.gif) no-repeat;} #subMenu ul li.companyhistory a:hover, #subMenu ul li.companyhistorySelected a { background-position: 0px -16px; } #subMenu ul li.meettheteam a, #subMenu ul li.meettheteamSelected a { width: 120px; background: url(/futureenergy/images/titles/subnav-meettheteam.gif) no-repeat;} #subMenu ul li.meettheteam a:hover, #subMenu ul li.meettheteamSelected a { background-position: 0px -16px; } #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 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: 300px; padding: 12px 27px 10px; position: relative; } #mainContent.withoutMenu { padding-top: 55px; } #mainContent.home { padding-top: 10px; } #mainContent #threeColumns {clear: both; display: inline; float: left; margin-right: 32px; position: relative; width: 900px; z-index: 99;} #mainContent #twoColumns {clear: both; display: inline; float: left; margin-right: 32px; position: relative; width: 900px; z-index: 99;} #mainContent #productInfo { 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 { display: inline; font-size: 9px; left: 60px; line-height: 11px; position: absolute; top: 12px; width:150px;} #footer ul.copyright li { margin-left: 20px;} #footer ul.accreditations { font-size: 9px; left: 360px; line-height: 11px; position: absolute; top: 10px; } #footer ul.accreditations li { display: inline; margin-left: 20px;} #footer ul.links { font-size: 9px; line-height: 11px; position: absolute; right: 28px; text-align: right; top: 14px; } #footer ol { } #footer li { color: #A4A4A4; display: inline; } #footer li.bright{ color: #ffffff;} #footer a { color: #ffffff; text-decoration: underline; } #footer a:hover { color: #000000; text-decoration: underline; } #footer ul.accreditation { font-size: 9px; line-height: 11px; position: absolute; top: 14px; left: 395px; display: inline; } #footer ul li.isoinfo { color: #a4a4a4; display: inline; position: absolute; top: -1px; } #footer ul li.isoinfo a { background: url(/workplace/officesupplies/images/foot/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 h3 a { width: 36px; height: 24px; text-indent: -9999px; overflow: hidden; background: url(/futureenergy/images/logos/footerlogo.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: 20px;}