/*=============================
  == Master Menu Definitions ==
  =============================*/
/*
	A simple menu which will work for almost anything
	places a small 3-bar menu indicator (../WebCommon/images/pwd_menu.png)
	in a position (standard position is top left corner of screen).
	When the indicator is clicked it displays a menu found in menu.txt file.
	When a menu option is clicked (selected) it closes the menu and activates
	the action found in the menu.txt file for this option.

  ====[ Notes ]====
  (1) This file resides in WebCommon folder on the server
      it works in conjunction with pwd_menu.js, pwd_menu.html & menu.txt (stored in "ROOT" folder)
  (2) MasterMenu is the second highest z-index on any given page.
      The highest is pwd_msgContainer which displays errors or images.
  (3) This file should not be changed to suit individual site pages
      Make changes to MasterMenu styles and :root variables in the site root
      directory css file.
*/
:root {
	/* MasterMenu */
	--pwd_menuItemColor:#fff;
	--pwd_menuItemBorderColor:rgba(255,255,255,0.7);
	--pwd_menuHoverBGColor:rgba(255,255,255,0.6);
	--pwd_menuHoverItemColor:#000000;
	--pwd_menuHoverItemBorderColor:rgba(255,255,255,0.7);
	--pwd_menuBackground:rgba(255,255,255,0.7);
	--pwd_menuBorderWidth:3px;
	--pwd_menuBorderColor:rgba(255,255,255,0.9);
	--pwd_menuShadowWidth:5px;
	--pwd_menuShadowColor:rgba(255,255,255,0.5);
	--pwd_menuFontSize:1em;
	--pwd_menuImageWidth:3em;
	--pwd_menuImageHeight:3em;
	/* subMenu */
	--pwd_subMenuFloat:right;
	--pwd_subMenuWidth:99%;
	--pwd_subMenuFontSize:0.7em;
	--pwd_subMenuBorderBottom:1px solid rgba(255,255,255,0.8);
	--pwd_subMenuBorderRadius:3px;
	--pwd_subMenuColor:rgba(255,255,255,0.7);
	--pwd_subMenuActiveColor:#000000;
	--pwd_subMenuActiveBG:rgba(255,255,255,0.7);
}

/*=====[ Z-index Stack ]=====*/
#pwd_MasterMenu {z-index:10000;}	/*Reserved for menu and msgbox*/
#pwd_MasterMenu #pwd_MenuImage {z-index:100;}

/*=====[ MasterMenu ]=====*/
#pwd_MasterMenu {
	position:absolute;
	cursor:pointer;
	top:0;
	right:0;
	font-size:var(--pwd_menuFontSize);
}
#pwd_MasterMenu #pwd_MenuImage {
	position:absolute;
	right:0;
	width:var(--pwd_menuImageWidth);
	height:var(--pwd_menuImageHeight);
}
#pwd_MasterMenu #pwd_menuList {
	top:0;
	right:0;
	padding:3em 6px 6px 6px;
	margin:0;
	color:var(--pwd_menuItemColor);
	text-align:left;
	border-radius:5px;
	transform-origin:top right;
}
#pwd_MasterMenu #pwd_menuList.menuDisplay {
	background:var(--pwd_menuBackground);
	border:var(--pwd_menuBorderWidth) solid var(--pwd_menuBorderColor);
	box-shadow:0 0 var(--pwd_menuShadowWidth) var(--pwd_menuShadowWidth) var(--pwd_menuShadowColor);
	transform:scale(1,1);
}
#pwd_MasterMenu #pwd_menuList.menuNodisplay {transform:scale(0,0);}
#pwd_MasterMenu li {list-style:none;}
#pwd_MasterMenu li:not(.noHilite) {
	padding:2px 5px;
	border:1px solid var(--pwd_menuItemBorderColor);
	border-radius:3px;
}
#pwd_MasterMenu a {
	color:var(--pwd_menuItemColor);
	text-decoration:none;
}
#pwd_MasterMenu li:not(:last-child) {margin-bottom: 5px;}
#pwd_MasterMenu li:hover:not(.noHilite), 
#pwd_MasterMenu li.active:not(.nohilite) {
	color:var(--pwd_menuHoverItemColor);
	background-color:var(--pwd_menuHoverBGColor);
	border-color:var(--pwd_menuHoverItemBorderColor);
}
#pwd_MasterMenu .noHilite {cursor:auto;}
#pwd_MasterMenu a:hover, #pwd_MasterMenu a.active {color:var(--pwd_menuHoverItemColor);}

/*=====[ SubMenu ]=====*/
/* A small submenu inside a msg container.
   Usually inside pwd_dataContainer. 
   Menu must be a <div>.
   Menu Options must be <div> with onclick set.
     eg. <div class='pwd_subMenu'>
            <div class='pwd_subMenuOption' 'onclick='....'>[optionName]</div>
            ...
         </div>
*/
.pwd_subMenu {
	float:var(--pwd_subMenuFloat);
	width:var(--pwd_subMenuWidth);
	padding-left:5px;
	color:var(--pwd_subMenuColor);
	border-bottom:var(--pwd_subMenuBorderBottom);
	font-size:var(--pwd_subMenuFontSize);
}
.pwd_subMenu div {
	cursor:pointer;
	display:inline-block;
	margin:5px 5px;
	padding:2px 3px;
}
.pwd_subMenu div:hover, .pwd_subMenu div.active {
	color:var(--pwd_subMenuActiveColor);
	background-color:var(--pwd_subMenuActiveBG);
	border-radius:var(--pwd_subMenuBorderRadius);
}

/* mobile media */
@media (max-width:600px) {
	.pwd_subMenu div {margin:2px 1px;padding:1px 2px;}
}