/*
 global
*/

html{background:#134b84 url(../img/bg2.jpg) center top no-repeat;
	background-size:100% 100%;width:3000px;height:100%;}

body {
	width:100%;
	height:auto;
	min-width:600px;
	margin:0;
	padding:0;
	min-height:100%;
	font-family:sans-serif;
	padding:0px;
	margin:0px;
	color:white;
	min-height:100%;
	overflow-x:hidden;
}

td {
	margin:0;padding:0;border:0;
}

#app-loading {
	display:none;
}

/*
common elemetns 
*/

.picker {
	no-box-shadow:2px 2px 2px rgba(0,0,0,.2), 0 0 60px rgba(0,0,0,.2);
	border-radius:3px 6px 6px 3px ;
}

.picker * {
	font-size:1.3em;
	display:inline-block;
	padding:0;
	margin:0;
	height:40px;
	background:white;
	border:0;
	border-radius:3px 0 0 3px;
}

.picker input {
	padding:0 10px;
}

.picker button{
	border-radius:0 6px 6px 0;
	margin-left:1px;
	text-align:center;
	cursor:pointer;
	
}

.picker button:hover {

	background:url(../img/yellow-grad.png) left bottom repeat-x;

}

/* layout */


/*
Header
*/

header, footer {
	display:block;
	position:fixed;
	top:0;
	left:0;
	padding:0;
	z-index:500;
	width:98%;
	padding:0 1%;
	background:rgb(19,75,132);
	z-index:1000; 
}

header {
	height:85px;
	background:none;
}

header h1 {
	width:600px;
	text-shadow:1px 1px 1px #f00;
	margin:10px auto 0;
}


/*
content
*/
#content {
	position:relative;
	overflow:visible;
	min-height:100%;
	width:2200px;
	top:100px;
}

section {
	width:600px;
	float:left;
}


/*
search 
*/
#search_ {
	padding-bottom:100px;
}

#search_ h2 {
	display:none;
}

#search_ div {
	margin-right:50px;
	position:relative;
}

#search_ .picker  input{
	width:430px;
	padding:0px;
	padding-left:10px;
}

#search_ .picker  button{
	width:109px;
	letter-spacing:.3em;
	text-align:center;
	text-transform:uppercase;
}

/*
results
*/
#results_ {
	padding-bottom:30px;
}
#content h1, #settings_ h1 {
	margin-top:0px;
	font-family:segoe ui;
	font-size:3.66em; 
	font-weight:100;
	margin: 0 10px 30px 0;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}

#results_ h1 {
	margin: 0 10px 30px 60px;
}

#results_ #fav-me {
	width:50px;
	height:50px;
	background:url(../img/star-50-2.png) center no-repeat;
	position:absolute;
	top:17px;
	cursor:pointer;
}

#results_ #fav-me.active {
	background:url(../img/star-50-full.png) center no-repeat;
}

#status {
	border-radius:6px;
	no-box-shadow:2px 2px 4px rgba(0,0,0,.5);
	color:black;
	position:relative;
	padding:5px 20px 10px 70px;
	background:#fff url(../img/icon-disruption-large.png) 20px center no-repeat;
	margin-bottom:20px;
	display:none;
}

 .close {
	position:absolute;
	right:10px;
	top:7px;
	cursor:pointer;
	/*font-family:Webdings;*/
	text-decoration:none;
	text-indent:-500em;
	background:url(../img/close.png) left top no-repeat;
	width:12px;
	height:11px;
}

 .close:hover {
	color:red;
}

#results_ nav {
	margin-bottom:20px;
	text-align:right;
	padding-top:5px;
}

#results_ nav a {
	text-transform:captialize;
	color:white;
	text-align:center;
	font-size:1.2em;
	font-weight:bold;
	padding:5px 20px;
	color:rgba(255,255,255,.7);
	background:rgb(19,75,132) url(../img/blue-grad.svg);
	display:inline-block;
	
	border-radius:4px 0 0 4px;
	text-decoration:none;
	cursor:pointer;
	
}

#results_ nav a:last-child {
	border-radius:0 4px 4px 0;
}

#results_ nav a.selected {
	background-color:rgba(19,75,132,.1);
	no-box-shadow:inset 1px 1px 4px rgba(0,0,0,.3);
	color:white;
	background:url(../img/blue-grad-2.svg);
}

#results_ nav a:hover {
	color:rgba(255,255,255,.8);
	background-color:rgb(19,75,132);
}

#results_ .picker {
	float:left;
}

#results_ .picker * {
	height:30px;
	font-size:1.2em;
}
#results_ .picker input {
	width:260px;
}
#results_ .picker button {
	width:59px;
}

#results_ h2 {
	display:none;
}

#results_ th {
	color:#036;
	text-align:left;
}

#results_ > div > p {
	font-size:.8em;
	color:#036;
	text-transform:capitalize;
	margin:0;
	padding:0 0 0 10px;
}
#results_ > div > p > span {
	display:inline-block;
}
#results_ > div > p > span:nth-child(1) {
	width:9%;
}#results_ > div > p > span:nth-child(2) {
	width:63%;
}#results_ > div > p > span:nth-child(3) {
	width:15%;
}#results_ > div > p > span:nth-child(4) {
	width:5%;
}

#results_ .results > div {
	margin:3px 0;
	background:#036;
	border-radius:6px;
	display:block;
	width:580px;
	padding:10px;
	
	border-top-right-radius: 40px 30px;
	border-bottom-right-radius: 10px 10px;
	
	position:relative;
	cursor:pointer;
}

#results_ .results > div a{ 

}
#results_ .results > div.delayed , #results_ .results > div.delayed  a{
	color:#ffe156;
}
#results_ .results > div.cancelled {
	color:#fff;
	/*color:#ff0000;*/
}

#results_ .results > div > * {
	display:inline-block;
	font-size:1em;
	vertical-align:middle;
}

#results_ .results > div > h3 > time {
	margin-right:1em;
	font-weight:normal;
}

#results_ .results > div > h3 {
	width:73%;
	padding-right:2%;
	margin:0;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

#results_ .results > div > *:nth-child(2) {
	width:20%;
}

#results_ .results > div.delayed > h3 {
	width:68%;
	margin:0;
}
#results_ .results > div.delayed > *:nth-child(2) {
	width:24%;
}


#results_ .results > div > h3 a {
	text-decoration:none;
}

#results_ .results > div > h3 a:hover {
	text-decoration:underline;
}

#results_ .results > div.delayed > *:nth-child(2) {
	text-indent:25px;
	background: url(../img/icon-note.png) top left no-repeat;
	
}




#results_ .results > div.cancelled > h3 {
	width:70%;
	margin:0;
}
#results_ .results > div.cancelled > *:nth-child(2) {
	width:24%;
}


#results_ .results > div.cancelled > *:nth-child(2) {
	text-indent:25px;
	background: url(../img/icon-disruption.png) top left no-repeat;
	
}

#results_ .results > div > *:nth-child(2) span {
	border-radius:3px;
	background:#111;
	color:#fff;
	text-align:center;
	line-height:20px;
	display:inline-block;
	min-width:20px;
	font-size:12px; 
	font-weight:bold; 
	padding:0 2px;
	text-align:center;
	float:right;
	text-indent:0;
}

#results_ .results > div > .details {
	position:absolute;
	right:-25px;
	display:none;
	width:16px;
	height:16px;
	background: url(../img/outdent_16.png) center no-repeat;
}
#results_ .results > div:hover > .details {
	display:inline-block;
}

#arrivals {
	display:none;
}

#results_ .pagination {
	margin-top:10px;
}

#results_ .pagination > * {
	background:#134b84 ;
	display:inline-block;
	border-radius:3px;
	width:25px;
	height:25px;
	line-height:25px;
	text-decoration:none;
	text-align:center;
	margin-left:5px;
	font-weight:bold;
	font-size:.9em;
	color:white;
	cursor:pointer;
}

#results_ .pagination > span, #results_ .pagination > a:hover {
	no-box-shadow:inset 1px 1px 4px rgba(0,0,0,.3);
}

#results_ .pagination > span {
	background:#fff;
	color:#134b84;
}

#results_ .pagination time {
	float:right;
	width:auto;
	font-weight:normal;
	padding:0 1em;
	no-box-shadow:inset 1px 1px 4px rgba(0,0,0,.3);
	
}

#results_ p.no-results {
	font-size:3em;
	text-align:center;
	font-family:segoe ui;	
	font-weight:100;
}

#results_ p.no-results.small {
	font-size:1em;
	font-family:arial;
}


/*

Calling

*/

#calling_ {
	width:300px;
	margin:0 50px;
	display:block;
	min-height:600px;
}

#calling_ > div {

	position:relative;
	display:none;
		
	margin:0;
	height:auto;
	min-height:0;
	width:300px;
	padding:15px 0 15px 5px;
	margin:1em 0 3em;
	
	border-radius:10px;
	no-box-shadow:4px 4px 6px rgba(0,0,0,.2);
	border:3px solid #a1c6e1;
	background:#fff;
	color:#333;
	
	z-index:10001;
	
}

#calling_ > div  > div{
	margin:10px 0 0 0;
	padding: 0 15px 0 0;
}

#calling_ tr td:nth-child(1) {
	background:url(../img/line-2.png) center center no-repeat;
	min-height:30px;
}
#calling_ td.startdeparted, #calling_ td.startatstation {
	background-position:top !important;
}
#calling_ td.end {
	background-position:bottom !important;
}
#calling_ td.inmotion {
	background:url(../img/here.gif) center center no-repeat;
}
#calling_ tr.departed td:nth-child(1) {
	opacity:.5;
}

#calling_ tr.departed td:nth-child(2) {
	color:#888;
}

#calling_ th {
	text-align:left;
}

#calling_ tr td:first-child {
	width:40px;
	
}

#calling_ tr td span{
	font-size:.8em;
	display:block;
}

#calling_ tr td span.plt {
	font-size:.8em;
	display:inline-block;	
	border-radius:3px;
	background:#111;
	color:#fff;
	text-align:center;
	line-height:16px;
	min-width:16px;
	
	font-weight:bold; 
	padding:0 2px;
	text-align:center;
	
	margin-left:5px;
	font-size:.6em;
	
	text-indent:0;
	
	position:relative;
	top:-2px;
	
	
	
}

#calling_ tr td:nth-child(2) {
	padding:5px 0;
}

#calling_ ul li.header {
	list-style:none;
	font-weight:bold;
	margin:0;
	padding:0;
	text-transform:captialize;
}

#calling_ > div:before {
	left:-29px;
	top:50%;
	border:13px solid transparent;
	border-right-color:#a1c6e1;
}

#calling_ > div:after {
	top:50%;
	left:-22px;
	margin-top:2px;
	border:11px solid transparent;
	border-right-color:#fff;
}

/*
	controls
*/

#settings_ {
	
}

#settings_ label {
	font-weight:bold;
}

#settings_ table {
	width:75%;
}
#settings_ tr > td {
	background:rgba(0,0,0,.2);
	padding:5px;
}

#settings_ thead th:first-child {
	text-align:left;
}
#settings_ td {
	text-align:center;
}

#settings_ tr td:first-child {
	width:90%;
	text-align:left;
}
#settings_ .picker {
	no-box-shadow:none;
}
#settings_ .picker * {
	height:25px;
	font-size:1.1em;
}

#settings_ .picker input {
	width:310px;
}

#settings_ .picker button {
	padding:0 10px;
}

#settings_ table .picker  input{
	width:250px;
	width:80%;
}
#settings_  table .picker button {
	
	width:15%;
}

#settings_ label {
	display:inline-block;
	width:60px;
}

#settings_ h2 {
	font-family:segoe ui;
	font-weight:100;
}

#settings_ table button.remove {
	border:0;
	background:url(../img/del_16.png) center no-repeat;
	text-indent:-9999px;
	cursor:pointer;
	width:60px;
}

/*
	footer
*/
footer {
	width:98%;
	padding:0 1%;
	top:auto;
	bottom:0;
	height:auto;
	padding-bottom:5px;
	font-size:.8em;
}

footer a {
	color:white;
}


.fade {
	position:fixed;
	top:0;
	height:100%;
	width:100px;
	
	display:block;
}

#f2 {
	right:0;
}

#f1:hover{
	cursor:pointer;
	background:url(../img/arrow_prev.png) center center no-repeat;
}

#f2:hover {
	cursor:pointer;
	background:url(../img/arrow_next.png) center center no-repeat;
}

#f3 {
	width:100%;
	top:0;
	left:0;
	height:100px;
}

/*
	Tooltip
*/

#tooltip  {
	position:absolute;
	z-index:10001;
	display:none;
	top: 3%;
	left: 10%; 

	padding:15px;
	margin:1em 0 3em;

	border:3px solid #a1c6e1;
	color:#333;
	background:#fff;

	border-radius:10px;
	no-box-shadow:4px 4px 6px rgba(0,0,0,.2);
	background:#fff;
	
	min-width:300px;
	
}

#tooltip:before, #tooltip:after , #calling_ > div:before , #calling_ > div:after {
	content:"";
	display:block;
	position:absolute;
	width:0;
	height:0;
}

#tooltip:before {
	top:-29px;
	left:43px;
	border:13px solid transparent;
	border-bottom-color:#a1c6e1;
}

#tooltip:after {
	top:-22px;
	left:45px;
	border:11px solid transparent;
	border-bottom-color:#fff;
}

#tooltip ul, #tooltip li {
	list-style:none;
	margin:0;
	padding:0;
}

#tooltip li  {
	padding-left:24px;
	line-height:24px;
	background:no-repeat left center;
	cursor:pointer;
}

#tooltip li.work {
	background-image:url(../img/company_16.png);
}
#tooltip li.home{
	background-image:url(../img/home_2_16.png);
}
#tooltip li.fav {
	background-image:url(../img/bookmark_2_16.png);
}
#tooltip li.settings {
	background-image:url(../img/tools_16.png);
}
#tooltip li.info {
	background-image:url(../img/nre_favicon_16x16.png);
}
#tooltip li.info  a {
	color:black;
	text-decoration:none;
}

#tooltip  ul {
	padding-top:10px;
}

/*
	Please pin our site message.
*/

#pinme {
	position:fixed;
	top:0px;
	left:100px;
	background:rgba(255,66,128,.8);
	border-radius:0 0 2px 10px;
	padding:5px 15px 5px 15px;
	color:white;
	font-weight:bold;
	z-index:10001;
	display:block;
}
#pinme a {
	color:white;
}

#pinme a:last-child {
	-ms-transform:rotate(45deg);
	text-decoration:none;
}

#loading-splash {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-align:center;
	background:black;
	font-family:segoe ui;
	color:white;
	line-height:450px;
	z-index:9999;
	font-size:6em;
	font-weight:100;
}

/*
	station picker
*/

#picker {
  position:absolute;
  background:#fff;
  color:#111;
  display:none;
  text-align:left;
  z-index:9999;
  padding:5px 0;
  top:-500px;
  left:-500px;
  border-radius:0 0 6px 6px;
 no-box-shadow:2px 2px 2px rgba(0,0,0,.2);
}

#d hr:last-child {
	display:none;
}

#picker ul, #picker ul li {
  list-style: none;
  margin: 0 5px 0 0;
  padding: 0;
}
#picker ul li {
  padding:.25em;
  color:#003366;
  margin-left:90px;
}
#picker ul li strong {
  text-decoration: underline;
}
#picker ul li.h {
  font-weight:bold;
  margin:.3em 0 .1em;
  color:#404040;
  width:75px;
  float:left;
  margin:0;
  text-align:right;
  text-transform:capitalize;
}
#picker li span {
  color:#666;
}
#picker.j-error {
  border-color:red;
}
#picker img {
  vertical-align:middle;
}
#picker hr {
  clear:both;
  background-color:#eee;
  height:1px;
  border:0px;
}
#picker .more {
  font-weight:bold;
}
#picker .sel , #picker li:hover {
  background-color:#e2edf8;
  text-decoration:underline;
  cursor:pointer;
  border-radius:3px;
}
#picker li.no-pad {
  margin:5px 0;
}
#picker li.h:hover, #picker li.no-sel:hover, #picker li.more:hover {
  cursor:auto;
  text-decoration:none;
  background-color:transparent;
}
#picker #e {
  background:url("../images/icon-alert-small.png") no-repeat top left;
  padding-left:20px;
}
#picker #je {
  max-width:140px;
}

#picker #je .je {
  display:none;
}
#picker #je strong {
  color:#FF0033;
}
.je-lu-lu #je .je-lu-lu,
.je-lu-dlr #je .je-lu-dlr,
.je-lu-dlrlu #je .je-lu-dlrlu,
.je-dlr-dlr #je .je-dlr-dlr,
.je-dlr-lu #je .je-dlr-lu,
.je-dlr-dlrlu #je .je-dlr-dlrlu,
.je-dlrlu-dlrlu #je .je-dlrlu-dlrlu,
.je-dlrlu-lu #je .je-dlrlu-lu,
.je-dlrlu-dlr #je .je-dlrlu-dlr { display:inline !important; }

#picker .s li { margin-left:0px; }

.sp-visible {display:block !important;}
    
#picker.nothing #d, 
#picker.error #d,
#picker.loading #d,
#picker.p1 #d,
#picker.p2 #d,
#picker.j-error #d,
#picker ul {
  display:none;
}

.error #e,
.nothing #n,
.loading #loading,
.p1 #p1,
.p2 #p2,
.visible,
 .sp-visible #d,
.j-error #je,
.p1k1 #p1k1,
.p1k2 #p1k2,
.p1k3 #p1k3,
.p1k4 #p1k4,
.p1k5 #p1k5,
.p1k6 #p1k6,
.p1k7 #p1k7,
.p1k8 #p1k8,
.p1k9 #p1k9,
.p1k10 #p1k10,
.p1k11 #p1k11,
.p1k12 #p1k12,
.p1k13 #p1k13,
.p1k14 #p1k14,
.p1k15 #p1k15,
.p1k16 #p1k16,
.p1k17 #p1k17,
.p1k18 #p1k18,
.p1k19 #p1k19,
.p1k20 #p1k20,
.p2k1 #p2k1,
.p2k2 #p2k2,
.p2k3 #p2k3,
.p2k4 #p2k4,
.p2k5 #p2k5,
.p2k6 #p2k6,
.p2k7 #p2k7,
.p2k8 #p2k8,
.p2k9 #p2k9,
.p2k10 #p2k10,
.p2k11 #p2k11,
.p2k12 #p2k12,
.p2k13 #p2k13,
.p2k14 #p2k14,
.p2k15 #p2k15,
.p2k16 #p2k16,
.p2k17 #p2k17,
.p2k18 #p2k18,
.p2k19 #p2k19,
.p2k20 #p2k20 {display:block;}

/* BRANCHES */
ul.branches{margin:5px 0 5px 0;padding:0;list-style-type:none;}
ul.branches li{margin:0 0 5px 0;padding:0 0 0 20px; font-size:1.2em;background:url(../img/branch.png) left 2px no-repeat;}
#calling_ ul.branches li.header{background:none;text-transform:capitalize;margin:10px 0 5px 0;font-size:1.2em;}