/* ============================================================================= HTML5 Boilerplate CSS: h5bp.com/css ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; color: #222; } body { margin: 0; font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #323f45; color: #fff; text-shadow: none; } ::selection { background: #323f45; color: #fff; text-shadow: none; } a { color: #00e; text-decoration: none; } a:visited { } a:hover { color: #06e; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } label { cursor: pointer; } legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #ffffff; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } /* Font face import */ @font-face { font-family: 'cartobold'; src: url('../fonts/cartogothicstd-bold-webfont.eot'); src: url('../fonts/cartogothicstd-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/cartogothicstd-bold-webfont.woff') format('woff'), url('../fonts/cartogothicstd-bold-webfont.ttf') format('truetype'), url('../fonts/cartogothicstd-bold-webfont.svg#cartogothic_stdbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'cartobolditalic'; src: url('../fonts/cartogothicstd-bolditalic-webfont.eot'); src: url('../fonts/cartogothicstd-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/cartogothicstd-bolditalic-webfont.woff') format('woff'), url('../fonts/cartogothicstd-bolditalic-webfont.ttf') format('truetype'), url('../fonts/cartogothicstd-bolditalic-webfont.svg#cartogothic_stdbold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'carto'; src: url('../fonts/cartogothicstd-book-webfont.eot'); src: url('../fonts/cartogothicstd-book-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/cartogothicstd-book-webfont.woff') format('woff'), url('../fonts/cartogothicstd-book-webfont.ttf') format('truetype'), url('../fonts/cartogothicstd-book-webfont.svg#cartogothic_stdregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'cartoitalic'; src: url('../fonts/cartogothicstd-italic-webfont.eot'); src: url('../fonts/cartogothicstd-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/cartogothicstd-italic-webfont.woff') format('woff'), url('../fonts/cartogothicstd-italic-webfont.ttf') format('truetype'), url('../fonts/cartogothicstd-italic-webfont.svg#cartogothic_stditalic') format('svg'); font-weight: normal; font-style: normal; } /* Label Trickery ------------------- */ .labeltrick label { position:absolute; right:200px; top:0; bottom:0; -moz-transition:0.3s right ease; -ms-transition:0.3s right ease; -o-transition:0.3s right ease; -webkit-transition:0.3s right ease; transition:0.3s right ease; z-index:0} .labeltrick input { color:transparent; -moz-transition:0.3s all ease; -ms-transition:0.3s all ease; -o-transition:0.3s all ease; -webkit-transition:0.3s all ease; transition:0.3s all ease;} .labeltrick input[type="email"] { position:relative; z-index:2;} .labeltrick input { color:rgba(179,179,179,.9);} /* Placeholder */ .labeltrick input[type="email"]:-moz-placeholder { color:rgba(179,179,179,.9);} .labeltrick input[type="email"]:-ms-input-placeholder { color:rgba(179,179,179,.9);} .labeltrick input[type="email"]::-webkit-input-placeholder { color:rgba(179,179,179,.9);} .labeltrick input[type="email"]:focus:-moz-placeholder { color:rgba(179,179,179,0);} .labeltrick input[type="email"]:focus:-ms-input-placeholder { color:rgba(179,179,179,0);} .labeltrick input[type="email"]:focus::-webkit-input-placeholder { color:rgba(179,179,179,0);} /* Label */ .labeltrick input[type="email"] + label { color:rgb(179,179,179,.9);} .labeltrick input:focus + label { right:15px;} .labeltrick input[type="email"]:focus { background-color:rgba(255,255,255,.7);} /* ie */ .ie input { line-height:35px;} .ie input[type="email"] { color:#b3b3b3;} .ie label { right:15px;} .ie input[type="email"]:focus, .ie input[type="password"]:focus { background:transparent; -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)"; zoom:1;} .ie7 label, .ie6 label { display:none;} /* ------------------------------------ */ /* ===== Primary Styles ======================================================== Author: ========================================================================== */ /* Global */ body {background-color: #B8B2AA} .sitewidth { width:1120px; margin:0px auto;} .panelwidth { width:280px;} .home#content { background:url('../img/bg_15.png') top left repeat-x #ecebeb;} #content {background-color: #b8b2aa;} div.greenheading { background:url('../img/bg_15.png') top left repeat-x #323f45;} div.greyheading { background-color:#6b6666;} div.redheading {background:url('../img/bg_15.png') top left repeat-x #a02b2b;} .redlink { box-shadow:0px 4px 6px rgba(0,0,0,0.23);} .redlink span {display:block; background-color:#ffffff; height:32px; font:18px/32px 'cartobold'; text-transform:uppercase; color:#ffffff; border:0px; background-color:#a02b2b; box-shadow:inset 0px 0px 15px #782020; -webkit-box-shadow:inset 0px 0px 15px #782020; -moz-box-shadow:inset 0px 0px 15px #782020; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; padding:0px 10px; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .redlink.inline span {display:inline-block;} #leftcol a.redlink span { display:block; background-color:#ffffff; height:32px; font:18px/32px 'cartobold'; text-transform:uppercase; color:#ffffff; border:0px; background-color:#a02b2b; box-shadow:inset 0px 0px 15px #782020; -webkit-box-shadow:inset 0px 0px 15px #782020; -moz-box-shadow:inset 0px 0px 15px #782020; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; padding:0px 10px; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} #leftcol a.redlink.inline span {display:inline-block;} #leftcol a.redlink.inline {box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none;} .redlink span:hover { background-color:#df2831; box-shadow:inset 0px 0px 15px #b22027; -webkit-box-shadow:inset 0px 0px 15px #b22027; -moz-box-shadow:inset 0px 0px 15px #b22027; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} #leftcol a.redlink span:hover { background-color:#df2831; box-shadow:inset 0px 0px 15px #b22027; -webkit-box-shadow:inset 0px 0px 15px #b22027; -moz-box-shadow:inset 0px 0px 15px #b22027; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} h1 {display: block; margin: 0px 0px 25px 0px; font:46px/38px 'cartobold'; color: #323f45; letter-spacing:-0.02em; text-transform: uppercase;} h2 {display: block; margin: 40px 0px 20px 0px; font:35px/30px 'carto'; color:#a02b2b;} h3 {display: block; margin: 0px 0px -20px 0px; font:25px/25px 'carto'; color:#a02b2b;} /* changed from margin: 0px 0px 0px 0px; by Ben to get Infobase page spacing better 19/3/14. Same for H4 below */ h4 {display: block; margin: 0px 0px -15px 0px; font:25px/25px 'cartobold'; color: #323f45; letter-spacing:-0.02em; text-transform: uppercase;} h5 {display: block; margin: 0px 0px 0px 0px; font:15px/15px 'carto'; color: #323f45; letter-spacing:-0.02em;} h6 {display: block; margin: 0px 0px 0px 0px; font:15px/15px 'carto'; color:#a02b2b;} /* Header */ header { height:103px; background:url('../img/bg_header.jpg') top left repeat-x; width:100%;} #logo { margin-top:12px; float:left; height:69px; width:265px; padding:5px 15px 5px 0px; border-right:1px solid #5b5853;} #logo img { float:right;} header ul { float:left; margin:25px 0px 0px 15px;} header ul li { float:left; margin-right:5px;} header ul li a { -webkit-transition:all 0.2s ease-in-out; -o-transition:all 0.2s; -ms-transition:all 0.2s; -moz-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; text-transform:uppercase; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; font:19px/52px 'cartobold'; color:#dbdbdb; display:block; padding:0px 18px;} header ul li a:hover { background-color:#292621; color:#dbdbdb; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s; -ms-transition:all 0.2s } header ul li.active a { background-color:#ffffff; color:#782020;} /* Banner */ #banner { background:url('../img/bg_15.png') top left repeat-x #ffffff;} #banner #bannerinner.home {/* padding-bottom:45px;*/} #banner #bannerimage {padding:45px 0px; background:url('../img/bg_gtrplaceholder.jpg') bottom right no-repeat;} #banner #bannerimage .bannertext {margin-left:15px; float:left; width: 50%; display: block;} #banner h1.heading { margin:0px auto; text-transform:uppercase; color:#322e28; font:28px/28px 'carto';} #banner h1.heading span { color:#a02b2b; font-family:'cartobold';} /* Find a car */ #banner #findacar { padding:0px; text-transform:uppercase; background:url('../img/bg_15.png') top left repeat-x #a02b2b; height:60px; position:relative;} #banner #findacar ul { list-style-type:none; height:34px; margin:26px 0px 0px; padding:0px;} #banner #findacar li { display:block; height:34px; float:left;} #banner #findacar li a { -webkit-transition:all 0.2s ease-in-out; -o-transition:all 0.2s; -ms-transition:all 0.2s; -moz-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; border-left:1px solid #832222; border-right:1px solid #b35555; font:20px/34px 'carto'; color:#ffffff; padding-left:15px; display:block; height:34px;} #banner #findacar li:hover a { -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; -o-transition:all 0.2s; -ms-transition:all 0.2s; background-color:#782020; border-color:#782020;} #banner #findacar li a.active { color:#323f45; background-color:#ffffff; box-shadow:4px -3px 3px #741f1f; -moz-box-shadow:4px -3px 3px #741F1F; -webkit-box-shadow:4px -3px 3px #741F1F;} #banner #findacar li.auction a.active {box-shadow:-4px -3px 3px #741F1F; -moz-box-shadow:-4px -3px 3px #741F1F;} #banner #findacar .dreamride { width:264px; border-right:1px solid #b35555; float:left; text-align:right; padding-right:15px; font:20px/34px 'carto'; color:#ffffff;} #banner #findacar span.bold { font-family:'cartobold';} #banner #findacar .featured { width:280px; } #banner #findacar .auction { width:560px; position:relative;} #banner #findacar .auction a { cursor:pointer; border-right:0px; background:url('../img/icon_arrowdwnwht.png') 530px center no-repeat;} #banner #findacar .auction span.auctionwrap { width:160px; float:left;} #banner #findacar .auction:hover a:hover span.auctionwrap { color:#43555d;} #banner #findacar .auction:hover span.auctionwrap { color:#a02b2b;} #banner #findacar .auction:hover a:hover { background-color:#323f45; color:#ffffff;} #banner #findacar .auction:hover a { background-color:#782020; color:#ffffff;} #banner #findacar .auction #auctionoptions { z-index:105; overflow:hidden; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; -o-transition:all 0.2s; -ms-transition:all 0.2s; display:block; background-color:#ffffff; height:0; opacity:0; width:560px; position:absolute; right:0px; top:34px;} #banner #findacar .auction:hover #auctionoptions { height:auto; opacity:1; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; -o-transition:all 0.2s; -ms-transition:all 0.2s;} #banner #findacar #auctionoptions a { border:none; background:#782020; color:#ffffff;} #banner #findacar #auctionoptions a:hover { background-color:#323f45; color:#ffffff;} /* Banner form and skinning */ #banner .home #findacar {/* margin-bottom:45px;*/} #banner form { margin-top:30px;} #banner form .row { display:block; margin-bottom: 35px;} #banner form .panelwidth { float:left; padding:0px 15px; width:250px;} #banner form .choose span {display:block; margin:10px 0px; font:14px/14px 'cartobold'; color:#a02b2b; text-align: right; text-transform: uppercase;} #banner form .extra {margin-top:30px; position: relative;} /* Select Box styling -----------------*/ .selectBox-dropdown { min-width:250px; position:relative; line-height:34px; text-decoration:none; text-align:left; color:#989797; outline:none; vertical-align:middle; background:#FaFaFa; background:-moz-linear-gradient(top, #d7d7d7 1%, #f0f0f0 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(1%, #d7d7d7), color-stop(100%, #f0f0f0)); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7d7', endColorstr='#f0f0f0', GradientType=0); -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; border-radius:2px; display:inline-block; cursor:default; height:34px; box-shadow:0 4px 6px rgba(0, 0, 0, 0.23); float:left; border:1px solid #cfcfcf; cursor:pointer;} .selectBox-dropdown:focus { background:-moz-linear-gradient(top, #f0f0f0 1%, #d7d7d7 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(1%, #f0f0f0), color-stop(100%, #d7d7d7)); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#d7d7d7', GradientType=0);} .selectBox-dropdown.selectBox-menuShowing { -moz-border-radius-bottomleft:0; -moz-border-radius-bottomright:0; -webkit-border-bottom-left-radius:0; -webkit-border-bottom-right-radius:0; border-bottom-left-radius:0; border-bottom-right-radius:0;} .selectBox-dropdown .selectBox-label { padding:0px 0px 0px 15px; display:inline-block; white-space:nowrap; overflow:hidden; width:auto !important; font:15px/34px 'cartobold'; color:#989797; text-transform:uppercase; text-shadow:0px 1px 1px #ffffff;} .selectBox-dropdown .selectBox-arrow { position:absolute; top:0; right:15px; width:13px; height:100%; background:url(../img/icon_selectarrowclosed.png) 50% center no-repeat;} .selectBox-menuShowing .selectBox-arrow { background:url(../img/icon_selectarrowopen.png) 50% center no-repeat;} /* Dropdown menu */ .selectBox-dropdown-menu { border:1px solid #ffffff; position:absolute; z-index:100; max-height:300px; min-height:1em; background:#ecebeb; -moz-box-shadow:0 2px 6px rgba(0, 0, 0, .2); -webkit-box-shadow:0 2px 6px rgba(0, 0, 0, .2); box-shadow:0 2px 6px rgba(0, 0, 0, .2); overflow:auto; -webkit-border-radius-bottomleft:2px; -moz-border-radius-bottomleft:2px; -o-border-radius-bottomleft:2px; border-radius-bottomleft:2px; -webkit-border-radius-bottomright:2px; -moz-border-radius-bottomright:2px; -o-border-radius-bottomright:2px; border-radius-bottomright:2px;} /* Inline control */ .selectBox-inline { min-width:180px; outline:none; background:#FFF; display:inline-block; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; overflow:auto; border:1px solid #ffffff; max-height:4em; min-height:2em; background:#ecebeb; -moz-box-shadow:0 2px 6px rgba(0, 0, 0, .2); -webkit-box-shadow:0 2px 6px rgba(0, 0, 0, .2); box-shadow:0 2px 6px rgba(0, 0, 0, .2);} .selectBox-inline:focus {} /* Options */ .selectBox-options,.selectBox-options li,.selectBox-options li a { list-style:none; display:block; cursor:default; padding:0; margin:0;} .selectBox-options li { height:32px;} .selectBox-options li a { white-space:nowrap; overflow:hidden; font:14px/32px 'cartobold'; color:#83827f; text-transform:uppercase; text-shadow:0px 1px 1px rbga(255,255,255,0.3); padding-left:15px;} .selectBox-options li.selectBox-hover a { background-color:#a02b2b; color:#ffffff;} .selectBox-options li.selectBox-disabled a { color:#888; background-color:transparent;} .selectBox-options li.selectBox-selected a { background-color:#323f45; color:#ffffff;} .selectBox-options .selectBox-optgroup { color:#666; background:#EEE; font-weight:bold; line-height:1.5; padding:0 .3em; white-space:nowrap;} /* Disabled state */ .selectBox.selectBox-disabled { color:#888 !important;} .selectBox-dropdown.selectBox-disabled .selectBox-arrow { opacity:.5; filter:alpha(opacity=50); border-color:#666;} .selectBox-inline.selectBox-disabled { color:#888 !important;} .selectBox-inline.selectBox-disabled .selectBox-options a { background-color:transparent !important;} /* ------------------------------------ */ #banner .panelwidth.optionsleft {margin-bottom:35px; position:relative; z-index:800;} #banner .searchupcoming form .row {margin-bottom:0px;} #banner .extra {margin-top:10px;} #banner .extra .row {display:none;} #banner .extra .row.open {display:block;} .extra .year .selectBox-dropdown {min-width:100px;} .extra .year span.to {font:16px/37px 'cartobold'; color: #989797; text-transform: uppercase; float:left; height: 37px; margin:0px 12px 0px 13px;} .extra .chassis .selectBox-inline {width: 100%; max-height:6em; min-height:2em; min-width: 100%;} #banner span.refinesearch {cursor:pointer; position:relative; top:5px; font:15px/15px 'cartobold'; color:#a02b2b; text-transform: uppercase; padding-right:20px; background:url('../img/icon_extrasearchclosed.png') right 2px no-repeat;} #banner span.refinesearch.open {background-image:url('../img/icon_extrasearchopen.png');} .extra .year label.history {margin-top:10px;} .extra input.refine {background-color:#ffffff; height:32px; font:18px/32px 'cartobold'; text-transform:uppercase; color:#ffffff; border:0px; background-color:#a02b2b; box-shadow:inset 0px 0px 15px #782020; -webkit-box-shadow:inset 0px 0px 15px #782020; -moz-box-shadow:inset 0px 0px 15px #782020; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; padding:0px 10px; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .extra input.refine:hover { background-color:#df2831; box-shadow:inset 0px 0px 15px #b22027; -webkit-box-shadow:inset 0px 0px 15px #b22027; -moz-box-shadow:inset 0px 0px 15px #b22027; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} #banner .searchupcoming .extra .row {margin-bottom:10px;} #banner .searchupcoming .extra .row.submit {margin-bottom:25px;} /* Checkbox/Radio styling ------------- */ /* hide the real form element by opacity:0 and position:absolute - display:block and visibility:hidden do not work because then form elements cannot get the focus and actually get checked or unchecked .skinned-form-controls input[type="checkbox"], .skinned-form-controls input[type="radio"] { position:absolute; -moz-opacity:0; -webkit-opacity:0; opacity:0;} /* prevent the entire page from scrolling if there is overflow and checkbox or radio button are clicked .skinned-form-controls label { position:relative; display: block; font:16px/16px 'cartobold'; color: #989797; text-transform: uppercase;} /* fallback for IE6, IE7 and IE8 .skinned-form-controls input[type="checkbox"], .skinned-form-controls input[type="radio"] { position:static\\9;} .skinned-form-controls input[type="checkbox"] + span::before { position:relative; top:-2px; content:""; display:inline-block; width:33px; height:26px; vertical-align:middle; background-repeat:no-repeat;} .skinned-form-controls input[type="radio"] + span::before { position:relative; top:1px; content:""; display:inline-block; width:30px; height:26px; vertical-align:middle; background-repeat:no-repeat;} .skinned-form-controls input[type="checkbox"]:checked + span::before { background-position:0 -34px;} .skinned-form-controls input[type="radio"] + span::before { background-position:0px 0;} .skinned-form-controls input[type="radio"]:checked + span::before { background-position:0px -26px;} /* disabled form elements .skinned-form-controls input[type="radio"]:disabled + span,.skinned-form-controls input[type="checkbox"]:disabled + span,.skinned-form-controls input[type="radio"]:disabled + span::before,.skinned-form-controls input[type="checkbox"]:disabled + span::before { -moz-opacity:.6; -webkit-opacity:.6; opacity:.6;} /* focused and active form elements .skinned-form-controls input[type="checkbox"]:focus + span::before, .skinned-form-controls input[type="radio"]:focus + span::before,.skinned-form-controls input[type="checkbox"]:active + span::before,.skinned-form-controls input[type="radio"]:active + span::before { outline:dotted 1px #ccc;} /* skin-specific sprite .skinned-form-controls.skinned-form-controls-mac input[type="checkbox"] + span::before { background-image:url("../img/icon_checksprite.png");} .skinned-form-controls.skinned-form-controls-mac input[type="radio"] + span::before { background-image:url("../img/icon_radiosprite.png");} /* ----------------------------------- */ #banner form .extra label {float:left;} #banner form .extra label.all {margin: 0px 40px 0px 15px;} #banner form .extra label.earlier {margin-right: 40px;} #banner form .optionsleft label { text-align: right;} #banner form .optionsleft h4 {text-align:right; margin-bottom:5px; padding-right:5px;} /* right aligned radio test */ /* Checkbox/Radio styling ------------- */ /* hide the real form element by opacity:0 and position:absolute - display:block and visibility:hidden do not work because then form elements cannot get the focus and actually get checked or unchecked */ .skinned-form-controls input[type="checkbox"], .skinned-form-controls input[type="radio"] { position:absolute; -moz-opacity:0; -webkit-opacity:0; opacity:0;} /* prevent the entire page from scrolling if there is overflow and checkbox or radio button are clicked */ .skinned-form-controls label { position:relative; display: block; font:16px/16px 'cartobold'; color: #989797; text-transform: uppercase;} /* fallback for IE6, IE7 and IE8 */ .skinned-form-controls input[type="checkbox"], .skinned-form-controls input[type="radio"] { position:static\\9;} .skinned-form-controls input[type="checkbox"] + span::before { position:relative; top:2px; content:""; display:inline-block; width:33px; height:26px; vertical-align:middle; background-repeat:no-repeat;} .skinned-form-controls input[type="radio"] + span::after { position:relative; top:1px; content:""; display:inline-block; width:30px; height:26px; vertical-align:middle; background-repeat:no-repeat;} .skinned-form-controls input[type="checkbox"]:checked + span::before { background-position:left -26px;} .skinned-form-controls input[type="radio"] + span::after { background-position:right 0px;} .skinned-form-controls input[type="radio"]:checked + span::after { background-position:right -26px;} /* disabled form elements */ .skinned-form-controls input[type="radio"]:disabled + span,.skinned-form-controls input[type="checkbox"]:disabled + span,.skinned-form-controls input[type="radio"]:disabled + span::after,.skinned-form-controls input[type="checkbox"]:disabled + span::before { -moz-opacity:.6; -webkit-opacity:.6; opacity:.6;} /* focused and active form elements */ .skinned-form-controls input[type="checkbox"]:focus + span::before, .skinned-form-controls input[type="radio"]:focus + span::after,.skinned-form-controls input[type="checkbox"]:active + span::before,.skinned-form-controls input[type="radio"]:active + span::after { outline:dotted 1px #ccc;} /* skin-specific sprite */ .skinned-form-controls.skinned-form-controls-mac input[type="checkbox"] + span::before { background-image:url("../img/icon_checksprite.png");} .skinned-form-controls.skinned-form-controls-mac input[type="radio"] + span::after { background-image:url("../img/icon_radiosprite.png");} /* ----------------------------------- */ /* Homepage */ /* infopanel */ .home .greenheading h2 { letter-spacing:-0.04em; font:27px/50px 'carto'; color:#ffffff; width:545px; padding-left:15px; float:left; text-transform:uppercase; margin-top:15px; margin-bottom:5px;} .home .greenheading h2 span { font-family:'cartobold'} .home .infopanel .copy { width:529px; padding:15px; float:left; border-right:1px solid #c9c6c6; margin:15px 0px 30px;} .home .infopanel .copy p { font:15px/18px Arial, Helvetica, sans-serif; color:#5f5656; text-shadow:0px 1px 0px #ffffff; margin:0px;} .home .infopanel .mailinglist { width:530px; float:left; margin-top:15px; padding:15px;} .home .infopanel .mailinglist div.text { position:relative; width:362px; background-color:#ffffff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;} .home .infopanel .mailinglist .text input { height:42px; font:bold 18px/42px Arial, Helvetica, sans-serif; border:1px solid #cac9c9; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; width:330px; padding:0px 15px; box-shadow:0px 1px 0px #ffffff; -webkit-box-shadow:0px 1px 0px #ffffff; text-transform:uppercase;} .home .infopanel .mailinglist .text label { text-transform:uppercase; color:#6d6d6d; margin-top:1px; height:42px; font:12px/42px Arial, Helvetica, sans-serif; right:200px;} .home .infopanel .mailinglist .text.labeltrick input:focus + label { right:15px;} .home .infopanel .mailinglist .submit { box-shadow:0px 4px 6px rgba(0,0,0,0.23); float:left; margin-top:15px;} .home .infopanel .mailinglist .submit input { background-color:#ffffff; height:32px; font:18px/32px 'cartobold'; text-transform:uppercase; color:#ffffff; border:0px; background-color:#a02b2b; box-shadow:inset 0px 0px 15px #782020; -webkit-box-shadow:inset 0px 0px 15px #782020; -moz-box-shadow:inset 0px 0px 15px #782020; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; padding:0px 10px; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .home .infopanel .mailinglist .submit input:hover { background-color:#df2831; box-shadow:inset 0px 0px 15px #b22027; -webkit-box-shadow:inset 0px 0px 15px #b22027; -moz-box-shadow:inset 0px 0px 15px #b22027; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} /* toolpanel */ .toolpanel .panelwidth { float:left; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .toolpanel .panelwidth .greyheading { transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .toolpanel .greyheading h3 { letter-spacing:-0.04em; text-transform:uppercase; color:#ffffff; font:21px/21px 'carto'; margin:7px 0px; display:block; border-right:1px solid #867f7f; padding:3px 0px 3px 15px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .toolpanel .greyheading h3 span { font-family:'cartobold';} .toolpanel .last h3 { border-right:0px;} .toolpanel .panelwidth .content { position:relative; height:160px; margin:15px 0px; padding:7px 15px; width:auto; border-right:1px solid #c9c6c6;} .toolpanel .last .content { border-right:0px; width:250px;} .toolpanel .content p { font:15px/17px Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:#5f5656;} .toolpanel .content ul { margin:0px; padding:0px 0px 0px 20px; color:#a02b2b;} .toolpanel .content ul li a { display:block; color:#5f5656; font:15px/17px Arial, Helvetica, sans-serif;} .toolpanel .content ul li a:hover { color:#323f45;} .toolpanel .content .redlink {position:absolute; bottom:8px; float:left; margin-top:20px;} .toolpanel .content .redlink span { display:block; background-color:#ffffff; height:32px; font:18px/32px 'cartobold'; text-transform:uppercase; color:#ffffff; border:0px; background-color:#a02b2b; box-shadow:inset 0px 0px 15px #782020; -webkit-box-shadow:inset 0px 0px 15px #782020; -moz-box-shadow:inset 0px 0px 15px #782020; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; padding:0px 10px; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .toolpanel .content .redlink span:hover { background-color:#df2831; box-shadow:inset 0px 0px 15px #b22027; -webkit-box-shadow:inset 0px 0px 15px #b22027; -moz-box-shadow:inset 0px 0px 15px #b22027; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} /* toolpanel hovers */ .toolpanel .panelwidth:hover { background-color:#ffffff; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .toolpanel .panelwidth:hover .greyheading { background-color:#252f34; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .toolpanel .panelwidth:hover h3 { border-color:#252f34; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} /* car panels */ .home .carpanel { background:url("../img/bg_15.png") top left repeat-x #ffffff; margin-bottom:15px; padding-bottom:15px;} .carpanel .row { margin-top:15px;} .home .carpanel .row {border-bottom: 1px solid #C9C6C6; margin-top:0px;} .carpanel .car { float:left; padding:15px 0px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .carpanel .car .content { height:425px; position:relative; padding:0px 15px; width:249px; border-right:1px solid #d2d1d1;} .home .carpanel .car .content {height:385px;} .carpanel .car.last .content { border-right:0px;} .carpanel .car img { margin-bottom:13px;} .carpanel .car .cartitle { margin-bottom:8px; color:#323f45; text-transform:uppercase; letter-spacing:-0.04em; font:18px/17px 'cartobold'; display:block;} .carpanel .car .cartitle span { color:#a02b2b;} .carpanel .car .special { color:#a02b2b; text-transform:uppercase; letter-spacing:-0.04em; font:14px/14px 'cartobold'; display:block;} .carpanel .car .content ul { list-style-image:url("../img/icon_featurelist.png"); margin:10px 0px 0px; padding:0px 0px 0px 20px;} .carpanel .car .content ul li { color:#746e6e; font:15px/16px 'carto'; letter-spacing:-0.04em;} .carpanel .car .content div.price { position:absolute; bottom:0px; border-top:1px solid #c1c5c7; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .carpanel .car .content div.price .pricelink { display:block; width:250px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .carpanel .car .content div.price .pricelink span { transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .carpanel .car .content div.price .wrapper { letter-spacing:-0.04em; display:block; padding-top:8px; position:relative;} .carpanel .car .content div.price span.price { font:28px/28px 'cartobold'; color:#a02b2b; text-transform:uppercase; float:left; margin-left:8px;} .carpanel .car .content .price .currency { font:16px/16px 'cartobold'; color:#a02b2b; text-transform:uppercase; position:relative; top:7px; margin-left:7px;} .carpanel .car .content .price .conditions { font:bold 11px/11px Arial, Helvetica, sans-serif; color:#323f45; text-transform:uppercase; display:block; margin-left:8px; margin-bottom:10px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .featured .carpanel .car .content {height: 385px; } .auctionupcoming .carpanel .car .content {height: 420px;} /* car panels hovers */ .carpanel .row .car:hover { background-color:#f2f2f2; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .carpanel .row .car:hover div.price { box-shadow:0px 4px 6px rgba(0,0,0,0.23); transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .carpanel .row .car:hover .price .pricelink { background-color:#a02b2b; box-shadow:inset 0px 0px 15px #782020; -webkit-box-shadow:inset 0px 0px 15px #782020; -moz-box-shadow:inset 0px 0px 15px #782020; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .carpanel .row .car:hover .price .pricelink span { color:#ffffff; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .carpanel .row .car:hover .price .pricelink span.conditions { color:#e9c9ca; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .carpanel .row .car:hover .price .pricelink:hover { background-color:#df2831; box-shadow:inset 0px 0px 15px #a51e24; -webkit-box-shadow:inset 0px 0px 15px #b22027; -moz-box-shadow:inset 0px 0px 15px #b22027; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} /* Search results */ /* header */ .searchresults .greenheading h1 {display: block; margin: 30px 0px 20px 295px;} .searchresults .greenheading h1 span.searchtitle {font:46px/39px 'cartobold'; color: #ffffff; letter-spacing:-0.02em; text-transform: uppercase; } .searchresults .greenheading h1 span {display: block; color: #7a939e; font:15px/15px Arial, Helvetica, sans-serif; text-transform: none; letter-spacing: 0px;} .searchresults .greyheading {height: 32px; margin-bottom: 15px;} .searchresults .greyheading .searchcount {font:15px/32px Arial, Helvetica, sans-serif; margin-left: 295px; color: #eeeded; } .searchresults .greyheading .searchcount strong {text-transform: uppercase;} /* pagination */ ul.pagination {list-style-type: none; float: right; width: auto; margin: 0px 15px 0px; padding: 0px; } ul.pagination li {float: left; height: 32px;} ul.pagination li a {display: block; height: 18px; padding: 0px 5px; font:15px/18px Arial, Helvetica, sans-serif; color: #eeeded; margin-top: 7px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} ul.pagination li a:hover {background-color: #989797; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} ul.pagination li a.active {color: #ffffff; background-color: #323f45;} /* search panel */ #contentinner #searchpanel {float:left; padding-bottom:15px; border-left:1px solid #c9c6c6;} #content.auctionupcoming #contentinner #searchpanel {border:0px;} .searchresults .carpanel {} .searchresults .carpanel .row {margin:0px; border-bottom:1px solid #c9c6c6;} .searchresults .carpanel .row .car:hover {background-color:#ffffff;} .searchresults .carpanel .row .car.last {border-right:0px;} /* Left column */ #leftcol {/*border-right:1px solid #c9c6c6;*/ width: 279px; float:left;} #leftcol .redheading h4 {font:20px/40px 'carto'; color: #ffffff; margin: 15px 15px 0px 0px; display: block; text-align: right; text-transform: uppercase; letter-spacing: -0.02em;} #leftcol .redheading h4 span {font-family: 'cartobold';} #leftcol .contact {border-bottom:1px solid #c9c6c6;} #leftcol .contact p {margin: 20px 15px 40px; color: #6b6666; font:14px/17px Arial, Helvetica, sans-serif; text-transform: uppercase; text-align: right; } #leftcol .contact p a {color: #6b6666; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} #leftcol .contact p a:hover {color:#a02b2b; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} #leftcol .testimonialsmall {border-bottom: 1px solid #c9c6c6; padding-bottom: 15px;} #leftcol .testimonialsmall h4 {text-align:right; text-transform:uppercase; color: #323f45; font:20px/20px 'cartobold'; display: block; margin: 15px 15px 0px 0px;} #leftcol .testimonialsmall h4 a{text-align:right; text-transform:uppercase; color: #323f45; font:20px/20px 'cartobold'; display: block; margin: 15px 15px 0px 0px;} #leftcol .testimonialsmall h4:hover{text-align:right; text-transform:uppercase; color: #545f67; font:20px/20px 'cartobold'; display: block; margin: 15px 15px 0px 0px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} #leftcol .testimonialsmall p {color: #6b6666; font:14px/14px Arial, Helvetica, sans-serif; margin: 0px 0px 15px} #leftcol .testimonialsmall span {text-transform: uppercase; color: #a02b2b; display: block; text-align: right; font:12px/12px 'carto'; margin-right: 15px;} #leftcol .testimonialsmall span.name {font-family: 'cartobold'} #leftcol .testimonialsmall blockquote {padding:0px; margin:0px; } #leftcol .testimonialsmall blockquote div {background:url('../img/icon_quoteopen.png') 0px 0px no-repeat; padding-top:15px;} #leftcol .testimonialsmall blockquote img {float:right; margin:0px 15px 15px 15px;} #leftcol .greenheading h4 {font:20px/20px 'carto'; color: #ffffff; margin: 25px 15px 10px 0px; display: block; text-align: right; text-transform: uppercase; letter-spacing: -0.02em;} #leftcol .greenheading h4 span {font-family: 'cartobold';} #leftcol .carpanel4 .row {border-bottom: 1px solid #c9c6c6; position:relative;} #leftcol .carpanel4 h3 {text-align:left; text-transform:uppercase; color: #323f45; font:17px/17px 'cartobold'; display: block; margin: 15px 15px 0px 0px;} #leftcol .carpanel4 h3 a {text-align:left; text-transform:uppercase; color: #323f45; font:17px/17px 'cartobold'; display: block; margin: 15px 15px 0px 0px;} #leftcol .carpanel4 .car {z-index:20; float:left; width: 140px; padding: 7px 0px;transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; } #leftcol .carpanel4 .car.last {width: 139px; z-index: 10;} #leftcol .carpanel4 .car .content {display:block; position:relative; border-right: 1px solid #c9c6c6; width: 125px; padding: 0px 7px 19px;} #leftcol .carpanel4 .car.last .content {border-right: 0px; width: 124px;} #leftcol .carpanel4 .car img {margin-bottom:8px;} #leftcol .carpanel4 .car .cartitle {margin-bottom:8px; color:#323f45; text-transform:uppercase; letter-spacing:-0.04em; font:13px/13px 'cartobold'; display:block;} #leftcol .carpanel4 .car .cartitle span {font-family:'carto'; color:#a02b2b;} #leftcol .carpanel4 .car .price {color:#a02b2b; position: absolute; bottom: 0px; text-transform:uppercase; letter-spacing:-0.04em; font:13px/13px 'cartobold'; display:block;} #leftcol .carpanel4 .car .go {padding:7px; display:block; color:#c7c7c7; position: absolute; bottom: -7px; right:-1px; text-transform:uppercase; letter-spacing:-0.04em; font:11px/11px 'carto'; display:block;transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} #leftcol .carpanel4 .car:hover {background-color: #ffffff; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} #leftcol .carpanel4 .car:hover .go {z-index:100; color: #a02b2b; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} #leftcol .carpanel4 .car:hover .go:hover {background-color: #a02b2b; color: #ffffff;} #leftcol .moreinfo {padding-bottom:15px; margin-bottom:15px;} #leftcol .moreinfo a {color:#7A939E; font-size:14px; text-transform: uppercase; text-align:right; display: block; margin: 0px; padding: 0px 15px; line-height:26px; height: 25px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} #leftcol .moreinfo a:hover {color:#a02b2b; background-color:#ffffff; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} #leftcol .news {border-bottom: 1px solid #c9c6c6; padding-bottom: 15px;} #leftcol .news h4 {text-align:right; text-transform:uppercase; color: #323f45; font:20px/20px 'cartobold'; display: block; margin: 15px 15px 0px 0px;} #leftcol .news p {color: #6b6666; font:14px/14px Arial, Helvetica, sans-serif; margin: 0px 0px 15px} #leftcol .news span {text-transform: uppercase; color: #a02b2b; display: block; text-align: right; font:12px/12px 'carto'; margin-right: 15px;} #leftcol .news span.name {font-family: 'cartobold'} #leftcol .news div {padding-top:15px; padding-right:10px} #leftcol .news img {float:right; margin:0px 15px 15px 15px;} /* Car page */ #banner.breadcrumbs {padding: 37px 0px 22px; position: relative; z-index: 200;} .breadcrumbs .panelwidth {float:left;} .breadcrumbs .searchterms {font: 20px/20px 'carto'; color:#a02b2b; text-align: right; display:block; padding-right:15px; text-transform: uppercase;} .breadcrumbs .searchterms span {font-family: 'cartobold';} .breadcrumbs .crumbs {margin-left:15px; float:left; font:15px/20px 'cartobold'; color: #6b6666;} .breadcrumbs .crumbs a {font:15px/20px 'cartobold'; color: #6b6666; text-transform: uppercase; text-decoration: none; margin: 0px 7px;} .breadcrumbs .crumbs a:hover {color:#323f45;} .cardetail .greenheading h1 {display: block; margin: 30px 0px 20px 295px; font:46px/39px 'cartobold'; color: #ffffff; letter-spacing:-0.02em; text-transform: uppercase; } .cardetail .greenheading h1 span {color: #bbc7cc; font-family: 'carto';} .cardetail .greyheading {margin-bottom:0px;} .cardetail .greyheading h2 {color: #fff; margin:0px 0px 0px 295px; display: block; font:23px/43px 'carto'; text-transform:uppercase; } .cardetail #leftcol {border:0px;} #content .cardetail {padding: 0px 15px; background-color: #ebebeb;} .cardetail .carcontentinner {float:left; width:560px; border-left:1px solid #c9c6c6; border-right:1px solid #c9c6c6;} .cardetail .carcontent .thumbs {position:relative; min-height:467px; width:530px; overflow: hidden; padding:15px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .cardetail .carcontent .thumbs:hover {background-color:#fff;transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .cardetail .thumbs hr {margin:15px 0px 0px; position: absolute; bottom: 0px; left: 15px; width:530px;} #slider .enlarge {z-index:9999; width:100%; text-transform:uppercase; color:#ffffff; position: absolute; bottom: 0px; height:22px; background-color:rgba(0,0,0,0.3); text-align: center; font:12px/22px 'cartobold';} #slider .loading {text-transform:uppercase; top:50%; margin-top:-15px; text-align:center; width:530px; position: absolute; height:30px; font:16px/30px "carto"; color:#c6c6c6; text-shadow:0px 1px 0px #ffffff;} #slider {height:398px;} /* * jQuery FlexSlider v2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider {margin: 0; padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; height:398px; overflow-y:hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider {position: relative; zoom: 1;} .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;} .loading .flex-viewport {max-height: 398px;} .flexslider .slides {zoom: 1;} #carousel li {margin:1px 1px 0px 0px; height:67px; overflow:hidden;} #carousel ul {height:67px; overflow:hidden;} .carcontentinner #carousel {height:67px;} /* Direction Nav */ .flex-direction-nav {*height: 0;} .flex-direction-nav a {padding:5px; width: 12px; height: 23px; margin: -15px 0 0; display: block; background: url(../img/bg_directionnav.png) no-repeat -2px 5px rgba(0,0,0,0.8); position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;} .flex-direction-nav .flex-next {background-position: -21px 5px; right: -36px; } .flex-direction-nav .flex-prev {left: -36px;} .flexslider:hover .flex-next {opacity: 0.8; right: 0px;} .flexslider:hover .flex-prev {opacity: 0.8; left: 0px;} .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;} .flex-direction-nav .flex-disabled {opacity: .1!important; filter:alpha(opacity=30); cursor: default;} /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;} .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);} .flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; } .flex-control-thumbs {margin:0; position: static; overflow: hidden;} .flex-control-thumbs li {width: 25%; float: left; margin: 0;} .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} .flex-active-slide img {opacity:1;} @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev {opacity: 1; left: 0;} .flex-direction-nav .flex-next {opacity: 1; right: 0;} } /* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;} .cboxIframe{width:100%; height:100%; display:block; border:0;} #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:url(../img/bg_overlay.png) repeat 0 0;} #colorbox{} #cboxContent{background:#fff; overflow:hidden; background-color:#ECEBEB; padding:15px; box-shadow: 0px 0px 20px #322e28; -moz-box-shadow: 0px 0px 2px #322e28; -webkit-box-shadow: 0px 0px 2px #322e28;} .cboxIframe{background:#fff;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{margin-bottom:0px;} #cboxTitle{display:none; position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{display:none; position:absolute; bottom:4px; left:58px; color:#949494;} #cboxSlideshow{display:none; position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:50%; margin:10px 0px 0px; left:15px; padding:5px; background:url(../img/bg_directionnav.png) no-repeat -2px 5px rgba(0,0,0,0.8); width:12px; height:23px; text-indent:-9999px; opacity:0.6;} #cboxPrevious:hover{opacity: 1} #cboxNext{position:absolute; bottom:50%; margin:10px 0px 0px; right:15px; padding:5px; background:url(../img/bg_directionnav.png) no-repeat -21px 5px rgba(0,0,0,0.8); width:12px; height:23px; text-indent:-9999px; opacity:0.6;} #cboxNext:hover{opacity: 1;} #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;} #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;} #cboxClose:hover{background-position:-25px -25px;} /* The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9. See: http://jacklmoore.com/notes/ie-transparency-problems/ */ .cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); } .cardetail .info {padding: 20px 15px 0px; width: 530px;} .cardetail .info hr {margin: 15px 0px 0px 0px;} .cardetail .info .cartitle {text-shadow:0px 1px 1px rgba(255,255,255,0.7);margin:0px; color: #323f45; display: block; font:27px/27px 'cartobold'; letter-spacing:-02px; text-transform: uppercase;} .cardetail .info .cartitle span {font-family: 'carto'} .cardetail .info .special {text-shadow:0px 1px 1px rgba(255,255,255,0.7);font:20px/20px 'cartobold'; color:#a02b2b; text-transform: uppercase; display: block; margin-bottom:20px;} .cardetail .info .stat {width: 265px; float:left; display: block; font:21px/21px 'carto'; text-transform: uppercase;} .cardetail .info .key {color:#6b6666;} .cardetail .info .value {text-shadow:0px 1px 1px rgba(255,255,255,0.7);color: #323f45; font-family: 'cartobold'} .cardetail .info .carfeaturelist {float:left; width:243px; margin:25px 0px 15px 20px; padding: 0px; list-style-image:url('../img/icon_carlist.png');} .cardetail .info .carfeaturelist li {text-shadow:0px 1px 1px rgba(255,255,255,0.7);font:17px/17px Arial, Helvetica, sans-serif; color: #746e6e;} .cardetail .instructions {padding:0px 15px;} .cardetail .instructions h4 {text-shadow:0px 1px 1px rgba(255,255,255,0.7);font:20px/20px 'cartobold'; margin: 40px 0px 15px; padding: 0px; color:#323f45; text-transform:uppercase;} .cardetail .instructions p {color: #6b6666; font:15px/17px Arial, Helvetica, sans-serif; margin-bottom:20px;} .cardetail .instructions .redlink {float:left; margin-right:10px;} .cardetail .instructions .redlink span {font-size:16px; line-height: 28px; height: 28px;} .cardetail .instructions hr {margin:35px 0px 0px;} .cardetail .terms {padding: 15px;} .cardetail .terms p {color: #6b6666; font:15px/17px Arial, Helvetica, sans-serif; margin-bottom:20px;} /* Car detail right column */ .cardetail .carcontentright {float:left; width:279px; position: relative; } .cardetail .carcontentright .enquiry {z-index:150; width:279px; height: 53px; position: absolute; top: 0px;} .cardetail .carcontentright #enquiryanchor {} .cardetail .carcontentright .sticky {position: absolute; top: 53px; width:100%;} .cardetail .carcontentright .redheading {transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .cardetail .carcontentright .redheading a {color: #ffffff; padding-top:11px; display: block; font:20px/42px 'carto'; letter-spacing:-0.04px; text-transform: uppercase; padding-left:15px;} .cardetail .carcontentright .redheading a span {font-family:'cartobold'} .cardetail .carcontentright .redheading a span.mail {opacity:1; background:url('../img/icon_enquiry.png') 0px center no-repeat; float:left; width: 42px; height: 42px; display: block; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .cardetail .carcontentright .enquiry:hover {background-color:#d5262e; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .cardetail .carcontentright .enquiry a:hover span.mail {opacity:1; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .cardetail .carcontentright .greenheading .price {margin-top:25px; letter-spacing:-0.04em; color: #ffffff; font:36px/36px 'cartobold'; padding-left:15px; display: block;} .cardetail .carcontentright .greenheading .price span {font-family:'carto';} .cardetail .carcontentright .greenheading .conditions {display:block; font:12px/12px 'carto'; color: #c6c4c4; padding-left:15px; text-transform: uppercase; margin-bottom:15px;} .cardetail .carcontentright .greyheading {margin-bottom:0px;} .cardetail .carcontentright .greyheading span {display: block; font:16px/28px 'carto'; color: #ffffff; padding-left:15px; text-transform: uppercase; letter-spacing: -0.02em;} .cardetail .carcontentright .pricing {margin: 0px; padding:0px 0px 15px 15px; border-bottom:1px solid #c9c6c6;} .cardetail .carcontentright .pricing dt:first-child {margin-top:15px;} .cardetail .carcontentright .pricing dt {font: 15px/15px 'cartobold'; color:#323f45; text-transform: uppercase; letter-spacing: -0.02em; margin-top:26px;} .cardetail .carcontentright .pricing dd {color:#6b6666; font:13px/13px 'carto'; padding-left:7px; margin: 0px; letter-spacing: -0.02em; text-transform: uppercase; margin-top:4px;} .cardetail .carcontentright .pricing .greenheading {margin-top:20px; padding-bottom: 12px} .cardetail .carcontentright .pricing .greenheading .price {margin-bottom:5px;font-size:22px; line-height:20px;} .cardetail .carcontentright .pricing .greenheading .conditions {font-size: 12px; margin-bottom:2px;} .cardetail .carcontentright .registrationcosts {border-bottom:1px solid #c9c6c6;} .cardetail .carcontentright .registrationcosts span.heading {cursor: pointer; font:15px/15px 'cartobold'; color:#a02b2b; display: block; padding:15px 0px 15px 15px; background:url('../img/icon_regcosts.png') 253px center no-repeat; text-transform: uppercase; letter-spacing:-0.02em;transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .cardetail .carcontentright .registrationcosts span.heading:hover {background-color: #ffffff; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .cardetail .carcontentright .registrationcosts span.open {background-image: url('../img/icon_regcostsopen.png');} .cardetail .carcontentright .registrationcosts dl {display:none; border-bottom:0px; padding-bottom:15px;} /* commented out display:none; to keep it open by default */ .cardetail .carcontentright .registrationcosts form {margin:10px 0px;} .cardetail .carcontentright .pricingexplained {padding-bottom:15px; border-bottom:1px solid #c9c6c6;} .cardetail .carcontentright .registrationcosts form a {left:-7px;} .cardetail .carcontentright .pricingexplained span {font:15px/15px 'cartobold'; color:#a02b2b; display: block; padding:15px 0px 15px 15px; text-transform: uppercase; letter-spacing:-0.02em;} .cardetail .carcontentright .pricingexplained p {font:13px/14px Arial, Helvetica, sans-serif; color: #6b6666; margin:0px 0px 10px; padding-left:15px;} .cardetail .carcontentright .budget {margin: 0px; padding:0px 0px 15px 15px; border-bottom:1px solid #c9c6c6;} .cardetail .carcontentright .budget .dollar {float:left; margin-right:5px; font:16px/1 'cartobold'; color:#6b6666; position:relative; top:15px;} .cardetail .carcontentright .budget input.styled-input {margin-right:0px; margin-bottom:15px; margin-top:5px; padding:0px 5px 0px 5px; font:16px/16px 'cartobold'; color:#989797; text-transform:uppercase; text-shadow:0px 1px 1px #ffffff; width:75px; position:relative; line-height:34px; text-align:left; color:#989797; outline:none; vertical-align:middle; background: #fff; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#f0f0f0',GradientType=0 ); -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; border-radius:2px; display:inline-block; height:34px; float:left; border:1px solid #e5e5e5;} .cardetail .carcontentright .budget .redlink {display:block; background-color:#ffffff; height:32px; font:12px/32px 'cartobold'; text-transform:uppercase; color:#ffffff; border:0px; background-color:#a02b2b; box-shadow:inset 0px 0px 15px #782020; -webkit-box-shadow:inset 0px 0px 15px #782020; -moz-box-shadow:inset 0px 0px 15px #782020; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; padding:0px 10px; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .cardetail .carcontentright .budget dt:first-child {margin-top:15px;} .cardetail .carcontentright .budget dt {clear:both; font: 15px/15px 'cartobold'; color:#323f45; text-transform: uppercase; letter-spacing: -0.02em; margin-top:26px;} .cardetail .carcontentright .budget dd {color:#6b6666; font:13px/13px 'carto'; padding-left:0px; margin: 0px; letter-spacing: -0.02em; text-transform: uppercase; margin-top:4px;} .cardetail .carcontentright .budget .greenheading {margin-top:20px; padding-bottom: 12px} .cardetail .carcontentright .budget .greenheading .price {margin-bottom:5px;font-size:22px; line-height:20px;} .cardetail .carcontentright .budget .greenheading .conditions {font-size: 12px; margin-bottom:2px;} /* Generic Content Styles */ #content #contentinner {margin-top:15px;} .generic.content {border-left:1px solid #c9c6c6; padding: 15px 0px 15px 15px; float:left; width:825px;} .generic.content.news {padding-top:0px;} .generic.content.news p:first-child {color:#a02b2b; font-size:20px; line-height:1.3; font-family:'carto';} .generic.content p {font:16px/20px Arial, Helvetica, sans-serif; color:#6b6666; margin:25px 0px;} .generic.content .toolpanel .panelwidth {width:270px;} .generic.content .toolpanel .panelwidth p {margin: 0px;} .generic.content .toolpanel .content {height: 100px; border-left:1px solid #C9C6C6; border-right:0px;} .generic.content .toolpanel .panelwidth.last .content {border-right:1px solid #C9C6C6; width: auto;} .generic.content .toolpanel .redlink span {font-size:16px; line-height: 28px; height: 28px;} .generic.content .toolpanel h3 {font-size:17px; line-height: 17px;} .generic.content img.border {border:10px solid #ffffff; width: 250px; display: inline; box-shadow:0 4px 6px rgba(0, 0, 0, 0.23); opacity: 0.9; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .generic.content img.right {float:right; margin: 0px 0px 15px 15px;} .generic.content img.left {float:left; margin: 0px 15px 15px 0px;} .generic.content a:hover img{opacity: 1; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .generic.content ul {} .generic.content ul li {font:16px/20px Arial, Helvetica, sans-serif; color:#a02b2b;} .generic.content ul li span {color:#6b6666;} .instructions ul {} .instructions ul li {font:16px/20px Arial, Helvetica, sans-serif; color:#a02b2b;} .instructions ul li span {color:#6b6666;} .generic.content a {color:#a02b2b; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .generic.content a:hover {color:#323F45; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .generic.content span.highlight {display:block; border-top:1px solid #C9C6C6; border-bottom:1px solid #C9C6C6; padding: 15px; margin: 0px; background-color:#252f34; color: #ffffff; font:18px/20px 'carto';} .generic.content img.banner {margin-bottom:20px; width: 825px; border:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; -o-box-shadow:none; position:relative; top:-15px;} .generic.content #related {padding: 30px; background:url('../img/bg_15.png') top left repeat-x #323f45; width: 795px; position: relative; left:-15px; top:15px;} .generic.content #related h3 {font:23px/23px "cartobold"; color: #ffffff; padding: 0px; margin: 0px; text-transform:uppercase;} .generic.content #related h3 span {font-family:"carto";} .generic.content #related ul {list-style-type: none; margin: 20px 0px 0px; padding: 0px;} .generic.content #related ul li.first {margin: 0px; padding: 1px 8px 1px 0px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .generic.content #related ul li.first:hover { background-color:#2A3438; padding-left:8px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .generic.content #related ul li.first a {color:#7A939E; font-size:13px; text-transform: uppercase;} .generic.content #related ul li.first:hover a { color:#BAD3DE; } .generic.content #related hr {border-color: #252F33;} .generic.content #related ul li.active {} .generic.content #related ul li.active a {color:#fff; font-size:13px; text-transform: uppercase; !important;} .generic.content #related ul li.active:hover {background-color:transparent; padding-left:0px !important;} .generic.content #related ul li.active:hover a {color:#fff; padding-left:0px !important;} .generic.content #related ul li.sub ul {margin:0px 0px 0px 20px;} .generic.content #related ul li.sub ul li {padding: 1px 8px 1px 0px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .generic.content #related ul li.sub ul li a {color:#7A939E; font-size:13px; text-transform: uppercase;} .generic.content #related ul li.sub ul li.active a {color:#fff;} .generic.content #related ul li.sub ul li:hover {padding-left:8px; background-color:#2A3438;} .generic.content #related ul li.sub ul li:hover a { color:#BAD3DE; } .generic#content .greenheading h1 {display: block; margin: 30px 0px 20px 295px; font:46px/39px 'cartobold'; color: #ffffff; letter-spacing:-0.02em; text-transform: uppercase; } .generic#content .greenheading h1 span {color: #bbc7cc; font-family: 'carto';} .generic#content .greyheading {margin-bottom:15px;} .generic#content .greyheading h2 {color: #fff; margin:0px 0px 0px 295px; display: block; font:23px/43px 'carto'; text-transform:uppercase; } #infopage.generic.content p {margin-top:5px;} /* #infopage.generic.content a {margin:0px 0px 20px; display:inline-block;} */ #infopage.generic.content hr {margin-bottom:30px;} /* Model Page */ .generic.model .modelfeatures {float:left; width: 100%; font-size:12px; margin-bottom:60px;} .generic.model .modelfeatures td {text-transform:uppercase; color:#323f45; font:12px/16px Arial, Helvetica, sans-serif; padding:5px 10px 5px 23px; border-bottom:1px solid #cecece; width: 50%; background:url("../img/icon_carlist.png") 5px 8px no-repeat; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .generic.model .modelfeatures td:hover {background-color:#ffffff; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .generic.model .modelfeatures td.empty {border:0px; background-image:none;} .generic.model .modelfeatures td.empty:hover {background-color:transparent; background-image: none; transition:none; -webkit-transition:none; -moz-transition:none; -ms-transition:none; -o-transition:none;} .generic.model dl {margin:0px; padding:0px; width: 100%;} .generic.model dt {background-color:#6b6666; font:19px/30px "carto"; height:30px; padding: 0px 10px; color: #ffffff; text-transform: uppercase} .generic.model dt span {font-family:"cartobold";} .generic.model dd {padding:5px; margin:0px;} .generic.model dd span {display: block; font:16px/20px Arial,Helvetica,sans-serif; margin-bottom:5px; color:#6B6666 } .generic.model dd .disallowed {color:#a02b2b; margin-bottom:30px} .generic.model dd .allowed {color: #008800; margin-bottom:30px} /* formerly #2b73a0 */ .generic.model .model-thumbs .row {margin-bottom:7px;} .generic.model .model-thumbs .row a {width: 270px; display: block; float:left; margin-right:7px;} .generic.model .model-thumbs .last {margin-right:0px !important;} .generic.model .model-links {margin-bottom:70px;} .generic.model h1 {clear:both; margin-top:20px;} .generic.model .model-links .large {font-size:15px; width:240px; margin-left:10px; float:left;} .generic.model .model-links .large span {font-size:15px;} .generic.model .model-links .large:first-child {margin:0px;} /* Testimonials page */ .generic.testimonials .testimonial-item {border-bottom:1px solid #C9C6C6; margin-bottom:15px; padding-bottom:15px;} .generic.testimonials .testimonial-item .greenheading {font: 26px/30px 'carto'; color: #ffffff; padding: 20px 15px 12px 15px;} .generic.testimonials .testimonial-item .greenheading span {font-family:'cartobold';} .generic.testimonials .testimonial-item .greyheading {margin-bottom:15px; padding:5px 15px 5px 15px; color: #ffffff; font:16px/16px 'cartobold';} .generic.testimonials img {width:auto; float:left; border:none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; margin: 0px 15px 15px 0px;} .generic.testimonials .testimonial-item p {margin-top:0px; font-size: 14px; padding-right:15px;} .generic.testimonials .testimonial-item .carlist {margin-left:0px; padding-left:15px;} .generic.testimonials .testimonial-item .carlist li {font-size:13px; text-transform: uppercase;} .generic.testimonials .testimonial-item .carlist li span { color: #a02b2b;} .generic.testimonials .testimonial-item .testimonial-content {float:left; width: 660px;} /* News page */ .generic.news .news-item {border-bottom:1px solid #C9C6C6; margin-bottom:15px; padding-bottom:50px;} .generic.news .news-item .greenheading {font: 26px/30px 'carto'; color: #ffffff; padding: 20px 15px 12px 15px;} .generic.news .news-item .greenheading span {font-family:'cartobold';} .generic.news .news-item .greyheading {margin-bottom:15px; padding:5px 15px 5px 15px; color: #ffffff; font:16px/16px 'cartobold';} .generic.news img {width:auto; float:left; border:none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; margin: 0px 15px 15px 0px;} .generic.news .news-item p {margin-top:0px; font-size: 14px; padding-right:15px;} .generic.news .news-item .carlist {margin-left:0px; padding-left:15px;} .generic.news .news-item .carlist li {font-size:13px; text-transform: uppercase;} .generic.news .news-item .carlist li span { color: #a02b2b;} .generic.news .news-item .redlink {float:left;} .content.generic.infobase-map {padding-top:0px;} .generic.content.infobase-map .map-item {padding: 30px; background:url('../img/bg_15.png') top left repeat-x #323f45; width: 780px; position: relative; left:-15px; top:0px;} .generic.content.infobase-map .map-item h3 {font:23px/23px "cartobold"; color: #ffffff; padding: 0px; margin: 0px; text-transform:uppercase;} .generic.content.infobase-map .map-item h3 span {font-family:"carto";} .generic.content.infobase-map .map-item ul {list-style-type: none; margin: 20px 0px 0px; padding: 0px;} .generic.content.infobase-map .map-item ul li.first {margin: 0px; padding: 1px 8px 1px 0px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .generic.content.infobase-map .map-item ul li.first:hover { background-color:#2A3438; padding-left:8px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .generic.content.infobase-map .map-item ul li.first a {color:#7A939E; font-size:13px; text-transform: uppercase;} .generic.content.infobase-map .map-item ul li.first:hover a { color:#BAD3DE; } .generic.content.infobase-map .map-item hr {border-color: #252F33;} .generic.content.infobase-map .map-item ul li.active {} .generic.content.infobase-map .map-item ul li.active a {color:#fff; font-size:13px; text-transform: uppercase; !important;} .generic.content.infobase-map .map-item ul li.active:hover {background-color:transparent; padding-left:0px !important;} .generic.content.infobase-map .map-item ul li.active:hover a {color:#fff; padding-left:0px !important;} .generic.content.infobase-map .map-item ul li.sub ul {margin:0px 0px 0px 20px;} .generic.content.infobase-map .map-item ul li.sub ul li {padding: 1px 8px 1px 0px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .generic.content.infobase-map .map-item ul li.sub ul li a {color:#7A939E; font-size:13px; text-transform: uppercase;} .generic.content.infobase-map .map-item ul li.sub ul li.active a {color:#fff;} .generic.content.infobase-map .map-item ul li.sub ul li:hover {padding-left:8px; background-color:#2A3438;} .generic.content.infobase-map .map-item ul li.sub ul li:hover a { color:#BAD3DE;} /* line-up search */ #lineup_search .panelwidth {padding:0px 12px !important;} #lineup_search .panelwidth.active h3 {color:#df2831 !important;} #lineup_search .panelwidth.active .selectBox {border-color:#df2831 !important;} #lineup_search .panelwidth:last-child {padding-right:0px !important;} /* search landing page */ .generic.search {padding-top:0px;} #bannerinner.search #bannerimage {padding-top:15px;} .search-layout {} .search-layout .search-panel {height:200px; position:relative; float:left; width: 559px; border-right:1px solid #c9c6c6;transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .search-layout .search-panel:hover {background-color: #ffffff;transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} .search-layout .search-panel .greenheading {background-image:none;} .search-layout .search-panel h2 {float:none; margin:0px; color:#ffffff; font: 24px/20px 'cartobold'; padding: 15px; text-transform: uppercase;} .search-layout .search-panel .search-content {padding: 15px; font:15px/18px Arial, Helvetica, sans-serif; color:#6b6666;} .search-layout .search-panel .search-content a.redlink {position:absolute; bottom:15px; left:15px; width: 383px; margin-top:20px; display: block;} .search-layout .row {padding-bottom:15px; border-bottom:1px solid #C9C6C6; margin-bottom:15px;} .search-layout .search-panel.last {border-right:none;} .content.generic.typical-prices table.search td {font:15px/20px Arial, Helvetica, sans-serif; color:#6b6666;} /*.content.generic.typical-prices table td p {font:16px/20px Arial, Helvetica, sans-serif; color:#6b6666;}*/ .content.generic.typical-prices table.search .selectBox {min-width:0px !important; float:none; margin-top:10px; margin-bottom:25px; } .content.generic.typical-prices table.search .adjust {position:relative; top:-5px; margin:0px 8px;} .content.generic.typical-prices table.search {margin-bottom:15px; font:15px/20px Arial, Helvetica, sans-serif; color:#6b6666;} .content.generic.typical-prices table.summary {font:15px/20px Arial, Helvetica, sans-serif;} .content.generic.typical-prices table.summary .price {margin-top:5px; margin-bottom:2px; font-weight:bold; color:#7A939E; display:block;} .content.generic.typical-prices table.results td {font:12px/20px Arial, Helvetica, sans-serif; color:#6b6666;} .content.generic.typical-prices table.results tr:nth-child(2n+0) {background-color:#ECEBEB;} .content.generic.typical-prices table.results tr:nth-last-child(-n+1) {background-color:#323f45;} figcaption {color:#a02b2b; font-size:14px; font-family:'carto'; position:relative; top:-25px;} /* Footer */ footer { height:200px; background-color:#312d27; padding-top:15px;} footer span.heading { font:18px/18px 'carto'; color:#ffffff; display:block; text-transform:uppercase; margin-bottom:15px;} footer span.heading span { font-family:'cartobold'} footer .contact { float:left; margin-top:30px;} footer .contact img { margin-bottom:7px;} footer .contact .row { margin-top:8px; font:18px/18px 'cartobold'; color:#ffffff; text-transform:uppercase; margin-top:8px;} footer .contact .row a{ margin-top:8px; font:18px/18px 'cartobold'; color:#ffffff; text-transform:uppercase; margin-top:8px;} footer .contact span { font-family:'carto'; color:#a02b2b; width:80px; float:left;} footer .mailinglist { width:530px; float:right; margin-top:15px; padding:15px;} footer .mailinglist div.text { position:relative; width:362px; background-color:#ffffff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;} footer .mailinglist .text input { height:42px; font:bold 18px/42px Arial, Helvetica, sans-serif; border:1px solid #cac9c9; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; width:330px; padding:0px 15px; text-transform:uppercase;} footer .mailinglist .text label { text-transform:uppercase; color:#6d6d6d; margin-top:1px; height:42px; font:12px/42px Arial, Helvetica, sans-serif; right:200px;} footer .mailinglist .text.labeltrick input:focus + label { right:15px;} footer .mailinglist .submit { box-shadow:0px 4px 6px rgba(0,0,0,0.23); float:left; margin-top:15px;} footer .mailinglist .submit input { background-color:#ffffff; height:32px; font:18px/32px 'cartobold'; text-transform:uppercase; color:#ffffff; border:0px; background-color:#a02b2b; box-shadow:inset 0px 0px 15px #782020; -webkit-box-shadow:inset 0px 0px 15px #782020; -moz-box-shadow:inset 0px 0px 15px #782020; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; padding:0px 10px; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} footer .mailinglist .submit input:hover { background-color:#df2831; box-shadow:inset 0px 0px 15px #b22027; -webkit-box-shadow:inset 0px 0px 15px #b22027; -moz-box-shadow:inset 0px 0px 15px #b22027; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} /* Helper icon */ .helper-icon {height:15px; width:15px; position:relative; top:3px; left:3px; display:inline-block; cursor:pointer;} .helper-icon.dark {background:url('../img/icon_dark.png') center center no-repeat; background-size:100%;} .helper-icon.light {background:url('../img/icon_light.png') center center no-repeat; background-size:100%;} /* .helper-icon:before {content:'i'; font-style: italic; color:#fff;} */ #contentinner {background-color:#ECEBEB; padding:15px; box-shadow: 0px 0px 10px #322e28; -moz-box-shadow: 0px 0px 2px #322e28; -webkit-box-shadow: 0px 0px 2px #322e28;} .searchresults .greenheading, .searchresults .greyheading {padding:0px 15px;} #enquiryform {background-color: #ffffff;} #enquiryform .enquirythumb {float:left; width:150px; margin-right:15px; border:2px solid #ffffff;} #enquiryform .enquirycontent {width: 610px;} #enquiryform .stat {width: 220px; float:left; display: block; font:21px/21px 'carto'; text-transform: uppercase;} #enquiryform .info .stat {font:18px/18px; color:#C6C4C4;} #enquiryform .info .key {width: 150px; font-size:18px;} #enquiryform .info .value {font-size:18px; text-align:right; width: 230px; float:right; color:#ffffff; text-shadow:none;} #enquiryform .key {color:#6b6666;} #enquiryform .value {width:320px; text-shadow:0px 1px 1px rgba(255,255,255,0.7);color: #323f45; font-family: 'cartobold'} #enquiryform .row {display:block;} #enquiryform input:last-child {margin-right:0px;} #enquiryform input {margin-right:15px; padding:0px 15px 0px 15px; font:15px/34px 'cartobold'; color:#989797; text-transform:uppercase; text-shadow:0px 1px 1px #ffffff; width:250px; position:relative; line-height:34px; text-align:left; color:#989797; outline:none; vertical-align:middle; background: #ededed; background: -moz-linear-gradient(top, #ededed 0%, #f0f0f0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#f0f0f0)); background: -webkit-linear-gradient(top, #ededed 0%,#f0f0f0 100%); background: -o-linear-gradient(top, #ededed 0%,#f0f0f0 100%); background: -ms-linear-gradient(top, #ededed 0%,#f0f0f0 100%); background: linear-gradient(to bottom, #ededed 0%,#f0f0f0 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#f0f0f0',GradientType=0 ); -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; border-radius:2px; display:inline-block; height:34px; box-shadow:0 4px 6px rgba(0, 0, 0, 0.23); float:left; border:1px solid #e5e5e5;} #enquiryform textarea {resize: none; margin-right:15px; padding:15px; font:15px/18px 'cartobold'; color:#989797; text-transform:uppercase; text-shadow:0px 1px 1px #ffffff; position:relative; line-height:18px; text-align:left; color:#989797; outline:none; background: #ededed; background: -moz-linear-gradient(top, #ededed 0%, #f0f0f0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#f0f0f0)); background: -webkit-linear-gradient(top, #ededed 0%,#f0f0f0 100%); background: -o-linear-gradient(top, #ededed 0%,#f0f0f0 100%); background: -ms-linear-gradient(top, #ededed 0%,#f0f0f0 100%); background: linear-gradient(to bottom, #ededed 0%,#f0f0f0 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#f0f0f0',GradientType=0 ); -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; border-radius:2px; display:inline-block; height:95px; box-shadow:0 4px 6px rgba(0, 0, 0, 0.23); float:left; border:1px solid #e5e5e5; width:550px;} #enquiryform h2 {text-align: left; float:left; width: 380px; margin-top:0px; color:#ffffff;} #enquiryform .info {padding: 15px; margin: 0px; background-color:#323F45;} #enquiryform .carstats {padding:15px; margin-top:15px;} #enquiryform .submitenquiry label {display:none;} #enquiryform .submitenquiry .row {margin-bottom:10px;} #enquiryform .submitenquiry {padding: 15px; width: 580px;} #enquiryform .submitenquiry input.submit {width:auto; text-shadow:none !important; height:32px; font:18px/32px 'cartobold'; text-transform:uppercase; color:#ffffff; border:0px; background:#a02b2b !important; box-shadow:inset 0px 0px 15px #782020; -webkit-box-shadow:inset 0px 0px 15px #782020; -moz-box-shadow:inset 0px 0px 15px #782020; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; padding:0px 10px; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} #enquiryform .submitenquiry input.submit:hover {background:#df2831 !important; box-shadow:inset 0px 0px 15px #b22027; -webkit-box-shadow:inset 0px 0px 15px #b22027; -moz-box-shadow:inset 0px 0px 15px #b22027; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;} #enquiryform h3 {position: relative; top: -15px; font-size:15px; line-height:15px; left: 15px; width:50%;} #banner form {opacity:0;} .no-js #banner form {display: inherit;} iframe {overflow: hidden; } html, body {margin:0; padding:0; height:100%;} #wrapper {min-height:100%; position: relative;} footer {position:absolute; bottom: 0px; width: 100%} #content {padding-bottom: 215px;} /* ============================================================================= Media Queries ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } /* ============================================================================= Non-Semantic Helper Classes ========================================================================== */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } .ir br { display: none; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ============================================================================= Print Styles ========================================================================== */ @media print { * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }