/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Title : Author : Chris Munn / chris.munn@gforces.co.uk / G-Forces Web Management Ltd Type: Screen, Projection Description : Screen and projection stylesheet for Caffyns Contract Hire site - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* COMMON AND GLOBAL */ html { height: 100%; } body { height: 100%; font:62.5%/1.6 verdana, arial, helvetica, sans-serif; margin:0; padding:0; background:#ffffff url(../images/layup/bodyBg.jpg) top center no-repeat; color:#000000; text-align:center; } /* This font sizing is for standards based browsers (firefox, opera, mozilla) that can re-size text. Declaring the font size in pixels makes it more consistent across browsers. */ td, textarea, input, select { font:100% arial, verdana, helvetica, sans-serif; } html>body td, html>body textarea, html>body input, html>body select { font-size:11px; } /* some browsers don't inherit the font into tables or textareas! */ /* ----- IDS ----- */ #container { min-height: 100%; width:960px; margin:0 auto; text-align:left; font-size:110%; line-height: normal; } * html #container{ height: 100%; } #printHeader { display:none;} #header { height: 100px; position: relative; height: 226px; background: url(../images/layup/headerBg.jpg) repeat-x; } #header #logo { position: absolute; top: 0px; left: 0px; } #header #navShadow { position: absolute; left: 0px; top: 255px; } #header #headerForm { width: 516px; height: 138px; background: url(../images/layup/headerFormBg.gif) no-repeat; position: absolute; top: 10px; right: 18px; } #header #headerForm form { padding: 10px 0px 0px 300px; font-weight: bold; color: #FFF; font-size: 12px; } #header #headerForm form label { width: 42px; margin-right: 14px; text-align: right; } #header #headerForm form input { width: 136px; } #header #headerForm form div { margin-bottom: 5px; } #header #headerForm form select.frmSelect { float: left; } #header #headerForm form select.frmSelect.end { float: right; margin-right: 20px; } #header #headerForm form input#btnCallBack { width: 100px; height: 27px; float: right; margin-right: 20px; margin-top: 8px; } #header #franchiseJumps { position: absolute; top: 146px; left: 7px; } #header #franchiseJumps a { display: block; float: left; width: 65px; height: 58px; margin: 23px 10px 0px 10px; padding: 0px; } #header #franchiseJumps a#jmpAudi { background: url(../images/layup/spriteFranchiseJumps.gif) 0px 0px no-repeat; } #header #franchiseJumps a#jmpChevrolet { background: url(../images/layup/spriteFranchiseJumps.gif) -65px 0px no-repeat; } #header #franchiseJumps a#jmpCitroen { background: url(../images/layup/spriteFranchiseJumps.gif) -130px 0px no-repeat; } #header #franchiseJumps a#jmpFord { background: url(../images/layup/spriteFranchiseJumps.gif) -195px 0px no-repeat; } #header #franchiseJumps a#jmpJaguar { background: url(../images/layup/spriteFranchiseJumps.gif) -260px 0px no-repeat; } #header #franchiseJumps a#jmpLandRover { background: url(../images/layup/spriteFranchiseJumps.gif) -325px 0px no-repeat; } #header #franchiseJumps a#jmpNissan { background: url(../images/layup/spriteFranchiseJumps.gif) -390px 0px no-repeat; } #header #franchiseJumps a#jmpPeugeot { background: url(../images/layup/spriteFranchiseJumps.gif) -455px 0px no-repeat; } #header #franchiseJumps a#jmpSkoda { background: url(../images/layup/spriteFranchiseJumps.gif) -520px 0px no-repeat; } #header #franchiseJumps a#jmpVauxhall { background: url(../images/layup/spriteFranchiseJumps.gif) -585px 0px no-repeat; } #header #franchiseJumps a#jmpVolkswagen { background: url(../images/layup/spriteFranchiseJumps.gif) -650px 0px no-repeat; } #header #franchiseJumps a#jmpVolvo { background: url(../images/layup/spriteFranchiseJumps.gif) -715px 0px no-repeat; } #header #franchiseJumps a#jmpAll { background: url(../images/layup/spriteFranchiseJumps.gif) -780px 0px no-repeat; } #header #franchiseJumps a#jmpAudi:hover { background: url(../images/layup/spriteFranchiseJumps.gif) 0px -58px no-repeat; } #header #franchiseJumps a#jmpAudi.active { background: url(../images/layup/spriteFranchiseJumps.gif) 0px -116px no-repeat !important; } #header #franchiseJumps a#jmpChevrolet:hover { background: url(../images/layup/spriteFranchiseJumps.gif) -65px -58px no-repeat; } #header #franchiseJumps a#jmpChevrolet.active { background: url(../images/layup/spriteFranchiseJumps.gif) -65px -116px no-repeat !important; } #header #franchiseJumps a#jmpCitroen:hover { background: url(../images/layup/spriteFranchiseJumps.gif) -130px -58px no-repeat; } #header #franchiseJumps a#jmpCitroen.active { background: url(../images/layup/spriteFranchiseJumps.gif) -130px -116px no-repeat !important; } #header #franchiseJumps a#jmpFord:hover { background: url(../images/layup/spriteFranchiseJumps.gif) -195px -58px no-repeat; } #header #franchiseJumps a#jmpFord.active { background: url(../images/layup/spriteFranchiseJumps.gif) -195px -116px no-repeat !important; } #header #franchiseJumps a#jmpJaguar:hover { background: url(../images/layup/spriteFranchiseJumps.gif) -260px -58px no-repeat; } #header #franchiseJumps a#jmpJaguar.active { background: url(../images/layup/spriteFranchiseJumps.gif) -260px -116px no-repeat !important; } #header #franchiseJumps a#jmpLandRover:hover { background: url(../images/layup/spriteFranchiseJumps.gif) -325px -58px no-repeat; } #header #franchiseJumps a#jmpLandRover.active { background: url(../images/layup/spriteFranchiseJumps.gif) -325px -116px no-repeat !important; } #header #franchiseJumps a#jmpNissan:hover { background: url(../images/layup/spriteFranchiseJumps.gif) -390px -58px no-repeat; } #header #franchiseJumps a#jmpNissan.active { background: url(../images/layup/spriteFranchiseJumps.gif) -390px -116px no-repeat !important; } #header #franchiseJumps a#jmpPeugeot:hover { background: url(../images/layup/spriteFranchiseJumps.gif) -455px -58px no-repeat; } #header #franchiseJumps a#jmpPeugeot.active { background: url(../images/layup/spriteFranchiseJumps.gif) -455px -116px no-repeat !important; } #header #franchiseJumps a#jmpSkoda:hover { background: url(../images/layup/spriteFranchiseJumps.gif) -520px -58px no-repeat; } #header #franchiseJumps a#jmpSkoda.active { background: url(../images/layup/spriteFranchiseJumps.gif) -520px -116px no-repeat !important; } #header #franchiseJumps a#jmpVauxhall:hover { background: url(../images/layup/spriteFranchiseJumps.gif) -585px -58px no-repeat; } #header #franchiseJumps a#jmpVauxhall.active { background: url(../images/layup/spriteFranchiseJumps.gif) -585px -116px no-repeat !important; } #header #franchiseJumps a#jmpVolkswagen:hover { background: url(../images/layup/spriteFranchiseJumps.gif) -650px -58px no-repeat; } #header #franchiseJumps a#jmpVolkswagen.active { background: url(../images/layup/spriteFranchiseJumps.gif) -650px -116px no-repeat !important; } #header #franchiseJumps a#jmpVolvo:hover { background: url(../images/layup/spriteFranchiseJumps.gif) -715px -58px no-repeat; } #header #franchiseJumps a#jmpVolvo.active { background: url(../images/layup/spriteFranchiseJumps.gif) -715px -116px no-repeat !important; } #header #franchiseJumps a#jmpAll:hover { background: url(../images/layup/spriteFranchiseJumps.gif) -780px -58px no-repeat; } #header #franchiseJumps a#jmpAll.active { background: url(../images/layup/spriteFranchiseJumps.gif) -780px -116px no-repeat !important; } /* ----- RIGHT COLUMN ----- */ #rightCol { float: right; width: 701px; background:#FFF url(../images/layup/rightColBg.gif) no-repeat top left; } #rightCol .padding { padding: 3px; } #rightCol .heading { width: 695px; background:#9da4a8 url(../images/layup/titleBg.jpg) no-repeat; font-size: 20px; color: #000000; margin-bottom: 20px; } #rightCol .heading span { display: block; padding: 12px 0px 16px 15px; } #rightCol .heading img { padding: 5px 6px 0px 0px; } #rightCol .headingSmall { font-size: 17px; width: 695px; background:#b6bfc3 url(../images/layup/titleBgSmall.jpg) no-repeat top left; margin-bottom: 10px; } #rightCol .headingSmall span { display: block; padding: 7px 20px 9px 20px; } #rightCol #mainContent { padding: 10px 20px 20px 20px; } #rightCol #mainContent2 { padding: 10px 0px 20px 0px; } #rightCol .headingFranchise { width: 695px; background:#525455 url(../images/layup/titleBgFranchise.jpg) no-repeat; font-size: 17px; color: #FFFFFF; margin-bottom: 4px; } #rightCol .headingFranchise span { display: block; padding: 17px 0px 15px 15px; } #rightCol .headingFranchise img { padding: 5px 6px 0px 10px; } #rightCol #map { float: right; width: 327 px; height: 283px; margin: 0px 0px 15px 15px; } /* ----- LEFT COLUMN ----- */ #leftCol { float: left; width: 234px; } #leftCol .box { width: 234px; height: 295px; position: relative; margin-bottom: 20px; } #leftCol .box.quote { padding-bottom:10px; height:auto; background: url(../images/layup/quoteBoxBg.jpg) no-repeat top left; margin-bottom:0px; } #leftCol .quoteBottom { margin-bottom:20px; padding-left:3px; } #leftCol .box.quote #handPng { position: absolute; top: 126px; left: 0px; z-index: 1; } #leftCol .box.quote form { position: relative; z-index: 2; padding: 60px 0px 0px 24px; } #leftCol .box.quote form label { width: 45px; float: left; text-align: right; margin-right: 12px; color: #FFFFFF; font-size:12px; font-weight:bold; } #leftCol .box.quote form input { width: 130px; } #leftCol .box.quote form select { width: 134px; } #leftCol .box.quote form div { margin-bottom: 5px; float:left; } #leftCol .box.quote form textarea { width: 130px; height: 42px; color: #b7b7b7; } #leftCol .box.quote form input#btnSendQuote { width: 100px; height: 27px; margin-top: 2px; } #leftCol .box.offers form { padding: 55px 0px 0px 24px; } #leftCol .box.offers form label { width: 45px; float: left; text-align: right; margin-right: 12px; color: #FFFFFF; font-size:12px; font-weight:bold; } #leftCol .box.offers form input { width: 130px; } #leftCol .box.offers form select { width: 134px; } #leftCol .box.offers form div { margin-bottom: 5px; } #leftCol .box.offers { height: 199px; background: url(../images/layup/offerBoxBg.jpg) no-repeat top left; } #leftCol .box.offers form input#btnSearchOffers { width: 100px; height: 27px; margin-top: 10px; } /* ----- HOME PAGE BANNER TABS ----- */ #rightCol #mainFlash { height: 271px; position: relative; } #rightCol #mainFlash #tab1 { } #rightCol #mainFlash #tab2 { display: none; } #rightCol #mainFlash #tab3 { display: none; } #rightCol #mainFlash #tab4 { display: none; } #rightCol #mainFlash #theHomeTabs { width: 13px; height: 175px; position: absolute; top: 0px; right: 1px; z-index: 999; } #rightCol #mainFlash #theHomeTabs a { color: #FFF; text-decoration: none; font-weight: bold; margin-top: 4px; display: block; width: 13px; background: url(../images/layup/homeTabGrey.gif) no-repeat; height: 39px; } #rightCol #mainFlash #theHomeTabs a span { display: block; padding: 12px 0px 0px 3px; } #rightCol #mainFlash #theHomeTabs a:hover, #rightCol #mainFlash #theHomeTabs a.active { background: url(../images/layup/homeTabBlack.gif) no-repeat; } #rightCol #mainFlash #theHomeBanners { padding: 0px 0px 0px 2px; } #rightCol #mainFlash .homeBannerFrame { position: absolute; top: -2px; left: 0px; z-index: 1; } /* ----- CMS IMAGE ----- */ .internalImage { float: right; margin: 0px 0px 4px 15px; } /* ----- BOX LIST ----- */ #boxList { margin-bottom: 25px; } #boxList .box { width: 172px; float: left; margin-top: 8px; padding-top: 8px; background: url(../images/layup/boxListItemFoot.gif) left top no-repeat; } #boxList .box.top { background: none; margin-top: 0px; padding-top: 0px; } #boxList .box a { display: block; font-weight: normal; text-decoration: none; border-right: 1px solid #eef0f1; } #boxList .box.last a { border-right: none; } #boxList .box .title { font-size: 16px; text-align: center; display: block; padding-top: 5px; } #boxList .box .title span { font-size: 11px; font-weight: bold; display: block; padding-top: 3px; } #boxList .box .thumb { display: block; margin: 0px auto 0px; text-align: center; width: 112px; } #boxList .box .price { text-align: center; display: block; font-size: 16px; color: #fa0d0d; padding-bottom: 4px; } #boxList .box .info { text-align: center; display: block; padding-bottom: 8px; } #boxList .box .btn { text-align: center; display: block; margin: 0px auto 0px; width: 100px; padding-bottom: 10px; } #boxListFoot { margin: 0px auto 0px; text-align: center; width: 473px; margin-bottom: 35px; } #boxList .tabsPagination { padding: 7px 10px 9px; width: 675px; height: 20px; background:#B6BFC3 url(../images/layup/titleBgSmall.jpg) no-repeat; font-size: 17px; color: #000000; margin: 0px 0px 10px 0px; } #boxList .domtabs { list-style: none; padding: 0; margin: 0; float: right; font-size: 12px; } #boxList .domtabs li { float: left; padding-top: 3px; } #boxList .domtabs li a { margin: 0px 0px 0px 5px; padding: 0px 3px 2px 3px; text-decoration: none; float: left; } #boxList .domtabs li a:hover { text-decoration: underline; } #boxList .domtabs li.active a { border: 1px solid #377EA9; background: #ebedef; } .sortOptions { padding: 7px 20px 9px; width: 653px; height: 20px; background:#B6BFC3 url(../images/layup/titleBgSmall.jpg) 0px -18px no-repeat; font-size: 17px; color: #000000; margin: 0px 0px 10px 0px; border: 1px solid #aaaaaa; } /* ----- GLOBAL CLASSES ----- */ .clear { clear:both; display: block; } .clearSmall { clear: both; display: block; height: 0; line-height: 0; font-size: 0; } .hide { display:none; } .show { display:block; } .printShow { display:none; } .printHide { display:block; } .float_left { float:left !important; } .float_right { float:right !important; } .align_left { text-align:left !important; } .align_center { text-align:center !important; } .align_right { text-align:right !important; } .align_justify { text-align:justify !important; } .align_bottom { vertical-align:bottom !important; } .image_right { float:right; margin:0 0 15px 15px; } .image_left { float:left; margin:0 15px 15px 0; } .image_center { margin:0 auto; } .hand { cursor:pointer; } .seo {text-decoration:none;font-weight:normal;} .ieLinkFix { background: url(../images/layup/ie6LinkFix.gif); } /* ----- HEADINGS & PARAGRAPHS ----- */ h1, h2, h3, h4, h5, h6 { margin:0; padding:0 0 15px 0; font-size:100%; font-weight:bold;} h1 { font-size: 14px; color: #ee7905; font-weight: normal; } h2 { font-size: 14px; color: #ee7905; font-weight: normal; } /* ----- TOP NAVIGATION ----- */ #primaryNav { margin: 0px 0px 0px 0px; height: 29px; background: url(../images/layup/primaryNavBg.jpg) no-repeat; } #primaryNav ul { list-style: none; margin: 0px; padding: 0px; height: 29px; } #primaryNav li { padding: 0px; margin: 0px; float: left; background: url(../images/layup/primaryNavSeperator.gif) top right no-repeat; } #primaryNav li a { display: block; padding: 6px 25px 6px 25px; text-decoration: none; color: #000000; font-size: 14px; font-weight: normal; margin-right: 2px; } #primaryNav li a:hover, #primaryNav li.active a { color: #FFF; background: url(../images/layup/primaryNavActive.gif) repeat-x top left; } #primaryNav li a.firstItem:hover, #primaryNav li.active a.firstItem { color: #FFF; background: url(../images/layup/primaryNavActiveFirst.gif) no-repeat top left; } /* ----- SECONDARY NAVIGATION ----- */ #secondaryNav { float: right; clear: right; width: 348px; margin: 0px 0px 10px 15px; } #secondaryNav ul { list-style: none; margin: 0; padding: 0; width: 348px; float: left; } #secondaryNav li { background: #fcdfb2; margin-bottom: 4px; padding: 0px; width: 348px; float: left; } #secondaryNav li a { font-size: 14px; font-weight: normal; text-decoration: none; display: block; padding: 7px 20px 7px 20px; } /* ----- DROPDOWN NAV ----- */ #primaryNav ul li ul { left: -999em; position: absolute; } #primaryNav ul li:hover ul, #primaryNav ul li.sfhover ul { left: auto; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; display: block; width: 200px; } #primaryNav ul li:hover ul li, #primaryNav ul li.sfhover ul li { display: block; padding: 4px 0px 0px 0px; margin: 0px; background: #ececec; width: 200px; height: 20px; border-bottom: 1px solid #CFCFCF; border-left: 1px solid #CFCFCF; border-right: 1px solid #CFCFCF; } #primaryNav ul li:hover ul li a, #primaryNav ul li.sfhover ul li a { padding: 0px 5px 5px 10px; margin: 0px; color: #666666; } #primaryNav ul li:hover ul li a:hover, #primaryNav ul li.sfhover ul li a:hover { padding: 0px 5px 5px 10px; margin: 0px; color: #000; } /* ----- SITE MAP ----- */ #sitemap { list-style:none; margin:0 0 0 5px; padding:0;} #sitemap ul { list-style:none; margin:10px 0 0px 15px; padding:0;} #sitemap li { background:url(../images/layup/bulletSitemap.gif) 0px 11px no-repeat; padding:6px 0 5px 15px;} /* ----- BREADCRUMBS/PAGINATION/PAGE TOP AND BOTTOMS ----- */ #breadcrumbs { height: 20px; text-align: right; color: #5c6b75; font-size: 10px; } #breadcrumbs .padding { padding: 3px 18px 0px 0px; } #breadcrumbs a { color: #5c6b75; font-size: 10px; text-decoration: none; font-weight: normal; } #breadcrumbs a:hover { text-decoration: underline; } /* ----- FOOTER ----- */ #footer { margin: -158px 0px 0px 0px; padding:0; color:#FFFFFF; text-align:center; background: #919ca1; } #footer .padding { width: 960px; margin:0 auto; text-align: left; font-size:110%; line-height: normal; padding: 20px 0px 0px 0px; } #footer a { font-weight:normal; text-decoration:none; color:#FFFFFF; } #footer a:hover { text-decoration:underline;} /* ----- 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;cursor:pointer; } #rightCol a { color: #377ea9; text-decoration: underline; font-weight: normal; } a:hover { text-decoration:none; } #rightCol 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;} #contactForm .headingSmall { margin-bottom: 0px; } #contactForm form { padding: 22px; border: 1px solid #b7c0c4; } #contactForm form fieldset { padding: 20px 0px 0px 0px; background: url(../images/layup/fieldsetBg.gif) repeat-y; } #contactForm form label { text-align: right; width: 150px; margin-right: 30px; } #contactForm form input { width: 300px; } #contactForm form select { width: 304px; } #contactForm form textarea { width: 300px; height: 65px; } #contactForm form input#btnSubmit { width: 113px; height: 27px; 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 #f29312; color : #FF3300; } input.validation-passed, textarea.validation-passed, select.validation-passed { border: 1px solid #00CC00; color : #000; } .validation-advice { margin: 5px 0 5px 180px; width:auto ; padding: 5px; background-color: #f29312; color : #000; font-weight: bold; text-align: left; } #contactForm .validation-advice{ width:292px !important;} #leftCol .box.quote .validation-advice{ width:180px !important; background:none; margin-left:0px; } /* ----- TABLES ----- */ table { border-collapse:collapse; } table p { padding:0px; } #homeBanner { width:694px; height:252px; position:relative; margin-left:1px; } #homeBanner #homeBannerContainer { width:677px; height:252px; overflow:hidden; } #homeBanner #homeBannerContainer .banner { height:1512px; } #homeBanner #homeBannerControls { position:absolute; left:677px; top:0px; background:url(../images/layup/homeBannerControlsBg.gif) no-repeat left top; width:17px; height:252px; } #homeBanner #homeBannerControls ul { margin:7px 0 0 0px; padding:0px; } #homeBanner #homeBannerControls ul li { margin:0px; padding:0px; list-style:none; margin:0 0 4px 4px; } #homeBanner #homeBannerControls ul li a { padding:10px 0 0 3px; margin:0px; display:block; width:10px; height:26px; background:url(../images/layup/homeBannerControlSprite.gif) no-repeat 0 0; text-decoration:none; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:11px; } #homeBanner #homeBannerControls ul li a:hover, #homeBanner #homeBannerControls ul li a.active { background-position:0 -36px; }