/* Canvas for the cutscenes */
canvas {
	display: block;
}
/* TACTICAL COMBAT */
.combatEnemyMainFrame {
	width:100%;
	/*display:inline-block;*/
	margin: auto;
	background: linear-gradient(to bottom left,rgba(31,0,0,0.80),rgba(31,0,0,0.60),rgba(31,0,0,0.64));
	padding: 0;
	border-radius: 8% 8% 16% 16%;
	box-shadow: 0 0 0.05em 0.15em rgba(38,50,56 ,1), 0 0 0.05em 0.15em rgba(55,71,79 ,0.8) inset, 0 0 0.8em 0.4em rgba(15,0,0,0.8), 0 0 0.667em 0.33em rgba(15,0,0,0.5) inset;
}
.combatNarratorMainFrame {
	/*display:inline-block;*/
	margin: auto;
}
.combatNarratorFrame {
	opacity: 0;
	top: 40%;
	transform: translateY(-1em);
	/*display:inline-block;*/
	margin: auto;
    position: relative;
    z-index: 100;
	padding: 0.2em 0 0.225em 0.4em;
	border-radius: 8%;
    font-weight: 700;
    font-size: 118%;
	letter-spacing: 0.0333em;
	color: gold;
	text-shadow:0 0 0.15em black, 0 0 0.25em black, 0.1em 0.1em 0.1em black, -0.1em -0.1em 0.1em black, -0.1em 0.1em 0.1em black, 0.1em -0.1em 0.1em black;
	box-shadow: 0 0 0.05em 0.15em rgba(130,119,23,0.92), 0 0 0.25em 0.1em rgba(15,15,31,0.92), 0 0 0.25em 0.1em rgba(15,15,31,0.92) inset, 0.1em 0.1em 0.33em 0.1em black;
	background: linear-gradient(to bottom, rgba(15,15,31,0.96), rgba(15,15,31,0.80),rgba(15,15,31,0.96));
	pointer-events: none;
	will-change: transform, opacity;
	z-index: 0;
}
.combatEndFightButton {
	z-index: 101;
    position: absolute;
    width: 80%;
    left: 10%;
    top: 49%;
	display:none;
	opacity: 0;
	font-size: 125%;
	text-align: center;
}
.combatFlavorTextFrame {
	line-height: 1.15em;
	opacity: 0;
	visibility: hidden;
	top: 40%;
	transform: translateY(-1em);
    position: relative;
	text-align:center;
    z-index: 99;
	padding: 0.33em 0;
	border-radius: 8%;
    font-weight: 700;
	color: whitesmoke;
	text-shadow:0 0 0.1em black, 0 0 0.25em black, 0.1em 0.1em 0.1em black, -0.1em -0.1em 0.1em black, -0.1em 0.1em 0.1em black, 0.1em -0.1em 0.1em black;
	box-shadow: 0 0 0.05em 0.15em rgba(130,119,23,1), 0 0 0.25em 0 rgba(15,15,31,0.80) inset;
	background: linear-gradient(to bottom, rgba(15,15,31,0.96), rgba(15,15,31,0.80),rgba(15,15,31,0.96));
	will-change: transform, opacity;
}
.combatControlMainFrame {
	position: relative;
	width:100%;
	/*display:inline-block;*/
	margin: auto;
	background: linear-gradient(to bottom right,rgba(128,222,234 ,0.24),rgba(128,222,234 ,0.18),rgba(128,222,234 ,0.2),rgba(128,222,234 ,0.24),rgba(128,222,234 ,0.2),rgba(128,222,234 ,0.24));
	padding: 0 0 0.6333em 0;
	border-radius: 36% 36% 30% 30%;
	box-shadow: 0 0 0.05em 0.15em rgba(130,119,23,0.92), 0 0 0.05em 0.15em black, 0 0 0.5em 0.15em rgba(38,50,56 ,0.8), 0 0 0.5em 0.15em rgba(38,50,56 ,0.8) inset;
}
.combatPartyMainFrame {
	width:100%;
	/*display:inline-block;*/
	margin: auto;
	background: linear-gradient(to bottom,rgba(0,0,31,0.64),rgba(0,0,31,0.72),rgba(0,0,31,0.8));
	padding: 0;
	border-radius: 12% 12% 24% 24%;
	box-shadow: 0 0 0.05em 0.15em rgba(130,119,23,0.92), 0 0 0.5em 0.25em rgba(0,0,15,0.8), 0 0 0.5em 0.25em rgba(0,0,15,0.5) inset;
}
.actorFrame {
	border-radius: 5% 5% 33.3% 33.3%;
	display: none;
	opacity: 0;
	visibility: hidden;
	width: 22%;
	margin-left: 1.5%;
	margin-right: 1.5%;
	transform: matrix(1, 0, 0, 1, 0, 0);
	/*will-change: transform, opacity;*/
}
.combatSpriteOverlay {
	position: absolute;
	width:84%;
	height:100%;
	pointer-events: none;
	overflow:hidden;
	margin-left: 8%;
	will-change: transform, opacity;
	z-index: 1;
}
.combatSprite {
	position: absolute;
	/*z-index: 1;*/
	/*will-change: transform, opacity;*/
}
.combatSelectFrame {	
	box-shadow: 0 0 0.25em 0.15em black, 0 0 0.25em 0.15em black inset, 0.1em 0.1em 0.5em 0.1em black, 0 0 0.5em 0 rgba(255,255,255,0);
    border-radius: 0.33em;
	border: 0.33em solid;
	background:#d50000;
	color: rgba(31,31,31,0.92);
	cursor: not-allowed;
	will-change: transform, opacity;
	z-index: 0;
}
.combatSelectFrame.ready:hover {
	box-shadow: 0 0 0.25em 0.15em black, 0 0 0.25em 0.15em black inset, 0.1em 0.1em 0.5em 0.1em black, 0 0 0.5em 0.15em rgba(255,255,255,0.8);
	cursor: pointer;
	will-change: transform, opacity;
}
.combatSelectFrame.ready:active {
	transform: translateY(0.12em) translateX(0.06em);
	box-shadow: 0 0 0.25em 0.15em black, 0 0 0.05em 0.05em black inset, 0.1em 0.1em 0.5em 0.1em black, 0 0 0.5em 0.15em rgba(255,255,255,0.8);
	cursor: pointer;
	will-change: transform, opacity;
}
.combatSelectFrame.flashing:hover {
	box-shadow: 0 0 0.25em 0.15em black, 0 0 0.25em 0.15em black inset, 0.1em 0.1em 0.5em 0.1em black, 0 0 0.5em 0.15em rgba(255,0,0,0.8);
	cursor: pointer;
	will-change: transform, opacity;
}
.combatSelectFrame.flashing:active {
	transform: translateY(0.12em) translateX(0.06em);
	box-shadow: 0 0 0.25em 0.15em black, 0 0 0.05em 0.05em black inset, 0.1em 0.1em 0.5em 0.1em black, 0 0 0.5em 0.15em rgba(255,0,0,0.8);
	cursor: pointer;
	will-change: transform, opacity;
}
.actorNameFrame {
	overflow-x: hidden;
	margin-top:0.05em;
	position: absolute;
	max-width: 84%;
	z-index: 1;
	will-change: transform, opacity;
}
.frameKeyboardNumber {
	color: whitesmoke;
	text-shadow:0 0 0.15em black, 0 0 0.25em black, 0.1em 0.1em 0.1em black, -0.1em -0.1em 0.1em black, -0.1em 0.1em 0.1em black, 0.1em -0.1em 0.1em black;
	margin:0 0 0 0.33em;
	will-change: transform, opacity;
}
.combatActorName {
	color: whitesmoke;
	text-shadow:0 0 0.15em black, 0 0 0.25em black, 0.1em 0.1em 0.1em black, -0.1em -0.1em 0.1em black, -0.1em 0.1em 0.1em black, 0.1em -0.1em 0.1em black;
	overflow-x: hidden;
	margin:0 0.2em 0 0.1em;
	will-change: transform, opacity;
}
.combatPicture {
	width:96%;
	display: inherit;
	padding:2%;
	margin:auto;
	background: black;
	border-radius: 0.15em;
	/*box-shadow: 0 0 0.25em 0.1em rgba(127,127,127,0.5);*/
	min-height: 50px;
	pointer-events: none;
	box-shadow: 0 0 0.25em 0.1em black, 0 0 0.25em 0.1em black inset;
	will-change: transform, opacity;
}
.combatCooldownOverBar {
	background: linear-gradient(to bottom,rgba(38,50,56 ,1),rgba(55,71,79 ,1),rgba(69,90,100 ,1),rgba(55,71,79 ,1),rgba(38,50,56 ,1));
    border-radius: 0.1em;
    box-shadow: 0 0 0.15em 0.05em black, 0 0 0.25em 0 black inset;
    border-left: 0.15em solid black;
    border-right: 0.15em solid black;
	overflow: hidden;
	height: 0.2em;
	will-change: transform, opacity;
}
.combatCooldownBar {
	border-radius: 0;
	height: 0.33em;
	box-sizing: border-box;
	background: linear-gradient(to bottom,rgba(130,119,23 ,1),rgba(255,171,0 ,1),rgba(255,234,0 ,1),rgba(255,179,0 ,1),rgba(158,157,36 ,1));
	box-shadow:0 0 0.1em 0 black inset, 0 0 0.1em 0 black;
	will-change: transform, opacity;
}
.combatOverBar {
	margin-top:0.1667em;
	box-shadow: 0em 0em 0.25em 0 black, 0 0 0.25em 0.1em black inset;
	border-radius:15%;
	border:0.125em solid black;
	background: linear-gradient(to bottom,rgba(224,224,224 ,1),rgba(158,158,158,1),rgba(224,224,224 ,1),rgba(158,158,158 ,1));
	overflow: hidden;
	will-change: transform, opacity;
}
.combatHealthBar {
	border-radius:0 0.25em 0.25em 0;
	height: 1em;
	box-shadow: 0em 0em 0.33em 0em black, 0 0 0.33em 0.0625em black inset;
	background: linear-gradient(to bottom,rgba(183,28,28,0.667),rgba(213,0,0,0.8),rgba(213,0,0,0.667),rgba(213,0,0,0.8),rgba(183,28,28,0.667));
	will-change: transform, opacity;
}
.combatDefenseBar {
	border-radius:0 0.25em 0.25em 0;
	height: 1em;
	box-shadow: 0em 0em 0.33em 0em black, 0 0 0.33em 0.0625em black inset;
	background: linear-gradient(to bottom,rgba(21,67,96,0.667),rgba(26,82,118,0.8),rgba(26,82,118,0.667),rgba(26,82,118,0.8),rgba(21,67,96,0.667));
	will-change: transform, opacity;
}
.combatBarSpacer {
	text-align:right;
	line-height: 1em;
	width: 20%;
	border-right: 0.15em solid rgba(31,31,31,0.667);
    color: rgba(0,0,0,0);
    text-shadow: none;
    position: absolute;
    box-sizing: border-box;
	will-change: transform, opacity;
}
.combatBarStats	{
    text-shadow: 0 0 0.1em black, 0 0 0.05em black, 0 0.05em 0.1em black, 0 -0.05em 0.1em black, -0.05em 0 0.1em black, 0.05em 0 0.1em black;
	font-weight: 700;
	width:100%;
	color: whitesmoke;
	text-align:center;
    position: absolute;
    box-sizing: border-box;
	line-height: 1.15;
	font-size:92%;
	letter-spacing: 0.0333em;
	z-index: 1;
	will-change: transform, opacity;
}
.combatEnergyBar {
	border-radius:0 0.25em 0.25em 0;
	height: 1em;
	box-shadow: 0em 0em 0.33em 0em black, 0 0 0.33em 0.1em black inset;
	background: linear-gradient(to bottom,rgba(255,255,0,0.5),rgba(255,196,0 ,1),rgba(255,214,0 ,1),rgba(255,171,0 ,1),rgba(255,196,0 ,1),rgba(255,255,0,0.5));
	will-change: transform, opacity;
}
.combatBarSpacerStars {
	text-align:center;
	line-height: 1em;
	width: 33.333%;
	border-right: 0.15em solid rgba(31,31,31,0.5);
   /* text-shadow: 0 0 0.15em rgba(96,125,139,1);*/
    position: absolute;
    box-sizing: border-box;
	color: rgba(0,0,0,0.25);
	will-change: transform, opacity;
}
.combatStatusBar {
	/*margin: 0;*/
	height: 1.48em;
	overflow-y: hidden;
	line-height: 1em;
	will-change: transform, opacity;
}
.combatStatusContainer {
	height: 1.3em;
    width: 1.3em;
	border-radius: 0.333em;
	box-shadow: 0 0 0.1em 0.0333em black;
	overflow: hidden;
	display: inline-block;
	position: relative;
	margin: 0.0333em 0.0333em 0 0;
	will-change: transform, opacity;
}
.combatStatusBackground {
	height: 1.3em;
    width: 2.6em;
	position: absolute;
	border-radius: 0.25em;
	background: linear-gradient(to right, rgba(245,245,245,1) 50%, rgba(127,127,127,1) 53%, rgba(96,125,139,1) 56%);
	/*background: repeating-linear-gradient(-45deg,rgba(255,255,255,0.2),rgba(127,127,127,0.2) 0.25em,rgba(31,31,31,0.2) 0.25em,rgba(255,255,255,0.2) 0.1em), repeating-linear-gradient(45deg,rgba(255,255,255,0.2),rgba(127,127,127,0.2) 0.25em,rgba(31,31,31,0.2) 0.25em,rgba(255,255,255,0.2) 0.1em), linear-gradient(to right, rgba(176,190,197 ,1) 50%, rgba(0,0,0,1) 53%, rgba(127,71,79 ,1) 56%);*/
	will-change: transform, opacity;
}
.debuffIcon {
	position:absolute;
	height: 1.3em;
    width: 1.3em;
    box-shadow: 0 0 0.2em 0.1em rgba(213,0,0,1) inset;
	pointer-events: none;
	will-change: transform, opacity;
}
.buffIcon {
	position:absolute;
	height: 1.3em;
    width: 1.3em;
    box-shadow: 0em 0em 0.2em 0.1em rgba(100,221,23,1) inset;
	pointer-events: none;
	will-change: transform, opacity;
}
.timeCog {
	width: 2em;
	margin: -0.2em;
	pointer-events: none;
	will-change: transform, opacity;
}
.timeCogContainer {
	background: radial-gradient(circle, rgba(255,215,0,1), rgba(31,31,31,1) 21%, rgba(38,50,56 ,1), rgba(130,119,23,1) 48%, rgba(178,235,242 ,0) 96%);
	border-radius: 50%;
	width: 1.6em;
	height: 1.6em;
	margin: 0.4em 0.2em 0 0.2em;
	will-change: transform, opacity;
}
.combatButton {
	height: 2.25em;
	overflow: hidden;
	/*will-change: transform, opacity;*/
	z-index: 11;
}
.combatButtonText {
	text-shadow: 0.1em 0 0.1em black, -0.1em 0 0.1em black, 0 0.1em 0.1em black, 0 -0.1em 0.1em black, 0.1em 0.1em 0.1em black, -0.1em -0.1em 0.1em black, -0.1em 0.1em 0.1em black, 0.1em -0.1em 0.1em black;
	color:whitesmoke;
	font-size: 103.333%;
	height: 200%;
    width: 150%;
    margin-left: -25%;
    padding-top: 10%;
    margin-top: -10%;
	text-align: center;
	will-change: transform, opacity;
}
.buttonIcon {
	position: absolute;
	height: 3em;
    width: 3em;
    transform: translateX(-1.5em) translateY(-1em);
    /*height: 3.6em;
    width: 3.6em;
    transform: translateX(-1.8em) translateY(-1.333em);*/
	z-index:-1;
	left: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.92), rgba(0,0,0,0) 66.67%);
	/*background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(255,255,255,0.8), rgba(0,0,0,0));*/
	/*filter: blur(0.6667px);*/
	opacity: 0.72;
	will-change: transform, opacity;
}
.combatCancelFrame {
	opacity:0;
	visibility:hidden;
	position: absolute;
	z-index: 11;
	border-radius: 0.5em;
    font-weight: 700;
    font-size: 133%;
	box-sizing: border-box;
	box-shadow: 0 0 0.15em 0.1em rgba(15,15,31,0.92), 0 0 0.15em 0.1em rgba(15,15,31,0.92) inset;
	background: linear-gradient(to bottom left,rgba(15,15,31,0.96),rgba(15,15,31,0.92),rgba(15,15,31,0.96));
	width:100%;
	height:96%;
	/*will-change: transform, opacity;*/
}
.combatCancelButtonFrame {
	width: 80%;
	left: 10%;
	top: 40%;
	position: absolute;
	border-radius: 0.33em;
	box-shadow: 0 0 0.5em 0.1em rgba(245,245,245,1), 0 0 0.5em 0.1em rgba(245,245,245,1) inset;
	/*will-change: transform, opacity;*/
}
/**********************************************************/
/**********************************************************/


/* powertip tips */
#powerTip {
	position: absolute;
	display: none;
	cursor: default;
	color: #000000;
	/*white-space: nowrap;*/
	z-index: 2147483647;
	padding:0.25em;
	/*margin-top:0.1667em;*/
	box-shadow: 0em 0em 0.25em 0.1em black, 0 0 0.125em 0em black inset;
	border-radius:0.15em;
	border:0;
	background: linear-gradient(to bottom right,rgba(211,211,211,1), rgba(224,224,224,1),rgba(245,245,245,1),rgba(224,224,224,1),rgba(191,191,191,1));
	max-width: 300px;
	font-size:84%;
}
/* end powertip */


/* Description of items in SecretGarden */
.equipStyle {
	padding: 0 0 0 0;
    display: block;
    margin-bottom: 0.15em;
	font-weight: 700;
}

/* Trainer */
.timeBarSpacer {
	text-align:center;
	line-height: 1em;
    position: absolute;
    box-sizing: border-box;
	width: 25%;
	font-size:110%;
	color:whitesmoke;
	font-weight:700;
	text-shadow:0 0 0.25em black;
	border-right:0.15em solid rgba(31,31,31,0.5);
}
.stateStatsBar {
	border: 0.125em solid black;
    background: linear-gradient(to bottom,rgba(224,224,224 ,1),rgba(158,158,158,1),rgba(224,224,224 ,1),rgba(158,158,158 ,1));
    overflow: hidden;
	border-radius: 0.33em;
}

.choiceQuestion {
	margin: 0 0 1em 0;
	/*display:inline;*/
	display: inherit;
	will-change: opacity;
}

.choice, .choice1, .choice2, .choice3, .choice4, .choice5, .choice6, .choice7  {
	margin: 0 0 1.25em 0;
	border-radius:0.33em;
	box-shadow: 0 0 0.33em 0.15em rgba(0,0,0,0);
	will-change: opacity;
}
#endText, #endText1, #endText2, #endText3, #endText4, #endText5, #endText6, #endText7  {
	margin: 0 0 1.25em 0;
}

/**********************************************************/
/* Weather Panel */
#weatherLayer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
	display: none;
	overflow: hidden;
	opacity:0;
	pointer-events: none;
}

/**********************************************************/
/* Equipment Stats */
.equipmentStatsHolder {
	background:linear-gradient(to top, rgba(127,127,127,0.1) -8%, rgba(127,127,127,0.25) 124%);
	font-size:92%;
	margin:0 0.5em 1.25em 0.5em;
	border-bottom:0.05em solid;
	border-left:0.05em solid;
	border-right:0.05em solid;
	border-radius:0 0 0.33em 0.33em;
	padding:0.33em 0 0.25em 0.5em;
	box-shadow: 0.05em 0.05em 0.33em 0.02em;
}

/* Descrpition of the links */
.linkDescription {
	background:linear-gradient(to top, rgba(127,127,127,0.1) -8%, rgba(127,127,127,0.25) 124%);
	font-size:92%;
	margin:0 0.5em 1.167em 0.5em;
	border-bottom:0.05em solid;
	border-left:0.05em solid;
	border-right:0.05em solid;
	border-radius:0 0 0.33em 0.33em;
	padding:0.33em 0.5em 0.25em 0.5em;
	box-shadow: 0.05em 0.05em 0.33em 0.02em;
	font-style: italic;
}


/**********************************************************/
/* Icon pictures */
.iconSkills {
	height: 2.5em;
    width: 2.5em;
	background: linear-gradient(to bottom right, rgba(144,164,174 ,1), rgba(179,229,252 ,1), rgba(225,245,254 ,1), rgba(179,229,252 ,1), rgba(144,164,174 ,1));
	box-shadow:  0.05em 0.05em 0.125em 0.05em rgba(0,0,0,0.5), 0.1em 0.1em 0.25em 0.05em rgba(127,127,127,0.5), 0 0 0.1em 0.05em black inset;
	border: 0.05em solid rgba(38,50,56 ,1);
	margin: 0 0.25em;
	border-radius: 0.333em;
	will-change: transform, opacity;
	padding: 0.125em;
}
.iconSkillsButton {
	height: 1.25em;
    width: 1.25em;
	background: linear-gradient(to bottom right, rgba(144,164,174 ,1), rgba(179,229,252 ,1), rgba(225,245,254 ,1), rgba(179,229,252 ,1), rgba(144,164,174 ,1));
	box-shadow:  0.05em 0.05em 0.125em 0.05em rgba(0,0,0,0.5), 0.1em 0.1em 0.25em 0.05em rgba(127,127,127,0.5), 0 0 0.1em 0.05em black inset;
	border: 0.05em solid rgba(38,50,56 ,1);
	margin: 0 0.25em;
	border-radius: 0.333em;
	will-change: transform, opacity;
	padding: 0.125em;
	vertical-align: bottom;
}
.iconBlack {
	height: 2.25em;
    width: 2.25em;
    float: left;
    margin-right: 0.25em;
	vertical-align: baseline;
	pointer-events: none;
	margin-bottom: -0.25em;
	will-change: transform, opacity;
	filter: drop-shadow( 0.06em 0.06em 0.1em #000 );
}
.icon {
	height: 1.25em;
	width: 1.25em;
	vertical-align: baseline;
	pointer-events: none;
	margin-bottom: -0.25em;
	will-change: transform, opacity;
	filter: drop-shadow( 0.06em 0.06em 0.1em #000 );
}
.iconButton {
	height: 1.25em;
	width: 1.25em;
	vertical-align: baseline;
	pointer-events: none;
	margin-bottom: -0.25em;
	will-change: transform, opacity;
	filter: drop-shadow( 0.06em 0.06em 0.1em #000 );
}
.iconLink {
	height: 1.25em;
	width: 1.25em;
	vertical-align: baseline;
	pointer-events: none;
	cursor: pointer;
	margin-bottom: -0.25em;
	will-change: transform, opacity;
	filter: drop-shadow( 0.06em 0.06em 0.1em #000 );
}
.iconDisabled {
	height: 1.25em;
	width: 1.25em;
	vertical-align: baseline;
	pointer-events: none;
	margin-bottom: -0.25em;
	will-change: transform, opacity;
	filter: drop-shadow( 0.06em 0.06em 0.1em #000 );
}

/**********************************************************/
/* Introducing game concepts and messages */

.innerWindow {
	border: 0.15em solid;
	box-shadow: 0.1em 0.1em 0.25em 0.05em rgba(127,127,127,0.5);
	border-radius: 0.25em;
	display: inline-block;
	padding-bottom: 0.33em;
}
.innerWindowBlock {
	border: 0.15em solid;
	box-shadow: 0.1em 0.1em 0.25em 0.05em rgba(127,127,127,0.5);
	border-radius: 0.25em;
	display: block;
	padding-bottom: 0.33em;
}
.innerWindowTitle {
	font-family: Roboto Slab, Serif;
	font-size: 105%;
	font-weight: 700;
	background: linear-gradient(to top, rgba(127,127,127,0.1) -8%, rgba(127,127,127,0.33) 104%);
	border-bottom: 0.15em solid dimGray;
	display: block;
	padding-left: 0.33em;
	padding-top: 0.15em;
	padding-bottom: 0.15em;
	text-shadow: 0.1em 0.1em 0.4em rgba(0,0,0,0.4);
	padding: 0.33em;
}
.innerWindowText {
	padding: 0.33em;
}
.innerWindowUnderTitle {
	font-family: Archivo Narrow, Sans-Serif;
	font-weight: 700;
	opacity: 0.8;
	font-size: 75%;
	text-align: center;
	padding: 0.33em;
	float: right;
	border: 0.15em solid rgba(127,127,127,0.5);
	margin: 0.15em;
	border-radius: 0.15em;
}

/* scenes pictures */
.scenePicture {
	width: 100%;
	border-radius: 0.33em;
	/*border: 0.15em solid;*/
	padding: 0.33em;
	box-sizing: border-box;
	background: white;
	box-shadow: 0 0 0.333em 0.1em rgba(63,63,63,1) inset, 0 0 0 1em rgba(15,15,15,1) inset, 0.05em 0.15em 0.25em 0.05em black;
	pointer-events: none;
	will-change: transform, opacity;
}

/** Moonstalkers animation ***********************************/
.animationContainer {
	position: fixed;
	right: 0;
	left: 0;
	margin-right: auto;
	margin-left: auto;
	height: 100%;
}
.animationButton {
	width: initial;
	text-align:center;
	/*padding-left: 0.5em;
	padding-right: 0.5em;*/
}
.animationButtonForward {
	width: initial;
	text-align:center;
	min-width:300px;
}
.animationChoiceButton {
	width:100%;
	opacity:0;
	visibility:hidden;
	font-size:118%;
}
.animationCancelBar {
	transition: opacity 333ms ease-in;
	top: 0;
	border: 0.15em solid #212121;
	margin: 0.5em 0 0 -49em;
	width: initial;
	position: absolute;
	padding: 0.333em 0.333em 0.333em 50em;
	visibility: hidden;
}
.animationChoiceBar {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.2em;
	position: absolute;
	display: flex;
	opacity:0;
	visibility:hidden;
}
.animationGlass {
	background:
	repeating-linear-gradient(-6deg,rgba(31,31,31,0.08),rgba(31,31,31,0.12) 0.14em,rgba(31,31,31,0.12) 0.16em,rgba(31,31,31,0.08) 0.266em),
	repeating-linear-gradient(6deg,rgba(31,31,31,0.08),rgba(31,31,31,0.12) 0.14em,rgba(31,31,31,0.12) 0.16em,rgba(31,31,31,0.08) 0.266em),
	linear-gradient(to bottom right, rgba(63,127,127,0.333), rgba(255,255,255,0.167), rgba(63,127,127,0.25), rgba(63,127,127,0.167), rgba(63,127,127,0.333)),
	linear-gradient(to bottom left, rgba(63,127,127,0.333), rgba(63,127,127,0.167), rgba(255,255,255,0.25), rgba(63,127,127,0.167), rgba(63,127,127,0.333), rgba(63,127,127,0.333));
	border-top: 0.15em solid #212121;
	/*border-bottom: 0.15em solid #212121;*/
	border-radius: 0;
	box-shadow: 0 0 0.15em 0.05em, 0 0 0.33em 0 inset;
	overflow: hidden;
	will-change: transform, opacity;
}
.animationNoticeText {
	color: white;
	opacity: 0;
	visibility: hidden;
	font-size: 118%;
	width: 97%;
	margin: 1.5%;
	top: 0;
	position: absolute;
	text-shadow: 0 0 0.0625em black, 0 0 0.125em black, 0 0 0.125em black, 0 0 0.25em black, 0.05em 0.1em 0.25em black;
	will-change: opacity;
}
.animationSubtitleText {
	color: white;
	padding-top: 0.5em;
	font-size: 118%;
	top: 0;
	position: absolute;
	text-shadow: 0 0 0.125em black, 0 0 0.125em black, 0 0 0.25em black, 0.05em 0.1em 0.25em black;
	will-change: opacity;
	line-height: 1.18;
	width: 100%;
    text-align: center;
}
.animationChoiceBarGlass {
	position: relative;
	display: flex;
	opacity: 0;
	visibility: hidden;
}
.animationBottomPanel {
	margin: 0 1.8%;
	width: 96.4%;
	position: relative;
	/*height: 100%;*/
	/*min-height: 25%;*/
	/*min-height: 150px;*/
}
.animationUnderPanel {
	padding-left: 1%;
	padding-right: 1%;
	position: fixed;
	bottom: 0;
	opacity:0;
	visibility:hidden;
}
/* special flashing icons */
.animTwist{
	-webkit-animation:animTwist 2s infinite linear;
	animation:animTwist 2s infinite linear
}
@keyframes animTwist {
  from, to { opacity: 1; transform:rotate(15deg)}
  50% { opacity: 0.92; transform:rotate(-15deg)}
}
.animFlash{
	-webkit-animation:animFlash 0.666s infinite linear;
	animation:animFlash 0.666s infinite linear;
}
@keyframes animFlash {
  from, to { opacity: 1;}
  50% { opacity: 0.5;}
}
.animationInterrupt {
	width: 35%;
	margin-left: 65%;
	border-radius: 0.25em;
	padding-left: 0.3em;
}
/**********************************************************/
/* UI Interface of the panels and cutscenes */

.innerPanel {
	width: 100%;
	box-sizing: border-box;
	margin: 0.33em auto;
	padding: 0.5em;
	background: 
	repeating-linear-gradient(-12deg,rgba(31,31,31,0.04),rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.04) 0.4em),
	repeating-linear-gradient(12deg,rgba(245,245,245,0.04),rgba(245,245,245,0.06) 0.2em,rgba(245,245,245,0.06) 0.2em,rgba(245,245,245,0.04) 0.4em),
	linear-gradient(to bottom right, rgba(63,191,191,0.167), rgba(255,255,255,0.1), rgba(63,127,127,0.1), rgba(63,127,127,0.1), rgba(63,127,127,0.333)),
	linear-gradient(to bottom left, rgba(63,191,191,0.167), rgba(255,255,255,0.1), rgba(63,191,191,0.1), rgba(63,191,191,0.1), rgba(63,191,191,0.333));
	border: 0.15em solid;
	border-radius: 0.33em;
	box-shadow: 0 0 0.15em 0.05em, 0 0 0.33em 0 inset;
	overflow: hidden;
	will-change: transform, opacity;
}
.darkGlass {
	width: 100%;
	box-sizing: border-box;
	margin: 0.33em auto;
	padding: 0.67em;
	background:
	repeating-linear-gradient(-6deg,rgba(31,31,31,0.08),rgba(31,31,31,0.12) 0.14em,rgba(31,31,31,0.12) 0.16em,rgba(31,31,31,0.08) 0.266em),
	repeating-linear-gradient(6deg,rgba(31,31,31,0.08),rgba(31,31,31,0.12) 0.14em,rgba(31,31,31,0.12) 0.16em,rgba(31,31,31,0.08) 0.266em),
	linear-gradient(to bottom right, rgba(63,127,127,0.2), rgba(255,255,255,0.1), rgba(63,127,127,0.25), rgba(63,127,127,0.1), rgba(63,127,127,0.333)),
	linear-gradient(to bottom, rgba(63,127,127,0.333), rgba(63,127,127,0.167), rgba(255,255,255,0.1), rgba(63,127,127,0.1), rgba(63,127,127,0.1), rgba(63,127,127,0.333)),
	linear-gradient(to right, rgba(127,127,127,0.333), rgba(245,245,245,0.8), rgba(245,245,245,0.6), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(127,127,127,0.5));
	border: 0.15em solid;
	border-radius: 0.33em;
	box-shadow: 0 0 0.15em 0.05em, 0 0 0.33em 0 inset;
	overflow: hidden;
	will-change: transform, opacity;
}
.cutscenePanel {
	width:100%;
	position:absolute;
	padding:0;
	margin:0;
	border-top:0.15em solid;
	border-bottom:0.15em solid;
	border-radius:0;
	height: 80%;
	font-size:104%;
	bottom:2%;
	left:0;
	right:0;
	box-sizing: border-box;
    box-shadow: 0 0 0.33em inset, 0 0 0.33em;
	border: 0.15em solid;
}
.cutscenePicture {
	float: right;
	height: 100%;
	max-height: 75%;
	margin-left: 0.67em;
	margin-bottom: 0.67em;
	box-shadow: 0 0 0.33em 0.1em;
    border-radius: 0.33em;
}
.cutsceneSlide {
	display: inherit;
	opacity: 1;
    position: absolute;
    top: 2.5em;
    left: 0.4em;
    right: 0.4em;
    border: none;
    height: 72%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    background: none;
	padding: 0.25em;
}

/**********************************************************/
/* UI Interface of the fight */

.UIButtonsBar {
	display: flex;
	width: 100%;
	margin-top: 0.667em;
	margin-bottom: 0.667em;
}
.UIPlayerStatusBar {
	padding: 0 2%;
	text-shadow: 0.1em 0.1em 0.4em rgba(0,0,0,0.4);
	line-height: 200%;
}
.UIPlayerStatus {
	display: inline-block;
	font-weight: 700;
	margin: 0 0.5em 0 0;
	position: absolute;
}
.UIButton {
	display: inherit;
    padding: 0 1%;
    width: 31.33%;
    margin-left: 0;
    margin-right: 0;
}
/*2 buttons only*/
.UIButtonDuo {
	display: inherit;
    padding: 0;
	margin: auto;
    width: 45%;
}
.UITextBar {
	display: inline-block;
	text-shadow: 0.15em 0.15em 0.4em rgba(0,0,0,0.8);
	position: relative;
}
.UIFloatBar {
    position: relative;
    font-weight: 700;
    border-top: 0.15em solid;
    display: block;
    margin-top: 0.75em;
    padding-top: 0.15em;
}
.UIWarningText {
	font-weight: 700;
	color: crimson;
	position: absolute;
}
.UIstatsBar {
	height: 1.08em;
	/*border: 0.15em solid rgba(31,31,31,0.8);*/
	padding: 0;
	box-shadow: 0 0 0.1em 0.1em black, 0 0 0.1em 0.05em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0em 0.1em 0.05em rgba(31,31,31,0.84) inset;
	background: linear-gradient(to right, rgba(245,245,245, 0.33) -8%, rgba(105,105,105, 0.33) 104%);
	border-radius: 0.33em;
	width: 25%;
	margin: 0.25em 0;
	box-sizing: border-box;
	will-change: transform;
}

/*************************a*********************************/
/* Interactive Combat Bars */

.statsContainer {
	height: 1.2em;
	position: relative;
    margin: 0.15em auto .33em auto;
}
.statsBar {
	height: 1.05em;
	border: 0.15em solid rgba(31,31,31,0.8);
	box-shadow: 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33);
	background: linear-gradient(to right, rgba(245,245,245, 0.33) -8%, rgba(105,105,105, 0.33) 104%);
	border-radius: 0.33em;
	width: 100%;
	margin: auto;
	position: absolute;
	will-change: transform;
}
.statsBarSpacers {
	border-right: 0.15em solid rgba(31,31,31,0.5);
	line-height: 1.15em;
	color: rgba(0,0,0,0);
	text-shadow: none;
	position: absolute;
	box-sizing: border-box;
}
.statsBarContainer {
	overflow:hidden;
	box-shadow:0 0 0.1em 0.1em black, 0 0 0.1em 0.05em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.125em 0.125em black inset;
	height: 1.5em;
	position: relative;
	border-radius: 0.167em;
	margin-bottom:0.5em;
	background: repeating-linear-gradient(-12deg,rgba(31,31,31,0.12),rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.12) 0.4em),
	repeating-linear-gradient(12deg,rgba(31,31,31,0.12),rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.06) 0.2em,rgba(31,31,31,0.12) 0.4em);
}
.statsBarText {
    color: whitesmoke;
    opacity: 0.92;
    text-shadow: 0.1em 0.1em 0.05em black, -0.1em 0em 0.05em black, 0.05em 0.05em 0.1em black, -0.05em -0.05em 0.1em black, -0.05em 0.05em 0.1em black, 0.05em -0.05em 0.1em black;
    line-height: 1em;
    vertical-align: top;
    padding-left: 0.15em;
    padding-top: 0.05em;
	position: absolute;
	left: 1.75em;
	top: 0.2em;
	pointer-events: none;
}
.statsBarIcon {
	height:1.5em;
	width:1.5em;
	left: 0em;
	position: absolute;
	pointer-events: none;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0 black inset;
	background:rgba(0,0,0,0.5);
}


/* Stats Bars */
.confidenceStatsBarContainer {
	background: repeating-linear-gradient(-12deg,rgba(198,40,40,0.2),rgba(198,40,40,0.06) 0.1em,rgba(198,40,40,0.09) 0.1em,rgba(198,40,40,0.2) 0.2em);
}
#confidenceStatsBar {
	border-radius:0;
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(-12deg,rgba(245,245,245,0.2),rgba(245,245,245,0.04) 0.1em,rgba(245,245,245,0.09) 0.1em,rgba(245,245,245,0.2) 0.2em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.5), #c62828, rgba(0,0,0,0), #e53935, #333333), /* red 800  600 */
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,#c62828,#e53935);
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}

.cunningStatsBarContainer {
	background: repeating-linear-gradient(-12deg,rgba(216,67,21,0.2),rgba(216,67,21,0.06) 0.1em,rgba(216,67,21,0.09) 0.1em,rgba(216,67,21,0.2) 0.2em); /* orange 800 */
}
#cunningStatsBar {
	border-radius:0;
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(-12deg,rgba(245,245,245,0.2),rgba(245,245,245,0.04) 0.1em,rgba(245,245,245,0.09) 0.1em,rgba(245,245,245,0.2) 0.2em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.5), rgb(216,67,21), rgba(0,0,0,0), rgb(244,81,30), #333333), /* orange 800  600 */
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,rgb(216,67,21),rgb(244,81,30));
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}

.swiftnessStatsBarContainer {
	background: repeating-linear-gradient(-12deg,rgba(0,105,92,0.2),rgba(0,105,92,0.06) 0.1em,rgba(0,105,92,0.09) 0.1em,rgba(0,105,92,0.2) 0.2em); /* teal 800 */
}
#swiftnessStatsBar {
	border-radius:0;
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(-12deg,rgba(245,245,245,0.2),rgba(245,245,245,0.04) 0.1em,rgba(245,245,245,0.09) 0.1em,rgba(245,245,245,0.2) 0.2em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.5), #00695C, #00897B, rgba(127,127,127,0.5)),
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,#00695C,#00897B);
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}

.toleranceStatsBarContainer {
	background: repeating-linear-gradient(-12deg,rgba(78,52,46,0.2),rgba(78,52,46,0.06) 0.1em,rgba(78,52,46,0.09) 0.1em,rgba(78,52,46,0.2) 0.2em); /* brown 800 */
}
#toleranceStatsBar {
	border-radius:0;
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(-12deg,rgba(245,245,245,0.2),rgba(245,245,245,0.04) 0.1em,rgba(245,245,245,0.09) 0.1em,rgba(245,245,245,0.2) 0.2em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.5), rgb(78,52,46), rgb(109,76,65), rgba(127,127,127,0.5)),
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,rgb(78,52,46),rgb(109,76,65));
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}

.enduranceStatsBarContainer {
	background: repeating-linear-gradient(-12deg,rgba(21,101,192,0.2),rgba(21,101,192,0.06) 0.1em,rgba(21,101,192,0.09) 0.1em,rgba(21,101,192,0.2) 0.2em);
}
#enduranceStatsBar {
	border-radius:0;
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(-12deg,rgba(245,245,245,0.2),rgba(245,245,245,0.04) 0.1em,rgba(245,245,245,0.09) 0.1em,rgba(245,245,245,0.2) 0.2em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.5), rgba(21,101,192 ,1), rgba(0,0,0,0), rgba(30,136,229 ,1), #333333), /* blue 800 600 */
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,rgba(21,101,192 ,1),rgba(30,136,229 ,1));
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}

.spiritStatsBarContainer {
	background: repeating-linear-gradient(-12deg,rgba(69,39,160 ,0.2),rgba(69,39,160 ,0.06) 0.1em,rgba(69,39,160 ,0.09) 0.1em,rgba(69,39,160 ,0.2) 0.2em);
}
#spiritStatsBar {
	border-radius:0;
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(-12deg,rgba(245,245,245,0.2),rgba(245,245,245,0.04) 0.1em,rgba(245,245,245,0.09) 0.1em,rgba(245,245,245,0.2) 0.2em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.5), rgba(69,39,160 ,1), rgba(0,0,0,0), rgba(94,53,177 ,1), #333333), /* deep purple 800 600 */
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,rgba(69,39,160 ,1),rgba(94,53,177 ,1));
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}


.paragonStatsBarContainer {
	background: repeating-linear-gradient(12deg,rgba(21,101,192,0.36),rgba(21,101,192,0.12) 0.15em,rgba(21,101,192,0.12) 0.15em,rgba(21,101,192,0.36) 0.3em), rgba(0,0,0,0.1);
}
#paragonStatsBar {
	border-radius:0;	
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(12deg,rgba(31,31,31,0.24),rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.24) 0.3em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.667), rgba(21,101,192 ,0.333), #1E88E5, rgba(255,255,255,0), #333333),
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,rgba(21,101,192 ,0.333),#1E88E5);
	
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}
.renegadeStatsBarContainer{
	background: repeating-linear-gradient(12deg,rgba(198,40,40,0.36),rgba(198,40,40,0.12) 0.15em,rgba(198,40,40,0.12) 0.15em,rgba(198,40,40,0.36) 0.3em), rgba(0,0,0,0.1);
}
#renegadeStatsBar {
	border-radius:0;	
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(12deg,rgba(31,31,31,0.24),rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.24) 0.3em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.667), #c62828, #e53935, rgba(255,255,255,0), #333333),
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,#c62828,#e53935);
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}
.fameStatsBarContainer{
	background: repeating-linear-gradient(12deg,rgba(255,143,0,0.36),rgba(255,143,0,0.12) 0.15em,rgba(255,143,0,0.12) 0.15em,rgba(255,143,0,0.36) 0.3em), rgba(0,0,0,0.1);
}
#fameStatsBar {
	border-radius:0;	
	position: absolute;
	margin:0;
	height: 1.5em;
	background:
	repeating-linear-gradient(12deg,rgba(31,31,31,0.24),rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.12) 0.15em,rgba(31,31,31,0.24) 0.3em),
	linear-gradient(to bottom, rgba(255,255,255,0), rgba(245,245,245,0.667), rgb(255,143,0), rgb(255,179,0), rgba(255,255,255,0), #333333),
	linear-gradient(to left, black -0.4em, rgba(255,255,255,0) 0.2em),
	linear-gradient(to right,rgb(255,143,0),rgb(255,179,0));
	width:100%;
	box-shadow:0 0 0.1em 0.1em black, 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33), 0 0 0.25em 0.05em black inset;
}


/**********************************************************/
/* title fonts and body text */

.actTitle {
	font-family:Vollkorn SC, Serif;
	color:white;
	font-weight: 400;
	text-shadow: -0.05em 0em 0.15em rgba(0,0,0,0.167), 0.06em 0.12em 0.33em rgba(0,0,0,0.4);
	text-shadow: 0 0 0.167em black, 0 0 0.1em black, 0 0 0.15em black, 0.1em 0.1em 0.2em black;
	position: relative;
	padding: 0em;
	text-align: center;
	line-height: 100%;
	margin-bottom: 0;
	opacity:0;
	 z-index:1;
}
.actSubTitle {
	text-shadow: 0 0 0.175em black, 0 0 0.1em black, 0 0 0.15em black, 0.1em 0.1em 0.2em black;
	display:none;
	margin-bottom: 1%;
	top: 0;
	opacity:0;
	position: relative;
	z-index:1;
}
h2 {
	display: inline-block;
	font-family: Roboto Slab, Serif;
	font-weight: 700;
	font-size: 150%;
	line-height: 133%;
	text-shadow: -0.05em 0em 0.15em rgba(0,0,0,0.133), 0.05em 0.1em 0.25em rgba(0,0,0,0.33);
	margin: 0.5em 0 0.15em 0;
	position: relative;
}
h3 {
	display: inline-block;
    font-family: Roboto Slab, Serif;
    font-weight: 700;
    font-size: 133%;
    line-height: 125%;
    text-shadow: -0.05em 0em 0.15em rgba(0,0,0,0.133), 0.05em 0.1em 0.25em rgba(0,0,0,0.33);
    margin: 0.4em 0 0.125em 0;
    position: relative;
}
h4 {
	display: inline-block;
	font-family: Roboto Slab, Serif;
	font-weight: 700;
	font-size: 110%;
	line-height: 100%;
	border-bottom: 0.125em solid;
	text-shadow: -0.05em 0em 0.15em rgba(0,0,0,0.133), 0.05em 0.1em 0.25em rgba(0,0,0,0.33);
	position: relative;
	margin: 0.33em 0 0.5em 0;
	padding-bottom: 0.2em;
}
h5 {
	display: inline-block;
    font-size: 100%;
    font-weight: 700;
    margin: 0em;
    text-shadow: -0.05em 0em 0.15em rgba(0,0,0,0.133), 0.05em 0.1em 0.25em rgba(0,0,0,0.33);
}
.title {
	font-family: Roboto Slab, Serif;
}
.mainChoice {
	font-size: 166.67%;
    position: relative;
    background: none;
    border: none;
    box-shadow: none;
    margin-bottom: 1.25em;
    display: block;
    text-align: center;
}
.mainSubChoice {
	font-size: 150%;
    position: relative;
    background: none;
    border: none;
    box-shadow: none;
    margin-bottom: 0.5em;
    display: block;
    text-align: center;
}
.mainChoice:hover {
	background: none;
	text-decoration: underline;
}
.mainSubChoice:hover {
	background: none;
	text-decoration: underline;
}

/**********************************************************/
/* standard formats of the story  */

html {
	color: black;
	overflow-x: hidden;
	/*background-repeat: no-repeat;*/
	min-height: 100%;
	background: repeating-linear-gradient(-30deg,rgba(31,31,31,0.00),rgba(31,31,31,0.012) 0.15em,rgba(31,31,31,0.015) 0.15em,rgba(31,31,31,0.00) 0.3em), repeating-linear-gradient(30deg,rgba(31,31,31,0.00),rgba(31,31,31,0.012) 0.15em,rgba(31,31,31,0.015) 0.15em,rgba(31,31,31,0.00) 0.3em);
}
body {
	font-weight: 400;
	font-size: 19px;
	color: black;
	cursor: default;
	text-shadow: 0.06em 0em 0.18em rgba(31,31,31,0.105), -0.06em 0em 0.18em rgba(31,31,31,0.105), 0em 0.06em 0.18em rgba(31,31,31,0.105), 0em -0.06em 0.18em rgba(31,31,31,0.105);
	position: relative;
	display: inline-block;
	width: 100%;
	margin: 0em;
	-webkit-user-select: none;   
  	-khtml-user-select: none;    
  	-moz-user-select: none;       
  	-ms-user-select: none;
	user-select: none;
}
/* Passage styling. */
.passage-in {
	opacity: 0;
}
.passage {
	line-height: 1.33;
    text-align: inherit;
}
/*.transition-in {
	position:absolute;
	opacity:0;
}
.transition-out {
	position:absolute;
	opacity:0;
}*/

#story-caption {
	line-height: 150%;
	margin-bottom: 0.1em;
}
.gameInfoMobile {
	display: none;
}

#gameInfoDiv {
	font-size: 320%;
}

#black-screen {
	z-index: -1000;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: black;
}
/********************************************************/
/* init-screen */
#init-screen p { display: none;  }
#init-loading progress {  } /* fixes a rendering bug in Chrome on certain platforms */
html.init-no-js #init-screen, html.init-lacking #init-screen, html.init-loading #init-screen { display: block; }
html.init-no-js #init-no-js { display: block; }
html.init-lacking #init-lacking { display: block; }
html.init-loading #init-loading { display: block; }
html.init-loading #ui-bar, html.init-loading #passages { display: none; }
html.init-no-js #init-no-js, noscript { color: red; font-weight: bold; }
#init-screen {
	z-index: 1000;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0em;
	top: 0em;
	text-align: center;
	font-weight: 700;
	font-style: normal;
	background: antiquewhite;
	border: none;
	margin: auto;
	font-size: 120%;
}

/****************************************************/
/* color of links and buttons */
a {
	font-weight: 700;
    text-shadow: 0.05em 0.05em 0.05em rgba(127,127,127,0.5);
    box-shadow: 0.1em 0.25em 0.5em 0.01em rgba(0,0,0,0.8), 0em 0em 0.15em 0.08em inset;
    display: block;
    padding: 0.25em 0.5em 0.25em 0.5em;
    border: 0.12em solid rgba(63,63,63,0.8);
    border-radius: 0.333em;
    background: radial-gradient( circle, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.1)),
				repeating-linear-gradient(15deg,rgba(31,31,31,0.00),rgba(31,31,31,0.006) 0.33em,rgba(31,31,31,0.012) 0.33em,rgba(31,31,31,0.00) 0.66em),
				repeating-linear-gradient(-15deg,rgba(31,31,31,0.00),rgba(31,31,31,0.006) 0.33em,rgba(31,31,31,0.012) 0.33em,rgba(31,31,31,0.00) 0.66em),
				linear-gradient(to bottom, rgba(191,191,191,0.16) -8%, rgba(191,191,191,0.3) 104%);
    cursor: pointer;
	text-decoration: initial;
}
a:hover {
	background: repeating-linear-gradient(15deg,rgba(31,31,31,0.00),rgba(31,31,31,0.004) 0.33em,rgba(31,31,31,0.008) 0.33em,rgba(31,31,31,0.00) 0.66em),
				repeating-linear-gradient(-15deg,rgba(31,31,31,0.00),rgba(31,31,31,0.014) 0.33em,rgba(31,31,31,0.008) 0.33em,rgba(31,31,31,0.00) 0.66em),
				linear-gradient(to bottom, rgba(191,191,191,0.12) -8%, rgba(191,191,191,0.24) 104%);
}
.disabled {
	color: dimGray;
	font-weight: 700;
    text-shadow: 0.05em 0.05em 0.05em rgba(127,127,127,0.5);
    box-shadow: 0.1em 0.25em 0.5em 0.01em rgba(63,63,63,0.67), 0em 0em 0.15em 0.08em dimGray inset;
    display: block;
    padding: 0.25em 0.5em;
    border: 0.1em solid rgba(127,127,127,1);
    border-radius: 0.25em;
    background: repeating-linear-gradient(15deg,rgba(31,31,31,0.00),rgba(31,31,31,0.004) 0.33em,rgba(31,31,31,0.008) 0.33em,rgba(31,31,31,0.00) 0.66em),
				repeating-linear-gradient(-15deg,rgba(31,31,31,0.00),rgba(31,31,31,0.014) 0.33em,rgba(31,31,31,0.008) 0.33em,rgba(31,31,31,0.00) 0.66em),
				linear-gradient(to bottom, rgba(127,127,127,0.12) -8%, rgba(127,127,127,0.24) 104%);
	cursor: not-allowed;
	padding-left: 0.667em;
}
input, textarea, input:focus, input:hover, textarea:focus, textarea:hover {
	font-family: Roboto Slab, Serif;
	background-color: rgba(0,0,0,0.05);
	border: 0.1em solid rgba(31,31,31,0.8);;
	box-shadow: 0.2em 0.2em 0.33em rgba(63,63,63,0.75);
	font-weight: 700;
}
select {
    border: 0.1em solid;
	border-radius: 0.15em;
	text-shadow: 0em 0em 0.1em rgba(63,63,63,0.25);
	background-color: rgba(127,127,127,0.12);
	font-size: 112%;
	font-family: Archivo Narrow;
	padding: 0.25em;
	cursor: pointer;
	font-weight: 700;
}
select :hover {
}
input[type=text], textarea {
	min-width: 0;
    width: 48%;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    padding: 0.15em;
    font-size: 112%;
}
button {
	font-family: Roboto Slab, Serif;
	border: 0.1em solid black;
	text-shadow: 0.05em 0.05em 0.2em black, -0.05em 0em 0.2em black;
	box-shadow: 0.05em 0.10em 0.15em 0.075em rgba(0,0,0,0.667), 0 0 0.1em 0.02em rgba(0,0,0,0.5), 0em 0em 0.15em 0.1em black inset;
	border-radius: 0.333em;
	color: whitesmoke;
	padding: 0.36em 0.4em;
	width: 100%;
    font-size: 100%;
	cursor: pointer;
	will-change: opacity;
	text-align: left;
}
/* ui button specifics */
#gameOptionsUIButtonIn, #playerStatusUIButtonIn, #backUIButtonIn, #partyUIButtonIn, #settings-ok, #settings-reset, .load.ui-close, .save.ui-close, #saves-delete-0, #saves-delete-1, #saves-delete-2, #saves-delete-3, #saves-export, #saves-import, #ui-dialog-close, #restart-ok, #restart-cancel {
	text-align:center;
}
/* end of specific buttons */

button:hover {
}
button:disabled {
	background: linear-gradient(to right, #f5f5f5 -0.4em, rgba(245,245,245,0) 0.4em),linear-gradient(to left, #f5f5f5 -0.4em, rgba(245,245,245,0) 0.4em),linear-gradient(to top, black -0.4em, rgba(31,31,31,0) 0.4em),repeating-linear-gradient(15deg,rgba(0,0,0,0.12),rgba(0,0,0,0.08) 0.25em,rgba(0,0,0,0.08) 0.25em,rgba(0,0,0,0.10) 0.6em),linear-gradient(to bottom, rgba(245,245,245,0.5), rgba(31,31,31,0.24), dimGray, gray, rgba(31,31,31,0.24), rgba(31,31,31,0.3)),linear-gradient(to bottom, dimGray, gray);
	box-shadow: 0.055em 0.10em 0.1em 0.07em rgba(0,0,0,0.5), 0.025em 0.075em 0.1em 0 rgba(0,0,0,0.333), 0em 0em 0.15em 0.1em black inset;
	border-radius: 0.333em;
	padding: 0.36em 0.4em;
	opacity: 1;
	cursor: not-allowed;
	border: 0.1em solid black;
	will-change: opacity;
}
button:disabled:hover {
	background: linear-gradient(to right, #f5f5f5 -0.4em, rgba(245,245,245,0) 0.4em),linear-gradient(to left, #f5f5f5 -0.4em, rgba(245,245,245,0) 0.4em),linear-gradient(to top, black -0.4em, rgba(31,31,31,0) 0.4em),repeating-linear-gradient(15deg,rgba(0,0,0,0.12),rgba(0,0,0,0.08) 0.25em,rgba(0,0,0,0.08) 0.25em,rgba(0,0,0,0.10) 0.6em),linear-gradient(to bottom, rgba(245,245,245,0.5), rgba(31,31,31,0.24), dimGray, gray, rgba(31,31,31,0.24), rgba(31,31,31,0.3)),linear-gradient(to bottom, dimGray, gray);
	opacity: 1;
	cursor: not-allowed;
	border: 0.1em solid black;
}
button:enabled:active {
	transform: translateX(0.015em) translateY(0.075em);
	box-shadow: 0.02em 0.02em 0.05em 0.03em rgba(0,0,0,0.8), 0em 0em 0.15em 0.1em black inset;	
	border: 0.1em solid black;
}
button, a {
    outline: none;
}
.fa-button {
    width: 1.25em;
    height: 1.25em;
    text-align: center;
	vertical-align: baseline;
	margin-bottom: -0.15em;
}
/*********** Selection menu   ****************************/
.playCondition {
	font-size:1.12em;
	font-weight:700;
	padding:0.25em 0.33em 0.125em 0.33em;
	box-shadow:0 0 0.1em 0, 0 0 0.1em 0 inset;
	margin:0.25em 0;
	background: repeating-linear-gradient(-15deg,rgba(0,0,0,0.06),rgba(0,0,0,0.04) 0.25em,rgba(0,0,0,0.04) 0.25em,rgba(0,0,0,0.06) 0.5em), linear-gradient(to bottom right, rgba(0,0,0,0.20), rgba(0,0,0,0.04), rgba(0,0,0,0.04), rgba(0,0,0,0.04), rgba(0,0,0,0.20));
	font-style: normal;
}
.textSymbol {
	display:inline-block;
	/*vertical-align: text-top;*/
}
.bigIcon {
	height: 1.5em;
    width: 1.5em;
    /* position: absolute; */
    float: left;
    margin: -0.15em 0.15em;
}
/********************************************************/
/* ui bar stuff */


/*#ui-bar-body {
	margin: 0em 0.33em 0em 0.33em;
}*/
.ui-bar-button {
	display: inherit;
	margin: 1.2em 0.33em;
	will-change: transform, opacity;
}
/*#ui-bar-toggle {
	display: none;
}
#ui-bar-history {
	margin-bottom: 0.25em;
	display: flex;
}
#history-forward {
	font-family: tme-fa-icons;
	float: right;
	margin-right: 0.67em;
	width: 30%;
	margin-left: auto;
	text-shadow: 0.15em 0.15em 0.33em rgba(0,0,0,0.33);
	box-shadow: 0.15em 0.15em 0.33em rgba(0,0,0,0.33);
}
#history-backward {
	font-family: tme-fa-icons;
	float: left;
	margin-left: 0.67em;
	width: 30%;
	margin-right: auto;
	text-shadow: 0.15em 0.15em 0.33em rgba(0,0,0,0.33);
	box-shadow: 0.15em 0.15em 0.33em rgba(0,0,0,0.33);
}*/



/********************************************************/
/* ui dialog stuff */
/***********************************************************************************************************************
 *
 * ui-dialog.css
 *
 * Copyright © 2015–2016 Thomas Michael Edwards <tmedwards@motoslave.net>. All rights reserved.
 * Use of this source code is governed by a Simplified BSD License which can be found in the LICENSE file.
 *
 **********************************************************************************************************************/

/*
	Patches to the core styles.
*/
html.ui-dialog-open body {
	overflow: hidden;
}

/*
	We do not animate `#ui-dialog:not(.open)` for various reasons.  Chief among
	them, however, is so that the dialog isn't in the middle of its animation
	when other page updates happen.

	e.g. The restoration of `overflow` on `body` would cause the still animating
	     dialog to jump around a little if a scrollbar were to pop in.

	     Any dialog action which performs a task which has its own animations
	     (e.g. passage display) or causes the page to reload in addition to
	     closing the dialog could cause display shenanigans.
*/

#ui-dialog-titlebar {
	position: relative;
}

/*
	Default appearance styles.
*/
#ui-overlay {
	background-color: #000;
}
#ui-overlay.open {
	opacity: 0.8;
	visibility: visible;
	transition: opacity 333ms ease-in;
}
#ui-overlay:not(.open) {
	transition: visibility 333ms step-end, opacity 333ms ease-in;
}
#ui-overlay {
	visibility: hidden;
	opacity: 0;
	z-index: 1000;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

#ui-dialog.open {
	opacity: 1;
	display: block;
	transition: opacity 333ms ease-in;
}
#ui-dialog-titlebar {
	background-color: #444;
}
#ui-dialog-close {
	cursor: pointer;
	font-size: 120%;
	margin: 0;
	padding: 0;
	width: 3.6em;
	height: 92%;
	background-color: transparent;
	border: 0.1em solid transparent;
	transition-duration: 333ms;
}
#ui-dialog-close:hover {
	background: repeating-linear-gradient(45deg,rgba(0,0,0,0.15),rgba(0,0,0,0.2) 0.2em,rgba(0,0,0,0.25) 0.2em,rgba(0,0,0,0.15) 0.4em), repeating-linear-gradient(-45deg,rgba(255,255,255,0.06),rgba(255,255,255,0.12) 0.2em,rgba(255,255,255,0.15) 0.2em,rgba(255,255,255,0.06) 0.1em);
	background-color: #b44;
	border-color: #d66;
}

/* List-based dialog styling (primarily for the Rewind & Share dialogs). */
#ui-dialog-body.list {
	padding: 0;
	min-width: 10em;
}
#ui-dialog-body.list ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0.1em solid transparent;
}
#ui-dialog-body.list li {
	margin: 0;
}
#ui-dialog-body.list li:not(:first-child) {
	border-top: 0.1em solid #444;
}
#ui-dialog-body.list li a {
	display: block;
	padding: 0.25em 0.75em;
	border: 0.1em solid transparent;
	color: #eee;
	text-decoration: none;
}
#ui-dialog-body.list li a:hover {
	background-color: #333;
	border-color: #eee;
}

/* Saves dialog styling. */
#ui-dialog-body.saves {
	padding: 0 0 0.1em; /* Webkit/Blink need 1px bottom padding or they'll trigger the scroll bar */
}
#ui-dialog-body.saves > *:not(:first-child) {
	border-top: 0.1em solid #444;
}
#ui-dialog-body.saves tr:not(:first-child) {
	border-top: 0.1em solid #444;
}
#ui-dialog-body.saves td {
	padding: 0.33em 0.33em;
}
#ui-dialog-body.saves td:first-child {
	min-width: 1.5em;
	text-align: center;
}
#ui-dialog-body.saves td:nth-child(3) {
	line-height: 1.2;
}
#ui-dialog-body.saves td:last-child {
	text-align: right;
}
#ui-dialog-body.saves .datestamp {
	font-size: 75%;
}
#ui-dialog-body.saves ul.buttons li {
	padding: 0.4em;
}
#ui-dialog-body.saves ul.buttons li:last-child {
	/*
		Using `position:absolute;right:0;` here can produce poor results,
		so we use `float:right` instead.
	*/
	float: right;
}

/* Settings dialog styling. */
/*#ui-dialog-body.settings div[id|="setting-body"] + div[id|="setting-body"] {
	margin: 0.5em 0;
}
#ui-dialog-body.settings [id|="setting-control"] {
	white-space: nowrap;
}
#ui-dialog-body.settings button[id|="setting-control"] {
	color: #eee;
	background-color: transparent;
	border: 0.1em solid #444;
	padding: 0.4em;
}
#ui-dialog-body.settings button[id|="setting-control"]:hover {
	background-color: #333;
	border-color: #eee;
}
#ui-dialog-body.settings button[id|="setting-control"].enabled {
	background-color: #282;
	border-color: #4a4;
}
#ui-dialog-body.settings button[id|="setting-control"].enabled:hover {
	background-color: #4a4;
	border-color: #6c6;
}*/

/* Share dialog styling. */
#ui-dialog-body.share {
	/*min-width: 140px;*/
}
#ui-dialog-close {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	white-space: nowrap;
}
/* Stop text selection on certain UI elements. */
#ui-dialog-close,
#ui-dialog-body.list a,
#ui-dialog-body.settings span[id|="setting-input"] {
	user-select: none;
}
/*
	Default font icon styles.
*/
#ui-dialog-close,
#ui-dialog-body.saves button[id="saves-export"]:before,
#ui-dialog-body.saves button[id="saves-import"]:before,
#ui-dialog-body.saves button[id="saves-clear"]:before,
#ui-dialog-body.settings button[id|="setting-control"]:after,
#ui-dialog-body.settings button[id|="setting-control"].enabled:after {
	font-family: "tme-fa-icons";
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	speak: none;
}
#ui-dialog-body.saves button[id="saves-export"]:before {
	content: "\e829\00a0";
}
#ui-dialog-body.saves button[id="saves-import"]:before {
	content: "\e82a\00a0";
}
#ui-dialog-body.saves button[id="saves-clear"]:before {
	content: "\e827\00a0";
}
#ui-dialog-body.settings button[id|="setting-control"]:after {
	content: "\00a0\00a0\e830";
}
#ui-dialog-body.settings button[id|="setting-control"].enabled:after {
	content: "\00a0\00a0\e831";
}

#ui-dialog {
	box-shadow: 0.5em 0.5em 4em 0.1em gray, -0.5em -0.5em 4em 0.1em gray;
    min-width: 24%;
	max-width: 92%; 
	display: none;
	opacity: 0;
	z-index: 10000;
	position: fixed;
	top: 2em;
	margin: 0em;
	padding: 0em;
	border-radius: 0em 0em 0.33em 0.33em;
	border: 0.15em solid rgba(63,63,63,0.33);
}
#ui-dialog-titlebar {
	border-bottom: 0.15em solid rgba(31,31,31,0.8);
	padding: 0em;
	width: 100%;
}
#ui-dialog-title {
	margin: 0;
	padding: 0.175em 0.175em 0.175em 0.175em;
    background: rgba(0,0,0,0.5);
    color: whitesmoke;
    text-align: inherit;
	font-size: 1.5em;
}
#ui-dialog-close {
	color: whitesmoke;
	margin: 0.15em;
	box-shadow: none;
	background: none;
	height: 84%;
}
#ui-dialog-body {
	min-width: 280px;
	background-color: rgba(255,255,255,0.8);
	border: 0em solid rgba(127,127,127,0.33);
	text-align: left;
	line-height: 1.44;
	padding: 0em;
	font-weight: 700;
	color: black;
	border-radius: 0em 0em 0.33em 0.33em;
	background: repeating-linear-gradient(-30deg,rgba(31,31,31,0),rgba(31,31,31,.04) 0.15em,rgba(31,31,31,.04) 0.15em,rgba(31,31,31,0) 0.3em), repeating-linear-gradient(30deg,rgba(31,31,31,0),rgba(31,31,31,.04) 0.15em,rgba(31,31,31,.04) 0.15em,rgba(31,31,31,0) 0.3em), rgba(255,255,255,0.8);
}
#ui-dialog-body > *:first-child {
	margin-top: 0;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0em 0.67em;
}
#ui-dialog-body hr {
	background-color: #444;
}
/* Settings dialog styling. */
#ui-dialog-body.settings [id|="setting-body"] {
	display: table;
	width: 100%;
	border-spacing: 0.25em 0.2em;
}
#ui-dialog-body.settings [id|="setting-label"] {
	display: table-cell;
	padding: 0.5em 0.25em 0.5em 0.5em;
}
#ui-dialog-body.settings [id|="setting-label"] + div {
	display: table-cell;
	min-width: 8em;
	text-align: right;
	vertical-align: middle;
	white-space: nowrap;
}

/* Default dialog button bar styling. */
#ui-dialog-body ul.buttons {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}
#ui-dialog-body ul.buttons li {
	font-size: 108%;
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
html.ui-dialog-open body {
    overflow: initial;
}
#ui-dialog-body.restart>:first-child {
	padding: 2%;
	width:96%;
	margin: auto;
}
#ui-dialog-body.saves .empty {
	color: black;
}
#ui-dialog-body ul.buttons>li+li>button {
	margin-left: auto;
}
#ui-dialog-body.saves ul.buttons li {
    display: inline-flex;
    margin-left: 2%;
    margin-right: 2%;
    width: 100%;
}
#ui-dialog-body.saves tr:not(:first-child) {
    border-top: 0.1em solid #444;
}
#ui-dialog-body.saves tr:first-child {
    display: none;
}
#ui-dialog-body.saves ul.buttons li:last-child {
    display: none;
}
#ui-dialog-body.saves td:first-child {
	min-width: 0.1em;
}
#ui-dialog-body.saves td:nth-child(3) {
	font-size: 88%;
}
#ui-dialog-body.saves>:not(:first-child) {
	padding-top: 0.33em;
	padding-bottom: 0.33em;
	margin: 0.05em;
	display: flex;
}
#ui-dialog-body.settings button[id|=setting-control].enabled {
	background: none;
	background-color: #1B5E20;
	border-color: black;
	color: whitesmoke;
}
#ui-dialog-body.settings button[id|=setting-control].enabled:hover {
	background: none;
	background-color: #43A047;
	border-color: whitesmoke;
	color: whitesmoke;
}
#ui-dialog-body.settings button[id|=setting-control] {
	background: none;
	background-color: #B71C1C;
	border-color: black;
	width: initial;
	color: whitesmoke;
}
#ui-dialog-body.settings button[id|=setting-control]:hover {
	background: none;
	background-color: #E53935;
	border-color: whitesmoke;
	color: whitesmoke;
}

#ui-bar-image-container {
	position: absolute;
	/*left:10px;*/
	right: 10px;
	z-index: -1;
	margin: auto;
	width: 92%;
	height: 92%;
	opacity: 0.333;
	max-width: 300px;
	will-change: transform, opacity;
}
/********************************************************/
/* responsive stuff */
#story {
	margin: 0 20px 0 740px;
	padding-top: 0.5em;
	padding-bottom: 1em;
	max-width: 900px;
	position: relative;
	z-index: initial;
}
#ui-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 300px;
	padding: 10px 10px 0px 410px;
	margin: 0em;
	text-align: center;
	/*border-right: 0.15em solid;*/
	box-shadow: 0em 0em 0.2em 0.15em, 0 0 0.15em 0.05em rgba(0,0,0,0.75) inset;
	z-index: 20;
	/*display: none;*/
	background: repeating-linear-gradient(-30deg,rgba(31,31,31,0.00),rgba(31,31,31,0.012) 0.15em,rgba(31,31,31,0.015) 0.15em,rgba(31,31,31,0.00) 0.3em), repeating-linear-gradient(30deg,rgba(31,31,31,0.00),rgba(31,31,31,0.012) 0.15em,rgba(31,31,31,0.015) 0.15em,rgba(31,31,31,0.00) 0.3em);
	background-attachment: fixed;
	will-change: transform, opacity;
	font-size: 118%;
	opacity:0;
}
#storyRightBar {
	position: fixed;
	top: 0;
	left: 1660px;
	height:100vh;
	width: 100%;
	box-shadow: 0em 0em 0.2em 0.15em, 0 0 0.15em 0.05em rgba(0,0,0,0.75) inset, 0em 0em 10em 0em black inset;
	z-index:20;
	/*display: none;*/
	/*border-left: 0.15em solid;*/
	z-index: 101;
	overflow: hidden;
	will-change: transform, opacity;
	opacity:0;
}

@media only screen and (max-width: 2140px) {
  #story {
	margin: 0 20px 0 680px;
  }
  
  #storyRightBar {
	left: 1600px;
  }
  #ui-bar {
	padding: 10px 10px 0px 350px;
	font-size: 118%;
  }
}

@media only screen and (max-width: 1920px) {
  #story, .movingBox {
	margin: 0 20px 0 620px;
  }
  
  #storyRightBar {
	left: 1540px;
  }
  #ui-bar {
	padding: 10px 10px 0px 290px;
	font-size: 118%;
  }
  body {
	font-size: 20px;
  }
}

@media only screen and (max-width: 1800px) {
  #story, .movingBox {
	margin: 0 20px 0 560px;
  }
  
  #storyRightBar {
	left: 1480px;
  }
  #ui-bar {
	padding: 10px 10px 0px 230px;
	font-size: 118%;
  }
}

@media only screen and (max-width: 1680px) {
  #story, .movingBox {
	margin: 0 20px 0 500px;
  }
  
  #storyRightBar {
	left: 1420px;
  }
  #ui-bar {
	padding: 10px 10px 0px 170px;
	font-size: 118%;
  }
}

@media only screen and (max-width: 1560px) {
  #story, .movingBox {
	margin: 0 20px 0 440px;
  }
  
  #storyRightBar {
	left: 1360px;
  }
  #ui-bar {
	padding: 10px 10px 0px 110px;
	font-size: 118%;
  }
}

@media only screen and (max-width: 1440px) {
  #story, .movingBox {
	margin: 0 20px 0 380px;
  }
  
  #storyRightBar {
	left: 1300px;
  }
  #ui-bar {
	padding: 10px 10px 0px 50px;
	font-size: 118%;
  }
}



@media only screen and (max-width: 1320px) {
  #story, .movingBox {
	margin: 0 20px 0 340px;
  }
  
  #storyRightBar {
	left: 1260px;
  }
  #ui-bar {
	padding: 10px 10px 0px 10px;
	font-size: 118%;
  }
  body {
	font-size: 19px;
  }
}

@media only screen and (max-width: 1260px) {
  #storyRightBar {
	display: none;
  }
}

@media only screen and (max-width: 1180px) {
  #story {
	margin: 0 20px 0 260px;
	padding-top: 0.5em;
	/*padding: 0 15px 0 265px;*/
	/*margin-left: 0%;*/
  }
  .movingBox {
	margin: 0 20px 0 260px;
  }
  #ui-bar {
	width: 220px;
	padding-left: 10px;
	font-size: 110%;
  }
  #storyRightBar {
  	left: 1150px;
	margin-left: 0%;
  }
}

@media only screen and (max-width: 1080px) {
  .gameInfo {
	 
  }
  #storyRightBar {
	/*display: none;*/
	/*left: 960px;*/
	margin-left: 0%;
  }
  body {
	font-size: 18.5px;
  }
  #gameInfoDiv {
	  font-size: 275%;
  }
  #ui-bar {
	width: 180px;
	font-size: 100%;
  }
   #story, .movingBox {
	margin: 0 20px 0 220px;
  }
  .ui-bar-button {
    display: inherit;
    margin: 1.2em 0;
  }
}

@media only screen and (max-width: 899px) {
	#ui-bar-image-container {
		left: 0;
		right: 0;
	}
	#ui-bar {
		position: fixed;
		height: inherit;
		overflow: auto;
		width: 100%;
		padding: 0em;
		margin: 0em 0em 0.5em 0em;
		border-top: none;
		border-right: none;
		border-left: none;
		border-bottom: 0.15em solid black;
		box-shadow: 0.1em 0em 1em 0.1em rgba(0,0,0,0.8), -0.1em 0em 1em 0.1em rgba(0,0,0,0.8), 0em 0em 1em 0.1em rgba(0,0,0,0.5) inset;;
	}
	.messageBox {
		width: 85%;
		left: 7.5%;
		box-sizing: border-box;
	}
	.gameInfo {
		display: none;
	}
	.gameInfoMobile {
		display: inline-block;
	}
	
	#story {
		margin: 0;
		padding:0;
		padding-top: 0.5em;
		padding-bottom: 1em;
		margin-left: auto;
		margin-right: auto;
		max-width: 840px;
	}
	.movingBox {
		margin-left: auto;
		margin-right: auto;
	}
	.passage {
		margin-left: 0.0em;
		margin-right: 0.0em;
	}
	#story-caption {
		text-align: center;
	}
	.ui-bar-button {
		display: inline-block;
		min-width: 42%;
		margin: 0.15em 0.5em 0.33em 0.5em;
		will-change: transform, opacity;
	}
	#rankImage {
		width:100%;
		left: 0;
		top: 1.1em;
	}
	#history-backward, #history-forward {
		margin-top: 0.25em;
	}
	.statsContainer {
		max-width: 640px;
	}
	.animationButtonForward {
		width: 100%;
	}
}

@media only screen and (max-width: 899px) {
	.passage {
		margin-left: 10px;
		margin-right: 10px;
	}
}

@media only screen and (max-width: 719px) {
  .chapterTitle, .passageTitle, .titleAnimated, .title, .branchQuestion, button, input, textarea, input:focus, input:hover, textarea:focus, textarea:hover, .messageBoxTitle, .gameConceptTitle, .partnerTitle, h2, h3, h4 {
	  font-family: Archivo Narrow, Sans-Serif;
  }
  .passage {
	  line-height: 1.2;
	  margin-left: 0.333em;
	  margin-right: 0.333em;
  }
	.statsContainer {
		max-width: 540px;
	}
}

@media only screen and (max-width: 599px) {
	body {
		font-size: 18.5px;
	}
	.statsContainer {
		max-width: 480px;
	}
}

@media only screen and (max-width: 539px) {
  .passage {
	  margin-left: 0.3em;
	  margin-right: 0.3em;
  }
  body {
	  font-size: 18px;
  }
	.statsContainer {
		max-width: 360px;
	}
}

@media only screen and (max-width: 419px) {
  body {
	  font-size: 17.5px;
  }
	.statsContainer {
		max-width: 340px;
	}
}

@media only screen and (max-width: 389px) {
  .passage {
	  margin-left: 0.25em;
	  margin-right: 0.25em;
  }
  body {
	  font-size: 17px;
  }
	.statsContainer {
		max-width: 320px;
	}
}

@media only screen and (max-width: 359px) {
  body {
	  font-size: 16.5px;
  }
  .statsContainer {
		max-width: 270px;
	}
}

@media only screen and (max-width: 339px) {
  body {
	  font-size: 16px;
  }
}
/* Enables toggle of visibility for complex GUI operations */
.invisibleUI {
	display:none;
}

.passage {	
	/* newgrounds only */
	/*
	overflow: auto;
	max-height: 780px;
	padding-right:15px;
	padding-left: 5px;
	padding-bottom: 20px;
	*/
}
.combatNG {
	/* newgrounds only */
	/*
	overflow: inherit;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
	*/
}