/* CSS full-screen layout - site specific elements */

    .ol-popup {
            font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif !important;
            font-size: 12px;
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 5px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 200px;
        }

        .ol-popup:after,
        .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }

        .ol-popup-closer:after {
            content: "✖";
            color: #c3c3c3;
        }

body span { background-color: lightgreen; }

.gmap {z-index: 1000; position: absolute; top: 10px; right: 15px; padding: 5px; background-color: rgba(255,255,255,0.8); }
.explore {z-index: 1000; position: absolute; top: 40px; right: 5px; padding: 5px; background-color: rgba(255,255,255,0.8);}
.hmap {margin: 10px; padding: 5px; font: 16px "Lato", sans-serif; text-decoration-line: underline; color: purple; background-color: rgba(255,255,255,0.8); cursor: pointer;}

#home { position: absolute; top: 10px; left: 10px; z-index: 5;}

#headertitle { position: absolute; top: 19px; left:20px;}

.nav {overflow: hidden; background-color: #333;top: 80px; position: absolute;left: 0; right:0;}

.nav a {display:block;float: left; font-size: 16px; color: white; text-align: center; padding: 11px 14px; text-decoration: none;}

.nav a.active {background-color:#144C7D; color: white;}

.nav a:hover {background-color: grey;}

#logo {position:absolute;top:15px; right:18px;}

img {margin-right:15px;}

#timeline { position: relative; top: 4px; }

#main { position: absolute; top: 100px; left: 10px; right: 10px; bottom: 10px; overflow: auto; border: 1px solid #592F57; border-radius: 5px; box-shadow: 0 0px 0px #CCC;
padding: 10px 10px 10px 10px; background: #fff; z-index: 10001;}

.floatright {float:right;margin-left: 22px;margin-bottom: 20px;background:#ffffff;}
.closebtn {position: absolute; top: 5px; right: 15px; color: grey; font-size: 25px; cursor: pointer;}
.closebtn:hover {color: darkgrey;}
#map { position: relative; top: 2px; left: 0px; right: 10px; bottom:5px; overflow: hidden; box-shadow: 0 0px 0px #CCC; background-color: #DED8C2;}
#messageBox {position: fixed; overflow:auto; max-height:350px; top: 145px; right: 50px; margin-left: 20px; width:170px;padding: 13px; background:rgba(255,255,255,0.7);font-size: 13px;border-radius: 3px; }
#layerSelect { position: absolute; top: 10px; left: 300px; z-index: 1;}
#sidebar { position: absolute; top: 150px; left: 60px; width: 220px; font-size: 13px; border: 1px solid #592F57; border-radius: 8px; box-shadow: 0 0px 0px #CCC;
padding: 10px 10px 10px 10px; background: #fff; z-index: 1;}
#dataSelect {     width: 95%; float: left; }
#searchSideBar { position: absolute; top: 145px; left: 10px; right: 10px; margin-bottom:5px; height: 20px;}
#SelectLeft { position: absolute; float: left; left:1%;}
#SelectRight { position: absolute; float: left; left:51%;}
#reset {position: absolute; bottom: 11px; left: 183px;}
.button {background:rgba(134,149,164,0.7);color: #144C7D; border-radius: 4px;border: none;text-align: center;font-size: 12px;padding: 2px;width: 100px;cursor: pointer;border: 2.5px solid rgba(255,255,255,0.8);}
.button:hover {background:rgba(106,123,141,0.7);color: white;}
#mapleft { position: absolute; left: 10px; right: 50.2%; top: 175px; bottom: 5px; border: 2px solid #ccc;background-color: #DED8C2;}
#mapright { position: absolute; left: 50.2%; right: 10px; top: 175px; bottom: 5px; border: 2px solid #ccc;background-color: #DED8C2;}

#scalebar {position: absolute; right: 20px; bottom: 75px; z-index: 10001; font-size: small;}

#resultsSideBar {position: absolute;top: 110px;	border-radius: 5px;right: 55px;width: 150px;  font-size: 10pt; overflow: hidden; z-index: 2; background-color: white; overflow: auto;margin: 0px;padding: 10px;
background:rgba(255,255,255,0.95);}

.mslider {  width: 100%;  background: #FFFFFF;  position:absolute;  bottom: 20px;  opacity: 0.8;  z-index: 10000000;}

#mapslider .slider-selection {  background: white;  padding-left: 20px;}

#slider-range {width: 200px; margin:5px;}

#measurementControlForm {position: absolute;right: 50px;top: 110px;z-index:100000;
}

#measurementControlOutput {display: none; position: absolute;right: 5px;	top: 158px; background-color: white;z-index:100000;font-size: 0.75em;
	font-weight: bold;padding: 0 6px;border: 1px inset #ddd;text-align: right; opacity:0.6;	filter:alpha(opacity=60);}

#measurementControlOutputReturnLink, #measurementControlOutputSpan {	display: block;}

#measurementControlOutputSpan {	height: 1.7em;}

#message { position: absolute; right: 200px; top: 110px; background-color: white;z-index:100000;font-size: 0.75em;
		font-weight: bold;padding: 0 6px;border: 1px inset #ddd;text-align: right; opacity:0.7;	filter:alpha(opacity=60);}

@media screen and (max-width: 700px) {
	#sidebar{font-size: 11px; border: 1px solid #592F57; border-radius: 8px; box-shadow: 0 0px 0px #CCC;
	padding: 8px 8px 8px 8px; background: #fff; z-index: 1;}
	#messageBox {padding: 10px; font-size: 11px;right:30px; width:140px;}
	.closebtn {font-size: 16px;}
}
/* OSMNames gazetteer search autocomplete css  */

.ac-renderer{
  position: absolute;
  border: 1px solid #ccc;
  margin-top: -1px;
  max-width: 400px;
  max-height: 400px;
  overflow: auto;
  font-size:.9em;
  z-index: 2;
}
.ac-row {
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  padding: 5px;
  background-color: #fff;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.ac-row .suffix {
  font-size:.8em;
  color:#ccc;
  padding:.1em 0 .1em 5px;
}
.ac-row .type {
  font-size:.7em;
  color:#aaa;
  display:block;
  width:100%;
}
.ac-highlighted {font-weight: bold;}
.ac-active {background-color: #eee;}