@font-face
{
	font-family:'DataTrash';
	src:url('data_trash.TTF');
}

@font-face
{
	font-family:'BitWonder';
	src:url('8-BIT WONDER.TTF');
}

body
{
	background-color:black;
	margin:0px;
	height:100%;
	overflow:hidden;
	text-align:center;

	/* Disable text highlighting */
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

p, h1
{
	color:white;
}

p, .options>a
{
	font-family:'BitWonder';
}

#MobileOverlay
{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:20%;
}

#MobileControls_Action
{
	position:absolute;
	right:0;
	top:0;
	height:100%;
}

#MobileControls_Direction
{
	position:absolute;
	left:0;
	top:0;
	height:100%;
}
#MobileControls_Left
{
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width:50%;
}
#MobileControls_Right
{
	position:absolute;
	top:0;
	height:100%;
	width:50%;
}

#MobileControls_Action , #MobileControls_Left , #MobileControls_Right
{
	vertical-align:middle;
	opacity:0.5;
	background-color:#404040;
	border:4px solid #FFF;
	box-sizing:border-box;
}

#MobileOverlay>div.active
{
	background-color:#707070;
}

#Logo
{
	image-rendering:pixelated;
	position:absolute;
	top:52px;
	left:50%;
	background-color:black;
	transform: translate(-50%, -50%);
	padding-left:16px;
	padding-right:16px;
}

h1
{
	font-family:'DataTrash';
	position:absolute;
	top:-40px;
	left:50%;
	font-size:48px;
	transform: translate(-50%, -50%);
	padding-left:16px;
	padding-right:16px;
	background-color:black;
}

h1.logoTextLeft
{
	margin-left:-48px;
}

h1.logoTextRight
{
	margin-left:48px;
}

#GameFrame
{
	width:480px;
	height:704px;
	border:8px solid #0000D7;
	border-radius:16px;
	
}

#Container
{
	box-sizing:border-box;
	padding-left:32px;
	padding-right:32px;
	padding-bottom:32px;
	padding-top:16px;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

.buffer
{
	height:32px;
	width:100%;
}

#LoadingScreen
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:black;
}

#LoadingScreen > p
{
	position:absolute;
	font-size:64px;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

#TitleCard , #GameOverCard , #VictoryCard
{
	width:100%;
	position:absolute;
	top:128px;
	left:0;
	overflow:hidden;
}

#GameTitle
{
	padding-left:2px;
	color:#D70000;
	text-shadow:-4px 4px #FFF;
}

#GameOverTitle
{
	padding-left:2px;
	color:#00D7D7;
	text-shadow:-4px 4px #FFF;
}

#VictoryTitle
{
	font-size:48px;
	padding-left:2px;
	color:#00D700;
	text-shadow:-4px 4px #FFF;
}

#GameTitle.flashing
{
	color:#FFF;
	text-shadow:-4px 4px #D70000;
}

#GameOverTitle.flashing
{
	color:#FFF;
	text-shadow:-4px 4px #00D7D7;
}

#VictoryTitle.flashing
{
	color:#FFF;
	text-shadow:-4px 4px #00D700;
}

#TitleCard > p , #GameOverCard > p , #VictoryCard > p
{
	font-size:16px;
	margin:16px;
}

.options
{
	box-sizing:border-box;
	width:200%;
	height:96px;
	margin-top:160px;
	margin-bottom:96px;
	width:45%;
	display:none;
}

.options.current
{
	margin-left:0;
	display:block;
}

.options>a
{
	font-size:22px;
	margin-left:6px;
	float:left;
	clear:both;
	margin-bottom:16px;
	color:#D7D7D7;
}

.options>a.highlighted
{
	color:#D7D700;
}

.options>a.selected
{
	color:#D700D7;
}

#ImportText
{
	margin-left:6px;
	float:left;
	clear:both;
	margin-bottom:16px;
	font-size:24px;
	width:80%;
	height:44px;
	color:white;
	box-sizing:border-box;
	border:4px solid #D7D7D7;
	background-color:black;
	font-family:'BitWonder';
}

.endBuffer
{
	clear:both;
	border:1px solid transparent;
}

#LevelEditor
{
	width:80%;
	height:80%;
	position:absolute;
	top:10%;
	left:10%;
	margin-top:16px;
	image-rendering:pixelated;
}

.previewHolder
{
	width:348px;
	height:464px;
	position:absolute;
	box-sizing:border-box;
	top:8px;
	left:8px;
	overflow-y:scroll;
}

.preview
{
	width:312px;
	height:456px;
	position:relative;
	box-sizing:border-box;
}
.preview > .tile
{
	width:12px;
	height:12px;
	position:absolute;
	box-sizing:border-box;
	z-index:1;
}

.tile
{
	border:1px solid #404040;
}

.tile:hover
{
	border:1px solid #D7D7D7;
}

.editorObject
{
	z-index:2;
}

.editorObject.wall
{
	width:12px;
	height:12px;
	background-color:#0000D7;
	position:absolute;
	left:0;
	top:0;
}

.editorObject.door
{
	width:12px;
	height:12px;
	background-image:url('Sprites/Editor/door.png');
	background-repeat:no-repeat;
	background-size:100%;
	position:absolute;
	left:0;
	top:0;
}

.editorObject.launchpad
{
	width:24px;
	height:24px;
	box-sizing:border-box;
	background-image:url('Sprites/Editor/launchpad.png');
	border:1px solid #D7D700;
	background-repeat:no-repeat;
	background-size:100%;
	position:absolute;
	left:0;
	top:0;
}

.editorObject.target
{
	width:24px;
	height:24px;
	box-sizing:border-box;
	background-image:url('Sprites/Editor/target.png');
	border:1px solid #D70000;
	background-repeat:no-repeat;
	background-size:100%;
	position:absolute;
	left:0;
	top:0;
}

.editorObject.fuel
{
	width:24px;
	height:24px;
	box-sizing:border-box;
	background-image:url('Sprites/Editor/fuel.png');
	border:1px solid #00D7D7;
	background-repeat:no-repeat;
	background-size:100%;
	position:absolute;
	left:0;
	top:0;
}

.editorObject.key
{
	width:24px;
	height:24px;
	box-sizing:border-box;
	background-image:url('Sprites/Editor/key.png');
	border:1px solid #D7D700;
	background-repeat:no-repeat;
	background-size:100%;
	position:absolute;
	left:0;
	top:0;
}

.editorObject.armour
{
	width:24px;
	height:24px;
	box-sizing:border-box;
	background-image:url('Sprites/Editor/armour.png');
	border:1px solid #00D700;
	background-repeat:no-repeat;
	background-size:100%;
	position:absolute;
	left:0;
	top:0;
}

.editorObject.life
{
	width:24px;
	height:24px;
	box-sizing:border-box;
	background-image:url('Sprites/Editor/life.png');
	border:1px solid #D700D7;
	background-repeat:no-repeat;
	background-size:100%;
	position:absolute;
	left:0;
	top:0;
}

.editorObject.mover
{
	width:12px;
	height:12px;
	background-color:#D7D7D7;
	position:absolute;
	box-sizing:border-box;
	left:0;
	top:0;
}

.editorObject.mover.vertical
{
	border-left:2px solid black;
	border-right:2px solid black;
}

.editorObject.mover.horizontal
{
	border-top:2px solid black;
	border-bottom:2px solid black;
}

.editorObject.sputnik
{
	width:24px;
	height:24px;
	box-sizing:border-box;
	background-image:url('Sprites/Editor/sputnik.png');
	border:1px solid #D7D7D7;
	background-repeat:no-repeat;
	background-size:100%;
	position:absolute;
	left:0;
	top:0;
}

.editorObject.turret
{
	width:24px;
	height:24px;
	box-sizing:border-box;
	background-image:url('Sprites/Editor/turret.png');
	border:1px solid #D7D7D7;
	background-repeat:no-repeat;
	background-size:100%;
	position:absolute;
	left:0;
	top:0;
}

.editorObject.turret.top
{
	transform:rotate(90deg);
}

.editorObject.turret.bottom
{
	transform:rotate(270deg);
}

.editorObject.turret.right
{
	transform:rotate(180deg);
}

#LevelEditor > .menu
{
	position:absolute;
	right:8px;
	top:8px;
	width:72px;
	height:464px;
}
#LevelEditor > .menu > .menuOption
{
	width:32px;
	height:32px;
	border:1px solid #404040;
	color:white;
	cursor:pointer;
	background-repeat:no-repeat;
	background-size:100%;
	float:left;
}

#LevelEditor > .menu > .menuOption:hover
{
	border:1px solid #D7D7D7;
}

#LevelEditor > .menu > .menuOption.selected
{
	border:1px solid #D7D700;
}

#LevelEditor > .levelInfo
{
	position:absolute;
	bottom:8px;
	left:8px;
	height:154px;
	width:430px;
}

#exportButton , #backButton , #CloseExportButton
{
	width:88px;
	cursor:pointer;
	border:4px solid #D7D7D7;
	position:absolute;
	right:0;
	bottom:56px;
	padding-left:4px;
	padding-right:4px;
}

#exportButton > p , #backButton > p , #CloseExportButton
{
	font-size:12px;
	color:#D7D7D7;
}

#exportButton:hover , #backButton:hover , #CloseExportButton:hover
{
	border:4px solid #D7D700;
}

#exportButton:hover > p , #backButton:hover > p , #CloseExportButton:hover > p
{
	color:#D7D700;
}

#outputWindow
{
	width:80%;
	height:256px;
	box-sizing:border-box;
	border:8px solid #0000D7;
	background-color:black;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:10%;
	z-index:10;
	padding:8px;
	border-radius:16px;
}

.outputText
{
	font-size:24px;
	width:80%;
	position:absolute;
	left:8px;
	bottom:8px;
	height:44px;
	color:white;
	box-sizing:border-box;
	border:4px solid #D7D7D7;
	background-color:black;
	font-family:'BitWonder';
}

#modalShade
{
	width:80%;
	height:82%;
	position:absolute;
	top:10%;
	left:10%;
	z-index:8;
}

#backButton
{
	cursor:pointer;
	border:4px solid #D7D7D7;
	position:absolute;
	right:0;
	bottom:0;
	padding-left:4px;
	padding-right:4px;
}

#CloseExportButton
{
	font-size:12px;
	width:48px;
	bottom:8px;
	right:8px;
}

#CustomLevelHeight , #CustomLevelLives
{
	margin-top:12px;
	width:64px;
	font-size:16px;
	border:4px solid #D7D7D7;
	background-color:black;
	font-family:'BitWonder';
	color:white;
}

#CustomLevelHeight
{
	width:80px;
}

 #CustomLevelName
 {
 	font-size:16px;
 	margin-top:12px;
 	width:160px;
 	margin-right:32px !important;
 	border:4px solid #D7D7D7;
	background-color:black;
	font-family:'BitWonder';
	color:white;
 }

#CustomLevelHeight , #CustomLevelHeight_Label , #CustomLevelHeight_Warning , #CustomLevelLives , #CustomLevelLives_Warning , #CustomLevelLives_Label , #CustomLevelName_Label , #CustomLevelName
{
	float:left;
	margin-right:8px;
}

#CustomLevelHeight_Label , #CustomLevelName_Label , #CustomLevelLives_Label
{
	clear:both;
}

#CustomLevelHeight_Warning
{
	font-size:12px;
	color:#D70000;
}

#Game
{
	margin-top:32px;
}

#ScoreCounter
{
	font-family:'BitWonder';
	position:absolute;
	bottom:-24px;
	left:50%;
	background-color:black;
	font-size:32px;
	transform: translate(-50%, -50%);
	padding-left:16px;
	padding-right:16px;
}

#LevelName
{
	font-family:'BitWonder';
	position:absolute;
	top:48px;
	left:72px;
	font-size:16px;
	padding-left:8px;
	padding-right:8px;
	display:inline-block;
	background-color:black;
}

#LivesCounter
{
	font-family:'BitWonder';
	position:absolute;
	top:48px;
	right:72px;
	font-size:16px;
	padding-left:8px;
	padding-right:8px;
	display:inline-block;
	background-color:black;
}

#LivesCounter>a
{
	color:#D700D7;
	font-size:16px;
}

#LivesCounter.flashing
{
	color:#D700D7;
}

#FuelGauge
{
	position:absolute;
	left:56px;
	bottom:56px;
}

.invisible
{
	display:none !important;
}

#FuelGauge > p
{
	font-size:16px;
	float:left;
	margin-right:8px;
	margin-left:24px;
}

#FuelGauge > div
{
	width:324px;
	float:left;
	margin-top:12px;
	height:24px;
	box-sizing:border-box;
}

#FuelLevel
{
	height:100%;
	width:0px;
	background-color:#D70000;
}

#SpriteSheet
{
	display:none;
}

.Level
{
	display:none;
}