#map-wrapper
{
   margin-bottom: 3em;
   max-width: 675px;
   max-height: 343px;
   position: relative;
   left: 4.5em;
   top: .75em;
   width: 100%;
}

#map > img
{
   display: block;
}

.label
{
   font-size: .7em;
   position: absolute;
   white-space: nowrap;
}

#label1 { left: 11.5em;  top: -2em; }
#label2 { left: 31em;    top:  1em; }
#label3 { left: -6em;    top: 11.25em; }
#label4 { left: 48em;    top: 14em; }
#label5 { left: 11.25em; top: 24.75em; }
#label6 { left: 31em;    top: 24.75em; }
#label7 { left: 48em;    top: 21.25em; }

.sensor
{
   position: absolute;
   top: 0;
   width: 33.3%;
   height: 100%;
}

#sensor1 { left: 0;     }
#sensor2 { left: 33.3%; }
#sensor3 { left: 66.6%; }

.sensor-label-wrapper
{
   display: table;
   position: absolute;
   width: 3em;
   height: 3em;
}

#sensor-label-wrapper1 { left: 17%; top: 45%; }
#sensor-label-wrapper2 { left: 43.5%; top: 42%; }
#sensor-label-wrapper3 { left: 79%; top: 48.5%; }

.action-indicator
{
   background-position: left top;
   background-repeat: no-repeat;
   background-size: contain;
   display: table-cell;
   opacity: .15;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}

.action-indicator.hidden
{
   opacity: 0;
}

.action-indicator.stage0 { background-image: url("../pix/plattegrond/action-indicator-stage0.svg"); }
.action-indicator.stage1 { background-image: url("../pix/plattegrond/action-indicator-stage1.svg"); }
.action-indicator.stage2 { background-image: url("../pix/plattegrond/action-indicator-stage2.svg"); }
.action-indicator.stage3 { background-image: url("../pix/plattegrond/action-indicator-stage3.svg"); }

.sensor-label
{
   color: #ffc701;
   display: table-cell;
   font-size: 1em;
   font-weight: bold;
   opacity: 1;
   text-align: center;
   vertical-align: middle;
   width: 100%;
   height: 100%;
}

.sensor-label.hidden
{
   opacity: .4;
}

.sensor-label,
.action-indicator
{
   -webkit-transition: opacity 250ms linear;
           transition: opacity 250ms linear;
}

   /* these two used by plattegrond.js to dim map sections and glyphs */
.normal { opacity: 1; }
.dimmed { opacity: .5; }

@media screen and (max-width: 950px)
{
   .label
   {
      display: none;
   }

   #map-wrapper
   {
      margin-bottom: 0;
      left: 0;
      top: 0;
   }
}

@media screen and (max-width: 360px) and (orientation: portrait)
{
   .sensor-label-wrapper
   {
      font-size: 75%;
   }
}