html, body { height:100%; margin: 0; overflow: hidden; } body { text-align: center; background-color: black; min-height: 100%; color: black; } #remote { background-color: #666; width: 90%; border-radius: 30px; margin: 5% 5% 0; height: 90%; padding: 0; } #spacer { clear: both; border-top: 1px solid rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 1px; box-shadow: 1px 1px 1px; margin-right: 30px; margin-left: 30px; } .button { display: inline-block; width: 43%; margin: 20px 0 30px; padding: 40px 0; border-style: none; color: rgba(192, 192, 192, 0.5); text-decoration: none; border-radius: 20px; text-shadow: 0 0 1px rgba(0, 0, 0, 0.5); font-size: 130px; font-weight: bold; background-color: #CCC; -moz-box-shadow: 0 10px rgba(0, 0, 0, 0.25); box-shadow: 0 10px rgba(0, 0, 0, 0.25); position: relative; } .button-1 { float: left; margin-left: 5%; } .button-2 { float: right; margin-right: 5%; } .button span { } .button:hover span { } .button:active, .button:focus { } .button:active span { } #label { font-family: "Lucida Grande", Lucida, Verdana, sans-serif; background-color: rgba(0, 0, 0, 0.1); width: 12px; height: 12px; display: block; margin: 20px auto; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-indent: -99999px; top: 20px; position: relative; } #label.start { } #label.initalizing { } #label.connection { background-color: orange; } #label.received { background-color: orange; } #label.processing { background-color: orange; } #label.ok { background-color: green; } #label.bad { background-color: red; }