html, body { width: 100%; height: 100%; font-family: Helvetica, Verdana, Arial, sans-serif; background-color: #000000; border: 0; margin: 0; padding: 0;}

.webgl-content * {border: 0; margin: 0; padding: 0; overflow: hidden; }
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.progress { top: 8px; bottom: -8px; left: 200px; right: 200px; position: absolute;}
.progress .empty {background: url('progressEmpty.Dark.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.progress .full {background: url('progressFull.Dark.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
.progress-label { position: absolute; width: 100%; color: black; }

#background { background-image: url('background.jpg'); background-size: cover; background-position: center; width: 100%; height: 100%; position: absolute; }

#login { width: 600px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.overlay { position: absolute; color: #FFFFFF; background-color: rgba(0, 0, 0, .5); border-radius: 5px; padding: 25px; font-size: 16pt; }

.text-input-wrapper { position: relative; margin-top: 20px;}
#login .text-input-wrapper p { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #AAAAAA; margin: 0; pointer-events: none; }
#login .input { width: 350px; clear: both; font-size: 16pt; text-align: center; border: 0; border-radius: 5px; margin: auto; margin-top: 10px; display: block; }
#login select { text-align-last: center; }
#login input[type=text]:focus { outline: none; }
#login .large-button { width: 300px; clear: both; margin: auto; display: block; }
#login #start-button { margin-top: 20px; margin-bottom: 10px; }
#login p { text-align: center; margin-top: 0px; margin-bottom: 5px; font-size: 18px; }
#login p.heading { font-weight: bold; font-size: 40px; margin-bottom: 20px; }
#login img { margin: auto; display: block; }

#credits { position: absolute; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); width: 100%; margin: 0; }

.error { color: #FF0000; }
.warning { color: #FFD454; }

#footer { font-size: 10pt; color: #FFFFFF; margin-top: 10px; }
#footer a { float: right; margin: 10px 0px 0px 10px; }

.human { color: #FFFF00; }
.zombie { color: #FF0000; }

a  { color: #DDDDDD; text-decoration: none;}
a:hover { color: #FFFFFF; }

#connection-message { text-align: center; margin-bottom: 20px; margin-top: 20px; position: relative; }

.large-button { background-color: #6FDCA6; border-radius: 5px; border: 0px; font-size: 18pt; padding: 10px; cursor: pointer; }
.large-button:hover { background-color: #94E5BC; }
.large-button:disabled { background-color: #C8C8C8; color: #000000; cursor: default; }
button:focus { outline: 0; }

#tutorial-button { padding: 5px; }