/* MOVED TO FEATUREZONE.CSS */

/* ======================================================== *
 * THREE-BLOCK LAYOUT (FULL)
 * ======================================================== */
.spg-block-container {
    border:1px solid #CCC;
    margin-bottom:10px;
    float:left;
    width:100%;
    /*background: #fff url(//a248.e.akamai.net/pix.crutchfield.com/v3.0/help/grey-fade-to-white.gif) repeat-x 0px 34px ;*/
 }
.spg-block-container:after {
	content:"."; 
	display:block; 
	font-size:0; 
	clear:both; 
	visibility:hidden; }

.spg-block-container-three {
	border-top:1px solid #ccc;
	padding-top:0px;
	padding-bottom:10px; 
	background:url(//a248.e.akamai.net/pix.crutchfield.com/v3.0/backgrounds/bg-spg-block-container.gif) repeat-y top center;
	float:left;
	width:100%;
	clear:left; }

.spg-block-container-full {
	border-top:1px solid #ccc;
	padding-top:10px;
	float:left;
	clear:left;
	width:100%;	}
.spg-over {
  background:#f7f7f7;}
.spg-block-container-full .wrap {
	margin-right:5px;	}

.spg-block1 { /* Parent Wrapper for inside boxes */
 	margin: 0px;
 	display: inline; /* IE Hack */
 	width: 210px;
 	float: left;
 	text-align: center; }
	* html .spg-block1 {height:90px} /* IE Min-Height Hack */
.spg-block2 { /* Parent Wrapper for inside boxes */
 	margin: 0px;
 	display: inline; /* IE Hack */
 	width: 215px;
 	float: left;
 	text-align: center; }
	* html .spg-block2 {height:90px; margin-left:-2px;} /* IE Min-Height Hack */
.spg-block3 { /* Parent Wrapper for inside boxes */
 	margin: 0 0 0 4px;
 	display: inline; /* IE Hack */
 	width: 210px;
 	float: left;
 	text-align: center; }
	* html .spg-block3 {height:90px} /* IE Min-Height Hack */
	
.spg-block4 { /* Parent Wrapper for inside boxes */
 	margin: 0px;
 	display: inline; /* IE Hack */
 	width: 210px;
 	float: left;
 	text-align: center; }
	* html .spg-block4 {height:90px} /* IE Min-Height Hack */
.spg-block5 { /* Parent Wrapper for inside boxes */
 	margin: 0px;
 	display: inline; /* IE Hack */
 	width: 215px;
 	float: left;
 	text-align: center; }
	* html .spg-block5 {height:90px; margin-left:-2px;} /* IE Min-Height Hack */
.spg-block6 { /* Parent Wrapper for inside boxes */
 	margin: 0 0 0 4px;
 	display: inline; /* IE Hack */
 	width: 210px;
 	float: left;
 	text-align: center; }
	* html .spg-block6 {height:90px} /* IE Min-Height Hack */
	
/* ======================================================== *
 * PRODUCT BLOCK STYLES
 * ======================================================== */
.spg-group-image img {
	display:block;
	margin:0 auto;}	
.spg-group-name {    
    display:table;
    height:35px;
    width:190px;
    margin:6px 0 15px 0;
    padding:0;
    position:relative;
    vertical-align: middle;
    font-weight:bold;
    text-align:left; }
    * html .spg-group-name { width:100%;}
.spg-group-name h3 {
	background: transparent;
	width:auto;
	position:relative;
	border:none;
	margin:0;
	padding:0; }
	* html .spg-group-name h3 { display:block;}
.spg-group-name h3 a {
  font-weight:bold;}
.spg-group-desc h4 {
	margin:0;
	padding:0;
	font-weight:normal;
	text-align:left; }
a.spg-group-learn {
	background:#E6E6D5;
	border:1px solid #CCC;
	padding:3px 7px;
	font-weight:bold;
	text-decoration:none;
	display:block;}
a.spg-group-learn:hover {
	background:#F8F8F3; }
	
.spg-group-fit {
	padding:0;
	font-weight:normal;
	margin-top:6px;	}
.spg-group-fit a {
	background:url(//a248.e.akamai.net/pix.crutchfield.com/v3.0/icons/cross-small.gif) no-repeat left center;
	padding-left:16px; 
	color:#C00;}

dl.spg-additional {
	width: 100%;
	margin: 0;
	clear:left;}
	dl.spg-additional dt a.spg-img img { }		
			
dl.spg-additional dt { 	
	float: left;
	padding:0 12px 8px 0;
	width:100px;
	height:90px; }		
	dl.spg-additional dt a img {}
	dl.spg-additional dt a:hover img {}			
dl.spg-additional dd {
	margin: 0;
	padding: 0;
	float:left;
	display:block;
	text-align:left;
	width:507px; }
dl.spg-additional dd.title {
	margin:0;
	padding:0; }
dl.spg-additional dd.title a {
	font-weight: bold;
	font-size:14px;
	padding-left:10px;
	line-height:28px; }
dl.spg-additional dd.copy {
	font-weight:normal;
	width:490px;
	padding-left:10px; }
dl.spg-additional dd.fit {
	width:475px;	
	padding:2px 0 4px 14px;
	font-weight:normal;
	margin-left: 10px;
	color:#C00;
	background:url(//a248.e.akamai.net/pix.crutchfield.com/v3.0/icons/cross-small.gif) no-repeat left center;}
    
dl.spg-additional dd.fit a {
	background:url(//a248.e.akamai.net/pix.crutchfield.com/v3.0/icons/cross-small.gif) no-repeat left center;
	padding-left:16px; 
	color:#C00;}


/* ======================================================== *
 * OUTLET STYLES
 * ======================================================== */
 
body#outlet .productList-desc .condition-description {
background-color:#FFFF97;
padding:2px 5px;
}



/* Rotating lead for Comuputer Audio Page */

/* ---------------------------------------------------------------------- 
	Wrap the entire lead in a containing div with position set to relative in order to absolutely position secondary lead items
	Secondary lead items are absolutely positioned on top of the main lead image (lead image is designed to accomodate this)
 ---------------------------------------------------------------------- */
	#lead-container {width:640px; height:235px; position:relative; margin:0 auto; background:#ccc;}
	#lead-container a img {border:none;}


/* ---------------------------------------------------------------------- 
	In the name of Progressive Enhancement, this is the default style for 4 "tabs" that will be seen by users with Javascript turned off.
	Notice that the width/height match the plugin defaults.
 ---------------------------------------------------------------------- */
	#preFeature{width:640px; height:235px; overflow:hidden;}
	#preFeature *{padding:0px; margin:0px; border:none;}
	#preFeature div{width:600px; height:235px;}
	#preFeature div.clear{float:none; clear:both; width:auto; border:none;}
	#preFeature div h3{font-size:12px; padding: 0px;  font-weight:normal; background:#ccc; color: #000;}
	#preFeature div p{font-size:11px; padding: 0px;}
	#preFeature div img{width:100%; display:block;}
	#preFeature div a:link{font-size:1em; color:#00ccff; text-decoration:none;}
	#preFeature div a:visited{color:#00ccff; text-decoration:none;}
	#preFeature div a:hover{background:#333333;}

/* ---------------------------------------------------------------------- 
	The default output id is "siteFeature". If you changed this in the $.makeFeature() call you'll need to update the CSS below.
 ---------------------------------------------------------------------- */	
	#siteFeature{position:relative; overflow:hidden; font-family:Arial, Helvetica, sans-serif; border-left:1px solid #ccc;}
	#siteFeature *{padding:0px; margin:0px; border:none;}
	
	#siteFeature #imgBgContainer{position:absolute;}
		#siteFeature.left #imgBgContainer{right:0px;}
		#siteFeature.right #imgBgContainer{left:0px;}
			#siteFeature #imgBgContainer div{position:absolute;}
			
	#siteFeature #txtBoxContainer{position:absolute; height:100%; width:100%; color:#fff; font-size:12px; line-height:16px;}
			#siteFeature.left #txtBoxContainer{right:0px;}
			#siteFeature.right #txtBoxContainer{left:0px;}
		#siteFeature #txtBoxContainer div{position:absolute; overflow:hidden;}
		#siteFeature #txtBoxContainer div span{display:block; width:100%; height:100%; position:absolute; background:#000;}

/* ---------------------------------------------------------------------- 
	The declarations below style the text in the tabs. If you have more/less than the default 4 tabs, you'll likely need to tweak the padding.
	Be aware of the IE6,7 specific padding on the h4.
 ---------------------------------------------------------------------- */
	#siteFeature #tabContainer{background:#f0f0f0; position:absolute; border-top:1px solid #ccc;}
		#siteFeature.left #tabContainer{left:0px;}
		#siteFeature.right #tabContainer{right:0px; border-right:1px solid #ccc;}
			#siteFeature #tabContainer a:link{display:block; width:100%; background:#f0f0f0; border-bottom:1px solid #ccc; font-size:11px; text-decoration:none; position:relative;}
			#siteFeature #tabContainer a:visited{display:block; width:100%; background:#f0f0f0; border-bottom:1px solid #ccc; font-size:11px; text-decoration:none; position:relative;}
			#siteFeature #tabContainer a:hover{background:#ccc;}
			#siteFeature #tabContainer a:active{outline:none;}
			#siteFeature #tabContainer a:focus{outline:none;}
			#siteFeature #tabContainer a.selected{background:transparent;}
			
			#siteFeature #tabContainer a h4{ color:#333; position:relative; font-size:13px; padding:5px 0px 0px 10px; /*IE6|7*/ *padding:3px 0px 0px 10px;}
			#siteFeature #tabContainer a p{ color:#333; position:relative; font-size:12px; padding:0px 0px 10px 10px;/*IE6|7*/ *padding:0px 0px 0px 10px;}
			
			#siteFeature #tabContainer a.selected h4 {color:#fff;}
			#siteFeature #tabContainer a.selected p {color:#fff;}
			
			#siteFeature #txtBoxContainer div h3 {display:none;}

			#siteFeature #tabContainer a span{display:none;}
			#siteFeature #tabContainer a.selected span{overflow:hidden; display:block; position:absolute; top:0px;}
			#siteFeature #tabContainer a.selected span span{background:#c4d6f0; height:100%;}
				#siteFeature.left #tabContainer a.selected span{left:0px; background: url(//a248.e.akamai.net/pix.crutchfield.com/multi-lead/arrow-left-styled-main.png) no-repeat 0 0; color:#fff;}
				#siteFeature.right #tabContainer a.selected span{right:0px;}
			#siteFeature #tabContainer a span img{height:100%; position:absolute; top:0px;}
				#siteFeature.left #tabContainer a span img{left:0px;}
				#siteFeature.right #tabContainer a span img{left:0px;}