/* style sheet for the navigation bar */

/* BASIC FUNCTIONALITY */

/* by default hide sub-menus from the 2nd level onwards ... */
nav ul ul {
	display: none;
}

	/* ... and display a sub-menu when hovered (regardless level) */
	nav ul li:hover > ul {
		display: block;
	}

		/* display clickable area of menu-items (i.e. including vertical padding)*/
		nav ul li a {
			display: block;
		}


/* indicate that there is a submenu */
/*li > a:after { content: " \2193"; } 
li > a:only-child:after { content: ''; }*/

nav ul li > a:after { content: " \2193"; } 
nav ul li > a:only-child:after { content: ''; }

/* POSITIONING OF THE MENUS AND SUBMENUS */

/* basic layout of menu bar */
nav ul {
	position: relative;		/*to be able to absolutely position the sub-menu's*/
	display: table;			/*condense the menu to fit*/
}

	/*nav ul:after {
		content: "";
		clear: both;
		display: block;
	}*/

	/* arrange menu items next to each other ... */
	nav ul li {
		float: left;
	}

		/* ... and arrange subitems again underneath each other*/
		nav ul ul li {
			float: none;
			position: relative;	/*positioned relative to its normal position*/
		}

	/* consider the sub-menu as a separate block - do not update the main menu*/
	nav ul ul {
		position: absolute;		/*positioned relative to ancester element*/
		top: 100%;				/*relative to the main menu*/
	}

	/*position subsequent menus next to their parent menu - no overlap*/
	nav ul ul ul {
		position: absolute;
		left: 100%;
		top: 0%;
	}

/* LAYOUT OF THE MENUS AND SUBMENUS */

nav {
	text-align: left;			/*alignment of the entire menu bar*/
}

	/* the menu */

	nav ul {
		list-style: none;		/*remove the bullets*/
		padding: 0px 0px;		/*padding around each menu (V/H) - note: padding = empty -> watch out for hover*/
		margin: 0px;
	}

	ul.nav0 {
		background: #f1f1f1;	/*color the menu background*/
		width:100%;
	}

	ul.nav1 {
		z-index:25;
		background: #555;	/*color the menu background*/
	}

	/* the menu item */
	ul.nav0 li a {
		padding: 15px 15px;		/*padding around menu item (V/H)*/
		text-decoration: none;	/*remove underline of hyperlink*/
		color: #777;			/*color of the text*/
	}

	ul.nav1 li a {
		padding: 15px 15px;		/*padding around menu item (V/H)*/
		text-decoration: none;	/*remove underline of hyperlink*/
		/*color: #777;*/		/*color of the text is inherited from parent element -> changes when (top) menu is selected*/
	}

	/* menu selection */
	ul.nav0 li:hover {
		background: #555;
	}
		nav ul.nav0 li:hover a { 	/*These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
			color: white;		/*note: this color is inherited by sub-menus*/
		}

	ul.nav1 li:hover {
		background: #777;
	}
		ul.nav1 li a:hover {
			/*color: #555;*/
		}

	/* active menu */

	ul.nav0 li.currentpage {
		background: #555;
	}
		ul.nav0 li.currentpage a {
			color: white;
		}