/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Horizontal menu bar/selections list.  These definitions provide only the    
 * generic base definitions for the top bar which is the starting point for
 * site navigation menus.  The popup/dropdown/panal sub menu definitions are not 
 * included here - must be specified in the HTML code along with the associated
 * css definitions.
 *
 * Structure:
 * ---------------------------------------
 *	ul.HorizontalMenu
 *		li id="xxxxMenu" 
 *			[a, .Title, label]
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

ul.HorizontalMenu
{
	display:			block;
	position: 			relative;
	background-color:	#c2d7f8;  /* #6699ee65; */
	width:				100%;
	margin:				0;
	padding: 			0px 2px 0px 2px;
	font-weight:		normal;
	font-size:			16px;
}

ul.HorizontalMenu > li
{
	/* float left equiv: http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/ */
	display: 			inline-block;
	margin:				0px 1em 0px 0;
	padding:			0;
	color:				#003366;
	color:				var(--heading-color);
	list-style:			none;
	border:				1px solid transparent;
	vertical-align:		middle;
}
ul.HorizontalMenu > li:hover,
ul.HorizontalMenu > li:active, 
ul.HorizontalMenu > li:focus,
ul.HorizontalMenu > li.On:hover 
{
	background-color:	var(--hover-background-color);
	color:				var(--hover-color);
	overflow:			hidden;
}

ul.HorizontalMenu > li.On
{
	background-color:	#d2e7ff; /* light blue: abc4ea, translucent ibis blue: 33669915 red: #a31f32 */
	color:				black;
}

ul.HorizontalMenu > li > a,
ul.HorizontalMenu > li > a:visited,
ul.HorizontalMenu > li > .Title,
ul.HorizontalMenu > li > label
{
	display:			inline-block;
	padding:			12px 6px 6px 6px;
	background-color:	inherit;
	color:				inherit;
	font-size:			16px;
	font-weight:		normal;
}

ul.HorizontalMenu > li .Help
{
	top:				7px;
	background-color:	transparent !important;
	border: 			none !important;
	z-index: 			200;
}
/*============================ End of Style Sheet ============================*/