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

/* Styling for SLOPEGRAPH*/
/********************************************/
/********************************************/

text.label { fill: #585858; }
text.label.start { text-anchor: end; }
line.slope { stroke: #585858; stroke-width: 1; }
line.slope.upward { stroke: #056575; }
line.slope.downward { stroke: #750505; }

.missing text.label { display: none; }
.missing line.slope { display: none; }

.over text.label { fill: #000; cursor: default; }
.over line.slope { stroke-width: 3; cursor: default; }

.scrolled text.label {
  transform: translate(100px,100px);
}

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


@media only screen and (min-width: 200px) {
  p#instructions {
    display: none;
  }

  div#legendcontainer hr {
    display: none;
  }

  #legendcontainer{
    position: absolute;
    padding-left: 0px;
    font: normal 13px/18px '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:9px 'Montserrat', sans-serif;;
  }

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

  /* Styling for SIDEBAR */
/********************************************/
/********************************************/

#markerinfo {
position: absolute; top: 0px; right: 0;
bottom: 0; width: 40%; background:#fff; color: #000;
padding: 1px;
border-left: 3px solid #fff;
font-family: 'Lato';
opacity: 0.75;
overflow-x: scroll;
}

#markerinfo2 {
width: 100%;
}

#markerinfo2 iframe#iframe {
  height: 555px;
  width: 100%;
}

div#markerinfo p {
  color: #585858;
}

div#chart {
  margin-left: -10px;
}

@media only screen and (min-width: 700px) {
    p#instructions {
      display: block;
      margin-top: 0px;
      font-size: 11px;
      margin-left: -3px;
  }

  div#legendcontainer hr {
    display: block;
    margin-left: -11px;
    margin-top: -10px;
  }

  #markerinfo2 div.cycle a.next{
      font-size:18px;
      margin-left: 35px;
  } 

  #markerinfo2 div.cycle a.next1{
      font-size:18px;
      margin-left: 44.5%;
  }    

  #markerinfo2 div.cycle a.prev{
      font-size:18px;
  }
  body.nosidebar #buttoncontainer {
    display: inline-block;
    left: 80%;
    width: 200px;
  }  
}

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

/*  #legendcontainer{
    display: block;
    border: 1px solid #3887BE;
    height: auto;
    padding-left: 10px;
    padding-right: 0px;
    font: normal 13px/18px 'Lato', sans-serif;
    width: 200px;
    position: absolute;
    left: 1%;
    bottom: 5%;
    top: auto;
    background: white;
  }*/

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

  #markerinfo2 {
    width: 100%;
    height: 100%;
  }



@media (min-width: 300px) {

  #popupState {
    margin: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 (min-width: 600px) {
html, body {
      border: 0;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  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;
  }

  ul#menuUI {
    display: block;
  }

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;
}


/*div.leaflet-control-grid.map-tooltip {
  background-color: #F4F7F8;
  position: relative;
  line-height: 1.3;
  left: -133px;
  width: 200px;
  margin-top: 2px;
}*/

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;
}

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


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

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

div.leaflet-top.leaflet-right {
  margin-right: 41%;
}