html, body {
	height: 100%}	/* line-height? */
body {
	background: #b8e1ff; color: #000000; font-size: 0.85em; text-align: left}
html, body, ul, li {
	margin: 0}
body, button {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif}
#page {
	min-height: 100%; margin: 0 auto -2em}
a {
	color: #0000ff}
a:visited {
	color: #800080}
:target {
	background: #cce9ff}
ul {
	padding: 0.05em 0 0 2em; list-style: disc inside}
ul ul {
	font-size: 80%}
li {
	padding: 0.25em 0 0.16em 0.5em}
li li {
	padding: 0.06em 0 0.18em}
p {
	font-size: 100%; margin: 0 0.1em 0.2em}
small {
	font-size: 75%}
#logo {
	border-bottom: 1px solid #aaaaaa; padding: 0.6em 0; text-align: center; position: relative; background: #b8e1ff}
.box, .preds, .messages div, .error {
	border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5)}
.box.links {
	box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none}
#logo a, #logo div {
	font-size: 175%}
#logo p {
	font-size: 90%; margin: 0}
#logo a, #logo div, h1, .header h2, .box h2, #routeList h2 strong, .links a {
	font-family: Arial, Helvetica, sans-serif}
.bread {
	font-size: 85%; border-bottom: 1px solid #aaaaaa; padding: 0.1em; background: #dff1ff}
.header {
	margin: 0 0 0.4em; border-bottom: 0.06em solid #aaaaaa; padding: 0.17em 0.25em}
.container {
	max-width: 33em}
h1 {
	margin: 0 0 0.1em; font-size: 140%}
h2 {
	margin: 0; font-weight: normal}
.header h2 {
	margin: 0.2em 0 0; font-size: 125%}
.header .status {
	float: right; text-align: right; font-size: 90%}
.header .status * {
	vertical-align: middle}
.options label {
	display: inline-block; margin: 0 0.3em 0 0; padding: 0.1em}
.box, .header {
	background: #eeeeee}
.box {
	border: 1px solid #aaaaaa}
.content {
	padding: 0.15em 0.25em 0.2em}
.box h2 {
	margin: 0; border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -o-border-radius: 10px 10px 0 0; padding: 0.2em 0.3em; font-size: 125%; background: #005099; color: #eeeeee}
.searchForm {
	margin: 0.2em 0}
input[type=radio] {
	margin: 0 0.3em 0 0}
div.box {
	margin: 0 0 1em}
.links a {
	font-size: 135%}
.links .content div {
	margin: 0.15em 0}
.header .stopId {
	font-weight: bold; display: block}
.notRunning {
	color: #777777}
.box ul {
	padding: 0 0 0 0.15em}
.box li {
	padding: 0.05em 0 0.17em}
.box ul ul {
	padding: 0.05em 0 0.1em 3em}
.box li li {
	padding: 0.06em 0 0.1em 0.2em; text-indent: -1.2em}
#nearby, .loading, .retryGeo {
	display: none}
.retryGeo {
	margin-right: 0.1em}
#routeList {
	padding: 0}
#routeList li {
	border-bottom: 1px solid #a5c9e4; padding: 0.2em 0 0.2em 0.1em; display: block}
#routeList h2 {
	width: 8em; font-size: 85%; margin: 0 0.2em 0 0; text-align: center; display: inline-block}
#routeList h2 strong {
	display: block; font-size: 160%; margin-bottom: -0.05em}
#routeList div {
	font-size: 90%; line-height: 130%; display: inline-block; vertical-align: top}
#routeList a {	/* share box-shadow with button? */
	margin: 0 0.5em 0 0; border: 1px solid #a4cae5; border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; padding: 0.1em 0.25em; width: 15em; min-height: 2.62em; display: inline-block; background: #dcf0ff; vertical-align: top; text-decoration: none; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5)}
#routeList a:hover, #routeList a:focus {
	background: #ffffff}
#routeList a:last-child {
	margin-right: 0}
#stopList {
	max-width: 40em; position: relative; z-index: 2}
#stopList li span {
	display: none}
#stopList li.nearby {
	background: transparent}
#stopList li.nearby span {
	display: inline}
.nearbyHilight {
	background: #f0f0aa; color: #333333; position: absolute; display: none}
.nearbyHilight h3 {
	background: #333333; color: #f0f0aa; font-size: 85%; font-weight: bold; margin: 0; padding: 0.1em 0.2em}
input[name=stopId] {
	width: 4.5em; margin: 0 0.2em}
input[type=text] {
	border: inset 2px ThreeDFace; border-radius: 0.7em; -moz-border-radius: 0.7em; -webkit-border-radius: 0.7em; padding-left: 0.15em}
input[type=text]:focus {
	box-shadow: 0 0 3px #0000ff; -moz-box-shadow: 0 0 3px #0000ff; -webkit-box-shadow: 0 0 3px #0000ff}
button {
	background: #0000ff; color: #ffffff; border-color: #0000ff; border-radius: 0.7em; -moz-border-radius: 0.7em; -webkit-border-radius: 0.7em; -o-border-radius: 0.7em; padding: 0 0.5em; font-size: 90%; letter-spacing: 0.02em; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5); -moz-text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5); -webkit-text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5)}
button:focus {
	background: #3333ff; box-shadow: 0 0 4px #0000ff, 2px 2px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 4px #0000ff, 2px 2px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 4px #0000ff, 2px 2px 3px rgba(0, 0, 0, 0.5)}
button::-moz-focus-inner { 
	border: 0; padding: 0}
.box.preds {
	margin: 0.4em 0 0.5em}
.preds h3 {
	font-size: 100%; font-weight: bold; margin: 0 0 -0.15em}
.preds .content > div {
	margin: 0.75em 0 0}
.preds .content > div:first-child {
	margin-top: 0}
.preds p {
	text-indent: -1em; margin: 0; padding: 0.16em 0 0 2.2em}
.preds a {
	text-decoration: none}
.preds p a {
	font-size: 80%}
.preds a:focus, .preds a:hover {
	text-decoration: underline}
.time {
	font-weight: bold}
.preds .routesWithoutPreds {
	margin: 0.8em 0 0; border-top: 0.1em solid #bbbbbb; padding: 0.3em 0 0 1.2em; text-indent: -1.2em}
.preds .routesWithoutPreds a {
	font-weight: bold; font-size: 100%}
.preds .routesWithoutPreds small a {
	font-weight: normal}
.messages div, .error {
	background: #fffa72; margin: 0.45em 0 0; border: 0.1em solid #ff0000; padding: 0.2em 0.3em}
.error {
	overflow: auto; display: none}
.error img {
	float: left}
#footer, #magic {
	height: 2em}
#footer {
	background: #005099; color: #eeeeee; padding: 0.1em 0.25em; font-size: 90%}
#footer a {
	color: #8899ff}
#footer a:visited {
	color: #dd88dd}
#footer > * {
	float: left; margin-right: 2em}
#footer .options {
	float: right; margin-right: 0}
#footer form {
	margin: 0 2em 0 0}