﻿/** start of preferences panel **/

div.FilterContainer {
    overflow:visible;
}

div.columnTitle {
	color:#333;
	font-size:18px;
	margin-bottom:10px
}

div.accPanel {
	border-bottom:1px solid #cccccc;
	color:#333;
	display:inline-block;
	font-size:11px;
	padding:10px 0 10px 0;
	width:100%;
}

div.accPanel:first-child {
    padding-top:0;
}

div.accPanel input[type="checkbox"] {
    margin:2px 6px 2px 5px;
}

div.accPanel input[type="radio"] {
    margin:4px 5px 3px 4px;
}

div.accPanel input {
    border-style:none;
    box-shadow:none;
    height:auto;
    padding:0px;
}

div.accPanel-Title {
    font-family:"Open Sans",Helvetica,Arial,sans-serif;
    font-weight:bold;
    font-size: 13px;
}

div.arrow, .ui-slider .ui-slider-handle, .accPanel#filterPanel_Body ul.checkboxList li input[type="checkbox"] + label, .accPanel#filterPanel_Seating ul.checkboxList li input[type="checkbox"] + label {
	font-family:'icomoon-rp';
	speak:none;
	font-style:normal;
	font-weight:normal;
	font-variant:normal;
	text-transform:none;
	line-height:1;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

div.arrow-open, div.arrow-close {
    width:18px;
    line-height:18px;
    font-size:15px;
	float:right;
    background:none;
    text-align:center;
}

div.arrow-open:before {
    content:"\e634";
}

div.arrow-close:before {
    content:"\e631";
}

.accPanel ul.checkboxList {
    font-size:11px;
	list-style-type:none;
	margin:10px 0 0 0;
	padding:0;
}

.accPanel#filterPanel_Body ul.checkboxList li, .accPanel#filterPanel_Seating ul.checkboxList li {
	text-align:center;
	display:inline-block;
    width:33%;
    margin:10px 0;
    vertical-align:top;
}

.accPanel#filterPanel_Body ul.checkboxList li input[type="checkbox"] + label:before, .accPanel#filterPanel_Seating ul.checkboxList li input[type="checkbox"] + label:before {
    background-image:none;
    background-color:#ffffff;
    color:#cccccc;
    width:64px;
    height:44px;
    font-size:64px;
    line-height:44px;
}

.accPanel#filterPanel_Seating ul.checkboxList li input[type="checkbox"] + label:before {
    font-size:48px;
}

.accPanel#filterPanel_Body ul.checkboxList li input[type="checkbox"].Coupe + label:before {
    content:"\e912";
}

.accPanel#filterPanel_Body ul.checkboxList li input[type="checkbox"].Five-door + label:before {
    content:"\e913";
}

.accPanel#filterPanel_Body ul.checkboxList li input[type="checkbox"].SUV + label:before, .accPanel#filterPanel_Body ul.checkboxList li input[type="checkbox"].Sport + label:before {
    content:"\e915";
}

.accPanel#filterPanel_Body ul.checkboxList li input[type="checkbox"].Sedan + label:before {
    content:"\e914";
}

.accPanel#filterPanel_Body ul.checkboxList li input[type="checkbox"].Wagon + label:before {
    content:"\e916";
}

@font-face {
    font-family: 'icomoon-seating';
    src:url('/Content/7907/Media/General/webimage/font-icons/icomoon-seating.eot?t4lktv');
    src:url('/Content/7907/Media/General/webimage/font-icons/icomoon-seating.eot?t4lktv#iefix') format('embedded-opentype'),
        url('/Content/7907/Media/General/webimage/font-icons/icomoon-seating.ttf?t4lktv') format('truetype'),
        url('/Content/7907/Media/General/webimage/font-icons/icomoon-seating.woff?t4lktv') format('woff'),
        url('/Content/7907/Media/General/webimage/font-icons/icomoon-seating.svg?t4lktv#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

.accPanel#filterPanel_Seating ul.checkboxList li input[type="checkbox"] + label:before {
    font-family:'icomoon-seating';
    font-size:32px;
    height:32px;
    line-height:32px;
    width:auto;
}
.accPanel#filterPanel_Seating ul.checkboxList li input[type="checkbox"].Seating-4 + label:before {
    content:"\e903";
}

.accPanel#filterPanel_Seating ul.checkboxList li input[type="checkbox"].Seating-5 + label:before {
    content:"\e902";
}

.accPanel#filterPanel_Seating ul.checkboxList li input[type="checkbox"].Seating-7 + label:before {
    content:"\e901";
}

.accPanel#filterPanel_Seating ul.checkboxList li input[type="checkbox"].Seating-8 + label:before {
    content:"\e900";
}

.accPanel#filterPanel_Body ul.checkboxList li input[type="checkbox"]:checked + label:before, .accPanel#filterPanel_Body ul.checkboxList li input[type="checkbox"]:checked + label .checkboxListText, .accPanel#filterPanel_Seating ul.checkboxList li input[type="checkbox"]:checked + label:before, .accPanel#filterPanel_Seating ul.checkboxList li input[type="checkbox"]:checked + label .checkboxListText {
    color:#2b80b9;
}

.accPanel#filterPanel_Body ul.checkboxList li label span, .accPanel#filterPanel_Seating ul.checkboxList li label span {
	display:block;
    color:#CCCCCC;
}

span.checkboxListText {
    font-family:Arial, Helvetica, sans-serif;
	margin:2px 3px 3px;
	position:relative;
	text-transform:uppercase;
	top:2px;
}

div.sliderInfo {
    color:#999999;
    height:15px;
    margin-bottom:10px;
    margin-top:5px;
    position:relative;
    width:100%;
}

div.sliderInfo div.min {
    left:0;
    position:absolute;
    white-space:nowrap;
}

div.sliderInfo div.max {
    position:absolute;
    right:0;
    white-space:nowrap;
}

div.slider {
    background-color:#FFFFFF;
    height:10px;
    margin:0 15px 10px 15px;
    position:relative;
    border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
    border:1px solid #DDDDDD;
}

div.fuelOption {
    border-bottom:1px solid #cccccc;
    padding:5px 0;
    position:relative;
}

span.roadType {
    display:inline-block;
    width:50%;
}

span.radioText {
    margin-left:2px;
    position:relative;
    top:-2px;
}

.sliderContainer {
    margin-top:10px;
}

.ui-slider .ui-slider-range {
    background-color:#2b80b9;
    border:0 none;
    display:block;
    position:absolute;
    z-index:0;
}

div.slider.ui-disabled .ui-slider-range {
    background-color:#DDDDDD;
}

.ui-slider-horizontal .ui-slider-range {
    height:10px;
}

.ui-slider .ui-slider-handle {
    position:absolute;
    z-index:1;
    background-image:none !important;
    background-color:#ffffff;
    border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
}

a.ui-slider-handle, a:hover.ui-slider-handle, a:visited.ui-slider-handle {
    color:#2b80b9;
    -ms-touch-action: none;
    touch-action: none;
}

.ui-slider .ui-slider-handle:before {
    content: "\e911";
    font-size:30px;
    line-height:30px;
}

.ui-state-default, .ui-widget-content .ui-state-default {
    height:30px;
    width:30px;
    margin-left:-15px;
    top:-11px;
    outline:medium none;
}

a#filterReset {
    color:#ffffff;
}

/** end of preferences panel **/

/** start of vehicle grid **/

ul.modelList {
    list-style-type:none;
}

ul.modelList li.vehicleItem div.vehicleItem {
    border-bottom:1px solid #e5e5e5;
    padding:5px 0 5px 25px;
    font-size:12px;
    line-height:13px;
}

ul.modelList li.vehicleItem div.vehicleItem label {
    display:inline-table;
}

ul.modelList li.vehicleItem div.vehicleItem.selected {
    background-color:#ebf6fe;
}

ul.modelList li.vehicleItem div.vehicleItem .trimName.disabled, ul.modelList li.vehicleItem div.vehicleItem.selected .trimName.disabled {
    color:#444444;
}
.trimName.disabled label {
    cursor:default;
}

.trimName.align-center.compareButton {
    text-align:left;
}

ul.modelList li.vehicleItem div.vehicleItem .trimName .trimBase {
    font-family:"Open Sans",Helvetica,Arial,sans-serif;
    font-size:20px;
    line-height:20px;
    font-weight:400;
    color:#2b80b9;
    vertical-align:top;
    letter-spacing: -0.75px;
    -webkit-font-smoothing: antialiased;
    display:table-cell;
}

ul.modelList li.vehicleItem div.vehicleItem.selected .trimName .trimBase, ul.modelList li.vehicleItem div.vehicleItem.selected .trimName.disabled .trimBase {
    color:#2C98E9;
}

ul.modelList li.vehicleItem div.vehicleItem .trimName .trimMenu-right {
    margin-left:5px;
}

.lineup .vehicle .vehicle-info .trimBase {
    font-weight:bold;
}

ul.modelList li.vehicleItem div.vehicleItem .trimName .trimOption, .lineup .vehicle .vehicle-info .trimOption {
    font-style:italic;
}

.lineup .vehicle .vehicle-info span.displayBlock span {
    float:left;
    display:block;
}

ul.modelList li.vehicleItem div.vehicleItem .trimName.disabled, ul.modelList li.vehicleItem div.vehicleItem .trimName.disabled .trimBase {
    color:#cccccc;
}

ul.modelList li.vehicleItem div.vehicleItem.selected .trimName input[type="checkbox"] + label:before, ul.modelList li.vehicleItem div.vehicleItem.selected .trimName.disabled input[type="checkbox"] + label:before {
    opacity:1;
}

ul.modelList li.vehicleItem div.vehicleItem .trimName.disabled input[type="checkbox"] + label:before {
    opacity:0.5;
}

ul.modelList li.vehicleItem div.vehicleItem .trimName input[type='checkbox'] {
    display:none;
}

.lineup .vehicle {
	width:98%;
}

.lineup .vehicle .vehicle-image, .lineup .vehicle .vehicle-info {
    float:none;
    display:inline-block;
    vertical-align:middle;
    font-size:14px;
}

.lineup .vehicle .vehicle-info .icon-question-circle {
    display:inline-block;
    vertical-align:top;
}

.lineup .vehicle .msrp {
    font-size:11px;
}

#vehicleArea .modelTitle {
    border-bottom:1px solid #e5e5e5;
    margin:40px 0 10px 0;
    padding-bottom:5px;
    font-family:"Open Sans",Helvetica,Arial,sans-serif;
    font-size:20px;
    line-height:20px;
    text-transform:uppercase;
    font-weight:bold;
}

/** end of vehicle grid **/

/** start of floating tabs **/

.menu_tabs {
    width:100%;
    float:none;
    list-style:none;
    padding:0;
    -webkit-box-shadow:0 4px 6px -2px rgba(0,0,0,0.33);
    -moz-box-shadow:0 4px 6px -2px rgba(0,0,0,0.33);
    box-shadow:0 4px 6px -2px rgba(0,0,0,0.33);
    position:relative;
}
 
.menu_tabs:after {
    content:'';
    display:table;
    clear:both;
}

.menu_tabs input[type="checkbox"].topMenu + label:before, .menu_tabs  input[type=checkbox].topMenu {
    display:none;
}

.menu_tabs input[type="checkbox"].topMenu + label {
    border:1px solid rgba(0,0,0,0);
    border-top-color:#cccccc;
    border-bottom-color:#cccccc;
    background-color:#eeeeee;
    padding:2px;
    height:71px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu_tabs input[type="checkbox"].topMenu#tab3 + label {
    border-right-color:#cccccc;
}

.menu_tabs input[type="checkbox"].topMenu#preferences_tab + label {
    border-left-color:#cccccc;
}

.menu_tabs input[type="checkbox"].topMenu[id^="tab"] + label span[class^="icon-"] {
    display:none;
}

.menu_tabs input[type="checkbox"].topMenu[id^="tab"]:checked + label span[class^="icon-"] {
    display:block;
}

.menu_tabs input[type="checkbox"].topMenu:checked + label {
    border:1px solid #cccccc;
    border-bottom-color:#ffffff;
    background-color:#ffffff;
    z-index:2;
    position:relative;
}

.menu_tabs input[type="checkbox"].topMenu + label span {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
}

.menu_tabs input[type="checkbox"].topMenu:checked + label span[class^="icon-"]:before {
    content:"\e62e";
}

label.topMenu span[class^="icon-"] {
    display:block;
    font-size:36px;
    line-height:44px;
}

label.topMenu .selector-vehicle-wrapper {
    height:44px;
}

label.topMenu img.selector-vehicle {
    display:block;
    max-height:44px;
    margin:0 auto;
    position:relative;
    top: 50%;
    -webkit-transform:translateY(-50%);
    -ms-transform: translateY(-50%);
    transform:translateY(-50%);
}

.menu_tabs input[type="checkbox"].topMenu:checked + label img.selector-vehicle {
    display:none;
}

.menu_tabs label.topMenu {
    float:left;
    width:20%;
    font-size:10px;
    text-align:center;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
    font-family:"Open Sans",Helvetica,Arial,sans-serif;
    font-weight:bold;
    color:#2b80b9;
}

.menu_tabs label.topMenu div[id^="menu_content"] div[class^="icon-"] {
    font-size:48px;
    line-height:44px;
    color:#cccccc;
}

.menu_tabs label.topMenu div[id^="menu_content"] {
    color:#cccccc;
}

.menu_tabs input[type="checkbox"].topMenu.active + label div[id^="menu_content"] span {
    color:#2b80b9;
}
 
.menu_tabs label.topMenu i {
    padding:5px;
    margin-right:0;
}
 
.tab-content {
    display:none;
    position:relative;
    width:100%;
    float:left;
    padding:15px;
    box-sizing:border-box;
    background-color:#ffffff;
    border:1px solid #cccccc;
    margin-top:-1px;
    z-index:1;
}

.tab-content * {
    -webkit-animation:scale 0.7s ease-in-out;
    -moz-animation: scale 0.7s ease-in-out;
    animation:scale 0.7s ease-in-out;
}

@keyframes scale {
 
  0% { 
    transform:scale(0.9);
    opacity:0;
    }
 
  50% {
    transform:scale(1.01);
    opacity:0.5;
    }
 
  100% { 
    transform:scale(1);
    opacity:1;
  }
 
}

#preferences_tab:checked.active ~ #preferences_tab_content,
#compare_tab:checked.active ~ #compare_tab_content,
#tab1:checked.active ~ #tab-content1,
#tab2:checked.active ~ #tab-content2,
#tab3:checked.active ~ #tab-content3 {
    display:block;
}

.floating-menu.is-sticky #sticker {
	display:block;
    z-index:1;
    right:30px;
    left:30px;
}

/** end of floating tabs **/

/** start of vehicle more information area **/

.mmVehicle {
    padding:0;
    margin:0;
	font-size:11px;
	position:relative;
	overflow:hidden;
	color:#999;
}

.mmVehicle-top {
	position:absolute;
    width:75%;
    font-size:11px;
    height:auto;
    border:none;
}

.mmVehicle-top .TrimHeader {
    margin:2px 0 6px 0;
}

.mmVehicle-top .TrimHeader .mmtrim {
    font-weight:bold;
    font-size:11px;
    display:inline-block;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    line-height:normal;
}

.mmVehicle-top .TrimHeader .mmtrimLine {
    display:inline-block;
}

.mmVehicle-top .TrimHeader .mmtrimLinePlus {
    font-style:italic;
    display:inline-block;
}

.mmVehicle-top .mmVehicle-top-price-txt, .mmVehicle-top .msrp {
    color:#999999;
    display:block;
    clear:both;
}

.mmVehicle-top .mmVehicle-top-price, .mmVehicle-top .mmVehicle-top-price-wrap .dollarsign, .lineup .vehicle .vehicle-info .trimPrice {
    color:#444444;
    font-size:22px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    line-height:22px;
}

.mmVehicle-top-price-wrap span {
	display:block;
	float:left;
}
.mmVehicle-top-price-wrap .pdLegal span, .aiLegal span {
    display: none;
}

.mmVehicle-top-logos {
	background:url(../Content/7907/Media/General/webimage/icons/mmVehLogos.png) no-repeat;
	height:15px;
    position:relative;
    top:auto;
    left:auto;
}

.mmLogos-Tribeca {
	background-position:0 0 !important;
	width:122px;
}

.mmLogos-Forester {
	background-position:-130px 0 !important;
	width:152px;
}

.mmLogos-Impreza {
	background-position:-293px 0 !important;
	width:132px;
}

.mmLogos-Legacy {
	background-position:-440px 0 !important;
	width:115px;
}

.mmLogos-Outback {
	background-position:-565px 0 !important;
	width:127px;
}

.mmLogos-WRXSTI {
	background-position:-696px 0 !important;
	width:196px;
}

.mmLogos-WRX {
	background-position:-696px 0 !important;
	width:66px;
}

.mmLogos-STI {
	background-position:-781px 0 !important;
	width:112px;
}

.mmLogos-BRZ {
	background-position:-902px 0 !important;
	width:101px;
}

.mmLogos-BRZ-small {
	background-position:-949px 0 !important;
    width:55px;
}

.mmLogos-Crosstrek {
    background-position:-1097px 0 !important;
    width:160px;
}

.mmLogos-WRXSTI2015 {
    background-position:-1260px 0 !important;
    width:205px;
} 

.mmLogos-WRX2015 {
	background-position:-1260px 0 !important;
	width:66px;
}

.mmLogos-STI2015 {
	background-position:-1351px 0 !important;
	width:112px;
}

.mmLogos-Ascent {
	background-position:-1472px 0 !important;
	width:122px;
}

.mmLogos-Solterra {
    background-position: -1599px 0 !important;
    width: 160px;
}

.mmVehicle-leftCol-links, .mmVehicle-leftCol-info {
	list-style-type:none;
    font-size:12px;
    line-height:14px;
    margin:0 0 10px 0;
    text-align:center;
    color:#444444;
    position:relative;
    right:auto;
    top:auto;
}

.mmVehicle-leftCol {
    position:relative;
    top:auto;
    z-index:auto;
}

.mmVehicle-leftCol-links li {
    display:inline-block;
    width:25%;
    height:50px;
    float:left;
}

.mmVehicle-leftCol-links li span, .removeButton span {
    font-size:24px;
    vertical-align:middle;
    display:block;
}

.mmVehicle-image {
    text-align:center;
    margin-top:80px;
    float:none;
    width:100%;
}

.mmVehicle-rightCol-colorName, #VSVehicleColourName {
	text-align:center;
    font-size:11px;
    display:block;
    margin:4px 0;
    color:#999999;
    padding:0 5px;
}

.mmVehicle-colors-container ul {
	text-align:center;
    margin:10px 0;
}

.mmVehicle-colors-container ul li {
	background:url(../Content/7907/Media/General/webimage/2012/4032.jpg);
	background-position:0 0;
	display:inline-block;
	width:37px;
	height:22px;
    cursor:pointer;
}

.mmVehicle-colors-container a, .mmVehicle-colors-container span {
	text-decoration:none;
	background:url(../Content/7907/Media/General/webimage/2012/colorChipMask.png);
	background-position:0 0;
	display:block;
	width:37px;
	cursor:pointer;
	height:22px;
}

.removeButton {
    position:absolute;
    right:20px;
    top:20px;
    font-size:12px;
    text-align:center;
    color:#2b80b9;
    cursor:pointer;
}

#vsLightBox {
    display:none;
}
/** end of vehicle more information area **/