#navBar {
	position:relative;
 /* background-color:#2E0DE5;*/
  background-color:black;
    width: -webkit-calc(100% - 20px);
    width:    -moz-calc(100% - 20px);
    width:      calc(100%);
  margin:auto;
	height:60px;
	font-size:15px;
	list-style-type: none;
	padding-top:5px;
  display:block;
  text-align: center;
  border: 1px solid darkgray ;
  border-radius: 5px;

}

/*Strip the ul of padding and list styling*/
#navBar ul {	
	position: relative;	
	margin-top:-1px;
	padding: 3px 10px ;	
	list-style-type: none;	
  display:inline-block;
  margin:  auto;
  text-align: center;

}

#navBar ul li {
	position: relative;
	display:inline;	
	float:left;	
	/*width:100px;*/
/*  background-color: blue;
  background-color:rgb(75,103,119);*/
  background-color: rgb(69,114,150);
  height:50px;
  margin:0px 0 2px 8px;	
}
#navBar ul li ul{
	position: absolute;
  margin:auto;
	z-index:10;
  background-color: rgb(69,114,150);
	width:240px;	
  text-align:left;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border:thin black solid;


}
#navBar ul li ul li{
	position: relative;
	display:inline;	
	width:300px;
  
  
 

}



/*  added DL May 3 2023*/

#navBar ul li ul li a{
	display:block;
  width:96%;		
	padding:5px;	
  line-height: 24px;
  height:24px;

}
/* **********************/


/*Style for menu links*/
#navBar li a {	
	padding:2px 15px;
	color:white;
  height: 50px;
	text-decoration: none;
	line-height: 50px;	  
  font-weight: normal;
  font-size:.8em;
  letter-spacing: .02em;	
 /* font-family:"Lucy", sans-serif;*/
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

}

/*Hover state for top level links*/
#navBar ul li a:hover {
/*    color:#666;
	-webkit-transition: all 250ms ease-in;
	-moz-transition: all 250ms ease-in;
	-ms-transition: all 250ms ease-in;
	-o-transition: all 250ms ease-in;
	transition: all 250ms ease-in;
*/
  
}

#navBar ul li:hover {
  color:white;
  background-color: black;
	-webkit-transition: all 250ms ease-in;
	-moz-transition: all 250ms ease-in;
	-ms-transition: all 250ms ease-in;
	-o-transition: all 250ms ease-in;
	transition: all 250ms ease-in; 
  
}

#navBar li:hover a {
	 color:white;
	-webkit-transition: all 250ms ease-in;
	-moz-transition: all 250ms ease-in;
	-ms-transition: all 250ms ease-in;
	-o-transition: all 250ms ease-in;
	transition: all 250ms ease-in;
}

/*Style for dropdown links*/
#navBar li:hover ul a {
	/*height: 34px;
	line-height: 34px;*/
	
	/*color:#fff;*/	
}

/*Hover state for dropdown links*/
#navBar li:hover ul a:hover {
	/*background: #19c589;
	color:#999;*/
  background-color: black;
  color:white;
  
}

/*Hide dropdown links until they are needed*/
#navBar li ul {
	display: none;
	/*background-color:#5F6B77;*/
	z-index:10;
}


/* this was added by me to make the submenu show up DL Dec 2016 */
#navBar li:hover ul {
	display: block;
}


/*Make dropdown links vertical*/
#navBar li ul li {
	display: block;
	float: none;
	width:auto;
}

/*Prevent text wrapping*/
#navBar li ul li a {
	white-space:nowrap;
	display: block;
  font-size: 15px;
	min-width: 60px;
	padding: 0 5px;
  /*width:100%;*/
  font-weight: normal;
  letter-spacing: 0px;
  

}

/*Display the dropdown on hover*/
#navBar ul li a:hover + .hidden, .hidden:hover {
	display: block;
}
/*  +++++++++++++++++++++++++++++  */
/*Style 'show menu' label button and hide it by default*/
#navBar .show-menu {
	padding: 0;
	display: none;
	float:right;
	z-index: 10;
	visibility:visible;
	-webkit-transition: all 250ms ease-in;
	-moz-transition: all 250ms ease-in;
	-ms-transition: all 250ms ease-in;
	-o-transition: all 250ms ease-in;
	transition: all 250ms ease-in;
}

/*Hide checkbox*/
#navBar input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
#navBar input[type=checkbox]:checked ~ #menu{
    display: block; 
}


/*@media only screen and (max-width: 780px) {
@media only screen and (max-width: 1175px) {*/
@media only screen and (max-width: 1000px) {

#navBar {
/*	width:100;
  background-color:  rgb(140,188,208);*/	
  height:40px;
	z-index:10;
}
  
#navBar	ul {
  display: none;
	width: 220px;
  margin-top:38px;	
  margin-right: 7%;
  border: thin black solid;
  box-shadow: 2px 2px 10px Grey;
  padding: 0;
	}		
  
 #navBar li a {	
	padding: 2px 10px;

} 
  
	
	/*Create vertical spacing*/
#navBar	li {
		margin-bottom: 1px;
    
	}
  
#navBar li a {	
	/*color:black;	*/	
}
  
	/*Make all menu links full width*/
#navBar	ul li{
		position:relative;
		width: 100%;
    /*height: 22px;
    height: 30px;*/
		float:none;	
    text-align:left;
    display: block;		
    margin:0; 
	}	
	
#navBar	li a {
		width: 220px;		
		min-width:150px;
    font-size: .8em;
   
	}

#navBar	 ul li ul{
  position:relative;
  left:-24px;
	/*width:150px;*/
	float:none;	
  padding:  5px;
	margin-top:-8px;
  margin-right:40%;
}

#navBar ul li ul li{
	display:inline;	
	float:none;
	/*width:100px;
	height:22px;
	height:15px;
  background-color: blue;*/
}


#navBar ul li ul li a{
	display:block;
  width:96%;		
	padding:5px;	
  line-height: 24px;
  height:24px;
/*	width:100%;		
	margin-right:-5px;
  color:black;*/
}
	
			
/*Display 'show menu' link*/
#navBar	.show-menu {
		width:50px;
		height:30px;		
		/*margin-right:-40px;*/
		margin-top:-12px;		
		cursor:pointer;				
		display:inline;
  }
  
  #navBar	.show-menu img {
    float:right;
    margin-right:20px;
    margin-top:15px;
	
}
  
#menu {	
position:relative;
margin-right:-8px;

}
#menu  li {
	margin-top:-1px;

}
#menu .firstitem {
	padding-top:4px;
	margin-top:5px;
}
}
@media only screen and (max-width: 530px) {		
#navBar	 ul li ul{
	right:40%;	
}
}
@media only screen and (max-width: 420px) {
#navBar	 li a {
		width: 40%;		
}	

#navBar	 ul li ul        {
	right:50%;	
}	
}
@media only screen and (max-width: 360px) {		
#navBar	 ul li ul{
	right:50%;	
}	
  }