/* Reset ----------------------------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } hr {margin: 0;} /* Reset End ----------------------------------------------------------------------------------------------------*/ /* grid */ /* Containers ----------------------------------------------------------------------------------------------------*/ .container_24 { margin-left: auto; margin-right: auto; width: 1105px; } .grid_1 { float: left; width: 102px; margin-right: 2px; } .grid_23 { float: left; width: 996px; } .grid_24 { float: left; width: 1095px; margin-right: 10px; } .content .grid_4 { float: left; width: 310px; margin-right: 10px; margin-left: 10px; } .content .grid_12 { float: left; width: 478px; margin-left: 10px; margin-right: 10px; } .content .grid_19 { float: left; width: 646px; margin-left: 10px; margin-right: 10px; } .content .grid_23 { float: left; width: 976px; margin-left: 10px; margin-right: 10px; } .inner { padding: 10px; } .borderbg { border: solid 1px #666; background-color: #E0E0C2; } .border { border: solid 1px #666; } .alignright { float: right; } .alignleft { float: left; } /* Clear Floated Elements ----------------------------------------------------------------------------------------------------*/ /* http://sonspring.com/journal/clearing-floats */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */ .clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } /* END GRID */ /* TYPOGRAPHY */ /* -------------------------------------------------------------- typography.css * Sets up some sensible default typography. -------------------------------------------------------------- */ /* Default font settings. The font-size percentage is of 16px. (0.75 * 16px = 12px) */ body { font-size: 75%; color: #222; background: #fff; margin-top: 10px; line-height: 1.4em; font-family: "Trebuchet MS, Helvetica Neue", Arial, Helvetica, sans-serif; } /* Headings -------------------------------------------------------------- */ h1,h2,h3,h4,h6 { font-weight: normal; color: #900; } h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } h2 { font-size: 2em; margin-bottom: 0.75em; } h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; } h5 { font-size: 1.3em; line-height: 1.5; font-weight: normal; margin-bottom: 1.5em; color: #222; } h6 { font-size: 1em; font-weight: bold; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } /* Text elements -------------------------------------------------------------- */ p { margin: 0 0 1.5em; font-size: 1.2em; line-height: 1.4em; } p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; } a:focus, a:hover { color: #000; } a { color: #009; text-decoration: underline; } blockquote { margin: 1.5em; color: #666; font-style: italic; } strong { font-weight: bold; } em,dfn { font-style: italic; } dfn { font-weight: bold; } sup, sub { line-height: 0; } abbr, acronym { border-bottom: 1px dotted #666; } address { margin: 0 0 1.5em; font-style: italic; } del { color:#666; } pre { margin: 1.5em 0; white-space: pre; } pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } /* Lists -------------------------------------------------------------- */ li ul, li ol { margin:0 1.5em; } ul, ol { margin: 0 1.5em 1.5em 1.5em; } li { margin-top: .4em; line-height: 1.4em;} ul { list-style-type: disc; } ol { list-style-type: decimal; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: bold; } dd { margin-left: 1.5em;} /* Tables -------------------------------------------------------------- */ table { margin-bottom: 1.4em; width:100%; } th { font-weight: bold; } thead th { background: #c3d9ff; } th,td,caption { padding: 4px 10px 4px 5px; } tr.even td { background: #e5ecf9; } tfoot { font-style: italic; } caption { background: #eee; } /* Misc classes -------------------------------------------------------------- */ .center { text-align: center; } .small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } .large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } .hide { display: none; } .quiet { color: #666; } .loud { color: #000; } .highlight { background:#ff0; } .added { background:#060; color: #fff; } .removed { background:#900; color: #fff; } .first { margin-left:0; padding-left:0; } .last { margin-right:0; padding-right:0; } .top { margin-top:0; padding-top:0; } .bottom { margin-bottom:0; padding-bottom:0; } /* END TYPOGRAPHY */ /* forms.css */ label { font-weight:bold;} label.nobold { font-weight: normal;} fieldset { padding:0;margin:0 ;border:0px solid #ccc;} legend { font-weight:bold;font-size:1.2em; color: #900; margin-bottom: 15px;} input.text, input.title, textarea, select { margin:0.5em 0;border:1px solid #bbb;} input.text:focus, input.title:focus, textarea:focus, select:focus { border:1px solid #666;} input.text, input.title, select { width:300px;padding:5px;} input.title { font-size:1.5em;} textarea { width:390px;height:250px;padding:5px;} textarea.small { font-size: 100%; width:300px;height:150px;padding:5px;} textarea.short { font-size: 100%; width:300px;height:80px;padding:5px; } input.date, select.time, input.short, select.short { width: 70px;} input.medium, select.medium { width: 120px;} input.dollar { background: url('/images/icons/dollar.png') no-repeat 1px 4px; padding-left: 12px;} p.disabled input.dollar { background: url('/images/icons/dollar_disabled.png') no-repeat 1px 4px; padding-left: 12px;} .error { padding-left: 5px; font-size: .8em; color: #FF1A1A; } label.error { display: block; clear: both; } input.error { border: solid 1px #FF1A1A;} label.checked { background: url("/images/icons/check.png") no-repeat 0 0; width: 16px; height: 16px; margin-left: 5px; padding: 2px 8px;} .errormessage, .notice, .success { padding:0.8em;margin-bottom:1em;border:2px solid #ddd; } .errormessage { background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4; } .notice { background:#FFF6BF;color:#514721;border-color:#FFD324; } .success { background:#E6EFC2;color:#264409;border-color:#C6D880; } .noticeText { color: #B88A00; padding: 3px;} .errorText { color: #660000;} .successText { color: #006600; padding: 3px;} .error a { color:#FF1A1A; } .notice a { color:#514721; } .success a { color:#264409; } .description { color: #666; font-size: 1em;} /* Button style */ a.button { -moz-border-radius: 8px; -webkit-border-radius: 8px; color:#FFFFFF; font-size: 0.9em; padding: 8px; } a.button:link, a.button:visited, a.button:active {color : #fff; text-decoration: none; background-color: #900; border: solid 1px #600; } a.button:hover { color: #ff0; background-color: #600; border: solid 1px #900; } h2.no-margin, h3.no-margin, p.no-margin { margin-bottom: 2px; } #contact-banner { color: #fff; font-size: 1.05em; background-color: #444; padding: 4px 0px; margin: 2px 0 20px 0 ;} body.home #contact-banner { color: #fff; font-size: 1.05em; background-color: #444; padding: 4px 0px; margin: 2px 0;} a.logo img {vertical-align: middle; float: right; height: 102px; width: 102px; } a:link {color: #900; text-decoration: underline;} a:visited {color: #900; text-decoration: underline;} a:hover {color: #600; text-decoration: underline;} a:active {color: #900; text-decoration: underline;} #content-container { background: #fff url('/images/layout/content-container-bg.png') repeat-y; } /* CSS Nav */ #navcontainer {float: right; width: 99px; background-color: #000;} ul#navlist {background-color: #fff; width: 99px; margin: 0px 2px 0 0; border-top: solid 2px #fff; border-bottom: solid 1px #000;} ul#navlist li {height: 33px; width: 99px; margin: 0 0 1px 0;} ul#navlist li.big-btn {height: 69px; width: 99px;} ul#navlist li {list-style: none; } ul#navlist li span {text-indent: -9999px; display: none;} ul#navlist li a {height: 33px; width: 99px; display: block; background: url("/images/nav/nav.png") no-repeat 0 0; } ul#navlist li.big-btn a {height: 69px; width: 99px;} ul#navlist li#home-nav a { background-position: 0px 0px; } ul#navlist li#new-cars-nav a { background-position: 0px -33px; } ul#navlist li#used-cars-nav a { background-position: 0px -66px; } ul#navlist li#financing-nav a { background-position: 0px -99px; } ul#navlist li#service-nav a { background-position: 0px -132px; } ul#navlist li#body-shop-nav a { background-position: 0px -165px; } ul#navlist li#rumours-nav a { background-position: 0px -198px; } ul#navlist li#careers-nav a { background-position: 0px -231px; } ul#navlist li#links-nav a { background-position: 0px -264px; } ul#navlist li#contact-nav a { background-position: 0px -297px; } ul#navlist li#about-nav a { background-position: 0px -1053px; } ul#navlist li#news-nav a { background-position: 0px -330px; } ul#navlist li#leasetakeover-nav a { background-position: 0px -984px; } ul#navlist li#parts-nav a { background-position: 0px -363px; } ul#navlist li#performance-nav a { background-position: 0px -501px; } /* ul#navlist li#aem-nav a { background-position: 0px -432px; } ul#navlist li#autosport-nav a { background-position: 0px -501px; } ul#navlist li#comptech-nav a { background-position: 0px -570px; } ul#navlist li#performancebrakes-nav a { background-position: 0px -639px; } ul#navlist li#hid-nav a { background-position: 0px -708px; } ul#navlist li#ronjon-nav a { background-position: 0px -777px; } ul#navlist li#snyper-nav a { background-position: 0px -846px; } ul#navlist li#tein-nav a { background-position: 0px -915px; } */ ul#navlist li#home-nav a:hover { background-position: -99px 0px; } ul#navlist li#new-cars-nav a:hover { background-position: -99px -33px; } ul#navlist li#used-cars-nav a:hover { background-position: -99px -66px; } ul#navlist li#financing-nav a:hover { background-position: -99px -99px; } ul#navlist li#service-nav a:hover { background-position: -99px -132px; } ul#navlist li#body-shop-nav a:hover { background-position: -99px -165px; } ul#navlist li#rumours-nav a:hover { background-position: -99px -198px; } ul#navlist li#careers-nav a:hover { background-position: -99px -231px; } ul#navlist li#links-nav a:hover { background-position: -99px -264px; } ul#navlist li#contact-nav a:hover { background-position: -99px -297px; } ul#navlist li#about-nav a:hover { background-position: -99px -1053px; } ul#navlist li#news-nav a:hover { background-position: -99px -330px; } ul#navlist li#leasetakeover-nav a:hover { background-position: -99px -984px; } ul#navlist li#parts-nav a:hover { background-position: -99px -363px; } ul#navlist li#performance-nav a:hover { background-position: -99px -501px; } /* ul#navlist li#aem-nav a:hover { background-position: -99px -432px; } ul#navlist li#autosport-nav a:hover { background-position: -99px -501px; } ul#navlist li#comptech-nav a:hover { background-position: -99px -570px; } ul#navlist li#performancebrakes-nav a:hover { background-position: -99px -639px; } ul#navlist li#hid-nav a:hover { background-position: -99px -708px; } ul#navlist li#ronjon-nav a:hover { background-position: -99px -777px; } ul#navlist li#snyper-nav a:hover { background-position: -99px -846px; } ul#navlist li#tein-nav a:hover { background-position: -99px -915px; } */ ul#navlist li#home-nav a:active { background-position: -99px 0px; } ul#navlist li#new-cars-nav a:active { background-position: -99px -33px; } ul#navlist li#used-cars-nav a:active { background-position: -99px -66px; } ul#navlist li#financing-nav a:active { background-position: -99px -99px; } ul#navlist li#service-nav a:active { background-position: -99px -132px; } ul#navlist li#body-shop-nav a:active { background-position: -99px -165px; } ul#navlist li#rumours-nav a:active { background-position: -99px -198px; } ul#navlist li#careers-nav a:active { background-position: -99px -231px; } ul#navlist li#links-nav a:active { background-position: -99px -264px; } ul#navlist li#contact-nav a:active { background-position: -99px -297px; } ul#navlist li#about-nav a:active { background-position: -99px -1053px; } ul#navlist li#news-nav a:active { background-position: -99px -330px; } ul#navlist li#leasetakeover-nav a:active { background-position: -99px -984px; } ul#navlist li#parts-nav a:active { background-position: -99px -363px; } ul#navlist li#performance-nav a:active { background-position: -99px -501px; } /* ul#navlist li#aem-nav a:active { background-position: -99px -432px; } ul#navlist li#autosport-nav a:active { background-position: -99px -501px; } ul#navlist li#comptech-nav a:active { background-position: -99px -570px; } ul#navlist li#performance-nav a:active { background-position: -99px -639px; } ul#navlist li#hid-nav a:active { background-position: -99px -708px; } ul#navlist li#ronjon-nav a:active { background-position: -99px -777px; } ul#navlist li#snyper-nav a:active { background-position: -99px -846px; } ul#navlist li#tein-nav a:active { background-position: -99px -915px; } */ .logintop {text-align: right; margin-bottom: 2px;} .logintop input { padding: 2px;} .logintop input.email {width: 200px; margin-right: 10px;} .logintop input#login {margin-left: 5px;} .logintop fieldset { display: inline; margin: 0;padding: 0;} .logintop legend { display: none;} /* */ /* */ /* Page Tweaks */ /* */ /* */ /* Careers Page */ .careers h2 {font-size: 22px;} .careers h3 {font-size: 18px; margin: 0;} .careers h4 {font-size: 16px; margin-bottom: 5px; color: #000;} .careers p {margin-top: 0px;} .careers .career-teaser {width: 500px; border: solid 1px #ccc; padding: 10px; margin-bottom: 10px;} .careers .career-teaser .type {float: left;} .careers .career-teaser .date-posted {float: right;} .careers .career-teaser .description {clear: both;border-top: dashed 1px #eaeaea;} .careers .career-teaser .contact-info { border-top: dashed 1px #eaeaea;} /* CMS pages */ body.rumours p, body.news--reviews p {width: 500px;} body.rumours h2 a, body.news--reviews h2 a {color: #900; text-decoration: none;} body.rumours h2 a:hover, body.news--reviews h2 a:hover {color: #ccc; text-decoration: none;} .cms-teaser { border-bottom: solid 1px #ccc; width: 560px;} /* Service Videos */ body.service-videos h2 {font-size: 180%;} table#videostable td { border-bottom: solid 1px #ccc;} table#videostable h3 {font-size: 160%;} table#videostable h4 {font-size: 120%;} /* Service Appt Form */ .model_other p, .make_other p { padding-left: 15px;} /* Account Page */ #forgot-password { margin-top: 10px; } /* Break a lease pages */ .sort a { color: #fff; } .desc a { background: url("/images/icons/arrow_down.png") no-repeat 0 center; padding-left: 15px; } .asc a { background: url("/images/icons/arrow_up.png") no-repeat 0 center; padding-left: 15px } ul#break-a-lease-list { list-style-type: none; margin-left: 0; } ul#break-a-lease-list li { background: url("/images/icons/check.png") no-repeat 0 0; padding-left: 20px; margin-top: .5em;} img#how-it-works { padding-bottom: 5px; border-bottom: solid 1px #333; margin-bottom: 10px; } #lease-table-toggles { vertical-align: middle; display: inline; float: left; margin-bottom: 5px; margin-top: 10px; } #lease-table-toggles fieldset { vertical-align: middle; margin: 0; padding: 0;} #lease-table-toggles fieldset span { vertical-align: middle;} a#list-vehicle-button { display: block; width: 189px; height: 38px; float: right; color: #fff; margin-top: 10px; background: #900 url('/images/pages/break-a-lease/list-your-car.png') no-repeat 0 0;} .private-selected { background-color: #900; color: #fff; padding:0 4px;} .public-selected { background-color: #060; color: #fff; padding:0 4px} /* lease vs finance form classes */ p.disabled, p.disabled input { color: #ccc; } p.disabled sup { display: none;} a#list-vehicle-button:hover { background-position: 0 -38px; } a#list-vehicle-button span { display: none; } #break-a-lease-info { color: #1F4075; background-color: #fff; height: 137px; padding: 15px; margin-bottom: 10px; } #break-a-lease-info h3 { font-family: Times New Roman, Serif; color: #1F4075; font-size: 2em; margin-bottom: 5px; } #break-a-lease-info h4 { font-family: Times New Roman, Serif; color: #1F4075; font-size: 1.5em; } #break-a-lease-info p { font-family: Times New Roman, Serif; font-size: 1.3em; } #feature-selection label { font-weight: normal; font-size: .8em;} #feature-selection p { width: 150px; float: left;} table#lease-takeover { width: 100%; text-align: center; margin-top: 10px; float: center; } table#lease-takeover ul { margin-top: 5px; margin-bottom: 0;} table#lease-takeover li { margin-bottom: 1px; line-height: 1em;} table#lease-takeover th { background-color: #346F13; color: #fff; padding: 10px; text-transform: uppercase; font-size: 1.2em; font-weight: normal; border-bottom: solid 1px #2c630d; border-right: solid 1px #2c630d;} table#lease-takeover th.first { border-left: solid 1px #2c630d;} table#lease-takeover tr.even { background-color: #fff; color: #333;} table#lease-takeover tr.odd { background-color: #eaeaea; color: #333;} table#lease-takeover td { padding: 7px; vertical-align: top;} table#lease-takeover tr.odd td { border-bottom: solid 1px #ccc; border-right: solid 1px #ccc;} table#lease-takeover tr.even td { border-bottom: solid 1px #e2e0e0; border-right: solid 1px #e2e0e0;} table#lease-takeover tr.odd td.first { border-left: solid 1px #ccc; border-right: none; padding-right: 2px; } table#lease-takeover tr.even td.first { border-left: solid 1px #e2e0e0; border-right: none; padding-right: 2px; } table#lease-takeover tr td img { border: solid 1px #000;} table#lease-takeover td.second { text-align: left; width: 180px; padding-left: 0;} table#lease-takeover td.third { text-align: center;} table#lease-takeover td.fourth { text-align: right;} table#lease-takeover td.fifth { text-align: right;} table#lease-takeover td.sixth { text-align: right;} table#lease-takeover tr.sold td.second { background: url("/images/icons/sold.png") no-repeat top right; } table#lease-takeover .vehiclemodel a { margin-left: 5px;font-size: 1.2em; } /* Break A Lease Photo Edit */ .photothumbs { margin-bottom: 10px;} .photothumbs img { border: solid 1px #000; float: none; margin-right: 10px;} .photoimage img { border: solid 1px #000; float: left; margin-right: 10px;} .photoimage { margin-bottom: 10px;} .photoeditbox { border-top: solid 1px #ccc ; width: 450px; margin-top: 15px; padding: 10px;} .photothumbs .photoeditbox img { float: none } .photoeditbox label { width: 350px;} #formresultsbox { height: 25px; width: 350px; margin: 5px 0;} ul.sortable { list-style-type: none; margin: 0; padding: 0; ; } ul.sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 0em; font-size: 1.4em; width: 100px; height: 75px; float: left; } ul.sortable li span { position: absolute; } /* Break A Lease View Page */ img.viewvehiclephoto {border: solid 1px #000; text-align: center;} div.thumbs {margin-top: 4px;} .thumbs img {float: left; margin-right:3px; border: solid 1px #000; margin-bottom: 4px;} .thumbs a.two img {margin-right: 4px;} .thumbs a.four img {margin-right: 0px;} #thumbs-instructions { margin: 10px 0 4px 0; font-size: 1em; } .content .maininfo { width: 500px;} .sideinfo h3 { margin: 10px 0; } .maininfo h3 { margin: 0 0 10px 0;} .maininfo p { font-size: 100%;} h3.borderbottom { border-bottom: solid 3px #333; padding-bottom: 10px; margin-top: 0;} table.vehicle-view { border-top: solid 3px #333; } table.vehicle-view input.text, table.vehicle-view textarea { width: 280px;} .maininfo ul.bordertop { margin: 0 ;} .maininfo ul li { list-style-type: none; float: left; width: 140px; margin-right: 20px; } .vehicle-view .first { width: 140px;} .vehicle-view .second { font-weight: bold;} .vehicle-view-left-home { width:313px; margin-right: 10px;float: left;} .vehicle-view-right-home { width:313px; margin-left: 10px; float: left;} .vehicle-view-left { width:240px; margin-right: 10px;float: left;} .vehicle-view-right { width:240px; margin-left: 10px; float: left;} .vehicle-view-left table.vehicle-view tr td { border-bottom: solid 1px #eaeaea;} .vehicle-view-right table.vehicle-view tr td { border-bottom: solid 1px #eaeaea;} /* .maininfo-sold .vehicle-view-right table.vehicle-view { background: url("/images/icons/sold-big.png") no-repeat top right;} */ #mainphoto {position: relative;} .sold-banner a { position: absolute; left: 159px; top: 0; background: url("/images/icons/sold-big.png") no-repeat top right; width: 150px; height: 184px; text-indent: -9999px;}