Last active
August 29, 2015 14:23
-
-
Save kulerbox/d978f0a6a465e997beda to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.14) | |
| // Compass (v1.0.3) | |
| // ---- | |
| //border-radius | |
| $radius: 0px; | |
| $home-spacer: 90px; | |
| //trade and sell form to be in 2 steps side by side | |
| //true or false | |
| $trade-form: true; | |
| //will this a parts and spares website? | |
| //true or false | |
| $parts-website: false; | |
| //do you want the navbar to be full width? | |
| //true or false | |
| $navbar-width-full: true; | |
| //do you want the navbar to be next to the logo? | |
| //true or false | |
| $navbar-side-by-logo: true; | |
| //do you want the slider to be full width? | |
| //true or false | |
| $slider-width-full: false; | |
| //do you want content bg to touch the footer? | |
| //true or false | |
| $content-touch-footer: true; | |
| //do you want the car page to have a bg color on container? | |
| //true or false | |
| $car-page-bg: true; | |
| //does client have social links? | |
| //true or false | |
| $social: false; | |
| //do you want gradient colours? | |
| //true or false | |
| $gradient: true; | |
| //brand colors | |
| $color-primary: #24603a; | |
| $color-secondary: #c2b521; | |
| $color-tertiary: #fff; | |
| //default colors | |
| $color-light: white; | |
| $color-dark: #121212; | |
| $color-warning: #e93737; | |
| $color-success: #74c029; | |
| //panel bg colors | |
| $color-bg: $color-light; | |
| $color-bg-border: transparent; | |
| $color-font-default: #fff; | |
| $color-body-bg: $color-light; | |
| //element colors | |
| $color-header-bg: $color-dark; | |
| $color-header-border: $color-primary; | |
| $color-header-font: $color-dark; | |
| //menu colors | |
| $color-navbar-bg: $color-primary; | |
| $color-navbar-border: $color-light; | |
| $color-menu-hover: $color-secondary; | |
| $color-menu-hover-border: $color-light; | |
| $color-menu-font: $color-light; | |
| $color-menu-font-hover: $color-light; | |
| $color-mobi-border: $color-secondary; | |
| $color-mobi-font: $color-secondary; | |
| $color-link-hover: $color-primary; | |
| $color-font: $color-dark; | |
| $color-font-highlight: $color-secondary; | |
| //social colors | |
| $color-social-bg: $color-primary; | |
| $color-social-border: $color-light; | |
| $color-social-icon: $color-light; | |
| $color-social-icon-hover: $color-secondary; | |
| $radius-social-border: $radius; | |
| //home page car slider | |
| $color-car-slider-bg: darken($color-dark,10%); | |
| $color-car-slider-border: $color-primary; | |
| $color-car-slider-img: $color-light; | |
| $color-car-slider-img-border: $color-primary; | |
| $color-car-slider-font: $color-primary; | |
| $radius-car-slider-img: $radius; | |
| $color-content-bg: $color-light; | |
| $color-content-border: $color-secondary; | |
| $color-form-header-bg: $color-primary; | |
| //search panel colors | |
| $color-search-panel-bg: $color-primary; | |
| $color-search-panel-border: $color-primary; | |
| $color-search-panel-font: $color-light !important; | |
| $color-search-panel-font-hover: $color-primary; | |
| $color-search-panel-font-accent: $color-secondary !important; | |
| $color-main-search: $color-primary; | |
| //button colors | |
| $color-button-filter: $color-secondary; | |
| $color-button-reset: $color-warning; | |
| $color-button-send: $color-success; | |
| //car panel colors | |
| $color-car-panel-bg: $color-primary; | |
| $color-car-panel-border: $color-light; | |
| $color-car-panel-font: $color-font-default; | |
| $color-car-panel-font-hover: $color-secondary; | |
| $color-car-panel-font-accent: $color-secondary; | |
| $radius-car-panel-img: $radius; | |
| //fpa social icons | |
| $color-fpa-social: $color-light; | |
| //finance panel colors | |
| $color-accordion: $color-primary; | |
| $color-accordion-font: $color-light; | |
| $color-accordion-font-hover: $color-secondary; | |
| //contact styles | |
| $color-map-dir-bg: $color-primary; | |
| $color-map-dir-border: darken($color-primary, 10%); | |
| $color-map-dir-font: $color-light; | |
| $color-map-des: $color-secondary; | |
| $color-contact-font-accent: $color-secondary; | |
| //footer colors | |
| $color-footer-bg: $color-primary; | |
| $color-footer-border: transparent; | |
| $color-footer-links: $color-light; | |
| $color-footer-links-hover: $color-secondary; | |
| $color-footer-links-active: $color-secondary; | |
| $color-footer-headers: $color-light; | |
| $color-mobi-footer: $color-light; | |
| $color-download-btn-bg: $color-secondary; | |
| $color-download-btn-bg-hover: $color-primary; | |
| $color-download-font: $color-light; | |
| $slider-height: 500px; | |
| $radius-accordion: $radius; | |
| //do you want the fpa thumb images to appear under main image? | |
| //true or false | |
| $fpathumbs: false; | |
| //logical functions - ignore | |
| @mixin gradient($color1, $color2){ | |
| background-color: $color1 !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from($color1), to($color2)) !important; | |
| background: -webkit-linear-gradient(top, $color1, $color2) !important; | |
| background: -moz-linear-gradient(top, $color1, $color2) !important; | |
| background: -ms-linear-gradient(top, $color1, $color2) !important; | |
| background: -o-linear-gradient(top, $color1, $color2) !important; | |
| } | |
| //ensure font colors are always visible on background dark/light | |
| @if (lightness($color-bg) > 50) { | |
| $color-font-default: $color-dark; | |
| } @else { | |
| $color-font-default: $color-light; | |
| } | |
| //color dark/light #2 | |
| @if (lightness($color-footer-bg) > 50) { | |
| $color-footer-links: $color-dark; | |
| } @else { | |
| $color-footer-links: $color-light; | |
| } | |
| //color dark/light #3 | |
| @if (lightness($color-search-panel-bg) > 50) { | |
| $color-search-panel-font: $color-dark; | |
| } @else { | |
| $color-search-panel-font: $color-light; | |
| } | |
| //color dark/light #4 | |
| @if (lightness($color-map-dir-bg) > 50) { | |
| $color-map-dir-font: #333; | |
| } @else { | |
| $color-map-dir-font: #fff; | |
| } | |
| //color dark/light #5 | |
| @if (lightness($color-header-bg) > 50) { | |
| $color-header-font: $color-dark; | |
| } @else { | |
| $color-header-font: $color-light; | |
| } | |
| //color dark/light #6 | |
| @if (lightness($color-car-panel-bg) > 50) { | |
| $color-car-panel-font: $color-dark; | |
| } @else { | |
| $color-car-panel-font: $color-light; | |
| } | |
| //color dark/light #7 | |
| @if (lightness($color-search-panel-bg) > 50) { | |
| $color-search-panel-font: $color-dark; | |
| $color-search-panel-font-accent: $color-dark; | |
| } @else { | |
| $color-search-panel-font: $color-light; | |
| $color-search-panel-font-accent: $color-light; | |
| } | |
| $radius-reset: 0px; | |
| //font styles | |
| $font-transform: uppercase; | |
| $header-resize: 125px; | |
| @if $header-resize > 300px { | |
| $header-resize: 100px; | |
| } | |
| /* ------------- global styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| //hide wp nav bar | |
| div#wpadminbar { | |
| display: none; | |
| } | |
| body { | |
| background:$color-bg; | |
| } | |
| body * { | |
| font-family: "Open Sans",sans-serif; | |
| } | |
| #bg-body { | |
| background: $color-body-bg; | |
| } | |
| // body * { | |
| // text-transform: $font-transform; | |
| // } | |
| *:first-letter { | |
| text-transform:uppercase; | |
| } | |
| a { | |
| display:inline-block; | |
| } | |
| .btn-holder { | |
| max-width: 980px; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .download { | |
| @if ($gradient == true) { | |
| @include gradient($color-download-btn-bg, (darken($color-download-btn-bg,15%))); | |
| } @else { | |
| background: $color-download-btn-bg !important; | |
| } | |
| padding: 0; | |
| border-radius: 0; | |
| width: 45%; | |
| display: inline-block; | |
| line-height: 50px; | |
| margin: 10px; | |
| text-align: center; | |
| border-radius: $radius; | |
| &:hover { | |
| @if ($gradient == true) { | |
| @include gradient($color-download-btn-bg-hover, (darken($color-download-btn-bg-hover,15%))); | |
| } @else { | |
| background: $color-download-btn-bg-hover !important; | |
| } | |
| } | |
| a { | |
| color: $color-download-font !important; | |
| } | |
| } | |
| .main_header { | |
| border-bottom: 1px solid $color-header-border; | |
| height:$header-resize; | |
| background:$color-header-bg; | |
| } | |
| //mobile header styles | |
| #topnav { | |
| background: $color-header-bg; | |
| &.mobile.mobile_header > a { | |
| float: left; | |
| width: 80%; | |
| } | |
| &.mobile.mobile_header > a.nav-toggle { | |
| -webkit-border-radius: 6px; | |
| -moz-border-radius: 6px; | |
| border-radius: 6px; | |
| border: 2px solid $color-mobi-border; | |
| float: right; | |
| right: 20px; | |
| width: auto; | |
| margin-top:20px; | |
| &:before { | |
| color: $color-mobi-font !important; | |
| font-size: 40px; | |
| line-height: 25px; | |
| } | |
| } | |
| } | |
| .mobile_header img { | |
| max-width: 100% !important; | |
| margin: 0; | |
| float: left; | |
| width: auto; | |
| } | |
| .nav-toggle.active::before { | |
| font-size: 19px !important; | |
| content: "X"; | |
| margin-top:3px; | |
| color: $color-mobi-font !important; | |
| } | |
| #headerlogo img { | |
| height: auto; | |
| max-width: 100%; | |
| } | |
| .spacer.clear.full_width.large_bg_height.header_margin.search_outer{ | |
| height: $home-spacer; | |
| margin-top:160px !important; | |
| } | |
| .sorting_search_div { | |
| @if $header-resize == 200px { | |
| margin: 50px auto; | |
| } @elseif $header-resize == 250px { | |
| margin: 90px auto; | |
| } @elseif $header-resize == 300px { | |
| margin: 130px auto; | |
| } @else { | |
| margin: 0px auto; | |
| } | |
| } | |
| #content { | |
| background:$color-bg; | |
| border-radius: $radius; | |
| border:1px solid $color-bg-border !important; | |
| border:0; | |
| min-height:700px; | |
| } | |
| #content * { | |
| color:$color-font-default; | |
| } | |
| @if $car-page-bg == true { | |
| @if $color-car-panel-bg == $color-bg { | |
| $color-car-panel-bg: darken($color-bg,10%); | |
| } | |
| #content { | |
| background: $color-bg !important; | |
| padding: 20px !important; | |
| border: 0; | |
| border-radius: $radius; | |
| } | |
| } | |
| /* content bg restore */ | |
| // #content { | |
| // background: $color-bg !important; | |
| // padding: 20px !important; | |
| // border: 0; | |
| // border-radius: $radius; | |
| // } | |
| .pagecontainer .single_page_styled_div * { | |
| color:$color-map-dir-font !important; | |
| } | |
| .pagecontainer .single_page_styled_div { | |
| @if ($gradient == true) { | |
| @include gradient($color-map-dir-bg, (darken($color-map-dir-bg,15%))); | |
| } @else { | |
| background: $color-map-dir-bg !important; | |
| } | |
| color: $color-map-dir-font !important; | |
| border-radius: $radius; | |
| border: 2px solid $color-map-dir-border; | |
| & > h1 { | |
| color:$color-contact-font-accent !important; | |
| } | |
| } | |
| .sharing.desktop_tab i { | |
| color: $color-fpa-social !important; | |
| &:hover { | |
| transform: rotateZ(360deg); | |
| -webkit-transition: all .4s ease; | |
| transition: all .4s; | |
| } | |
| } | |
| .page_title.mobile { | |
| color: $color-light; | |
| } | |
| /* social */ | |
| .social_link_div.desktop i { | |
| color: $color-social-icon; | |
| &:hover { | |
| color:$color-social-icon-hover !important; | |
| } | |
| } | |
| i.fa { | |
| color: $color-social-icon !important; | |
| } | |
| .social_link_div a { | |
| @if ($social == false){ | |
| display:none !important; | |
| } | |
| @if ($gradient == true) { | |
| @include gradient($color-social-bg, (darken($color-social-bg,15%))); | |
| } @else { | |
| background: $color-social-bg !important; | |
| } | |
| border-radius: $radius-social-border; | |
| border-top:1px solid $color-social-border; | |
| border-bottom:1px solid $color-social-border; | |
| border-left:1px solid $color-social-border; | |
| display:block; | |
| height: 40px; | |
| margin-bottom: 10px; | |
| line-height: 40px; | |
| text-align: center; | |
| font-size: 21px; | |
| } | |
| /* ------------- menu styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| .main_menu { | |
| position: fixed; | |
| @if $navbar-width-full == true { | |
| top: $header-resize * .95; | |
| } @else { | |
| top: $header-resize - 8px; | |
| } | |
| width: 100%; | |
| height: 48px; | |
| z-index: 9999; | |
| left: 0; | |
| right: 0; | |
| border-top: 0; | |
| } | |
| /* main menu bar fixed width */ | |
| @if $navbar-width-full == true { | |
| /* main menu bar full width */ | |
| .menu-menu-main-container { | |
| @if ($gradient == true) { | |
| @include gradient($color-navbar-bg, (darken($color-navbar-bg,10%))); | |
| } @else { | |
| background: $color-navbar-bg !important; | |
| } | |
| border-radius: $radius-reset; | |
| max-width: 100%; | |
| margin: 0 auto; | |
| } | |
| } @else { | |
| .menu-menu-main-container { | |
| @if ($gradient == true) { | |
| @include gradient($color-navbar-bg, (darken($color-navbar-bg,10%))); | |
| } @else { | |
| background: $color-navbar-bg !important; | |
| } | |
| border-radius: $radius + 12px; | |
| max-width: 1200px; | |
| margin: -15px auto 0; | |
| } | |
| } | |
| .mainest_menu { | |
| border-top: 0px solid transparent; | |
| } | |
| .mainest_menu li { | |
| border-bottom: 0; | |
| } | |
| a.mainest_menu li { | |
| width: 25%; | |
| padding:0 40px; | |
| } | |
| .mainest_menu li:hover { | |
| padding-bottom: 1px; | |
| background: none !important; | |
| } | |
| .mainest_menu li a { | |
| background-image:none !important; | |
| color: $color-menu-font; | |
| font-size: 12px; | |
| text-transform: $font-transform; | |
| } | |
| /* menu hover */ | |
| .mainest_menu li a:hover, .mainest_menu a.active_menu, .main_menu_item:hover{ | |
| @if ($gradient == true) { | |
| @include gradient($color-menu-hover, (darken($color-menu-hover,15%))); | |
| } @else { | |
| background: $color-menu-hover !important; | |
| } | |
| border-bottom: 2px solid $color-menu-hover-border; | |
| color:$color-menu-font-hover; | |
| } | |
| .mainest_menu .menu_corner { | |
| background: none !important; | |
| } | |
| .left_menu_fill, .right_menu_fill{ | |
| background: none; | |
| border-bottom: 0; | |
| } | |
| .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { | |
| border: 0; | |
| } | |
| /* menu hover */ | |
| .left_menu_corner { | |
| border-bottom-right-radius: $radius-reset; | |
| border-bottom: 0px; | |
| border-right: 0px; | |
| } | |
| .right_menu_corner { | |
| border-bottom-left-radius: $radius-reset; | |
| border-bottom: 0px; | |
| border-left: 0px !important; | |
| } | |
| .nav-collapse .current_page_item a, .nav-collapse a:hover:hover { | |
| @if ($gradient == true) { | |
| @include gradient($color-menu-hover, (darken($color-menu-hover,15%))); | |
| color: $color-primary !important; | |
| } @else { | |
| background: $color-menu-hover !important; | |
| color: $color-primary !important; | |
| } | |
| } | |
| /* ------------- home page styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| /* car specials slider */ | |
| .specials_container { | |
| border: 2px solid $color-car-slider-border !important; | |
| background: $color-bg; | |
| border-radius: $radius !important; | |
| padding: 5px 15px; | |
| height:auto; | |
| } | |
| .rsVisibleNearbyWrap { | |
| height:170px !important; | |
| } | |
| .rsOverflow { | |
| height:250px !important; | |
| } | |
| .dealer_specials { | |
| height: 100%; | |
| border-radius: $radius-car-slider-img; | |
| } | |
| .dealer_specials * { | |
| color:$color-car-slider-font !important; | |
| } | |
| .dealer_specials .spacer.clear.tiny_height_space { | |
| height:20px; | |
| } | |
| ul.stock_feed.ui-tabs-nav { | |
| background: $color-bg; | |
| } | |
| .ui-tabs-active a { | |
| background: $color-light !important; | |
| } | |
| .stock_feed ul li { | |
| border: 1px solid $color-secondary; | |
| } | |
| .show_feed .desktop_tab, .show_feed .desktop_tab *, .show_feed .mobile { | |
| color: $color-primary !important; | |
| } | |
| /* active state */ | |
| li.show_feed.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active * { | |
| color: $color-secondary !important; | |
| } | |
| /* add corners to tabs */ | |
| .show_leftey { | |
| border-top-left-radius: $radius-reset; | |
| border-bottom-left-radius: $radius-reset; | |
| @if ($gradient == true) { | |
| @include gradient($color-navbar-bg, (darken($color-navbar-bg,15%))); | |
| } @else { | |
| background: $color-navbar-bg !important; | |
| } | |
| } | |
| .show_rightey { | |
| border-top-right-radius: $radius-reset; | |
| border-bottom-right-radius: $radius-reset; | |
| @if ($gradient == true) { | |
| @include gradient($color-navbar-bg, (darken($color-navbar-bg,15%))); | |
| } @else { | |
| background: $color-navbar-bg !important; | |
| } | |
| } | |
| .rsDefaultInv.rsHor .rsArrowLeft .rsArrowIcn { | |
| background: url(http://www.autotradersites.co.za/images/global/left_slide_arrow-black.png); | |
| } | |
| .rsDefaultInv.rsHor .rsArrowRight .rsArrowIcn { | |
| background: url(http://www.autotradersites.co.za/images/global/right_slide_arrow-black.png); | |
| } | |
| .kwicks img { | |
| width: 90%!important; | |
| } | |
| //slider | |
| div#slider-range-price, div#slider-range-engine, div#slider-range-year, div#slider-range-mile { | |
| background:darken($color-secondary,25%); | |
| } | |
| div#hislider1, .hiSlider-SliderApp, .SliderContainer{ | |
| min-height: $slider-height !important; | |
| @if ($slider-width-full == true) { | |
| width:100% !important; | |
| max-width:100% !important; | |
| } | |
| background:none !important; | |
| } | |
| .hiSlider-SliderApp img { | |
| @if ($slider-width-full == true) { | |
| width:100% !important; | |
| max-width:100% !important; | |
| left:0 !important; | |
| height: auto !important; | |
| } | |
| } | |
| @if ($slider-width-full == true) { | |
| #hislider1 canvas { | |
| width:100% !important; | |
| max-width:100% !important; | |
| left: 0 !important; | |
| } | |
| } | |
| @if ($navbar-side-by-logo == true) { | |
| .main_menu { | |
| position: relative; | |
| top: 0px; | |
| width: 100%; | |
| padding: 15px 0; | |
| height: 66px; | |
| z-index: 9999; | |
| left: 0; | |
| right: 0; | |
| border-top: 0; | |
| width: 70%; | |
| float: left; | |
| @if ($gradient == true) { | |
| @include gradient($color-navbar-bg, (darken($color-navbar-bg,15%))); | |
| } @else { | |
| background: $color-navbar-bg; | |
| } | |
| } | |
| .main_header { | |
| border-bottom: 1px solid $color-navbar-border; | |
| height: 95px; | |
| @if ($gradient == true) { | |
| @include gradient($color-navbar-bg, (darken($color-navbar-bg,15%))); | |
| } @else { | |
| background: $color-navbar-bg; | |
| } | |
| width: 30%; | |
| float: left; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| } | |
| /* ------------- form styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| .tradensell-header { | |
| width:100%; | |
| padding:10px; | |
| background:$color-form-header-bg; | |
| color:white !important; | |
| } | |
| @if ($trade-form == true) { | |
| //trade and sell form | |
| .tradensell-header { | |
| width:100%; | |
| padding:10px; | |
| background: $color-form-header-bg; | |
| color:white !important; | |
| } | |
| .form_cell { | |
| float: left; | |
| width: 45%; | |
| margin-right: 5%; | |
| } | |
| // @media screen and (max-width: 979px) and (min-width: 640px) { | |
| // .form_cell { | |
| // width: 45%; | |
| // margin-right: 5%; | |
| // } | |
| // } | |
| .form_cell.step3 { | |
| float: left; | |
| width: 100%; | |
| margin-right: 5%; | |
| } | |
| @media screen and (max-width: 639px) and (min-width: 0px) { | |
| .form_cell { | |
| width: 100%; | |
| } | |
| } | |
| .attachments { | |
| clear: both; | |
| } | |
| textarea.wpcf7-form-control.wpcf7-textarea.placeholder { | |
| height: 95px !important; | |
| } | |
| } | |
| input.form_field.text.randsymbolsymbol.rand, select.form_field.text, input.form_field.text.rand, .wpcf7-form input, select.wpcf7-form-control, textarea.wpcf7-form-control { | |
| background: $color-light; | |
| border: 1px solid $color-dark; | |
| height: 35px; | |
| line-height: 35px; | |
| width:95%; | |
| } | |
| select.form_field.text, select.wpcf7-form-control { | |
| width: 99%; | |
| } | |
| textarea.wpcf7-form-control { | |
| height:150px; | |
| } | |
| form.wpcf7-form label, form.wpcf7-form h3 { | |
| font-size: 13px; | |
| margin: 3px; | |
| } | |
| form.wpcf7-form h3 { | |
| margin:15px 3px 10px; | |
| } | |
| form.wpcf7-form small { | |
| font-size:10px; | |
| margin:3px; | |
| } | |
| input.wpcf7-form-control.wpcf7-submit, { | |
| border-radius: $radius; | |
| //if panel is the same color as button then swap | |
| @if ($color-map-dir-bg == $color-primary){ | |
| @if ($gradient == true) { | |
| @include gradient($color-secondary, (darken($color-secondary,15%))); | |
| } @else { | |
| background: $color-secondary !important; | |
| } | |
| &:hover { | |
| @if ($gradient == true) { | |
| @include gradient($color-tertiary, (darken($color-tertiary,15%))); | |
| } @else { | |
| background: $color-tertiary !important; | |
| } | |
| } | |
| } @else { | |
| @if ($gradient == true) { | |
| @include gradient($color-primary, (darken($color-primary,15%))); | |
| } @else { | |
| background: $color-primary !important; | |
| } | |
| &:hover { | |
| @if ($gradient == true) { | |
| @include gradient($color-secondary, (darken($color-secondary,15%))); | |
| } @else { | |
| background: $color-secondary !important; | |
| } | |
| } | |
| } | |
| color: $color-light !important; | |
| width: 100%; | |
| padding: 0; | |
| } | |
| button.button.submit_button { | |
| @extend input.wpcf7-form-control.wpcf7-submit; | |
| padding:10px 0; | |
| } | |
| /* validation errors */ | |
| div.wpcf7-validation-errors, span.wpcf7-not-valid-tip { | |
| border: 0 !important; | |
| @if ($gradient == true) { | |
| @include gradient($color-warning, (darken($color-warning,15%))); | |
| } @else { | |
| background: $color-warning !important; | |
| } | |
| border-radius: $radius !important; | |
| padding: 10px !important; | |
| color: $color-light !important; | |
| font-size: 14px !important; | |
| font-weight:normal !important | |
| } | |
| /* ------------- search styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| /* side search styles */ | |
| div#search_filter h3 { | |
| color: $color-search-panel-font-accent; | |
| } | |
| #filter_manufactureYear, #filter_engineVolume, #filter_mileage { | |
| color: $color-search-panel-font !important; | |
| } | |
| #side_filter_menu h2 { | |
| font-weight: bold; | |
| float: left; | |
| line-height: 35px; | |
| color: $color-search-panel-font !important; | |
| } | |
| #search_filter li { | |
| color:$color-search-panel-font; | |
| } | |
| .ui-state-active { | |
| background: url('../images/nav_ul_li_current_background.png') repeat-x !important; | |
| color: $color-font-default !important; | |
| } | |
| .ui-tabs-active span { | |
| color: $color-primary !important; | |
| } | |
| #side_filter_menu button { | |
| width: 50%; | |
| font-weight: bold; | |
| float: left; | |
| font-size: 18px; | |
| cursor: pointer; | |
| @if ($color-search-panel-bg == $color-primary){ | |
| @if ($gradient == true) { | |
| @include gradient($color-secondary, (darken($color-secondary,15%))); | |
| } @else { | |
| background: $color-secondary !important; | |
| } | |
| color: $color-light; | |
| } @else { | |
| @if ($gradient == true) { | |
| @include gradient($color-primary, (darken($color-primary,15%))); | |
| } @else { | |
| background: $color-primary !important; | |
| } | |
| color: $color-light; | |
| } | |
| max-width: 70px; | |
| border-radius: $radius; | |
| padding: 5px; | |
| margin-right: 20px; | |
| text-align: center; | |
| &:hover { | |
| @if ($gradient == true) { | |
| @include gradient($color-tertiary, (darken($color-tertiary,15%))); | |
| } @else { | |
| background: $color-tertiary !important; | |
| } | |
| } | |
| } | |
| /* search bars */ | |
| .search_box, .sort_box, .vehicle_search { | |
| background: $color-main-search; | |
| border-radius: $radius; | |
| } | |
| /* font color */ | |
| .search_box, .sort_box, .vehicle_search *, .sorting_search_div * { | |
| color: $color-light !important; | |
| } | |
| /* search bar left */ | |
| #side_filter_menu { | |
| @if ($gradient == true) { | |
| @include gradient($color-search-panel-bg, (darken($color-search-panel-bg,15%))); | |
| } @else { | |
| background: $color-search-panel-bg !important; | |
| } | |
| border-top-right-radius: $radius; | |
| border-bottom-right-radius: $radius; | |
| border: 2px solid $color-search-panel-border; | |
| border-left: none; | |
| } | |
| //search range sliders | |
| .ui-slider-range.ui-widget-header.ui-corner-all { | |
| background: $color-secondary | |
| } | |
| div#slider-range-price, div#slider-range-engine, div#slider-range-year, div#slider-range-mile { | |
| background:darken($color-secondary,25%); | |
| } | |
| .main_search_button, .search_box .submitme { | |
| background: url(http://autotradersites.co.za/images/sppsallterrain/main_search_btn.png) no-repeat; | |
| } | |
| /* ------------- car page styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| /* car list items */ | |
| .list-item .box { | |
| border: 0; | |
| @if ($gradient == true) { | |
| @include gradient($color-car-panel-bg, (darken($color-car-panel-bg,15%))); | |
| } @else { | |
| background: $color-car-panel-bg !important; | |
| } | |
| border-radius: $radius; | |
| } | |
| /* content styles */ | |
| .box .list-item-content.list_elements h4{ | |
| color: $color-car-panel-font-accent !important; | |
| } | |
| .list-item.desktop_tab .box b, .list-item.mobile .box b { | |
| color: $color-car-panel-font-accent !important; | |
| } | |
| .list-item.desktop_tab .box *, .list-item.mobile .box * { | |
| color: $color-car-panel-font !important; | |
| } | |
| .clear.spacer.tiny_height_space.full_width, .clear.spacer.full_width.small_height_space { | |
| height:30px; | |
| } | |
| .list-item .links_div a:hover { | |
| color: $color-car-panel-font-hover !important; | |
| } | |
| /* image styles */ | |
| .list-item-image img { | |
| border: 1px solid $color-car-slider-img-border; | |
| border-radius:$radius-car-panel-img; | |
| } | |
| .pagination { | |
| @if ($gradient == true) { | |
| @include gradient($color-primary, (darken($color-primary,15%))); | |
| } @else { | |
| background: $color-primary !important; | |
| } | |
| height: 50px; | |
| line-height: 50px; | |
| color: $color-light !important; | |
| padding: 0 44px; | |
| margin: 0; | |
| } | |
| .pagination * { | |
| color: $color-light !important; | |
| } | |
| /* fpa styles */ | |
| .single_page_styled_div * { | |
| color: $color-font-default !important; | |
| } | |
| .full_page_description.mobile.mobi_desc_expand.desc_expand { | |
| padding: 0 0 61px; | |
| } | |
| div#at_gallery { | |
| background: $color-bg !important; | |
| } | |
| //smallerise spacer | |
| .single_page_styled_div .clear.spacer.full_width.medium_height_space.mobile { | |
| height: 20px; | |
| } | |
| .rsDefault .rsThumb.rsNavSelected { | |
| background:$color-primary !important; | |
| } | |
| //font height fix on fpa block | |
| .sr_fpa.sr_left_fpa.printVehicleDetails { | |
| padding-top: 23px; | |
| } | |
| .vehicle_details .clear.spacer.full_width { | |
| height: 30px; | |
| } | |
| .fpa_tab_icon { | |
| width:47%; | |
| display:inline-block; | |
| img { | |
| width: 100%; | |
| } | |
| } | |
| .rsOverflow { | |
| min-height: 392px !important; | |
| } | |
| .rsDefault .rsGCaption { | |
| color: $color-light !important; | |
| background: rgba($color-dark,0.65) !important; | |
| } | |
| @if ($fpathumbs == true) { | |
| .secondary_listing_images { | |
| float:none; | |
| width:250px; | |
| a{ | |
| width:30%; | |
| display:inline-block; | |
| } | |
| } | |
| } | |
| /* ------------- contact styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| /* map description */ | |
| .expand_map.desc_direct_expand { | |
| padding-top: 15px; | |
| } | |
| .expand_map.desc_direct_expand * { | |
| color: $color-map-dir-font !important; | |
| } | |
| /* header styles */ | |
| .expand_map.desc_direct_expand h3 { | |
| color: $color-secondary !important; | |
| } | |
| .expand_map.desc_direct_expand b { | |
| color: $color-map-des !important; | |
| } | |
| .show_contact_info.tab_forms a { | |
| color: $color-contact-font-accent !important; | |
| &:hover { | |
| color: $color-tertiary !important; | |
| } | |
| } | |
| //contaxt buttons | |
| img.form_switch.contact_button_lightbox.desktop_tab_in { | |
| width: 47%; | |
| display: inline-block; | |
| } | |
| /* content styles */ | |
| .pagecontainer .show_contact_info.tab_forms, .show_contact_info.tab_forms * { | |
| color: $color-font-default !important; | |
| } | |
| .pagecontainer .single_page_styled_div option { | |
| color: black !important; | |
| } | |
| .pagecontainer .show_contact_info.tab_forms h3 { | |
| color: $color-contact-font-accent !important; | |
| } | |
| .pagecontainer .single_page_styled_div input, .pagecontainer .single_page_styled_div select.form_field.text, .pagecontainer .single_page_styled_div textarea { | |
| color:$color-font; | |
| } | |
| .direction_div * { | |
| color: $color-font-default !important; | |
| } | |
| .direction_div b { | |
| color: $color-secondary !important; | |
| } | |
| .show_more, .show_more_direction { | |
| @if ($gradient == true) { | |
| @include gradient(rgba($color-map-dir-bg,0.6), darken($color-map-dir-bg, 15%)); | |
| } @else { | |
| @include gradient(rgba($color-map-dir-bg,0.6), $color-map-dir-bg); | |
| } | |
| } | |
| .wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok { | |
| margin-top: -67px; | |
| } | |
| /* ------------- accordion styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| #finance_accordion .ui-accordion-header { | |
| @if ($gradient == true) { | |
| @include gradient($color-accordion, (darken($color-accordion,15%))); | |
| } @else { | |
| background: $color-accordion !important; | |
| } | |
| height: 50px; | |
| color: $color-accordion-font; | |
| line-height: 50px; | |
| padding-left: 8px; | |
| cursor: pointer; | |
| padding: 0 15px; | |
| border-radius: $radius-accordion; | |
| } | |
| .ui-state-active { | |
| @if ($gradient == true) { | |
| @include gradient(darken($color-accordion,10%), (darken($color-accordion,20%))); | |
| } @else { | |
| background: $color-accordion !important; | |
| } | |
| } | |
| .ui-accordion-content { | |
| margin: 20px 0 0 15px; | |
| } | |
| .ui-accordion-content .box { | |
| margin-bottom:10px; | |
| } | |
| h3.ui-state-active { | |
| color:$color-secondary !important; | |
| } | |
| /* ------------- footer styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| //choose whether content touches footer | |
| @if $content-touch-footer == true { | |
| .quicklinks_outer.desktop_tab { | |
| margin-top:0px; | |
| } | |
| #content { | |
| border-bottom-left-radius: $radius-reset; | |
| border-bottom-right-radius: $radius-reset; | |
| } | |
| } @else { | |
| .quicklinks_outer.desktop_tab { | |
| margin-top:50px; | |
| } | |
| } | |
| .quicklinks_outer.desktop_tab { | |
| @if ($gradient == true) { | |
| @include gradient($color-footer-bg, (darken($color-footer-bg,15%))); | |
| } @else { | |
| background: $color-footer-bg !important; | |
| } | |
| padding-bottom:10px; | |
| border-bottom: 1px solid $color-footer-border; | |
| & span { | |
| display:block; | |
| } | |
| } | |
| .foot_quicklinks { | |
| color: $color-footer-links; | |
| } | |
| .foot_quicklinks .links { | |
| font-size:13px; | |
| line-height:20px; | |
| a { | |
| color:$color-footer-links; | |
| } | |
| } | |
| .foot_quicklinks .links { | |
| width:20%; | |
| } | |
| .foot_quicklinks .links:nth-child(3n+3) { | |
| width:32%; | |
| } | |
| .foot_quicklinks .links:nth-child(4n+4) { | |
| width:26%; | |
| } | |
| .links h3 { | |
| text-transform: $font-transform; | |
| margin-bottom: 22px; | |
| } | |
| .links a:hover { | |
| color: $color-footer-links-hover; | |
| } | |
| .current_page_item a { | |
| color: $color-footer-links-active !important; | |
| } | |
| .footer_outer.desktop_tab { | |
| background:$color-light !important; | |
| } | |
| img.foot_logo { | |
| max-width: 125px !important; | |
| } | |
| //mobile footer | |
| .mobi_toolbar.mobile { | |
| background: $color-mobi-footer; | |
| } | |
| @media (max-width: 1245px) { | |
| div#hislider1, .hiSlider-SliderApp, .SliderContainer{ | |
| min-height: 300px !important; | |
| } | |
| } | |
| //mobile styles | |
| @media (max-width: 979px) { | |
| .specials_container { | |
| width: 93%; | |
| } | |
| .social_link_div { | |
| border-raidus: $radius !important; | |
| } | |
| } | |
| @media (max-width:900px) { | |
| @if ($navbar-side-by-logo == true) { | |
| #headerlogo img { | |
| height: auto; | |
| max-width: 350px; | |
| margin-top:15px; | |
| } | |
| } | |
| } | |
| @media (max-width: 740px) { | |
| div#hislider1, .hiSlider-SliderApp, .SliderContainer{ | |
| min-height: 200px !important; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .spacer.clear.full_width.large_bg_height.header_margin.search_outer { | |
| margin-top: -11px !important; | |
| } | |
| .main_search_button, .search_box .submitme { | |
| margin: 0 auto; | |
| } | |
| .spacer.clear.full_width.large_bg_height.header_margin.search_outer { | |
| height: 165px; | |
| } | |
| .nav-collapse a { | |
| background: $color-navbar-bg; | |
| border-bottom: 1px solid $color-navbar-border; | |
| } | |
| #content { | |
| padding: 0 !important; | |
| } | |
| .specials_container { | |
| width: auto; | |
| border: 0 !important; | |
| padding: 0 15px 15px 15px !important; | |
| height:auto; | |
| } | |
| .dealer_specials img { | |
| max-height: 100%; | |
| } | |
| .foot_quicklinks .links { | |
| width:18%; | |
| } | |
| .foot_quicklinks .links:nth-child(3n+3) { | |
| width:32%; | |
| } | |
| } | |
| @if ($parts-website == true) { | |
| #vehicle_feed, .vehicle_search, ul.kwicks.kwicks-horizontal { | |
| display:none !important; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ------------- global styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| div#wpadminbar { | |
| display: none; | |
| } | |
| body { | |
| background: white; | |
| } | |
| body * { | |
| font-family: "Open Sans",sans-serif; | |
| } | |
| #bg-body { | |
| background: white; | |
| } | |
| *:first-letter { | |
| text-transform: uppercase; | |
| } | |
| a { | |
| display: inline-block; | |
| } | |
| .btn-holder { | |
| max-width: 980px; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .download { | |
| background-color: #c2b521 !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c2b521), to(#817816)) !important; | |
| background: -webkit-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -moz-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -ms-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -o-linear-gradient(top, #c2b521, #817816) !important; | |
| padding: 0; | |
| border-radius: 0; | |
| width: 45%; | |
| display: inline-block; | |
| line-height: 50px; | |
| margin: 10px; | |
| text-align: center; | |
| border-radius: 0px; | |
| } | |
| .download:hover { | |
| background-color: #24603a !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24603a), to(#0f2818)) !important; | |
| background: -webkit-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -moz-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -ms-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -o-linear-gradient(top, #24603a, #0f2818) !important; | |
| } | |
| .download a { | |
| color: white !important; | |
| } | |
| .main_header { | |
| border-bottom: 1px solid #24603a; | |
| height: 125px; | |
| background: #121212; | |
| } | |
| #topnav { | |
| background: #121212; | |
| } | |
| #topnav.mobile.mobile_header > a { | |
| float: left; | |
| width: 80%; | |
| } | |
| #topnav.mobile.mobile_header > a.nav-toggle { | |
| -webkit-border-radius: 6px; | |
| -moz-border-radius: 6px; | |
| border-radius: 6px; | |
| border: 2px solid #c2b521; | |
| float: right; | |
| right: 20px; | |
| width: auto; | |
| margin-top: 20px; | |
| } | |
| #topnav.mobile.mobile_header > a.nav-toggle:before { | |
| color: #c2b521 !important; | |
| font-size: 40px; | |
| line-height: 25px; | |
| } | |
| .mobile_header img { | |
| max-width: 100% !important; | |
| margin: 0; | |
| float: left; | |
| width: auto; | |
| } | |
| .nav-toggle.active::before { | |
| font-size: 19px !important; | |
| content: "X"; | |
| margin-top: 3px; | |
| color: #c2b521 !important; | |
| } | |
| #headerlogo img { | |
| height: auto; | |
| max-width: 100%; | |
| } | |
| .spacer.clear.full_width.large_bg_height.header_margin.search_outer { | |
| height: 90px; | |
| margin-top: 160px !important; | |
| } | |
| .sorting_search_div { | |
| margin: 0px auto; | |
| } | |
| #content { | |
| background: white; | |
| border-radius: 0px; | |
| border: 1px solid transparent !important; | |
| border: 0; | |
| min-height: 700px; | |
| } | |
| #content * { | |
| color: #121212; | |
| } | |
| #content { | |
| background: white !important; | |
| padding: 20px !important; | |
| border: 0; | |
| border-radius: 0px; | |
| } | |
| /* content bg restore */ | |
| .pagecontainer .single_page_styled_div * { | |
| color: #fff !important; | |
| } | |
| .pagecontainer .single_page_styled_div { | |
| background-color: #24603a !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24603a), to(#0f2818)) !important; | |
| background: -webkit-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -moz-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -ms-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -o-linear-gradient(top, #24603a, #0f2818) !important; | |
| color: #fff !important; | |
| border-radius: 0px; | |
| border: 2px solid #163b24; | |
| } | |
| .pagecontainer .single_page_styled_div > h1 { | |
| color: #c2b521 !important; | |
| } | |
| .sharing.desktop_tab i { | |
| color: white !important; | |
| } | |
| .sharing.desktop_tab i:hover { | |
| transform: rotateZ(360deg); | |
| -webkit-transition: all .4s ease; | |
| transition: all .4s; | |
| } | |
| .page_title.mobile { | |
| color: white; | |
| } | |
| /* social */ | |
| .social_link_div.desktop i { | |
| color: white; | |
| } | |
| .social_link_div.desktop i:hover { | |
| color: #c2b521 !important; | |
| } | |
| i.fa { | |
| color: white !important; | |
| } | |
| .social_link_div a { | |
| display: none !important; | |
| background-color: #24603a !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24603a), to(#0f2818)) !important; | |
| background: -webkit-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -moz-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -ms-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -o-linear-gradient(top, #24603a, #0f2818) !important; | |
| border-radius: 0px; | |
| border-top: 1px solid white; | |
| border-bottom: 1px solid white; | |
| border-left: 1px solid white; | |
| display: block; | |
| height: 40px; | |
| margin-bottom: 10px; | |
| line-height: 40px; | |
| text-align: center; | |
| font-size: 21px; | |
| } | |
| /* ------------- menu styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| .main_menu { | |
| position: fixed; | |
| top: 118.75px; | |
| width: 100%; | |
| height: 48px; | |
| z-index: 9999; | |
| left: 0; | |
| right: 0; | |
| border-top: 0; | |
| } | |
| /* main menu bar fixed width */ | |
| /* main menu bar full width */ | |
| .menu-menu-main-container { | |
| background-color: #24603a !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24603a), to(#163b24)) !important; | |
| background: -webkit-linear-gradient(top, #24603a, #163b24) !important; | |
| background: -moz-linear-gradient(top, #24603a, #163b24) !important; | |
| background: -ms-linear-gradient(top, #24603a, #163b24) !important; | |
| background: -o-linear-gradient(top, #24603a, #163b24) !important; | |
| border-radius: 0px; | |
| max-width: 100%; | |
| margin: 0 auto; | |
| } | |
| .mainest_menu { | |
| border-top: 0px solid transparent; | |
| } | |
| .mainest_menu li { | |
| border-bottom: 0; | |
| } | |
| a.mainest_menu li { | |
| width: 25%; | |
| padding: 0 40px; | |
| } | |
| .mainest_menu li:hover { | |
| padding-bottom: 1px; | |
| background: none !important; | |
| } | |
| .mainest_menu li a { | |
| background-image: none !important; | |
| color: white; | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| } | |
| /* menu hover */ | |
| .mainest_menu li a:hover, .mainest_menu a.active_menu, .main_menu_item:hover { | |
| background-color: #c2b521 !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c2b521), to(#817816)) !important; | |
| background: -webkit-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -moz-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -ms-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -o-linear-gradient(top, #c2b521, #817816) !important; | |
| border-bottom: 2px solid white; | |
| color: white; | |
| } | |
| .mainest_menu .menu_corner { | |
| background: none !important; | |
| } | |
| .left_menu_fill, .right_menu_fill { | |
| background: none; | |
| border-bottom: 0; | |
| } | |
| .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { | |
| border: 0; | |
| } | |
| /* menu hover */ | |
| .left_menu_corner { | |
| border-bottom-right-radius: 0px; | |
| border-bottom: 0px; | |
| border-right: 0px; | |
| } | |
| .right_menu_corner { | |
| border-bottom-left-radius: 0px; | |
| border-bottom: 0px; | |
| border-left: 0px !important; | |
| } | |
| .nav-collapse .current_page_item a, .nav-collapse a:hover:hover { | |
| background-color: #c2b521 !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c2b521), to(#817816)) !important; | |
| background: -webkit-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -moz-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -ms-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -o-linear-gradient(top, #c2b521, #817816) !important; | |
| color: #24603a !important; | |
| } | |
| /* ------------- home page styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| /* car specials slider */ | |
| .specials_container { | |
| border: 2px solid #24603a !important; | |
| background: white; | |
| border-radius: 0px !important; | |
| padding: 5px 15px; | |
| height: auto; | |
| } | |
| .rsVisibleNearbyWrap { | |
| height: 170px !important; | |
| } | |
| .rsOverflow { | |
| height: 250px !important; | |
| } | |
| .dealer_specials { | |
| height: 100%; | |
| border-radius: 0px; | |
| } | |
| .dealer_specials * { | |
| color: #24603a !important; | |
| } | |
| .dealer_specials .spacer.clear.tiny_height_space { | |
| height: 20px; | |
| } | |
| ul.stock_feed.ui-tabs-nav { | |
| background: white; | |
| } | |
| .ui-tabs-active a { | |
| background: white !important; | |
| } | |
| .stock_feed ul li { | |
| border: 1px solid #c2b521; | |
| } | |
| .show_feed .desktop_tab, .show_feed .desktop_tab *, .show_feed .mobile { | |
| color: #24603a !important; | |
| } | |
| /* active state */ | |
| li.show_feed.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active * { | |
| color: #c2b521 !important; | |
| } | |
| /* add corners to tabs */ | |
| .show_leftey { | |
| border-top-left-radius: 0px; | |
| border-bottom-left-radius: 0px; | |
| background-color: #24603a !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24603a), to(#0f2818)) !important; | |
| background: -webkit-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -moz-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -ms-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -o-linear-gradient(top, #24603a, #0f2818) !important; | |
| } | |
| .show_rightey { | |
| border-top-right-radius: 0px; | |
| border-bottom-right-radius: 0px; | |
| background-color: #24603a !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24603a), to(#0f2818)) !important; | |
| background: -webkit-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -moz-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -ms-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -o-linear-gradient(top, #24603a, #0f2818) !important; | |
| } | |
| .rsDefaultInv.rsHor .rsArrowLeft .rsArrowIcn { | |
| background: url(http://www.autotradersites.co.za/images/global/left_slide_arrow-black.png); | |
| } | |
| .rsDefaultInv.rsHor .rsArrowRight .rsArrowIcn { | |
| background: url(http://www.autotradersites.co.za/images/global/right_slide_arrow-black.png); | |
| } | |
| .kwicks img { | |
| width: 90% !important; | |
| } | |
| div#slider-range-price, div#slider-range-engine, div#slider-range-year, div#slider-range-mile { | |
| background: #554f0e; | |
| } | |
| div#hislider1, .hiSlider-SliderApp, .SliderContainer { | |
| min-height: 500px !important; | |
| background: none !important; | |
| } | |
| .main_menu { | |
| position: relative; | |
| top: 0px; | |
| width: 100%; | |
| padding: 15px 0; | |
| height: 66px; | |
| z-index: 9999; | |
| left: 0; | |
| right: 0; | |
| border-top: 0; | |
| width: 70%; | |
| float: left; | |
| background-color: #24603a !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24603a), to(#0f2818)) !important; | |
| background: -webkit-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -moz-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -ms-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -o-linear-gradient(top, #24603a, #0f2818) !important; | |
| } | |
| .main_header { | |
| border-bottom: 1px solid white; | |
| height: 95px; | |
| background-color: #24603a !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24603a), to(#0f2818)) !important; | |
| background: -webkit-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -moz-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -ms-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -o-linear-gradient(top, #24603a, #0f2818) !important; | |
| width: 30%; | |
| float: left; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* ------------- form styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| .tradensell-header { | |
| width: 100%; | |
| padding: 10px; | |
| background: #24603a; | |
| color: white !important; | |
| } | |
| .tradensell-header { | |
| width: 100%; | |
| padding: 10px; | |
| background: #24603a; | |
| color: white !important; | |
| } | |
| .form_cell { | |
| float: left; | |
| width: 45%; | |
| margin-right: 5%; | |
| } | |
| .form_cell.step3 { | |
| float: left; | |
| width: 100%; | |
| margin-right: 5%; | |
| } | |
| @media screen and (max-width: 639px) and (min-width: 0px) { | |
| .form_cell { | |
| width: 100%; | |
| } | |
| } | |
| .attachments { | |
| clear: both; | |
| } | |
| textarea.wpcf7-form-control.wpcf7-textarea.placeholder { | |
| height: 95px !important; | |
| } | |
| input.form_field.text.randsymbolsymbol.rand, select.form_field.text, input.form_field.text.rand, .wpcf7-form input, select.wpcf7-form-control, textarea.wpcf7-form-control { | |
| background: white; | |
| border: 1px solid #121212; | |
| height: 35px; | |
| line-height: 35px; | |
| width: 95%; | |
| } | |
| select.form_field.text, select.wpcf7-form-control { | |
| width: 99%; | |
| } | |
| textarea.wpcf7-form-control { | |
| height: 150px; | |
| } | |
| form.wpcf7-form label, form.wpcf7-form h3 { | |
| font-size: 13px; | |
| margin: 3px; | |
| } | |
| form.wpcf7-form h3 { | |
| margin: 15px 3px 10px; | |
| } | |
| form.wpcf7-form small { | |
| font-size: 10px; | |
| margin: 3px; | |
| } | |
| input.wpcf7-form-control.wpcf7-submit, button.button.submit_button { | |
| border-radius: 0px; | |
| background-color: #c2b521 !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c2b521), to(#817816)) !important; | |
| background: -webkit-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -moz-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -ms-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -o-linear-gradient(top, #c2b521, #817816) !important; | |
| color: white !important; | |
| width: 100%; | |
| padding: 0; | |
| } | |
| input.wpcf7-form-control.wpcf7-submit:hover, button.button.submit_button:hover { | |
| background-color: #fff !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#d9d9d9)) !important; | |
| background: -webkit-linear-gradient(top, #fff, #d9d9d9) !important; | |
| background: -moz-linear-gradient(top, #fff, #d9d9d9) !important; | |
| background: -ms-linear-gradient(top, #fff, #d9d9d9) !important; | |
| background: -o-linear-gradient(top, #fff, #d9d9d9) !important; | |
| } | |
| button.button.submit_button { | |
| padding: 10px 0; | |
| } | |
| /* validation errors */ | |
| div.wpcf7-validation-errors, span.wpcf7-not-valid-tip { | |
| border: 0 !important; | |
| background-color: #e93737 !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e93737), to(#bf1515)) !important; | |
| background: -webkit-linear-gradient(top, #e93737, #bf1515) !important; | |
| background: -moz-linear-gradient(top, #e93737, #bf1515) !important; | |
| background: -ms-linear-gradient(top, #e93737, #bf1515) !important; | |
| background: -o-linear-gradient(top, #e93737, #bf1515) !important; | |
| border-radius: 0px !important; | |
| padding: 10px !important; | |
| color: white !important; | |
| font-size: 14px !important; | |
| font-weight: normal !important; | |
| } | |
| /* ------------- search styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| /* side search styles */ | |
| div#search_filter h3 { | |
| color: white; | |
| } | |
| #filter_manufactureYear, #filter_engineVolume, #filter_mileage { | |
| color: white !important; | |
| } | |
| #side_filter_menu h2 { | |
| font-weight: bold; | |
| float: left; | |
| line-height: 35px; | |
| color: white !important; | |
| } | |
| #search_filter li { | |
| color: white; | |
| } | |
| .ui-state-active { | |
| background: url("../images/nav_ul_li_current_background.png") repeat-x !important; | |
| color: #121212 !important; | |
| } | |
| .ui-tabs-active span { | |
| color: #24603a !important; | |
| } | |
| #side_filter_menu button { | |
| width: 50%; | |
| font-weight: bold; | |
| float: left; | |
| font-size: 18px; | |
| cursor: pointer; | |
| background-color: #c2b521 !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c2b521), to(#817816)) !important; | |
| background: -webkit-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -moz-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -ms-linear-gradient(top, #c2b521, #817816) !important; | |
| background: -o-linear-gradient(top, #c2b521, #817816) !important; | |
| color: white; | |
| max-width: 70px; | |
| border-radius: 0px; | |
| padding: 5px; | |
| margin-right: 20px; | |
| text-align: center; | |
| } | |
| #side_filter_menu button:hover { | |
| background-color: #fff !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#d9d9d9)) !important; | |
| background: -webkit-linear-gradient(top, #fff, #d9d9d9) !important; | |
| background: -moz-linear-gradient(top, #fff, #d9d9d9) !important; | |
| background: -ms-linear-gradient(top, #fff, #d9d9d9) !important; | |
| background: -o-linear-gradient(top, #fff, #d9d9d9) !important; | |
| } | |
| /* search bars */ | |
| .search_box, .sort_box, .vehicle_search { | |
| background: #24603a; | |
| border-radius: 0px; | |
| } | |
| /* font color */ | |
| .search_box, .sort_box, .vehicle_search *, .sorting_search_div * { | |
| color: white !important; | |
| } | |
| /* search bar left */ | |
| #side_filter_menu { | |
| background-color: #24603a !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24603a), to(#0f2818)) !important; | |
| background: -webkit-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -moz-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -ms-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -o-linear-gradient(top, #24603a, #0f2818) !important; | |
| border-top-right-radius: 0px; | |
| border-bottom-right-radius: 0px; | |
| border: 2px solid #24603a; | |
| border-left: none; | |
| } | |
| .ui-slider-range.ui-widget-header.ui-corner-all { | |
| background: #c2b521; | |
| } | |
| div#slider-range-price, div#slider-range-engine, div#slider-range-year, div#slider-range-mile { | |
| background: #554f0e; | |
| } | |
| .main_search_button, .search_box .submitme { | |
| background: url(http://autotradersites.co.za/images/sppsallterrain/main_search_btn.png) no-repeat; | |
| } | |
| /* ------------- car page styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| /* car list items */ | |
| .list-item .box { | |
| border: 0; | |
| background-color: #24603a !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24603a), to(#0f2818)) !important; | |
| background: -webkit-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -moz-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -ms-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -o-linear-gradient(top, #24603a, #0f2818) !important; | |
| border-radius: 0px; | |
| } | |
| /* content styles */ | |
| .box .list-item-content.list_elements h4 { | |
| color: #c2b521 !important; | |
| } | |
| .list-item.desktop_tab .box b, .list-item.mobile .box b { | |
| color: #c2b521 !important; | |
| } | |
| .list-item.desktop_tab .box *, .list-item.mobile .box * { | |
| color: white !important; | |
| } | |
| .clear.spacer.tiny_height_space.full_width, .clear.spacer.full_width.small_height_space { | |
| height: 30px; | |
| } | |
| .list-item .links_div a:hover { | |
| color: #c2b521 !important; | |
| } | |
| /* image styles */ | |
| .list-item-image img { | |
| border: 1px solid #24603a; | |
| border-radius: 0px; | |
| } | |
| .pagination { | |
| background-color: #24603a !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24603a), to(#0f2818)) !important; | |
| background: -webkit-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -moz-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -ms-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -o-linear-gradient(top, #24603a, #0f2818) !important; | |
| height: 50px; | |
| line-height: 50px; | |
| color: white !important; | |
| padding: 0 44px; | |
| margin: 0; | |
| } | |
| .pagination * { | |
| color: white !important; | |
| } | |
| /* fpa styles */ | |
| .single_page_styled_div * { | |
| color: #121212 !important; | |
| } | |
| .full_page_description.mobile.mobi_desc_expand.desc_expand { | |
| padding: 0 0 61px; | |
| } | |
| div#at_gallery { | |
| background: white !important; | |
| } | |
| .single_page_styled_div .clear.spacer.full_width.medium_height_space.mobile { | |
| height: 20px; | |
| } | |
| .rsDefault .rsThumb.rsNavSelected { | |
| background: #24603a !important; | |
| } | |
| .sr_fpa.sr_left_fpa.printVehicleDetails { | |
| padding-top: 23px; | |
| } | |
| .vehicle_details .clear.spacer.full_width { | |
| height: 30px; | |
| } | |
| .fpa_tab_icon { | |
| width: 47%; | |
| display: inline-block; | |
| } | |
| .fpa_tab_icon img { | |
| width: 100%; | |
| } | |
| .rsOverflow { | |
| min-height: 392px !important; | |
| } | |
| .rsDefault .rsGCaption { | |
| color: white !important; | |
| background: rgba(18, 18, 18, 0.65) !important; | |
| } | |
| /* ------------- contact styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| /* map description */ | |
| .expand_map.desc_direct_expand { | |
| padding-top: 15px; | |
| } | |
| .expand_map.desc_direct_expand * { | |
| color: #fff !important; | |
| } | |
| /* header styles */ | |
| .expand_map.desc_direct_expand h3 { | |
| color: #c2b521 !important; | |
| } | |
| .expand_map.desc_direct_expand b { | |
| color: #c2b521 !important; | |
| } | |
| .show_contact_info.tab_forms a { | |
| color: #c2b521 !important; | |
| } | |
| .show_contact_info.tab_forms a:hover { | |
| color: #fff !important; | |
| } | |
| img.form_switch.contact_button_lightbox.desktop_tab_in { | |
| width: 47%; | |
| display: inline-block; | |
| } | |
| /* content styles */ | |
| .pagecontainer .show_contact_info.tab_forms, .show_contact_info.tab_forms * { | |
| color: #121212 !important; | |
| } | |
| .pagecontainer .single_page_styled_div option { | |
| color: black !important; | |
| } | |
| .pagecontainer .show_contact_info.tab_forms h3 { | |
| color: #c2b521 !important; | |
| } | |
| .pagecontainer .single_page_styled_div input, .pagecontainer .single_page_styled_div select.form_field.text, .pagecontainer .single_page_styled_div textarea { | |
| color: #121212; | |
| } | |
| .direction_div * { | |
| color: #121212 !important; | |
| } | |
| .direction_div b { | |
| color: #c2b521 !important; | |
| } | |
| .show_more, .show_more_direction { | |
| background-color: rgba(36, 96, 58, 0.6) !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(36, 96, 58, 0.6)), to(#0f2818)) !important; | |
| background: -webkit-linear-gradient(top, rgba(36, 96, 58, 0.6), #0f2818) !important; | |
| background: -moz-linear-gradient(top, rgba(36, 96, 58, 0.6), #0f2818) !important; | |
| background: -ms-linear-gradient(top, rgba(36, 96, 58, 0.6), #0f2818) !important; | |
| background: -o-linear-gradient(top, rgba(36, 96, 58, 0.6), #0f2818) !important; | |
| } | |
| .wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok { | |
| margin-top: -67px; | |
| } | |
| /* ------------- accordion styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| #finance_accordion .ui-accordion-header { | |
| background-color: #24603a !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24603a), to(#0f2818)) !important; | |
| background: -webkit-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -moz-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -ms-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -o-linear-gradient(top, #24603a, #0f2818) !important; | |
| height: 50px; | |
| color: white; | |
| line-height: 50px; | |
| padding-left: 8px; | |
| cursor: pointer; | |
| padding: 0 15px; | |
| border-radius: 0px; | |
| } | |
| .ui-state-active { | |
| background-color: #163b24 !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#163b24), to(#08160d)) !important; | |
| background: -webkit-linear-gradient(top, #163b24, #08160d) !important; | |
| background: -moz-linear-gradient(top, #163b24, #08160d) !important; | |
| background: -ms-linear-gradient(top, #163b24, #08160d) !important; | |
| background: -o-linear-gradient(top, #163b24, #08160d) !important; | |
| } | |
| .ui-accordion-content { | |
| margin: 20px 0 0 15px; | |
| } | |
| .ui-accordion-content .box { | |
| margin-bottom: 10px; | |
| } | |
| h3.ui-state-active { | |
| color: #c2b521 !important; | |
| } | |
| /* ------------- footer styles ----------------- */ | |
| /* ------------------------------------------- */ | |
| .quicklinks_outer.desktop_tab { | |
| margin-top: 0px; | |
| } | |
| #content { | |
| border-bottom-left-radius: 0px; | |
| border-bottom-right-radius: 0px; | |
| } | |
| .quicklinks_outer.desktop_tab { | |
| background-color: #24603a !important; | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24603a), to(#0f2818)) !important; | |
| background: -webkit-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -moz-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -ms-linear-gradient(top, #24603a, #0f2818) !important; | |
| background: -o-linear-gradient(top, #24603a, #0f2818) !important; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid transparent; | |
| } | |
| .quicklinks_outer.desktop_tab span { | |
| display: block; | |
| } | |
| .foot_quicklinks { | |
| color: white; | |
| } | |
| .foot_quicklinks .links { | |
| font-size: 13px; | |
| line-height: 20px; | |
| } | |
| .foot_quicklinks .links a { | |
| color: white; | |
| } | |
| .foot_quicklinks .links { | |
| width: 20%; | |
| } | |
| .foot_quicklinks .links:nth-child(3n+3) { | |
| width: 32%; | |
| } | |
| .foot_quicklinks .links:nth-child(4n+4) { | |
| width: 26%; | |
| } | |
| .links h3 { | |
| text-transform: uppercase; | |
| margin-bottom: 22px; | |
| } | |
| .links a:hover { | |
| color: #c2b521; | |
| } | |
| .current_page_item a { | |
| color: #c2b521 !important; | |
| } | |
| .footer_outer.desktop_tab { | |
| background: white !important; | |
| } | |
| img.foot_logo { | |
| max-width: 125px !important; | |
| } | |
| .mobi_toolbar.mobile { | |
| background: white; | |
| } | |
| @media (max-width: 1245px) { | |
| div#hislider1, .hiSlider-SliderApp, .SliderContainer { | |
| min-height: 300px !important; | |
| } | |
| } | |
| @media (max-width: 979px) { | |
| .specials_container { | |
| width: 93%; | |
| } | |
| .social_link_div { | |
| border-raidus: 0px !important; | |
| } | |
| } | |
| @media (max-width: 900px) { | |
| #headerlogo img { | |
| height: auto; | |
| max-width: 350px; | |
| margin-top: 15px; | |
| } | |
| } | |
| @media (max-width: 740px) { | |
| div#hislider1, .hiSlider-SliderApp, .SliderContainer { | |
| min-height: 200px !important; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .spacer.clear.full_width.large_bg_height.header_margin.search_outer { | |
| margin-top: -11px !important; | |
| } | |
| .main_search_button, .search_box .submitme { | |
| margin: 0 auto; | |
| } | |
| .spacer.clear.full_width.large_bg_height.header_margin.search_outer { | |
| height: 165px; | |
| } | |
| .nav-collapse a { | |
| background: #24603a; | |
| border-bottom: 1px solid white; | |
| } | |
| #content { | |
| padding: 0 !important; | |
| } | |
| .specials_container { | |
| width: auto; | |
| border: 0 !important; | |
| padding: 0 15px 15px 15px !important; | |
| height: auto; | |
| } | |
| .dealer_specials img { | |
| max-height: 100%; | |
| } | |
| .foot_quicklinks .links { | |
| width: 18%; | |
| } | |
| .foot_quicklinks .links:nth-child(3n+3) { | |
| width: 32%; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment