body { margin:0; padding:0; background-color: #f1f1f1; }
    html, body { position:absolute; height:100%; width:100%; }

    #map {
    position: relative;
    height: 100%;
    width: inherit;
    }

    #blue-div{
    position: absolute;
    bottom: 0;
    background-color: #bee9f7;
    width: 100%;
    }

    #scale-tab{
    position: relative;
    width: 50%;
    margin: auto;
    opacity: 1
    }

/********************** BUTTONS ***********************/
.gps-btn{
    margin: 14px 2px 2px 2px;
    }

.sbs-btn {
    margin: 14px 2px 2px 10px;
    float:left;
}

.ttx-button{
    background:white;
    height: 30px;
    width: 30px;
    vertical-align: middle;
    padding: 0px;
/*
    background-repeat: no-repeat;
    background-position: 50% 50%;
 */
    border-left-width: 0px;
    display:block.
    }

    .ttx-button:hover {
        background: #F4F4F4;
    }

    .tt-hide{
    margin: 14px 2px 2px 10px;
    }

    .tt-play-pause{
    margin: 14px 2px 2px 2px;

    float:right;
    }

    .tt-rew{
    margin: 14px 2px 2px 2px;
/*     background-image: url( '/images/rewf.png' ); */
/*     background-size: 22px 22px; */
    float:right;
    }

    .tt-hamburger{
        font-size: xx-large;
    }

    .table:hover { background-color: #DDDDDD}

    .first, .inner, .last {
    border-style: solid;
    border-color: transparent;
    border-width: 0px 0px 5px 0px;
    }
    .first {
    width:6.4%;
    text-align: left;
    }
    .inner {
    width:12.9%;
    text-align: center;
    }
    .last {
    width:6.4%;
    text-align: right;
    }
     .first:hover, .inner:hover, .last:hover {
     background-color: #DDDDDD;
     cursor:pointer;
    }

    .leaflet-top .leaflet-control-zoom {
    top:10%;
    transform: translateY(-10%);
    }

/* Following used to style divs within blue-div to ensure timeline above other buttons - see adjustBlueDiv()*/
.left, .right {
    min-width: 150px;
    width: 25%;
    }
.left {
    float:left;
    text-align: left;
    }
.right {
    float:right;
    display: block;
    text-align: right;
    }
.centre {
    margin: 0 auto;
    width:49%;
    min-width: 300px;
    text-align: center;
    }
@media (max-width: 600px) {
    .left, .right {width:49%; float:none; display:inline-block; }
    .centre {width:99%; margin-left:0px;}
    .leaflet-control-attribution {display:none;}
    }


.show-orig-btn {
    background:lgrey;
    width:30px;
    height:30px;
    background-size: 22px 22px;
    background-repeat:no-repeat;
    background-position:50% 50%;
/*     background-image:url('./images/show-orig.png'); */
    margin: 14px 2px 2px 2px;
    float:left;
}

.orig-zoom-plus {
    position:absolute;
    background:lgrey;
    width:30px;
    height:30px;
    border-width:2px;
    top:4px;
    left:12px;
    font-size:x-large;
}
.orig-zoom-close {
/*     position:absolute; */
    background:lgrey;
    width:30px;
    height:30px;
    border-width:2px;
    top:4px;
    float:right;
    margin:10px 10px 0px 0px;
    font-size:large;
    float:right;
}
.orig-zoom-minus {
    position:absolute   ;
    background:lgrey;
    width:30px;
    height:30px;
    border-width:2px;
    top:34px;
    left:12px;

/*     font-weight:bold; */
    font-size:x-large;


}
.vertical-centre {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

audio {
    filter: sepia(0) saturate(0) grayscale(0) contrast(1) invert(1);
    width: 270px;
    height: 25px;
}

#bigPicture
{
    width:100%;
    height:100%;
    display:none;
/*     transform-origin:0px 0px; */

}

#menu ul
{
        border: 1px solid;
	        border-radius: 0px 20px 0px 20px;
    margin: 30px;
    padding: 0px;
    list-style-type: none;
}

#menu li
{
        line-height: 150%;
  text-indent: 10px;
    list-style: none;
}

#menu a
{
    display: block;
/*     width: 8em; */
    color: black;
    background-color: white;
    text-decoration: none;
/*     text-align: center; */
}

#menu a:hover
{
    background-color: #d3d3d3;  //bde9f8
}