body { margin:0; padding:0; }
/*#map { position:absolute; top:0px; bottom:0; width:74%; }*/

/*body.nosidebar #map {
    right: 0;
    width: 100%;
}*/

html, body {
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

#map{
  position:absolute;
  top: 0px;
  bottom:0; 
  width:100%;
 }   

/* Styling for popups */
/********************************************/
/********************************************/


div#popupState.statePopup.leaflet-control {
  background-color: #F4F7F8;
  border: 1px solid #969a9c;
  padding: 4px;
}

/* Styling for LEGEND */
/********************************************/
/********************************************/

ul.legend {
  display: block;
}

ul.legend span.keycolor {
  display: inline-block;
  width: 15px;
  height: 10px;
  margin-left: -20px;
  margin-right: 5px;
}

ul.legend li.slr1 span.keycolor {
  background-color:#224a58;
}

ul.legend li.slr2 span.keycolor {
  background-color:#296371;
}

ul.legend li.slr3 span.keycolor {
  background-color:#3990a3;
}

ul.legend li.slr4 span.keycolor {
  background-color:#7ab6cc;
}

ul.legend li.slr5 span.keycolor {
  background-color:#b7d8e4;
}

/* Styling for Resource Inequality Legend */

ul.legend li.ri1 span.keycolor {
  background-color:#750505;
}

ul.legend li.ri2 span.keycolor {
  background-color:#a96c6c;
}

ul.legend li.ri3 span.keycolor {
  background-color:#056575;
}

div.leaflet-control-grid.map-tooltip.leaflet-control.closable  {
  background-color: #F4F7F8;
  position: relative;
  line-height: 1.3;
  margin-top: -8px;
}

div.leaflet-control-grid.map-tooltip.leaflet-control  {
  background-color: #F4F7F8;
  position: relative;
  line-height: 1.3;
  margin-top: -8px;
}


div.info.leaflet-control{
  display: none;
}


#legendcontainer{
  position: absolute;
  padding-left: 0px;
  font: normal 13px 'Lato', sans-serif;
  width: 180px;
  left: 1%;
  bottom: 2%;
  top: auto;
  background: white;
  border-radius: 3px;
}

li.legendTitle {
  margin-left: -20px;
  text-decoration: none;
  color: #000000;
}

li.legendTitle a{
  color: #1B4971;
  font-weight: 700;
}

#legend-ui li {
  list-style-type: none;
  font:13px 'Lato', sans-serif;
}

ul#legend-ui {
  padding-left: 0px;
  margin-top: 5px;
  margin-bottom: 5px;
}

div.leaflet-control-mapbox-geocoder-results {
  width: auto;
}
div.leaflet-control-mapbox-geocoder-results a {
  width: auto;
}

div.leaflet-control-mapbox-geocoder-results a.active{
  width: auto;
}

div.leaflet-control-mapbox-geocoder-results a.hover{
  width: auto;
}

@media only and (max-width: 600px) {

  #legendcontainer {
    width: 135px;
    font:9px;
  }

  #legend-ui li {
    font-size:9px;
  }
}