body {
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: right;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  background: url(../img/bg-portrait.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  overflow: auto;
}
body, p, div{
  margin: 0;
}
p {
  padding-right: 5px;
}

.statusblock {
  position: fixed;
  bottom: 10%;
  right: 7%;
  float: right;
  clear: both;
  height: 60px;
  width: 160px;
}

.version_label {
  font-weight: bold;
  background-color:#FFFFFF;
}
#app_version {
  padding-left: 2px;
}

#mobilefirst {
  display:none;
  width: 160px;
}

.mobilefirst_label {
  text-transform: none;
  background-color:#00B2EF;
  color:#FFFFFF;
  margin-bottom: 20px;
  margin-top: 2px;
}

.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
    -moz-animation:fade 3000ms infinite;
}
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
.event {
    color:#FFFFFF;
}
.listening {
    background-color:#333333;
    display:block;
}
.received {
    background-color:#4B946A;
    display:none;
}
/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
  body {
    background: url(../img/bg-landscape.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    max-height: 400px;
  }
}