body {
	margin: 0;
	color: black;
	background-color: white;
}

html {
	font-family: Sans-Serif;
}

.container {
	max-width: 60em;
	margin-left: auto;
	margin-right: auto;
}

.globalnote {
	margin-top: 1em;
	font-style: italic;
	text-align: center;
}

.geolocation {
	margin-bottom: 1em;
}

.notice {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid #bce8f1;
	border-radius: 4px;
	color: #31708f;
	background-color: #d9edf7;
	margin-left: auto;
	margin-right: auto;
}

.warning {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid #faebcc;
	border-radius: 4px;
	color: #8a6d3b;
	background-color: #fcf8e3;
	margin-left: auto;
	margin-right: auto;
}

.error {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid #ebccd1;
	border-radius: 4px;
	color: #a94442;
	background-color: #f2dede;
	margin-left: auto;
	margin-right: auto;

	strong {
		margin-right: .2em;
	}

	.errcode {
		font-family: Monospace;
		margin-top: 2em;
		font-size: 100%;
		color: #aaaaaa;
	}

}

ul.stops {
	position:relative;
	width:100%;

	border-width:1px 2px;
	margin-bottom: 5em;

	list-style-type:none;
	margin:0;
	padding:0;

	a {
		text-decoration: none;
	}

	> li {
		display: block;
		height: 4em;
		width: 100%;
		position: relative;
		border-bottom: 1px solid grey;
		background-color: white;
		cursor: pointer;

		.name {
			position: absolute;
			bottom: 0;
			left: 5px;
			width: 70%;
			overflow: hidden;
			background-color: transparent;
			font-size: 150%;
			color: black;
		}

		.distance {
			position: absolute;
			top: 1px;
			right: 5px;
			width: 30%;
			text-align: right;
			height: 1.2em;
			overflow: hidden;
			opacity: 50%;
		}


		.note {
			position: absolute;
			top: 1px;
			left: 0;
			width: 70%;
			height: 1.2em;
			overflow: hidden;
			opacity: 50%;
		}

		.lines {
			position: absolute;
			bottom: 0.1em;
			right: 5px;
			background-color: transparent;
			font-weight: bold;
			font-size: 120%;

			span {
				padding-left: 0.1em;
				padding-right: 0.1em;
				margin-left: 0.2em;
			}

			.longdistance {
				border: 0.1em solid #ffcccc;
			}

			.regional {
				background-color: #eeeeee;
			}

			.tram {
				background-color:#ffcccc;
			}

			.taxi {
				background-color:#eeaaee;
				font-weight: normal;
			}

			.suburban {
				background-color:#aaffba;
				border-radius: 30px;
			}

			.subway {
				background-color:#aac0ff;
			}

			.bus {
				background-color:#eeaaee;
				border-radius: 10px;
			}
		}

	}
}

ul.departures {
	position:relative;
	width:100%;

	border-width:1px 2px;
	margin-bottom: 5em;

	list-style-type:none;
	margin:0;
	padding:0;

	> li {
		display: block;
		height: 3em;
		width: 100%;
		position: relative;
		cursor: pointer;
		border-bottom: 1px solid grey;
		background-color: white;

		&.cancelled {
			background-color: #ffe7d0;
		}
	}

	.line {
		position: absolute;
		bottom: 2px;
		left: 2px;
		max-width: 6em;
		max-height: 3ex;
		max-width: 5em;
		overflow: hidden;
		font-size: 120%;
		background-color: #eeeeee;
		font-weight: bold;
		padding-left: 0.1em;
		padding-right: 0.1em;
	}

	.longdistance {
		border: 0.1em solid #ffcccc;
	}

	.tram {
		background-color:#ffcccc;
	}

	.suburban {
		background-color:#aaffba;
		border-radius: 30px;
	}

	.subway {
		background-color:#aac0ff;
	}

	.bus {
		background-color:#eeaaee;
		border-radius: 10px;
	}

	.dest {
		position: absolute;
		bottom: 0;
		left: 4em;
		width: 70%;
		overflow: hidden;
		background-color: transparent;
		font-size: 150%;
		color: black;
	}

	.destsuffix {
		position: absolute;
		top: 1px;
		left: 6.1em;
		width: 70%;
		height: 1.2em;
		overflow: hidden;
	}

	.time {
		position: absolute;
		right: 5px;
		top: 1px;
		background-color: transparent;
		padding-left: 0.2em;
		color: black;

		.delay {
			padding-right: 1ex;
			color: #ff0000;
		}
	}

	.platform {
		position: absolute;
		bottom: 0;
		right: 5px;
		overflow: hidden;
		background-color: transparent;
		font-size: 140%;
		font-weight: bold;
		color: black;
	}
}

.navbar-fixed {
	position: relative;
	z-index: 997;

	nav {
		position: fixed;
		width: 100%;
		box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
		overflow: hidden;

		a {
			color: #ffffff;
		}

		.container {
			position: relative;
			height: 100%;
		}

		.main {
			position: absolute;
			display: inline-block;
			padding-left: 0.5rem;
		}

		ul {
			float: right;
			margin: 0;
			padding-left: 0;
			list-style-type: none;

			li {
				float: left;
				padding: 0;
				list-style-type: none;
				padding-left: .8em;
				padding-right: .8em;
			}
		}
	}
}

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: local('Material Icons'),
		local('MaterialIcons-Regular'),
		url(/static/v0/font/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
}


@media only screen and (max-width: 600px) {
	ul.departures > li,
	ul.stops > li {
		font-size: 85%;
	}
	.navbar-fixed {
		height: 50px;
	}
	nav {
		height: 50px;
		line-height: 50px;
		.main {
			font-size: 120%;
		}
		.material-icons {
			height: 50px;
			line-height: 50px;
		}
	}
}

@media only screen and (min-width: 600px) {
	.navbar-fixed {
		height: 60px;
	}
	nav {
		height: 60px;
		line-height: 60px;
		.main {
			font-size: 140%;
		}
		.material-icons {
			height: 60px;
			line-height: 60px;
		}
	}
}