/***** map content: *****/
/* map style */
#map { 
    height: 500px; 
    width: 95%;
    margin: auto;
    border: solid #1c4264 1px;
    }

/* slider style */
.sequence-control-container {  
    width: 350px;  
    height: 60px;  
    background-color: #f5f5dc57;  /* transparent beige background */
    padding: 5px;  
    line-height: 1%;  
    text-align: center; 
    font-size: 15px;
    color: #252525;
    border: solid #1c4264 1px;  
}
.range-slider {  
    width: 80%;
    cursor: pointer;  
}
input[type="range"] {
  accent-color: #0084ffd7; /* sets slider color to match prop symbols */
}
.step {  
    width: 8%;
    height: 25px;
    background-color:  #f5f5dc00; 
    border: 0px;  
}  
.step img {  
    width: 100%; 
    height: 20px;
    cursor: pointer
}  
#forward {
    float: right;
}
#reverse {  
    float: left;  
}

/* legend style: */
.legend-control-container {
    width: 185px;
    height: 80px;
    font-weight: bold;
    background-color: #f5f5dc57; /* transparent beige background -> can overlay w/ map symbols */
    padding: 10px;
    text-align: center;
    font-size: 14px;
    border: solid #1c4264 1px;
    opacity: 85%;
    cursor: grab;
}
.legend-control-container p{
     margin: 0;
}
.legend-control-container:active {
    cursor: grabbing; 
}
@media (max-width: 600px) {
    .legend-control-container {
        top:25%;
        left: 5%;
        right: unset;
        width: auto;
        max-width: 60%;
        position:fixed
    }
}

/* pop-up style: */
.leaflet-popup-content-wrapper {
    background-color: #f5f5dcd7;
}
.leaflet-popup-content p {
    margin: 0.2em 0;
}
.leaflet-popup-tip {
    background-color: #f5f5dcd7;
}

/* zoom-control style: */
.leaflet-control-zoom a {
    background-color: #f5f5dc57;
}
.leaflet-control-zoom a:hover {
    background-color: #0084ff52;
}

/***** non-map content: *****/
body {
  background-color: #e7f3e0b0; /* background of whole page*/
}
.header {
    margin: auto;
    text-align: center;
    font-size:xx-large;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    color: #15334d
}
.sub-header {
    margin: auto;
    text-align: center;
    font-size:large;
    font-family: Georgia;
    font-style: oblique;
    color: #1c4264
}
.body {
    font-size:medium;
    font-family: Georgia;
    color: #1c4264
}
.indent{
    margin-left: 2.5%; /*indent the whole div w/ a class */
    margin-right: 2%;
}