/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Title : Author CSS : Chris Munn / chris.munn@gforces.co.uk / G-Forces Web Management Ltd Author PHP: Marlon King /marlon.king@gforces.co.uk / G-Forces Web Management Ltd Type: Screen, Projection Description : Screen and projection stylesheet Alternative Route Finance site - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* COMMON AND GLOBAL */ body { font:62.5%/1.6 arial, verdana, helvetica, sans-serif; margin:0; padding:0; background:#ffffff; 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! */ object { display: block; padding: 2px; } /* ----- IDS ----- */ #outer { width: 100%; height: 100%; background: url(../images/layup/bodyBgInternal.jpg) top left repeat-x; min-height: 535px; } #container { width:960px; margin:0 auto; text-align:left; font-size:120%; } #customerLogin { width:960px; margin:0 auto; text-align:left; font-size:110%; } #supplierLoginBox {margin:10px 50px 10px 50px;} #customerLoginBox {margin:10px;} #printHeader { display:none;} #header { position: relative; height: 80px; } #header #logo { position: absolute; top: 0px; left: 0px; } #header #contactDetails { position: absolute; right: 20px; bottom: 13px; } #header #login { position: absolute; top: 0px; right: 0px; } #homeJumps { padding: 20px 20px 0px 20px; height: 241px; } #homeJumps #homeVideo { border: 2px solid #FFFFFF; float: left; } #homeJumps .jumpPoint { width: 249px; float: right; padding: 0px 0px 6px 13px; } #homeJumps .jumpPoint a { display: block; cursor: pointer; text-decoration: none; font-weight: normal; font-size: 11px; color: #FFF; } #homeJumps .jumpPoint span { display: block; } #homeJumps .jumpPoint .itemImg { border: 2px solid #FFF; float: left; } #homeJumps .jumpPoint .itemDetails { float: right; width: 140px; line-height: 14px; } #homeJumps .jumpPoint .itemHeading { padding: 0px 0px 5px 0px; } #mainContent { background:#FFF url(../images/layup/mainContentBg.jpg) no-repeat top; min-height: 220px; position: relative; padding: 10px 20px 15px 20px; } .internalContent { padding-left: 0px !important; padding-top: 0px !important; } .internalContent #leftShadow .position { top: 0px !important; left: -8px !important; } .internalContent #rightShadow .position { top: 0px !important; left: 960px !important; } #mainContent #leftShadow, #mainContent #rightShadow { position: relative; } #mainContent #leftShadow .position { background: url(../images/layup/mainContentLeftShadow.jpg) no-repeat; height: 161px; width: 8px; position: absolute; top: -10px; left: -28px; } #mainContent #rightShadow .position { background: url(../images/layup/mainContentRightShadow.jpg) no-repeat; height: 161px; width: 8px; position: absolute; top: -10px; left: 940px; } #mainContent #leftShadowFoot .position { background: url(../images/layup/leftShadowFoot.jpg) no-repeat; height: 75px; width: 14px; position: absolute; bottom: 0px; left: -14px; } #mainContent #rightShadowFoot .position { background: url(../images/layup/rightShadowFoot.jpg) no-repeat; height: 75px; width: 14px; position: absolute; bottom: 0px; left: 960px; } #leftCol { float: left; width: 234px; background: url(../images/layup/leftColBg.gif) no-repeat top; } #leftCol .padding { padding: 0px; background: url(../images/layup/leftColBgFoot.gif) no-repeat bottom; padding: 15px 0px 20px 35px; min-height: 360px; } #leftCol #vehicleSearch { position: relative; height: 85px; } #leftCol #vehicleSearch .position { position: absolute; top: 0px; left: -23px; width: 222px; height: 78px; background: url(../images/layup/searchBg.gif) no-repeat; } #leftCol #vehicleSearch form { padding: 43px 0px 0px 20px; } #leftCol #vehicleSearch form #searchMakeModel { width: 110px; float: left; } #leftCol #vehicleSearch form #btnSearch { width: 60px; height: 18px; float: left; margin: 1px 0px 0px 8px; } /* ------- LEFT COL CALLOUTS ------- */ #leftCol .callOuts {} #leftCol .callOuts .callOutQuote {padding:15px 0;} #leftCol .callOuts .callOutCallBack {padding:0 0 15px;} #offersSplitJumps {padding:0 0 15px;width:683px;margin:0 auto;} #offersSplitJumps .carsJump {width:342px;height:237px;float:left;} #offersSplitJumps .vansJump {width:341px;height:237px;float:left;} #rightCol { float: right; width: 695px; padding-top: 15px; } #rightCol .padding { padding: 0px 0px 0px 0px; } #rightCol #homeOffers { width: 391px; height: 180px; background: url(../images/layup/homeOfferBg.jpg) no-repeat; } #rightCol #homeOffers .padding { padding: 11px 30px 0px 30px; } #rightCol #homeOffers .itemImage { float: left; border: 1px solid #b1b1b1; margin-right: 8px; } #rightCol #homeOffers .itemImage img { padding: 2px; } #rightCol #homeOffers .itemDetails { float: left; width: 198px; } #rightCol #homeOffers .itemHeading { font-weight: bold; font-size: 12px; } #rightCol #homeOffers .viewItem { width: 145px; display: block; float: right; } #rightCol #homeOffers .viewItem a { text-decoration: none; float: right; } #rightCol #homeOffers h1 { margin-bottom: 4px; padding-bottom: 0px; } #rightCol #homeOffers #btns, #rightCol #homeOffers #btns a { display: block; float: left; padding-right: 10px; padding-top: 5px; } #rightCol #tblOfferList { width: 695px; } #rightCol #tblOfferList td { border: 1px solid #FFF; border-top: none; border-right: none; background: url(../images/layup/tableTdBg.gif) repeat-x; font-size: 12px; font-weight: bold; color: #333333; padding: 5px 0px 5px 20px; } #rightCol #tblOfferList td.redBg { background: url(../images/layup/tableTdBgRed.gif) repeat-x; color: #FFF; } #rightCol #tblOfferList th.tableTop { background: url(../images/layup/offerTableTop.gif) repeat-x bottom; border-left: 1px solid #FFF; } #rightCol #tblOfferList tfoot td { background: none; } #rightCol #tblOfferList td.tableBottom { background: url(../images/layup/offerTableBottom.gif) repeat-x top; border-left: 1px solid #FFF; } #rightCol #tblOfferList tr.lastItem td { border-bottom: 0px; } #rightCol #detailTables #tblCarDetails { width:149px; float: left; margin-right: 2px; } #rightCol #detailTables #tblCarDetails td { background: url(../images/layup/tableTdBg.gif) repeat-x; padding: 5px 8px 5px 8px; color: #333333; border-right: 1px solid #FFF; font-size: 0.9em; } #rightCol #detailTables #tblCarDetails thead th { background: #6f6f6f; color: #FFF; font-size: 16px; font-weight: bold; padding: 5px 10px; border-bottom: 1px solid #FFF; border-right: 1px solid #FFF; } #rightCol #detailTables #tblContractDetails { float: left; width: 166px; } #rightCol #detailTables #tblContractDetails div a img { width: 165px; } #rightCol #detailTables #tblContractDetails td { background: url(../images/layup/tableTdBgRed.gif) repeat-x; padding: 5px 8px 5px 8px; color: #FFF; border-right: 1px solid #FFF; font-size: 0.9em; } #rightCol #detailTables #tblContractDetails thead th { background: #860d05; color: #FFF; font-size: 16px; font-weight: bold; padding: 5px 10px; border-bottom: 1px solid #FFF; border-right: 1px solid #FFF; } #rightCol #detailTables #tblContractDetails tfoot td { background: none; padding-top: 14px; } #rightCol #detailTables .width100 { width: 100px; } #rightCol #offerDescription { float: left; width: 350px; } /* ----- FILELIST ----- */ #fileList { width: 250px; border: 1px solid #AEAEAE; } #fileList p { padding: 10px; background: #cb392d; color: #FFF; font-weight: bold; } #fileList a { text-decoration: none; } #fileList ul { list-style: none; margin: 0px; padding: 0px; background: #f5d0cd; } #fileList ul li { padding: 0px; margin: 0px; margin-bottom: 1px; padding: 5px 0px 5px 10px; } /* ----- CLASSES ----- */ .clear { clear:both; } .clearSmall { clear:both; display: block; font-size: 0px; line-height: 0px; height: 0px; } .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; padding:0 0 15px 15px; } .image_left { float:left; padding:0 15px 15px 0; } .image_center { margin:0 auto;} .hand { cursor:pointer; } /* ----- LISTS / FRAMES ----- */ #internalList {} #internalList .listItem { width: 460px; float: left; padding-bottom: 20px; } #internalList .listItem a { cursor: pointer; display: block; background: url(../images/layup/listItemBg.gif) no-repeat; width: 450px; text-decoration: none; font-weight: normal; } #internalList .listItem a:hover { background: url(../images/layup/listItemBgHover.gif) #f7f7f7 top no-repeat; } #internalList .listItem a .padding { padding: 2px 10px 5px 10px; } #internalList .listItem span { display: block; } #internalList .listItem .itemHeading { font-size: 14px; color: #444444; border-bottom: 1px solid #d3d3d3; margin-bottom: 4px; font-weight: bold; } #internalList .listItem .itemImage { border: 1px solid #b1b1b1; float: left; } #internalList .listItem .itemImage img { padding: 2px; } #internalList .listItem .itemDesc { width: 300px; float: right; padding-bottom: 7px; } #internalList .listItem .itemMore { float: right;padding:5px 0 0 5px; } #internalImage { float: right; margin: 0px 0px 15px 15px; border: 1px solid #b1b1b1; } #internalImage img { padding: 2px; } #newsList {} #newsList .listItem { padding-bottom: 20px; } #newsList .listItem a { cursor: pointer; display: block; background: #f8f8f8; border: 1px solid #bebebe; height: 133px; text-decoration: none; font-weight: normal; } #newsList .listItem a:hover { background: #dfdfdf; } #newsList .listItem a .padding { padding: 2px 10px 5px 10px; } #newsList .listItem span { display: block; } #newsList .listItem .itemHeading { font-size: 14px; color: #444444; border-bottom: 1px solid #d3d3d3; margin-bottom: 7px; font-weight: bold; } #newsList .listItem .itemImage { border: 1px solid #b1b1b1; float: left; } #newsList .listItem .itemImage img { padding: 2px; } #newsList .listItem .itemDesc { /*width: 760px;*/ width: 540px; float: right; padding-bottom: 7px; } #newsList .listItem .itemMore { float: right; } #offerJumps { } #offerJumps a { display: block; float: left; } #offerJumps ul#offerNav { list-style: none; padding: 0px 0px 10px 8px; margin: 0px; background: url(../images/layup/offerNavBg.gif) no-repeat; height: 53px; line-height: normal; } #offerJumps ul#offerNav li { float: left; background: url(../images/layup/offerListSpacer.gif) no-repeat right top; } #offerJumps ul#offerNav li.greenCars { position: relative; } #offerJumps ul#offerNav li.greenCars img { position: absolute; top: 0px; left: 0px; } #offerJumps ul#offerNav li a { display: block; float: left; font-weight: bold; color: #fff; text-decoration: none; padding: 20px 20px 19px 20px; } #offerJumps ul#offerNav li a:hover { color: #d0bfbe; } #offerJumpsVan ul#offerNav li a { padding: 20px 29px 19px 29px; } #similarOffers { width: 325px; float: right; margin: 0px 0px 15px 0px; } #similarOffers .listItem { padding: 0px 0px 10px 0px; } #similarOffers a { font-weight: normal; text-decoration: none; display: block; cursor: pointer; } #similarOffers .itemImage { float: left; padding: 1px; border: 1px solid #afadae; } #similarOffers .itemHeading { display: block; float: left; padding: 0px 0px 5px 10px; font-weight: bold; font-size: 12px; width: 190px; } #similarOffers .itemDesc { display: block; float: left; width: 190px; padding: 0px 0px 0px 10px; } #similarOffers .itemMore { display: block; float: right; padding: 0px 10px 0px 0px; font-weight: bold; } /* ----- HEADINGS & PARAGRAPHS ----- */ h1, h2, h3, h4, h5, h6 { margin:0; padding:0 0 15px 0; font-size:100%; font-weight:bold;} h1 { font-size: 16px; color: #000; font-family: sans-serif, Arial, Helvetica; border-bottom: 1px solid #d3d3d3; padding: 0px 0px 2px 0px; margin: 0px 0px 15px 0px; } /* ----- TOP NAVIGATION ----- */ #primaryNav {} #primaryNav ul { list-style: none; margin: 0; padding: 0px 0px 0px 11px; height: 30px; line-height: 130%; } #primaryNav li { float: left; background: url(../images/layup/navSpacer.gif) top right no-repeat; } #primaryNav li a { padding: 8px 9px 7px 9px; height: 15px; text-decoration: none; display: block; float: left; font-size: 11px; font-family: Tahoma, Arial, Helvetica, sans-serif; color: #FFF; } #primaryNav li.active a, #primaryNav li a:hover { color: #000; } /* ----- SECONDARY NAVIGATION ----- */ #secondaryNav { list-style: none; margin: -6px 0px 0px 0px; padding: 0px 20px 0px 0px; } #secondaryNav li ul {list-style:none;margin:0;padding:0;} #secondaryNav li ul li a {text-indent:8px;color:#000;} #secondaryNav li ul li a:hover {color: #909090;} #secondaryNav li.downArrow ul li a {background:none !important;} #secondaryNav li { border-bottom: 1px solid #dadada; width: 180px; float: left; } #secondaryNav li.heading { color: #000000; font-size: 13px; font-weight: bold; padding-top: 6px; padding-bottom: 6px; } #secondaryNav li a { font-size:90%;text-decoration: none; color: #909090; display: block; padding: 6px 0px 6px 0px; width: 180px; float: left; background: url(../images/layup/secondaryNavArrow.gif) no-repeat right; } #secondaryNav li a:hover { color: #000; background: url(../images/layup/secondaryNavArrowH.gif) no-repeat right; } #secondaryNav li.heading { background: url(../images/layup/secondaryNavArrow2.gif) no-repeat right; } #secondaryNav li.downArrow a { background: url(../images/layup/secondaryNavArrow2.gif) no-repeat right !important; } #secondaryNav li.requestCallBack a { background: url(../images/layup/secondaryNavArrowH.gif) no-repeat right !important; font-size: 1.1em; color: #c11c0f; } /* ----- 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: 27px; padding: 10px 0px 0px 20px; line-height: 130%; } #breadcrumbs img { display: inline; margin-bottom: -2px; padding: 0px 2px 0px 2px; } #breadcrumbs a { text-decoration: none; font-weight: normal; color: #FFF; } #breadcrumbs a:hover { text-decoration: underline; } #breadcrumbs span { color: #FFF; font-weight: bold; } #breadcrumbs #backBtn { float: right; height: 15px; } #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: 146px; background: url(../images/layup/footerBg.gif) no-repeat center; color: #5f5f5f; } #footer .padding { width:980px; margin:0 auto; text-align:left; font-size:110%; padding: 90px 0px 0px 0px; background: url(../images/layup/footerBg.gif) center 0px no-repeat; position: relative; } #footer a { font-weight:normal; text-decoration:none; color: #5f5f5f; } #footer a:hover { text-decoration:underline;} #footer p { padding: 0px 20px 3px 20px } #footer #backToTop { position: relative; } #footer #backToTop .position { position: absolute; top: -90px; left: 420px; } #footer .linkBvrla { position: absolute; top: 24px; left: 42px; } #footer .linkBvrla a { display: block; width: 98px; height: 55px; background: url(../images/layup/ie6LinkFix.gif) top left repeat; } #footer .linkNorthhampshireEnterprise { position: absolute; top: 24px; left: 218px; } #footer .linkNorthhampshireEnterprise a { display: block; width: 88px; height: 55px; background: url(../images/layup/ie6LinkFix.gif) top left repeat; } #footer .linkSussexEnterprise { position: absolute; top: 24px; left: 390px; } #footer .linkSussexEnterprise a { display: block; width: 44px; height: 55px; background: url(../images/layup/ie6LinkFix.gif) top left repeat; } #footer .linkBrighton { position: absolute; top: 24px; left: 543px; } #footer .linkBrighton a { display: block; width: 54px; height: 55px; background: url(../images/layup/ie6LinkFix.gif) top left repeat; } #footer .linkHoveBusiness { position: absolute; top: 24px; left: 685px; } #footer .linkHoveBusiness a { display: block; width: 98px; height: 55px; background: url(../images/layup/ie6LinkFix.gif) top left repeat; } #footer .linkSalisburyChamber { position: absolute; top: 24px; left: 880px; } #footer .linkSalisburyChamber a { display: block; width: 58px; height: 55px; background: url(../images/layup/ie6LinkFix.gif) top left repeat; } /* ----- 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; } #customerLogin label { display:block; width:180px; float:left; } input, textarea { width:200px; font-size:11px !important;} .requiredLabel { color:#bb180c;} .checkRadio { width:20px; position:relative; left:-7px;} #frmContact {} .formContainer {padding:15px;margin:0 auto;background:url(../images/layup/formBack.jpg) #f6f6f6 no-repeat left top;width:600px;} #frmContact, .frmInternal p { padding:7px 0;} #frmContact, .frmInternal select { width:204px;} #frmContact, .frmInternal div { margin-bottom:10px;} #btnSubmit { width:70px; height:23px; 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 #bb180c; 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: #bb180c; color : #FFF; font-weight: bold; } /* ----- TABLES ----- */ table { border-collapse:collapse; } table p { padding:0px; }