#header-banner {
  display: block;
  border: 0;
}

#header-menu {
  color: rgb(238, 238, 238);
  background-color: rgb(51, 51, 51);
  width: 100%;
  border-bottom: 4px solid #0077bb;
  /* flex (instead of inline-block items) so whitespace between <li>s in the
     HTML doesn't render as gaps */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#header-menu li {
  list-style: none;
  padding: 8px 16px;
}

#header-menu li a {
  color: #cdcdcd;
  text-decoration: none;
}

#header-menu li.selected {
  background-color: #0077bb;
}

#header-menu li.selected a,
#header-menu li:hover a {
  color: #eee;
}

#header-menu li:hover {
  background-color: rgb(68, 68, 68);
  cursor: pointer;
}