/* Primary Styles
Author: Bryce Looms

Colours
  light blue: #1b86fe
  picky red: #d2232a
*/

@font-face {
    font-family: 'OpenSansLight';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansLightItalic';
    src: url('fonts/OpenSans-LightItalic-webfont.eot');
    src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansSemibold';
    src: url('fonts/OpenSans-Semibold-webfont.eot');
    src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansSemiboldItalic';
    src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
    src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

html { overflow-y:scroll; }
body { line-height:2.2em; color:#fff; background:#000 url("imgs/bg-stripe.png"); font-family:OpenSansLight; }

a { color:#0084ff; }
a:active, a:visited { color:#005CB3; }
a:hover { color:#339CFF; }

em, i { font-family:OpenSansLightItalic; }
strong, b { font-family:OpenSansSemibold; }
strong em, strong i, em strong, em b { font-family:OpenSansSemiboldItalic; }

h1 {
  font-size:3.6em;
  line-height:0.87em;
  margin-bottom:0.217em;
  font-family:OpenSansLight;
  text-transform:uppercase;
  font-weight:normal;
  text-shadow:0 0 5px rgba(0, 0, 0, 1);
}
h2 { font-size:2.0em; font-family:OpenSansLight; text-transform:uppercase; font-weight:normal; }
h3 { font-size:1.6em; margin-bottom:0.625em; font-family:OpenSansLight; font-weight:normal; }

.rtm { font-size:11px; }
.highlight, .highlight2 { font-family:OpenSansLightItalic; }
.highlight { color:#1b86fe !important; }
.highlight2 { color:#1B86FE !important; }
.highlightbigbold { font-size:1.4em; font-weight:bold; }

#logo {
  width:800px;
  height:210px;
  margin:0 auto;
  position:relative;
  border:1px solid #222;
  border-color:#444 #222 #444 #666;
  background-color:#000;
  -moz-border-radius:0 0 20px 20px;
  -webkit-border-radius:0 0 20px 20px;
  border-radius:0 0 20px 20px;
  -moz-box-shadow:0 0 15px #000;
  -webkit-box-shadow:0 0 15px #000;
  box-shadow:0 0 15px #000;
}
#logo h2 {
  position:absolute;
  top:70px;
  left:30px;
  margin:0;
  width:201px;
  height:0;
  padding-top:54px;
  overflow:hidden;
}
#logo img { position:absolute; top:0; left:0; }
#flash { margin-left:240px; }

#nav { width:800px; height:4em; margin:0 auto; padding:0; list-style:none; text-align:center; }
#nav li { font-size:1.6em; line-height:2.4em; padding:0 1em; display:inline; text-transform:uppercase; letter-spacing:0.07em; }
#nav a { color:#ccc; text-decoration:none; outline:none; }
#nav a:hover { color:#0084ff; }
#nav a:focus { color:#339CFF !important; }
#home #nav .home, #cars #nav .cars, #roadside #nav .roadside, #quality #nav .quality, 
#warranty #nav .warranty, #import #nav .import, #finance #nav .finance, #contact #nav .contact { color:#0084ff; }

#wrapper {
  overflow:hidden;
  width:800px;
  margin:0 auto;
  border:1px solid #222;
  border-color:#444 #222 #222 #666;
  background-color:#000;
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  border-radius:20px;
  -moz-box-shadow:0 0 15px #000;
  -webkit-box-shadow:0 0 15px #000;
  box-shadow:0 0 15px #000;
}

.holder { padding:20px 20px 10px; border-top:1px solid #111; }
.holder:first-child { border:0 none; }

#main { width:579px; border-left:1px solid #111; min-height:260px; float:right; position:relative; padding-bottom:10010px !important; margin-bottom:-10000px; }
#main.holder { width:539px; padding:20px 20px 10px; }
.standouttext { background-color:#111; border:2px solid #d2232a; padding:20px; margin:20px; font-size:2.2em; text-align:center; }

#aside { width:220px; min-height:260px; float:left; position:relative; }
#aside .panel { position:relative; }
#aside .holder { position:relative; z-index:1; padding:32px 20px 10px; *padding-top:17px;/*IE7*/ margin:0; } /* class .holder inside #aside */
#aside.holder { width:180px; margin-bottom:0; margin-top:0; } /* #aside with class .holder */
#aside h2 { margin-bottom:0; }
#aside ul, #aside ol { list-style-position:outside; margin-left: 1.5em; }
.asideTitleImage { margin:3px 0 0 20px; z-index:2; }
.panelToggle { cursor:pointer; }
span.highlight2 { font-weight:normal; }
#aside .panel .holder { overflow:hidden; }
#aside .panel .hidden { height:0; visibility:hidden; padding-bottom:0; padding-top:10px; }

#main #featured-cars { list-style:none; overflow:hidden; padding:20px 15px; margin:0; min-height:310px; }
#featured-cars h2 { padding:0 5px; }
#featured-cars ul { list-style:none; margin:0 -8px; }
#featured-cars li { float:left; width:160px; font-size:100%; margin:0 14px 5px; }
#featured-cars a { display:block; text-align:center; }
#featured-cars img { display:block; width:160px; height:120px; background:#111; }
#featured-cars .name { font-size:1.2em; height:1.667em; line-height:1.667em; margin:0; text-align:center; }
#featured-cars .name a { display:inline; text-decoration:none; }

#car-list { margin:1em 0 0; padding-bottom:20px; }
#car-list .name { width:440px; float:left; font-size:18px; line-height:1.111em; margin-bottom:0.556em; }
#car-list .name a { color:#1b86fe; text-decoration:none; }
#car-list .name a:hover { text-decoration:underline; }
#car-list .money { width:80px; float:left; font-size:16px; line-height:1.25em; margin-bottom:0.625em; text-align:right; }
#car-list .gallery { width:160px; height:120px; float:left; margin:0 0 1em; position:relative; }
#car-list .gallery li { display:none; position:absolute; top:0; left:0; }
#car-list .gallery a { outline:none; }
#car-list .gallery .current { display:block; }
#car-list .thumbnail { display:block; width:160px; height:120px; background:#999; margin:0; }
#car-list li { list-style:none; padding:0; }
#car-list dl { width:360px; float:left; padding:0; }
#car-list dt { width:90px; clear:left; float:left; margin:0; color:#1B86FE; text-align:right; padding-right:0.3em; }
#car-list dt:after { content:' :' }
#car-list dd { width:265px; float:left; margin:0; }
#car-list dd ul { display:inline; margin:0; }
#car-list dd li { display:inline; }
#car-list dd li:after { content:', ' }
#car-list dd li:last-child:after { content:'.' }
.thumbprev,  .thumbnext { display:block; width:21px; height:0; padding-top:21px; overflow:hidden; *overflow:visible;
 position:absolute; top:50%; margin-top:-10px; cursor:pointer; background:url(imgs/thumbArrows.png) 0 0 no-repeat;
}
.thumbprev { left:-10px; background-position:right top;  }
.thumbprev:hover { background-position:right bottom; }
.thumbnext { right:-10px; background-position:left top; }
.thumbnext:hover { background-position:left bottom; }

.pagination { width:100%; height:2em; clear:both; }
.pagination a, .pagination span { color:#FFF; font-size:1.4em; /*padding:0 0.2em;*/ text-decoration:none; 
 font-weight:bold; outline:none; display:inline-block; width:1.35em; text-align:center; }
.pagination a:hover, .pagination .active_page { color:#1b86fe; }
.pagination a:focus { color:#d2232a; }
.pagination .disabled { color:#555; }

#listing-btns { position:absolute; top:20px; right:20px; }
*:first-child+html #listing-btns { width:150px; } /*IE7*/
#listing-btns label { clear:right; float:left; margin-right:5px; }
#listing-btns select { float:right; margin-bottom:2px; }
#listing-btns .submit { clear:both; float:right; margin-right:-1px; }

label { display:block; font-size:1.2em; clear:both; }
input, textarea { width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; }
button { display:block; cursor:pointer; -x-system-font: none; }
button::-moz-focus-inner { border: 0; }

#car-search select { width:180px; display:block; float:left; }
#car-search .pair { width:45%; }
#car-search strong { width:10%; display:block; float:left; text-align:center; font-size:1.2em; font-weight:normal; }
#car-search option {}
#car-search button { margin:1em 0 0 -1px; clear:both; }
#car-search .hidden { display:none; }

#car-list.detail { margin:0; }
#car-list.detail h1 { font-size:2em; font-style:normal; float:left; width:100%; line-height:normal; }
#car-list.detail h1 em { font-style:normal; }
#car-list.detail h3 { font-size:1.6em; color:#1b86fe; text-transform:none; margin:5px 0 0; clear:both; }
#car-list.detail p { font-size:1.2em; }
#car-list.detail .money { font-size:22px; color:#d2232a; float:right; width:auto; line-height:normal; }
#car-list.detail dl { width:165px; float:right; }
#car-list.detail dt { font-size:1.2em; font-weight:normal; width:70px; }
#car-list.detail dd { font-size:1.2em; font-weight:normal; width:90px; }
#car-list.detail .gallery { width:340px; height:255px; margin-top:10px; }
#car-list.detail .thumbnail { width:340px; height:255px; }
#car-list.detail .features ul { display:inline; margin:0; }
#car-list.detail .features li { display:inline; font-size:1.2em; }
#car-list.detail .features li:after { content:', ' }
#car-list.detail .features li:last-child:after { content:'.' }
#car-list.detail #extra {  width:340px; float:left; }
#car-list.detail #moreinfo {  width:165px; float:right; }
#car-list.detail #moreinfo h3 { margin-bottom:15px; }
#car-list.detail #moreinfo h4 { font-size:1.4em; margin:0; padding-top:5px; }
#car-list.detail #moreinfo a { text-decoration:none; }

#roadside #main ol { list-style-position:outside; padding-left:2em; }
#roadside #main li { font-size:1.4em; margin-bottom:1.429em; }
#roadside #main .last { margin-bottom:0; }
#roadside #main li p { font-size:100%;  }
#roadside #main li h3 { display:inline; font-size:1.143em; line-height:0.714em; text-transform:none; }

html body #wrapper div.important { margin:10px 0; padding:10px 10px 0; border:2px solid #d2232a; }

#finance #aside { min-height:190px; }
#finance .form-list { list-style:none outside; margin-bottom:0; }
#finance #main .holder { font-size:100%; padding-bottom:10px; }
#finance #main .holder li { font-size:1.4em; list-style:decimal outside; margin:0 0 0.714em 0.714em; }
#finance #main .holder li li { font-size:100%; list-style:lower-alpha outside; margin:0; padding:0; }
#finance #main .holder li strong { color:#D2232A; }
#finance fieldset { clear:both; }
#finance fieldset fieldset { margin-bottom:1em; }
#finance fieldset.grouping.singleline { margin-bottom:10px; }
#finance fieldset.last { margin-bottom:0; }
/* preload image by adding them to a hidden form field */
#finance legend { display:none; }
#finance h3 { width:100%; font-size:3.0em; line-height:1.3335em; margin-bottom:0.3335em; font-weight:bold; text-transform:uppercase; }
#finance h3 strong { font-size:0.667em; text-transform:lowercase; }
#finance h4 { font-size:2.0em; line-height:1.0em; margin-bottom:0.5em; }
#finance .grouping h4 { width:50%; clear:both; float:left; font-size:1.6em; line-height:1.25em; margin-bottom:0; font-weight:normal; text-transform:none; position:relative; }
#finance label { width:50%; clear:both; float:left; font-size:1.6em; margin-bottom:0.625em; position:relative; }
#finance label:after { content:''; }
#finance fieldset.grouping label { clear:none; width:24%; margin-bottom:0; }
#finance fieldset.grouping label.odd { margin-left:50%; }
#finance fieldset.grouping input[type=text], #finance fieldset.grouping select { margin-bottom:0; margin-top:0; width:auto; margin:0 5px 0px 0; }
#finance .wide { width:100%; }
#finance input { width:50%; float:left; padding:1px; margin-bottom:10px; }
#finance textarea { margin-bottom:10px; max-width:538px; height:100px; }
#finance label input { width:auto; margin-bottom:0; }
#finance select { float:left; margin:0 0 10px 0; padding:1px; width:50%; }
#finance .hidden { display:none; }
#finance label span { position:absolute; right:4px; top:1px; }
#finance .required em { color:#D2232A; font-size:1.4em; font-weight:bold; line-height:0; position:relative; top:6px; }
#finance .required strong { color:#D2232A; font-weight:bold; font-size:0.875em; }
#finance strong.error { background:url(imgs/errorLabels.png) 0 -22px no-repeat; color:#FFFFFF; display:block; height:22px; line-height:23px; 
  padding:0 5px 0 10px; position:absolute; left:530px; top:0px; width:235px; text-align:center; font-size:0.75em;
}
#finance .required strong.error { background:url(imgs/errorLabels.png) 0 0 no-repeat; }
/* preload image by adding them to a hidden form field */
#finance .nonono { position:absolute; left:0; top:-5000px; /*background-image:url(imgs/errorLabels.png);*/ }
#finance .submit { width:auto; margin-bottom:10px; cursor:pointer; padding:3px 6px; }
#finance .clear { float:right; width:auto; padding:3px 6px; opacity:0.4; filter: alpha(opacity = 40); cursor:pointer; }
#finance .clear:hover { opacity:1; filter: alpha(opacity = 100); }
#finance .feedback h2 { font-size:1.8em; line-height: 1.333em; color:#D2232A; margin-bottom:0px; }
#finance .short { width:20% !important; }
#finance .doublespace { margin-bottom:1.25em; }
#finance .nospace { margin-bottom:0; }
#finance li p { font-size:1.4em; }
#finance .holder.last { margin-bottom:0; }
#finance #aside h2 { color:#D2232A; }
#finance #aside .star { color:#D2232A; color:#D2232A; font-size:1.4em; font-weight:bold; line-height:0; position:relative; top:6px; }
#PreviousAddress p { margin:0; }

#contact-form ul { list-style:none; margin:0 0 2em; overflow:hidden; }
#contact-form li { font-size:100%; }
#contact-form .text, #contact-form form textarea { font-size:1.4em; width:100%; margin:0; }
#contact-form textarea { height:156px; overflow:auto; }
#contact-form select { margin:0 0 1em; }
#contact-form .formBtn { float:right; margin:0; margin:1em -1px 0 0; clear:both; }
#contact-form #formSubmit { width:auto; }
#contact-form #sneaky { display:none; }
#contact-form #feedback { float:left; margin:1em 0 0; }
#contact-form #feedback p { font-size:1.4em; color:#d2232a; font-weight:bold; border:none; margin:0; padding:0; }
#contact-form label em { color:#D2232A; }
#contact-form #prefix { width:35px; text-align:right; }
#contact-form #phone { width:100px; }

#contact iframe { background:#666; border:none; }

/* warranty page */
#component-list { list-style:none; }
#component-list li { font-size:100%; }
#component-list ul { margin-bottom:1em; }
#component-list ul li { font-size:1.4em; }
#component-list ul li em { font-size:0.857em; }
#component-list h3 { color:#1b86fe; }
#component-list h3 em { color:#fff; font-size:0.75em; font-weight:normal; }

#footer { width:800px; padding:1em 0; margin:0 auto; }
#footer ul { list-style:none; text-align:center; margin:0; }
#footer li { display:inline; font-size:1.2em; padding:0 1em; text-transform:uppercase; letter-spacing:0.07em; }
#footer ul a { color:#ccc; text-decoration:none; outline:none; }
#footer ul a:hover { color:#0084ff; }
#home #footer .home, #cars #footer .cars, #roadside #footer .roadside, #quality #footer .quality, 
#warranty #footer .warranty, #import #footer .import, #finance #footer .finance, #contact #footer .contact { color:#0084ff; }

/* print styles */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

@media all and (orientation:portrait) {}
@media all and (orientation:landscape) {}
/* Grade-A Mobile Browsers */
@media screen and (max-device-width: 480px) {
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
}