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%);}
#canvas { background-color: #192447; }
#splash { position: width: 478px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#splash div { margin-top: 20px; margin-bottom: 20px; }

.progress {width: 200px; height: 10px; margin: auto;}
.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; }

.splash-searide .logo {background: url('title.png'); width: 478px; height: 90px; }
.splash-seaguys .logo {background: url('seaguys.png'); width: 478px; height: 236px; background-position: center; background-repeat: no-repeat; }
.reactor {background: url('reactor.png'); width: 478px; height: 125px; background-position: center; background-repeat: no-repeat; }
.instructions {color: white; text-align: center; width: 478px; }

#sda { width: 960px; height: 540px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
#sdaBlock { width: 380px; top: 50%; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); }
#continue-button { margin: auto; display: block; width: 300px; }
.popup { position: absolute; color: #FFFFFF; background-color: #080808; border: 1px solid white; padding: 50px; font-size: 16pt; }
.popup p { margin-top: 0px; }


.overlay { position: absolute; color: #FFFFFF; background-color: rgba(0, 0, 0, .5); border-radius: 5px; padding: 25px; font-size: 16pt; }

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

#seaguys-io_728X90 { position: absolute; width: 728px; height: 90px; bottom: 30px; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%);}
#seaguys-io_300X600 { position: absolute; width: 300px; height: 600px; top: 50%; left: 30px; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); }
#searide-io_728X90 { position: absolute; width: 728px; height: 90px; bottom: 30px; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }
#searide-io_300X600 { position: absolute; width: 300px; height: 600px; top: 50%; left: 30px; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); }
#crazy_728X90 { position: absolute; width: 728px; height: 90px; bottom: 30px; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }
#crazy_300X250 { position: absolute; width: 300px; height: 250px; top: 50%; left: 30px; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); }