/* =========================================================== */
/* Hover or Click Menu */
/* DON'T USE "*:hover"    Every link needs to be clicked twice in IOS/Safari due to how they handle hover */
/* add viewport to master */
/* =========================================================== */


/*===========================================================================================================*/
/*===========================================================================================================*/
/* OCM / IGS Global Menu */
/*===========================================================================================================*/
/*===========================================================================================================*/

/*===========================================================================*/
/* overall menu div - menu background */
/*===========================================================================*/
.divOcmClickMenu
{
	display: inline;							/* only inline works here = float next to logo */
	max-width: 1000px;
	font-size: small;
	position:relative;							/* or z-index is ignored */
	z-index: 5000;
}


/*===========================================================================*/
/* icon */
/*===========================================================================*/
.divOcmClickMenu .lblMenuBurger .MenuIcon_Blue{display: inline; width: 1em;}
.divOcmClickMenu .lblMenuBurger .MenuIcon_Gold{display: none; width: 1em;}

/*===========================================================================
  overall menu ul
  ===========================================================================*/
.OcmClickMenu_Outer								/* keeps ul from wrapping to next line */
{
	display: block;
	overflow: visible;
}
.OcmClickMenu
{
	padding: 0;
	margin: 0;
	list-style:none;
}
.divOcmClickMenu .cbMenuBurger
{
	position: absolute;
	z-index: -1;
	display: none;
}
.divOcmClickMenu .lblMenuBurger
{
	float:left;
}
/* overlap (z-index) only on large screen sizes, else let the block push the rest of the page down */
@media (max-width:850px){.OcmClickMenu{height: auto;}}
@media (min-width:850px){.OcmClickMenu{height: 2em;}}

/* hamburger menu if <= 650px */
@media (max-width:650px){.divOcmClickMenu .lblMenuBurger{display: inline;} .OcmClickMenu{display: none;}}
@media (min-width:650px){.divOcmClickMenu .lblMenuBurger{display: none;} .OcmClickMenu{display: block;}}


/*===========================================================================*/
/* level 1 li's  */
/*===========================================================================*/
.OcmClickMenu>li
{
	display: inline-block;
	padding: 0;
	margin: 0;
	vertical-align: top;
}


/* hamburger menu displayed, show level 1 li's only if checked;  GoldHighlight set below */
@media (max-width:650px)
{
	.divOcmClickMenu .cbMenuBurger:checked ~ .OcmClickMenu
	{
		display: block;
		float: left;
		width: 25em;
	}
	.divOcmClickMenu .cbMenuBurger:checked ~ .OcmClickMenu>li
	{
		display: block;
	}
}

/* 
What doesn't work:  
1.	ClickAsHover selected on wide screen, screen drops below min-width, hamburger is not displayed
2.	<li> selected on hamburger, screen goes above max-width and hides hamburger-label, ClickAsHover is unselected, screen drops below min-width, hamburger is still displayed
	even though nothing is selected (i.e. checkbox is still checked - could we uncheck in JS along with unsetting ClickAsHover?)
- both scenarios are very unlikely outside of testing...users typically don't change the screen size WHILE the menu is displayed

*/

/*===========================================================================*/
/* ALL Links */
/*===========================================================================*/
.divOcmClickMenu .lblMenuBurger, .OcmClickMenu a
{
	text-align: left;
	text-decoration: none;
	padding: 0 1em 0 .5em;
	height: 2em; line-height: 2em; vertical-align: middle;			/* vertically centered - sort of */
}

.divOcmClickMenu .lblMenuBurger, .OcmClickMenu a								/* Global top-level menu - no background or padding */
{
	color: #002663;
}

.OcmClickMenu > .ClickAsHover > a									/* Global top-level menu has a background only when clicked */
{
	display: block;
	height: 2em; line-height: 2em; vertical-align: middle;			/* vertically centered - sort of */
	background-color: #D3D3D3;
	border: 1px solid #002663;
	color: #002663;
	white-space:nowrap;
}
.OcmClickMenu > li > ul a											/* Global submenu 2+ always have a background */
{
	display: block;
	height: 2em; line-height: 2em; vertical-align: middle;			/* vertically centered - sort of */
	background-color: #E7E7E7;
	border: 1px solid #002663;
	color: darkblue;
	padding-left: 1.5em;
	white-space:nowrap;
}
.OcmClickMenu > li > ul > li >ul a									/* Global submenu 3 */
{
	background-color: white;
	padding-left: 3em;
}

/* hover/click gold highlight,  ~ sibling */
.OcmClickMenu .ClickAsHover>a{color: #A85028;}
.divOcmClickMenu .cbMenuBurger:checked ~ .lblMenuBurger{color: #A85028;}
.divOcmClickMenu .cbMenuBurger:checked ~ .lblMenuBurger .MenuIcon_Gold{display: inline;}
.divOcmClickMenu .cbMenuBurger:checked ~ .lblMenuBurger .MenuIcon_Blue{display: none;}



/*===========================================================================*/
/* ALL level 2+ ul's initial state */
/* with .OcmClickMenu prefix, this section needs to be BEFORE the level 2+ displayed section */
/*===========================================================================*/
.OcmClickMenu .CssClickMenu_HasSubMenu>ul
{
	list-style: none;
	padding: 0;
	margin: 0;

	overflow: hidden;
	width: 0;
	height: 0;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

/*===========================================================================*/
/* ALL level 2+ ul's displayed */
/*===========================================================================*/
.OcmClickMenu .ClickAsHover>ul						/* putting width here includes width in level 1 widths */
{
	display: block;
	height: auto;
	overflow: visible;
}

.OcmClickMenu .ClickAsHover>ul>li
{
	width: 25em;
	position:relative;								/* or z-index is ignored */
	z-index: 7000;
}




/*===========================================================================================================*/
/*===========================================================================================================*/
/* IGS Database Menu */
/*===========================================================================================================*/
/*===========================================================================================================*/

/*===========================================================================*/
/* overall menu div */
/*===========================================================================*/
.divCssClickMenu
{
	margin: 0 auto 0 auto;							/* center whole menu bar in page */
	font-size: smaller;
	position:relative;								/* or z-index is ignored */
	z-index: 200;
    white-space: nowrap;							/* keep entire menu from wrapping, but overflow has gaps/no background */
}

/*===========================================================================*/
/* icon */
/*===========================================================================*/
.divCssClickMenu .lblMenuBurger .MenuIcon_White{display: inline; width: 1em;}
.divCssClickMenu .lblMenuBurger .MenuIcon_LtGold{display: none; width: 1em;}

/*===========================================================================
  main menu div, div/ul
  ===========================================================================*/
.CssClickMenu_Background						/* div before CssClickMenu_Outer div.  Can't put background on divCssClickMenu or CssClickMenu_Outer or CssClickMenu or mid-width has entire block set to blue  */
{
	display: block;
	height: 2em;
	max-width: 1000px;
	overflow: hidden;
	margin: 0 auto 0 auto;						/* center whole menu bar in page */
	background-color: #002663;
	position: relative;
	z-index: 5;
}
.CssClickMenu_Outer								/* div around CssClickMenu ul, keeps ul from wrapping to next line */
{
	width: 100%;
	max-width: 1000px;
	margin: -2em auto 0 auto;					/* center whole menu bar in page; -2em Top to positiion back over CssClickMenu_Background div */
	display: block;
	overflow: visible;
	position: relative;
	z-index: 15;
}
.CssClickMenu
{
	padding: 0;
	margin: 0;
	text-align: right;
	list-style: none;
}
.divCssClickMenu .cbMenuBurger
{
	position: absolute;
	z-index: -1;
	display: none;
}
.divCssClickMenu .lblMenuBurger
{
	float: left;				/* still don't understand why this is necessary.. */
}
.divCssClickMenu .lblMenuBurger label
{
	height: 2em; line-height: 2em; vertical-align: middle;			/* vertically centered - sort of */
}

/* overlap (z-index) only on large screen sizes, else let the block push the rest of the page down */
@media (max-width:850px){.CssClickMenu{height: auto;}}
@media (min-width:850px){.CssClickMenu{height: 2em;}}

/* hamburger menu if <= 650px */
@media (max-width:650px){.divCssClickMenu .lblMenuBurger{display: inline; width: 100%;} .CssClickMenu{display: none; text-align: left;}}
@media (min-width:650px){.divCssClickMenu .lblMenuBurger{display: none;} .CssClickMenu{display: block;}}


/*===========================================================================*/
/* level 1 li's  */
/*===========================================================================*/
.CssClickMenu>li
{
	display: inline-block;
	padding: 0;
	margin: 0;
	background-color: #002663;
	border-right: solid 2px #d0d0d0;
	vertical-align: top;

}

/* hamburger menu displayed, show level 1 li's only if checked;  GoldHighlight set below */
@media (max-width:650px)
{
	.divCssClickMenu .cbMenuBurger:checked ~ .CssClickMenu
	{
		display: block;
		float: left;
		width: 25em;
	}
	.divCssClickMenu .cbMenuBurger:checked ~ .CssClickMenu>li
	{
		display: block;
	}
}


/*===========================================================================*/
/* ALL Links */
/*===========================================================================*/
.divCssClickMenu .lblMenuBurger, .CssClickMenu a
{
	text-align: left;
	text-decoration: none;
	padding: 0 1em 0 .5em;
	height: 2em; line-height: 2em; vertical-align: middle;			/* vertically centered - sort of */
}
.divCssClickMenu .lblMenuBurger, .CssClickMenu a					/* IGS top-level menu - blue background, no padding */
{
	background-color: #002663;
	color: white;
}

.CssClickMenu > .ClickAsHover > a									/* IGS top-level menu when clicked  */
{
	display: block;
	height: 2em; line-height: 2em; vertical-align: middle;			/* vertically centered - sort of */
}
.CssClickMenu > li > ul a											/* IGS submenu 2+ background and indent */
{
	display: block;
	height: 2em; line-height: 2em; vertical-align: middle;			/* vertically centered - sort of */
	background-color: #E7E7E7;
	border: 1px solid #002663;
	color: darkblue;
	padding-left: 1.5em;
	white-space:nowrap;
}
.CssClickMenu > li > ul > li >ul a									/* IGS submenu 3 */
{
	background-color: white;
	padding-left: 3em;
}



/*===========================================================================*/
/* hover/click gold highlight */
/*===========================================================================*/
.CssClickMenu > .ClickAsHover>a{color: #f1b007;}					/* Level1 and icon use lighter gold since they're on a blue background */
.CssClickMenu ul .ClickAsHover>a{color: #A85028;}					/* Level 2+ */
.divCssClickMenu .cbMenuBurger:checked ~ .lblMenuBurger{color: #f1b007;}
.divCssClickMenu .cbMenuBurger:checked ~ .lblMenuBurger .MenuIcon_LtGold{display: inline;}
.divCssClickMenu .cbMenuBurger:checked ~ .lblMenuBurger .MenuIcon_White{display: none;}


/*===========================================================================*/
/* ALL level 2+ ul's initial state */
/* with .CssClickMenu prefix, this section needs to be BEFORE the level 2+ displayed section */
/*===========================================================================*/
.CssClickMenu .CssClickMenu_HasSubMenu>ul
{
	list-style: none;
	padding: 0;
	margin: 0;

	overflow: hidden;
	width: 0;
	height: 0;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

/*===========================================================================*/
/* ALL level 2+ ul's displayed */
/*===========================================================================*/
.CssClickMenu .ClickAsHover>ul						/* putting width here includes width in level 1 widths */
{
	display: block;
	height: auto;
	overflow: visible;
}
.CssClickMenu .ClickAsHover>ul>li
{
	width: 25em;
	position:relative;								/* or z-index is ignored */
	z-index: 7000;
}