/* */

 ul {
    list-style-type: none;
    }
    
 li {
    padding: 0.2em;
    }
 
 input[type=submit] {
    width: 12em;
    /*background-color:darkgreen;
    color:white;
     background-color:gold; */
    border: solid 1px;
    padding: 0.2em;
    font-size:1.2em;
    }

 .menu input[type=submit] {
    width: 15em;
    background-color:darkgreen;
    color:white;
    /* background-color:gold; */
    border: solid 1px;
    padding: 0.2em;
    font-size:1.2em;
    }

.menu ul {
  list-style-type: none;
  margin: 0 2.5em 0 2.5em; /* 2.5*/
  padding: 0;
  overflow: hidden;
  border: 1px solid grey; /* #e7e7e7; */
  background-color: #4CAF50; /* #f3f3f3; */
  color: white;
}

.menu li {
  float: left;
}

.menu li a {
  display: block;
  background-color: black; /* #666; */
  color: white;
  text-align: center;
  padding: 1.0em;
  /* padding: 14px 16px; */
  text-decoration: none;
}

.menu li a:hover:not(.active) {
  color:white;
  background-color: darkgreen ; /*#ddd; */
}

.menu li a.active {
  color: white;
  background-color: green; /* #4CAF50;   */
}

/* TOP NAVIGATION */

.topnav {
  margin: 0 2.5em 0 2.5em; /* 2.5*/
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 1.0em; /*padding: 14px 16px;*/
  text-decoration: none;
  font-size: 1.0em; /* 17px; */
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  /*background-color: darkgreen;*/
   background-color: #4CAF50;
  color: white;