/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Title : Author : John Davies / john.davies@gforces.co.uk / G-Forces Web Management Ltd Type: Screen, Projection Description : Screen and projection stylesheet for Dinnages site - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* COMMON AND GLOBAL */ body { font:62.5%/1.6 arial, verdana, helvetica, sans-serif; margin:0; padding:0; background:#ffffff url(../images/layup/bodyBg.gif) top left 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 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 { width:900px; margin:26px auto 0 auto; text-align:left; font-size:110%; background: #fff; line-height: 130%; } #inner { background:url(../images/layup/containerBg.gif) top left repeat-x; margin: 0px 2px; width: 860px; padding: 0px 18px; float: left; display: inline; } #printHeader { display:none;} #header { position: relative; height: 134px; } #header #logo { position: absolute; top: 25px; left: 10px; } #header #years75 { position:absolute; left:290px; top:45px; } #header #badgeFord { position: absolute; top: 39px; right: 272px; } #header #badgeTransit { position: absolute; top: 40px; right: 53px; } #header #badgeRenault { position: absolute; top: 33px; right: 10px; } #header #contactDetails { font-size:12px; text-align:right; position:absolute; right:9px; top:85px; } /* ----- SHADOWS ----- */ #shadowT { position: relative; } #shadowT img { position: absolute; top: -10px; } #shadowL { position: relative; } #shadowL img { position: absolute; top: -10px; left: -10px; } #shadowR { position: relative; } #shadowR img { position: absolute; top: -10px; right: -10px; } #groupFlash { } #groupJumps { margin-left: -6px; margin-right: -6px; margin-top: 6px; height: 186px; } #groupJumps .box { width: 200px; height: 177px; float: left; padding: 9px 9px 0px 9px; } #groupJumps .box a { display: block; text-decoration: none; font-weight: normal; width: 200px; height: 177px; cursor: pointer; } #groupJumps .box .title { display: block; padding-bottom: 7px; } #groupJumps .box .content { display: block; padding: 0px 8px; } #groupJumps .usedCarSearch { background:url(../images/layup/groupSearchBox.gif) top left no-repeat; } #groupJumps .usedCarSearch form { } #groupJumps .usedCarSearch select { width:185px; border:1px solid #d0d0d0; padding:1px 0px; font-size: 1.0em; margin: 0px 0px 4px 8px; } #groupJumps .usedCarSearch .search { width: 74px !important; height: 25px; margin-top: 5px; float: left; margin-left: 8px; display: inline; } #groupJumps .usedCarSearch .search a { width: auto; height: auto; } #groupJumps .usedCarSearch .advanced { line-height: 120%; margin-top: 10px; margin-left: 22px; float: left; } #groupJumps .usedCarSearch .advanced a { color: #002080; text-decoration: none; font-weight: normal; width: auto; height: auto; } #groupJumps .usedCarSearch .advanced a:hover { text-decoration: underline; } #groupJumps .stockUpdates { background:url(../images/layup/groupStockBox.gif) top left no-repeat; } #groupJumps .dealerLocator { background:url(../images/layup/groupDealerBox.gif) top left no-repeat; } #groupJumps .dealerLocator .content { width: 100px; } #groupJumps .latestOffers { background:url(../images/layup/groupOffersBox.gif) top left no-repeat; } #groupJumps .latestOffers .content { width: 90px; } #mainContent {} #mainContent .padding { padding: 12px 0px 0px 0px; } #leftCol { float: left; width: 200px; border: 1px solid #e9e9e9; background: #fff; position: relative; min-height: 438px; margin-top: 8px; margin-right: 15px; margin-left: 8px; display: inline; } #leftCol #leftColT { position: absolute; top: -13px; } #leftCol #leftColL { position: absolute; top: -14px; left: -13px; } #leftCol #leftColR { position: absolute; top: -14px; right: -13px; } #leftCol .box { width: 194px; padding: 3px 3px 0px 3px; margin-bottom: 12px; background:url(../images/layup/divider.gif) bottom left no-repeat; } #leftCol .box a { display: block; text-decoration: none; font-weight: normal; width: 194px; cursor: pointer; padding-bottom: 12px; } #leftCol .box .title { display: block; padding-bottom: 7px; } #leftCol .box .content { display: block; padding: 0px 8px; } #leftCol .box .content .btn { display: block; padding-top: 15px; } #leftCol .box .clear { clear: both; display: block; } #leftCol .box a.favCar { float: left; display: block; height: 56px !important; width: 80px !important; padding: 0px 12px 12px 0px; } #leftCol .box a.lastItem { padding: 0px 0px 12px 0px; } #leftCol .box a.retrieveFavs { width: 85px !important; } #leftCol .usedCarSearch { padding-bottom: 12px; } #leftCol .usedCarSearch form { } #leftCol .usedCarSearch select { width:178px; border:1px solid #d0d0d0; padding:1px 0px; font-size: 1.0em; margin: 0px 0px 4px 8px; } #leftCol .usedCarSearch .search { width: 74px !important; height: 25px; margin-top: 5px; float: left; margin-left: 8px; display: inline; } #leftCol .usedCarSearch .search a { width: auto; height: auto; padding: 0; } #leftCol .usedCarSearch .advanced { line-height: 120%; margin-top: 10px; margin-left: 16px; float: left; } #leftCol .usedCarSearch .advanced a { color: #002080; text-decoration: none; font-weight: normal; width: auto; height: auto; padding: 0; } #leftCol .usedCarSearch .advanced a:hover { text-decoration: underline; } #rightCol { float: left; width: 635px; } #rightCol .cmsImage { float: right; width: 294px; height: 221px; background:url(../images/layup/noImage294x221.gif) top left no-repeat; margin: 0px 0px 10px 10px; border: 3px solid #d6d6d6; } /* ----- NEW CAR OPTIONS ----- */ #newCarOptions { float: right; width: 300px; clear: right; margin: 0px 0px 15px 15px;} #newCarOptions img { margin-bottom: 4px; } /* ----- DEALER DETAIL PAGE ----- */ #rightCol #dealerImagery { width: 635px; } #rightCol #dealerImagery #dealerMap { float: left; padding: 22px 0px 0px 21px; } #rightCol #dealerImagery #dealerLocationImage { float: left; padding: 22px 0px 0px 0px; } #rightCol #dealerLocation { font-size: 17px; font-weight: bold; padding: 5px 0px 0px 20px; } #rightCol #dealerDetails { float: left; padding: 0px 85px 0px 30px; } #rightCol #openingHours { float: left; padding: 0px 0px 0px 0px; } #rightCol #detailImages #internalImage { float: left; width: 337px; } #dealerImagery #dealerMap #mapDirections { padding: 6px 0px 0px 5px; color: #000; } /* ----- STYLES FOR CLIENT ----- */ #clientTable td { width: 170px; padding: 10px; border-right: 1px solid #000000; border-left: 1px solid #000000; } #clientTable td.spacer { width: 5px; border: none; } #clientTable td.noBorder { border: none; } #clientTable td.topBorder { border-top: 1px solid #000000; } #clientTable td.botBorder { border-bottom: 1px solid #000000; } /* ----- LIST ----- */ #list {} #list .listItem { float: left; background:url(../images/layup/dotsH.gif) bottom left repeat-x; } #list .listItem a { display: block; padding: 10px 0px 10px 0px; width: 634px; cursor: pointer; text-decoration: none; font-weight: normal; color: #000; } #list .listItem .title { display: block; font-weight: bold; font-size: 1.3em; width: 634px; height: 22px; } #list .listItem .thumb { position:relative; display: block; float: left; background:url(../images/layup/noImage152x114.gif) top left no-repeat; border: 3px solid #d6d6d6; width: 152px; height: 114px; margin-top: 3px; margin-right: 15px; } #list .listItem .thumb .offer { position:absolute; top:-5px; left:-5px; width:136px; height:80px; z-index:999999; } #list .listItem .description { display: block; float: left; width: 452px; } #list .listItem .description .scrappageOffer { float:left; margin-top:25px; } #list .listItem .btn { display: block; float: right; padding-top: 24px; } #list .listItem .btnLinks { display: block; width: 120px; float: right; } #list .listItem .btnLinks a { width: 120px !important; } #list .listItem .price { display: block; float: left; color: #ff0000; font-size: 1.1em; font-weight: bold; padding-top: 28px; } #list .listItem .clear { display: block; clear:both; } /* ----- BOX LIST ----- */ #boxList {} #boxList .box { float: left; margin-right: 5px; } #boxList .box a { display: block; width: 206px; cursor: pointer; text-decoration: none; font-weight: bold; margin-bottom: 15px; background:url(../images/layup/divider.gif) bottom center no-repeat;} #boxList .box .thumb { display: block; background:url(../images/layup/noImage200x150.gif) top left no-repeat; width: 200px; height: 150px; border: 3px solid #d6d6d6; } #boxList .box .title { display: block; padding: 7px 25px 0px 6px; height: 33px; background:url(../images/layup/iconArrow.gif) 185px 5px no-repeat; } /* ----- USED CAR DETAIL ----- */ #usedCarTitle { padding-bottom: 15px; } #usedCarTitle span { color: #000; font-weight: bold; } #usedCarPhoto { float: left; background: #fff url(../images/layup/noImage310x233.gif) top left no-repeat; width: 286px; height: 215px; margin-right: 2px; border: 3px solid #d6d6d6; position:relative; margin-bottom: 12px; } #usedCarThumbnails { float: right; width: 324px; } #usedCarThumbnails .thumb { float: left; background: #fff url(../images/layup/noImage100x75.gif) -4px -2px no-repeat; width: 94px; height: 71px; margin-right: 15px; margin-bottom: 12px; border: 2px solid #d6d6d6; } #usedCarThumbnails .last { margin-right: 0px; } #thumbPrinceInfo { width: 324px; height: 49px; background: url(../images/layup/usedDetailPriceBg.jpg) no-repeat; margin-bottom: 10px; } #thumbPrinceInfo #thumbPrice { color: #FFFFFF; float: left; font-size: 12px; padding: 8px 0px 0px 13px; } #thumbPrinceInfo #thumbCallInfo { color: #FFFFFF; float: right; font-size: 12px; padding: 8px 45px 0px 0px; text-align: center; } #thumbPrinceInfo #thumbPrice span { font-weight: bold; font-size: 16px; } #thumbPrinceInfo #thumbCallInfo span { font-weight: bold; font-size: 16px; } #printCarDetails { display: none; } #usedCarOptions { margin-top: 5px; } #usedCarOptions .btn { float: left; margin-right: 4px; } #usedCarOptions .btn.last { margin-right: 0px; margin-left: 1px;} #usedOptions { width:637px; height:42px; margin:5px 0 0; } #usedOptions a { height:42px; float:left; display:block; } #usedOptions a span { display:none; } #usedOptions a.enquire { width:126px; background:url(../images/layup/spriteUsedOptions.gif) no-repeat 0 0; margin:0 5px 0 0; } #usedOptions a.value { width:123px; background:url(../images/layup/spriteUsedOptions.gif) no-repeat -131px 0; margin:0 4px 0 0; } #usedOptions a.print { width:123px; background:url(../images/layup/spriteUsedOptions.gif) no-repeat -258px 0; margin:0 4px 0 0; } #usedOptions a.add { width:123px; background:url(../images/layup/spriteUsedOptions.gif) no-repeat -385px 0; margin:0 5px 0 0; } #usedOptions a.send { width:124px; background:url(../images/layup/spriteUsedOptions.gif) no-repeat -513px 0; } #usedOptions a.enquire:hover { background:url(../images/layup/spriteUsedOptions.gif) no-repeat 0 -42px; } #usedOptions a.value:hover { background:url(../images/layup/spriteUsedOptions.gif) no-repeat -131px -42px; } #usedOptions a.print:hover { background:url(../images/layup/spriteUsedOptions.gif) no-repeat -258px -42px; } #usedOptions a.add:hover { background:url(../images/layup/spriteUsedOptions.gif) no-repeat -385px -42px; } #usedOptions a.send:hover { background:url(../images/layup/spriteUsedOptions.gif) no-repeat -513px -42px; } #modelTitlePrice { font-size: 1.3em; font-weight: bold; } #modelTitlePrice .model { float: left; padding: 14px 0px 14px 20px; } #modelTitlePrice .price { float: right; padding: 14px 20px 14px 0px; } #similarVehicles { margin-top: 19px; margin-right: 18px; width: 365px; float: left; } #similarVehicles .tab { padding: 0px 0px 1px 0px; margin: 0; list-style: none; background:url(../images/layup/dotsAlt.gif) bottom left repeat-x; height: 28px; width: 365px; } #similarVehicles .tab li { float:left; font-size: 1.1em; display: inline; font-weight: bold; background: #000; color: #fff; float: left; cursor: default; padding: 7px 17px 7px 17px; } #similarVehicles .box { float: left; width: 178px; margin-right: 3px; margin-top: 4px; } #similarVehicles .box a { display: block; cursor: pointer; text-decoration: none; width: 174px; font-weight: normal; margin-bottom: 15px; color: #000; } #similarVehicles .box .thumb { display: block; background:url(../images/layup/noImage174x131.gif) top left no-repeat; width: 174px; height: 131px; border: 2px solid #d6d6d6; } #similarVehicles .box .title { display: block; font-weight: bold; padding: 7px 0px 5px 5px; background:url(../images/layup/iconArrow.gif) right 5px no-repeat; } #similarVehicles .box .detail { display: block; padding: 0px 0px 0px 5px; } #mainContent .offer { position:absolute; top:-5px; left:-5px; width:136px; height:80px; z-index:999999; } /* ----- DOMTABS ----- */ #usedVehicleSpec { float: left; } #usedVehicleSpec .domtab { } #usedVehicleSpec .tabset_print { display: none;} #usedVehicleSpec .tabset_tabs { height: 28px; width: 634px; margin:0px; padding:0px 0px 1px 0px; list-style:none; background:url(../images/layup/dotsAlt.gif) bottom left repeat-x; } #usedVehicleSpec .tabset_tabs li { list-style: none; display: inline; padding: 0px; float:left; margin-right: 2px; font-size: 1.1em; } #usedVehicleSpec .tabset_tabs a { display: inline; background: #6d6d6d; color: #fff; font-weight: bold; float: left; cursor: pointer !important; padding: 7px 17px 7px 17px; margin: 0px; text-decoration: none; } #usedVehicleSpec .tabset_tabs a:hover { font-weight: bold; background: #000 !important; } #usedVehicleSpec .tabset_tabs .active a { background: #000; } #usedVehicleSpec .trAlt { background:#f2f2f2 !important; } #usedVehicleSpec .tabset_content { background:url(../images/layup/dotsAlt.gif) bottom left repeat-x; padding-bottom: 1px } #usedVehicleSpec .tabset_content h1 { color: #000; padding: 0px; } #usedVehicleSpec .tabset_content table { margin-top: 4px; } #usedVehicleSpec .tabset_content td { height: 24px; padding: 0px; } #financeCalculator { float: left; margin-top: 19px; } #financeCalculator .tab { padding: 0px 0px 1px 0px; margin: 0; list-style: none; background:url(../images/layup/dotsAlt.gif) bottom left repeat-x; height: 28px; width: 251px; } #financeCalculator .tab li { float:left; font-size: 1.1em;display: inline; font-weight: bold; background: #000; color: #fff; float: left; cursor: default; padding: 7px 17px 7px 17px; } #financeCalculator .trAlt { background:#e6ecdf !important; } #financeCalculator .tabset_content { } #financeCalculator .tabset_content table { margin-top: 4px; } #financeCalculator .tabset_content td { height: 26px; padding: 0px; } #financeCalculator .tabset_content form { } #financeCalculator .tabset_content select { width: 70px; } #financeCalculator .tabset_content input { width: 67px; } #financeCalculator .apr { font-weight: bold; font-size: 1.5em; } #financeCalculator .terms { background:url(../images/layup/iconArrow.gif) top right no-repeat; padding-right: 80px; } /* ----- CLASSES ----- */ .clear { clear:both; } .hide { display:none; } .show { display:block; } .printShow { 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; padding:0 0 15px 15px; } .image_left { float:left; padding:0 15px 15px 0; } .image_center { margin:0 auto;} .hand { cursor:pointer;} .divider { background:url(../images/layup/dotsAlt.gif) top left repeat-x; padding-bottom: 1px; } /* ----- HEADINGS & PARAGRAPHS ----- */ h1, h2, h3, h4, h5, h6 { margin:0; padding:0 0 12px 0; font-size:100%; font-weight:bold;} h1 { font-size: 1.5em; } /* ----- TOP NAVIGATION ----- */ #primaryNav { background:url(../images/layup/navBg.gif) top left no-repeat; height: 36px; margin: 0px 0px 10px 0px; line-height: 120%; } #primaryNav ul { list-style: none; margin: 0px 0px 0px 54px; padding: 0; } #primaryNav li { float: left; font-size: 11px; background:url(../images/layup/navDivider.gif) right 7px no-repeat; padding-right: 2px; } #primaryNav li.last { background: none; } #primaryNav li a { display: block; float: left; text-decoration: none; color: #fff; padding: 10px 15px 13px 17px; } #primaryNav li a:hover { background:url(../images/layup/navArrow.gif) bottom center no-repeat; color: #ccc; } #primaryNav li .active { background:url(../images/layup/navArrow.gif) bottom center no-repeat; color: #ccc; } /* ----- 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: url(../images/layup/dotsH.gif) bottom left repeat-x; padding: 6px 0px 4px 0px; margin-bottom: 0px; } #breadcrumbs { float: left; } #breadcrumbs a { font-weight: normal; text-decoration: none; color: #000 !important; } #breadcrumbs a:hover { text-decoration: underline; } #breadcrumbs .active { font-weight: normal; color: #000; } #back { float: right; } #back a { text-decoration: none; font-weight: bold; padding: 0px !important; margin: 0 !important; } #back a:hover { text-decoration: underline; } #searchInfo { background: url(../images/layup/dotsH.gif) bottom left repeat-x; padding: 0px 0px 5px 0px; margin-top: 5px; } #searchInfoBottom { padding: 5px 0px 20px 0px; } .searchResults { float: left; font-weight: bold; background:url(../images/layup/iconMagnify.gif) 0px 3px no-repeat; padding-left: 24px; padding-top: 3px; } .sortBy { float: right; margin-right: 10px; } .sortBy label { width: 50px; font-weight: bold; margin-top: 3px; } .sortBy select { height: 20px; } .pagination { float: right; } .pagination a { padding: 0px 4px 0px 4px; text-decoration: none; font-weight: normal; } .pagination a:hover { text-decoration: none; background:#000; color:#FFFFFF; font-weight: bold; } .pagination .active { text-decoration: none; background:#000; color:#FFFFFF; font-weight: bold; } .pagination .prev { padding: 0px 2px 0px 0px; } .pagination .next { padding: 0px 0px 0px 2px; } .pagination .prev:hover, .pagination .next:hover { background: none; } .pagination .prev img { display: inline; position: relative; top: 3px; } .pagination .next img { display: inline; position: relative; top: 3px; } .searchInfo .clear { height: 0; font-size: 0; } /* ----- FOOTER ----- */ #footer { background: #fff url(../images/layup/dotsH.gif) top left repeat-x; margin: 15px 18px 5px 18px; } #footer .padding { padding: 10px 0px 0px 0px; } #footer a { font-weight:normal; text-decoration:none; background: none; } #footer a:hover { text-decoration:underline; background: none; } /* ----- GLOBAL ----- */ img { display:block; border:0; } p { padding:0 0 15px 0; margin:0; } address { font-style:normal;} /* ----- LINKS ----- */ a { color:#000000; font-weight:bold; text-decoration:underline; } a:hover { text-decoration:none; } /* ----- FORMS ----- */ form { padding:0; margin:0; } fieldset { padding:0; margin:0; border:0px none; display:inline; } legend { padding:0; margin:0; display:none; } label { display:block; width:260px; float:left; } input, textarea { width:200px; font-size:11px !important;} .requiredLabel { color:#002080;} .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;} #btnSubmit { width:71px; height:25px; 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 #002080; 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: #002080; color : #FFF; font-weight: bold; } /* ----- TABLES ----- */ table { border-collapse:collapse; } table p { padding:0px; } .vehicleInfoLabel { font-weight:bold; padding-left: 17px; padding-right: 6px; width:125px; } .vehicleInfoText { padding-right: 7px; padding-left: 3px; }