:root {
	/* Primary color */
	--black: hsl(240, 50%, 13%);
	--blackt: hsla(240, 50%, 13%, 0.5);
	--black2: hsl(240, 70%, 0%);
	--black2t: hsla(240, 70%, 0%, 0.5);
	/* Secondary color */
	--white: hsl(204, 28%, 93%);
	/* Accent colors */
	--yellow: hsl(53, 98%, 65%);
	--blue: hsl(193, 100%, 28%);
	--green: hsl(73, 84%, 60%);
	/* Other colors */
	--red: hsl(0, 100%, 60%);
	--orange: hsl(24, 100%, 65%);
	--purple: hsl(282, 100%, 28%);
	--pink: hsl(325, 100%, 65%);
	--cyan: hsl(180, 100%, 65%);
	--brown: hsl(30, 100%, 28%);
}

.jumbotron {
	background-image: url(jum.png);
	height: 500px;
}

table {
	border-collapse: inherit;
}

logo {
	position: relative;
	top: 32px;
	width: 100%;
	text-align: center;
	margin: auto;
	display: block;
}

#loader {
	top: calc(50% - 64px);
	left: calc(50% - 64px);
	position: fixed;

	animation: load 1s linear infinite;
}

#loadlog {
	position: fixed;
	z-index: 9;
	top: 8px;
	left: 8px;
	color: white;
}

@keyframes load {
	from {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
	}
}

canvas,
#em_hotkeys {
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
}

es:lang(en) {
	display: none;
}

en:lang(es) {
	display: none;
}

canvas {
	image-rendering: -moz-crisp-edges;
	/* Firefox */
	image-rendering: -webkit-crisp-edges;
	/* Webkit (Safari) */
	image-rendering: pixelated;
	/* Chrome */
}

#em_hotkeys {
	background-color: rgba(32, 40, 40, 0.5);
	display: inline-block;
	height: auto;
}

g {
	color: rgba(0, 0, 0, 0.5);
}

.modified {
	color: rgb(0, 255, 255);
	background-color: rgba(160, 255, 255, 0.8);
	text-shadow: -1px -1px 0px black,
		-1px 0px 0px black,
		-1px 1px 0px black,
		0px -1px 0px black,
		0px 0px 0px black,
		0px 1px 0px black,
		1px -1px 0px black,
		1px 0px 0px black,
		1px 1px 0px black;

	font-weight: bolder;
}

leftbar {
	float: left;
}

rightbar {
	float: right;
}

leftbar,
rightbar {
	width: 50%;
}

centerbar {
	width: 100%;
}

.leftbar,
#charainfo {
	width: 288px;
	height: 576px;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: rgba(32, 40, 40);
}

.lb_minimap {
	width: 288px;
	height: 144px;
	position: absolute;
	top: 0px;
	left: 0px;
}

#lb_info {
	z-index: 99999999999999;
}

.lb_stats {
	width: 288px;
	height: 288px;
	position: absolute;
	top: 144px;
	left: 0px;
}

sprog {
	display: none;
}

#statable tr,
#statable tr td,
#statable tr th,
#statable,
#statable_c,
#statable_c tr,
#statable_c tr td,
#statable_c tr th {
	padding: 4px;
}

quest {
	width: 100%;
	padding: 8px;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.8);
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	border-radius: 1px solid rgba(255, 200, 200, 0.5);
	display: inline-block;
}

.lb_menu {
	position: absolute;
	right: 0px;
}

.menubar {
	width: 288px;
	height: 576px;
	position: absolute;
	top: 0px;
	left: 896px;
	/* background: url(../img/background.png); */
	background-color: rgb(32, 40, 40);

	z-index: 9999;
	display: none;
	overflow-y: scroll;
}

#layer_bottom,
#layer_wall,
#layer_shadow,
#layer_overlay,
#layer_items,
#layer_entities,
#layer_weather {
	width: 624px;
	height: 576px;
	top: 0px;
	left: 288px;
}

border {
	width: 100%;
	text-align: center;
	font-size: 18px;
	margin: 0px;
	padding: 2px;
	background-color: rgba(255, 255, 255, 0.8);
	color: rgba(0, 0, 0, 0.8);
	display: inline-block;
	cursor: pointer;
}

menu {
	width: 608px;
	left: 288px;
	height: 432px;
	position: relative;
	top: -14px;
	padding: 0px;
}

.center {
	text-align: center;
	display: block;
	margin: 8px;
	padding: 8px;
	font-size: 24px;
}

body {
	width: 100vw;
	display: inline-block;
	font-family: 'Nova Square', sans-serif;
	background:
	radial-gradient(at 26%  10%, var(--black2t), var(--blackt)),
	radial-gradient(at  4%  67%, var(--blackt),  var(--black2t)),
	radial-gradient(at  6%  95%, var(--black2t), var(--blackt)),
	radial-gradient(at 42%  70%, var(--black),   var(--black2));
	background-repeat: none;
	background-size: cover;
	background-attachment: fixed;
	color: rgb(32, 40, 40);

	opacity: 1;
}

.jumbotron .container {
	position: absolute;
	top: 60px;
	color: hsl(60, 40%, 80%);
}

.jumbotron a {
	color: #fff;
}

.jumbotron h1 {
	padding: 8px;
	font-size: 48px;
}

h1 {
	color: rgb(224, 240, 240);
}

hr {
	border-color: rgba(255, 255, 255, 0.5);
	width: 50%;
}

.nutton:hover {
	background-color: rgba(224, 240, 240, 0.2);
	color: rgba(224, 240, 240, 0.8);
	cursor: pointer;
}

.nutton {
	display: block;
	width: 50%;
	margin-bottom: 8px;
	margin-left: 25%;
	padding: 8px;
	text-align: center;
	background-color: rgba(64, 80, 80, 0.8);
	color: rgba(224, 240, 240, 0.8);
	font-weight: bolder;
	font-size: 1em;
}

.navbar a {
	position: relative;
	font-weight: bold;
	color: #dfdfdf;
	text-transform: uppercase;
	padding: 8px;
	top: 16px;
}

.rdm,
.navbar a.rdm {
	color: hsl(0, 40%, 60%);
}

#gamec {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	display: none;
}

sup {
	font-size: 50%;
	font-style: italic;
	font-size: 10px;
}

.ourgames h2 {
	font-size: 24px;
}

.layer {
	background-image: url(img/road.png);
	height: 24px;
	width: 100%;
	position: absolute;

	image-rendering: pixelated;
}

.build {
	background-image: url(img/building.png);
}

.distant {
	width: 100%;
}

.frontlayer_1 {
	transform: scale(8.0);
	opacity: 1;
}

.frontlayer_2 {
	transform: scale(4.0);
	opacity: 0.8;
}

.frontlayer_3 {
	transform: scale(2.0);
	opacity: 0.64;
}

.frontlayer_4 {
	transform: scale(1.0);
	opacity: 0.512;
}

tho {
	font-style: italic;
	color: rgba(128, 128, 128, 0.8);
}

.coordNotification {
	font-size: 10px;
	background-color: rgba(255, 255, 255, 0.8);
	color: rgba(0, 0, 0, 0.8);
	padding: 4px;
	border-radius: 4px;
	box-shadow: 0 0 4px black;


	position: absolute;
}

.collectible {
	animation: collec 2s infinite;
}

@keyframes collec {

	0%,
	85%,
	100% {
		filter: brightness(1);
		-webkit-filter: brightness(1);
	}

	90% {
		filter: brightness(0.5);
		-webkit-filter: brightness(0.5);
	}

	95% {
		filter: brightness(2);
		-webkit-filter: brightness(2);
	}
}

#gaem_overlay {
	position: absolute;
	left: 384px;
	top: 172.5px;
}

.gaem,
.gaem_overlay,
person_holder,
item_holder {
	position: absolute;
	top: 0px;
	left: 0px;

	background-color: rgba(128, 255, 64, 0.2);
	width: 64px;
	height: 48px;

	zoom: 100%;
}

item_holder {
	background: url(building.png);
	width: 30px;
	height: 60px;
	display: inline-block;
}

#sleeper {
	display: none;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.8);
	width: 100vw;
	height: 100vh;
	z-index: 99998;
}
.ts_dawn {
	filter: sepia(0.5) saturate(0.5);
	-webkit-filter: sepia(0.5) saturate(0.5);
}

.ts_dusk {
	filter: sepia(0.5) saturate(2) brightness(0.9);
	-webkit-filter: sepia(0.5) saturate(2) brightness(0.9);
}

.ts_night {
	filter: sepia(0.8) saturate(3) brightness(0.8) hue-rotate(180deg);
	-webkit-filter: sepia(0.8) saturate(3) brightness(0.8) hue-rotate(180deg);
}

flasher {
	position: absolute;
	text-shadow: -1px 0px 0px #000,
		1px 0px 0px #000,
		0px -1px 0px #000,
		-1px -1px 0px #000,
		1px -1px 0px #000,
		-1px 1px 0px #000,
		1px 1px 0px #000,
		0px 1px 0px #000;
	display: inline-block;
	color: #0f0;
	font-weight: bolder;
	font-size: 0.75vw;
	z-index: 999999999;
}

.wanted {
	animation: want 0.5s infinite;
	background-color: rgba(0, 0, 0, 0.8);
}

.statTable tr td {
	padding: 2px;
}

.statTable tr:nth-child(even) {
	background-color: rgba(240, 255, 255, 1);
}

.statTable tr:nth-child(odd) {
	background-color: rgba(240, 255, 255, 0.8);
}

output {
	display: inline-block;
}

.outlined,
.unavailable,
.c_none {
	/*filter: sepia(1) hue-rotate(80deg) saturate(200);*/
	opacity: 0.5;
}

#wrapper {
	width: 100vw;
	height: 100vh;
	display: block;
}

.guybtn {
	width: 100%;
	display: inline-block;
}

ind {
	margin-left: 30px;
}

@keyframes want {

	0%,
	100% {
		border-top: 3px solid rgb(255, 64, 64);
		border-bottom: 3px solid rgb(0, 0, 0);
		background: linear-gradient(rgba(255, 64, 64, 0.8), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
	}

	50% {
		border-top: 3px solid rgb(0, 0, 0);
		border-bottom: 3px solid rgb(64, 64, 255);
		background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(64, 64, 255, 0.8));
	}
}

log {
	width: 40%;
	position: fixed;
	right: 0px;
	top: 0px;
	font-size: 1em;
}

.news {
	background-color: rgba(255, 128, 0, 0.8) !important;
}

@keyframes hello {

	0%,
	90% {
		background-color: rgba(0, 64, 64, 0.5);
	}

	10% {
		background-color: rgba(255, 128, 0, 0.8);
	}
}

.debuttons {
	position: fixed;
	right: 128px;
	top: 0px;
	font-size: 10px;
	width: 20%;
}

.hidden {
	opacity: 0.5;
}

outline {
	position: absolute;
	z-index: 999999999;
	width: 30px;
	height: 60px;
}

.tile,
tile {
	width: 24px;
	height: 48px;
	position: absolute;
	image-rendering: pixelated;

	background: url(img/tiles.png);
}

.icon,
.icon_small {
	width: 32px;
	height: 32px;
	float: left;
	margin: 3px;
	image-rendering: pixelated;

	background: url(../img/icons.png);
	background-color: rgba(255, 255, 255, 0.5);

	border: 1px solid rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);

	padding: 8px;

	cursor: pointer;
}

.doublicon {
	width: 64px;
	height: 64px;
}

.icon {
	border: none;
	box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
	padding: 0;
}

.round {
	border-radius: 8px;
}

.icon:hover {
	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid black;
	box-shadow: 0 0 4px rgba(144, 166, 255, 0.8);
}

.selected {
	background-color: rgb(200, 255, 200);
}
.tile_empty {
	opacity: 0;
}

.titem {
	width: 30px;
	height: 60px;
	position: absolute;
	image-rendering: pixelated;
	background: url(img/items.png);
}

.item {
	width: 30px;
	height: 15px;
	background: url(img/items.png);
	display: inline-block;
}

.tiles {
	background: url(img/tiles.png);
}

.t_road_walk {
	background-position: -24px 0px;
}

.t_alley {
	background-position: -48px 0px;
}

.t_grass {
	background-position: -72px 0px;
}

.t_road_ew {
	background-position: -96px 0px;
}

.t_cross_ew {
	background-position: -144px 0px;
}

.t_cross_ns {
	background-position: -120px 0px;
}

.t_road_ns {
	background-position: -168px 0px;
}

.t_road,
.tile_tra {
	background-position: -192px 0px;
}

.t_crossroad {
	background-position: -216px 0px;
}

layer {
	position: relative;
}

.guy_layer {
	position: absolute;
	width: 24px;
	height: 48px;
	top: 0px;
	left: 0px;
	font-size: 8px;
	transition: left 0.2s, top 0.2s steps(3);
	cursor: pointer;
}

.myGuy {
	animation: high 1s infinite;
}

th {
	text-align: center;
}

@keyframes high {

	0%,
	50%,
	100% {
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
	}

	25% {
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
	}
}

.walking_0 {
	animation: walk_north 0.3s steps(1) infinite;
}

.walking_2 {
	animation: walk_south 0.3s steps(1) infinite;
}

.walking_1 {
	animation: walk_east 0.3s steps(1) infinite;
}

.walking_3 {
	animation: walk_west 0.3s steps(1) infinite;
}

@keyframes walk_south {
	50% {
		background-position: 0px 0px;
	}

	0% {
		background-position: -30px 0px;
	}
}

@keyframes walk_east {
	50% {
		background-position: 0px -60px;
	}

	0% {
		background-position: -30px -60px;
	}
}

@keyframes walk_north {
	50% {
		background-position: 0px -120px;
	}

	0% {
		background-position: -30px -120px;
	}
}

@keyframes walk_west {

	50% {
		background-position: 0px -180px;
	}

	0% {
		background-position: -30px -180px;
	}
}

.tile_building {
	background-image: url(img/building.png);
}

.tile_window {
	background-image: url(img/building_window.png);
}

.tile_someguy {
	background-image: url(img/someguy.png);
}

.tile_somekid {
	background-image: url(img/somekid.png);
}

.tile_someadult {
	background-image: url(img/someadult.png);
}

.tile_someelder {
	background-image: url(img/someelder.png);
}

.tile_building2 {
	background-image: url(img/building2.png);
}

.tile_building3 {
	background-image: url(img/building3.png);
}

.tile_road {
	background-image: url(img/road.png);
}

.tile_stone {
	background-image: url(img/stone.png);
}

.tile_hidden {
	background-image: url(img/bigtiles.png);
	opacity: 0.5;
}

#battle_blocker {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.9);
	display: none;
}

#battle {
	display: none;
	position: fixed;
	top: 5%;
	left: 10%;
	padding: 1% 5%;
	width: 80%;
	height: 80%;
	overflow-y: scroll;
	background: linear-gradient(rgba(8, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(16, 0, 0, 0.8));
	color: rgba(255, 255, 255, 0.8);
	z-index: 99999;
}

.tile_door {
	background-image: url(img/bigtiles.png);
	background-position: -24px 0px;
}

.tile_fridge {
	background-image: url(img/bigtiles.png);
	background-position: -48px 0px;
}

.tile_cabinet {
	background-image: url(img/bigtiles.png);
	background-position: -72px 0px;
}

.tile_cooker {
	background-image: url(img/bigtiles.png);
	background-position: -96px 0px;
}

.tile_sink {
	background-image: url(img/bigtiles.png);
	background-position: -120px 0px;
}

.tile_toilet {
	background-image: url(img/bigtiles.png);
	background-position: -144px 0px;
}

.tile_sink2 {
	background-image: url(img/bigtiles.png);
	background-position: -168px 0px;
}

.tile_closet {
	background-image: url(img/bigtiles.png);
	background-position: -192px 0px;
}

.tile_table {
	background-image: url(img/bigtiles.png);
	background-position: -216px 0px;
}

.tile_bed1 {
	background-image: url(img/bigtiles.png);
	background-position: -240px 0px;
}

.tile_bed2 {
	background-image: url(img/bigtiles.png);
	background-position: -264px 0px;
}

.tile_woodwall {
	background-image: url(img/bigtiles.png);
	background-position: -288px 0px;
}

.tile_fence_ns {
	background-image: url(img/bigtiles.png);
	background-position: -312px 0px;
}

.tile_fence_ew {
	background-image: url(img/bigtiles.png);
	background-position: -336px 0px;
}

.tile_fence_door {
	background-image: url(img/bigtiles.png);
	background-position: -360px 0px;
}

.tile_work_door {
	background-image: url(img/bigtiles.png);
	background-position: -384px 0px;
}

.get {
	background-color: rgba(128, 192, 128, 0.8);
}

.throw {
	background-color: rgba(128, 128, 128, 0.8);
}

.tile_outerwall {
	background-image: url(img/bigtiles.png);
	background-position: -510px 0px;
}

.tile_bin {
	background-image: url(img/bigtiles.png);
	background-position: -540px 0px;
}

citychunk {
	position: absolute;
	top: 0px;
	left: 0px;
}

.whatever {
	opacity: 0;
	background: none;
}

.loader {
	background-color: rgb(0, 0, 0);
	color: white;
	text-align: right;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 999999;
}

.buildg {
	background: url(img/buildings.png);
	height: 300px;
	width: 30px;
	display: block;
	image-rendering: pixelated;

	position: absolute;
}

.tile_bin2 {
	background-image: url(img/buildings.png);
	background-position: -540px 0px;
}

.tile_belt {
	background-image: url(img/bigtiles.png);
	background-position: -570px 0px;
}

.tile_belt_machinel {
	background-image: url(img/bigtiles.png);
	background-position: -600px 0px;
}

.tile_belt_machiner {
	background-image: url(img/bigtiles.png);
	background-position: -630px 0px;
}

.tile_crystalwall {
	background-image: url(img/bigtiles.png);
	background-position: -660px 0px;
}

.tile_cfence {
	background-image: url(img/bigtiles.png);
	background-position: -690px 0px;
}

.tile_metal_post {
	background-image: url(img/bigtiles.png);
	background-position: -720px 0px;
}

.tile_metal_frame {
	background-image: url(img/bigtiles.png);
	background-position: -750px 0px;
}

.tile_shop_desk {
	background-image: url(img/bigtiles.png);
	background-position: -780px 0px;
}

.tile_shop_desk_machine {
	background-image: url(img/bigtiles.png);
	background-position: -810px 0px;
}

.tile_shop_fridge {
	background-image: url(img/bigtiles.png);
	background-position: -840px 0px;
}

.tile_shop_counter {
	background-image: url(img/bigtiles.png);
	background-position: -870px 0px;
}

.tile_shop_shelf {
	background-image: url(img/bigtiles.png);
	background-position: -900px 0px;
}

.tile_shop_work_door {
	background-image: url(img/bigtiles.png);
	background-position: -930px 0px;
}

.tile_shop_vendor {
	background-image: url(img/bigtiles.png);
	background-position: -960px 0px;
}

.tile_hospital_wall {
	background-image: url(img/bigtiles.png);
	background-position: -990px 0px;
}

.tile_hospital_desk {
	background-image: url(img/bigtiles.png);
	background-position: -1020px 0px;
}

.tile_hospital_blood {
	background-image: url(img/bigtiles.png);
	background-position: -1050px 0px;
}

.tile_hospital_healthmeter {
	background-image: url(img/bigtiles.png);
	background-position: -1080px 0px;
}

cod i {
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	cursor: help;
}

cod {
	color: white;
	font-family: monospace;
	background-color: rgba(0, 0, 0, 0.2);
	border: none;
	padding: 8px;
	margin: 8px;
	display: block;
	font-size: 10px;
	letter-spacing: 2px;
	font-weight: normal;
}

.tile_proto {
	background-image: url(img/proto.png);
	width: 24px;
	height: 48px;
}

.tile_agro {
	background-image: url(img/agro.png);
	width: 24px;
	height: 48px;
}

.tile_b_res {
	background-image: url(img/b_res.png);
	width: 24px;
	height: 48px;
}

.tile_b_sec {
	background-image: url(img/b_sec.png);
	width: 24px;
	height: 48px;
}

.tile_b_slum {
	background-image: url(img/b_slum.png);
	width: 24px;
	height: 48px;
}

.tile_b_thi {
	background-image: url(img/b_thi.png);
	width: 24px;
	height: 48px;
}

.b_top_1 {
	background-position: 0px 0px;
}

.b_top_2 {
	background-position: -24px 0px;
}

.b_top_3 {
	background-position: -48px 0px;
}

.b_top_4 {
	background-position: -72px 0px;
}

.b_top_5 {
	background-position: -96px 0px;
}

.b_mid_1 {
	background-position: 0px -48px;
}

.b_mid_2 {
	background-position: -24px -48px;
}

.b_mid_3 {
	background-position: -48px -48px;
}

.b_mid_4 {
	background-position: -72px -48px;
}

.b_mid_5 {
	background-position: -96px -48px;
}

.b_bot_1 {
	background-position: 0px -96px;
}

.b_bot_2 {
	background-position: -24px -96px;
}

.b_bot_3 {
	background-position: -48px -96px;
}

.b_bot_4 {
	background-position: -72px -96px;
}

.b_bot_5 {
	background-position: -96px -96px;
}

.top_left_left {
	background-position: 0px 0px;
}

.top_left_middle {
	background-position: -24px 0px;
}

.top_left_right {
	background-position: -48px 0px;
}

.top_middle_left {
	background-position: -72px 0px;
}

.top_middle_middle {
	background-position: -96px 0px;
}

.top_middle_right {
	background-position: -120px 0px;
}

.top_right_left {
	background-position: -144px 0px;
}

.top_right_middle {
	background-position: -168px 0px;
}

.top_right_right {
	background-position: -192px 0px;
}

.middle_right_left {
	background-position: -144px -48px;
}

.middle_right_middle {
	background-position: -168px -48px;
}

.middle_right_right {
	background-position: -192px -48px;
}

.middle_left_right {
	background-position: -48px -48px;
}

.middle_middle_right {
	background-position: -120px -48px;
}

.middle_right_left {
	background-position: -144px -96px;
}

.middle_right_middle {
	background-position: -168px -96px;
}

.middle_right_right {
	background-position: -192px -96px;
}

.middle_left_right {
	background-position: -48px -96px;
}

.middle_middle_right {
	background-position: -120px -96px;
}

.deco_1 {
	background-position: 0px -48px;
}

.deco_2 {
	background-position: -24px -48px;
}

.deco_3 {
	background-position: -48px -48px;
}

.deco_4 {
	background-position: -72px -48px;
}

.deco_5 {
	background-position: 0px -96px;
}

.deco_6 {
	background-position: -24px -96px;
}

.deco_7 {
	background-position: -48px -96px;
}

.deco_8 {
	background-position: -72px -96px;
}

.danger1 {
	font-weight: bold;
	color: rgb(255, 192, 96);
}

battler {
	width: 47%;
	display: inline-block;
	margin: 1%;
	padding: 1%;
	height: 384px;
	background-color: rgba(255, 255, 255, 0.5);
}

.c_sec {
	color: rgb(128, 128, 0);
}

.c_res {
	color: rgb(255, 0, 0);
}

.c_thi {
	font-weight: bold;
	color: rgb(128, 0, 192);
}

.c_tech {
	animation: tech 2s infinite;
}

.c_mix {
	color: rgb(192, 0, 192);
}

.c_com,
.c_cbd {
	color: rgb(0, 0, 255);
	animation: com 3s infinite;
}

statd {
	width: 33%;
	float: left;
}

@keyframes tech {

	0%,
	100% {
		color: rgb(0, 255, 0);
	}

	80% {
		color: rgb(128, 255, 128);
	}

	90% {
		color: rgb(128, 128, 128);
	}

	95% {
		color: rgb(0, 128, 0);
	}
}

@keyframes com {

	0%,
	100% {
		color: rgb(0, 0, 255);
	}

	80% {
		color: rgb(0, 128, 255);
	}

	90% {
		color: rgb(0, 255, 255);
	}

	95% {
		color: rgb(255, 255, 128);
	}
}

.loading {
	opacity: 0.5;
	z-index: 9999999;
}

.cityMap {
	background-color: rgba(128, 255, 64, 0.2);

	position: fixed;
	bottom: 256px;
	right: 256px;

	margin: auto;
}

.breaker {
	clear: both;
}

.youAreHere {
	animation: blink 1s infinite;
}

.youLiveHere {
	animation: blink2 3s infinite;
}

.youWorkHere {
	animation: blink3 0.25s infinite;
}

@keyframes blink {
	0% {
		-webkit-filter: hue-rotate(180deg);
		filter: hue-rotate(180deg);
		transform: scale(2.0);
		opacity: 1;
	}

	50% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
		transform: scale(1.0);
		opacity: 0.5;
	}
}

@keyframes blink2 {
	0% {
		transform: scale(1.5) rotate(0deg);
		opacity: 1;
	}

	50% {
		-webkit-filter: brightness(0);
		filter: brightness(0);
		transform: scale(1.0) rotate(180deg);
		opacity: 0.8;
	}
}

@keyframes blink3 {
	0% {
		-webkit-filter: brightness(1000);
		filter: brightness(1000);
		transform: scale(2.0);
	}

	50% {
		-webkit-filter: brightness(0);
		filter: brightness(0);
	}
}

.cityMapTile {
	position: absolute;
	width: 10px;
	height: 10px;
	float: left;
}

maptile {
	position: absolute;
	width: 24px;
	height: 48px;
}

#info {
	position: fixed;
	bottom: 0px;
	left: 0px;
}

.display_holder,
#display_holder {
	border-radius: 2px;
	background-color: rgba(0, 0, 0, 0.8);
	color: rgba(255, 255, 255, 0.8);
	position: fixed;
	bottom: 0px;
	left: 0px;
	z-index: 99999999999;
	border-top: 3px solid black;
	border-bottom: 3px solid black;
}

.outlaw {
	cursor: help;
}

#em_menu_manual b {
	color: lime;
}

#money_display {
	float: left;
	background-color: rgba(0, 0, 0, 0.8);
	margin: 0.25em;
	width: 200px;
	padding: 0.5em;
	text-align: right;
	border-radius: 8px;

	font-size: 16px;
}

#date_display {
	float: left;

	width: 10em;
	padding: 0.2em 1em;
	margin: 0.55em;
	text-align: center;

	font-size: 16px;
	font-weight: bolder;
}

dl {
	margin: 8px;
	list-style: none;
}

dl li {
	margin: 8px;
	background-color: rgba(0, 0, 0, 0.2);
	padding: 8px;
}

.binding {
	border-color: yellow;
	background-color: yellow;
	animation: bind 3s infinite;
}

.binding2 {
	animation: bindy 3s infinite;
}

@keyframes bindy {

	0%,
	80%,
	100% {
		color: white;
		background-color: rgba(255, 255, 0, 0.2);
	}

	90% {
		color: rgba(255, 255, 0, 1);
		background-color: rgba(255, 255, 0, 0.5);
	}
}

@keyframes bind {

	0%,
	100% {
		border-color: yellow;
		background-color: white;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
	}

	80% {
		border-color: white;
		background-color: yellow;
		box-shadow: 0 1px 1px black;
	}
}

.equip {
	width: 99%;
	float: left;
	font-size: 14px;
	height: 48px;
	padding: 0.2vh;
	margin: 0.4vh;
	background-color: rgba(240, 255, 255, 0.8);
	border: 1px solid rgba(0, 32, 32, 0.8);
	cursor: pointer;
}

.mastered {
	background-color: rgba(240, 192, 80, 0.8);
}

.unlocked {
	background-color: rgba(192, 240, 80, 0.8);
}

.locked {
	background-color: rgba(80, 80, 80, 0.8);
}

.sequip {
	font-size: 0.75vw;
	text-align: center;
	width: 46%;
	height: 24px;
	padding: 0;
}

#status_conditions {
	padding: 0;
}

#status_conditions div {
	margin: 3px;
	padding: 0;
	width: 32px;
	height: 32px;
}

.lb_menu_options tr td,
.smallbtn {
	border: 1px solid rgba(0, 0, 0, 0.5);
	padding: 2px;
	font-size: 2vh;
	background-color: rgba(32, 48, 48, 0.8);
	cursor: pointer;
}

.lb_menu_options tr td:hover {
	background-color: rgba(255, 255, 255, 0.8);
}

.lb_menu_options tr td {
	width: 33%;
}

.dd_day {
	background: linear-gradient(rgb(128, 192, 255), rgb(64, 128, 255));
	color: rgba(0, 0, 0, 0.8);
	box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
}

.dd_dusk {
	background: linear-gradient(rgb(255, 128, 0), rgb(128, 160, 192));
	color: rgba(0, 0, 0, 0.8);
	box-shadow: 0 0 8px rgba(255, 160, 0, 0.5);
}

.dd_dawn {
	background: linear-gradient(rgb(128, 192, 255), rgb(255, 255, 255));
	color: rgba(0, 0, 0, 0.8);
	box-shadow: 0 0 8px rgba(255, 255, 128, 0.5);
}

.dd_night {
	background: linear-gradient(rgb(0, 0, 0), rgb(0, 64, 128));
	color: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 8px rgba(200, 200, 255, 0.5);
}

.notice {
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

.illegal,
.danger3,
.c_slum {
	color: rgb(128, 32, 32);
	animation: illeg 1s infinite;
}

@keyframes illeg {

	0%,
	100% {
		color: rgb(128, 32, 32);
	}

	50% {
		color: rgb(255, 64, 64);
	}
}

.c_baby {
	color: rgb(255, 200, 200);
}

.c_kid {
	color: rgb(160, 192, 255);
}

.c_oldfart {
	color: rgb(128, 64, 0);
}

input[type=text] {
	width: 90%;
	margin: auto;
	display: block;
	background-color: rgb(64, 80, 80);
	color: rgb(240, 255, 255);
	border-left: none;
	border-right: none;
	border-bottom: 2px solid rgb(80, 96, 96);
	border-top: 2px solid rgb(48, 64, 64);
	border-bottom-right-radius: 8px;
	padding: 2px !important;
	height: auto !important;
}

input[type=button] {
	border: 1px ridge rgba(128, 160, 160, 0.8);
}

input[type=radio] {
	border-radius: 8px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type=range] {
	margin: 0px;
	margin-bottom: 8px;
	padding: 12px;

	height: 12px;
	background: none;
	border: none;
}

input[type=range]:focus {
	border: none;
	outline: none;
	box-shadow: none;
}

input[type=range]::-moz-focus-outer {
	border: none;
	outline: none;
}

input[type=range]::-moz-range-track {
	width: 100%;
	height: 8px;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.8);
	border-top-left-radius: 10px;
	border: none;
	box-shadow: 0 0 2px 2px rgba(64, 128, 255, 0.5);
	margin: 0;
}

input[type=range]::-moz-range-thumb {
	border: 1px solid rgba(0, 0, 0, 0.5);
	height: 16px;
	width: 16px;
	border-radius: 100%;
	background: rgba(192, 240, 255, 0.8);
	box-shadow: 0 0 3px 3px rgba(64, 128, 255, 0.8);
	border: none;
	cursor: pointer;
}

select {
	border: 1px ridge rgba(128, 160, 160, 0.8);
	background-color: rgb(64, 80, 80);
	color: white;
	border-radius: 0px;
	padding: 4px;
	padding-right: 8px;
	height: auto !important;
	width: 100%;
}

.manutton,
input[type=button] {
	width: 90%;
	height: auto;
	padding: 0.5vh;
	margin: 8px;
	background-color: rgb(24, 24, 72);
	box-shadow: 0 0 2px black;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.5s;
}

.boldy,
.menutton,
.upgradeable,
left,
right,
cent,
.manutton {
	font-weight: bolder;
	color: white;
	text-shadow: -1px -1px 0px black,
		-1px 0px 0px black,
		-1px 1px 0px black,
		0px -1px 0px black,
		0px 0px 0px black,
		0px 1px 0px black,
		1px -1px 0px black,
		1px 0px 0px black,
		1px 1px 0px black;
}

.inboldy,
.lb_menu {
	font-weight: bolder;
	color: black;
	text-shadow: -1px -1px 0px white,
		-1px 0px 0px white,
		-1px 1px 0px white,
		0px -1px 0px white,
		0px 0px 0px white,
		0px 1px 0px white,
		1px -1px 0px white,
		1px 0px 0px white,
		1px 1px 0px white;
}

.c_active {
	color: rgb(0, 255, 128);
}

.c_passive {
	color: rgb(128, 255, 0);
}

.c_bonus {
	color: white;
}

.c_ultimate {
	color: rgb(255, 0, 128);
}

.b_active {
	background-color: rgba(0, 128, 255, 0.5);
}

.b_passive {
	background-color: rgba(128, 255, 0, 0.5);
}

.b_bonus {
	background-color: rgba(255, 255, 255, 0.5);
}

.b_ultimate {
	background-color: rgba(255, 0, 128, 0.5);
}

.danger2 {
	font-weight: bold;
	color: rgb(255, 16, 16);
}

.safe,
.c_fir {
	font-weight: bold;
	color: rgb(0, 255, 96);
}

.mostwanted,
.c_teen {
	animation: mw 1s infinite;
}

@keyframes mw {

	0%,
	100% {
		color: rgb(64, 64, 32);
		text-shadow: -2px -2px 0px rgb(255, 0, 255),
			-1px -1px 0px rgb(255, 0, 255);
	}

	12% {
		color: rgb(128, 64, 64);
		text-shadow: 0px 2px 0px rgb(255, 0, 128),
			0px 1px 0px rgb(255, 0, 128);
	}

	25% {
		color: rgb(255, 64, 128);
		text-shadow: 2px -2px 0px rgb(255, 0, 64),
			1px -1px 0px rgb(255, 0, 64);
	}

	37% {
		color: rgb(128, 64, 64);
		text-shadow: -2px 0px 0px rgb(255, 0, 32),
			-1px 0px 0px rgb(255, 0, 32);
	}

	50% {
		color: rgb(64, 64, 32);
		text-shadow: 2px 2px 0px rgb(255, 0, 32),
			1px 1px 0px rgb(255, 0, 32);
	}

	62% {
		color: rgb(128, 64, 32);
		text-shadow: 0px -2px 0px rgb(255, 0, 64),
			0px -1px 0px rgb(255, 0, 64);
	}

	75% {
		color: rgb(255, 64, 32);
		text-shadow: -2px 2px 0px rgb(255, 0, 128),
			-1px 1px 0px rgb(255, 0, 128);
	}

	87% {
		color: rgb(128, 64, 32);
		text-shadow: 2px 0px 0px rgb(255, 0, 255),
			1px 0px 0px rgb(255, 0, 255);
	}
}

.dangerous {
	animation: dangery 3s infinite;
}

@keyframes dangery {

	0%,
	80%,
	100% {
		background-color: rgba(255, 0, 0, 0.2);
	}

	90% {
		color: rgba(255, 0, 0, 1);
		background-color: rgba(255, 0, 0, 0.5);
	}
}

.critical {
	animation: crit 1s infinite, mw 1s infinite;
}

@keyframes crit {

	0%,
	100% {
		background-color: rgba(255, 0, 0, 0.5);
	}

	50% {
		color: rgba(255, 0, 0, 1);
		background-color: rgba(255, 0, 0, 0.8);
	}
}

.menutton {
	width: 96%;
	height: 50px;
	margin: 2%;
	padding: 8px;
	text-align: center;
	font-size: 1.6em;
	background-color: rgba(24, 24, 72, 0.8);
	box-shadow: 0 0 2px black;
	border: none;

	color: rgba(192, 192, 255, 0.9);
	cursor: pointer;
}

.menutton:hover {
	background-color: rgba(96, 128, 128, 0.8);
	box-shadow: 0 1px 1px black;
}

.menutton:active {
	background-color: rgba(64, 64, 80, 0.8);
	box-shadow: 0 0 2px 2px black;
}

.manutton:hover {
	background-color: rgba(96, 128, 128);
	box-shadow: 0 0 1px 1px black;
	text-align: center;
}

.manutton:active {
	background-color: rgb(32, 40, 40);
	box-shadow: 0 0 1px 1px black;
}

.itemButton {
	width: 96%;
	padding: 2%;
	font-size: 12px;

	border: 2px solid rgba(0, 0, 0, 0.5);
	background-color: rgba(255, 255, 255, 0.2);
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	cursor: pointer;
}

.noselect,
.menutton,
.manutton {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.itemButton:hover {
	background-color: rgba(255, 255, 255, 0.5);
}

.itemButton:active {
	background-color: rgba(200, 255, 255, 0.8);
}

.notice2 {
	width: 100vw;
	height: 100vh;

	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

.notice_message {
	display: none;
	position: fixed;
	top: 5%;
	left: 10%;
	padding: 1% 5%;
	width: 80%;
	height: 80%;
	overflow-y: scroll;
	background-color: rgba(255, 255, 255, 0.8);
	color: rgba(0, 0, 0, 0.8);
	z-index: 99999;
}

meter {
	transition: 2s all;
}

#notice_header {
	text-align: center;
}

.wil {
	background-color: rgba(128, 128, 128, 0.9);
}

.tile_wil {
	background-position: -510px 0px;
}

.tile_woodfloor {
	background-position: -432px 0px;
}

.tile_ironfloor {
	background-position: -456px 0px;
}

.tile_clearfloor {
	background-position: -480px 0px;
}

.fir {
	background-color: rgba(96, 192, 96, 0.9);
}

.tile_fir {
	background-position: -330px 0px;
}

.sec {
	background-color: rgba(192, 96, 96, 0.9);
}

.tile_sec {
	background-position: -360px 0px;
}

.thi {
	background-color: rgba(96, 96, 192, 0.9);
}

.tile_thi {
	background-position: -390px 0px;
}

.mix {
	background-color: rgba(96, 128, 192, 0.9);
}

.tile_mix {
	background-position: -420px 0px;
}

.res {
	background-color: rgba(96, 192, 128, 0.9);
}

.slum {
	background-color: rgba(192, 128, 96, 0.9);
}

.tile_res {
	background-position: -450px 0px;
}

.par {
	background-color: rgba(96, 192, 96, 0.9);
}

.tile_par {
	background-position: -480px 0px;
}

.tra {
	background-color: rgb(0, 0, 0);
}

.sea {
	background-color: rgb(0, 192, 255);
}

.deepsea {
	background-color: rgb(0, 48, 160);
}

.dirt {
	background-color: rgb(192, 96, 0);
}

.stone {
	background-color: rgb(192, 192, 192);
}

.tile_sea {
	height: 24px;
	background-position: -240px 0px;
	animation: sea 2s infinite steps(1);
}

@keyframes sea {
	0% {
		background-position: -240px 0px;
	}

	25% {
		background-position: -240px -24px;
	}

	50% {
		background-position: -240px -48px;
	}

	75% {
		background-position: -240px -72px;
	}
}

.shadow {
	filter: brightness(0);
	-webkit-filter: brightness(0);
	transform: scaleY(-1);
	-webkit-transform: scaleY(-1);

	opacity: 0.2;
}

.tile_grass {
	background-position: -504px 0px;
}

.tile_dirt {
	background-position: -528px 0px;
}

.tile_stonew {
	background-position: -552px 0px;
}

.tile_grasspillar {
	background-position: -600px 0px;
}

.tile_stonepillar {
	background-position: -624px 0px;
}

.tile_sand {
	background-position: -648px 0px;
}

.tile_abyss {
	height: 24px;
	background-position: -672px 0px;
	animation: abyss 2s infinite steps(1);
}

@keyframes abyss {
	0% {
		background-position: -672px 0px;
	}

	25% {
		background-position: -672px -24px;
	}

	50% {
		background-position: -672px -48px;
	}

	75% {
		background-position: -672px -72px;
	}
}

.tile_deepsea {
	height: 24px;
	background-position: -576px 0px;
	animation: deepsea 2s infinite steps(1);
}

@keyframes deepsea {
	0% {
		background-position: -576px 0px;
	}

	25% {
		background-position: -576px -24px;
	}

	50% {
		background-position: -576px -48px;
	}

	75% {
		background-position: -576px -72px;
	}
}

.tile_ice {
	background-position: -696px 0px;
}

.tile_snow {
	background-position: -720px 0px;
}

.tile_pine {
	background-position: -744px 0px;
}

.tile_pines {
	background-position: -768px 0px;
}

.tile_drygrass {
	background-position: -792px 0px;
}

.tile_lava {
	background-position: -816px 0px;
}

.tile_whirl {
	height: 24px;
	background-position: -840px 0px;
	animation: whirl 0.5s infinite steps(8);
}

@keyframes whirl {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.tile_shell_1 {
	background-position: -864px 0px;
}

.tile_shell_2 {
	background-position: -888px 0px;
}

.tile_shell_3 {
	background-position: -912px 0px;
}

.tile_flower_1 {
	background-position: -936px 0px;
}

.tile_flower_2 {
	background-position: -960px 0px;
}

.tile_flower_3 {
	background-position: -984px 0px;
}

.tile_weed {
	background-position: -1008px 0px;
}

.tile_bush {
	background-position: -1032px 0px;
}

.tile_pebbles {
	background-position: -1056px 0px;
}

.tile_dryleaves {
	background-position: -1080px 0px;
}

.tile_deadbush {
	background-position: -1104px 0px;
}

.tile_fossil {
	background-position: -1128px 0px;
}

.tile_snowman {
	background-position: -1152px 0px;
}

.tile_rain {
	background-position: -1176px 0px;
	animation: rain 3s infinite steps(32);
}

.item_matter {
	background-image: url(./img/matter.png);
	width: 24px;
	height: 24px;
	animation: 6s matter infinite steps(1);
}

@keyframes matter {

	0%,
	32%,
	48%,
	56%,
	88% {
		background-position: 0px 0px;
	}

	2%,
	33%,
	48.5%,
	58%,
	88.7% {
		background-position: 0px -24px;
	}

	4%,
	34%,
	49%,
	60%,
	89.5% {
		background-position: 0px -48px;
	}

	6%,
	35%,
	49.5%,
	62%,
	90.2% {
		background-position: 0px -72px;
	}

	8%,
	36%,
	50%,
	64%,
	91% {
		background-position: 0px -96px;
	}

	10%,
	37%,
	50.5%,
	66%,
	91.7% {
		background-position: 0px -120px;
	}

	12%,
	38%,
	51%,
	68%,
	92.5% {
		background-position: 0px -144px;
	}

	14%,
	39%,
	51.5%,
	70%,
	93.2% {
		background-position: 0px -168px;
	}

	16%,
	40%,
	52%,
	72%,
	94% {
		background-position: 0px -192px;
	}

	18%,
	41%,
	52.5%,
	74%,
	94.7% {
		background-position: 0px -216px;
	}

	20%,
	42%,
	53%,
	76%,
	95.5% {
		background-position: 0px -240px;
	}

	22%,
	43%,
	53.5%,
	78%,
	96.2% {
		background-position: 0px -264px;
	}

	24%,
	44%,
	54%,
	80%,
	97% {
		background-position: 0px -288px;
	}

	26%,
	45%,
	54.5%,
	82%,
	97.7% {
		background-position: 0px -312px;
	}

	28%,
	46%,
	55%,
	84%,
	98.5% {
		background-position: 0px -336px;
	}

	30%,
	47%,
	55.5%,
	86%,
	99.25% {
		background-position: 0px -360px;
	}
}

.overlay {
	pointer-events: none;
	font-size: 8px;
}

.void {
	display: none;
}

@keyframes rain {
	0% {
		background-position: -1176px 0px;
	}

	25% {
		background-position: -1176px 48px;
	}

	50% {
		background-position: -1176px 96px;
	}

	75% {
		background-position: -1176px 144px;
	}

	100% {
		background-position: -1176px 192px;
	}
}

.tile_thunder {
	background-position: -1200px 0px;
	animation: thunder 1s infinite steps(32);
}

@keyframes thunder {
	0% {
		background-position: -1200px 0px;
	}

	25% {
		background-position: -1200px 48px;
	}

	50% {
		background-position: -1200px 96px;
	}

	75% {
		background-position: -1200px 144px;
	}

	100% {
		background-position: -1200px 192px;
	}
}

.tile_snowy {
	background-position: -1224px 0px;
	animation: snowy 10s infinite steps(32);
}

@keyframes snowy {
	0% {
		background-position: -1224px 0px;
	}

	25% {
		background-position: -1224px 48px;
	}

	50% {
		background-position: -1224px 96px;
	}

	75% {
		background-position: -1224px 144px;
	}

	100% {
		background-position: -1224px 192px;
	}
}

.tile_ore_Cd {
	background-position: -1248px 0px;
}

.tile_ore_Hg {
	background-position: -1272px 0px;
}

.tile_ore_Pb {
	background-position: -1296px 0px;
}

.tile_ore_As {
	background-position: -1320px 0px;
}

.tile_ore_Mn {
	background-position: -1344px 0px;
}

.tile_ore_Cr {
	background-position: -1368px 0px;
}

.tile_ore_Co {
	background-position: -1392px 0px;
}

.tile_ore_Ni {
	background-position: -1416px 0px;
}

.tile_ore_Cu {
	background-position: -1440px 0px;
}

.tile_ore_Zn {
	background-position: -1464px 0px;
}

.tile_ore_Se {
	background-position: -1488px 0px;
}

.tile_ore_Ag {
	background-position: -1512px 0px;
}

.tile_ore_Sb {
	background-position: -1536px 0px;
}

.tile_ore_Tl {
	background-position: -1560px 0px;
}

/* Floor Ores */
.tile_oref_Cd {
	background-position: -1248px -48px;
}

.tile_oref_Hg {
	background-position: -1272px -48px;
}

.tile_oref_Pb {
	background-position: -1296px -48px;
}

.tile_oref_As {
	background-position: -1320px -48px;
}

.tile_oref_Mn {
	background-position: -1344px -48px;
}

.tile_oref_Cr {
	background-position: -1368px -48px;
}

.tile_oref_Co {
	background-position: -1392px -48px;
}

.tile_oref_Ni {
	background-position: -1416px -48px;
}

.tile_oref_Cu {
	background-position: -1440px -48px;
}

.tile_oref_Zn {
	background-position: -1464px -48px;
}

.tile_oref_Se {
	background-position: -1488px -48px;
}

.tile_oref_Ag {
	background-position: -1512px -48px;
}

.tile_oref_Sb {
	background-position: -1536px -48px;
}

.tile_oref_Tl {
	background-position: -1560px -48px;
}

left,
right,
cent {
	position: absolute;
	z-index: 99;
	top: 0px;
	font-size: 0.8vw;
}

.upgradeable {
	cursor: pointer;
}

.upgradeable:hover {
	background-color: rgba(0, 255, 0, 0.2);
}

.upgradeable:active {
	background-color: rgba(0, 128, 0, 0.5);
}

.non_upgradeable {
	cursor: not-allowed;
}

left {
	text-align: left;
	left: 0px;
}

cent {
	width: 100%;
	text-align: center;
	left: auto;
	right: auto;
	top: -0%;
}

right {
	text-align: right;
	right: 0px;
}

dynbar {
	display: inline-block;
	height: 16px;
	position: relative;
	top: 0px;
	left: 0px;
	transition: width 0.5s;
	border-bottom-right-radius: 4px;
}

dynbarh {
	height: 16px;
	display: inline-block;
	width: 100%;
	position: relative;
	left: 0px;

	background-color: rgba(128, 128, 128, 0.5);
	box-shadow: 2px 2px 0px 1px rgba(0, 0, 0, 0.5);
}

bar {
	border-radius: 8px;
	background-color: rgba(128, 128, 128, 0.2);
	display: block;
	width: 100%;
	height: 20px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
	position: relative;
}

filled {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	background: linear-gradient(rgb(255, 64, 0), rgb(250, 96, 32));
	display: inline-block;
	text-align: right;
	font-size: 10px;
	height: 20px;
	margin: 0;
	padding: 4px;
	top: 0px;
	left: 0px;
	position: absolute;
}

cfgmodule {
	float: left;
	width: 95%;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 2px;
	padding: 2%;
	margin: 2%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 10px;
}

cfgmodule output {
	font-size: 10px;
	float: right;
}

li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	margin: 2px;
	padding: 2px;
}

lr,
cen {
	display: block;
	width: 98%;
	height: 1px;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
	margin: 1%;
}

cen {
	font-weight: bolder;
	text-align: center;
	font-size: 16px;
	height: auto;
}

#log_where {
	position: relative;
	top: -36.5px;
	left: -4px;
	height: 24px;
	padding-left: 8px;
	padding-right: 8px;
	background-color: black;
	border-top-right-radius: 16px;
	border: 1px solid rgba(144, 166, 255, 0.4);
	border-bottom-color: transparent;
}

#log_history {
	width: 75%;
	position: absolute;
	top: 0px;
	left: 0px;
}

#log_story {
	width: 25%;
	position: absolute;
	top: 0px;
	right: 0px;
}

.form-control {
	font-size: 10px;
	padding: 2px !important;
}

.boldy,
.upgradeable,
left,
right,
cent,
.manutton {
	font-weight: bolder;
	color: white;
	text-shadow: -1px -1px 0px black,
		-1px 0px 0px black,
		-1px 1px 0px black,
		0px -1px 0px black,
		0px 0px 0px black,
		0px 1px 0px black,
		1px -1px 0px black,
		1px 0px 0px black,
		1px 1px 0px black;
}

.item {
	width: 31px;
	height: 31px;
	display: inline-block;
}

.notification {
	color: white;
	background-color: rgba(0, 0, 0, 0.8) !important;
	border-radius: 0px;
	border: none !important;
	padding: 4px !important;
	margin: 4px !important;
	font-size: 10px;
}

action {
	height: 32px;
	padding: 5px;
	width: 100%;
	font-size: 80%;
	text-overflow: ellipsis;
	display: block;
	border: 1px solid transparent;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

action:hover {
	color: black;
	background-color: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.gleft {
	left: 0px;
}

.gright {
	right: 0px;
}

#gamebars {
	padding: 5px;
	top: 0;
	left: 0;
	position: fixed;
	width: 20vw;

	z-index: 999999999;
	display: none;
}

dynbarh {
	background-color: transparent;
}

#gamelog {
	padding: 8px;
	bottom: 1px;
	left: 13vw;
	position: fixed;
	width: 75vw;
	height: 23vh;
	background-color: black;
	border: 1.5px solid rgba(144, 166, 255, 0.4);
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	box-sizing: border-box;
	font-size: 1.5em;
	color: rgba(192, 255, 255, 0.8);
	text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
	z-index: 500000000;
	display: none;
}

.glow,
#gamelog,
.menutton,
h2,
.label,
.notification {
	color: rgba(255, 255, 255, 1);
	text-shadow: 0 0 2px rgba(144, 166, 255, 0.8);
}

.text-success,
grin,
.grin {
	color: rgb(0, 255, 0);
	text-shadow: 0 0 2px rgba(0, 255, 0, 0.5);
}

.text-info,
blu,
.blu {
	color: rgb(0, 255, 255);
	text-shadow: 0 0 2px rgba(0, 255, 255, 0.5);
}

.text-warning,
yelo,
.yelo {
	color: rgb(255, 255, 0);
	text-shadow: 0 0 2px rgba(255, 255, 0, 0.5);
}

.text-danger,
red,
.red {
	color: rgb(255, 0, 0);
	text-shadow: 0 0 2px rgba(255, 0, 0, 0.5);
}

.text-muted,
gray,
.gray {
	color: rgb(128, 128, 128);
	text-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}

#gamelog div {
	padding: 5px;
}

.menutton:hover,
.manutton:hover {
	background-color: rgba(32, 32, 96, 0.8);
}

.menutton:active,
.manutton:active {
	background-color: rgba(0, 0, 32, 0.8);
}

.leftbar,
#charainfo,
.menubar {
	background-color: rgba(16, 16, 48);
}

h2 {
	text-align: center;
	color: white;
	font-weight: bolder;
}

menu {
	z-index: 9;
	width: 66vw;
	left: 17vw;
}

.label {
	font-family: monospace;
	font-size: 80% !important;
	padding: none !important;
	vertical-align: none !important;
	width: 1em !important;
	height: 1em !important;
}

.label-default {
	color: white !important;
	background-color: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.8);
}

canvas {
	position: absolute;
	top: 0;
	left: 0 !important;
	right: 0;
	bottom: 0;
	margin: auto;
}

#moving {
	width: 100%;
	display: none;
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 8px;
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
}

ctxmenu {
	position: fixed;
	display: none;
	left: 0;
	top: 0;
	padding: 4px 8px;
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	width: auto;
	height: auto;
	border-bottom: 2px solid rgba(0, 0, 0, 0.5);
	border-top: 2px solid rgba(0, 0, 0, 0.2);
}

ctxaction {
	cursor: pointer;
	padding: 4px;
	color: rgba(255, 255, 255, 0.8);
	display: block;
	white-space: nowrap;
}

ctxaction:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

#game_menu {
	z-index: 9999;
}

#start {
	display: none;
}