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

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

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

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

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

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

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

.overallpage {
	/*height:100%;*/
}

.extradecoration {
	/*height:100%;*/
}

strong {
	font-weight:bold;
}

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

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;
	border-bottom: 1px dotted #444444;
}
a:active {
    text-decoration: none;
	border-bottom: 1px dotted #444444;
}

img {
	border: none;
	border-bottom: none;
}

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

/*select, textarea {
    background: #DFCDB5;
    border: 1px solid #222222;
    color: #111111;
	font-family: iireg, serif;
	font-size:inherit;
}*/

input, select, textarea {
	box-shadow: inset 1px 1px 1px 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;
	font-family: inherit;
	font-size: inherit;
	background: rgba(255,255,255,0.4);
	border: none;
	border-radius: 3px;
}

button, .button, input[type=button], input[type=submit] {
	box-shadow: 1px 1px 1px rgba(0,0,0,0.6);
	border-bottom: 1px solid rgba(0,0,0,0.4);
	border-left: 1px solid rgba(255,255,255,0.2);
	border-top: 1px solid rgba(255,255,255,0.2);
	border-right: 1px solid rgba(0,0,0,0.4);
	background-clip: padding-box;
	font-family: inherit;
	font-size: inherit;
	background: rgba(255,255,255,0.4);
	border: none;
	border-radius: 3px;
	margin: 0.2em;
}

button:focus, input:focus, select:focus, textarea:focus {
	background: rgba(255,255,255,0.6);
}

h2 {
	font-variant: small-caps;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.2);
}

.contentcol {
	flex-grow: 1;
}

/*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(mainbg.jpg) #C9B18B;
    border:1px dotted #333333;
    color:#000;
    overflow:hidden;
}

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

/*dragonleather*/

.siteheader {
	display:flex;
	justify-content: flex-end;
	height: 9em;
}

.centerrow {
	display:flex;
}

.content {
	vertical-align:top;
	/*margin-left:5px;*/
	padding:8px;
	background:url(mainbg.jpg) #C9B18B;
	border-radius:10px 0px 0px 10px;
	box-shadow: 5px 5px 4px rgba(0,0,0,0.2);
}

.contentdecoration {
	padding: 8px;
	margin: -8px;
	border-radius: 10px 10px 10px 10px;
	position: relative;
}

.content-toplinks, .content-displayprefs, .displaymenu, .content-pagetitle, .content-pagecontent {
	position:relative;
}

.content-pagetitle {
	
}

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

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

/*Navigation column*/

.navigationcol {
	vertical-align:top;
	width:180px;
	padding-right:15px;
	flex-shrink:0;
}

/*
.navigation {
	background:url(mainbg.jpg) #C9B18B;
	padding-left: 4px;
	padding-right:4px;
	padding-top:5px;
	padding-bottom:20px;
	border-radius:0px 10px 10px 0px;
	box-shadow: 5px 5px 4px rgba(0,0,0,0.2);
}
*/

.navigation-extras {
	text-align: center;
}

.nav {
	/*padding:2px 2px 2px 5px;*/
	/*border:1px dotted #ff0000;*/
	padding-left: 4px;
}

/* 2021-11-08: switching default navigation style to open */
.navigation {
	background: none;
	box-shadow: none;
	padding: 0;
}

.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(mainbg.jpg) #C9B18B;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, .4);
	border-radius: 0px 3px 3px 0px;
	margin-bottom: 1em;
	padding-right: 4px;
	padding-left: 4px;
}

.navigation-extras {
	padding-top: 8px;
	padding-bottom: 8px;
}


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

a.nav, a:link.nav, a:visited.nav {
    text-decoration: none;
	border-top:1px solid rgba(0,0,0,0.1);
	border-bottom:1px solid rgba(0,0,0,0);
    width: 100%;
    box-sizing: border-box;
    height: auto;
    /*padding-left: 10px;*/
    float: left; 
    clear: none;
}
a:hover.nav, a:active.nav {
    text-decoration: none;
	/*border-bottom:1px solid rgba(0,0,0,0.4);*/
	/*border-top:1px solid rgba(0,0,0,0.4);*/
	box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
	background:rgba(255,255,255,0.1);
}

.navhi {
    /*text-decoration: underline;*/
    /*font-weight: bold;*/
    /*padding: 1px;*/
    font-family:iikey;
}

/*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;
}*/

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

.stat_container {
	background:url(mainbg.jpg) #C9B18B;
	font-size:0.8em;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, .4);
	height:8em;
	line-height:0.8em;
	overflow:auto;
}

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

.stat_divcell{
	display:table-cell;
	padding:10px 5px 20px 5px; /*space between divcells and top and bottom of red background area*/
}

.stat_divrow {
	display:table; 
	table-layout:fixed; 
	float:right; 
	text-align:right;
}

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

/* Table rows */

.trhead  { background-color:#DFCDB5; color:#000000; }
.trlight { background-color:#C7A983; color:#000000; }
.trdark  { background-color:#AF926D; color:#000000; }
.trhilight { background-color: #D2BA9C; color: #000000; }

/* Fight! */
.fight_playerattacks {

}
.fight_badguyattacks, .fight_badguyattackscompanion {
	/*text-indent: 4em;*/
}
.fight_companionattacks {
	/*text-indent: 2em;*/
}
.fightoutput{
}
.fightoutput_buff{
}
.fightoutput_special{
}

/* 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;
}

/* 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 {
	font-family: iimon,monospace;
	font-size:0.75em;
    border: 1px dotted #7777FF;
    width: auto;
    height: auto;
}

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

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

.chattimestamp {
	font-family:iimon,monospace;
	font-size:0.75em;
	padding-right:3px;
}

.singlecomment {
	/*border-bottom:1px dotted rgba(0,0,0,0.1);*/
	padding-bottom:2px;
	padding-top:2px;
}

.chatfooter_paginationrow {
	padding-top:1.2em;
}

.chatfooter_prevpage {
	margin-right:8px;
}

.chatfooter_showpages {
	margin-right:8px;
}

.chatfooter_refresh {
	margin-right:8px;
}

.chatfooter_nextpage {
	margin-right:8px;
}

.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);*/
	float: left;
}

#dmMenu_horizontal {
	background:rgba(255,255,255,0.2);
}

#dmSub_layout_topmargin {
	opacity: 0.5;
}

#dmMenu_rightpad_off {
	background:rgba(255,255,255,0.2);
}

#dmMenu_toppad_full {
	background:rgba(255,255,255,0.2);
}

#dmMenu_lineheight_default {
	background:rgba(255,255,255,0.2);
}

#dmMenu_navheight_default {
	background:rgba(255,255,255,0.2);
}

#dmMenu_navstyle_default {
	background:rgba(255,255,255,0.2);
}

#congratulateAB {
	display: none;
	background-color: #330000;
	border: 1px dotted #ff0000;
	padding: 10px;
	color: #ffffff;
}

/* 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);
}

.bg-images {
	background-image:
	var(--bgImgTop),
	var(--bgImgBot),
	var(--bgImgTile);
	background-position:
	top,
	bottom,
	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,bottom;
	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,
	bottom,
	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);
}

/*map styling*/

:root {
	--mapscale: 75px;
}

.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;
	/*margin-bottom: 1em;*/
	table-layout: fixed;
}

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

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

.mapsquare {
	width: var(--mapscale);
	height: var(--mapscale);
	background-repeat: no-repeat;
	background-size: 100%;
	line-height:1em;
}

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

.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 stuff */

.indexPageStoryContent {
	padding: 1em;
}

.indexPageStoryLinks {
	padding: 2em;
}

.indexPageStoryLink:before {
  content: "--> ";
}

.indexPageStoryLink {
	display: block;
}

a.indexPageStoryLink {
	border-bottom: none;
}





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

.mapGrid {
	display: grid;
	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:#C7A983;
}



.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;
	padding-bottom: 1em;
}

.mapsettings_link {
	font-size: 0.8em;
}

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

.bar_text {
	font-size: 0.8em;
	text-shadow: 1px 1px 0px rgb(0, 0, 0);
	color: rgb(255,255,255);
	height: 100%;
	line-height: 1.2em;
	padding-right: 0.2em;
	display: inline-block;
}

.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;
	min-width: 16em;
}

.combatCard_name, .combatCard_name_dead, .combatCard_hpBar, .combatCard_hpDelta, .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;
}