#navSubMenu 	{/* navigation navSubMenu container */
	width: 90%;
	height:90%;
	position: fixed;
	right: 0;	/* centered in client window page */
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	display:"block";
	/*border: 1px solid black;*/ /* border for testing */
	/* removed background image, since sizing doesn't work in IE-8 */
	visibility: hidden;
	opacity:0;
	transition:opacity 1000ms;
	pointer-events: auto; /*/ ??? */
	z-index: 3; /* place over main menu */
	}
	
	
.navFadeImg { /* magic close image */
	position: fixed;
	width: 80%;  /* centered within bounding div */
	height: auto;
	right: 0;	/* tweak these */
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	}
	
#navSubMenuTxt {
    position: fixed;
 	width: 60%;  /* centered within bounding div */
	height: 62%;
	right: 0;	/* tweak these */
	left: 0;
	top: 10%;
	bottom: 0;
	margin: auto;
	display:"block";
	text-align:center;
	overflow: auto; /* auto on browsers I can block scrollbars */
    visibility: inherit;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box; 
	/* 	border: 1px solid black; */ /*for tests*/
	}
 
 
/* as of 9/2020, universal method to block scrollbars when its possible */
.avoidScroll { 
	-ms-overflow-style: none; scrollbar-width: none; overflow: -moz-scrollbars-none;} /*IE+10, FFox */
.avoidScroll::-webkit-scrollbar {display: none; } /* Safari and Chrome */


	
#navSubMenuTitle {
	position: fixed;
 	width: 60%;  /* centered within bounding div */
	height: 100%;
	right: 0;	/* tweak these */
	left: 0;
	top: 15%;
	bottom: 0;
	margin: auto;
	visibility: inherit;
	text-align:center;
	/* just for test. Don't need border */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box; 
	}


#navBack { 	/* back button graphic */
  	position: fixed;
	width: 15%;
	height: auto; 
  	left:20%;
	top: 10%;
	z-index:3;
  }
 #navBack:hover, #navBack:focus, #navBack:hover, #navBack:focus {   cursor: pointer; }

 
 #navtopSub {		/* subMenu top heading text */
    font-size: 100%; 
	position: fixed;
	width: 76%;
	left: 12%;
	top: 18%;
	 }

	
#submHR { 
	border: 1px solid gray;  
	position: fixed;
	width: 50%; 
	margin: auto;
	right: 0;	
	left: 0;
	top:22%;
	  }

		
.vSpaceTrans {
	margin-bottom: .4em;
	transition: color 500ms ease;
	}
		
	/*navFontStyles font-size now OK, since it applied to inside DIV only*/
.navFontStyles{
	font-family : "Comic Sans MS","Comic Neue","comic", "Chalkboard SE", "cursive","Times New Roman", Times, serif;
	line-height: 1;  
	font-weight : bold;
	font-style : italic;
	font-size: 180%; /* fallback */ font-size: 4vw;
	}

/* common styles for all common clickable NAV text */
.navFontStyles, .lower_nav2 {
	filter: glow(color=black,strength=4);  /*only works with IE */
	text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000, -1px -1px .2em #000, 1px -1px .3em #000, -1px 1px .4em #000;
	color: #ff6699;  /*linkred */
	cursor: pointer;
	}


.starsH:hover, .starsH:focus{
  background-image: url('/Images/starsHorizRect.gif');
  background-repeat: repeat;
  background-size: 40%;
  background-position: left;
  /*transition:  not animatable! */
 }




#navStripe {	/* Nav shortcut stripe for every page , replaces .bg_greenNav*/
	left:0;
	right:0;
	bottom: 0;
	margin: auto;
	height: auto;
	max-height: 40px;
	position: fixed;
	display: block;
	visibility: hidden;
	background-color:#09774d;	/* no affect... see .lower_nav2 */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box; 
	z-index:3;
	/*border: 1px solid black; */
	}
	
.navIMG{ width:auto; max-height:20px;  } 
#innerNavGroup {height:20px;} 

.lower_nav2 { /* for lower nav bar  items*/
	display:table-cell; /* forces horizontal layout */
	font-weight : bold;
	font-style : italic;
	text-decoration: none;
	text-align: center;
	vertical-align: middle; 
	font-family : "Times New Roman", Times, serif;
	font-size: 75%;
	height:100%; /* need for old firefox and old IE;*/
	margin: 0;
	padding: 0;
	/*width:25%; */
	background-color:#09774d;*/
	margin:0; padding-top:2px;
	}

	.lower_nav2:hover, .lower_nav2:focus {
	background-color:#003333; 
	transition: background-color 2000ms ease, color 500ms ease;
	}
	
/* and  (orientation: portrait ?? */
@media screen and (min-device-width: 320px) and (max-width: 600px)  { 
	/*.navFontStyles {	font-size: 100%; } */ /* main */
	.navFontStyles {	font-size: 180%; } /* sub */
	#navtopSub { font-size: 85%; top: 15%; } /* subMenu top heading text */
	.vSpaceTrans { margin-bottom: .8em;}
	#innerNavGroup {height:20px;} /* bottom NAV bar shortcut */
	 }
	 
	/* browse test button, while lowerNAV developed */
	#navViewID {	
	width: 15%;
	min-width: 100px;
	height: auto;
	position: fixed;
	left: 10%;	
	top: 2%;
	display:"block";
	border: 0;
	visibility: visible;
	transition: all 500ms ease;
	}