@charset "UTF-8";

/* ============== */
/* General Rules */
/* ============== */

body {
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 21px;
    color: #330099;
    margin: 0;
    padding: 10px 0 0 0;
}
    
h2 {
    font-size: 110%;
    font-weight: bold;
}
    
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    margin: 0;
    padding: 7px 0px 0px 0px;
}
    
h4 {
    font-weight: normal;
    font-size: 100%;
    margin: 0;
    padding:0;
}

div.floatRight {
    float: right;
}
    
div.float_right {
    float: right;
}

p.editorialText {
    margin: 0 0 20px 0 ;
    padding: 0;
}
    
#modelComparePage p.editorialText, #trimComparePage p.editorialText {
    margin-bottom: 5px;
}
    
span.numberChoices {
    font-weight: bold;
}
    
div.caption {
    font-size: 90%;
    color: #666666;
    line-height: 1.25em;
}
    
.thumb {
    border: 1px solid #333333;
}

/* Fixes some spacing issues not addressed by globalBeta.css */ 
.BttnPill {
    display: block;
    overflow: hidden;
    margin: 5px 0;
}
    

/* General Layout - Start Page */
/* ============== */

div#wrapper {
    width: 760px;
    display: block;
}

div#navigation {
    width: 150px;
    height: 500px;
    float: left;
    background-color: #ffffff;
    background: url(/compare/images/compareLeftRail.gif) top left no-repeat;
}

div#navigation h2 {
    font-size: 90%;
    font-weight: bold;
    margin-top: 90px;
    margin-bottom: 10px;
    padding: 10px 0 0 0;
    border-top: 2px dotted #999999;
}

div#navigation h3 {
    font-size: 90%;
    font-weight: bold;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}

div#navigation h4 {
    font-weight: bold;
    font-size: 90%;
}

div.popularComparison {
    margin-bottom: 10px;
}
    
div.popularComparison ul {
    margin: 0;
    padding: 0;
    font-size: 90%;
}
    
div.popularComparison ul li {
    margin: 0;
}
    
div#content {
    width: 430px;
    padding: 0 0 0 10px;
    margin: 0;
    float: left;
}

div#rightRail {
    width: 160px;
    height: 600px;
    float: right;
    padding: 0;
    margin: 0;
}
    
/* YMM Selector box rules */
/* ============== */

div.ymmSelectBox {
    background: url(/images/cornerUpperRight.gif) top right no-repeat;
    background-color: #eeeeee;
    margin-bottom: 10px;
    clear: both;
}

div.ymmSelectBoxInner {
    margin-right: 20px;
    margin-bottom: 20px;
}

div.ymmSelectBox h3 {
    background: url(/images/cornerUpperLeft.gif)  top left no-repeat;
    margin: 0 0 10px 0;
    padding-top: 15px;
    padding-left: 20px;
}

div.ymmSelectBox div.imageBox {
    padding-left: 20px;
    padding-top: 10px;
}

div.ymmSelectBox .roundedboxfooter {
    clear:both;
    background: url(/images/cornerLowerRight.gif) bottom right no-repeat;
}

div.ymmSelectBox .roundedboxfooter p {
    background: url(/images/cornerLowerLeft.gif)  bottom left no-repeat;
    margin: 0 ;
    padding: 0;
}

div.ymmSelectBox .label {
    padding: 0px 0px 2px 0px;
    line-height: 6px;
}
    
div.imageBox {
    float: left;
    width: 150px;
    margin-right: 20px;
}

div.imageBox img{
    border: 1px solid #333333;
    width: 150px;
}

div.ymmSelectBox select {
    width: 160px;
}
    
div.ymmSelectBox .floatRight {
    padding-top: 15px;
}

div.submitBox {
    margin-right: auto;
    margin-left: auto;
    width: 210px;
}

div.addBox {
    float: left;
}
    
div.addBox2 {
    float: left;
    width: 60px;
}

div.BttnPill {
    margin: 0;
    min-width: 137px;
}
    
div.BttnPill.model-compare {
    min-width: 81px;
    width: 100%;
}
    
#addBox_1 {
    display: block;
    clear: both;
}

div.yearSelectBox {
    display: block;
    margin-bottom: 10px;
}

div.makeSelectBox {
    display: block;
    margin-bottom: 10px;
}

div.modelSelectBox {
    display: block;
    margin-bottom: 10px;
}

.ymmNote {
    float: left;
    margin-right: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 110%;
    font-weight: bold;
    line-height: 2em;
}

/* ======== Trim / Compare horizontal MMY Select Box Rules ============== */    
    
#trimComparePage div.ymmSelectBox, #modelComparePage div.ymmSelectBox {
    padding: 0;
    margin-bottom: 20px;
}
    
#trimComparePage div.ymmSelectBoxInner, #modelComparePage div.ymmSelectBoxInner {
    display: block;
    clear: both;
    overflow: hidden;
    margin: 0;
    background: url(/images/cornerUpperLeft.gif)  top left no-repeat;
    padding: 15px 0 0 20px;
    height: 40px;
}
    
div.roundedboxfooter {
}
    
#modelComparePage div.roundedboxfooterleft, #trimComparePage div.roundedboxfooterleft {
    background: url(/images/cornerLowerLeft.gif)  bottom left no-repeat;
    padding: 0;
    margin: 0;
}
    
/* Hides the labels in the horizontal module */ 
#trimComparePage .label, #modelComparePage .label {
    display: none;
    clear: both;
}

/* Aligns the compare page selects horizontally */
#trimComparePage div.yearSelectBox, #trimComparePage div.makeSelectBox, #trimComparePage div.modelSelectBox, #modelComparePage div.yearSelectBox, #modelComparePage div.makeSelectBox, #modelComparePage div.modelSelectBox, div.ymmSelectButton {
    float: left;
    margin-right: 10px;
    margin-bottom: 0;
    display: block;
}

div.ymmSelectButton {
    margin-top: 3px;
}

/* Hides the additional YMM selector boxes on the start page */
div#selectBox_3 {
    display: none;
}

div#selectBox_4 {
    display: none;
}

div#addBox_2 {
    display: none;
}

/* General Layout - Comparison Pages */
/* ============== */

    
/* Controls the overall width of the upper portion of the page */ 
div#pageTop {
    width: 760px;
}

table#modelCompareTable, table#trimCompareTable {
    clear: both;
}

table#vehicleCompare td,
table#trimCompareTable td {
    padding: 6px 2px;
    vertical-align: top;
    line-height: 1.5em;
}


table#trimCompareTable #tabWrapper td {
    padding: 0px 0px 0px 0px;
}

/* Cell where the tab nav appears */ 
td.modeChangeCell {
    vertical-align: bottom;
}

/* Rounded column tops */
table#vehicleCompare td.removeCell, table#trimCompareTable td.removeCell {
    /*width: 159px;*/
    background-color: #9980cc;
    padding: 0;
    border-right: 1px solid #ffffff;
}

table#vehicleCompare td#adHeader, table#trimCompareTable td#adHeader {
    background-color: #cccccc;
    color: #9a9a9a;
    padding: 0;
    border-right: 1px solid #ffffff;
}

td.removeCell a:link, td.removeCell a:visited, td.removeCell a:hover {
    color: #FFFFFF;
}

.removeCell .colHdr .colHdrInner, #adHeader .colHdr .colHdrInner {
    background: url(/images/cornerUpperRight.gif) top right no-repeat;
    margin: 0 0 0 0;
}

.removeCell .colHdrInner a, #adHeader .colHdrInner a {
    font-size: 90%;
    display: block;
    text-align: right;
    padding: 3px 5px 3px 0;
    background: url(/images/cornerUpperLeft.gif) top left no-repeat;
}

/* Link spacing for stacked links */    
.changeTrimLink {
    margin-bottom: 2px;
}
    
.addCompetitorLink {
    margin-bottom: 10px;
}

div.shopLink {
    margin-bottom: 5px;
}

div.researchLink {
    clear: both;
}
    
td.trimLinkCell {
    text-align: center;
    font-size: 10px;
    padding: 5px 0px 8px 0px
}

a.specsLink {
    display: block;
    margin-bottom: 5px;
}
    
/*add competitor link */    
td.fixedCell {
    text-align: center;
    font-size: 10px;
    padding-bottom: 7px;
}

/* Links to trim page from model page */
td.selectTrimsRowUpper {
    background: url(/images/cornerUpperLeft.gif) top left no-repeat;
    border-bottom: 1px solid #cccccc;
    background-color: #eeeeee;
}

td.selectTrimsRowUpper p {
    margin:0 0 0 5px;
}

td.selectTrimsRowUpper div#selectTrimsRowWrapper p { 
    display: block;
    text-align: right;
    padding: 0;
    margin: 0 0 0 5px;
}

td.selectTrimsRowUpper div#selectTrimsRowWrapper div#selectTrimsButton {
    display: block;
    position: relative;
    clear: both;
    float: right;
}

td.selectTrimsRowUpper div#selectTrimsRowWrapper {
    float: right;
    clear: both;
}

td.selectTrimsRowLower {
    border-top: 1px solid #9980cc;
    border-right: 1px solid #ffffff;
    background-image: url(/compare/images/bottom_fade_purp_2.gif);
    background-repeat: repeat-x;
    background-position: 0 0;
}
    
table#vehicleCompare td.selectTrimsRowLower, table#trimCompareTable td.selectTrimsRowLower {
    padding:14px 10px 14px 0;
}

td.adSelectTrimsRowUpper {
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #ffffff;
    background-color: #eeeeee;
}

td.adSelectTrimsRowLower {
    border-top: 1px solid #999999;
    border-right: 1px solid #ffffff;
    background-image: url(/compare/images/bottom_fade_gray_2.gif);
    background-repeat: repeat-x;
    background-position: 0 0;
}

td.selectTrimsRowLower div.float_right {
}
    
div.selectTrimsText {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 130%;
    font-weight: bold;
    color: #330099;
    float: right;
    margin-right: 10px;
}

table#vehicleCompare th {
    font-weight: normal;
    border-bottom: none;
}

/* Controls the data row labels in the main compare table */

/* Model page only?? */
td.dataRowHeader {
    width: 275px;
    vertical-align: top;
    border-top: 1px solid #EEEEEE;
    vertical-align: top;
}
    
tr#topDataRow td {
    border-top: 1px solid #cccccc;
    background-image: url(/compare/images/section_fade_gray.gif);
    background-repeat: repeat-x;
    background-position: 0 0;
    padding-top: 10px;
}
    
/* ======= Section ======= */
/* Trim Mode Select Table Tabs */
/* ======= Section ======= */

div#tabWrapper {
    margin-top: 0;
    margin-bottom: 0;
}

table#tabNavBox {
    width: 275px;
    margin-bottom: 0;
}

table#trimCompareTable td.modeChangeCell {
    vertical-align: bottom;
    padding: 0;
}
    
td.tabNavSubhead {
    display: none;
}
    
/* ========================== Local tab customization ======================== */

/* Customize the color of the bottom rule */

tr.tabRow td {
    border-bottom: none;
}

/* Customize the color of the on tab text */
.tabon a:link, .tabon a:visited, .tabon a:hover, .tabon a:active {
    color: #4A4434;
}
    
.taboff a:hover {
    color: #333333;
}

/* Customize the height of the tabs */
table#trimCompareTable td.tabon, table#trimCompareTable td.taboff {
    line-height: 25px;
}
    
/* Customize the style and width of the individual tabs */
.tabon {
    padding: 0;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 85px;
    background-image: url(/compare/images/tabs/tab_on_85.gif);
}

.taboff {
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    width: 85px;
    background-image: url(/compare/images/tabs/tab_off_85.gif);
}

/* Customize the subhead area of the tab nav box */
.tabNavSubhead {
    background-color: #ffffff;
    background-image: url(images/taboff_80.gif);
}
    
.tabNavMarginLft {
    width: 2px;
}

/* ======= Section ======= */
/* Skyscraper */
/* ======= Section ======= */

td#compareSkyscraperAd {
    padding-left: 10px;
    vertical-align: top;
}

/* ======= Section ======= */
/* Trim Compare Page */
/* ======= Section ======= */

/* For vehicle name table cells and "remove" link table cells, see Model Compare page above. */

td.trimModelNameCell {
    font-weight: bold;
    font-size: 13px;
    vertical-align: top;
}

td.trimTrimNameCell {
    font-weight: normal;
    font-size: 11px;
    vertical-align: top;
}

td.trimImageNameCell {
    font-weight: normal;
    font-size: 11px;
    font-color: #C0C0C0;
    vertical-align: top;
}

/* Adds rules to main table data cells */
td.trimDataCellMain,
td.trimSmartTargetPrice,
td.trimAdDataCellMain,
td.dataRowCell,
td.adDataRowCell,
#trimCompareTable td.linkCRPUsed,
#vehicleCompare .linkCRPUsed {
    border-top: 1px solid #EEEEEE; 
    vertical-align: top;
}

table#trimCompareTable td.trimSmartTargetPrice {
    background: transparent url(/compare/images/compare_stpicon.gif) no-repeat;
    font-weight: bold;
}

table#trimCompareTable td.trimSmartTargetPriceGhost {
    background: transparent url(/compare/images/compare_stpicon_ghost.gif) no-repeat;
    background-color: #eeeeee;
    font-weight: bold;
}

table#trimCompareTable td.trimSmartTargetPriceHeader {
    vertical-align: middle;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #999;
}

/* Aligns the linked image vertically with the text */
table#trimCompareTable td.trimSmartTargetPriceHeader img {
    vertical-align: middle;
}

/* Controls the in-line vehicle nameheaders in the main trim-level compare table  */
td.vehicleNameHeader, td.tabRuleCell {
    border-top: 1px solid #cccccc;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    background-image: url(/compare/images/section_fade_gray.gif);
    background-repeat: repeat-x;
    background-position: 0 0;
}

td.trimRowHeader {
    width: 225px;
    vertical-align: top;
}

td.trimRowHeaderMain {
    width: 225px;
    border-top: 1px solid #EEEEEE;
    vertical-align: top;
}

td.trimRowHeaderMain {
    width: 225px;
    border-top: 1px solid #EEEEEE;
    vertical-align: top;
}

/* Aligns the linked image vertically with the text */
td.trimRowHeaderMain img {
    vertical-align: middle;
}

/* Controls the section headers in the main trim-level compare table */
td.trimSectionHeader {
    font-family: Arial, Helvetica, sans-serif;
    color: #df4600;
    width: 225px;
    border-top: 1px solid #cccccc;
    font-weight: bold;
    font-size: 16px;
    padding: 10px 0;
    background-image: url(/compare/images/section_fade_gray.gif);
    background-repeat: repeat-x;
    background-position: 0 0;
}

/* ======= Section ======= */
/* Model Page Select Trims Pop Up */
/* ======= Section ======= */

#trimSelectContainer {
    width: 100%;
}

#selectTrimsTable {
    width: 575px;
    margin-left: 10px;
    border: 1px solid orange;
}

#logoTrimSelect {
    padding-right: 15px;
}

#logoTrimHeader {
    vertical-align: top;
}

#logoTrimHeader h3 {
    vertical-align: top;
    margin-bottom: 2px;
    font-color: blue;
}

td.selectTrimsModelName {
    width: 350px;
    font-weight: bold;
    font-size: 15px;
    padding-left: 10px;
}

td.selectTrimsList {
    padding: 0 0 10 10;
    border-bottom: 1px solid blue;
    width: 650px;
}

td.selectTrimsButton {
    padding-top: 15;
    width: 650px;
}

/* ======= Section ======= */
/* Trim Standard Details Pop Up */
/* ======= Section ======= */

#trimStdDetailsTable{
}

#trimStdDetailsHeader {
    background-color: #EEEEEEE;
    font-weight: bold;
    font-size: 13px;
}

/* ======= Section ======= */
/* Added by IW week of Oct 9 */
/* ======= Section ======= */

/*  Style for spacer cell when only one vehicle is in the Compare.  */

table#vehicleCompare td.colSpacer, table#trimCompareTable td.colSpacer {
    background-color: #ECEAF7;
    background-image: url(/compare/images/bottom_fade_purp_2.gif);
    background-repeat: repeat-x;
    color: #564777;
    padding-top: 30px;
    padding-left: 5px;
    padding-right: 5px;
    width: 152px;
    border-right: 1px solid #eeeeee;
}

table#vehicleCompare td.colSpacer h3#addNoteTitle, table#trimCompareTable td.colSpacer h3#addNoteTitle {
    font-size: 14px;
    font-color: blue;
}

table#vehicleCompare td.colSpacer p#addNote, table#trimCompareTable td.colSpacer p#addNote {
    font-size: 12px;
    font-color: red;
}

/* ======= Section ======= */
/* Select Trims Pop Up */
/* ======= Section ======= */
.vehicleName td {
}

td.modeChangeCell {
    vertical-align: bottom;
}

div#tabWrapper {
    vertical-align: baseline;
}

#trimCompareTable td.trimSectionHeader, #trimCompareTable td.vehicleNameHeader, #trimCompareTable td#trimAdVehicleNameHeader {
    padding: 12px 0 8px;
}
    
div#furnTop { 
    border: none;
    font-weight: normal;
    margin-top: 20px;
    margin-left: 10px;
    height: 55px;
    width: 160px;
    margin-bottom: 10px;
    padding-top: 2px;
}

/* ======= Section ======= */
/* Ghost style  */
/* ======= Section ======= */

td#trimAdLinkCell a {
    font-size: 10px;
    font-color: #FFFFFF;
}

td#trimAdLinkCRP a {
    font-color: #FFFFFF;
}

td.trimAdDataCell {
    background-color: #EEEEEE;
}

td#adNameCell,
#trimAdLinkCell,
td.adFixedCell,
td#adImageCell,
td.adImageCell,
td.adLinkCRP,
td.adDataRowCell,
td.trimAdDataCellMain,
td#trimAdVehicleNameHeader,
#trimCompareTable #trimAdLinkCRP {
    background-color: #eeeeee;
    border-right: 1px solid #ffffff;
    color: #666666;
}

td#adNameCell {
    border-top: 1px solid #ffffff;
}
    
td.adImageCell {
    border-bottom: 1px solid #ffffff;
}

tr#topDataRow td.trimAdDataCellMain {
    border-top: 1px solid #cccccc;
    background-image: url(/compare/images/section_fade_dkgray_2.gif);
    background-repeat: repeat-x;
    background-position: 0 0;
    padding-top: 10px;
}

td#trimAdVehicleNameHeader, td.trimAdVehicleNameHeader {
    border-top: 1px solid #cccccc;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    background-image: url(/compare/images/section_fade_dkgray_2.gif);
    background-repeat: repeat-x;
    background-position: 0 0;
}

#trimCompareTable td#trimAdVehicleNameHeader {
    padding: 12px 0 8px;
}

td.trimAdDataCellMain,
td.adDataRowCell,
td.adLinkCRP,
#trimCompareTable #trimAdLinkCRP,
#vehicleCompare #adLinkCRP {
    border-top: 1px solid #dedede; 
    vertical-align: top;
}

/**********************************************************************/
/* beta strip*/
/**********************************************************************/

#betaStrip {
    background-color: #FFFFF2;
    border: 1px solid #D8D6AD;
    padding-top: 5px;
    padding-bottom: 7px;
    margin-left: 205px;
    font-size: 10px;
    width: 350px;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 2px;
}

#betaStrip p {
    margin: 0px;
    padding: 0px;
}

#betaStrip .redTextSurvey {
    font-weight: bold;
    color:#df4600;
}

#betaStrip img {
    margin-bottom: -4px;
}

/* ======= Section ======= */
/* Rounded column tops - note that the space in the column header is filled by the anchor, which is left empty */

table#vehicleCompare td#sponsorHeader, table#trimCompareTable td#sponsorHeader {
    background-color: #7e5bc1;
    color: #000000;
    padding: 0;
    border-right: 1px solid #ffffff;
}

.removeCell .colHdr .colHdrInner, #sponsorHeader .colHdr .colHdrInner {
    background: url(/images/cornerUpperRight.gif) top right no-repeat;
    margin: 0 0 0 0;
}
    
.removeCell .colHdrInner a, #sponsorHeader .colHdrInner a {
    font-size: 90%;
    display: block;
    text-align: right;
    padding: 3px 5px 3px 0;
    background: url(/images/cornerUpperLeft.gif) top left no-repeat;
}
    
td#trimSponsorLinkCell a {
    font-size: 10px;
    font-color: #FFFFFF;
}

td#trimSponsorLinkCRP a {
    font-color: #FFFFFF;
}

td.trimSponsorDataCell {
    background-color: #3ad6f7;
}

td#sponsorNameCell, #trimSponsorLinkCell, td.sponsorFixedCell, td#sponsorImageCell, td.sponsorImageCell, td.sponsorLinkCRP, td#trimSponsorLinkCRP, td.sponsorDataRowCell, td.trimSponsorDataCellMain, td#trimSponsorVehicleNameHeader {
    background-color: #f5f4fa;
    border-right: 1px solid #ffffff;
    color: #000000;
}

td#sponsorNameCell {
    border-top: 1px solid #ffffff;
}
    
td.sponsorImageCell {
    border-bottom: 1px solid #ffffff;
}

tr#topDataRow td.trimSponsorDataCellMain {
    border-top: 1px solid #cccccc;
    background-image: url(/compare/images/section_fade_dkgray_2.gif);
    background-repeat: repeat-x;
    background-position: 0 0;
    padding-top: 10px;
}

td#trimSponsorVehicleNameHeader, td.trimSponsorVehicleNameHeader {
    border-top: 1px solid #cccccc;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    background-image: url(/compare/images/section_fade_dkgray_2.gif);
    background-repeat: repeat-x;
    background-position: 0 0;
}

#trimCompareTable td#trimSponsorVehicleNameHeader {
    padding: 12px 0 8px;
}

td.trimSponsorDataCellMain, td.sponsorDataRowCell, td.sponsorLinkCRP {
    border-top: 1px solid #dedede; 
    vertical-align: top;
    color: #000000;
}