body {
  font-family: "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  background-color: #fff;
  color: #444;
  font-size: 16px;
  margin: 0;
  padding-bottom: 100px;
}

a {
  text-decoration: none;
}

#map {
  position: relative;
  top: 0;
  width: 100%;
  height: 900px;
  z-index: 10;
}

h1 {
  font-size: 24px;
  text-align: center;
}

#content-wrap {
  position: relative;
  width:1200px;
  margin: auto;
  margin-top: 30px;
  padding-bottom: 100px;
  left: 0;
  right: 0;
}

.leaflet-top {
  top: 10px;
}

.nav {
  text-align: center;
  font-size: 17px;
}

#intro-map {
  width: 900px;
  height: 600px;
}

#map-description {
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
  margin: 30px 0;
}

.about_img {
  display: block;
  background: url('screen.png');
  width: 120%;
  height: 150px;
  margin: 25px auto;
  margin-left: -10%;
}

.ts-error {
  margin:0px;
  padding:0px;
  color:#222;
  font:normal 13px/20px Arial,sans-serif;
}

a,
.ts-error a {
  color:#489;
  text-decoration:none;
}

/* ### General control styles ### */
.close,
.share,
.zoomer {
  display:block;
  position:absolute;
  border:1px solid #ccc;
  background:#fff;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
  -moz-box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
  -webkit-box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
}

/* ### Zoomer, close buttons, share ### */
.close,
.zoomer {
  text-indent:-9999px;
  background-image:url(/assets/tilestream-pro/images/controls.png);
  background-position:60px 60px;
  background-repeat:no-repeat;
  overflow:hidden;
}

.close:active,
.zoomer:active {
  border-color:#bbb;
  background-color:#ddd;
  box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
  -moz-box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
  -webkit-box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
}

.close {
  top:4px;
  right:4px;
  width:18px;
  height:18px;
  background-position:-6px -6px;
}

.zoomer {
  width:28px;
  height:28px;
  top:10px;
  left:10px;
  z-index: 2;
}

.zoomin {
  background-position:-31px -1px;
  left:39px;
  border-radius:0px 3px 3px 0px;
  -moz-border-radius:0px 3px 3px 0px;
  -webkit-border-radius:0px 3px 3px 0px;
}

.zoomout {
  background-position:-61px -1px;
  border-radius:3px 0px 0px 3px;
  -moz-border-radius:3px 0px 0px 3px;
  -webkit-border-radius:3px 0px 0px 3px;
}

.share {
  clear:left;
  left:10px;
  top:10px;
  width:57px;
  height:18px;
  font:bold 10px/18px Arial,sans-serif;
  text-align:center;
  text-transform:uppercase;
  background:#333;
  background:rgba(32,32,32,0.75);
  border-color:#666;
  border-color:rgba(128,128,128,0.75);
  color:#fff;
}

.zoompan .share { top:45px; }

/* ### Zoombox ### */
.zoombox-box,
.boxselector-box {
  border:1px dashed #888;
  background:rgba(255,255,255,0.25);
  position:absolute;
  top:0px; left:0px; width:0px; height:0px;
  display:none;
  z-index: 10;
}

/* ### Google maps adjustments ### */
.g .share {
  position:absolute;
  left:5px;
  top:5px;
  z-index:1000;
}

.g.zoompan .share { left:30px; top:15px; }

/* ### Error message ### */
.ts-error .error-message {
  background:#fff;
  position:absolute;
  right:50%;
  top:50%;
  margin:-50px -110px 0px 0px;
  padding:10px 0px;
  height:80px;
  width:220px;
  color:#999;
  text-align:center;
  font-weight:bold;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  box-shadow:#fff 0px 0px 40px;
  -moz-box-shadow:#fff 0px 0px 40px;
  -webkit-box-shadow:#fff 0px 0px 40px;
}

.ts-error .mapbox-logo {
  display:block;
  width:140px;
  height:40px;
  margin:5px auto;
  background:url(/assets/tilestream-pro/images/controls.png) 0px -40px no-repeat;
}

.mapbox-watermark {
  position:absolute;
  left:5px;
  bottom:5px;
  z-index:99999;
  display:block;
  width:65px;
  height:20px;
  text-indent:-9999px;
  overflow:hidden;
  background:url(/assets/tilestream-pro/images/controls.png) 0px -90px no-repeat;
}

.attribution .mapbox-watermark { bottom:25px; }

/* Override image location */
.zoomer,
.close,
.mapbox-watermark,
.ts-error .mapbox-logo { background-image:url(../img/map.png); }

/* consistent line height */
sup { vertical-align: text-top; }

.EnergyInfo {
  position: absolute;
  font-family: sans-serif;
  top: 5px;
  right: 5px;
  padding: 5px;
  width: 360px;
  border: 2px solid black;
  font-size: 14px;
  color: #222;
  background-color: #fff;
  border-radius: 3px;
  z-index: 100;
}

/**
* Set rules for how the map overlays
* (information box and legend) will be displayed
* on the page. */
.map-overlay {
  position: absolute;
  top: 515px;
  right: 0;
  /* background: rgba(255, 255, 255, 0.8); */
  background: #fff;
  margin-right: 20px;
  border: 2px solid black;
  font-family: sans-serif;
  font-size: 14px;
  overflow: auto;
  border-radius: 3px;
}

#features {
  top: 0;
  height: 100px;
  margin-top: 20px;
  width: 300px;
}

#legend {
  padding: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  line-height: 18px;
  height: 335px;
  margin-bottom: 40px;
  width: 100px;
  z-index: 80;
}

.legend-key {
  display: inline-block;
  border-radius: 20%;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}