@media (min-width: 1000px) {
    #StormListSection {
        float:right;
        min-width: 50%;
        margin-top:3em;
    }
}

/* Tab Buttons */
.tab {
    overflow: hidden;
    background-color: white;
}
.tab button {
    padding: .4em 1em;
    background-color: #f1f1f1;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}
.tab button.Active {
    background-color: #ccc;
}
.tab button:hover {
    background-color: #ddd;
}

#StormListSection h2, #RadarSection h2 {
    margin-bottom:0.5em;
}
#StormListSection .tab {
    max-width: var(--radar-width);
}

#StormCardContainer {
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: .5em;
    border: 1px solid black;
    max-width: var(--radar-width);
}
.StormCard {
    margin: .5em;
    border: solid #DDD;
    padding: .5em;
    border-right: 10px solid;
}

.storm_id {
    font-weight: bold;
    font-size:120%;
    border-bottom: solid black;
    padding: 0.25em 0.25em 0.25em .5em;
    margin-bottom: 0.25em;
}
.cardtext {
    margin-left: .5em;
    line-height: 1.3em;
}
.cardtext img {
    width: 1em;
    vertical-align: text-bottom;
}


#StormsTableContainer {
    width:100%;
    border:1px solid black;
    overflow-x:auto;
}
#StormsTableContainerInner {
    overflow: auto;
    padding-bottom: 1em;
    margin:.5em;
}



#StormListOverlay {
    background-color: #888;
    border: solid;
    position: absolute;
    opacity: .7;
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: 45px;
}

#NoStorms {
    margin: 2em;
    max-width: 400px;
    line-height: 1.5em;
    text-align: center;
}