/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Title: McCarthy Cars Author: John Davies / john.davies@gforces.co.uk / G-Forces Web Management Ltd Type: Screen, Projection Description: Screen and projection stylesheet for McCarthy Cars site - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* COMMON AND GLOBAL */ html { height: 100%; } body { height: 100%; font:62.5%/1.6 arial, verdana, helvetica, sans-serif; margin:0; padding:0; background:#ffffff url(../images/layup/bodyBg.jpg) top center no-repeat; color:#000000; text-align:center; } /* This font sizing is for standards based browsers (firefox, opera, mozilla) that can re-size text. Declaring the font size in pixels makes it more consistent across browsers. */ td, textarea, input, select { font:100% arial, verdana, helvetica, sans-serif; } html>body td, html>body textarea, html>body input, html>body select { font-size:11px; } /* some browsers don't inherit the font into tables or textareas! */ /* ----- IDS ----- */ #container { min-height: 100%; width:956px; margin:0 auto; text-align:left; font-size:120%; line-height: normal; } * html #container { height: 100%; } #printHeader { display:none; } #header { height: 155px; position: relative; background:url(../images/layup/headerBg.jpg) top left no-repeat; } #header #logo { position: absolute; top: 20px; left: 0px; } #header #contactNumber1 { position: absolute; top: 92px; right: 317px; } #header #contactNumber2 { position: absolute; top: 92px; right: 159px; } #header #contactNumber3 { position: absolute; top: 92px; right: 1px; } #header #contactAddress { position: absolute; top:100px; right: 1px; color: #001f62; font-size: 1.7em; text-align: right; width: 420px; } #header #liveChat { position: absolute; top: 21px; right: 0px; } /* ----- LEFT COLUMN ----- */ #leftCol { float: left; width: 220px; } #leftCol .box { margin-bottom: 15px; width: 220px; position: relative; background: #91A3BB url(../images/layup/leftColBoxBg.gif) top left no-repeat; } #leftCol .box .inner { padding: 4px 10px 8px 10px; display: block; } #leftCol .box .inner .title { padding-bottom: 10px; display: block; } #leftCol .box .inner .content { display: block; } #leftCol .box .inner .content span { text-transform: uppercase; font-weight: bold; color: #063c5a; } #leftCol .box.stockUpdates a { display: block; cursor: pointer; color: #fff; font-weight: normal; text-decoration: none; } #leftCol .box.stockUpdates .btn { display: block; padding-top: 19px; } #leftCol .box.stockUpdates .overlap { position: absolute; bottom: -15px; right: -9px; } #leftCol .box.contactUs { font-size: 0.9em; } #leftCol .box.contactUs .inner { padding: 4px 10px 0px 10px; } #leftCol .box.contactUs .contactBox { background: url(../images/layup/contactBoxBg.gif) top left no-repeat; padding: 7px; color: #003659; margin-bottom: 15px; width: 186px; position: relative; } #leftCol .box.contactUs .contactBox a { color: #003659; } #leftCol .box.contactUs address { padding-bottom: 12px; } #leftCol .box.contactUs address span { text-transform: uppercase; font-size: 1.2em; font-weight: bold; } #leftCol .box.contactUs .contactBoxBtm { position: absolute; bottom: -5px; left: 0px; } /* Vehicle Search Tabs */ #leftCol #vehicleSearch { width: 220px; background: #91A3BB url(../images/layup/vehicleSearchBg.gif) 0px 36px no-repeat; margin-bottom: 15px; } #leftCol #tabVehicleSearch { width: 220px; } #leftCol #tabCarSearch { display: block; float: left; background:url(../images/layup/spriteCarTab.gif) 0px -36px no-repeat; width: 110px; height: 36px; } #leftCol #tabCarSearch:hover { background:url(../images/layup/spriteCarTab.gif) 0px 0px no-repeat; } #leftCol #tabCarSearch.active { background:url(../images/layup/spriteCarTab.gif) 0px 0px no-repeat; } #leftCol #tabTypeSearch { display: block; float: left; background:url(../images/layup/spriteCarTab.gif) -110px 0px no-repeat; width: 110px; height: 36px; } #leftCol #tabTypeSearch:hover { background:url(../images/layup/spriteCarTab.gif) -110px -36px no-repeat; } #leftCol #tabTypeSearch.active { background:url(../images/layup/spriteCarTab.gif) -110px -36px no-repeat; } /* Vehicle Search Content */ #leftCol .tabContent { padding: 14px 10px 0px 10px; } #leftCol .tabContent form div { margin-bottom: 8px; } #leftCol .tabContent select { width: 200px; height: 20px; font-size: 0.9em; } #leftCol .tabContent .vehicleSearchBtns { margin-top: 8px; } #leftCol .tabContent .vehicleSearchBtns .btnSearch { width: 79px; height: 29px; float: right; } #leftCol .tabContent .vehicleSearchBtns .btnAdvancedSearch { text-decoration: none; color: #fff; font-size: 0.9em; width: 60px; } /*this is just so i can see the active links while developing*/ #leftCol .tabContent .vehicleType { padding-bottom: 10px; } #leftCol .tabContent .vehicleType a { text-decoration: none; } #leftCol .tabContent .vehicleType a.active { text-decoration: none; color: #fff; font-size: 0.9em; } #leftCol .tabContent .vehicleType div { width: 65px; float: left; text-align: center; height: 25px; } #leftCol .tabContent .vehicleType div.typeSmall { } #leftCol .tabContent .vehicleType div.typeFamily { } #leftCol .tabContent .vehicleType div.typePrestige { } #leftCol .tabContent .vehicleType div.typeMPV { } #leftCol .tabContent .vehicleType div.typeGreen { } #leftCol .tabContent .vehicleType div.type4x4 { } /* ----- RIGHT COLUMN ----- */ #rightCol { float: right; width: 721px; } #mainImage { position: relative; margin-bottom: 15px; height: 234px; } #mainImage .frame { position: absolute; top: 0px; left: 0px; z-index: 9999; } #homeJumps { height: 123px; margin-bottom: 26px; } #homeJumps .jumpAllStock { float: left; position: relative; margin-right: 15px; } #homeJumps .jumpAllStock .graphic { display: block; position: absolute; top: -8px; right: -7px; } #homeJumps .jumpSellCar { float: left; position: relative; margin-right: 15px; } #homeJumps .jumpSellCar .graphic { display: block; position: absolute; top: -1px; right: -15px; } #homeJumps .jumpFinance { float: left; position: relative; } #homeJumps .jumpFinance .graphic { display: block; position: absolute; top: -12px; right: 0px; } /* ----- FEATURED CARS ----- #featuredHeading { padding: 26px 0px 20px 0px; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: #535353; } #featuredCars { background:url(../images/layup/featuredCarsBg.gif) top left no-repeat; height: 156px; margin-bottom: 15px; padding-top: 3px; } #featuredCars .btnPrevious { width: 29px; float: left; position: relative; height: 156px; z-index: 999; } #featuredCars .btnPrevious a { position: absolute; top: 57px; left: -9px; } #featuredCars .btnNext { width: 28px; float: right; position: relative; height: 156px; z-index: 999; } #featuredCars .btnNext a { position: absolute; top: 57px; left: -9px; } #featuredCars .articleContainer { background: #dfdfdf; border: 2px solid #fff; width: 660px; height: 149px; position:relative; overflow:hidden; } #featuredCars #articleSlide { width:8000px; position:relative; } #featuredCars #articleSlide .article { width: 329px; float: left; } #featuredCars #articleSlide .article a { display: block; padding: 17px 13px 17px 13px; width: 303px; text-decoration: none; font-weight: normal; } #featuredCars #articleSlide .article .thumb { display: block; width: 154px; height: 116px; float: left; background:url(../images/layup/noImage154x116.gif) top left no-repeat; margin-right: 16px; position: relative; } #featuredCars #articleSlide .article .frame { position: absolute; top: -2px; left: -2px; } #featuredCars #articleSlide .article .title { display: block; float: left; width: 133px; height: 32px; font-weight: bold; } #featuredCars #articleSlide .article .details { display: block; float: left; width: 133px; height: 72px; font-size: 0.9em; } #featuredCars #articleSlide .article .link { display: block; float: left; width: 133px; text-align: right; font-weight: bold; text-transform: uppercase; color: #8c0d0d; }*/ /* ----- FEATURED CARS ----- THIS IS REPLACING THE CURRENT VERSION*/ #featuredHeading { padding: 26px 0px 20px 0px; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: #535353; } #featuredCars { background:url(../images/layup/featuredCarsBg.gif) top left no-repeat; height: 190px; margin-bottom: 15px; padding-top: 3px; } #featuredCars .btnPrevious { width: 29px; float: left; position: relative; height: 156px; z-index: 999; } #featuredCars .btnPrevious a { position: absolute; top: 66px; left: -9px; } #featuredCars .btnNext { width: 28px; float: right; position: relative; height: 156px; z-index: 999; } #featuredCars .btnNext a { position: absolute; top: 66px; left: -9px; } #featuredCars .articleContainer { background: #dfdfdf; border: 2px solid #fff; width: 660px; height: 180px; position:relative; overflow:hidden; } #featuredCars #articleSlide { width:8000px; position:relative; } #featuredCars #articleSlide .article { width: 223px; float: left; } #featuredCars #articleSlide .article a { display: block; padding: 10px 13px 0 13px; width: 211px; text-decoration: none; font-weight: normal; } #featuredCars #articleSlide .article .thumb { display: block; width: 80px; height: 59px; float: left; background:url(../images/layup/noImage80x59.gif) top left no-repeat; margin-right: 16px; position: relative; display:inline; } #featuredCars #articleSlide .article .frame { position: absolute; top: -2px; left: -2px; } #featuredCars #articleSlide .article .title { display: block; float: left; width: 115px; height: 34px; font-weight: bold; text-transform:uppercase; } #featuredCars #articleSlide .article .details { display: block; float: left; width: 115px; height: 29px; color:#303030; font-size: 11px; } #featuredCars #articleSlide .article .link { display: block; float: left; width: 115px; font-weight: bold; text-transform: uppercase; color: #8c0d0d; } /* ----- CMS IMAGE ----- */ .cmsImage { float: right; margin: 0px 3px 15px 15px; position: relative; } .cmsImage .frame { position: absolute; top: -3px; left: -3px; z-index: 9999; } /* ----- OFFER LIST ----- */ #offerList .offer { position: relative; margin-bottom: 14px; } #offerList .offer .frame { position: absolute; top: 0px; left: 0px; display: block; } #offerList .offer .btn { position: absolute; top: 175px; right: -5px; display: block; } /* ----- OFFER DETAIL ----- */ #offerBanner { position: relative; margin-bottom: 14px; } #offerBanner .frame { position: absolute; top: 0px; left: 0px; display: block; z-index: 9999; } /* ----- USED CAR LIST ----- */ #financeOptions { background: url(../images/layup/financeOptionsBg.gif) top left no-repeat; height: 42px; } #financeOptions #titleAdjustFinance { float: left; } #financeOptions #btnUpdateFinance { width: 71px !important; height: 23px !important; margin-right: 14px; float: right; } #financeOptions form { padding: 10px 0px 0px 0px; } #financeOptions form div { margin-top: 1px; margin-left: 12px; display: inline; float: left; } #financeOptions label { position: relative; top: 3px; color: #fff; font-weight: bold; font-size: 0.9em; } #financeOptions span.periodMonths { display:block; float:left; color: #fff; font-weight: bold; padding:0px 0px 0px 5px; position:relative; top:3px; width:50px; font-size: 0.9em; } #financeOptions input { width: 35px !important; } #financeOptions #TotalDeposit { width: 52px; float:left; margin-right:5px; } #financeOptions select.financeSelect { float:left; width:45px; } #list .listItem { margin: 30px 0px 0px 0px; width: 721px; } #list .listItem a { display: block; text-decoration: none; cursor: pointer; width: 721px; } #list .listItem .thumb { display: block; float: left; position: relative; background:url(../images/layup/noImage217x163.gif) 3px 3px no-repeat; width: 217px; height: 163px; padding-left: 3px; padding-top: 3px; } #list .listItem .thumb .frame { display: block; position: absolute; top: 0px; left: 0px; } #list .listItem .details { display: block; padding: 14px 14px 14px 24px; float: left; width: 463px; background:url(../images/layup/listItemBg.gif) 13px 0px no-repeat; } #list .listItem .detailsBottom { display: block; float: right; width: 488px; } #list .listItem .details .title { display: block; background:url(../images/layup/listItemTitleDivider.gif) bottom left no-repeat; font-size: 1.1em; padding: 0px 0px 14px 0px; } #list .listItem .details .spec { display: block; font-size: 0.9em; padding: 7px 0px 0px 0px; width: 459px; color: #707070; } #list .listItem .details .spec .specItem { display: block; width: 225px; float: left; padding-bottom: 4px; } #list .listItem .details .spec .specItem span { display: block; float: left; width: 96px; } #list .listItem .details .description { display: block; font-size: 0.9em; padding: 7px 0px 0px 0px; width: 459px; height: 72px; color: #707070; } #list .listItem .details .price { display: block; float: left; color: #8c0d0d; font-size: 1.3em; padding: 0px; font-weight: bold; padding-top: 20px; } #list .listItem .details .btn { float: right; padding-top: 15px; } /* ----- NEWS LIST ----- */ #newsList {} #newsList .listItem { margin-bottom: 10px; padding-bottom: 13px; background: url(../images/layup/dotsHBlue.gif) bottom left repeat-x; } #newsList .listItem a { display: block; text-decoration: none; font-weight: normal; } #newsList .listItem .thumb { display: block; float: left; position: relative; background:url(../images/layup/noImage143x107.gif) 3px 3px no-repeat; width: 143px; height: 107px; padding-left: 3px; padding-top: 3px; } #newsList .listItem .thumb .frame { display: block; position: absolute; top: 0px; left: 0px; } #newsList .listItem .title { font-weight: bold; display: block; float: left; width: 560px; margin-left: 15px; margin-top: 8px; padding-bottom: 5px; } #newsList .listItem .description { display: block; width: 560px; float: left; margin-left: 15px; padding-bottom: 5px; } #newsList .listItem .btn { display: block; float: right; } /* ----- USED CAR DETAIL ----- */ #vehicleImagery { float: left; width: 720px; } #vehiclePhoto { margin: 3px 0px 0px 3px; width: 325px; height: 276px; position: relative; float:left; } #vehiclePhoto .frame { position: absolute; top: -3px; left: -3px; } #vehicleThumbs .printVehicleTitle { display: none; } #vehicleThumbs { width: 370px; height: 80px; position: relative; float:right; margin-top: 2px; } #vehicleThumbs .thumb { float: left; margin: 11px 16px 3px 3px; position: relative; display: inline; } #vehicleThumbs .thumb.last { margin-right:0px !important; } #vehicleThumbs .thumb .frame { position: absolute; top: -3px; left: -3px; } #vehicleThumbs .thumb .thumbImage { height:81px; width:108px; } #vehicleInfo { float: right; width: 370px; } #vehicleInfo .title { color: #fff; font-weight: bold; font-size: 14px; width:350px; background:url(../images/layup/usedCarTitleBg.jpg) top left no-repeat; padding:10px; } #vehicleInfo .titleBottom { margin-bottom:5px; } #vehicleInfo .priceLocation { background:url(../images/layup/vehicleInfoPriceLocation.gif) top left no-repeat; padding: 6px 13px 0px 17px; width: 340px; height: 51px; } #vehicleInfo .price { float: left; width: 79px; color: #fff; font-size: 1.0em; font-weight: bold; padding-top: 6px; } #vehicleInfo .price span { font-size: 1.4em; } #vehicleInfo .location { float: left; width: 250px; color: #fff; padding-left: 11px; font-weight: bold; font-size: 97%; text-align: center; } #vehicleInfo .location span { font-size: 2.6em; } #vehicleOptions { width: 720px; } #vehicleOptions a { display: block; height: 102px; width: 131px; float: left; } #vehicleOptions .btnEnquiry a { background:url(../images/layup/spriteVehicleOptions.gif) 0px 0px no-repeat; margin-top: 10px; margin-right: 17px; } #vehicleOptions .btnEnquiry a:hover { background:url(../images/layup/spriteVehicleOptions.gif) 0px -102px no-repeat; } #vehicleOptions .btnPrint a { background:url(../images/layup/spriteVehicleOptions.gif) -131px 0px no-repeat; margin-top: 10px; margin-right:16px; } #vehicleOptions .btnPrint a:hover { background:url(../images/layup/spriteVehicleOptions.gif) -131px -102px no-repeat; } #vehicleOptions .btnValueVehicle a { background:url(../images/layup/spriteVehicleOptions.gif) -262px 0px no-repeat; margin-top: 10px; margin-right: 16px; } #vehicleOptions .btnValueVehicle a:hover { background:url(../images/layup/spriteVehicleOptions.gif) -262px -102px no-repeat; } #vehicleOptions .btnBookTestDrive a { background:url(../images/layup/spriteVehicleOptions.gif) -393px 0px no-repeat; margin-top: 10px; margin-right: 16px; } #vehicleOptions .btnBookTestDrive a:hover { background:url(../images/layup/spriteVehicleOptions.gif) -393px -102px no-repeat; } #vehicleOptions .btnSendFriend a { background:url(../images/layup/spriteVehicleOptions.gif) -524px 0px no-repeat; margin-top: 10px; margin-right: 0px; } #vehicleOptions .btnSendFriend a:hover { background:url(../images/layup/spriteVehicleOptions.gif) -524px -102px no-repeat; } #vehicleOptions .btnMakeOffer a { background:url(../images/layup/spriteVehicleOptions.gif) -460px 0px no-repeat; margin-top: 10px; margin-right: 36px; } #vehicleOptions .btnMakeOffer a:hover { background:url(../images/layup/spriteVehicleOptions.gif) -460px -102px no-repeat; } .printPrice { display: none; } /* ----- DOMTABS ----- */ #vehicleDetails { width: 721px; margin-top: 26px; } .domTabs { width: 721px; } .domHeadings { padding: 0px; margin: 0px; list-style: none; height: 37px; } .domHeadings li { float: left; } .domHeadings li a { display: block; float: left; height: 37px; outline: 0; position: relative; } .domHeadings li a span { display: none; } .domHeadings li a:hover span, .domHeadings li.active a span { display: block; background: url(../images/layup/tabHook.gif) no-repeat; width: 10px; height: 13px; position: absolute; right: -6px; top: 37px; } .domHeadings li a:hover span.last, .domHeadings li.active a span.last { background: none; } .domHeadings #tabFullCarSpec { width:140px; background: url(../images/layup/spriteVehicleTabs.gif) 0px 0px no-repeat; margin-right: 2px; display: inline; } .domHeadings #tabFullCarSpec:hover { background: url(../images/layup/spriteVehicleTabs.gif) 0px -37px no-repeat; } .domHeadings li.active #tabFullCarSpec { background: url(../images/layup/spriteVehicleTabs.gif) 0px -37px no-repeat; } .domHeadings #tabCarOverview { width:140px; background: url(../images/layup/spriteVehicleTabs.gif) -140px 0px no-repeat; margin-right: 2px;display: inline; } .domHeadings #tabCarOverview:hover { background: url(../images/layup/spriteVehicleTabs.gif) -140px -37px no-repeat; } .domHeadings li.active #tabCarOverview { background: url(../images/layup/spriteVehicleTabs.gif) -140px -37px no-repeat; } .domHeadings #tabFinance { width:140px; background: url(../images/layup/spriteVehicleTabs.gif) -280px 0px no-repeat; margin-right: 2px;display: inline; } .domHeadings #tabFinance:hover { background: url(../images/layup/spriteVehicleTabs.gif) -280px -37px no-repeat; } .domHeadings li.active #tabFinance { background: url(../images/layup/spriteVehicleTabs.gif) -280px -37px no-repeat; } .domHeadings #tabCarRac { width:140px; background: url(../images/layup/spriteVehicleTabs.gif) -420px 0px no-repeat; margin-right: 2px;display: inline; } .domHeadings #tabCarRac:hover { background: url(../images/layup/spriteVehicleTabs.gif) -420px -37px no-repeat; } .domHeadings li.active #tabCarRac { background: url(../images/layup/spriteVehicleTabs.gif) -420px -37px no-repeat; } .domHeadings #tabCarFeedback { width:148px; background: url(../images/layup/spriteVehicleTabs.gif) -560px 0px no-repeat; } .domHeadings #tabCarFeedback:hover { background: url(../images/layup/spriteVehicleTabs.gif) -560px -37px no-repeat; } .domHeadings li.active #tabCarFeedback { background: url(../images/layup/spriteVehicleTabs.gif) -560px -37px no-repeat; } .domContent { background: #fff url(../images/layup/usedTabsBgTop.gif) top left no-repeat; } .domContent .domBg { background: url(../images/layup/usedTabsBgBot.gif) bottom left no-repeat; padding: 17px 16px 12px 16px; } .domContent .heading { color: #8c0d0d; font-weight: bold; font-size: 1.2em; background:url(../images/layup/domVehicleDetailsHeading.gif) bottom left repeat-x; padding: 0px 0px 8px 0px; margin-bottom: 11px; } .domContent table td { padding: 2px 0px 2px 0px; color: #707070; font-size: 1.0em; } .dt1 { display: block; } .tabset_print { display: none; } /* finance summary */ #financeSummary { padding-top: 25px; } #tblContainerFinance table th {color: #0f4162; font-weight: bold; font-size: 1.2em; padding: 0px 0px 5px 0px; } #tblContainerFinance table td { padding: 3px 0px 3px 0px; } #printGreenGuide { display: none; } /* ----- LOCATIONS MAP ----- */ #locationsMap { position: relative; } #locationsMap a { display: block; position: absolute; background: url(../images/layup/ieLinkFix.gif); } #locationsMap #detailsClapham { width: 14px; height: 14px; top: 92px; left: 328px; } #locationsMap #bubbleClapham { position: absolute; width: 176px; height: 96px; top: -79px; left: -37px; display: none; } #locationsMap #detailsCroydon1 { width: 14px; height: 14px; top: 241px; left: 363px; } #locationsMap #bubbleCroydon1 { position: absolute; width: 176px; height: 96px; top: -77px; left: -37px; display: none; } #locationsMap #detailsCroydon2 { width: 14px; height: 14px; top: 256px; left: 355px; } #locationsMap #bubbleCroydon2 { position: absolute; width: 176px; height: 96px; top: -3px; left: -125px; display: none; } #getDirections { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 15px 0px 15px 0px; } #getDirections .location { width: 226px; float: left; margin-right: 20px; } #getDirections .location.last { margin-right: 0px; } #getDirections .getDirectionsFrom { background: url(../images/layup/getDirectionsBg.gif) top left no-repeat; padding: 10px 10px 10px 10px; width: 206px; } #getDirections label { color: #fff; font-size: 1.2em; width: 44px; } #getDirections input { border: 1px solid #fff; width: 118px; margin-right: 5px; float: left; } #getDirections input.btnGo { border: none; width: 32px; height: 18px; margin-right: 0px; } #getDirections address { padding: 0px 0px 5px 0px; } /* ----- CONTACT ----- */ #ourLocations { float: right; width: 367px; } #ourLocations .locationsBox { background: #ddd; color: #525252; font-size: 0.9em; margin-bottom: 20px; } #ourLocations .locationsBox .title { background: url(../images/layup/locationsBoxHeading.gif) bottom left repeat-x; width: 327px; float: left; display: inline; margin: 0px 20px 14px 20px; padding: 8px 0px 10px 0px; text-transform: uppercase; font-weight: bold; color: #931c1c; font-size: 1.3em; } #ourLocations .locationsBox .col1 { float: left; width: 173px; padding: 0px 0px 8px 20px; } #ourLocations .locationsBox .col2 { float: left; width: 154px; padding: 0px 20px 8px 0px; } /* ----- GLOBAL CLASSES ----- */ .clear { clear:both; display: block; } .clearSmall { clear: both; display: block; height: 0; line-height: 0; font-size: 0; } .hide { display:none; } .show { display:block; } .printShow { display:none; } .printHide { display:block; } .float_left { float:left !important; } .float_right { float:right !important; } .align_left { text-align:left !important; } .align_center { text-align:center !important; } .align_right { text-align:right !important; } .align_justify { text-align:justify !important; } .align_bottom { vertical-align:bottom !important; } .image_right { float:right; margin:0 0 15px 15px; } .image_left { float:left; margin:0 15px 15px 0; } .image_center { margin:0 auto; } .hand { cursor:pointer; } .seo {text-decoration:none;font-weight:normal; } .red { color: #8c0d0d; } /* ----- HEADINGS & PARAGRAPHS ----- */ h1, h2, h3, h4, h5, h6 { margin:0; padding:0 0 15px 0; font-size:100%; font-weight:bold; } h1 { color: #003659; font-size: 1.4em; } h2 { color: #931c1c; font-size: 1.1em; } #ourLocations h2 { color: #003659; font-size: 1.4em; } #offerFormBox h3 { color: #003659; font-size: 1.4em; padding-left: 15px; } #getDirections h3 { color: #003659; font-size: 1.4em; } #getDirections h4 { color: #931c1c; font-size: 1.2em; text-transform: uppercase; padding: 0; } p { padding:0 0 15px 0; margin:0; } /* ----- TOP NAVIGATION ----- */ #primaryNav { margin: 7px 0px 15px 0px; background:url(../images/layup/primaryNavBg.gif) top left no-repeat; } #primaryNav ul { list-style: none; margin: 0px; padding: 0px; height: 36px; } #primaryNav li { float: left; padding: 0px; margin: 0px; background:url(../images/layup/primaryNavDivider.gif) top right no-repeat; } #primaryNav li.last { background: none; } #primaryNav li a { float: left; display: block; padding: 11px 15px 10px; text-decoration: none; color: #fff; } #primaryNav li a:hover, #primaryNav li .active { color: #ffcc00; background:url(../images/layup/primaryNavHover.gif) bottom center no-repeat; } /* ----- DROPDOWN NAV ----- */ #primaryNav ul li ul { left: -999em; position: absolute; } #primaryNav ul li:hover ul, #primaryNav ul li.sfhover ul { left: auto; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; display: block; width: 200px; } #primaryNav ul li:hover ul li, #primaryNav ul li.sfhover ul li { display: block; padding: 4px 0px 0px 0px; margin: 0px; background: #ececec; width: 200px; height: 20px; border-bottom: 1px solid #CFCFCF; border-left: 1px solid #CFCFCF; border-right: 1px solid #CFCFCF; } #primaryNav ul li:hover ul li a, #primaryNav ul li.sfhover ul li a { padding: 0px 5px 5px 10px; margin: 0px; color: #666666; } #primaryNav ul li:hover ul li a:hover, #primaryNav ul li.sfhover ul li a:hover { padding: 0px 5px 5px 10px; margin: 0px; color: #000; } /* ----- SITE MAP ----- */ #sitemap { list-style:none; margin:0 0 0 5px; padding:0;} #sitemap ul { list-style:none; margin:10px 0 0px 15px; padding:0;} #sitemap li { background:url(../images/layup/bulletSitemap.gif) 0px 11px no-repeat; padding:6px 0 5px 15px;} /* ----- BREADCRUMBS/PAGINATION/PAGE TOP AND BOTTOMS ----- */ #pageInfo { background: #ddd; width: 721px; font-size: 0.9em; margin-bottom: 16px; } #breadcrumbs { float: left; font-weight: bold; color: #003659; padding: 2px 0px 2px 15px; } #breadcrumbs a { font-weight: normal; text-decoration: underline; font-weight: normal; } #breadcrumbs a:hover { text-decoration: none; } #breadcrumbs img { display: inline; margin: 0px 9px 0px 9px; } #back { float: right; padding: 2px 15px 2px 0px; } #back a { text-decoration: none; color: #003659; } #back img { display: inline; margin: 0px 9px 0px 9px; } #searchInfo { width: 721px; font-size: 0.9em; color: #353535; margin-bottom: 11px; } #searchInfo .clear { height: 0; line-height: 0; font-size: 0; } #searchInfoBottom { width: 721px; font-size: 0.9em; color: #353535; margin-bottom: 28px; margin-top: 34px; } #searchInfoBottom .clear { height: 0; line-height: 0; font-size: 0; } .searchResult { float: left; padding: 0px 0px 0px 15px; font-weight: bold; } .sortBy { float: left; padding-top: 0px; } .sortBy fieldset { display: inline; } .sortBy label { width: 75px; text-align: right; font-weight: bold; padding-right: 6px; } .sortBy select { width: 120px; height: 19px; position: relative; top: -2px; } .pagination { float: right; padding-right: 10px; } .pagination .prev { margin-right: 8px; } .pagination .prev:hover { background: none; color: #353535; text-decoration: underline; } .pagination .next { margin-left: 8px; } .pagination .next:hover { background: none; color: #353535; text-decoration: underline; } .pagination a { padding: 1px 5px 1px 5px; text-decoration: none; font-weight: bold; } .pagination a:hover { text-decoration: none; background:#8c0d0d; color:#fff; } .pagination .active { text-decoration: none; background:#8c0d0d; color:#fff; } /* ----- ACCREDITATIONS ----- */ #accreditations { clear: both; margin-bottom: 6px; } #accreditations .logoRac { float: left; margin-right: 14px; } #accreditations .logoHpi { float: left; margin-right: 15px; } #accreditations .logoNmr { float: left; margin-right: 21px; } #accreditations .logoFsa { float: left; margin-right: 19px; } #accreditations .logoMotorIndustry { float: left; margin-right: 18px; } #accreditations .logoRmi { float: left; margin-right: 18px; } #accreditations .logoFsb { float: left; margin-right: 18px; } #accreditations .logoLondonChamber { float: left; margin-right: 20px; } #accreditations .logoCroydonChamber { float: left; margin-right: 20px; } #accreditations .logoMotorTrader { float: left; } /* ----- FOOTER ----- */ #footer { background: #efefef; height: 90px; margin-top: -90px; } #footer #footerContainer { width:956px; margin:0 auto; text-align:left; font-size:110%; line-height: 180%; padding-top: 5px; } #footer #footerContainer a { font-weight:normal; text-decoration:none;} #footer #footerContainer a:hover { text-decoration:underline;} #footer #footerContainer .float_right { text-align: right; } #printFooter { display: none; } /* ----- GLOBAL ----- */ img { display:block; border:0; } address { font-style:normal; } /* ----- LINKS ----- */ a { color:#000000; font-weight:bold; text-decoration:underline;cursor:pointer; outline: none; } a:hover { text-decoration:none; } /* ----- FORMS ----- */ form { padding:0; margin:0; } fieldset { padding:0; margin:0; border:0px none; } legend { padding:0; margin:0; display:none; } label { display:block; width:260px; float:left; } input, textarea { width:200px; font-size:11px;} select { font-size:11px;} .required { color:#8c0d0d;} .checkRadio { width:20px !important; position:relative !important; left:-7px !important; } #offerFormBox {width: 324px; margin: 0px 0px 25px 25px; } #offerFormBox #frmContact { background: #ddd; width: 288px; padding: 10px 16px 0px 20px; margin-bottom: 0; } #offerFormBox #frmContact label { width: 100px; font-weight: bold; color: #525252; } #offerFormBox #frmContact input { width: 178px; } #offerFormBox #frmContact textarea { width: 178px; } #offerFormBox #frmContact select { width: 182px; } #offerFormBox .updates label { width: 250px !important; } #offerFormBox .validation-advice { width:270px; } #contactFormBox { width: 334px; float: left; color: #525252; } #contactFormBox #frmContact { background: #ddd; width: 298px; padding: 10px 16px 0px 20px; margin-bottom: 0; } #contactFormBox #frmContact label { width: 100px; font-weight: bold; } #contactFormBox #frmContact input { width: 188px; } #contactFormBox #frmContact textarea { width: 188px; } #contactFormBox #frmContact select { width: 192px; } #contactFormBox .updates label { width: 262px !important; } #contactFormBox .validation-advice { width:280px; } #frmContact { background: #ddd; width: 474px; padding: 10px 16px 0px 20px; margin-bottom: 0; } .domContent .domBg #frmContact { background: none; } #frmContact label { font-weight: bold; color: #525252; } #frmContact select { width:204px; } #frmContact div { margin-bottom:10px;} #submit { width:79px !important; height:29px !important; border:none; } /* ----- Prototype Validation ----- */ input.disabled { border: 1px solid #F2F2F2; background-color: #F2F2F2; } input.validation-failed, textarea.validation-failed, select.validation-failed { border: 1px solid #8c0d0d; color : #8c0d0d; } input.validation-passed, textarea.validation-passed, select.validation-passed { border: 1px solid #00CC00; color : #000; } .validation-advice { margin: 5px 0; width:452px; padding: 5px; background-color: #8c0d0d; color : #FFF; font-weight: bold; } /* ----- TABLES ----- */ table { border-collapse:collapse; } table p { padding:0px; } /* ----- STOCK UPDATES FORM ----- */ #promoForm { padding:12px 0 0 19px; } #promoForm .signupBoxes { margin-bottom:20px; margin-top:10px;} #promoForm .signupBoxes label { float:left; width:450px; position:relative; top:4px;} #promoForm .signupBoxes input { float:left; width: 14px; margin-right: 10px;} #promoForm select { width:125px !important; margin-bottom: 10px; display:block; margin-right:15px;} #promoForm .carSelects { padding-top:18px;} #promoForm .submitButton { margin:5px 0 20px 0;} /* ----- FINANCE NAV ----- */ #rightNavInternal { float: right; clear:right; width: 284px; background: #003659; margin-left:15px; margin-bottom:15px; } #rightNavInternal #rightBox { background: url(../images/layup/financeNavBg.gif) no-repeat top left; } #rightNavInternal #rightBox ul { padding: 10px 10px 10px 10px; margin: 0px; list-style: none; } #rightNavInternal #rightBox ul li { margin-bottom: 1px; float: left; } #rightNavInternal #rightBox ul li a { background:#91A3BB url(../images/layup/dotRed.gif) 245px 8px no-repeat; text-decoration: none; display: block; padding: 5px 12px 5px 12px; font-weight: normal; float: left; width: 240px; } #rightNavInternal #rightBox ul li a:hover, #rightNavInternal #rightBox ul li a.active { background:#DDDDDD url(../images/layup/dotBlue.gif) 245px 8px no-repeat; } #rightNavInternal #rightBox #rightList { padding: 0px 0px 10px 0px; } /* ----- USED DETAIL CHANGES MARCH/APRIL 2010 ----- */ #breadcrumbs .currentPage { width:495px; display:block; float:right; } #financeCalc { width:685px; padding-top:12px; } #financeCalc .boxLeft { width: 270px; float: left; color: #4c4c4c; } #financeCalc .boxLeft div.box { padding: 0px 0px 15px 0px; } #financeCalc .boxLeft div.sliderWidget { width: 159px; height: 34px; background: url(../images/layup/sliderBg.gif) bottom left no-repeat; position: relative; margin-top: 4px; } #financeCalc .boxLeft div.sliderWidget .bubble { background:url(../images/layup/sliderBubble.gif) no-repeat; width: 45px; height: 30px; position: absolute; top: 0px; left: 0px; cursor: w-resize; color: #FFFFFF; text-align: center; font-size: 10px; padding-top: 3px; } #financeCalc .boxLeft div.sliderWidget a { display: block; width: 10px; height: 14px; background: url(../images/layup/ie6LinkFix.gif); } #financeCalc .boxLeft div.sliderWidget a.sliderLeft { position: absolute; top: 21px; left: 0px; } #financeCalc .boxLeft div.sliderWidget a.sliderRight { position: absolute; top: 20px; right: 0px; } #financeCalc .boxRight { width: 295px; float: right; } #financeCalc .boxRight .btns a { float: left; margin-right: 5px; } #financeCalc .boxRight table td { font-family: Arial, Helvetica, sans-serif; font-size: 16px; padding: 0px 20px 0px 0px; } #financeCalc .boxRight table tr.red td { color: #a91010; } #vehicleDetails .domContent #greenGuide { width: 215px; float: right; color: #707070; } #vehicleDetails .domContent #greenGuide .heading { margin-left: 20px; } #vehicleDetails .domContent #greenGuide .green { color: #009d0e; font-weight: bold; margin-bottom: 20px; } #vehicleDetails .domContent #greenGuide .padding { border-left: 1px solid #b0b0b0; padding-left: 20px; padding-right: 35px; } #vehicleDetails .domContent #fullSpec { width: 455px; float: left; } #vehicleDetails .domContent #fullSpec.fullWidth { float: none; width: auto;} #vehicleDetails .domContent #greenGuide .sliderGreen { width: 159px; height: 24px; background: url(../images/layup/co2bg.jpg) no-repeat; margin-bottom: 20px; position: relative; } #vehicleDetails .domContent #greenGuide .sliderGreen .bubblePoor { width: 45px; height: 35px; background: url(../images/layup/spriteBubble.gif) 0px 0px no-repeat; position: absolute; top: -22px; left: 0px; } #vehicleDetails .domContent #greenGuide .sliderGreen .bubbleFair { width: 45px; height: 35px; background: url(../images/layup/spriteBubble.gif) -45px 0px no-repeat; position: absolute; top: -22px; left: 0px; } #vehicleDetails .domContent #greenGuide .sliderGreen .bubbleGood { width: 45px; height: 35px; background: url(../images/layup/spriteBubble.gif) -90px 0px no-repeat; position: absolute; top: -22px; left: 0px; }