body {
    font-family: 'Fira Sans', sans-serif;
    margin:0;
    padding:0;
  }
#info {
font-family: 'Droid Sans', Helvetica, Gotham, Arial, sans-serif;
  position:absolute;
  right:0;
  bottom:100px;
  z-index=1;
  visibility: hidden;
}

#map { position:absolute; top:0; bottom:0; width:100%; }
.mapboxgl-popup { z-index:5; }
.dot_marker {
  background-color:lightgray;
  color:white;
  width: 14px;
  height: 14px;
  display: inline-block;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -moz-box-shadow: 0px 0px 2px #888;
  -webkit-box-shadow: 0px 0px 2px #888;
  box-shadow: 0px 0px 2px #888;
  cursor: pointer;
  text-align:center;
}
.dot_marker span {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  vertical-align: middle;
  /*font: 10px/12px 'Helvetica Neue', Arial, Helvetica, sans-serif;*/
  font-weight:bolder;
}
#legend {
  z-index: 6;
  background-color:rgba(255,255,255,0.85);
  font: 14px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  position: absolute;
  right:0px;
  bottom:30px;
  right:10px;
  line-height:120%;
}
#logo {
  z-index: 6;
  position:absolute;
  top:0px;
  left:0px;
  width:200px;
  height:80px;
  -webkit-filter: drop-shadow( -1px -1px 1px #ffffff );
  filter: drop-shadow( -1px -1px 1px #ffffff ); /* Same syntax as box-shadow, except
                                                  for the spread property */
  background-color:rgba(255,255,255,0.5);
  text-align:center;
  cursor: pointer;
}
#about {
  z-index: 6;
  position: absolute;
  left:0px;
  -webkit-filter: drop-shadow( -1px -1px 1px #ffffff );
  filter: drop-shadow( -1px -1px 1px #ffffff ); /* Same syntax as box-shadow, except
                                                  for the spread property */
  background-color:rgba(255,255,255,0.5);
  text-align:center;
  padding: 2px;
}
.about-compact{
  top: 0px;
}
.about-fullsize{
  top: 80px;
}
.logo-compact{
  display:none;
}
.legend-compact{
  padding:5px;
  width:auto;
}
.legend-fullsize{
  width:140px;
  padding: 10px;
}
.logoimg {
  margin-left:auto;
  margin-right:auto;
}
.legend-compact div {
  display:none;
}
table {
  text-align:left;
}
#geolocator_outer{
  border-radius: 4px;
  -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
  overflow: hidden;
  background: #fff;
  position:absolute;
  top:60px;
  right:0px;
  z-index:6;
  margin-right:10px;
  margin-top:0px;
}
#geolocator_inner {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%23333%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
  color:black;
  width:30px;
  height:30px;
  cursor:pointer;
  background-color:rgba(0,0,0,0);
  border:none;
  outline:none;
  padding:none;
  display:block;
  box-sizing:border-box;
}
#geolocator_inner:hover {
  background-color: rgba(0,0,0,0.05);
}
#nice_alert {
  background-color: rgba(0,0,0,0.8);
  color:white;
  width:350px;
  position:absolute;
  top:100px;
  left:0px;
  right:0px;
  margin-left:auto;
  margin-right:auto;
  z-index:9;
  text-align:center;
  font: 14px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  border-radius: 4px;
  -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
  padding-top:5px;
  padding-bottom:5px;
  display:none;
}

.mapboxgl-ctrl-top-right {
  z-index:8;
}

.dot_marker_blue {
  background-color:cornflowerblue;
  z-index:1;
}
.dot_marker_green {
  background-color:forestgreen;
  z-index:2;
}
.dot_marker_yellow {
  background-color:yellow;
  color:black;
  z-index:3;
}
.dot_marker_orange {
  background-color:orangered;
  z-index:4;
}
.dot_marker_red {
  background-color:maroon;
  z-index:5;
}
.legend_marker_blue {
  background-color:cornflowerblue;
}
.legend_marker_green {
  background-color:forestgreen;
}
.legend_marker_yellow {
  background-color:yellow;
  color:black;
}
.legend_marker_orange {
  background-color:orangered;
}
.legend_marker_red {
  background-color:maroon;
}