* {box-sizing: border-box;}

html {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	font-family: Arial;
	width: 100%;
	height: 100%;
	min-height: 100%;
	font-weight: 20pt;
	background-color: #08304b;
}

p {
	margin: 0;
}

p.text {
	margin-bottom: 1em;
}

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

#content {
	max-width: 600px;
	margin: 0 auto;
}

#content h1 {
	text-align: center;
}

#content table {
    margin-bottom: 2em;
}

#sidebar {
	width: 100%;
	border-bottom: 3px #fff solid;
	border-right: none;
	border-top: 1px #08304b solid;
}

#sidebar, #content {
	background-color: #08304b;
	color: #fff;
	padding: 0 0 1em;
}

#map {
	width: 100%;
	height: 100%;
	clear: both;
}

@media screen and (min-width: 600px) {

	#sidebar {
		position: absolute;
		top: 0;
		height: 100%;
		width: 350px;
		border-right: 3px #fff solid;
		border-bottom: none;
		overflow: auto;
	}

	#map {
		margin-left: 350px;
		width: auto;
		height: 100%;
	}

}

a, a:visited {
	color: #000;
}

input, button {
	font-size: 100%;
}

#input-postcode {
	width: 8em;
}

.text a, .text a:visited {
    color: #fff;
}

.travelplans-time a {
	text-decoration: none;
}

.travelplans-time a:hover {
	text-decoration: underline;
}

#info {
	margin: 1em;
}

#search {
	background-color:#2F5C79;
	margin-bottom: 1em;
	padding: 0.5em;
	text-align: center;
}

.searchbox {
	margin-top: 0.25em;
	margin-bottom: 0.5em;
}

#loading-spinner {
	font-size: 150%;
}


.small {
	font-size: 75%;
}

table.error {
	background-color: #FFC319;
	width: 100%;
	margin-bottom: 1em;
	color: #000;
}

.sqninfo, .travelplans, .travelresults {
	border-collapse: collapse;
	background-color: #fff;
	color: #000;
	width: 100%;
	margin-bottom: 1em;
}

.sqninfo td, .travelplans td, .error td {
	padding: 0.25em 0.5em;
}

.travelresults {
	background-color: #fff;
}

.travelresults th {
	background-color: #B9D3E4;
}

.travelresults td, .travelresults th {
	padding: 0.5em;
}

.travelresults-suburb {
	color: #999;
	font-style: italic;
}

h2 {
	font-size: 130%;
	margin: 0;
}

h3, h4, h5 {
	font-size: 100%;
	margin: 0.5em 0;
}

.travelplans h2, .travelplans h3 {
	text-align: center;
}

.travelplans-time {
	padding: 0.2em;
	border-radius: 0.3em;
	text-align: center;
}

.highlight {
	background-color: #FFC319;
}

.sqnname {
	background-color: #CE1126;
	color: #FFFFFF;
}

.icon {
	font-size: 150%;
	text-align: center;
	width: 2em;
	line-height: 50%;
}

.showmore, .showless {
	text-align: right;
	background-color: #eee;
}

.travelplans-header {
	background-color: #666;
	color: #fff;
	padding: 2em;
}

.travelplans-driving-header, .travelplans-pubtrans-header {
	background-color: #ccc;
}

.travelplans-pubtrans-route-header {
	background-color: #eee;
}

.travelplans-driving-routes, .travelplans-pubtrans-routes, .travelplans-hide, #travelplans-toofar {
	display: none;
}

.travelplans-show, .travelplans-hide {
	width: 8em;
    text-align: right;
}

.travelplans-times {
	width: 6em;
}

.travelplans-showallunits {
	font-weight: bold;
	text-align: center;
    padding-bottom: 1em;
}

#travelplans-toofar {
	background-color: #2F5C79;
	outline-color: #2F5C79;
	outline-style: solid;
	outline-width: 2em;
	margin-top: 2em;
}