/* GENERIC ELEMENTS */
:root {
	--bg1: #FFF1;
	--bg2: #FFF2;
	--text: #FFF;
	--status-offline: #FFF2;
	--status-online: #4F4;
	--status-afk: #F84;
	--error: #F44;
}

a {
	color: inherit;
}

.webstats-tableheading {
	margin-top: 20px;
	font-size: 1.5em;
	font-weight: bold;
}

.webstats-tableheading > .webstats-pagination {
	margin-left: 50px;
}
.webstats-tableheading > .webstats-pagination * {
	margin-right: 3px;
}
.webstats-pagination.pagination-hidden {
	display: none;
}

.webstats-error-message {
	color: var(--error);
}

table {
	border-spacing: 2px;
}

html.hide-offline tr.offline {
	display: none;
}

tr.current-player {
	font-weight: bold;
}

td:not(.empty) {
	position: relative;
	height: 50px;
	padding: 0px 30px;
	background: var(--bg1);
	text-align: right;
	-webkit-transition: height 0.2s, padding 0.2s;
	transition: height 0.2s, padding 0.2s;
}

td:not(.empty)[objective=Player] {
	text-align: left;
	padding-left: 40px;
}

td.skin {
	padding: 0px !important;
	background: transparent;
	z-index: 10;
}

td.skin img {
	width: 50px;
	height: 100%;
	-ms-interpolation-mode: nearest-neighbor;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-pixelated;
		image-rendering: pixelated;
	display: block;
	transition: width 0.2s;
}

html.compact td:not(.empty){
	height: 30px;
	padding: 0px 10px;
}

html.compact td:not(.empty)[objective=Player]{
	padding-left: 30px;
}

html.compact td.skin img {
	width: 30px;
}

.sticky {
	position: -webkit-sticky !important;
	position: sticky !important;
	left: 0;
}

th {
	padding: 10px 20px;
	background: var(--bg2);
	cursor: pointer;
	-webkit-transition: padding 0.2s;
	transition: padding 0.2s;
}

html.compact th{
	padding: 5px 10px;
}

.status {
	position: absolute;
	top: 20px;
	left: 15px;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: var(--status-offline);
	-webkit-transition: top 0.2s, left 0.2s;
	transition: top 0.2s, left 0.2s;
}

html.compact .status{
	top: 10px;
	left: 10px;
}

.status.online {
	background: var(--status-online);
}

.status.afk {
	background: var(--status-afk);
}

.mc-format.mc-black { color: #000000 }
.mc-format.mc-dark_blue { color: #0000AA }
.mc-format.mc-dark_green { color: #00AA00 }
.mc-format.mc-dark_aqua { color: #00AAAA }
.mc-format.mc-dark_red { color: #AA0000 }
.mc-format.mc-dark_purple { color: #AA00AA }
.mc-format.mc-gold { color: #FFAA00 }
.mc-format.mc-gray { color: #AAAAAA }
.mc-format.mc-dark_gray { color: #555555 }
.mc-format.mc-blue { color: #5555FF }
.mc-format.mc-green { color: #55FF55 }
.mc-format.mc-aqua { color: #55FFFF }
.mc-format.mc-red { color: #FF5555 }
.mc-format.mc-light_purple { color: #FF55FF }
.mc-format.mc-yellow { color: #FFFF55 }
.mc-format.mc-white { color: #FFFFFF }

.mc-format.mc-obfuscated { /* no style */ }
.mc-format.mc-bold { font-weight: bold }
.mc-format.mc-strikethrough { text-decoration: line-through }
.mc-format.mc-underline { text-decoration: underline }
.mc-format.mc-italic { font-style: italic }
.mc-format.mc-reset { /* no style */ }

/* POSITIONAL ELEMENTS */
body {
	margin: 0px;
	color: var(--text);
	background-color: #222;
	font-family: sans-serif;
}

main {
	margin: 100px auto;
	width: 60%;
	-webkit-transition: width 0.2s;
	transition: width 0.2s;
}

main > span {
	margin-right: 10px;
}

/* MEDIA DIRECTIVES */
@media (prefers-color-scheme: dark) {
	:root {
		--bg1: #0003;
		--bg2: #0005;
		--text: #DDD;
	}
}

@media screen and (max-width: 700px) {
	main {
		width: 100%;
	}
}