/*
Copyright (c) 2014-2015 Arc Internet Ltd. All Rights Reserved. 

*/
/* 
    Created on : 06-Mar-2015, 20:27:21
    Author     : rob
*/

@font-face {
  font-family: matrix;
  src: url(led2.ttf)
}

div.boardscroll { position: relative; width: 100%; }
div.boardscroll div.boardleft, div.boardscroll div.boardright {
  position: absolute;
  height: 110px;
  width: 60px;
  background-color: rgba(0,0,0,0.3);
  top: 180px;
  z-index: 100;
  cursor: pointer;
}
div.boardscroll div.boardleft>span, div.boardscroll div.boardright>span {
  display: block;
  height: 48px;
  width: 48px;
  margin: 30px 6px 30px 6px;
  opacity: 0.4;
} 
div.boardscroll div.boardright>span {
  background: url(/landing/css/nivo-lightbox-theme/default/next.png);
} 
div.boardscroll div.boardleft>span {
  background: url(/landing/css/nivo-lightbox-theme/default/prev.png);
} 
div.boardscroll div.boardleft {
  left: 0px;
  display: none;
}
div.boardscroll div.boardright {
  right: 0px;
  display: none;
}
div.boardstats { width: 100%; height: 30px; color: #00A8FF; font-size: 10px; text-align: center}
div.boardcont { width: 4000px; height: 522px; }
div.board { background-color: black; width: 265px; height: 502px; position: relative; float: left; 
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
div.board div.bkg, div.board div.fg { width: 235px; height: 492px; position: absolute; top: 2px; left: 7px; }

div.board div.bkg div.matrix { color: #333; }
div.board div.bkg div.matrix:after { content: '\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142\0142'}
div.board div.fg div.matrix { color: #FFbA2E; }
div.board div.matrix.lg { position: relative; width: 236px; height: 32px; display: block; overflow: hidden; text-align: left; margin-top: 0px; padding-left:3px; padding: 1px; font-family: matrix; word-spacing: 7px; white-space: pre; font-size: 20px; letter-spacing: 1px; }
div.board div.matrix.sm { position: relative; width: 235px; height: 24px; display: block; overflow: hidden; text-align: left; margin-top: 0px; padding-left:3px; padding: 1px; font-family: matrix; word-spacing: 5.5px; white-space: pre; font-size: 16px; letter-spacing: 1px; }
div.board div.matrix.lg span.location { display: block; position: absolute; top: 0px; left: 0px; width: 180px; height: 32px; } 
div.board div.matrix.lg span.time { display: block; position: absolute; top: 0px; right: 0px; width: 180px; height: 32px; text-align: right; } 
div.board div.matrix.sm span.location { display: block; position: absolute; top: 0px; left: 0px; width: 180px; height: 24px; overflow: hidden; } 
div.board div.matrix.sm span.time { display: block; position: absolute; top: 0px; right: 0px; width: 180px; height: 24px; text-align: right; } 

div.board div.fg div.matrix span.loc { color: #55FF55; }
div.board div.info { height: 30px; width: 255px; text-align: center; font-size: 30px; color: #00A8FF;}
div.board div.matrix.lg.platform { text-align: right; }
div.board div.matrix.lg.platform.confirmed { color: #55FF55; }
div.board div.matrix.lg.platform.adminconfirmed { color: #FF88FF; }
div.board div.fg div.matrix.lg.platform:after {
  content: '*';
  position: absolute;
  top: 56px;
  right: -8px;
  color: #a19e00;
  font-family: "Open Sans", Arial, Helvetica, Sans-Serif;
  font-size: 15px;
  font-weight: 100;
}
div.platformWarn {
  position: relative;
  margin: 10px;
}
div.platformWarn i {
  content: '*';
  position: absolute;
  top: -6px;
  left: -8px;
  color: #a19e00;
  font-family: "Open Sans", Arial, Helvetica, Sans-Serif;
  font-size: 15px;
  font-weight: 100;  
}

div.boardtitle { background-color: black; width: 100%; padding-bottom: 10px;}
div.boardtitle h1 { color: yellow; margin: 0px; float: left; padding: 10px 5px 10px 5px; }
div.boardtitle div.tools { float: right; padding: 6px; }

body.bkboard { background: black; height: 100%; }
#extr-page div#main.bkboard { background: black; }

table.traininfo tr th { padding: 5px 15px; text-align: center; }
table.traininfo { border: 0px; border-collapse: collapse; }
table.traininfo tr { height: 40px; }
table.traininfo tr td.tt { background: url(/img/route.png); width: 40px; }
table.traininfo tr td.tt.ttP { background-position: -40px -80px; }
table.traininfo tr td.tt.ttA.ttD { background-position: -40px -40px; }
table.traininfo tr td.tt.ttD { background-position: -40px 0px; }
table.traininfo tr td.tt.ttA { background-position: -40px -120px; }
table.traininfo tr td.tt.ttP.passed { background-position: 0px -80px; }
table.traininfo tr td.tt.ttA.ttD.passed { background-position: 0px -40px; }
table.traininfo tr td.tt.ttD.passed { background-position: 0px 0px; }
table.traininfo tr td.tt.ttA.passed { background-position: 0px -120px; }

table.traininfo td.name div { padding: 10px 20px; }
table.traininfo td.gbtt, table.traininfo td.actual { height: 20px; position: relative; width: 60px; }
table.traininfo td.gbtt div, table.traininfo td.actual div { height: 20px; width: 60px; }
table.traininfo td.gbtt div.passed, table.traininfo td.actual div.passed { left: 0px; top: 10px; position: absolute; }
table.traininfo td.gbtt div.arrive, table.traininfo td.actual div.arrive { left: 0px; top: 1px; position: absolute; }
table.traininfo td.gbtt div.depart, table.traininfo td.actual div.depart { left: 0px; bottom: 1px; position: absolute; }

table.traininfo td.lateness { width: 100px; }

table.traininfo td.lateness div.progress { height: 40px; margin-bottom: 0px;}
table.traininfo td.lateness div.progress-bar {
  background-color: #990000;
}

.progress {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
  height: 22px;
  background: #999;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: 0;
}

.progress-sm {
  height: 14px!important;
  line-height: 14px!important;
}

.progress-bar {
  width: 0;
  top: 0px;
  bottom: 0px;
  left: 0px;
  position: absolute;
  font-size: 11px;
  color: #fff;
  text-align: center;
  background-color: #57889c;
  font-weight: 700;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  z-index: 10;
  background-image: url(../img/pattern/overlay-pattern.png);
}

.progress-overlay {
  float: left;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 5px;
  position: absolute;
  font-size: 20px;
  color: #FFF;
  z-index: 20;
  text-align: center;
}


div.trainhoriz {
  width: 100%;
  min-height: 200px;
  padding: 10px 60px 10px 20px;
  overflow: hidden;
}

div.trainhoriz div.loc {
  position: relative;
  width: 80px;
  height: 180px;
  float: left;
}

div.trainhoriz div.loc div.img {
  position: absolute;
  left: 0px;
  bottom: 20px;
  width: 80px;
  height: 40px;
  background: url(/img/route_horizontal.png) 0px 0px no-repeat;
  z-index: 10;
}

div.trainhoriz div.loc span.name {
  display: block;
  position: absolute;
  font-size: 13px;
  top: 80px;
  left: 30px;
  line-height: 13px;
  height: 30px; width: 100px;
  -webkit-transform: rotate(325deg);
  -webkit-transform-origin: 20px 0px;
  -moz-transform: rotate(325deg);
  -ms-transform: rotate(325deg);
  -o-transform: rotate(325deg);
  transform: rotate(325deg);
  transform-origin: 20px 0px;
  background-color: transparent;
  z-index: 10;
}

div.trainhoriz div.loc div.gbtt {
  position: absolute;
  font-size: 11px;
  width: 70px;
  height: 12px;
  top: 116px;
  z-index: 10;
}

div.trainhoriz div.loc div.actual {
  position: absolute;
  font-size: 11px;
  width: 70px;
  height: 12px;
  top: 148px;
  z-index: 10;
}

div.trainhoriz div.loc div.platform {
  position: absolute;
  font-size: 13px;
  width: 30px;
  height: 12px;
  top: 130px;
  left: calc(50% - 15.5px);
  z-index: 100;
  color: #eee;
  text-align: center;
  font-weight: bold;
  text-shadow: 0px 0px 2px #000;
}


div.trainhoriz div.loc div.passed {
  left: 30px;
}
div.trainhoriz div.loc div.arrive {
  left: 10px;
}
div.trainhoriz div.loc div.depart {
  left: 45px;
}
div.trainhoriz div.loc div.cancelled {
  left: 15px;
  color: #990000;
}
div.trainhoriz div.loc div.actual.depart {
  top: 160px;
  left: 33px;
  background-color: transparent;
}

div.trainhoriz div.loc.ttP div.img { background-position: -80px -40px; }
div.trainhoriz div.loc.ttA.ttD div.img { background-position: -160px -40px; }
div.trainhoriz div.loc.ttD div.img { background-position: 0px -40px; }
div.trainhoriz div.loc.ttA div.img { background-position: -240px -40px; }
div.trainhoriz div.loc.ttP.passed div.img { background-position: -80px 0px; }
div.trainhoriz div.loc.ttA.ttD.passed div.img { background-position: -160px 0px; }
div.trainhoriz div.loc.ttD.passed div.img { background-position: 0px 0px; }
div.trainhoriz div.loc.ttA.passed div.img { background-position: -240px 0px; }

div.trainhoriz div.loc.ttP.can div.img { background-position: -80px -80px; }
div.trainhoriz div.loc.ttA.ttD.can div.img { background-position: -160px -80px; }
div.trainhoriz div.loc.ttD.can div.img { background-position: 0px -80px; }
div.trainhoriz div.loc.ttA.can div.img { background-position: -240px -80px; }
div.trainhoriz div.loc.ttP.passed.can div.img { background-position: -80px -120px; }
div.trainhoriz div.loc.ttA.ttD.passed.can div.img { background-position: -160px -120px; }
div.trainhoriz div.loc.ttD.passed.can div.img { background-position: 0px -120px; }
div.trainhoriz div.loc.ttA.passed.can div.img { background-position: -240px -120px; }

div.trainhoriz div.loc div.progress {
  position: absolute;
  width: 100%;
  height: 140px;
  top: 0px;
  left: -40px;
  z-index: 1;
  background-color: transparent;
  overflow: visible;
}

div.trainhoriz div.loc div.progress>div {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}

div.trainhoriz div.loc div.progress div.hprogress-overlay {
  font-size: 20px;
  width: 80px;
  top: 0px;
  right: -4px;
  text-align: right;
  position: absolute;
  background-color: transparent;
  z-index: 11;
  cursor: pointer;  
}

div.trainhoriz div.loc div.progress div.hprogress-bar {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  right: 0px;
  top: inherit;
  background-color: #eda;
}

div.trainhoriz div.loc div.progress div.hprogress-bar-shortup,
div.trainhoriz div.loc div.progress div.hprogress-bar-shortdown {
  position: absolute;
  left: 0px;
  width: 100%;
  right: 0px;
  top: inherit;
  height: 0px;
  border-bottom: solid #eda 140px;
}

div.trainhoriz div.loc div.progress div.hprogress-bar-shortup {
  border-left: solid transparent 80px;  
}

div.trainhoriz div.loc div.progress div.hprogress-bar-shortdown {
  border-right: solid transparent 80px;  
}

.panel-default.subpan {
  border: 0;
}

.panel-default.subpan>.panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.panel-group.subpan .panel-collapse {
  border-bottom: 1px solid #ddd;  
}

.panel-group.subpan {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

#stationMessage {
  margin-right: 30px;
}

.station-message-body {
  overflow-y: auto;
}

.station-message-body .station-message {
  width: 100%;
  margin: 10px;
  border: 1px solid #444;
  padding: 10px 20px;
  position: relative;
  background-color: #BA7F1A;
  font-size: 16px;
  color: white;
  min-height: 4em;
  font-weight: normal;
}

.station-message-body .station-message .body {
  color: white;
}

.station-message-body .station-message .body a {
  color: white;
  text-decoration: underline;
}


.station-message-body .station-message .lastUpdate {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 90%;
  text-align: right;
  font-size: 0.6em;
}

.nre-wrapper {
  border: 1px solid black;
  position: relative;
  padding: 10px;
  margin: 10px;
  border: 1px solid #666;
}

.nre-wrapper .nre-footer {
  position: absolute;
  bottom: 2px;
  right: 2px;
  text-align: right;
  font-size: 0.75em;
}