@media (min-width: 300px) {
  html, body { 
    margin:0; 
    padding:0; 
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

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

  /* Styling for  Header */
  /********************************************/
  /********************************************/

  div#saip-banner {
    position: absolute;
    background-color: #F4F7F8;
    width: 100%;
    height: 80px;
    text-transform: uppercase;
  }

  div#saip-banner span{
    font-family: 'Lato';
    display: inline-block;
    width: 66%;
    text-align: center;
    color: #58595b;
    font-size: 0.75em;
    margin-top: 5%;
  }

  img#logo{
    margin-left: 2.1%;
    margin-top: 11px;
    height: 65%;
  } 

  /* The window containing the marker overlay */
  #markerinfo {
        position: absolute; 
        top: 375px; 
        right: 0;
        bottom: 0; 
        width: 100%;
        height: 200px;
        background:#fff; color: #000;
        padding: 2px;
        border-left: 3px solid #fff;
        font-family: 'Lato';
  }

  body.nosidebar #markerinfo {
            display: none;
        }

  body #map {
      height: 100%;
  }

 /* body #map .leaflet-control-container .leaflet-top {
    left: 47%;
  }*/

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

   /* Sidebar button */
  #sidebarbuttoncontainer {
      background: #81c241;
      width: 16px;
      float: right;
  }

  #sidebarbutton {
      text-decoration: none;
      color: #fff;
      padding left: 4px;
      font-family: 'Montserrat', sans-serif;
      font-size: large;
      line-height: 20px;
  }
  ul#marker-list {
    display: none;
  }

}

@media (min-width: 600px) {
html, body {
      border: 0;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

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

  /* Styling for  Header */
  /********************************************/
  /********************************************/

  div#saip-banner {
    position: absolute;
    background-color: #F4F7F8;
    width: 100%;
    height: 80px;
    text-transform: uppercase;
  }

  div#saip-banner span{
    font-family: 'Lato';
    margin-top: -10px;
    display: inline-block;
    width: 85%;
    text-align: center;
    color: #58595b;
    font-size: 20px;
  }

  img#logo{
    margin-left: 2.1%;
    margin-top: 11px;
    height: 65%;
  } 

  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#marker-list {
    display: block;
  }


/*Styles for the schools list*/
  #marker-list {
      position:absolute;
      top: 80px; right:0; width:25%;
      bottom:0;
      overflow-x:auto;
      background:#F4F7F8;
      margin:0;
      padding:5px;
      font-family: 'Lato';
      height: 100%;
  }
  #marker-list li {
      padding-bottom:3px;
      margin:0;
      list-style-type:none;
      color: #58595b;
  }
  #marker-list li:hover {
      background:#eee;
      color: #969a9c;
  }
}

li#schoolTitle {
    background-color: #b7d8e4;
    width: 100%;
    margin-left: -5px;
}

li#layerID {
  background-color: #F4F7F8;
  border: 1px #b7d8e4;
}

li#layerID.active {
  background-color: #b7d8e4;
  color: #58595b;
}

li#layerID.hover {
  background-color: #b7d8e4;
}

ul.legend {
  display: block;
}

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

ul.legend li.gain span.keycolor {
  background-color:#ffffff;
  border-color: #969a9c;
  border: 1px;
  opacity: 0.7;
}

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

/*  census tract */
ul.legend li.less25 span.keycolor {
  background-color:#f5f9fb;
  opacity: 0.7;
}
ul.legend li.t25to50 span.keycolor {
  background-color:#b7d8e4;
  opacity: 0.7;
}
ul.legend li.t50to75 span.keycolor {
  background-color:#7ab6cc;
  opacity: 0.7;
}
ul.legend li.t75to100 span.keycolor {
  background-color:#3990a3;
  opacity: 0.7;
}
ul.legend li.t100to125 span.keycolor {
  background-color:#296371;
  opacity: 0.7;
}
ul.legend li.t125to150 span.keycolor {
  background-color:#224a58;
  opacity: 0.7;
}
ul.legend li.more150 span.keycolor {
  background-color:#142b33;
  opacity: 0.7;
}

ul.legend li.retailer span.keycolor {
  background-color:#F4F7F8;
  background-image: url('/maps/2016/lottery/ca-lottery/img/retailerDot.png');
  background-size: 15px;
  background-repeat:no-repeat;
  background-position: center;
  width: 10px;
  height: 10px;
}

/* legend cursor fixes */
ul#marker-list > li:hover {
  cursor: pointer;
}
ul#marker-list > li#districtTitle:hover {
  cursor: default;
}

div.leaflet-control-grid.map-tooltip {
  background-color: #3990a3;
  position: relative;
}

/* Styling for layer definition popups*/
div#test.popup{
    position: relative;
    float: right;
    width: 200px;
    right: 26%;
    /*top: 139px;*/
    /* margin-left: 265px; */
    margin-top: 90px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    padding: 10px;
    background-color: #F4F7F8;
    border: 2px solid #FFF;
    }
    
.cancel{
    display:relative;
    cursor:pointer;
    margin:0;
    float:right;
    height:10px;
    width:14px;
    padding:0 0 5px 0;
    background-color:#fff;
    text-align:center;
    font-weight:bold;
    font-size:11px;
    color:#000;
    border-radius:3px;
    z-index:100000000000000000;
    margin-top: 6px;
    margin-right: -6px;
    }

#infoButton {
  text-align: center;
  display: inline-block;
  background: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  margin-left: 7px;
  font: 16px 'Times New Roman', sans-serif;
  border: 0px;
  margin-bottom: 3px;
}

.schoolPopup{
  color: #58595b;
}

.schoolName {
  font-size: 1.2em;
}

#districtTitle {
  font: 1.2em bold 'Lato';
  text-decoration: underline;
  color: #000;
}