body {
  background-color:#000000;
  color: white;
  font-size: 1.5em;
}

h3 {
  font-size: 1.75em;
}

table {
  vertical-align: middle;
  text-align: center;
  border-spacing: 10px;
}

a:link {
  color: #ffffff;
  text-decoration: none;
}
a.active:link {
  color: #00ff00;
  text-decoration: none;
}
a:visited {
  color: #ffffff;
  text-decoration: none;
}
a.active:visited {
  color: #00ff00;
  text-decoration: none;
}
a:hover {
  color: #298aad;
  text-decoration: none;
}
a.on:hover {
  color: #00ff00;
  text-decoration: none;
}
a.off:hover {
  color: #ff0000;
  text-decoration: none;
}
a:active {
  color: #ffffff;
  text-decoration: none;
}

/* Default */
td.outer {
  padding: 5px;
  width: 300px;
  height: 170px;
}

td.inner {
  width: 280;
  height: 150px;
}

p {
  width: 700px;
  text-align: center;
}

#shutdown {
margin-top: 50px;
bottom: 0;
right: 10;
position: absolute;
}

/* Android HDPI */
@media only screen and (-webkit-device-pixel-ratio:1.5) {
  td.outer {
    padding: 5px;
    width: 200px;
    height: 170px;
  }

  td.inner {
    width: 180;
    height: 150px;
  }

  p {
    width: 480px;
    text-align: center;
  }
}

/* Android 720p */
@media only screen and (-webkit-device-pixel-ratio:2) {
  body {
    background-color:#000000;
    color: white;
    font-size: 2em;
  }

  h3 {
    font-size: 2.25em;
  }

  td.outer {
    padding: 5px;
    width: 350px;
    height: 170px;
  }

  td.inner {
    width: 330;
    height: 150px;
  }

  p {
    width: 720px;
    text-align: center;
  }
}