@font-face {
    font-family: ZX;
    src: url('../fonts/vga8.ttf');
}

@font-face {
	font-family: iireg;
	font-style:normal;
	font-weight:normal;
	src: url('../fonts/libertinus_serif_reg.woff2') format('woff2'),
	url('../fonts/libertinus_serif_reg.woff') format('woff');
}

@font-face {
	font-family: iireg;
	font-style: normal;
	font-weight: bold;
	src: url('../fonts/libertinus_serif_bold.woff2') format('woff2'),
	url('../fonts/libertinus_serif_bold.woff') format('woff');
}

@font-face {
	font-family: iireg;
	font-style: italic;
	font-weight: normal;
	src: url('../fonts/libertinus_serif_italic.woff2') format('woff2'),
	url('../fonts/libertinus_serif_italic.woff') format('woff');
}

@font-face {
	font-family: iireg;
	font-style: italic;
	font-weight: bold;
	src: url('../fonts/libertinus_serif_bold_italic.woff2') format('woff2'),
	url('../fonts/libertinus_serif_bold_italic.woff') format('woff');
}

@font-face {
	font-family: iisan;
	font-style:normal;
	font-weight:normal;
	src: url('../fonts/libertinus_sans_reg.woff2') format('woff2'),
	url('../fonts/libertinus_sans_reg.woff') format('woff');
}

@font-face {
	font-family: iisan;
	font-style: normal;
	font-weight: bold;
	src: url('../fonts/libertinus_sans_bold.woff2') format('woff2'),
	url('../fonts/libertinus_sans_bold.woff') format('woff');
}

@font-face {
	font-family: iisan;
	font-style: italic;
	font-weight: normal;
	src: url('../fonts/libertinus_sans_italic.woff2') format('woff2'),
	url('../fonts/libertinus_sans_italic.woff') format('woff');
}

@font-face {
	font-family: iisan;
	font-style: italic;
	font-weight: bold;
	src: url('../fonts/libertinus_sans_bold_italic.woff2') format('woff2'),
	url('../fonts/libertinus_sans_bold_italic.woff') format('woff');
}

@font-face {
	font-family: iimon;
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/libertinus_mono_reg.woff2') format('woff2'),
	url('../fonts/libertinus_mono_reg.woff') format('woff');
}

@font-face {
	font-family: iimon;
	font-style: normal;
	font-weight: bold;
	src: url('../fonts/libertinus_mono_bold.woff2') format('woff2'),
	url('../fonts/libertinus_mono_bold.woff') format('woff');
}

@font-face {
	font-family: iimon;
	font-style: italic;
	font-weight: normal;
	src: url('../fonts/libertinus_mono_italic.woff2') format('woff2'),
	url('../fonts/libertinus_mono_italic.woff') format('woff');
}

@font-face {
	font-family: iimon;
	font-style: italic;
	font-weight: bold;
	src: url('../fonts/libertinus_mono_bold_italic.woff2') format('woff2'),
	url('../fonts/libertinus_mono_bold_italic.woff') format('woff');
}

@font-face {
	font-family: iikey;
	src: url('../fonts/libertinus_keyboard_reg.woff2') format('woff2'),
	url('../fonts/libertinus_keyboard_reg.woff') format('woff');
}

@font-face {
	font-family: iiinitials;
	src: url('../fonts/libertinus_initials.woff2') format('woff2'),
	url('../fonts/libertinus_initials.woff') format('woff');
}

body {
	font-family: iireg, serif;
	line-height:1.2em;
	color:#111111;
	padding:0px;
	margin:0px;
	/*font-size: 1.1em;*/
}

table, caption, td { font-size: inherit; font-weight: inherit; font-style: inherit; font-variant: inherit; }

/*from red.css*/

.pagetitle {
	font-variant: small-caps;
	color: #ffffff;
	text-shadow: 1px 1px 0px rgb(0, 0, 0);
}

.pagetitlearea {
	height: 5em;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*from dragonleather.css*/

a:link {
    text-decoration: none;
    border-bottom: 1px dotted #444444;
}
a:visited {
    text-decoration: none;
    border-bottom: 1px dotted #444444;
}
a:hover { 
    text-decoration: none;
}
a:active {
    text-decoration: none;
}

img, img.a {
    border: none;
    border-bottom: none;
}

a:link.naked, img.a:link {
    text-decoration: none;
    border: none;
}
a:visited.naked, img.a:visited {
    text-decoration: none;
    border-style: none;
}
a:hover.naked, img.a:hover {
    text-decoration: none;
    border-style: none;
}
a:active.naked, img.a:active {
    text-decoration: none;
    border-style: none;
}

input, select, submit, textarea {
    background: #DFCDB5;
    border: 1px solid #222222;
    color: #111111;
    font-family: georgia, serif;
}

h2 {
    font-variant: small-caps;
    text-shadow: 2px 2px 1px #AF9778;
}

/*Commentary mouseovers*/
a.commentarymouseoverlink{
    position:relative;
    z-index:24;
    text-decoration:none;
    border-style: none;
}
a:link.commentarymouseoverlink{
    border-style: none;
}
a:visited.commentarymouseoverlink{
    border-style: none;
}
a:active.commentarymouseoverlink{
    border-style: none;
}
a:hover.commentarymouseoverlink{
    border-style: none;
}
a.commentarymouseoverlink span.commentarymouseover{
    display: none;
}
a.commentarymouseoverlink:hover{
    z-index:25;
    /*background:;*/
}
a.commentarymouseoverlink:hover span.commentarymouseover{
    display:block;
    position:absolute;
    padding: 10px;
    width:200px;
    left:30px;
    background:url('/templates/desktop/mainbg.jpg') #C9B18B;
    border:1px dotted #333333;
    color:#000;
    overflow:hidden;
}

.puzzlecombatnavs {
    color:#ffffff;
    text-shadow: -1px 1px #000000;
}

/*dragonleather*/

.siteheader {
    background:url(top.png) repeat-x bottom;
    text-align:center;
}

.sitecenter {
    background:url('/templates/desktop/mainbg.jpg') #C9B18B;
}

.sitecenter-darker {
    background:url(mainbg-darker.jpg) #C9B18B;
}

.sitecenter-darkest {
    background:url(mainbg-darkest.jpg) #C9B18B;
}

.sitecenter-lighter {
    background:url(mainbg-lighter.jpg) #C9B18B;
}

.footerinfo {
    font-size:0.6em;
}

.sitefooter {
    font-size: 0.5em;
    line-height: initial;
    font-family: iisans;
    color: #ffffff;
    padding: 1em;
    margin-top: 2em;
    width: auto;
    background-color: rgba(0,0,0,0.2);
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.2);
    margin-bottom: 15em;
    margin-left: 1em;
    margin-right: 1em;
}

.sitefooter img {
	padding: 1em;
}

.sitefooter a:link, .sitefooter a:visited, .sitefooter a:hover, .sitefooter a:active {
	color:#ffffff;
	text-decoration: underline;
}

/*mobile stuff/*

/*Navigation column*/

.navhead {
	color: #ffffff;
	font-size: 0.8em;
	font-variant: small-caps;
	text-align: left;
	text-shadow: 1px 1px 0px rgb(0, 0, 0);
	font-weight: normal;
	padding: 0;
	padding-left: 2px;
}

.navsection, .navigation-extras {
	background: url('/templates/desktop/mainbg.jpg') #C9B18B;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, .4);
	/*border-radius: 0px 3px 3px 0px;*/
	margin-bottom: 0.5em;
	/*padding-right: 4px;*/
	/*padding-left: 4px;*/
}

.navigation-extras {
	padding: 0.5em;
}

.navhead img {
    padding-top:5px;
    padding-bottom:5px;
}

a:hover.nav, a:active.nav {
    text-decoration: none;
    border: none;
    border-bottom:none;
}

/*Center column and footer*/

a.hotmotd {
    text-decoration:blink;
}

table.charinfo {
    width: auto;
}
td.charhead {
    font-weight:bold;
    padding-top:10px;
}

.charhead img {
    padding-top:5px;
    padding-bottom:5px;
}

td.charinfo {
    padding-left: 8px;
    color:#111111;
}

/* Table rows */
.trhead  { background-color:#DFCDB5; color:#000000; }
.trlight { background-color:rgb(200,170,130); color:#000000; }
.trdark  { background-color:#AF926D; color:#000000; }
.trhilight { background-color: #D2BA9C; color: #000000; }

/* Text colours */
.colDkBlue    { color: #000040; }
.colDkGreen   { color: #004000; }
.colDkCyan    { color: #004040; }
.colDkRed     { color: #400000; }
.colDkMagenta { color: #400040; }
.colDkYellow  { color: #404000; }
.colDkWhite   { color: #303030; }
.colBlack  	{ color: #000000; }
.colLtBlue    { color: #000060; }
.colLtGreen   { color: #006000; }
.colLtCyan    { color: #006060; }
.colLtRed     { color: #600000; }
.colLtMagenta { color: #600060; }
.colLtYellow  { color: #606000; }
.colLtWhite   { color: #505050; }
.colLtBlack   { color: #222222; }
.colDkRust { color: #503030; }
.colLtRust { color: #8D6060; }
.colXLtGreen	{ color: #009900; }
.colMdGrey { color: #444444; }
.colMdBlue { color: #0000F0; }
.colaquamarine  { color: #AFFFE4; }
.coldarkseagreen  { color: #5F8C5F; }
.colLtLinkBlue { color: #0059DF; }
.colDkLinkBlue { color: #004C7F; }
.colwheat  { color: #F5DEB3; }
.coltan  { color: #D2B48C; }
.collightsalmon  { color: #8F6859; }
.colsalmon  { color: #7F5D4F; }
.colDkOrange  { color: #4a2100; }
.colLtOrange  { color: #994400; }
.colRose 	{ color: #9F219F; }
.colDkBrown 	{ color: #6b563f; }
.colLtBrown 	{ color: #8F7D47; }
.colBlueViolet 	{ color: #7A3BCE; }
.coliceviolet	{ color: #6D6B9F; }
.colburlywood { color: #DEB887; }
.colbeige  { color: #F5F5DC; }
.colkhaki  { color: #F0E68C; }
.coldarkkhaki  { color: #5F5B35; }
.colBrightRed { color: #800010; }
.colBrightOrangeRed { color: #a00500; }
.colDkBrightYellow { color: #ff0; }
.colLtBrightYellow { color: #ff7; }
.colFade {opacity: 0.1;}
.colDefault { color: #111111; }

/*These colours don't seem to be used in the game code anywhere*/
.colLime  	{ color: #DDFFBB; }
.colBlue  	{ color: #0070FF; }
.colAttention 	{ background-color: #00FF00; color: #FF0000; }
.colWhiteBlack 	{ background-color: #FFFFFF; color: #000000; }
.colBack  	{ background-color: #00FFFF; color: #000000; }

.colShinyPurple {
	background: -webkit-linear-gradient(#200020, #a030a0, #200020);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.fontFixed {font-family:monospace;}


.fonttimesnewroman { font-family: times new roman, serif; }
.fontgeorgia { font-family: georgia, serif; }
.fontarial { font-family: arial, sans-serif; }
.fontcouriernew {font-family: courier new, monospace; }
.fontverdana {font-family: verdana, sans-serif; }
.fontcomicsans {font-family: comic sans, comic sans ms, fantasy; }

/* Admin - Translator tool links */

a.t { 
    border: 1px dotted #0000ee;
    color: #330000;
    text-decoration: none;
    padding-left: 1px;
    padding-right: 1px;
}
a.thot { 
    border: 1px solid #ee0000;
    color: #330000;
    text-decoration: none;
    padding-left: 1px;
    padding-right: 1px;
}

/* Admin - Debugging */

div.debug {
    color: #000000;
    border: 1px dotted #000099;
    width: auto;
    height: auto;
    /*display: none;*/
}


/*Navigation column*/

.bottombuttons {
    /*position: absolute;*/
    /*bottom: 0px;*/
    background-color:#AF926D;
    width:100%;
    text-align:center;
    /*z-index:100;*/
    text-decoration: none;
    border-bottom: none;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.actionbutton, .statbutton, .functionbutton, .storybutton {
    background: linear-gradient(to bottom, rgb(200,170,130) 0%, rgb(170,140,100) 100%);
    border-top:1px solid #d4b48b;
    border-left:1px solid #d1b28a;
    border-right:1px solid #b59771;
    border-bottom:1px solid rgb(170,140,100);
    box-sizing: border-box;
    min-width: 50%; 
    height: 100%;
    display: inline-block;
    font-variant:small-caps;
    text-decoration: none;
}

a.actionbutton, a:link.actionbutton, a:visited.actionbutton, a:hover.actionbutton, a:active.actionbutton,
a.statbutton, a:link.statbutton, a:visited.statbutton, a:hover.statbutton, a:active.statbutton,
a.functionbutton, a:link.functionbutton, a:visited.functionbutton, a:hover.functionbutton, a:active.functionbutton,
a.storybutton, a:link.storybutton, a:visited.storybutton, a:hover.storybutton, a:active.storybutton,
a.chatfooter_nextpage, a:link.chatfooter_nextpage, a:visited.chatfooter_nextpage, a:hover.chatfooter_nextpage, a:active.chatfooter_nextpage,
a.chatfooter_prevpage, a:link.chatfooter_prevpage, a:visited.chatfooter_prevpage, a:hover.chatfooter_prevpage, a:active.chatfooter_prevpage,
a.chatfooter_showpages, a:link.chatfooter_showpages, a:visited.chatfooter_showpages, a:hover.chatfooter_showpages, a:active.chatfooter_showpages,
a.chatfooter_refresh, a:link.chatfooter_refresh, a:visited.chatfooter_refresh, a:hover.chatfooter_refresh, a:active.chatfooter_refresh,
a.chatfooter_refresh, a:link.chatfooter_refresh, a:visited.chatfooter_refresh, a:hover.chatfooter_refresh, a:active.chatfooter_refresh
{
    border-bottom:none;
    text-decoration:none;
    color:#000000;
}

a.nav, a:link.nav, a:visited.nav a:hover.nav, a:active.nav, a.motd, a.hotmotd {
    text-decoration: none;
    background: linear-gradient(to bottom, rgb(200,170,130) 0%, rgb(170,140,100) 100%);
    border-top:1px solid #d4b48b;
    border-left:1px solid #d1b28a;
    border-right:1px solid #b59771;
    border-bottom:1px solid rgb(170,140,100);
    padding-top:0.2em;
    padding-bottom:0.2em;
    padding-left: 0.2em;
    display: block;
    line-height: initial;
}

.navhelp {
	text-decoration: none;
    /*background: linear-gradient(to bottom, rgb(200,170,130) 0%, rgb(170,140,100) 100%);*/
/*    border-top:1px solid #d4b48b;
    border-left:1px solid #d1b28a;
    border-right:1px solid #b59771;
    border-bottom:1px solid rgb(170,140,100);*/
    padding-top:0.2em;
    padding-bottom:0.2em;
    padding-left: 0.2em;
    display: block;
    line-height: initial;
}

/* Blinkydot animations for map thingies */
.blink-bg {
	animation: blinkingOpacity 2s infinite;
}

.chattimestamp {
	font-family: monospace;
}

@keyframes blinkingOpacity{
	0%		{opacity: 0;}
	50%		{opacity: 1;}
	100%	{opacity: 0;}
}

@keyframes blinkingRed{
	from{
		/*background-color: #ff0000;*/
		/*opacity:1;*/
		background-color:rgba(255,0,0,1);
	}
}

.chatfooter_paginationrow {
	background: linear-gradient(to bottom, rgb(200,170,130) 0%, rgb(170,140,100) 100%);
	display:table;
	table-layout:fixed;
	height:2em;
	width:100%;
	margin-top:2em;
	margin-bottom:2em;
}

.chatfooter_nextpage {
	border-top:1px solid #d4b48b;
    border-left:1px solid #d1b28a;
    border-right:1px solid #b59771;
    border-bottom:1px solid rgb(170,140,100);
	text-align:center;
	vertical-align:middle;
	display:table-cell;
	height:100%;
	font-size:1.5em;
}

.chatfooter_prevpage {
	border-top:1px solid #d4b48b;
    border-left:1px solid #d1b28a;
    border-right:1px solid #b59771;
    border-bottom:1px solid rgb(170,140,100);
	text-align:center;
	vertical-align:middle;
	display:table-cell;
	height:100%;
	font-size:1.5em;
}

.chatfooter_showpages {
	border-top:1px solid #d4b48b;
    border-left:1px solid #d1b28a;
    border-right:1px solid #b59771;
    border-bottom:1px solid rgb(170,140,100);
    height:100%;
    text-align:center;
    vertical-align:middle;
    display:table-cell;
}

.chatfooter_refresh {
	border-top:1px solid #d4b48b;
    border-left:1px solid #d1b28a;
    border-right:1px solid #b59771;
    border-bottom:1px solid rgb(170,140,100);
    height:100%;
    text-align:center;
    vertical-align:middle;
    display:table-cell;
}



/* Copied from themes' CSS files 2022-01-14, leaving themes as just a series of CSS vars */

/*default purple CSS*/
:root {
	--gtc: 20,0,20;
	--bgTopHeight: 0em;
	--bgBotHeight: 0em;
	/*ipad compatibility: background images in variables have to use an absolute path */;
	--bgImgTop: url('/templates/desktop/blank.png');
	--bgImgBot: url('/templates/desktop/blank.png');
	--bgImgTile: url('/templates/desktop/pagebg-purple.jpg');;
	--transGradTopStart: 0em;
	--transGradTopOver: calc(var(--bgTopHeight)*2);
	--transGradBotStart: 8em;
	--transGradBotOver: calc(var(--bgBotHeight)*2);
	--moodGradCreep: 6em;
	--moodGradCreepTop: 6em;
	--moodGradCreepTopTrans: 0.6;
	--moodGradCreepBottom: 6em;

	--bgMoodTrans: 0.6; /* set to 0.6 in most skins */
	--gcolTop1: var(--gtc); /* set to var(--gtc) in most skins */
	--gcolTop2: var(--gtc);
	--gcolTop3: var(--gtc);
	--gcolBot1: var(--gtc);
	--gcolBot2: var(--gtc);
	--gcolBot3: var(--gtc);

	--linkCol: rgb(40,0,40);
	--linkHiCol: rgb(80,0,80);
	--linkBriCol: rgb(240,0,240);

	--mapscale: 100px;
	--contentPadding: 0.2em;
}

.content {
	background:url('/templates/desktop/mainbg.jpg') #C9B18B;
	margin-bottom: 0.5em;
	padding: var(--contentPadding);
	box-shadow: 4px 4px 8px rgba(0, 0, 0, .4);
	border-top: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2);
}

.bg-images {
	background-image:
	var(--bgImgTop),
	var(--bgImgBot),
	var(--bgImgTile);
	background-position:
	top,
	left 0 bottom 1.5em,
	top;
	background-repeat: no-repeat, no-repeat, repeat;
	background-size: 100% var(--bgTopHeight),100% var(--bgBotHeight),auto;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/*Softens transition of background top and bottom images to tiling background.*/
.bg-grad-img-trans {
	background-image: 
	linear-gradient(
		180deg,rgba(var(--gcolTop1),0),
		rgba(var(--gcolTop1),0) var(--transGradTopStart),
		rgba(var(--gcolTop2),1) var(--bgTopHeight),
		rgba(var(--gcolTop3),0) var(--transGradTopOver)),
	linear-gradient(0deg,rgba(var(--gcolBot1),0),
		rgba(var(--gcolBot1),0) var(--transGradBotStart),
		rgba(var(--gcolBot2),1) var(--bgBotHeight),
		rgba(var(--gcolBot3),0) var(--transGradBotOver));
	background-position: top,left 0 bottom 1.5em;
	background-repeat: no-repeat;
	image-rendering: initial;
}


/*Mood gradients in order:
1. Gradient at top edge of page, solid to transparent, softening the very top of the top column background.
2. Gradient right edge of page, solid to transparent, used mostly on very wide monitors, ensuring that the background graphic fades to solid gracefully.
3. Gradient bottom edge of page, solid to transparent, softening the bottom of the bottom background.
4. Gradient left edge of page, solid to transparent, softening the left edge of background images.
5. Gradient stretching the entire page length, making background tiling image shadowy and mysterious.
*/

.bg-grad-mood {
	background-image:
	linear-gradient(180deg,rgba(var(--gtc),var(--moodGradCreepTopTrans)), rgba(var(--gtc),0) var(--moodGradCreepTop)),
	linear-gradient(270deg,rgba(var(--gtc),1),rgba(var(--gtc),0) var(--moodGradCreep)),
	linear-gradient(0deg,rgba(var(--gtc),1), rgba(var(--gtc),0) var(--moodGradCreepBottom)),
	linear-gradient(90deg,rgba(var(--gtc),1), rgba(var(--gtc),0) var(--moodGradCreep)),
	linear-gradient(0deg,rgba(var(--gtc),0), rgba(var(--gtc),var(--bgMoodTrans)), rgba(var(--gtc),0));
	background-position:
	top,
	right,
	left 0 bottom 1.5em,
	left,
	top;
	background-repeat: no-repeat;
}

body {
	background:rgb(var(--gtc));
}

a:link {
	color: var(--linkCol);
}

a:visited {
	color: var(--linkCol);
}

a:hover { 
	color: var(--linkHiCol);
}

a:active {
	color: var(--linkCol);
}

a:hover.nav, a:active.nav {
	color: var(--linkHiCol);
}

.navhi {
	color: var(--linkHiCol);
}

a.hotmotd {
	color:var(--linkHiCol);
}

/*fix the background in place*/
.bg-images, .bg-grad-img-trans, .bg-grad-mood, .overallpage, .extradecoration {
	/*background-attachment: fixed;*/
}


/*stats*/
/* Stats */
.stat_cat_title {
	color:#ffffff;
	font-variant: small-caps;
	font-size: 0.8em;
	text-shadow: 1px 1px 0px rgb(0, 0, 0);
}

.stat_container {
	background:url('/templates/desktop/mainbg.jpg') #C9B18B;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, .4);
	margin-bottom: 0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

.stat_body {
	/*padding:3px;*/
}

.stat_title {
	float:left;
	clear:left;
	margin-right:5px;
}

.stat_value {
	float:right;
	clear:right;
	/*line-height:0.9em;*/
}

.stat_row {
	margin:5px;
	/*float:left;*/
	/*width:100%;*/
}

.stat_buff {
	text-align:left;
	/*line-height:1.2em;*/
	margin:5px;
}

/*bars*/
.bar_outer {
	/*box-shadow: 1px 1px 2px rgba(0,0,0,0.2);*/
	/*border-radius: 2px;*/
	box-shadow: inset 1px 1px 3px rgba(0,0,0,0.6);
	border-top: 1px solid rgba(0,0,0,0.4);
	border-right: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-left: 1px solid rgba(0,0,0,0.4);
	background-clip: padding-box;
	background-color: #666666;
}

.bar_full {
	/*box-shadow: 0px 0px 2px rgba(0,255,0,1);*/
	/*border-radius: 2px;*/
	box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4);
	border-top: 1px solid rgba(0,0,0,0.4);
	border-right: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-left: 1px solid rgba(0,0,0,0.4);
	background-clip: padding-box;
}

.bar_inner {
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.4);
	/*border-right: 1px solid rgba(255,255,255,0.2);*/
}

/*map styling*/

.mapcontainer {
	/*float:left;*/
	/*display:inline-block;*/
	/*padding-right:10px;*/
}

.maptable {
	box-shadow: 4px 4px 8px rgba(0, 0, 0, .4);
	/*margin-right:6px;*/
/*	margin-bottom:6px;*/
	/*line-height:1em;*/
	border: none;
	border-spacing: 0;
	/*width: 100%;*/
	/*margin: var(--negativeContentPadding);*/
	/*margin-bottom: 1em;*/
	/*table-layout: fixed;*/
	margin-left: auto;
	margin-right: auto;
}

.maptable th, .maptable td, .maptable table {
	padding: 0;
}

.mapcoords_x, .mapcoords_y {
	font-size: 0.8em;
	text-align: center;
	vertical-align: middle;
	height: 1.2em;
	width: 1.2em;
}

.mapsquare {
	width: 18.5vw;
	height: 18.5vw;
	max-height: 18.5vw;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	/*padding: 0;*/
	/*margin: 0;*/
}

.mapsquare a {
	display:block;
    text-decoration:none;
    height: 100%;
    width: 100%;
    padding: 0;
}

.mapsquare_clickable {
	outline: 1px dotted rgba(255,255,255,0.2);
}

.mapsquare_currentpos {
	outline: 1px solid rgba(255,255,255,0.5);
}

#mapnotelink {
	float: right;
}

/*login page*/
.login-body {
	/*background: url('/templates/desktop/bg/pagebg-purple.jpg');*/
}

.login-siteheader {
	background:url('/templates/desktop/top.png') repeat-x bottom;
	text-align:center;
	height: 7em;
}

.siteheaderimg {
	text-align: center;
	height: 7em;
}

.login-centerrow {
	background:url('/templates/desktop/mainbg.jpg') #C9B18B;
	padding: 20px;
}

.login-footer {
	background:url('/templates/desktop/bottom.png') repeat-x;
	/*text-align:center;*/
	height:114px;
}

.loginform {
	background:url('/templates/desktop/mainbg.jpg') #C9B18B;
	padding: 2em;
	margin-bottom: 2em;
}

.indexPageStoryContent {
	padding: 1em;
}

.indexPageStoryLinks {
	padding: 1em;
}

a.indexPageStoryLink {
	text-decoration: none;
    background: linear-gradient(to bottom, rgb(200,170,130) 0%, rgb(170,140,100) 100%);
    border-top:1px solid #d4b48b;
    border-left:1px solid #d1b28a;
    border-right:1px solid #b59771;
    border-bottom:1px solid rgb(170,140,100);
    padding-top:0.2em;
    padding-bottom:0.2em;
    padding-left: 0.2em;
    display: block;
    line-height: initial;
}

/*Non-main-page content areas*/
.auxContent {
	background:url('/templates/desktop/mainbg.jpg') #C9B18B;
	padding: 0.5em;
	margin-bottom: 1em;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, .4);
	border-top: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2);
}

.sectionHeaders {
    display: grid;
    width: 100%;
    align-items: center;
    text-align: center;
    grid-template-columns: minmax(1em, 1fr) auto minmax(1em, 1fr);
    grid-gap: 1em;
    font-variant: small-caps;
	color: #ffffff;
	text-shadow: 1px 1px 0px rgb(0, 0, 0);
	margin-top: 2em;
	margin-bottom: 0.5em;
}

.sectionHeaders:before,
.sectionHeaders:after {
    content: '';
    border-top: 1px solid rgba(255,255,255,0.5);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
}




/*The area in which the map grid and the map settings menu show*/
.mapArea {
	/*float: left;*/
	/*padding-right: 1em;*/
	padding-bottom: 1em;
	text-align: center;
}

.mapGrid {
	display: inline-grid;
	clear: both;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, .4);
	width: fit-content;
}

.mapCell {
	position: relative;
	background-size: 100%;
}

.mapCell_clickable {
	outline: 1px dotted rgba(255,255,255,0.4);
	outline-offset: -1px;
}

.mapCell_currentPos {
	outline: 1px dashed rgba(255,255,255,0.6);
	outline-offset: -1px;
}

.mapCell_hotkey {
	font-family: iikey;
	position: absolute;
	top: 0;
	/*left: 0;*/
	width: 100%;
	text-align: center;
}

.mapCell_stamCost {
	position: absolute;
	bottom: 0.2em;
	left: 0.2em;
	font-size: 0.6em;
	line-height: 0.6em;
	text-shadow: 0px 0px 1px rgba(0,0,0,0.4);
	color: rgba(255,100,0,1);
}

.mapCell a {
	display:block;
    text-decoration:none;
    height: 100%;
    width: 100%;
    color: rgba(255,255,255,0.6);
	text-shadow: 0px 0px 1px rgba(0,0,0,0.4);
}

.mapCoordX, .mapCoordY {
	font-size: 0.8em;
	align-items: center;
	justify-items: center;
	display: grid;
}

.mapCoordDark {
	background-color:#AF926D;
}

.mapCoordLight {
	background-color:rgb(200,170,130);
}



.mapsetting_off {
	/*border: 1px dotted #000000;*/
}

a.mapsetting_on {
	border-bottom: none;
	color: var(--linkHiCol);
}

.mapsetting_on::before {
	content: "[";
}

.mapsetting_on::after {
	content: "]";
}

.mapsettings {
	font-size: 0.8em;
	line-height: 1em;
	text-align: left;
}

.mapsettings_link {
	font-size: 0.8em;
	text-align: left;
}

.mapsettings_header {
	font-weight: bold;
	padding-top: 0.5em;
}

.mapsettings_notice {
	background-color: #333333;
	border: 1px dotted #ff0000;
	color: #ffffff;
	padding: 0.2em;
}

.mapsettings_note {
	padding-top: 0.1em;
}


/*QUICKNAV SECTION*/

.stickybottom {
	position: sticky;
	bottom: 1.5em;
	width: 100%;
	z-index: 1000;
	background-image: var(--bgImgTile);
}

.quicknav_container {
	/*position: fixed;*/
	/*bottom: 1.5em;*/
	/*height: 18vh;*/
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/*grid-auto-rows: 33%;*/
	/*background: linear-gradient(to bottom, rgb(200,170,130) 0%, rgb(170,140,100) 100%);*/
	background-image: linear-gradient(270deg,rgba(var(--gtc),1),rgba(var(--gtc),0) var(--moodGradCreep));
	font-size: 0.8em;
	line-height: 0.8em;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, .4);
	border-bottom: 1px solid rgba(255, 255, 255,0.5);
	margin-top: 3em;
}

a.quicknav_container, a:link.quicknav_container, a:visited.quicknav_container, a:active.quicknav_container, a:hover.quicknav_container{
	border-bottom: none;
	text-decoration: none;
}

.quicknav_nav, a.quicknav_nav, a:link.quicknav_nav, a:visited.quicknav_nav, a:active.quicknav_nav {
    background: linear-gradient(to bottom, rgb(200,170,130) 0%, rgb(170,140,100) 100%);
    border-top:1px solid #d4b48b;
    border-left:1px solid #d1b28a;
    border-right:1px solid #b59771;
    border-bottom:1px solid rgb(170,140,100);
    box-sizing: border-box;
    /*min-width: 30%;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*font-variant:small-caps;*/
    text-decoration: none;
    text-align: center;
    line-height: 1em;
    height: 6vh;
    /*border: 1px solid #ff0000;*/
}

.quicknav_openSubmenu, a.quicknav_openSubmenu, a:link.quicknav_openSubmenu, a:visited.quicknav_openSubmenu, a:active.quicknav_openSubmenu {
	background: linear-gradient(315deg, rgb(150, 110, 60) 0%, rgb(230, 200, 150) 5%,rgba(0,0,0,0) 5%),linear-gradient(to bottom, rgb(200,170,130) 0%, rgb(170,140,100) 100%);
}

.quicknav_subMenuHeader{
	/*font-size: 0.8em;*/
	font-variant: small-caps;
	background: linear-gradient(to bottom, rgb(170,140,100) 0%, #b79870 100%);
	position: absolute;
	top: -2em;
	left: 4em;
	height: 2em;
	/*width: 4em;*/
	border-radius: 0 0.5em 0 0;
	text-align: center;
	border-top: 1px solid rgba(0,0,0,0.3);
	border-right: 1px solid rgba(0,0,0,0.1);
	border-bottom: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.quicknav_disabled {
	background: linear-gradient(to bottom, rgb(170,150,110) 0%, rgb(160,140,110) 100%);
	border-bottom: 1px solid #d4b48b;
	border-right: 1px solid #d1b28a;
	border-left: 1px solid #b59771;
	border-top: 1px solid rgb(170,140,100);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	text-align: center;
	line-height: 1em;
	height: 6vh;
	color: rgb(80,80,80);
}

.quicknav_green {
	background: linear-gradient(to bottom, rgb(80, 200, 80) 0%, rgb(40, 100, 40) 100%);
	border-bottom: 1px solid rgb(20,80,20);
	border-right: 1px solid rgb(40,160,40);
	border-left: 1px solid rgb(80,220,80);
	border-top: 1px solid rgb(100,200,100);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	text-align: center;
	line-height: 1em;
	height: 6vh;
	color: rgb(255, 255, 255);
}

.quicknavBack, a.quicknavBack, a:link.quicknavBack, a:visited.quicknavBack, a:active.quicknavBack {
	background: linear-gradient(to bottom, rgb(170,140,100) 0%, #b79870 100%);
	position: absolute;
	top: -2em;
	left: 0;
	height: 2em;
	width: 4em;
	/*border-radius: 0.5em 0 0 0;*/
	text-align: center;
	border-top: 1px solid rgba(0,0,0,0.3);
	border-right: 1px solid rgba(0,0,0,0.1);
	border-bottom: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quicknavInfo, a.quicknavInfo, a:link.quicknavInfo, a:visited.quicknavInfo, a:active.quicknavInfo{
	background: linear-gradient(to bottom, rgb(170,140,100) 0%, #b79870 100%);
	position: absolute;
	top: -1em;
	right: 0;
	height: 1em;
	width: 1em;
	border-radius: 0.2em 0 0 0;
	text-align: center;
	border-top: 1px solid rgba(0,0,0,0.3);
	border-left: 1px solid rgba(0,0,0,0.1);
	border-bottom: none;
	box-sizing: border-box;
	font-size: smaller;
	line-height: 1em;
}

.quicknavShowHide, a.quicknavShowHide, a:link.quicknavShowHide, a:visited.quicknavShowHide, a:active.quicknavShowHide {
	background: linear-gradient(to bottom, rgb(170,140,100) 0%, #b79870 100%);
	position: absolute;
	top: -2em;
	left: 0;
	height: 2em;
	width: 4em;
	border-radius: 0 0.5em 0 0;
	text-align: center;
	border-top: 1px solid rgba(0,0,0,0.3);
	border-right: 1px solid rgba(0,0,0,0.1);
	border-bottom: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quicknavInfoContainer {
	position: fixed;
	top: 20%;
	background: rgba(0,0,0,0.8);
	color: rgb(255,255,255);
	padding: 2em;
}

.quicknav_stamcost {
	font-size: 0.8em;
	color: #994400;
}

.bar_text {
	font-size: 0.8em;
	text-shadow: 1px 1px 0px rgb(0, 0, 0);
	color: rgb(255,255,255);
}

.fixedbottom {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 1000;
}

.staminabar_mobile .bar_outer {
	border: none;
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.4);
}

.combatCard_base {
	clear: both;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
	padding: 0.2em;
	background: rgba(255,255,255,0.1);
	/*display: inline-block;*/
	margin: 0.2em;
	position: relative;
	vertical-align: top;
}

.combatCard_name, .combatCard_name_dead, .combatCard_hpDelta, .combatCard_hpBar, .combatCard_hp, .combatCard_atk, .combatCard_def, .combatCard_generic {
	font-family:ZX, monospace;
	letter-spacing:1px;
}

.combatCard_hpBar {
	margin-bottom: 0.1em;
}

.combatCard_hpDelta {
	position: absolute;
	top: 0;
	right: 0;
}

.combatCard_name_dead {
	text-decoration: line-through;
}

.combatCard_base img {
	image-rendering: pixelated;
  	image-rendering: crisp-edges;
  	padding-right: 0.2em;
  	float: left;
}

.combatCard_hp, .combatCard_atk, .combatCard_def, .combatCard_generic {
	display: inline-block;
	padding-right: 1em;
}

.combatCard_buffDelta {
	font-size: 0.6em;
	line-height: 0.6em;
	float: right;
}

table img {
	/*for HTML5 compatibility*/
	vertical-align: bottom;
}

.quickStat_container {
	/*border: 1px solid #ff0000;*/
	position: absolute;
	top: -2em;
	right: 0;
	display: flex;
	height: 2em;
	border-radius: 0.5em 0 0 0;
	text-align: center;
	background: linear-gradient(to bottom, rgb(170,140,100) 0%, #b79870 100%);
	border-top: 1px solid rgba(0,0,0,0.3);
	border-left: 1px solid rgba(0,0,0,0.1);
	border-bottom: none;
	box-sizing: border-box;
}

.quickStat_stat {
	/*border: 1px solid #00ff00;*/
	display: flex;
	justify-content: center;
	align-items: center;
	padding-right: 0.2em;
	padding-left: 0.2em;
	border-right: 1px solid rgba(0,0,0,0.1);
}

.quickStat_title {
	/*border: 1px solid #0000ff;*/
	float: left;
	padding-right: 0.1em;
}

.quickStat_value {
	/*border: 1px solid #ff00ff;*/
	float: right;
}