* { outline: none; }
html, body { margin: 0; padding: 0; border: 0; height: 100%; }
body { background: #f6f6f6 url('../images/loading.gif') no-repeat center; background-size: 16px 16px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
header { position: absolute; top: 0; left: 0; right: 0; height: 60px; background: #a2d078; color: #fff; box-sizing: border-box; padding: 10px;  }
#map { position: absolute; top: 60px; bottom: 0; left: 0; right: 0; opacity: 0; transition: 0.5s opacity; }
#map.mapshown { opacity: 1; }
#categories { position: absolute; top: 10px; right: 10px; width: 250px; max-height: 40px; overflow: hidden; border: 1px solid #fff; background: #a2d078; box-sizing: border-box; color: #fff; transition: 0.5s max-height; }
#categories h3 { margin: 0; padding: 10px; line-height: 20px; position: relative; cursor: pointer; transition: 0.5s opacity; }
#categories.catshown { max-height: 340px; }
#categories .catlist { max-height: 300px; overflow: auto; -webkit-overflow-scrolling: touch; }
#categories h3:hover { opacity: 0.6; }
#categories h3:after { position: absolute; right: 10px; content: '\25BC'; font-size: 0.6em; }
#categories.catshown h3:after { content: '\25B2'; }
h1 { margin: 0; font-size: 28px; line-height: 40px; position: relative; }
h1 span { font-size: 0.3em; position: absolute; top: -10px; }
h3 { margin: 5px 0 3px; }
p { margin: 10px 0 5px; }
#categories label { padding: 6px 10px 6px 30px; border-top: 1px solid rgba(255,255,255,0.5); display: block; font-size: 12px; line-height: 18px; text-transform: uppercase; position: relative; transition: 0.25s all; overflow: hidden; background-image: url('../images/cross.png'); background-position: 8px 8px; background-size: 14px 14px; background-repeat: no-repeat;  }
#categories label.catsel { background-color: rgba(255,255,255,0.25); color: #333; background-image: url('../images/tick.png'); }
#categories label input { position: absolute; top: 5px; left: -100px; }

@media all and (max-width: 599px) {
	html { min-width: 320px; -webkit-text-size-adjust: none; }
	#categories { width: 200px; }
}
@media all and (max-width: 479px) {
	h1 { font-size: 18px; }
	h1 span { display: none; }
	#categories h3 { font-size: 14px; }
}
@media all and (max-width: 379px) {
	#categories { width: 180px; }
}
@media all and (max-width: 359px) {
	#categories { width: 150px; }
}

@media all and (max-height: 350px) {
	#categories.catshown { max-height: 250px; overflow: auto; -webkit-overflow-scrolling: touch; }
	#categories .catlist { max-height: 210px; }
}