/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * General Horizontal tabbed Menu with mega menu (panel).  The top tabs are 
 * based on the HorizontalMenu with the core Panel css definitions included
 * here.  The default mechanism to show a panel is for NO INPUT controls/label
 * to be implemented in the HTML which results in a direct .Panel that is 
 * displayed on hover of the parent tab.  For click menu behavior include the
 * more specific HorizontalMenu-PanelList-click.
 * 
 * Structure:
 * ---------------------------------------
 *	nav
 * 		ul.HorizontalMenu 
 *			li id="xxxxMenu" - tab
 *				span.Title or input/label struct
 *				div.MegaMenu
 *					div.Header
 *					div.Body [.Grid .Flex]
 *						div.Block  have to use div because of block title...
 *							h3
 *							ul - selections list container
 *								li - menu selection 
 * 									a
 *						. . .
 *						div.Block 
 *					div.Footer
 *			li - second tab
 *				. . . 
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

ul.HorizontalMenu
{
	position:			relative;  /* easier for panel to be full width and under */
	border-bottom:		1px solid #ddd;
}

ul.HorizontalMenu > li:hover,
ul.HorizontalMenu > li:active, 
ul.HorizontalMenu > li:focus
{
	border:				1px solid transparent;
}

ul.HorizontalMenu > li:checked
{
	border:				1px solid transparent;
	border-radius:		5px 5px 0px 0px;  
}


ul.HorizontalMenu > li > .Title::after,
ul.HorizontalMenu > li > input[type="checkbox"]+ label::after,
ul.HorizontalMenu > li > input[type="radio"] + label::after
{
	display: 			inline-block;
	padding-left:		6px;		
	color:				inherit;

	content:			"\e015";
	font-family: 		"WebComponentsIcons";
	font-style: 		normal;
	font-variant:		normal;
	font-weight: 		bold;

	speak: 				none;
	text-transform: 	none;
	text-decoration: 	none;
	
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;

	/* 
	small dot: 2022  
	box: ffed 
	checkbox: 2713 
	star: \22C6\A0   
	triangle: 25BA 
	diamond: \2666 
	open circle: \00ba  >>=\00BB 
	
	\1F4CA = bar chart
	\1F4C8 = up trend
	\1F4D8 = blue book
	\25A4 = box with lines
	\2148 italic
	\1D413 bold T
	\25B6 triangle
	\2605 star
	\2606 star outlined
	\2311 square
	\1F517 link
	\2754 question outline
	\2753 question solid
	\1F4AC balloon
	\1F4C7 rollodex
	\261E index finger
	\25C7 diamond outlined
	\2318 place of interest
	*/
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ P A N E L   / M E G A   M E N U */
ul.HorizontalMenu li > .MegaMenu
{
	position:			absolute;
	width: 				100%;
	left:				0px;
	visibility:			hidden;
	opacity: 			0;
	z-index: 			-1;
	transition:         opacity 0.7s ease-out;
}

/* default hover behavior if not using input controls (note "+" selector) */
ul.HorizontalMenu > li:hover > .Title + .MegaMenu
{
	visibility:			visible;
	box-shadow:			0 3px 5px -0px #888;
	opacity: 			1;
	z-index: 			100;
}

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