/****** Background ******/

body{
  background: black url('images/sky_night.jpg') repeat-x top center;
  margin: 0;
}

/****** City ******/

#cityscape{
  height: 675px;
  width: 100%;
  background: url('images/cityscape.png') repeat-x bottom center;
}
.underground{
  height: 500px;
  width: 100%;
}

/****** Subway Sign ******/

#subwaysign{
  width: 401px;
  height: 424px;
  float: right;
  margin-top: 251px;
  margin-right: 15%;
  background: url('images/subwaysign.png') no-repeat bottom right;
}

/****** Subway ******/
#subway{
  height: 88px;
  width: 100%;
  overflow: hidden;
}

#subway-background{
  height: 100%;
  height: 88px;
  width: 100%;
  background: /*#272727*/ url('images/subwaycolumns_unlit.png') repeat center center;
  z-index:1;
  position: relative;
}
#subway-foreground{
  height: 100%;
  width: 100%;
  background: url('images/subwaycolumnsforeground_unlit.png') repeat center center;
  position: relative;
  top: -300%;
  z-index:3;
}

/****** Train ******/

.train{
  height: 100%;
  width: 930px;
}

#lrtrain{
  margin-left: -100%;
  -webkit-animation: lrslidein 18s linear infinite;
  -moz-animation: lrslidein 18s linear infinite;
  -o-animation: lrslidein 18s linear infinite;
  animation: lrslidein 18s linear infinite;
  position: relative;
  top: -100%;
}

#rltrain{
  margin-left: 100%;
  -webkit-animation: rlslidein 22s linear infinite;
  -moz-animation: rlslidein 22s linear infinite;
  -o-animation: rlslidein 22s linear infinite;
  animation: rlslidein 22s linear infinite;
  position: relative;
  top: -200%;
}

#lrtrain .engine{
  background: url('images/lrtrainengine.png') no-repeat center bottom;
}

#rltrain .engine{
  background: url('images/rltrainengine.png') no-repeat center bottom;
}

.engine{
  height:100%;
  width: 335px;
  z-index:2;
  position: relative;
}

.passengercarriage{
  height:100%;
  width: 253px;
  background: url('images/traincarriage.png') no-repeat center bottom;
  z-index:2;
  position: relative;
}

#lrtrain .carriage{
  float: left;
}

#rltrain .carriage{
  float: right;
}

/****** Light ******/


.light{
  width: 100%;
  height: 100%;
  z-index:0;
  position: relative;
}

#lrtrain .light{
  background: -webkit-linear-gradient(left, rgba(100%, 100%, 100%, 0) 0%, rgba(100%, 100%, 100%, 0.2) 13.6%, rgba(100%, 100%, 100%, 0.1) 27.2%, rgba(100%, 100%, 100%, 0.2) 40.8%, rgba(100%, 100%, 100%, 0.1) 54.4%, rgba(100%, 100%, 100%, 0.2) 68%, rgba(100%, 100%, 100%, 0.5) 81.6%, rgba(100%, 100%, 100%, 0) 100%);
  background: -moz-linear-gradient(left, rgba(100%, 100%, 100%, 0) 0%, rgba(100%, 100%, 100%, 0.2) 13.6%, rgba(100%, 100%, 100%, 0.1) 27.2%, rgba(100%, 100%, 100%, 0.2) 40.8%, rgba(100%, 100%, 100%, 0.1) 54.4%, rgba(100%, 100%, 100%, 0.2) 68%, rgba(100%, 100%, 100%, 0.5) 81.6%, rgba(100%, 100%, 100%, 0) 100%);
  background: -o-linear-gradient(left, rgba(100%, 100%, 100%, 0) 0%, rgba(100%, 100%, 100%, 0.2) 13.6%, rgba(100%, 100%, 100%, 0.1) 27.2%, rgba(100%, 100%, 100%, 0.2) 40.8%, rgba(100%, 100%, 100%, 0.1) 54.4%, rgba(100%, 100%, 100%, 0.2) 68%, rgba(100%, 100%, 100%, 0.5) 81.6%, rgba(100%, 100%, 100%, 0) 100%);
  background: linear-gradient(to left, rgba(100%, 100%, 100%, 0) 0%, rgba(100%, 100%, 100%, 0.2) 13.6%, rgba(100%, 100%, 100%, 0.1) 27.2%, rgba(100%, 100%, 100%, 0.2) 40.8%, rgba(100%, 100%, 100%, 0.1) 54.4%, rgba(100%, 100%, 100%, 0.2) 68%, rgba(100%, 100%, 100%, 0.5) 81.6%, rgba(100%, 100%, 100%, 0) 100%);
}

#rltrain .light{
  background: -webkit-linear-gradient(right, rgba(100%, 100%, 100%, 0) 0%, rgba(100%, 100%, 100%, 0.2) 13.6%, rgba(100%, 100%, 100%, 0.1) 27.2%, rgba(100%, 100%, 100%, 0.2) 40.8%, rgba(100%, 100%, 100%, 0.1) 54.4%, rgba(100%, 100%, 100%, 0.2) 68%, rgba(100%, 100%, 100%, 0.5) 81.6%, rgba(100%, 100%, 100%, 0) 100%);
  background: -moz-linear-gradient(right, rgba(100%, 100%, 100%, 0) 0%, rgba(100%, 100%, 100%, 0.2) 13.6%, rgba(100%, 100%, 100%, 0.1) 27.2%, rgba(100%, 100%, 100%, 0.2) 40.8%, rgba(100%, 100%, 100%, 0.1) 54.4%, rgba(100%, 100%, 100%, 0.2) 68%, rgba(100%, 100%, 100%, 0.5) 81.6%, rgba(100%, 100%, 100%, 0) 100%);
  background: -o-linear-gradient(right, rgba(100%, 100%, 100%, 0) 0%, rgba(100%, 100%, 100%, 0.2) 13.6%, rgba(100%, 100%, 100%, 0.1) 27.2%, rgba(100%, 100%, 100%, 0.2) 40.8%, rgba(100%, 100%, 100%, 0.1) 54.4%, rgba(100%, 100%, 100%, 0.2) 68%, rgba(100%, 100%, 100%, 0.5) 81.6%, rgba(100%, 100%, 100%, 0) 100%);
  background: linear-gradient(to right, rgba(100%, 100%, 100%, 0) 0%, rgba(100%, 100%, 100%, 0.2) 13.6%, rgba(100%, 100%, 100%, 0.1) 27.2%, rgba(100%, 100%, 100%, 0.2) 40.8%, rgba(100%, 100%, 100%, 0.1) 54.4%, rgba(100%, 100%, 100%, 0.2) 68%, rgba(100%, 100%, 100%, 0.5) 81.6%, rgba(100%, 100%, 100%, 0) 100%);
}