:root { /* these are css variables */
	--dark-color: #C9C1CC;
	--light-color: #E6E3E7;
	--highlight: #c0aac8;
	--mobile-res-cutoff: 600px;
}

html {
	font-size: calc(0.7rem + 0.2vw);
	font-family: "Open Sans", sans-serif;
	background-color: var(--light-color);
	box-sizing: border-box;
}
/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*, *::before, *::after {
	box-sizing: inherit;
}

body {
	margin: 0;
}

header {
	background-color: var(--dark-color);
	padding: 0.2em;
}

nav {
	position: absolute;
	right: 0px;
	display: inline;
}

main > div {
	padding: 0.3em;
}

footer {
	position: fixed;
	bottom: 0px;
	right: 0px;
	padding: 0.1em;
}

footer > a,
nav > a {
	margin: 0.4em;
}

h1, h2 {
	margin: 0.2em;
	font-size: inherit;
	display: inline;
}

a {
	cursor: pointer;
}
a:link {
	color: black;
	text-decoration-line: none;
}
a:visited {
	color: black;
}
a:hover {
	text-decoration-line: underline;
	font-weight: bold;
}

.resource { /* each line in the resources pane */
	width: 100%;
	display: flex;
	white-space: nowrap;
}
.resource:hover {
	background: var(--highlight);
}
.resource > div {
	flex: 1;
}
.resource > div.res-name {
	flex: 1.5;
}

#tab-bar {
	padding: 0.5em;
}
#tab-bar > a {
	margin-right: 0.5em;
	display: inline-block;
	border-left: 0.2em solid var(--dark-color);
	padding-left: 0.5em;
}
#tab-bar > a.active {
	text-decoration-line: underline;
	font-weight: bold;
}
#tab-bar > a:first-letter {
	text-transform: uppercase;
}
#tab-bar > a:first-child {
    border-left: none;
}

#tab-pane {
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top: 0.5em;
}

/* TODO: Sections */
section {
	
}

.btn-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

button {
	font: inherit;
	padding: 0;
	min-width: 10em;
	margin: 0.5em;
}
button.small {
	min-width: 0px;
	width: 1.5em;
}

.btn {
	cursor: pointer;
	user-select: none;
	background-color: var(--dark-color);
	margin: 0.5em;
	border: 0.01em solid;
	border-radius: 0.5em;
	padding: 0.5em;
	text-transform: capitalize;
	min-width: 10em;
	max-width: 30em;
	transition: all 0.1s;
}
.btn, .btn div {
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn > div:first-child {
	width: 100%;
}
.btn > div {
	flex-direction: column;
}
.btn > div > div {
	flex: 1;
	min-width: 1.5em;
	border-radius: 0.3em;
}
.btn > div.plusminus > div:hover {
	background-color: var(--light-color);
}
.btn[disabled] > div.plusminus > div:hover {
	background-color: var(--highlight);
}
.btn:hover {
	background-color: var(--highlight);
}
.btn:active {
	background-color: rebeccapurple;
}
.btn[disabled] {
	background-color: var(--light-color);
	cursor: default;
	color: grey;
}
.btn[building] {
	height: 3.5em;
}


.job {
	display:flex;
	padding-left: 1em;
}
.job > div {
	font-size: 110%;
	display:flex;
	align-items:center;
	min-width: 4em;
}
.job > div:first-child {
	width: 8em;
}

.log-message {
	margin-top: 0.3em;
}
.log-message:first-child {
	font-weight: bold;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
	font-size: 110%;
}

.tooltip {
	position: fixed;
	background: var(--highlight);
	padding: 0.5em;
	max-width: 40ch;
	border-radius: 0.5em;
	box-shadow: 0.2em 0.2em 0.1em silver;
}
.tooltip > div {
	padding: 0.5em;
}

.popup { /* pop-up menus */
	display: none;
	background-color: var(--dark-color);
	width: 90%;
	height: 50%;
	position: fixed;
	top: 25vh;
	left: 5vw;
	border: 0.2em solid;
	box-shadow: 0.2em 0.2em 0.5em;
	padding-left: 3em;
	padding-right: 2em;
	overflow: auto;
}
.popup > a.close {
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 0.5em;
}

.fleeting {
	position: fixed;
	top: 0px;
	left: 48vw;
	transition: opacity 1s;
}

/* above this is the mobile layout */
@media (min-width: var(--mobile-res-cutoff)), (orientation: landscape) { /* This is the desktop layout */

	main {
		display: flex;
		height: 95vh;
	}
	main > div {
		padding-bottom: 0px;
	}

	#left-pane {
		/* width: 25%; */
		flex: 1;
		overflow: auto;
	}

	#middle-pane {
		/* width: 50%; */
		flex: 2;
		overflow: auto;
	}

	#right-pane {
		/* width: 25%; */
		flex: 1;
		overflow: auto;
	}
	
	.popup {
		width: 50%;
		left: 25vw;
	}
	.tooltip {
		max-width: 20vw;
	}
}