@font-face{
	font-family: "pixel";
	src: url('../pixel.ttf');
}
@font-face{
	font-family: "big_pixel";
	src: url('../big_pixel.ttf');
}
body {
	background-image: url("../img/bedrock.png");
	background-size: 8rem;
	background-color: #404040;
	image-rendering: pixelated;
	image-rendering: crisp-edges;/*One or the other will work, hopefully.*/
	font-family: pixel;
	margin: 0;
	overflow: hidden;
}
input {
	font-family: pixel;
}

.deprecated {
	display: none;
}

#mapcontainer {
	margin: auto;
	width: 1152;
	height: 640px;
	position: relative;
	border-style: solid;
	border-width: 4px;
	margin-bottom: 3rem;
}
#mapcontainer>canvas {
	position: absolute;
}
#mcmap {
	background-image: url("../img/stone.png");
	background-size: 8rem;
	background-color: #808080;
	image-rendering: pixelated;
	image-rendering: crisp-edges;/*One or the other will work, hopefully.*/
}
#mcmap.pointer {
	cursor: pointer;
}
#overlay {
	pointer-events: none;
}
#points {
	pointer-events: none;
}
#tileStorage {
	display: none;
}
#infoTxtBox {
	padding: 0.33333em 0 1em;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	background-color: #404040;
	color: #ffffff;
	font-size: 0.75rem;
	visibility: hidden;
	white-space: pre-wrap;
}
#infoTxtBox.shown {
	visibility: visible;
}
#infoTxt {
	width: calc(100% - 10em);
	margin-left: 5em;
	margin-top: 1em;
	display: inline-block;
}
#editpin {
	float: right;
	margin-right: 1rem;
	text-decoration: underline;
	cursor: pointer;
	visibility: hidden;
}
#editpin.shown {
	visibility: visible;
}
#jumpMenu {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(32,32,32,0.5);
	visibility: hidden;
}
#jumpMenu.shown {
	visibility: visible;
}
#jumpMenu>div:nth-child(1) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#jumpMenu>div:nth-child(2) {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #404040;
	padding: 1em;
	text-align: center;
}
#jumpMenu>div>div {
	margin: 1em 0;
}
#infoMenu {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(32,32,32,0.5);
	visibility: hidden;
}
#infoMenu.shown {
	visibility: visible;
}
#infoMenu>div:nth-child(1) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#infoMenu>div:nth-child(2) {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #404040;
	padding: 1em;
	text-align: center;
}
.trpMenu {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(32,32,32,0.5);
	visibility: hidden;
}
.trpMenu.shown {
	visibility: visible;
}
.trpMenu>div:nth-child(1) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.trpMenu>div:nth-child(2) {
	position: absolute;
	top: 4rem;
	left: 4rem;
	width: calc(100% - 10rem);
	height: calc(100% - 10rem);
	background-color: #404040;
	padding: 1em;
	overflow-y: scroll;
}
.trpMenu input[type=text], .trpMenu input[type=number] {
	width: 10em;
}
#genericMenu {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(32,32,32,0.5);
	visibility: hidden;
}
#genericMenu.shown {
	visibility: visible;
}
#genericMenu>div:nth-child(1) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#genericMenu>div:nth-child(2) {
	position: absolute;
	top: 4rem;
	left: 4rem;
	width: calc(100% - 10rem);
	height: calc(100% - 10rem);
	background-color: #404040;
	padding: 1em;
	overflow-y: scroll;
}
#genericMenu input, #genericMenu label {
	display: block;
	margin: 0.25em;
}
#genericMenu input[type=text], #genericMenu input[type=number] {
	width: 10em;
}
#commanderMenu {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(32,32,32,0.5);
	visibility: hidden;
}
#commanderMenu.shown {
	visibility: visible;
}
#commanderMenu>div:nth-child(1) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#commanderMenu>div:nth-child(2) {
	position: absolute;
	top: 4rem;
	left: 4rem;
	width: calc(100% - 10rem);
	height: calc(100% - 10rem);
	background-color: #404040;
	padding: 1em;
	overflow-y: scroll;
}
#commanderMenu input[type=text], #commanderMenu input[type=number] {
	width: 10em;
}
.tab {
	float: left;
	margin-right: 0.25rem;
}
.tab .tabbit {
	background-color: #606060;
}
.tab.active .tabbit {
	background-color: #808080;
}
.tab .tab-content {
	display: none;
	position: absolute;
	top: 2.5em;
	left: 1em;
	width: calc(100% - 3em);
	height: calc(100% - 4.5em);
	padding: 0.5rem;
	overflow: scroll;
}
.tab.active .tab-content {
	display: block;
}
.tab .tab-tab {
	padding: 0.125rem 0.25rem;
	cursor: pointer;
	border-radius: 0.25em 0.25em 0 0;
}
.tab input[type=submit] {
	background: #404040;
}
#comm-spec input[type=checkbox] {
	all:unset;
}
#comm-spec input:not(:checked) ~ span::before {
	content: url("img/nocheck.png");
}
#comm-spec input:checked ~ span::before {
	content: url("img/check.png");
}
.divider {
	height: 0px;
	border-style: solid;
	border-width: 1px;
}
.divider>span {
	background-color: #404040;
	display: inline-block;
	padding: 0px 0.5em;
	transform: translate(0%,-0.5em);
}
#instr {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #404040;
	background-image: url("../img/bedrock.png");
	background-size: 8rem;
	visibility: visible;
}
#instr.hide {
	visibility: hidden;
}
#instr>div:nth-child(1) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#instr>div:nth-child(2) {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #404040;
	padding: 1em;
}
#pinMenu {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(32,32,32,0.5);
	visibility: hidden;
}
#pinMenu.shown {
	visibility: visible;
}
#pinMenu>div:nth-child(1) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#pinMenu>div:nth-child(2) {
	position: absolute;
	top: 4rem;
	left: 4rem;
	width: calc(100% - 10rem);
	height: calc(100% - 10rem);
	background-color: #404040;
	padding: 1em;
	overflow-y: scroll;
}
#pinMenu input[type=text] {
	width: 20em;
}
#pinMenu input.submit[type=submit] {
	display: none;
}
#pinMenu.create input.submit-create[type=submit] {
	display: inline-block;
}
#pinMenu.change input.submit-change[type=submit] {
	display: inline-block;
}
#pin-desc {
	height: 12em;
	width: 20.25em;
	resize: none;
}
.icondata {
	display: none;
}
.icondata.shown {
	display: block;
}
dt {
	margin-top: 0.5em;
}
#sideMenu {
	position: absolute;
	background-color: #202020;
	border-radius: 0px 0px 0px 0.75rem;
	right: 0;
	top: 0;
	opacity: 0.75;
}
#body.mobile #sideMenu {
	border-radius: 0px 0px 0px 2rem;
}
button {
	all: unset;
}
input[type=submit] {
	all: unset;
	padding: 0.5em;
	font-size: 1.25em;
	background-image: url("./img/stone.png");
	background-size: 4em;
	color: #000000;
	cursor: pointer;
}
input[type=number], input[type=text], textarea {
	all: unset;
	background-color: #E0E0E0;
	border-style: solid;
	border-radius: 0.25em;
	border-width: 1px;
	border-color: #000000;
	padding: 0.125em;
	text-align: left;
	display: inline-block;
	color: #202020;
}
input[type=number], input[type=text] {
	width: 5em;
	height: 1em;
}
#sideMenu button {
	image-rendering: initial;
	display: block;
	margin-top: 1.5rem;
	width: 3rem;
	height: 3rem;
}
#body.mobile #sideMenu button {
	margin-top: 4rem;
	width: 8rem;
	height: 8rem;
}
#sideMenu #infoButton {
	cursor: pointer;
	background-image: url("img/info.png");
	background-size: 100%;
}
#sideMenu #infoButton.hide {
	display: none;
}
#sideMenu #jumpButton {
	cursor: pointer;
	background-image: url("img/jump.png");
	background-size: 100%;
}
#sideMenu #pinButton {
	cursor: pointer;
	background-image: url("img/pin.png");
	background-size: 100%;
}
#sideMenu #pinButton.active {
	background-image: url("img/pin2.png");
}
#sideMenu #addPinButton {
	cursor: pointer;
	background-image: url("img/pin3.png");
	background-size: 100%;
}
#sideMenu #addTroopButton {
	cursor: pointer;
	background-image: url("img/troop.png");
	background-size: 100%;
}
#sideMenu #commanderBtn {
	cursor: pointer;
	background-image: url("img/commander.png");
	background-size: 100%;
}
#sideMenu #loginButton {
	cursor: pointer;
	background-image: url("img/login.png");
	background-size: 100%;
}
.mobile #infoTxt {
	font-size: 1.5rem;
}
#jumpMenuMobile {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #404040;
	visibility: hidden;
	font-size: 3rem;
}
#jumpMenuMobile.shown {
	visibility: visible;
}
#jumpMenuMobile>div:nth-child(1) {
	float: right;
	margin: 2rem;
	background-image: url("img/X.png");
	background-size: 100%;
	width: 8rem;
	height: 8rem;
}
#jumpMenuMobile>div:nth-child(2) {
	position: absolute;
	top: 50%;
	left: 5%;
	width: 90%;
	transform: translate(0%, -50%);
	text-align: center;
}
#jumpPinMobile {
	font-size: 2rem;
}
#jumpMenuMobile>div>div {
	margin: 1em 0;
}
#jumpMenuMobile input {
	height: em;
}
#trpnspritecnv {
	cursor: pointer;
}
#trpnspritecnv:hover {
	background-color: rgba(128,128,128,128)
}
#spritemenu {
	position: absolute;
	z-index: 10;
	width:calc(4 * 64px);
	height:calc(1.5 * 64px);
	background-color: #808080;
	overflow-y: scroll;
	display: none;
}
#spritemenu.show {
	display: block;
}
#spritemenu canvas {
	float: left;
	cursor: pointer;
}
#spritemenu canvas:hover {
	background-color: rgba(255,255,255,128);
}
#pinspritecnv {
	cursor: pointer;
}
#pinspritecnv:hover {
	background-color: rgba(128,128,128,128)
}
#pinspritemenu {
	position: absolute;
	z-index: 10;
	width:calc(8 * 48px);
	height:calc(2.5 * 48px);
	background-color: #808080;
	overflow-y: scroll;
	display: none;
}
#pinspritemenu.show {
	display: block;
}
#pinspritemenu canvas {
	float: left;
	cursor: pointer;
}
#pinspritemenu canvas:hover {
	background-color: rgba(255,255,255,128);
}
.banner {
	margin: 1rem 0rem 0rem;
	padding: 0.5em;
	width: 100%;
	background-image: url('../img/planks_birch.png');
	background-size: 4rem;
	text-align: center;
	visibility: hidden;
	animation: bannerfade 5s;
	z-index: 20;
}
@keyframes bannerfade{
	0% {visibility: visible; opacity: 0}
	10% {visibility: visible; opacity: 1}
	80% {visibility: visible; opacity: 1}
	100% {visibility: visible; opacity: 0}
}
#bannerholder {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 16rem);
	height: calc(100% - 1rem);
	padding: 1rem 8rem 0;
	visibility: hidden;
	z-index: 10;
}
#editbtn {
	visibility: hidden;
}
#editbtn.show {
	visibility: visible;
}
span[onclick] {
	cursor: pointer;
	text-decoration: underline;
}
ul {
	list-style: none outside;
	padding: 0;
}
label {
	cursor: pointer !important;
}
.card {
	margin: 1rem;
	border-radius: 1rem;
	background-color: #c0c0c0;
	position: relative;
	color: #202020;
	overflow: hidden;
}
.card a {
	color: inherit;
}
.card table {
	width: 100%;
}
.card table tr:nth-child(1)>td:nth-child(1) {
	image-rendering: initial;
	background-size: auto 100%;
	background-position: center;
	width: 10%;
	background-repeat: no-repeat;
}
.card table tr:nth-child(1)>td:nth-child(1).flag {
	image-rendering: pixelated;
	image-rendering: crisp-edges;/*One or the other will work, hopefully.*/
	min-width: 7.5rem;
}
table {
	color: inherit;
}
.card ul {
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
	list-style-type: none;
}
.card .postmeta {
	position: relative;
	top: 0;
	border-style: none none solid;
	text-align: center;
	overflow: auto;
	padding: 1rem;
	height: 0.5rem;
}
.card .h {
	display: inline-block;
	font-size: 1.5rem;
	font-weight: bold;
	position: absolute;
	bottom: 0;
	left: 1rem;
	text-decoration: none;
}
.card .topic {
	display: inline-block;
	position: absolute;
	left: 50%;
	transform: translate(-25%,0);
	bottom: 0;
}
.card .time, .card .unit {
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: 1rem;
}
.card .stuffing{
	white-space: pre-wrap;
	padding: 1rem 1.5rem 1rem 1rem;
}
.card .stuffing.long:not(.extended) {
	overflow: hidden;
	height: 9.75em;
}
.card .show {
	margin-left: 1rem;
	opacity: 0.5;
	cursor: pointer;
	display: inline-block;
}
.card textarea {
	all: unset;
	border-width: 1px;
	border-radius: 0.25rem;
	padding: 0.25rem;
	width: 100%;
	height: 9rem;
	margin: 1px;
}
.card textarea:focus {
	border-style: solid;
	margin: 0px;
}
.card .footer {
	margin-top: -1.5rem;
	padding: 1rem 1.5rem 1rem 1rem;
	height: 1rem;
}
.card .footer>* {
	display: inline-block;
}
.card>.footer>.edit, .card>.footer>.delete {
	float: right;
	visibility: hidden;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.card>.footer>.delete {
	margin-left: 0.5rem;
}
.card:hover>.footer>.edit, .card:hover>.footer>.delete {
	visibility: visible;
}
*[title]:not(option):not(#commanderMenu *)::before {
	content:"";
	background-image: url("img/pointer.png");
	display:inline-block;
	background-size:0.5em;
	height:0.5em;
	width:0.5em;
	margin-right: 0.125em;
	image-rendering: initial;
}
*[title] {
	cursor: help;
}

 /* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 1.75em;
	height: 1em;
	vertical-align: middle;
}
/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #999;
	-webkit-transition: background-color .4s;
	transition: background-color .4s;
	border-radius: 1em;
}
.slider:before {
	position: absolute;
	content: "";
	height: 0.75em;
	width: 0.75em;
	left: 0.125em;
	bottom: 0.125em;
	background-color: #fff;
	-webkit-transition: background-color .4s, transform .4s, -ms-transform .4s, -webkit-transform .4s;
	transition: background-color .4s, transform .4s, -ms-transform .4s, -webkit-transform .4s;
	border-radius: 50%;
}
input:checked + .slider {
	background-color: #8af;
}
input:focus + .slider {
	box-shadow: 0 0 1px #444;
}
input:checked + .slider:before {
	-webkit-transform: translateX(0.75em);
	-ms-transform: translateX(0.75em);
	transform: translateX(0.75em);
	background-color: #06f;
}