html, body
{
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: silver;
}


details
{
    cursor: pointer;
}

div
{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

#header
{
    position: absolute;
    top: 0rem;
    left: 0;
    width: 100%;
    height: 1.75rem;
}


#map
{
    position: absolute;
    top: 1.5rem;
    left: 0;
    width: 50%;
    height: calc( 100% - 1.75rem);
}


#divPictures
{
    position: absolute;
    bottom: 0;
    right: 0;
    top: 1.5rem;
    width: 50%;
    height: calc( 100% - 1.75rem);
    overflow: auto;
}

table
{
    width: 100%;
}

td, tr
{
    text-align: center;
}

.tdPic
{
    background-color: white;
    text-align:left;
}

img
{
    width: 100%;
    height: auto;
    max-height: 60vh;
    -o-object-fit: contain;
    object-fit: contain;

    cursor:pointer;
}



/* @media screen and (orientation: landscape)
{
    #map
    {
        width: 50%;
        height: calc( 100% - 1.5rem);
    }


    #divPictures
    {
        top: 1.5rem;
        width: 50%;
        height: calc( 100% - 1.5rem);
    }
}
     */
/*
@media screen and (orientation: portrait)
{

    #map
    {
        width: 100%;
        height: calc( 50% - 0.75rem);
    }


    #divPictures
    {
        left: 0;
        width: 100%;
        height: calc( 50% - 0.75rem);
    }
}
*/





a
{
    text-decoration: none;
}

    a:hover
    {
        text-decoration: underline;
    }