/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Horizontal tabbed Menu with a pull down MegaMenu container.  
 * 
 * This file contains the specific top tab and sub menu css definition overrides
 * and supplements.  The main css definitions are based on/contained within:
 * HorizontalMenu.css and MegaMenu.css.  See  *
 * Structure:
 * ---------------------------------------
 *	nav
 * 		ul.HorizontalMenu some-child-block.MegaMenu
 *			li id="xxxxMenu" - tab
 *				input id="columnPanelControl1"
 *				label for="columnPanelControl1"
 *				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 > li > input[type="checkbox"],
ul.HorizontalMenu > li > input[type="radio"]
{
	position:			absolute;
	width:				0px;
	height:				0px;
	opacity:			0;
	z-index:			1;
}


ul.HorizontalMenu > li > input + label
{
	cursor:				pointer;	
}
ul.HorizontalMenu > li > input[type="checkbox"]:checked + label,
ul.HorizontalMenu > li > input[type="radio"]:checked + label
{
	background-color:	var(--menu-background-color);
	color:				white;
	border-radius:		5px 5px 0px 0px;  
}
ul.HorizontalMenu > li > input[type="checkbox"]:checked + label::after,
ul.HorizontalMenu > li > input[type="radio"]:checked + label::after
{
	content:			"\e11b";
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S U B   M E N U */
ul.HorizontalMenu li > input:not(checked) ~ .MegaMenu
{
	transition:         opacity 0.5s ease-out;
}

ul.HorizontalMenu li > input:checked ~ .MegaMenu
{
	visibility:			visible;
	opacity: 			1;
	z-index: 			100;
}

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