/* ################################################################################################################ USER.CSS - THIS IS THE FILE USED ON MACHARGS - EVERYTHING IN THIS FILE IS MANUALLY ADDED TO STYLE APPLICATIONS - RULES ADDED HERE ARE NOT AVAILABLE IN THE CSS EDITOR IN THE CMS ################################################################################################################ 1) SITE WIDE FORMS - AC_Form is applied as an element attribute to every form when it's added to a page in the CMS - All forms are table based - All form labels are in a cell with a class .td_label - All form fields are in a cell with a class .td_field - ALL FORMS ARE RENDERED BY CORE SYSTEM ################################################################################################################ */ form { padding:0; margin:0 } .AC_Form { } .AC_Form .td_label { font-size: x-small; font-weight: bold; border-bottom: 1px solid #fff; padding: 2px 5px; vertical-align: middle; } .AC_Form .td_field { padding: 2px; font-size: x-small; width: 220px; } .AC_Form .white { } /* this rule is PAGE SPECIFIC - Multi-Car enquiry */ .AC_Form .frame {width: 74px; padding: 10px 5px; border-right: 1px solid #fff; text-align:center;} .AC_Form .label { font-weight: bold; border-left: 1px solid #666; vertical-align: top; width: 220px; } .AC_Form .white, .AC_Form .grey { padding: 2px; } .AC_Form .grey, .AC_Form .frame { background: #e9e7e8; } .AC_Form .label, .AC_Form .white, .AC_Form .grey { border-top: 1px solid #666; border-right: 1px solid #666; } .AC_Form .bottom { border-bottom: 1px solid #666; } .AC_Form .last { } .AC_Form .footerRow td { padding-bottom: 10px; } .AC_Form .submit { margin-top: 10px; width: 167px; height: 24px; border: none; font-weight: bold; color: #fff; font-size: small; padding: 0 0 2px 0; cursor: hand; } .AC_Form .text, .AC_Form .textarea {margin-left:5px;width:220px;} .AC_Form .select {margin-left:5px;width:220px;} /* ############## FORM VALIDATION ############## - when a form is submitted a DIV is displayed above the form id=validation_failure - a message is displayed in a div id=invalid_submission_msg - a star is rendered next to each required form field with a class reqd */ #validation_failure { position:relative;margin-top:10px;padding:10px;margin-bottom:20px; font-size:x-small;} #validation_failure a {font-size:x-small; text-decoration:none; font-weight:bold;} #validation_failure a:hover {text-decoration:underline;} #invalid_submission_msg {font-weight:bold;color:#c00;font-size:small;padding-bottom:2px;} .reqd {color:#fff;font-family:verdana;font-size:16px;font-weight:bold;font-size:xx-small;} /* ################################################################################################################ 2) CAR SEARCH MASK [FORM] - used on all pages - carSearchMask - is the form - selects - is applied to a div that surrounds the select dropdowns - ac_left_title - is applied the titles - CUSTOM CAR SEARCH APPLICATION - APPLICATION OBJECTS RENDERED BY search.xsl -> TEMPLATE: carSearchMask ################################################################################################################ */ .hideHiddenRows .hiddenRow { display:none } /* colinr */ #carSearchMask{ background-color:#e0dede; margin-bottom:5px; margin-left:0px; padding-left:0px; width:163px; } #carSearchMask .selects {margin:0 3px !important; margin-left: 10px!important;} #carSearchMask table {color: #fff;margin-bottom:5px;margin-top:2px; width:145px;} .selects { padding-top: 5px; padding-bottom: 5px;} .selects select { margin: 3px 0 !important; } .ac_left_title { color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold; padding-left:15px;} .ac_left_title div { height:15px; padding-top: 2px; cursor: default; margin:0 0 0px 0 !important; text-align:left !important; } .ac_left_title a { color:#ffffff;text-decoration:none; } /*colinr */ .ac_left_title img { margin-left: 5px; !important} /* FORM BUTTONS */ #btnSubmitSearch { width:130px; font-weight:bold; margin-top:3px;background:#C7282A;} #btnResetSearch { width: 90px; background:#444444; margin-top:3px; margin-bottom: 3px; font-weight:bold; font-size:10px;} #carSearchMask .buttons { text-align:center;padding: 3px 0 } .maskSel { font:menu;width: 140px; font-size:10px !important; margin-bottom: 10px;} .maskSel50 { font:menu;width:90px; } .maskTxt { font: menu;width: 118px; } .OutOfRange { display: none; } .maskTxtGrey { color: #ccc; } #carSearchMask label { font: menu;} #picfilter #labelTd{ padding: 0 0 0 5px !important; } #picfilter #checkboxTd{ padding: 0 5px 0 5px !important;} #picFilter { font-size:xx-small !important; font-weight:bold !important; color:#000000!important;} /* ################################################################################################################ 3) CAMPAIGNS - used to format campaign messages in car lists - PART OF CUSTOM CAR SEARCH APPLICATION - APPLICATION OBJECTS RENDERED BY search.xsl -> TEMPLATE: searchResultsList ################################################################################################################ */ .campaign { font-face:bold; color:#a11a16; font-size:11px; } .campaign u { font-size:18px; margin-left:7px; text-decoration:none } /* ################################################################################################################ 4) SOLD FLAGS - used to display sold image in vehicle lists and vehicle detail screen - PART OF CUSTOM CAR SEARCH APPLICATION - APPLICATION OBJECTS RENDERED BY search.xsl -> TEMPLATE: searchResultsList ################################################################################################################ */ .soldflaglist { background:url(/images/shared/sold_button.gif) right no-repeat; } .searchResultHi .soldflaglist { background:url(/images/shared/sold_button.gif) right no-repeat #f1f2ff; } .solddetailtext { text-align:center; font-size:12px; } /* ################################################################################################################ 5) RESULTS LISTS - used in car search result lists in the car search, used cars, new cars and nearly new cars sections http://www.arnoldclark.com/results.html http://www.arnoldclark.com/used.html - PART OF CUSTOM CAR SEARCH APPLICATION - APPLICATION OBJECTS RENDERED BY search.xsl -> TEMPLATE: searchResultsList http://www.arnoldclark.com/nearlynew.html http://www.arnoldclark.com/new.html - PART OF CUSTOM BLOCK BUILDER APPLICATION - APPLICATION OBJECTS RENDERED BY blocks.xsl -> TEMPLATE: searchResultsList and dow - also used in branch listings and parts and accessories listings e.g. http://www.arnoldclark.com/branch/locator.html?br_view=franList&br_franchise=ford http://www.arnoldclark.com/branch/postcode.html?%24instance=br&%24src_postcode=eh7+5as - PART OF CUSTOM BRANCH APPLICATION - APPLICATION OBJECTS RENDERED BY branch.xsl -> TEMPLATE: all http://www.arnoldclark.com/products/parts_accessories/parts_list.html?$p_m=%%&$p_p=Multimedia => - PART OF CUSTOM PARTS APPLICATION - APPLICATION OBJECTS RENDERED BY parts.xsl -> TEMPLATE: all ################################################################################################################ */ #wf_top_main_content_buffer {margin-top: 5px !important; } /*colinr */ #wf_container2 {margin-left:0px; margin-right:5px; } #wf_container2 a { text-decoration:none;} #wf_container2 a:hover { text-decoration:underline;} #Intro_Snippet {font-size: x-small;} #blockListHeader { width: 620px; margin-top: -5px;} #blockCell .searchResultBtns td { border-right: none !important; } #blockListHeader td { font-size:11px; } #searchResultsList, #searchDetail { width: 615px; } #searchResultsList td { font-size:x-small; } .searchResultHeader { } .searchResultHeader th { color:#fff; padding:3px 0 3px 5px; white-space: nowrap; font-size:11px; text-align:left;} .searchResultHeader a { color: #fff !important; font-weight: bold; text-decoration: none; } .searchResultHeader a img { border:none; } .searchResultHeader .orderby { margin:2px 0 0 3px; } .searchResultHeader .orderbythis { border-bottom: 1px solid #fff !important; } .searchResult td { color: #333; padding:1px 3px 9px 3px; background-color: #fff; vertical-align: bottom; margin-right:0px!important;} .col1 { width: 78px; padding:0 !important;} .col2 { width: 45px; white-space:nowrap; } .col3 { width: 55px; } .col4 { width: 180px !important; } .col6 { width: 55px; } .col7 { width: 62px; } .col8, .col9 { max-width: 60px; text-align:right!important; } #blockListHeader { width: 620px !important; } #searchResult { width: 620px !important; } #searchResultsList { width: 620px !important; } .searchResultBtns td { text-align: right; vertical-align:bottom; border-bottom: 1px solid #a2a2a2; border-right: 1px solid #a2a2a2; } .searchResultBtns .info { text-align: left; padding-left:5px; color:#c7282a!important; border-right:none!important; } .searchResultBtns .red {font-weight:bold; } .searchResultBtns a { display: block; color:#fff !important; width: 100px;font-size: 10px; text-decoration:none !important; font-weight: bold; float:right; padding-bottom:0px; padding-left:20px; padding-right: 0px!important; padding-top:1px; height:15px!important; background-image:url(/images/triangle_left.jpg); background-repeat:no-repeat; background-position: left bottom; } .searchResultBtns span { display:block; text-align:center; } .searchResult .col1 { vertical-align:middle !important; border-right:1px solid #a2a2a2; border-left: 1px solid #a2a2a2; border-bottom: 1px solid #a2a2a2;} .searchResult .col1 img { width:67px; height:50px; margin:4px; border: 1px solid #a2a2a2; } .searchResult .col8 { text-align:right !important; font-weight:bold; color:#c7282a; border-right: 1px solid #a2a2a2;} .searchResult .col8 span { font-size:13px !important; color:#c7282a; } .searchResultHeader .col8 { padding-right:0px; margin-left:0px!important; } .searchResult .blockListInfo { width: 500px; } .searchResultHi td { background: #EEEFFF; cursor: pointer !important; } .tabOuter { float: left; } .tabInner { text-align:left; font-weight: bold !important; color: #868787; white-space: nowrap; font-size:15px !important; margin-top:0px; padding-bottom: 5px; } .tabLabel { font-size:13px; font-weight: bold; } .tabRight { float:right; } .searchResultsPaging { display:table; min-width: 150px; } .searchResultsPaging .tabInner { padding: 0px 5px 0 0px; height: 13px; } .searchResultsPaging a { margin-top: 0px; color: #fff!important; font-weight:bold; text-decoration:none; text-align:center; font-size:11px; padding-bottom:2px; } .searchResultsPaging a:hover { color: #fff !important; text-decoration:none !important; background-color:#000000 !important;} .searchResultsPaging a span { padding: 0 5px; } #searchResultsTopPaging {background-image:url(/images/triangle_left.jpg); background-repeat: no-repeat; background-position: left center; padding-left: 20px; padding-top:0px!important; padding-bottom:2px!important; margin-top:7px;} #searchResultsTopPaging .currentPageLink { background-color:#c7282a; color:#fff!important;} #searchResultsBtmPaging a {color:#FFFFFF!important;} #searchResultsBtmPaging .currentPageLink { background-color:#c7282a; color:#fff!important;} .searchResultsPaging .first,.searchResultsPaging .next,.searchResultsPaging .last { border-right:0 !important; } #searchResultsBtmPaging { height: 10px; } #searchResultsBtmPaging .tabInner { padding:3px 3px 2px 0; } .noTopPad { padding-top: 0 !important; } #branchLocatorTable .ac_left_title { padding: 0 0 10px 16px !important; background-position:left top; } #branchLocatorTable .ac_left_title a { padding-top: 2px; } .formBtn { background: #C7282A; color: #fff; font-weight: bold; font-size:11px; padding-left: 0px; padding-right:0px; } .resPerP { padding-bottom: 10px; } .resPerP label { font-size: 11px; font-weight: bold; } .resPerP input { font-size: 11px; } .resPerP select { font: menu; } .motoAdvPay {display:block; white-space:nowrap; font-size:11px; font-weight:bold;} .price .motoAdvPay {font-size: 15px} /* ################################################################################################################ 6) VEHICLE DETAIL SCREEN - USED IN CAR SEARCH RESULTS IN THE CAR SEARCH, USED CARS, NEW CARS AND NEARLY NEW CARS SECTIONS - ALSO USED IN BRANCH LISTINGS AND PARTS AND ACCESSORIES LISTINGS, TO ENSURE SITE WIDE STYLES - PART OF CUSTOM CAR SEARCH AND BLOCK BUILDER APPLICATIONS - APPLICATION OBJECTS RENDERED BY search.xsl -> TEMPLATE: searchResultsDetailHeader ################################################################################################################ */ ##searchDetailHeader { margin-top: -5px; } #searchDetailHeader a { margin-right: 4px; text-decoration: none !important; font-weight: bold; text-align:center; font-size:12px; font-weight: bold; color: #fff !important; } #searchDetailHeader a span { height: 17px; padding-top: 2px; padding-left: 7px; padding-right:22px; } #searchDetailHeader .on { } #searchDetailHeader .on span { background: url(/images/triangle_right.jpg); background-position: top right; background-repeat: no-repeat; } #searchDetailHeader .off { background-color: #555555; } #searchDetailHeader .off span { background: url(/images/triangle_grey.jpg); background-position: top right; background-repeat: no-repeat; } #searchDetail { margin-left:12px; color:#303030;} #searchDetail .top, #searchDetail .left, #searchDetail .bottom, #searchDetail .leftright{ border-left: 1px solid #a2a2a2; } #searchDetail .top, #searchDetail .right, #searchDetail .bottom, #searchDetail .leftright{ border-right: 1px solid #a2a2a2; } #searchDetail .top { padding: 0 10px; } #searchDetail .left, #searchDetail .right, #searchDetail .leftright { vertical-align: top; } #searchDetail .left, #searchDetail .leftright { padding: 0 10px 10px 10px; } #searchDetail .right { padding: 0 14px 10px 10px; width: 167px; } #searchDetail h1 { margin: 7px 0 7px 0; font-size: 20px; padding: 0; font-weight:bold; color:#000; } #searchDetail .mainPic { border: 1px solid #a2a2a2; margin-bottom: 7px; } #searchDetail .weePic { border: 1px solid #a2a2a2; margin: 7px 10px 0 0; } #searchDetail .spec { margin-top:5px; font-size:12px; color:#303030;} #searchDetail .spec .tdLabel{ white-space:nowrap;width:150px;} #searchDetail .btn { display: block; font-size:12px; text-align:right; background:url(/images/triangle_left.jpg) top left no-repeat; color:#fff; font-weight:bold; padding: 2px 10px 0 0px; height: 17px; margin-bottom: 4px; text-decoration: none; } #specTable .leftCell {padding-right:5px;} #specTable .rightCell {padding-left:5px;} /* DETAIL VIEW PRICING */ #searchDetail .priceInfo { text-align: right; font-size:11px; padding-bottom: 10px; width:196px;} #searchDetail .priceInfo span { color:#C7282A; font-size:16px; font-weight:bold;} #searchDetail .topPrice { font-size:13px; font-weight:bold; } #searchDetail .price { font-size: 22px; font-weight: bold; color:#000000; margin-top:5px;} #searchDetail .price span { color:#C7282A; font-size:22px; } #searchDetail .price span span { font-size:41px;} #searchDetail .presale { margin-top: 10px; font-size:13px; font-weight:bold; /*color:#f00;text-decoration:line-through;*/ } #searchDetail .savings { color: #C7282A; font-size: 16px; font-weight: bold; margin-bottom: 25px; } #searchDetail .savings span { color: #C7282A; font-size: 10px; } #searchDetailBtm .o { } #searchDetailBtm .i { height:8px; } .vatFlag { font-size: small!important; color: #000!important; } /* ADD TO SHOWROOM LINK */ #bSRAsst { position: absolute; margin: 2px 0 0 135px; } #bSRAsst img{ margin:0 0 0 10px; border:none; } /* OTHER OPTIONS LIST */ .optionsListx { float: left; width: 360px; list-style-type:none; margin: 0; padding: 0; } .optionsListx li { width: 165px; padding: 5px 10px 0 0; margin: 0; float: left; } .optionsList {list-style-type:none;margin: 0; padding: 0;} .optionsList li { padding: 5px 10px 0 2px; margin: 0; } /* BLOCK BUILDER DETAIL - THE SAME CORE STYLES ARE USED IN THE USED AND NEW CAR DETAIL VIEWS - e.g. http://www.arnoldclark.com/detail.html?ac_reg=blk_fmrnrek9na9nrm4s&$ac_sr=0&$ac_pp=10&$blk=2&$franchiselist=&$model=C1& */ /* DEAL OF THE WEEK */ .DealOfTheWeek { padding-left:5px; padding-top: 5px; padding-bottom:5px; padding-right:0px!important; } #DealOfTheWeekTitle { font-size: large !important; font-weight: bold; color: #444444; } #DealOfTheWeekTitleMoney1 { color: #c7282a; text-align: right; vertical-align: top; padding-top: 5px; } #DealOfTheWeekTitleMoney1 .price, #DealOfTheWeekTitleMoney1 .savings { font-size: x-small; font-weight: bold; color:#c7282a; } #DealOfTheWeekTitleMoney1 .price span{ font-size: 25px; } #DealOfTheWeekTitleMoney1 .savings { color: #000000; } #DealOfTheWeekTitleMoney1 .savings span{ font-size: 20px !important; color: #c7282a; } #financeBlock { margin-top: 15px; width: 167px; float: right;} #financeBlock .fb { padding: 5px; background: #a4222b; border-bottom: 1px solid #fff; color: #fff; text-align: center; text-transform: uppercase; } #financeBlock .sma { font-size: 11px; } #financeBlock .big { font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 20px; } #financeBlock .big span { font-size: 30px; } #financeBlock .big span b { font-size: 20px; } #financeBlock .apr { text-align: center; font-size: 40px !important; } .BLOCKBTN_RED_100, .BLOCKBTN_RED_150 {text-align:center; padding-left:15px;display: block;clear: left;float: left;background: url(/images/triangle_left.jpg) no-repeat bottom left;color:#fff !important;text-decoration:none !important;font-size:11px !important;font-weight:bold; } .BLOCKBTN_RED_100 span {display: block;width: 80px;height: 15px!important;text-align: center;white-space: nowrap; padding: 1px 10px 0px 10px; text-align:center;} /* ################################################################################################################ 7) NEW AND NEARLY NEW CAR BLOCKBUILDER OBJECTS - http://www.arnoldclark.com/new.html - http://www.arnoldclark.com/nearlynew.html?$franchise=hyun - PART OF CUSTOM BLOCK BUILDER APPLICATIONS - APPLICATION OBJECTS RENDERED BY block.xsl -> TEMPLATES: searchResultsList, dow ALSO USED IN PARTS AND BRANCH APPLICATIONS - PARTS APPLICATION OBJECTS RENDERED BY parts.xsl -> TEMPLATE: partList, partDetail - BRANCH APPLICATION OBJECTS RENDERED BY branch.xsl -> TEMPLATE: branchSearchRender, townList, franList ################################################################################################################ */ /* CORE CSS TO CONTROL BLOCKBUILDER OBJECTS */ #blockCell { border-bottom: 1px solid #a2a2a2; border-left: 1px solid #a2a2a2; border-right: 1px solid #a2a2a2;} #franchiseGutter { width: 0px!important; } #franchiseCell { width: 139px; background-color:#ffffff; border-right: #a2a2a2 1px solid;} #franchiseCell img { margin: 0px 0; } #franchiseMenuHeader { color: #fff; font-size:11px; padding:0px 0; font-weight: bold; text-align: center; } .blockListing p {font-size: small;} .blockListing { margin-right:0px!important; } .blockListing .col1 { border-left: none !important; margin-right:0px!important; border-right: 1px solid #a2a2a2; border-bottom: 1px solid #a2a2a2; } .blockListing .col8 { vertical-align: top !important; border-right: none !important; width:80px; text-align:right;} .blockListing .col8 span { font-size: 16px!important; } .blockListing .col8 .fromonly {font-size: 10px!important; } .blockListing .searchResultBtns a, .blockListing .searchResultBtns span { display: block; text-align: center;} .blockListing .searchResultBtns span { width: 93px; padding-bottom: 0px; margin-bottom: -4px!important; } .blockListInfo { white-space:normal; border-bottom: 1px solid #a2a2a2;} .blockListVehicle { font-size: 12px; color:#000000; font-weight:bold; padding-top: 3px;} .blockListFeaturedOptions { padding-top: 0px; font-size: 10px; font-weight: bold;} .blockListOptions { font-size: 9px; padding-top: 0px;} .blockListSave { color:#c7282a; text-align: left;font-weight: bold; size: 11px; } .blockListSave span{ font-size: 11px;} /* CLASS APPLIED TO TABLE CELL SURROUNDING MANUFACTURER SELECT */ .franchiseSelect { font-size:x-small; white-space:nowrap; } .franchiseSelect select { width:107px; font-size:xx-small; } .franchiseSelect select option { width:107px; font-size:xx-small;} /* PRICE AND FRANCHISE COLUMN HEADINGS - http://www.arnoldclark.com/nearlynew.html */ #priceColumnHeader {width:105px;text-align: right!important;padding-right: 12px; } #franchiseColHeader {width: 135px; padding-left: 0px !important;} /* DEAL PRICE AND IMAGES e.g. http://www.arnoldclark.com/nearlynew.html?$franchise=chev */ .DOWImage { width: 350px !important; } .DOWPrice { width: 100px !important; } #DOWInfo { width: 464px !important } #dowImage img { border: 1px solid #ccc; } /* !!!! NOT SURE THESE NEXT 2 ARE USED */ #selFranchise { text-align: right !important; } #selFranchise select{ font-size: 9px; } /* RIGHT HARD FRANCHISE MENU LIST */ #franchiseMenu a, #modelMenu a, #right_menu a { font-weight: bold; text-decoration: none; width: 94px; min-height: 20px; padding-left: 45px; margin-top:0px; padding-top: 0px; padding-top: 7px; border-bottom: solid 1px #a2a2a2; text-transform: uppercase; text-align:left; color:#333333;} #franchiseMenu a:hover, #modelMenu a:hover, #right_menu a:hover { text-decoration:none; } /* NEXT 2 RULES ARE ONLY USED IN PARTS AND ACCESSORIES NOW */ #modelMenu a, #right_menu a { font-weight: bold; text-decoration: none; width: 94px; min-height: 20px; padding-left: 45px; margin-top:0px; padding-top: 0px; padding-top: 7px; border-bottom: solid 1px #a2a2a2; text-transform: uppercase; text-align:left; color:#333333; } #modelMenu a:hover, #right_menu a:hover { font-weight: bold; text-decoration: none; width: 94px; min-height: 20px; padding-left: 45px; margin-top:0px; padding-top: 0px; padding-top: 7px; border-bottom: solid 1px #a2a2a2; text-transform: uppercase; text-align:left; color:#333333;} /* colinr */ #wf_container21 { backgro/und:#ccc; padd/ing-left:10px; } #searchDetail { margin-left:0px !important;} #searchResultsTopPaging { padding-bottom:20px;} #searchResultsBtmPaging {padding-bottom: 10px;margin-right:0px !important;} #wf_main_column{padding-left:10px; !important} .savingDivInner {display:block} /**** DOW Home Page Panels ****/ .deal-of-the-week-panel { border:1px solid #6f6f6f; width:307px; margin-bottom:10px; background: #fff url(/images/dow-background.png) repeat-y; color:#000; } .deal-of-the-week-table { width:307px; } .deal-of-the-week-image { width:80px !important; padding:10px; } .deal-of-the-week-heading { font-size:19px; padding:4px; text-transform:uppercase; } .deal-of-the-week-make { font-size:14px; padding: 0 4px 4px 4px; } .deal-of-the-week-price { padding:4px; font-weight:bold; width:100%; } .deal-of-the-week-image { padding:4px; } .deal-of-the-week-viewmore { padding:4px; } .deal-of-the-week-price .price .display { font-size:18px; color:#c7282a !important; } .deal-of-the-week-viewmore a { background: #fff; text-decoration:none; font-weight:bold; font-size:9px; padding:0px 8px; } .deal-of-the-week-price .savings { font-size: 13px; color: #000000; font-weight: normal; } .deal-of-the-week-price .savingSpan { font-size:13px; font-weight: normal!important; color:#c7282a !important; } #morelink { float:left; margin-left:3px; } #morearrow { float:left; } /* bobby */ .blockListFeaturedOptionsDOW {font-size: 14px!important; font-weight: bold;} #wf_container51 {margin-top:-5px;} .solddetailtext {text-align:right;} #franchiseCell {border-bottom: 1px solid #a2a2a2;} .bd1 .usedcars {margin-bottom: 30px;}