body{
padding:0;
margin:0;
background-color:#FCFCFC;
font-family: 'Press Start 2P', cursive;
}

#editor #bannerImage{
margin-bottom: 20px;
}

.viewReplay{
	float: right;
	display:none;
}

#scoreBoard{
	padding:10px;
	background-color:#333;
	color:#FFF;
}
#scoreBoard > div{
display:inline-block;
}

.centered{
	width:800px;
	margin:0 auto;
	padding:10px;
	margin-top:10px;
	box-shadow: -1px 1px 1px #AAA;
}
.centered.big{
	width:1050px;
}

#controls > div {
	width:100px;
	height:100px;
	margin:10px;
	display: inline-block;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
	background:url(../img/keys.png) no-repeat;
}

#controls #leftKey{
	background-position: 0px 0px;
}
#controls #rightKey{
	background-position: -100px 0px;
}
#controls #upKey{
	float:right;
	background-position: -200px 0px;
}

#gc{
	display:inline-block;
	cursor:pointer;
}

#position{
font-size:8px;
margin-top:10px;
display:inline-block;
width:320px;
user-select: none;
}
#instruction{
display:inline-block;
font-size:8px;
width:660px;
text-align:right;
user-select: none;
}





#tools{
display:inline-block;
width:250px;
float:right;
background-color:#EAEAEA;
min-height:592px;
user-select: none;
}

#tools select{
font-family: 'Press Start 2P', cursive;
font-size:7px;
}

#tools h2{
font-size: 16px;
margin:10px 0 0 0;
}

#tools button{
font-family: 'Press Start 2P', cursive;
}

#tools .tile{
width:16px;
height:16px;
margin:1px;
border-width:2px;
border-style: solid;
display:inline-block;
background-image:url(../sprites/tileset_grassAndDirt.png);
cursor:pointer;
float:left;
}
#tools .tile.selected{border-color:#33CCCC;}

.tile0_0{background-position:-0px -0px;}
.tile0_1{background-position:-0px -16px;}
.tile0_2{background-position:-0px -32px;}
.tile0_3{background-position:-0px -48px;}
.tile0_4{background-position:-0px -64px;}
.tile0_5{background-position:-0px -80px;}
.tile0_6{background-position:-0px -96px;}
.tile0_7{background-position:-0px -112px;}
.tile1_0{background-position:-16px -0px;}
.tile1_1{background-position:-16px -16px;}
.tile1_2{background-position:-16px -32px;}
.tile1_3{background-position:-16px -48px;}
.tile1_4{background-position:-16px -64px;}
.tile1_5{background-position:-16px -80px;}
.tile1_6{background-position:-16px -96px;}
.tile1_7{background-position:-16px -112px;}
.tile2_0{background-position:-32px -0px;}
.tile2_1{background-position:-32px -16px;}
.tile2_2{background-position:-32px -32px;}
.tile2_3{background-position:-32px -48px;}
.tile2_4{background-position:-32px -64px;}
.tile2_5{background-position:-32px -80px;}
.tile2_6{background-position:-32px -96px;}
.tile2_7{background-position:-32px -112px;}
.tile3_0{background-position:-48px -0px;}
.tile3_1{background-position:-48px -16px;}
.tile3_2{background-position:-48px -32px;}
.tile3_3{background-position:-48px -48px;}
.tile3_4{background-position:-48px -64px;}
.tile3_5{background-position:-48px -80px;}
.tile3_6{background-position:-48px -96px;}
.tile3_7{background-position:-48px -112px;}
.tile4_0{background-position:-64px -0px;}
.tile4_1{background-position:-64px -16px;}
.tile4_2{background-position:-64px -32px;}
.tile4_3{background-position:-64px -48px;}
.tile4_4{background-position:-64px -64px;}
.tile4_5{background-position:-64px -80px;}
.tile4_6{background-position:-64px -96px;}
.tile4_7{background-position:-64px -112px;}
.tile5_0{background-position:-80px -0px;}
.tile5_1{background-position:-80px -16px;}
.tile5_2{background-position:-80px -32px;}
.tile5_3{background-position:-80px -48px;}
.tile5_4{background-position:-80px -64px;}
.tile5_5{background-position:-80px -80px;}
.tile5_6{background-position:-80px -96px;}
.tile5_7{background-position:-80px -112px;}
.tile6_0{background-position:-96px -0px;}
.tile6_1{background-position:-96px -16px;}
.tile6_2{background-position:-96px -32px;}
.tile6_3{background-position:-96px -48px;}
.tile6_4{background-position:-96px -64px;}
.tile6_5{background-position:-96px -80px;}
.tile6_6{background-position:-96px -96px;}
.tile6_7{background-position:-96px -112px;}
.tile7_0{background-position:-112px -0px;}
.tile7_1{background-position:-112px -16px;}
.tile7_2{background-position:-112px -32px;}
.tile7_3{background-position:-112px -48px;}
.tile7_4{background-position:-112px -64px;}
.tile7_5{background-position:-112px -80px;}
.tile7_6{background-position:-112px -96px;}
.tile7_7{background-position:-112px -112px;}

.break{
clear:both;
height:20px;
}

#tools #platformsList{
margin:0;
padding:0;
font-size:8px;
list-style: none;
border-top:1px #000 solid;
}
#tools #platformsList li{
border-bottom:1px #000 solid;
margin:2px 0;
height: 16px;
}

#tools #platformsList .eye{
width:10px;
height:10px;
background-color:#369;
display: inline-block;
margin-right: 3px;
}
#tools #platformsList .removePlatform{
float:right;
}

#tools #playersList{
margin:0;
padding:0;
font-size:8px;
list-style: none;
border-top:1px #000 solid;
}
#tools #playersList li{
border-bottom:1px #000 solid;
margin:2px 0;
}
#tools #playersList .image{
cursor:pointer;
background:url(../sprites/player.png);
width:24px;
height:24px;
display: inline-block;
border-width:2px;
border-style: solid;
border-color:#EAEAEA;
}
#tools #playersList .data{
display: inline-block;
width:150px;
}
#tools #playersList .selected .image{border-color:#33CCCC;}

#tools #playersList .player0 .image{background-position:0px 0px;}
#tools #playersList .player1 .image{background-position:0px -24px;}
#tools #playersList .player2 .image{background-position:0px -48px;}
#tools #playersList .player3 .image{background-position:0px -72px;}



#tools #doorsList{
margin:0;
padding:0;
font-size:8px;
list-style: none;
}
#tools #doorsList li{
margin:2px 0;
display:inline-block;
}
#tools #doorsList .image{
cursor:pointer;
background:url(../sprites/doors.png);
width:48px;
height:48px;
display: inline-block;
border-width:2px;
border-style: solid;
border-color:#EAEAEA;
}
#tools #doorsList .data{
display: inline-block;
width:100px;
}

#tools #doorsList .selected .image{border-color:#33CCCC;}

#tools #doorsList .door0 .image{background-position:0px 0px;}
#tools #doorsList .door1 .image{background-position:0px -48px;}
#tools #doorsList .door2 .image{background-position:0px -96px;}
#tools #doorsList .door3 .image{background-position:0px -144px;}




#tools #gravityButtonsList{
margin:0;
padding:0;
font-size:8px;
list-style: none;
}
#tools #gravityButtonsList li{
margin:2px 0;
display:inline-block;
}
#tools #gravityButtonsList .image{
cursor:pointer;
background:url(../sprites/gravity_button.png);
width:32px;
height:32px;
display: inline-block;
border-width:2px;
border-style: solid;
border-color:#EAEAEA;
}
#tools #gravityButtonsList .selected .image{border-color:#33CCCC;}
#tools #gravityButtonsList .up .image{background-position:0px 0px;}
#tools #gravityButtonsList .down .image{background-position:0px -32px;}




#tools .box h2{
font-size:12px;
border:1px #333 solid;
padding:3px 10px;
cursor:pointer;
}
#tools .box .content{
height:0;
overflow: hidden;
transition: 0.5s;
transition-timing-function: ease-in-out;
}

#tools .box.active .content{
height:390px;
overflow-y: auto;
transition: 0.5s;
transition-timing-function: ease-in-out;
}