body {
  background: #efefef;
  font: 16px Helvetica, Arial;
}

#checks .check {
  float: left;
  overflow: hidden;
  margin: 0 10px 10px 0;
  padding: 12px 15px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.3);
}

/* Make sure that height of a failed check
   equals two ok checks stacked up together. */
#checks .check.ok {
  background: rgb(58,130,7);
  color: #fff;
  font-size: 25px;
  line-height: 25px;
}
#checks .check.failed {
  background: rgb(202,26,22);
  color: #fff;
  font-size: 85px;
  line-height: 85px;
}
#checks .check.undetermined {
  background: #777;
  color: #fff;
  font-size: 85px;
  line-height: 85px;
}

@-webkit-keyframes wiggle {
  0% { -webkit-transform: rotate(1deg); }
  50% { -webkit-transform: rotate(-1deg); }
  100% { -webkit-transform: rotate(1deg); }
}
#checks .check.changing {
  -webkit-animation: wiggle 0.5s infinite;
}

#heartBeat {
  position: absolute;
  top: 20px;
  right: 0;
  padding: 5px 5px 0 0;
  border-top: 1px solid #ccc;
  text-align: right;
  font: 11px Courier New, Courier;
  color: #999;
}

#lastUpdated {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 5px 0 0;
  text-align: right;
  font: 11px Courier New, Courier;
  color: #999;
}

/* Overlay for indicating when server connection is down */
#heartBeatOverlay { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; 
  background: #fff;
  opacity: 0.9;
  text-align: center;
}

/* Just to mess with ya */
@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg)   translate(-5px) rotate(0deg);    }
  to   { -webkit-transform: rotate(360deg) translate(-5px) rotate(-360deg); }
}
#heartBeatOverlay p {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 100px;
  margin-top: -50px;
  margin-left: -300px;
  font-size: 80px;
  color: #ccc;
  -webkit-animation: rotate 8s infinite linear;
}

#heartBeatOverlay[data-show] { display: block; }
