/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * MegaMenu/Panel with Grid selections list CSS definitions for the IBIS-PH 
 * web site.  The panel's selections list is NOT based on any existing CSS 
 * definitions but does rely on the standard UL/LI mechanism.
 *
 * Structure:
 * ---------------------------------------
 *	nav
 *		[ul].HorizontalMenu
 *			li - first tab
 *				div.MegaMenu
 *					div.Header
 *					div.Body (grid container)
 *						div.Block  (grid column)
 *							h3
 *							ul - selections list (grid container) 
 *								li - menu selection (grid item)
 * 									a
 *						. . .
 *						div.Block 
 *					div.Footer
 *			li - second tab
 *				. . . 
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

nav .MegaMenu
{
/* #F2EDE8 nice light: F7F2ED, light brown CEC2B3, #8B8378 gray brown, yellow - looks okay FFD85B, light blue okay D1E8FF 
	background:			#336699 url("../image/Grid .MegaMenu-background.png") no-repeat right bottom;
	background-color:	rgba(51, 102, 153, 0.90); 
*/
	position: 			relative;
	background-color:	var(--menu-background-color);
    width: 				calc(100% - 2px);
	padding: 			8px 0px 25px 0;
	margin:				0;
	min-height:			50px;
	box-shadow: 		3px 3px 5px 0px #464135;

	z-index: 			110;
}

nav .MegaMenu h2,
nav .MegaMenu h3,
nav .MegaMenu h4,
nav .MegaMenu h5
{
	color:				white;
}

nav .MegaMenu a
{
	text-decoration:	none;
}
nav .MegaMenu a.PDF::after
{
	display:			none;
}

nav .MegaMenu li
{
	list-style:			none;
	margin: 			8px 0;
}

nav .MegaMenu .Body 
{
	/* grid in IE: 
		https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
		https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/
		https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/
		horrible early spec: display: 			-ms-grid;  

		Easiest ie on W7 alternative is simply use flex for the container: 
	*/
	display: 			flex;

	display: 			grid;	
	grid-auto-columns:	auto;	
	grid-auto-flow: 	column; 
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

/* IE doesn't work great with flex options that would be needed.
	if use flex need to set block widths - so not much diff than inline blocks.
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-basis: 100%;
	flex: 1;
	flex-direction: column;
	flex-flow: row wrap;
	align-items: stretch;
	overflow: hidden;
  
	justify-content: space-evenly;
	align-items: stretch;
	align-content: space-around;
*/
}

nav .MegaMenu .Body .Block 
{
	/* setup grid with equal columns */
	/* width: XSLT sets a width style for each column container.  
		Tried flex layout but table-cell with responsive css limits for "small"
		to inline-block works better.
		table-cell provides a complete height border.
	*/
	display: 			inline-block;
	padding:			16px 12px 8px 12px;
	border-left:		1px dotted #6688aa;
}
nav .MegaMenu .Body .Block:first-child
{
	border-left:		none;
}

nav .MegaMenu .Body .Block h3,
nav .MegaMenu .Body .Block h4,
nav .MegaMenu .Body .Block h5
{
	background-color:	#335577;
	padding:			5px 8px;
	font-size:			1.25rem;
	font-weight:		normal;
	color: 				#eee;
	border: 			1px solid var(--hover-background-color);
	line-height:		1.3rem;
}

nav .MegaMenu .Body .Block ul
{
	margin:				0;
	padding:			0;
}

nav .MegaMenu .Body .Block ul li a
{
	position:			relative;
	display: 			block;
	padding: 			12px 8px;
	color: 				white;
    border: 			1px solid transparent;
}
nav .MegaMenu .Body .Block ul li a:hover, 
nav .MegaMenu .Body .Block ul li a:active, 
nav .MegaMenu .Body .Block ul li a:focus
{
	background-color:	var(--hover-background-color);
	color: 				var(--hover-color);
    border-color:		#557799;
	border-radius:		5px 5px 5px 5px;  
/*
	box-shadow:			inset 1px 1px 2px 0px #F2E4D5;
*/
}

nav .MegaMenu .Body .Block ul ul
{
	margin-left:		8px;
}

nav .MegaMenu .Body .Block ul ul .Description
{
	padding:			0 10px 10px 0.5rem;
	color:				#ccc;
	font-size:			0.8rem;
	line-height:		1rem;
}


/* Need to have the class be Icon and NOT FontIcon so the general def is not used. */
nav .MegaMenu .Body .Block ul.Icon li,
nav .MegaMenu .Body .Block ul li.Icon 
{
	margin-left:		25px;
}

nav .MegaMenu .Body .Block .Icon li > a::before,
nav .MegaMenu .Body .Block li.Icon  > a::before
{
	position:			absolute;
	left:				-25px;
	top:				11px;
	background-color:	inherit;
	width: 				16px;
	line-height:		16px;

	content:			"\e308";
	font-family: 		"WebComponentsIcons";
	font-style: 		normal;
	font-variant:		normal;
	font-weight: 		normal;
	font-size: 			16px;
	cursor:				inherit;

	speak: 				none;
	text-transform: 	none;
	text-decoration: 	none;
	text-align: 		center;
}
nav .MegaMenu .Body .Block .Icon.Info a::before
{
	border: 			1px solid #aaa;
	border-radius: 		50%;
	content:			"\e401";
}
nav .MegaMenu .Body .Block .Icon.List a::before
{
	border:				1px solid white;
	content:			"\e614";
}
nav .MegaMenu .Body .Block .Icon.Report a::before
{
	border:				1px solid white;
	content:			"\e124";
	transform: 			rotate(-90deg);
}
nav .MegaMenu .Body .Block .Icon.PDF a::before
{
	background-color:	#FF3500;
	content:			"\e90e";
	width:				20px;
	height:				19px;
	font-size:			18px;
	padding-top:		2px;
}
nav .MegaMenu .Body .Block .Icon.Link a::before
{
	content:			"\e672";
	height:				19px;
	font-size:			18px;
}
nav .MegaMenu .Body .Block .Icon.Image a::before
{
	font-size:			20px;
	content:			"\e501";
}
nav .MegaMenu .Body .Block .Icon.Help a::before
{
	content:			"\e402";
}
nav .MegaMenu .Body .Block .Icon.Help 
{
	width: 				inherit;
	height: 			inherit;
}


nav .MegaMenu .Body .Block .Introduction
{
	background-color:	#5b7b9b; /*c2d7f840;*/
	color:				#f0f0f0;	/*white  #e8e8e8;*/
	font-size:			0.9rem;
	line-height:		1.4rem;
	padding: 			12px 8px 12px 8px;
}
nav .MegaMenu .Body .Block ul li .Introduction a
{
	margin-top:			40px;
    border: 			1px solid #ccc;
}

nav .MegaMenu .Body .Block .Introduction .Video
{
	position:			relative;
	margin: 			16px auto 0 auto;
	max-width: 			400px;
}
nav .MegaMenu .Body .Block .Introduction .Video img
{
	width: 				100%; 
}
nav .MegaMenu .Body .Block .Introduction .Video img:active + .Overlay
{
	display: 			none;
}

nav .MegaMenu .Body .Block .Introduction .Video .FontIcon::before
{
	position: 			absolute;
	top: 				-50px;
	left: 				calc(50% - 40px);
	color: 				#fff;
	background-color: 	rgb(33, 33, 33, 0.55);
	padding: 			12px 7px 12px 15px;
	font-size: 			48px;
	width: 				48px;
	line-height: 		48px;
	border: 			1px solid black;
	border-radius:		50%;
	content: 			"\e200";
}
nav .MegaMenu .Body .Block .Introduction .Video .FontIcon:hover::before
{
	background-color: 	var(--hover-background-color);
	color: 				var(--hover-color);
}
nav .MegaMenu .Body .Block .Introduction .Video .Overlay
{
	position: 			absolute;
	bottom: 			-20px;
	width: 				100%;
	padding: 			16px;
	color: 				#eee;
	background-color: 	rgb(33, 33, 33, 0.60);
	cursor: 			pointer;
	z-index:			2;
}



/* Topic Text Icons */
nav .MegaMenu .Body .Block .TextIconBlocks
{
	display: 				grid;
	padding-top:			4px;
	grid-auto-flow:			row;
	grid-template-rows:		auto;
	grid-template-columns:	repeat(auto-fit, minmax(120px, 1fr));
	justify-items:			center;
}

nav .MegaMenu .Body .Block .TextIconBlocks h3
{
	text-align:			center;
}

nav .MegaMenu .Body .Block .TextIconBlocks li
{
	display: 			inline-block;
}
nav .MegaMenu .Body .Block .TextIconBlocks li > a  
{
	display: 			block;
	width: 				110px;
	height: 			110px;
	padding: 			12px 0 0 0;
	font-size:			14px;
	text-align: 		center;
	color: 				white;
}
nav .MegaMenu .Body .Block .TextIconBlocks li a:hover
{
	background-color:	var(--hover-background-color);
	color:				var(--hover-color);
}
nav .MegaMenu .Body .Block .TextIconBlocks li a img
{
	display:			block;
	height: 			32px;
	margin: 			0 auto 5px auto;
	background-color:	inherit;
}

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