/* style for three-level menu */

nav.mc {
	margin: 1em 2em;
	display: inline-block;
	vertical-align: top;
}
nav.mc ul {
	list-style-type: none;	/* remove bullets */
	margin: 0;				/* remove margin */
	padding: 0;				/* remove padding */
	word-spacing: -0.25em;	/* remove space between firt-line elements */
}
nav.mc li {
	position: relative;			/* allow sublevel to measure from relative position */
}
nav.mc > ul > li {
	display: inline-block;		/* to display the main menu as horizontal */
}
nav.mc > ul > li ul {
	position: absolute;		/* this fixes the position in the layout */
	visibility: hidden;
	opacity: 0;		/* hide descendant submenus */
	z-index: 1;
	-webkit-transition: opacity 1s, visibility 1s, top .5s, left .5s; /* For Safari 3.1 to 6.0 */
    transition: opacity 1s, visibility 1s, top .5s, left .5s;
}
nav.mc > ul > li > ul {
	left: 0;			/* second level left positioned */
	top: 130%;			/* set lowered position only for second level */
}
nav.mc > ul ul ul {
	top: 0;			/* same top of parent element */
	left: 105%;		/* third level is absolute positioned too, relatively to the first submenu, but should moved fully to the left... */
}
nav.mc > ul > li:hover > ul {
	top: 100%;
}
nav.mc > ul ul li:hover > ul {
	left: 100%;
}
nav.mc > ul li:hover > ul {
	opacity: 1;
	visibility: visible;	/* show submenus when mouse passes over the father item */
}
nav.mc label {
	display: inline-block;	/* assign a block space to the element */
	padding: 18px 27px;		/* items in a lovely space */
	box-sizing: border-box;		/* uh oh, this allows best fitting */
	line-height: 1.25em;	/* this positions the indicators in a good way */
	cursor: pointer;			/* dear old hand */
	word-spacing: 0;		/* preserve space between words */
	white-space: nowrap;	/* no line break */
	width: 100%;			/* use all available space */
	font-family: Arial, Sans;
	font-weight: bold;
	font-size: 1.2em;
	color: #2056AE;
}

/* SUBMENU INDICATORS */
nav.mc li label > span{
	position: absolute;
	margin-left: 0.2em;
}
nav.mc li li label > span{
	right: 0.2em;
}

/* BACKGROUND COLORS */
nav.mc > ul > li > label {
	background-color: none;	/* first level background */
}
nav.mc > ul > li > ul > li > label {
	background-color: White;	/* second level background */
}
nav.mc > ul > li > ul > li > ul > li > label {
	background-color: White;	/* third level background */
}
nav.mc label.selected {
	background-color: #2056AE;
	color: White;
}
nav.mc label:hover {
	background-color: #2056AE;
	color: White;
}