/* Menus */

/* There are separate vertical and horizontal menu lists. There are two because Javascript is needed for hiding things when accessing the submenus in the vertical menus. Syncing the Javascript and css when switching between horizontal and vertical menus became a convoluted mess that still didn't work.

Where possible, the same css is used for both.
*/

nav {
	font-family: "Raleway";
}

/* Because master.css controls ul ul */
nav ul ul {
	list-style: none;
}

.main-menu {
	pointer-events: auto;
	background-color: #333366;
}

/* Margin to make sure highlight covers horizontally */
.main-menu ul {
	display: none;
	margin-left: 0;
}

.main-menu li {
/*
	background-color: #333366;
*/
	position: relative;
}

/* Used by all labels and a, including sub-menu */
.main-menu li label,
.main-menu li a {
	display: block;
	position: relative;
	padding: 15px 20px;
	font-size: 16px;
	line-height: 20px;
/*	font-weight: 300; */
	color: #fff;
	outline: none;
}

/* Top Menu Items only */
.main-menu > li > label,
.main-menu > li > a {
	font-size: 13px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 2px;
}

/* Hover highlight */
.main-menu input:checked + label:hover:before,
.main-menu li label:hover,
.main-menu li a:hover {
	background: rgba(255,255,255,0.1);
}

/* Vertical Menus Only */

.horizontal-menu {
	display: none;
}

.menu-label,
.menu-trigger {
	position: absolute;
	left: 215px; /* 100px; */
	top: 50%;
	margin-top: -20px;
	width: 43px;
	height: 39px;
	cursor: pointer;
}

.menu-trigger {
	position: relative;
}

/* Something doesn't like vertical-menu as an id */
/* Remove all menu inputs from view */
.vertical-menu input {
	display: none;
}

/* Hide the menu until trigger checkbox checked */
.vertical-menu .menu-wrapper {
	display: none;
}

.vertical-menu .main-menu {
	position: absolute;
	left: 140px;
	width: 100%;
	max-width: 450px;
	margin-top: 20px;
}

.main-menu label {
	cursor: pointer;
}

/* Right Arrow */
.main-menu label:after {
	position: absolute;
	top: 0;
	right: 15px;
	line-height: 50px;
	font-family: FontAwesome;
	speak: none;
/*	-webkit-font-smoothing: antialiased; */
	content: "\3E"; /* content: "\f105"; */
	font-size: 16px;
}

/* The convoluted way to change content in css */
.main-menu input:checked + label {
	visibility: hidden;
	position: relative;
}

/* The convoluted way to change content in css */
.main-menu input:checked + label:before {
	visibility: visible;
	content: "\3C   Back";
	padding: 15px 20px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.main-menu input:checked ~ ul,
.menu-trigger:checked + .menu-wrapper {
	display: block;
}

/* End Vertical Menus Only */

/********************************************/
/********** Mobile size only **********/
/********************************************/
@media only screen and (max-width: 767px) {
	/* Moves the menu button off the logo */
/*
	.menu-label {
		left: 20px;
	}
*/

	.vertical-menu .main-menu {
		left: -30px;
	}
}

/********************************************/
/********** Desktop **********/
/********************************************/
@media only screen and (min-width: 960px) {
	.horizontal-menu {
		display: block;
		padding-top: 20px;
	}

	.vertical-menu {
		display: none;
	}

	.menu-wrapper {
	/*margin-top: 20px; */ /* 44px; */
		text-align: center;
	}

	/* Ensures horizontal centering of menu */
	.menus {
		display: inline-block;
		min-width: 80%; /* Prevents login float from messing with menu */
	}

	.main-menu {
		margin: 0;
		margin-top: 20px;
	}

	.main-menu li {
		background-color: #333366;
		white-space: nowrap;
	}

	/* Top level menu background and horizontal listing with no overlap */
	.main-menu > li {
		background-color: #ffffff;
		float: left;
		padding: 0px 17px;
	}

	/* Used by top level a */
	.main-menu > li > a {
		font-size: 11px;
		color: #333366;
		padding: 0 0 0 2px; /*  0px 18px 0px; */
		margin-bottom: 10px;
		line-height: 1.3;
		border-bottom-width: 3px;
		border-bottom-color: transparent;
		border-bottom-style: solid;
	}

	/* Top level a underscore highlight */
	.main-menu > li.active-menu > a,
	.main-menu > li:hover > a {
		border-bottom-color: #3366aa;
	}

	/* Sub-menu - in line with top menu and limited width */
	.main-menu li ul {
		position: absolute;
		min-width: 190px;
/*		top: 100%;
		z-index: 99; */
	}

	.main-menu li:not:nth-of-type(8) ul {
		left: 0;
	}

	/* Needed to keep admin sub-menu in view when desktop format smallest */
	.main-menu li:nth-of-type(8) ul {
		right: 0;
	}

	/* Sub-menu on hover */
	.main-menu li:hover ul {
		display: block;
	}

	/* Is this used ? */
	.menu-wrapper .main-menu > li:first-child > a {
		padding-left: 0px;
	}

	/* Sub-menu a */
	.main-menu ul li a {
		font-size: 13px;
		padding: 10px 15px;
		border-top-width: 1px;
		border-top-style: solid;
	}
}
/* End Desktop */