body{
    margin:0;
    padding:0;
    background-color: #373737;

}

#lastupdate, #nphotos
{
    position:absolute;
    right:10px;
    top:10px;
    z-index:999;
    color: #333;
    font-weight: bold;
    border:1px #6A6A6A dashed;
    padding:3px;
    background-color: #eee;
}

#nphotos
{

    top:60px;

}

#progressBar
{
    position:absolute;
    left:0px;
    top:0px;
    height:4px;
    width:0%;
    background-color:#FF8C00;
    z-index:999;
}

#progressBar.error
{

    background-color:#FF0000;

}

#map{
    width:100%;
    height:100%;
}

#info{
    position:absolute;
    bottom:0px;
    height:0%;
    width:100%;
    left: 0px;
    z-index: 9999;
    border-top:4px #6A6A6A solid;
    background-color: #373737;
    color:#fff;
    font-size: 1em;
    padding:0px;
    margin:0px;
    overflow:hidden;
    text-align: center;
}

#info.scroll{
    overflow:auto;
}

#infoB{
    text-align: center;
    color: #fff;
    font-size: 2.5rem;
    height: 40px;
    z-index: 999999;
}

#infoB:hover{
    cursor:pointer;
}

#infoB img{
    height: 40px;
    filter: invert(80%);
}

#infoB.open{
    transform: rotate(3.142rad);
}

#infoB.close{
    transform: none;
}

#info .img{
    display: inline-block;
    vertical-align: top;
    position:relative;
    min-height:200px;
    min-width:200px;
}

#info .img:hover{
    cursor:pointer;
}

#info .img span{
    position:absolute;
    bottom:2%;
    right:8%;
    opacity: 0.5;
    border:1px solid transparent;
    display:none;
}

#info .img span:hover{
    border:1px solid #DAA520;
    opacity: 1;
}

#info .img span img{
    width:50px;
    filter: invert(90%);
}

#info img#image{
    max-width: 88%;
    border:1px solid #DAA520;
    min-width:200px;
    min-height:200px;
}

#info .data{
    padding:5px;
    margin-top:10px;
    margin-bottom:20px;
    overflow:auto;
    display: inline-block;
    width:40%;

}

#info .data p{
    text-align: left;
    margin: 10 17px;
    padding:5px;
    border-left:1px solid #DAA520;

}

#info img.loading{
    width:100px;
    vertical-align: top;
    position: absolute;
    left: 30%;
    top: 30%;
}

.imgB{
    width: 100%;
    height: 0%;
    padding: 5px;
    z-index: 999999;
    background: #373737;
    position: absolute;
    bottom: 0;
    text-align: center;
    overflow:hidden;
}

.imgB img{
    height:85%;
    vertical-align: middle;
    margin-top: 92px;
}

.imgB span{
    position:absolute;
    top: 25px;
    right: 2pc;
    color:#DAA520;
    font-weight:bold;
    font-size:2rem;
    padding:5px;
    border:2px solid #FF8C00;
    border-radius:20px;
    width: 40px;
    height: 40px;
}

.imgB span:hover{
    cursor: pointer;
}


#map img.olAlphaImg{
    border-radius: 50%;
    border-bottom-left-radius: 0px;
    width:45px !important;
    border:2px solid #DAA520;
    border-bottom-color:#FF8C00;
    border-left-color:#FF8C00;
    background-color:#eee;
}

#map img.olAlphaImg:hover{
   transform: scale(2);
   z-index:999999;
   cursor: pointer;
}


div.olControlAttribution, div.olControlScaleLine {
    font-family: Verdana;
    font-size: 1em;
    bottom: 3px;
}

.MarkersGroup
{
    position:absolute;
    border-radius:25%;
    width:55px;
    height:55px;
    display:none;
}

.MarkersGroup span
{
    position:absolute;
    right:2px;
    top:2px;
    color:#fff;
    background-color:#111;
    border-radius:25%;
    padding:5px;
    font-weight:bold;
    z-index:999;
}


@media only screen and (max-width: 600px) {
    div.olControlAttribution, div.olControlScaleLine {
        font-size: 0.7em;

    }

    #info .data{
       width:100%;
    }


    #info img#image{
        height: 260px;
    }

    .imgB img{
        width:100%;
        height:auto;
    }

    #map img.olAlphaImg:hover{
        transform: none;
        z-index:auto;
    }
}