/* Simple reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Roboto', sans-serif; font-weight:400; font-size:14px; color:#444; }

/* Prevent text selection when toggling options */
#sidebar, #sidebar-toggle { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none;
	-webkit-tap-highlight-color:transparent; -moz-tap-highlight-color:transparent; tap-highlight-color:transparent; }

/* Link styles */
a { color:#444; }
a:hover, a:focus { color:#2196F3; }

/* Helper classes */
.absolute { position:absolute; top:0; left:0; }
.transition { transition:all 120ms ease-out; }
.flex { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; align-items:center; }

/* Z-index */
.z-page { z-index:0; }
.z-gui { z-index:1; }
.z-overlay { z-index:2; }

/* Text */
h1 { font-size:14px; font-weight:700; }
#playercount { font-size:12px; color:#888; }
label { display:block; padding:10px 0; cursor:pointer; }

.attribution { font-size:11px; color:#888; }
.attribution p { padding:2px 0; }

/* Map labels */
.icon-textlabel { width:0px; height:1px; border:5px solid transparent; border-top-color:rgba(0,0,0,0.6);
	white-space:nowrap; text-align:center; font-size:10px; }
.icon-textlabel .icon-inner { display:inline-block; padding:1px 4px;
	transform:translateX(-50%) translateY(-100%) translateY(-5px);
	background:rgba(0,0,0,0.6); color:white; border-radius:3px; }

/* Basic GUI elements */
#sidebar { height:100vh; width:240px; left:-240px; background:white; overflow-y:auto; }
#sidebar-toggle { left:0; top:10px; width:40px; height:44px; line-height:43px;
	background:white;  border-radius:0 3px 3px 0; box-shadow:0 0 5px rgba(0,0,0,0.1);
	font-size:20px; text-align:center; cursor:pointer; }

#map { width:100vw; height:100vh; }

/* GUI elements when collapsible sidebar is open */
#gui.sidebar #sidebar { left:0; box-shadow:0 0 5px rgba(0,0,0,0.1); }
#gui.sidebar #sidebar-toggle { left:240px; }
#gui.sidebar #search { left:290px; }
#gui.sidebar #map { width:calc(100vw - 240px); left:240px; }

/* Sidebar content */
#sidebar .block { display:none; border-bottom:1px solid #ddd; padding:10px 15px; }
#sidebar .block.padding { padding:20px 15px; }
#sidebar.loaded .block { display:block; }

#sidebar label:hover, #sidebar label:focus { color:#2196F3; }
#sidebar input { -moz-appearance:none; -webkit-appearance:none; appearance:none;
	display:block; width:16px; height:16px; margin-right:5px; border-radius:8px; border:2px solid #ddd;
	text-align:center; line-height:5px; }
#sidebar input:checked { border-color:#2196F3; background:#2196F3; }
#sidebar input::after { content:''; display:inline-block; width:4px; height:4px; background:white; border-radius:50%; }

#sidebar label.indent { padding-left:15px; padding-top:5px; color:#888; font-size:13px; }
#sidebar label.indent input { width:12px; height:12px; }
#sidebar label.indent input::after { display:none; }

#sidebar label.inactive { opacity:0.6; }

/* Search box */
#search { top:10px; left:50px; }
#search input { display:block; width:300px; height:44px; line-height:44px; padding: 0 12px;
 	background:white; border:none; border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.1);
	font-family:'Roboto',sans-serif; font-weight:400; font-size:13px; }
#search.open input { border-radius:3px 3px 0 0; }

#search-results { display:none; }
#search.open #search-results { display:block; background:white; border-radius:0 0 3px 3px; }

#search-results div { display:block; padding:8px 12px; padding-left:42px; cursor:pointer;
	text-decoration:none; color:#444; border-top:1px solid #eee; background:6px 10px no-repeat; }

#search-results div.village { background-image:url('../markers/v2-search-village.png'); }
#search-results div.guardtower { background-image:url('../markers/v2-search-guardtower.png'); }
#search-results div.player { background-image:url('../markers/v2-search-player.png'); }
#search-results div.structure { background-image:url('../markers/v2-search-structure.png'); }
#search-results div.portal { background-image:url('../markers/v2-search-portal.png'); }

#search-results div:hover { background-color:#eee; border-radius:3px; }
#search-results div p strong { font-weight:700; }
#search-results div p.small { font-size:12px; color:#888; }

/* Disable anti-aliasing on map tiles to improve rendering and scroll speed
 * This needs some different hacks and prefixes to work in every browser
 */
img {
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: pixelated;
	image-rendering: optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;
}