@font-face {font-family: RobotoSlabB; src: url(RobotoSlab-Bold.ttf);}

* {border: 0; margin:0; padding:0;}
html { background: url(background.jpg) repeat; background-color: #FFFFFF; }

.webgl-content * {position: absolute; width: 100%; height: 100%; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; z-index: 1;}
.webgl-content .logo, .progress, .message {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('grogglogo.png') no-repeat center / contain; margin-top: -100px; width: 512px; height: 128px;}
.webgl-content .progress {height: 32px; width: 150px; margin-top: -25px;}
.webgl-content .progress .empty {background: url('barbackground.png') no-repeat right / cover; float: left; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('fullbar.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
.webgl-content .message {color: #ffffff; font-Family: 'RobotoSlabB', 'serif'; font-Weight: bold; font-Size: 18px; text-align: center; width: 512px; height: 100%; margin-top: 38px; display: inline-block;}

#leaderboard {background-color: transparent; width: 728px; height: 90px; position: fixed; top: 10px; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); z-index: 2;}
#slot {background-color: transparent; width: 300px; height: 250px; position: fixed; bottom: 10px; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); z-index: 2;}

#video { position: absolute; left: 64px; bottom: 64px; z-index: 2; visibility: inline-block; }
#video #playlist { width: 400px; height: 225px; border: 3px solid white}