/* Summary CSS - Paolo Updated 24.11.10 */ .summary .branch-number { background-image:url(http://www.arnoldclark.com/images/telephone-bg.jpg); background-repeat:no-repeat; background-color:#f1f4f8; display:block; width:261px; height:40px; padding-bottom:9px; text-align:center; font-weight:bold; text-transform:uppercase; } .summary .branch-number .call { font-size:14px; font-weight:bold; text-align:left; width:40px; float:left; padding-top:7px; padding-left:10px; line-height: 1em; } .summary .branch-number .number { font-size:30px; font-weight:bold; letter-spacing: -2px; text-align:left; color:#a53535; width:205px; float:right; padding-top:3px; } .summary-content h2 { width:245px; } /* Address buttons CSS - Paolo Updated 24.11.10 */ .address_buttons #enquiry-button a { background-image:url(http://www.arnoldclark.com/images/enquire-button.jpg); background-repeat:no-repeat; background-color:#f1f4f8; width:169px; height:40px; display:block; padding-top:6px; cursor:pointer; color:#FFF; font-size:20px; } #dealerdetails .top { width:169px; height:7px; background-image:url(http://www.arnoldclark.com/images/side-top.jpg); background-repeat:no-repeat; } #dealerdetails .middle { width:159px; background-color:#d4dce8; text-align: left; padding-left:5px; padding-right:5px; } #dealerdetails .middle h2 { width:151px; margin-top:-2px; } #dealerdetails .middle .forwardbutton{ padding-top:6px; } #dealerdetails .bottom { width:169px; height:7px; background-image:url(../../images/side-btm.jpg); background-repeat:no-repeat; } .carenquiry a { margin-left:-3px; border:0px; } /* Tabbed Panels CSS */ #tabs {margin-top:-10px;} .TabbedPanelsTabHover { background-image:url(http://www.arnoldclark.com/images/darkblue-left.jpg)!important;} .TabbedPanelsTabHover span { background-image:url(http://www.arnoldclark.com/images/darkblue-right.jpg!important);} .TabbedPanelsTabSelected { background-image:url(http://www.arnoldclark.com/images/darkblue-left.jpg)!important;} .TabbedPanelsTabSelected span { background-image:url(http://www.arnoldclark.com/images/darkblue-right.jpg)!important;} .TabbedPanelsContentGroup { clear: both; border-left: solid 1px #CCC; background-color: #0070a8; border:2px solid #105b92!important; border-top:9px solid #105b92!important; border-bottom:none!important; } .TabbedPanelsTab { outline:none!important; } .specTab h2 { margin-left:8px; margin-bottom:3px; color:#21467d; text-align:left; font-size:15px; background-image:none; z-index:1; } .specTab .featured-spec { margin-top:0px; padding-bottom:520px; } .specTab .featured-spec li { width: 554px; padding: 3px 3px 3px 5px; border-bottom: 1px solid #bdcbe1; border-top:none; font-weight: bold; font-size:13px !important; color: #454545 !important; letter-spacing:-0.05em; } .specTab .featured-spec ul { float: left; } .specTab table.spec-2col { border-top:2px #21467d solid; background-image:url(http://www.arnoldclark.com/images/template/detailedview/blue-line.gif); background-repeat:repeat-y; background-position:center; margin-bottom:10px; } .specTab table.spec-2col td { padding-left:8px; padding-right:8px; padding-top:5px; padding-bottom:5px; width:272px; border-bottom:1px solid #bdcbe1; font-size:13px; font-weight:bold; color: #454545; } .specTab table.spec-4col { border-top:2px #21467d solid; background-image:url(http://www.arnoldclark.com/images/template/detailedview/blue-line.gif); background-repeat:repeat-y; background-position:center; margin-bottom:20px; } .specTab table.spec-4col th { padding-left:8px; padding-right:8px; padding-top:5px; padding-bottom:5px; width:166px; border-bottom:1px solid #bdcbe1; font-size:13px; font-weight:bold; color: #454545; } .specTab table.spec-4col td { padding-left:8px; padding-right:8px; padding-top:5px; padding-bottom:5px; width:106px; border-bottom:1px solid #bdcbe1; font-size:13px; color: #454545; } .detailviewheader {margin-top:0px; min-height:20px; margin-bottom:10px; } .detailviewheader h2 {width:640px; float:left;} .detailviewheader h2 span {width:640px; float:left;} .detailviewheader .backbutton {margin-top:-2px;} .gallerydiv { z-index:1; width:104px; position:absolute; text-align:right; float:right; margin-left:210px; margin-top:210px; height:19px;} .gallery { position: relative; top:0; right:0;} .carimages { width:320px; float:left;} .carprice { width:320px; height:108px; background-image:url(http://www.arnoldclark.com/images/template/detailedview/price_bg.png); background-repeat:no-repeat; margin-top:-5px;} .carprice table { width:320px; height:100px;} .summary { width:260px; background-color:#d4dce8; margin-left:10px; float:left; } .address_buttons { width:169px; margin-left:15px; float:left;} .address_buttons table {width:169px;} .address_buttons h2 {margin-top:8px; margin-bottom:5px;} .address_buttons .branchnumbers {width:150px;} .detailview-topinfo { width:auto; } .detailview-bottominfo { clear:both; padding-top:15px; overflow: hidden; width:100%; } .summary-top { width:260px; height:5px; background-image:url(http://www.arnoldclark.com/images/template/detailedview/summary-top.jpg); background-repeat:no-repeat; background-position:top left; } .summary-content { width:250px; padding-left:5px; padding-right:5px; margin:0px auto; margin-bottom:12px;} .summary-bottom { width:260px; height:5px; background-image:url(http://www.arnoldclark.com/images/template/detailedview/summary_bottom.jpg); background-repeat:no-repeat; } .tdsummary {margin-left:0px; width:100%; } .summaryblue {width:120px; padding-left:5px;} .summaryblue ul{font-size:11px; font-weight:bold; line-height:20px; list-style:none; margin:0px; padding:0px;} .summaryblue ul li { color:#21467D; } .summarygrey ul {font-size:11px; font-weight:bold; line-height:20px; list-style:none; margin:0px; padding:0px;} .bottomofsummary {width:100%; text-align:left;} .bottomofsummary td {padding-left:5px;} .bottomofsummary td p {font-size:10px!important; font-weight:bold;} .bottomofsummary td p a {font-size:10px!important;} .redbutton169 { background-image:url(http://www.arnoldclark.com/images/template/buttons/redbutton_169w_20h.png); background-repeat: no-repeat; background-position: center; border: none; color: #FFFFFF; font-weight: bold; width: 169px; height: 25px; font-size: 11px; margin-top: 3px; padding-bottom: 3px!important; text-align:center; } .redbutton169 a {color:#FFFFFF; padding-top:3px; text-align:center; } .redbutton169 a:hover {text-decoration:none;} #enquirybutton { background-image:url(http://www.arnoldclark.com/images/template/buttons/enquire_button.png); background-repeat: no-repeat; background-position: center; border: none; color: #FFFFFF; font-weight: bold; width: 169px; height: 45px; margin-top: 3px; padding-bottom: 3px !important; text-align:center; } #enquirybutton a {color:#FFFFFF; padding-top:3px; text-align:center;font-size: 20px } #enquirybutton a:hover {text-decoration:none;} .grey9 { color:#454545; font-size:9px; } .whiteprice45 {color:#FFF; font-size:45px; font-weight:bold; text-align:left;} .poundsign {color:#FFF; font-size:30px; font-weight:bold; margin-left:10px; text-align:left;} .priceonly {color:#FFF; font-size:18px; font-weight:bold; margin-left:10px; text-align:left;} .vatrfl {color:#FFF; font-size:12px; font-weight:bold; margin-left:10px; } .soldflagdetails { z-index:1; width:320px; position:absolute; text-align:right; float:right; margin-left:0px;} .detailssoldflag { position: relative; top:0; right:0; height:109px; width:320px;} .tdprice {text-align:left; width:190px;} .tdsaving {text-align:left; width:130px; color:#cde3fa; vertical-align:middle; padding-top:10px;} .tdsaving .savingtext { padding-bottom:5px; font-size:9px; color:#ffffff; line-height:4px; font-weight:bold;} .tdsaving .presaleprice {font-size:22px; font-weight:bold; color:#fff000; line-height:27px;} .tdsaving .saleprice {font-size:22px; font-weight:bold; color:#ffffff; line-height:23px; } /* Contract Hire CSS 7.6.10 */ .chire-permonth {text-align:left; margin-top:15px; margin-left:10px; width:220px;} .chire-permonth .priceonly {color:#FFF; font-size:18px; font-weight:bold; line-height:0.5em; padding-top:10px;} .chire-permonth .whiteprice45 {color:#FFF; font-size:45px; font-weight:bold; text-align:left;} .chire-permonth .poundsign {color:#FFF; font-size:30px; font-weight:bold;} .chire-permonth .permonth {color:#FFF; font-size:18px; font-weight:bold; text-align:left; margin-top:-5px; margin-left:10px;} /* End Contract Hire CSS */ #tabs {width:590px; text-align:left; float:left; position:relative;} #tabs .tab-content {width:550px; height:350px;} #enquiryform { text-align:left; margin:0px auto; width:150px; margin-top:10px; } .carenquiry {width:169px; float:right; } .carenquiry h2 {width:164px} .enquiry-top {width:169px; height:7px; background-image:url(http://www.arnoldclark.com/images/template/detailedview/enquiry_top.jpg); background-repeat:no-repeat;} .enquiry-middle {width:169px; background-color:#3875a8; text-align: center;} .enquiry-bottom {width:169px; height:7px; background-image:url(http://www.arnoldclark.com/images/template/detailedview/enquiry_bottom.jpg); background-repeat:no-repeat;} .enquirydropdownoption { width:155px; font-size:10px; font-weight:bold; color:#333333; margin-bottom:5px; } .enquirytextoption { width:150px; font-size:10px; font-weight:bold; color:#333333; margin-bottom:5px; } .enquiryheader { font-size:12px; text-transform:uppercase; color:#FFF; font-weight:bold; line-height:20px;} .enquirysmallwhite { color:#FFF; font-size:10px; margin-left:0px; font-weight:bold;} .checkbox {float:right;} .sidebar .similarcars {width:100%; font-weight:bold;} .sidebar .similarcars .intro {text-align:left; padding-bottom:5px; font-weight:normal;} .sidebar .similarcars .thumb {width:72px; height:55px; padding:2px; text-align:center; vertical-align:middle;} .sidebar .similarcars .thumb img { border:1px solid #ABABAB;} .sidebar .similarcars .desc {padding:2px; text-align:left; vertical-align:middle;} .finance {float:right; width:290px; height:510px; background-image:url(http://www.arnoldclark.com/images/template/detailedview/new-finance-bg.png); background-position:top left; background-repeat:no-repeat; border-left:10px #d4dce8 solid; padding:10px; position:absolute; right:12px; top:43px;} /* START FINANCE UPDATE ADDITIONS - Stephen 25/2/11 */ h2.finance-header {font-size: 14px; color: #fff; text-align: center; margin-left: 0px;/*this over rules the 8px margin left from .specTab */ padding-top: 5px;} .finance-splitter {border-left: 1px solid #6d90b4;} .finance-splitter li {margin-left: 20px;} .apr-representative {width: 280px; _width: 160px; _display: block;} .apr-representative span {font-size: 16px; font-weight: bold; color: #fff000!important; _display: block; _line-height: 15px;} /* END FINANCE UPDATE ADDITIONS - Stephen 25/2/11 */ .finance_left {float:left; width:135px; color:#FFF; font-weight:bold; font-size:12px; } .TabbedPanelsContent .contentinner .finance_left ul {list-style:none; margin:0px; padding:0px; line-height:32px; } .TabbedPanelsContent .contentinner .finance_left ul li {font-size:12px; font-weight:bold; color:#FFF; } .finance_right {float:right; width:135px; color:#FFF000; font-weight:bold; font-size:16px;} .TabbedPanelsContent .contentinner .finance_right ul {list-style:none; margin:0px; padding:0px; line-height:31px; } .TabbedPanelsContent .contentinner .finance_right ul li {font-size:16px; font-weight:bold; color:#FFF000; } .TabbedPanelsContent .contentinner .finance_right ul li .apr {font-size:24px; color:#FFF000; line-height:27px!important; } #geocodingBranch { padding-top:40px;width:165px;text-align:center;z-index:1; position:absolute;height:276px;font-weight:bold;} /* PM - Vehicle Sold CSS 30.6.11 */ .vehicle-sold-wrapper {background-image:url(http://www.arnoldclark.com/images/template/detailedview/vehicle-sold/86536_AC_vehicle_header.jpg); background-repeat:no-repeat; width:778px; clear:both; background-color:#a1a1a1;} .vehicle-sold-content {padding-top:170px; width:750px; margin:auto; padding-bottom:7px;} .vehicle-sold-content p {color:#FFF; font-size:18px!important; margin-left:12px;} .vehicle-sold-content .options {background: #f3f3f3; padding: 1em 1em; margin-bottom: 1.5em; margin-top: 1em; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0px 0px 5px #333; -webkit-box-shadow: 0px 0px 5px #333; box-shadow: 0px 0px 5px #333;} .vehicle-sold-content .options table {width:100%;} .vehicle-sold-content .options td {text-align:left; vertical-align:middle;} .vehicle-sold-content .options img {float:left; padding-left:10px; border:0px;} .vehicle-sold-content .options .border-right {background-image:url(http://www.arnoldclark.com/images/template/detailedview/vehicle-sold/splitter.gif); background-position:right; background-repeat:repeat-y;} .vehicle-sold-content .options .options-text {float:right; width:260px; margin-right:5px;} .vehicle-sold-content .options .options-text .red18bold a {font-size:18px!important;} .vehicle-sold-content .options .options-text p {font-size:14px!important; padding-top:5px; margin-left:0px; color:#454545;} .vehicle-sold-content .options .options-text a {font-size:14px!important;} /* end Vehicle Sold CSS 30.6.11 */ /* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /* Horizontal Tabbed Panels * * The default style for a TabbedPanels widget places all tab buttons * (left aligned) above the content panel. */ /* This is the selector for the main TabbedPanels container. For our * default style, this container does not contribute anything visually, * but it is floated left to make sure that any floating or clearing done * with any of its child elements are contained completely within the * TabbedPanels container, to minimize any impact or undesireable * interaction with other floated elements on the page that may be used * for layout. * * If you want to constrain the width of the TabbedPanels widget, set a * width on the TabbedPanels container. By default, the TabbedPanels widget * expands horizontally to fill up available space. * * The name of the class ("TabbedPanels") used in this selector is not * necessary to make the widget function. You can use any class name you * want to style the TabbedPanels container. */ .TabbedPanels { margin: 0px; padding: 0px; clear: none; width:590px; } /* This is the selector for the TabGroup. The TabGroup container houses * all of the tab buttons for each tabbed panel in the widget. This container * does not contribute anything visually to the look of the widget for our * default style. * * The name of the class ("TabbedPanelsTabGroup") used in this selector is not * necessary to make the widget function. You can use any class name you * want to style the TabGroup container. */ .TabbedPanelsTabGroup { margin: 0px; padding: 0px; } /* This is the selector for the TabbedPanelsTab. This container houses * the title for the panel. This is also the tab "button" that the user clicks * on to activate the corresponding content panel so that it appears on top * of the other tabbed panels contained in the widget. * * For our default style, each tab is positioned relatively 1 pixel down from * where it wold normally render. This allows each tab to overlap the content * panel that renders below it. Each tab is rendered with a 1 pixel bottom * border that has a color that matches the top border of the current content * panel. This gives the appearance that the tab is being drawn behind the * content panel. * * The name of the class ("TabbedPanelsTab") used in this selector is not * necessary to make the widget function. You can use any class name you want * to style this tab container. */ .TabbedPanelsTab {outline:none!important;} .TabbedPanelsTab { position:relative; list-style:none; background-image:url(http://www.arnoldclark.com/images/template/buttons/tabs/lightblue-left.jpg); background-repeat:no-repeat; background-position:top left; text-align:center; position: relative; top: 1px; float: left; list-style: none; -moz-user-select: none; -khtml-user-select: none; cursor: pointer; font-size:13px; color:#21467d; padding-top:4px; margin-top:1px; padding-bottom:3px; margin-right:5px; } .TabbedPanelsTab span { background-image:url(http://www.arnoldclark.com/images/template/buttons/tabs/lightblue-right.jpg); background-repeat:no-repeat; background-position:top right; font-size:13px; color:#21467d; font-weight:bold; padding-top:4px; margin-top:1px; padding-bottom:3px; padding-left:10px; padding-right:10px; text-align:center; } /* This selector is an example of how to change the appearnce of a tab button * container as the mouse enters it. The class "TabbedPanelsTabHover" is * programatically added and removed from the tab element as the mouse enters * and exits the container. */ .TabbedPanelsTabHover { background-image:url(http://www.arnoldclark.com/images/template/buttons/tabs/darkblue-left.jpg); background-repeat:no-repeat; background-position:top left; text-align:center; } .TabbedPanelsTabHover span { background-image:url(http://www.arnoldclark.com/images/template/buttons/tabs/darkblue-right.jpg); background-repeat:no-repeat; background-position:top right; height:20px; color:#FFFFFF; font-size:13px; font-weight:bold; padding-top:4px; margin-top:1px; padding-bottom:5px; text-align:center; } /* This selector is an example of how to change the appearance of a tab button * container after the user has clicked on it to activate a content panel. * The class "TabbedPanelsTabSelected" is programatically added and removed * from the tab element as the user clicks on the tab button containers in * the widget. * * As mentioned above, for our default style, tab buttons are positioned * 1 pixel down from where it would normally render. When the tab button is * selected, we change its bottom border to match the background color of the * content panel so that it looks like the tab is part of the content panel. */ .TabbedPanelsTabSelected { background-image:url(http://www.arnoldclark.com/images/template/buttons/tabs/darkblue-left.jpg); background-repeat:no-repeat; background-position:top left; text-align:center; } .TabbedPanelsTabSelected span { background-image:url(http://www.arnoldclark.com/images/template/buttons/tabs/darkblue-right.jpg); background-repeat:no-repeat; background-position:top right; height:20px; color:#FFF000; font-size:13px; font-weight:bold; padding-top:4px; margin-top:1px; padding-bottom:5px; text-align:center; text-transform: none; } /* This selector is an example of how to make a link inside of a tab button * look like normal text. Users may want to use links inside of a tab button * so that when it gets focus, the text *inside* the tab button gets a focus * ring around it, instead of the focus ring around the entire tab. */ .TabbedPanelsTab a { color: black; text-decoration: none; } /* This is the selector for the ContentGroup. The ContentGroup container houses * all of the content panels for each tabbed panel in the widget. For our * default style, this container provides the background color and borders that * surround the content. * * The name of the class ("TabbedPanelsContentGroup") used in this selector is * not necessary to make the widget function. You can use any class name you * want to style the ContentGroup container. */ .TabbedPanelsContentGroup { clear: both; border-left: solid 1px #CCC; background-color: #d4dce8; border:2px solid #105b92; border-top:9px solid #105b92; border-bottom:none; } /* This is the selector for the Content panel. The Content panel holds the * content for a single tabbed panel. For our default style, this container * provides some padding, so that the content is not pushed up against the * widget borders. * * The name of the class ("TabbedPanelsContent") used in this selector is * not necessary to make the widget function. You can use any class name you * want to style the Content container. */ .TabbedPanelsContent { padding: 0px; width:580px; } .TabbedPanelsContent .contentinner { text-align:left; padding:5px; padding-left:10px;} .TabbedPanelsContent .contentinner ul { list-style:none; margin:0px; padding:0px; line-height:18px; } .TabbedPanelsContent .contentinner ul li {font-size:11px; font-weight:bold; color:#21467d; } .TabbedPanelsContent .tab-bottom {margin-left:-2px; margin-top:5px;} /* This selector is an example of how to change the appearnce of the currently * active container panel. The class "TabbedPanelsContentVisible" is * programatically added and removed from the content element as the panel * is activated/deactivated. */ .TabbedPanelsContentVisible { } /* Vertical Tabbed Panels * * The following rules override some of the default rules above so that the * TabbedPanels widget renders with its tab buttons along the left side of * the currently active content panel. * * With the rules defined below, the only change that will have to be made * to switch a horizontal tabbed panels widget to a vertical tabbed panels * widget, is to use the "VTabbedPanels" class on the top-level widget * container element, instead of "TabbedPanels". */ /* This selector floats the TabGroup so that the tab buttons it contains * render to the left of the active content panel. A border is drawn around * the group container to make it look like a list container. */ .VTabbedPanels .TabbedPanelsTabGroup { float: left; width: 10em; height: 20em; background-color: #EEE; position: relative; border-top: solid 1px #999; border-right: solid 1px #999; border-left: solid 1px #CCC; border-bottom: solid 1px #CCC; } /* This selector disables the float property that is placed on each tab button * by the default TabbedPanelsTab selector rule above. It also draws a bottom * border for the tab. The tab button will get its left and right border from * the TabGroup, and its top border from the TabGroup or tab button above it. */ .VTabbedPanels .TabbedPanelsTab { float: none; margin: 0px; border-top: none; border-left: none;border-right: none; } /* This selector disables the float property that is placed on each tab button * by the default TabbedPanelsTab selector rule above. It also draws a bottom * border for the tab. The tab button will get its left and right border from * the TabGroup, and its top border from the TabGroup or tab button above it. */ .VTabbedPanels .TabbedPanelsTabSelected { background-color: #EEE; border-bottom: solid 1px #999; } /* This selector floats the content panels for the widget so that they * render to the right of the tabbed buttons. */ .VTabbedPanels .TabbedPanelsContentGroup { clear: none; float: left; padding: 0px; width: 30em; height: 20em;} /***** POP IN *****/ #overlay { background: #000;position: absolute; top: 0; left: 0;z-index: 10000;width: 100%; } .prettyPopin {display: none;overflow: hidden;position: absolute; z-index: 11000;top: 50%; left: 50%; background-color:#FFF;} .prettyPopin a#b_close {display: none;position: absolute; z-index: 2;top: 10px; right: 13px;width: 41px; height: 9px;text-indent: -10000px;background: url(http://www.arnoldclark.com/images/template/prettyPopin/b_close.gif) bottom left no-repeat;} .prettyPopin .prettyContent {position: relative; height:482px; width:709px; font-size: 1.2em; background-color:#FFF} .prettyPopin .prettyContent .prettyContent-container {display: none;padding: 20px 15px 15px 15px;} .prettyPopin .prettyContent .loader {position: absolute;top: 50%; left: 50%;margin: -14px 0 0 -14px;}