
/* -----------------------------------
TAB STYLES - needs to be inserted into doc before section.css (is this still true? - miks - 09/2008 )

1) .generic could be replaced by .contrast (which already exists to implement a similar style), which would be more logical and simpler, but needs a little work to achieve without causing problems - miks

2) ideally these classes should be re-done to conform to the new CSS naming convention (all lowercase, words seperated by hyphens) - miks

3) since "generic" is now the default, it would make sense to adjust this CSS such that the grey format is implemented by default without needing the "generic" class, with sectional coloured tabs implemented using a "sectional" class - miks

4) POSSIBLE ISSUE:  When using sectional tabs, the alignment of the tab link within the tab LI seems to be different to when using generic tabs (which are aligned correctly)



NOTE 

A div.tab-panel can either be nested within a panel (in which case it gets 
10px of spacing above it and is on a light grey panel background, or just within 
a column, in which case there is no top-spacing and no grey background.

However, in the Rx Panel CT a similar effect is achieved by adding the class 
non-panel to the DIV.panel, which removes the padding and background colour.  This 
avoids the Panel CT outputting something which is not a panel (as would happen 
	if the DIV.panel were not output). 
	
----------------------------------- */


.tab-panel .panel-content
{
	border-bottom-width: 0px;
}

/* prevent curve being applied if tab-panel is first item in column... */
div.tab-panel div.panel-content:first-child
{
	background-image: none;
}
/* ...but if tab-panel is first item in column AND contains a div.panel-content, apply curve to that */
div.tab-panel:first-child div.panel-content
{
	background-image: url(generic/images/curve-top.gif);
} 




/* tab content areas */
/* NOTE: tab-header contains right-aligned content */



.tab-header
{	
	border-bottom: 1px solid #FFF;	/* seperator for sectional format rather than generic grey */
}
.tab-content, .tab-header
{
	background-color: #E4E4E4; 
}
.tab-content, .tab-header	
{
	padding-top: 10px;
	clear: both;
}

.tab-header p
{
	text-align: right;		/* ??? */
}



/* this ensures appropriate spacing for a tab-panel nested within a panel as opposed to a lone tab-panel */
.panel .tab-panel ul.tabs 
{
	padding-top: 10px;		/* would be nicer to just apply padding to the tab-panel, but this works better as sometimes the tab-panel also contains introductory text */
}

/* adjustments for tab-panel in a non-panel (for rx - see note above) */
.non-panel .tab-panel ul.tabs
{
	padding-top: 0px !important;	/* remove the padding applied by the previous rule if pretending not to be a panel */
}
.non-panel { background-color: transparent !important; }

/* adjustment for tab-content containing DIV.index */
.tab-content div.index { clear: both; }


/* WAS: ul.tabs  */
.tab-panel ul.tabs 			/* .tab-panel required for greater specificity than content.css rules - miks */
{
	margin:  0px;
	padding: 0px;
	list-style-type: none;
	text-align: left;
	clear: both;			/* otherwise tabs following floated content can misalign in IE - miks - 07/2008 */
}


.tab-panel ul.tabs li
{
	float: left;
	/* display: inline; */
	
	padding: 6px 10px 4px 6px;
	margin-right:2px;
	white-space: nowrap;
	background-position: top right !important;		/* !important needed so no conflict with rules for bullets as background images */
	background-repeat: no-repeat;	
	list-style-type: none;
	list-style-image:none;	
	font-weight: bold;
	font-size: 1.1em;
}

.tab-panel ul.tabs li
{
	background-image: url(generic/images/tab.gif);
	border-left: 1px solid #747474; 
}


ul.tabs li.tab-active
{
	background-image: url(generic/images/tab-active-contrast.gif); 
	border-left-width: 0px;	
}



/* ----- tab links --------------- */
ul.tabs li a, ul.tabs li a:link, ul.tabs li a:visited, ul.tabs li a:active
{
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
ul.tabs li a:hover
{
	color: #000;
	text-decoration: underline;
}
ul.tabs li.tab-active a, ul.tabs li.tab-active a:hover, ul.tabs li.tab-active a
{
	color: #000;
	text-decoration: none;
	cursor: text;
}

/* ----- tab links - disabled ----- */
ul.tabs li.tab-disabled a
{
	color: #747474;
	cursor: text;
}
ul.tabs li.tab-disabled a:hover
{
	color: #747474;
	text-decoration: none;
}


/* ----- nested tabsets ----- */

div.tab-panel div.tab-panel
{
	margin: 0 10px 10px 10px;
}