#overlay{
	display:hidden;
	border-radius:5px;
	z-index:99;
	box-sizing:border-box;
	background-color:white;
	padding:20px;
	padding-top:25px;
	border:2px solid #004677;
	box-shadow:0px 0px 10px #004677;
	position:absolute;
	top:10px;
	left: 50%; /* position the left edge of the element at the middle of the parent */
    transform: translate(-50%, 0); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}
#overlay .close{
	position:absolute;
	top:5px;
	right:5px;
	cursor:pointer;
	color:red;
	border:2px solid red;
	padding: 2px 5px;
}

#overlay #header .entry{
	min-height:1.4em;
	position:relative;
	padding-bottom:2px;
}

#overlay #header .entry .title{
	position:absolute;
	top:0;
	left:5px;
	width:110px;
	text-align:right;
}

#overlay #header .entry .title:after{
	content:":";
}

#overlay #header .entry .value{
	padding-left:120px;
	//border: 1px solid red;
	display:inline-block;
	font-weight:bold;
}

#overlay #header .entry div{
	//display:inline-block;
	//padding-right:5px;
}

#StationArrDep{
	overflow:hidden;
	border-collapse: collapse;
}


#StationArrDep tr{
	cursor:pointer;
}

#StationArrDep tr:hover{
	background-color:#CAF1C0;
}


select{
font-size: 50px;
}

th,td{
	padding:0.5em;
	//border-right:1px solid #CCC;
}

th{
	background-color:#004677;
	color:white;
	padding:10px 5px 10px 5px ;
	font-size:14px;
}

td.toc span{
	line-height:2.5em;
}


.count{
	display:none;
}




#StationArrDep thead tr.sticky{
	position:fixed;	
}





th:first-of-type,td:first-of-type{
	//border-left:1px solid #CCC;
}

tr.even{
	background-color:#D9E6FF;
}

#messages{
	margin-left:5px;
	margin-bottom:5px;
}

#messages .message{
	min-height:1em;
	display:inline-block;
	padding-left:5px;
	border-left:4px solid green;
	margin-bottom:2px;
}
	

#messages .message.minor{
	border-left:4px solid orange;
}


#messages .message .text{
	display:none;
}


#messages.expanded .message{
	display:block;
}

#messages .show{
	position:relative;
	bottom:3px;
	cursor:pointer;
}


#messages.expanded .show{
	display:none;
}

#messages.expanded .message .text{
	display:inline;
}


#StationArrDep td, #StationArrDep th{text-align:left;white-space:nowrap;}
#StationArrDep td.routeCell{text-align:left;}
#StationArrDep th.routeCell{padding-left:15px;}


 .aol, .sol, .adl, .sdl, .eta, .std, .atd, .etd, .sta, .ata, .eta, .aTime, .cTime{
	display:block 
 }
 
.hidden{
	display:none;
}

.time{}

.depreciated{
	text-decoration:line-through;
	color:grey;	
}

.isCancelled {
	color:red;
}

.routeCell .inPast{
	color:#999;
}

tr.inPast{
	display:none;
	opacity:0.4;	
}



.destinationCancelled .status {
	//tdisplay:none;
}

.isCancelled .status, .routeCell .isCancelled, .isCancelled .arrHere span, .isCancelled .depHere span{
	color:red;
}



span.isCancelled{
	color:red;
}

.isOnTime .status, .routeCell .isOnTime, span.isOnTime{
	color:green;
}


span.callingPoint{
	color:black;
	margin-right:6px;
	padding: 0 2px;
}



.isLate .status, .routeCell .isLate, span.isLate, tr.Delayed .status{
	color:orange;
}


.destinationCancelled span, .destinationCancelled div.timeblock span {
	color:red;
}

tr.atStation td{
	//border-top: 2px solid black;
	//border-bottom: 2px solid black;
}

tr.atStation td:last-of-type{
	//border-right: 2px solid black;
}

tr.atStation td:first-of-type{
	//border-left: 2px solid black;
}

span.actual{

}

.callingPoint.highlight{
	background-color:black;
	color:white;
}
	
.nextStop::before{
	//content:"►";
}

.routeItem .lastReported{
	margin-right: -2px;
	padding-left: 2px;
	border:2px solid black;
}

.routes{
box-sizing: border-box;
}
 
.routeCell{
	width:1%;
	padding:5px;
	font-size:11px;
	box-sizing: border-box;
	white-space : nowrap;
}


.routesColumn{
	box-sizing: border-box;
	display:inline-block;
	vertical-align:top;
}
 
 .routeItem{
	 color:black;
	padding-left:8px;

 }
 
.routeItem .time {
	padding-left:3px;
}
 
 .routeItem.front{
	 position:relative;
	background-repeat: no-repeat;
	background-position: 1px center;	
 }
 
 
.label.front:before, .timeBlock.front span:before{
	  font-style:italic;
	  content:'F: ';
  }
 

 
.label.rear:before, .timeBlock.rear span:before{
	  font-style:italic;
	  content:'R: ';
  }
 
 
  .routeItem.front:before{
	  font-style:italic;
	  position:absolute;
	  left:0;
	  top:0;
	  content:'F';
  }
 
.routeItem.rear{
	position:relative;
	background-repeat: no-repeat;
	background-position: 6px center;	
 }
 
   .routeItem.rear:before{
	  font-style:italic;
	  position:absolute;
	  left:0;
	  top:0;
	  content:'R';
  }
  

 
.routeItem.common{
	position:relative;
	background-repeat: no-repeat;
	background-position: 1px center;	
 }
 
   .routeItem.common:before{
	   font-style:italic;
	  position:absolute;
	  left:0;
	  top:0;
	  //content:'C';
  }
 
 
 .routeItem.join{
	 position:relative;
	background-repeat: no-repeat;
	background-position: 1px center;	
 }
 
.routeItem.join:before{
	font-style:italic;
	position:absolute;
	left:0;
	top:0;
	content:'A';
}

 .routeItem.divide{
	 position:relative;
	background-repeat: no-repeat;
	background-position: 1px center;	
 }
 
.routeItem.divide:before{
	font-style:italic;
	position:absolute;
	left:0;
	top:0;
	content:'D';
}

.routeCell .keyItem{
	font-size:11px;
}

.routeCell .keyItem span{
	font-style:italic;
}
 
 .arrHere{
	 
 }
 
 .depHere{
	
 }
 
  th.arrHere{;
 }
 
 th.depHere{

 }
 
 
 #title{
	 display:inline-block;
	background-color:#004677;
	color:white;
	padding:10px;
	font-size:24px;
	border-radius:0 3px 3px 0;
	box-sizing:border-box;
	width:calc(100% - 50px);
	margin-bottom:10px;
	margin-left:50px;
	margin-top:30px
}
	
	
#title #alerts{
	font-size:13px;
	padding-left:5px;
}

 
table.legend{
	font-size:14px;
	width:100%;	
	max-width:500px;
	margin-bottom:5px;
	white-space:nowrap;
}
	
	
  .legend .title{
	 padding-left:3px;
	 margin-left:5px;
 }
 
 
 .legend .item{
	 padding: 3px 1px;
	 text-align:center;
 }
 
 .legend .isLate span{color:orange;}
  .legend .isCancelled span{color:red;}
   .legend .onTime span{color:green;}
   .legend .isPast span{color:grey;}
    .legend .LastReported span{border:2px solid black; padding:3px;}
	 .legend .fastestService span{border:2px solid blue; padding:3px;}
 
 
 


 
#search .searchTitle{
	display:none;
}

#search{
	float:right;
}

#search .radioButton{
	display:none;
}

#search button, #search input#locationName{

	box-sizing:border-box;
	background-color:white;
	colour:004677;
	height:30px;
	border:white;
	border-radius:3px;
}



#search .buttons{
	display:inline-block;
}

#search button{
	background-color:#EEE;
	color:#004677;
	border:white;
	box-shadow:-2px -2px 5px #aaa inset, 2px 2px 5px #FFF inset;
}

#search #searchButton.disabled{
	opacity:0.5;
	cursor:default;
}

#search #searchButton{
	display:none;
}

#search button:hover{
	background-color:#B5C2D7;
	cursor:pointer;
}

#search button:active{
	box-shadow:-2px -2px 5px #aaa inset, 2px 2px 5px #FFF inset;
}

#search input#locationName{
	width: 200px;
	margin-right:5px;
	padding:5px;
	box-shadow:2px 2px 3px #aaa inset;
}

#search.center{
	z-index:99;
	text-align:center;
	width: 250px;
	border-radius:5px;
	padding:20px;
	border:2px solid white;
	background-color:#004677;
	position: absolute;
    top: 40px;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */
    transform: translate(-50%, 0%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

#search.center .searchTitle{
	display:block;
	font-size:14px;
	padding-bottom:10px;
}

#search.center .buttons{
	display:inline-block;
	width:100%;
	margin:auto;
	text-align:center;
}

#search.center button{
	display:inline-block!important;
	padding:5px 19px;
	margin:auto;
	margin-top:10px;
}

#search.center input#locationName{
	//text-align:center;
	margin:0;
	width:100%;
	margin-bottom:10px;
}

#search.center .radioButton{
	display:inline-block;
	width:100px;
	font-size:14px;	
}

a.altRoutesLink{
	position:relative;
	top:10px;
	left:5px;
	padding:5px 10px;
	background:black;
	color:white;
}

#lastUpdate{
	padding:5px;	
	font-size:12px;
	position:absolute;
	top:5px;
	left:0;
}

.logo{
	position:absolute;
	top:-17px;
	right:5px;
}

tr.fastestService{
	border:2px solid blue;
}

.fastestService td{
	padding-top:0.8em;
}

.fastestService td.label{
	display:block;
	position:relative;
}

.labelValue{
	display:none;	
}

.fastestService .labelValue{
	display:block;
	white-space:nowrap;
	font-size:10px;
	position:absolute;
	top:1px;
	left:1px;

}

td.label, th.label{
	padding:0;	
}


.resultStatus{
	padding:15px;	
}



 
 @media only screen and (max-width: 1215px) {
	body th.routeCell,body td.routeCell{
		font-size:11px;
	}
	body th,body td{
		font-size:13px;
	}
	
}
 
 @media only screen and (max-width: 1100px) {
	body th.routeCell,body td.routeCell{
		font-size:11px;
	}
	body th,body td{
		font-size:13px;
	}
	
}
 
@media only screen and (max-width: 1065px) {
	.count{
	display:none;
}
	th,td{
		padding:0.35em;
	}
    //th.toc{display:none;}
	//td.toc{display:none;}
	body{padding:0;margin:0;}
}
 
 @media only screen and (max-width: 996px) {
	 body th.routeCell,body td.routeCell{
		font-size:10px;
	}
	body th,body td{
		font-size:14px;
	}
	
	#messages{font-size:12px;}
	
    .routesColumn {
    	display: block;
	}
	#StationArrDep td, #StationArrDep th{white-space:normal;}
	#StationArrDep td.routeCell, #StationArrDep th.routeCell{white-space:nowrap;}
}
 
  @media only screen and (max-width: 700px) {
	  body th,body td{
		font-size:13px;
	}
      td.routeCell, th.routeCell{
		display:none;
	}
	#search{
		margin-top:5px;
		float:none;
	}
}
 
   @media only screen and (max-width: 600px) {
	  body th,body td{
		font-size:12px;
	}
	#messages{font-size:11px;}
}

   @media only screen and (max-width: 500px) {
	  body th,body td{
		font-size:11px;
	}
	th,td{
		padding:0.2em;
	}
}

@media only screen and (max-width: 450px) {
	  body th,body td{
		  font-wieght:normal;
		font-size:10px;
	}
	th,td{
		padding:0.1em;
	}
	#overlay{
		padding-left:10px;
		padding-right:10px;
	}
}
	
@media only screen and (max-width: 360px) {
	  body th,body td{
		 font-wieght:normal;
		font-size:10px;
	}
	th,td{
		padding:0.1em;
	}
	#overlay{
		padding-left:5px;
		padding-right:5px;
	}
}

@media only screen and (max-width: 322px) {
	  body th,body td{
		 font-weight:normal;
		font-size:9px;
	}
	th,td{
		padding:0.1em;
	}
	#overlay{
		padding-left:0;
		padding-right:0;
	}
}