/*
** mBlocks
** 2009/01/24
*/

/* override tabs styling */
ul.tabs a { background-color: #FFF !important; background-image: url("../../images/mblocks/tab.png") !important; color: #000 !important; }
ul.tabs span { background-image: url("../../images/mblocks/tab.png") !important; }
ul.tabs a.selected,
ul.tabs a:hover { background-color: #000 !important; color: #FFF !important; }

.content { padding-bottom: 0; }
.content h1 { color: #FFF; }


/*
** form buttons
*/
div.text { position: relative; top: 1px; overflow: hidden; clear: both; width: 560px; margin: 0 -1px; padding: 0 280px 40px 70px; border: 20px solid #000; background: #16476e url("../../images/mblocks/scores_background.png") repeat-x 0 0; color: #fff; line-height: 1.3; }
div.text h1 { overflow: hidden; height: 75px; margin: 0 -280px 20px -70px; padding: 0; border-bottom: 1px solid #1c4465; background: transparent url("../../images/mblocks/titles_en.png") no-repeat 20px 0; text-indent: -99em; }
div.text h1.comments { background-position: 20px -75px; }
div.text h1.about { background-position: 20px -150px; }
div.text h2 { padding: 1em 0 1.5ex; color: #f47f20; font-size: 1.5em; }
div.text .logo { position: static; margin: 0 0 3ex; padding: 10px 0 0; }
div.text a { background: transparent; color: #9fe5f9; }
div.text a:hover { color: #9fe5f9; text-decoration: underline; }
div.text a span,
div.text a em { color: #fff; }

.side-column { float: right; width: 185px; margin: 0 -250px 0 0; font-size: .917em; line-height: 1.25; }
.side-column .item { padding: 3ex 0 0; border-top: 1px dashed #254563; }
.side-column img.screenshot { width: 100%; padding: 0 0 5px; }

div.play { position: relative; top: 1px; clear: both; width: 910px; margin: 0 -1px; padding: 20px; background: #000; }
.play a { color: #FFF; }
.play a:hover { color: #FFF; }

.mblocks-no-js { position: relative; height: 284px; padding: 320px 250px 0; background: #2f4f6d url("../../images/mblocks/no_javascript.png") no-repeat 0 0; color: #aab7c3; font-size: 11px; line-height: 1.6; text-align: center; }
.mblocks-no-js a { background: transparent; color: #9fe5f9; }
.mblocks-no-js a:hover { text-decoration: underline; }
.js .mblocks-no-js { display: none; }

.mblocks { position: relative; display: none; padding: 540px 0 0; background: #789dba url("../../images/mblocks/game_background.jpg") no-repeat 0 0; color: #FFF; }
.js .mblocks { display: block; }

.mblocks div.logo { position: absolute; right: 63px; top: 30px; overflow: hidden; width: 189px; height: 179px; text-align: center; }
.controls { position: absolute; right: 19px; top: 317px; overflow: hidden; width: 277px; height: 154px; }

.game { position: absolute; left: 206px; top: 29px; overflow: hidden; width: 240px; height: 480px; background: #0B2D4D url("../../images/mblocks/game_background.jpg") no-repeat -206px -29px; }
.game-status { position: absolute; left: 451px; top: 29px; width: 113px; height: 456px; padding: 12px; background: #11213A url("../../images/mblocks/game_background.jpg") no-repeat -451px -29px; }
.game-status p { position: relative; overflow: hidden; padding: 11px 0; background: transparent url("../../images/mblocks/status_separator.png") repeat-x 0 0; }
.game-status p.next-block-label,
.game-status p.lines-2x,
.game-status p.lines-3x,
.game-status p.lines-4x { padding: 0; background: transparent; line-height: 1.75; }
.game-status p.lines-1x { padding-bottom: 0; line-height: 1.75; }
.game-status p.next-block-label { line-height: 1; }
.game-status strong { position: relative; overflow: hidden; display: block; height: 14px; color: #FFDA1E; }
.game-status p.lines-1x strong,
.game-status p.lines-2x strong,
.game-status p.lines-3x strong,
.game-status p.lines-4x strong { display: inline; height: auto; color: #FFF; }

.game-status span { display: block; width: 100%; margin: 0 0 6px; font-size: 1.083em; font-weight: 700; }
.game-status span strong span { display: inline; height: 14px; margin: 0; }
.game-status span span { display: inline; margin: 0; }
.game-status span canvas { margin-right: -8px; }

form.save-score h3 strong span,
.game-status strong span { position: relative; overflow: hidden; float: left; height: 14px; margin: 0 1px 0 0; font-size: 15px !important; line-height: 14px !important; text-align: center; }
form.save-score h3 strong span img,
.game-status strong span img { position: relative; }

span.l-0 { width: 11px !important; }
span.l-1 { width: 9px !important; }
span.l-2 { width: 9px !important; }
span.l-3 { width: 10px !important; }
span.l-4 { width: 10px !important; }
span.l-5 { width: 9px !important; }
span.l-6 { width: 11px !important; }
span.l-7 { width: 10px !important; }
span.l-8 { width: 11px !important; }
span.l-9 { width: 10px !important; }
span.l-space { width: 5px !important; }
span.l-colon { width: 4px !important; }
span.l-0 img { left: 0 !important; }
span.l-1 img { left: -16px !important; }
span.l-2 img { left: -30px !important; }
span.l-3 img { left: -44px !important; }
span.l-4 img { left: -59px !important; }
span.l-5 img { left: -74px !important; }
span.l-6 img { left: -88px !important; }
span.l-7 img { left: -103px !important; }
span.l-8 img { left: -117px !important; }
span.l-9 img { left: -132px !important; }
span.l-colon img { left: -147px !important; }
span.l-space img { display: none !important; }

.message { position: absolute; left: 254px; top: 220px; z-index: 10; overflow: hidden; width: 145px; height: 25px; background: transparent url("../../images/mblocks/message_background.png") repeat 0 0; font-size: 1.167em; font-weight: 700; text-align: center; }
.message p { position: relative; overflow: hidden; display: none !important; height: 19px; margin: 0 auto; padding: 3px 0 0; }
.message p img { position: relative; }
.message p.game-over { width: 88px; }
.message p.game-paused { width: 107px; }
.message p.game-paused img { left: -97px; }
.message p.times-up { width: 78px; }
.message p.times-up img { left: -212px; }
.message-game-over .game-over,
.message-game-paused .game-paused,
.message-times-up .times-up { display: block !important; }

div.ghost,
div.meteor,
div.current-block { position: relative; z-index: 3; float: left; }
div.ghost { z-index: 2; opacity: .15; }
div.meteor { z-index: 1; margin: 0 -24px -24px 0; opacity: .5; }
div.next-block { width: 96px; height: 96px; padding: 0 0 5px; }

div.row { overflow: hidden; }

.brick { position: relative; z-index: 2; float: left; width: 24px; height: 24px; background: transparent url("../../images/mblocks/bricks.png") no-repeat 0 24px; }
.brick-1 { background-color: #FF7F36; background-position: 0 0; }
.brick-2 { background-color: #FFCE1E; background-position: 0 -24px; }
.brick-3 { background-color: #8AD319; background-position: 0 -48px; }
.brick-4 { background-color: #E52909; background-position: 0 -72px; }
.brick-5 { background-color: #E014FF; background-position: 0 -96px; }
.brick-6 { background-color: #00C2FB; background-position: 0 -120px; }
.brick-7 { background-color: #939393; background-position: 0 -144px; }


/*
** game main menu
*/
.play ul.menu { position: absolute; left: 15px; top: 361px; overflow: hidden; list-style: none; width: 170px; margin: 0; padding: 33px 0 0; background: transparent url("../../images/mblocks/menu_title.png") no-repeat 0 0; }
.play ul.menu li { float: left; padding: 0 0 10px; }
.play ul.menu a { overflow: hidden; float: left; width: 170px; height: 33px; background: transparent url("../../images/mblocks/buttons.png") no-repeat 0 0; text-indent: -99em; }
.play ul.menu a.standard:hover { background-position: -171px 0; }
.play ul.menu a.timed { background-position: 0 -34px; }
.play ul.menu a.timed:hover { background-position: -171px -34px; }
.play ul.menu a.meteor { background-position: 0 -68px; }
.play ul.menu a.meteor:hover { background-position: -171px -68px; }

.play ul.options { position: absolute; right: 20px; top: 480px; overflow: hidden; list-style: none; width: 276px; margin: 0; padding: 0; }
.play ul.options li { float: left; }
.play ul.options a { overflow: hidden; float: left; height: 26px; background: transparent url("../../images/mblocks/buttons.png") no-repeat 0 0; text-indent: -99em; }
.play ul.options a.preferences { width: 143px; background-position: 0 -102px; }
.play ul.options a.preferences:hover { background-position: -171px -102px; }
.play ul.options a.pause { width: 92px; background-position: 0 -129px; }
.play ul.options a.pause:hover { background-position: -171px -129px; }


/*
** score tables
*/
.scores { overflow: hidden; padding: 0 15px 0; background: #16476e url("../../images/mblocks/scores_background.png") repeat-x 0 0; color: #769bb8; font-family: "Verdana", "Geneva", sans-serif; font-size: .75em; }

.scores h1 { overflow: hidden; height: 75px; margin: 0 -20px; padding: 0; border-bottom: 1px solid #1c4465; background: transparent url("../../images/mblocks/titles_en.png") no-repeat 20px 0; text-indent: -99em; }

.scores ul.tables { overflow: hidden; list-style: none; margin: 0; padding: 0 0 3ex; line-height: 24px; }
.scores ul.tables li { float: left; padding: 0 1px 0 0; }
.scores ul.tables li.old { padding-left: 5px; }
.scores ul.tables a { float: left; padding: 0 1em; background: transparent url("../../images/mblocks/button_a.png") repeat 0 0; color: #9faab4; font-weight: 700; }
.scores ul.tables a.selected,
.scores ul.tables a:hover { background: #03172b; color: #fff; }

.js .scores #scores-timed-old,
.js .scores #scores-standard-old,
.js .scores #scores-standard,
.js .scores #scores-timed,
.js .scores #scores-meteor,
.js .scores #scores-recent { overflow: hidden; display: none; }
.js .scores #scores-recent { display: block; padding-bottom: 54px; }
.js .scores-full #scores-standard { display: block; }

.scores table { width: 273px; border-collapse: collapse; line-height: 13px; text-align: center; }
.scores table.middle { float: left; margin-left: 30px; }
.scores th { padding: 1ex; border-bottom: 2px solid #163553; color: #f47f20 !important; font-weight: 700 !important; }
.scores td { padding: 1ex; border-bottom: 1px solid #214F73; }
.scores .name { font-weight: 400; text-align: left; }
.scores .name span { display: inline-block; width: 100px; word-wrap: break-word; }
.scores .score { color: #fff; font-weight: 700; text-align: right; white-space: nowrap; }
.scores td.country { padding: 1ex .5ex; color: #fff; font-size: 8px; }
.scores td.country img { height: 11px; vertical-align: middle; }
.scores .demo { width: 12px; color: #15456b; }
.scores td.demo a { overflow: hidden; float: left; width: 12px; height: 13px; background: transparent url("../../images/mblocks/button_replay.png") no-repeat 0 0; color: #f47f20; font-weight: 700; text-indent: -99em; }
.scores td.demo a:hover { background-position: 0 100%; }

.scores-full { padding: 0 20px 20px; }
.scores-full table { width: 420px; }

.scores p.more { overflow: hidden; clear: both; padding: 15px 0; }
.scores p.more a { float: left; padding: 0 1em; background: transparent url("../../images/mblocks/button_a.png") repeat 0 0; color: #9faab4; font-weight: 700; line-height: 24px; }
.scores p.more a.selected,
.scores p.more a:hover { background: #03172b; color: #fff; }

.scores .pages { overflow: hidden; clear: both; padding: 30px 0 15px; line-height: 1.7; }
.scores .pages p { float: left; padding: 0 1em 0 0; }
.scores .pages ul { float: left; list-style: none; margin: 0; padding: 0; }
.scores .pages li { float: left; border-left: 1px solid #2d597c; }
.scores .pages li a { float: left; padding: 0 1em; background: transparent; color: #9faab4; font-weight: 700; }
.scores .pages li a.selected,
.scores .pages li a:hover { background: #03172b; color: #fff; }


/*
** demo playback controls
*/
div.demo { overflow: hidden; display: none; padding: 11px 15px 8px; border-top: 1px solid #8cacc4; background: transparent url("../../images/mblocks/demo_background.png") repeat-x 0 100%; color: #fff; font-family: "Verdana", "Geneva", sans-serif; font-size: .75em; }
div.demo h3 { overflow: hidden; float: left; width: 90px; height: 19px; margin: -2px 0 9px; padding: 0 0 0 24px; background: transparent url("../../images/mblocks/demo_icon.png") no-repeat 0 50%; font-size: 1.333em; font-weight: 700; line-height: 19px; }
div.demo ul.info { float: left; list-style: none; margin: 0; padding: 0 0 0 10px; line-height: 14px; }
div.demo ul.info li { float: left; padding: 0 10px; border-left: 1px solid #93b1c8; }
div.demo ul.info li.country img { height: 11px; padding: 0 2px; vertical-align: -2px; }
div.demo .speed { float: right; }
div.demo .speed p { float: left; padding: 0 6px 0 0; font-weight: 700; }
div.demo .speed ul { float: left; list-style: none; margin: 0; padding: 0; }
div.demo .speed li { float: left; padding: 0 0 0 2px; }
div.demo .speed a { float: left; width: 15px; height: 12px; padding-bottom: 1px; background: #0c3052 url("../../images/mblocks/demo_button_speed.png") no-repeat 0 0; color: #769bb8; line-height: 12px; text-align: center; }
div.demo .speed a.selected,
div.demo .speed a:hover { background-color: #ededed; background-position: 0 100%; color: #888; }
div.demo p.progress { overflow: hidden; clear: both; width: 873px; margin: 0 auto; padding: 0; background: transparent url("../../images/mblocks/demo_progress.png") no-repeat 0 0; }
div.demo p.progress a { position: relative; left: 0; float: left; width: 40px; padding: 8px 0 0 3px; background: transparent url("../../images/mblocks/demo_progress.png") no-repeat 100% 0; color: #041d35; font-weight: 700; text-align: center; }

p.demo-indicator { position: absolute; left: 10px; top: 10px; z-index: 10; overflow: hidden; display: none; width: 25px; height: 25px; padding: 0; }
p.demo-indicator span { display: inline-block; width: 24px; background: #141921; color: #fff; font-size: 14px; font-weight: 700; line-height: 25px; text-align: center; }


/*
** game mini stats
*/
.stats { overflow: hidden; margin-bottom: -20px; padding: 8px 0 8px 46px; background: transparent url("../../images/mblocks/stats_background.png") no-repeat 18px 50%; color: #888; font-family: "Verdana", "Geneva", sans-serif; font-size: .75em; line-height: 16px; }
.stats h6 { float: left; color: #fff; }
.stats dl { overflow: hidden; float: left; padding: 0; }
.stats dt { display: inline; margin-left: -1px; padding: 0 1px 0 8px; border-left: 1px solid #333; }
.stats dd { display: inline; margin: 0; padding: 0 8px 0 0; font-weight: 700; }
.stats dd span { font-weight: 400; }


/*
** write a comment form
*/
form.comment { position: relative; top: -21px; overflow: hidden; display: none; width: 765px; padding: 20px 0 10px; line-height: 16px; }
form.comment div.left { width: 225px; }
form.comment div.left input { width: 220px; }
form.comment div.right { width: 525px; }
form.comment div.right textarea { width: 520px; height: 75px; }
form.comment input,
form.comment textarea { display: block; margin-top: 5px; }
form.comment label { font-weight: 400; }
form.comment label.error { padding: 0 0 0 20px; background: transparent url("../../images/mblocks/icon_exclamation.png") no-repeat 0 50%; color: #ff8080; }
form.comment label.error em strong { color: #ff8080; }
form.comment label em { color: #fff; font-style: italic; }
form.comment p { overflow: hidden; }

.js form.comment-empty-list,
.js form.comment-errors { display: block; }

p.toggle-comment-form { display: none; }

.js p.toggle-comment-form { float: right; display: block; margin: -60px -250px 0 0; padding: 0; font-size: .917em; line-height: 15px; }
.js p.toggle-comment-form a { float: right; padding: 0 1px 0 24px; background: transparent url("../../images/mblocks/button_b.png") no-repeat 0 50%; color: #fff; }

p.success { position: relative; top: -21px; margin: 0 -250px 0 -50px; padding: 20px 0 40px 50px; border-top: 1px solid #1c4263; }


/*
** comments list
*/
ul.comments { position: relative; top: -21px; list-style: none; margin: 0 -250px 0 -50px; padding: 0; line-height: 1.3; }
ul.comments li { padding: 10px 0 12px 120px; border-top: 1px solid #1c4263; }
ul.comments h3 { padding: 0 0 2px; color: #ffcc00; font-size: 1.167em; font-weight: 700; }
ul.comments p.gravatar { float: left; margin: 0 0 0 -70px; padding: 0; }
ul.comments p.gravatar img { width: 45px; }
ul.comments p.source { padding: 0 0 1em; color: #769bb8; font-family: "Verdana", "Geneva", sans-serif; font-size: .75em; font-style: normal; }
ul.comments p { padding: 0; font-style: italic; }


/*
** modal window
*/
.modal { position: absolute; left: 0; top: 0; z-index: 20; width: 100%; height: 540px; }
.modal .overlay { position: absolute; left: 0; top: 0; z-index: 21; width: 100%; height: 100%; background: #113555; opacity: .75; }
.modal .hidden { position: absolute; visibility: hidden; }
.modal .window { position: absolute; left: 50%; top: 50%; z-index: 22; width: 440px; height: 440px; margin: -220px 0 0 -240px; padding: 0 20px; border: 1px solid #000; background: transparent url("../../images/mblocks/modal_background.png") repeat 50% 50%; color: #fff; line-height: 1.5; }
.modal .window p.note { margin: 0; padding-bottom: 1em; border: none; background: transparent; color: #aab7c3; font-size: .917em; font-style: italic; }
.modal .window a { border-bottom: 1px dotted #9fe5f9; background: transparent; color: #9fe5f9; }
.modal .window a:hover { border-color: #fff; color: #fff; }
.modal .window h1 { height: 60px; margin-bottom: 45px; padding: 0 48px; border-bottom: 1px solid #304963; background: transparent url("../../images/mblocks/modal_title_background.png") no-repeat 0 50%; font-size: 2.333em; font-weight: 400; line-height: 60px; }
.modal .window h2 { margin: 0; padding: 0; color: #fff; font-size: 1.5em; font-weight: 700; }
.modal .window p.narrow { padding-left: 45px; padding-right: 45px; font-size: 1.083em; }
.modal .window p.loading { padding-top: 15px; background: transparent url("../../images/mblocks/loading.gif") no-repeat 50% 0; font-weight: 700; text-align: center; }
.modal .window p.loading-done { background-image: url("../../images/mblocks/loading_done.png"); }
.modal .window p.close { position: absolute; top: 20px; right: 20px; width: 23px; height: 23px; }
.modal .window p.close a { overflow: hidden; float: left; width: 23px; height: 23px; border: none; background: transparent url("../../images/mblocks/modal_close.png") no-repeat 0 0; text-indent: -99em; }
.modal .window p.buttons { position: absolute; bottom: 35px; left: 20px; width: 440px; padding: 0; text-align: center; }
.modal .window a.button { position: relative; z-index: 1; float: none; display: inline-block; padding: 0 0 0 12px; border: none; background: transparent url("../../images/mblocks/button_c.png") repeat-y 0 0; color: #fff; font-size: .833em; line-height: 26px; text-transform: uppercase; }
.modal .window a.button span { position: relative; left: 1px; float: none; display: inline-block; padding: 0 12px 0 0; background: transparent url("../../images/mblocks/button_c.png") repeat-y 100% 0; }
.modal .window a.button:active { left: 1px; top: 1px; }
.modal .window a.submit,
.modal .window a.submit span { background-image: url("../../images/mblocks/button_d.png"); }

/* submit score window */
.window-submit-form form { position: relative; z-index: 2; }
.modal .window-submit-form h2 { width: 230px; margin: 0 auto 1em; padding: 0 0 1ex; border-bottom: 1px solid #304963; }
.window-submit-form h2 strong { color: #ffda1e; }
.window-submit-form h2 strong span.cufon { position: relative; top: 1px; }
.window-submit-form p { width: 230px; margin: 0 auto; padding: 0 0 1ex; }
.window-submit-form label { font-weight: 400; }
.window-submit-form input { display: block; width: 220px; margin-top: .5ex; padding-left: 8px; }
.window-submit-form input.country { width: 198px; padding-left: 30px; background: #FFF none no-repeat 8px 50%; }
.window-submit-form ul.country { position: absolute; left: 105px; z-index: 2; overflow: auto; display: none; list-style: none; width: 228px; height: 200px; margin: 0; padding: 0; border: 1px solid #FFF; border-color: #CBCBCB #E1E1E1 #E1E1E1 #D6D6D6; background: #FFF; }
.window-submit-form ul.country a { display: block; padding: 3px 0 3px 8px; background: transparent; color: #555; }
.window-submit-form ul.country a.current,
.window-submit-form ul.country a:hover { background: #efefef; color: #000; }
.window-submit-form ul.country img { height: 11px; padding-right: 6px; vertical-align: middle; }

.window-submit-result p.submit-success em { color: #f47f20; font-size: 1.077em; font-style: normal; }

/* game settings window */
.window-preferences h1 { margin-bottom: 25px !important; }
.window-preferences input { vertical-align: -2px; }
.window-preferences label { font-weight: 400; }
.window-preferences label em { color: #fff; font-style: italic; }
.window-preferences ul { list-style: none; margin: 0 0 1em; padding: 0; border-bottom: 1px solid #304963; line-height: 1.1; }
.window-preferences li { overflow: hidden; border-top: 1px solid #304963; font-weight: 700; cursor: pointer; }
.window-preferences li.hover,
.window-preferences li:hover { background: #051121; }
.window-preferences li.selected { background: #000 !important; }
.window-preferences li.selected em { font-weight: 400; }
.window-preferences li strong { float: left; padding: 4px; }
.window-preferences li em { float: right; width: 150px; padding: 4px 0; font-weight: 700; text-align: center; }
.window-preferences p { padding: 0; }


/*
 * no images version
 */
body.no-images img { display: none !important; }
body.no-images * { background-image: none !important; }
body.no-images .modal .window { background-color: #000; }
body.no-images .modal .window p.close a { background-color: #a53900; font-weight: 700; line-height: 23px; text-indent: 0; text-align: center; }
body.no-images .modal .window a.button { background-color: #898989; }
body.no-images .modal .window a.submit { background-color: #517396; }
body.no-images .scores td.demo a { background: #000; color: #fff; text-indent: 0; }
body.no-images .scores td.demo a:hover { color: #f47f20; }
body.no-images .play ul.options a,
body.no-images .play ul.menu a { font-size: 13px; font-weight: 700; text-indent: 0; }
body.no-images .play ul.options a:hover,
body.no-images .play ul.menu a:hover { color: #f47f20; }


/*
** the end
*/