body{
	background:#101010;
	margin:auto;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	color:#000000;
}
div#container{
	overflow: hidden;
	width: 1280px;
	height: 720px;
	transform-origin: 0 0;
	transform: scale(1);
	position: absolute;
	top: 0px;
	left: 0px;
}
a{
	color:#ffffff;
}
p#signature{
	position:absolute;
	top: 660px;
	left: 1040px;
	font-size:12px;
	font-weight:900;
	color:#ffffff;
	text-align:right;
	white-space: nowrap;
}
input#volume{
	width:70px;
}
div#loading{
	position:absolute;
	top:0px;
	left:0px;
	background-color:#454545;
	width:1280px;
	height:720px;
	font-size:24px;
	text-align:center;
	color:#ffffff;
}
div#enable_sound{
	position:absolute;
	top:0px;
	left:0px;
	background-color:#000;
	width:1280px;
	height:720px;
	font-size:24px;
	text-align:center;
	color:#ffffff;
	z-index: 999;
}
button.enable_sound{
	width:80px;
	height:40px;
	border:5px outset #009900;
	border-radius:12px;
	background:#ffff00;
	background:linear-gradient(#ffff00, #eaeaea);
	color:#000000;
	font-family:inherit;
	font-size:18px;
}
button.enable_sound:hover{
	border:5px inset #990000;
	background:#0000ff;
	background:linear-gradient(#eaeaea, #0000ff);
	color:#ffffff;
}
div#after_loading{
	display:none;
}
div#volume_control{
	position:absolute;
	top:670px;
	left:10px;
	color:#ffffff;
	width:100px;
	height:40px;
	font-size:12px;
	text-align:center;
}
button#fullscreen {
	position: absolute;
	top: 680px;
	left: 120px;
	width: auto;
}
div.volume_control_in_level_editor{
	background:#000000;
}
div#instr_div{
	display:none;
	position:absolute;
	padding:8px;
	background: rgba(0, 0, 0, 0.8);
	top: 305px;
	left: 310px;
	color:#ffffff;
	width:600px;
	font-size:14px;
	text-align:justify;
}
div#win_div{
	display:none;
	position:absolute;
	padding:8px;
	background: rgba(0, 0, 0, 0.8);
	top: 300px;
	left: 402px;
	color:#ffffff;
	width:400px;
	font-size:32px;
	text-align:center;
}
div#pause{
	display:none;
	position:absolute;
	padding:8px;
	background: rgba(0, 0, 0, 0.8);
	top:300px;
	left:402px;
	color:#ffffff;
	width:400px;
	font-size:32px;
	text-align:center;
}
div#level_text{
	color:#ffffff;
	position:relative;
	top:10px;
	left: 830px;
	width:100px;
}
div#tile_select{
	position:absolute;
	top:10px;
	left: 1180px;
	width:60px;
}
div#levels{
	display:none;
	position:absolute;
	top:300px;
	left:365px;
	width:540px;
	height:180px;
	font-size:14px;
	text-align:justify;
}
div#custom_levels{
	display:none;
	position:absolute;
	top:490px;
	left:0px;
	width:1280px;
	text-align:center;
	text-shadow: -2px 0 #ffffff, 0 2px #ffffff, 2px 0 #ffffff, 0 -2px #ffffff;
}
input#level_code{
	width:100px;
}
button#custom_play{
	width:60px;
	height:20px;
	border:2px solid #8e0b86;
	background:#ec0bcf;
	background:linear-gradient(#ec0bcf, #eaeaea);
	border-radius:6px;
	font-size:12px;
}
button#custom_play:hover{
	border:2px solid #0b16a7;
	background:#24e9fb;
	background:linear-gradient(#24e9fb, #eaeaea);
}
img{
	display:none;
}
img#instructions_img{
	display:block;
	float:right;
	margin-left:9px;
}
canvas#canv{
	background:url("title_screen.jpg");
}
button.main_menu, button.instr{
	position:absolute;
	top:340px;
	left:560px;
	width:160px;
	height:40px;
	border:5px outset #009900;
	border-radius:12px;
	background:#ffff00;
	background:linear-gradient(#ffff00, #eaeaea);
	color:#000000;
	font-family:inherit;
	font-size:18px;
}
button.main_menu:hover, button.instr:hover{
	border:5px inset #990000;
	background:#0000ff;
	background:linear-gradient(#eaeaea, #0000ff);
	color:#ffffff;
}
button#instructions{
	top:390px;
}
button#level_editor{
	top:440px;
}
button.instr{
	display:none;
	top:560px;
}
button.level_button{
	width:60px;
	height:60px;
	border:2px solid #000099;
	border-radius:30px;
	font-size:9px;
}
button.level_button:hover{
	font-size:9px;
	border:3px solid #990000;
	border-radius:30px;
}
button.level_active{
	background:#ffff00;
	background:linear-gradient(#eaeaea, #ffff00, #999900);
}
button.level_cleared{
	background:#00ff00;
	background:linear-gradient(#eaeaea, #00ff00, #009900);
}
button.level_inactive{
	background:#777777;
	background:linear-gradient(#eaeaea, #777777, #555555);
}
button.editor_tile{
	width:60px;
	height:60px;
	border:2px solid #000099;
	border-radius:10px;
	background:#999900;
	background-repeat:no-repeat;
	background-position:center;
}
button.editor_tile:hover{
	background:#555500;
	background-repeat:no-repeat;
	background-position:center;
	border:2px solid #009900;
}
button#start_point{
	background-image:url("start_point.png");
}
button#finish_point{
	background-image:url("finish_point.png");
}
button#hole{
	background-image:url("hole.png");
}
button#switch{
	background-image:url("switch.png");
}
button#wall{
	background-image:url("wall.png");
}
button#steel_wall{
	background-image:url("steel_wall.png");
}
button#door{
	background-image:url("door.png");
}
button#open_door{
	background-image:url("open_door.png");
}
button#floor{
	background-image:url("floor.png");
}
button#questionmark{
	background-image:url("questionmark.png");
}
div#selected_tile{
	position:absolute;
	left: 1110px;
	top:10px;
	width:60px;
	height:60px;
	background:#54c154;
	background-image:url("floor.png");
	background-repeat:no-repeat;
	background-position:center;
}
div#scroll{
	position:absolute;
	top:50px;
	left:10px;
	background:#000000;
	overflow:scroll;
	width: 1080px;
	height: 540px;
}
canvas#editor_canv{
	background:#ffffff;
	background-image:url("floor.png");
	background-repeat:repeat;
}
div#width_height{
	position:absolute;
	top: 600px;
	left:10px;
}
div#import_export{
	position:absolute;
	top:10px;
	left:10px;
}
.level_editor{
	display:none;
}
input.width_height{
	width:50px;
}
input#map_code{
	width:350px;
}
div#editor_chars{
	display:none;
	position:absolute;
	top: 630px;
	left:290px;
}
div.editor_char, button.char{
	float:left;
	margin-right:5px;
	width:40px;
	height:40px;
	background:#ffffff;
	border:none;
	border-radius:5px;
	text-align:center;
}
button.char:hover {
	border: 4px inset #ff0;
}
div#bridges, button#bridges_game{
	background-image:url("bridges.png");
}
div#switches, button#switches_game{
	background-image:url("switches.png");
}
div#walls, button#walls_game{
	background-image:url("walls.png");
}
div#fighter, button#fighter_game{
	background-image:url("fighter.png");
}
div#nothing, button#nothing_game{
	background-image:url("nothing.png");
}
input.char_number{
	width:40px;
	height:15px;
	background-color:rgba(255,255,255,0.8);
	border:none;
	position:relative;
	top:21px;
}
div#chosen_doors{
	position:absolute;
	top:90px;
	left: 1095px;
	font-size:12px;
	text-align:center;
}
div#editor_text_message {
	position: absolute;
	left: 750px;
	top: 600px;
	width: 330px;
	height: 85px;
}
textarea#editor_text {
	width: 100%;
	height: 100%;
}
button.stop_doors{
	width:100%;
	margin-bottom:3px;
}
button#test_play{
	position:absolute;
	top: 600px;
	left:520px;
}
.in_game{
	display:none;
}
div#lower_panel{
	position:absolute;
	top:650px;
	left:0px;
	width:1280px;
	height:70px;
	background:#000000;
}
button.game_button{
	position:absolute;
	top:5px;
	left:1190px;
	width:60px;
	height:20px;
	background:linear-gradient(#32f532, #eaeaea);
	border:3px solid #32b232;
	border-radius:3px;
	font-size:11px;
	font-weight:bold;
}
button.game_button:hover{
	width:80px;
	height:26px;
	font-size:13px;
}
button#undo_button{
	background:linear-gradient(#32f532, #eaeaea);
	border:3px solid #32b232;
	border-radius:3px;
	font-size:12px;
	font-weight:bold;
}
button#undo_button:hover{
	background:linear-gradient(#32f532, #eaeaea);
	border:3px solid #32b232;
	border-radius:3px;
	font-size:13px;
	font-weight:bold;
}
button.win_button{
	width:90px;
	height:25px;
	background:linear-gradient(#a9a912, #434343);
	border:3px solid #959545;
	border-radius:3px;
	font-size:13px;
	font-style:italic;
	color:#ffffff;
}
button.win_button:hover{
	width:100px;
	height:28px;
	font-size:15px;
}
button#exit{
	top:33px;
}
div#chars{
	position:absolute;
	top:10px;
	left: 530px;
}
div#char_instructions {
	text-align: center;
	color: #fff;
	position:absolute;
	left: 0px;
	top: 585px;
	width: 1280px;
	height: 60px;
	padding: 5px;
	background-color: rgba(0,0,0,0.8);
}

div#char_instructions_common {
	text-align: center;
	color: #fff;
	position:absolute;
	left: 0px;
	top: 150px;
	width: 1280px;
	padding: 5px;
	background-color: rgba(0,0,0,0.8);
	display: none;
}

div#choose_char_div {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 20px;
}

span#zombie_x {
	position: absolute;
	left: 38px;
	top: 36px;
	color: #f00;
	font-size: 42px;
}

@keyframes arrow_animation {
	0% { top: 0px }
	50% { top: 8px }
	100% { top: 0px }
}

div#arrow {
	position: relative;
	font-size: 18px;
	animation-name: arrow_animation;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

div.char_instruction_div {
	display: none;
	position: relative;
	top: 6px;
}

img.char_instruction_img {
	display: inline-block;
}

span.right_arrow {
	font-size: 24px;
	position: relative;
	top: -15px;
}

.hide_instructions {
	opacity: 0;
	transition: opacity 0.3s linear;
}

div.button_div{
	width:30px;
	height:15px;
	background-color:rgba(255,255,255,0.8);
	border:none;
	position:relative;
	top:12px;
	left:0px;
}
button.char:disabled{
	color:#ff0000;
}
.char_chosen{
	color:#00b7b7;
}