/* __Color Key__ Light Blue: #dbe4e6 Dark Blueish-grey: #4d5a68 Off-Black: #323232 Very Light Grey (page background): #eeeeee */ /********************************************************** * RESET, FONTS, GRIDS *********************************************************/ html, body { text-align: left; } /********************************************************** * BASE STYLES *********************************************************/ body { background: #fff url(/images/comparator/layout/bg_compare_page.png) repeat-x left top; min-height: 500px; height:auto !important; height:500px; width: 1000px; _width: 999px; font-size: 11px; line-height: 1.5em; } body, textarea { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; } p { padding-bottom: 1em;} .error { color: #a44747; font-weight: bold; } strong { font-weight: bold; } /* Links */ a:link, a:visited { color: #000; text-decoration: underline; } a:hover { } a:hover.active { cursor: default; } /* Change pointer type for links with the "active" class */ /********************************************************** * BUTTONS *********************************************************/ /* General Styles */ .btn { /*image-replaced text*/ background: transparent url(/images/comparator/layout/sprite.png) no-repeat; float: left; } /* Element Specific */ #btnStartLexusComparison { height: 18px; width: 265px; background-position: 0 0;} #btnStartLexusComparison:hover { background-position: 0 -20px; } #btnStartCompetitiveComparison { height: 18px; width: 245px; background-position: 0 -40px; } #btnStartCompetitiveComparison:hover { background-position: 0 -60px; } .btn_select { height: 18px; width: 115px; background-position: 0 -80px; } .btn_select:hover { background-position: 0 -100px; } .btn_close { height: 7px; width: 7px; background-position: -298px -58px; padding: 4px; } #btnCompCompareSelectedModels, #btnL2LCompareSelectedModels { height: 18px; width: 214px; background-position: 0 -1110px; } #btnCompCompareSelectedModels:hover, #btnL2LCompareSelectedModels:hover { background-position: 0 -1130px; } a.add_new_competitor { height: 16px; width: 120px; background-position: 0 -970px; } a.add_new_competitor:hover { background-position: 0 -990px; } #compOvTab, #resOvTab { height: 23px; width: 138px; background-position: 0 -240px; } #compOvTab:hover, #resOvTab:hover { background-position: 0 -270px; } #compOvTab.active, #resOvTab.active { background-position: 0 -300px !important; } #compAdvTab, #resAdvTab { height: 23px; width: 138px; background-position: 0 -330px; } #compAdvTab:hover, #resAdvTab:hover { background-position: 0 -360px; } #compAdvTab.active, #resAdvTab.active { background-position: 0 -390px !important; } .results_header li a { height: 15px; width: 141px; } .results_header #overview_0 { background-position: -278px -140px; } .results_header #overview_0:hover { background-position: -278px -360px; } .results_header ul.overview_0 #overview_0 { background-position: -278px -580px !important; } .results_header #overview_1 { background-position: -278px -155px; } .results_header #overview_1:hover { background-position: -278px -375px; } .results_header ul.overview_1 #overview_1 { background-position: -278px -595px !important; } .results_header #overview_2 { background-position: -278px -170px; } .results_header #overview_2:hover { background-position: -278px -390px; } .results_header ul.overview_2 #overview_2 { background-position: -278px -610px !important; } .results_header #overview_3 { background-position: -278px -185px; } .results_header #overview_3:hover { background-position: -278px -405px; } .results_header ul.overview_3 #overview_3 { background-position: -278px -625px !important; } .results_header #overview_4 { background-position: -278px -200px; } .results_header #overview_4:hover { background-position: -278px -420px; } .results_header ul.overview_4 #overview_4 { background-position: -278px -640px !important; } .results_header #overview_5 { background-position: -278px -215px; } .results_header #overview_5:hover { background-position: -278px -435px; } .results_header ul.overview_5 #overview_5 { background-position: -278px -655px !important; } .results_header #overview_6 { background-position: -278px -230px; } .results_header #overview_6:hover { background-position: -278px -450px; } .results_header ul.overview_6 #overview_6 { background-position: -278px -670px !important; } .results_header #overview_7 { background-position: -278px -245px; } .results_header #overview_7:hover { background-position: -278px -465px; } .results_header ul.overview_7 #overview_7 { background-position: -278px -685px !important; } .results_header #all { background-position: -278px -260px; } .results_header #all:hover { background-position: -278px -480px; } .results_header ul.all #all { background-position: -278px -700px !important; } /* "Build Your __ " */ .btn_build_ls { height: 16px; width: 117px; background-position: 0 -560px; } .btn_build_ls:hover { background-position: -120px -560px; } .btn_build_es { height: 16px; width: 117px; background-position: 0 -600px; } .btn_build_es:hover { background-position: -120px -600px; } .btn_build_gs { height: 16px; width: 117px; background-position: 0 -580px; } .btn_build_gs:hover { background-position: -120px -580px; } .btn_build_is { height: 16px; width: 117px; background-position: 0 -620px; } .btn_build_is:hover { background-position: -120px -620px; } .btn_build_rx { height: 16px; width: 117px; background-position: 0 -680px; } .btn_build_rx:hover { background-position: -120px -680px; } .btn_build_gx { height: 16px; width: 117px; background-position: 0 -700px; } .btn_build_gx:hover { background-position: -120px -700px; } .btn_build_lx { height: 16px; width: 117px; background-position: 0 -720px; } .btn_build_lx:hover { background-position: -120px -720px; } .btn_build_sc { height: 16px; width: 117px; background-position: 0 -660px; } .btn_build_sc:hover { background-position: -120px -660px; } .btn_build_gsh { height: 16px; width: 117px; background-position: 0 -740px; } .btn_build_gsh:hover { background-position: -120px -740px; } .btn_build_lsh { height: 16px; width: 117px; background-position: 0 -760px; } .btn_build_lsh:hover { background-position: -120px -760px; } .btn_build_rxh { height: 16px; width: 117px; background-position: 0 -780px; } .btn_build_rxh:hover { background-position: -120px -780px; } .btn_build_isf { height: 16px; width: 117px; background-position: 0 -640px; } .btn_build_isf:hover { background-position: -120px -640px; } .btn_build_isc { height: 16px; width: 117px; background: transparent url(/images/comparator/buttons/buildYourISC.gif) no-repeat; } .btn_build_isc:hover { background: transparent url(/images/comparator/buttons/buildYourISCOv.gif) no-repeat; } .btn_build_hsh { height: 16px; width: 117px; background: transparent url(/images/comparator/buttons/buildYourHSh.gif) no-repeat; } .btn_build_hsh:hover { background: transparent url(/images/comparator/buttons/buildYourHShv.gif) no-repeat; } .btn_build_cth { height: 16px; width: 117px; background: transparent url(/images/comparator/buttons/buildYourCTh.gif) no-repeat; } .btn_build_cth:hover { background: transparent url(/images/comparator/buttons/buildYourCThv.gif) no-repeat; } /* "Compare __ Series" */ .btn_compare_ls_series { height: 16px; width: 117px; background-position: 0 -1340px; } .btn_compare_ls_series:hover { background-position: -120px -1340px; } .btn_compare_gs_series { height: 16px; width: 117px; background-position: 0 -1360px; } .btn_compare_gs_series:hover { background-position: -120px -1360px; } .btn_compare_es_series { height: 16px; width: 117px; background-position: 0 -1380px; } .btn_compare_es_series:hover { background-position: -120px -1380px; } .btn_compare_is_series { height: 16px; width: 117px; background-position: 0 -1400px; } .btn_compare_is_series:hover { background-position: -120px -1400px; } .btn_compare_isf_series { height: 16px; width: 117px; background-position: 0 -1420px; } .btn_compare_isf_series:hover { background-position: -120px -1420px; } .btn_compare_sc_series { height: 16px; width: 117px; background-position: 0 -1440px; } .btn_compare_sc_series:hover { background-position: -120px -1440px; } .btn_compare_rx_series { height: 16px; width: 117px; background-position: 0 -1460px; } .btn_compare_rx_series:hover { background-position: -120px -1460px; } .btn_compare_gx_series { height: 16px; width: 117px; background-position: 0 -1480px; } .btn_compare_gx_series:hover { background-position: -120px -1480px; } .btn_compare_lx_series { height: 16px; width: 117px; background-position: 0 -1500px; } .btn_compare_lx_series:hover { background-position: -120px -1500px; } .btn_compare_gsh_series { height: 16px; width: 117px; background-position: 0 -1520px; } .btn_compare_gsh_series:hover { background-position: -120px -1520px; } .btn_compare_lsh_series { height: 16px; width: 117px; background-position: 0 -1540px; } .btn_compare_lsh_series:hover { background-position: -120px -1540px; } .btn_compare_rxh_series { height: 16px; width: 117px; background-position: 0 -1560px; } .btn_compare_rxh_series:hover { background-position: -120px -1560px; } .btn_compare_isc_series { height: 16px; width: 117px; background: transparent url(/images/comparator/buttons/comparerISCSeries.gif) no-repeat; display: none; } .btn_compare_isc_series:hover { background: transparent url(/images/comparator/buttons/comparerISCSeriesOv.gif) no-repeat; } .btn_compare_hsh_series { height: 16px; width: 117px; background: transparent url(/images/comparator/buttons/compareHShSeries.gif) no-repeat; display: none; } .btn_compare_hsh_series:hover { background: transparent url(/images/comparator/buttons/compareHShSeriesOv.gif) no-repeat; } .btn_compare_cth_series { height: 16px; width: 117px; background: transparent url(/images/comparator/buttons/compareCThSeries.gif) no-repeat; display: none; } .btn_compare_cth_series:hover { background: transparent url(/images/comparator/buttons/compareCThSeriesOv.gif) no-repeat; } .btn_find_dealer { height: 16px; width: 117px; background-position: -275px -780px; } .btn_find_dealer:hover { background-position: -275px -800px; } .btn_competitive_comparison { height: 16px; width: 117px; background-position: 0 -800px; } .btn_competitive_comparison:hover { background-position: -120px -800px; } .start_over { height: 22px; width: 97px; background-position: 0 -120px; } .start_over:hover { background-position: 0 -150px; } .print { height: 22px; width: 117px; background-position: 0 -180px; } .print:hover { background-position: 0 -210px; } #btnBackToOverview { height: 18px; width: 163px; background-position: 0 -1060px; } #btnBackToOverview:hover { background-position: 0 -1080px; } /* "Compare All __ " display none on single vehicles */ .compare_all { height: 17px;} .ls .compare_all { width: 180px; background-position: 0 -818px; } .ls .compare_all:hover { background-position: -200px -818px; } .gs .compare_all { width: 180px; background-position: 0 -837px; } .gs .compare_all:hover { background-position: -200px -837px; } .es .compare_all { display: none; width: 180px; background-position: 0 -856px; } .es .compare_all:hover { background-position: -200px -856px; } .is .compare_all { width: 180px; background-position: 0 -875px; } .is .compare_all:hover { background-position: -200px -875px; } .isc .compare_all { width: 180px; height: 16px; background: transparent url(/images/comparator/buttons/compareAllISCVehicles.gif) no-repeat; } .isc .compare_all:hover { background: transparent url(/images/comparator/buttons/compareAllISCVehiclesOv.gif) no-repeat; } .sc .compare_all { display: none; width: 180px; background-position: 0 -894px; } .sc .compare_all:hover { background-position: -200px -894px; } .rx .compare_all { width: 180px; background-position: 0 -913px; } .rx .compare_all:hover { background-position: -200px -913px; } .gx .compare_all { display: none; width: 180px; background-position: 0 -932px; } .gx .compare_all:hover { background-position: -200px -932px; } .lx .compare_all { display:none; width: 180px; background-position: 0 -951px; } .lx .compare_all:hover { background-position: -200px -951px; } .gsh .compare_all { display: none; display: none; width: 220px; background-position: -200px -970px; } .gsh .compare_all:hover { background-position: -200px -989px; } .lsh .compare_all { display: none; width: 220px; background-position: -200px -1003px; } .lsh .compare_all:hover { background-position: -200px -1027px; } .rxh .compare_all { width: 220px; background-position: -200px -1046px; } .rxh .compare_all:hover { background-position: -200px -1065px; } .hsh .compare_all { width: 220px; height: 17px; background: transparent url(/images/comparator/buttons/compareAllHShVehicles.gif) no-repeat; } .hsh .compare_all:hover { background: transparent url(/images/comparator/buttons/compareAllHShVehiclesOv.gif) no-repeat; } .cth .compare_all { width: 220px; height: 17px; background: transparent url(/images/comparator/buttons/compareAllCThVehicles.gif) no-repeat; } .cth .compare_all:hover { background: transparent url(/images/comparator/buttons/compareAllCThVehiclesOv.gif) no-repeat; } .see_advantages { height: 26px; width: 120px; background-position: 0 -420px; } .see_advantages:hover { background-position: 0 -450px; } #btnSelectPrimaryVehicle { height: 18px; width: 95px; background-position: 0 -520px; } #btnSelectPrimaryVehicle:hover { background-position: 0 -540px; } #btnOtherKeyCompetitors { height: 20px; width: 173px; background-position: 0 -1250px; } #btnOtherKeyCompetitors:hover { background-position: -178px -1250px; } #btnOtherKeyCompetitors.active, #btnOtherKeyCompetitors.active:hover { background-position: -351px -1250px; cursor: default; } #btnOtherLexusVehicles { height: 20px; width: 173px; background-position: 0 -1280px; } #btnOtherLexusVehicles:hover { background-position: -178px -1280px; } #btnOtherLexusVehicles.active, #btnOtherLexusVehicles.active:hover { background-position: -351px -1280px; cursor: default; } #btnOtherVehicles { height: 20px; width: 173px; background-position: 0 -1310px; } #btnOtherVehicles:hover { background-position: -178px -1310px; } #btnOtherVehicles.active, #btnOtherVehicles.active:hover { background-position: -351px -1310px; cursor: default; } .add_dark { height: 18px; width: 65px; background-position: -100px -1010px; } .add_dark:hover { background-position: -100px -1030px; } .add_light { height: 18px; width: 55px; background-position: -300px -1110px; } .add_light:hover { background-position: -300px -1130px; } .start_over_confirm { height: 18px; width: 115px; background-position: 0 -480px; } .start_over_confirm:hover { background-position: 0 -500px; } .retry { height: 18px; width: 95px; background-position: -100px -520px; } .retry:hover { background-position: -100px -540px; } /********************************************************** * VIEW TOGGLES *********************************************************/ div.view, h2, h3#headingL2L, h3#headingCompetitive, h3#headingSelect { display: none; } /* IE6 needs a bit more coaxing */ .ie6 div.view, .ie6 h2, .ie6 h3#headingL2L, .ie6 h3#headingCompetitive, .ie6 h3#headingSelect { display: none !important; } /* Active View: viewSelectComparisonType */ body.viewSelectComparisonType h2 { display: block !important;} body.viewSelectComparisonType h3#headingSelect { display: inline !important;} body.viewSelectComparisonType #viewSelectComparisonType { display: inline !important;} /* Active View: viewCompSelectStyle */ body.viewCompSelectStyle h3#headingCompetitive { display: inline !important;} body.viewCompSelectStyle #viewSelectStyle { display: inline !important;} body.viewCompSelectStyle .compare_all { display: none !important;} /* Active View: viewCompSelectVehicles */ body.viewCompSelectVehicles h3#headingCompetitive { display: inline !important;} body.viewCompSelectVehicles #viewCompSelectVehicles { display: inline !important;} /* Active View: viewResultsOverview */ body.viewResultsOverview h3#headingCompetitive { display: inline !important;} body.viewResultsOverview #viewResultsOverview { display: inline !important;} body.viewResultsOverview p.table_wide_summary {display: none;} /* Active View: viewCompResultsAdvantages */ body.viewCompResultsAdvantages h3#headingCompetitive { display: inline !important;} body.viewCompResultsAdvantages #viewCompResultsAdvantages { display: inline !important;} /* Active View: viewLexusSelectStyle */ body.viewLexusSelectStyle h3#headingL2L { display: inline !important;} body.viewLexusSelectStyle #viewSelectStyle { display: inline !important;} /* Active View: viewLexusSelectVehicles */ body.viewLexusSelectVehicles h3#headingL2L { display: inline !important;} body.viewLexusSelectVehicles #viewLexusSelectVehicles { display: inline !important;} /* Active View: viewLexusResults */ body.viewLexusResults h3#headingL2L { display: inline !important;} body.viewLexusResults #viewResultsOverview { display: inline !important;} /* Active View: viewLexusResultsAllStyles */ body.viewLexusResultsAllStyles h3#headingL2L { display: inline !important;} body.viewLexusResultsAllStyles #viewLexusResultsAllStyles { display: inline !important;} /********************************************************** * TOP ELEMENTS *********************************************************/ h2 { /*image-replaced text- large picture up top*/ background: #fff no-repeat left top; width: 1000px; height: 270px; } .ie h2 { width: 999px; } /* Vehicle-specific hero images */ .ls h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/ls_bg.jpg);} .lsh h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/lsh_bg.jpg);} .es h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/es_bg.jpg);} .gs h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/gs_bg.jpg);} .gsh h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/gsh_bg.jpg);} .is h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/is_bg.jpg);} .rx h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/rx_bg.jpg);} .gx h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/gx_bg.jpg);} .lx h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/lx_bg.jpg);} .sc h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/sc_bg.jpg);} .rxh h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/rxh_bg.jpg);} .isf h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/isf_bg.jpg);} .isc h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/isc_bg.jpg);} .hsh h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/hsh_bg.jpg);} .cth h2.landing_header { background-image: url(/images/comparator/lexus_vehicles/cth_bg.jpg);} h3 { /*the main headings*/ float: left; margin: 55px 0 0 245px; } body.viewSelectComparisonType h3, body.viewSelectComparisonType #polk { margin-top: 25px; } .ie6 h3 { display: inline; /* Fixes IE6 Double Margin bug*/ } h3#headingSelect { width: 212px; height: 20px; background: transparent url(/images/comparator/layout/heading_comp_type.png) no-repeat top left; } h3#headingCompetitive { /*image-replaced text*/ background: transparent url(/images/comparator/layout/heading_competitive.png) no-repeat left top; width: 226px; height: 22px; } .ie6 h3#headingCompetitive { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/comparator/layout/heading_competitive.png', sizingMethod='crop'); } h3#headingL2L { /*image-replaced text*/ background: transparent url(/images/comparator/layout/heading_L2L.png) no-repeat left top; width: 248px; height: 22px; } .ie6 h3#headingL2L { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/comparator/layout/heading_L2L.png', sizingMethod='crop'); } #polk { /*image-replaced text*/ background: transparent url(/images/comparator/layout/polk.png) no-repeat left top; width: 379px; height: 17px; float: right; margin: 55px 30px 0 0; } .ie6 #polk { margin-right: 15px;/*Double margin bug*/ background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/comparator/layout/polk.png', sizingMethod='crop'); } /********************************************************** * VEHICLE TILES TABLE (FOR COMPARISON AND RESULTS) *********************************************************/ .tabs .btn { float: left; margin-top: 2px; } .print, .start_over { float: left; } .print { margin-left: 4px; } .start_over { margin-left: 231px; } .results_vehicles { position: relative; float: left; } .results_tiles { float: left; clear: left; } .results_header .results_vehicles { float: right; width: 540px; } .results_tiles div { /* 4 types of tiles... lexus_tile, comp_tile, empty_tile, inactive_tile, select_tile */ float: left; width: 128px; border: 1px solid #c8c8c8; margin: 0 5px 0 0; position: relative; } .ie6 .results_tiles div {display:inline;} .change_vehicle_lnk { position: absolute; top: 2px; left: 4px; } .results_tiles div img { /* vehicle thumb */ float: left; clear: left; margin: 20px 0 0 4px; } .results_header .results_tiles div img { /* vehicle thumbs within the results header */ margin: 6px 0 0 4px; } .results_tiles div .btn { margin: 0 0 4px 5px; float: left; clear: left; } .results_tiles div p { /* Vehicle names and links */ float: left; clear: both; margin: 4px 4px 4px 4px; width: 120px; font-size: 10px; line-height: 12px; height: 24px; } .ie6 .results_tiles div p { width: 116px; } .results_tiles .btn_close { position: absolute; top: 3px; right: 2px; margin: 0 0 0 0; } /* LEXUS_TILE */ div.lexus_tile { background: #dbe4e6; } div.lexus_tile a.see_advantages { display: none; } .ie7 #viewLexusSelectVehicles div.lexus_tile img, .ie6 #viewLexusSelectVehicles div.lexus_tile img { margin-top: 24px; /* weird */ } /* COMP_TILE */ div.comp_tile { background: #e1e1e1; color: #323232; } div.comp_tile a.see_advantages { display:none; } /* EMPTY_TILE */ div.empty_tile { background: #787878; } div.empty_tile span { /*blank vehicle thumb*/ background: #a9a9a9; float: left; width: 120px; height: 60px; margin: 25px 0 0 4px; } div.empty_tile a.add_new_competitor { position: absolute; bottom: 4px; left: 0; } /* INACTIVE_TILE */ div.inactive_tile { background: #787878; border-color: #6F6F6F; } div.inactive_tile img { opacity: 0.2; filter: alpha(opacity=20); } div.inactive_tile a {display: none;} div.inactive_tile a.change_vehicle_lnk {display: inline;} div.inactive_tile .btn_close { opacity: 0.4; filter: alpha(opacity=40); display: inline;} div.inactive_tile a.see_advantages { position: absolute; bottom: 4px; left: 0; display: inline; } /* SELECT_TILE */ div.select_tile { background: #dbe4e6; } div.select_tile p { background: #fff; color: #999; text-align: center; width: 120px; margin: 24px 0 40px 4px; padding: 15px 0; } .ie6 div.select_tile p { display: inline; /* double margin bug */ } /* disable close button on all tileswhen there's only one vehicle in results */ #viewResultsOverview .single .btn_close, #viewCompResultsAdvantages .single .btn_close, #viewLexusResultsAllStyles .single .btn_close { visibility:hidden; } /********************************************************** * COMPARISON RESULTS TABLE *********************************************************/ /* RESULTS TABLE - HEADINGS */ p.table_summary { float: left; clear: left; width: 177px; font-weight: bold; background: #dbe4e6; color: #666; padding: 5px 0 4px 5px; } .ie6 p.table_summary { padding: 4px 0 4px 5px; } .ie7 p.table_summary { padding: 4px 0 5px 5px; } p.table_wide_summary { float: left; clear: left; width: 717px; font-weight: bold; background: #dbe4e6; color: #666; padding: 5px 0 4px 5px; } p.table_advant { float: left; width: 537px; background: #4d5a68; color: #fff; padding: 5px 0 4px 4px; position: relative; } #viewCompResultsAdvantages p.table_advant { font-weight: bold; } p.table_advant a { color: #fff !important; position: absolute; top: 5px; right: 15px; } p.table_advant img { vertical-align: middle; } /* RESULTS TABLE - TABLE DATA */ .scroll_table { float: left; clear: both; width: 741px; height: 190px; overflow: hidden; position: relative; border-bottom: 1px solid #DBE4E6; } .scroll_table table tr.empty { display: none; } .scroll_table table { font-size: 10px; top: 0; position: absolute; border: 1px solid #DBE4E6; margin-left: 1px;} .scroll_table table.all {margin-top: 6px;} .scroll_table table td { border: 1px solid #dbe4e6; width: 126px; padding: 4px; vertical-align: middle; } .scroll_table table td.empty { background: #7d8690; border: 1px solid #77838e; } .scroll_table table tr.odd td.empty { background: #828b95; border: 1px solid #77838e; } .scroll_table table td.first { width: 173px !important; } .scroll_table table tr.odd td { background: #eeeeee; } .scroll_table table td.lexus_advantage { background: #4d5a68 url(/images/comparator/layout/logo_lexus_small.gif) no-repeat right center !important; color: #fff; font-weight: bold; padding-right: 18px; width: 112px; } .scroll_table table td.advantage, .scroll_table table td.advantage_all { font-weight: bold; } .scroll_table table a.demo_lnk { /*image-replaced text*/ width: 17px; height: 15px; background: transparent url(/images/comparator/layout/sprite.png) no-repeat -274px -40px; display: -moz-inline-block; /* For Firefox 2 only. FF3 recognizes the non proprietary property. */ display: inline-block; margin: 0 0 0 4px; vertical-align: bottom; } /* * Show Comparison Topic tbody based on table style */ #resultsOverviewTableWrapper table tbody { display: none; } #resultsOverviewTableWrapper table.overview_0 tbody#overview_0, #resultsOverviewTableWrapper table.overview_1 tbody#overview_1, #resultsOverviewTableWrapper table.overview_2 tbody#overview_2, #resultsOverviewTableWrapper table.overview_3 tbody#overview_3, #resultsOverviewTableWrapper table.overview_4 tbody#overview_4, #resultsOverviewTableWrapper table.overview_5 tbody#overview_5, #resultsOverviewTableWrapper table.overview_6 tbody#overview_6, #resultsOverviewTableWrapper table.overview_7 tbody#overview_7, #resultsOverviewTableWrapper table.all tbody { display: table-row-group; } .ie #resultsOverviewTableWrapper table.overview_0 tbody#overview_0, .ie #resultsOverviewTableWrapper table.overview_1 tbody#overview_1, .ie #resultsOverviewTableWrapper table.overview_2 tbody#overview_2, .ie #resultsOverviewTableWrapper table.overview_3 tbody#overview_3, .ie #resultsOverviewTableWrapper table.overview_4 tbody#overview_4, .ie #resultsOverviewTableWrapper table.overview_5 tbody#overview_5, .ie #resultsOverviewTableWrapper table.overview_6 tbody#overview_6, .ie #resultsOverviewTableWrapper table.overview_7 tbody#overview_7, .ie #resultsOverviewTableWrapper table.all tbody { display: block; } #resultsOverviewTableWrapper table.all tbody#overview_0 { display: none; } #resultsOverviewTableWrapper th { height: 0; overflow: hidden; font-size: 0; line-height: 0; } .ie #resultsOverviewTableWrapper th {display:none;} #resultsOverviewTableWrapper table.all th { height: auto; background:#DBE4E6 none repeat scroll 0 0; color:#666666; font-weight: bold; font-size: 11px; line-height: normal; padding:5px 0 4px 5px; } .ie #resultsOverviewTableWrapper table.all th { display: block; } /* * Show advantages only in advantages table */ #resultsAdvantagesTableWrapper table tbody#AdvantageText { display: block !important;} /* * Use class switching to show the current column */ #resultsAdvantagesTableWrapper table td { display: none; } #resultsAdvantagesTableWrapper table td.first, #resultsAdvantagesTableWrapper table.show_1 td.col_1, #resultsAdvantagesTableWrapper table.show_2 td.col_2, #resultsAdvantagesTableWrapper table.show_3 td.col_3 { display: table-cell; } .ie #resultsAdvantagesTableWrapper table td.first, .ie #resultsAdvantagesTableWrapper table.show_1 td.col_1, .ie #resultsAdvantagesTableWrapper table.show_2 td.col_2, .ie #resultsAdvantagesTableWrapper table.show_3 td.col_3 { display: block; } /********************************************************** * VIEW STYLES: GENERAL *********************************************************/ .results_header { background: #323232; float: left; padding:12px 0 6px 0; /* margin-bottom: 5px; */ position: relative; width: 722px; min-height: 160px; } #resultsShim { background: #4D5A68; position: absolute; top: 0; right: 7px; height: 185px; display: none; } .results_header .single #resultsShim { display: block; width: 398px; } .results_header .double #resultsShim { display: block; width: 263px; } .results_header .triple #resultsShim { display: block; width: 128px; } .ie6 #viewCompResultsAdvantages .results_header { height: auto !important; height: 160px; } body.viewLexusResultsAllStyles .results_header, body.viewLexusResults .results_header {padding-top: 6px;} div.view { margin: 12px 0 0 245px; position: relative; width: 725px; float: left; clear: left; } .ie6 div.view { display: inline; /* Fixes IE6 Double Margin bug*/ } /********************************************************** * VIEW: viewSelectComparisonType *********************************************************/ body.viewSelectComparisonType { padding-top: 0; } #lexusCompareCont { margin-left: 30px; } /*Puts gutter between divs*/ #viewSelectComparisonType h4 { width: 335px; height: 32px; } /*image-replaced text*/ #competitiveCompareCont h4 { background: transparent url(/images/comparator/layout/sprite.png) no-repeat -100px -1200px; } /*image-replaced text*/ #lexusCompareCont h4 { background: transparent url(/images/comparator/layout/sprite.png) no-repeat -100px -1160px; } /*image-replaced text*/ #competitiveCompareCont, #lexusCompareCont { float: left; text-align: center; background: #dbe4e6; padding: 6px 6px 12px 6px; } #viewSelectComparisonType div p {/*image-replaced text*/ background-color: transparent; background-repeat: no-repeat; background-position: left top; width: 335px; height: 117px; } #competitiveCompareCont p { background-image: url(/images/comparator/layout/select_comp.jpg); } /*image-replaced text*/ #lexusCompareCont p { background-image: url(/images/comparator/layout/select_lexus.jpg); } /*image-replaced text*/ #competitiveCompareCont .btn, #lexusCompareCont .btn { margin: 0 0 0 40px; } /********************************************************** * VIEW: viewCompSelectStyle *********************************************************/ .style_select { background: #323232; color: #fff; border: 4px solid #323232; width: 717px; /*Reduced slightly from div.view because of border*/ position: relative; } .style_select p { font-weight: bold; padding-bottom: 3px; } .style_select ul li { float: left; clear: left; width: 100%; background: #dbe4e6; border-bottom: 1px solid #323232; color: #000; position: relative; } .style_select ul li img { /*Model preview*/ float: left; border-right: 1px solid #323232; } .style_select ul li h4 { float: left; font-weight: bold; padding: 0 0 0 42px; margin-top: 25px; } .style_select ul li a.btn { position: absolute; bottom: 30px; left: 245px; } .style_select ul li ul { width: 270px; /* from 260px; needed more room for IE content - hourane, 12/22/09 */ padding-top: 10px; float: none; position: absolute; top: 0; right: 15px; } .style_select ul li ul li { border: 0; float: none; list-style: disc inside; vertical-align: auto; text-indent: -15px; /* unchanged; for FF; IE doesn't seem to recognize this attribute - hourane, 12/22/09 */ } .ie6 .style_select ul li ul li, .ie7 .style_select ul li ul li { text-indent: 0; /*IE does this automatically*/ width: 94%; vertical-align: top; position: relative; top: -.4em; /*Fixed strange bullet placement*/ } /********************************************************** * VIEW: viewLexusSelectStyle (inherits alot from the viewCompSelectStyle view) *********************************************************/ .style_select a.compare_all { float: right; } /********************************************************** * VIEW: viewCompSelectVehicles *********************************************************/ #viewCompSelectVehicles { background: #eeeeee; border: 4px solid #323232; width: 717px; /*Reduced slightly from div.view because of border*/ padding-bottom: 40px; } .selected_header { background: #dbe4e6 url(/images/comparator/layout/bg_selected.png) repeat-y top right; border-bottom: 4px solid #323232; float: left; width: 100%; height: 100px; } .selected_header img { float: left; } .selected_header p { float: right; clear: right; width: 500px; margin: 10px 0 0 0; padding: 0; } .selected_header span { font-size: 14px; font-weight: bold; } .selected_content { float: left; clear: left; padding: 20px 0 0 15px; width: 700px; } #lnkEditCompStyle, #lnkEditLexusStyle { color: #666; padding-left: 12px; } .es #lnkEditCompStyle, .es #lnkEditLexusStyle, .gsh #lnkEditCompStyle, .gsh #lnkEditLexusStyle, .gx #lnkEditCompStyle, .gx #lnkEditLexusStyle, .isf #lnkEditCompStyle, .isf #lnkEditLexusStyle, .lsh #lnkEditCompStyle, .lsh #lnkEditLexusStyle, .lx #lnkEditCompStyle, .lx #lnkEditLexusStyle , .sc #lnkEditCompStyle, .sc #lnkEditLexusStyle { display: none; } .selected_heading { float: left; clear: left; width: 700px; font-size: 12px; font-weight: bold; color: #323232; } .comp_meta { width: 230px; float: left; margin-left: 8px; position: relative; height: 144px; } .comp_meta p { width: 255px; } .link_reset_competitors { position: absolute; bottom: 0; /* Firefox sets the horizontal position correctly, not sure is IE will */ } #btnCompCompareSelectedModels { float: left; clear: left; margin: 40px 0 0 0; } #viewCompSelectVehicles .results_tiles div { min-height: 142px; } .ie6 #viewCompSelectVehicles .results_tiles div { height:auto !important; height:142px; } /********************************************************** * VIEW: viewResultsOverview *********************************************************/ /* hide the competetive comparison and compare __ series buttons*/ .viewResultsOverview .btn_competitive_comparison, .viewResultsOverview .primary .btn_close, .viewResultsOverview .btn_compare_ls_series, .viewResultsOverview .btn_compare_es_series, .viewResultsOverview .btn_compare_gs_series, .viewResultsOverview .btn_compare_is_series, .viewResultsOverview .btn_compare_rx_series, .viewResultsOverview .btn_compare_gx_series, .viewResultsOverview .btn_compare_lx_series, .viewResultsOverview .btn_compare_sc_series, .viewResultsOverview .btn_compare_gsh_series, .viewResultsOverview .btn_compare_lsh_series, .viewResultsOverview .btn_compare_rxh_series, .viewResultsOverview .btn_compare_isc_series, .viewResultsOverview .btn_compare_isf_series { display: none; } .ov_heading { float: left; } .ov_heading p { /*image-replaced text*/ float: left; height: 14px; width: 141px; background: transparent url(/images/comparator/layout/sprite.png) no-repeat -278px -116px; margin: 0 0 0 10px; } .ie6 .ov_heading p { display: inline; } /*Double Margin Bug*/ .ov_heading ul { float: left; clear: left; width: 141px; margin: 0 0 0 16px; } .ie6 .ov_heading ul { margin: 0 0 0 8px; } /*Double Margin Bug*/ .ie6 .ov_heading ul li, .ie7 .ov_heading ul li {line-height: 13px; margin: 0; padding: 0; } .ie6 .ov_heading ul li a, .ie7 .ov_heading ul li a { height: 15px; margin: 0; padding: 0;} .viewResultsOverview .scroll_table { height: 170px; } .ie7 .viewResultsOverview .scroll_table { height: 160px; } /********************************************************** * VIEW: viewCompResultsAdvantages *********************************************************/ /* hide the competetive comparison, remove and compare __ series buttons*/ .viewCompResultsAdvantages .btn_competitive_comparison, .viewCompResultsAdvantages .primary .btn_close, .viewCompResultsAdvantages .btn_compare_ls_series, .viewCompResultsAdvantages .btn_compare_es_series, .viewCompResultsAdvantages .btn_compare_gs_series, .viewCompResultsAdvantages .btn_compare_is_series, .viewCompResultsAdvantages .btn_compare_rx_series, .viewCompResultsAdvantages .btn_compare_gx_series, .viewCompResultsAdvantages .btn_compare_lx_series, .viewCompResultsAdvantages .btn_compare_sc_series, .viewCompResultsAdvantages .btn_compare_gsh_series, .viewCompResultsAdvantages .btn_compare_lsh_series, .viewCompResultsAdvantages .btn_compare_rxh_series, .viewCompResultsAdvantages .btn_compare_isc_series, .viewCompResultsAdvantages .btn_compare_isf_series { display: none; } #btnBackToOverview { float: left; margin-left: 5px; } #resultsAdvantagesHeader { float: left; clear: both; } .adv_heading { width: 163px; margin-left: 4px; } .adv_heading p { position: absolute; bottom: 10px; left: 12px; color: #fff; font-size: 10px; width: 156px; padding: 0; } #resultsAdvantagesHeader { float: left; width: 717px; margin: 0 0 5px 0; font-weight: bold; background: #dbe4e6; color: #666; padding: 4px 0 4px 5px; } .viewCompResultsAdvantages .scroll_table { height: 140px; } .ie7 .viewCompResultsAdvantages .scroll_table { height: 160px; } #viewCompResultsAdvantages .scroll_table table td { width: 530px; } #viewCompResultsAdvantages .scroll_table table td.first { width: 174px !important;} .ie6 #viewCompResultsAdvantages .results_tiles, .ie7 #viewCompResultsAdvantages .results_tiles { margin-top: -18px; } /********************************************************** * VIEW: viewLexusSelectVehicles (inherits alot from viewCompSelectVehicles view) *********************************************************/ #viewLexusSelectVehicles { background: #eeeeee; border: 4px solid #323232; width: 717px; /*Reduced slightly from div.view because of border*/ padding-bottom: 10px; } .ie6 #viewLexusSelectVehicles, .ie7 #viewLexusSelectVehicles { padding-bottom: 20px; } .selected_content label { display: inline-block; width: 50px; } .selected_content select { width: 120px; } .selected_content .add_dark { float: none; display: -moz-inline-block; /* For Firefox 2 only. FF3 recognizes the non proprietary property. */ display: inline-block; vertical-align: middle; margin: -4px 0 0 20px; } .link_clear { line-height: 1em; color: #999 !important; position: absolute; top: 6px; right: 21px; } #viewLexusSelectVehicles .results_tiles div { min-height: 122px; } .ie6 #viewLexusSelectVehicles .results_tiles div { height: auto !important; height: 122px; } #btnL2LCompareSelectedModels { float: left; clear: left; margin: 0 0 10px 0; } /********************************************************** * VIEW: viewLexusResults *********************************************************/ .viewLexusResults #viewResultsOverview .results_tiles div { } .viewLexusResults #viewResultsOverview .scroll_table { height: 180px; } .viewLexusResults #viewResultsOverview .start_over { margin: 0 0 4px 507px; } .viewLexusResults div.tabs, .viewLexusResults p.table_summary, .viewLexusResults p.table_advant {display: none; } /* hide the competetive comparison button */ .viewLexusResults .btn_competitive_comparison {display: none; } /********************************************************** * VIEW: viewLexusResultsAllStyles *********************************************************/ #viewLexusResultsAllStyles .results_tiles div { height: 183px; } #viewLexusResultsAllStyles .empty_tile { display: none; } #viewLexusResultsAllStyles .start_over { margin: 0 0 4px 504px; } #viewLexusResultsAllStyles .scroll_table { height: 190px; } /* hide the "compare xx series" buttons and the change link*/ #viewLexusResultsAllStyles .change_vehicle_lnk, #viewLexusResultsAllStyles .btn_compare_ls_series, #viewLexusResultsAllStyles .btn_compare_es_series, #viewLexusResultsAllStyles .btn_compare_gs_series, #viewLexusResultsAllStyles .btn_compare_is_series, #viewLexusResultsAllStyles .btn_compare_rx_series, #viewLexusResultsAllStyles .btn_compare_gx_series, #viewLexusResultsAllStyles .btn_compare_lx_series, #viewLexusResultsAllStyles .btn_compare_sc_series, #viewLexusResultsAllStyles .btn_compare_gsh_series, #viewLexusResultsAllStyles .btn_compare_lsh_series, #viewLexusResultsAllStyles .btn_compare_rxh_series, #viewLexusResultsAllStyles .btn_compare_isf_series { display: none; } /* create "pages" for the all styles results */ .ov_models { background: #DBE4E6; float: left; width: 160px; height: 100px; margin: 0 0 0 5px; text-align: center; } body.viewLexusResultsAllStyles .ov_models {width: 172px;} p.ov_models_title { padding: 5px 0 10px 0; background: #DBE4E6; white-space: nowrap; } p.ov_models_title a { font-size: 9px; } .ie6 .ov_models { /* Prevents a weird IE6 jumping bug related to the double-margin bug. */ display: inline; width: 155px; } /* Generic styles */ .ov_models h4 { /* Large Model letters - Image-replaced text */ background: transparent url(/images/comparator/layout/model_sprite.gif) no-repeat; width: 90px; height: 60px; margin: 15px 0 0 34px; } .ie6 .ov_models h4, .ie7 .ov_models h4 { margin-left: 0; } /* background position for specific models */ .ls .ov_models h4 { background-position: 0 0;} .es .ov_models h4 { background-position: 0 -60px;} .gs .ov_models h4 { background-position: 0 -120px;} .is .ov_models h4 { background-position: 0 -180px;} .rx .ov_models h4 { background-position: 0 -240px;} .gx .ov_models h4 { background-position: 0 -300px;} .lx .ov_models h4 { background-position: 0 -360px;} .sc .ov_models h4 { background-position: 0 -420px;} .gsh .ov_models h4 { background-position: 0 -480px;} .lsh .ov_models h4 { background-position: 0 -540px;} .rxh .ov_models h4 { background-position: 0 -600px;} .lsf .ov_models h4 { background-position: 0 -660px;} .isc .ov_models h4 { background-position: 0 -720px;} .hsh .ov_models h4 { background-position: 0 -780px; } .cth .ov_models h4 { background-position: 0 -840px; } .lsm .ov_models h4 { background-position: 0 0; } /* Arrows and Directions */ p.ov_models_directions { /* "Please click the arrows... " */ float: left; background: #323232 url(/images/comparator/layout/model_nav_sprite.gif) no-repeat center 6px; width: 100%; height: 36px; margin: 0; color: #fff; } p.ov_models_nav { padding: 0 0 0 38px; margin: 0; height: 25px; background: #323232; } p.ov_models_nav a { float: left; background: transparent url(/images/comparator/layout/model_nav_sprite.gif) no-repeat; width: 30px; height: 25px; margin: 0 0 0 10px; } .ov_models_nav a.prev, .ov_models_nav a.prev:hover { background-position: -60px -40px; } .ov_models_nav a.next, .ov_models_nav a.next:hover { background-position: -90px -40px; } .prev_disabled a.prev, .prev_disabled a.prev:hover { background-position: 0 -40px; cursor: default;} .next_disabled a.next, .next_disabled a.next:hover { background-position: -30px -40px; cursor: default; } /* Hide/Show Arrows and Directions */ .few_styles p.ov_models_directions, .few_styles p.ov_models_nav { display: none; } .few_styles h4 { margin: 35px 0 0 34px; } .few_styles p.ov_models_title { padding: 15px 0 58px 0; } /* Model: LS */ .ls_model h4 { background-position: center 0; } .es_model h4 { background-position: center -60px; } .gs_model h4 { background-position: center -120px; } .is_model h4 { background-position: center -180px; } .rx_model h4 { background-position: center -240px; } .gx_model h4 { background-position: center -300px; } .lx_model h4 { background-position: center -360px; } .sc_model h4 { background-position: center -420px; } .gsh_model h4 { background-position: center -480px; } .lsh_model h4 { background-position: center -540px; } .rxh_model h4 { background-position: center -600px; } .isf_model h4 { background-position: center -660px; } /********************************************************** * OVERLAYS / MODAL WINDOWS *********************************************************/ div.overlay { background: #fff; margin: 0 auto; top: 150px; width: 460px; min-height: 100px; position: relative; } /* Common Styles */ .overlay .overlay_header { background: #fff; width: 445px; float: left; padding: 5px 0 5px 15px; font-weight: bold; } .overlay .overlay_header span { font-weight: normal; padding-left: 10px; } .overlay_close { float: right; position: static; display: block; background: transparent url(/images/comparator/layout/sprite.png) no-repeat -245px -57px; width: 57px; text-decoration: none !important; /* ie6 needs important */ padding: 0 0 10px 15px; margin: 6px 6px 0 0; } .overlay_close:hover { text-decoration: underline !important; /* ie6 needs */ } .ie7 .overlay_close { background-position: -245px -57px; } .ie6 .overlay_close { background-position: -245px -56px; } .overlay h4 { font-size: 14px; font-weight: bold; } .overlay_modelselect { position: relative; } .overlay dl { float: left; width: 200px; } .overlay dl dt { float: left; clear: left; font-weight: bold; width: 50px; padding: .5em 0; } .overlay dl dd { float: left; padding: .5em 0; } .overlay dl dd select { width: 150px; } /* View: overlaySelectLexus */ #overlaySelectLexus { background: #dbe4e6; position: relative; /*display: block;*/ } #overlaySelectLexus .overlay_content { padding: 15px; float: left; clear: left; width: 430px; } #overlaySelectLexus .overlay_content img { float: left; margin: 15px 0 20px 100px; } #overlaySelectLexus .overlay_modelselect { clear: left; margin-left: 50px; width: 320px; } #overlaySelectLexus .overlay_modelselect .btn { position: absolute; bottom: 7px; right: 0; } /* View: overlaySelectVehicle */ #overlaySelectVehicle { background: #eee; padding-bottom: 10px; } #overlaySelectVehicle h4 { padding: 15px; display: block; clear: left; } #selectVehicleSubnav { float: left; width: 190px; padding: 0 0 10px 0; } #selectVehicleSubnav .btn { float: right; clear: right; margin: 10px 0 0 0; } #overlaySubWrapper { background: #CECECE; float: left; width: 242px; padding: 10px; font-weight: bold; } /* overlaySubWrapper DIV's */ /* Sub View: selectVehicleInstructions */ #selectVehicleInstructions p { padding-bottom: 80px;} /* Sub View: addKeyCompetitors */ #addKeyCompetitors table { font-weight: normal; vertical-align: middle; } #addKeyCompetitors table td { line-height: 12px; height: 32px; } #addKeyCompetitors table td .btn { margin-right: 10px; } #addKeyCompetitors ul li span { float: left; width: 175px; padding-left: 10px; } /* Sub View: addLexusVehicle */ #addLexusVehicle dl { width: 240px; } #addLexusVehicle dl dd { width: 190px; } #addLexusVehicle dl dd select { width: 190px; } #addLexusVehicle .btn { float: right; margin-top: 12px; } /* Sub View: addOtherCompetitors */ #addOtherCompetitors dl { width: 240px; } #addOtherCompetitors dl dd { width: 190px; } #addOtherCompetitors dl dd select { width: 190px; } #addOtherCompetitors .btn { float: right; margin-top: 12px; } #addOtherCompetitors dl dd select.select_medium { width: 145px; } #addOtherCompetitors dl dd select.select_short { width: 100px; } /* View: overlayStartOver */ #overlayStartOver { padding-bottom: 10px; } #overlayStartOver .overlay_close { } #overlayStartOver h4 { float: left; margin: 30px 0 0 30px; } #overlayStartOver p { float: left; clear: left; margin: 10px 10px 20px 30px; width: 355px; } .ie6 #overlayStartOver p { width: 360px; } .ie6 #overlayStartOver h4, .ie6 #overlayStartOver p { display: inline; } #overlayStartOver .start_over_confirm { float: left; clear: both; margin: 0 0 0 334px; } /* Error Modal */ #overlayError { padding-bottom: 20px; } #overlayError p { float: left; clear: left; padding: 20px 30px 0 30px; width: 400px; } #overlayError p strong { color: #999; font-weight: normal; } #overlayError p.error { display: none; } #overlayError h4 { float: left; margin: 0 30px 0 30px; color: #a44747; width: 400px; } .ie6 #overlayError h4 { margin: 0 15px 0 15px; } #overlayError .btn { margin: 20px 0 0 30px; } #overlayError p.or_return { float: left; clear: none; width: 220px; padding: 0; margin: 20px 0 0 5px; } /********************************************************** * "LOADING" *********************************************************/ /* ENTIRE IFRAME LOADING */ #wrapper { position: relative; height: 500px; width: 100%; } #wrapperLoading { display: none; } #wrapperLoading.loading { display: block; width: 100%; height: 549px; position: absolute; top: 0; left: 0; } #wrapperLoading.loading .wrapper_loading_bg { display: block; width: 100%; height: 549px; position: absolute; top: 0; left: 0; background: #4d5a68; opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); } #wrapperLoading.loading .wrapper_loading_alert, /* "LOADING" */ #wrapperLoading.loading .wrapper_loading_bar { /* animated bars */ display: block; position: absolute; top: 230px; left: 500px; } #wrapperLoading.loading .wrapper_loading_bar { top: 250px; left: 517px; } /* RESULTS TABLE - TABLE "LOADING" OVERLAY */ .table_loading_bg, .table_loading_alert, .table_loading_bar { display: none; } .table_loading .table_loading_bg { /*Gif's should be anit-aliased against #8D959E */ display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #4d5a68; opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); } .table_loading .table_loading_alert, /* "LOADING" */ .table_loading .table_loading_bar { /* animated bars */ display: block; position: absolute; top: 70px; left: 310px; } .table_loading .table_loading_bar { top: 90px; left: 326px; } /********************************************************** * ELEMENT GROUPINGS *********************************************************/ /********************************************************** * ELEMENT GROUPINGS *********************************************************/ /* Elements recieving the clearfix */ body:after, .selected_header:after, .results_header:after, .clearfix:after, .overlay:after, .overlay_modelselect:after, #select_vehicle_subnav:after, #overlaySubWrapper:after, .btn_close:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Elements with image-replaced text */ h2, h3, #polk, .btn, .ov_heading p, #viewSelectComparisonType div h4, #viewSelectComparisonType div p, a.demo_lnk, .ov_models h4, .ov_models p.ov_models_directions, .ov_models_nav a { text-indent: -9999px; overflow: hidden; font-size: 10px; } /********************************************************** * SCROLLER *********************************************************/ .scroller { position: absolute; top: 0; right: 0; width: 16px; background: url(/images/comparator/layout/scroll_bg.png) repeat-y; height: 100%; } .scroller_handle { height: 16px; width: 16px; top: 17px; background: url(/images/comparator/layout/scroll_handle_bg.png) repeat-y; cursor: pointer; position: absolute; } .scroller_handle_top { position: absolute; top: 0; width: 16px; height: 1px; background: url(/images/comparator/layout/scroll_handle_tp.png) no-repeat; } .scroller_handle_bottom { position: absolute; bottom: 0; width: 16px; height: 1px; background: url(/images/comparator/layout/scroll_handle_bt.png) no-repeat; } .scroller_top { position: absolute; top: 0; right: 0; height: 16px; width: 16px; cursor: pointer; background: url(/images/comparator/layout/scroll_top.png) no-repeat; } .scroller_bottom { position: absolute; bottom: 0; right: 0; height: 16px; width: 16px; cursor: pointer; background: url(/images/comparator/layout/scroll_bottom.png) no-repeat; }