* { margin:  0; padding: 0; }
body { font: normal 14px Times New Roman; background: #F4F3EF; }
#container { width: 740px; height: 370px; position: relative; margin: 0 auto; }
#container > div { position: absolute; top: 0; left: 0; width: 740px; height: 370px; }
#container #game { z-index: 2; }
p#statbar { position: absolute; bottom: 0; left: 0; z-index: 2; color: #00ffc6; font-weight: bold; width: 740px; opacity: 0.8; }
p#statbar span#height, p#statbar span#speed { display: inline-block; width: 35px; text-align: right; }
p#statbar > span { display: block; background: #3d7284; padding: 10px 20px; }
p#statbar > span#stat-h { float: left; border-radius: 0 10px 0 0; }
p#statbar > span#stat-s { float: right; border-radius: 10px 0 0 0; }

#container #menu { background: #E0D9CF url(../img/menu.jpg) no-repeat; color: #888; text-align: center; text-shadow: 1px 1px 1px #fff; z-index: 10; }
#menu h1, #menu h2, #menu h3 { cursor: pointer; display: inline-block; padding: 5px 20px; border: 1px solid transparent; border-bottom-color: #39C6F4; }
#menu h1:hover, #menu h2:hover, #menu h3:hover { background: #39C6F4; color: #fff; text-shadow: 1px 1px 1px #666; }
#menu p { color: #888; }
#menu h1 { margin-top: 180px; font-size: 20px; }
#menu h2 { margin-top: 15px; font-size: 16px; }
#menu h3 { margin-top: 15px; font-size: 14px; }

#howTo { background: #E0D9CF url(../img/howtoplay.jpg) no-repeat; color: #666; z-index: 9; position: relative; }
#howTo p { background: #fff; color: #0c7a8b; font-size: 14px; position: absolute; padding: 2px 4px 0px 4px; border: 1px solid #0c7a8b; border-radius: 5px; }
#howTo p.meteor { top: 60px; left: 20px; }
#howTo p.satellite { top: 40px; right: 240px; }
#howTo p.balloon { top: 90px; left: 190px; }
#howTo p.bird { top: 170px; left: 190px; }
#howTo p.plane { top: 180px; right: 150px; }
#howTo p.height { bottom: 50px; left: 40px; }
#howTo p.speed { bottom: 50px; right: 50px; }
#howTo p.rocket { bottom: 115px; left: 460px; }
#about { background: #E0D9CF; color: #666; text-align: center; text-shadow: 1px 1px 1px #fff; z-index: 8; }
#about p { margin-top: 0px; }
#about p a { color: #888; text-decoration: none; font-weight: bold; }
#about h2 { margin-top: 30px; }
#about h3 { margin-top: 10px; }
#howTo span, #about span { display: inline-block; cursor: pointer; background: #aaa; color: #fff; text-transform: uppercase; font-size: 12px; padding: 15px; border: 1px solid #ccc; border-radius: 0px 10px 10px 0px; position: absolute; top: 150px; left: 0px; text-shadow: 1px 1px 1px #000; }
#howTo span:hover, #about span:hover { background: #39C6F4; color: #fff; }

#message { width: 740px; height: 370px; z-index: 5; position: relative; }
#message .box { position: absolute; top: 100px; left: 200px; z-index: 4; width: 400px; height: 200px; background: #e2ded3; font: bold 12px Arial; }
#message .shadow { position: absolute; top: 0; left: 0; z-index: 3; width: 740px; height: 370px; background: #000; opacity: 0.5; }
#message .box h1, #message .box h2 { width: 400px; height: 100px; text-indent: -5000px; margin-bottom: 20px; }
#message .box h1 { background: url(../img/gameover.jpg) no-repeat; }
#message .box h2 { background: url(../img/pause.jpg) no-repeat; }
#message .box p { color: #3d7284; text-align: center; text-shadow: 1px 1px 1px #fff; line-height: 20px; }
#message .box p a { color: #17a6d5; text-decoration: underline; }
#message .box p a:hover { text-decoration: none; }
#message .box p span { font-size: 16px; padding: 0 2px; text-shadow: 1px 1px 2px #fff; }

.social { position: absolute; bottom: 5px; left: 10px; width: 150px; text-align: left; }
.social > * { display: block; clear: both; margin: 10px 5px; }
.social > span { padding-left: 2px; }
.ribbon { width: 149px; height: 149px; position: absolute; top: 0; right: 0; display: block; background: url(../img/frontinvaders-ribbon.png) no-repeat; text-indent: -5000px; }