h1 {
	font-size: 21px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 12px;
	color: #330099;
	line-height: 1.25em;
}
.InnerHeader {
color:#333333;
font-family: Arial, Helvetica, sans-serif;
	font-size: 140%;
	line-height: 1.25em;
	margin: 10px 0 5px 0;
	clear: left;

}

.clear {
    clear: both;
    display: block;
    height: 1px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.photo{
border: 1px solid #666666;

}

.photoleft{
border: 1px solid #666666;
margin: 6px 16px 4px 10px;

}
.photocap{
	float:right;
	clear: right;
	border-bottom: 1px solid #999999;
	line-height:150%;
	margin-left:30px;
	padding-bottom:5px;
	padding-left:15px;
	font-family:Verdana,Arial,sans-serif;
	font-size:90%;
	width:220px;
	text-align:left;
	}

	.photocapleft{
	float:left;
	clear: left;
	border-bottom: 1px solid #999999;
	line-height:150%;
	margin-right:30px;
	padding-bottom:3px;
	padding-left:10px;
	font-family:Verdana,Arial,sans-serif;
	font-size:90%;
	width:230px;
	text-align:left;
	}
/* Establish basic Section Page structure and layout */
#sectionPage div#wrapper {
    margin: 10px auto;
    padding: 0;
    width: 930px;
	}

#sectionPage div#content {
	width: 600px;
	padding: 0 0 0 0;
	margin: 0;
	float: left;
}

#sectionPage div#rightRail {
  width: 320px;
	padding: 0;
	margin: 0;
	float: right;
}


/* Custom styles for the Section blurb and image */

div.summary {
	margin-bottom: 20px;
	}

#content img.icon {
	float:left;
	/* margin: 6px 10px 4px 0; */
	}

#content .summary p.blurb {
	font-size: 120%;
	line-height: 140%;
	}


.indexHeader h3 {
	margin: 0 0 0 0;
	}

/* Custom styles for the Subject names and links in the lower index */
.indexSection h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	font-weight: bold;
	color: #330099;
	padding: 5px 0 5px 5px;
	margin-bottom: 10px;
	background-color: #ECEAF7;
	border-bottom: 1px solid #330099;
	clear: both;
	}




.indexSection h4, .indexSubject h4 {
	font-size: 100%;
	margin: 0 0 0 0;
	}

.indexSection h4 a:link, .indexSubject h4 a:link {
	color: #333333;
	text-decoration: none;
	}

.indexSection h4 a:visited, .indexSubject h4 a:visited{
	color: #333333;
	text-decoration: none;
	}

.indexSection h4 a:hover, .indexSubject h4 a:hover {
	color: #333333;
	text-decoration: underline;
	}

.indexSection h4 a:active, .indexSubject h4 a:active {
	color: #333333;
	text-decoration: none;
	}




/* Set size for the Story level blurbs in the lower index */
.indexSection li p.blurb, .indexSubject li p.blurb {
	font-size: 100%;
	line-height: 140%;
	margin: 0 0 0 0;
	}


/* Index list rules */
.index ul {
	list-style: none;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	}

.indexSection ul {
	margin-bottom: 20px;
	}

.indexSection li, .indexSubject li {
	list-style: none;
	background: none;
	border-bottom: 1px solid #cccccc;
	padding: 0 0 10px 5px;
	margin: 10px 0 0 0;
	}

.index li.firstItem {
	margin: 0 0 0 0;
	}

.index li.lastItem {
	border: none;
	}

div#wrapper {
  margin-top: 10px;
}


/* =================================== Subject Page Formatting ================================= */
/* Left-rail stuff */

/* This sets the background color for the lefnav column */
#storyPage div#wrapper {
	background: url(/advice/shopping/cpo/images/cpoNavBG.gif) repeat-y;
	}



/* Change the background color of the leftNav top tab or insert a custom graphic here */
/* To make the entire graphic hot, the height of the element should be controlled using the anchor rule below */
.leftnav .navHdr {
	background-color: #999379;
	}

.leftnav .navHdr h3 {
	background: url(/images/cornerUpperRight.gif) top right no-repeat;
	margin: 0 0 0 0;
	}

.leftnav h3 a {
	display: block;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	padding: 5px 0 5px 10px;
	background: url(/images/cornerUpperLeft.gif) top left no-repeat;
	}

.leftnav h3 a:link, .leftnav h3 a:visited, .leftnav h3 a:hover {
	color: #ffffff;
	}

.leftnav h3 a:hover {
	text-decoration: underline;
	}

.leftnav ul{
	border-top: 1px solid #C8BBA8;
	border-bottom: 1px solid #ffffff;
	}

/* This rule fixes a problem in editorial.css and the editorial template where the ul ul is marked up differently */
.leftnav ul li ul {
	border-top: none;
	padding: 0 0 0 0;
	margin-bottom: 5px;
	}


/* Related links styles */
div.moreInfo h6 {
	margin: 0;
	padding: 0;
	font-size: 100%;
	}

div.moreInfo ul {
	padding: 0;
	margin: 0;
	}

#content div.moreInfo {
	border-width: 2px 0;
	border-color: #CCCCCC;
	border-style: dotted;
	font-size: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-bottom: 10px;
	padding-left: 5px;
	}




/* Custom styles for the Subject page index */
.storyContent .indexSubject {
	float: right;
	width: 250px;
	margin: 6px 0px 4px 10px;
}

.storyContent .indexSubject .indexHeader {
	background: url(/images/cornerUpperLeft.gif) top left no-repeat;
	}

.storyContent .indexSubject .indexHeader h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	font-weight: bold;
	padding: 25px 0 10px 10px;
	margin-bottom: 10px;
	background: url(/images/cornerUpperRight.gif) top right no-repeat;
	}

#content .indexSubject h4, #content .indexSubject p.blurb {
	font-size: 90%;
	}

.indexSubject ul  {
	padding: 0 10px 0 10px;
	}

.indexSubject li {
	border-bottom: none;
	padding-left: 0;
	}

.storyContent .indexSubject {
	background: url(/advice/images/section_buy_sub_index_back.gif) repeat-x;
	border-bottom: 1px solid #999379;
	background-color: #FFFFFF;
	}



.storyContent h5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 140%;
	line-height: 1.25em;
	margin: 10px 0 5px 0;
	clear: left;
	}



p.editorialText {
	margin-top: 0;
	margin-bottom: 20px;
	}

/* Top 10s table */

table.Infographic {
	margin-bottom: 20px;
	margin-right: 15px;
	}

.Infographic tbody td {
	vertical-align: top;
	padding: 5px 5px 5px 5px;
	border-bottom: 1px solid #cccccc;
	}

.Infographic thead th {
	border: none;
	}



.Infographic tfoot th, .chartFoot p {
	background-color: #FFFFFF;
	border: none;
	padding-left: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: normal;
	color: #999999;
	padding: 5px;
	}

.Infographic tfoot th p, .chartFoot p {
	margin: 0;
	}

.Infographic tr.subHead td{
	background-color: #ECEAF7;
	color: #7E5FBF;
	font-size: 90%;
	padding: 0 6px 3px 5px;
	}

/* NN 3/22/2005 */
/* Popular Colors, Most Stolen include styles */
#popColors tbody td, #mostStolen tbody td{
	border-bottom: 0;
	}
#popColors tr.subHead td, #mostStolen tr.subHead td{
	border-bottom: 1px solid #999999;
	}
#popColors tr.sectionHead td, #mostStolen tr.sectionHead td{
	border-bottom: 1px solid #cccccc;
	}
table#popColors, table#mostStolen {
	margin-bottom: 0;
	}
#popColors img#coloredCar{
	margin: 10px 0 10px 0;
	}
/* Aligns the text with the dropdown */
#mostStolen tr.sectionHead td #stateChoiceText{
	line-height: 1.5em;
	}


tbody td img.thumbnail {
	border: 1px solid #666666;
	vertical-align: top;
	display: block;
	float: left;
	margin-right: 5px;
	}

.Infographic tbody .colLabels td{
	background-color: #666666;
	color: #ffffff;
	font-size: 10px;
	padding: 3px 5px 3px 5px;
	vertical-align: bottom;
	border-width: 0px 1px 1px 0px;
	border-color: #CCCCCC #CCCCCC #727473 #727473;
	border-style: none solid none none;
	line-height: 1.25em;
	}

.Infographic tr.sectionHead td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	font-weight: bold;
	background-color: #eeeeee;
	}

p.reference{
	color: #666666;
	padding: 0 5px 10px 5px;
	}


/* Custom widths for story page charts */
/* These rules are specific to the individual tables and generally should not be re-purposed */

.topPicks .Infographic td.colLabel1{
	width: 95px;
	}
.topPicks .Infographic td.colLabel2{
	width: 170px;
	}
.topResidual .Infographic td.colLabel2{
	width: 300px;
	}
.topResidual .Infographic td.colLabel1{
	width: 60px;
	}

.topResidual .Infographic td.colLabel3{
	width: 5px;
	}

.topResidual .Infographic td.colLabel4{
	width:5px;
	}


	.overallResidual .Infographic td.colLabel2{
	width: 260px;
	}
.overallResidual .Infographic td.colLabel1{
	width: 5px;
	}

.overallResidual .Infographic td.colLabel3{
	width: 20px;
	}

.overallResidual .Infographic td.colLabel4{
	width:15px;
	}

.mostPop table.Infographic td.colLabel1{
	width: 170px;
	}

.mostPopUsed table.Infographic td.colLabel1 {
	width: 30px;
	}

.mostPopUsed table.Infographic td.colLabel3 {
	width: 30px;
	}

.mostPopNew table.Infographic td.colLabel2 {
	width: 280px;
	}
.mostPopNew table.Infographic td.colLabel3 {
	width: 125px;
	}

.individualNeeds .Infographic td.colLabel1 {
	width: 85px;
	}
.individualNeeds .Infographic td.colLabel2 {
	width: 100%;
	}

.ydRecommendations .Infographic td.colLabel2 {
	width: 65px;
	}
.ydRecommendations .Infographic td.colLabel4 {
	width: 70px;
	}

.fuelLifetime .Infographic td.colLabel2 {
	width: 40px;
	}

.amMade .Infographic td.colLabel1 {
	width: 5px;
	}

.amMade .Infographic td.colLabel2 {
	width: 160px;
	}

.amMade .Infographic td.colLabel3 {
	width: 160px;
	}

.amMade2 .Infographic td.colLabel1 {
	width: 5px;
	}

.amMade2 .Infographic td.colLabel2 {
	width: 180px;
	}

.amMade2 .Infographic td.colLabel3 {
	width: 130px;
	}

.amMade2 .Infographic td.colLabel4 {
	width: 10px;
	}

.navSystems table.Infographic td.colLabel1 {
	width: 50%;
	}

.navSystems table.Infographic td.colLabel2 {
	width: 50%;
	}




/* Custom for most stolen */
#statesMostStolen { float: right; width: 120px}

/* Format list items within the Infographic tables */
.Infographic tbody td ul.orangebullet{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 100%;
	}

.Infographic tbody td li{
	margin-left: 0;
	margin-top: 0;
	padding-top: 0;
	line-height: 140%;
	/*background: url(/images/bullet_square_black.gif) 0px .5em no-repeat;*/
	}



table.Infographic td.even {background-color: #eeeeee;}
table.Infographic tr.even {background-color: #eeeeee;}
div.next {
	font-size: 120%;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 20px;
	clear: both;
	}

/* Because the uls are not nested within editorialText they need a font-size to match the surrounding text */
.storyContent ul.blackbullet, .storyContent ul.orangebullet, .storyContent ol.numberedList {
	font-size: 120%;
	line-height: 19px;
	}

ol.numberedList {
	margin-left: 20px;
	padding-left: 10px;
	}

.storyContent .numberedList li {
	margin: 1px 0 0 0;
	padding: 0 0 2px 0;
	line-height: 140%;
	list-style-type: decimal;
	background: none;
	padding-bottom: 10px;
	}

ul.blackbullet {
	margin-top: 0;
	margin-bottom: 20px;
	padding-top: 0;
	padding-bottom: 0;
	margin-left: 20px;
	}

ul.blackbullet li {
	background: url(/images/bullet_square_black.gif) 0px 8px no-repeat;
	margin-top: 0;
	margin-bottom: 5px;
	padding-top: 0;
	line-height: 19px;
	}

/* Floated elements */
/* Set the float position and margin */

div.boxLeft150, div.boxLeft230, div.boxLeft270 {
	float: left;
	clear: none;
	margin: 6px 10px 4px 0px;
	}

div.boxRight150, div.boxRight230, div.boxRight270 {
	float: right;
	clear: none;
	margin: 6px 0px 4px 10px;
	}

div.boxLeft230, div.boxRight230 {
	width: 230px;
	}

div.boxLeft430, div.boxRight430 {
	width: 430px;
	margin: 6px 0px 4px 0px;
	}

div.boxLeft150, div.boxRight150 {
	width: 150px;
	}

div.boxLeft270, div.boxRight270 {
	width: 270px;
	}

/* The following overrides a fixed width of 150px from editorial.css */
#content div.pullQuote {
	width: auto;
	}

/* This rule overrides a rule from editorial.css that inserts padding in the .caption */
/* The font-size change is needed because of a nesting difference from editorial.css */
#content .storyContent p.caption {
	padding-left: 0;
	padding-bottom: 5px;
	line-height: 150%;
	border-bottom: 1px solid #999999;
	margin-left: 0;
	}

#content .pullQuote p {
	margin: 5px;
	padding: 0;
	}

#content .pullQuote p.caption {
	border-bottom: none;
	font-size: 100%;
	}


/* Position and style the byline on both the section index and the story pages */
div.byline, div.updateText {
	font-style: italic;
	line-height: 1.5em;
	clear: both;
	float: left;
	margin-bottom: 10px;
	margin-left: 5px;
    }

.storyContent div.byline {
    margin-bottom:0;
    }

div.byline, div.storyCredit {
	text-align:right;
	}

.storyContent div.top-byline {
    float:none;
    text-align:left;
	margin: -8px 0 12px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	font-style: italic;
	}

div.byline {
	font-size: 120%;
	}
div.updateText {
	font-size: 90%;
	}

/* Set the alignment for the story pages */
.storyContent div.byline, .storyContent div.updateText {
	float: right;
	}

/* =================================== Credits Page Formatting ================================= */
#sectionCredits {
	font-size: 70%;
	}

#sectionCredits div#wrapper {
    margin: 10px 0 0 0;
    padding: 0 0 0 10px;
    width: 930px;
	}

#sectionCredits div#content {
	width: 600px;
	padding: 0 0 0 0;
	margin: 0;
	float: left;
}

#sectionCredits h5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	line-height: 1.25em;
	margin: 10px 0 5px 0;
	clear: left;
	}

div#content {
	width: 600px;
}

/* =================================== CarTalk Styles =========================================*/
.ctMyself {
	width: 210px;
	height: 311px;
	float: right;
	clear: none;
	padding: 10px;
	margin: 6px 0px 4px 10px;
	background: url(/advice/Subjects/adv/images/ct_myself_background.gif) 0 0 no-repeat;
	}

.ctMyself .Infographic thead th{
	font-size: 140%;
	color: #333333;
	background-color: transparent;
	}
.ctMyself .Infographic tfoot {
	display: none;
	}
.ctMyself .Infographic img{
	border: none;
	}
.ctMyself .Infographic tr.subHead td {
	color: #333333;
	background-color: transparent;
	}
.ctMyself .Infographic tbody td {
	border: none;
	}


.ctMatrix .Infographic img{
	border: none;
	}

/* Because globalBeta.css sets the color for all anchors to #003399,
	we need to reset the color when we are including an anchor that is not a link */
/* This should probably be addressed in globalBeta.css and then the following rules removed */
.storyContent a {
	color: #333333;
	}

.storyContent a:link {
	color: #003399;
	}

#navigation {overflow: hidden}

/* =================================== Hurricane section =========================================*/
/* custom left rail header*/

.hrcn .leftnav .navHdr h3 {
	background: url(/images/hurricane_header.gif) top right no-repeat;
	margin: 0 0 0 0;
	height: 107px;
	}
/* added from globalBeta due to conflicts with advice section a: overrides - Scott Norris 02/02/2006 */
.BttnPill a:link, .BttnPill a:active, .BttnPill a:visited { color: #fff; text-decoration: none; }
.BttnPill a:hover { color: #fc0; cursor: pointer; text-decoration: none; }



/* =================================== Tailgating section =========================================*/
/* custom left rail header*/

/*
.tgate .leftnav .navHdr h3 {
	background: url(/advice/tailgating/images/tailgatingHeader.gif) top right no-repeat;
	margin: 0 0 0 0;
	height: 80px;
	}


.leftnav a:link, .leftnav a:visited { color: #4A4434; }
.tgate .leftnav ul li {
	border-bottom: 1px solid #BFD0A7;
	background-color: #CBE0B7;
}
*/
	/* This sets the background color for the lefnav column */
/*#storyPage div#wrapper.tgate {
	background: url(/advice/tailgating/images/tailgatingBG.gif) repeat-y;
	}

.tgate .leftnav ul li.active {
	color: #DF4600;
	background: #ffffff url(/features/images/bground_lftnav_active.gif) no-repeat 0px 0px;
	}
*/
/* =================================== Pets and Cars section =========================================*/
/* video control and picture caption */

.videoPopupCaption img {
	float: left;
	margin-right: 10px;
	margin-top: 4px;
}

.videoPopupCaption p {
/*	border: 1px solid pink;	*/
}

#rightRail div#furnTop {
	height: 92px;
}

#furnTop .reprints {
	background: url(/images/icon_reprints.gif) 7px 5px no-repeat;
	margin-top: 5px;
}