#tetris { position: relative; }

/* Firebug + IE */
.firebugPresence, .iePresence {
	position: absolute; top: 10px; right: 15px; padding: 6px;
	background-color: #d55; color: white; font-weight: bold;
	-moz-border-radius: 8px; border-radius: 8px; text-align: center;
}
.iePresence a.download { display: inline-block; color: white; padding-bottom: 15px; }
.iePresence a.hide { color: #ddd; font-size: 10px; }
.firebugPresence a { font-size: 10px; color: white; display: inline-block; padding-top: 6px; }

.screen {
	position: relative; width: 640px; height: 576px; clear: both;
	background: transparent none left top no-repeat;
}

.screen .selector, .screen .types, .screen .musics, .screen .selectLevel,
.screen .gameZone, .screen .options, .screen .next, .screen .names,
.screen .scores, .screen .calc, .screen .selectHigh, .screen .word,
.screen .character, .screen .marioZone, .screen .luigiZone, .screen .win,
.screen .connection, .screen form, .screen .heightBar,
.screen .opponentHigh, .screen .marioPause, .chat, .screen .waiting {
	display: none;
}

/* .gameMenu */
.gameMenu {
	float: left; display: inline;
	background: transparent url(../images/bg_menu.png) center top repeat-x;
}

.gameMenu li {
	float: left; display: inline; position: relative;
}

.gameMenu li a {
	display: block; width: 160px; text-decoration: none;
	line-height: 29px; color: white; text-align: center;
	text-transform: uppercase; font-weight: bold;
	background: transparent none center top repeat-x;
}

.gameMenu li.keyItem a:hover { background-image: url(../images/bg_menu_keys_hover.png); }
.gameMenu li.optionItem a:hover { background-image: url(../images/bg_menu_options_hover.png); }
.gameMenu li.soundItem a:hover { background-image: url(../images/bg_menu_sound_hover.png); }
.gameMenu li.chatItem a:hover, .gameMenu li.chatItem.highlight {
	background-image: url(../images/bg_menu_chat_hover.png);
}

.gameMenu li.unavailable a, .gameMenu li.unavailable a:hover {
	background: transparent url(../images/forbidden.gif) 20px center no-repeat;
}

.gameMenu li.unavailable {
	background-image: url(../images/bg_menu_dark.png);
}

/* Keys */
.gameMenu .keySelect {
	position: absolute; width: 638px; top: 29px; left:  0;
	height: 100px; border: 1px solid gray; border-top: none;
	background-color: #ebe9ed; z-index: 1000; text-align: center;
}

.gameMenu .keyClose {
	position: absolute; top: 0; right: 0; cursor: pointer;
}

.gameMenu .keySelect .line { clear: both; padding-left: 20px; }

.gameMenu .keySelect label {
	float: left; display: inline; width: 40px;
	padding: 20px 15px 0 20px; text-align: right;
}

.gameMenu .keySelect input {
	float: left; display: inline;
	width: 65px; margin: 18px 0 2px 0;
	text-transform: uppercase; font-size: 10px;
}


/* Options */
.gameMenu .optionSelect {
	position: absolute; width: 638px; top: 29px; left:  -160px;
	height: 100px; border: 1px solid gray; border-top: none;
	background-color: #ebe9ed; z-index: 1000;
}

.gameMenu .optionClose {
	position: absolute; top: 0; right: 0; cursor: pointer;
}

.gameMenu .optionSelect p {
	padding: 20px 0 0 20px; height: 20px;
}

.gameMenu .optionSelect label { padding-left: 10px; }

.gameMenu .optionSelect label:hover { color: gray; cursor: pointer; }

/* Volume */
.gameMenu .volume {
	position: absolute; width: 80px; top: 29px; left: 40px;
	height: 122px; border: 1px solid gray; border-top: none;
	background-color: #ebe9ed; z-index: 1000;
}

.gameMenu .volumeSlider {
	width: 22px; height: 72px; margin: 20px 29px;
	background: transparent url(../images/slideBar.png) center top no-repeat;
}

.gameMenu .volumeTrack {
	width: 22px; height: 11px;
	background: transparent url(../images/slideTrack.png) center no-repeat;
}


/* Chat */
.chat.show { display: block; }

.chat {
	position: absolute; top: 29px; right: -250px; padding: 3px;
	background-color: white; border: 1px solid gray; width: 242px;
}

.chat .warningChat {
	width: 221px; height: 33px;	color: gray;
	padding: 10px; text-align: center;
}

.chat .chatClose { position: absolute; top: 0; right: 0; cursor: pointer; }

.chat .conversation, .chat input { float: left; }
.chat .conversation {
	width: 235px; height: 485px; /*border: 1px solid #5f5f7f;*/
	overflow: auto; overflow-x: hidden; overflow-y: scroll;
	padding: 3px;
}
.chat .conversation .me { color: #5f5f7f; clear: both; }
.chat .conversation .opponent { color: #c25f7f; clear: both; }
.chat .me img, .chat .opponent img { float: left; display: inline; padding: 3px 3px 3px 0; }
.chat input.text { width: 168px; height: 20px; border: 2px solid #5f5f7f; }
.chat input.send { width: 70px; }

/* Connection */
.screen.connection .connection { display: block; }

.screen .connection {
	background-color: white; padding: 0 24px 24px 24px;
	width: 592px; height: 552px;
	font: normal 16px Arial, Verdana, Helvetica, sans-serif;
}

.screen .connection h2 {
	padding: 8px 0 4px; text-decoration: underline;
	color: #5f5f7f; font-size: 18px; font-weight: bold;
}

.screen .connection .serverForm { border-bottom: 2px solid #5f5f7f; }

.screen .connection .iesucks { float: left; display: inline; width: 506px; }

.screen .connection .iesucks p { line-height: 25px; }

.screen .connection .serverListForm .iesucks p { padding: 2px 0 0; }

.screen .connection img.character { float: left; margin-right: 16px; display: inline; }

.screen .connection .iesucks, .screen .connection img.character {
	padding-top: 24px;
}

.screen.connection .connection form { float: left; display: inline; }

.screen .connection .serverList {
	clear: both; width: 564px;
	border: 2px solid #5f5f7f; padding: 10px; overflow: auto;
	overflow-x: hidden; overflow-y: scroll; height: 320px;
}
.screen .connection li { cursor: pointer; }
.screen .connection li * { cursor: pointer; }

.screen .connection li:hover { background-color: #cedbf0; }

.screen .connection li input { margin: 5px 0; }

.screen .connection li label {
	display: inline-block; padding: 5px 0 5px 10px; width: 91%;
}

.screen .connection .connect { text-align: center; }

.screen .refresh, .screen .spinner { float: right; display: inline; }

.screen .spinner { vertical-align: top; padding: 4px 4px 0; }

.screen .connection label { padding-right: 5px; }

/* Waiting */
.screen.waiting .waiting { display: block; }

.screen.waiting .waiting {
	position: absolute; top: 0; left: 0; width: 640px; height: 576px;
	background: white url(../images/spinner_large.gif) center center no-repeat;
	filter: alpha(opacity = 75); -moz-opacity: 0.75; opacity: 0.75;
}

/* Mode */
.screen.mode .word, .screen.mode .types, .screen.mode .musics { display: block; }


.screen.mode { background-image: url(../images/mode.png); }

.screen.mode .types {
	position: absolute; top: 156px; left: 80px;
	float: left; padding: 8px 0;
}
.screen.mode .musics {
	position: absolute; top: 380px; left: 80px;
	float: left; padding: 8px 0; width: 512px;
}

.screen.mode .word {
	float: left; width: 244px; padding-left: 12px;
	margin-bottom: 40px;
}

.screen.mode .word div {
	background-image: url(../images/highlight_chars.png)
}

.screen.mode .word.highlight div {
	background-image: url(../images/chars.png);
}

/* 2 Players High selection */
.screen.playersHigh .selectHigh, .screen.playersHigh .selectHigh .word,
.screen.playersHigh .opponentHigh, .screen.playersHigh .opponentHigh .word {
	display: block;
}

.screen.playersHigh { background-image: url(../images/mario_vs_luigi.png); }

.screen.playersHigh .selectHigh,
.screen.playersHigh .opponentHigh { left: 336px; }

.screen.playersHigh.luigi .selectHigh,
.screen.playersHigh .opponentHigh { top: 408px; }

.screen.playersHigh.luigi .opponentHigh { top: 184px; }

/* Types */
.screen.type .names, .screen.type .scores, .screen.type .selectLevel,
.screen.type .word, .screen.bType .selectHigh {
	display: block;
}

.screen.bType { background-image: url(../images/b_type.png); }

.screen.aType { background-image: url(../images/a_type.png); }
 
.screen.type .selectLevel {
	position: absolute; top: 184px; left: 144px; width: 320px;
}
.screen.bType .selectLevel { left: 48px; }


.screen .selectHigh, .screen .opponentHigh {
	position: absolute; top: 184px; left: 400px; width: 192px;
}

.screen .selectLevel .word, .screen .selectHigh .word,
.screen .opponentHigh .word {
	float: left; padding: 8px 20px 8px 8px; margin: 4px 0 20px 4px;
}

.screen .selectLevel .word.highlight div,
.screen .selectHigh .word.highlight div {
	background-image: url(../images/chars.png)
}
.screen .selectLevel .word div, .screen .selectHigh .word div {
	background-image: url(../images/highlight_chars.png)
}

.screen .opponentHigh.high1, .screen .opponentHigh.high4 { left: 400px; }
.screen .opponentHigh.high2, .screen .opponentHigh.high5 { left: 464px; }
.screen.luigi .opponentHigh.high3, .screen.luigi .opponentHigh.high4,
.screen.luigi .opponentHigh.high5 { top: 248px; }
.screen .opponentHigh.high3, .screen .opponentHigh.high4,
.screen .opponentHigh.high5 { top: 472px; }

/* Enter name */
.screen .names { position: absolute; top: 420px; left: 124px; width: 192px; }
.screen .names2 { top: 452px; }
.screen .names3 { top: 484px; }

.screen .names .word { float: left; background-color: white; }
.screen .names .word.hidden div { visibility: hidden; }

.screen .scores { position: absolute; top: 420px; right: 68px; }
.screen .scores2 { top: 452px; }
.screen .scores3 { top: 484px; }

.screen .scores .word { float: left; background-color: white; }

/* Player selection */
.screen.players .selector { display: block; }

.screen.players { background-image: url(../images/players.png); }

.screen.players .selector {
	position: absolute; top: 452px; left: 36px; width: 16px; height: 24px;
	background: transparent url(../images/selector.png) left top no-repeat;
}

.screen.players.second .selector { left: 356px; }

/* Game */
.screen.game .gameZone, .screen.a_game .score, .screen.game .level,
.screen.game .lines, .screen.b_game .high, .screen.game .options .word,
.screen.game .next, .screen.mario_game .high,
.screen.mario_game.pause .marioPause, .screen.mario_game .character,
.screen.mario_game .heightBar {
	display: block;
}

.screen.a_game { background: url(../images/a_game.png); }
.screen.a_game .score { right: 22px; top: 99px; }
.screen.a_game .level { right: 68px; top: 227px; }

.screen.b_game { background-image: url(../images/b_game.png); }
.screen.b_game .level { right: 100px; top: 68px; }
.screen.b_game .high { right: 100px; top: 164px; }

.screen.mario_game { background-image: url(../images/mario_game.png); }
.screen.mario_game .high { right: 100px; top: 164px; }
.screen.mario_game .character {
	position: absolute; top: 32px; left: 496px; width: 64px; height: 64px;
	background: transparent url(../images/mario.png) left top no-repeat;
}
.screen.mario_game.luigi .character { background-image: url(../images/luigi.png); }

.screen.mario_game .heightBar {
	position: absolute; width: 12px;
	background-color: #5f5f7f; bottom: 4px; left: 40px;
}

.screen.mario_game .marioPause {
	position: absolute; left: 448px; top: 224px; width: 160px; height: 32px;
	background: transparent url(../images/mario_pause.png) left top no-repeat;
}

.screen.game .lines { right: 68px; top: 322px; }

.screen.game .gameZone { width: 320px; margin-left: 64px; }

.screen .gameZone div, .screen .next div { float: left; height: 32px; width: 32px; }

.screen.a_game.pause .gameZone, .screen.b_game.pause .gameZone {
	float: left;
	background: transparent url(../images/pause.png) left top no-repeat;
}

.screen.a_game.pause .gameZone div, .screen.b_game.pause .gameZone div {
	visibility: hidden;
}

.screen.over .gameZone {
	float: left;
	background: transparent url(../images/game_over.png) left top no-repeat;
}

/* Winner Screen */
.screen.winnerZone .marioZone, .screen.winnerZone .luigiZone,
.screen.winnerZone .win {
	display: block;
}

.screen.winnerZone { background-position: 0 128px; background-color: black; }

.screen.winnerZone.mario.wins { background-image: url(../anims/mario_wins.gif); }
.screen.winnerZone.mario.lose { background-image: url(../anims/mario_lose.gif); }
.screen.winnerZone.luigi.wins { background-image: url(../anims/luigi_wins.gif); }
.screen.winnerZone.luigi.lose { background-image: url(../anims/luigi_lose.gif); }

.screen.winnerZone.end.mario.wins { background-image: url(../anims/end_mario_wins.gif); }
.screen.winnerZone.end.mario.lose { background-image: url(../anims/end_mario_lose.gif); }
.screen.winnerZone.end.luigi.wins { background-image: url(../anims/end_luigi_wins.gif); }
.screen.winnerZone.end.luigi.lose { background-image: url(../anims/end_luigi_lose.gif); }

.screen.winnerZone .marioZone, .screen.winnerZone .luigiZone {
	position: absolute; width: 640px; height: 128px; left: 0; top: 0;
}
.screen.winnerZone.mario .marioZone,
.screen.winnerZone.luigi .luigiZone { top: 448px; }

.screen.winnerZone .win {
	position: absolute; width: 352px; height: 64px; top: 32px; left: 224px;
	background: transparent none left top no-repeat;
}

.screen.winnerZone .marioZone .win { background-image: url(../images/mario_score.png); }
.screen.winnerZone .luigiZone .win { background-image: url(../images/luigi_score.png); }

.screen.winnerZone.mario0 .marioZone .win,
.screen.winnerZone.luigi0 .luigiZone .win { background-position: -352px 0; }
.screen.winnerZone.mario1 .marioZone .win,
.screen.winnerZone.luigi1 .luigiZone .win { background-position: -288px 0; }
.screen.winnerZone.mario2 .marioZone .win,
.screen.winnerZone.luigi2 .luigiZone .win { background-position: -192px 0; }
.screen.winnerZone.mario3 .marioZone .win,
.screen.winnerZone.luigi3 .luigiZone .win { background-position: -96px 0; }

.screen.winnerZone .marioZone {
	background: transparent url(../images/mario_zone.png) left top no-repeat;
}
.screen.winnerZone .luigiZone {
	background: transparent url(../images/luigi_zone.png) left top no-repeat;
}

/* ../anims */
.screen.anim .gameZone {
	float: left; background: transparent none left top no-repeat;
}

.screen.anim_0 .gameZone { background-image: url(../anims/anim_0.gif); }
.screen.anim_1 .gameZone { background-image: url(../anims/anim_1.gif); }
.screen.anim_2 .gameZone { background-image: url(../anims/anim_2.gif); }
.screen.anim_3 .gameZone { background-image: url(../anims/anim_3.gif); }
.screen.anim_4 .gameZone { background-image: url(../anims/anim_4.gif); }
.screen.anim_5 .gameZone { background-image: url(../anims/anim_5.gif); }
.screen.anim_5 .next {
	background: transparent url(../anims/anim_5_next.gif) left top no-repeat;
}

.screen.anim .gameZone div, .screen.anim .next div { visibility: hidden; }

.screen.mini_rocket { background-image: url(../anims/mini_rocket.gif); }
.screen.small_rocket { background-image: url(../anims/small_rocket.gif); }
.screen.rocket { background-image: url(../anims/rocket.gif); }
.screen.big_rocket { background-image: url(../anims/big_rocket.gif); }

/* Count */
.screen.count .calc, .screen.count .calc .word { display: block; }

.screen.count .gameZone {
	float: left;
	background: transparent url(../images/count.png) left top no-repeat;
}

.screen.count .gameZone div, .screen.count .next { visibility: hidden; }

.screen.count .calc { position: absolute; }
.screen.count .num1 { right: 516px; top: 36px; }
.screen.count .num2 { right: 516px; top: 132px; }
.screen.count .num3 { right: 516px; top: 228px; }
.screen.count .num4 { right: 516px; top: 324px; }
.screen.count .points1 { right: 292px; top: 68px; }
.screen.count .points2 { right: 292px; top: 164px; }
.screen.count .points3 { right: 292px; top: 260px; }
.screen.count .points4 { right: 292px; top: 356px; }
.screen.count .ratio1 { left: 220px; top: 36px; }
.screen.count .ratio2 { left: 220px; top: 132px; }
.screen.count .ratio3 { left: 220px; top: 228px; }
.screen.count .ratio4 { left: 220px; top: 324px; }
.screen.count .drops { right: 292px; top: 420px; }
.screen.count .stage { right: 292px; top: 548px; }

/* Parts */
.p0, .p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8, .p9 {
	background: gray url(../images/part.png) left top repeat;
}
.p0 { background-position: -384px 0px; }

.p0.h, .p1.h, .p2.h, .p3.h, .p4.h, .p5.h, .p6.h, .p7.h, .p8.h, .p9.h {
	background: #a7a7a7 none;
}

.next, .score, .level, .lines, .high { position: absolute; }
.next { right: 32px; top: 415px; width: 128px; height: 128px; }

.word { display: block; }

.word div {
	float: left; width: 24px; height: 24px; margin-left: 8px;
	background: transparent url(../images/chars.png) left center no-repeat;
}

.heightBar { height: 0; }
.heightBar.height1  { height: 28px; }
.heightBar.height2  { height: 60px; }
.heightBar.height3  { height: 92px; }
.heightBar.height4  { height: 124px; }
.heightBar.height5  { height: 156px; }
.heightBar.height6  { height: 188px; }
.heightBar.height7  { height: 220px; }
.heightBar.height8  { height: 252px; }
.heightBar.height9  { height: 284px; }
.heightBar.height10 { height: 316px; }
.heightBar.height11 { height: 348px; }
.heightBar.height12 { height: 380px; }
.heightBar.height13 { height: 412px; }
.heightBar.height14 { height: 444px; }
.heightBar.height15 { height: 476px; }
.heightBar.height16 { height: 508px; }
.heightBar.height17 { height: 540px; }
.heightBar.height18, .heightBar.height19 { height: 568px; }

.p1 { background-position: -0px 0px; }
.p1.n2, .p1.n3 { background-position: -32px 0px; }
.p1.n4 { background-position: -64px 0px; }
.p1.r1 { background-position: -96px 0px; }
.p1.r1.n2, .p1.r1.n3 { background-position: -128px 0px; }
.p1.r1.n4 { background-position: -160px 0px; }

.p2 { background-position: -192px 0px; }
.p3 { background-position: -224px 0px; }
.p4 { background-position: -256px 0px; }
.p5 { background-position: -288px 0px; }
.p6 { background-position: -320px 0px; }
.p7 { background-position: -352px 0px; }


.word .char_1 { background-position: -24px 0px; }
.word .char_2 { background-position: -48px 0px; }
.word .char_3 { background-position: -72px 0px; }
.word .char_4 { background-position: -96px 0px; }
.word .char_5 { background-position: -120px 0px; }
.word .char_6 { background-position: -144px 0px; }
.word .char_7 { background-position: -168px 0px; }
.word .char_8 { background-position: -192px 0px; }
.word .char_9 { background-position: -216px 0px; }

.word .char_a { background-position: -240px 0px; }
.word .char_b { background-position: -264px 0px; }
.word .char_c { background-position: -288px 0px; }
.word .char_d { background-position: -312px 0px; }
.word .char_e { background-position: -336px 0px; }
.word .char_f { background-position: -360px 0px; }
.word .char_g { background-position: -384px 0px; }
.word .char_h { background-position: -408px 0px; }
.word .char_i { background-position: -432px 0px; }
.word .char_j { background-position: -456px 0px; }
.word .char_k { background-position: -480px 0px; }
.word .char_l { background-position: -504px 0px; }
.word .char_m { background-position: -528px 0px; }
.word .char_n { background-position: -552px 0px; }
.word .char_o { background-position: -576px 0px; }
.word .char_p { background-position: -600px 0px; }
.word .char_q { background-position: -624px 0px; }
.word .char_r { background-position: -648px 0px; }
.word .char_s { background-position: -672px 0px; }
.word .char_t { background-position: -696px 0px; }
.word .char_u { background-position: -720px 0px; }
.word .char_v { background-position: -744px 0px; }
.word .char_w { background-position: -768px 0px; }
.word .char_x { background-position: -792px 0px; }
.word .char_y { background-position: -816px 0px; }
.word .char_z { background-position: -840px 0px; }

/* '*', '-', '.', ' ' */
.word .char_ { background-position: -864px 0px; } 
.word .char__ { background-position: -888px 0px; }
.word .char___ { background-position: -912px 0px; }
.word .char____ { background-position: -936px 0px; }