html {
    background-color: slategray;
}

img {
    /* border: 5px solid; */
    /* border-color: black; */
	position: relative;
	top: 0px;
	left: 0px;
	z-index: -5;
}

#MapCanvas {
    border: 5px solid;
    border-color: whitesmoke;
	position: relative;
	top: -260px;
	left: 0px;
	z-index: -4;
	block-size: 250px;
}

.bigText
{
    color:  khaki;
	font-family: 'Germania One', cursive;
    font-size: x-large;
    text-shadow: 3px 3px 1px darkslategrey;
}

.smallText
{
    color:  #203535;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: small;
}

body {
    color:  #203535;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: medium;
  }

#Log_Main {
	text-align: center;
	font-size: x-large;
}

#Log_Sub {
	text-align: center;
	font-size: medium;
	color: #203535;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	text-shadow: none;
}

#FlavorText {
    font-size: 16px;  
    text-align: center;
}

.ResourceDisplay{
	display: flex;
	align-items: center;
	height: 35px;
}

/* div{
	outline: 5px dotted #e0a7a788;
} */

#Div_TopBanner{
	width: 100vw;
	height: 5vh;
}
#Div_PanelsMain{
	width: 100vw;
	height: 70vh;
	/* outline: 6px dashed greenyellow; */
	overflow:hidden;
}
#Div_PanelsLeft{
	display: grid;
	grid-template-columns: 1fr 1fr;
	float: left;
	width: 50%;
	height: 100%;
	/* outline: 3px dashed blue; */
}
#Div_PanelsRight{
	float: right;
	width: 50%;
	height: 100%;
	/* outline: 3px dashed red; */
}
#Div_BottomBanner{
	padding: 1px 0px 0px 0px;
	margin: 0 auto;
	outline: 3px double #607080;
	width: 90vw;
	height: 10vh;
}



#Div_TechButtons{
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	margin: 0 auto;
	padding: 10px 10px;
}
#Div_BookButtons{
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	margin: 0 auto;
	padding: 10px 10px;
}
#Div_Buttons1{
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	margin: 0 auto;
    padding: 10px 30px;
    width: 200px;
}
#Div_Buttons2{
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	margin: 0 auto;
    padding: 10px 30px;
    width: 200px;
}
#Div_TechPanel{
	max-width: 250px;
	max-height: 500px;
	width: 50vw;
	height: 33vh;
}
#Div_MapPanel{
	max-width: 250px;
	max-height: 500px;
	height: 33vh;
	width: 33vw;
	float: right;
	padding: 10px 25px;
}
#Div_ResourcePanel{
	max-width: 500px;
	max-height: 500px;
	width: 50vw;
	height: 33vh;

	/* grid-column: 1 / 2;
	grid-row: 2 / 3; */
}
#Div_DiscoveriesPanel{
	max-width: 250px;
	max-height: 500px;
	width: 50vw;
	height: 33vh;
	margin: 5px 10px;
}

#Div_CombatPanel{
	max-width: 250px;
	max-height: 500px;
	width: 50vw;
	height: 33vh;
	display: flex;
	justify-content: space-evenly;
}



.activeButton2 {
	background-color:#5caf6e;
	-moz-border-radius:1px;
	-webkit-border-radius:1px;
	border-radius:12px;
	border:0px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:12px;
	padding:11px 33px;
	text-decoration:none;
}
.button2.bigText {
	outline:0;
}
.activeButton2:hover {
	background-color:#74cc7b;
}
.activeButton2:active {
	position:relative;
	top:2px;
}

.inactiveButton {
	background-color:#506d83;
	-moz-border-radius:1px;
	-webkit-border-radius:1px;
	border-radius:12px;
	border:0px solid #e0a7a7;
	display:inline-block;
	cursor:default;
	color:#e0a7a7;
	font-family:Arial;
	font-size:12px;
	padding:11px 33px;
	text-decoration:none;
}
button {
	background-color:#1a364c;
	-moz-border-radius:1px;
	-webkit-border-radius:1px;
	border-radius:12px;
	border:0px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:12px;
	padding:11px 33px;
	text-decoration:none;
	margin: 5px 0px;
}
button:focus {
	outline:0;
}
.activeButton:hover {
	background-color:#3e6f93;
}
.activeButton:active {
	position:relative;
	top:2px;
}
.smallButton {
	margin: 0 auto;
}