body {
	background: #234;
	font: 10pt 'PT Sans', sans-serif;
	margin: 0;
	height: 100vh;
}

h1 { font-size: 14pt; }
h2 { font-size: 13pt; }
h3 { font-size: 12pt; }
h4 { font-size: 11pt; }
ul { padding-left: 3em; }

push-button { background: #456; color: white; font: 10pt 'Open Sans', sans-serif; }
push-button:focus { background: #678; }
push-button:hover { background: #789; color: white; }
push-button[disabled] { background: #888; color: #666; }

tab-selector { background: #345; color: #ccc; font: 10pt 'PT Sans Narrow'; }
tab-selector:focus { background: #678; color: #ddd; }
tab-selector:hover { background: #789; color: #ddd; }
tab-selector[active] { background: #789; color: white; }

tab-pane {
	--tab-selector-bar-background: #222;
	--tab-selector-bar-border: 1px solid #ddd;
}
tab-pane > div { height: 100%; font: 14pt 'Gupter'; background: #eee; color: #232; }



#splash-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #345;
	color: white;
	border: 3px solid white
}

#splash-title { font: 18pt 'Oswald', sans-serif; text-align: center; }
#splash-info-box { font: 10pt 'PT Sans', sans-serif; }
span.splash-credit { padding-left: 3em; font-weight: 700; }

#splash-title-box {
	background: rgba(0,0,0, 0.5);
	border-bottom: 1px dotted white;
	padding: 0.5em;
}
#splash-info-box {
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	padding: 0.75em;
}
#splash-button-bar {
	justify-content: space-evenly;
	align-items: flex-start;
	align-content: flex-start;
	background: rgba(0,0,0, 0.5);
	padding: 0.5em;
	border-top: 1px dotted white;
}

#login-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #345;
	color: white;
	border: 3px solid white
}
#login-title {
	font: 14pt 'PT Sans', sans-serif;
	background: rgba(0,0,0, 0.5);
	padding: 0.5em;
	text-align: center;
}
#login-info {
	grid-template-columns: repeat(1, auto);
	grid-gap: 0.5em;
	padding: 0.75em;
}
#login-info .form-label { text-align: left; padding-bottom: 0.25em; }
#login-info .text-input { padding-bottom: 0.75em; }
#login-button-bar {
	justify-content: space-evenly;
	align-items: flex-start;
	align-content: flex-start;
	background: rgba(0,0,0, 0.5);
	padding: 0.5em;
	border-top: 1px dotted white;
}
#login-content div > div { padding-top: 0.25em; padding-bottom: 0.25em }


#control-panel {
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow: auto;
	background: #eee;
	color: black;
	font: 10pt 'PT Sans';
}
#control-panel h2 { font: 14pt bold 'Open Sans'; color: #456; }
#control-panel > vbox-pane:first-child { width: 100%; height: 100%; }
#control-panel tab-pane { width: 100%; flex-grow: 1; }

.control-panel-header { background: #232; color: white; font: 14pt 'Oswald'; padding: 4px 8px; }
img.header-logo { width: 32px; margin-right: 16px; border: none; vertical-align: text-top; }
#control-panel-button-bar { background: #121; padding: 0.33em; }
#control-panel-button-bar push-button { font-size: 9pt; }

#dashboard-panel { font: 11pt 'PT Sans'; padding: 1em; }

#running-list {
	grid-template: auto / repeat(3,auto);
	justify-items: stretch;
	align-items: start;
	background: tan;
	color: black;
	border: 1px solid black;
}
#running-list .column-header { background: #232; color: #eee; padding: 0.5em; text-align: center; align-self: stretch; }
#running-list > div { text-align: center; padding: 0.5em; }
#running-list .info { font-size: 10pt; text-align: left; }
#running-list span.small-print { font-size: 8pt; font-style: italic; }

#start-list {
	grid-template: auto / repeat(4,auto);
	justify-items: stretch;
	align-items: start;
	background: rgba(0,0,0, 0.25);
	color: black;
	border: 1px solid black;
}
#start-list .column-header { background: #232; color: #eee; padding: 0.5em; text-align: center; align-self: stretch; }
#start-list > push-button { margin: 0.5em; }
#start-list > div { text-align: center; padding: 0.5em; }
#start-list > div.scenario { text-align: left; }
#start-list > div.overview { text-align: left; max-width: 50em; }
#start-list > div.game-header { grid-column: 1 / span 4; background: tan; color: black; text-align: left; }
#start-list span.small-print { font-size: 8pt; font-style: italic; }


#debug {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 20%;
	min-height: 30%;
	padding: 0.25em;
	background: #400;
	color: #eee;
	font: 9pt 'Open Sans';
}
.item {
	position: absolute;
	width: 100px;
	height: 100px;
	background: forestgreen;
	z-index: 2;
}