styles.css

/* Container divs and images */
.completeDiv {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(98, 119, 166);
	user-select: none;
}
.imgDiv {
	position: absolute;
	overflow: hidden;
	width: 4128px;
}
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.map {
	float: left;
	width: 100%;
}
/* End container divs and images */

/* Chunk grid and buttons */
.btnDiv {
	position: absolute;
	top: 0;
	left: 0;

	display: grid;
	grid-gap: 0px;
	grid-template-columns: repeat(43, 2.3256% [col-start]);
	grid-template-rows: repeat(25, 4% [row-start]);

	overflow: hidden;
	width: 100%;
	height: 100%;
}
.locked {
	color: transparent;
	background-color: rgba(0, 0, 0, 0.45);
	border-color: transparent;
	outline: 0;
	border: 0px;
	padding: 0px;
	cursor: pointer;
}
div.locked:hover {
	background-color: rgba(12, 184, 46, 0.2);
}
.unlocked {
	background-color: transparent;
	border-color: red;
	border-style: solid;
	border-width: 0px;
	outline: 0;
	padding: 0px;
	cursor: pointer;

	text-align: center;
	font-size: 50pt;
	padding: 10%;
	color: rgb(255, 230, 0);

	text-shadow:
		-1px -1px 0 black,
		1px -1px 0 black,
		-1px 1px 0 black,
		1px 1px 0 black;
}
div.unlocked:hover {
	background-color: rgba(10, 10, 10, 0.2);
}
.potential {
	display: table-cell;
	background-color: rgba(12, 184, 46, 0.4);
	border-color: transparent;
	outline: 0;
	border: 0px;
	cursor: pointer;

	text-align: center;
	font-size: 50pt;
	padding: 10%;
	color: rgb(255, 230, 0);

	text-shadow:
		-1px -1px 0 black,
		1px -1px 0 black,
		-1px 1px 0 black,
		1px 1px 0 black;
}
div.potential:hover {
	background-color: rgba(200, 200, 200, 0.25);
}
.between {
	background-color: transparent;
	transition: background 1s ease-in;

	text-align: center;
	font-size: 50pt;
	padding: 10%;
	color: rgb(255, 230, 0);

	text-shadow:
		-1px -1px 0 black,
		1px -1px 0 black,
		-1px 1px 0 black,
		1px 1px 0 black;
}
/* End chunk grid and buttons */

/* Sidebars */
.sidebarLeft {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 15%;
	height: 100%;
	z-index: 5;
	background-color: rgb(230, 230, 230);

	display: block;
	transition: left 0.75s ease-in-out;
}
.sidebarRight {
	position: absolute;
	top: 0%;
	right: 0%;;
	width: 15%;
	height: 100%;
	z-index: 5;
	background-color: rgb(230, 230, 230);

	display: block;
	transition: right 0.75s ease-in-out;
}
/* End sidebars*/

/* Map controls */
.controls {
	position: relative;
	width: 100%;
	height: 50%;
	text-align: center;
	line-height: 80px;
	border-bottom: 2px solid black
}
.picker {
	position: relative;
	width: 200px;
	height: 60px;
	margin: 0px;
	font-size: 1.2em;
	color: black;

	cursor: pointer;

	border: none;
	border-radius: 15px;
	background-color: rgb(71, 177, 0);
	box-shadow: 0 6px rgb(150, 150, 150);
}
button.picker:hover {
	background-color: rgb(61, 153, 0);
}
button.picker:active {
	/* Shift button down and shrink border to simulate pushing down the button */
	box-shadow: 0 3px rgb(100, 100, 100);
	transform: translateY(3px);
}
button.picker:focus {
	/* After clicking, don't show blue border */
	outline: 0;
}
.checkLabel {
	cursor: pointer;
}
/* End map controls */

/* Import/Export menu */
.importExport {
	position: relative;
	width: 100%;
	height: 50%;
	text-align: center;
	line-height: 80px;
}
/* End import/export menu */

/* Update box (might not need) */
.updateBox {
	position: relative;
	width: 100%;
	height: 20%;
	text-align: center;
	line-height: 40px;
	padding: 50% 0%;
	border-bottom: 2px solid black
}
/* End update box */

/* About box */
.aboutBox {
	position: relative;
	width: 100%;
	height: 50%;
	text-align: center;
	line-height: 40px;
	padding: 5% 0%;
}
/* End about box */

/* Sidebar minimizing arrows */
.arrowLeft {
	position: relative;
	top: 3px;
	left: 5px;
	width: 0;
	height: 0;
	z-index: 5;
	cursor: pointer;

	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 35px solid rgb(71, 177, 0);;
	border-radius: 15px;
	transition: transform 0.75s ease-in-out;
}
.arrowLeft:hover {
	border-right: 35px solid rgb(53, 133, 0);
}
.arrowLeftBackground {
	position: relative;
	top: 2%;
	left: 13.5%;
	width: 43px;
	height: 45px;
	margin: 0px;
	background-color: rgb(204, 204, 204);
	border: 4px solid rgb(71, 177, 0);
	border-radius: 10px;

	transition: left 0.75s ease-in-out;
}
.arrowRight {
	position: relative;
	top: 3px;
	right: -3px;
	width: 0;
	height: 0;
	z-index: 5;
	cursor: pointer;

	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 35px solid rgb(71, 177, 0);
	border-radius: 15px;
	transition: transform 0.75s ease-in-out;
}
.arrowRight:hover {
	border-left: 35px solid rgb(53, 133, 0);
}
.arrowRightBackground {
	position: absolute;
	top: 2%;
	right: 13.5%;
	width: 43px;
	height: 45px;
	margin: 0px;
	background-color: rgb(204, 204, 204);
	border: 4px solid rgb(71, 177, 0);
	border-radius: 10px;

	transition: right 0.75s ease-in-out;
}
/* End sidebar minimizing arrows */