@charset "utf-8";

/*
	Pure CSS3 animated navbar.
	(c) 2012 Michael Barnathan, originally designed for Project Polymath.
*/

.Navbar {
	display: block;
	vertical-align: middle;
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	position: relative;
	z-index: 3;
}

.Navbar a {
	display: inline-block;
	text-decoration: none;
}

ul.Navbar li {
	-webkit-transition: 0.35s ease-in-out;
	-moz-transition: 0.35s ease-in-out;
	-o-transition: 0.35s ease-in-out;
	-ms-transition: 0.35s ease-in-out;	
	transition: 0.35s ease-in-out;
	transition-property: color,background-color,visibility,opacity,box-shadow;
	-webkit-transition-property: color,background-color,visibility,opacity,box-shadow;
	-moz-transition-property: color,background-color,visibility,opacity,box-shadow;
	-o-transition-property: color,background-color,visibility,opacity,box-shadow;
	-ms-transition-property: color,background-color,visibility,opacity,box-shadow;
	min-width: 8em;
	position: relative;
}

ul.Navbar li {
	padding: 0;
}

ul.Navbar li li { display: list-item; }

/* Transitive submenus */
ul.Navbar li ul {
	text-align: left;
	padding-left: 0;
	position: absolute;
	top: 0;
	left: 0;
	list-style: none;
	z-index: 2;
	background-color: #333333;
	background-color: rgba(51, 51, 51, 0.9);
	-moz-box-shadow: 2px 2px 4px rgba(50, 50, 50, 0.4);
	-webkit-box-shadow: 2px 2px 4px rgba(50, 50, 50, 0.4);
	box-shadow: 2px 2px 4px rgba(50, 50, 50, 0.4);
	width: 15em;
}

ul.Navbar li ul li { padding-left: 1em; }

/* Direct submenus */
ul.Navbar > li > ul {
	left: 100%;
	top: 0;
	border-radius: 10px;
	border-top-left-radius: 0;
}

/* Subsubmenus and below */
ul.Navbar li ul ul {
	left: 15em;
}

ul.Navbar > li > ul > li:first-child { border-top-right-radius: 10px; }
ul.Navbar > li > ul > li:last-child {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

ul.Navbar > li > ul > .ListParent:first-child { border-top-right-radius: 0; }
ul.Navbar > li > ul > .ListParent:last-child {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

ul.Navbar li:hover {
	background-color: rgb(255,96,96);
	background-color: rgba(255,32,32,0.6);
	cursor: pointer;
}

ul.Navbar > li:hover {
	background-color: rgb(32,32,32);
	background-color: rgba(51,51,51,0.5);
}

ul.Navbar li ul {
	visibility: hidden;
	opacity: 0;
	overflow: hidden; /* Don't scroll if this overflows the browser while hidden. */

	/* Disappearing: */
	-webkit-transition: visibility 0s linear 0.4s, opacity 0.6s ease-in 0s;
	-moz-transition: visibility 0s linear 0.4s, opacity 0.6s ease-in 0s;
	-o-transition: visibility 0s linear 0.4s, opacity 0.6s ease-in 0s;
	-ms-transition: visibility 0s linear 0.4s, opacity 0.6s ease-in 0s;
	transition: visibility 0s linear 0.4s, opacity 0.6s ease-in 0s;
}

ul.Navbar li:hover > ul {
	visibility: visible;
	opacity: 1;
	overflow: visible;

	/* Appearing: */
	-webkit-transition: all 0.6s ease-in-out 0s;
	-moz-transition: all 0.6s ease-in-out 0s;
	-o-transition: all 0.6s ease-in-out 0s;
	-ms-transition: all 0.6s ease-in-out 0s;
	transition: all 0.6s ease-in-out 0s;
}