/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Title : Author : Chris Munn / chris.munn@gforces.co.uk / G-Forces Web Management Ltd Type: Screen, Projection Description : Screen and projection stylesheet for Hillsford 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/bodyBgInternal.jpg) repeat-x; 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 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: 966px; margin:0 auto; text-align:left; font-size:110%; line-height: normal; background: url(../images/layup/containerBg.jpg) no-repeat; } * html #container { height: 100%; } #printHeader { display:none;} /* ----- HEADER ----- */ #header { height: 100px; position: relative; z-index: 9999; } #header #logo { position: absolute; top: 16px; left: 3px; } #header #contactDetails { position: absolute; top: 37px; right: 107px; width: 378px; } #header #contactDetails img { float: left; } #header #badge { position: absolute; top: 37px; right: 0px; } /* header tabs */ #header #headerTabs { float: right; } #header #headerTabs img { float: left; } #header #headerTabs #divDropdown { position: absolute; top: -2px; right: 7px; width: 246px; height: 289px; background: url(../images/layup/headerTabDivBg.png) no-repeat; } * html #headerTabs #divDropdown { background: url(../images/layup/headerTabDivBg.gif) no-repeat !important; } #header #headerTabs #dropDownClose { background: url(../images/layup/ie6LinkFix.gif); cursor: pointer; width: 153px; height: 30px; position: absolute; top: 0px; right: 0px; z-index: 999; } #header #headerTabs #divDropdown ul { padding: 45px 17px 0px 17px; margin: 0px; list-style: none; } #header #headerTabs #divDropdown ul li { padding: 0px 0px 3px 0px; margin: 0px 0px 22px 0px; height: 60px; background: url(../images/layup/dropdownListSeperator.gif) no-repeat bottom left; } #header #headerTabs #divDropdown ul li.noBg { background: none; } #header #headerTabs #divDropdown ul li a { display: block; text-decoration: none; color: #8e8e8e; font-size: 10px; } #header #headerTabs #divDropdown ul li a img { float: none; margin-bottom: 4px; } /* ----- FLASH ----- */ #homeFlash { width: 650px; height: 250px; float: right; } /* ----- LEFT COLUMN ----- */ #leftCol { float: left; width: 303px; color: #767676; } #leftCol .box { padding: 0px 6px 0px 3px; position: relative; margin-bottom: 6px; } #leftCol .box.jumpFordMazda { padding: 3px 0px 0px 0px !important; position:relative; } #leftCol .box.jumpFordMazda a#ford { width:186px; height:100px; background:url(../images/layup/ie6LinkFix.gif) repeat; position:absolute; left:0; top:3px; } #leftCol .box.large { background: url(../images/layup/boxBg.jpg) no-repeat; width: 300px; height: 227px; } #leftCol .box.saveCompare { background: url(../images/layup/saveCompareBg.jpg) no-repeat; width: 300px; height: 198px; } #leftCol .box .padding { padding: 23px 16px 0px 16px; } #leftCol .usedCarSearch { padding: 0px 10px 0px 3px; margin-bottom: 0px; } #jumpMazdaFord { width:313px; height:124px; position:relative; } #jumpMazdaFord a { background:url(../images/layup/ie6LinkFix.gif) repeat; display:block; position:absolute; } #jumpMazdaFord a#ford { width:189px; height:124px; left:0; top:0; } #jumpMazdaFord a#mazda { width:124px; height:124px; left:189px; top:0; } /* -- used car search -- */ /* model type */ #leftCol #usedSearchTab { position: absolute; top: 40px; left: -26px; } #leftCol .usedCarSearch { width: 300px; height: 223px; background: url(../images/layup/usedSearchBg.jpg) no-repeat; } #leftCol .usedCarSearch form { padding: 8px 9px 0px 16px; } #leftCol .usedCarSearch form #usedSearchSelectOptions { width: 269px; background: url(../images/layup/dropdownListSeperator.gif) no-repeat left bottom; margin-bottom: 10px; padding-bottom: 5px; } #leftCol .usedCarSearch form #usedSearchSelectOptions #minPrice, #leftCol .usedCarSearch form #usedSearchSelectOptions #marqueDetailId { margin-right: 11px; } #leftCol .usedCarSearch form #usedSearchSelectOptions select { width: 127px; float: left; margin-bottom: 5px; } #leftCol .usedCarSearch form #btnUsedSearch { width: 79px !important; height: 24px !important; } #leftCol .usedCarSearch form #quickSearch { width: 170px; text-align: center; margin-top: 2px; } #leftCol .usedCarSearch form #usedSearchBtns { float: right; } /* budget search */ #leftCol .usedCarSearch #budgetSearch { color: #010101; } #leftCol .usedCarSearch #budgetSearch #btnBudgetGo { width: 39px; height: 24px; float: right; position: relative; top: -2px; } #leftCol .usedCarSearch #budgetSearch #btnOptionSearch { width: 75px; height: 24px; float: right; } #leftCol .usedCarSearch #budgetSearch #optionBudget p { width: 90px; float: left; padding: 3px 0px 0px 0px; } #leftCol .usedCarSearch #budgetSearch #optionBudget select { width: 125px; float: left; } #leftCol .usedCarSearch #budgetSearch #optionPayments label { width: 91px; } #leftCol .usedCarSearch #budgetSearch #optionPayments select { width: 174px; margin-bottom: 4px; } /* lifestyle search */ #leftCol .usedCarSearch #lifeStyleSearch {} #leftCol .usedCarSearch #lifeStyleSearch label { width: 106px; float: left; } #leftCol .usedCarSearch #lifeStyleSearch input.checkRadio { float: left; padding: 0px; width: 20px; top: -2px; left: -2px; } #leftCol .usedCarSearch #lifeStyleSearch div.checkHolder { width: 134px; float: left; height: 26px; } #leftCol .usedCarSearch #lifeStyleSearch #btnLSSearch { width: 75px; height: 24px; float: right; } /* company news */ #leftCol .newsItem {} #leftCol .newsItem .newsHeading { font-size: 14px; font-weight: bold; text-transform: uppercase; padding: 2px 0px 0px 0px; } #leftCol .newsItem .newsDate { font-size: 9px; padding: 0px 0px 12px 0px; } #leftCol .newsItem .newsImg { width:100px; height:75px; background:url(../images/layup/noImage100x75.jpg) no-repeat; margin:2px 0 0; float:right; } #leftCol .newsItem .newsContent {} #leftCol .newsItem .newsMore a { color:#3296b8; font-weight: normal; text-decoration: none; } #leftCol .newsItem .padding { padding: 0px 0px 10px 0px; height: 122px; } #leftCol #newsButtons { } #leftCol #newsButtons #newsPrevNext { float: right; position: relative; width: 125px; } #leftCol #newsButtons #newsPrevNext a { display: block; float: left; } #leftCol #newsButtons #newsPrevNext #currentItem { width: 49px; height: 24px; float: left; background: url(../images/layup/newsCurrent.gif) no-repeat; color: #FFF; font-weight: bold; font-size: 13px; } #leftCol #newsButtons #newsPrevNext #currentItem div { padding: 4px 0px 0px 0px; text-align: center; } /* save and compare */ #leftCol .item { padding: 15px 0px 0px 0px; } #leftCol .item .padding { padding: 0px 0px 15px 0px; } #leftCol .item .padding div.thumbnail { display: block; float: left; width: 54px; height: 41px; padding: 0px 17px 17px 0px; } #leftCol .item .padding div#thumbnail0 { background: url(../images/layup/thumbnail1.jpg) no-repeat; } #leftCol .item .padding div#thumbnail1 { background: url(../images/layup/thumbnail2.jpg) no-repeat; } #leftCol .item .padding div#thumbnail2 { background: url(../images/layup/thumbnail3.jpg) no-repeat; } #leftCol .item .padding div#thumbnail3 { background: url(../images/layup/thumbnail4.jpg) no-repeat; padding-right: 0px; } #leftCol .item .padding div#thumbnail4 { display:none; } #leftCol .item .padding div#thumbnail5 { display:none; } #leftCol .item .padding div#thumbnail6 { display:none; } #leftCol .item .padding div#thumbnail7 { display:none; } /* ----- RIGHT COLUMN ----- */ #rightCol { float: right; width: 636px; } /*#rightCol #homeJumps img { float: left; }*/ #homeJumps .homeJump { display:block; float:left; height:220px; overflow:hidden; position:relative; width:210px; z-index:1; } #homeJumps .homeJump .homeJumpImages { background-color:white; height:125px; margin-left:31px; left:0; position:absolute; margin-top:48px; z-index:10; } #homeJumps .homeJump .overflow { } #homeJumps .homeJump .homeJumpImages a { display:block; float:left; } #homeJumps .homeJump .homeJumpLayout { position:absolute; z-index:99999; } #homeJumps .homeJump .homeJumpBottom { bottom:0; } #homeJumps .homeJump .homeJumpLeft { left:0px; top:48px; } #homeJumps .homeJump .homeJumpRight { right:0px; top:48px; } /* FIXES SCROLLER OVERFLOW ON LAST BOX ON HOMEPAGE IN IE8 */ #homeJumps #ie8fix{width: 10px; height: 125px; background: #FFFFFF; position:absolute; top: 48px; right: -2px; z-index: 9999999;} #homeJumpNewCars { background:url(../images/layup/homeJumpNewCarsBg.png) no-repeat 31px 50%; } #rightCol #homeSecondJumps { float: right; width: 214px; } /* homepage featured car */ #rightCol #featuredCar { width: 419px; height: 259px; background: url(../images/layup/homeFeaturedCarBg.jpg) no-repeat; } #rightCol #featuredCar .title { width:199px; height:55px; } #rightCol #featuredCar .featuredItem { height: 148px; } #rightCol #featuredCar .featuredItem .featuredImage { padding: 16px 0px 0px 20px; width: 169px; float: left; } #rightCol #featuredCar .featuredItem .featuredDetails { width: 213px; float: right; padding: 13px 15px 0px 0px; } #rightCol #featuredCar .featuredItem .featuredDetails th { font-size: 12px; text-transform: uppercase; } #rightCol #featuredCar .featuredItem .featuredDetails td, #rightCol #featuredCar .featuredItem .featuredDetails th { padding: 0px 0px 6px 0px; } #rightCol #featuredCar .featuredItem .featuredDetails td.price { font-size: 13px; font-weight: bold; color: #850000; } #rightCol #featuredCar .featuredPagination { } #rightCol #featuredCar .featuredPagination .viewAllFeatured { float: right; padding: 20px 16px 0px 0px; width: 182px; } #rightCol #featuredCar .featuredPagination .featuredPages { padding: 15px 0px 0px 19px; } #rightCol #featuredCar .featuredPagination .featuredPages a { text-decoration: none; font-weight: bold; color: #FFF; display: block; float: left; width: 19px; height: 19px; background: url(../images/layup/paginationBg.gif) no-repeat; margin-right: 8px; } #rightCol #featuredCar .featuredPagination .featuredPages a span { display: block; padding: 3px 0px 0px 0px; text-align: center; } #rightCol #featuredCar .featuredPagination .featuredPages a.active { background: url(../images/layup/paginationBgActive.gif) no-repeat; } #rightCol #mainContent { font-size: 12px; line-height: normal; padding: 2px 0px 0px 0px; } #rightCol #backButton { float: right; width: 68px; height: 29px; padding: 10px 3px 0px 0px; } #rightCol .pageText { padding: 2px 0px 10px 0px; margin: 0px 0px 20px 0px; border-bottom: 1px solid #dfdfdf; } /* ----- USED CAR LISTING ----- */ /* used options at top of list */ #usedListOptions { width: 636px; height: 116px; margin-bottom: 5px; background: url(../images/layup/usedListOptionsBg.jpg) no-repeat; color: #747474; } #usedListOptions a { color: #747474; text-decoration: none; } #usedListOptions img { display: inline; position: relative; top: 2px; } #usedListOptions .padding { padding: 25px 25px 0px 25px; } #usedListOptions #usedListPages a, #usedListOptions #usedListPages .btn { color: #349ab8; padding: 0px 4px 0px 4px; } #usedListOptions #usedListPages a.active { color: #747474; } #usedListOptions #sortOptions { float: right; width: 195px; height: 22px; } #usedListOptions #sortOptions label { width: 55px; float: left; } #usedListOptions #sortOptions select { width: 140px; float: left; color: #349ab8; position: relative; top: -3px; } #usedListOptions #financeOptions { padding: 26px 0px 0px 0px; } #usedListOptions #financeOptions select { display: block; float: left; position: relative; top: -2px; color: #747474; margin-right:15px; } #usedListOptions #financeOptions span { display: block; float: left; padding: 0px 4px 0px 4px; } #usedListOptions #financeOptions span.first { padding: 0px 4px 0px 0px; } #usedListOptions #financeOptions #TotalDeposit { width: 50px; float: left; position: relative; top: -2px; color: #747474; margin-right:15px; } #usedListOptions #financeOptions #AnnualMileage { width: 65px; float: left; position: relative; top: -2px; color: #747474; margin-right:15px; } #usedListOptions #financeOptions #btnUpdateFinance { width: 109px; height: 25px; position: relative; top: -6px; float: right; } /* used list */ .bottomPagination {width:330px; margin:10px auto;} .bottomPagination img { display: inline; position: relative; top: 2px; } .bottomPagination a, .bottomPagination .btn { color: #349ab8; padding: 0px 4px 0px 4px; text-decoration:none; } .bottomPagination a.active { color: #747474; text-decoration:none; } #usedList { width: 636px; } #usedList .listItem { background: url(../images/layup/usedItemBg.jpg) top left no-repeat; width: 636px; margin-bottom: 10px; } #usedList .itemImage { position: relative; width: 247px; padding: 9px 1px 6px 4px; float: left; } #usedList .itemImage .fordDirect { position:absolute; top:8px; left:4px; display:block; z-index:999999; } #usedList .itemImage .frame { position: absolute; z-index: 999; top: 0px; left: 0px; } #usedList .itemImage .offer { position:absolute; left:4px; top:9px; z-index:9999; } #usedList .itemImage .cmsImage { width: 247px; height: 185px; float: none; margin: 0px; display: block; position: relative; z-index: 1; background: url(../images/layup/noImage247x185.jpg) no-repeat; } #usedList .itemDetails { width: 371px; float: left; font-size: 12px; color: #3f3f3f; padding: 20px 0px 0px 13px; } #usedList .itemDetails td { font-size: 11px; color: #3f3f3f; } #usedList .itemDetails td a{ padding: 3px 10px 3px 0px; display:block; text-decoration:none; font-weight:normal;} #usedList .itemDetails .itemHeading { color: #359db9; font-size: 14px; padding-bottom: 5px; } #usedList .itemDetails .itemHeading a {text-decoration:none; font-weight:normal; color: #359db9;} #usedList .itemDetails .buttons { float: right; width: 229px; padding: 12px 10px 0px 0px; } #usedList .itemDetails .buttons img { float: left; padding-left: 7px; } #usedList .itemDetails .itemSpec { height: 110px; } #usedList .itemDetails .itemPrice { width: 125px; float: left; display:block; } #usedList .itemDetails .itemPrice a {text-decoration:none;} #usedList .itemDetails .wasPrice { font-weight: bold; font-size: 12px; display:block; } #usedList .itemDetails .nowPrice { font-weight: bold; color: #eeb210; font-size: 20px; display:block; } #usedList .itemDetails .onlyPrice { font-weight: bold; color: #eeb210; font-size: 20px; margin-top:7px; display:block; } #usedList .itemFinance { width: 636px; height: 81px; background: url(../images/layup/usedListFinanceBg.jpg) no-repeat; color: #747474; } #usedList .itemFinance a { color: #747474; text-decoration: none; font-weight: normal; } #usedList .itemFinance .insuranceExample { width: 185px; float: left; padding: 15px 0px 0px 15px; } #usedList .itemFinance .financeExample { width: 421px; float: left; padding: 15px 0px 0px 15px; } #usedList .itemFinance .title { display: block; font-weight: bold; } /* ----- BOXLIST ----- */ #boxList {} #boxList .listItem { width: 202px; height: 228px; background: url(../images/layup/boxListBg.jpg) no-repeat; float: left; margin-right: 15px; margin-bottom: 15px; } #boxList .listItem.lastItem { margin-right: 0px; } #boxList .listItem a { text-decoration: none; font-weight: normal; display: block; position: relative; height: 220px; } #boxList .listItem .itemHeading { display: block; color: #797979; font-size: 12px; font-weight: bold; height: 27px; padding: 16px 0px 0px 15px; text-transform: uppercase; } #boxList .listItem .listImage { display: block; padding: 0px 0px 0px 3px; width: 195px; height: 146px; background: url(../images/layup/noImage195x146.jpg) 3px 0px no-repeat; } #boxList .listItem .listImage .frame { position: absolute; top: 173px; left: 182px; } #cms #boxList .listItem { width: 202px; height: 261px; background: url(../images/layup/boxListBgLarge.jpg) no-repeat; float: left; margin-right: 15px; margin-bottom: 15px; } #cms #boxList .listItem.lastItem { margin-right: 0px; } #cms #boxList .listItem a { text-decoration: none; font-weight: normal; display: block; position: relative; height: 220px; } #cms #boxList .listItem .itemHeading { display: block; color: #797979; font-size: 12px; font-weight: bold; height: 59px; padding: 16px 0px 0px 15px; text-transform: uppercase; } #cms #boxList .listItem .listImage { display: block; padding: 0px 0px 0px 3px; width: 195px; height: 146px; background: url(../images/layup/noImage195x146.jpg) 3px 0px no-repeat; } #cms #boxList .listItem .listImage .frame { position: absolute; top: 206px; left: 182px; } /* ----- CMS IMAGE ----- */ .cmsImage { float: right; margin: 0px 0px 15px 15px; position: relative; } .cmsImage .frame { position: absolute; top: -9px; left: -6px; } /* ----- INTERNAL FORMS ----- */ .formContainer { width: 311px; background: url(../images/layup/formBg.jpg) repeat-y; } .formContainer .formBackground { background: url(../images/layup/formBgTop.jpg) no-repeat top left; } .formContainer .formBackground .padding { background: url(../images/layup/formBgBottom.jpg) no-repeat bottom left; min-height: 380px; padding: 21px 18px 0px 18px; } .formContainer .formHeading { font-weight: bold; font-size: 16px; color: #3296b8; text-transform: uppercase; height: 31px; } .formContainer .addresses { font-size: 14px; color: #000; padding-top: 13px; padding-bottom: 12px; } .formContainer .addresses span { font-size: 18px; color: #eeb210; font-weight: bold; display: block; } .formContainer .addresses .address2 { float: right; } .formContainer label { color: #8c8c8c; font-size: 12px; width: 65px; } .formContainer div.formElement { margin-bottom: 10px; float:left; } .formContainer .formFields { padding: 20px 0px 0px 0px; } /* offer form */ .offerForm { float: right; margin: 0px 0px 15px 15px; } /* --- NEW FORMS 24-02-10 ---- */ #fullWidthForm {} #fullWidthForm .formContainer { width: 641px; min-height:625px; background:url(../images/layup/formFullWidthBg.jpg) no-repeat; } #fullWidthForm .formContainerBottom { width: 641px; } #fullWidthForm .formContainer .padding { padding:40px 0 0 110px; } #fullWidthForm .formContainer .padding .formElement { width:315px; } #fullWidthForm .formContainer label { color: #8c8c8c; font-size: 12px; font-weight:bold; width: 105px; } #fullWidthForm .formContainer .required { font-weight:normal; font-size:10px; } #fullWidthForm .formContainer.offerForm { height:475px; margin:0px; background:url(../images/layup/offerFormBg.jpg) no-repeat; } #fullWidthForm .formContainer.offerForm .padding { padding:24px 0 0 18px;} #fullWidthForm .formContainer.offerForm .formHeading { float:left; width:200px; } #fullWidthForm .formContainer.offerForm .addresses { font-size: 14px; color: #000; padding-top:0; padding-bottom: 12px; float:left; width:300px; } #fullWidthForm .formContainer.offerForm .addresses .address { float:right; padding:0px; margin-right:20px; } #fullWidthForm .formContainer.offerForm label { color: #8c8c8c; font-size: 12px; font-weight:bold; width: 80px; } #fullWidthForm .formContainer.offerForm .formElement { width:300px !important; float:left; margin-bottom: 10px; } #fullWidthForm .formContainer.offerForm .submit { float:left; } /* ----- OFFER LIST ----- */ #offerList {} #offerList a { display: block; text-decoration: none; margin: 0px 0px 10px 0px; } /* ----- FORD ECONO ----- */ #fordEconoImg { width: 655px; height: 282px; position: relative; margin-bottom: 20px; } #fordEconoImg .frame { position: absolute; top: 0px; left: 0px; } #econoTabs { padding-top: 10px; } #econoTabs ul.domHeadings { list-style:none; margin:0; padding:0; } #econoTabs ul.domHeadings li { margin:0; padding:0; } #econoTabs .domHeadings a { width: 82px; height: 34px; float: left; padding: 0px; background: url(../images/layup/spriteSteps.gif) no-repeat; } #econoTabs .domHeadings a.dt1 { background-position: 0px 0px; } #econoTabs .domHeadings a.dt2 { background-position: -82px 0px; } #econoTabs .domHeadings a.dt3 { background-position: -164px 0px; } #econoTabs .domHeadings a.dt4 { background-position: -246px 0px; } #econoTabs .domHeadings a.dt5 { background-position: -328px 0px; } #econoTabs .domHeadings a.dt6 { background-position: -410px 0px; } #econoTabs .domHeadings a.dt7 { background-position: -492px 0px; } #econoTabs .domHeadings a.dt8 { background-position: -574px 0px; width: 81px; } #econoTabs .domHeadings .active a.dt1, #econoTabs .domHeadings a:hover.dt1 { background-position: 0px -34px; } #econoTabs .domHeadings .active a.dt2, #econoTabs .domHeadings a:hover.dt2 { background-position: -82px -34px; } #econoTabs .domHeadings .active a.dt3, #econoTabs .domHeadings a:hover.dt3 { background-position: -164px -34px; } #econoTabs .domHeadings .active a.dt4, #econoTabs .domHeadings a:hover.dt4 { background-position: -246px -34px; } #econoTabs .domHeadings .active a.dt5, #econoTabs .domHeadings a:hover.dt5 { background-position: -328px -34px; } #econoTabs .domHeadings .active a.dt6, #econoTabs .domHeadings a:hover.dt6 { background-position: -410px -34px; } #econoTabs .domHeadings .active a.dt7, #econoTabs .domHeadings a:hover.dt7 { background-position: -492px -34px; } #econoTabs .domHeadings .active a.dt8, #econoTabs .domHeadings a:hover.dt8 { background-position: -574px -34px; } #econoTabs .domContent { background: none; border-left: none; border-right: none; padding:15px 0 0; } #econoTabs .domContent img.image_left { border: 1px solid #ff9219; } /* ----- CONTACT PAGE ----- */ #contactForms { padding: 0px 0px 15px 0px; } #contactForms .mapHeading { color: #969696; font-size: 14px; font-weight: bold; text-transform: uppercase; height: 21px; padding: 16px 16px 7px 20px; } #contactForms .mapContainer { width: 311px; height: 273px; background: url(../images/layup/mapBg.jpg) no-repeat; } #contactForms .map { width: 311px; height: 182px; position: relative; overflow:hidden; } #contactForms .map .googleMap { position:static !important; } #contactForms .map .mapSide1 { position: absolute; top: 0px; left: 0px; } #contactForms .map .mapSide2 { position: absolute; top: 0px; left: 294px; } #contactForms .mapPostcode { width: 155px !important; color: #818181; font-size: 12px; } #contactForms .mapOptions { padding: 11px 20px 0px 18px; } #contactForms .mapOptions a { display: block; float: right; position: relative; top: -2px; } #contactForms .addressTimes { padding: 20px 15px 15px 15px; } #contactForms .addressTimes .telFax { color: #217492; float: right; } #contactForms .formText { height: 20px; padding: 16px 0px 16px 0px; } #contactForms #contactMalvern { width: 311px; float: left; } #contactForms #contactKidderminster { width: 311px; float: right; } /* ----- NEW CAR DETAIL ----- */ .carImageOptions { } .carImageOptions .carImage { position: relative; width: 398px; height: 307px; float: left; } .carImageOptions .frame { position: absolute; top: 0px; left: 0px; } .carImageOptions .noImage { width: 386px; height: 289px; padding: 9px 8px 9px 4px; background: url(../images/layup/noImage386x289.jpg) 4px 9px no-repeat; } .carImageOptions .carOptions { width: 238px; height: 307px; float: left; } .carImageOptions .carOptions .priceTitle { width: 238px; height: 90px; background: url(../images/layup/newCarPriceBg.jpg) no-repeat; font-size: 11px; color: #838383; } .carImageOptions .carOptions .priceTitle .carName { font-size: 18px; padding: 30px 0px 0px 10px; } .carImageOptions .carOptions .priceTitle .price { font-size: 18px; font-weight: bold; color: #2c85a0; } .carImageOptions .carOptions .priceTitle .from { padding: 0px 0px 0px 10px; } #newCarForm { width: 636px; height: 400px; background: url(../images/layup/newCarFormBg.jpg) no-repeat; margin-bottom: 10px; } #newCarForm form { padding: 22px 15px 15px 15px; color: #8c8c8c; } #newCarForm form h4 { padding: 0px 0px 25px 0px; } #newCarForm form label { width: 70px; } #newCarForm form input { width: 215px; } #newCarForm form textarea { width: 220px; height: 65px; } #newCarForm form .detailsRight { width: 300px; float: right; } #newCarForm form div.formElement { margin-bottom: 12px; } /* ----- USED CAR DETAIL ----- */ /* top used car imagery */ #usedCarImagery { background: url(../images/layup/usedCarImageryBg.jpg) 0px 47px no-repeat; width: 636px; } #usedCarImagery #bottom {background:url(../images/layup/usedCarImageryBottom.jpg) bottom no-repeat; width:636px; min-height: 321px; padding-bottom:10px; } #usedCarImagery #usedCarPhoto { position: relative; padding: 19px 0px 0px 16px; float: left; } #usedCarImagery #usedCarPhoto .offer { left:19px; position:absolute; top:22px; z-index:9999; } #usedCarImagery #usedCarPhoto .frame { position: absolute; top: 19px; left: 16px; } #usedCarImagery #usedCarPhoto .noImage { width: 303px; height: 227px; padding: 3px; background: url(../images/layup/noImage303x227.jpg) 3px 3px no-repeat; } #usedCarImagery #usedCarPhoto .enlarge { display: block; } #usedCarImagery #usedCarPhoto .special { display: block; } #usedCarImagery #usedCarThumbs { float: right; width: 294px; padding: 19px 15px 0px 0px; } #usedCarThumbs .thumb { float: left; cursor: pointer; position: relative; margin-bottom: 6px; } #usedCarThumbs .thumb .frame { position: absolute; top: 0px; left: 0px; } #usedCarThumbs .thumb .noImage { padding: 4px; } /* used jumps */ #usedCarJumps { height: 100px; clear:left; } /* used vehicle domtabs */ #usedVehicleDetails .domtab .tabset_tabs { height: 46px; padding: 0px; margin: 0px; list-style: none; } #usedVehicleDetails .domtab .tabset_content { width: 628px; padding: 0px 4px 0px 4px; background: url(../images/layup/domTabContentBg.jpg) no-repeat bottom; min-height:390px; } .specHeading { padding: 15px 15px 10px 15px; color: #898989; } .specHeading h4 { padding: 0px 0px 5px 0px; font-size: 16px; color: #898989; text-transform: uppercase; } .specHeading .heading {width:570px; padding:5px; background:#3399b0; color:#fff; margin-bottom:10px; font-weight:bold;} .specHeading .text {width:144px; padding-left:5px; float:left; color:#000;} .specHeading span { color: #eeb210; font-size: 16px; font-weight: bold; } #usedVehicleDetails .domtab .tabset_content table { color: #999999; width: 100%; } #usedVehicleDetails .domtab .tabset_content table tr.trAlt { background: #f6f6f6; } #usedVehicleDetails .domtab .tabset_content table tr td { padding: 5px 0px 5px 0px; } #usedVehicleDetails .domtab .tabset_content table strong { color: #5699af; } #usedVehicleDetails .domtab .tabset_content #tblContainerFinance { padding: 0px 15px 0px 15px; } #usedVehicleDetails .domtab .tabset_content table#financeTable td { padding: 0px 10px 5px 0px; } /* related vehicles */ #relatedVehicles { width: 636px; height: 332px; background: url(../images/layup/relatedVehicleBg.jpg) no-repeat; } #relatedVehicles .padding { padding: 25px 18px 0px 18px; } #relatedVehicles h4 { padding: 0px 0px 25px 0px; font-size: 16px; color: #898989; text-transform: uppercase; } #relatedVehicles #relatedVehicleList { } #relatedVehicles #relatedVehicleList .relatedItem { display: block; float: left; padding: 0px 12px 10px 0px; } #relatedVehicles #relatedVehicleList .relatedItem a { text-decoration: none; font-weight: normal; color: #3f3f3f; font-size: 12px; } #relatedVehicles #relatedVehicleList .relatedItem .thumb { display: block; width: 108px; float: left; position: relative; } #relatedVehicles #relatedVehicleList .relatedItem .thumb .frame { display: block; position: absolute; top: -4px; left: -4px; } #relatedVehicles #relatedVehicleList .relatedItem .itemDetails { display: block; width: 180px; float: left; } #relatedVehicles #relatedVehicleList .relatedItem .itemDetails .itemHeading { display: block; color: #359db9; height: 37px; } #relatedVehicles #relatedVehicleList .relatedItem .itemDetails .itemPrice { display: block; font-weight: bold; } #relatedVehicles #relatedVehicleList .relatedItem .itemDetails .itemPrice span { font-size: 14px; font-weight: bold; color: #eeb210; } #relatedVehicles #relatedVehicleList .relatedItem .itemDetails .viewNow { float: right; } #vehicleIconList {} #vehicleIconList .iconItem { width:93px; text-align:center; margin:15px; float: left; } #vehicleIconList .iconItem img { margin:0 auto; } /* ViewBox */ .viewBox { padding:1.5em; } .viewBox ul, .viewBox ul li { margin:0; list-style-type:none; padding:0; } .viewBox ul li { float:left; } .viewBox ul li a { background-color:#DFDFDF; color:#00466B; display:block; font-size:110%; padding:0.5em; text-decoration:none; width:100px; } .viewBox ul li a.active { background-color:#00466B; color:white; } .viewBox ul li a:hover { background-color:#EEB210; color:#00466B; } .viewBox .viewBoxClose { float:right; } .viewBox .viewBoxClose a { color:red; font-size:120%; font-weight:bold; text-decoration:none; } .viewBoxTabs { border-bottom:1px solid #00466B; margin-bottom:.5em; } .viewBoxControls { margin:1em auto; width:444px; } .viewBoxVideoControls { width:500px; } .viewBoxVideoControls ul li { border:1px solid #767676; margin:0.25em; } .viewBoxVideoControls ul li a { width:40px; } .viewBoxVideoControls .viewBoxVideoVolumeDown, .viewBoxVideoControls .viewBoxVideoVolumeUp { } .viewBoxVideoControls .viewBoxVideoPlay { width:80px; } #vbViewStock #vbViewStockMainImage { background-color:#EAEAEA; float:left; height:480px; width:640px; } #vbViewStock #vbViewStockThumbs { float:right; height:480px; overflow:auto; width:130px; } #vbViewStock #vbViewStockThumbs ul li { float:none; } #vbViewStock #vbViewStockThumbs ul li a { background:none; padding:.5em; } #vbViewStock #vbViewStockThumbs ul li a.active { border:1px solid #CCCC66; background-color:#FFFF99; } /* SAVE & COMPARE */ #viewFavourites td { padding:4px 0px; width:67px;} #viewFavourites .label{ width:90px;} /* ----- 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; } .tabset_print { display: none; } .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 10px 0; font-size:100%; font-weight:bold;} h1 { font-family: Helvetica, Arial, sans-serif; font-size: 30px; color: #349ab8; font-weight: bold; padding-top: 10px; } h2 { font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #349ab8; font-weight: bold; } h3 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #eeb210; font-weight: bold; } h4 { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #349ab8; font-weight: bold; padding-bottom: 0px; } p { padding:0 0 10px 0; margin:0; } p.subText { color: #000; font-weight: bold; font-size: 14px; font-family: Arial, sans-serif, Helvetica; } p.subText .nowPrice { font-size: 20px; color: #eeb210; padding-left: 10px; } p.subText .savePrice { font-size: 20px; color: #000; padding-left: 10px; } p.subText .wasPrice { font-size: 20px; color: #000; } /* ----- TOP NAVIGATION ----- */ #primaryNav { width: 966px; height: 57px; background: url(../images/layup/primaryNavBg.gif) no-repeat; } #primaryNav ul { list-style: none; margin: 0; padding: 0px 3px 0px 3px; } #primaryNav li { float: left; background: url(../images/layup/primaryNavSpacer.gif) no-repeat right 18px; } #primaryNav li.lastItem { background: none; } #primaryNav li a { display: block; float: left; text-decoration: none; font-weight: normal; font-size: 12px; } #primaryNav li a span { height: 14px; display: block; float: left; padding: 21px 22px 12px 21px; background: url(../images/layup/primaryNavArrow.gif) no-repeat center 41px; } #primaryNav li a.active, #primaryNav li a:hover { background: url(../images/layup/primaryNavActive.gif) no-repeat top center; color: #002e47; } /* ----- 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 ----- */ #breadcrumbs { line-height: normal; height: 46px; color: #FFF; font-size: 12px; background: url(../images/layup/breadcrumbsBg.jpg) no-repeat; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 12px; width: 550px; float: left; } #breadcrumbs a { font-weight: normal; text-decoration: none; float: left; color: #FFF; display: block; } #breadcrumbs span { display: block; float: left; padding: 7px 10px 7px 10px; background: url(../images/layup/breadcrumbsItemBg.jpg) repeat-x; } #breadcrumbs span.spacer { width: 12px; height: 36px; background: url(../images/layup/breadcrumbSpacer.gif) no-repeat; padding: 0px; } #breadcrumbs span.currentItem { color: #eeb210; font-weight: bold; background: url(../images/layup/breadCrumbsEnd.gif) no-repeat top right; padding-right:6px; } #breadcrumbs .btnBack { float: right; padding: 0px; } #pagination { float: right; } #pagination a { padding: 0px 4px 0px 4px; text-decoration: none; } #pagination a:hover { text-decoration: none; background:#000000; color:#FFFFFF; } #pagination .active { text-decoration: none; background:#000000; color:#FFFFFF; } #pagination span { display: block; float: left; padding: 0px 2px 0px 2px; } /* ----- FOOTER ----- */ #footer { height: 304px; background: url(../images/layup/footerBg.jpg) repeat-x; margin-top: -304px; color: #8e8e8e; font-size: 11px; } #footer .padding { width: 966px; margin:0 auto; text-align:left; } #footer a { font-weight:normal; text-decoration:none; color: #8e8e8e; } #footer a:hover { text-decoration:underline;} #footer #footerJumps { width: 966px; } #footer #footerJumps a { float: left; display: block; text-decoration: none; color: #8e8e8e; margin-bottom: 20px; } #footer #footerJumps a .jumpPadding { display: block; padding: 60px 16px 0px 16px; } #footer #footerJumps a .jumpPadding .visitSite { color: #3296b8; text-decoration: underline; float: right; } #footer #footerJumps #footerJumpAutomotive { width: 243px; background: url(../images/layup/footerJumpAutomotiveBg.gif) no-repeat; } #footer #footerJumps #footerJumpFord { width: 239px; background: url(../images/layup/footerJumpFordBg.gif) no-repeat; } #footer #footerJumps #footerJumpSelfStore { width: 242px; background: url(../images/layup/footerJumpSelfStoreBg.gif) no-repeat; } #footer #footerJumps #footerJumpBrookhire { width: 242px; background: url(../images/layup/footerJumpBrookhireBg.gif) no-repeat; } #footer #staticLinks { border-top: 1px solid #e5e5e5; margin-top: 8px; } #footer #staticLinks h3 { font-family: Helvetica, Arial, sans-serif; font-size: 20px; color: #349ab8; font-weight: bold; padding-top: 10px; } /* ----- GLOBAL ----- */ img { display:block; border:0; } address { font-style:normal; } /* ----- LINKS ----- */ a { color:#000000; font-weight:bold; text-decoration:underline;cursor:pointer; } #mainContent a { color: #349ab8; } 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 !important;} .required { color:#0033FF;} .checkRadio { width:20px; position:relative; left:-7px;} #frmContact { margin-bottom:15px;} #frmContact p { padding:7px 0;} #frmContact select { width:204px;} #frmContact div { margin-bottom:10px;} #submit, .submit { width:82px !important; height:29px !important; border:none; float: right;} /* ----- Prototype Validation ----- */ input.disabled { border: 1px solid #F2F2F2; background-color: #F2F2F2; } input.validation-failed, textarea.validation-failed, select.validation-failed { border: 1px solid red; color : #FF3300; } 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: #4c97ad; color : #FFF; font-weight: bold; } .contactFrm .validation-advice { margin: 5px 0; width:257px; padding: 5px; background-color: #3296b8; 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; width: 330px; float:left; margin-left:165px;} #promoForm .submitButton { margin:5px 0 20px 0;} /* ----- USED CAR SHARE THIS POP UP ----- */ #overlay { width:100%; height:100%; z-index:99999; background:url(../images/layup/popUpOverlay.png) repeat; position:fixed; top:0px; left:0px; } #popupContainer { position: relative; z-index: 99999; width:932px; display:none; margin: 0 auto; text-align: left; } #popupContainer #popup { width:416px; height:201px; z-index:9999; position:absolute; top:300px; left:270px;} #popupContainer #popup .popupInner { width:416px; height:201px; background:url(../images/layup/popUpBg.png) top left no-repeat;} #popupContainer #popup a { display:block; position:relative; z-index:9999999; } #popupContainer #popup .btnClose { position:absolute; top:9px; left:350px; } #popupContainer #popup .btnTwitter{ position:absolute; top:54px; left:63px; } #popupContainer #popup .btnShareFb { position:absolute; top:118px; left:63px; }