/* COPYRIGHTED 2025-2026 (and forward) */
/*		red: #AE3635	brown: #372B28	gold: #AE7335	pink: #AE3570	tan: #CBA884	bg: #F9EED6*/
	/* header */
	:root {
		--calculated-width: 100%; /* this gets changed in js */
	}

	header {
		font-family: Arial, sans-serif;
		text-align: center;
		font-size: 1.5em;
		text-shadow: 2px 2px #372B28;
	}
	
	header h1 {
		transform: translate(0vw, -6vw);
		text-align: center;
		text-transform: uppercase;
		margin-bottom: -5vw;
		font-size: 3vw;
	}
	
	header img {
		width: 70%;
		height: auto;
	}
	
	/*header a { text-decoration: none; }*/
	header a:link { color: #DDDDDD; }
	header a:visited { color: #DDDDDD; }
	header a:hover { color: #DDDDDD; }
	/* END header */

	/* FOOTER */
	/*footer a { text-decoration: none; }*/
	footer a:link { color: #DDDDDD; }
	footer a:visited { color: #DDDDDD; }
	footer a:hover { color: #DDDDDD; }
	/* END FOOTER */

	#topSideNote {
		text-align: center;
		font-size: 0.7em;
		font-style: italic;
	}

	#error {
		color: #AE3635;
		text-align: center;
	}

	.redButton {
		background-color: #AE3635;
		color: white;
	}

	.centered {
		justify-content: center;
		text-align: center;
		align-content: center;
	}

	.smallText {
		font-size: 16px;
		text-align: right;
	}

	/* for the main element */

	.outputBox {
		width: 100%;
		padding: 0.5em;
		height: 10vh;
		text-align: center;
		font-size: 16px;
		resize: none;
		font-family: sans-serif;
	}

	.receiptBox {
		width: 100%;
		padding: 0.5em;
		height: 10vh;
		text-align: center;
		font-size: 16px;
		resize: none;
		font-family: sans-serif;
	}

	.costBox {
		width: 100%;
		padding: 0.5em;
		height: 10vh;
		text-align: center;
		font-size: 16px;
		resize: none;
		font-family: sans-serif;
	}

	.nonAdjustTA {
		resize: none;
		width: 100%;
		height: 6em;
		font-size: 16px;
		text-align: center;
		font-family: sans-serif;
		margin: 2% 0% 2% 0%;
	}

	.twoPaneWrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: 80vh;
		gap: 12px;
	}

	/* sub panes */

	.onePane {
		background-color: transparent;
		padding: 0.5em;
		width: 100%;
		border: 2px #372B28 solid;
		font-size: 20px;
		overflow: auto;
		overflow-x: hidden;
	}

	.twoPaneLeft {
		background-color: transparent;
		padding: 0.5em;
		width: 25%;
		border: 2px #372B28 solid;
		font-size: 20px;
		overflow: auto;
		overflow-x: hidden;
	}

	.twoPaneLeft h3, h4 {
		text-align: center;
	}

	.twoPaneLeft button {
		padding-top: 2%;
		padding-bottom: 2%;
		padding-right: 4%;
		padding-left: 4%;
		margin: 2% 0% 2% 0%;
	}

	.twoPaneLeft input {
		padding-top: 1%;
		padding-bottom: 1%;
		padding-right: 3%;
		padding-left: 3%;
		margin: 2% 0% 2% 0%;
	}

	.spacedControls {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-evenly;
		text-align: center;
		column-gap: 10%;
		margin: 0% 5% 0% 5%;
	}

	.spacedControlsColumn {
		width: 30%;
	}

	.spacedControlsColumn input {
		width: 100%;
	}

	.twoPaneButtonStack {
		justify-content: space-evenly;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding-inline: 5%;
		gap: 5%;
		row-gap: 5%;
	}

	.twoPaneRight {
		overflow: auto;
		overflow-x: hidden;
		padding-right: 2vw;
		padding-left: 2vw;
		width: 75%;
		border: 2px solid #AE7335;
	}

	.multiColContainer {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		text-align: left;
		margin: 0 0 0 0;
	}

	.multiColContainerSB {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		text-align: left;
		justify-content: space-between;
	}

	.multiColumn8 {
		width: 12.5%;
	}

	.multiColumn8 * {
		margin-bottom: 1vh;
	}

	.multiColumn4 {
		width: 25%;
	}

	.multiColumn4 * {
		margin-bottom: 1vh;
	}

	.multiColumn3 {
		width: 33%;
	}

	.multiColumn3 * {
		margin-bottom: 1vh;
	}

	.multiColumn2 {
		width: 50%;
	}

	.multiColumn2 * {
		margin-bottom: 1vh;
	}

	.multiColumn2_bigLeft {
		width: 85%;
		height: 100%;
	}

	.multiColumn2_smallRight {
		width: 15%;
		height: 100%;
	}

	.singleColumn * {
		margin-bottom: 1vh;
	}

	.numberBox {
		display: flex;
		justify-content: center;
	}

	.numberBox input {
		height: 3vh;
		font-size: 16px;
		text-align: center;
		width: 6%;
		margin: 0% 3% 0% 0.5%;
	}

	.smallerText {
		font-size: 14px;
	}

	.subText {
		font-size: 12px;
		position: relative;
		color: #AE3570;
	}

	.selectedNav {
		color: #AE7335 !important;
	}

/*mobile*/
@media screen and (max-width: 800px) {
	
	* {
		box-sizing: border-box;
	}
	
	/* Nav */
	nav {
		z-index: 100;
		width: 100%;
		overflow: auto;
		background-color: #EEEEEE;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-weight: bold;
		border-bottom: 2px #372B28 solid;
		margin: auto;
		color: #372B28;
	}
	
	nav a {
		display: inline-flex;
		flex-flow: column wrap;
		float: left;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		font-size: 20px;
		width: 100%;
		text-align: center;
	}
	
	nav a:nth-child(even) {
		background-color: #DDDDDD;
	}
	
	nav a:hover {
	/*background-image: linear-gradient(to bottom left, #AAA, #DDD);*/
		background-color: #CCCCCC;
		font-weight: normal;
	}
	
	nav a { text-decoration: none; }
	nav a:link { color: #AE7335; }
	nav a:visited { color: #372B28; }
	nav a:hover { color: #AE3570 !important; }
	/* END Nav */
	
	/* MAIN BASIC CONTENT */	
	body {
		font-family: Arial, sans-serif;
		background-color: #372B28;
		background-image: linear-gradient(to bottom, #AE3635, #372B28);
		background-repeat: no-repeat;
		padding-left: 0vw;
		padding-right: 0vw;
		margin-left: 0vw;
		margin-right: 0vw;
		font-size: 18px;
		color: #372B28;
	}
	
	main {
		padding-left: 1vw;
		padding-right: 1vw;
		margin-left: 1vw;
		margin-right: 1vw;
		
	}
	
	footer {
		color: #CBA884;
		text-align: center;
		font-size: 0.75em;
		font-style: italic;
		padding: 1.0em;
	}
	
	h2 {
		font-family: Arial, sans-serif;
		font-size: 2.0em;
		text-align: center;
	}
	
	table {
		width: 100%;
		padding-left: 10%;
		padding-right: 10%;
	}
	
	table td {
		border: 1px dotted black;
		text-align: center;
	}
	
	dl dt {
		font-weight: bold;
	}
	
	#tableCond {
		font-style: italic;
	}
	
	#sub {
		text-align: center;
	}
	
	#wrapper {
		background-color: #F9EED6;
		padding-top: 1.0em;
		padding-bottom: 1.0em;
		
	}
	
	/* END MAIN BASIC CONTENT */	
	
	/* GENERIC CLASSES */
	
	.twoColumnContainer {
		display: inline-flex;
		flex-flow: row wrap;
	}
	
	.twoColumnItem {
		width: 50%;
	}
	
	.gold {
		color: #AE7335;
		text-align: center;
	}
	
	.pink {
		color: #AE3570;
		text-align: center;
	}
	
	/* END OF GENERIC CLASSES */
	
	/* homepage IDs */
	#homePortal {
		display: flex;
		text-align: center;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	
	#homePortal section {
		margin: auto;
	}
	
	#homePortal img {
		width: 256px;
		height: 256px;
	}
	/* END homepage IDs */
	
	/* FACTIONS & DEITIES PAGES */
	#fragmentNav {
		background-color: transparent;
		padding: 0.0em;
		width: 30%;
		border: 2px #372B28 solid;
		font-size: 18px;
		overflow: auto;
		overflow-x: hidden;
	}
	
	#fragmentNav ul {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-around;
		padding-left: 4vw;
		padding-right: 4vw;
		list-style-image: url(../rsc/arrow_small.png);
		list-style-position: outside;
		/* list-style-type: none; */
	}
	
	#fragmentNav li {
		padding-top: 0.6em;
		padding-bottom: 0.6em;
		padding-right: 0.2em;
		padding-left: 0.2em;
		width: 100%;
	}
	
	#fragmentNav li a { text-decoration: none; }
	#fragmentNav li a:link { color: #372B28; }
	#fragmentNav li a:visited { color: #372B28; }
	#fragmentNav li a:hover { color: #AE3570; }
	
	#fragmentNav h3 {
		text-align: center;
	}
	
	/*the box next to fragnav */
	#fragNavContent {
		overflow: auto;
		overflow-x: hidden;
		padding-right: 2vw;
		padding-left: 2vw;
		width: 70%;
		border: 2px solid #AE7335;
	}
	
	#fragNavContent a { color: #AE7335;	}
	#fragNavContent a:visited { color: #372B28;	}
	#fragNavContent a:hover { color: #AE3670; }
	
	/* for the main element */
	#fragNavMain {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: 100vh;
		gap: 4px;
	}

	/* END FACTIONS & DEITIES PAGES */
	
	/* MAP PAGE */
	
	#continentMap {
		width: 100%;
		box-shadow: 0px 0px 12px 8px #7FA6CD;
		display: block;
	}
	
	#kestraMap area {
		z-index: 1;
	}
	
	/* z-index trick so I don't have to trace the niktoktin */
	
	#mapTNRindex {
		z-index: 0;
	}
	
	#mapTextBox {
		position: relative;
		text-align: center;
		text-shadow: 0px 0px 8px #FFFFFF;
	}
	
	/* END MAP PAGE */
	
	/* Creatures page content */
	
	.npc {
		float: right;
		padding-right: 0.5em;
		padding-left: 0.5em;
	}
	
	.creatureTable {
		width: 70%;
		padding: 0%;
	}
	
	.attributes {
		background-color: #372B28;
		border: none;
		color: #DDDDDD;
	}
	
	.scores {
		border: none;
	}
	
	.mod {
		font-style: italic;
		border: none;
	}
	
	/* end of Creatures page content */
	
	/* "Other" page css content */
	
	.mapGallery {
		display: inline-flex;
		flex-flow: row wrap;
		gap: 1vw;
		padding-bottom: 1.0em;
	}
	
	.galleryImage {
		width: calc(100% / 5.28);
		box-shadow: 0px 0px 8px #372B28;
		cursor: pointer;
	}
	
	#expandedImage {
		width: 100%;
		box-shadow: 0px 0px 8px #372B28;
	}
	
	#imgText {
		position: relative;
		bottom: 8vh;
		left: 2vw;
		color: #EEEEEE;
		font-size: 16px;
		font-weight: bold;
		text-shadow: 2px 2px #372B28;
	}
	
	#openNewTab {
		position: relative;
		bottom: 7.5vh;
		left: 3vw;
		color: #EEEEEE;
		font-size: 12px;
		font-weight: normal;
		text-shadow: 2px 2px #372B28;
	}
	
	#openNewTab a:visited {
		color: #EEEEEE;
	}
	
	/* end of "Other" page content */
	
	.deity h4 {
		transform: translate(0.5vw, -1.0vh);
	}
	
	.deity p {
		font-style: italic;
		transform: translate(0.0vw, -2.0vh);
	}

	/* start of "Foodmaker" page content */
	.twoPaneWrapper {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		height: 80vh;
		gap: 12px;
	}

	.twoPaneLeft {
		background-color: transparent;
		padding: 0.5em;
		width: 100%;
		border: 2px #372B28 solid;
		font-size: 20px;
		overflow: auto;
		overflow-x: hidden;
	}

	.twoPaneRight {
		overflow: auto;
		overflow-x: hidden;
		padding-right: 2vw;
		padding-left: 2vw;
		width: 100%;
		border: 2px solid #AE7335;
	}

	.singleColumn {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
	}

	.singleColumn input {
		margin-left: 33%;
	}

	.singleColumn label {
		margin-right: 33%;
	}

	.multiColumn2 {
		width: 100%;
	}

	.numberBox {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-evenly;
		text-align: center;
		column-gap: 10%;
		margin: 0% 5% 0% 5%;
	}

	.numberBox input {
		width: 100%;
	}

	.multiColumn4 {
		width: 100%;
		margin-left: 33%;
	}

	.multiColumn4 * {
		margin-bottom: 1vh;
	}

	.multiColumn3 {
		width: 100%;
		margin-left: 33%;
	}

	.multiColumn2 {
		width: 100%;
	}
	/* end of "Foodmaker" page content */
}
/*tablet*/
@media screen and (min-width: 801px) and (max-width: 1400px) {
	
	* {
		box-sizing: border-box;
	}
	
	/* Nav */
	nav {
		position: sticky;
		top: 0;
		z-index: 100;
		width: 100%;
		overflow: auto;
		background-color: #EEEEEE;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-weight: bold;
		border-bottom: 2px #372B28 solid;
		margin: auto;
		color: #372B28;
		justify-content: space-around;
	}
	
	nav a {
		display: inline-flex;
		flex-flow: column wrap;
		float: left;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		font-size: 20px;
		width: calc(100% / 3);
		text-align: center;
	}
	
	#navOther {
		width: 100%;
		background-color: #FFFFFF;
	}
	
	#navOther:hover {
		background-color: #CCCCCC;
		font-weight: normal;
	}
	
	nav a:nth-child(even) {
		background-color: #DDDDDD;
	}
	
	nav a:hover {
	/*background-image: linear-gradient(to bottom left, #AAA, #DDD);*/
		background-color: #CCCCCC;
		font-weight: normal;
	}
	
	nav a { text-decoration: none; }
	nav a:link { color: #AE7335; }
	nav a:visited { color: #372B28; }
	nav a:hover { color: #AE3570 !important; }
	/* END Nav */
	
	/* MAIN BASIC CONTENT */
	
	body {
		font-family: Arial, sans-serif;
		background-color: #372B28;
		background-image: linear-gradient(to bottom, #AE3635, #372B28);
		background-repeat: no-repeat;
		padding-left: 0vw;
		padding-right: 0vw;
		font-size: 20px;
		color: #372B28;
	}
	
	main {
		padding-left: 2%;
		padding-right: 2%;
		margin-left: 2%;
		margin-right: 2%;
		border-left: 2px #AE3635 dashed;
		border-right: 2px #AE3635 dashed;
	}
	
	footer {
		color: #CBA884;
		text-align: center;
		font-size: 0.75em;
		font-style: italic;
		padding: 1.0em;
	}
	
	h2 {
		font-family: Arial, sans-serif;
		font-size: 2.0em;
		text-align: center;
	}
	
	table {
		width: 100%;
		padding-left: 10%;
		padding-right: 10%;
	}
	
	table td {
		border: 1px dotted black;
		text-align: center;
	}
	
	dl dt {
		font-weight: bold;
	}
	
	.tableCond {
		font-style: italic;
	}
	
	#sub {
		text-align: center;
	}
	
	#wrapper {
		background-color: #F9EED6;
		padding-top: 1.0em;
		padding-bottom: 1.0em;
		
	}
	
	/* END MAIN BASIC CONTENT */	
	
	/* GENERIC CLASSES */
	
	.twoColumnContainer {
		display: inline-flex;
		flex-flow: row wrap;
	}
	
	.twoColumnItem {
		width: 50%;
	}
	
	.gold {
		color: #AE7335;
		text-align: center;
	}
	
	.pink {
		color: #AE3570;
		text-align: center;
	}
	
	/* END OF GENERIC CLASSES */
	
	/* homepage IDs */
	#homePortal {
		display: flex;
		text-align: center;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	
	#homePortal section {
		margin: auto;
	}
	
	#homePortal img {
		width: 256px;
		height: 256px;
	}
	/* END homepage IDs */
	
	/* FACTIONS & DEITIES PAGES */
	#fragmentNav {
		background-color: transparent;
		padding: 0.5em;
		width: 25%;
		border: 2px #372B28 solid;
		font-size: 20px;
		overflow: auto;
		overflow-x: hidden;
	}
	
	#fragmentNav ul {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-around;
		padding-left: 0vw;
		padding-right: 0vw;
		list-style-image: url(../rsc/arrow.png);
		list-style-position: inside;
		/* list-style-type: none; */
	}
	
	#fragmentNav li {
		padding-top: 0.2em;
		padding-bottom: 0.2em;
		padding-right: 0.2em;
		padding-left: 0.2em;
		width: 100%;
	}
	
	#fragmentNav li a { text-decoration: none; }
	#fragmentNav li a:link { color: #372B28; }
	#fragmentNav li a:visited { color: #372B28; }
	#fragmentNav li a:hover { color: #AE3570; }
	
	#fragmentNav h3 {
		text-align: center;
	}
	
	/*the box next to fragnav */
	#fragNavContent {
		overflow: auto;
		overflow-x: hidden;
		padding-right: 2vw;
		padding-left: 2vw;
		width: 75%;
		border: 2px solid #AE7335;
	}
	
	#fragNavContent a { color: #AE7335;	}
	#fragNavContent a:visited { color: #372B28;	}
	#fragNavContent a:hover { color: #AE3670; }
	
	/* for the main element */
	#fragNavMain {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: 100vh;
		gap: 12px;
	}

	/* END FACTIONS & DEITIES PAGES */
	
	/* MAP PAGE */
	
	#continentMap {
		width: 100%;
		box-shadow: 0px 0px 12px 8px #7FA6CD;
		display: block;
	}
	
	#kestraMap area {
		z-index: 1;
	}
	
	/* z-index trick so I don't have to trace the niktoktin */
	
	#mapTNRindex {
		z-index: 0;
	}
	
	#mapTextBox {
		position: relative;
		text-align: center;
		text-shadow: 0px 0px 8px #FFFFFF;
	}
	
	/* END MAP PAGE */
	
	/* Creatures page content */
	
	.npc {
		float: right;
		padding-right: 0.5em;
		padding-left: 0.5em;
	}
	
	.creatureTable {
		width: 70%;
		padding: 0%;
	}
	
	.attributes {
		background-color: #372B28;
		border: none;
		color: #DDDDDD;
	}
	
	.scores {
		border: none;
	}
	
	.mod {
		font-style: italic;
		border: none;
	}
	
	/* end of Creatures page content */
	
	/* "Other" page css content */
	
	.mapGallery {
		display: inline-flex;
		flex-flow: row wrap;
		gap: 1vw;
		padding-bottom: 1.0em;
	}
	
	.galleryImage {
		width: calc(100% / 5.28);
		box-shadow: 0px 0px 8px #372B28;
		cursor: pointer;
	}
	
	#expandedImage {
		width: 100%;
		box-shadow: 0px 0px 8px #372B28;
	}
	
	#imgText {
		position: relative;
		bottom: 6vh;
		left: 2.5vw;
		color: #EEEEEE;
		font-size: 24px;
		font-weight: bold;
		text-shadow: 2px 2px #372B28;
	}
	
	#openNewTab {
		position: relative;
		bottom: 6.5vh;
		left: 7.5vw;
		color: #EEEEEE;
		font-size: 16px;
		font-weight: normal;
		text-shadow: 2px 2px #372B28;
	}
	
	#openNewTab a:visited {
		color: #EEEEEE;
	}
	
	/* end of "Other" page content */
	
	.deity h4 {
		transform: translate(0.5vw, -1.0vh);
	}
	
	.deity p {
		font-style: italic;
		transform: translate(0.0vw, -2.0vh);
	}
}
/*desktop*/
@media screen and (min-width: 1401px) {
	
	* {
		box-sizing: border-box;
	}
	
	/* Nav */
	nav {
		position: sticky;
		top: 0;
		z-index: 100;
		width: 100%;
		overflow: auto;
		background-color: #EEEEEE;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-weight: bold;
		border-bottom: 2px #372B28 solid;
		margin: auto;
		color: #372B28;
	}
	
	nav a {
		float: left;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		font-size: 20px;
		width: calc(100% / 7);
		text-align: center;
	}
	
	nav a:nth-child(even) {
		background-color: #DDDDDD;
	}
	
	nav a:hover {
		/*background-image: linear-gradient(to bottom left, #AAA, #DDD);*/
		background-color: #CCCCCC;
		font-weight: normal;
	}
	
	nav a { text-decoration: none; }
	nav a:link { color: #AE7335; }
	nav a:visited { color: #372B28; }
	nav a:hover { color: #AE3570 !important; }
	/* END Nav */
	
	/* MAIN BASIC CONTENT */	
	body {
		font-family: Arial, sans-serif;
		background-color: #372B28;
		background-image: linear-gradient(to bottom, #AE3635, #372B28);
		background-repeat: no-repeat;
		padding-left: 8vw;
		padding-right: 8vw;
		font-size: 20px;
		color: #372B28;
	}
	
	main {
		padding-left: 2%;
		padding-right: 2%;
		margin-left: 2%;
		margin-right: 2%;
		border-left: 2px #AE3635 dashed;
		border-right: 2px #AE3635 dashed;
	}
	
	footer {
		color: #CBA884;
		text-align: center;
		font-size: 0.75em;
		font-style: italic;
		padding: 1.0em;
	}
	
	h2 {
		font-family: Arial, sans-serif;
		font-size: 2.0em;
		text-align: center;
	}
	
	table {
		width: 100%;
		padding-left: 10%;
		padding-right: 10%;
	}
	
	table td {
		border: 1px dotted black;
		text-align: center;
	}
	
	dl dt {
		font-weight: bold;
	}
	
	#tableCond {
		font-style: italic;
	}
	
	#sub {
		text-align: center;
	}
	
	#wrapper {
		background-color: #F9EED6;
		padding-top: 1.0em;
		padding-bottom: 1.0em;
		
	}
	
	/* END MAIN BASIC CONTENT */	
	
	/* GENERIC CLASSES */
	
	.twoColumnContainer {
		display: inline-flex;
		flex-flow: row wrap;
	}
	
	.twoColumnItem {
		width: 50%;
	}
	
	.gold {
		color: #AE7335;
		text-align: center;
	}
	
	.pink {
		color: #AE3570;
		text-align: center;
	}
	
	/* END OF GENERIC CLASSES */
	
	/* homepage IDs */
	#homePortal {
		display: flex;
		text-align: center;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	
	#homePortal section {
		margin: auto;
	}
	
	#homePortal img {
		width: 256px;
		height: 256px;
	}
	/* END homepage IDs */
	
	/* FACTIONS & DEITIES PAGES */
	#fragmentNav {
		background-color: transparent;
		padding: 0.5em;
		width: 25%;
		border: 2px #372B28 solid;
		font-size: 20px;
		overflow: auto;
		overflow-x: hidden;
	}
	
	#fragmentNav ul {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-around;
		padding-left: 2.5vw;
		padding-right: 0vw;
		list-style-image: url(../rsc/arrow.png);
		list-style-position: outside;
		/* list-style-type: none; */
	}
	
	#fragmentNav li {
		padding-top: 0.2em;
		padding-bottom: 0.2em;
		padding-right: 0.2em;
		padding-left: 0.2em;
		width: 100%;
	}
	
	#fragmentNav li a { text-decoration: none; }
	#fragmentNav li a:link { color: #372B28; }
	#fragmentNav li a:visited { color: #372B28; }
	#fragmentNav li a:hover { color: #AE3570; }
	
	#fragmentNav h3 {
		text-align: center;
	}
	
	/*the box next to fragnav */
	#fragNavContent {
		overflow: auto;
		overflow-x: hidden;
		padding-right: 2vw;
		padding-left: 2vw;
		width: 75%;
		border: 2px solid #AE7335;
	}
	
	#fragNavContent a { color: #AE7335;	}
	#fragNavContent a:visited { color: #372B28;	}
	#fragNavContent a:hover { color: #AE3670; }
	
	/* for the main element */
	#fragNavMain {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: 80vh;
		gap: 12px;
	}

	/* END FACTIONS & DEITIES PAGES */
	
	/* MAP PAGE */
	
	#continentMap {
		width: 100%;
		box-shadow: 0px 0px 12px 8px #7FA6CD;
		display: block;
	}
	
	#kestraMap area {
		z-index: 1;
	}
	
	/* z-index trick so I don't have to trace the niktoktin */
	
	#mapTNRindex {
		z-index: 0;
	}
	
	#mapTextBox {
		position: relative;
		text-align: center;
		text-shadow: 0px 0px 8px #FFFFFF;
	}
	
	/* END MAP PAGE */
	
	/* Creatures page content */
	
	.npc {
		float: right;
		padding-right: 0.5em;
		padding-left: 0.5em;
	}
	
	.creatureTable {
		width: 70%;
		padding: 0%;
	}
	
	.attributes {
		background-color: #372B28;
		border: none;
		color: #DDDDDD;
	}
	
	.scores {
		border: none;
	}
	
	.mod {
		font-style: italic;
		border: none;
	}
	
	/* end of Creatures page content */
	
	/* "Other" page css content */
	
	.mapGallery {
		display: inline-flex;
		flex-flow: row wrap;
		gap: 1vw;
		padding-bottom: 1.0em;
	}
	
	.galleryImage {
		width: calc(100% / 5.28);
		box-shadow: 0px 0px 8px #372B28;
		cursor: pointer;
	}
	
	#expandedImage {
		width: 100%;
		box-shadow: 0px 0px 8px #372B28;
	}
	
	#imgText {
		position: relative;
		bottom: 5vh;
		left: 2.5vw;
		color: #EEEEEE;
		font-size: 24px;
		font-weight: bold;
		text-shadow: 2px 2px #372B28;
	}
	
	#openNewTab {
		position: relative;
		bottom: 5.5vh;
		left: 7.5vw;
		color: #EEEEEE;
		font-size: 16px;
		font-weight: normal;
		text-shadow: 2px 2px #372B28;
	}
	
	#openNewTab a:visited {
		color: #EEEEEE;
	}
	
	/* end of "Other" page content */
	
	.deity h4 {
		transform: translate(0.5vw, -1.0vh);
	}
	
	.deity p {
		font-style: italic;
		transform: translate(0.0vw, -2.0vh);
	}
}