/*

menu.css

Handles position and default colors for the menus and breadcrumbs in standard NewHire sites

Styles are grouped:
	Layout/position
	Default colors
		- can be added to a state-specific stylesheet to change the colors

*/

/* Navigation */
/* navigation: layout */
.nav * {
	box-sizing: border-box;
}
.nav ul {
	padding: 0 20px;
	margin: 0;
	font-size: 12px;
	line-height: 100%;
	list-style: none;
}
.nav li {
	display: inline-block;
}
.nav li a,
.nav li a:hover {
	display: inline-block;
	padding: 4px 10px;
	text-decoration: none;
}
.nav .menu {
	display: none;
}
.nav .sub_menu:not(.selected) {
	display: none;
}
.nav .sub_menu.selected {
	display: block;
}

/* Bread Crumb */
/* bread crumb: layout */
.crumb {
	display: none;
	background: rgba(255, 255, 255, 0.27);
}
.crumb ul {
	display: inline-block;
	padding: 0 20px;
	margin: 0;
	font-size: 12px;
	line-height: 100%;
	list-style: none;
}
.crumb li {
	display: inline-block;
	padding: 2px 1px;
}
.crumb li:first-of-type {
	padding-left: 10px;
}
.crumb li+li:before {
	padding-left: 3px;
	padding-right: 4px;
	content: "\000BB";
}
.crumb a {
	font-size: 12px;
	text-decoration: none;
}
.crumb a:hover {
	text-decoration: underline;
}
.timeout {
	float: right;
	font-size: 12px;
	padding: 3px 20px;
}	
@media only screen and (max-width: 800px){
	/* navigation: layout */
	.nav {
		padding: 0px;
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		flex-direction: column;
		margin-bottom: 0px;
	}
	.nav .menu {
		font-size: 9pt;
		padding-left: 10px;
		text-transform: uppercase;
		cursor: pointer;
		display: flex;
		height: 30px;
		justify-content: flex-start;
		align-items: center;
	}
	.nav .menu:after {
		content: ' \25BC';
	}
	.nav ul {
		display: none;
		padding: 0;
	}
	/* nav: open */
	.nav.open {
		height: auto;
	}
	.nav.open .menu:after {
		content: ' \25B2';
	}
	.nav.open li {
		display: block;
		text-align: center;
	}
	.crumb + .homestuff {
		z-index: 0;
		top: 0px;
	}
	.crumb ul {
		padding: 0px 5px;
	}
}
@media only screen and (max-width: 650px){
	.crumb ul {
		display: block;
	}
	.timeout {
		float: none;
		padding: 0px 15px 2px 15px;
		line-height: 125%;
	}
}

/* navigation: colors */

/* selected menu and sub_menu colors: matches the LSP menu; will not change per state */
.nav .selected {
	background-color: #606060;
}
.nav_user.open .sub_menu li {
	border-bottom: 1px solid #4d5152;
}

/* colors that likely will not change per state */
.nav .menu {
	color: #ffffff;
}
/* bread crumb: color */
.crumb a,
.crumb a:visited,
.crumb a:focus,
.crumb a:active,
.timeout {
	color: #696969;
}

/* navigation: default colors (will change per state) */
.nav_main {
	border-top: 1px solid #1e527a;
	border-bottom: 1px solid #1e527a;
	background-color: #1a83ac; 
}
.nav a,
.nav a:visited,
.nav a:active {
	color: #ffffff;
}
.nav a:hover,
.nav a:focus {
	color: #bfe2ff;
}
.nav_user {
	background-color: #0276b8;
}
.nav.open li {
	border-bottom: 1px solid #1e5263;
}
.nav.open li:first-of-type {
	border-top: 1px solid #1e5263;
}
.nav_user.open li {
	border-bottom: 1px solid #006b90;
}

/* Invalid alert */
div.invalid_alert {
	margin:15px; 
	border:1pt solid #000; 
	background-color: #FFF; 
	padding: 8px;
}