#mask
{
   background-color: rgba(0,0,0,.5);
   position: fixed;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   z-index: 2;       /* stack above kop+menu */
}

#mask.hidden
{
   opacity: 0;
/* delay visibility toggle until opacity transition has finished to obviate the need for a JS callback */
   -webkit-transition: visibility 0ms linear 500ms, opacity 500ms ease-out;
           transition: visibility 0ms linear 500ms, opacity 500ms ease-out;
   visibility: hidden;
}

#mask.visible
{
   opacity: 1;
/* toggle visibility and transition opacity */
   -webkit-transition: opacity 500ms ease-out;
           transition: opacity 500ms ease-out;
   visibility: visible;
}

.overlay
{
   position: fixed;
/* overlays 1 & 3 are stacked above overlay 2 and slide in from left/right, overlay 2 slides in from top
 * I tried using a scale transform for overlay 2 but then legends lose their fixed position in Safari
 */
   -webkit-transition: transform 500ms ease-out;
           transition: transform 500ms ease-out;
   top: 0;
   width: 100vw;
   height: 100vh;
   z-index: 4;       /* stack above overlay 2 */
}

#overlay2
{
   z-index: 3;       /* stack above mask */
}

#overlay1.hidden { transform: translateX(-100%); }
#overlay2.hidden { transform: translateY(-100%); }
#overlay3.hidden { transform: translateX(100%); }

#overlay1.visible { transform: translateX(0); }
#overlay2.visible { transform: translateY(0); }
#overlay3.visible { transform: translateX(0); }

.overlay > .header,
.overlay > .footer,
.overlay .map-section
{
   max-width: 515px;
   width: 100%;
}

.overlay > .map-section-wrapper
{
   background-color: #fff;
   max-width: 515px;
   max-height: 634px;
   margin: 0 auto;
   position: relative;        /* glyph wrappers have 'position: absolute' */
}

.overlay .map-section
{
   display: block;            /* remove white space at the bottom */
   -webkit-transition: opacity 200ms linear;
           transition: opacity 200ms linear;
}

.overlay > .header,
.overlay > .footer
{
   background-color: #fff;
   color: #f00;
   cursor: default;
   display: block;
   font-family: source;
   margin: 0 auto;
}

.overlay > .header
{
   padding: .5em 1em;
}

.overlay > .header > h2
{
   display: inline;
   font-weight: normal;
   margin: 0;
   padding-right: .25em;
}

.overlay > .header > span,
.overlay > .footer > span
{
   font-weight: bold;
}

.overlay > .footer
{
   max-height: 2.25em;     /* mandated by use of symbol glyphs */
   padding: .5em 1.5em;
   position: relative;
   height: 2.25em;         /* mandated by use of symbol glyphs */
}

.overlay > .footer > span
{
   color: #00b223;         /* green */
}

.overlay > .footer > span:not(.glyph)
{
   margin-top: -.1em;
}

.overlay > .footer > span:nth-child(1)
{
   float: left;
}

.overlay > .footer > span:nth-child(2)
{
   float: right;
   text-align: right;
}

.overlay > .footer > span:nth-child(3)
{
   display: block;
   text-align: center;
}

#overlay1.visible > .footer > span:nth-child(1),
#overlay2.visible > .footer > span:nth-child(3),
#overlay3.visible > .footer > span:nth-child(2)
{
   color: #f00;
}

@media screen and (orientation: landscape)
{
   #overlay1 > .footer > span:nth-child(1),
   #overlay2 > .footer > span:nth-child(3),
   #overlay3 > .footer > span:nth-child(2)
   {
      width: 1em;
      height: 1em;
   }
}

#overlay2 > .footer > span:nth-child(3)
{
   margin: 0 auto;
}

   /* map header + map section + map footer = 719px -- sync this with @media rule in glyph-positions.css */
@media screen and (orientation: landscape) and (max-width: 1280px) and (max-height: 719px)
{
   #mask.visible
   {
      opacity: 0;                            /* hide the mask permanently since overlays have a bg color */
   }

   .overlay
   {
      background-color: #fff;
      clip: rect(auto, auto, auto, auto);    /* clip 145% map sections to overlay height */
   }

   .overlay > .map-section-wrapper
   {
      float: right;
      max-width: none;
      max-height: none;
      right: 0;
      width: auto;
      height: 100%;
   }

   .overlay .map-section
   {
      float: right;
      max-width: none;
      position: relative;
      top: -20%;
      width: auto;
      height: 145%;
   }

   #overlay2.hidden
   {
      transform: translateY(-145%);
   }

   #overlay2 .map-section
   {
      top: -5%;
   }

   .overlay > .header
   {
      background-color: rgba(255, 255, 255, .75);
      margin: 0;
      position: absolute;
      width: 20em;
      z-index: 1;
   }

   .overlay > .footer
   {
      background-color: transparent;
      margin: 0;
      padding: 0;
      position: absolute;
      left: 5%;
      bottom: 10%;
      width: 5em;
   }

   .overlay > .footer > span
   {
      display: block;
      text-align: left;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
   }

   .overlay > .footer > span:nth-child(1),
   .overlay > .footer > span:nth-child(2)
   {
      float: none;
   }

   .overlay > .footer > span:nth-child(3)
   {
      width: auto;
   }

   .overlay > .footer > span:nth-child(1)
   {
      top: -1.75em;
   }

   .overlay > .footer > span:nth-child(2)
   {
      text-align: left;
      top: 1.75em;
   }
}