/* Layout */
html, body {width: 100%; height: 100%; margin: 0; padding: 0;}
#map {width: 100%; height: 100%; position: relative;}

/* IE9 image link fix */
a img {border: 0;}

/* Style (background layer) switcher */
#map #styleswitcher.expandable {width: 48px; height: 48px; background-image: url('../images/layers.png'); background-position: 50% 50%; background-repeat: no-repeat; display: block;}
#map #styleswitcher.expandable ul {display: none;}
#map #styleswitcher.expandable:hover {width: auto; height: auto; background-image: none; display: block;}
#map #styleswitcher.expandable:hover ul {display: block;}
#map #styleswitcher ul {list-style: none; margin-left: 5px; padding-left: 5px;}

/* Popups (adjustments to emulate Leaflet.js) */
@keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
#map .mapboxgl-popup {animation: fadein 0.2s;}
#map .mapboxgl-popup-content {max-width: 300px; min-width: 50px; border-radius: 12px; padding: 13px 19px; box-shadow: 0 3px 14px rgba(0,0,0,0.4); min-width: 300px;}
#map .mapboxgl-popup-close-button {font-size: 16px; font-family: Tahoma, Verdana, sans-serif; color: #c3c3c3; font-weight: bold;}
#map .mapboxgl-popup-close-button:hover {color: #999; background-color: white; border-top-right-radius: 12px;}
body .mapboxgl-map {line-height: 1.4;}

/* Popups */
#map .mapboxgl-popup-content.autowidth {min-width: 0;}
#map .mapboxgl-popup-content .scrollable {max-height: 200px; overflow-y: auto; margin-top: 0;}
#map .mapboxgl-popup-content .scrollable p:first-child {margin-top: 0;}
#map .mapboxgl-popup-content p {margin: 0.5em 0; padding: 0;}
#map .mapboxgl-popup-content table {border-collapse: collapse; margin: 10px 0 15px;}
#map .mapboxgl-popup-content table td {border-bottom: 1px solid #e9e9e9; padding: 2px 10px 2px 0; vertical-align: top; text-align: left;}
#map .mapboxgl-popup-content table tr:first-child {border-top: 1px solid #e9e9e9;}
#map .mapboxgl-popup-content span.unknown {color: #ccc; font-style: italic;}
#map .mapboxgl-popup-content a.edit {float: right;}
#map .mapboxgl-popup-content a.edit {color: #ccc; text-decoration: none;}
#map .mapboxgl-popup {z-index: 2;}
#map .mapboxgl-popup abbr {text-decoration: none; cursor: help;}

/* In-popup feedback */
body .popupfeedback, body .locatefeedback {display: none;}		/* Hide raw version in HTML which the JS picks up */
#map .mapboxgl-popup p.feedbackbutton a {float: right; padding: 3px 6px; width: 6em; border: 1px solid gray; border-radius: 5px; color: gray; text-decoration: none; display: block; font-size; 0.9em; margin-top: 10px;}
#map .mapboxgl-popup p.feedbackbutton a:hover {background-color: #f5f5f5;}
#map .mapboxgl-popup #feedbackoverlay {position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; background-color: white; padding: 13px 29px; border-radius: 12px;}
#map .mapboxgl-popup #feedbackoverlay a.closebutton {float: right; color: gray; padding: 0; text-decoration: none; font-family: Tahoma, Verdana, sans-serif; font-size: 16px;}
#map .mapboxgl-popup .overlaycontent input[type="text"], #map .mapboxgl-popup .overlaycontent input[type="email"], #map .mapboxgl-popup .overlaycontent textarea {width: calc(100% - 12px); font-size: 1.2em; color: #603; padding: 5px;}
#map .mapboxgl-popup .overlaycontent input[type="submit"] {margin-top: 15px;}
#map .mapboxgl-popup .overlaycontent p.success {color: green; font-weight: bold;}
#map .mapboxgl-popup .overlaycontent p.error {color: red; font-weight: bold;}

/* Geocoder */
#geocoder {position: absolute; top: 10px; left: 55px; z-index: 1001;}
#geocoder input {padding: 5px; font-size: 1em; color: #603; width: 250px;}
#geocoder input.ui-autocomplete-loading {background: white url('../images/ui-anim_basic_16x16.gif') right center no-repeat;}
#geocoder input, .ui-autocomplete {border: 1px solid #eee; box-shadow: 5px 5px 10px 0px rgba(28,28,28,0.5);}
.ui-autocomplete {background-color: white; z-index: 1000; width: 200px; list-style: none; margin-left: 0; padding-left: 0;}
.ui-autocomplete li {list-style: none; margin-left: 0; padding-left: 0;}
.ui-autocomplete li a {padding: 7px; display: block; color: #603;}
.ui-autocomplete li a span {color: gray; font-size: 0.81em;}
.ui-autocomplete li a.ui-state-active {cursor: pointer; background-color: #f7f7f7;}

/* Loading / totals */
#selector li img.loading {display: none; position: absolute; right: -2px; top: 4px; width: 32px; height: 32px;}
#selector li p.total {position: absolute; right: 4px; font-size: 0.76em; color: gray;}

/* Drawing overlay */
#drawing {position:absolute;bottom:30px;right:350px;height:120px;width:250px;background:rgba(0,0,0,0.8);z-index:95}
#drawing #drawingcontrols ul {float: left; margin:0;padding:0;list-style-type:none;overflow:hidden}
#drawing #drawingcontrols ul li {list-style-type:none;padding:0;margin:0;border:0;float:left;display:inline}
#drawing #drawingcontrols ul li a {float:left;display:block}
#drawing #drawingcontrols ul li a {display:block;color:#e6e6e6;height:80px;width:50px;cursor:pointer;font-weight:bold;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:1px}
#drawing #drawingcontrols ul li a span {width:50px;height:50px;display:block;border:1px solid #1a1a1a;background:#e6e6e6 url(../images/geometrydrawing.png) 4px -534px no-repeat;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px}
#drawing #drawingcontrols ul li a span.area {background-position:4px -534px}
#drawing #drawingcontrols ul li a span.route {background-position:4px -616px}
#drawing #drawingcontrols ul li a span.point {background-position:13px -706px}
#drawing #drawingcontrols ul li a:hover {text-decoration:none}
#drawing #drawingcontrols ul li a:hover span {background-color:#eee}
#drawing #drawingcontrols ul li a.current span {-webkit-box-shadow:inset rgba(0,0,0,0.7) 0 0 8px;-moz-box-shadow:inset rgba(0,0,0,0.7) 0 0 8px;box-shadow:inset rgba(0,0,0,0.7) 0 0 8px}
#drawing .panes {padding:10px}
#drawing .panes .pane h3 {margin: 0;}
#drawing .panes .pane h3, #drawing .panes .pane p {color:#e6e6e6}
#drawing .panes .pane p {display:block;margin-bottom:10px;font-weight:normal;font-size:13px;font-style:italic}
#drawing ul.undo-clear {float: right; margin:0;padding:0;list-style-type:none;overflow:hidden;}
#drawing ul.undo-clear li {list-style-type:none;padding:0;margin:0;border:0;float:left;display:inline}
#drawing ul.undo-clear li a {float:left;display:block}
#drawing ul.undo-clear li {float:left;margin-right:10px}
#drawing ul.undo-clear li a {display:block;width:80px;height:32px;cursor:pointer}
#drawing ul.undo-clear li a span.txt {color:#e6e6e6;float:right;margin-top:5px;font-weight:bold;font-size:10px;letter-spacing:1px;text-transform:uppercase;text-align:right}
#drawing ul.undo-clear li a span.icon-undo,#drawing ul.undo-clear li a span.icon-clear {float:left;width:30px;height:30px;display:block;border:1px solid #999;background:url(../images/geometrydrawing.png) 3px -780px no-repeat;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px}
#drawing ul.undo-clear li a span.icon-clear {background-position:4px -825px}
#drawing ul.undo-clear li a:hover {text-decoration:none}
#drawing ul.undo-clear li a:hover span.icon-undo,#drawing ul.undo-clear li a:hover span.icon-clear {border:1px solid #e6e6e6}
#drawing #drawingcontrols ul li a span.browse {background-position:4px -327px;}
#drawing {background: #000; opacity: 0.9;}
#drawing {-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8;}	/* Vendor-specific hacks */
#drawing {z-index: 95;}
#drawing #drawingcontrols ul li a {padding: 6px;}

/* Embed view */
.embed #drawing, .embed #selector, .embed .export {display: none;}

/* Button style for export */
#sections .button {margin: 10px 0; clear: both;}
#sections .button p {line-height: 20px; opacity: 0.2; border: 1px solid gray; padding: 2px 5px; margin: 0; font-size: 0.9em;}
#sections .button.aside, #sections .button.export {float: right;}
#sections .button p.enabled {opacity: 1;}
#sections .button p a {text-decoration: none; border-bottom: 0;}
#sections .button p img {vertical-align: middle;}
#sections .button p span.symbol {font-size: 1.4em;}

/* Filters */
#sections .filters {clear: both;}

/* Legend */
.info {padding: 15px 12px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.9); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px;}
.info h4 {margin: 0 0 5px; color: #777;}
#legend {width: 200px; text-align: left; line-height: 18px; color: #555;}
#legend table td {vertical-align: top;}
#legend i {width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7;}

/* Details overlay */
.vex.vex-theme-plain.wider .vex-content {width: 75%; padding: 25px; min-height: 300px;}
.vex-dialog-message {max-height: 500px; overflow-y: scroll;}
table.fullimage {width: 100%;}
table.fullimage > tbody > tr > td {vertical-align: top; padding: 20px;}
#streetview {margin-top: 5px; width: 100%; height: 200px;}

/* Range sliders */
form#data div.slider {position: relative;}
form#data div.slider input {width: 100%; margin-top: 10px;}
form#data div.slider ul {width: 100%; padding: 0; margin: 0; background: none; border: 0; position: relative; top: -9px;}
form#data div.slider ul li {display: inline; padding: 0; margin: 0; font-weight: normal;}
form#data div.slider ul li:first-child {float: left;}
form#data div.slider ul li:last-child {float: right;}
form#data div.slider p {position: absolute; top: -30px; right: 0; color: #603; font-weight: bold;}

/* Tooltips */
.ui-tooltip {padding: 3px 5px; position: absolute; z-index: 9999; max-width: 300px; border-width: 2px; background-color: white; font-size: 0.74em; border-radius: 3px; box-shadow: 0 0 10px rgba(0,0,0,1);}

/* Message area */
#message {display: none; width: 200px; _height: 40px; padding: 12px; font-size: 1.2em; background: white; background: rgba(255,255,255,0.9); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; color: red;}
#message p {margin: 0; padding: 0;}

/* Password-protection */
#home {display: none;}
#protection {padding: 50px 15px;}
p#loginprompt {margin-top: 3em;}

/* Feedback handling */
#feedback {display: none;}
.feedback.vex.vex-theme-plain .vex-content {width: 550px; max-width: 90%;}
.feedback.vex.vex-theme-plain .vex-dialog-buttons {display: none;}
.feedback table td {vertical-align: top;}
.feedback textarea, .feedback input[type='text'], .feedback input[type='email'] {width: 100%;}
.feedback input[type='submit'] {margin-top: 1.2em;}
.feedback.vex.vex-theme-plain .vex-content p.success {color: green;}
.feedback.vex.vex-theme-plain .vex-content p.error {color: red;}

/* Pages */
.page.vex.vex-theme-plain .vex-content {width: 80%; min-height: 250px;}

/* Forms */
.ui-helper-hidden-accessible {display: none;}	/* See: https://stackoverflow.com/a/23228212/180733 */

/* Mobile styles; see: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions */
#nav-mobile {display: none;}
@media only screen and (min-width: 320px) and (max-width: 768px) {
	.leaflet-control-zoom {display: none;}
	#map .leaflet-control-attribution {margin-right: 0;}
	.leaflet-control-locate.leaflet-bar a {padding: 3px;}
	.leaflet-control-locate {position: fixed; top: 80px; right: 15px;}
	.leaflet-control-locate.leaflet-bar {box-shadow: 3px 3px 3px #aaa;}
	.leaflet-control-locate.leaflet-bar, .leaflet-control-locate.leaflet-bar a:first-child, .leaflet-control-locate.leaflet-bar a:last-child {border-radius: 20px;}
}