@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,700);
body {
	padding:0;
	margin:0;
}
body, input, button {
	font-family:"Open Sans",Arial,Helvetica,sans-serif;
	font-size:1.2rem;
	font-weight:300;
}
nav ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction:row;
	width:100%;
}
nav li {
	list-style:none;
	margin:0 0.1em;
	padding:5px 25px;
	flex:1;
	text-align:center;
	background:#2680A5;
	color:#E5981C;
	border:1px solid #aaa;
	border-bottom-width:0;
	cursor:pointer;
}
nav li:first-child {
	margin-left:0;
}
nav li:last-child {
	margin-right:0;
}
nav li[aria-current] {
	background:#eee;
	color:#000;
	border-bottom:1px solid #eee;
	margin-bottom:-1px;
}
[aria-hidden] {
	display:none;
}
main {
	background:#eee;
	border:1px solid #aaa;
	margin:0;
	padding:5px;
}
a {
	color:#2680A5;
	text-decoration:none;
}
#svgContainer {
	display:none;
}
input[type="text"] {
	height:1.4em;
	width:16em;
	padding:0 0.3em;
}
input[type="text"].short {
	width:8em;
}
input[type="checkbox"], input[type="radio"] {
	margin-top:10px;
}
label {
	position:relative;
	margin-right:10px;
}
[type="checkbox"], [type="radio"] {
	position: absolute;
	left: -9999px;
	opacity: 0;
}
input[type="text"], input[type="checkbox"] + label::before,  input[type="radio"] + label::before {
	background:#fff;
	box-shadow:1px 1px 3px rgba(0,0,0,0.15) inset;
	border:1px solid #878c96;
	box-sizing:content-box;
}
input[type="checkbox"] + label, input[type="radio"] + label {
	padding-left:30px;
	cursor:pointer;
}
input[type="checkbox"] + label::before, input[type="radio"] + label::before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:.9em;
	height:.9em;
	padding:3px;
}
input[type="checkbox"]:checked + label::after, input[type="radio"]:checked + label::after {
	content:'';
	background:#2680A5;
	position: absolute;
	top:4px;
	left:4px;
	width:.9em;
	height:.9em;
}
input[type="radio"] + label::before, input[type="radio"] + label::after {
	border-radius:0.9em;
}
input[type="submit"], button {
	min-width:150px;
	padding:5px 25px;
	background:#2680A5;
	color:#E5981C;
	box-shadow:2px 2px 3px rgba(0,0,0,0.35);
	border: 1px solid #878c96;
	cursor:pointer;
}
input[type="submit"].thin {
	padding:0 25px;
}
input[type="submit"]:hover, button:hover {
	background:#167095;
	color:#D5880C;
}
#iconFromTo {
	width:0;
	height:0;
	position:relative;
	top:2px;
	z-index:1;
	border:0.6rem solid transparent;
	border-left:.9rem solid #878c96;
	border-right:0;
	display:inline-block;
	cursor:pointer;
}
#iconFromTo::before {
	content:'';
	width:0;
	height:0;
	position:absolute;
	left:-.8rem;
	top:-.5rem;
	z-index:2;
	border:0.5rem solid transparent;
	border-left:.8rem solid #2680A5;
	border-right:0;
	display:inline-block;
}
#iconSwap {
	display:none;
}
.stationContainer, #lbDateTime, #lbTransportType {
	position:relative;
	display:inline-block;
}
#lbTransportType {
    margin-left:1.2rem;
}
.stationContainer input {
	padding-right:1.3em;
	width:15em;
}
.imgLocation {
	width:1.2em;
	height:1.2em;
	vertical-align:middle;
	position:absolute;
	right:2px;
	top:8px;
	cursor:pointer;
	stroke:black;
	fill:black;
	opacity:0.5;
}
.imgCalendar {
	width:1.2em;
	height:1.2em;
	vertical-align:middle;
	position:absolute;
	right:3px;
	top:8px;
	cursor:pointer;
	fill:black;
	opacity:0.5;
}
#bodyContainer {
	text-align:center;
	margin:10px 10px 100px 10px;
}
#bodyContent {
	display:inline-block;
}
.formContent {
	background:#eee;
	border:1px solid #aaa;
	margin-bottom:5px;
	padding:10px;
	text-align:left;
}
.formRow {
	margin:0;
}
.formRow input, #lbTransportDirect {
	margin:5px 0;
}
#lbTransportType {
	position:relative;
	max-width:100%;
	width:auto;
}
#lbFilterMore {
	margin-left:10px;
	position:relative;
	top:-2px;
	padding:0 5px;
	min-width:auto;
	box-shadow:none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
	border:1px solid #878c96;
    border-radius:40%;
	font-size:.9em;
    font-weight:bold;
}
#lbFilterDetails {
	display:none;
    width:100%;
}
#lbFilterDetails .ttrow {
	display:table-row;
}
#lbFilterDetails .traintype {
	display:table-cell;
	width:50%;
}
#lbButton {
	text-align:right;
}

#info {
	display:none;
	border:1px solid #aaa;
	margin:5px 0;
	padding:3px 10px;
	font-size:0.7em;
}

#searchContainer {
	visibility:hidden;
	position:absolute;
	background:#FFF;
	border:1px solid #000;
	min-width:150px;
	padding:5px;
	overflow-x:visible;
	overflow-y:scroll;
	z-index:99;
}
.selTable {
	display:table;
}
.selRow {
	display:table-row;
	text-align:left;
	white-space:nowrap;
}
.selRow[data-id="0"] span {
	font-style:italic;
}
.selCol {
	display:table-cell;
	padding:0 3px;
}
.selRowSelected {
	background:#2680A5;
	color:#FFF;
}

#resulttable {
	width:100%;
	border-spacing:0;
	border-collapse:collapse;
}

#resultbody tr {
	border:1px solid #aaa;
	border-width:0 1px 0 1px;
}
#resultbody .firstSegment {
	border-width:1px 1px 0 1px;
}
#resultbody .totalTr {
	border-width:1px;
}

#resulttable td {
	text-align:left;
	padding:0 25px;
}

#resulttable tr.separator {
	border-left-width:0;
	border-right-width:0;
	height:10px;
	background:transparent;
}

#resultfoot td.extendlink {
	border:1px solid #aaa;
	background:#ccc;
	color:#2680A5;
	text-align:center;
	cursor:pointer;
}
td.error {
	background:#ee9999;
	text-align:center;
}

tr.route td {
	background:#eee;
	vertical-align:top;
}

tr.transfer td {
	background:#ddd;
	vertical-align:top;
}

tr.totalTr td {
	background:#FFD89C;
}

td.stationZh {
	white-space:nowrap;
}

#resultbody tr.changetime td {
	text-align:center;
}
.iconTHSR {
	width:27px;
	height:15px;
}
.iconTRA {
	width:15px;
	height:15px;
}
.iconWalk {
	width:15px;
	height:15px;
	fill:black;
	opacity:0.7;
}
.iconTransfer {
	width:30px;
	height:15px;
	fill:black;
	opacity:0.6;
}
.iconBicycle {
	width:24px;
	height:15px;
}
.iconWheelchair {
	width:13px;
	height:15px;
}
.iconPhone {
	width:15px;
	height:15px;
}
.additionalInfo svg {
	fill:black;
	opacity:0.7;
	vertical-align:middle;
	margin:0 2px;
}
.price {
	padding-right:5px;
}
#resultbody td.operator {
	white-space:nowrap;
}
#resultbody td.additionalInfo {
	font-size:0.8em;
}
#resulttable td.rtOnTime, #resulttable span.mrtOnTime {
	color:#0A0;
}
#resulttable td.rtDelay, #resulttable span.mrtDelay {
	color:#F00;
}
#resultbody td.mTotalTime span {
	display:none;
}
span.mrtOnTime, span.mrtDelay {
	display:none;
}
div.traintype {
	display:inline-block;
	margin:0 2px 0;
	padding:2px;
}
div.traintype1 {
	background:rgb(255, 165, 0);
}
div.traintype2 {
	background:rgb(255, 0, 0);
}
div.traintype3 {
	background:rgb(255, 215, 0);
}
div.traintype4 {
	background:rgb(255, 140, 0);
}
div.traintype5 {
	background:rgb(173, 216, 230);
}
div.traintype6 {
	background:rgb(0, 8, 189);
	color:#FFF;
}
div.traintype7 {
	background:rgb(128, 128, 128);
	color:#FFF;
}
div.traintype10 {
	background:rgb(0, 8, 189);
	color:#FFF;
}
div.traintype11 {
	background:rgb(255, 215, 0);
}
svg.traintype {
	width:18px;
	height:18px;
	vertical-align:-1px;
	stroke:#000;
	stroke-width:3px;
}
svg.traintype1 {
	fill:rgb(255, 165, 0);
}
svg.traintype2 {
	fill:rgb(255, 0, 0);
}
svg.traintype3 {
	fill:rgb(255, 215, 0);
}
svg.traintype4 {
	fill:rgb(255, 140, 0);
}
svg.traintype5 {
	fill:rgb(173, 216, 230);
}
svg.traintype6 {
	fill:rgb(0, 8, 189);
}
svg.traintype7 {
	fill:rgb(128, 128, 128);
}
svg.traintype10 {
	fill:rgb(0, 8, 189);
}
svg.traintype11 {
	fill:rgb(255, 215, 0);
}
.routeType {
	vertical-align:middle;
	width:25px;
	height:25px;
}

#modalDialog {
	display:none;
	position:fixed;
	z-index:1;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:rgb(0,0,0);
	background-color:rgba(0,0,0,0.4);
}

#modalDialog div {
	background-color:#fefefe;
	border:1px solid #888;
	text-align:center;
	position:absolute;
}

#disclaimer {
	font-size:0.7em;
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	text-align:center;
	background:#eee;
	border-top:1px solid #aaa;
}
#disclaimer p {
	padding:5px;
}
@media screen and (max-width: 767px) {
	body, input, button {
		/*font-size:2.2rem;*/
	}
	nav li {
		padding:5px;
	}
	#bodyContainer {
		width:100%;
		min-width:100%;
		margin:0;
		padding:0;
		box-sizing:border-box;
		text-align:center;
	}
	#bodyContent {
		display:block;
		margin:5px;
	}
	#searchContainer {
		left:10px;
		right:24px;
		bottom:20px;
		box-sizing:border-box;
	}
	#lbTransportType {
		text-align:left;
		padding:5px 0;
	}
	#lbFilterMore {
		top:0;
	}
    #lbFilterDetails .ttrow {
        display:block;
	}
    #lbFilterDetails .traintype {
        display:block;
        width:auto;
	}
	#lbButton {
		text-align:center;
	}
	#lbFromTo {
		position:relative;
	}
	.stationContainer, #lbDateTime, #lbTransportType {
		display:block;
	}
	#contentConnection .stationContainer, #lbDateTime {
		margin-right:3.3rem;
	}
    #lbTransportType {
        margin-left:0;
    }
	.stationContainer input {
		padding-right:2.3em;
	}
	#iconFromTo {
		display:none;
	}
	#iconSwap {
		display:inline-block;
		position:absolute;
		right:0;
		top:2.4rem;
		width:2.4rem;
		height:2.4rem;
		cursor:pointer;
		fill:#777;
	}
	input[type="text"] {
		height:3rem;
	}
	input[type="text"], input[type="text"].short, input[type="submit"] {
		width:100%;
		box-sizing:border-box;
	}
	input[type="submit"].thin {
		padding:5px 25px;
	}

	.imgLocation, .imgCalendar {
		width:2.2em;
		height:2.2em;
	}

	#resulttable td {
		padding:0 3px;
	}

	#resulttable td.rtDuration, #resulttable td.rtDelay, #resulttable td.rtOnTime, #resultbody td.totalTime {
		width:0;
		max-width:0;
		overflow:hidden;
		color:transparent;
	}
	span.mrtOnTime, span.mrtDelay {
		margin-left:5px;
		display:inline;
	}
	#resultbody td.mTotalTime span {
		display:inline;
	}

	#disclaimer {
		margin:50px 0 0 0;
		box-sizing:content-box;
		position:relative;
		bottom:-10px;
		border-top:0;
		font-size:0.7rem;
	}
}