*{
    margin:0;
    padding:0;
    font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;
}

/* map/index layout */
#map{
    position:absolute;
    left:0;
    top:0;
}
#index{
    position:absolute;
}
@media (orientation:landscape){
    #map{
        width:65%;
        height:100%;
    }
    #index{
        left:65%;
        top:0;
        width:35%;
        height:100%;
    }
}
@media (orientation:portrait){
    #map{
        width:100%;
        height:65%;
    }
    #index{
        left:0;
        top:65%;
        width:100%;
        height:35%;
    }
}

/* index */
#index{
    background-color:#ff8e24;
    display:flex;
    flex-direction:column;
}
h1{
    padding:10px 40px 10px 15px;
}
hr{
    border-style:solid;
    border-width:1px;
    border-color:#b86619;
}
#index>div{
    flex:1 1 auto;
    padding:10px;
    padding-top:0;
    overflow-y:scroll;
}
#index>div>p{
    font-size:small;
}

/* popups */
.leaflet-popup-content-wrapper{
    background-color:#ff8e24;
    border-style:solid;
    border-width:5px;
    border-color:#5f0008;
    border-radius:25px;
}
.leaflet-popup-content{
    margin:10px;
}
.leaflet-popup-content>div{
    display:flex;
    justify-content:space-between;
}
.leaflet-popup-content>div>h4{
    display:inline;
}
.leaflet-popup-content>div>a{
    text-decoration:none;
    font-size:large;
    font-weight:bolder;
}
.leaflet-popup-content p{ /* removes leaflet's default margins for p element in popup */
    margin:0;
}
.leaflet-popup-tip{ /* pointy arrow part */
    background-color:#5f0008;
}
.leaflet-popup-close-button{
    display:none; /* removes 'x' in the corner of popups to close them */
}

/* polyline */
.leaflet-interactive{
    color:#3366ff;
}