/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* See "Chapter Website SetUp.txt"                                         */
/*     "Sample Color Schemes.txt"                                          */
/*     "Menu Setup.txt"                                                    */
/*     "http://www.w3schools.com/html/html_colorvalues.asp"                */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.menuContainer {
	font-family:Arial, Helvetica, sans-serif;
	font-size:0px;
	margin:auto;
	padding:0px;
	text-decoration:none;
}
.menuContainer a {								/*all anchors*/
	color:white;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;    							/*size of menu font*/
	white-space:nowrap;
}
.menuContainer a:hover {						/*all MENU hovers*/
	color:yellow;
	background-color:cornflowerblue;
}
.toggleMenu {									/*reduced MENU*/
	background-color:darkslateblue;
	border:1px solid white;
	color:white;
	display:none;
	margin:auto;
	padding:4px 12px;
	text-decoration:none;
}
.toggleMenu img {
	border:0px;
	padding-left:6px;
	vertical-align:top;
}
#menuDiv {									/*centers menu*/
	display:table;
	margin:0px auto;
	padding:0px;
}
.nav {
	list-style-type:none;
	margin:0px auto;
	padding:0px;
}
.nav ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}
.nav li {									/*1st menu level*/
	background-color:darkslateblue;
	margin:0px auto;
	padding:4px;
	position:relative;
	text-align:center;
}
.nav > li {
	float:left;
	margin:0px auto;
	padding:0px;
}
.nav a {									/*1st menu level*/
	color:white;
	margin:0px;
	min-width:28px;
	padding:4px 14px 4px 7px;
	text-decoration:none;
}
.nav > li > .parent {
	background-image:url('../graphics/arrowDown.png');
	background-repeat:no-repeat;
	background-position:97% 10px;						/*right*/
}
.nav > li li > .parent {
	background-image:url('../graphics/arrowRight.png');
	background-repeat:no-repeat;
	background-position:97% 7px;						/*right*/
}
.nav > li > a {
	border:1px solid white;
	display:block;
}
.nav li ul,
.nav li li ul {
	left:-9999px;
	position:absolute;
}
.nav > li.hover > ul {
	left:0;
}
.nav li li.hover ul {
	left:100%;
	top:0;
}
.nav li li {										/*2nd menu level*/
	margin:0px auto;
	padding:0px;
	text-align:center;
}
.nav li li a {										/*2nd menu level*/
	background-color:mediumblue;
	border-top:1px solid white;
	border-left:1px solid white;
	border-right:1px solid white;
	border-bottom:0px;
	display:block;
	position:relative;
	z-index:100;
}
.nav li li li {										/*3rd menu level*/
	margin:0px auto;
	padding:0px;
	text-align:left;
}
.nav li li li a {									/*3rd menu level*/
	background-color:royalblue;
	border-top:1px solid white;
	border-left:1px solid white;
	border-right:1px solid white;
	border-bottom:0px;
	z-index:200;
}
.nav li li a.diffColor2,
.nav li li li a.diffColor2 {
	background-color:#6666ff;
}
.nav li li a.diffColor2:hover,
.nav li li li a.diffColor2:hover {
	background-color:cornflowerblue;
}
.nav li li:last-child a,							/*2nd menu level*/
.nav li li li:last-child a {						/*3rd menu level*/
	border-bottom:1px solid white;
}
/* For Narrow View */
@media screen and (max-width:620px) { 
.menuContainer, 
.menuContainer a {font-size:16px}					/*Allows for larger area*/
#menuDiv {width:98%}								/*change MENU width*/
.active,
.nav ul {display:block}
.nav > li {float:none}
.nav > li li > .parent {background-image:url('../graphics/arrowDown.png')}
.nav > li.hover > ul, 
.nav li li.hover ul {position:static}
.nav li li li {text-align:center}
}