:root {
	
	--maf_menu-background-color:lightgray;
	--maf_menu-color:black;

}

.maf_menubar-container {

	z-index:1;
	padding:8px 1px;
}

/* note: This gets changed to hide LAST menu by javascript */
.maf_menubar:not(:first-child) {
	display:none;
}

.maf_menubar-item, .maf_menubar-drop {
	display:inline;
	margin:0;
	padding:8px 4px;
	white-space:nowrap;
	font-size:1.2em;
	vertical-align: middle;
}

.maf_menubar-item img, .maf_menubar-drop img {

	height:1.2em;
	width:auto;
}

a.maf_menubar-item, a.maf_menubar-drop:link, a.maf_menubar-drop-item {
	text-decoration: none;
	color:var(--maf_menu-color);
}

/* Apply only to devices that have hover (mouse, etc)
   and ignore these setting if on a touch device */
@media (hover: hover) {
	
	.maf_menubar-item:hover, .maf_menubar-drop:hover, .maf_menubar-drop-item:hover {

		text-decoration: none;
		color:var(--maf_menu-background-color);
		background-color:var(--maf_menu-color);
 
 	 	-o-border-radius: 0.9em;
		-webkit-border-radius: 0.9em;
		-moz-border-radius: 0.9em;
		border-radius: 0.9em;

		-o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

	}
	
	.maf_menubar-drop:hover, .maf_menubar-item:hover {

		color:white;
		background-color:var(--maf_menu-background-color);
 	}
 
}

.maf_menubar-item:focus, .maf_menubar-drop:focus, .maf_menubar-drop-item:focus {

	background-color:var(--maf_menu-background-color);
}

.maf_menubar-item:active, .maf_menubar-drop:active, .maf_menubar-drop-item:active{

	background-color:var(--maf_menu-background-color);
}

.maf_menubar-drop {

	position:relative;
	cursor:pointer;
}

.maf_menubar-drop:hover [class*="maf_menubar-drop-content"] {

	/* this class rule (:hover) gets removed by javascript 
		needed for noscript, but not needed for script
		It leaves a lingering hover effect
		on the maf_menubar-drop element, so remove it when not needed
	*/
	opacity: 1;
	visibility:visible;

}

[class*="maf_menubar-drop-content"] {

	visibility: hidden;
	opacity: 0;
  	transition: opacity 1s;

	position:absolute;
	top:90%;
	left:0;
	right:auto;
	
	text-align:left;

	background-color:var(--maf_menu-background-color);
	color:white;
	padding:12px 8px 12px 4px;
	margin:0;
	min-width:160px;
	max-width:355px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
}

[class*="maf_menubar-drop-content"] a {
	text-decoration: none;
}

.maf_menubar-drop-content-right {
	left:auto;
	right:0;
}


.maf_menubar-drop-item {
	display:block;
	padding:4px;
}