@charset "UTF-8";
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* See "Chapter Website SetUp.txt"                                               */
/*     "Sample Color Schemes.txt"                                                */
/*     "Menu Setup.txt"                                                          */
/*     "https://www.w3schools.com/colors/colors_names.asp"                       */
/*      chsample2 - firebrick; max 3 menu levels, each level may vary color      */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*	option 1 menu shades of red                                                  */
/*	--myMenuContainer:#B22222;   firebrick;                                      */
/*	--myMenuFontColor:white;                                                     */
/*	--mySkinColor:darkblue;      #MainContent Border                             */
/*	--myMenu1Skin:#B22222;	    firebrick                                        */
/*	--myMenu2Skin:#DC143C;	    crimson                                          */
/*	--myMenu3Skin:#CD5C5C;	    indianred                                        */                              
/*	--myMenuHover:red;                                                           */
/*                                                                               */ 
/*	 background-image:    none - this element not needed for option 1            */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*	Option 2 menu shades of blue                                                 */
/*	--myMenuContainer:#B22222;   firebrick;                                      */
/*	--myMenuBorder:snow;                                                         */
/*	--myMenuFontColor:white;                                                     */
/*	--mySkinColor:darkblue;      #MainContent Border                             */
/*	--myMenu1Skin:#191970;	     Midnightblue                                    */
/*	--myMenu2Skin:#0000CD;	     Medium Blue                                     */
/*	--myMenu3Skin:#4169E1;	     Royal Blue                                      */
/*	--myMenuHover:blue;                                                          */
/*                                                                               */ 
/*	background-image:url('../graphics/bkgrnd_royal_blue_stoned.jpg');            */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
:root {
	--myMenuContainer:#B22222;
	--myMenuBorder:white;
	--myMenu2BorderTopBottom:white;
	--myMenu2BorderLeftRight:#CD5C5C;
	--myMenuFontColor:white;
	--mySkinColor:darkblue;
	--myMenu1Skin:#B22222;
	--myMenu2Skin:#DC143C;
	--myMenu3Skin:#CD5C5C;
	--myMenuHover:red;
}
.menuContainer {
	background-image:url('../graphics/bkgrnd-red-menu.png');
	background-repeat:repeat;
	border:medium navy solid;
	border-top:medium var(--mySkinColor) solid;
	border-bottom:0;
	border-left:medium var(--mySkinColor) solid;
	border-right:medium var(--mySkinColor) solid;
	clear:both;
	color:white;
	color:var(--myMenuFontColor);
	font-family:Arial, Helvetica, sans-serif;
	margin:auto;
	padding:0px;
	text-decoration:none;
}
.menuContainer a {			/* all anchors within the menuContainer */
	font-family: "PT Serif", serif, sans-serif;
	font-style: normal;
	font-weight: 700;
	text-shadow:1px 1px 1px black;
	font-size:14px;    						/* size of MENU font */
	white-space:nowrap;
}
.menuContainer a:hover {					/* all MENU hovers*/
	background-color:red;
	background-color:var(--myMenu1Skin);
	color:yellow;
}
.toggleMenu {								                  /* reduced MENU   */
	background-image:url('../graphics/bkgrnd-red-menu.png');  /* 1st menu Level */
	background-repeat:repeat;
	border:thin white solid;
	border:thin var(--myMenuBorder) solid;
	color:white;
	color:var(--myMenuFontColor);
	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-image:url('../graphics/bkgrnd-red-menu.png');
	background-repeat:repeat;
	margin:0px auto;
	padding:4px;
	position:relative;
	text-align:center;
}
.nav > li {
	float:left;
	margin:0px auto;
	padding:0px;
	text-align:center;
}
.nav a {
	color:white;
	margin:0px;
	padding:4px 14px 4px 7px;
	text-decoration:none;
}
.nav > li > .parent {
	background-image:url('../graphics/arrowDown.png');
	background-position:97% 10px;
	background-repeat:no-repeat;
}
.nav > li li > .parent {
	background-image:url('../graphics/arrowRight.png');
	background-position:97% 7px;
	background-repeat:no-repeat;
}
.nav > li > a {
	border:thin snow solid;
	border:thin var(--myMenuBorder) solid; 
	background-image:url('../graphics/bkgrnd-red-menu.png');
	background-repeat:repeat;
	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,
.nav li li li {
	margin:0px auto;
	padding:0px;
	text-align:center;						/*left;center;right*/
}
.nav li li a {								/* 2nd menu level */
	background-color:crimson;
	background-color:var(--myMenu2Skin);
	border:thin red solid;
	border-top:thin var(--myMenu2BorderTopBottom) solid;
	border-bottom:thin var(--myMenu2BorderTopBottom) solid;
	border-left:thin var(--myMenu2BorderLeftRight) solid;
	border-right:thin var(--myMenu2BorderLeftRight) solid;
	display:block;
	position:relative;
	z-index:100;
}
.nav li li li a {							/* 3rd menu level */
	background-color:indianred;
	background-color:var(--myMenu3Skin);
	border:thin #B22222 solid;
	border-top:thin var(--myMenu2BorderTopBottom) solid;
	border-bottom:thin var(--myMenu2BorderTopBottom) solid;
	border-left:thin var(--myMenu2BorderLeftRight) solid;
	border-right:thin var(--myMenu2BorderLeftRight) solid;
	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;
}
/* Narrow Device Styles - - - - - - - - - - - - -*/
/* @media screen is also in tx-tmpl-bodyStyle.css*/
@media screen and (max-width:570px) { 		/* tx-tmpl-menu-Style.css */
.menuContainer, 							/* Allows for larger area */
.menuContainer a {font-size:14px}
#menuDiv {width:100%}						/* Change menu width     */
.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}
}