/* ------------------------------------------- project: Whittington's Bathrooms Studio ------------------------------------------- colors: default-grey: #666666 light-grey: #777777 vaery-light-grey: #e7e7e7 dark-red: #75253c gold: #d6a54c */ html { min-height: 100%; margin-bottom: 1px; font-size: 100.01%; } body { margin: 0; padding: 0; color: #666; font: 75%/130% Arial,"Tahoma",Georgia,Helvetica,sans-serif; behavior:url("csshover.htc");} textarea, input, select, option, button { font: 0.91em Arial,Tahoma,Georgia,Helvetica,sans-serif; } /* COMMON ------------------------------------------- */ fieldset { border: none; margin: 0 0 12px; padding: 0; } legend { display: none; } button { overflow: visible; cursor: pointer; } img { border: none; } strong { } em { padding: 1px 2px; } abbr, acronym { border-bottom: 1px dotted #aaa; } dl { margin: 0 0 12px; } dt { font-weight: bold; } dd { margin: 0; } p { line-height: 18px; margin: 0 0 12px; } a { padding: 0; color: #75253c; font-weight: normal; text-decoration: underline; } a:hover, a:focus, a:active { text-decoration: underline; } .clear { clear: both; } .fr { float: right; } .fl { float: left; } .h { display: none; } ul { padding: 0; margin: 0 0 10px; } ul li { padding: 0 0 1px 0px; margin: 0 0 1px 15px; } /* HEADINGS ------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0 0 8px; font: bold 2.09em Arial,"Tahoma",Georgia,Helvetica,sans-serif; color: #801817; margin-bottom: 20px; } h2 { font-size: 1.5em; margin: 0 0 12px; font-weight: normal; } h3 { font-size: 0.92em; } h4 { font-size: 0.800em; } h5 { font-size: 0.800em; } h6 { font-size: 0.800em; } h2.graphic { display: block; overflow: hidden; text-indent: -1001em; } h2.about-us { width: 88px; height: 24px; background: url(../images/h2-about.gif) 0 0 no-repeat; } h2.services { width: 229px; height: 24px; background: url(../images/h2-services.gif) 0 0 no-repeat; } h2.our-bathroom-services { width: 229px; height: 24px; background: url(../images/h2-our-bathroom-services.gif) 0 0 no-repeat; } h2.welcome { width: 229px; height: 24px; background: url(../images/h2-welcome.gif) 0 0 no-repeat; } h2.service-and-quality { width: 229px; height: 24px; background: url(../images/h2-service-and-quality.gif) 0 0 no-repeat; } h2.whittingtons-in-prestigious-Uk-award { width: 300px; height: 60px; background: url(../images/h2-whittingtons-in-prestigi.gif) 0 0 no-repeat; } h2.our-product-ranges { width: 229px; height: 24px; background: url(../images/h2-our-product-ranges.gif) 0 0 no-repeat; } h2.complete-bathrooms { width: 229px; height: 24px; background: url(../images/h2-complete-bathrooms.gif) 0 0 no-repeat; } h2.the-finest-products { width: 229px; height: 24px; background: url(../images/h2-the-finest-products.gif) 0 0 no-repeat; } h2.showering { width: 229px; height: 24px; background: url(../images/h2-showering.gif) 0 0 no-repeat; } h2.furniture { width: 229px; height: 24px; background: url(../images/h2-furniture.gif) 0 0 no-repeat; } h2.hand-crafted-furniture { width: 229px; height: 24px; background: url(../images/h2-hand-crafted-furniture.gif) 0 0 no-repeat; } h2.accessories { width: 229px; height: 24px; background: url(../images/h2-accessories.gif) 0 0 no-repeat; } h2.heating { width: 229px; height: 24px; background: url(../images/h2-heating.gif) 0 0 no-repeat; } h2.bespoke-design { width: 229px; height: 24px; background: url(../images/h2-bespoke-design.gif) 0 0 no-repeat; } h2.designed-to-fit{ width: 229px; height: 24px; background: url(../images/h2-designed-to-fit.gif) 0 0 no-repeat; } h2.client-comments1{ width: 229px; height: 24px; background: url(../images/h2-client-comments1.gif) 0 0 no-repeat; } h2.client-comments2{ width: 229px; height: 24px; background: url(../images/h2-client-comments2.gif) 0 0 no-repeat; } h2.showroom{ width: 229px; height: 24px; background: url(../images/h2-showroom.gif) 0 0 no-repeat; } h2.no-text{ width: 229px; height: 24px; background: url(../images/h2-no-text.gif) 0 0 no-repeat; } h2.contact1{ width: 229px; height: 24px; background: url(../images/h2-contact1.gif) 0 0 no-repeat; } h2.contact2{ width: 229px; height: 24px; background: url(../images/h2-contact2.gif) 0 0 no-repeat; } h2.contact3{ width: 229px; height: 24px; background: url(../images/h2-contact3.gif) 0 0 no-repeat; } h2.site-map{ width: 229px; height: 24px; background: url(../images/h2-site-map.gif) 0 0 no-repeat; } h2.thank-you{ width: 229px; height: 24px; background: url(../images/h2-thank-you.gif) 0 0 no-repeat; } h2.kbb { width: 153px; height: 121px; background: url(../images/kbb-review-industry-awards-logo.gif) 0 0 no-repeat; } /* HELPERS ------------------------------------------- */ .wrapper { overflow: hidden; } .offset { position: absolute; left: -10001em; top: -10001em; } .center { text-align: center; } /* NAVIGATION ------------------------------------------- */ /* navigation */ #nav { display: block; position: absolute; bottom: 0; left: 0; padding: 0 0 0 13px; margin: 0; width: 737px; height: 35px; background: #000 url(../images/nav-top-left.gif) 0 0 no-repeat; } #nav li { position: relative; float: left; width: auto; height: 35px; padding: 0; margin: 0; list-style: none; background: url(../images/nav-top-sep.gif) 0 50% no-repeat; } #nav li a { display: block; width: auto; min-height: 15px; padding: 10px 11px; margin: 0; color: #fff; text-transform: uppercase; font-size: 0.83em; } #nav li a em { display: none; } #nav li.first { background: transparent; } #nav li ul { z-index: 1000; display: none; background: #000; position: absolute; top: 35px; left: 0; padding: 0 0 3px 0; margin: 0; border: 1px solid #444; border-top: 0; } #nav li ul li { display: block; clear: left; width: auto; height: 1%; background: none; padding: 0 10px; margin: 0 0 1px; } #nav li ul li a { clear: left; display: block; width: 170px; padding: 5px; margin: 0; border-top: 1px solid #444; } #nav li ul li.first { border-top: 0; } #nav li:hover ul { display: block; } #nav li a:hover, #nav li a:focus, #nav li a:active, #nav li a.current { color: #d6a54c; text-decoration: none; } /* SKIP LINKS */ #skip-links { position: absolute; top: 0; left: -10001px; list-style: none; margin: 0; padding: 0; } #skip-links li a:focus, #skip-links li a:active { display: block; position: absolute; left: 9659px; top: 0; z-index: 10001; width: 200px; padding: 2px 0; background: #ddd; color: #333; font-size: 1em; text-align: center; } /* LAYOUT ------------------------------------------- */ body { background: url(../images/hometop.gif) 0 0 repeat-x; } body.subpage { background: url(../images/top-bg-sub.gif) 0 0 repeat-x; } #root { display: block; width: 750px; height: 1%; margin: 0 auto; } #top { z-index: 10; display: block; position: relative; width: 750px; height: 142px; padding: 0; margin: 0; } #top h1.logo { display: block; position: absolute; left: 0px; top: 20px; width: 440px; height: 63px; padding: 0; margin: 0; overflow: hidden; } #top h1.logo a { display: block; width: 441px; height: 63px; padding: 0; margin: 0; overflow: hidden; text-indent: -1001em; background: url(../images/logo2bur1-bigger.gif) 0 0 no-repeat; } #container { z-index: 1; clear: both; width: 100%; background: #fff; margin: 0; padding: 0; } #intro { z-index: 1; display: block; float: left;width: 750px; height: 312px; overflow: hidden; padding: 0; margin: 0 0 28px; 0 0 no-repeat; } #intro1 { z-index: 1; display: block; float: left;width: 750px; height: 450px; overflow: hidden; padding: 0; margin: 0 0 28px; 0 0 no-repeat; } #content .col-a, #content .col-a1, #content .col-b { float: left; position: relative; margin: 0 0 0px; } #content .col-b1 { float: left; position: relative; margin: 0 0 33px; } #content .col-a { width: 309px; padding: 0 34px 20px 26px; border-right: 1px solid #e7e7e7; } #content .col-a1 { width: 309px; padding: 0 34px 20px 26px; border-right: 1px solid #ffffff; } #content .col-b { width: 314px; padding: 0 32px 20px 32px; margin: 0 0 0 -1px; border-left: 1px solid #e7e7e7; } #content .col-b1 { width: 300px; padding: 0 0px 0px 0px; margin: 0 0 0 -1px; } #content .col-a a.read-more, #content .col-b a.read-more { position: absolute; bottom: 0; right: 34px; } #content a.read-more { float: right; padding: 0 0 0 14px; background: url(../images/arrow-red.gif) 0 50% no-repeat; font-size: 0.83em; text-transform: uppercase; } #content a.read-more:hover { text-decoration: underline; } #footer { clear: both; display: block; width: 746px; height: 30px; padding: 0 4px 0 0; margin: 0; font-size: 1.05em; background: url(../images/footer-bg-right.gif) 100% 0 no-repeat; color: #333333; } #footer .wrapper { display: block; width: 703px; height: 23px; padding: 7px 15px 0 28px; background: #ebebeb url(../images/footer-bg-left.gif) 0 0 no-repeat; } #footer .copyright { float: left; height: 30px; margin: 0; padding: 0; } #footer .contact { float: right; height: 30px; margin: 0; padding: 0; } #footer .contact a { color: #333; } #footer .contact a:hover {} #website .contactweb { float: right; height: 30px; margin: 0; padding: 0; font-size: 0.75em; color:#333 } #website .tagline { float: left; height: 30px; margin: 0; padding: 0; font-size: 0.75em; color:#333 } #website .tagline2 { float: left; text-align: left; height: 60px; margin: 0; padding: 0; font-size: 0.75em; color:#333 } #sitemap { float: left; margin: 0; padding: 0; font-size: 0.75em; color:#333 } .date{float:right; color:#fff; padding-top:90px; font-size:110%;} /* SUBPAGES ------------------------------------------- */ #content .intro-image {overflow: hidden; } #content .intro1-image {overflow: hidden; } #content .intro-image.left { float: left; padding: 0; margin: 0 45px 10px 0; } #content .intro-image.right { float: right; padding: 0; margin: 0 0 10px 45px; } #content .row { clear: both; display: block; overflow: hidden; width: 725px; height: 1%; padding: 0 25px 15px 0; } #content .row .cont { display: block; padding: 11px 20px 0 25px; } #content .row.first .cont { margin-top: 22px; }