body {
	margin: 0;
	color: $fg;
	background-color: $bg;
}

html {
	font-family: Sans-Serif;
}

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

.textcontent {
	margin-left: 1ex;
	margin-right: 1ex;
}

a {
	color: $link-color;
	text-decoration: none;
}

input, select, button {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 1.8em;
	border-radius: 4px;
	font-size: 90%;
	color: $fg;
	background-color: $bg;
	border: 1px solid $bg1;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	vertical-align: middle;
	padding-top: 1ex;
	padding-bottom: 1ex;
	margin-top: 1ex;
	margin-bottom: 1ex;
}

button {
	transition: background-color .3s;
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
	cursor: pointer;
	box-shadow: none;

	&:active, &:focus, &:hover {
		color: #fff;
		background-color: #286090;
		border-color: #204d74;
	}
}

input[type="text"] {
	padding-left: 0.5em;
	padding-right: 0.5em;
	text-align: left;
	box-sizing: border-box;
}

.smallbutton {
	display: inline-block;
	vertical-align: baseline;
	border-radius: 4px;
	border: 1px solid #2e6da4;
	transition: background-color .3s;
	color: #fff;
	background-color: #337ab7;
	cursor: pointer;
	box-shadow: none;
	padding: 0.9ex;
	margin-right: 1em;

	&:active, &:focus, &:hover {
		color: #fff;
		background-color: #286090;
		border-color: #204d74;
	}

	.material-icons {
		display: block;
		float: left;
		margin-right: 0.5ex;
	}
}

.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;
	border: 1px solid #faebcc;
	border-radius: 4px;
	color: #8a6d3b;
	background-color: #fcf8e3;
	margin-left: auto;
	margin-right: auto;

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

.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;

	> li {
		position: relative;
		border-bottom: 1px solid grey;
		background-color: $bg;

		> .anchor {
			position: relative;
			top: -12em;
		}

		a {
			color: $fg;
			text-decoration: none;
			display: block;
			height: 4em;
			width: 100%;
			position: relative;

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

			.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 $longdistance-bg;
				}

				.regional {
					background-color: $regional-bg;
				}

				.tram {
					background-color: $tram-bg;
				}

				.taxi {
					background-color: $taxi-bg;
					font-weight: normal;
				}

				.suburban {
					background-color: $suburban-bg;
					border-radius: 30px;
				}

				.subway {
					background-color: $subway-bg;
				}

				.bus {
					background-color: $bus-bg;
					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 {
		border-bottom: 1px solid grey;
		background-color: $bg;

		&.cancelled {
			background-color: $cancelled-bg-color;
		}

		a {
			color: $fg;
			text-decoration: none;
			display: block;
			height: 3em;
			width: 100%;
			position: relative;
		}
	}

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

	.longdistance {
		border: 0.1em solid $longdistance-bg;
	}

	.tram {
		background-color: $tram-bg;
	}

	.suburban {
		background-color: $suburban-bg;
		border-radius: 30px;
	}

	.subway {
		background-color: $subway-bg;
	}

	.bus {
		background-color: $bus-bg;
		border-radius: 10px;
	}

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

	.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: $fg;

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

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

	span.cancelled {
		position: absolute;
		bottom: 5px;
		right: 5px;
		overflow: hidden;
		background-color: transparent;
		font-size: 100%;
		color: $delay-color;
	}

	.no-realtime {
		background-color: transparent;
		padding-right: 1ex;
		i.material-icons {
			font-size: 12px;
		}
	}
}

.tripinfo {
	padding-left: 1em;
	padding-right: 1em;
	.direction {
		text-align: center;
		font-size: 120%;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		border-bottom: 0.1em dashed #cccccc;
	}
	.dataline {
		margin-top: 0.6em;
		font-size: 120%;
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 1em;

		> div {
			width: 33%;
		}

		.arrival {
			display: inline-block;
			text-align: right;
		}
		.platform {
			text-align: center;
		}
		.departure {
			text-align: right;
		}

		.delay {
			color: $delay-color;
		}
		.material-icons {
			font-size: 20px;
		}
	}
	.linklist {
		margin-top: 0.5em;
		margin-bottom: 1em;
		.material-icons {
			font-size: 20px;
		}
	}
	.route {
		margin-top: 1em;
		.past-stop {
			list-style-type: disc;
		}
		.future-stop {
			list-style-type: circle;
		}
		.this-stop {
			font-weight: bold;
		}
		.cancelled-stop {
			color: $cancelled-stop-color;
		}
	}
}

.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;
			}
		}
	}
}

.about {
	color: $fg2;
	margin-top: 2em;

}

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: local('Material Icons'),
		local('MaterialIcons-Regular'),
		url(/static/v7/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;
		}
	}
}