#map {
  display: block;
  margin-left: auto;
  margin-right: auto;

  width: 100%;
  max-width: 640px;
}

#map .state {
}

#map .state-bg {
  fill: silver;
  stroke: midnightblue;
  stroke-width: 0.125em;
}

#map .state-name {
  fill: midnightblue;
  font-family: arial;
  font-size: 0.8em;
  font-weight: bold;
  text-anchor: middle;
}

#map .state-info {
  fill: midnightblue;
  font-family: arial;
  font-size: 0.4em;
  font-weight: bold;
  text-anchor: middle;
}

#state_select {
  xdisplay: none;
}

@media (device-width < 1024px) {
  #state_select { display: inline; }
  #map { xdisplay: none; }
  #map .state-bg {
    stroke-width: 0.0625em;
  }
  #map .state-name {
    font-size: 0.5em;
  }
  #map-list .logo_container, #map-list .logo {
    width: 1.5em;
    height: 1.5em;
  }
  #map-list .tag {
    font-size: 0.65em !important;
  }
}

#map .available .state-bg {
  fill: gold;
}

#map .available:hover .state-bg {
  fill: midnightblue;
}

#map .available:hover .state-name {
  fill: white;
}

#map .available:hover .state-info {
  fill: white;
}

#map .selected .state-bg {
  fill: midnightblue;
}

#map .selected .state-name {
  fill: white;
}

#map .selected .state-info {
  fill: white;
}

#map-list TR {
  vertical-align: top;
}

#map-list .logo {
  margin-right: 0.25em;
  width: 2.5em; height: 2.5em;
  xborder: solid 2px midnightblue;
  border-radius: 0.25em;
  background-size: contain;
}
#map-list .logo.placeholder {
  xborder: solid 2px midnightblue;
  xbackground-image: url(../img/logos/placeholder.png);
}
#map-list .logo.partner {
  xbackground-image: url(../img/logos/partner.png);
}
#map-list .name {
}
#map-list .tag {
  font-size: smaller;
}
#map-list .address {
  font-size: smaller;
}