body {
      font-size: 11px;
      font-family: 'Open Sans', Arial, sans-serif;
}


.cornerLogo { position: absolute; top: 0px; left: 0px; width: 100px; height: 98px; background: transparent url(/img/raildarCorner.png); z-index: 20000; }
.cornerLogo a { width: 60px; height: 60px; display: block; }

.livetile.full { position: fixed; width: 100%; height:100%; top: 0px; left: 0px; }

.livetile .zoomBar { position: absolute; top: 10px; right: 25px; height: 200px; width: 10px; z-index: 13; border: 1px solid black; }
.livetile .zoomBarWrapper { position: absolute; border: 0px; top: 0px; right: 0px; height: 220px; width: 50px; background-color: transparent; z-index: 12; }

.livetile .tileInner { position: relative; padding: 0; margin: 0; overflow: hidden; width: 100%; height: 100%; background-color: #e7e7e7; cursor:move; }
.livetile .tileLayer { position: absolute; width: 2000px; height: 2000px; background-color: white; z-index: 10;}
.livetile .tileLayer>div { height: 100%; width: 100%; position: relative; overflow: hidden; }

.livetile .searchOuter { 
  position: fixed; margin: 20px; padding: 0px; 
  background-color: white; 
  width: 350px; height: 48px; 
  top: 0px; left: 0px;
  border: 1px solid #aaa;
  transition-property: background,box-shadow;
  transition-duration: 0.3s;
  box-sizing: border-box;
  border-radius: 2px;
  z-index: 11;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
}


.menuBtn {
    display: block;
    cursor: pointer;
    padding: 12px 16px;
    background-color: transparent;
    border: 0;
    margin: 0;
    outline: 0;
    float: left;
}

form.searchform {
  float: left;
  height: 100%;
  width: 295px;
}

.menuBtn i { 
  font-size: 20px;
  color: #666;
}

.searchOuter input {
  border: none; 
  padding: 0px; 
  margin: 10px 0px;
  height: auto; 
  width: 80%; 
  outline: none; 
  background: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D) transparent;
  color: inherit;
  font-size: 15px;
  height: 24px !important;
  line-height: 24px;
  transition-property: color;
  transition-duration: 0.3s;
  float: left;
}

.searchOuter i.fa-search {
  font-size: 22px;
  font-weight: 100;
  color: #999;
  margin: 10px 10px;
  float: right;
}

.searchResults .ui-autocomplete {
  position: static;
}

.logoContainer {
  position: fixed;
  height: 30px;
  width: 100%;
  bottom: 0;
  left: 0;
  margin: 20px 20px;
}

.livetile .tile { position: absolute; margin: 0px; padding: 0px;}
.livetile .tile>div { position: relative; margin: 0px; padding: 0px; width: 100%; height: 100%;}
.livetile .tile img { width: 100%; height: 100%; border: 0;
  user-drag: none; 
  -moz-user-select: none;
  -webkit-user-drag: none;
}

.livetile .tile .statusOverlay {
  position: absolute; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%;
}

.livetile .tile .statusOverlay .statusContainer {
  position: relative; margin: 0px; padding: 0px; width: 100%; height: 100%;
}

.livetile .tile .statusOverlay .statusContainer .signal {
  background: url(/img/redSignal.png) no-repeat;
  background-size: contain;
  position: absolute;
  z-index: 11;
}

.livetile .tile .statusOverlay .statusContainer .signal.green {
  background-image: url(/img/greenSignal.png);
}

.trainInfoWrapper { 
  display: none;
  position: fixed; margin: 0px; padding: 0px; 
  top: 0px; left: 0px; right: 0px; bottom: 0px;
  background-color: black;
  z-index: 14;
  opacity: 0.5;
}

.trainInfo { 
  display: none;
  position: fixed; margin: 10px 20px; padding: 0px; 
  background-color: white; 
  max-width: 350px;
  width: 85%;
  top: 10px; left: 0px; bottom: 40px; 
  border: 1px solid #aaa;
  transition-property: background,box-shadow;
  transition-duration: 0.3s;
  box-sizing: border-box;
  border-radius: 2px;
  z-index: 15;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
}

.trainInfo>div {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.trainInfo .trainInfoClose {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 36px;
  height: 36px;
  padding: 2px 0px 0px 10px;
  cursor: pointer;
}

.trainInfo .trainInfoClose i, .trainInfo .showJunctions i {
  font-size: 24px;
}

.trainInfo .showJunctions {
  position: absolute;
  top: 55px;
  right: 2px;
  width: 26px;
  height: 26px;
  cursor: pointer;
}


.trainInfo .content {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 16px;
  bottom: 0px;
  padding: 2px 2px 4px 10px;
  overflow-x: hidden;
  overflow-y: auto;
}

.trainInfo h1 {
  font-size: 1.3em;
}

table.liveinfo .lateness {
  text-align: center;
}

table.liveinfo tr.nostop {
  display: none;
}

.showjunc table.liveinfo tr.nostop {
  display: table-row;
}


.trainmap.train-dyn .train { position: absolute; z-index: 100; width: 150px; height: 150px; background-size: 600% 700%; cursor: pointer; }
.trainmap.train-dyn .train.rot90 { background-position: 0% 0%; }
.trainmap.train-dyn .train.rot80 { background-position: -100% 0%; }
.trainmap.train-dyn .train.rot70 { background-position: -200% 0%; }
.trainmap.train-dyn .train.rot60 { background-position: -300% 0%; }
.trainmap.train-dyn .train.rot50 { background-position: -400% 0%; }
.trainmap.train-dyn .train.rot40 { background-position: -500% 0%; }
.trainmap.train-dyn .train.rot30 { background-position: 0% -100%; }
.trainmap.train-dyn .train.rot20 { background-position: -100% -100%; }
.trainmap.train-dyn .train.rot10 { background-position: -200% -100%; }
.trainmap.train-dyn .train.rot0 { background-position: -300% -100%; }
.trainmap.train-dyn .train.rot350 { background-position: -400% -100%; }
.trainmap.train-dyn .train.rot340 { background-position: -500% -100%; }
.trainmap.train-dyn .train.rot330 { background-position: 0% -200%; }
.trainmap.train-dyn .train.rot320 { background-position: -100% -200%; }
.trainmap.train-dyn .train.rot310 { background-position: -200% -200%; }
.trainmap.train-dyn .train.rot300 { background-position: -300% -200%; }
.trainmap.train-dyn .train.rot290 { background-position: -400% -200%; }
.trainmap.train-dyn .train.rot280 { background-position: -500% -200%; }
.trainmap.train-dyn .train.rot270 { background-position: 0% -300%; }
.trainmap.train-dyn .train.rot260 { background-position: -100% -300%; }
.trainmap.train-dyn .train.rot250 { background-position: -200% -300%; }
.trainmap.train-dyn .train.rot240 { background-position: -300% -300%; }
.trainmap.train-dyn .train.rot230 { background-position: -400% -300%; }
.trainmap.train-dyn .train.rot220 { background-position: -500% -300%; }
.trainmap.train-dyn .train.rot210 { background-position: 0% -400%; }
.trainmap.train-dyn .train.rot200 { background-position: -100% -400%; }
.trainmap.train-dyn .train.rot190 { background-position: -200% -400%; }
.trainmap.train-dyn .train.rot180 { background-position: -300% -400%; }
.trainmap.train-dyn .train.rot170 { background-position: -400% -400%; }
.trainmap.train-dyn .train.rot160 { background-position: -500% -400%; }
.trainmap.train-dyn .train.rot150 { background-position: 0% -500%; }
.trainmap.train-dyn .train.rot140 { background-position: -100% -500%; }
.trainmap.train-dyn .train.rot130 { background-position: -200% -500%; }
.trainmap.train-dyn .train.rot120 { background-position: -300% -500%; }
.trainmap.train-dyn .train.rot110 { background-position: -400% -500%; }
.trainmap.train-dyn .train.rot100 { background-position: -500% -500%; }
.trainmap.train-dyn .train.rot45 { background-position: 0% -600%; }
.trainmap.train-dyn .train.rot315 { background-position: -100% -600%; }
.trainmap.train-dyn .train.rot225 { background-position: -200% -600%; }
.trainmap.train-dyn .train.rot135 { background-position: -300% -600%; }
.trainmap.train-dyn .train.atocLE { background-image: url(/img/trains/LE_xl.png); }
.trainmap.train-dyn .train.atocAW { background-image: url(/img/trains/AW_xl.png); }
.trainmap.train-dyn .train.atocCC { background-image: url(/img/trains/CC_xl.png); }
.trainmap.train-dyn .train.atocCS { background-image: url(/img/trains/CS_xl.png); }
.trainmap.train-dyn .train.atocCH { background-image: url(/img/trains/CH_xl.png); }
.trainmap.train-dyn .train.atocXC { background-image: url(/img/trains/XC_xl.png); }
.trainmap.train-dyn .train.atocDC { background-image: url(/img/trains/DC_xl.png); }
.trainmap.train-dyn .train.atocEM { background-image: url(/img/trains/EM_xl.png); }
.trainmap.train-dyn .train.atocGR { background-image: url(/img/trains/GR_xl.png); }
.trainmap.train-dyn .train.atocES { background-image: url(/img/trains/ES_xl.png); }
.trainmap.train-dyn .train.atocFC { background-image: url(/img/trains/FC_xl.png); }
.trainmap.train-dyn .train.atocGW { background-image: url(/img/trains/GW_xl.png); }
.trainmap.train-dyn .train.atocHT { background-image: url(/img/trains/HT_xl.png); }
.trainmap.train-dyn .train.atocSR { background-image: url(/img/trains/SR_xl.png); }
.trainmap.train-dyn .train.atocTP { background-image: url(/img/trains/TP_xl.png); }
.trainmap.train-dyn .train.atocGX { background-image: url(/img/trains/GX_xl.png); }
.trainmap.train-dyn .train.atocGC { background-image: url(/img/trains/GC_xl.png); }
.trainmap.train-dyn .train.atocGN { background-image: url(/img/trains/GN_xl.png); }
.trainmap.train-dyn .train.atocTL { background-image: url(/img/trains/TL_xl.png); }
.trainmap.train-dyn .train.atocHC { background-image: url(/img/trains/HC_xl.png); }
.trainmap.train-dyn .train.atocHX { background-image: url(/img/trains/HX_xl.png); }
.trainmap.train-dyn .train.atocLM { background-image: url(/img/trains/LM_xl.png); }
.trainmap.train-dyn .train.atocLO { background-image: url(/img/trains/LO_xl.png); }
.trainmap.train-dyn .train.atocLT { background-image: url(/img/trains/LT_xl.png); }
.trainmap.train-dyn .train.atocME { background-image: url(/img/trains/ME_xl.png); }
.trainmap.train-dyn .train.atocMR { background-image: url(/img/trains/MR_xl.png); }
.trainmap.train-dyn .train.atocTW { background-image: url(/img/trains/TW_xl.png); }
.trainmap.train-dyn .train.atocNT { background-image: url(/img/trains/NT_xl.png); }
.trainmap.train-dyn .train.atocSW { background-image: url(/img/trains/SW_xl.png); }
.trainmap.train-dyn .train.atocSE { background-image: url(/img/trains/SE_xl.png); }
.trainmap.train-dyn .train.atocSN { background-image: url(/img/trains/SN_xl.png); }
.trainmap.train-dyn .train.atocVT { background-image: url(/img/trains/VT_xl.png); }
.trainmap.train-dyn .train.atocWC { background-image: url(/img/trains/WC_xl.png); }
.trainmap.train-dyn .train.atocZZ { background-image: url(/img/trains/ZZ_xl.png); }

.train span { font-size: 12px; }

@media screen and (max-width: 422px) {
  .livetile .searchOuter {
    width: calc(100% - 60px);
  }
  .livetile .searchOuter .fa-search {
    display: none;
  }
  form.searchform {
    width: calc(100% - 60px);
  }
}