html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Helvetica Neue', 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 0;
  color: white;
}

#wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#table {
  display: table;
  min-width: 100%;
  height: 100%;
}

#table > div {
  display: table-cell;
  padding: 0 0 0 40px;
  vertical-align: middle;
  min-width: 152px;
}

@media screen and (max-width:480px) {
  #table > div {
    display: block;
    padding: 20px 40px;
  }	
}

.digit, .colon{
  font-size: 24px;
}

.date {
  font-size: 16px;
  margin-top: 5px;
}

.city {
  font-size: 16px;
  margin-bottom: 50px;
}

@media screen and (max-width:480px) {
  .city {
    margin-bottom: 20px;
  }
}
.sunrise-start {
  background-color: #144A93;
  background: url('http://abram.rocks/images/clock/sunset-mid.png'), linear-gradient(to bottom, #144A93 0%, #285da7 100%);
  background-repeat: no-repeat;
}

.sunrise-mid {
  background-color: #285da7;
  background: linear-gradient(to bottom, #285da7 0%, #6EC2FA 100%);
}

.sunrise-end {
  background-color: #6EC2FA;
  background: linear-gradient(to bottom, #6EC2FA 0%, #a8d9fb 100%);
  color: black;
}

.day {
  background-color: #a8d9fb;
  background: linear-gradient(to bottom, #a8d9fb 0%, #ddf0fd 100%);
  color: black;
}

.sunrise-day {
  background-color: #a8d9fb;
  background: linear-gradient(to bottom, #a8d9fb 0%, #ddf0fd 100%);
  color: black;
}

.sunset-day {
  background-color: #a8d9fb;
  background: linear-gradient(to bottom, #a8d9fb 0%, #ddf0fd 100%);
  color: black;
}

.mid-day { 
  background-color: #a8d9fb;
  background: linear-gradient(to bottom, #a8d9fb 0%, #f7fcff 100%);
  color: black;
}

.sunset-start {
  background-color: #6EC2FA;
  background: linear-gradient(to bottom, #6EC2FA 0%, #ddf0fd 50%, #dfa86c 100%);
  color: black;
}
.sunset-mid {
  background-color: #08377e;
  background: url('http://abram.rocks/images/clock/sunset-mid.png'), linear-gradient(to bottom, #08377e 0%, #6EC2FA 63%, #ee8f4b 100%);
  background-repeat: no-repeat;

}
.sunset-end {
  background-color: #051e3f;
  background: url('http://abram.rocks/images/clock/sunset.png'), linear-gradient(to bottom, #051e3f 0%, #0c4186 75%, #d06341 100%);
  background-repeat: no-repeat;
}

.night {
  background-color: #051e3f;
  background: url('http://abram.rocks/images/clock/night.png'), linear-gradient(to bottom, #051e3f 0%, #144A93 100%);
  background-repeat: no-repeat;
}

.mid-night {
  background-color: #031123;
  background: url('http://abram.rocks/images/clock/midnight.png'), linear-gradient(to bottom, #031123 0%, #051E3F 100%);
  background-repeat: no-repeat;
}

@media screen and (max-width:480px) {
  .sunrise-start { background: url('http://abram.rocks/images/clock/sunset-mid.png'), linear-gradient(to right, #144A93 0%, #285da7 100%); }
  .sunrise-mid   { background: linear-gradient(to right, #285da7 0%, #6EC2FA 100%); }
  .sunrise-end   { background: linear-gradient(to right, #6EC2FA 0%, #a8d9fb 100%); }
  .day           { background: linear-gradient(to right, #a8d9fb 0%, #ddf0fd 100%); }
  .mid-day       { background: linear-gradient(to right, #a8d9fb 0%, #f7fcff 100%); }
  .sunset-start  { background: linear-gradient(to right, #6EC2FA 0%, #ddf0fd 50%, #dfa86c 100%); }
  .sunset-mid    { background: url('http://abram.rocks/images/clock/sunset-mid.png'), linear-gradient(to right, #08377e 0%, #6EC2FA 63%, #ee8f4b 100%); }
  .sunset-end    { background: url('http://abram.rocks/images/clock/sunset.png'), linear-gradient(to right, #051e3f 0%, #0c4186 75%, #d06341 100%); }
  .night         { background: url('http://abram.rocks/images/clock/stars.png'), linear-gradient(to right, #051e3f 0%, #144A93 100%); }
  .mid-night     { background: url('http://abram.rocks/images/clock/midnight.png'), linear-gradient(to right, #031123 0%, #051E3F 100%); }
}


/* adjust menu bar */
.hbar-content {
  margin-top:auto !important;
}