body {
     margin:0px;
     font-size: 18pt;
     font-family: Arial, Helvetica, sans-serif;
}

#map {
	width: 800px; 
	height: 600px; 
	border: 1px solid #ccc;
}

#progress {
    display: none;
    position: absolute;
    z-index: 1000;
    left: 400px;
    top: 300px;
    width: 200px;
    height: 20px;
    margin-top: -20px;
    margin-left: -100px;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    padding: 2px;
}

#progress-bar {
    width: 0;
    height: 100%;
    background-color: #76A6FC;
    border-radius: 4px;
}
 #popup {
     position:absolute;
     top:0px;
     right:0px;
    left:0px;
    bottom:0px;
     background:#888;
     z-index:1999;
     border:solid 2px grey;
}
 #popup.shown {
     display:block;
}
 #popup-toolbar {
     text-align: right;
     padding: 0.2em 0.8em;
     position: absolute;
     right: 0px;
     top: 0px;
     background: black;
     z-index: 1999;
}
 #popup-toolbar .close {
     font-size:2.6em;
    text-decoration:none;
    color:white;
}
 .popup-iframe-container {
     position: relative;
     overflow: hidden;
     width: 100%;
     padding-top: 56.25%;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container div with full height and width */
 .responsive-iframe {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 50px;
     right: 0;
     width: 100%;
     height: 90%;
}
 #header {
     color:white;
     text-align:right;
     display:flex;
     justify-content:right;
     width:100%;
     background:black;
}
 #header-menu {
     margin:1em;
}
 #header a {
     color:white;
     font-weight:bold;
     text-decoration:none;
     margin-left:2em;
}
 #flyout {
     position: absolute;
     right: -380px;
     width: 380px;
     background: #000;
     height: 100%;
     top: 40px;
     z-index: 999;
     transition: right 0.7s;
     color:white;
}
 #flyout.shown {
     right: 0px;
     transition: right 0.7s;
}
 #flyout a {
     color:white;
}
 #flyout-content {
     padding:2em;
}
 #flyout-toolbar {
     padding:0.5em 1em;
     text-align:right 
}
 #flyout-toolbar a {
     font-size:2.6em;
     text-decoration:none;
}
 #flyout-content-list {
     overflow-y:scroll;
     height:90%;
     line-height:1.2em;
}
 #banner {
     background:black;
     padding:2em;
     width:100%;
}
 #banner.shown {
     display:block !important;
}
 #banner-content {
     padding:1%;
}
 #banner-content-list {
     display:flex;
    flex-wrap:wrap;
     overflow-y: scroll;
}
 #banner-content-list a {
     display:inline-block;
     color:white;
    width:32%;
}
 .vrload {
     padding: 0.5em 0.8em;
     background: black;
     color: white !important;
     text-decoration: none;
     font-size: 1.2em;
}