/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Horizontal tab bar menu/selections list.  These definitions provide only the    
 * generic base definitions for the top tab bar which is the starting point for
 * site navigation menus.  The popup/dropdown sub menu definitions are not 
 * included here - must be specified in the HTML code.
 *
 * Structure:
 * ---------------------------------------
 * ul.HorizontalTabList
 *	 li id="xxxxMenu" 
 *		a
 *		div or ul or table etc.  Needs additional specific css to hide/move on
 *                               hover etc. - see the SiteNavigationMenu-*.css
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

ul.HorizontalTabList
{
	background-color:	#6699cc;

	position: 			relative;
	width:				100%;
	padding: 			5px 2px 2px 2px;
	margin:				0;
	z-index: 			100;
	
	font-family:		Arial,Sans-Serif;
	font-weight:		normal;
	font-size:			1em;
}


ul.HorizontalTabList > li
{
	/* float left equiv: http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/ */
	display: 			inline-block;
	vertical-align:		bottom;

	background-color:	#4477aa;
	min-width:			115px;
	list-style:			none;
	margin-right:		3px;

	border-left: 		1px solid #ccc;
	border-top:  		1px solid #bbb;
	border-right: 		1px solid #aaa;

	-moz-border-radius:	5px 5px 0px 0px;  
	-webkit-border-radius: 5px 5px 0px 0px;  
	border-radius:		5px 5px 0px 0px;  
}
ul.HorizontalTabList > li:hover,
ul.HorizontalTabList > li.On:hover 
{
	background-color:	#114477;
	border-left: 		1px solid #ddd;
	border-top:  		1px solid #ddd;
	border-right: 		1px solid #888;
}

ul.HorizontalTabList > li > a,
ul.HorizontalTabList > li > a:visited,
ul.HorizontalTabList > li > label
{
	display:			inline-block;
	width: 				100%;
	background-color:	transparent;
	color:				white;
	padding:			2px 6px 2px 6px;
	text-decoration:	none;
}
ul.HorizontalTabList > li > a
{
	margin-right: 		5px;
}
ul.HorizontalTabList > li a:hover,
ul.HorizontalTabList > li a:active, 
ul.HorizontalTabList > li a:focus,
ul.HorizontalTabList > li.On a:hover,
ul.HorizontalTabList > li.On a:active, 
ul.HorizontalTabList > li.On a:focus,
ul.HorizontalTabList > li > label:hover,
ul.HorizontalTabList > li.On > label:hover
{
	color:				#ffcc66;
}


ul.HorizontalTabList > li.On
{
	background-color:	#fff;
	border:		 		1px solid #6699cc;
	border-bottom: 		none;
}
ul.HorizontalTabList > li.On > a,
ul.HorizontalTabList > li.On > label
{
	color:				#336699;
}

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