/* navigation bar and its constituents */

/* Adding this to ul.navbar will keep it at the top:
     position: fixed; width: 100vw; max-width: 730px;
   One should also set (approx) "padding-top: 1em;" for h2 titles.
*/

ul.navbar {
  list-style-type: none;
  margin: 0; padding: 0;
  overflow: hidden;
/*  background-color: cornsilk; */
}

ul.navbar li { float:left;  margin-right: 1px; }
#last        { float:right; margin-right: 0px; }

/* button styling */
ul.navbar li > a, .drop button, a.button {
  background-color: #e6f7ff;   /* was: lavender */
  color: black;
  font-family: sans-serif;
  font-size: 1em;              /* was: 14px */
  border: 1px solid blue;
  border-radius: 0.6em;
  padding: 0.25em 0.5em;       /* was: 8px 15px */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}

.drop-menu {
  position: absolute;
  background-color: #e6f7ff;   /* was: lavender */
  border: 1px solid blue;
  border-radius: 0.6em;        /* was: 8px      */
  max-width: 20em;             /* was: 300px    */
  display: none;
}

/* links within dropdown menus */
.drop-menu a {
  color: black;
  font-family: sans-serif;
  padding: 0.25em;             /*was: 3px */
  text-decoration: none;
  display: block;
}

/* what happens on hover */

/* change the color of buttons and menu links */
a.button:hover, ul.navbar a:hover, .drop button:hover {
  color: white;
  background-color: blue;
}

/* show the dropdown menu */
.drop:hover .drop-menu { display: block; }