* {
/*font-family: "Trebuchet MS", Helvetica, sans-serif;*/
}

h4 { 
  margin-bottom: 0em;
}

#bigText {
	font-size: 40px;
}

body {	
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	background-color: black;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
	border-style: dashed;
	border-left: none;
	border-right: none;
	width: 100%;
	padding: 15px;
}

#intro {
	visibility: visible;
	z-index: 101;
	color: white;
	width: 1280px;
	height: 720px;
	/*transition: visibility 1s, opacity 1s;*/
}

*#storyContainer {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

#storyContainer {
	/*background-image: url("images/bg/ozhouse.png");*/
	background-color: black;
	width: 1280px;
	height: 720px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	
	/*For aligning properly after resizing the container*/
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
}

#storyContainer * {
	/*Prevents background flickering on mobile devices, and prevents blurring when transformed*/
	/*Chrome has issues repainting story text because of this*/
	/*-webkit-backface-visibility: hidden;*/
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	/*backface-visibility: hidden;*/
}

#windowContainer, #closeButtonContainer {
	width: 1280px;
	height: 720px;
	z-index: 50;
	pointer-events: none; /*So that you can click through the windowContainer*/
	
	
	/*(For aligning properly after resizing the container*/
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
}

#windowContainer *, #closeButtonContainer *{
	pointer-events:auto; /*So that the buttons inside the container can still be clicked*/
	
	/*Prevent text blurring when transformed*/
	/*Chrome has issues repainting story text because of this*/
	/*-webkit-backface-visibility: hidden;*/
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	/*backface-visibility: hidden;*/
}

#storyLog {
	visibility: hidden;
	z-index: 11;
	position: relative;
	font-size: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	height: 680px;
	display: block;
	color: white;
	background-color: rgba(48,64,99,0.7);
	overflow: auto;
	padding: 20px;
	border-left: 5px solid #E0ECF9;
	border-right: 5px solid #E0ECF9;
	line-height: 1.5;
}

.dialogueBox {
	visibility: visible;
	z-index: 9;
	position: absolute;
	width: 1120px;
	height: 247px;
	bottom: 0px;
	left: 80px;
	overflow: -moz-hidden-unscrollable;
}

#dialogueBoxBG {
	opacity: 0.9;
}

#charName {
	z-index: 4;
	position: absolute;
	color: white;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	font-size: 34px;
	margin-left: 250px;
	bottom: 165px;
	font-weight: bold;
	font-variant: small-caps;
}

#storyText {
	z-index: 10;
	position: absolute;
	color: white;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	font-size: 24px;
	width: 750px;
	height: 100px;
	padding: 90px 20px 20px 20px;
	top: 0px;
	margin-left: 230px;
}

#endIndicator {
	visibility: hidden;
	z-index: 12;
	position: absolute;
	width: 63px;
	height: 61px;
	margin-left: 90%;
	bottom: 40px;
	animation-name: float;
	animation-duration: 1s;
	animation-direction: alternate;
	-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-iteration-count: infinite;
}

#autoplayIndicator {
	visibility: hidden;
	z-index: 20;
	font-weight: bold;
	top: 5px;
	left: 5px;
	position: absolute;
	color: white;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#dialogueCharacter {
	z-index: 10;
	position: absolute;
	overflow: -moz-hidden-unscrollable;
}

#background, #character, #CG, #item, #mini, #effect, #overlayText, #video, #weather{
	position: absolute;
	width: 1280px;
	height: 720px;
	left: 0px;
	top: 0px;
	overflow: -moz-hidden-unscrollable;
}

#character {
	z-index: 2;
}

#CG {
	z-index: 3;
}

#item {
	z-index: 4;
}

#mini {
	z-index: 5;
}

#effect {
	z-index: 6;
}

#background {
	z-index: 1;
}

#video {
	z-index: 102;
	visibility: hidden;
	transition: visibility 1s;
}

#overlayText {
	z-index: 7;
	line-height: 1.8;
}

#weather {
	z-index: 8;
}

/*==Window styles==*/

#helpWindow, #jumpToLineWindow, #settingsWindow {
	background-image: url(images/ui/windowBG.png);
	border: 5px solid white;
	color: white;
}

#helpWindow {
	visibility: hidden;
	position: absolute;
	height: 480px;
	width: 600px;
	
	border-radius: 10px;
	background-color: #304063;
	line-height: 1.8;
	
	top: 80px;
	left: 50%;
	margin-left: -315px;
	padding: 20px;
	
	overflow: auto;
}

.emph {
	font-style: italic;
	font-weight: bold;
}

#continueWindow {
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	width: 1280px;
	height: 720px;	
	background-color: #304063;
	background-image: url(images/ui/windowBG.png);
	color: white;
	
}

#continueWindow div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

#continueWindow button {
	width: 150px;
	height: 100px;
	margin: 50px 20px;
}

#jumpToLineWindow {
	visibility: hidden;
	position: absolute;
	height: 200px;
	width: 700px;
	top: 40%;
	left: 50%;
	margin: -100px 0 0 -375px;
	background-color: #304063;
	padding: 20px;
	text-align: center;
	line-height: 1.8;
	font-size: 18px;
}

#jumpContent {
	margin-left: 20px;
}

#okJumpButton {
	margin-left: 10px;
}

#cancelJumpButton {
	width: 90px;
	margin-left: 10px;
}

/*==Close buttons==*/

.closeButtons {
	z-index: 100;
	position: absolute;
	width: 30px;
	height: 30px;
	padding: 0px;
	visibility: hidden;
}

#storyLogCloseButton {
	left: 1060px;
	top: 10px;
}

#settingsWindowCloseButton {
	left: 835px;
	top: 90px;
}

#helpWindowCloseButton {
	left: 920px;
	top: 100px;
	
}

/*==Menu buttons==*/
.buttons {
	visibility: hidden;
	z-index: 50;
	opacity: 1;
	display: inline-block;
	position: absolute;
	width: 50px;
	right: 10px;
	transition: 0.5s;
	height: 50px;
	
}

button, .sideMenuButtons {
	height: 50px;
	width: 50px;
	margin-bottom: 10px;
}

/*Styling the menu buttons' appearances*/
button {
	background-color: #304063;
	border: 2px solid #E0ECF9;
	border-radius: 8px;
	padding: 10px;
	color: white;
	font-size: 20px;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	text-decoration: none;
	box-shadow: 0px 5px 2px grey;
	outline:none;
}
button:hover {
	background-color: #436089;
	border: 2px solid #E0ECF9;
	border-radius: 8px;
	/*padding: 10px;*/
	color: white;
	font-size: 20px;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	text-decoration: none;
	box-shadow: 0px 5px 2px grey;
	outline:none;
}
button:active {
	background-color: #273144;
	border: 2px solid #E0ECF9;
	border-radius: 8px;
	/*padding: 10px;*/
	color: white;
	font-size: 20px;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	text-decoration: none;
	box-shadow: 0px 2px 2px black;
	transform: translateY(3px);
	outline:none;
}

button:focus {
    outline:none !important; /*To prevent the blue outline when buttons are clicked... I don't know why this is only happening now*/
}

::-moz-focus-inner {
	border: 0; /*Prevent dotted outline from Firefox*/
}

.buttonImages {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#expandToggle {
	background: none;
	border: none;
	box-shadow: none;
	padding: 15px 0px;
}

#musicToggle, #soundToggle, #autoplayToggle, #hideButton, #storyLogButton, #settingsButton, #jumpButton, #helpButton {
	visibility: hidden;
}

#musicToggle {
	padding: 9px 0px;
}

#soundToggle {
	padding: 7px 9px;
}

#autoplayToggle {
	padding: 8px 14px;
}

#hideButton {
	padding: 10px 4px;
}

#storyLogButton {
	padding: 7px 3px;
}

#settingsButton {
	padding: 6px 6px;
}

#jumpButton {
	padding: 7px 2px;
}

#helpButton {
	padding: 5px 0px;
}

/*==Button tooltips==*/
#musicToggle:hover #musicTooltip, #soundToggle:hover #soundTooltip, #autoplayToggle:hover #autoplayTooltip, #hideButton:hover #hideTooltip, #storyLogButton:hover #storyLogTooltip, #settingsButton:hover #settingsTooltip, #jumpButton:hover #jumpTooltip, #helpButton:hover #helpTooltip  {
	visibility: visible;
}

.sideMenuButtons:active  .tooltip {
	/*Transform refuses to be disabled so have to do this instead--visibility also refuses to work without !important*/
	visibility: hidden !important;
	transform: none;
}

.tooltip {
	z-index: 11;
	position: absolute;
	width: 200px;
	font-size: 20px;
	text-align: right;
	top: 0px;
	right: 70px;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	color: white;
}

#musicTooltip {
	visibility: hidden;
	top: 73px;
}

#soundTooltip {
	visibility: hidden;
	top: 133px;
}

#autoplayTooltip {
	visibility: hidden;
	top: 193px;
}

#jumpTooltip {
	visibility: hidden;
	top: 253px;
}

#hideTooltip {
	visibility: hidden;
	top: 313px;
}

#storyLogTooltip {
	visibility: hidden;
	top: 373px;
}

#settingsTooltip {
	visibility: hidden;
	top: 433px;
}

#helpTooltip {
	visibility: hidden;
	top: 493px;
}

/*==Advanced settings==*/
#settingsWindow {
	visibility: hidden;
	z-index: 11;
	position: absolute;
	border-radius: 10px;
	top: 10%;
	left: 50%;
	width: 450px;
	height: 500px;
	padding: 20px;
	margin-left: -250px;
	background-color: #304063;
	color: white;
	overflow: auto;
}

.windowHeader1 {
	font-size: 30px;
	font-weight: bold;
	line-height: 200%;
}

.windowHeader2 {
	font-size: 20px;
	font-weight: bold;
	line-height: 200%;
}

.textSpeedSettings, .volumeSettings, .autoplaySettings {
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 200%;
}

.volumeSettings, .textSpeedSettings, .autoplaySettings {
	border-bottom: 1px dashed black;
}


/*==Styles for weather effects==*/

/*Rain*/
#rainFrontLayer, #rainBackLayer {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
}

#rainBackLayer {
	filter: blur(1px);
}

.rainDrop {
	position: absolute;
	width: 1.5px;
	height: 50px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4));
	pointer-events: none;
	animation: rainFall linear infinite;
}

@keyframes rainFall {
	0% {transform: translateY(0px);}
	100% {transform: translateY(720px);}
}

/*Snow*/


/*Float animation*/
@-webkit-keyframes float {
	0% {transform: translateY(6px);}
	100% {transform: translateY(-4px);}
}

@-o-keyframes float {
	0% {transform: translateY(6px);}
	100% {transform: translateY(-4px);}
}

/*Bounce animation*/
@-webkit-keyframes bounce {
	0% {transform: translateY(0px);}
	50% {transform: translateY(-1%);}
	90% {transform: translateY(1%);}
	100% {transform: translateY(0px);}
}

@-o-keyframes bounce {
	0% {transform: translateY(0px);}
	50% {transform: translateY(-1%);}
	90% {transform: translateY(1%);}
	100% {transform: translateY(0px);}
}

@-webkit-keyframes bounceFlipped {
	0% {transform: translateY(0px) scaleX(-1);}
	50% {transform: translateY(-1%) scaleX(-1);}
	90% {transform: translateY(1%) scaleX(-1);}
	100% {transform: translateY(0px) scaleX(-1);}
}

@-o-keyframes bounceFlipped {
	0% {transform: translateY(0px) scaleX(-1);}
	50% {transform: translateY(-1%) scaleX(-1);}
	90% {transform: translateY(1%) scaleX(-1);}
	100% {transform: translateY(0px) scaleX(-1);}
}

/*Slide down animation*/
@-webkit-keyframes slideDown {
	0% {transform: translateY(0px);}
	100% {transform: translateY(60px);}
}

@-o-keyframes slideDown {
	0% {transform: translateY(0px);}
	100% {transform: translateY(60px);}
}

/*Fade in animation*/
@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-o-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*Fade out animation*/
@-webkit-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@-o-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

/*Fade from black animation*/
@-webkit-keyframes fadeFromBlack {
	0% {filter: brightness(0%); filter: brightness(0%);}
	100% {filter: brightness(100%); filter: brightness(100%);}
}

@-o-keyframes fadeFromBlack {
	0% {filter: brightness(0%); filter: brightness(0%);}
	100% {filter: brightness(100%); filter: brightness(100%);}
}

/*Shake animation*/
@-webkit-keyframes shake {
	0% {transform: translateX(0px);}
	20% {transform: translateX(-2px);}
	40% {transform: translateX(4px);}
	60% {transform: translateX(-4px);}
	80% {transform: translateX(4px);}
	100% {transform: translateX(0px);}
}

@-o-keyframes shake {
	0% {transform: translateX(0px);}
	20% {transform: translateX(-2px);}
	40% {transform: translateX(4px);}
	60% {transform: translateX(-4px);}
	80% {transform: translateX(4px);}
	100% {transform: translateX(0px);}
}

@-webkit-keyframes shakeFlipped {
	0% {transform: translateX(0px) scaleX(-1);}
	20% {transform: translateX(-2px) scaleX(-1);}
	40% {transform: translateX(4px) scaleX(-1);}
	60% {transform: translateX(-4px) scaleX(-1);}
	80% {transform: translateX(4px) scaleX(-1);}
	100% {transform: translateX(0px) scaleX(-1);}
}

@-o-keyframes shakeFlipped {
	0% {transform: translateX(0px) scaleX(-1);}
	20% {transform: translateX(-2px) scaleX(-1);}
	40% {transform: translateX(4px) scaleX(-1);}
	60% {transform: translateX(-4px) scaleX(-1);}
	80% {transform: translateX(4px) scaleX(-1);}
	100% {transform: translateX(0px) scaleX(-1);}
}

/*Slide Left animation*/
@-webkit-keyframes slideLeft {
	0% {transform: translateX(0px);}
	100% {transform: translateX(-200px);}
}

@-o-keyframes slideLeft {
	0% {transform: translateX(0px);}
	100% {transform: translateX(-200px);}
}

/*Slide Right animation*/
@-webkit-keyframes slideRight {
	0% {transform: translateX(0px);}
	100% {transform: translateX(200px);}
}

@-o-keyframes slideRight {
	0% {transform: translateX(0px);}
	100% {transform: translateX(200px);}
}

/*Flip animation*/
@-webkit-keyframes flip {
	0% {transform: scaleX(-1);}
	100% {transform: scaleX(-1);}
}

@-o-keyframes flip {
	0% {transform: scaleX(-1);}
	100% {transform: scaleX(-1);}
}

/*Sink animation*/
@-webkit-keyframes sink {
	0% {transform: translateY(0px);}
	100% {transform: translateY(35px);}
}

@-o-keyframes sink {
	0% {transform: translateY(0px);}
	100% {transform: translateY(35px);}
}

@-webkit-keyframes sinkFlipped {
	0% {transform: translateY(0px) scaleX(-1);}
	100% {transform: translateY(35px) scaleX(-1);}
}

@-o-keyframes sinkFlipped {
	0% {transform: translateY(0px) scaleX(-1);}
	100% {transform: translateY(35px) scaleX(-1);}
}

/*Rise animation*/
@-webkit-keyframes rise {
	0% {transform: translateY(0px);}
	100% {transform: translateY(-35px);}
}

@-o-keyframes rise {
	0% {transform: translateY(0px);}
	100% {transform: translateY(-35px);}
}

@-webkit-keyframes riseFlipped {
	0% {transform: translateY(0px) scaleX(-1);}
	100% {transform: translateY(-35px) scaleX(-1);}
}

@-o-keyframes riseFlipped {
	0% {transform: translateY(0px) scaleX(-1);}
	100% {transform: translateY(-35px) scaleX(-1);}
}

/*Left to right (out of screen) animation*/
@-webkit-keyframes leftToRight {
	0% {transform: translateX(0px);}
	100% {transform: translateX(1800px);}
}

@-o-keyframes leftToRight {
	0% {transform: translateX(0px);}
	100% {transform: translateX(1800px);}
}

@-webkit-keyframes leftToRightFlipped {
	0% {transform: translateX(0px) scaleX(-1);}
	100% {transform: translateX(1800px) scaleX(-1);}
}

@-o-keyframes leftToRightFlipped {
	0% {transform: translateX(0px) scaleX(-1);}
	100% {transform: translateX(1800px) scaleX(-1);}
}

/*Right to Left (out of screen) animation*/
@-webkit-keyframes rightToLeft {
	0% {transform: translateX(0px);}
	100% {transform: translateX(-1800px);}
}

@-o-keyframes rightToLeft {
	0% {transform: translateX(0px);}
	100% {transform: translateX(-1800px);}
}

@-webkit-keyframes rightToLeftFlipped {
	0% {transform: translateX(0px) scaleX(-1);}
	100% {transform: translateX(-1800px) scaleX(-1);}
}

@-o-keyframes rightToLeftFlipped {
	0% {transform: translateX(0px) scaleX(-1);}
	100% {transform: translateX(-1800px) scaleX(-1);}
}

/*Up to Down (out of screen) animation*/
@-webkit-keyframes upToDown {
	0% {transform: translateY(0px);}
	100% {transform: translateY(1400px);}
}

@-o-keyframes upToDown {
	0% {transform: translateY(0px);}
	100% {transform: translateY(1400px);}
}

@-webkit-keyframes upToDownFlipped {
	0% {transform: translateY(0px) scaleX(-1);}
	100% {transform: translateY(1400px) scaleX(-1);}
}

@-o-keyframes upToDownFlipped {
	0% {transform: translateY(0px) scaleX(-1);}
	100% {transform: translateY(1400px) scaleX(-1);}
}