div.most-popular-panel {
	padding: 0;
	margin-bottom: 10px;
	border: solid #C65E27 1px;
}

div.most-popular-panel h3 {
	margin-left: 0.5em;
}

/*
The "in-tabs" class is applied dynamically, so these two styles are only applied if JS
is turned on and we are using a DOM browser.

Setting a top margin because we need some space above this into which the H3s will
be moved so they are all clickable.  Otherwise, the three DIVs are layered on top of
each other and only the top DIV's A tag is clickable.
*/
div.in-tabs {
	position: relative;
	margin: 43px 0px 0px;
}

div.in-tabs div#tabOne,
div.in-tabs div#tabTwo,
div.in-tabs div#tabThree   {
	margin: 0;
}

/*
Style the H3s, which function as the tabs.  Setting their position to absolute so
they appear where they need to be relative to the top left corner of the containing
DIV.  Top is set to a negative number so they actually appear *ABOVE* the DIV that
contains them in order for all three tabs to be clickable.
*/
div.in-tabs div h3 {
	width: 125px;
	w\idth: 119px;
	font-size: 90%;
	text-align: center;
	padding: 5px 2px 4px;
	margin: 0;
	position: absolute;
	top: -40px !important;
/*	top: -40px;	*/
	font-style: normal;
	border: solid #C65E27;
	border-width: 1px 1px 0;
}

div.in-tabs	div h3 a {
	text-decoration: none;
	color: #C65E27 !important;
}

div.in-tabs	div h3 a:hover {
	text-decoration: underline;
}

/*
Move to its correct position when these are tabbed on top of each other.
*/
div.in-tabs div#tabOne h3 {
	left: 3px;
}
div.in-tabs div#tabTwo h3 {
	left: 127px;
}

div.in-tabs div#tabThree h3 {
	left: 251px;
}

/*
Which tab is being shown will be controlled dynamically by assiging a class
to the three main DIVs. The class "active-tab" will be for the tab we are looking
at while the others will be "inactive-tab".
*/
div.in-tabs div.active-tab h3 {
	background: white;
	height: 41px;
	he\ight: 31px;
	z-index: 20;
}

div.in-tabs div.inactive-tab h3 {
	background: #eee;
	z-index: 0;
	height: 40px;
	he\ight: 30px;
}

/*
Now, style the area that will be shown and hidden, which is in a DIV with the class
"tab-content".
*/
div.in-tabs div div.tab-content {
	background: #FFF;
	padding: 10px 18px;
	overflow: hidden;
}

/*=styles for content in tabbed sections
----------------------------------------*/
.in-tabs .tab-content ul, .tab-content ol, .tab-content p { margin: 0px 6px 3px 6px; padding-left: 6px; }
.tab-content p  { margin: 0px 6px 0px 0px; padding-left: 0px; }
.in-tabs .tab-content li { list-style-type: square; list-style-image: url(/images/bulletTriangle.gif); margin-bottom: 4px; }
.in-tabs .tab-content a, .in-tabs .tab-content a:hover { color: #000; font-weight: normal; }
.in-tabs .tab-content .thumb {
	float: left;
	width: 90px;
}
.in-tabs .tab-content .thumb img { border: 2px solid #fff; position: relative; }
.in-tabs .tab-content .thumb p {
	margin: 0;
	line-height: 1.3;
	font-size: 90%;
}
.in-tabs .tab-content span.title { text-decoration: underline; font-weight: bold; }
.in-tabs .tab-content em.more a, .in-tabs .tab-content em.more a:hover  { font-weight: normal; color: #ed1b23; }

.in-tabs .tab-content .withThumb {
	float: left;
	margin-left: 18px;
	display: inline;
	width: 284px;
	font-size: 90%;
}

/*
Styles for the tabs when they are active and inactive.
*/
div.in-tabs div.active-tab div.tab-content {
	display: block;
	border-top: 1px #C65E27 solid;
}

div.in-tabs div.inactive-tab div.tab-content {
	display: none;
}