/* This is the CSS for the menu.html file */

/* Class for main menu bar which will extend the full length of the window */
.navClass {
	margin:0px;
	padding:0px;
	width:100%; /* use 100% of the width of the browser */
	position:relative;
	z-index:1000; /* This makes the dropdown menus appear above the page content below */
   
	/* This would set the font size as a percent of the default size
	font-size:90%; /* Menu text size */
	/* By removing background enables the part of the NAV bar not used to show the body background
	background:#fff; */
}

.navClass >  ul {
	list-style:none;
	margin:0px;
	padding:0px;
	position:relative;
	text-align:center;
}

/* Class for main menu <li> items */
.navClass >  ul > li {
	display: inline-block; /* Displays the main menu buttons (ul > li) inline */
	vertical-align: top; /* removes the space on top of the inline-block menu */
	border:1px solid darkblue;   /* This is the border around each main menu buttons */
	margin:0px;
	padding:0px;
	position:relative;
}

/* Class for main menu <li><a> items */
.navClass >  ul > li > a,
.navClass >  ul > li > a:visited,
.navClass >  ul > li > a:active
 {
   display:block;
   width:130px; /* The width of each main menu button */
   height:18px; /* The height of each main menu button */
   margin:0px 0px 0px 0px;
   padding:2px 2px;  /* top/bottom left/right */
   font-family: Arial;
   font-size:14px;
   color:#fff;  /* Text color */
   text-decoration:none; /* Remove the underlines from the names that the <a> tag would normally have*/
   line-height:1em;
   /* set the backgroung color. */
   /* background:steelblue; if using only a single color    */
   background: linear-gradient(RoyalBlue, DeepSkyBlue);  /* if using gradient colors  */
}

/* Set the main menu button proprities when hovering over it, if desired  */
.navClass >  ul > li > a:hover,
.navClass >  ul > li:hover > a /* this line will keep the formating
                                  of the main manu item the same
								  even when hovering over the sub menu  */
 {
    /*background:#369;  Background color */
	position: relative;
	padding: 2px;
	margin: 0px;
	color:#000000; /* Text color */
	font-weight:bold;
   /* Needed to make the menu  drop-down appear on top of the image gallery below it */
   z-index: 1000;
}

/* **************************************** */
/* This starts the Sub-Menu buttons section */

/* Class for sub-menu when not hovering over it*/
ul.subMenu {
	/* makes the sub-menu disappear */
	display:none; /* Sub menus are hiden by default */
	/* opacity:0;  removed this in favor of display:none; */
	/* Needed to make the menu  drop-down appear on top of the image gallery below it */
	z-index: 1002;
	position:absolute;
	background-color:#00FFFF;
	list-style-type:none;
	width:130px; /* width of the drop-down menus */
	font-size:14px;
	padding-top:0px;
	padding-left:0px;
	padding-bottom:0px;
	margin-left:10px;
}

/* Class for sub-menu <li> items when not hovering over it*/
ul.subMenu li{
	padding-left:0px;
	padding-top:0px;
	padding-bottom:0px;
	border:1px solid #FFFD80;
}

/* Remove underline from submenu links */
.subMenu >  li > a
  {
    text-decoration: none;
  }

/* Class for sub-menu <li> item when hovering over it*/
ul.subMenu li:hover {
	font-size:16px;
	color:black;
	background-color:#FFFD80;
}

/* class sub-menu when hovering over any li's under navClass */
.navClass li:hover .subMenu {
	/* makes the sub-menu appear */
	display:block; /* Show the sub menus */
}

/* 2021-01-09: Commented out. Does not look to be being used
 .buttonMain  {
   background:green;
   color:#fff;
}
*/