body { 
 	margin:0; 
 	padding:0;
    min-width: 1100px;
 }

body.nosidebar #markerinfo {
    display: none;
}

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

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

 #yearLabel {
 	top: 40px;
    text-align: center;
    font-family: Lato;
    font-size: 20px;
 }

/*  #yearBanner {
    top: 20px;
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    width: 80%;
    margin-left: 10%;
    margin-top: -20px;
 }*/

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

div#saip-banner {
/*    text-align: center;*/
    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;
}*/


/*div#saip-banner h3{
  font-family: 'Lato';
  margin-top: 19px;
  display: inline-block;
  margin-left: 30%;
}
*/
img#logo{
  margin-left: 2.1%;
  margin-top: 11px;
  height: 65%;
}

/* Styling for 'BLOG' button */
/********************************************/
#blog_button{
    color: #8BA1A6;
    display:inline-block;
    font-family: 'Lato', sans-serif;
    font-size:.9em;
    font-weight:normal;
    text-decoration:none;
    text-align: center;
    margin-top: 25px;
    width: 100px;
    float: right;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

 #bstart{
 	color: #58595b;
 	text-decoration: none;
 	padding-left: 5px;
 	padding-right: 5px;
 }

 #bstart.active{
  display: none;
 }

#bstart2.active{
  display: inline-block;;
  color: #58595b;
  text-decoration: none;
  padding-left: 5px;
  padding-right: 5px;
}

 #bstart2{
  display: none;
 }

 #b2006{
 	color: #58595b;
 	text-decoration: none;
 	padding-left: 5px;
 	padding-right: 5px;
 }

 #b2006.active{
 	color: #750505;
 	font-weight: bold;
 	font-size: 24px;
 }

 #b2007{
 	color: #58595b;
 	text-decoration: none;
 	padding-left: 5px;
 	padding-right: 5px;
 }

#b2007.active{
 	color: #750505;
 	font-weight: bold;
 	font-size: 24px;
}

#b2008{
 	color: #58595b;
 	text-decoration: none;
 	padding-left: 5px;
 	padding-right: 5px;

}

#b2008.active{
 	color: #750505;
 	font-weight: bold;
 	font-size: 24px;
}

 #b2009{
 	color: #58595b;
 	text-decoration: none;
 	padding-left: 5px;
 	padding-right: 5px;

 }

#b2009.active{
 	color: #750505;
 	font-weight: bold;
 	font-size: 24px;
}

 #b2010{
 	color: #58595b;
 	text-decoration: none;
 	padding-left: 5px;
 	padding-right: 5px;


 }

#b2010.active{
 	color: #750505;
 	font-weight: bold;
 	font-size: 24px;
}

 #b2011{
 	color: #58595b;
 	text-decoration: none;
 	padding-left: 5px;
 	padding-right: 5px;


 }

#b2011.active{
 	color: #750505;
 	font-weight: bold;
 	font-size: 24px;
}

 #b2012{
 	color: #58595b;
 	text-decoration: none;
 	padding-left: 5px;
 	padding-right: 5px;


 }

#b2012.active{
 	color: #750505;
 	font-weight: bold;
 	font-size: 24px;
}

#b2013{
 	color: #58595b;
 	text-decoration: none;
 	padding-left: 5px;
 	padding-right: 5px;


 }
#b2013.active{
 	color: #750505;
 	font-weight: bold;
 	font-size: 24px;
}

 #bstop{
 	color: #58595b;
 	text-decoration: none;
 	padding-left: 5px;
 	padding-right: 5px;
 }

 #bstop.active{
 	color: #750505;
 	font-weight: bold;
 	font-size: 24px;
 }

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

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

p#instructions {
  margin-top: 0px;
  font-size: 11px;
  margin-left: -3px;
}

#legend-ui {
    list-style: none;
}

ul#legend-ui li {
    list-style: none;
    background: #F4F7F8;
}

#legend-ui li ul.legend {
    background: #FFF;
    display: inline-block;
    padding-left: 0px;
    margin-left: -35px;
    margin-top: -2px;
}

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

#legend-ui li ul.legend span.keycolor {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
}

#source{
  text-decoration: none;
  margin-left: -20px;
}


/*Legend Colors*/
/********************************************/

#legend-ui li ul.legend li.twentytoThirty span.keycolor {
    background-color:#d5b7b7;
}
#legend-ui li ul.legend li.thirtytoFourty span.keycolor {
    background-color:#a96c6c;
}
#legend-ui li ul.legend li.fourtyPlus span.keycolor {
    background-color:#750505;
}

/*Story sidebar*/
/********************************************/

/********************************************/

/*#markerinfo, #sidebar {
    position: absolute; top: 80px; right: 0;
    bottom: 0; width: 23%; background:#fff; color: #000;
    padding: 20px;
    border-left: 3px solid #fff;
    font-family: 'Lato';
    max-width: 300px;
}*/

        
body.nosidebar #map .leaflet-control-container .leaflet-top {
    left: 10px;
}

        /*Styling for popup*/
.popup {
    text-align: center;
}


#buttonCloser {
    text-decoration: none;
}


#buttoncontainer {
    border-radius:1px;
    display:inline-block;
    color:#000;
    font-family:'Lato';
    font-size:15px;
    font-weight:bold;
    padding:4px;
    text-decoration:none;
    position: absolute;
    margin-right: 5%;
}

body.nosidebar #buttoncontainer {
  right: 5px;
  display: inline-block;
}

#markerinfo2 {
    width: 120%;
    margin-left: -8%;
}

#markerinfo2 iframe#iframe {
    /*height: 500px;*/
    width: 95%;
    margin-top: -15px;
}

#markerinfo2 div.cycle {
    margin-top: -20px;
    margin-left: 12%;
}

#markerinfo2 div.cycle a.next{
    color: #3990A3;
    height: 16px;
    display:inline-block;
    font-family:'Lato';
    font-size:18px;
    font-weight:bold;
    text-decoration:none;
    margin-left: 35px;
} 

#markerinfo2 div.cycle a.next1{
    color: #3990A3;
    height: 16px;
    display:inline-block;
    font-family:'Lato';
    font-size:18px;
    font-weight:bold;
    text-decoration:none;
    margin-left: 44.5%;
}    

#markerinfo2 div.cycle a.prev{
    color: #3990A3;
    height: 16px;
    display:inline-block;
    font-family:'Lato';
    font-size:18px;
    font-weight:bold;
    text-decoration:none;
}


/* Sidebar button */
#sidebarbuttoncontainer {
  background: #58595b;
  width: 13px;
  padding-left: 2px;
  margin-top: -15px;
  margin-left: 90%;
  -webkit-border-radius: 3px;
}

#sidebarbutton {
    text-decoration: none;
    color: #fff;
    padding left: 4px;
    font-family: 'Lato';
    font-size: large;
    line-height: 20px;
    margin-left:-.5px;
}

/* zoom to state buttons button */

#statebuttoncontainer {
  width: 90%;
  float: left;
  padding-left: 10px;
}

/*a.floridabutton{
    text-decoration: none;
    display: inline-block;
    position: relative;
    margin: 6px auto;
    width: 46%;
    border-color: #7AB6CC;
    border-radius: 3px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background: #58595b;
    padding: 4px;
    float: left;
}
a.ohiobutton{
    text-decoration: none;
    display: inline-block;
    position: relative;
    margin: 6px auto;
    width: 46%;
    border-color: #7AB6CC;
    border-radius: 3px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background: #58595b;
    padding: 4px;
    float: right;
}
a.nybutton{
    text-decoration: none;
    display: inline-block;
    position: relative;
    margin: 6px auto;
    width: 46%;
    border-color: #7AB6CC;
    border-radius: 3px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background: #58595b;
    padding: 4px;
    float: left;
}
a.nmbutton{
    text-decoration: none;
    display: inline-block;
    position: relative;
    margin: 6px auto;
    width: 46%;
    border-color: #7AB6CC;
    border-radius: 3px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background: #58595b;
    padding: 4px;
    float: right;
}
a.nationalbutton{
    text-decoration: none;
    display: inline-block;
    position: relative;
    margin: 6px auto;
    width: 97.5%;
    border-color: #7AB6CC;
    border-radius: 3px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background: #58595b;
    padding: 4px;
    float: left;
}*/

#chart2 {
    width: 50px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10px;
}

@media only screen and (min-width: 200px) {
    div#saip-banner span{
        font-family: 'Lato';
        margin-top: -10px;
        display: inline-block;
        width: 67%;
        text-align: center;
        color: #58595b;
        font-size: 10px;
    }

    #yearBanner{
        text-align: center;
        font-family: Lato;
        font-size: 8px;
        width: auto;
        margin-left: 34%;
        margin-top: -47px;
    }
    a.floridabutton{
        text-decoration: none;
        display: inline-block;
        position: relative;
        margin: 6px auto;
        width: 100%;
        border-color: #7AB6CC;
        border-radius: 3px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background: #58595b;
        padding: 4px;
    }
    a.ohiobutton{
        text-decoration: none;
        display: inline-block;
        position: relative;
        margin: 6px auto;
        width: 100%;
        border-color: #7AB6CC;
        border-radius: 3px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background: #58595b;
        padding: 4px;
    }
    a.nybutton{
        text-decoration: none;
        display: inline-block;
        position: relative;
        margin: 6px auto;
        width: 100%;
        border-color: #7AB6CC;
        border-radius: 3px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background: #58595b;
        padding: 4px;
    }
    a.nmbutton{
        text-decoration: none;
        display: inline-block;
        position: relative;
        margin: 6px auto;
        width: 100%;
        border-color: #7AB6CC;
        border-radius: 3px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background: #58595b;
        padding: 4px;
    }
    a.nationalbutton{
        text-decoration: none;
        display: inline-block;
        position: relative;
        margin: 6px auto;
        width: 97.5%;
        border-color: #7AB6CC;
        border-radius: 3px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background: #58595b;
        padding: 4px;
        float: left;
    }   

    #markerinfo, #sidebar {
        position: absolute; top: 80px; right: 0;
        bottom: 0; width: 30%; background:#fff; color: #000;
        padding-top: 20px;
        border-left: 3px solid #fff;
        font-family: 'Lato';
        max-width: 300px;
    }

    #legendcontainer{
        display: block;
        border: 1px solid #58595b;
        height: 70px;
        padding-left: 5px;
        padding-right: 5px;
        font: normal 13px/18px 'Lato', sans-serif;
        width: auto;
        position: absolute;
        left: 1%;
        bottom: 1%;
        background: #F4F7F8;
    }

    ul#legend-ui li {
        margin-top: -3px;
    }
}

@media only screen and (min-width: 600px) {
    div#saip-banner span{
      font-family: 'Lato';
      margin-top: -10px;
      display: inline-block;
      width: 85%;
      text-align: center;
      color: #58595b;
      font-size: 20px;
    }

    #yearBanner {
        top: 20px;
        text-align: center;
        font-family: Lato;
        font-size: 20px;
        width: 80%;
        margin-left: 10%;
        margin-top: -20px;
    }

    a.floridabutton{
        text-decoration: none;
        display: inline-block;
        position: relative;
        margin: 6px auto;
        width: 46%;
        border-color: #7AB6CC;
        border-radius: 3px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background: #58595b;
        padding: 4px;
        float: left;
    }
    a.ohiobutton{
        text-decoration: none;
        display: inline-block;
        position: relative;
        margin: 6px auto;
        width: 46%;
        border-color: #7AB6CC;
        border-radius: 3px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background: #58595b;
        padding: 4px;
        float: right;
    }
    a.nybutton{
        text-decoration: none;
        display: inline-block;
        position: relative;
        margin: 6px auto;
        width: 46%;
        border-color: #7AB6CC;
        border-radius: 3px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background: #58595b;
        padding: 4px;
        float: left;
    }
    a.nmbutton{
        text-decoration: none;
        display: inline-block;
        position: relative;
        margin: 6px auto;
        width: 46%;
        border-color: #7AB6CC;
        border-radius: 3px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background: #58595b;
        padding: 4px;
        float: right;
    }
    a.nationalbutton{
        text-decoration: none;
        display: inline-block;
        position: relative;
        margin: 6px auto;
        width: 97.5%;
        border-color: #7AB6CC;
        border-radius: 3px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background: #58595b;
        padding: 4px;
        float: left;
    }

    #markerinfo, #sidebar {
        position: absolute; top: 80px; right: 0;
        bottom: 0; width: 23%; background:#fff; color: #000;
        padding: 20px;
        border-left: 3px solid #fff;
        font-family: 'Lato';
        max-width: 300px;
    }

    #legendcontainer{
        display: block;
        border: 1px solid #58595b;
        height: auto;
        padding-left: 10px;
        padding-right: 0px;
        font: normal 13px/18px 'Lato', sans-serif;
        width: 110px;
        position: absolute;
        left: 1%;
        bottom: 4%;
        background: #F4F7F8;
    }

    ul#legend-ui li {
        margin-top: 0px;
    }
}