@charset "utf-8";

/* hide menu except on screen */
@media not screen{
	#menu{
		display:none;
	}
}

/* hide main menu title for smartphone */
#menu>div{
	display:none;
}

/*#menu > ul > li > ul {
	transition: left 0.25s;
}*/

/* font */
#menu, #menu a {
	color: #E0E0E0;
	font: bold 12px Arial, Helvetica;
	text-decoration: none;
	line-height: 1;
}
/* thin underline on true links */
/*#menu a[href] {
	text-decoration: underline;
	line-height: 1;
}*/
/* false links in italic, not bold */
#menu a:not([href]) {
	font-style: italic;
	/*font-weight: normal;*/
	color: #E0FFE0;
}

/* true links in yellow when mouse over */
#menu a[href]:hover {
	color: #FFFF00;
}

/* links underlines when mouse over, if pointing somewhere */
#menu a[href]:hover {
	text-decoration: underline;
	/*text-decoration-thickness: 2px;*/
}

/* links in yellow when open by click of by mouse over */
/*#menu li.open>a, #menu li:hover>a, #menu li.open>span, #menu li:hover>span{
	color:#FFFF00;
}*/

/* links in red if currently selected */
#menu li.current > a, #menu li.path > a, #menu li.path > span{
	color: #FF0000;
}

/* background of menu lists */
#menu ul{
	background: #4040C0;
	background: linear-gradient(#4040C0, #202060);
}

/* main menu list */
#menu > ul{
	display:block;
	margin: 0;
	padding: 0 10px;
	list-style: none;  
	line-height: 35px;
}
#menu ul{
	margin: 0;
}
#menu > ul:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: "";
	clear: both;
	height: 0;
}

#menu > ul > li{
	float:left;
	display:block;
	padding: 0 10px;
	position: relative;
}

/* hide submenus */
#menu ul ul{
	display:none;
	list-style: none;
	padding: 0 0 0 5px;
}

/* Clear floated elements: display next elements below menu */
#menu:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/* arrows to submenus displayed in light color, at right of menu item */
#menu li>span, #menu>span{
	float:right;
	background:rgba(255,255,255,0.25);
	height: 100%;
	width: 2em;
	padding: 0;
	text-align: center;
	margin-left: 0.5em;
	height: 35px;
}
#menu li > span{
	display:block;
}
#menu > span{
	background: #808080;
	display:none;
}

#menu li>a{
	padding: 5px 0;
}

/* arrows for opening submenus (2nd level and next) */
#menu li>span:after{
	content:"▼";
	font-size: 14px;
	height: 35px;
}
#menu li li>span:after{
	content:"▶";
}
/* arrows for closing submenus */
#menu li.open>span{
	background:black;
}
#menu li.open>span:after{
	content:"▲";
	font-size: 14px;
}
#menu li li.open>span:after{
	content:"◀";
}
/* arrows in yellow when mouse over */
#menu li > span:hover{
	color: #FFFF00;
	background: rgba(255,255,255,0.5);
}
/* special when open */
#menu li.open > span:hover{
	background: rgba(0,0,0,0.5);
}
/* submenus above main menu */
#menu ul ul{
	z-index: 1;
	border: white 1px solid;
}
/* position reference for submenu */
#menu li{
	position: relative;
}
/* horizontal line between submenu items */
#menu ul ul li{
   border-top: 1px white solid;
}
#menu ul ul li:first-child{
   border-top: none;
}

#menu ul ul a{
	display: inline-block;
	width: calc(100% - 2.5em - 2px);
}

/* on wide screen (computer) */
/*@media only screen and (min-width: 750px) {*/
/*body{background:green;}*/
	/* size of submenus, location of 2nd level */
	#menu ul ul{
		position: absolute;
		width: 200px;
		top: 35px;
	}
	/* submenus opened by mouseover above submenus opened by click */
	#menu li:not(.close):hover > ul
	{
		z-index: 2;
	}
	/* location of submenus of 3rd level and next */
	#menu ul ul ul
	{
		top: 0px !important;
		left: 200px;
	}
	/* open submenus when mouseover (except when closing parent menu) or click */
/*	#menu li:not(.close):hover > ul, #menu li.open > ul
	{
		display: block;
	}*/
	#menu li:hover > ul, #menu li.open > ul
	{
		display: block;
	}
	#menu li.close:hover > ul
	{
		display: none;
	}	
/*}*/

/* on narrow screen (smartphone) */
@media only screen and (max-width: 749px){
/*body{background:yellow;}*/
	/* location is normal */
	#menu > ul > li, #menu li, #menu ul ul{
		position: static;
	}
	/* menu is full width */
	#menu{
		display: block;
		width: 100%;
		line-height: 35px;
	}
	#menu > ul > li{
		width: 95%;
		width: calc(100% - 20px);
	}
	#menu ul ul > li{
		width: 95%;
		width: calc(100% - 10px);
	}
	#menu>span{
		display: block;
		font-size: 14px;
		top: 0;
		right: 0;
		height: 35px;
	}
	/* direction of arrows of opening or closing main menu */
	#menu>span:after{
		content:"▼";
	}
	#menu.open>span:after{
		content:"▲";
	}
	/* direction of arrows of opening or closing submenus for 2nd level and next */
	#menu li li>span:after{
		content:"▼";
	}
	#menu li li.open>span:after{
		content:"▲";
	}
	/* display main title */
	#menu>div{
		display:block;
		padding: 0 5px;
		font-size: 16px;
		background:black;
	}
	/* hamburger icon for main title */
	#menu>div:before{
		content:"≡ ";
		font-size: 20px;
	}
	/* do not float main menu items */
	#menu > ul > li{
		float:unset;
	}
	/* color of arrow of first level */
	#menu > span:hover{
		color: #FFFF00;
		background: #C0C0C0;
	}

	/* make links wide also at first level */
	#menu > ul > li > a{
		display: inline-block;
		width: calc(100% - 20px - 2em - 2px);
	}
	/* reduce width of each menu compared to parent */
	#menu ul, #menu ul ul{
		display:none;
		width: calc(100% - 12px);
		padding: 0;
	}
	/* same for submenus (overwrite setting for wide screen) */
	#menu ul ul{
		width: 95%;
		width: calc(100% - 12px);
		margin: 0 5px 5px 5px;
	}
	/* do not show submenus on hover */
	/*#menu li:not(.open):hover > ul
	{
		display: none;
	}*/
	#menu li:hover>ul{
		display:none;
	}
	/* display submenus when opened by click */
	#menu li.open > ul{
		display: block;
	}
	/* display menu when opened by click */
	#menu.open > ul{
		display: block;
		width: 100%;
		padding: 0px;
	}
	/* display horizontal line between menu or submenu items */
	#menu li{
		border-top: 1px white solid;
		padding: 0 5px;
	}
	#menu li:first-child{
		border-top: none;
	}
	/* prevent collapsing bottom margin */
	#menu>ul>li:last-child{
		/*padding-bottom: 1px;*/
		overflow:hidden;
	}
}