/* The code to do this - CSS, JavaScript, and HTML originated from w3schools.com/howto/howto_css_dropdown.asp */

a.menu {
    font-size: 12pt;
    color: #c0c0c0;
    font-weight: bold; 
    text-decoration: none; 
    padding: 5px;}
a.menu_here {
    color: #ffffff; 
    font-size: 12pt; 
    font-weight: bold; 
    text-decoration: none; 
    padding: 5px;}
img.menu {
    vertical-align: middle;
    width: 36px;
    height: 25px;
    padding: 4px; }
img.menu_here {
    vertical-align: middle; 
    width: 36px;
    height: 25px; 
    border: 4px solid #ffffff; }
a:hover { color: #000000;
          background-color: #d0d0d0; }
font.menu {
    font-size: 12pt; 
    font-weight: bold; 
    text-decoration: none; }
font.menu_here {
    font-size: 12pt; 
    color: #ffff00; 
    font-weight: bold; 
    text-decoration: none; }
font.menu a:hover { 
    color: #000000;
    background-color: #d0d0d0; }
div.nav {
    width: 100%; 
    text-align: center;
    padding: 5px;
    font-size: 10px;
    background-color: #000080; 
    border: 1px solid #000000; }

nav { text-align: center; }
    
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #000080;
    border: 1px solid #000000;
    z-index: 1;
}

/* Change color of dropdown links on hover */
div.dropdown-content a:hover {
    color: #000000;
    background-color: #d0d0d0; }

/* Links inside the dropdown */
.dropdown-content a {
    padding: 5px;
    text-decoration: none;
    display: block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block; }

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #00ff00; }