.main-header-light {
	background-color: #FFFFFF;
}
.main-header-dark {
	background-color: #01181F;
}
/* MENU STARTS */
nav img {
	max-width: 100%;
}
nav ul {
	border: medium none;
	border-radius: 0;
	display: inline-table;
	list-style: outside none none;
	margin: 0;
	height:35px;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
}
.menu-container-light {
	background-color: #FFFFFF;
	text-align: left;
}
.menu-container-no-bg {
	text-align: left;
}
.menu-container-dark {
	background-color: #01181F;
	text-align: left;
}
/*shared*/
.menu-container > ul > li {
	display: inline-block;
}
/*shared*/
.menu-container > ul {
	font-size: 0;
}
/*shared*/
.menu-container > ul > li > span {
	display: block;
	font-size: 16px;
	letter-spacing: .05em;
	line-height: 1;
	padding: 7px 35px 7px 15px;
}
.menu-container-light > ul > li > span {
	color: #012834;
}
.menu-container-no-bg > ul > li > span {
	color: #012834;
}
.menu-container-dark > ul > li > span {
	color: #ffffff; 
}

/* DROPDOWN STARTS */
.menu-container ul li:not(.has-megamenu),
.menu-container {
	position: relative;
}
.menu-container-light ul ul {
	min-width: 100%;
	color: #FFFFFF;
 	background-color: #FFFFFF;
	position: absolute;
	left: 0; /*** if we want to left align adjust this ***/
	top: 100%;
	z-index: 999;
 	visibility: hidden;
	opacity: 0;
	transform: rotateY(45deg);
	border-top: 2px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
}
.menu-container-no-bg ul ul {
	min-width: 100%;
	color: #FFFFFF;
 	background-color: #FFFFFF;
	position: absolute;
	left: 0; /*** if we want to left align adjust this ***/
	top: 100%;
	z-index: 999;
 	visibility: hidden;
	opacity: 0;
	transform: rotateY(45deg);
	border-top: 2px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
}
.menu-container-dark ul ul {
	min-width: 100%;
	color: #01181F;
 	background-color: #01181F;
	position: absolute;
	left: 0; /*** if we want to left align adjust this ***/
	top: 100%;
	z-index: 999;
 	visibility: hidden;
	opacity: 0;
	transform: rotateY(45deg);
	border-top: 2px solid #01181F;
	border-bottom: 3px solid #01181F;
}
.menu-container ul ul li {
	display: block;
	/*** left:0 if we want to left align adjust this ***/
}
.menu-container-light ul ul li > span{
	background-color: #FFFFFF;
	color: #012834;
	font-size: 13px;
	letter-spacing: .05em;
	padding: 6px 35px 6px 15px;
	white-space: nowrap;
	display: block;
}
.menu-container-no-bg ul ul li > span{
	background-color: #FFFFFF;
	color: #012834;
	font-size: 13px;
	letter-spacing: .05em;
	padding: 6px 35px 6px 15px;
	white-space: nowrap;
	display: block;
}
.menu-container-dark ul ul li > span{
	background-color: #01181F;
	color: #fff;
	font-size: 13px;
	padding: 6px 35px 6px 15px;
	white-space: nowrap;
	display: block;
}

/* 2nd,3rd etc level sub menu */
.menu-container ul ul ul {
	left: 100%;
	top: 0;
}

/* DROPDOWN ARROW */
.has-dropdown > span {
	position: relative;
}
.has-dropdown > span:after {
	content: '';
	width: 0;
	height: 0;
	border-width: 6px 5px 5px;
	border-style: solid;
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -2px;
	transition: all .19s;
}
.has-dropdown-light > span:after {
	border-color: #4BCD3E transparent transparent transparent;
}
.has-dropdown-dark > span:after {
	border-color: #ffffff transparent transparent transparent;
}

/* WHEN HOVER */
.menu-container > ul > li > span,
.menu-container ul ul,
.has-dropdown > span:after {
	transition: all 400ms linear 0ms;
}
.menu-container li > ul > li >span:hover {
	transition: background-color 300ms linear 0ms;
}

.menu-container li:hover > ul {
	visibility: visible;
	opacity: 1;
	transform:  rotateY(0)
}
.menu-container-light li:hover > span {
	background-color: #F5F5F5; 
	cursor: pointer; 
}
.menu-container-no-bg li:hover > span {
	background-color: #F5F5F5; 
	cursor: pointer; 
}
/* menu option shows as enabled but perform no action on click */
.menu-container-light li.non-clickable:hover > span {
	background-color: #F5F5F5; 
	cursor: auto; 
	pointer-events: none;
}
.menu-container-no-bg li.non-clickable:hover > span {
	background-color: #F5F5F5; 
	cursor: auto; 
	pointer-events: none;
}
.menu-container-dark li:hover > span {
	background-color: #012834;
	cursor: pointer; 
}
/* menu option shows as enabled but perform no action on click */
.menu-container-dark li.non-clickable:hover > span {
	background-color: #012834;
	cursor: auto;
	pointer-events: none;
}
/* show menu option as disabled and perform no action on click  */
.menu-container-light li .disabled > span {
	/* CHROME TODO colors for light menu when a menu option is disabled */
	pointer-events: none;
}
.menu-container-no-bg li .disabled > span {
	/* CHROME TODO colors for light menu when a menu option is disabled */
	pointer-events: none;
}
.menu-container-dark li .disabled > span {
	background-color: #01181F;
	color: #34535E;
	pointer-events: none;
}

.has-dropdown:hover > span:after {
	border-width: 5px 4px 4px;
	transition: all 1s ease;
	transform: rotate(180deg);
	opacity: 1;
}

.has-dropdown .has-dropdown:hover > span:after  {
	transform: translate(0) rotate(-90deg);
	top: 50%;
	margin-top: -4px;
	right: 15px;
	bottom: auto;
}

/** app entry specific **/
.app-entry-tabs-container > ul > li > span {
	padding: 7px 25px;
}

#top-level-container {
	position:relative;
}


/* end overview banner */



/** When multiple menus are available within a screen we need to have the menu that is physically 
HIGHER up to have a higher index so that it shows up on top of the menu that is lower in the 
screen.  Building out multiple levels but likely we will never use them. **/
.level-one-menu {
	z-index: 99;
}
.level-two-menu {
	z-index: 98;
}
.level-three-menu {
	z-index: 97;
}
.level-four-menu {
	z-index: 96;
}

.menu-separator {
	background-color: #34535E;
	height: 1px;
}

.subcolumnheader-menu-container-color {
	background-color: #012834;
}