/* Cwmdonkin Park - CSS v11 - VRVistas - RS - Created July 2014, Updated March 2016, November 2020 */

/* Core */

body {margin:0; padding:0; width:100%; font-family: Arial, Helvetica, sans-serif;  background-image: url('../images/body-bg9.jpg'); background-repeat:no-repeat;  background-position:center 0; }
h3 {font-size:large; margin:0; padding:0;}
#container {position: relative; height:auto !important; min-height: 100%; min-width:320px; margin:0 auto; padding:0;  z-index:1; /* background-image: url('../photos/cherry.jpg'); background-size:100%; background-repeat:no-repeat; background-position:0 0; */}
#header{position: absolute; width:100%; height:50px; margin:0; padding:0; color: white; background-color: #89cd2e !important;
	box-shadow: /* Shadow beneath the bar and edge highlights. */
		/* Layered single pixel shadows to create a one sided shadow effect. */
		0 5px 0 0 rgba(0, 0, 0, 0.01),
		0 4px 0 0 rgba(0, 0, 0, 0.02),
		0 3px 0 0 rgba(0, 0, 0, 0.04),
		0 2px 0 0 rgba(0, 0, 0, 0.06),
		0 1px 0 0 rgba(0, 0, 0, 0.08),
		/* Top highlight */
		0 1px 0 0 rgba(255, 255, 255, 0.1) inset,
		/* Left highlight */
		1px 0 0 0 rgba(255, 255, 255, 0.1) inset,
		/* Right highlight */
		-1px 0 0 0 rgba(255, 255, 255, 0.1) inset,
		/* Bottom lowlight */
		0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
	background-image: -webkit-linear-gradient(top, rgba(255,255,255, 0.05) 50%, rgba(0,0,0, 0.02) 51%);
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.02) 51%);
	background-size: 100%;	background-repeat: no-repeat; z-index: 100; opacity:1;}
#title {float:left;}
h2 {font-size:xx-large; margin:auto; padding:4px 0 4px 20px; font-weight:bold; text-shadow:1px 1px #666;}
#content{position: absolute; top:50px; background-color:transparent; width: 100%; margin:0; padding:0; z-index:2}
/* #subtitle{display:none;}  Not used */
/* video {	width:100%   !important; height:auto   !important;} Not used = doesn't work consistently with mobile browsers */
#frame {position: relative; width:100%; max-width:1130px; margin:0; padding:0; background-image: url('../images/cdpmap10base3.png'); background-size: 100%; background-repeat:no-repeat; background-position:0 0; z-index:3} /* Map frame */
#cdp {position: relative; width:100%; max-width:1130px; height: auto; margin:0; padding:0; z-index:4}
#panframe {position:absolute; display:none; top:50px; left:0px; width: 100%; margin:0 auto; padding:0; z-index:6;} 
#soundscape {position:absolute; display:none; top:0px; left:0px; width: 100%; margin:0 auto; padding:0; background-size:100%; z-index:6;}
#hilite {position:absolute; display:none; top:-1000px; left:-1000px; width:36px; height:36px; background-image: url('../images/hisprite.png'); background-size:auto 100%; background-repeat:no-repeat; background-position:0 0; z-index:4; pointer-events:none; }
#hiscape {position:absolute; display:none; top:0px; left:0px; width:36px; height:36px; background-image: url('../images/hiscape36r.png'); background-size:100%; background-repeat:no-repeat; background-position:0px 0px; opacity:0; z-index:7; pointer-events:none; }
#gmapemb {width:100%; height:auto;}
#cdpnone {display:block}
#cdpall, #cdppanos, cdpphotos, #cdpvideos, #cdpsounds {display:none}

/* Menu */
#menu{font-size:medium; text-shadow:1px 1px #666; } 
.top-menu {float:right; display:none; position:relative; top:0px; right:10px; z-index:200;}
ul.top-menu, ul.top-menu ul.submenu {padding:0; margin:0;}
ul.top-menu li, ul.top-menu ul.submenu li {list-style-type:none; display:inline-block; }
ul.top-menu li {height:40px; padding-top:10px;}
ul.top-menu ul.submenu li {width:100%; 	border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
ul.top-menu li:hover, ul.top-menu ul.submenu li:hover {background-color: rgba(255,255,255,0.2);}
ul.top-menu li a {text-decoration:none; color:#fff; font-weight:bold; padding:5px 10px 5px 10px; display:inline-block; white-space:nowrap}
ul.top-menu li ul.submenu li a {text-decoration:none; color:#fff; font-weight:bold;  padding: 0.5em 1em 0.5em 1em; display:inline-block; white-space:nowrap}
ul.top-menu li a:hover, ul.top-menu li ul.submenu li a:hover {color:green; text-shadow:1px 1px #ccc; }
ul.top-menu li {position: relative;}
ul.top-menu li ul.submenu {position:absolute; display:none; top:50px; left:0; min-width:120px; background-color:#89cd2e; }
.side-menu {position:absolute; display:none; top:50px; right:0px; width:250px; background-color:#89cd2e; z-index:200; }
ul.side-menu, ul.side-menu ul.submenu {padding:0; margin:0;}
ul.side-menu li, ul.side-menu ul.submenu li {list-style-type:none; display:block; width:100%; background-color: #89cd2e; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
ul.side-menu li:hover, ul.side-menu ul.submenu li:hover {background-color: rgba(255,255,255,0.2);}
ul.side-menu li a {display:block; text-decoration:none; color:#fff; font-weight:bold; padding:1em; }
ul.side-menu li ul.submenu li a {text-decoration:none; color:#fff; font-weight:bold;  padding:1em 1em 1em 1.5em; }
ul.side-menu li a:hover, ul.side-menu li ul.submenu li a:hover {color:green; text-shadow:1px 1px #ccc;}
ul.side-menu li {position: relative;}
ul.side-menu li ul.submenu {display:none; position:relative; top:0; width:100%; background-color:#89cd2e; }
#tab {float:right; display:none; height:50px; width:50px; margin:0; padding:0; vertical-align:middle; text-align:center; background-color: rgba(255,255,255,0);}
#tab:hover{background-color: rgba(255,255,255,0.2);}
.tab {padding:15px 10px 15px 10px;}
.tabline {width:24px; height:4px; border-radius:1px; margin-bottom: 4px; background-color:#fff;}

#footer {position:fixed; left:0px; bottom:0px; height:20px; width:100%; background:#666; padding:2px 0 2px 4px; color:white; text-align:left; font-size:small; z-index:100;}

.copyright {float:left; margin-left:4px; color:white; text-align:left; font-size:small;}

/* Modal */

#modal {position:absolute; display:none; top:30px; left:5%; right:5%; width:90%; border-radius:4px; border:thin #ddd solid; 

	box-shadow:0 3px 8px rgba(0,0,0,.3); -moz-box-shadow:0 3px 8px rgba(0,0,0,.3); -webkit-box-shadow:0 3px 8px rgba(0,0,0,.3);

	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; z-index: 15;}

#modal-content {position: relative;	margin:0; padding:0; background-color:#fff; border-radius:4px; z-index: 20;}
#modal-header {position:relative; height:30px; background-color: #fff; padding:5px 10px 0 10px; border-bottom:thin #ddd solid; border-radius: 4px 4px 0 0;}
#modal-title {float: left; padding-top:5px; color:#555; font-size:large; font-weight: bold; border-radius: 4px 0 0 0;}
#modal-close {float:right; border-radius: 0 4px 0 0; }
#modal .btn {margin:0; width:20px; height:20px; padding:1px 3px 3px 3px;}
#modal-copy {clear:both; background-color:#fff; padding:10px; font-size:medium; border-radius:0 0 4px 4px;}
#modal-overlay {position: fixed; top:0;	left:0; width: 100%; height: 100%;	background: rgba(0,0,0,.1); z-index: 10;}


/* Sound */
#mixer {position:absolute; display:none; top:10px; left:550px;margin:0; padding:0; margin-left:10px; color:red; width:700px; height:450px; font-size:medium; background-color:#fff; z-index:0;}
.control {position:relative; height:30px;}
span {position:absolute; left:310px; top:5px;} // Dev only