@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);
}

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_submenu {
	/*display: 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_disabled {
	background: linear-gradient(to bottom, rgb(170,160,150) 0%, rgb(150,140,130) 100%);
	border-top: 1px solid rgb(190,180,170);
	border-left: 1px solid rgb(180,170,160);
	border-right: 1px solid rgb(170,160,150);
	border-bottom: 1px solid rgb(150,140,130);
    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;
    /*display: inline;*/
    height: 6vh;
    color: rgb(80,80,80);
}

.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 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;
}

.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;
}

.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;
}