body { -webkit-text-size-adjust: none; margin: 0; padding: 0; font-size: 62.5%; font-family: Trebuchet, Trebuchet MS, Helvetica, Verdana, sans-serif; background-color: #000; }
.container { position: relative; margin: auto; overflow: visible; background: #000; }
body .container { width: 100%; height: 416px; }
.content { position: relative; overflow: visible; background: #000; }
body .content { width: 100%; height: 356px; }
.adcontainer { position: relative; width: 100%; height: 60px; background: #000; text-align: center; }
.ad { margin: auto; }
.clearer { clear: both; width: 1px; height: 1px; overflow: hidden; }

.intro { background: #000; }
#preloading { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #000; text-align: center; padding-top: 80px; }

#brand { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #000 url(imgs/underclouds.png) no-repeat center; }
#logo { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; }
#logo-inner { position: relative; margin: auto; width: 320px; height: 356px; }
#logo-img { position: relative; margin: auto; margin-bottom: 38px; margin-top: 15px; }
#logo-menu { position: relative; }
#logo-loading { padding-top: 30px; text-align: center; }

.txt-big { font-size: 3.4em; font-family: Trebuchet, Trebuchet MS, Helvetica, Verdana, sans-serif; color: #fff; text-decoration: none; text-shadow: #000 3px 3px 3px; }
.txt-med { font-size: 2em; font-family: Trebuchet, Trebuchet MS, Helvetica, Verdana, sans-serif; color: #fff; text-decoration: none; text-shadow: #000 3px 3px 3px; }
.txt-sml { font-size: 1.8em; font-family: Trebuchet, Trebuchet MS, Helvetica, Verdana, sans-serif; color: #fff; text-decoration: none; text-shadow: #000 3px 3px 3px; }
.txt-kinda-sml { font-size: 1.2em; font-family: Trebuchet, Trebuchet MS, Helvetica, Verdana, sans-serif; color: #fff; text-decoration: none; text-shadow: #000 3px 3px 3px; }
.txt-very-sml { font-size: 1.0em; font-family: Trebuchet, Trebuchet MS, Helvetica, Verdana, sans-serif; color: #fff; text-decoration: none; text-shadow: #000 3px 3px 3px; }

.btn { position: absolute; cursor: pointer; }

#game-container { position: absolute; left: 0px; top: 0px; background: #000; width: 100%; height: 100%; }
#game-inner { position: relative; margin: auto; width: 320px; height: 356px; }
#game-quit { position: absolute; top: 0px; left: 0px; padding-left: 10px; width: 150px; height: 36px; line-height: 36px; font-size: 1.5em; color: #fff; text-align: left; }
#game-score { position: absolute; top: 0px; left: 160px; padding-right: 10px; width: 150px; height: 36px; line-height: 36px; font-size: 1.5em; color: #fff; text-align: right; }
#game-canvas { position: absolute; top: 36px; left: 0px; width: 320px; height: 320px; background: #000; }
#game-canvas-clicker { position: absolute; top: 36px; left: 0px; width: 320px; height: 320px; }
#btn-menu { text-decoration: none; color: #fc0; }

#btn-tap { position: absolute; left: 0px; top: 36px; width: 320px; height: 320px; text-align: center; cursor: pointer; }  
#btn-tap-img { margin-top: 100px; margin-bottom: 15px; }
#tap-name { color: black; font-weight: bold; font-size: 2.0em; margin-bottom: 20px; }
#tap-score { color: black; font-weight: bold; font-size: 2.0em; }
#tap-info { color: black; font-weight: bold; font-size: 0.6em; }
.white-box { padding: 10px; background: #fff; opacity: 0.65; -moz-opacity: 0.65; filter: alpha(opacity=65); }

#grats-container { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; background: transparent; padding-top: 100px; }
#grats-inner { position: relative; margin: auto; width: 320px; height: 356px; }
#grats { position: relative; margin-left: auto; margin-right: auto; display: block; background: transparent; margin-bottom: 30px; }
#grats-score { color: black; font-weight: bold; font-size: 2.0em; color: #fff; }
#grats-record { margin-top: 30px; }
#grats-entry { font-size: 1.2em; color: #000; }
#grats-name { font-size: 2.0em; background: #000; color: #fff; }
#grats-why { font-size: 1.2em; color: #fff; line-height: 40px; }
#btn-go { margin-left: 25px; cursor: pointer; }

#help-container { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; }
#help-inner { position: relative; margin: auto; width: 320px; height: 356px; background: #000; }
#help-outer { position: absolute; left: 0px; top: 0px; background: transparent url(dot.gif) no-repeat center center; cursor: pointer; }
#help-text { position: absolute; left: 0px; top: 0px; width: 320px; height: 356px; }

#scores-container { position: absolute; left: 0px; top: 0px; background: #000; width: 100%; height: 356px; text-align: center; padding-top: 10px; }
#scores-inner { position: relative; margin-left: auto; margin-right: auto; overflow: hidden; width: 320px; height: 356px; }

#scores-loading { margin-top: 100px; margin-bottom: 50px; }
#scores-table { position: relative; margin-left: auto; margin-right: auto; width: 320px; text-align: center; }
#scores-all { float: left; width: 150px; margin-right: 15px; }
#scores-today { float: left: width: 150px; }
.scores-header { font-size: 1.6em; font-weight: bold; color: #fff; padding-bottom: 5px; border-bottom: solid 1px #777; }
.score-line { margin-bottom: 7px; width: 149px; overflow: hidden; padding-bottom: 3px; border-bottom: 1px solid #333; }
.score-line .name { color: #fff; font-size: 1.4em; font-weight: bold; }
.score-line .score { color: #ffc; font-size: 1.5em; margin-right: 5px; font-weight: bold; }
#scores-continue { text-align: center; }

/* Initial states. */
#brand { opacity: 0; }
#logo { opacity: 0; }
#logo-loaded { display: none; }
#grats-container { opacity: 0; }