/*********************************************************************************************
**     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;
	background-image: url(../img/spark_tabset_a.jpg);
	background-repeat: repeat-x;
}

/*
 * 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 #C60031;
	display: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	overflow: auto;
	background-color: #FFFFFF;
}


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


/*
 * The tab buttons
 */
div.tabset ul.tabset_tabs,
div.tabset ul.tabset_tabs li.tab,
div.tabset ul.tabset_tabs li.tab a {
	margin: 0px;
	float: left;
	background-image: url(../img/spark_tabset_a.jpg);
	background-repeat: repeat-x;
	padding: 0px;
	display: block;
}

/*
 * 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: 12px;
	text-decoration: none;
	color: #FFFFFF!important;
	line-height: 25px;
	outline-style: none;
	background-image: url(../img/spark_tabset_a.jpg);
	background-repeat: repeat-x;
	padding-top: 0px;
	padding-right: 25px;
	padding-bottom: 0px;
	padding-left: 25px;
	margin: 0px;
}

/*
 * 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 {
	margin-left: 0px;
	margin-right: 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/spark_tabset_b.jpg);
}

/*
 * The recipients of the tab buttons labels (holding left-hand part of the button skin).
 */
div.tabset ul.tabset_tabs li.selected {
}

/****************************************
 *  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;
}