@charset "UTF-8";
/* CSS Document */

#navigation-container-backdrop {
	position: absolute;
	/* distance from top = header height + standard scrollbar height of 1.0625 to 
	   position the background color for the top menu items just below the scroll 
	   bar for top-level menu items. This scroll bar is associated with
	   navigation-container, below*/
	top: 4.0623rem; 
	right: 0;
	left: 0;
	z-index: 15;
	height:auto;
}

.top-level-menu-background{
    /* A single-item list is with the same font size as is used in the top-level 
	   menu items to make the background fit the top-level menu items exactly.
	   This bogus list has one item that is a non-printing character to make the
	   list be non-empty (otherwise the list will have no heicht) and has width
	   100% to make the background cover the entire width. */
    width:100%;
    background-color:#315ca5;
	font-size: 1rem;
	list-style-type:none;
	list-style-position: inside;
	margin:0;
	padding:0;
}   


#navigation-container { 
	position: absolute;
	/* The navigation container is placed just below the header. Since the scroll bar
	   is part of his navigation container, it will take up 1.0625rem, thus placing the
	   top-level menu items at the same position as the top-level-menu-background */
	top: 3rem;
	right: 0;
	left: 0;
	height: auto;
	/* border-top-left-radius: 18px;*/  /*Remove the commments for rounder top corners */
	/* border-top-right-radius: 18px;*/
	overflow-x: scroll;
	z-index: 50;
	transform: rotateX(180deg); /* rotate this div 180 degrees to put auto
	                              scrollbar on top instead of bottom */
}
#navigation-container::-webkit-scrollbar {
 height:1.0625rem; /*Standard scrollbar horizontal height (and vertical width) for all browsers*/
}
#navigation-container::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 0.375rem rgba(0,0,0,0.3);
 border-radius: 0.625rem;
 background:rgba(90,120,168,0.5);
}
 #navigation-container::-webkit-scrollbar-thumb {
 border-radius: 0.625rem;
 -webkit-box-shadow: inset 0 0 0.375rem rgba(82,118,145,0.5);
 background:rgba(82,118,145,0.5);
}
#nav {
	position: relative;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0rem;
	height: auto;
	z-index: 50;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	justify-content: flex-start;
	overflow: visible;
	transform: rotateX(180deg); /* Since this div is contained in div nav-div-container-5,
	                              which is rotated 180 degrees (upside down) to place
								  the auto scrollbar on top, this turns the contents
								  of the upside down container to right side up. */
}
#nav li {
	/* no bullets, etc. on list (menu) items */
	list-style: none;
	font-size: 1rem;
}
#nav a {
	/* no underlining of menu items (links) */
	text-decoration: none;
	margin: 0;
	padding: 0;
	font-size:1rem;
}
#nav > ul, nav > ul > li {
	padding:0;
	margin:0;
}
#nav > li {
	/* top level list items configured to show up 
	   horizontally in navigation bar */
	position: relative;
	left: 0;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	font-size:1rem;
	/*float: left; /* list items display horizontally */
	/*vertical-align:top;*/
	overflow: visible;
	z-index: 50;
	white-space: nowrap; /* needed with flex width based on content or breaks occur at blanks */
	flex: 1 0 content;
}
	
#nav > li:last-child > a {
}
#nav > li > a {
	/* text and anchor (link) for each top level list item */
	font-weight: 100;
	display: block;
	padding-top: 0rem;
	padding-bottom: 0rem;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	margin: 0;
	height: auto;/*background-color:#315ca5;*/
}
#nav > li > ul {
	/* second level (dropdown) menus */
	position: relative;
	top: 0;
	width: 12.5rem;
	overflow: auto;
	display: none;
	position: relative;
	z-index: 51;
	height: auto;
}
#nav > li > ul > li {
}
	
#nav > li > ul > li > a {
	/* text and anchor (link) for second level list items */
	font-weight: 100;
	display: block;
	padding-top: 0.0rem;
	padding-bottom: 0.375rem;
	padding-right: 0.625rem;
	padding-left: 0.625rem;
	margin: 0;
	height: auto;
	border-top: 0.1em solid black;
	border-right: 0.1em solid black;
	border-left: 0.1em solid black;
	z-index: 30;
}
#nav > li > ul > li > ul {
	width: auto;
	display: none;
	position: relative;
	z-index: auto;
	height: auto;
	overflow: auto;
}
#nav > li > ul > li > ul > li > a {
	/* text and anchor (link) for each third level list item */
	font-weight: 100;
	display: block;
	padding-top: 0.25rem;
	padding-bottom: 0.375rem;
	padding-right: 0.625rem;
	padding-left: 0.625rem;
	margin: 0;
	height: auto;
	border: thin solid black;
	z-index: auto;
}
#nav li li:last-child > a, ul#nav li li:last-child:hover > a {
	/* all child anchor tags of last li grand- (and great-grandchildren) of the main 
	ul#nav; this puts rounded corners at the bottom of each dropdown menu, and the 
	nested popopout menus */
	border-bottom-left-radius: 1.6em;
	border-bottom-right-radius: 1.6em;
	border-bottom: 0.1em solid black;
}
#nav li li li:last-child > a, ul#nav li li li:last-child:hover > a {
	/* all child anchor tags of last li great-grandchildren of the main 
	ul#nav; this puts rounded corners at the left bottom of each popout menu item;
	the right border bottom is not rounded in order to match the straight right
	side of the enclosing ul*/
	border-bottom-left-radius: 1.6em;
	border-bottom-right-radius: 0em;
}
#nav ul li:last-child ul li:last-child {
	/* (Nothing to test this with yet)
	The last list item in the popout menu of the last list item
	in any dropdown menu (if there is one) should have a rounded right
	bottom corner to match the rounded right bottom corner of its containing ul */
	border-bottom-right-radius: 1.6em;
}
#nav > li:hover > a {
	background-color: #315ca5;
}
#nav li:hover > ul {
	/* hovering over any li (menu item) at levels 1 and 2 will reveal the ul
	contained within that li (if any), since those ul's are initialized with
	"display: none" */
	display: block;
	z-index: 5;
}
/* menu colors */
/*#navigation-container {

	background-color: #315ca5;
}*/

/*#navigation-container-backdrop{
	background-color: #315ca5;
}*/

/* main level link */
#nav a {
	color: #ffbb99;
}
#nav li:hover > a {
	color: #ff0000;
}
/*sub levels link hover */
/*#navigation-container ul#nav ul li:hover a{
	backgound-color: green;
	color: #000;
*/

#nav ul a:hover {
	color: #fff;
}
/* level 2 list */
#nav ul {
}
#nav ul li a {
	background-color: #315ca5;
}
#nav ul ul {
	background-color: #315ca5;
}