/**
 * Style sheet SpryTabbedPanels
 */
/* This is the selector for the main TabbedPanels container. For our default style, this container does not contribute anything visually, but it is floated left to make sure that any floating or clearing done with any of its child elements are contained comp */
.TabbedPanels
{
	width:100%;
	float:left;
	clear:none;
	margin:0px;
	padding:0px;
}

/* This is the selector for the TabGroup. The TabGroup container houses all of the tab buttons for each tabbed panel in the widget. This container does not contribute anything visually to the look of the widget for our default style. The name of the class (" */
.TabbedPanelsTabGroup
{
	height:23px;
	margin:0px 0px 8px 0px;
	padding:0px;
	border-bottom:1px solid #ccc;
	border-left:1px solid #ccc;
}

/* This is the selector for the TabbedPanelsTab. This container houses the title for the panel. This is also the tab "button" that the user clicks on to activate the corresponding content panel so that it appears on top of the other tabbed panels contained i */
.TabbedPanelsTab
{
	width:50px;
	height:23px;
	top:1px;
	float:left;
	margin:0px;
	padding:0px;
	text-align:center;
	line-height:23px;
	list-style-type:none;
	border-top:1px solid #ccc; 
	border-right:1px solid #ccc;
	bottom:-1px;
	overflow:hidden;
	cursor:hand;
}

/* This selector is an example of how to change the appearnce of a tab button container as the mouse enters it. The class "TabbedPanelsTabHover" is programatically added and removed from the tab element as the mouse enters and exits the container. */
.TabbedPanelsTabHover
{
	color:#cc0000;
}

/* This selector is an example of how to change the appearance of a tab button container after the user has clicked on it to activate a content panel. The class "TabbedPanelsTabSelected" is programatically added and removed from the tab element as the user c */
.TabbedPanelsTabSelected
{
	background-color:#fff;
	border-bottom:1px solid #fff;
	font-weight:bold;
	color:#cc0000;
}

/* This selector is an example of how to make a link inside of a tab button look like normal text. Users may want to use links inside of a tab button so that when it gets focus, the text inside the tab button gets a focus ring around it, instead of the focus */
.TabbedPanelsTab a
{
	text-decoration:none;
	color:#black;
}

/* This is the selector for the ContentGroup. The ContentGroup container houses all of the content panels for each tabbed panel in the widget. For our default style, this container provides the background color and borders that surround the content. The name */
.TabbedPanelsContentGroup
{
	clear:both;
}

/* This is the selector for the Content panel. The Content panel holds the content for a single tabbed panel. For our default style, this container provides some padding, so that the content is not pushed up against the widget borders. The name of the class */
.TabbedPanelsContent
{
	padding:4px;
}

/* This selector is an example of how to change the appearnce of the currently active container panel. The class "TabbedPanelsContentVisible" is programatically added and removed from the content element as the panel is activated/deactivated. */
.TabbedPanelsContentVisible
{
}

/* This selector floats the TabGroup so that the tab buttons it contains render to the left of the active content panel. A border is drawn around the group container to make it look like a list container. */
.VTabbedPanels .TabbedPanelsTabGroup
{
	width:10em;
	height:20em;
	position:relative;
	float:left;
	background-color:#EEE;
}

/* This selector disables the float property that is placed on each tab button by the default TabbedPanelsTab selector rule above. It also draws a bottom border for the tab. The tab button will get its left and right border from the TabGroup, and its top bor */
.VTabbedPanels .TabbedPanelsTab
{
	float:none;
	margin:0px;
}

/* This selector disables the float property that is placed on each tab button by the default TabbedPanelsTab selector rule above. It also draws a bottom border for the tab. The tab button will get its left and right border from the TabGroup, and its top bor */
.VTabbedPanels .TabbedPanelsTabSelected
{
	background-color:#EEE;
	color:#888;
}

/* This selector floats the content panels for the widget so that they render to the right of the tabbed buttons. */
.VTabbedPanels .TabbedPanelsContentGroup
{
	width:30em;
	height:20em;
	float:left;
	clear:none;
	padding:0px;
}