tb.css

body {
	background: #252525;
	background-attachment: fixed !important;
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2a2a29), color-stop(100%, #1c1c1c));
	background: -webkit-linear-gradient(#2a2a29, #1c1c1c);
	background: -moz-linear-gradient(#2a2a29, #1c1c1c);
	background: -o-linear-gradient(#2a2a29, #1c1c1c);
	background: -ms-linear-gradient(#2a2a29, #1c1c1c);
	background: linear-gradient(#2a2a29, #1c1c1c);
}

.palette {
	width: 48px;
	height: 48px;
	display: inline-block;
	margin: 5px;
}

.palette.active {
	border: 3px dashed orange;
	width: 42px;
	height: 42px;
	background-origin: border-box;
}

.inBoard {
	width: 48px;
	height: 48px;
	position: absolute;
}

.empty {
	background-color: black;
}

.wall {
	background-image: url('img/blocks.png');
	background-position: 0px 0px;
}

.redBlock {
	background-image: url('img/blocks.png');
	background-position: -48px 0px;
	z-index: 10;
}

.greenBlock {
	background-image: url('img/blocks.png');
	background-position: -96px 0px;
	z-index: 10;
}

.blueBlock {
	background-image: url('img/blocks.png');
	background-position: -144px 0px;
	z-index: 10;
}

.yellowBlock {
	background-image: url('img/blocks.png');
	background-position: -192px 0px;
	z-index: 10;
}

.stoneBlock {
	background-image: url('img/blocks.png');
	background-position: -240px 0px;
	z-index: 10;
}

.rainbowBlock {
	background-image: url('img/blocks.png');
	background-position: -288px 0px;
	z-index: 10;
}

.upArrow {
	background-image: url('img/blocks.png');
	background-position: -336px 0px;
}

.rightArrow {
	background-image: url('img/blocks.png');
	background-position: -384px 0px;
}

.downArrow {
	background-image: url('img/blocks.png');
	background-position: -432px 0px;
}

.leftArrow {
	background-image: url('img/blocks.png');
	background-position: 0px -48px;
}

.sticky {
	background-image: url('img/blocks.png');
	background-position: -48px -48px;
}

.redTrigger {
	background-image: url('img/blocks.png');
	background-position: -96px -48px;
}

.greenTrigger {
	background-image: url('img/blocks.png');
	background-position: -144px -48px;
}

.blueTrigger {
	background-image: url('img/blocks.png');
	background-position: -192px -48px;
}

.yellowTrigger {
	background-image: url('img/blocks.png');
	background-position: -240px -48px;
}

.redGate {
	background-image: url('img/blocks.png');
	background-position: -288px -48px;
}

.greenGate {
	background-image: url('img/blocks.png');
	background-position: -336px -48px;
}

.blueGate {
	background-image: url('img/blocks.png');
	background-position: -384px -48px;
}

.yellowGate {
	background-image: url('img/blocks.png');
	background-position: -432px -48px;
}

.wallUp {
	background-image: url('img/blocks.png');
	background-position: 0px -96px;
	z-index: 10;
}

.wallRight {
	background-image: url('img/blocks.png');
	background-position: -48px -96px;
	z-index: 10;
}

.wallDown {
	background-image: url('img/blocks.png');
	background-position: -96px -96px;
	z-index: 10;
}

.wallLeft {
	background-image: url('img/blocks.png');
	background-position: -144px -96px;
	z-index: 10;
}

.noMatch {
	background-image: url('img/blocks.png');
	background-position: -192px -96px;
}

.redWrap {
	background-image: url('img/blocks.png');
	background-position: -240px -96px;
}

.greenWrap {
	background-image: url('img/blocks.png');
	background-position: -288px -96px;
}

.blueWrap {
	background-image: url('img/blocks.png');
	background-position: -336px -96px;
}

.yellowWrap {
	background-image: url('img/blocks.png');
	background-position: -384px -96px;
}

.palette-table {
	width: 208px;
	height: 300px;
	overflow: auto;
}

.palette-table .jspVerticalBar {
	opacity: 0;
}

.jspVerticalBar, .jspTrack {
	background: transparent;
}

.jspDrag {
	background: #CCC;
	border-radius: 15px;
}

.panel {
	background: #dddddd; /* Old browsers */
	background: -moz-linear-gradient(top, #dddddd 0%, #ffffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #dddddd 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #dddddd 0%,#ffffff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #dddddd 0%,#ffffff 100%); /* IE10+ */
	background: linear-gradient(to bottom, #dddddd 0%,#ffffff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.panel .info {
	margin: 5px 0;
	color: #FF8;
	text-shadow: 2px 2px #AAA;
	text-align: left;
}

.panel .info .title{
	font: 36px arial,sans-serif;
}

.panel .info .content {
	font: 28px arial,sans-serif;
	color: #FFF;
}

.panel .info .content.warning {
	color: #F00;
}

.arrows {
	position: relative;
	border: 6px ridge #BBB;
	width: 180px;
	height: 180px;
	margin: 10px 0;
	background: #CCC; 
}

.arrow {
	position: absolute;
	width: 60px;
	height: 60px;
}

.arrow:hover {
	cursor: pointer;
}

.arrow.up {
	position: absolute;
	left: 60px;
	top: 0px;
	background-image: url('img/arrows.png');
	background-position: 0px 0px;
}
.arrow.up:hover {
	background-position: 0px 60px;
}
.arrow.up.lastDir {
	background-position: 0px 120px;
}

.arrow.down {
	position: absolute;
	left: 60px;
	top: 120px;
	background-image: url('img/arrows.png');
	background-position: 120px 0px;
}
.arrow.down:hover {
	background-position: 120px 60px;
}
.arrow.down.lastDir {
	background-position: 120px 120px;
}

.arrow.left {
	position: absolute;
	left: 0px;
	top: 60px;
	background-image: url('img/arrows.png');
	background-position: 60px 0px;
}
.arrow.left:hover {
	background-position: 60px 60px;
}
.arrow.left.lastDir {
	background-position: 60px 120px;
}

.arrow.right {
	position: absolute;
	left: 120px;
	top: 60px;
	background-image: url('img/arrows.png');
	background-position: 180px 0px;
}
.arrow.right:hover {
	background-position: 180px 60px;
}
.arrow.right.lastDir {
	background-position: 180px 120px;
}

.scene {
	width: 768px;
	height: 576px;
	position: absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	border: 5px solid black;
}

.board {
	position: absolute;
	left: 0;
	top: 0;
	width: 576px;
	height: 576px;
	background-color: black;
}

.panel {
	position: absolute;
	top: 0;
	left: 576px;
	width: 192px;
	height: 576px;
}

.popup-bg {
	display: none;
	position: absolute;
	width: 500px;
	height: 250px;
	left: 50%;
	top: 50%;
	margin-left: -250px;
	margin-top: -125px;
	border-radius: 5px;
	z-index: 100;
}

.popup {
	display: none;
	position: absolute;
	width: 500px;
	height: 250px;
	left: 50%;
	top: 50%;
	margin-left: -250px;
	margin-top: -125px;
	text-align: center;
	z-index: 100;
}

#level-cleared-background {
	background-color: #DD0;
	box-shadow: 0px 0px 40px #FF0, 0px 0px 40px #FF0;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

#level-failed-background {
	background-color: #777;
	box-shadow: 0px 0px 40px #CCC, 0px 0px 40px #CCC;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

#game-cleared-background {
	background-color: #FFF;
	box-shadow: 0px 0px 40px #FCC, 0px 0px 40px #FCC;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

.editor.popup-bg {
	background-color: #088;
	box-shadow: 0px 0px 40px #0AA, 0px 0px 40px #0AA;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

.popup .title {
	font: 48px arial,sans-serif;
	line-height: 96px;
}

#level-cleared .title{
	color: #F00;
	text-shadow: 0px 0px 10px #FC0, 0px 0px 20px #FC0;
}

#level-failed .title{
	color: #00D;
	text-shadow: 0px 0px 10px #007, 0px 0px 20px #007;
}

#game-cleared .title {
	color: #FD0;
	text-shadow: 0px 0px 20px #FF0, 0px 0px 40px #FF0;
}

#game-cleared .content {
	color: #00F;
	text-shadow: 0px 0px 10px #0CF, 0px 0px 20px #0CF;
}

.editor.popup .level-code {
	resize: none;
	width: 460px;
	height: 130px;
	background-color: #FFA;
	border: 2px inset #FF0;
}

.popup .info {
	color: #AAA;
	font: 24px arial,sans-serif;
	line-height: 48px;
	text-shadow: 1px 1px #666;
}

.popup .buttons {
	position: absolute;
	bottom: 0px;
	width: 100%;
}

.button {
	margin: 12px;
	font: 18px arial,sans-serif;
	color: #007;
	line-height: 36px;
	text-shadow: 1px 1px #77F;
	border-radius: 3px;
	box-shadow: 0px 0px 3px #070;
	text-align: center;
	background: #007700; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #007700 0%, #65a000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#007700), color-stop(100%,#65a000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #007700 0%,#65a000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #007700 0%,#65a000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #007700 0%,#65a000 100%); /* IE10+ */
	background: linear-gradient(135deg, #007700 0%,#65a000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007700', endColorstr='#65a000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.button:hover {
	box-shadow: 0px 0px 3px #0a0;
	cursor: pointer;
	background: #00a600; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #00a600 0%, #80ca00 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00a600), color-stop(100%,#80ca00)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #00a600 0%,#80ca00 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #00a600 0%,#80ca00 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #00a600 0%,#80ca00 100%); /* IE10+ */
	background: linear-gradient(135deg, #00a600 0%,#80ca00 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a600', endColorstr='#80ca00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.popup .button {
	width: 25%;
	height: 100%;
	display: inline-block;
}

.panel .button {
	width: 168px;
	height: 30px;
	line-height: 30px;
}

.popup {
	z-index: 100;
}

#popup-layer {
	width: 100%;
	height: 100%;
	z-index: 50;
	left: 0;
	top: 0;
	background-color: #000;
	opacity: 0.5;
	filter: alpha(opacity=50);
	display: none;
	position: fixed;
}

.scene {
	text-align: center;
	background: #dddddd;
	background: -moz-linear-gradient(top, #dddddd 0%, #ffffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #dddddd 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #dddddd 0%,#ffffff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #dddddd 0%,#ffffff 100%); /* IE10+ */
	background: linear-gradient(to bottom, #dddddd 0%,#ffffff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

#main-menu-scene .title {
	font: 72px arial,sans-serif;
	line-height: 144px;
	color: #FF0;
	text-shadow: 2px 2px #CCC;
}

#main-menu-scene .buttons {
	position: absolute;
	bottom: 0px;
	width: 384px;
	left: 50%;
	margin-left: -192px;
}

#main-menu-scene .button {
	font: 26px arial,sans-serif;
	margin: 40px 0;
	height: 50px;
	text-align: center;
	line-height: 50px;
}

#main-menu-scene #progress-clear-alert {
	position: absolute;
	font: 16px arial,sans-serif;
	color: red;
	top: 185px;
	width: 384px;
	text-align: center;
	display: none;
}

#main-menu-scene #progress-clear-alert a {
	color: #F70;
}

#main-menu-scene #progress-clear-alert a:hover {
	color: #FA7;
}

#level-select-scene .title {
	font: 48px arial,sans-serif;
	line-height: 60px;
	color: #FF0;
	text-shadow: 2px 2px #CCC;
}

#level-select-scene .levels {
	width: 600px;
	height: 500px;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -300px;
}

#level-select-scene .level {
	position: absolute;
	width: 53px;
	height: 43px;
	margin: 0 5px 5px 0;
	border: 1px solid #000;
	opacity: 0.3;
	filter: alpha(opacity=30);
	text-align: center;
	font: 14px arial,sans-serif;
	line-height: 43px;
	cursor: default;
}

#level-select-scene .open-level:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	cursor: pointer;
}

#level-select-scene .cleared-level {
	background-color: #0F0;
}

#level-select-scene .current-level {
	background-color: #FF0;
}

#level-select-scene .locked-level {
	background-color: #CCC;
}

#level-select-scene .left {
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 75px 48px 75px 0;
	border-color: transparent #CCC transparent transparent;
	position: absolute;
	left: 20px;
	top: 251px;
	opacity: 0.3;
	filter: alpha(opacity=30);
}

#level-select-scene .left:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	cursor: pointer;
}

#level-editor-scene .panel .step-limit {
	width: 60px;
	height: 40px;
	font: 28px arial,sans-serif;
	line-height: 40px;
	background-color: #CCC;
	color: #FFF;
}

.tip-popup {
	width: 280px;
	height: 80px;
	background-color: #FA4;
	opacity: 0.9;
	filter: alpha(opacity=90);
	box-shadow: 5px 5px #AAA;
	color: #FFF;
	position: absolute;
	font-weight: 300;
	padding: 10px;
	display: none;
	z-index: 100;
}

.tip-popup:hover {
	cursor: pointer;
}

.tip-box {
	display: table;
	left: 0;
	top: 0;
	width: 280px;
	height: 80px;
}

.tip-text {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.tip-main {
	font: 18px arial,sans-serif;
}

.tip-dismiss {
	font: 14px arial,sans-serif;
}