button, a {
    outline: none;
}

/* 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;
	transform: translate3d(0px, 0px, -0.1px);
}

.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);
	transform: translate3d(0px, 0px, -0.1px);
}
#endText, #endText1, #endText2, #endText3, #endText4, #endText5, #endText6, #endText7  {
	margin: 0 0 1.25em 0;
	transform: translate3d(0px, 0px, -0.1px);
}
/* TACTICAL COMBAT */
#powerTip {
	position: absolute;
	display: none;
	cursor: default;
	color: #000000;
	/*white-space: nowrap;*/
	z-index: 2147483647;
	padding:0.33em;
	/*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 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%;
	transform: translate3d(0px, 0px, -0.1px);
}
.combatEnemyMainFrame {
	width:100%;
	display:inline-block;
	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;
}
.combatNarratorFrame {
	opacity: 0;
	top: 40%;
	transform: translateY(-1em);
    position: relative;
    z-index: 100;
	padding: 0.2em 0 0.225em 0.4em;
	border-radius: 8%;
    font-weight: 700;
    font-size: 118%;
    /*text-align: center;*/
	letter-spacing: 0.0333em;
	color: gold;
	/*border: 0.1em solid;*/
	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 left,rgba(15,15,31,0.88),rgba(15,15,31,0.72),rgba(15,15,31,0.80));*/
	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;
}
.combatEndFightButton {
	z-index: 100;
    position: absolute;
    width: 80%;
    left: 10%;
    top: 52%;
	display:none;
	opacity:0;
	font-size: 133%;
}
.combatFlavorTextFrame {
	line-height: 1.15em;
	/*font-family: Tangerine, Serif;*/
	/*font-size: 1.8em;*/
	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));
}
.combatControlMainFrame{
	width:100%;
	display:inline-block;
	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;
	z-index:2;
	/*position: absolute;
    bottom: 0.67em;*/
}
.combatPartyMainFrame {
	width:100%;
	display:inline-block;
	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;
	/*position: absolute;
    bottom: 0.67em;*/
}
.actorFrame {
	/*display: inline-block;*/
	border-radius: 5% 5% 33.3% 33.3%;
	display: none;
	opacity: 0;
	visibility: hidden;
	width: 22%;
	margin: 0 1.5%;
	transform: matrix(1, 0, 0, 1, 0, 0);
}
.combatSpriteOverlay {
	position: absolute;
	width:84%;
	height:100%;
	/*background-size: 100%;*/
	/*background-repeat:no-repeat;*/
	pointer-events: none;
	overflow:hidden;
	margin-left: 8%;
	/*transform: matrix(1, 0, 0, 1, 0, 0);*/
	/*transform-style: preserve-3d;*/
}
.combatSprite {
	position: absolute;
	z-index: 1;
	/*height:100%;*/
	
	/*transform: matrix(1, 0, 0, 1, 0, 0);*/
	/*transform-style: preserve-3d;*/
	/*pointer-events: none;*/
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.actorNameFrame {
	overflow-x: hidden;
	margin-top:0.05em;
	position: absolute;
	max-width: 84%;
	z-index: 1;
}
.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;
}
.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;
}
.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;
}
.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;
	transform: translate3d(0px, 0px, -0.1px);
}
.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;
}
.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;
}
.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));
}
.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));
}
.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;
}
.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;
}
.combatStarsBar {
	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));
}
.dayTimeBar {
	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));
}
.nightTimeBar {
	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(21,101,192 ,0.5),rgba(13,71,161 ,1),rgba(1,87,155 ,1),rgba(26,35,126 ,1),rgba(13,71,161 ,1),rgba(21,101,192 ,0.5));
}
.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.6);
}
.combatStatusBar {
	margin: 0;
	height: 1.48em;
	overflow-y: hidden;
	padding: 0;
	line-height: 1em;
}
.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;
}
.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(195,195,195,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%);
	transform: translate3d(0px, 0px, -0.1px);
}
.debuffIcon {
	position:absolute;
	height: 1.3em;
    width: 1.3em;
    box-shadow: 0 0 0.2em 0.1em rgba(213,0,0,1) inset;
	transform: translate3d(0px, 0px, -0.1px);
	pointer-events: none;
}
.buffIcon {
	position:absolute;
	height: 1.3em;
    width: 1.3em;
    box-shadow: 0em 0em 0.2em 0.1em rgba(100,221,23,1) inset;
	transform: translate3d(0px, 0px, -0.1px);
	pointer-events: none;
}
.timeCog {
	width: 2em;
	margin: -0.2em;
	pointer-events: none;
}
.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;
}
.combatButton {
	height: 2.25em;
	overflow: hidden;
}
.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%;
}
.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);*/
}
.combatCancelFrame {
	/*filter: blur(5px);*/
	z-index: 1;
	opacity:0;
	visibility:hidden;
	position: fixed;
	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));
}
.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;
}
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/* Weather Panel */
#weatherLayer {
	z-index: -100;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
	display: none;
	overflow: hidden;
	opacity:0;
}

/**********************************************************/
/* Animation */
.animationSquare {
	/* Aspect ratio */
	height:100vm; width:100vm; /* IE9 fallback */
	width: 100vmin; 
	height: 100vmin;
	/*Centering */
	position: absolute;
	top:0;bottom:0;
	left:0;right:0;
	margin: auto;
}

/**********************************************************/
/* Golden Edition */
.goldenEdition {
	border-radius: 0.33em;
	box-shadow: 0.05em 0.25em 0.5em 0 rgba(127,127,127,0.67), 0em 0em 0.25em 0.05em rgba(255,160,0 ,1) inset, 0em 0em 0.25em 0.05em rgba(130,119,23 ,0.8), 0em 0em 0.5em 0em rgba(255,255,0 ,1);
	color:rgba(130,119,23 ,1);
}

/**********************************************************/
/* Moving Message Box - not trigerred automatically, unlike messageBox */

.movingBox {
	position: fixed;
    top: 120%;
    width: 66.7%;
    max-width: 715px;
    border: 0.2em solid;
    /*box-shadow: 0em 0em 0.8em dimGray, 0em 0em 1.6em white, 0em 0em 2.4em white, 0em 0em 3.2em white;*/
    border-radius: 0.2em;
    z-index: 100;
    padding-bottom: 0.33em;
    opacity: 1;
	cursor: pointer;
}
.movingBoxTitle {	
	font-family: Roboto Slab, Serif;
	font-size: 105%;
	font-weight: 700;
	display: block;
	text-shadow: 0.1em 0.1em 0.4em rgba(0,0,0,0.4);
	padding-left: 0.33em;
	padding-top: 0.175em;
	padding-bottom: 0.125em;
	box-shadow: 0 0 0.05em 0.1em black, 0 0 0.1em 0 black inset;
}
.movingBoxText {
	padding: 0.33em;
}

/**********************************************************/
/* Text for hypnosis and cursed content */
@keyframes hypnoTextAnimation {
    to {color: deepPink;}
}

.hypnoText {
	font-style: italic;
	font-weight: 700;
	animation-name: hypnoTextAnimation;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

.hypnoText24 {
	font-style: italic;
	font-weight: 700;
	animation-name: hypnoTextAnimation;
	animation-duration: 2.4s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes cursedTextAnimation {
    to {color: rgb(156,39,176);}
}

@keyframes cursedSymbolAnimation {
    0% {	transform:rotateZ(0deg);
			box-shadow: 0 0 0.15em 0.05em rgb(255,152,0), 0 0 0.6em 0.05em rgb(244,67,54) inset;}
			
	12.5% {	transform:rotateZ(360deg);
			box-shadow: 0 0 0.15em 0.05em rgb(174,234,0), 0 0 0.6em 0.05em rgb(156,39,176) inset;}
	
	25% {	transform:rotateZ(720deg);
			box-shadow: 0 0 0.15em 0.05em rgb(191,54,12), 0 0 0.6em 0.05em rgb(183,28,28) inset;}
			
	
	37.5% {	transform:rotateZ(1080deg);
			box-shadow: 0 0 0.15em 0.05em rgb(255,152,0), 0 0 0.6em 0.05em rgb(244,67,54) inset;}
			
	50% {	transform:rotateZ(1440deg);
			box-shadow: 0 0 0.15em 0.05em rgb(174,234,0), 0 0 0.6em 0.05em rgb(156,39,176) inset;}
	
	62.5% {	transform:rotateZ(1080deg);
			box-shadow: 0 0 0.15em 0.05em rgb(191,54,12), 0 0 0.6em 0.05em rgb(183,28,28) inset;}
			
	
	75% {	transform:rotateZ(720deg);
			box-shadow: 0 0 0.15em 0.05em rgb(255,152,0), 0 0 0.6em 0.05em rgb(244,67,54) inset;}
			
	87.5% {	transform:rotateZ(360deg);
			box-shadow: 0 0 0.15em 0.05em rgb(174,234,0), 0 0 0.6em 0.05em rgb(156,39,176) inset;}
	
	100% {	transform:rotateZ(0deg);
			box-shadow: 0 0 0.15em 0.05em rgb(191,54,12), 0 0 0.6em 0.05em rgb(183,28,28) inset;}
}

.cursedSymbol {
	animation-name: cursedSymbolAnimation;
	animation-duration: 12s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	/*animation-timing-function: ease-in-out;*/
	border-radius: 1em;
}

.cursedText {
	font-weight: 700;
	animation-name: cursedTextAnimation;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

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

/**********************************************************/
/* Moving Message Box */

.messageBox {
	position: fixed;
    top: 120%;
    width: 66.7%;
    max-width: 715px;
    border: 0.2em solid;
    /*box-shadow: 0em 0em 0.8em dimGray, 0em 0em 1.6em white, 0em 0em 2.4em white, 0em 0em 3.2em white;*/
    border-radius: 0.2em;
    z-index: 100;
    padding-bottom: 0.33em;
    opacity: 1;
	cursor: pointer; 
}
.messageBoxTitle {
	font-family: Roboto Slab, Serif;
	font-size: 105%;
	font-weight: 700;
	display: block;
	text-shadow: 0.1em 0.1em 0.4em rgba(0,0,0,0.4);
	padding-left: 0.33em;
	padding-top: 0.175em;
	padding-bottom: 0.125em;
	box-shadow: 0 0 0.05em 0.1em black, 0 0 0.1em 0 black inset;
}
.messageBoxText {
	padding: 0.33em;
}

/**********************************************************/
/* Icon pictures */
.icon {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: text-top;
}
.iconButton {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: text-top;
}
.iconLink {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: text-top;
}
.iconDisabled {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: text-top;
}

.confidenceIcon {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: text-top;
}
.cunningIcon {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: text-top;
}
.swiftnessIcon {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: text-top;
}
.toleranceIcon {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: text-top;
}
.enduranceIcon {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: text-top;
}
.purityIcon {
	height: 1.28571429em;
	width: 1.28571429em;
	vertical-align: text-top;
}

.confidenceStat {
	border: 0.1em solid rgb(183, 28, 28);
    border-radius: 0.33em;
    box-shadow: 0 0 0.5em 0.1em rgb(244, 67, 54) inset;
}

.cunningStat {
	border: 0.1em solid rgb(230, 81, 0);
    border-radius: 0.33em;
    box-shadow: 0 0 0.5em 0.1em rgb(255, 152, 0) inset;
}
.swiftnessStat {
	border: 0.1em solid rgb(0, 77, 64);
    border-radius: 0.33em;
    box-shadow: 0 0 0.5em 0.1em rgb(0, 150, 136) inset;
}
.toleranceStat {
	border: 0.1em solid rgb(78, 52, 46);
    border-radius: 0.33em;
    box-shadow: 0 0 0.5em 0.1em rgb(121, 85, 72) inset;
}
.enduranceStat {
	border: 0.1em solid rgb(13, 71, 161);
    border-radius: 0.33em;
    box-shadow: 0 0 0.5em 0.1em rgb(33, 150, 243) inset;
}
.purityStat {
	border: 0.1em solid rgb(0, 172, 193) ;
    border-radius: 0.33em;
    box-shadow: 0 0 0.5em 0.1em rgb(128, 222, 234) inset;
}

/**********************************************************/
/* 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.33em black inset, 0.05em 0.15em 0.33em black;
}

/**********************************************************/
/* UI Interface of the panels and cutscenes */

.innerPanel {
	width: 91%;
	margin: 0.67em auto;
	padding: 0.67em 2% 0.67em 2%;
	background: rgba(127,127,127,0.175);
	border: 0.15em solid;
	border-radius: 0.33em;
	box-shadow: 0.15em 0.15em 0.5em, 0 0 0.33em inset;
	transform: translate3d(0px, 0px, -0.1px);
}
.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.67em;
	margin-bottom: 0.67em;
}
.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;
}
.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);
	box-shadow: 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;
	transform: translate3d(0px, 0px, -0.1px);
}

/*************************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;
}
.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;
}
.healthBar {
	height: 1.05em;
	border-radius: 0.2em;
	vertical-align: top;
	box-shadow: 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33);
	text-align: left;
	background: linear-gradient(to bottom, #B71C1C -8%, #F44336 104%);
	border-right: 0.15em rgba(0,0,0,0.5);
	max-width: 100%;
	position: absolute;
}
.focusBar {
	height: 1.05em;
	border-radius: 0.2em;
	vertical-align: top;
	box-shadow: 0.15em 0.15em 0.33em 0.05em rgba(0,0,0,0.33);
	text-align: left;
	background: linear-gradient(to bottom, #0D47A1 -8%, #2196F3 104%);
	border-right: 0.15em rgba(31,31,31,0.8);
	max-width: 100%;
	position: absolute;
}
.statsBarText {
    color: whitesmoke;
    opacity: 0.92;
    text-shadow: 0.15em 0.15em 0.33em rgba(0,0,0,0.5);
    line-height: 1em;
    vertical-align: top;
    padding-left: 0.15em;
    padding-top: 0.05em;
}
.enemyBar {
	vertical-align: middle;
}

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

.actTitle {
	font-family: Oranienbaum, Serif;
	font-weight: 400;
	font-size: 240%;
	text-shadow: -0.05em 0em 0.15em rgba(0,0,0,0.1), 0.06em 0.12em 0.33em rgba(0,0,0,0.4);
	position: relative;
}
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.1), 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.1), 0.05em 0.1em 0.25em rgba(0,0,0,0.33);
    margin: 0.4em 0 0.25em 0;
    position: relative;
}
h4 {
	display: inline-block;
	font-family: Roboto Slab, Serif;
	font-weight: 700;
	font-size: 110%;
	line-height: 100%;
	border-bottom: 0.15em solid;
	text-shadow: -0.05em 0em 0.15em rgba(0,0,0,0.1), 0.05em 0.1em 0.25em rgba(0,0,0,0.33);
	position: relative;
	margin: 0.33em 0 0.5em 0;
	padding-bottom: 0.25em;
}
h5 {
	display: inline-block;
    font-size: 100%;
    font-weight: 700;
    margin: 0em;
    text-shadow: -0.05em 0em 0.15em rgba(0,0,0,0.1), 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;
}
.mainChoice:hover {
	background: none;
	text-decoration: underline;
}
.famousQuote {
	font-family: Roboto Slab, Serif;
	font-size: 125%;
	font-weight: 700;
	text-shadow: 0.1em 0.1em 0.25em rgba(0,0,0,0.33);
	position: relative;
}
.document {
	color: black;
	font-family: Lora, Serif;
	font-size: 85%;
	text-align: justify;
	padding: 2em 1em 1.25em 1em;
	border-radius: 0.1em;
	background: ivory;
	box-shadow: 0.5em 0.5em 0.5em 0.05em #888888;
	border-color: black;
	border-style: solid;
	border-width: 0.1em;
	position: relative;
}

/**********************************************************/
/* 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: opacity 1.8s ease-in-out;*/
}
/*.transition-in {
	position:absolute;
	opacity:0;
}
.transition-out {
	position:absolute;
	opacity:0;
}*/
#story {
	margin: 0 15px 0 345px;
	padding-top: 0.5em;
	padding-bottom: 1.5em;
	max-width: 720px;
	position: relative;
	z-index: initial;
}
#story-caption {
	line-height: 150%;
	margin-bottom: 0.1em;
}
.gameInfoMobile {
	display: none;
}
#rankImage {
	width: 100%;
	top: 0.75em;
	left: 0;
	position: absolute;
	z-index: -1;
	opacity: 0.33;
}
/*#story-title {
	display: none;
}
#story-author {
	display: none;
}
#menu {
	display: none;
}
#credits, #version {
	display: none;
}*/

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

/**********************************************************/
/* Animation Layer */

#animationLayer {
	z-index: -100;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
	display: none;
	overflow: hidden;
	opacity:0;
}
#story.animation {
    margin-left: auto;
    margin-right: auto;
	padding-left: 0em;
	padding-right: 0em;
}

/****************************************************/
/* 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(63,63,63,0.67), 0em 0em 0.15em 0.08em inset;
    display: block;
    padding: 0.25em 0.5em;
    border: 0.1em solid rgba(127,127,127,1);
    border-radius: 0.25em;
    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;
	transform: translate3d(0px, 0px, -0.1px);
}
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%);
	transform: translate3d(0px, 0px, -0.1px);
	/*text-decoration: initial;*/
}
.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;
	transform: translate3d(0px, 0px, -0.1px);
}
.adult {
	border-radius: 0.25em;
	box-shadow: 0 0 1em 0.1em crimson inset;
}
.premium {
	border-radius: 0.25em;
	box-shadow: -0.1em -0.1em 0.5em 0.05em #FFFF00, 0.1em 0.1em 0.5em 0.05em #FFFF00;
}
.adult.premium {
	border-radius: 0.25em;
	box-shadow: 0 0 1em 0.1em crimson inset, -0.1em -0.1em 0.5em 0.05em #FFFF00, 0.1em 0.1em 0.5em 0.05em #FFFF00;
}
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 {
	/*border: 0.1em solid rgba(127,127,127,0.5);*/
}
input[type=text], textarea {
	min-width: 240px;
    width: 50%;
    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.4em;
	width: 100%;
    font-size: 100%;
	cursor: pointer;
	
	transform: translate3d(0px, 0px, -0.1px);
}
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.4em;
	opacity: 1;
	cursor: not-allowed;
	border: 0.1em solid black;
}
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;
}

/********************************************************/
/* ui bar stuff */

#ui-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 300px;
	padding: 10px 10px 0px 15px;
	margin: 0em;
	text-align: center;
	border-right: 0.15em solid;
	box-shadow: 0em 0em 1em 0.1em rgba(0,0,0,0.8), 0em 0em 1.2em 0.1em rgba(0,0,0,0.5) 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;
	transform: translate3d(0px, 0px, -0.1px);
}
/*#ui-bar-body {
	margin: 0em 0.33em 0em 0.33em;
}*/
.ui-bar-button {
	display: inherit;
	margin: 1.2em 0.33em;
}
/*#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);
}*/
#storyRightBar {
	position: fixed;
	top: 0;
	left: 1080px;
	height:100vh;
	width: 100%;
	box-shadow: 0em 0em 1em 0.1em rgba(0,0,0,0.8), 0em 0em 10em 0.1em rgba(0,0,0,0.5) inset;
	z-index:20;
	display: none;
	border-left: 0.15em solid;
	transform: translate3d(0px, 0px, -0.1px);
}


/********************************************************/
/* 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 800ms ease-in;
}
#ui-overlay:not(.open) {
	transition: visibility 800ms step-end, opacity 800ms 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 800ms 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: 800ms;
}
#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 {
	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: 3%;
	width:94%;
	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;
	right: 10px;
	z-index: -1;
	margin: auto;
	width: 92%;
	height: 92%;
	opacity: 0.25;
	max-width: 300px;
}
/********************************************************/
/* responsive stuff */
#story {
	margin: 0 15px 0 690px;
	padding-top: 0.5em;
	padding-bottom: 1.5em;
	max-width: 720px;
	position: relative;
	z-index: initial;
}
#ui-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 300px;
	padding: 10px 10px 0px 360px;
	margin: 0em;
	text-align: center;
	border-right: 0.15em solid;
	box-shadow: 0em 0em 1em 0.1em rgba(0,0,0,0.8), 0em 0em 1.2em 0.1em rgba(0,0,0,0.5) 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;
	transform: translate3d(0px, 0px, -0.1px);
}
#storyRightBar {
	position: fixed;
	top: 0;
	left: 1430px;
	height:100vh;
	width: 100%;
	box-shadow: 0em 0em 1em 0.1em rgba(0,0,0,0.8), 0em 0em 10em 0.1em rgba(0,0,0,0.5) inset;
	z-index:20;
	display: none;
	border-left: 0.15em solid;
	transform: translate3d(0px, 0px, -0.1px);
	z-index: 101;
	overflow: hidden;
}

@media only screen and (max-width: 2024px) {
  #story {
	margin: 0 15px 0 640px;
  }
  
  #storyRightBar {
	left: 1380px;
  }
  #ui-bar {
	padding: 10px 10px 0px 310px;
  }
}

@media only screen and (max-width: 1924px) {
  #story {
	margin: 0 15px 0 590px;
  }
  
  #storyRightBar {
	left: 1330px;
  }
  #ui-bar {
	padding: 10px 10px 0px 260px;
  }
}

@media only screen and (max-width: 1824px) {
  #story {
	margin: 0 15px 0 540px;
  }
  
  #storyRightBar {
	left: 1280px;
  }
  #ui-bar {
	padding: 10px 10px 0px 210px;
  }
}

@media only screen and (max-width: 1724px) {
  #story {
	margin: 0 15px 0 490px;
  }
  
  #storyRightBar {
	left: 1230px;
  }
  #ui-bar {
	padding: 10px 10px 0px 160px;
  }
}

@media only screen and (max-width: 1624px) {
  #story {
	margin: 0 15px 0 440px;
  }
  
  #storyRightBar {
	left: 1180px;
  }
  #ui-bar {
	padding: 10px 10px 0px 110px;
  }
}

@media only screen and (max-width: 1524px) {
  #story {
	margin: 0 15px 0 390px;
  }
  
  #storyRightBar {
	left: 1130px;
  }
  #ui-bar {
	padding: 10px 10px 0px 60px;
  }
}

@media only screen and (max-width: 1424px) {
  #story {
	margin: 0 15px 0 340px;
  }
  
  #storyRightBar {
	left: 1080px;
  }
  #ui-bar {
	padding: 10px 10px 0px 10px;
  }
}

@media only screen and (max-width: 1219px) {
  #story {
	margin: 0 15px 0 260px;
	padding-top: 0.5em;
	padding-bottom: 1.2em;
	/*padding: 0 15px 0 265px;*/
	/*margin-left: 0%;*/
  }
  #ui-bar {
	width: 220px;
  }
  #ui-bar {
	padding-left: 10px;
  }
  #storyRightBar {
  	left: 1000px;
	margin-left: 0%;
  }
}

@media only screen and (max-width: 999px) {
  #storyRightBar {
	display: none;
  }
  body {
	font-size: 18.5px;
  }
}

@media only screen and (max-width: 839px) {
	#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 {
		/*left: 0;
		right: 0;
		width: 84%;
		margin: auto;*/
		width: 85%;
		left: 7.5%;
		box-sizing: border-box;
	}
	.gameInfo {
		display: none;
	}
	.gameInfoMobile {
		display: inline-block;
	}
	#story {
		margin: 0;
		padding-top: 0.5em;
		padding-bottom: 1em;
		margin-left: auto;
		margin-right: auto;
	}
	.passage {
		margin-left: 0.75em;
		margin-right: 0.75em;
	}
	#story-caption {
		text-align: center;
	}
	.ui-bar-button {
		display: inline-block;
		min-width: 42%;
		margin: 0.15em 0.5em 0.33em 0.5em;
	}
	#rankImage {
		width:100%;
		left: 0;
		top: 1.1em;
	}
	#history-backward, #history-forward {
		margin-top: 0.25em;
	}
	.statsContainer {
		max-width: 640px;
	}
}

@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.5em;
	  margin-right: 0.5em;
  }
	.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.33em;
	  margin-right: 0.33em;
  }
  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;
}