nav a, nav a:visited, nav a:focus, nav a:hover {
  text-decoration: none;
  color: black;
  display: inline-block;
  padding: 8px;
  border: 1px solid #ccc;
}
nav a.active {
	border-bottom: 3px solid green;
}
nav {
  padding: 8px;
}


.search {
  position: relative;
  margin: 0 auto;
  width: 300px;
}
.search input {
  height: 26px;
  width: 98%;
  padding: 0 12px 0 25px;
  border: 1px solid;
  border-color: #a8acbc #babdcc #c0c3d2;
  border-radius: 13px;
  -webkit-appearance: textfield;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px #fcfcfc;
  box-shadow: inset 0 1px #e5e7ed, 0 1px #fcfcfc;
}
.search input:focus {
  outline: 0;
  border-color: #66b1ee;
  -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
  box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus + .search-ac {
  display: block;
}

.search-ac {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 10;
  background: #fdfdfd;
  border: 1px solid;
  border-color: #cbcfe2 #c8cee7 #c4c7d7;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: linear-gradient(to bottom, #fdfdfd, #eceef4);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search-ac:hover {
  display: block;
}
.search-ac li {
  display: block;
}
.search-ac li:first-child {
  margin-top: -1px;
}
.search-ac li:first-child:before, .search-ac li:first-child:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  margin-left: -5px;
  border: 5px outset transparent;
}
.search-ac li:first-child:before {
  border-bottom: 5px solid #c4c7d7;
  top: -11px;
}
.search-ac li:first-child:after {
  border-bottom: 5px solid #fdfdfd;
  top: -10px;
}
.search-ac li:first-child:hover:before, .search-ac li:first-child:hover:after {
  display: none;
}
.search-ac li:last-child {
  margin-bottom: -1px;
}
.search-ac i {
	position: absolute;
	left: 0em;
	width: 2em;
	/* padding-left: 30em; */
	text-align: center;
}
.search-ac a {
  display: block;
  position: relative;
  margin: 0 -1px;
  /*padding: 6px 40px 6px 10px;*/
  color: #808394;
  font-weight: 500;
  text-decoration: none;
  text-shadow: 0 1px white;
  border: 1px solid transparent;
  border-radius: 3px;
}
.search-ac a span {
  font-weight: 200;
}
/*
.search-ac a:before {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -9px;
  width: 18px;
  height: 18px;
}*/
.search-ac a:hover {
  color: white;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  background: #338cdf;
  border-color: #2380dd #2179d5 #1a60aa;
  background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
  background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
  background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
  background-image: linear-gradient(to bottom, #59aaf4, #338cdf);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
.hidden {
	display: none;	
}
.searchContainer {
	position: relative;
}
.favorite {
	display: inline-block;
	width: 200px;
	height: auto;
	min-height: 100px;
	box-shadow: 0px 0px 2px 1px #ccc;
	margin: 10px;
	vertical-align: top;
	text-align: center;

}
.favorite h1 {
	font-size: 10px;

}
.favorite h1 button.change {
  font-size: 10px;
  width: 5em;
}

.favorite h2 {
	font-size: 9px;
}
.favorite .time {
	float: right;

}
.favorite .lineinfo {
	font-size: 10px;
	text-align: left;
	padding: 3px 0;
}
.train{
  padding:2px;
}
.train.A {
  background-color:#42AAEF;

  color: #fff;
}
.train.H {
  background-color:#EF4242;
  color: #fff;
}
.train.B {
  background-color:#5FEF42;
  color: #fff;
}
.train.E{
  background-color:#A142EF;
  color: #fff;
}
.train.C{
  background-color:#EFBB42;
  color: #fff;
}
.train.F{
  background-color:#F2F261;
  color: #000;
}
.favorite button {
	width: 98%;
}
.favorite .container {
	padding: 0 4px;
}
.traincontainer .traininfo {
  white-space: nowrap;
  /* max-width: 165px; */
  width: 161px;
  /* min-width: 75px; */
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
@media screen and (max-width: 600px) { 
	.favorite {
		padding: 0;
		width: 98%;
		  margin: 0 0 10px 0;
	}
	input[type="search"] {
		width: 98%;
	}
  .traincontainer .traininfo {
    width: 86%;

  }
  button {
    width: 98%;
    margin: 4px;
  }
}
.traincontainer {
  position: relative;
  width: 98%;
  height: 98%;
  display: block;
}

.traincontainer .traininfo.delayed {
  color : red;
}
.traincontainer .time {
    position: absolute;
  right: 0;
}
.destname {
  font-weight: bold;
}
.traincontainer .stopname {
  font-size: 8px;
  opacity: 0.8;
  display: block;
}
.container select {    max-width: 98%; width: 98%}