html,
body,
#mapDiv {
    padding: 0;
    margin: 0;
    height: 100%;
}

#mapDiv {
    position: relative;
}
#panels{
    top: 0.5em;
    right: 0.5em;
    position: absolute;
    width:30%;
    min-width: 300px;
    z-index:1000;
}

#timeInfo {
    display: block;
    padding: 5px;
    position: relative;
    text-align: center;
    height:63px;
}
.dijitRuleLabel{color:#333;}

#dropdown h4{
    margin:4px;
    padding:0;
    font-size:0.9em;
}
.onmap {
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 1000;
    font-family: Verdana, sans-serif;
}
#timeslide, #stats,#dropdown {
    border-bottom:1px solid gray;
    position:relative;
}
#dropdown {
    color:#333;
    width:100%;
    height:60px;
    margin:1% 0 0 0;
}
#stats {
    height:60px;
    width:100%;
    margin:1% 0 0 0;
    text-align: center;
}

#stats table {
    width:98%;
    height:95%;
    margin:auto;
}

#stats th{
    color:#333;
    padding:0px;
    margin:0px;
    font-size: 0.9em;
}

#stats table td {
    margin:0px;
    padding:0px;
    font-size:0.9em;
    color:#003366;
    font-weight: bold;
}
#taxaDiv{
    width:48%;
    float:left;
    text-align: center;
}
#speciesDiv{
    float:right;
    width:48%;
    text-align: center;
}
#legend{
    height:360px;
    width:200px;
    z-index: 1100;
    text-align: center;
    padding:5px;
    float:right;
    margin-top:1%;
}
#legend img {
    height:100%;
}
#study-link, #metadata-link{
    display: inline-block;
    padding:5px;
    text-decoration: underline;
    margin-top:1%;
    font-size:0.9em;
}
.legendt{
    text-align: center;
    padding:1%;
}
.legendt:hover{
    background-color: rgba(20,150,200,0.3);
    cursor: pointer;
}
select{
    max-width: 95%;
    font-size:1em;
}
#logo {
    z-index: 500;
    position: absolute;
    bottom:10px;
    left:6px;
    height:140px;
    width:250px;
}
#sclogo{
    width:30%;
    height:auto;
    margin-top:10px;
}
#galogo{
    width:65%;
    padding-bottom:10px;
    margin-left:5px;
}
#slider-help{
    position: absolute;
    right:8px;
    bottom:6px;
    border:1px solid #888;
    border-radius:3px;
    font-size:0.9em;
    padding:2px 4px;
}
#slider-help:hover {
    background-color: rgba(20,150,200,0.3);
    cursor: pointer;
}
.help-gifs{
    display: block;
    margin:auto;
    min-width: 300px;
}
#slider-gif{
    width:55%;
}
#dropdown-gif{
    width:40%;
}
/*help popup*/
#popup {
    display:none;
    width: 60%;
    height:90%;
    padding:10px;
    position: absolute;
    margin:auto;
    margin:5% 20%;
    border:1px solid #006699;
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
    z-index:99999;
    min-width:270px;
    max-height:600px;
    overflow-y:scroll;
    color:#333;
}
#popup h4, h3 {
    text-align:center;
}

#closeButton {
    text-align: center;
    display:block;
    position: absolute;
    top:10px;
    right:10px;
    border-radius:4px;
    border:1px solid gray;
    color:#333;
    padding:4px 10px;
}
#closeButton:hover {
    background-color: rgba(20,150,200,0.3);
    cursor: pointer;
}

.dijitRuleLabelH {font-family: Verdana, sans-serif;font-size:1.2em;}
@media (max-width:400px){
    .esriSimpleSliderTL{
        display:none;
    }
    .dijitRuleLabelContainer{
        display:none;
    }
    #panels{
        width:90%;
        margin:0 2%;
        min-width: 280px;
    }
    #timeInfo{
        height:30px;
        width:80%;
    }
    #dropdown{
        height:30px;
        padding-top:5px;
    }
    #dropdown h4{
        display:none;
    }
    #legend{
        display:none;
        height:320px;
    }
    #popup{
        width:92%;
        height:90%;
        padding:5px;
        font-size:0.8em;
        margin:2%;
    }
    #closeButton{
        padding:2px 5px;
        top:4px;
        right:4px;
    }
    #logo{
        width:200px;
        height:120px;
    }
    #logo span {
        font-size:0.8em;
    }
    #sclogo{margin-top:5px;}
    .esriAttribution{display:none;}
    #stats{height:40px;}
}