/**************************************************************************************************
 * This is a vertical-only menu. It is all css. It is also the menu button. There is an 
 * associated bigmenu.js which is mostly about the items on the toolbar (i.e., logo, etc). 
 * I also use this in roperescuetraining.com, but this is the more up-to-date version.
 *
 * This was initially from http://webdesign.tutsplus.com/tutorials/big-menus-small-screens-responsive-multi-level-navigation--webdesign-8452
 *************************************************************************************************/

/*-------------------------------------------------------------------------------------------------
 * Menu button.
 * This is the menu button at the top. Its text and width are controlled jquery.
 *-----------------------------------------------------------------------------------------------*/
.menuButton {
	/* Prevent the button from being in the wrong location during loading and decided on the size. 
	   We change this in adjustMenu(). */
	display: none;
	/* Colors */
	background: #ddd;
	padding: 8px 15px;
	color: #222 !important;
	/* Position/Size */
	position: relative;
	top: 9px;
	margin-left: 10px;
	width: 110px; /* This is changed by bigmenu.js. */
	text-align: center;
	/* Round corners */
	border-radius: 10px;
}

/*-----------------------------------------------------------------------------------------------*
 * Navigation menu
 * This is the dropdown menu. The menu is always vertical (i.e., inline)
 *-----------------------------------------------------------------------------------------------*/
navMenu, navMenu ul, navMenu li {
	margin: 0;
	padding: 0;
}

/*************************************************************************************************
 * The menu item appearances.
 *************************************************************************************************/

/*-------------------------------------------------------------------------------------------------
 * These control the first-level items in the menu.
 *-----------------------------------------------------------------------------------------------*/
.navMenu {
	display: none;
	list-style: none;
	background: #666;
	min-width: 175px; /* Minimum width of the menu. */
	max-width: 300px; /* Maximum width of the menu. */
	position: absolute;
	top: 48px; /* Height of the toolbar. */
}

	/*---------------------------------------------------------------------------------------------
	 * This only affects the first-level items in the menu.
	 *-------------------------------------------------------------------------------------------*/
	.navMenu > li {
		float: none;
		border-top: 1px solid #333333;
	}

	/*---------------------------------------------------------------------------------------------
	 * These control the second-level menu items.
	 *-------------------------------------------------------------------------------------------*/
	.navMenu li li a {
		display: block;
		background: #777;
		position: relative;
		z-index: 100;
		border-top: 1px solid #333333;
		padding-left: 25px; /* Indent of second-level menu items. */
	}

	/*---------------------------------------------------------------------------------------------
	 * These control the third-level menu items.
	 *-------------------------------------------------------------------------------------------*/
	.navMenu li li li a {
		background: #888;
		z-index: 200;
		border-top: 1px solid #333333;
		padding-left: 40px; /* Indent of third-level menu items. */
	}

	/*---------------------------------------------------------------------------------------------
	 * These control the fourth-level menu items.
	 *-------------------------------------------------------------------------------------------*/
	.navMenu li li li li a {
		background: #999;
		z-index: 300;
		border-top: 1px solid #333333;
		padding-left: 55px; /* Indent of fourth-level menu items. */
	}

	/**************************************************************************************************
 * Hovering colors. Items have the hovering class when they are expanded, I think.
 *************************************************************************************************/

	/*---------------------------------------------------------------------------------------------
	 * This is the mouse-hover color for main menu items (first-level).
	 *-------------------------------------------------------------------------------------------*/
	.navMenu li a:hover {
		background-color: #1155cc;
	}

	/*---------------------------------------------------------------------------------------------
	 * This is the mouse-hover color for sub-menu items (both second-, third-, and fourth-level).
	 *---------------------------------------------------------------------------------------------
	.navMenu li li a:hover {
		background-color: #1155cc;
	}

	/*---------------------------------------------------------------------------------------------
	 * This is the mouse-hover color for sub-menu items (both second-, third-, and fourth-level).
	 *-------------------------------------------------------------------------------------------*/
	.navMenu li li li a:hover {
		background-color: #1155cc;
	}


	/*************************************************************************************************
 * Display "down arrows" for items with sub-items.
 *************************************************************************************************/

	/*------------------------------------------------------------------------------------------------*
 * These affect first-level items that have sub items (i.e., that have second-level items).
 *-----------------------------------------------------------------------------------------------*/
	.navMenu > li > .parent {
		background-image: url("../images/buttons/arrowDown.png");
		background-repeat: no-repeat;
		background-position: 95% 50%;
	}

	/*------------------------------------------------------------------------------------------------*
 * These affect second-level items that have sub items (i.e., third-level items).
 *-----------------------------------------------------------------------------------------------*/
	.navMenu > li li > .parent {
		background-image: url("../images/buttons/arrowDown.png");
		background-repeat: no-repeat;
		background-position: 95% 50%;
	}

	/*------------------------------------------------------------------------------------------------*
 * These affect third-level items that have sub items (i.e., fourth-level items).
 *-----------------------------------------------------------------------------------------------*/
	.navMenu > li li li > .parent {
		background-image: url("../images/buttons/arrowDown.png");
		background-repeat: no-repeat;
		background-position: 95% 50%;
	}

	/*------------------------------------------------------------------------------------------------*
 * This prevents fourth-level items from showing a down arrow. I don't know why this is required,
 * but the third levels arrows affect the fourth unless I do this.
 *-----------------------------------------------------------------------------------------------*/
	.navMenu > li li li li > .parent {
		background-image: none;
	}

	/*************************************************************************************************
 * Stuff I barely understand.
 *************************************************************************************************/

	/*------------------------------------------------------------------------------------------------*
 * This controls the first-level items in the menu. An item must link to something or it doesn't
 * get these properties, I think.
 *-----------------------------------------------------------------------------------------------*/
	.navMenu a {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 15px; /* Indent of second-level menu items. */
		padding-right: 15px;
		color: red; /* This doesn't have any effect. */
	}

	/*------------------------------------------------------------------------------------------------*
 * This controls the second-level items in the menu. I don't understand why, because it looks like
 * it is simply the ul.
 *-----------------------------------------------------------------------------------------------*/
	.navMenu ul {
		list-style: none;
		display: block;
		margin-left: 0;
		width: 100%;
	}

	.navMenu li {
		position: relative;
	}

	/*------------------------------------------------------------------------------------------------*
 * This controls the first-level items in the menu. An item must link to something or it doesn't
 * get these properties, I think.
 *-----------------------------------------------------------------------------------------------*/
	.navMenu > li > a {
		display: block;
	}

	/*------------------------------------------------------------------------------------------------*
 * This is extremely important, although I don't understand it. The "left" seems to move items
 * in "sub" menus (both second and third and fourth) off the screen so they aren't displayed.
 *-----------------------------------------------------------------------------------------------*/
	.navMenu li ul {
		position: absolute;
		left: -9999px;
	}

	/*------------------------------------------------------------------------------------------------*
 * This is required for clicks to display the next level (both the second and third levels).
 *-----------------------------------------------------------------------------------------------*/

	.navMenu > li.hover > ul {
		left: 0;
	}

	/*------------------------------------------------------------------------------------------------*
 * This is required for clicks on items to display the next level. It changes the position of the
 * sub items from -9999px to static. The ">" means, "only do it for this item and not sub items"
 * (or additional levels would be displayed).
 *-----------------------------------------------------------------------------------------------*/
	.navMenu > li.hover > ul, .navMenu li li.hover > ul, .navMenu li li li.hover > ul {
		position: static;
	}