#body {
	padding: 0;
	margin: 0;
}

#mapid {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

#controls {
	position: absolute;
	top: 0.8em;
	right: 0.8em;
	z-index: 1000;
	background: white;
	border: 1px #cccccc solid;
	padding: 0.2em;
	width: 20em;
}

#zoom-in-hint {
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 2em;
	padding-bottom: 3em;
}

#controls .half {
	width: 49%;
	margin: 0;
}

.ui-front {
	z-index: 1100;
}

#controls div.postcode-control {
	padding: 0.3em;
}

#controls div.postcode-control #postcode {
	font-size: 140%;
	width: 70%;
	padding: 0.3em;
}

#controls div.postcode-control label {
	width: 30%;
	display: inline-block;
	overflow: hidden;
}


#controls .key {
	margin-top: 0.2em;
}

#controls .key > .line {
	display: inline-block;
	width: 5em;
	font-size: 50%;
	padding: 0.1em;
	margin: 0;
	border-left: 1px black dotted;
	border-bottom: 0.8em cyan solid;
}

#controls span.dfn {
	border-bottom: 1px black dotted;
	display: inline-block;
}

#controls span.clickable {
	color: #4444ff;
	font-size: 80%;
	text-decoration: underline;
	cursor: pointer;
}

#controls span.option-icon::before {
	content: "⚙ ";
}

#controls div.drilldown {
	display: none;
	font-size: 80%;
}

div.frequency-chart > span.axis,
div.frequency-chart > span.bar {
	display: inline-block;
	vertical-align: bottom;
	width: 4px;
	background: #550077;
	border-bottom: 1px solid black;
}

div.frequency-chart > span.bar.hour-6,
div.frequency-chart > span.bar.hour-12,
div.frequency-chart > span.bar.hour-18 {
	border-left: 1px dotted black;
}

div.operating-hours {
	text-align: center;
	font-size: 80%;
}
div.operating-hours > span {
	width: 40%;
	display: inline-block;
}
div.operating-hours > span.min {
	text-align: left;
}
div.operating-hours > span.max {
	text-align: right;
}

div.max-bus-count {
	text-align: left;
	font-size: 80%;
}
div.max-bus-count > span {
	width: 20%;
	display: inline-block;
	text-align: left;
	border-bottom: 1px black dotted;
}

div.speed {
	margin-top: 0.2em;
}

div.speed > span.kph {
	color: #666666;
}