/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Tabbed Content.  This provides a tabbed block mechanism.  It has limitations
 * like being able to show the active tab with the same background color when
 * the radio button is shown (if no radio button then the label background can
 * be set etc.).  It also can not auto expand the container height based on the
 * content (due to the content needing to be positioned absolutely).  This also
 * has issues when dealing with older browsers.
 *
 * Structure:
 * ---------------------------------------
 * ul or div class="TabbedContent"
 *	 li or span class="Tab"
 *		input id="xyz" type="radio" 
 *		label for="xyz"  class="Control"
 *		div class="Container" 
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.TabbedContent
{
	display: 			block;
	position:			relative;
	width:				100%;
	height:				200px;
	padding:			0;
	margin:				0;
}

.TabbedContent > .Tab 
{
	display: 			inline-block;
	padding: 			8px 8px 4px 6px;
	background-color: 	#dddddd;
	margin: 			0px 0px 0 0;
	list-style:			none;
	border:				1px solid #aaa;

	-moz-border-radius:	5px 5px 0px 0px;  
	-webkit-border-radius: 5px 5px 0px 0px;  
	border-radius:		5px 5px 0px 0px;  
}
.TabbedContent > .Tab:hover,
.TabbedContent > .Tab:active,
.TabbedContent > .Tab:focus
{
	color:				white;
	background-color:	#003366;
}


.TabbedContent > .Tab > input
{
	margin:				0;
	padding:			0;
	/* turn off the radio button.  If turning off then the label can 
		be used to format the tab for better tab effects.
	display: none;   
	*/
}

.TabbedContent > .Tab .Control 
{
	color:				inherit;
	margin:				0;
	padding-left:		2px;
	cursor:				pointer;
}

.TabbedContent > .Tab > input:checked + .Control 
{
	font-weight: 		bold;
}

.TabbedContent > .Tab > .Container 
{
	position:			absolute;
	left: 				0;
	height:				0;
	width:				0;

	padding:			0;
	border: 			none;
	background-color: 	#eee;
	overflow:			hidden;
}
.TabbedContent .Tab > input:checked ~ .Container
{
	top:				27px;
	height:				150px;
	width:				auto;
	padding: 			15px;
	border: 			1px solid #aaa;
	overflow:			auto;
}

/*============================ End of Style Sheet ============================*/