/* === main navigational areas === */

body {
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
	min-height: 100svh;
	background-color: #292e33;
}

#nav-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1200px;
	height: calc(100svh - 64px);
	margin: auto;
}

.nav-area {
	box-sizing: border-box;
	margin: auto;
	width: 100%;
	margin-bottom: 4px;
}

#banner-area {
	flex: 0;
}

#nav-banner-img {
	width: 100%;
	min-height: 80px;
	object-fit: cover;
}

#content-area {
	flex: 1;
	border-left: 1px dotted #555;
	border-right: 1px dotted #555;
	border-bottom: 1px dotted #555;
	border-width: 4px;
	padding: 0px 8px 8px 8px;
}

#main-content {
	text-align: center;
}

#main-content p {
	margin-top: 6px;
}

#footer-area {
	flex: 0;
}

#footer-text {
	margin: auto;
	text-align: center;
}

hr {
	margin: 7px 8px 7px 8px;
	color: #999;
	background-color: #999;
	border-color: #999;
}

.justify {
	text-align: left !important;
}

.center {
	text-align: center; !important;
}

.mobile-hidden {
	display: none;
}


@media screen and (max-width: 500px) {
	.mobile-hidden {
		display: inline-block;
	}
}

@media screen and (max-width: 800px) {
	hr {
		margin-left: 4px;
		margin-right: 4px;
	}
	#footer-area {
		padding-bottom: 2px;
	}
}

@media screen and (max-width: 1200px)
{
	#content-area {
		border-right: none;
		border-left: none;
	}
}

/* === nav bar structure === */

#nav-bar {
	box-sizing: border-box;
	margin: auto;
	display: flex;
	flex-direction: row;
	gap: 4px;
	position: sticky;
	top: 0px;
	padding-top: 4px;
	padding-bottom: 4px;
	width: 100%;
	max-width: 1200px;
	height: 64px;
	background-color: #292e33;
}

.nav-entry {
	box-sizing: inherit;
	flex: 1;
	height: 100%;
	min-width: 80px;
}

.nav-button {
	box-sizing: inherit;
	margin: 0px;
	padding: 0px;
	border: inherit;
	outline: inherit;
	cursor: pointer;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left;
}

.nav-button span {
	position: relative;
	top: 0px;
	left: 8%;
}

@media screen and (max-width: 800px) {
	#nav-wrapper {
		display: flex;
		height: calc(100svh - 48px);
	}
	#footer-area {
		margin-bottom: 2px;
	}
}

.nav-button-main {
	background-color: #74b3b5;
	background-image: url("images/menu/thumb_gepd.png");
}
.nav-button-main:hover, #nav-button-main:active {
	background-color: #83c7c9;
}
.nav-button-combos {
	background-color: #adac72;
	background-image: url("images/menu/thumb_soldier.png");
}
.nav-button-combos:hover, #nav-button-combos:active {
	background-color: #c7c68b;
}
.nav-button-builds {
	background-color: #9f6666;
	background-image: url("images/menu/thumb_hunter.png");
}
.nav-button-builds:hover, #nav-button-builds:active {
	background-color: #b57777;
}
.nav-button-community {
	background-color: #7277ad;
	background-image: url("images/menu/thumb_orbital.png");
}
.nav-button-community:hover, #nav-button-community:active {
	background-color: #858ac1;
}

.nav-button-expand {
	display: none;
	float: left;
	position: relative;
	border-top: 2px solid #292e33;
	width: 100%;
	background-color: #4c525c;
	cursor: pointer;
}

.nav-dropdown-button {
	box-sizing: border-box;
	float: left;
	width: 100%;
	height: 33px;
	border-bottom: 1px solid #222;
	border-top: none;
	text-align: center;
	line-height: 33px;
	background-color: #4c525c;
}

.nav-dropdown-button:hover {
	background-color: #606580;
}

.nav-dropdown-button:active {
	background-color: #707590;
}

.generic-dropdown-button {
	text-align: center;
	margin-top: 6px;
	padding: 4px 12px;
    border: 1px solid #111;
    border-radius: 6px;
    background-color: #4c525c;
}

.generic-dropdown-button:hover {
	background-color: #606580;
}

.generic-dropdown-button:active {
	background-color: #707590;
}

@media screen and (max-width: 800px) {
	#nav-bar {
		height: 48px;
		line-height: 40px;
	}
	.nav-button-main {
		background-image: url("images/menu/thumb_gepd_alpha.png");
	}
	.nav-button-combos {
		background-image: url("images/menu/thumb_soldier_alpha.png");
	}
	.nav-button-builds {
		background-image: url("images/menu/thumb_hunter_alpha.png");
	}
	.nav-button-community {
		background-image: url("images/menu/thumb_orbital_alpha.png");
	}
	.nav-button span {
		left: 0;
	}
	.nav-button-expand {
		border-top: 0;
	}
	#banner-area {
		height: 100px;
	}
}

@media screen and (max-width: 500px) {
	.nav-button {
		background-position: center;
	}
}


/* === standard colors (reference) === */

/*
cipher-black 	#292e33
cipher-blue 	#74b3b5
cipher-yellow	#adac72
cipher-red 		#9f6666
cipher-purple 	#7277ad
text-standard	#DDD
text-major		#96C8FF
*/

/* === standard fonts === */

.text-standard {
	margin: 0;
	padding: 0;
	color: #DDD;
	font-size: 14pt;
	font-family: calibri, sans-serif;
	font-weight: normal;
	font-style: normal;
}

.text-standard a {
	color: #96C8FF;
}

.text-major {
	margin: 0;
	padding: 0;
	color: #96C8FF;
	font-size: 14pt;
	font-family: calibri, sans-serif;
	font-weight: normal;
	font-style: normal;
}

.text-mono {
	margin: 0;
	padding: 0;
	color: #DDD;
	font-size: 14pt;
	font-family: consolas, monospace;
	font-weight: normal;
	font-style: normal;
}

.text-title {
	margin: 0;
	padding: 0;
	margin: auto;
	color: #DDD;
	font-size: 18pt;
	font-family: verdana, sans-serif;
	font-weight: bold;
	font-style: normal;
	text-align: center;
	text-shadow: 2px 2px #111;
}

.text-header {
	margin: 0;
	padding: 0;
	margin: auto;
	color: #DDD;
	font-size: 16pt;
	font-family: verdana, sans-serif;
	font-weight: bold;
	font-style: normal;
	text-align: center;
}

.text-button-lg {
	margin: 0;
	padding: 0;
	color: #EEE;
	font-size: 16pt;
	font-family: verdana, sans-serif;
	font-weight: bold;
	font-style: normal;
	text-align: center;
	text-shadow: 2px 2px #111;
	text-decoration: none;
	user-select: none;
	cursor: pointer;
}

.text-button {
	margin: 0;
	padding: 0;
	color: #CCC;
	font-size: 14pt;
	font-family: calibri, sans-serif;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	text-decoration: none;
	user-select: none;
	cursor: pointer;
}

.text-button a {
	color: #CCC;
	font-style: normal;
}

.text-mini {
	margin: 0;
	padding: 0;
	color: #BBB;
	font-size: 11pt;
	font-family: calibri, sans-serif;
	font-weight: normal;
	font-style: normal;
	text-align: center;
}

.text-mini a {
	color: inherit;
}

.text-mini a:hover {
	color: #CCC;
}

@media screen and (max-width: 800px) {
	.text-standard {
		font-size: 12pt;
	}
	.text-major {
		font-size: 12pt;
	}
	.text-mono {
		font-size: 12pt;
	}
	.text-title {
		font-size: 16pt;
	}
	.text-header {
		font-size: 14pt;
	}
	.text-standard {
		font-size: 12pt;
	}
	.text-button-lg {
		font-size: 12pt;
	}
	.text-button {
		font-size: 12pt;
	}
	.text-mini {
		font-size: 9pt;
	}
}

/* === generic image row setup === */

.image-row {
	margin: auto;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
}

.image-row-img-container {

}

.image-row-img {
	width: 100%;
}

.sub-img-container {
	position: relative;
    bottom: calc(35% + 4px);
    height: 35%;
    width: 100%;
}

.sub-img {
	box-sizing: border-box;
	position: absolute;
	left: 0;
	height: 100%;
}

/* === generic showcase setup === */
.showcase {
	display: none;
	margin: 12px auto;
	width: 100%;
	max-width: 900px;
}

.showcase .image-row {
	width: 100%;
	gap: 8px;
}

.showcase img {
	max-height: 600px;
	border: 1px solid #666;
}

.showcase p {
	margin-top: 8px !important;
}

.showcase hr {
	margin-left: 0px;
	margin-right: 0px;
}

@media screen and (max-width: 800px) {
	.showcase {
		margin: 8px auto;
	}
	.showcase .image-row {
		gap: 8px;
	}
}