/* Welcome to the most stylish sheet. */
:root {
	--big-font: 20px;
	--normal-font: 16px;
	--small-font: 12px;
}
@media screen and (min-width:775px){
	:root {
		--big-font: calc(16px + .5vw);
		--normal-font: calc(12px + .5vw);
		--small-font: calc(8px + .5vw);
	}
}
body {
	user-select: none;
	margin: 0;
	padding:.05em;
	font-size: var(--normal-font);
	background: #eee2d6;
}
/* Column 1 Styles */
.secttitle {
	font-size: var(--big-font);
	font-weight: bold;
	display: inline-block;
	text-align: center;
	width: 100%;
	border-bottom: 1px solid;
}
#resourceType, #resourceCount, #resourceIncome, #buildingType {
	display: block;
	margin: 0;
	padding: 0;
	float: left;
}
#resourceType {
	width: 30%;
}
#resourceCount {
	width: 40%;
}
#resourceIncome {
	width: 30%;
}
#buildingType{
	width: 60%;
}
/* Column 2 Styles */
[class|="res-button"] {
	display: inline-block;
	border: 1px solid;
	border-radius: .25em;
	padding: .25em;
	margin: .25em;
	box-shadow: .1em .1em .1em black;
}
[class|="res-button"]:active {
	position: relative;
	top: 1px;
	left: 1px;
}
.res-notification {
	box-sizing: border-box;
	border-left: .25em solid;
	border-color: #a50000;
	background: #ff9191;
	text-align: center;
	margin: 0 auto;
	width:80%;
}
/* Column 3 Styles */
#page-eco [id|="building"], #page-ind [id|="building"], #page-mil [id|="building"] {
	box-sizing: border-box;
	border: 1px solid;
	box-shadow: .1em .1em .1em black;
	border-style: outset;
	border-radius: .25em;
	width: 100%;
	margin: 0 auto;
	padding: .25em .5em;
	margin-bottom: .25em;
	border-color: #303030;
}
[id|="build-button"] {
	display: inline-block;
	width: 34%;
	font-size: var(--normal-font);
	box-sizing: border-box;
	border: 1px solid;
	box-shadow: .1em .1em .1em black;
	border-style: outset;
	border-radius: .25em;
	padding: .1em;
}
#page-eco [id|="build-button"]:active, #page-ind [id|="build-button"]:active, #page-mil [id|="build-button"]:active {
	position: relative;
	top: 1px;
	left: 1px;
}
#page-eco [id|="build-button"] {
	background: #62bf4e;
	background: linear-gradient(to bottom left, #83ef6b, #288913);
}
#page-eco [id|="build-button"]:hover {
	background: #83ef6b;
	background: linear-gradient(to bottom left, #89ef73, #73d15e);
}
#page-eco [id|="build-button"]:active {
	background: #83ef6b;
	background: linear-gradient(to bottom left, #a9ef99, #83ef6b);
}
#page-ind [id|="build-button"] {
	background: #e2ef73;
	background: linear-gradient(to bottom left, #f1fc97, #86912e);
}
#page-ind [id|="build-button"]:hover {
	background: #f1fc97;
	background: linear-gradient(to bottom left, #f2ff89, #c1c980);
}
#page-ind [id|="build-button"]:active {
	background: #83ef6b;
	background: linear-gradient(to bottom left, #f3fca9, #f1fc97);
}
#page-mil [id|="build-button"] {
	background: #7d97f2;
	background: linear-gradient(to bottom left, #6d8dff, #5974d1);
}
#page-mil [id|="build-button"]:hover {
	background: #6d8dff;
	background: linear-gradient(to bottom left, #829eff, #6887f2);
}
#page-mil [id|="build-button"]:active {
	background: #6d8dff;
	background: linear-gradient(to bottom left, #a5b9ff, #6d8dff);
}
.overprice, .overprice:hover, .overprice:active{
	background: #707070 !important;
	background: linear-gradient(to bottom left, #919191, #545454) !important;
}
.overprice:active {
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
}
[id|="build-owned"] {
	min-width:3em;
	display:inline-block;
}
[id|="tab"] {
	box-sizing: border-box;
	display: inline-block;
	font-weight: bold;
	width: 33%;
	height: 2em;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	border-radius: 5px 5px 0 0;
	padding: .25em 0;
	cursor: pointer;
}
#tab-0 {
	background-color: #8aa085;
}
#tab-1 {
	background-color: #b6ba96;
}
#tab-2 {
	background-color: #9ca2b7;
}
.active0 {
	background-color: #63bf4e !important;
	border-width: 1px 1px 0 1px;
}
.active1 {
	background-color: #d2dd77 !important;
	border-width: 1px 1px 0 1px;
}
.active2 {
	background-color: #7d97f2 !important;
	border-width: 1px 1px 0 1px;
}
.build-info {
	display: inline-block;
	width: 100%;
	text-align: right;
}
.build-name{
	float: left;
	font-weight: bold;
}
.build-type{
	padding-left: .3em;
	font-size: var(--small-font);
}
.build-desc {
	display: inline-block;
	box-sizing: border-box;
	font-size: var(--small-font);
	background:white;
	border-radius: .25em;
	padding: .25em;
	width: 63%;
	box-shadow: 1px 1px 3px black;
	float:left;
}
[class|="count"] {
	display: inline-block;
	text-align: right;
	width: 100%;
	box-sizing: border-box;
	padding-right: .25em;
}
[id|="page"] {
	display: block;
	height: calc(100% - 2em);
	width: 99%;
	box-sizing: border-box;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-radius: 0 0 5px 5px;
	display: none;
	padding: .25em;
}
#page-eco {
	background: #63bf4e;
	background: linear-gradient(to bottom right, #63bf4e, #4b7741);
}
#page-ind {
	background: #d2dd77;
	background: linear-gradient(to bottom, #d2dd77, #64683e);
}
#page-mil {
	background: #7d97f2;
	background: linear-gradient(to bottom left, #7d97f2, #35426d);
}
/* Fundamentals */
#game-box {
	background: white;
	color: black;
	box-sizing: border-box;
	width: 90vw;
	min-width: 775px;
	height: 95vh;
	min-height: 400px;
	border: 1px solid;
	border-radius: 10px;
	border-color: #424242;
	box-shadow: .1em .1em .1em gray;
	margin: 0 auto;
}
#col1, #col2, #col3 {
	display: inline-block;
	height: 100%;
	margin: 0;
	padding: .5em;
	float: left;
	border-style: solid;
	box-sizing: border-box;
	border-color: #424242;
}
#col1 {
	width: 25%;
	border-radius: 10px 0 0 10px;
	border-width: 0 1px 0 0;
}
#col2 {
	width: 45%;
	border: 0;
}
#col3 {
	background: #564b41;
	width: 30%;
	border-radius: 0 10px 10px 0;
	border-width: 0 0 0 1px;
	padding: .25em;
}
/* Spooky End of Document */