/* =====================================================================
   Navbar - matches the blue gradient header of the Print Lessons page.
   Blue #2f6fb0, dark #1f2d3d, green #5cb85c, amber #f0ad4e, red #d9534f
   Height stays 56px so the sticky toolbars (top:58px) still line up.
   ===================================================================== */

/* ---------- skip link ---------- */
.skip-link {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 2000;
	padding: 8px 14px;
	background: #fff;
	color: #1f2d3d;
	font-weight: 700;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 14px rgba(0,0,0,.25);
	transition: top .15s ease;
}

	.skip-link:focus {
		top: 0;
		color: #1f2d3d;
		text-decoration: none;
	}

/* ---------- the bar ---------- */
.navbar.navbar-inverse {
	min-height: 56px;
	margin-bottom: 0;
	background-color: #1f2d3d;
	background-image: linear-gradient(135deg, #1f2d3d, #2f6fb0);
	border: 0;
	border-bottom: 1px solid rgba(255,255,255,.12);
	box-shadow: 0 4px 16px rgba(0,0,0,.18);
}

	.navbar.navbar-inverse .navbar-header {
		min-height: 56px;
	}

	.navbar.navbar-inverse .navbar-brand {
		height: 56px;
		padding: 10px 15px !important;
		display: flex;
		align-items: center;
		transition: opacity .15s ease;
	}

		.navbar.navbar-inverse .navbar-brand:hover {
			opacity: .88;
		}

		.navbar.navbar-inverse .navbar-brand img {
			height: 34px !important;
			display: block;
		}

/* ---------- top-level links ---------- */
.navbar-inverse .navbar-nav > li > a {
	position: relative;
	padding-top: 18px;
	padding-bottom: 18px;
	color: rgba(255,255,255,.82);
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: .1px;
	transition: color .15s ease, background-color .15s ease;
}

	.navbar-inverse .navbar-nav > li > a .nav-icon {
		margin-right: 4px;
		font-size: 12px;
		opacity: .8;
		top: 1px;
	}

	/* the green underline slides in on hover and stays on the active page */
	.navbar-inverse .navbar-nav > li > a::after {
		content: "";
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 0;
		height: 3px;
		border-radius: 3px 3px 0 0;
		background: #5cb85c;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform .2s ease;
	}

	.navbar-inverse .navbar-nav > li > a:hover,
	.navbar-inverse .navbar-nav > li > a:focus {
		color: #fff;
		background-color: rgba(255,255,255,.10);
	}

		.navbar-inverse .navbar-nav > li > a:hover::after,
		.navbar-inverse .navbar-nav > li > a:focus::after {
			transform: scaleX(1);
		}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
	color: #fff;
	background-color: rgba(255,255,255,.14);
}

	.navbar-inverse .navbar-nav > .active > a::after {
		transform: scaleX(1);
	}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
	color: #fff;
	background-color: rgba(255,255,255,.18);
}

	.navbar-inverse .navbar-nav > .open > a::after {
		transform: scaleX(1);
	}

.navbar-inverse .navbar-nav > li > a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
}

.navbar-inverse .navbar-nav .caret {
	margin-left: 2px;
	opacity: .7;
}

/* staff and admin groups get a small coloured dot so they stand apart from public links */
.navbar-inverse .navbar-nav > .nav-staff > a .nav-icon {
	color: #9fd3ff;
	opacity: 1;
}

.navbar-inverse .navbar-nav > .nav-admin > a .nav-icon {
	color: #ffd08a;
	opacity: 1;
}

/* thin divider between public links and staff tools */
.navbar-inverse .navbar-nav > .nav-sep {
	width: 1px;
	height: 22px;
	margin: 17px 8px;
	background: rgba(255,255,255,.28);
}

/* ---------- dropdown cards ---------- */
.navbar-inverse .dropdown-menu {
	min-width: 230px;
	margin-top: 0;
	padding: 8px 6px 8px;
	background: #fff;
	border: 1px solid #e5e8eb;
	border-top: 3px solid #5cb85c;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 14px 34px rgba(16,24,32,.22);
	animation: nbDrop .16s ease-out;
}

@keyframes nbDrop {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.navbar-inverse .dropdown-menu > li > a {
	margin: 1px 0;
	padding: 7px 12px;
	color: #1f2327;
	font-size: 13.5px;
	border-radius: 8px;
	transition: background-color .12s ease, color .12s ease;
}

	.navbar-inverse .dropdown-menu > li > a .glyphicon {
		width: 18px;
		margin-right: 4px;
		color: #2f6fb0;
		text-align: center;
	}

	.navbar-inverse .dropdown-menu > li > a .label {
		margin-right: 4px;
		vertical-align: 1px;
	}

	.navbar-inverse .dropdown-menu > li > a:hover,
	.navbar-inverse .dropdown-menu > li > a:focus {
		color: #2f6fb0;
		background: #eaf2fb;
	}

.navbar-inverse .dropdown-menu .dropdown-header {
	padding: 8px 12px 3px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: #6c757d;
}

.navbar-inverse .dropdown-menu .divider {
	margin: 6px 4px;
	background-color: #eef0f2;
}

/* account menu header */
.navbar-inverse .dropdown-menu .account-header {
	margin: -8px -6px 6px;
	padding: 12px 16px;
	color: #fff;
	background: linear-gradient(135deg, #1f2d3d, #2f6fb0);
	text-transform: none;
	letter-spacing: 0;
}

	.navbar-inverse .dropdown-menu .account-header .account-name {
		margin-bottom: 4px;
		font-size: 15px;
		font-weight: 700;
		color: #fff;
	}

.navbar-inverse .dropdown-menu .logout-link,
.navbar-inverse .dropdown-menu .logout-link .glyphicon {
	color: #d9534f;
}

	.navbar-inverse .dropdown-menu .logout-link:hover {
		background: #fdecea;
		color: #b52b27;
	}

/* ---------- account area ---------- */
.nav-account > li > a {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

	.nav-account > li > a::after {
		display: none;
	}

.nav-avatar {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 8px;
	line-height: 30px;
	text-align: center;
	font-size: 13px;
	font-weight: 800;
	color: #1f2d3d;
	background: #fff;
	border: 2px solid rgba(255,255,255,.55);
	border-radius: 50%;
	vertical-align: middle;
}

	.nav-avatar.avatar-teacher {
		background: #f0ad4e;
		color: #fff;
		border-color: rgba(255,255,255,.7);
	}

	.nav-avatar.avatar-admin {
		background: #d9534f;
		color: #fff;
		border-color: rgba(255,255,255,.7);
	}

.nav-username {
	display: inline-block;
	max-width: 130px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}



/* ---------- mobile toggle ---------- */
.navbar-inverse .navbar-toggle {
	margin-top: 11px;
	margin-bottom: 11px;
	border: 1px solid rgba(255,255,255,.45);
	border-radius: 8px;
	transition: background-color .15s ease;
}

	.navbar-inverse .navbar-toggle:hover,
	.navbar-inverse .navbar-toggle:focus {
		background-color: rgba(255,255,255,.16);
	}

	.navbar-inverse .navbar-toggle .icon-bar {
		background-color: #fff;
	}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
	border-color: rgba(255,255,255,.14);
}

/* ---------- phones and tablets (menu is collapsed) ---------- */
@media (max-width: 767px) {
	.navbar-inverse .navbar-collapse {
		max-height: calc(100vh - 56px);
		overflow-y: auto;
		background: rgba(20,32,46,.97);
		box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
	}

	.navbar-inverse .navbar-nav > li > a {
		padding-top: 12px;
		padding-bottom: 12px;
	}

		.navbar-inverse .navbar-nav > li > a::after {
			display: none;
		}

	.navbar-inverse .navbar-nav > .active > a {
		box-shadow: inset 4px 0 0 #5cb85c;
	}

	.navbar-inverse .navbar-nav > .nav-sep {
		display: none;
	}

	/* open dropdowns sit inside the menu instead of floating */
	.navbar-inverse .navbar-nav .open .dropdown-menu {
		margin: 0 10px 8px;
		animation: none;
		border-top-width: 3px;
		border-radius: 10px;
		box-shadow: none;
	}

		.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
			color: #1f2327;
			padding: 8px 14px;
		}

			.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
				color: #2f6fb0;
				background: #eaf2fb;
			}

		.navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-header {
			color: #6c757d;
			padding-left: 14px;
		}

	.nav-account > li > a {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}


}

/* ---------- desktop: show menus on hover as well as click ---------- */
@media (min-width: 768px) {
	.navbar-inverse .navbar-nav > .dropdown:hover > .dropdown-menu {
		display: block;
	}
}

/* ---------- smaller laptops: tighten so the staff menu still fits on one row ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
	.navbar-inverse .navbar-nav > li > a {
		padding-left: 10px;
		padding-right: 10px;
		font-size: 13px;
	}

		.navbar-inverse .navbar-nav > li > a .nav-icon {
			display: none;
		}

	.nav-username {
		display: none;
	}
}

/* ---------- print and motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.navbar-inverse *, .navbar-inverse .dropdown-menu {
		animation: none !important;
		transition: none !important;
	}
}

@media print {
	.navbar, .skip-link {
		display: none !important;
	}

	/* ---------- one common centre line for every top-level item (desktop) ---------- */
	@media (min-width: 768px) {
		.navbar-inverse .navbar-nav > li > a {
			display: flex;
			align-items: center;
			height: 56px;
			padding-top: 0;
			padding-bottom: 0;
			line-height: 1.2;
		}

			.navbar-inverse .navbar-nav > li > a .nav-icon {
				top: 0;
			}

			.navbar-inverse .navbar-nav > li > a .caret {
				margin-left: 6px;
			}

			

		/* avatar and username: back to normal flow now that the item is centred */
		.nav-avatar {
			margin: 0 8px 0 0;
		}
	}

	

		

		

		

		/* phones: two full-width buttons stacked in the open menu */
		@media (max-width: 767px) {
			.navbar-inverse .navbar-nav > li > a.nav-login {
				margin: 8px 15px 0;
				text-align: center;
			}

			
		}


		
	}
}