html {
	--padding: 5px;
	
	--tab-height: 40px;
	--tab-bg: #303030;
	--tab-active-bg: #203080;
	--tab-active-border: #2040A0;
	--tab-hover-bg: #505050;
	
	--table-header-color: #FFF;
	--table-header-bg-color: #303030;
	--table-header-border-color: #000000;
	--table-header-padding: 8px;
	--table-header-height: 50px;
	
	--table-subheader-color: #CCC;
	--table-subheader-bg-color: #202020;
	--table-subheader-border-color: #303030;
	
	--table-cover-opacity: 0.5;
	--table-cover-color: #000;
	--table-cover-bg-color: #404040;
	--table-cover-height: 36px;
	--table-cover-font-size: 125%;
	
	--table-cell-size: 5.5%;
	--table-cell-bg: #000000;
	--table-cell-bg-alt: #080808;
	--table-cell-bg-spread: #101010;
	--table-cell-bg-spread-alt: #181818;
	--table-cell-border-color: #202020;
	--table-cell-green-bg: #1C801830;
	--table-cell-red-bg: #801C1830;
}

html, body {
	width: 100%;
	height: 100%;
	min-width: 1200px;
	max-width: calc(100% - 10px);
}
.container.main {
	padding: 0 1px;
	height: calc(100% - 115px - var(--tab-height));
}
.app-header:before { background-image: url(../img/favicon.png); }

nav {
	display: flex;
	height: var(--tab-height);
	padding: 0 1px;
	border: 2px solid #202020;
	border-top: none;
	border-bottom: none;
}

nav .tab {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: var(--padding);
	padding: 0 calc(var(--padding) * 3);
	/* margin-right: 3px; */
	min-width: 100px;
	font-weight: bold;
	background-color: var(--tab-bg);
	border: 1px solid #000;
	border-bottom-color: transparent;
	border-radius: calc(var(--padding) * 2) calc(var(--padding) * 2) 0 0;
	cursor: pointer;
}

nav .tab:hover {
	color: #FFF;
	background-color: var(--tab-hover-bg);
}

nav .tab.active {
	color: #FFF;
	background-color: var(--tab-active-bg);
	border-color: var(--tab-active-border);
}

main, .table { width: 100%; }
main { display: none; }
main.visible { display: block; }

.table {
	counter-reset: row;
	display: flex;
	flex-flow: column nowrap;
}

.row {
	display: flex;
	background-color: var(--table-cell-bg);
}
.row:nth-child(2n) { background-color: var(--table-cell-bg-alt); }
.row.spread { background-color: var(--table-cell-bg-spread); }
.row.spread:nth-child(2n) { background-color: var(--table-cell-bg-spread-alt); }
.row:not(.cover):not(.header) {
	counter-increment: row;
}
.row:not(.cover):before {
	content: counter(row);
	flex: 0 0 30px!important;
	justify-content: end!important;
	border-left-width: 1px solid var(--table-cell-border-color);
}
.row.header:before {
	content: '#';
	justify-content: center!important;
	border-color: var(--table-header-border-color)!important;
}
.row.header.sub:before {
	content: '';
	border-color: var(--table-subheader-border-color)!important;
}
.row.header {
	/*position: sticky;*/
	/*top: 0;*/
	border-top: 1px solid var(--table-header-border-color);
	color: var(--table-header-color);
	font-weight: bold;
	background-color: var(--table-header-bg-color);
}
.row.header:first-child {
	position: sticky;
	top: 0;
}
.row.header:not(.sub) {
	height: var(--table-header-height);
	font-size: 75%;
}
.row.header.sub {
	/*top: var(--table-header-height);*/
	color: var(--table-subheader-color);
	background-color: var(--table-subheader-bg-color);
	border: none;
}
.cover + .row.header.sub { /*top: calc(var(--table-header-height) + var(--table-cover-height));*/ }
.row.header:not(.sub) > .cell { text-align: center; }
.row.header > .cell {
	padding: var(--table-header-padding) var(--padding);
	border-right: 1px solid var(--table-header-border-color);
	border-bottom: 1px solid var(--table-header-border-color);
}
.row.header.sub > .cell {
	border-right: 1px solid var(--table-subheader-border-color);
	border-bottom: 1px solid var(--table-subheader-border-color);
}

.cell, .row:not(.cover):before {
	display: flex;
	flex: 0 0 var(--table-cell-size);
	justify-content: center;
	align-items: center;
	padding: var(--padding);
	border-right: 1px solid var(--table-cell-border-color);
	border-bottom: 1px solid var(--table-cell-border-color);
	text-shadow: 1px 0px #000, 1px 1px #000, 0px 1px #000;
	white-space: nowrap;
	overflow: hidden;
}
/*
.cell:first-child { border-left: 1px solid var(--table-cell-border-color); }
.row.header .cell:first-child { border-left-color: var(--table-header-border-color); }
*/
.cell.x2 { flex: 0 0 calc(var(--table-cell-size) * 2); }
.cell.x3 { flex: 0 0 calc(var(--table-cell-size) * 3); }
.cell.x4 { flex: 0 0 calc(var(--table-cell-size) * 4); }
.cell.number {
	justify-content: end;
	font-family: monospace;
	font-size: 125%;
}
.cell.fill { flex: 1 1 auto; }
.cell.align-left { justify-content: start; }
.cell.align-right { justify-content: end; }
.cell.align-center { justify-content: center; }
.cell.border-right { border-right-width: 5px!important; }
.cell.green { background-color: var(--table-cell-green-bg); }
.cell.red { background-color: var(--table-cell-red-bg); }



.cover {
	position: sticky;
	top: var(--table-header-height);
	/* margin-top: calc(var(--padding) * 2); */
	justify-content: space-between;
	align-items: center;
	padding: 0 calc(var(--padding) * 2);
	height: var(--table-cover-height);
	color: #E0E0E0;
	font-size: var(--table-cover-font-size);
	text-shadow: 1px 0px #000, 1px 1px #000, 0px 1px #000;
	/*text-shadow: 1px 0px #000, 1px 1px #000, 0px 1px #000, -1px 1px #000, -1px 0px #000, -1px -1px #000, 0px -1px #000, 1px -1px #000;
	background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/mizars-palace.png);*/
	background-image: none!important;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--table-cover-bg-color)!important;
	border: 1px solid var(--table-cell-border-color);
	border-top-color: #000;
	border-bottom-color: #000;
	border-left: none;
	border-right: none;
	/*box-shadow: inset 0 0 35px 10px rgba(0, 0, 0, var(--table-cover-opacity));*/
}

.goldwood.outset { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/goldwood-outset.png); }
.goldwood.interior { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/goldwood-interior.png); }
.goldwood.lodge { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/goldwood-lodge.png); }
.goldwood.rim { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/goldwood-rim.png); }
.ss-anubis.hold { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/ss-anubis-hold.png); }
.ss-anubis.passageway { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/ss-anubis-passageway.png); }
.ss-anubis.depository { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/ss-anubis-depository.png); }
.tawfret.bog { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/tawfret-bog.png); }
.tawfret.bridge { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/tawfret-bridge.png); }
.tawfret.castle { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/tawfret-castle.png); }
.sekhmet.battle-cruiser { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/sekhmet-battle-cruiser.png); }
.cerulean.dune { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/cerulean-dune.png); }
.ichor.military-base { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/ichor-military-base.png); }
.ichor.perimeter { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/ichor-perimeter.png); }
.spawnship.troop-carrier { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/spawnship-troop-carrier.png); }
.rith-essa.bluff { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/rith-essa-bluff.png); }
.rith-essa.interior { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/rith-essa-interior.png); }
.rith-essa.ascent { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/rith-essa-ascent.png); }
.rith-essa.mine { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/rith-essa-mine.png); }
.eschebone.approach { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/eschebone-approach.png); }
.eschebone.thorax { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/eschebone-thorax.png); }
.eschebone.cortex { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/eschebone-cortex.png); }
.mizars-palace { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/mizars-palace.png); }
.mizars-palace.lobby { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/mizars-palace-lobby.png); }
.mizars-palace.flume { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/mizars-palace-flume.png); }
.mizars-palace.chasm { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/mizars-palace-chasm.png); }
.spacestation.abandoned-wreck { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/spacestation-abandoned-wreck.png); }
.gem-quarry.landing { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/gem-quarry-landing.png); }
.walkway.peak { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/walkway-peak.png); }
.water-ruin.lost-island { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/water-ruin-lost-island.png); }
.asteroid { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/asteroid.png); }
.asteroid.mizars-lair { background-image: linear-gradient(rgba(0, 0, 0, var(--table-cover-opacity)), rgba(0, 0, 0, var(--table-cover-opacity))), url(/img/bg/asteroid-mizars-lair.png); }