body { font-family: "lucida grande", Verdana, Tahoma, Arial, Sans-Serif; font-size: 12px; }
div.wrapper { margin: 0 auto; min-height: 100%; width: 1000px;  }
#frame { position: absolute; background: transparent; width: 100%; height:100%; top: 0; padding: 70px 0; z-index: 1; }
#frame.withMsg { padding-top: 222px; }
#card { cursor: pointer; }
#hover { position: fixed; top: 125px; z-index: 4; width: 100%; }
body.played #hover { top: 175px; }
body.played #frame { padding-top: 222px; }
body.terminated #frame { padding-top: 222px; }

#card { width: 300px; height: 450px; margin: 0 auto; background-image: url('bg_card_white.png'); padding: 20px; font-family: Arial; }
#card h1 { font-size: 20pt; font-weight: bold; margin: 10px 0 0 15px; padding:0; background: transparent url(genre/1.png) no-repeat -100px -100px; height: 2em; line-height: 1em;}
#card h1.g1 { background-image: url(genre/1.png); }
#card h1.g2 { background-image: url(genre/2.png); }
#card h1.g3 { background-image: url(genre/3.png); }
#card h1.g4 { background-image: url(genre/4.png); }
#card h1.g5 { background-image: url(genre/5.png); }
#card h2 { font-size: 14pt; font-weight: normal; margin: 0 0 10px 0; padding: 5px 15px 5px 15px;  color: #bbbebd;}
#card h2 span { color: #444444; font-weight: normal; }
#card ul.stats { list-style-type: none; padding:0;margin:0; }
#card ul.stats li { font-size: 20pt; height: 32px; padding-left: 35px; font-weight: bold; }
#card ul.stats li.timer { color: #6B6B6D; background: transparent url('/content/icon_timer_trans_24px.png') no-repeat scroll 6px 4px; margin-left: 7px; }
#card ul.stats li.coins { color: #df8b05; background: transparent url('/content/icon_coins_trans_24px.png') no-repeat scroll 7px 3px; float: right; margin-right: 15px; }
#card .screenshot { padding: 25px 15px 0 15px;  }
#card .screenshot img { border: solid 1px #606060; width: 270px; height: 270px; }
#card #play { cursor:pointer; font-size: 24pt; margin: 0 15px 0 15px; width: 270px; height: 120px; padding-top: 150px; background-color: Black; color: White; font-weight: bold; text-align: center; position: relative; top: -270px; background: black url('icon_play.png') no-repeat 120px 50px; z-index: 10; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }

.warn1 { color: Orange; }
.warn2 { color: #990000; }

#msg { background-color: #5f5f5f; color: White; position: fixed; top: 70px; width: 100%; height: 152px; z-index:999; font-family: Trebuchet MS; font-size: 30pt; }
#msg h1 { margin: 0; padding: 0; font-size: 30pt; padding-top: 10px; padding-left: 60px; background: transparent url('icon_msgbar_sprite.png') no-repeat 0 7px; }
#msg h2 { margin: 0; padding: 0; font-size: 22pt; padding-bottom: 10px; padding-left: 60px; }
#msg h3 { margin: 0; padding: 0; line-height: 1em; }
#msg h1.y { background-position: 0 7px; color: #d9f1dc; }
#msg h1.n { background-position: 0 -52px; color: #f0dede; }
#msg p { font-size: 11pt; font-family: Arial; margin-top: .7em; padding-left: 60px; }
#msg .buttons { float: right; margin-top: 5px; }
#msg .buttons a { display: block; -moz-border-radius: 7px; border: solid 2px white; color: White; font-size: 18pt; margin: 5px; padding: 5px 10px; text-align: center; text-decoration: none; }
#msg .buttons a { background-color: #0D9DDB; }
#msg .buttons a:hover { background-color: #ff4a0b; }
#msg .buttons #keepPlaying { background-color: #bebebe; }
#msg .buttons #keepPlaying:hover { background-color: White; color: #ff4a0b; }
#msg .stats { font-size: 11pt; position: absolute; top: 10px; right: 44px; height: 108px; width: 136px; border: dotted 1px white; padding: 10px; }
#msg .share { font-size: 11pt; position: absolute; top: 10px; right: 217px; height: 108px; width: 136px; border: dotted 1px white; padding: 10px; }
#msg .share button { width: 133px; font-size: 12pt; margin-top: 3px; text-align: right; background-repeat: no-repeat; padding-top: 1px; padding-bottom: 2px; border: solid 1px white; color: White; -moz-border-radius: 3px; -webkit-border-radiu: 3px; background-position: 1px 1px; cursor: pointer; }
#msg .share button.facebook { background-image: url('/content/icon_facebook_24.png'); background-color: #E90085; }
#msg .share button.twitter { background-image: url('/content/icon_twitter_24.png'); background-color: #7F6CA7; }
#msg .share button.email { background-image: url('/content/icon_mail_24.png'); background-color: #8AD979; }
#msg .rate { font-size: 11pt; position: absolute; top: 10px; right: 44px; height: 108px; width: 136px; border: dotted 1px white; padding: 10px; }
#msg .rate a.thumbs { display: block; width: 70px; height: 100px; background: transparent url('/content/icon_rating_sprite.png') no-repeat 70px 0px; color: White; text-decoration: none; text-align: center; position: absolute; bottom: 0px; }
#msg .rate a.thumbs.up { background-position: -140px 0; color: #d9f1dc; height: 22px; padding-top: 78px; left: 7px;}
#msg .rate a.thumbs.down { background-position: -210px 0; color: #f0dede; height: 85px; padding-top: 15px; right: 7px; }
#msg .rate a.thumbs.up:hover, #msg .rate a.thumbs.up.selected { background-position: 0 0; }
#msg .rate a.thumbs.down:hover, #msg .rate a.thumbs.down.selected { background-position: -70px 0; }

#msg dl { margin: 0; padding: 0; font-size: 9pt; }
#msg dt { float: left; margin: 0; padding: 0; width: 100px;  }
#msg dd { float: left; margin: 0; padding: 0; text-align: right; width: 34px; }
#msg a.close { border:2px solid white; color:White; cursor:pointer; display:block; font-size:14pt; line-height:20px; padding-bottom:2px; padding-left:5px; padding-right:5px; position:absolute; right:10px; top:10px; font-weight: bold; }