/*
 *
 * Showroom v4 - showroom-style1.css
 * Copyright (C) 2008 Dealer.com
 *
 * Created:  November 2008, ddcrandallm
 *
 */

/* =layout ------------------------- */
.back{ display: block; margin: 0 0 5px 0; padding: 0 0 0 10px; }
#showroom .group2a h3{ height: 45px; margin: 0; padding: 5px 10px; }
#showroom .widget{ clear: both; margin: 0 0 20px 0; }
#showroom .widgetWrap{ clear: both; overflow: hidden; }
#showroom a,
#showroom object{ outline: 0; }
#showroom object{ display: block; margin: 0 auto; }
.group2a .unit{ width: 66%; margin: 0 1% 0 0; }
.group2a .last{ width: 32%; margin: 0; }
	#primaryContent .group2a .first{ width: 60%; padding: 5px 5px 0 5px; }
	#primaryContent .group2a .last{ width: 28%; padding: 20px 20px 0 5px; }
#primaryContent{ overflow: visible; }
#secondaryContent{ overflow: hidden; }
#primaryContent .group2a,
#secondaryContent form{ min-height: 365px; margin-top: 0; margin-bottom: 20px; border: 1px solid; }
p.description{ margin: 0 0 20px 0; padding: 0 20px; }
/* =tabs */
.ui-tabs-hide{ display: none; }
.ui-tabs-nav-horizontal li{ float: left; }
	.ui-tabs-nav-horizontal li a,
	.ui-tabs-nav-horizontal li a span{ overflow: hidden; display: block; height: 32px; padding: 0 25px 0 0; line-height: 32px; }
	.ui-tabs-nav-horizontal li a{ margin: 0 5px 0 0; padding: 0 0 0 25px; }
.ui-tabs-panel-horizontal{ padding: 30px 0; }
.ui-tabs-nav-vertical{ float: left; width: 176px; }
		.ui-tabs-nav-vertical li a{ display: block; }
			.ui-tabs-nav-vertical li a span{ display: block; padding: 10px 20px 10px 10px; border-top: 1px solid; }
	.ui-tabs-nav-vertical .ui-tabs-first a{ border-top: none; }
.ui-tabs-panel-vertical{ margin: 0 0 0 185px; padding: 20px 0; }
/* =jcarousel */
.jcarousel-container{ overflow: hidden; position: relative; }
	.jcarousel-clip{ z-index: 2; position: relative; overflow: hidden; width: 346px; margin: 0 0 0 35px; padding: 0; }
		.jcarousel-list{ overflow: hidden; position: relative; z-index: 1; top: 0; left: 0; height: 77px; margin: 0; padding: 0; }
		.jcarousel-clip .jcarousel-list{ width: 10000px !important; }
			.jcarousel-list li{ float: left; overflow: hidden; width: 110px; height: 75px; margin: 0 5px 0 0; border: 1px solid; }
				.jcarousel-list li a{ overflow: hidden; display: block; height: 100%; }
				.jcarousel-list li img{ display: block; height: 100%; margin: 0 auto; }
	.jcarousel-prev{ cursor: pointer; position: absolute; top: 25px; left: 15px; z-index: 3; display: none; width: 13px; height: 28px; }
	.jcarousel-next{ cursor: pointer; position: absolute; top: 25px; left: 386px; z-index: 3; display: none; width: 13px; height: 28px; }
	.jcarousel-prev-disabled,
	.jcarousel-next-disabled{ cursor: default; }
/* =vehicleImage */
.acura #showroom div #vehicleImage,
.honda #showroom div #vehicleImage{ height: 257px; }
#showroom div #vehicleImage{ position:relative;overflow: hidden; height: 257px; margin: 0; }
	#showroom div #vehicleImage img{ display: block; margin: 0 auto; }
    #showroom div #vehicleImage div.disclaimer {margin-right:32px; text-align:right; text-transform:capitalize; font-size:85%}
/* =price */
#primaryContent .price{ margin: 0 0 25px 0; padding: 10px 0; border: 1px solid; }
#primaryContent .price *{ display: block; }
/* =mpg */
.mpg{ clear: both; margin: 0 0 10px 0; }
	.mpg dt{ display: none; }
	.mpg dd{ margin: 0 0 .55em 0; }
		.mpg dd strong{ display: block; }
		.mpg dd em{ display: block; }
	.mpg .cityMpg{ float: left; width: 42%; }
		.mpg .cityMpg em{ margin: 0 0 0 5px; }
	.mpg .hwyMpg{ float: right; width: 42%; }
		.mpg .hwyMpg em{ margin: 0 0 0 20px; }
	.mpgDisclaimer{ clear: both; margin-bottom: 1.2em; }
/* =videoButton */
#videoButton{ display: block; padding: 0 10px 0 0; }
	#videoButton span{ display: block; height: 41px; padding: 0 0 0 75px; }
	#videoButton.videoLoading{ cursor: default; }
/* swatches */
.acura .swatches,
.honda .swatches{ margin: 0 10px 10px 10px; }
.swatches{ margin: 10px 10px 20px 10px; }
	.swatches .colorTitle{ float: none; }
	.swatches .colorTitleLast{ float: none; clear: both; height: 2.5em; margin:3px; }
	.swatches li{ float: left; }
		.swatches li a{ display: block; width: 36px; height: 30px; text-indent: -9999px; }
		.swatches li .noImage{ cursor: default; }
/* overview */
#overview .group2a .last{ overflow: hidden; }
/* models */
#modelsTab{ padding: 30px 20px; }
	#trimsTableHeadings{ visibility: hidden; float: left; width: 19%; }
	#modelsWrapper{ overflow-x: scroll; float: left; width: 78%; }
	#modelsTab .submit{ position: relative; float: left; }
		#modelsTab .submit a{ float: left; }
#modelsTab img{ clear: both; display: block; height: 45px; margin: 10px 0 0 0; }
#modelsTab span.replaceImage{ clear: both; display: block; height: 45px; margin: 10px 0 0 0; }
#modelsTab span.hidden{ display: none; }
#modelsTab table{ table-layout: fixed; }
#modelsTab #modelsWrapper table{ width: 100%; }
	#modelsTab th,
	#modelsTab td{ padding: 8px 0 8px 15px; }
	#modelsTab thead th{ vertical-align: bottom; width: 155px; }
		#modelsTab thead th strong{ position: relative; float: left; display: block; width: 90%; height: 45px; }
/* =media */
.media h4{ float: left;  display: inline; margin: 10px 0; }
.media h5{ float: right; display: inline; margin: 10px 0; }
/* spins */
#spins .jcarousel-prev,
#spins .jcarousel-next{ left: -9999px; right: auto; }
.spinLink a{ display: block; width: 110px; height: 75px; }
/* specs */
.specs h4{ float: left;  display: inline; }
.specs h5{ float: right; display: inline; margin-right: 5%; }
.specs .widgetWrap{ padding-bottom: 20px; }
.specs .ui-tabs-panel-vertical li{ float: left; width: 39%; padding: 0 0 10px 10%; }
/* =links */
.links{ width: 284px; }
	.links .widgetImageWrap{ overflow: hidden; border-left: 1px solid; border-right: 1px solid; }
	.links .widgetWrap{ border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; }
		.links li a{ display: block; padding-left: 20px; }
/* =review */
.review-panel h4,
.review-panel div{ float: none; display: block; padding: 0 20px; }
.review-panel dt{ float: left; width: 150px; }
/* =viewer */
#viewerWrapper{ position: absolute; top: 0; left: -9999px; }
	#viewer{ overflow: hidden; padding: 40px 0 0 40px; }
		#viewer h2{ margin: 0 0 20px 0; }
		#viewer .viewable{ overflow: hidden; position: absolute; right: 100px; width: 385px; height: 290px; }
			#viewer .viewable img{ display: block; margin: 0 auto; }
			#viewer .photos img{ width: 100%; }
		#viewer .ui-tabs-nav{ float: left; width: 152px; }
			#viewer .ui-tabs-nav li{ margin: 0 0 5px 0; }
			#viewer .ui-tabs-nav a{ overflow: hidden; display: block; height: 24px; }
		#viewer .jcarousel-container,
		#viewer .jcarousel-exclude,
		#viewer .swatches{ position: absolute; top: auto; left: 40px; bottom: 30px; width: 675px; }
		#viewer .swatches{ bottom: 50px; }
			#viewer .jcarousel-clip{ width: 635px; margin: 0 0 0 25px; }
				#viewer .jcarousel-list li{ margin-right: 15px; }
				#viewer .jcarousel-prev{ left: 0; }
				#viewer .jcarousel-prev, #viewer.jcarousel-next,
				#viewer .prev, #viewer .next{ position: absolute; display: block; width: 17px; height: 28px; }
				#viewer .jcarousel-next{ left: auto; right: 5px; }
				#viewer .prev{ top: 200px; right: 510px; }
				#viewer .next{ top: 200px; right: 60px; }
		#viewer #viewerVid p{ position: absolute; top: 355px; left: 275px; }
		#viewer .videoLink img{ display: block; width: 100%; padding: 5px 0 0 0; }
	#viewer #helpSpins{ position: absolute; top: 345px; left: 260px; }
	#viewer #helpSpins span{ padding: 5px 10px 5px 50px; }
.mediaGallery #TB_window{ border: 0; }
	body.mediaGallery  #TB_window div#TB_title{ overflow: visible; height: 0; padding: 0; }
		.mediaGallery #TB_ajaxWindowTitle{ display: none; }
		.mediaGallery div#TB_closeAjaxWindow{ position: absolute; top: -5px; right: 15px; z-index: 500; float: none; width: 30px; height: 30px; }
			.mediaGallery div#TB_closeAjaxWindow a{ position: relative; z-index: 501; display: block; width: 30px; height: 30px; }
	.mediaGallery #TB_ajaxContent{ position: relative; overflow: hidden; padding: 0; }
/* =form */
#showroom form p{ margin: 0; padding: 20px; }
#showroom fieldset{ margin: 0; padding: 20px 25px; border: 0; }
#showroom iframe{ display: none; }
label{ display: block; margin: 0 0 6px 0; }
	label span, label br{ display: none; }
	label.error{ display: block; margin: 0; }
	label.valid{ display: block; margin: 0; }
input{ padding: 3px; border: 1px solid; }
select{ padding: 2px; border: 1px solid; }
.contactEmail input, .contactPhone input{ margin-left: 34px; }
.contactEmail label, .contactPhone label{ margin-left: 34px; }
#preferredContactMethod{ position: relative; clear: both; }
#emailMethod{ position: absolute; top: 27px; margin-left: 10px; }
#phoneMethod{ position: absolute; top: 59px; margin-left: 10px; }
#locationField{ clear: both; padding-bottom: 10px; }
/* =filter tools */
#filterTools h4{ margin-top: 0; }
#filterTools .widgetWrap{ padding: 20px; border: 1px solid; }
	#filterTools .widgetWrap div{ position: relative; overflow: hidden; width: 100%; margin: 0; }
		#filterTools .widgetWrap .sliderContainer{ padding: 0 0 25px 0; }
	#filterTools #sort{ margin: 0 0 15px 0; padding: 0 0 15px 0; border-bottom: 1px dotted; }
		#filterTools .filterSlider{ width: 93%; margin-top: 10px; }
		#filterTools .val{ position: absolute; top: 0; right: 0; }
	#showroom #filterTools select{ width: 98%; margin: 0 0 10px 0; }
/* =model selector */
#modelSelector{ position: relative; top: -50px; width: 100%; }
	#modelSelector *{ position: relative; left: -3px; }
/* =makes logo selector */
#makes{ margin: 10px 10px 60px 10px; }
	#makes li{ margin: 0 0 0 10px; }
	#makes li.selected{ border-bottom: 4px solid; }

/* clearing */
.group2a:after,
.group2a .unit:after,
.widgetWrap:after,
.ui-tabs-nav-horizontal:after,
.ui-tabs-panel:after,
.mpg:after,
.swatches:after,
.media:after,
.specs:after,
#makes:after{ content: "."; clear: both; display: block; visibility: hidden; overflow: hidden; height: 0; }

/* =type ------------------------- */
.group2a h3{ font-weight: normal; font-size: 152%; line-height: 45px; }
	.group2a .first h3{ font-weight: bold; font-size: 200%; }
.group2a h5{ font-weight: normal; font-style: italic; }
.back{ text-decoration: none; }
	.back:hover{ text-decoration: underline; }
/* =tabs */
.ui-tabs-nav li a{ font-weight: normal; text-decoration: none; }
.ui-tabs-nav li.ui-tabs-selected a{ font-weight: bold; }
/* =price */
#primaryContent .priceRange{ font-size: 85%; }
	#primaryContent .price span{ font-weight: normal; line-height: 1; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
	#primaryContent .price em{ font-style: normal; text-align: center; }
		#primaryContent .price em span{ font-size: 100%; }
/* =mpg */
.mpg dd strong{ font-weight: normal; font-size: 92%; text-align: center; text-transform: uppercase; }
.mpg dd em{ font-weight: bold; font-size: 231%; font-style: normal; }
.mpgDisclaimer{ font-size: 85%; text-align: center; }
/* =videoButton */
#videoButton{ font-size: 122%; text-decoration: none; }
/* =spins */
#spins .jcarousel-list{ padding-left: 40px; }
.spinLink a{ line-height: 25px; text-align: center; text-transform: capitalize; }
/* =models */
#modelsTab thead th span{ text-transform: uppercase; }
/* =review */
.review-panel dt{ font-weight: bold; }
/* =viewer */
#viewer h2{ font-size: 182%; }
	#viewer .ui-tabs-nav a{ font-weight: bold; line-height: 24px; text-align: center; text-transform: uppercase; }
	#viewer .prev, #viewer .next{ text-indent: -9999px; }
	#viewer .swatches .colorName{ font-weight: bold; }
	#viewer .spinLink a{ text-decoration: none; }
		#viewer .spinLink a:hover{ text-decoration: underline; }
	.mediaGallery div#TB_closeAjaxWindow{ text-align: left; }
	.mediaGallery div#TB_closeAjaxWindow a{ text-indent: -9999px; }
	#viewer #helpSpins{ line-height: 22px; }
/* =form */
input{ width: 90%; }
	.contactEmail input, .contactPhone input{ width: 78%; }
	input.radio{ width: auto; }
label.error{ font-size: 85%; }
input.error{ font-weight: bold; }
select.error{ font-weight: bold; }
#stateField{ float: left; width: 110px; margin: 0 10px 0 0; }
#zipField{ float: left; width: 90px; }
	.selectField select{ width: 100%; }
#contactAddressPostalCode{ width: 80%; }
/* =filter tools */
#filterTools{ font-weight: bold; }
	#filterTools h4{ font-size: 92%; text-transform: uppercase; }
	#filterTools select{ text-transform: capitalize; }
	.frCA #filterTools select{ text-transform: none; }
		.frCA #filterTools select option:first-letter {text-transform: capitalize;}
/* =videoButton */
#videoButton span{ line-height: 41px; font-size: 85%; font-weight: bold; }


/* =ie6 ------------------------- */
* html #showroom .group2a{ position: relative; }
* html #showroom #primaryContent{ overflow-y: hidden; position: relative; z-index: 2; }
* html #showroom #secondaryContent{ position: absolute; top: 0; right: 0; z-index: 1; }
* html #primaryContent .group2a,
* html #secondaryContent form{ height: 365px; }
/* =tabs */
* html .ui-tabs-nav-horizontal li{ float: left; }
* html .ui-tabs-nav-horizontal li a,
* html .ui-tabs-nav-horizontal li a span{ float: none; display: inline-block; }
* html .ui-tabs-nav-vertical li a{ display: inline-block; width: 100%; }
/* =jcarousel */
* html .jcarousel-prev{ left: -18px; }
/* =swatches */
* html .swatches li a{ cursor: pointer; }
* html .swatches li .noHand{ cursor: default; }
/* =media */
* html .media .jcarousel-next{ left: 351px; }
/* =models */
* html #modelsWrapper,
* html #modelsTab td{ position: relative; }
/* =viewer */
* html div#TB_closeAjaxWindow a{ cursor: pointer; }
* html #viewer .swatches li a{ cursor: pointer; }
* html #viewer .swatches li .noHand{ cursor: default; }
* html #viewer #viewerColorImage{ position: relative; left: 75px; }
/* =form */
* html #stateField select{ width: 110px; }
* html #zipField{ width: 90px; margin-top: -2px; }
/* =filter tools */
* html #filterTools .widgetWrap{ overflow: hidden; width: auto; }
/* =videoButton */
#videoButton span{ letter-spacing: -0.055em; }
/* =clearing */
* html .group2a, * html .group2a .unit, * html .widgetWrap, * html .ui-tabs-nav, * html .ui-tabs-panel, * html .mpg, * html .swatches, * html .media, * html .specs, * html #makes{ height: 1%; }


/* =ie7 ------------------------- */
/* =tabs */
*+html .ui-tabs-nav-vertical li a{ position: relative; display: inline-block; width: 100%; }
/* =models */
*+html #modelsWrapper,
*+html #modelsTab td{ position: relative; }
/* =form */
*+html #zipField{ margin-top: -2px; }
/* =clearing */
*+html .ui-tabs-nav-horizontal, *+html .ui-tabs-panel, *+html .mpg, *+html .media, *+html .specs, *+html #makes{ height: 1%; }
