/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Title : Williams Author : John Davies / john.davies@gforces.co.uk / G-Forces Web Management Ltd Type: Screen, Projection Description : Screen and projection stylesheet for Williams 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: url(../images/layup/bodyBg.gif) top left repeat; color:#6e6e6e; 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 ----- */ #outer { width: 100%; height: 100%; background: url(../images/layup/outerBg.gif) top left repeat-x; } #outerHome { width: 100%; height: 100%; background: url(../images/layup/outerHomeBg.gif) top left repeat-x; } #container { min-height: 100%; width:960px; margin:0 auto; text-align:left; font-size:110%; line-height: normal; background: url(../images/layup/containerBg.jpg) top right repeat-y; } * html #container { height: 100%; } #printHeader { display:none;} #header { height: 90px; width: 960px; position: relative; background: url(../images/layup/headerBg.gif) top left no-repeat; } #header #logo { position: absolute; top: 0px; left: 0px; } #header #badge { position: absolute; top: 27px; right: 0px; } #header #contactDetails { color: #aaaaaa; font-size: 2.4em; position: absolute; top: 42px; right: 125px; } #header #btnBackToGroup { position: absolute; top: 0px; right: 142px; } #header #btnLoyaltyCard { position: absolute; top: 0px; right: 0px; } #header #flags { position: absolute; top: 6px; right: 133px; } #header #flags a { float: left; margin-right: 4px; } #header #flags a.flagGermany { display: block; width: 16px; height: 11px; background: url(../images/layup/spriteFlags.gif) 0px 0px no-repeat; } #header #flags a.flagGermany:hover { display: block; width: 16px; height: 11px; background: url(../images/layup/spriteFlags.gif) 0px -14px no-repeat; position:relative; z-index:25; } #header #flags a.flagGermany span { display: none; font-weight:normal !important; text-decoration:none !important; color: #818181 !important;} #header #flags a.flagGermany:hover span {display:block !important; position:absolute; top: 8px; right: -25px; width:258px; z-index:100;} #header #flags a.flagGermany:hover p { background: url(../images/layup/tooltipBg.gif) top left repeat-y !important; display: block; padding: 0px 0px 0px 10px; width:248px; } #header #flags a.flagFrance { display: block; width: 16px; height: 11px; background: url(../images/layup/spriteFlags.gif) -16px 0px no-repeat; } #header #flags a.flagFrance:hover { display: block; width: 16px; height: 11px; background: url(../images/layup/spriteFlags.gif) -16px -14px no-repeat; position:relative; z-index:25; } #header #flags a.flagFrance span {display: none; font-weight:normal !important; text-decoration:none !important; color: #818181 !important; } #header #flags a.flagFrance:hover span {display:block !important; position:absolute; top: 8px; right: -25px; width:258px; z-index:100;} #header #flags a.flagFrance:hover p { background: url(../images/layup/tooltipBg.gif) top left repeat-y !important; display: block; padding: 0px 0px 0px 10px; width:248px; } #header #flags a.flagItaly { display: block; width: 16px; height: 11px; background: url(../images/layup/spriteFlags.gif) -32px 0px no-repeat; } #header #flags a.flagItaly:hover { display: block; width: 16px; height: 11px; background: url(../images/layup/spriteFlags.gif) -32px -14px no-repeat; position:relative; z-index:25; } #header #flags a.flagItaly span {display: none; font-weight:normal !important; text-decoration:none !important; color: #818181 !important;} #header #flags a.flagItaly:hover span {display:block !important; position:absolute; top: 8px; right: -25px; width:258px; z-index:100;} #header #flags a.flagItaly:hover p { background: url(../images/layup/tooltipBg.gif) top left repeat-y !important; display: block; padding: 0px 0px 0px 10px; width:248px; } #header #flags a.flagSpain { display: block; width: 16px; height: 11px; background: url(../images/layup/spriteFlags.gif) -48px 0px no-repeat; } #header #flags a.flagSpain:hover { display: block; width: 16px; height: 11px; background: url(../images/layup/spriteFlags.gif) -48px -14px no-repeat; position:relative; z-index:25; } #header #flags a.flagSpain span {display: none; font-weight:normal !important; text-decoration:none !important; color: #818181 !important;} #header #flags a.flagSpain:hover span {display:block !important; position:absolute; top: 8px; right: -25px; width:258px; z-index:100;} #header #flags a.flagSpain:hover p { background: url(../images/layup/tooltipBg.gif) top left repeat-y !important; display: block; padding: 0px 0px 0px 10px; width:248px; } #header #telephone { width:85px; position:absolute; top:5px; left:655px; font-size:12px; } /* ----- SMART REWARD ----- */ #loyaltyLogin { width: 100%; background: #fff url(../images/layup/loyaltyCardDivider.gif) top left repeat-x; height: 151px; } #loyaltyLoginContainer {width:960px; margin:0 auto; padding: 0px; text-align:left; font-size:110%; position: relative; } #loyaltyLogin .btnClose { float: right; height: 141px; width: 106px; text-align: right; background: url(../images/layup/loyaltyCardClose.gif) top left repeat-y; padding: 10px 26px 0px 0px; } #loyaltyLogin .btnClose a { color: #919191; font-weight: bold; text-transform: uppercase; text-decoration: none; } #loyaltyLogin .loyaltyAccountLogin { float: left; background: url(../images/layup/loyaltyCardAccountLogin.gif) top left no-repeat; width: 226px; height: 140px; padding: 10px 21px 0px 21px; } #loyaltyLogin .loyaltyAccountLogin form label { color: #000; width: 50px; padding: 0px 12px 0px 5px; text-align: right; } #loyaltyLogin .loyaltyAccountLogin form input { width: 155px; height: 14px; padding: 0; margin: 0; float: left; } #loyaltyLogin .loyaltyAccountLogin form div { margin-bottom: 9px; } #loyaltyLogin .loyaltyAccountLogin form #btnLogin { width: 84px; height: 30px; float: right; } #loyaltyLogin .loyaltyRegistration { float: left; width: 270px; height: 140px; padding: 10px 21px 0px 21px; color: #000; } #loyaltyLogin .loyaltyRegistration p { padding: 0px 0px 5px 0px !important; line-height: 150%; } /* ----- LEFT COLUMN ----- */ #leftCol { float: left; width: 272px; } #leftCol .vehicleSearch { background: #000 url(../images/layup/vehicleSearchBg.gif) top left repeat-y; } #leftCol .vehicleSearch .title { padding: 0px 20px 6px 20px; } #leftCol .vehicleSearch form { padding: 0px 20px 9px 20px; } #leftCol .vehicleSearch form div { margin-bottom: 9px; } #leftCol .vehicleSearch form .newUsedSearch { height: 22px; } #leftCol .vehicleSearch form select { width: 169px; height: 20px; } #leftCol .vehicleSearch form label { width: 56px; color: #fff; float: left; text-align: right; padding: 0px 12px 0px 0px; } #leftCol .vehicleSearch form select { font-style: italic; color: #6b6b6b; width: 162px; float: left; } #leftCol .vehicleSearch form .checkRadio { width:18px; height: 15px; position: relative; left: -2px; margin: 0; padding: 0;} #leftCol .vehicleSearch #btnAdvanced { float: left; color: #ababab; font-size: 1.3em; text-decoration: none; margin: 14px 0px 0px 11px; font-weight: bold; } #leftCol .vehicleSearch #btnSearch { float: right; width: 110px !important; height: 30px !important; margin-top: 7px; } #leftCol .box { background: url(../images/layup/leftColBoxBg.gif) top left repeat; width: 270px; margin: 0px 1px 20px 1px; line-height: 160%; } #leftCol .box a { width: 230px; padding: 20px 19px 16px 19px; display: block; font-weight: normal; text-decoration: none; color:#6e6e6e; } #leftCol .box .title { display: block; padding-bottom: 5px; } #leftCol .box .content { display: block; } #leftCol .box .btn { display: block; padding-top: 5px; float: right; } #leftCol .saveCompare { background: url(../images/layup/leftColBoxBg.gif) top left repeat; margin: 0px 1px 20px 1px; width: 234px; padding: 20px 17px 16px 19px; } #leftCol .saveCompare .title { display: block; padding-bottom: 5px; } #leftCol .saveCompare .thumb { float: left; margin-right: 3px; margin-left: 3px; margin-bottom: 6px; width: 58px; height: 44px; padding: 1px !important; border: 5px solid #1a1a1a; background: #000; } #leftCol .saveCompare .btnSave { margin-top: 5px; float: left; } #leftCol .saveCompare .btnCompare { margin-top: 5px; float: right; } /* ----- RIGHT COLUMN ----- */ #rightCol { float: right; width: 688px; } #franchiseJumps { height: 125px; } #franchiseJumps span { display: none; } #franchiseJumps a { float: left; } #franchiseJumps .jumpMazda a { display: block; width: 117px; height: 85px; background:url(../images/layup/spriteFranchiseJumps.gif) 0px 0px no-repeat; } #franchiseJumps .jumpMazda a:hover { background:url(../images/layup/spriteFranchiseJumps.gif) 0px -85px no-repeat; } #franchiseJumps .jumpMorgan a { display: block; width: 187px; height: 85px; background:url(../images/layup/spriteFranchiseJumps.gif) -117px 0px no-repeat; } #franchiseJumps .jumpMorgan a:hover { background:url(../images/layup/spriteFranchiseJumps.gif) -117px -85px no-repeat; } #franchiseJumps .jumpLotus a { display: block; width: 113px; height: 85px; background:url(../images/layup/spriteFranchiseJumps.gif) -304px 0px no-repeat; } #franchiseJumps .jumpLotus a:hover { background:url(../images/layup/spriteFranchiseJumps.gif) -304px -85px no-repeat; } #franchiseJumps .jumpLandRover a { display: block; width: 150px; height: 85px; background:url(../images/layup/spriteFranchiseJumps.gif) -417px 0px no-repeat; } #franchiseJumps .jumpLandRover a:hover { background:url(../images/layup/spriteFranchiseJumps.gif) -417px -85px no-repeat; } #franchiseJumps .jumpSaab a { display: block; width: 121px; height: 85px; background:url(../images/layup/spriteFranchiseJumps.gif) -567px 0px no-repeat; } #franchiseJumps .jumpSaab a:hover { background:url(../images/layup/spriteFranchiseJumps.gif) -567px -85px no-repeat; } #mainImage { height: 263px; padding-left: 20px; position: relative; } #mainImage .controls { position: absolute; top: 7px; right: 18px; z-index: 9999; } #mainImage .controls a { display: block; height: 13px; width: 13px; background: url(../images/layup/spriteMainImageControls.gif) 0px 0px no-repeat; float: right; } #mainImage .controls a:hover { display: block; height: 13px; width: 13px; background: url(../images/layup/spriteMainImageControls.gif) 0px -13px no-repeat; float: right; } #mainImage div { width: 648px; height: 263px; position: relative; } #mainImage div .frame { position: absolute; top: 0px; left: -20px; z-index:999; } #mainContent { padding: 12px 20px 20px 20px; } /* ----- CMS IMAGE ----- */ .cmsImage { float: right; margin: 0px 0px 15px 15px; position: relative; } .cmsImage .frame { position: absolute; top: 0; left: 0; z-index:999; } /* ----- LIST ----- */ #list { width: 648px; } #list .listItem { width: 648px; background: url(../images/layup/listingDivider.gif) bottom left repeat-x; padding: 13px 0px 17px 0px; font-size: 1.1em; position: relative; } #list .listItem a { display: block; width: 638px; text-decoration: none; cursor: pointer; padding: 5px; color: #000000; } #list .listItem a:hover { display: block; background: url(../images/layup/diagBg.gif) top left repeat; } #list .listItem .thumb { display: block; position: relative; width: 147px; height: 96px; float: left; border: 3px solid #000; padding: 1px; background:#ffffff url(../images/layup/noImage147x110.gif) 1px 1px no-repeat; } #list .listItem .thumb .frame { display: block; } #list .listItem a .thumb .frame { display: block; position: absolute; top: 1px; left: 1px; width: 147px; height: 96px; filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5; } #list .listItem a .thumb.lotus { height: 110px; } #list .listItem a .thumb.morgan { height: 110px; } #list .listItem .details { display: block; width: 472px; float: left; padding-left: 11px; } #list .listItem .title { display: block; width: 472px; padding-bottom: 6px; font-size: 1.6em; font-weight: bold; } #list .listItem .title .price { float: right; font-weight: bold; color: #181818; } #list .listItem .colour { display: block; width: 472px; padding-bottom: 6px; } #list .listItem .imagesAvailable { display: block; width: 300px; background: url(../images/layup/iconCamera.gif) top left no-repeat; padding: 0px 0px 12px 20px; } #list .listItem .spec { display: block; width: 300px; } #list .listItem .spec .specItem { float: left; width: 144px; padding: 0px 0px 4px 0px; } #list .listItem .description { display: block; width: 472px; padding-bottom: 6px; } #list .listItem .btn { display: block; width: 123px; float: right; } #list .listItem .saveCompare { position: absolute; z-index: 999; top: 70px; right: 6px; cursor: pointer; } /* ----- BOX LIST ----- */ .boxList { clear: both; } .boxList h2 { font-size: 2.2em; padding: 8px 0px 16px 0px; } .boxList .box { float: left; margin-right: 5px; margin-bottom: 10px; } .boxList .box a { display: block; width: 147px; height: 110px; border: 3px solid #000; padding: 1px; background: #fff; color: #fff; text-decoration: none; } .boxList .box .thumb { display: block; position: relative; width: 147px; height: 110px; } .boxList .box a .thumb .frame { display: block; position: absolute; top: 0; left: 0; background: url(../images/layup/spriteFrame.gif) top left no-repeat; width: 147px; height: 110px; filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5; } .boxList .box a:hover .thumb .frame { display: block; position: absolute; top: 0; left: 0; background: url(../images/layup/spriteFrame.gif) 0px -110px no-repeat; width: 147px; height: 110px; filter:alpha(opacity=10); opacity: 0.1; -moz-opacity:0.1; } .boxList .box .title { display: block; position: absolute; bottom: 7px; right: -2px; background: #000; font-size: 1.5em; font-weight: bold; padding: 0px 5px 0px 5px; } /* ----- OFFER LIST ----- */ #offerTabs { width: 448px; height: 30px; } #offerTabs a { display: block; height: 30px;float:left; } #offerTabs a span { display: none; } #offerTabs a#offerTabCars { width: 81px; background: url(../images/layup/spriteOffersDomtabs.gif) 0px 0px no-repeat; } #offerTabs a#offerTabCars:hover { background: url(../images/layup/spriteOffersDomtabs.gif) 0px -30px no-repeat; } #offerTabs a#offerTabCars.active { background: url(../images/layup/spriteOffersDomtabs.gif) 0px -30px no-repeat; } #offerTabs a#offerTabUsed { width: 85px; background: url(../images/layup/spriteOffersDomtabs.gif) -81px 0px no-repeat; } #offerTabs a#offerTabUsed:hover { background: url(../images/layup/spriteOffersDomtabs.gif) -81px -30px no-repeat; } #offerTabs a#offerTabUsed.active { background: url(../images/layup/spriteOffersDomtabs.gif) -81px -30px no-repeat; } #offerTabs a#offerTabAftersales { width: 81px; background: url(../images/layup/spriteOffersDomtabs.gif) -166px 0px no-repeat; } #offerTabs a#offerTabAftersales:hover { background: url(../images/layup/spriteOffersDomtabs.gif) -166px -30px no-repeat; } #offerTabs a#offerTabAftersales.active { background: url(../images/layup/spriteOffersDomtabs.gif) -166px -30px no-repeat; } #offerTabs a#offerTabContract { width: 102px; background: url(../images/layup/spriteOffersDomtabs.gif) -247px 0px no-repeat; } #offerTabs a#offerTabContract:hover { background: url(../images/layup/spriteOffersDomtabs.gif) -247px -30px no-repeat; } #offerTabs a#offerTabContract.active { background: url(../images/layup/spriteOffersDomtabs.gif) -247px -30px no-repeat; } #offerTabs a#offerTabMotability { width: 77px; background: url(../images/layup/spriteOffersDomtabs.gif) -349px 0px no-repeat; } #offerTabs a#offerTabMotability:hover { background: url(../images/layup/spriteOffersDomtabs.gif) -349px -30px no-repeat; } #offerTabs a#offerTabMotability.active { background: url(../images/layup/spriteOffersDomtabs.gif) -349px -30px no-repeat; } .offerList .box { float: left; margin-right: 5px; margin-bottom: 10px; width: 319px; height: 129px; } .offerList .box a { display: block; width: 319px; height: 129px; color: #bfbfbf; text-decoration: none; } .offerList .box .thumb { display: block; position: relative; width: 319px; height: 129px; } .offerList .box .thumb .frame { display: block; position: absolute; top: 0; left: 0; } .offerList .box .title { display: block; position: absolute; top:5px; left: 10px; font-size: 2.0em; font-weight: bold; color: #ccc; } /* ----- OFFER DETAIL ----- */ #offerOptions { float: right; background: url(../images/layup/diagBg.gif) top left repeat; padding: 7px 6px 6px 16px; width: 424px; position: relative; left: 20px; } #offerOptions label { width: 95px; font-size: 1.4em; font-weight: bold; margin-top: 6px; } #offerOptions select { width: 250px; float: left; margin-top: 6px; font-style: italic; } #offerOptions .btnGo { width: 70px; height: 30px; float: left; margin-left: 6px; } #offerImage { height: 263px; width: 648px; position: relative; margin-bottom: 22px; } #offerImage .frame { position: absolute; top: 0px; left: -20px; } /* ----- USED CAR DETAIL ----- */ #usedVehicleImagery { padding-bottom: 22px; } #usedVehicleThumbs { float: left; width: 322px; height: 47px; margin: 0px; position: relative; background: url(../images/layup/diagBg.gif) top left repeat; padding: 10px 3px 10px 3px; } #usedVehicleThumbs #prevThumb { position: absolute; top: 10px; left: 3px; z-index: 999; } #usedVehicleThumbs #nextThumb { position: absolute; top: 10px; right: 3px; z-index: 999; } #usedVehicleThumbs #thumbWindow { position: absolute; overflow: hidden; width: 322px; height: 47px; margin-left: 0px; } #usedVehicleThumbs #thumbWindow #thumbContainer { height: 47px; } #usedVehicleThumbs #thumbWindow .thumb { float: left; margin-right: 3px; margin-top: 0px; position: relative; } #usedVehicleThumbs #thumbWindow .thumb .frame { position: absolute; top: 0; left: 0; } #usedVehiclePhoto { float: right; width: 320px; height: 240px; position: relative; padding-top: 11px; background: url(../images/layup/noImage320x240.gif) 0px 11px no-repeat; } #usedVehiclePhoto .frame { position: absolute; top: 0; left: 0; } #usedVehicleStats { float: left; width: 322px; padding: 18px 3px 10px 3px; } #usedVehicleStats table { width: 100%; } #usedVehicleStats table td { font-size: 1.1em; padding: 4px 0px 5px 0px; } #usedVehicleOptions { width: 648px; height: 30px; padding: 0px 0px 20px 0px; } #usedVehicleOptions a { display: block;float: left; } #usedVehicleOptions .btnEnquiry a { height: 30px; width: 68px; background:url(../images/layup/spriteUsedVehicleOptions.gif) 0px 0px no-repeat; margin-right: 2px; } #usedVehicleOptions .btnEnquiry a:hover { background:url(../images/layup/spriteUsedVehicleOptions.gif) 0px -30px no-repeat; } #usedVehicleOptions .btnSendFriend a { height: 30px; width: 123px; background:url(../images/layup/spriteUsedVehicleOptions.gif) -68px 0px no-repeat; margin-right: 2px; } #usedVehicleOptions .btnSendFriend a:hover { background:url(../images/layup/spriteUsedVehicleOptions.gif) -68px -30px no-repeat; } #usedVehicleOptions .btnMakeOffer a { height: 30px; width: 107px; background:url(../images/layup/spriteUsedVehicleOptions.gif) -191px 0px no-repeat; margin-right: 2px; } #usedVehicleOptions .btnMakeOffer a:hover { background:url(../images/layup/spriteUsedVehicleOptions.gif) -191px -30px no-repeat; } #usedVehicleOptions .btnSaveCompare a { height: 30px; width: 126px; background:url(../images/layup/spriteUsedVehicleOptions.gif) -298px 0px no-repeat; margin-right: 2px; } #usedVehicleOptions .btnSaveCompare a:hover { background:url(../images/layup/spriteUsedVehicleOptions.gif) -298px -30px no-repeat; } #usedVehicleOptions .btnPrint a { height: 30px; width: 84px; background:url(../images/layup/spriteUsedVehicleOptions.gif) -424px 0px no-repeat; margin-right: 2px; } #usedVehicleOptions .btnPrint a:hover { background:url(../images/layup/spriteUsedVehicleOptions.gif) -424px -30px no-repeat; } #usedVehicleOptions .btnValue a { height: 30px; width: 128px; background:url(../images/layup/spriteUsedVehicleOptions.gif) -508px 0px no-repeat; } #usedVehicleOptions .btnValue a:hover { background:url(../images/layup/spriteUsedVehicleOptions.gif) -508px -30px no-repeat; } #financeCalculator { float: right; background: url(../images/layup/financeCalculatorBg.gif) bottom left no-repeat; } #financeCalculator table { margin-bottom: 3px; } #financeCalculator td { height: 23px; color: #cfcfcf; } #relatedVehicles { margin: 20px 0px 10px 12px; width: 636px; } #relatedVehicles .box { width: 155px; float: left; margin-right: 5px; } #relatedVehicles .box.last { margin-right: 0 !important; } #relatedVehicles .box a { width: 155px; cursor: pointer; text-decoration: none; color:#6e6e6e; } #relatedVehicles .box .thumb { display: block; position: relative; width: 147px; height: 96px; border: 3px solid #000; padding: 1px; background: #fff; background: url(../images/layup/noImage147x110.gif) 1px 1px no-repeat; } #relatedVehicles .box .thumb .frame { display: block; } #relatedVehicles .box a .thumb .frame { display: block; position: absolute; top: 1px; left: 1px; width: 147px; height: 96px; filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5; } #relatedVehicles .box .title { display: block; font-size: 1.2em; padding: 8px 0px 0px 0px; } #relatedVehicles .box .additional { display: block; padding: 0px 0px 8px 0px; } #relatedVehicles .box .btn { display: block; float: right; width: 72px; padding-left: 82px; } /* ----- DOM TABS ----- */ #usedVehicleDetails { width: 448px; float: left; } #usedVehicleDetails .printHeading { display: none; } #usedVehicleDetails .domHeadings { padding: 0; margin:0; list-style:none; width: 448px; height: 35px; }.dt1 { display: block; } #usedVehicleDetails .domHeadings li { float:left; padding: 0; } #usedVehicleDetails .domHeadings li span { display: none; } #usedVehicleDetails .domHeadings li a { display: block; height: 35px; } #usedVehicleDetails .domHeadings li#tabSpec a { width: 117px; background: url(../images/layup/spriteUsedCarDomtabs.gif) 0px 0px no-repeat; } #usedVehicleDetails .domHeadings li#tabSpec a:hover { background: url(../images/layup/spriteUsedCarDomtabs.gif) 0px -35px no-repeat; } #usedVehicleDetails .domHeadings li#tabSpec.active a{ background: url(../images/layup/spriteUsedCarDomtabs.gif) 0px -35px no-repeat; } #usedVehicleDetails .domHeadings li#tabTechnical a { width: 137px; background: url(../images/layup/spriteUsedCarDomtabs.gif) -117px 0px no-repeat; } #usedVehicleDetails .domHeadings li#tabTechnical a:hover { background: url(../images/layup/spriteUsedCarDomtabs.gif) -117px -35px no-repeat; } #usedVehicleDetails .domHeadings li#tabTechnical.active a { background: url(../images/layup/spriteUsedCarDomtabs.gif) -117px -35px no-repeat; } #usedVehicleDetails .domHeadings li#tabWarranty a { width: 194px; background: url(../images/layup/spriteUsedCarDomtabs.gif) -254px 0px no-repeat; } #usedVehicleDetails .domHeadings li#tabWarranty a:hover { background: url(../images/layup/spriteUsedCarDomtabs.gif) -254px -35px no-repeat; } #usedVehicleDetails .domHeadings li#tabWarranty.active a { background: url(../images/layup/spriteUsedCarDomtabs.gif) -254px -35px no-repeat; } #usedVehicleDetails .domContent { background: url(../images/layup/usedCarDomtabBg.gif) top left repeat-y; width: 422px; min-height: 198px; padding: 6px 13px 6px 13px; } #usedVehicleDetails .domContentInner { overflow-y: auto; overflow-x: hidden; width: 408px; height: 188px; padding:10px 10px 0 0; } #usedVehicleDetails .domContentInner td { padding:3px 0 3px 3px; color:#fff; } #usedVehicleDetails .domContentInner .altRow { background:#323232; } #usedVehicleDetails .domContent .heading { display: none; } #usedVehicleDetails .dt1 { display: block; } /* ----- DEALER ----- */ #dealerContactDetails { float: left; width: 307px; } #dealerContactDetails address { font-weight: bold; font-size: 1.3em; padding-bottom: 15px; } #dealerContactDetails .telephoneNumber { font-weight: bold; font-size: 1.3em; } #dealerContactDetails #dealerOpeningTimes { float: right; width: 150px; text-align: right; line-height: 160%; } #dealerContactDetails #dealerOpeningTimes p { padding: 0px 0px 20px 0px; } #dealerMap { float: right; width: 321px; margin-bottom: 10px; } #dealerMap #map { padding: 2px; border-left: 6px solid #000; border-bottom: 6px solid #000; border-top: 6px solid #000; position: relative; } #dealerMap #map .frameR { position: absolute; top: -6px; right: -23px; } #dealerMap #map .frameL { position: absolute; top: -6px; left: -6px; } #dealerMap #map .frameB { position: absolute; top: 257px; left: -4px; } #dealerMap #dealerDirections { padding: 6px 13px 6px 13px; background: url(../images/layup/diagBg.gif) top left repeat; margin-bottom: 15px; } #dealerMap #dealerDirections label { width: 108px; text-align: right; font-size: 1.3em; font-weight: bold; padding-right: 5px; float: left; margin-top: 8px; } #dealerMap #dealerDirections input { float: left; width: 118px; font-style: italic; float: left; margin-top: 8px; } #dealerMap #dealerDirections #btnDirections { width: 47px; height: 34px; float: left; padding-left: 8px; margin: 0; } /* ----- GLOBAL CLASSES ----- */ .clear { clear:both; display: block; margin: 0 !important; } .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;} /* ----- HEADINGS & PARAGRAPHS ----- */ h1, h2, h3, h4, h5, h6 { margin:0; padding:0 0 14px 0; font-size:100%; font-weight:bold; line-height: 120%; } h1 { font-size: 2.2em; color: #181818; } h2 { font-size: 1.5em; color: #181818; } #vehicleTitle { font-size: 1.2em; } #vehicleTitle h1 { padding-bottom: 8px; } #vehicleTitle .price { color: #000; float: right; font-size: 2.1em; font-weight: bold; } #vehicleTitle .price span { font-size: 0.5em; font-weight: normal; color: #919191; } p { padding:0 0 10px 0; margin:0; } /* ----- TOP NAVIGATION ----- */ #primaryNav { margin: 0px; padding: 0px 2px 0px 2px; background:url(../images/layup/primaryNavBg.gif) top left no-repeat; width: 956px; } #primaryNav ul { list-style: none; margin: 0px; padding: 0px; height: 60px; } #primaryNav li { display: block; padding: 0px 2px 0px 0px; margin: 0px; float: left; background: url(../images/layup/primaryNavDivider.gif) top right no-repeat; } #primaryNav li a { display: block; float: left; font-weight: bold; text-decoration: none; text-transform: uppercase; padding: 13px 20px 13px 20px; color: #919191; } #primaryNav li a:hover, #primaryNav li .active { color: #fff; background:url(../images/layup/primaryNavHover.gif) top left repeat-x; } #primaryNav li.telephone { float: right; color: #aaaaaa; font-size: 2.4em; padding: 4px 8px 0px 0px; background: none; } /* ----- SECONDARY NAVIGATION ----- */ #secondaryNav {} #secondaryNav ul { list-style: none; margin: 0; padding: 0; } #secondaryNav li { } #secondaryNav li a { text-decoration: none; } /* ----- 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 9px no-repeat; padding:6px 0 5px 15px;} /* ----- BREADCRUMBS/PAGINATION/PAGE TOP AND BOTTOMS ----- */ #pageInfo { background: url(../images/layup/diagBg.gif) top left repeat; padding: 19px 20px 17px 20px; } #pageInfo #breadcrumbs { float: left; color: #181818; line-height: normal; background: #fff; padding: 0px 3px 0px 3px; } #pageInfo #breadcrumbs a { font-weight: normal; text-decoration: none; } #pageInfo #breadcrumbs a:hover { text-decoration: underline; } #pageInfo #breadcrumbs .active { font-weight: bold; } #pageInfo #btnBack { float: right; padding: 0px; background: #fff; padding: 0px 3px 0px 3px; } #pageInfo #btnBack a { text-decoration: none; } #pageInfo #btnBack a:hover { text-decoration: underline; } .searchInfo { background: url(../images/layup/diagBg.gif) top left repeat; padding: 14px 20px 0px 20px; margin-top: 10px; height: 36px; } .searchInfo .clear { height: 0; line-height: 0; font-size: 0; } .searchInfoBottom { background: url(../images/layup/diagBg.gif) top left repeat; padding: 14px 20px 0px 20px; margin-top: 20px; height: 36px; margin-bottom: 20px; } .searchInfoBottom .clear { height: 0; line-height: 0; font-size: 0; } .searchResult { float: left; padding: 0px 3px 0px 3px; margin: 5px 90px 3px 0px; background: #fff; color: #181818; } .pagination { float: right; background: #fff; color: #6e6e6e; margin: 5px 0px 3px 0px; } .pagination a { padding: 1px 3px 1px 3px; text-decoration: none; font-weight: normal; } .pagination a:hover { text-decoration: none; background:#6e6e6e; color:#fff; } .pagination .active { text-decoration: none; background:#6e6e6e; color:#fff !important; } .pagination .prev { text-decoration: none; background: none !important; padding: 0px 3px 0px 3px; font-style: italic; } .pagination .next { text-decoration: none; background: none !important; padding: 0px 3px 0px 3px; font-style: italic; } .pagination .prev:hover { color: #181818; text-decoration: underline; } .pagination .next:hover { color: #181818; text-decoration: underline; } .sortBy { float: left; } .sortBy fieldset { display: inline; } .sortBy label { width: 40px; text-align: right; margin-top: 5px; background: #fff; color: #181818; } .sortBy select { width: 160px; height: 19px; margin-top: 2px; font-style: italic; color: #6B6B6B; } /* ----- FOOTER ----- */ #footer { width: 100%; background: #1f1f1f url(../images/layup/footerBg.gif) top left repeat-x; height: 150px; margin-top: -150px; } #footer #footerContainer { width:960px; margin:0 auto; text-align:left; font-size:110%; line-height: 170%; color: #fff; } #footer a { font-weight: normal; text-decoration: underline; color: #fff; } #footer a:hover { text-decoration: none; } #footer #legalInfo { background: url(../images/layup/footerLegalInfo.gif) top left no-repeat; height: 50px; width: 363px; padding: 15px 0px 0px 21px; } #footer #internalLinks { float: right; clear: both; text-align: right; background: url(../images/layup/footerLinks.gif) top right repeat-x; height: 28px; color: #2c2c2c; padding: 18px 7px 0px 7px; margin-bottom: 72px; margin-right: 1px; } #footer #internalLinks a { color: #2c2c2c; } #footer #gforcesLinks { clear: both; text-align: right; } /* ----- GLOBAL ----- */ img { display:block; border:0; } address { font-style:normal; } ul { padding: 0; margin: 5px 0px 12px 24px; } li { padding: 2px 0px 1px 0px; } /* ----- LINKS ----- */ a { color:#6e6e6e; font-weight:normal; text-decoration:underline; cursor:pointer; outline: none; } a:hover { text-decoration:none; } a:visited { color: #181818; } /* ----- 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 !important; } .required { color:#000000;} .checkRadio { width:20px !important; position:relative; left:-7px;} #frmContact { margin-bottom:15px; } #frmContact p { padding:7px 0; } #frmContact select { width:204px; } #frmContact div { margin-bottom:10px;} #submit { width: 108px !important; height: 28px !important; border:none;} #contactForm { background: #e6e8e9; } #contactForm #frmContact { padding: 12px 12px 8px 12px; } #contactForm #frmContact p { padding: 0px 0px 15px 0px; } #contactForm #frmContact #models_list_MAZDA { width: 185px !important; margin-right: 10px } #contactForm #frmContact #models_list_MORGAN { width: 185px !important; margin-right: 10px } #contactForm #frmContact #models_list_LOTUS { width: 185px !important; } #contactForm #frmContact select { width:334px !important; color: #000; } #contactForm #frmContact input, #contactForm #frmContact textarea { width:330px; font-size:11px !important; color: #000; } #contactForm #frmContact textarea { height: 70px; } #contactForm #frmContact div { margin-bottom: 10px;} #contactForm #frmContact label { display:block; width:223px; float:left; text-align: right; padding-right: 15px; } #contactFormSmall { float: left; width: 307px; background: url(../images/layup/contactFormSmallBg.gif) top left repeat-y; padding: 9px 0px 0px 20px; position: relative; left: -20px; color: #fff; } #contactFormSmall form { margin-bottom: 0; } #contactFormSmall form label { width: 106px; padding-right: 3px; padding-top: 2px; font-weight: normal; color: #fff; text-align: right; } #contactFormSmall form div { margin: 0px 0px 11px 0px; } #contactFormSmall input, #contactFormSmall textarea { width: 170px; } #contactFormSmall select { width: 120px !important; } #contactFormSmall input#submit { width: 108px; height: 28px; } #contactFormSmall input.required, #contactFormSmall select.required { color: #000; } #contactFormSmall .validation-advice { margin: 5px 0; width:270px; padding: 5px; background-color: #ff0000; color : #FFF; font-weight: bold; } #enquiryFormSmall { float: none; width: 307px; background: url(../images/layup/formBoxBg.gif) bottom left repeat-y; padding: 0px; color: #fff; } #enquiryFormSmall .heading { padding: 0px 0px 6px 0px; } #enquiryFormSmall p { padding: 0px 15px 12px 15px; color: #b8b8b8; } #enquiryFormSmall form { margin-bottom: 0; } #enquiryFormSmall form label { width: 106px; padding-right: 3px; padding-top: 2px; font-weight: normal; text-align: right; color: #b8b8b8; } #enquiryFormSmall form div { margin: 0px 0px 11px 0px; } #enquiryFormSmall input, #enquiryFormSmall textarea { width: 170px; } #enquiryFormSmall select { width: 120px !important; } #enquiryFormSmall input#submit { width: 108px; height: 28px; } #enquiryFormSmall input.required, #contactFormSmall select.required { color: #000; } #enquiryFormSmall .validation-advice { margin: 5px 0; width:270px; padding: 5px; background-color: #ff0000; color : #FFF; font-weight: bold; } /* ----- Prototype Validation ----- */ input.disabled { border: 1px solid #F2F2F2; background-color: #ff0000; } input.validation-failed, textarea.validation-failed, select.validation-failed { border: 1px solid #ff0000; color : #FF3300; } input.validation-passed, textarea.validation-passed, select.validation-passed { border: 1px solid #00CC00; color : #000; } .validation-advice { margin: 5px 0; width:560px; padding: 5px; background-color: #ff0000; 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;}