body {
background-color: #111;
font-family: verdana;
}
h1 {
background: #222 url("logo.png") no-repeat 50% 100px;
height: 200px;
font-size: 100px;
font-weight: normal;
color: #888;
padding-top: 400px;
box-shadow: 0px 30px 50px 0px #000;
border-bottom: 1px solid #444;
margin-bottom: 90px;
}
h2 {
color: #444;
font-size: 80px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 40px;
}
input, select {
-webkit-appearance: none;
text-align: center;
margin-bottom: 60px;
padding: 0px;
width: 600px;
height: 140px;
font-size: 70px;
color: #888;
background-color: #222;
border: solid 6px #bc1142;
border-radius: 50px;
box-shadow: 0px 30px 50px 0px #000;
}
input {
width: 280px;
}
input[value=Start], input[value=Reset] {
margin-right: 40px
}
/* "battery bar" */
.bb-table {
display: table;
table-layout: fixed;
height: 30px;
width: 600px;
margin-bottom: 40px;
background-color: #444;
}
.bb-ok, .bb-warn, .bb-low {
display: table-cell;
}
.bb-ok {
background-color: green;
}
.bb-warn {
background-color: orange;
}
.bb-low {
background-color: red;
/* "glow" effect */
box-shadow: 0px 0px 20px 10px red;
}