body {
    margin:0;
    padding:0;
    height: 100%;
    /* background-color:#f1f1f1;*/
}

div#timemap {
    transition: margin-left .5s;
    /*border-style: solid;*/
    width:100vw;
    height:100vh;
}

div#timelinecontainer{
    width: 100vw;
    height: 600px;

    /*the following is for multiple point in timeline, creates a scroller*/
    overflow-x:hidden;
    overflow-y:scroll;
}

div#timeline{ 
   width: 100%;
   height: 100%;
   font-size: 12px;
   background: #CCCCCC;
}


div#mapcontainer {
    width: 100vw;
    height: 400px;
}

div#map {
    width: 100%;
    height: 100%;
    background: #EEEEEE;
}

div.infotitle {
    font-size: 14px;
    font-weight: bold;
}
div.infodescription {
    font-size: 14px;
    font-style: italic;
}

div.custominfostyle {
    font-family: Georgia, Garamond, serif;
    font-size: 1.5em;
    font-style: italic;
    width: 20em;
}