@font-face{
	font-family: "pixel";
	src: url('pixel.ttf');
}
@font-face{
	font-family: "big_pixel";
	src: url('big_pixel.ttf');
}
body {
	position: relative;
	margin: 0;
	color: #40f0c0;
	background-color: #000000;
	image-rendering: pixelated;
	image-rendering: crisp-edges;/*One or the other will work, hopefully.*/
	font-family: pixel;
	overflow: hidden;
}
::selection {
	background-color: #219255;
}
input, select, option {
	font-family: pixel;
}
input[type=hidden] {
	display: none;
}
#wrapper {
	height: calc(100% - 6rem);
	overflow-y: auto;
	overflow-x: hidden;
	perspective: 1000000rem;
	padding: 0 0 1rem;
}
#navigation {
	width: 100%;
	height: 6rem;
	background-color: #808080;
}
#navbarwrapper {
	width: 100%;
	z-index: 1;
	top: 0;
}
#text, #postoptions, #settings, #people, #body, #nations {
	margin: 1rem auto 1rem;
	padding: 1rem 0;
	width: 90%;
	background-image: url("./img/planks_birch.png");
	background-size: 4em;
	min-height: 50%;
	color: #000000;
}
#settingscontainer {
	margin: 0 1rem;
}
#settings input {
	margin-top: 1.5rem;
	font-size: 1rem;
	display: block;
}
#settings select {
	display: block;
}
.card {
	margin: 1rem;
	border-radius: 1rem;
	background-color: #40f0c0;
	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 td .stuffing {
	width: calc(100% - 3.8rem)
}
.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 .postmeta select {
	all: unset;
}
.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;
}
input[type=submit], input[type=button] {
	all: unset;
	padding: 0.5em;
	font-size: 1.25em;
	background-image: url("./img/stone.png");
	background-size: 4em;
	color: #000000;
	cursor: pointer;
}
#stars1 {
	background-image: url("./img/stars.png");
	background-size: 768px;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: -1;
	-webkit-transform: translateZ(-1000000rem) scale(2);
	transform: translateZ(-1000000rem) scale(2);
}
#stars2 {
	background-image: url("./img/stars.png");
	background-size: 512px;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: -2;
	-webkit-transform: translateZ(-2000000rem) scale(3);
	transform: translateZ(-2000000rem) scale(3);
}
#stars3 {
	background-image: url("./img/stars.png");
	background-size: 256px;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: -3;
	-webkit-transform: translateZ(-3000000rem) scale(4);
	transform: translateZ(-3000000rem) scale(4);
}
#pages {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 6rem;
}
#pages>a, #pages>span {
	display: inline-block;
	position: relative;
	font-size: 1.5rem;
	height: 2rem;
	padding: 2rem 1rem;
	color: #000000;
	text-decoration: none;
	cursor: pointer;
}
#pages>a:nth-child(1), #pages>span:nth-child(1) {
	background-image: url("./img/title.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 4rem;
	image-rendering: initial;
	color: rgba(0,0,0,0);
	width: 10rem;
	padding-left: 2rem;
}
#pages>a:hover, #pages>span:hover {
	background-color: rgba(255,255,255,0.25);
}
#pages>a>.dropdown, #pages>span>.dropdown {
	top: 100%;
	font-size: 1rem;
	color: #40f0c0;
}
#sort, #nationpages {
	width: 100%;
	height: 1.5rem;
	background-color: #a0a0a0;
}
#sort>a, #sort>span, #nationpages>a, #nationpages>span {
	display: inline-block;
	position: relative;
	font-size: 1rem;
	height: 1.5rem;
	padding: 0rem 1rem;
	color: #000000;
	text-decoration: none;
	cursor: pointer;
}
#sort>a:nth-child(1), #sort>span:nth-child(1), #nationpages>a:nth-child(1), #nationpages>span:nth-child(1) {
	padding-left: 2rem;
}
#sort>a:hover, #sort>span:hover, #nationpages>a:hover, #nationpages>span:hover {
	background-color: rgba(255,255,255,0.25);
}
#sort>a>.dropdown, #sort>span>.dropdown, #nationpages>a>.dropdown, #nationpages>span>.dropdown {
	top: 100%;
	font-size: 1rem;
	color: #40f0c0;
}
#status {
	width: 100%;
	background-color: #909090;
}
#serverstatus {
	display: inline-block;
	min-height: 1.5em;
	min-width: 1em;
	text-indent: 2em;
	background-image: url("./img/status_yellow.png");
	background-size: 1em;
	background-repeat: no-repeat;
	margin-left: 2em;
	image-rendering: auto;
}
#serverstatus.fail {
	background-image: url("./img/status_grey.png");
}
#serverstatus.on {
	background-image: url("./img/status_green.png");
}
#serverstatus.off {
	background-image: url("./img/status_red.png");
}
#serverstatus.waiting {
	background-image: url("./img/status_yellow.png");
}
#serverstatus.clickable {
	cursor: pointer;
}
#options {
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 0.5rem;
	height: 5rem;
	width: 5rem;
}
#postbutton {/* No longer in use. */
	position: relative;
	top: -5rem;
	left: 0rem;
	height: 5rem;
	width: 5rem;
	background-image: url("./img/post.png");
	background-size: 5rem;
	margin-right: 1rem;
	image-rendering: auto;
}
#profile {
	cursor: pointer;
	position: relative;
	top: 0rem;
	left: 0rem;/* change to 6 if using #postbutton */
	height: 5rem;
	width: 5rem;
	background-image: url("./img/steve.png"), url("./img/steve.png");
	background-size: 40rem auto;
	background-position: -25rem -5rem, -5rem -5rem;
}
#nations input[type=text], #nations input[type=number] {
	all: unset;
	border-width: 1px;
	border-radius: 0.25rem;
	padding: 0.25rem;
	height: 1.125em;
	margin: 1px;
	text-align: left;
}
#nations input[type=number] {
	width: 8em;
}
#nations input[type=text]:focus, #nations input[type=number]:focus {
	border-style: solid;
	margin: 0px;
}
img#flag, img#flagimg {
	height: 6em;
	width: auto;
}
.lighten {
	visibility: hidden;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	opacity: 0.25;
}
div:hover>.lighten {
	visibility: visible;
}
body:not(.show-maya) .maya {
	display: none;
}
body.show-maya .non-maya {
	display: none;
}
.dropdown {
	display: none;
	position: absolute;
	right: 0;
	background-color: #404040;
	padding: 0.325rem 0;
	z-index: 100;
}
.dropdown-left {
	left: 0;
	right: initial;
}
.dropdown-right {
	right: 0;
}
.dropdown>a:visited {
	all: unset;
	cursor: pointer;
}
.dropdown>a {
	all: unset;
	cursor: pointer;
	white-space: nowrap;
	padding: 0.125rem 0.5rem;
	display: block;
}
.dropdown>input, .dropdown>button {
	margin: 0.125rem 0.5rem;
}
.dropdown>a input[type=submit], .dropdown>a form {
	all: unset;
}
.dropdown>a:hover {
	background-color: rgba(255,255,255,0.25);
}
div:hover>.dropdown, span:hover>.dropdown {
	display: block;
}
::placeholder {
	color: inherit;
	opacity: 1;
}
.banner {
	visibility: hidden;
	background-color: blue;
	width: 50%;
	position: absolute;
	left: 0;
	right: 0;
	margin: 1rem auto 0;
	padding: 1em;
	text-align: center;
	background-image: url("./img/stone.png");
	background-size: auto 100%;
	animation: bannerfade 10s;
	animation-timing-function: linear;
	z-index: 1;
}
@keyframes bannerfade{
	0% {visibility: visible; opacity: 1}
	90% {visibility: visible; opacity: 1}
	100% {visibility: visible; opacity: 0}
}
.scriptbanner {
	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: scriptbannerfade 5s;
	z-index: 20;
	color: #000000;
}
@keyframes scriptbannerfade{
	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;
}
.falling {
	position: absolute;
	margin: 0;
	z-index: 100;
}
.notthere {
	visibility: hidden !important;
}
#h {
	font-weight: bold;
	font-size: 1.5em;
	margin: 2rem;
}
#gridHold {
	width: calc(100% - 4rem);
	margin: auto;
	min-height: calc(100% - 15rem);
}
#gridHold.loading {
	background-color: #808080;
}
#gridHold>span {
	display: block;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}
#blocker {
	position: absolute;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background-color: #808080;
	text-align: center;
	padding: 5rem 0;
	cursor: pointer;
}
.editrow td:not(:nth-child(1)):not(:nth-child(9)) {
	cursor: pointer;
}
*[title]::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;
}
.mobilemenu {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #0C0C10;
	top: 0px;
	right: 0px;
	visibility: hidden;
	font-size: 2em;
}
.mobilemenu>a {
	display: block;
	width: 100%;
	font-size: 0.75em;
	color: inherit;
	text-decoration: none;
}
.mobilemenu>a:nth-child(odd) {
	background-color: #303040
}
.mobilemenu>p:nth-child(1) {
	font-size: 0.5em;
}
.mobilemenu>a>div {
	padding: 0.25em;
}
.mobilemenu.shown {
	visibility: visible;
}
.mobilemenu a, .mobilemenu *[onclick] {
	cursor: pointer;
}

@media (max-width: 49.625em) {
	#pages>a {
		display: none;
	}
	#pages {
		width: 10rem;
	}
	#sort, #nationpages {
		height: 2rem;
	}
	#sort>a, #sort>span, #nationpages>a, #nationpages>span {
		font-size: 1.5rem;
		height: 2rem;
		padding: 0;
		width: 32.25%;
		text-align: center;
		padding-left: 0 !important;
	}
	#sort>a>*, #sort>span>*, #nationpages>a>*, #nationpages>span>* {
		text-align: left;
	}
	#stars1 {
		display: none;
	}
	#stars2 {
		display: none;
	}
	#stars3 {
		display: none;
	}
	.card .postmeta {
		position: relative;
		text-align: left;
		padding: 0 1rem;
		height: auto;
	}
	.card .h {
		display: block;
		position: static;
		font-size: 1.5rem;
		font-weight: bold;
		text-decoration: none;
	}
	.card .topic {
		display: none;
		position: static;
		transform: none;
	}
	.card .time, .card .unit {
		display: none;
		position: static;
	}
	.card .postmeta.extended .topic {
		display: block;
	}
	.card .postmeta.extended .time, .card .postmeta.extended .unit {
		display: block;
	}
}
@media (max-width: 28em) {
	#text, #postoptions, #settings, #people, #body, #nations {
		margin: 1rem 5vw;
		width: 90vw;
	}
	.card {
		margin: 3.5714285714285716vw;
		border-radius: 3.5714285714285716vw;
	}
	.card .h {
		font-size: 5.357142857142857vw;
	}
}