/*********************************************************************************************
**     This is the default skin for the tabset widget. 
**     The CSS is on purpose verbose, so that in-page CSS will have as little bad influence 
**     on the widget as possible.
*********************************************************************************************/

/*
 * The outer tabset widget recipient.
 */
div.tabset {
	zoom: 1; /* workaround to fix IE "has layout/margin collapsing" issues */
}

/*
 * The body section of the widget (the one that holds the content).
 * All body sections are hidden but the "active" one.
 */
div.tabset div.tabBody {
	clear: both;
	border: 1px solid #d0d0d0;
	display: none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	overflow: auto;
	background-color: #ffffff;
	margin-left: 2px;
	margin-top: 0px; 
	margin-bottom: 0px;
	margin-right: 0px;
}


/**
 * The CONTENT of the widget itself.
 */
div.tabset div.tabBody div.tabContent{
	margin-left: 5px;
}


/*
 * The tab buttons
 */
div.tabset ul.tabset_tabs,
div.tabset ul.tabset_tabs li.tab,
div.tabset ul.tabset_tabs li.tab a,
div.tabset ul.tabset_tabs li.header{
	margin: 0px;
	padding: 0px;
	display: block;
	float: left;
}

/*
 * The labels inside the tab buttons. 
 * The right-hand part of the tab button skin is defined on this element.
 */
div.tabset ul.tabset_tabs li.tab a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
	color: #000000 !important;
	line-height: 19px;
	padding-right: 4px;
	background-image: url(../img/right_normal.gif);
	background-position: top right;
	background-repeat: no-repeat;
	margin-left: 3px;
	
}

/*
 * The recipients of the tab buttons labels.
 * The left-hand part of the tab button skin is defined on this element.
 */
div.tabset ul.tabset_tabs li.tab {
	background-image: url(../img/left_normal.gif);
	background-position: top left;
	background-repeat: no-repeat;
	margin-left: 5px;
	margin-right: 2px;
}

div.tabset ul.tabset_tabs li.header {
font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	line-height: 19px;
	padding-left: 15px;
	padding-right: 4px;
	padding-top: 0px;
	padding-bottom: 0px;
	color: #de0307 !important;
	font-weight:bold;
	margin: 0px;
	
	background-image:url(../../../../../images/template_images/arrow_red.gif);
	background-position: left;
	background-repeat:no-repeat;
}

div.tabset ul.tabset_tabs li.topseller {
font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-decoration: none;
	line-height: 19px;
	padding-left: 5px;
	padding-right: 4px;
	color: #de0307;
	font-weight:normal;
	margin-left: 0px;
	display: block;
	float: left;
	margin-top:0px;
}
/*
 * The recipient of the whole row of buttons.
 * This element is used to add the extra space before the first left-hand button.
 */
div.tabset ul.tabset_tabs {
	margin-left: 0px;
	
}

/*
 * The "active" (current) body section.
 */
div.tabset div.body_active {
	display: block;
}

/****************************************
 *  Tab buttons in "SELECTED" state:
 *  a tab button enters the selected 
 *  state after the user has clicked it.
 ****************************************/

/*
 * The labels inside the tab buttons (holding right-hand part of the button skin).
 */
div.tabset ul.tabset_tabs li.selected a {
	background-image: url(../img/right_over.gif);
	line-height: 19px;
}

/*
 * The recipients of the tab buttons labels (holding left-hand part of the button skin).
 */
div.tabset ul.tabset_tabs li.selected {
	background-image: url(../img/left_over.gif);
	position: relative; /* this offers the windows native "selected tab in front" effect */
	/*top: -2px;*/
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

/****************************************
 *  DEGRADABLE CSS
 *  When JavaScript is off, the body
 *  sections of an inline tabset are all
 *  visible.
 ****************************************/

/*
 * The outer tabset widget recipient.
 */
div.htmlrendering {
	position: relative;
}

/*
 * The body (content) section of the widget in degradable mode.
 */
div.htmlrendering div.tabBody {
	display: block;
}