@charset "utf-8";

@media (min-width: 0px) {
	:root {
		--mybadge-size: 0px;
		--myVis: hidden;
		--myBadgeMargin: 0px;
		--myBadgeDiv-size: 10px;
		--myAchsSummaryTwo: 4fr;
		--myNavData-width: 225px;
		--mytop-height: 225px;
		--myBadgeBGPos: center;
		--myjournaltoccol: 33.33% 33.34% 33.33%;
	}
}
@media (min-width: 576px) {
	:root {
		--mybadge-size: 0px;
		--myVis: hidden;
		--myBadgeMargin: 0px;
		--myBadgeDiv-size: 10px;
		--myAchsSummaryTwo: 3fr;
		--myNavData-width: 260px;
		--mytop-height: 225px;
		--myBadgeBGPos: center;
		--myjournaltoccol: 25% 25% 25% 25%;
	}
}
@media (min-width: 768px) {
	:root {
		--mybadge-size: 180px;
		--myVis: visible;
		--myBadgeMargin: 10px;
		--myBadgeDiv-size: 200px;
		--myAchsSummaryTwo: 4fr;
		--myNavData-width: 270px;
		--mytop-height: 405px;
		--myBadgeBGPos: center;
		--myjournaltoccol: 16.66% 16.66% 16.67% 16.67% 16.67% 16.67%;
	}
}
@media (min-width: 1024px) {
	:root {
		--mybadge-size: 190px;
		--myVis: visible;
		--myBadgeMargin: 10px;
		--myBadgeDiv-size: 210px;
		--myAchsSummaryTwo: 3fr;
		--myNavData-width: 285px;
		--mytop-height: 415px;
		--myBadgeBGPos: center;
		--myjournaltoccol: 16.66% 16.66% 16.67% 16.67% 16.67% 16.67%;
	}
}
@media (min-width: 1280px) {
	:root {
		--mybadge-size: 200px;
		--myVis: visible;
		--myBadgeMargin: 10px;
		--myBadgeDiv-size: 220px;
		--myAchsSummaryTwo: 4fr;
		--myNavData-width: 300px;
		--mytop-height: 425px;
		--myBadgeBGPos: center;
		--myjournaltoccol: 8.34% 8.34% 8.33% 8.34% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.34% 8.33%;
	}
}
@media (min-width: 1536px) {
	:root {
		--mybadge-size: 200px;
		--myVis: visible;
		--myBadgeMargin: 10px;
		--myBadgeDiv-size: 220px;
		--myAchsSummaryTwo: 4fr;
		--myNavData-width: 300px;
		--mytop-height: 425px;
		--myBadgeBGPos: center;
		--myjournaltoccol: 8.34% 8.34% 8.33% 8.34% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.34% 8.33%;
	}
}

/* Header */
/* Nav Dropdown */
nav ul li ul
{
	visibility: hidden;
	opacity: 0;
	position: absolute;
	transition: all 0.5s ease;
	right: 0;
	display: none;
}
nav ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}
nav ul li ul li {
	clear: both;
	width: 100%;
}
nav ul li ul li a {
	display: block;
}
nav .dropdown {
	overflow: hidden;
	border: none;
	outline: none;
	background-color: #222222;
	color: #009999;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	z-index: 100;
}
nav .dropdown:hover {
	display: block;
}
.navMenuStandalone {
	padding: 0px 15px 0px 15px;
	margin: 5px 15px 5px 15px;
	background-color: #333333;
}
.navMenuHeader {
	font-weight: bold;
	padding: 0px 15px 0px 15px;
	margin: 5px 15px 0px 15px;
	background-color: #333333;
}
.navMenuSub {
	padding: 0px 15px 0px 20px;
	margin: 0px 20px 0px 15px;
	background-color: #333333;
}
.navMenuSubEnd {
	padding: 0px 15px 0px 20px;
	margin: 0px 20px 5px 15px;
	background-color: #333333;
}
.navMenuButton {
	display: block;
	background-color: #333333;
}
.navData {
	width: var(--myNavData-width);
}

/* To Top Button */
#myBtn {
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 20px; /* Place the button at the bottom of the page */
	right: 20px; /* Place the button 10px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	background-color: #f4f4f4; /* Set a background color */
	color: #999999; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 0px; /* Some padding */
	border-radius: 10px; /* Rounded corners */
	font-size: 18px; /* Increase font size */
	font-weight: bold;
	width: 50px;
	height: 50px;
	margin: 0px;
}
#myBtn:hover {
	color: #000000;
}

/* Footer */
footer p {
	margin-top: 0px;
	margin-bottom: 10px;
}

/* Misc */
.preformatted {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	white-space: pre;
	overflow: auto;
	padding-left: 10px;
	padding-right: 10px;
}
.centerText {
	text-align: center;
}
a {
	text-decoration: none;
}

/* About */
.aboutBody {
	background-color: #333333;
	padding-bottom: 10px;
}
.aboutBody h2 {
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
}
.aboutBody p {
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
}

/* Index Recently Played List*/
.gameIndex {
	background-color: #333333;
	padding-bottom: 10px;
}
.gameIndex h2 {
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
}

/* Game Page Header Index Recently Played, Data, Top, Journal pages */
.gameHeader {
	background-color: #333333;
	display: grid;
	align-items: center;
	margin-bottom: 10px;
	grid-template-columns: var(--myBadgeDiv-size) auto;
	min-height: var(--mytop-height);
	background-position: var(--myBadgeBGPos);
}
.headBadge {
	grid-column: 1;
	margin: var(--myBadgeMargin);
	visibility: var(--myVis);
}
.headBadge img {
	width: var(--mybadge-size);
	height: var(--mybadge-size);
	visibility: var(--myVis);
}
.headSummary {
	grid-column: 2;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	padding: 10px;
	background: rgba(0, 0, 0, .6)
}
.headSummary h1 {
	margin: 0px;
}
.headSummary p {
	margin: 0px;
}

/* Game Page Game Information */
.gameInfo {
	background-color: #333333;
	padding-bottom: 10px;
}
.gameInfo h2 {
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.gameInfo h3 {
	margin-top: 5px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.gameInfo p {
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}

/* Game Page Purchase Information */
.purchaseInfo {
	background-color: #333333;
	padding-bottom: 10px;
}
.purchaseInfo h2 {
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.purchaseInfo h3 {
	margin-top: 5px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.purchaseInfo h4 {
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 20px;
	margin-bottom: 0px;
}
.purchaseInfo p {
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 20px;
	margin-bottom: 0px;
}

/* Game Page Archives and Sessions */
.sessInfo {
	background-color: #333333;
	padding-bottom: 10px;
}
.sessInfo h2 {
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.sessInfo h3 {
	margin-top: 5px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.sessInfo table {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
	width: calc(100% - 20px);
}
.sessInfo th {
	border: 1px solid #000000;
	padding: 2.5px 5px;
	background: #003366;
	color: #c8c8c8;
	text-align: center;
}
.sessInfo tr {
	border: 1px solid #000000;
	vertical-align: top;
}
.sessInfo tr:nth-child(even) {
	background: #444444;
}
.sessInfo tr:nth-child(odd) {
	background: #333333;
}
.sessInfo td {
	border: 1px solid #000000;
	padding: 2.5px 5px;
}
.tSessInfoHoursCol {
	text-align: right;
}

/* Recently Played List*/
.recentPlayed {
	background-color: #333333;
	padding-bottom: 10px;
}
.recentPlayed h2 {
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
}
.recentPlayed table {
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
	width: calc(100% - 20px);
}
.recentPlayed th {
	border: 1px solid #000000;
	padding: 2.5px 5px;
	background: #003366;
	color: #c8c8c8;
	text-align: center;
}
.recentPlayed tr {
	border: 1px solid #000000;
	vertical-align: top;
}
.recentPlayed tr:nth-child(even) {
	background: #444444;
}
.recentPlayed tr:nth-child(odd) {
	background: #333333;
}
.recentPlayed td {
	border: 1px solid #000000;
	padding: 2.5px 5px;
}
.recentPlayed tr:nth-child(odd) a {
	text-decoration: none; /* Remove default text underline */
	display: block; /* Make it into a block element to fill the whole cell */
}
.recentPlayed tr:hover  {
	background-color: #666666; /* Add a hover effect to all rows - excludes headers because they are th tags */
}
/* Switches default back-color to transparent so the hover change can work*/
.recentPlayed tr:hover td {
    background-color: transparent; /* or #000 */
}
.recentPlayed tr:nth-child(even) a {
	text-decoration: none; /* Remove default text underline */
	display: block; /* Make it into a block element to fill the whole cell */
}

/* Search */
.searchBody {
	background-color: #333333;
	padding-bottom: 10px;
}
.searchBody h2 {
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
}
.searchBody p {
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
}
.searchBody form {
	margin-left: 10px;
	margin-right: 10px;
}
.searchBody input {
	margin-bottom: 10px;
}
.searchBody table {
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
	width: calc(100% - 20px);
}
.searchBody th {
	border: 1px solid #000000;
	padding: 2.5px 5px;
	background: #003366;
	color: #c8c8c8;
	text-align: center;
}
.searchBody tr {
	border: 1px solid #000000;
	vertical-align: top;
}
.searchBody tr:nth-child(even) {
	background: #444444;
}
.searchBody tr:nth-child(odd) {
	background: #333333;
}
.searchBody td {
	border: 1px solid #000000;
	padding: 2.5px 5px;
}
.searchBody tr:nth-child(odd) a {
	text-decoration: none; /* Remove default text underline */
	display: block; /* Make it into a block element to fill the whole cell */
}
.searchBody tr:hover  {
	background-color: #666666; /* Add a hover effect to all rows - excludes headers because they are th tags */
}
/* Switches default back-color to transparent so the hover change can work*/
.searchBody tr:hover td {
    background-color: transparent; /* or #000 */
}
.searchBody tr:nth-child(even) a {
	text-decoration: none; /* Remove default text underline */
	display: block; /* Make it into a block element to fill the whole cell */
}
.searchFormLayout {
	display: grid;
	grid-template-columns: repeat(2, auto);
	grid-template-rows: repeat(4, auto);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}
.searchForm01 {
	grid-row: 1;
	grid-column: 1;
}
.searchForm02 {
	grid-row: 1;
	grid-column: 2;
}
.searchForm03 {
	grid-row: 2;
	grid-column: 1;
}
.searchForm04 {
	grid-row: 2;
	grid-column: 2;
}
.searchForm05 {
	grid-row: 3;
	grid-column: 1;
}
.searchForm06 {
	grid-row: 3;
	grid-column: 2;
}
.searchForm07 {
	grid-row: 4;
	grid-column: 1;
}
.searchForm08 {
	grid-row: 4;
	grid-column: 2;
}

/* Data Pages */
.gameData {
	background-color: #333333;
	padding-bottom: 10px;
}
.gameData h2 {
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.gameData h3 {
	margin-top: 5px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.gameData p {
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.gameData ul {
	margin-bottom: 10px;
}
.gameData li {
	margin-left: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.gameData img {
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
	width: calc(100% - 20px);
}
.gameData table {
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	width: calc(100% - 20px);
}
.gameData th {
	border: 1px solid #000000;
	padding: 2.5px 5px;
	background: #003366;
	color: #c8c8c8;
	text-align: center;
}
.gameData tr {
	border: 1px solid #000000;
	vertical-align: top;
}
.gameData tr:nth-child(even) {
	background: #444444;
}
.gameData tr:nth-child(odd) {
	background: #333333;
}
.gameData td {
	border: 1px solid #000000;
	padding: 2.5px 5px;
}
.gameData tr:nth-child(odd) a {
	text-decoration: none; /* Remove default text underline */
	display: block; /* Make it into a block element to fill the whole cell */
}
.gameData tr:hover  {
	background-color: #666666; /* Add a hover effect to all rows - excludes headers because they are th tags */
}
/* Switches default back-color to transparent so the hover change can work*/
.gameData tr:hover td {
    background-color: transparent; /* or #000 */
}
.gameData tr:nth-child(even) a {
	text-decoration: none; /* Remove default text underline */
	display: block; /* Make it into a block element to fill the whole cell */
}

/* Top Pages and All Page */
.gameTop {
	background-color: #333333;
	padding-bottom: 10px;
}
.gameTop h2 {
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.gameTop h3 {
	margin-top: 5px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.gameTop table {
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	width: calc(100% - 20px);
}
.gameTop th {
	border: 1px solid #000000;
	padding: 2.5px 5px;
	background: #003366;
	color: #c8c8c8;
	text-align: center;
}
.gameTop tr {
	border: 1px solid #000000;
	vertical-align: top;
}
.gameTop tr:nth-child(even) {
	background: #444444;
}
.gameTop tr:nth-child(odd) {
	background: #333333;
}
.gameTop td {
	border: 1px solid #000000;
	padding: 2.5px 5px;
}
.gameTop tr:nth-child(odd) a {
	text-decoration: none; /* Remove default text underline */
	display: block; /* Make it into a block element to fill the whole cell */
}
.gameTop tr:hover  {
	background-color: #666666; /* Add a hover effect to all rows - excludes headers because they are th tags */
}
/* Switches default back-color to transparent so the hover change can work*/
.gameTop tr:hover td {
    background-color: transparent; /* or #000 */
}
.gameTop tr:nth-child(even) a {
	text-decoration: none; /* Remove default text underline */
	display: block; /* Make it into a block element to fill the whole cell */
}

/* Achievement Pages */
.gameAchs {
	background-color: #333333;
	padding-bottom: 10px;
}
.gameAchs h2 {
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.gameAchs .gameAchsP {
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.gameAchsSummaryContainer {
	background-color: #444444;
	margin: 10px;
	display: grid;
	align-items: center;
	grid-template-columns: 64px var(--myAchsSummaryTwo) 1fr;
}
.gameAchsSummaryIcon {
	grid-column: 1;
}
.gameAchsSummaryDesc {
	grid-column: 2;
	padding-left: 10px;
	padding-right: 10px;
}
.gameAchsSummaryDesc h3 {
	margin: 0px;
}
.gameAchsSummaryDesc p {
	margin-top: 0px;
	margin-bottom: 10px;
}
.gameAchsSummaryUnlocked {
	grid-column: 3;
}
.gameAchsLocked {
	filter: brightness(0.5) saturate(0%);
}

/* Journal Pages */
.game-journal {
	background-color: #333333;
	padding-bottom: 10px;
}
.game-journal-h2heading {
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
}
.game-journal-toc-container {
	display: grid;
	grid-template-columns: var(--myjournaltoccol);
}
.game-journal-toc-cell {
	text-align: center;
}
.game-journal-played-container {
	/*background-color: #333333;*/
	display: grid;
	margin-top: 0px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px;
	grid-template-columns: var(--mybadge-size) auto;
	/*min-height: var(--mytop-height);*/
	/*background-position: var(--myBadgeBGPos);*/
}
.game-journal-played-image {
	visibility: var(--myVis);
}
.game-journal-played-image-img {
	width: var(--mybadge-size);
	height: var(--mybadge-size);
	visibility: var(--myVis);
}
.game-journal-played-game {
	margin-top: 0px;
}
.game-journal-played-game-played {
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-top: 0px;
}
.game-journal-played-game-achievements {
	margin-left: 20px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-top: 0px;
	display: grid;
	align-items: center;
	grid-template-columns: 64px auto;
}
.game-journal-played-game-achievements-img {
	height: 64px;
	width: 64px;
	margin-top: 0px;
	margin-bottom: 10px;
}
.game-journal-played-game-achievements-txt {
	min-height: 64px;
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
	display: grid;
	align-items: center;
}
.game-journal-nav-container {
	display: grid;
	grid-template-columns: 33% 34% 33%;
	background-color: #333333;
	margin-top: 10px;
	padding: 10px;
}
.game-journal-nav-right {
	text-align: right;
}
.game-journal-nav-center {
	text-align: center;
}
.game-journal-nav-container  p {
	margin: 0px;
}