/* INBUILT ELEMENTS - OVERRIDES */

body {
	background-color: hsl(0, 0%, 95%);
}

body.play .container .coverimage {
	display: none;
}

body.play .container .links {
	display: none;
}

/* Future Task: Show About > Credits */
body.play .interpretercredit {
	/*TEMPORARY*/
	display: none;
}

body.state-intro .container {
	display: none;
}

body.play .container #gameport {
	left: 0;
	/*bottom: 10vh;*/
	width: 90%;
	max-width: 550px;
	margin: auto;
	height: 88%;

	/*border-radius: 1em;*/
	background: transparent;
}
	#gameport > #windowport {
		/*border: 1px solid;*/

		border-radius: 0.5em;
		-webkit-box-shadow: 0px 30px 100px -10px rgba(0,0,0,0.30);
		box-shadow: 0px 30px 100px -10px rgba(0,0,0,0.30);
		background-color: white;

		position: relative;
	}

	#gameport > #windowport > div.MorePrompt {
		/*opacity: 0.05;*/
		opacity: 0;
	}

	#gameport > #windowport > div.WindowFrame.GridWindow {
		display: none;
		height: 10vh;
	}

	#gameport > #windowport > div.WindowFrame.BufferWindow {
		top: 0 !important; /*Overrides*/
		height: 90%; 
		background-color: transparent;
		/*padding: 40px;*/

		font-size: 1.1em;
		line-height: 1.6em;
		/*background: cyan;*/
		scroll-behavior: smooth;
	}

	.BufferLine {
		margin: 0 5%
	}
	.BufferLine:first-child {
		display: block !important;
		padding-top: 50%;
	}

		.BufferLine span.Style_normal {
		-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
	       -moz-animation: fadein 2s; /* Firefox < 16 */
	        -ms-animation: fadein 2s; /* Internet Explorer */
	         -o-animation: fadein 2s; /* Opera < 12.1 */
	            animation: fadein 2s;
		}

		@keyframes fadein {
		    from { opacity: 0; }
		    to   { opacity: 1; }
		}

		/* Firefox < 16 */
		@-moz-keyframes fadein {
		    from { opacity: 0; }
		    to   { opacity: 1; }
		}

		/* Safari, Chrome and Opera > 12.1 */
		@-webkit-keyframes fadein {
		    from { opacity: 0; }
		    to   { opacity: 1; }
		}

		/* Internet Explorer */
		@-ms-keyframes fadein {
		    from { opacity: 0; }
		    to   { opacity: 1; }
		}

		/* Opera < 12.1 */
		@-o-keyframes fadein {
		    from { opacity: 0; }
		    to   { opacity: 1; }
		}

		.BufferLine span.Style_input {
			color: #aaa;
			font-weight: lighter;
		}

		.BufferLine span.Style_subheader {
			/*Explictly for 'i7: say "[bold type]*** THE END ***[bold type]";' */
			margin-top: 3em;
			margin-bottom: 3em;
			display: block;
			text-align: center;
		}

		.BufferLine.hasInputSpan {
			margin-top: 20px;
			margin-bottom: 15px;
			opacity: 1 !important;
			padding: 0 8px;
		}
			.BufferLine.hasInputSpan span.Style_normal {
				/*display: none;*/
				color: white;
			}
		.BufferLine.hasCurrentInputCursorSpan {
			/*display: none;*/
			opacity: 0.0;
		}

		/* Bubble Additions */
		.BufferLine.empty {
			display: none;
		}
		.BufferLine span.Style_normal {
			display: inline-block;
			background: wheat;
			padding: 3px 10px;
			border-radius: 11px;
			margin-top: 8px;
			/*margin-right: 10%;*/
		}
		.BufferLine.hasInputSpan {
			text-align: center;
		}
		.BufferLine.hasInputSpan span.Style_normal {
			/* For User Testing Copy-Paste purposes, this still needs to exist. (Not display: none;)*/
			color: white;
			opacity: 0 !important;
			background: white;
			width: 0px;
		}

/* CUSTOM ELEMENTS */

body.play .interaction-bar {
	/*background-color: lightgray;*/
	position: absolute;
	width: 100%;
	height: 10%;
	left: 0;
	bottom: 0;

	border-radius: 0 0 0.5em 0.5em;
}
	.interaction-bar .wrapper {
		width: 87%;
		max-width: 800px;
		margin: auto;
		display: block;
		height: 100%;
		position: relative;
	}

	.interaction-bar .wrapper input#ix-input {
		width: 100%;
		left: 0;

		height: 60%;
		top: 20%;
		
		padding: 10px;

		font-size: 1.5em;
		background-color: white;
		border-radius: 0.5em;

		/* BORDER BOX MODEL*/
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}


	.interaction-bar .wrapper #ix-audio-state,
	.interaction-bar .wrapper input#ix-input {
		display: none;
	}
	.interaction-bar.pref-type .wrapper input#ix-input {
		display: initial;
	}

	.interaction-bar.pref-speak .wrapper #ix-audio-state {
		display: initial;
	}

a.playBtn {
	background: dodgerblue;
	color: white;
	margin: 1em;
	padding: 1em;
	display: inline-block;
	margin-left: 0;
	font-size: 1.2em;
	border-radius: 0.5em;
}
a.playBtn:hover {
	background: blue;
}
a.playBtn.disabled :hover {
}
a.playBtn.disabled {
	background: #AAA;
}

.sttDisabledMessage {
	display: none;
}

/* CUSTOM ELEMENTS: GAMEPORT */
#gameport a.audioBtn {
	position: absolute;
	top: 2em;
	left: 2em;
	background: white;
	padding: 0.5em 0.9em;
	border: 1px solid lightgray;
	border-radius: 30em;

	/*Shadow*/
	-webkit-box-shadow: 0px 0.12em 16px -5px rgba(0,0,0,0.3);
	box-shadow: 0px 0.12em 16px -5px rgba(0,0,0,0.3);

	/*Disable Text Selection*/
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */   
}
a.audioBtn.hide {
	transition: opacity 1.5s ease-in-out;
}
#gameport a.audioBtn:hover {
	top: 1.9em;

	/*Shadow*/
	-webkit-box-shadow: 0px 0.22em 16px -5px rgba(0,0,0,0.3);
	box-shadow: 0px 0.22em 16px -5px rgba(0,0,0,0.3);
}
	a.audioBtn i,
	a.audioBtn span {
		display: none;
	}
	a.audioBtn.audioEnabled i.audioEnabled,
	a.audioBtn.audioDisabled i.audioDisabled {
		display: inline;
	}
	a.audioBtn.audioDisabled span.audioDisabled,
	a.audioBtn.audioEnabled span.audioEnabled {
		display: inline-block;
	}

	a.audioBtn i.fas {
		font-size: 1.2em;
	}
	a.audioBtn span.label {
		color: gray;
		font-size: 0.8em;
		padding-left: 0.7em;
		position: relative;
		top: -0.15em;
	}


/* INTRO SECTION */
body .intro-section {
	/* ~ Mirror of GamePort */
	/* Needs to be tweaked for mobile! */
	width: 90%;
	max-width: 550px;
	margin: auto;
	height: 90%;
	top: 5%;
}

body .intro-section {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*padding: 10vh;*/
	display: none;
}
body.state-intro .intro-section {
	display: inherit;
}
.intro-section .wrapper {
	padding: 2em;
	border-radius: 0.5em;
	background: white;

	-webkit-box-shadow: 0px 30px 100px -10px rgba(0,0,0,0.30);
	box-shadow: 0px 30px 100px -10px rgba(0,0,0,0.30);
	background-color: white;
}
	.intro-section h1 {
		margin: 0;
	}

	.intro-section p.mobile-warning {
		background: #ddd;
		padding: 1em;
		border-radius: 0.2em;
	}

	.intro-section #beginPlayButton {
		/*background: orange;*/
	}

/* UNIVERSAL VALUES - FONT */

body,
#gameport > #windowport > div.WindowFrame.BufferWindow,
.interaction-bar .wrapper input#ix-input {
	/*font-family: 'Georgia', serif;*/
	font-family: 'Gill Sans', 'Helvetica Neue', sans-serif;
	font-size: 1.05em;
}