/* __import
---------------------------------------*/

@import url("reset.css");

/* __clearfix
---------------------------------------*/

.clearfix:after{ content:" "; display:block; height:0; clear:both; visibility:hidden; }

/* __htmltags
---------------------------------------*/

html,body { background-color: #C1D6E2; margin: 0; padding: 0; }
body{ font-family: Arial; font-size: 62.5%; }

/* __wrapper
---------------------------------------*/

#wrapper { width: 960px; height: 600px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 5; margin: 0; overflow: hidden; background: #ffffff; -webkit-backface-visibility: hidden; }
#canvas, #screens, #badbrowser, #footer, #video, #soundmanager { position: absolute; top: 0; left: 0; }
#screens { display: none; }
#canvas { z-index: 1; width: 960px; height: 600px; }
#screens { z-index: 2; width: 100%; height: 100%; }
#footer { z-index: 3;}
#soundmanager { z-index: 4; }
#video { z-index: 5; }
#social { z-index: 6; display: none; }

/* __badbrowser
---------------------------------------*/

#badbrowser { width: 960px; height: 600px; display: block; background: url( ../media/ui/badbrowser.png ) no-repeat; }

/* __screen
---------------------------------------*/

.screen{ width: 960px; height: 600px; position: relative; }

/* __social
---------------------------------------*/

#social{ width: 333px; height: 69px; overflow: hidden; background: url( ../media/ui/share.png ) 0 50% no-repeat; position: absolute; top: 10px; right: 5px; }
#social ul{ margin-left: 180px; }
#social li{ display: inline-block; margin-left: 5px; }
a.social{ display: block; width: 69px; height: 69px; text-indent: -9999px; }
a.social.facebook{ background: url( ../media/ui/btn-facebook.png ) no-repeat; }
a.social.twitter{ background: url( ../media/ui/btn-twitter.png ) no-repeat; }
a.social.facebook:hover, a.social.twitter:hover{ background-position: 0 -69px; }

/* __sound
---------------------------------------*/

#soundmanager{ width: 28px; height: 26px; overflow: hidden; position: absolute; top: 10px; left: 920px; }
#btnsound{ display: block; width: 28px; height: 26px; background: url( ../media/ui/btn-sound.png ) no-repeat; text-indent: -9999px; }

/* __footer
---------------------------------------*/

#footer { width: 337px; height: 26px; display: block; position: absolute; top: 595px; left: 600px; }
#footer a{ display: block; text-indent: -9999px; }
#btn-sound { display: none; }
.tamba{ width: 337px; height: 26px; background: url( ../media/ui/tamba.png ); }

/* __titlescreen
---------------------------------------*/

#screen-title{ background: url( ../media/ui/title-bg.png ); }
#screen-title .buttons{ width: 741px; height: 310px; position: absolute; top: 245px; left: 104px; z-index: 2; }
#screen-title .buttons a{ position: absolute; }
#screen-title .button.play { top: 57px; left: 98px; }
#screen-title .button.instruct { left: 98px; bottom: 60px; }
#screen-title .button.leaderboard { right: 98px; bottom: 60px; }
#screen-title #prize{ display: block; position: absolute; top: 408px; left: -50px; width: 635px; height: 282px; background: url( ../media/ui/prize.png ) no-repeat; z-index: 1; }

#title-terms{ font-size: 16px; color: #2468AD; position: absolute; top: 510px; left: 328px; width: 300px; text-align: center; z-index: 3; }
#title-terms:hover{ color: #2E79C4 }

/* __instructions
---------------------------------------*/

#screen-instruct{ background: url( ../media/ui/instruct-bg.png ); }
#screen-instruct .instruct-nav{ width: 860px; height: 414px; position: absolute; top: 125px; left: 58px; z-index: 2; }
#screen-instruct .instruct-nav a{ width: 28px; height: 413px; position: absolute; top: 0; }
#screen-instruct .instruct-nav a.prev{ left: 0; background: url( ../media/ui/btn-instruct-left.png ) no-repeat; }
#screen-instruct .instruct-nav a.next{ right: 0; background: url( ../media/ui/btn-instruct-right.png ) no-repeat; }
#screen-instruct .instruct-nav a:hover{ background-position: -28px 0; }

#instruct-holder{ width: 790px; height: 410px; position: absolute; left: 92px; top: 126px; overflow: hidden; }
#instruct-holder li{ border: text-align: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-indent: -9999px }
#instruct-page{ color: #B2AFA0; font-weight: bold; font-size: 40px; font-family: 'Arial Rounded MT', Arial; position: absolute; bottom: 70px; right: 100px; }
#instruct-0{ background: url( ../media/ui/instruct-0.png ) 50% 50% no-repeat; }
#instruct-1{ background: url( ../media/ui/instruct-1.png ) 50% 50% no-repeat; }
#instruct-2{ background: url( ../media/ui/instruct-2.png ) 50% 50% no-repeat; }
#instruct-3{ background: url( ../media/ui/instruct-3.png ) 50% 50% no-repeat; }
#instruct-4{ background: url( ../media/ui/instruct-4.png ) 50% 50% no-repeat; }

/* __leaderboard
---------------------------------------*/

#screen-scores{ background: url( ../media/ui/leaderboard-bg.png ); }
#screen-scores #scores{ position: absolute; top: 142px; left: 60px; width: 773px; height: 388px; }
#screen-scores .row{ width: 773px; height: 81px; background: url( ../media/ui/leaderboard-row.png ) no-repeat; position: relative; }
#screen-scores .name, #screen-scores .score{ color: #404040; font-size: 30px; line-height: 63px; font-weight: bold; position: absolute; top: 0; }
#screen-scores .name { left: 0px; width: 420px; text-indent: 20px; overflow: hidden; }
#screen-scores .score{ width: 317px; right: 0; text-align: center; }
#scores-loading, #intro-loading{ width: 197px; height: 40px; background: url( ../media/ui/scores-loading.png ) 0 100% no-repeat; margin: 0 auto 0 auto; padding-top: 320px; }
#scrollbar { width: 840px; height: 388px; clear: both; }
#scrollbar .viewport { width: 840px; height: 388px; overflow: hidden; position: absolute; top: 140px; left: 0;}
#scrollbar .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar .thumb .end,
#scrollbar .thumb { background-color: #003D5D; }
#scrollbar .scrollbar { position: absolute; right: 50px; top: 140px; width: 49px; }
#scrollbar .track { background: url( ../media/ui/scroll-track.png ) no-repeat; height: 412px; width:49px; position: relative; }
#scrollbar .thumb { height: 49px; width: 49px; background: url( ../media/ui/scroll-face.png ) no-repeat; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar .thumb .end { overflow: hidden; height: 5px; width: 13px; display: none; }
#scrollbar .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

/* __intro
---------------------------------------*/

#video{ position: relative; }
#skip-intro{ width: 153px; height: 43px; background: url( ../media/ui/btn-skip.png ) no-repeat; position: absolute; top: 10px; right: 10px; text-indent: -9999px; z-index: 9999; }
#skip-intro:hover{ background-position: 0 -43px; }

/* __game
---------------------------------------*/

#screen-game{ display: none; }

/* __submitscore
---------------------------------------*/

#screen-submitscore{ background: url( ../media/ui/submitscore-bg.png ); }
#screen-submitscore input{ color: #404040; font-size: 30px; line-height: 53px; font-weight: bold; border: none; position: absolute; left: 300px; background: none; width: 535px; }
#screen-submitscore #yourname { top: 367px; }
#screen-submitscore #youremail { top: 460px; }
#screen-submitscore #error-yourname, 
#screen-submitscore #error-youremail{ width: 565px; height: 72px; background: url( ../media/ui/input-error-1.png ) no-repeat; position: absolute; left: 288px; }
#screen-submitscore #error-youremail { top: 454px; }
#screen-submitscore #error-yourname { top: 362px; }

#score-social { position: absolute; right: 107px; top: 167px; }
#score-social a{ display: block; width: 76px; height: 75px; margin-bottom: 12px; text-indent: -9999px }
#score-social a.facebook{ background: url( ../media/ui/btn-facebook-2.png ) no-repeat; }
#score-social a.facebook:hover{ background-position: 0 -75px; }
#score-social a.twitter{ background: url( ../media/ui/btn-twitter-2.png ) no-repeat; }
#score-social a.twitter:hover{ background-position: 0 -75px; }

#score-buttons{ position: absolute; top: 228px; left: 117px; }
#score-buttons a, #score-buttons span{ height: 111px; width: 306px; display: block; }
#score-buttons li{ display: inline-block; margin-right: 20px; }

#score-buttons .btn1.lose:hover{ background-position: 0 -110px }
#score-buttons .btn1.win:hover{ background-position: 0 -110px }
#score-buttons .btn2.lose:hover{ background-position: 0 -110px }
#score-buttons .btn2.win:hover{ background-position: 0 -110px }
#score-buttons .btn1.win{ background: url( ../media/ui/btn-score-left-lose.png ) no-repeat; }
#score-buttons .btn1.lose{ background: url( ../media/ui/btn-score-left-lose.png ) no-repeat; }
#score-buttons .btn2.win{ background: url( ../media/ui/btn-score-right-win.png ) no-repeat; }
#score-buttons .btn2.lose{ background: url( ../media/ui/btn-score-right-lose.png ) no-repeat; }

.error{ display: none; }
.error.active{ display: block; }

#score-title{ font-family: 'Arial Rounded MT', Arial; font-size: 70px; width: 735px; line-height: 95px; text-align: center; color: #ffffff; font-weight: bold; position: absolute; top: 63px; left: 117px; }

#score-title{ text-shadow:
 -1px -1px 0 #14691E, 
 1px -1px 0 #14691E,
 -1px 1px 0 #14691E,
  1px 1px 0 #14691E;
}

#score-message{ width: 636px; height: 47px; background: url( ../media/ui/score-message.png ) no-repeat; position: absolute; top: 170px; left: 120px; }
#score-message.active{ background-position: 0 -47px; }
#xmessage{ width: 960px; background: #ffffff; color: #333333; text-align: center; position: absolute; bottom: 0; left: 0; font-size: 18px; font-weight: bold; padding: 5px 0 5px 0; }

#message{ width: 401px; height: 79px; background: url( ../media/ui/message.png ); position: absolute; top: -20px; left: 120px; }
#message .inner{ font-size: 22px; font-weight: bold; padding: 35px 20px 20px 20px; text-align: center; color: #ffffff; }

/* __sendfriend
---------------------------------------*/

#screen-sendfriend{ background: url( ../media/ui/sendfriend-bg.png ); }

#screen-sendfriend .formrow { position: absolute; width: 822px; height: 62px; background: url( ../media/ui/input-error-sendfriend.png) no-repeat; left: 73px; background-position: -900px 0; }
#screen-sendfriend .formrow input{ text-indent: 0; color: #404040; font-size: 30px; line-height: 53px; font-weight: bold; border: none; position: absolute; background: none; width: 535px; padding-left: 20px; }
#screen-sendfriend .formrow input.left{ width: 290px; left: 0; }
#screen-sendfriend .formrow input.right{ width: 457px; left: 340px; }

#screen-sendfriend .formrow.active{ background-position: 0 0; }

#screen-sendfriend #you{ top: 180px; }
#screen-sendfriend #friend-1{ top: 302px; }
#screen-sendfriend #friend-2{ top: 383px; }
#screen-sendfriend #friend-3{ top: 462px; }

#screen-sendfriend .button.friendback{ margin-left: 230px; }

/* __endgame
---------------------------------------*/

#screen-endgame{ background: url( ../media/ui/bg-endscreen-2.png ); }
#screen-endgame.win{ background: url( ../media/ui/bg-endscreen-1.png ); }
#endgame-buttons{ width: 260px; position: absolute; top: 261px; right: 40px; }
#endgame-buttons li{ padding-top: 3px; }
#endgame-buttons a{ position: relative;  }

#screen-endgame #voucher{ position: absolute; left: 170px; bottom: 122px; }

/* __terms
---------------------------------------*/

#screen-terms{ background: url( ../media/ui/terms-bg.png ); }
#screen-terms ol{ width: 700px; list-style-type: decimal; }
#terms{ width: 700px; margin-left: 90px; font-size: 14px; line-height: 135%; padding-top: 10px; }

/* __buttons
---------------------------------------*/

.button{ display: block; width: 259px; height: 57px; text-indent: -9999px; }

.button.play { width: 548px; height: 118px; background: url( ../media/ui/btn-play.png ) no-repeat; }
.button.play:hover{ background-position: 0 -118px; }

.button.leaderboard { background: url( ../media/ui/btn-leaderboard.png ) no-repeat; }
.button.leaderboard:hover{ background-position: 0 -57px; }

#endgame-buttons .button{ width: 222px; height: 62px; }

.button.leaderboard.end { background: url( ../media/ui/btn-leaderboard-2.png ) no-repeat; }
.button.leaderboard.end:hover{ background-position: 0 -62px; }

.button.instruct { background: url( ../media/ui/btn-instructions.png ) no-repeat; }
.button.instruct:hover{ background-position: 0 -57px; }

.button.play-small{ background: url( ../media/ui/btn-play-small.png ) no-repeat; }
.button.back{ background: url( ../media/ui/btn-back.png ) no-repeat; }

.button.submitscore{ background: url( ../media/ui/btn-submitscore.png ) no-repeat; }

.button.play-again{ background: url( ../media/ui/btn-playagain.png ) no-repeat; }
.button.send-friend{ background: url( ../media/ui/btn-sendfriend.png ) no-repeat; }
.button.tell-more{ background: url( ../media/ui/btn-tellmore.png ) no-repeat; }
.button.play-again:hover, .button.send-friend:hover, .button.tell-more:hover{ background-position: 0 -62px; }

.button.friendsubmit{ width: 209px; height: 85px; background: url( ../media/ui/btn-sendfriend-send.png ) no-repeat; }
.button.friendback{ width: 209px; height: 85px; background: url( ../media/ui/btn-sendfriend-back.png ) no-repeat; }
.button.friendsubmit:hover, .button.friendback:hover{ background-position: 0 -85px; }

#voucher.button{ width: 367px; height: 84px; background: url( ../media/ui/btn-voucher.png ) no-repeat;  }
#voucher.button:hover{ background-position: 0 -84px; }

.screen-footer .button{ width: 304px; height: 85px; }
.screen-footer { position: absolute; bottom: 10px; left: 0; width: 100%; height: 85px; }
.screen-footer a{ position: absolute; top: 0; }
.screen-footer a.left{ left: 50px; }
.screen-footer a.right{ right: 45px; }
.screen-footer a:hover{ background-position: 0 -85px; }