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; }
body[orient="profile"] .container { width: 100%; height: 416px; }
body[orient="landscape"] .container { width: 100%; height: 268px; }
.content { position: relative; overflow: visible; background: #000; width: 320px; height: 356px; margin: auto; }
body[orient="profile"] .content { width: 320px; height: 356px; }
body[orient="landscape"] .content { width: 480px; height: 268px; }
.adcontainer { width: 100%; height: 60px; background: #000; text-align: center; }
.ad { margin: auto; }
.clearer { clear: both; width: 1px; height: 1px; overflow: hidden; }

.intro { background: #000; }
#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; background: #000 url(imgs/bg.jpg) no-repeat center top; text-align: center; }

#game-container { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #000; }
#field-outer { position: relative; margin-left: auto; margin-right: auto; background: #0c0f11; }
#field-background { position: relative; margin-left: auto; margin-right: auto; background: #0c0f11 url(imgs/fieldbg.png); width: 248px; height: 244px; padding-top: 4px; }
#btn-tap { position: absolute; left: 0px; top: 0px; padding-top: 60px; width: 248px; height: 248px; cursor: pointer; text-align: center; }

#help-container { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; }
#help-outer { position: relative; margin-left: auto; margin-right: auto; background: #0c0f11 url(dot.gif) no-repeat center center; cursor: pointer; }
body[orient="profile"] #help-outer { width: 320px; height: 356px; }
body[orient="landscape"] #help-outer { width: 480px; height: 268px; }

#field-profile { position: relative; width: 240px; height: 240px; margin-left: auto; margin-right: auto; background: #0c0f11 url(imgs/fieldbg-two.png) no-repeat 0px 0px; overflow: hidden; }
#field-landscape { position: relative; width: 240px; height: 240px; margin-left: auto; margin-right: auto; background: #0c0f11 url(imgs/fieldbg-two.png) no-repeat 0px -240px; overflow: hidden; }
#kick-profile { position: absolute; width: 240px; height: 15px; left: 4px; top: 252px; cursor: pointer; }
#kick-landscape { position: absolute; width: 15px; height: 240px; left: -19px; top: 4px; cursor: pointer; }
#flip-profile { position: absolute; width: 240px; height: 15px; left: 4px; top: 275px; cursor: pointer; }
#prev-profile { position: absolute; width: 70px; height: 15px; left: 4px; top: -19px; cursor: pointer; }
#prev-landscape { position: absolute; width: 15px; height: 70px; left: 252px; top: 4px; cursor: pointer; }
#reset-profile { position: absolute; width: 70px; height: 15px; left: 89px; top: -19px; cursor: pointer; }
#reset-landscape { position: absolute; width: 15px; height: 70px; left: 252px; top: 89px; cursor: pointer; }
#menu-profile { position: absolute; width: 70px; height: 15px; left: 89px; top: -42px; cursor: pointer; }
#menu-landscape { position: absolute; width: 15px; height: 70px; left: 275px; top: 89px; cursor: pointer; }
#donate-profile { position: absolute; width: 70px; height: 15px; left: 174px; top: -42px; cursor: pointer; }
#donate-landscape { position: absolute; width: 15px; height: 70px; left: 275px; top: 174px; cursor: pointer; }
#next-profile { position: absolute; width: 70px; height: 15px; left: 174px; top: -19px; cursor: pointer; }
#next-landscape { position: absolute; width: 15px; height: 70px; left: 252px; top: 174px; cursor: pointer; }
body[orient="profile"] #field-outer { width: 320px; height: 302px; padding-top: 54px; }
body[orient="profile"] #field-profile { display: block; }
body[orient="profile"] #field-landscape { display: none; }
body[orient="profile"] #kick-profile { display: block; }
body[orient="profile"] #kick-landscape { display: none; }
body[orient="profile"] #prev-profile { display: block; }
body[orient="profile"] #prev-landscape { display: none; }
body[orient="profile"] #reset-profile { display: block; }
body[orient="profile"] #reset-landscape { display: none; }
body[orient="profile"] #menu-profile { display: block; }
body[orient="profile"] #menu-landscape { display: none; }
body[orient="profile"] #donate-profile { display: block; }
body[orient="profile"] #donate-landscape { display: none; }
body[orient="profile"] #next-profile { display: block; }
body[orient="profile"] #next-landscape { display: none; }
body[orient="landscape"] #field-outer { width: 480px; height: 258px; padding-top: 10px; }
body[orient="landscape"] #field-profile { display: none; }
body[orient="landscape"] #field-landscape { display: block; }
body[orient="landscape"] #kick-profile { display: none; }
body[orient="landscape"] #kick-landscape { display: block; }
body[orient="landscape"] #prev-profile { display: none; }
body[orient="landscape"] #prev-landscape { display: block; }
body[orient="landscape"] #reset-profile { display: none; }
body[orient="landscape"] #reset-landscape { display: block; }
body[orient="landscape"] #menu-profile { display: none; }
body[orient="landscape"] #menu-landscape { display: block; }
body[orient="landscape"] #donate-profile { display: none; }
body[orient="landscape"] #donate-landscape { display: block; }
body[orient="landscape"] #next-profile { display: none; }
body[orient="landscape"] #next-landscape { display: block; }

.l { width: 60px; height: 60px; position: absolute; }
.ball { position: absolute; width: 20px; height: 20px; cursor: pointer; }

#grats-container { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; background: transparent; }
#grats { position: relative; margin-left: auto; margin-right: auto; display: block; padding-top: 100px; background: transparent; }

#grats-score { color: white; font-size: 2.2em; text-shadow: #000 3px 3px 3px; }
#tap-score { color: white; font-weight: bold; font-size: 2.0em; text-shadow: #000 3px 3px 3px; }
#tap-info { color: white; font-weight: bold; font-size: 0.6em; text-shadow: #000 3px 3px 3px; }
#grats-record { margin-top: 30px; }
#grats-name { font-size: 2.0em; }
#btn-go { padding-left: 5px; cursor: pointer; }
#update { color: white; font-size: 0.95em; text-shadow: #000 3px 3px 3px; }

/* IE orientation hacks \*/
* html .container { width: 100%; height: 416px; }
* html .content { width: 100%; height: 356px; }
* html #help-outer { width: 320px; height: 356px; }
* html #field-outer { width: 320px; height: 302px; padding-top: 54px; }
* html #field-profile { display: block; }
* html #field-landscape { display: none; }
* html #kick-profile { display: block; }
* html #kick-landscape { display: none; }
* html #prev-profile { display: block; }
* html #prev-landscape { display: none; }
* html #reset-profile { display: block; }
* html #reset-landscape { display: none; }
* html #menu-profile { display: block; }
* html #menu-landscape { display: none; }
* html #next-profile { display: block; }
* html #next-landscape { display: none; }
* html #donate-profile { display: block; }
* html #donate-landscape { display: none; }
* html #brand { height: 356px; }
* html #logo { height: 356px; }
/* */