nav {
  z-index: 20;
  position: fixed;
  top: 0;  right: 0; left: auto;
  transition: top 0.3s ease-in-out; /* if it disappears off screen */
  /*background-image: var(--wallpaper);*/
  background-color: var(--background-color-dark);
  text-shadow:  1px 1px 10px var(--shadow-color);
  padding-top: 0.25em;
  padding: 0;
  max-width: max-content;
  font-size: 20px;
}
nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* was nowrap */
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  margin: 0;
  padding: 0em;
  /*padding-right: 40px;*/
  list-style: none;
  font-size: 1em;
  opacity: 90%;
}
@media (orientation: landscape ) {
  nav ul {flex-direction: column; align-items: flex-end; justify-content: flex-end;/*padding-top: 40px; */}
}

nav li { text-align: center; padding: 0; margin-bottom: 0.25em; }
nav div { text-align: right; }

.hamburger-button {
  position: fixed;
  z-index: 999;
  top: .75rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: black;
  width: 30px;
  height: 21px;
  border: 3px solid grey;
  border-radius: 3px;
  opacity: 0.7;
}
.hamburger-button-space { display: flex; width: 30px; }
.hamburger-button .bar {
    display: inline-block;
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

.image-container { position: relative; width: 100%;  }
.magnifying-glass {
  /*display: none;*/
  overflow: hidden;
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  /*cursor: none;*/
  /*Set the size of the magnifier glass:*/
  width: 225px; height: 225px;
}

.map {
  position: relative; display: block; width: auto; max-width: none;
  max-height: none;  /*object-fit: fill; */  margin: auto;  padding: 0px;    pointer-events: auto;
}
.bg-image {  opacity: 1; }

.more::before { content: "\271A  "; }
.less::before { content: "\2012  "; }
/*.more::after { content: ' \00bb'; }
.less::after { content: ' \00ab'; }*/

path, rect, polyline, polygon { stroke-width: 2px; stroke-miterlimit: 10; fill: none; opacity: 0.8; }
rect, polygon { stroke-width: 0.75px;  }

.NP   { stroke: red;   background-color: red;   color: white; }
.hatchNP   { stroke:red; stroke-width:1; fill: url("#hatchNP"); fill-opacity: 0.5; }
span.NP { color: red; background-color: white; }

.GN   { stroke: blue;  background-color: blue;  color: white; }
.hatchGN   { stroke:blue; stroke-width:1; fill: url("#hatchGN"); fill-opacity: 0.5; }
span.GN { color: blue; background-color: white; }

.MILW { stroke: green; background-color: green; color: white; }
.hatchMILW { stroke:green; stroke-width:1; fill: url("#hatchMILW"); fill-opacity: 0.5; }
span.MILW {color: green; background-color: white; }

.streetcar { stroke: purple; background-color: purple; color: white; }
.hatchStreetcar { stroke:purple; stroke-width:0.5; fill: url("#hatchStreetcar"); fill-opacity: 0.5; }
span.streetcar { color: purple; background-color: white; }

.interurban { stroke: orange; background-color: orange; color: black; }
.hatchInter { stroke:orange; stroke-width:0.5; fill: url("#hatchInter"); fill-opacity: 0.5; }
span.interurban {color: orange; background-color: white; }

/* vars. CSS checker doesn't like vars. */
:root {
  --magnifier-display: inline;
}
@media (hover: none) and (pointer: coarse) {/* smartphones, touchscreens */
  :root {
    --magnifier-display: none;
  }
}
.magnifier-display { display: var(--magnifier-display); }

.full { display: inline; } /* big screens */
.abbr { display: none;   }
@media screen and (max-width:750px){ /* small screens */
  .full { display: none; }
  .abbr { display: inline; }
}