/* I got this from http://webdesign.tutsplus.com/tutorials/big-menus-small-screens-responsive-multi-level-navigation--webdesign-8452 and modified it. */

/*-----------------------------------------------------------------------------------------------*
 * Menu button.
 * This is the menu button at the top. Its text and width are controlled jquery.
 *-----------------------------------------------------------------------------------------------*/
.menuButton {
	/* Colors */
	background: #666;
	padding: 10px 15px;
	color: #fff;
	/* Position/Size */
	position: relative;
	float: right;
	top: 19px; /* homeButton:top and menuButton:top should be the same. */
	margin-right: 19px;
	width: 30px;
	text-align: center;
	/* Round corners */
	border-radius: 10px;
}

/*-----------------------------------------------------------------------------------------------*
 * Navigation menu
 * This is the dropdown menu. It is always vertical (i.e., inline), although this class originally 
 * supported a horizontal menu, too. There may still be some support for horizontal in this css).
 * Hum, this also applies to the normal ul and li. Scary.
 *-----------------------------------------------------------------------------------------------*/
.navMenu, ul, li {
	margin: 0; 
	padding: 0;
	right: 10px; /* "Floats" it to the right with this padding. */
	text-align: left;
}

.navMenu {
	z-index: 100;
}
/*************************************************************************************************
 * 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. */
	margin-left: 10px;
	margin-top: 0;
    position: absolute;
    top: 50px;
}

/*-----------------------------------------------------------------------------------------------*
 * 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.
 *************************************************************************************************/

/*-----------------------------------------------------------------------------------------------*
 * 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;
    width: 100%;
}

	.navMenu li {
		/* position: relative; I had to remove this for help.vrigger.com's right-sided menu. */
	}

/*-----------------------------------------------------------------------------------------------*
 * 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;
}