html, body{
	height: 100%;
	width: 100%;
}

canvas {
	display:block;
}

#yearbook.container {
	width: 100%;
	height: 100%;
	min-height: 806px;
	min-width: 590px;
	overflow: hidden;
}

#game.container {
	width: 1200px;
	height: 100%;
	min-height: 570px;
	max-height: 900px;
    border: 1px solid #1b1b1b;
	border-top: none;
	overflow: hidden;
    -webkit-box-shadow: 0 0 2px 2px rgba(27,27,27,0.5);
	   -moz-box-shadow: 0 0 2px 2px rgba(27,27,27,0.5);
		-ms-box-shadow: 0 0 2px 2px rgba(27,27,27,0.5);
		 -o-box-shadow: 0 0 2px 2px rgba(27,27,27,0.5);
			box-shadow: 0 0 2px 2px rgba(27,27,27,0.5);
	-webkit-touch-callout: none;
	  -webkit-user-select: none;
	   -khtml-user-select: none;
		 -moz-user-select: none;
		  -ms-user-select: none;
			  user-select: none;
	cursor: default;
}

#wave{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	content: " ";
	font-size: 0;
	background: transparent url("../img/wave_null.png") repeat-x -40px center;
	opacity: 0;
	-webkit-transition: opacity 1000ms linear;
	   -moz-transition: opacity 1000ms linear;
		-ms-transition: opacity 1000ms linear;
		 -o-transition: opacity 1000ms linear;
			transition: opacity 1000ms linear;
	background-size: 200% auto;
}

#wave.visible{
	opacity: 0.5;
}
	#wave.short{
		background: transparent url("../img/wave_short.png") repeat-x -40px center;
		background-size: 200% auto;
	}
	#wave.long{
		background: transparent url("../img/wave_long.png") repeat-x -40px center;
		background-size: 200% auto;
	}

#game > div.wrapper{
	position: relative;
}

#background{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	background: #000 none no-repeat center center;
}
#background.game{
	background-color: #111;
	-webkit-transition: background-position 1000ms ease-out, transform 1000ms ease-in-out, opacity 1000ms linear, filter 200ms linear;
	   -moz-transition: background-position 1000ms ease-out, transform 1000ms ease-in-out, opacity 1000ms linear, filter 200ms linear;
		-ms-transition: background-position 1000ms ease-out, transform 1000ms ease-in-out, opacity 1000ms linear, filter 200ms linear;
		 -o-transition: background-position 1000ms ease-out, transform 1000ms ease-in-out, opacity 1000ms linear, filter 200ms linear;
			transition: background-position 1000ms ease-out, transform 1000ms ease-in-out, opacity 1000ms linear, filter 200ms linear;
	background-position-x: -20px;
	transform: scale(1.1);
	opacity: 1;
}

#background.game.inactive{
	opacity: 0;
	transform: scale(1);
}
#background.yearbook{
	font-family: 'Alex Brush', cursive;
	background-image: url("../img/yearbook_backgorund.png");
	min-height: 590px;
}

#yearbook .wrapper{
	box-sizing: border-box;
	position: absolute;
	display: flex;
	top: 42px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 20px 0 40px;
	font-size: 0;
	text-align: center;
	z-index: 2;
	justify-content: center;
	pointer-events: none;
}
	#yearbook .wrapper #login{
		pointer-events: auto;
	}

#book{
	box-sizing: border-box;
	position: relative;
    display: inline-block;
	width: 590px;
	height: 728px;
	padding: 60px 80px 70px 68px;
	opacity: 0;
	background: transparent url("../img/yearbook.png") no-repeat center top;
	align-self: center;
	-webkit-transition: opacity 500ms linear;
	   -moz-transition: opacity 500ms linear;
		-ms-transition: opacity 500ms linear;
		 -o-transition: opacity 500ms linear;
			transition: opacity 500ms linear;
}
	#book .title{
		font-family: 'Merienda', cursive;
		color: #CFAD41;
		font-size: 22px;
		padding: 15px;
		text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
	}
	#book .title div{
		padding: 60px;
		text-align: center;
		vertical-align: middle;
	}

	#book .pages,
	#book #profile,
	#book #collection{
		display: none;
	}

	#book.open{
		padding: 78px 88px 35px 84px;
		width: 1152px;
		height: 703px;
		background: transparent url("../img/yearbook_open.png") no-repeat center right;
	}
	#book.open .pages,
	#book.open #profile,
	#book.open #collection{
		display: block;
	}
	
	.pages{
		font-family: 'Merienda', cursive;
		font-variant: small-caps;
		font-size: 0;
		color: #333;
	}
	
	.pages .page{
		vertical-align: top;
		box-sizing: border-box;
		display: inline-block;
		width: 490px;
		height: 590px;
		font-size: 18px;
		padding: 32px 0 64px;
		text-align: center;
	}
		.pages .page .newCharacter{
			font-size: 22px;
			margin: 170px 80px;
		}
			.pages .page .newCharacter,
			.pages .page .newCharacter h1{
				font-family: 'Alex Brush', cursive;
				font-variant: normal;
				color: #333;
				-webkit-transition: color 100ms linear;
				   -moz-transition: color 100ms linear;
					-ms-transition: color 100ms linear;
					 -o-transition: color 100ms linear;
						transition: color 100ms linear;
			}
		.pages .page .newCharacter:hover h1,
		.pages .page .newCharacter:hover{
			cursor: pointer;
			cursor: hand;
			color: #438cbf;
		}
		.pages .page .newCharacter #quill{
			display: inline-block;
			width: 109px;
			height: 60px;
			background: transparent url("../img/icon_quill.png") no-repeat 0 0;
			-webkit-filter: grayscale(100%) brightness(40%);
			   -moz-filter: grayscale(100%) brightness(40%);
				-ms-filter: grayscale(100%) brightness(40%);
				 -o-filter: grayscale(100%) brightness(40%);
					filter: grayscale(100%) brightness(40%);
			-webkit-transition: filter 100ms linear;
			   -moz-transition: filter 100ms linear;
				-ms-transition: filter 100ms linear;
				 -o-transition: filter 100ms linear;
					transition: filter 100ms linear;
		}
		.pages .page .newCharacter:hover #quill{
			-webkit-filter: grayscale(0%) brightness(100%);
			   -moz-filter: grayscale(0%) brightness(100%);
				-ms-filter: grayscale(0%) brightness(100%);
				 -o-filter: grayscale(0%) brightness(100%);
					filter: grayscale(0%) brightness(100%);
		}
	
	.pages .page:first-child{
		padding-right: 10px;
	}
	.pages .page:not(:first-child){
		padding-left: 10px;
	}
	
	#book #pages ul.pages:not(:first-child){
		display: none;
	}
	
	.pages .page.characterCreation{
		text-align: left;
	}
	
	.pages .page.characterCreation h2,
	.pages .page.characterCreation p{
		padding-left: 40px;
	}

	.pages .page#confirmCharacter ul{
		margin: 0 30px;
	}

	.pages .page#confirmCharacter ul li{
		padding: 0 10px;
		-webkit-transition: background 100ms linear;
		   -moz-transition: background 100ms linear;
			-ms-transition: background 100ms linear;
			 -o-transition: background 100ms linear;
				transition: background 100ms linear;
	}

	.pages .page#confirmCharacter ul li:hover{
		background: #438cbf;
		color: #fff;
		cursor: pointer;
		cursor: hand;
	}
	.pages .page#confirmCharacter ul li:hover  div:first-child{
		color: #fff;
	}

	.pages .page#confirmCharacter ul li div{
		min-height: 26px;
		-webkit-transition: color 100ms linear;
		   -moz-transition: color 100ms linear;
			-ms-transition: color 100ms linear;
			 -o-transition: color 100ms linear;
				transition: color 100ms linear;
	}
	.pages .page#confirmCharacter ul li div:first-child{
		color: #999;
	}
	.pages .page#confirmCharacter ul li div:last-child{
		height: 28px;
		padding-left: 20px;
	}

	.pages .page#confirmCharacter form{
		margin-top: 25px;
		text-align: center;
	}
		.pages .page#confirmCharacter form input{
			color: #111;
			padding: 2px 4px;
			width: 165px;
			border: none;
			border-bottom: 1px solid #999;
			background: transparent;
		}
		.pages .page#confirmCharacter form input:focus{
			background: #fff;
		}

	.pages .page.character{
		padding-top: 52px;
	}
		.pages .page.character.hover .male,
		.pages .page.character.hover .female{
			-webkit-transition: background-color 200ms linear;
			   -moz-transition: background-color 200ms linear;
				-ms-transition: background-color 200ms linear;
				 -o-transition: background-color 200ms linear;
					transition: background-color 200ms linear;
		}
		.pages .page.character.hover:hover{
			cursor: pointer;
			cursor: hand;
		}
		.pages .page.character.hover:hover .male,
		.pages .page.character.hover:hover .female{
			background-color: rgba(255,255,255,0.5);
		}
				
.pages .page.character div.male,
.pages .page.character div.female{
	display: inline-block;
	width: 200px;
	height: 200px;
}
.pages .page.character div.male.pure{
	background: rgba(0,0,0,0.1) url("../img/character/male_pure.png") no-repeat center -45px;
	background-size: auto 160%;
}
.pages .page.character div.male.curious{
	background: rgba(0,0,0,0.1) url("../img/character/male_curious.png") no-repeat center -20px;
	background-size: auto 150%;
}
.pages .page.character div.male.cunning{
	background: rgba(0,0,0,0.1) url("../img/character/male_cunning.png") no-repeat center -40px;
	background-size: auto 170%;
}
.pages .page.character div.male.sexy{
	background: rgba(0,0,0,0.1) url("../img/character/male_sexy.png") no-repeat 10px -20px;
	background-size: auto 160%;
}
.pages .page.character div.male.tough{
	background: rgba(0,0,0,0.1) url("../img/character/male_tough.png") no-repeat 25px 10px;
	background-size: auto 140%;
}

.pages .page.character div.female.pure{
	background: rgba(0,0,0,0.1) url("../img/character/female_pure.png") no-repeat center -55px;
	background-size: auto 150%;
}
.pages .page.character div.female.curious{
	background: rgba(0,0,0,0.1) url("../img/character/female_curious.png") no-repeat center -35px;
	background-size: auto 150%;
}
.pages .page.character div.female.cunning{
	background: rgba(0,0,0,0.1) url("../img/character/female_cunning.png") no-repeat center -50px;
	background-size: auto 170%;
}
.pages .page.character div.female.sexy{
	background: rgba(0,0,0,0.1) url("../img/character/female_sexy.png") no-repeat center -50px;
	background-size: auto 170%;
}
.pages .page.character div.female.tough{
	background: rgba(0,0,0,0.1) url("../img/character/female_tough.png") no-repeat center -10px;
	background-size: auto 150%;
}

#game #characters{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	pointer-events: none;
	-webkit-transition: filter 200ms linear;
	   -moz-transition: filter 200ms linear;
		-ms-transition: filter 200ms linear;
		 -o-transition: filter 200ms linear;
			transition: filter 200ms linear;
}
	#game #characters div{
		width: 40%;
		min-width: 480px;
		height: 100%;
		background: transparent none no-repeat left bottom;
	}
	#game #characters div:before{
		display: block;
		content: " ";
		font-size: 0;
		width: 100%;
		height: 100%;
		background: transparent none no-repeat left bottom;
	}

	#game #characters div.idle:before{
		background-image: url("../img/character/IVY_idle.png");
	}
	#game #characters div.annoyed:before{
		background-image: url("../img/character/IVY_annoyed.png");
	}
	#game #characters div.angry:before{
		background-image: url("../img/character/IVY_angry.png");
	}
	#game #characters div.confused:before{
		background-image: url("../img/character/IVY_confused.png");
	}
	#game #characters div.talking:before{
		background-image: url("../img/character/IVY_talking.png");
	}
		#game #characters div:before{
			background-size: 104% auto;
		}

	#game #characters div.pure.alt{
		filter: hue-rotate(320deg);
	}
	#game #characters div.curious.alt{
		filter: hue-rotate(280deg);
	}
	#game #characters div.cunning.alt{
		filter: hue-rotate(280deg);
	}
	#game #characters div.sexy.alt{
		filter: hue-rotate(30deg);
	}
	#game #characters div.tough.alt{
		filter: hue-rotate(30deg);
	}
	#game #characters div.generic{
		filter: grayscale(100%);
	}

	#game #characters div:first-child,
	#game #characters div:last-child{
		position: absolute;
		bottom: 0;
		-webkit-transition:	transform 250ms linear, opacity 250ms linear, filter 250ms linear;
		   -moz-transition:	transform 250ms linear, opacity 250ms linear, filter 250ms linear;
			-ms-transition:	transform 250ms linear, opacity 250ms linear, filter 250ms linear;
			 -o-transition:	transform 250ms linear, opacity 250ms linear, filter 250ms linear;
				transition:	transform 250ms linear, opacity 250ms linear, filter 250ms linear;
	}
	#game #characters div:first-child{
		left: 0;
	}
		#game #characters div:first-child:before{
			-webkit-transform: scaleX(-1);
			   -moz-transform: scaleX(-1);
				-ms-transform: scaleX(-1);
				 -o-transform: scaleX(-1);
					transform: scaleX(-1);
		}
	#game #characters div:last-child{
		right: 0;
	}
	#game #characters div:first-child.enter,
	#game #characters div:last-child.enter{
		-webkit-transition:	transform 500ms ease-out, opacity 500ms ease-out, filter 500ms ease-out;
		   -moz-transition:	transform 500ms ease-out, opacity 500ms ease-out, filter 500ms ease-out;
			-ms-transition:	transform 500ms ease-out, opacity 500ms ease-out, filter 500ms ease-out;
			 -o-transition:	transform 500ms ease-out, opacity 500ms ease-out, filter 500ms ease-out;
				transition:	transform 500ms ease-out, opacity 500ms ease-out, filter 500ms ease-out;
	}
	#game #characters div:first-child.leave,
	#game #characters div:last-child.leave{
		-webkit-transition:	transform 1000ms ease-in, opacity 1000ms ease-in, filter 1000ms ease-in;
		   -moz-transition:	transform 1000ms ease-in, opacity 1000ms ease-in, filter 1000ms ease-in;
			-ms-transition:	transform 1000ms ease-in, opacity 1000ms ease-in, filter 1000ms ease-in;
			 -o-transition:	transform 1000ms ease-in, opacity 1000ms ease-in, filter 1000ms ease-in;
				transition:	transform 500ms ease-in, opacity 500ms ease-in, filter 500ms ease-in;
	}
	#game #characters div:first-child.inactive,
	#game #characters div:last-child.inactive{
		opacity: 0;
		filter: brightness(0%);
	}
	#game #characters div:first-child.inactive.leave,
	#game #characters div:first-child.inactive.enter{
		-webkit-transform: translateX(-100%);
		   -moz-transform: translateX(-100%);
			-ms-transform: translateX(-100%);
			 -o-transform: translateX(-100%);
				transform: translateX(-100%);
	}
	#game #characters div:last-child.inactive.leave,
	#game #characters div:last-child.inactive.enter{
		-webkit-transform: translateX(100%);
		   -moz-transform: translateX(100%);
			-ms-transform: translateX(100%);
			 -o-transform: translateX(100%);
				transform: translateX(100%);
	}
	#game #characters div:first-child.inactive.enter,
	#game #characters div:last-child.inactive.enter{
		-webkit-transition:	none;
		   -moz-transition:	none;
			-ms-transition:	none;
			 -o-transition:	none;
				transition:	none;
	}

#gender_female,
#gender_male{
	position: absolute;
	top: 135px;
	width: 200px;
	height: 365px;
	pointer-events: none;
	-webkit-transition: filter 100ms linear, opacity 100ms linear;
	   -moz-transition: filter 100ms linear, opacity 100ms linear;
		-ms-transition: filter 100ms linear, opacity 100ms linear;
		 -o-transition: filter 100ms linear, opacity 100ms linear;
			transition: filter 100ms linear, opacity 100ms linear;
	opacity: 0.7;
}

#gender_male,
#gender_female{
	background: transparent none no-repeat right bottom;
}

#gender_male.pure{
	right: 205px;
	background-image: url("../img/character/male_pure.png");
}
#gender_female.pure{
	right: 110px;
	background-image: url("../img/character/female_pure.png");
}

#gender_male.curious{
	right: 185px;
	background-image: url("../img/character/male_curious.png");
}
#gender_female.curious{
	right: 115px;
	background-image: url("../img/character/female_curious.png");
}

#gender_male.cunning{
	right: 190px;
	background-image: url("../img/character/male_cunning.png");
}
#gender_female.cunning{
	right: 90px;
	background-image: url("../img/character/female_cunning.png");
}

#gender_male.sexy{
	right: 187px;
	background-image: url("../img/character/male_sexy.png");
}
#gender_female.sexy{
	right: 95px;
	background-image: url("../img/character/female_sexy.png");
}

#gender_male.tough{
	right: 180px;
	background-image: url("../img/character/male_tough.png");
}
#gender_female.tough{
	right: 105px;
	background-image: url("../img/character/female_tough.png");
}

#gender_female,
#gender_male{
	background-size: 100% auto;
}

#gender_male.hover,
#gender_female.hover{
	filter: brightness(120%);
}
#gender_male.selected,
#gender_female.selected{
	opacity: 1;
	z-index: 1;
}

#gender_hover{
	position: absolute;
	top: 135px;
	right: 115px;
	height: 365px;
	font-size: 0;
}

	#gender_hover div{
		display: inline-block;
		height: 365px;
	}

		#gender_hover.pure div.male{
			width: 135px;
		}
		#gender_hover.pure div.female{
			width: 137px;
		}

		#gender_hover.curious div.male{
			width: 120px;
		}
		#gender_hover.curious div.female{
			width: 120px;
		}

		#gender_hover.cunning div.male{
			width: 95px;
		}
		#gender_hover.cunning div.female{
			width: 148px;
		}

		#gender_hover.sexy div.male{
			width: 111px;
		}
		#gender_hover.sexy div.female{
			width: 132px;
		}

		#gender_hover.tough div.male{
			width: 110px;
		}
		#gender_hover.tough div.female{
			width: 150px;
		}

	#gender_hover div:hover{
		cursor: pointer;
		cursor: hand;
	}

.filter{
	margin: 25px 40px 25px;
	color: #999;
	text-align: center;
}
	.filter ul li{
		display: inline-block;
		padding: 0 7px;
		opacity: 0.5;
		-webkit-transition: all 100ms linear;
		   -moz-transition: all 100ms linear;
			-ms-transition: all 100ms linear;
			 -o-transition: all 100ms linear;
				transition: all 100ms linear;
	}
	.filter ul li.selected{
		opacity: 1;
	}
	.filter ul li:hover{
		opacity: 1;
		cursor: pointer;
		cursor: hand;
		color: #438cbf;
	}
	.filter.nature{
		width: 115px;
		text-align: left;
	}
		.filter.nature ul li{
			display: list-item;
		}

#gameMenu{
	box-sizing: border-box;
	position: relative;
	width: 100%;
	height: 50px;
	border-bottom: 1px solid rgba(255,255,255,0.15);
	background: rgba(38,38,38, 0.8);
	padding-right: 50px;
}

	#gameMenu ul{
		width: auto;
		height: 100%;
		font-size: 0;
	}
		#gameMenu ul li{
			position: relative;
			box-sizing: border-box;
			display: inline-block;
			width: 25%;
			height: 50px;
			padding: 5px 8px;
			margin: 0;
			text-align: center;
			font-size: 14px;
			line-height: 40px;
			letter-spacing: 2px;
			font-variant: small-caps;
			color: rgba(165,165,165,0);
			-webkit-transition: color 200ms linear, background-color 200ms linear;
			   -moz-transition: color 200ms linear, background-color 200ms linear;
				-ms-transition: color 200ms linear, background-color 200ms linear;
				 -o-transition: color 200ms linear, background-color 200ms linear;
					transition: color 200ms linear, background-color 200ms linear;
		}
		#gameMenu ul li:before{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			content: " ";
			opacity: 1;
			-webkit-transition: opacity 200ms linear, color 200ms linear, filter 200ms linear;
			   -moz-transition: opacity 200ms linear, color 200ms linear, filter 200ms linear;
				-ms-transition: opacity 200ms linear, color 200ms linear, filter 200ms linear;
				 -o-transition: opacity 200ms linear, color 200ms linear, filter 200ms linear;
					transition: opacity 200ms linear, color 200ms linear, filter 200ms linear;
		}
			#gameMenu ul li.yearbook:before{
				background: transparent url("../img/icon_book.png") no-repeat center center;
				filter: brightness(65%);
			}
			#gameMenu ul li.myself:before,
			#gameMenu ul li.messages:before,
			#gameMenu ul li.events:before{
				color: rgb(165,165,165);
				display: inline-block;
				font: normal normal normal 14px/1 FontAwesome;
				font-size: 32px;
				padding: 5px 8px;
				line-height: 40px;
				text-rendering: auto;
				-webkit-font-smoothing: antialiased;
			}
			#gameMenu ul li.myself:before{
				content: "\f2c0";
			}
			#gameMenu ul li.messages:before{
				content: "\f003";
			}
			#gameMenu ul li.messages.new:before{
				content: "\f0e0";
				color: #fff;
			}
			#gameMenu ul li.events:before{
				content: "\f073";
			}

			#gameMenu ul li.settings{
				position: absolute;
				top: 0;
				right: 0;
				padding: 9px 9px;
				width: 50px;
			}
			#gameMenu ul li.settings img{
				-webkit-filter: brightness(65%);
				   -moz-filter: brightness(65%);
					-ms-filter: brightness(65%);
					 -o-filter: brightness(65%);
						filter: brightness(65%);
				-webkit-transition: filter 200ms linear;
				   -moz-transition: filter 200ms linear;
					-ms-transition: filter 200ms linear;
					 -o-transition: filter 200ms linear;
						transition: filter 200ms linear;
			}

		#gameMenu ul li:hover{
			cursor: pointer;
			cursor: hand;
			color: #fff;
			background-color: #438cbf;
			border-bottom: 1px solid #fff;
		}
		#gameMenu ul li:hover img{
			-webkit-filter: brightness(100%);
			   -moz-filter: brightness(100%);
				-ms-filter: brightness(100%);
				 -o-filter: brightness(100%);
					filter: brightness(100%);
		}
		#gameMenu ul li:hover:before{
			opacity: 0;
		}

#actionTokens,
#turnClock{
	box-sizing: border-box;
	width: 320px;
	height: 70px;
	margin: 10px 20px;
	padding: 3px 0;
	text-align: center;
	font-family: 'Merienda', cursive;
	font-size: 14px;
    line-height: 150%;
    letter-spacing: 2px;
    font-variant: small-caps;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 5px;
	color: #fff;
	background: rgba(38,38,38, 0.8);
    -webkit-box-shadow: inset 0 0 6px 1px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: inset 0 0 6px 1px rgba(0, 0, 0, 0.5);
		-ms-box-shadow: inset 0 0 6px 1px rgba(0, 0, 0, 0.5);
		 -o-box-shadow: inset 0 0 6px 1px rgba(0, 0, 0, 0.5);
			box-shadow: inset 0 0 6px 1px rgba(0, 0, 0, 0.5);
}
#turnClock{
	font-family: 'Ubuntu', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #ffcccc;
	background: rgba(192,67,67,0.8);
	-webkit-transition: color 1000ms linear, background-color 1000ms linear, border-color 1000ms linear, transform 250ms ease-in-out, opacity 250ms ease-in-out;
	   -moz-transition: color 1000ms linear, background-color 1000ms linear, border-color 1000ms linear, transform 250ms ease-in-out, opacity 250ms ease-in-out;
		-ms-transition: color 1000ms linear, background-color 1000ms linear, border-color 1000ms linear, transform 250ms ease-in-out, opacity 250ms ease-in-out;
		 -o-transition: color 1000ms linear, background-color 1000ms linear, border-color 1000ms linear, transform 250ms ease-in-out, opacity 250ms ease-in-out;
			transition: color 1000ms linear, background-color 1000ms linear, border-color 1000ms linear, transform 250ms ease-in-out, opacity 250ms ease-in-out;
}
	#turnClock.blue{
		color: #ccccff;
		background: rgba(67,67,192,0.8);
	}

#actionTokens{
	position: absolute;
	padding: 8px 0;
	right: 0;
	top: -10px;
	width: 405px;
}
	
	#actionTokens div,
	#turnClock div{
		box-sizing: border-box;
		position: relative;
		width: 140px;
		margin: 5px;
		padding: 3px .3em 3px 20px;
		border: 1px solid rgb(192,192,192);
		border-radius: 5px;
		display: inline-block;
		background: rgba(0,0,0,0.5);
	}
	#turnClock div{
		border: 1px solid rgb(192,90,90);
		-webkit-transition: border-color 1000ms linear;
		   -moz-transition: border-color 1000ms linear;
			-ms-transition: border-color 1000ms linear;
			 -o-transition: border-color 1000ms linear;
				transition: border-color 1000ms linear;
	}
		#turnClock.blue div{
			border: 1px solid rgb(90,90,192);
		}

	#actionTokens div{
		width: 120px;
		padding-left: 41px;
		font-size: 20px;
		line-height: 32px;
	}
	#actionTokens div:before{
		position: absolute;
		content: " ";
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: none no-repeat .1em 0;
		background-size: 41px auto;
	}
	#actionTokens div.action{
		color: #FFAD77;
		border-color: #C0825A;
		background-color: rgba(77,47,27,0.5);
	}
		#actionTokens div.action span{
			opacity: 0;
		}
		#actionTokens div.action:before{
			background-image: url("../img/icon_action.png");
		}
		#actionTokens div.action:after{
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 2px 6.6px 0 41px;
			font-size: 1.6em;
			content: "\221E";
		}
	#actionTokens div.fortune{
		color: #7789FF;
		border-color: #5A67C0;
		background-color: rgba(27,33,77,0.5);
	}
		#actionTokens div.fortune:before{
			background-image: url("../img/icon_fortune.png");
			background-position: .1em 1px;
		}
	#actionTokens div.luck{
		color: #77FF8D;
		border-color: #5AC06B;
		background-color: rgba(27,77,35,0.5);
	}
		#actionTokens div.luck:before{
			background-image: url("../img/icon_luck.png");
		}

	#turnClock div:before{
		position: absolute;
		top: 0;
		left: .3em;
		bottom: 0;
		opacity: 0.7;
		font: normal normal normal 14px/1 FontAwesome;
		line-height: 48px;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		font-size: 18px;
	}
		#turnClock div.calendar:before{
			content: "\f133";
		}
		#turnClock div.clock:before{
			content: "\f017";
		}

	#turnClock div span:not(:first-child){
		display: inline-block;
	}
		#turnClock div span:first-child{
			display: block;
		}
		
#acquisition,
#bottomBar,
#dialogue{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
#bottomBar,
#dialogue{
	height: 20%;
}
#bottomBar{
	box-sizing: border-box;
	border-top: 1px solid rgba(255,255,255,0.15);
	background: rgba(38,38,38, 0.9);
	-webkit-box-shadow: inset 0px 20px 20px 0px rgb(38,38,38);
	   -moz-box-shadow: inset 0px 20px 20px 0px rgb(38,38,38);
		-ms-box-shadow: inset 0px 20px 20px 0px rgb(38,38,38);
		 -o-box-shadow: inset 0px 20px 20px 0px rgb(38,38,38);
			box-shadow: inset 0px 20px 20px 0px rgb(38,38,38);
}
#bottomBar .wrapper{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}
#acquisition{
	box-sizing: border-box;
	padding: 20px;
	text-align: center;
	pointer-events: auto;
}
#acquisition > div{
	box-sizing: border-box;
	display: inline-block;
	height: 60px;
	width: 100%;
	max-width: 550px;
	font-weight: 700;
	padding: 2px;
	color: rgb(38,38,38);
	font-size: 34px;
	font-family: 'Ubuntu', "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 150%;
	overflow: hidden;
	opacity: 0;
	-webkit-transition:	height 100ms linear, width 500ms ease-in-out 100ms, opacity 300ms linear 1600ms;
	   -moz-transition:	height 100ms linear, width 500ms ease-in-out 100ms, opacity 300ms linear 1600ms;
		-ms-transition:	height 100ms linear, width 500ms ease-in-out 100ms, opacity 300ms linear 1600ms;
		 -o-transition:	height 100ms linear, width 500ms ease-in-out 100ms, opacity 300ms linear 1600ms;
			transition:	height 100ms linear, width 500ms ease-in-out 100ms, opacity 300ms linear 1600ms;
}
#acquisition.fortune > div{
	background: rgba(119, 137, 255, 1);
	-webkit-box-shadow: 0px 0px 30px 2px rgba(119, 137, 255, 0.9);
	   -moz-box-shadow: 0px 0px 30px 2px rgba(119, 137, 255, 0.9);
		-ms-box-shadow: 0px 0px 30px 2px rgba(119, 137, 255, 0.9);
		 -o-box-shadow: 0px 0px 30px 2px rgba(119, 137, 255, 0.9);
			box-shadow: 0px 0px 30px 2px rgba(119, 137, 255, 0.9);
}
#acquisition.luck > div{
	background: rgba(119, 255, 141, 1);
	-webkit-box-shadow: 0px 0px 30px 2px rgba(119, 255, 141, 0.9);
	   -moz-box-shadow: 0px 0px 30px 2px rgba(119, 255, 141, 0.9);
		-ms-box-shadow: 0px 0px 30px 2px rgba(119, 255, 141, 0.9);
		 -o-box-shadow: 0px 0px 30px 2px rgba(119, 255, 141, 0.9);
			box-shadow: 0px 0px 30px 2px rgba(119, 255, 141, 0.9);
}

#acquisition > div > div{
	-webkit-transition:	opacity 150ms ease-in-out 450ms;
	   -moz-transition:	opacity 150ms ease-in-out 450ms;
		-ms-transition:	opacity 150ms ease-in-out 450ms;
		 -o-transition:	opacity 150ms ease-in-out 450ms;
			transition:	opacity 150ms ease-in-out 450ms;
}

#acquisition > div > div:before,
#acquisition > div > div:after{
	display: inline-block;
	vertical-align: middle;
}
#acquisition.luck > div > div:before,
#acquisition.fortune > div > div:before{
	content: "You Have Gained ";
}
#acquisition.luck > div > div:after,
#acquisition.fortune > div > div:after{
	content: " ";
    width: 34.5px;
    height: 32px;
}
#acquisition.fortune > div > div:after{
	background: url(../img/icon_fortune.png) no-repeat -1.5px -2.5px;
    background-size: 41px auto;
	transform: scale(1.2);
}
#acquisition.luck > div > div:after{
	background: url(../img/icon_luck.png) no-repeat -3.5px -2.5px;
    background-size: 41px auto;
	transform: scale(1.1);
    height: 36px;
}

#acquisition.inactive{
	pointer-events: none;
}
#acquisition.inactive > div,
#acquisition.inactive > div > div{
	opacity: 0;
	-webkit-transition:	none;
	   -moz-transition:	none;
		-ms-transition:	none;
		 -o-transition:	none;
			transition:	none;
}
	#acquisition.inactive > div{
		height: 0;
		width: 0;
		opacity: 1;
		visibility: hidden;
	}
	
#dialogue{
}
	#dialogue li{
		box-sizing: border-box;
		position: absolute;
		top: 10px;
		bottom: 10px;
		left: 1%;
		right: 1%;
		border: 2px solid rgba(255,255,255,0.15);
		border-radius: 7.5px;
		background: rgba(19,19,19,0.95);
		font-size: 1.5em;
		line-height: 140%;
		-webkit-box-shadow: inset 0px 0px 30px 2px rgba(0,0,0,0.5), 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
		   -moz-box-shadow: inset 0px 0px 30px 2px rgba(0,0,0,0.5), 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
			-ms-box-shadow: inset 0px 0px 30px 2px rgba(0,0,0,0.5), 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
			 -o-box-shadow: inset 0px 0px 30px 2px rgba(0,0,0,0.5), 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
				box-shadow: inset 0px 0px 30px 2px rgba(0,0,0,0.5), 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
		-webkit-transition:	transform 100ms ease-in-out, opacity 100ms linear;
		   -moz-transition:	transform 100ms ease-in-out, opacity 100ms linear;
			-ms-transition:	transform 100ms ease-in-out, opacity 100ms linear;
			 -o-transition:	transform 100ms ease-in-out, opacity 100ms linear;
				transition:	transform 100ms ease-in-out, opacity 100ms linear;
	}
	#dialogue li.inactive{
		opacity: 0;
		-webkit-transform: scale(0.96);
		   -moz-transform: scale(0.96);
			-ms-transform: scale(0.96);
			 -o-transform: scale(0.96);
				transform: scale(0.96);
		pointer-events: none;
	}
		#dialogue li > div{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 10px;
			padding-right: 32px;
			overflow: auto;
			direction: rtl;
		}
		#dialogue li > div > div{
			direction: ltr;
		}

	#dialogue li:first-child:before,
	#dialogue li.complete:before{
		position: absolute;
		bottom: 5px;
		right: 15px;
		content: "\f0d7";
		display: inline-block;
		font: normal normal normal 14px/1 FontAwesome;
		font-size: 1.3em;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	#dialogue li:first-child > div > div{
		white-space: pre-line;
	}
	#dialogue li:nth-child(2) > div,
	#dialogue li:nth-child(3) > div{
		padding: 10px 32px;
		text-align: center;
	}
	#dialogue li:nth-child(2),
	#dialogue li:nth-child(4){
		right: 60%;
	}
	#dialogue li:nth-child(3){
		left: 60%;
	}
	#dialogue li > div > div div{
		display: inline-block;
	}
	#dialogue li > div > div div span._c{
		-webkit-transition:	opacity 50ms linear;
		   -moz-transition:	opacity 50ms linear;
			-ms-transition:	opacity 50ms linear;
			 -o-transition:	opacity 50ms linear;
				transition:	opacity 50ms linear;
		opacity: 0;
	}
	#dialogue li > div > div div span._c.v{
		opacity: 1;
	}
	

#optionsList,
#actionButtons{
	box-sizing: border-box;
	position: absolute;
	top: 130px;
	bottom: 20%;
	left: 0;
	right: 40%;
	margin: 10px 0 10px 10px;
	font-size: 0;
	z-index: 2;
}
	#optionsList{
		left: 20%;
		right: 20%;
		text-align: center;
	}
	#actionButtons.locked{
		-webkit-filter: grayscale(70%);
		   -moz-filter: grayscale(70%);
			-ms-filter: grayscale(70%)
			 -o-filter: grayscale(70%)
				filter: grayscale(70%)
		-webkit-transition:	filter 1000ms linear;
		   -moz-transition:	filter 1000ms linear;
			-ms-transition:	filter 1000ms linear;
			 -o-transition:	filter 1000ms linear;
				transition:	filter 1000ms linear;
	}
	#optionsList{
		margin: 10px 20px;
	}
	#optionsList.left{
		left: 0;
		right: 40%;
	}
	#optionsList.right{
		left: 40%;
		right: 0%;
	}

	#optionsList .wrapper,
	#actionButtons .wrapper{
		position: relative;
		display: inline-block;
		top: 50%;
		width: 100%;
		-webkit-transform: translateY(-50%);
		   -moz-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			 -o-transform: translateY(-50%);
				transform: translateY(-50%);
	}

	#optionsList ul{
		box-sizing: border-box;
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	#optionsList ul li{
		display: table-row;
	}
	#optionsList ul li > div{
		display: table-cell;
		vertical-align: middle;
	}
	#optionsList ul li > div > div{
		position: relative;
		margin: 10px 0;
		padding: 8px 5px;
		color: #fff;
		font-size: 20px;
		font-family: 'Ubuntu', "Helvetica Neue", Helvetica, Arial, sans-serif;
		border: 3px solid #7789FF;
		border-radius: 7.5px;
		background: rgba(90, 103, 192, 0.8);
		text-align: center;
		line-height: 200%;
		-webkit-box-shadow: inset 0px 0px 30px 2px rgba(119, 137, 255, 0.9);
		   -moz-box-shadow: inset 0px 0px 30px 2px rgba(119, 137, 255, 0.9);
			-ms-box-shadow: inset 0px 0px 30px 2px rgba(119, 137, 255, 0.9);
			 -o-box-shadow: inset 0px 0px 30px 2px rgba(119, 137, 255, 0.9);
				box-shadow: inset 0px 0px 30px 2px rgba(119, 137, 255, 0.9);
		-webkit-transition:	transform 150ms linear;
		   -moz-transition:	transform 150ms linear;
			-ms-transition:	transform 150ms linear;
			 -o-transition:	transform 150ms linear;
				transition:	transform 150ms linear;
		-webkit-transform: scale(.97);
		   -moz-transform: scale(.97);
			-ms-transform: scale(.97);
			 -o-transform: scale(.97);
				transform: scale(.97);
	}
	#optionsList ul li.selected > div > div{
		border-color: #fff;
	}
	#optionsList ul li > div > div:hover{
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	#optionsList ul li > div > div:after{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		content: " ";
		border-radius: 7.5px;
		pointer-events: none;
		opacity: 0.02;
		background: rgba(255,255,255,0.0) url("../img/background_hexagons.png") repeat 0 0;
	}

	#actionButtons ul{
		display: inline-block;
		vertical-align: text-top;
	}

		#actionButtons ul li{
			box-sizing: border-box;
			position: absolute;
			width: 220px;
			height: 120px;
			margin: 10px;
			margin-right: 0;
			font-size: 24px;
			font-family: 'Ubuntu', "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-align: center;
			color: #fff;
			border: 3px solid transparent;
			background: #222;
			border-radius: 7.5px;
			opacity: 0;
			pointer-events: none;
		}
			#actionButtons ul li.visible{
				position: relative;
				opacity: 1;
				pointer-events: auto;
			}
			#actionButtons.locked ul li{
				pointer-events: none;
			}

		#actionButtons ul li:before,
		#actionButtons ul li:after{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			content: " ";
			border-radius: 7.5px;
			pointer-events: none;
		}
		#actionButtons ul li:before{
			-webkit-box-shadow: inset 0px 0px 30px 2px rgba(255, 255, 255, 0.4);
			   -moz-box-shadow: inset 0px 0px 30px 2px rgba(255, 255, 255, 0.4);
				-ms-box-shadow: inset 0px 0px 30px 2px rgba(255, 255, 255, 0.4);
				 -o-box-shadow: inset 0px 0px 30px 2px rgba(255, 255, 255, 0.4);
					box-shadow: inset 0px 0px 30px 2px rgba(255, 255, 255, 0.4);
		}
		#actionButtons ul li:after{
			opacity: 0.02;
			background: rgba(255,255,255,0.0) url("../img/background_stars.png") repeat 0 0;
		}
		#actionButtons ul li > div{
			display: inline-block;
			vertical-align: middle;
		}
			#actionButtons ul li > div.icon{
				height: 38px;
				width: 100%;
				border-bottom: 1px solid rgba(255,255,255,0.3);
			}
				#actionButtons ul li i{
					font-size: 1.3em;
					margin: 4px 10px;
					max-height: 31px;
				}
			#actionButtons ul li > div:last-child{
				box-sizing: border-box;
				width: 100%;
				height: 75px;
				border-bottom-left-radius: 7.5px;
				border-bottom-right-radius: 7.5px;
				-webkit-box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.75);
				   -moz-box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.75);
					-ms-box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.75);
					 -o-box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.75);
						box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.75);
			}
			#actionButtons ul li .title{
				box-sizing: border-box;
				width: 100%;
				height: 39px;
				overflow: hidden;
			}
				#actionButtons ul li.used .title,
				#actionButtons ul li .title:last-child{
					height: 100%;
					border-bottom-left-radius: 7.5px;
					border-bottom-right-radius: 7.5px;
				}
			#actionButtons ul li .title > div{
				box-sizing: border-box;
				position: relative;
				top: 0;
				opacity: 0;
				overflow: hidden;
				height: 100%;
			}
				#actionButtons ul li .title > div:first-child{
					padding-top: 5px;
					opacity: 1;
				}
				#actionButtons ul li .title > div:last-child{
					padding-top: 3px;
				}
			#actionButtons ul li .fortune_action{
				box-sizing: border-box;
				width: 94px;
				height: 36px;
				padding: 2px .3em 0;
				font-size: 0;
				border: 1px solid rgb(192,192,192);
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				margin: 0 auto;
				border-color: rgba(255,255,255,0.2);
				background-color: rgba(0,0,0,0.2);
				-webkit-box-shadow: inset 0px 5px 5px 2px rgba(0, 0, 0, 0.1), 0px -1px 5px 1px rgba(255, 255, 255, 0.1);
				   -moz-box-shadow: inset 0px 5px 5px 2px rgba(0, 0, 0, 0.1), 0px -1px 5px 1px rgba(255, 255, 255, 0.1);
					-ms-box-shadow: inset 0px 5px 5px 2px rgba(0, 0, 0, 0.1), 0px -1px 5px 1px rgba(255, 255, 255, 0.1);
					 -o-box-shadow: inset 0px 5px 5px 2px rgba(0, 0, 0, 0.1), 0px -1px 5px 1px rgba(255, 255, 255, 0.1);
						box-shadow: inset 0px 5px 5px 2px rgba(0, 0, 0, 0.1), 0px -1px 5px 1px rgba(255, 255, 255, 0.1);
			}

			#actionButtons ul li .action,
			#actionButtons ul li .fortune{
				display: inline-block;
				vertical-align: middle;
				width: 34.5px;
				height: 32px;
			}
			#actionButtons ul li.used.fortune .action,
			#actionButtons ul li .fortune{
				background: url("../img/icon_fortune.png") no-repeat -1.5px -2.5px;
				background-size: 41px auto;
			}
			#actionButtons ul li .action{
				background: url("../img/icon_action.png") no-repeat -1.5px -2.5px;
				background-size: 41px auto;
			}

			#actionButtons ul li.used .fortune_action{
				display: none;
			}
			#actionButtons ul li .fortune_action.inactive div{
				opacity: 0.5;
				-webkit-filter: grayscale(100%);
				   -moz-filter: grayscale(100%);
					-ms-filter: grayscale(100%);
					 -o-filter: grayscale(100%);
						filter: grayscale(100%);
			}

			#actionButtons ul li > div > div,
			#actionButtons ul li .fortune_action,
			#actionButtons ul li .title,
			#actionButtons ul li .title > div{
				-webkit-transition:	all 150ms ease-in-out;
				   -moz-transition:	all 150ms ease-in-out;
					-ms-transition:	all 150ms ease-in-out;
					 -o-transition:	all 150ms ease-in-out;
						transition:	all 150ms ease-in-out;
			}
				#actionButtons ul li.used > div > div,
				#actionButtons ul li.used .fortune_action,
				#actionButtons ul li.used .title,
				#actionButtons ul li.used .title > div{
					-webkit-transition:	none;
					   -moz-transition:	none;
						-ms-transition:	none;
						 -o-transition:	none;
							transition:	none;
				}
			#actionButtons ul li:hover .title{
				background-color: rgb(77,47,27);
			}
			#actionButtons ul li > div > div:hover .fortune_action.inactive,
			#actionButtons ul li:hover .fortune_action{
				width: 100%;
				border-width: 1px 0 0 0;
				border-top-left-radius: 0;
				border-top-right-radius: 0;
				border-bottom-left-radius: 7.5px;
				border-bottom-right-radius: 7.5px;
				background-color: rgb(27,33,77);
				-webkit-box-shadow: inset 0px 5px 5px 2px rgba(0, 0, 0, 0), 0px -1px 5px 1px rgba(255, 255, 255, 0);
				   -moz-box-shadow: inset 0px 5px 5px 2px rgba(0, 0, 0, 0), 0px -1px 5px 1px rgba(255, 255, 255, 0);
					-ms-box-shadow: inset 0px 5px 5px 2px rgba(0, 0, 0, 0), 0px -1px 5px 1px rgba(255, 255, 255, 0);
					 -o-box-shadow: inset 0px 5px 5px 2px rgba(0, 0, 0, 0), 0px -1px 5px 1px rgba(255, 255, 255, 0);
						box-shadow: inset 0px 5px 5px 2px rgba(0, 0, 0, 0), 0px -1px 5px 1px rgba(255, 255, 255, 0);
			}
			#actionButtons ul li.used .title > div,
			#actionButtons ul li:hover .title > div{
				top: -39px;
			}
				#actionButtons ul li.used .title > div,
				#actionButtons ul li:hover .title:last-child > div{
					top: -58.5px;
				}
			#actionButtons ul li:hover .title > div:first-child{
				opacity: 0;
			}
			#actionButtons ul li.used .title > div:last-child,
			#actionButtons ul li:hover .title > div:last-child{
				opacity: 1;
			}
			#actionButtons ul li .title:hover{
				background: #DB712B;
			}
			#actionButtons ul li > div > div:hover .fortune_action{
				background: #7789FF;
			}

		#actionButtons #action_location{
			background-color: #5A95C0;
		}
			#actionButtons #action_location > div:last-child{
				background-color: #1B384D;
			}
		#actionButtons #action_move{
			background-color: #5ABEC0;
		}
			#actionButtons #action_move > div:last-child{
				background-color: #1B4C4D;
			}
		#actionButtons #action_talk{
			background-color: #9E5AC0;
		}
			#actionButtons #action_talk > div:last-child{
				background-color: #3C1B4D;
			}
		#actionButtons #action_belongings{
			background-color: #C05AA6;
		}
			#actionButtons #action_belongings > div:last-child{
				background-color: #4D1B40;
			}
		#actionButtons #action_spell{
			background-color: #C0925A;
		}
			#actionButtons #action_spell > div:last-child{
				background-color: #4D361B;
			}
		#actionButtons #action_item{
			background-color: #6EC05A;
		}
			#actionButtons #action_item > div:last-child{
				background-color: #254D1B;
			}

#actionTokens,
#optionsList ul li:first-child,
#actionButtons ul:first-child li:first-child{
	-webkit-transition:	transform 250ms ease-in-out, opacity 250ms ease-in-out;
	   -moz-transition:	transform 250ms ease-in-out, opacity 250ms ease-in-out;
		-ms-transition:	transform 250ms ease-in-out, opacity 250ms ease-in-out;
		 -o-transition:	transform 250ms ease-in-out, opacity 250ms ease-in-out;
			transition:	transform 250ms ease-in-out, opacity 250ms ease-in-out;
}

#optionsList ul li:nth-child(2),
#actionButtons ul:first-child li:last-child{
	-webkit-transition:	transform 300ms ease-in-out 50ms, opacity 300ms ease-in-out 50ms;
	   -moz-transition:	transform 300ms ease-in-out 50ms, opacity 300ms ease-in-out 50ms;
		-ms-transition:	transform 300ms ease-in-out 50ms, opacity 300ms ease-in-out 50ms;
		 -o-transition:	transform 300ms ease-in-out 50ms, opacity 300ms ease-in-out 50ms;
			transition:	transform 300ms ease-in-out 50ms, opacity 300ms ease-in-out 50ms;
}

#optionsList ul li:nth-child(3),
#actionButtons ul:nth-child(2) li:first-child{
	-webkit-transition:	transform 350ms ease-in-out 100ms, opacity 350ms ease-in-out 100ms;
	   -moz-transition:	transform 350ms ease-in-out 100ms, opacity 350ms ease-in-out 100ms;
		-ms-transition:	transform 350ms ease-in-out 100ms, opacity 350ms ease-in-out 100ms;
		 -o-transition:	transform 350ms ease-in-out 100ms, opacity 350ms ease-in-out 100ms;
			transition:	transform 350ms ease-in-out 100ms, opacity 350ms ease-in-out 100ms;
}

#optionsList ul li:nth-child(4),
#actionButtons ul:nth-child(2) li:last-child{
	-webkit-transition:	transform 400ms ease-in-out 150ms, opacity 400ms ease-in-out 150ms;
	   -moz-transition:	transform 400ms ease-in-out 150ms, opacity 400ms ease-in-out 150ms;
		-ms-transition:	transform 400ms ease-in-out 150ms, opacity 400ms ease-in-out 150ms;
		 -o-transition:	transform 400ms ease-in-out 150ms, opacity 400ms ease-in-out 150ms;
			transition:	transform 400ms ease-in-out 150ms, opacity 400ms ease-in-out 150ms;
}

#optionsList ul li:nth-child(5),
#actionButtons ul:nth-child(3) li:first-child{
	-webkit-transition:	transform 450ms ease-in-out 200ms, opacity 450ms ease-in-out 200ms;
	   -moz-transition:	transform 450ms ease-in-out 200ms, opacity 450ms ease-in-out 200ms;
		-ms-transition:	transform 450ms ease-in-out 200ms, opacity 450ms ease-in-out 200ms;
		 -o-transition:	transform 450ms ease-in-out 200ms, opacity 450ms ease-in-out 200ms;
			transition:	transform 450ms ease-in-out 200ms, opacity 450ms ease-in-out 200ms;
}

#optionsList ul li:nth-child(6),
#actionButtons ul:nth-child(3) li:last-child{
	-webkit-transition:	transform 500ms ease-in-out 250ms, opacity 500ms ease-in-out 250ms;
	   -moz-transition:	transform 500ms ease-in-out 250ms, opacity 500ms ease-in-out 250ms;
		-ms-transition:	transform 500ms ease-in-out 250ms, opacity 500ms ease-in-out 250ms;
		 -o-transition:	transform 500ms ease-in-out 250ms, opacity 500ms ease-in-out 250ms;
			transition:	transform 500ms ease-in-out 250ms, opacity 500ms ease-in-out 250ms;
}

#actionButtons ul li.used,
#optionsList.inactive,
#actionButtons.inactive{
	pointer-events: none;
}
#actionButtons.inactive ul li{
	opacity: 0;
	-webkit-transform: translateY(10px);
	   -moz-transform: translateY(10px);
		-ms-transform: translateY(10px);
		 -o-transform: translateY(10px);
			transform: translateY(10px);
}
#optionsList.inactive ul li,
#turnClock.inactive,
#actionTokens.inactive{
	pointer-events: none;
	opacity: 0;
	-webkit-transform: translateX(20px);
	   -moz-transform: translateX(20px);
		-ms-transform: translateX(20px);
		 -o-transform: translateX(20px);
			transform: translateX(20px);
}
	#turnClock.inactive{
		-webkit-transform: translateX(-20px);
		   -moz-transform: translateX(-20px);
			-ms-transform: translateX(-20px);
			 -o-transform: translateX(-20px);
				transform: translateX(-20px);
	}
	
#preloader{
	opacity: 0;
	pointer-events: none;
}
	#preloader > div.idle{
		background: none url("../img/character/IVY_idle.png") no-repeat 0 0;
	}
	#preloader > div.annoyed{
		background: none url("../img/character/IVY_annoyed.png") no-repeat 0 0;
	}
	#preloader > div.angry{
		background: none url("../img/character/IVY_angry.png") no-repeat 0 0;
	}
	#preloader > div.confused{
		background: none url("../img/character/IVY_confused.png") no-repeat 0 0;
	}
	#preloader > div.talking{
		background: none url("../img/character/IVY_talking.png") no-repeat 0 0;
	}
	#preloader > div.wave_null{
		background: none url("../img/wave_null.png") no-repeat 0 0;
	}
	#preloader > div.wave_short{
		background: none url("../img/wave_short.png") no-repeat 0 0;
	}
	#preloader > div.wave_long{
		background: none url("../img/wave_long.png") no-repeat 0 0;
	}
	
.container #loading{
	position: fixed;
	top: 50%;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	vertical-align: bottom;
	font-size: 1.5em;
	color: white;
	opacity: 0;
	-webkit-transition:	opacity 100ms linear;
	   -moz-transition:	opacity 100ms linear;
		-ms-transition:	opacity 100ms linear;
		 -o-transition:	opacity 100ms linear;
			transition:	opacity 100ms linear;
	pointer-events: none;
	z-index: 9999;
}
	.container.#game #loading{
		position: absolute;
	}
	.container #loading.visible{
		opacity: 0.8;
	}

/**
 * Fullscreen
 */

@media (min-width: 1200px) and (min-height: 900px) {
	#game.container.fullscreen {
		width: 100%;
		height: 100%;
		max-height: none;
		margin: 0;
		border: none;
		cursor: default;
	}
	
	#game.container.fullscreen #actionTokens,
	#game.container.fullscreen #turnClock{
		width: 384px;
		height: 84px;
		padding: 3.6px 0;
		font-size: 16.8px;
	}

	#game.container.fullscreen #actionTokens{
		padding: 9.6px 0;
		width: 486px;
	}

	#game.container.fullscreen #actionTokens div,
	#game.container.fullscreen #turnClock div{
		width: 168px;
		margin: 6px;
		padding: 3px .3em 3.6px 24px;
	}

	#game.container.fullscreen #actionTokens div{
		width: 144px;
		padding-left: 49.2px;
		font-size: 24px;
		line-height: 38.4px;
	}
	#game.container.fullscreen #actionTokens div:before{
		position: absolute;
		background-size: 49.2px auto;
	}
	#game.container.fullscreen #actionTokens div.action:after{
		padding: 2.4px 7.92px 0 49.2px;
		font-size: 1.6em;
	}

	#game.container.fullscreen #turnClock div:before{
		line-height: 57.6px;
		font-size: 21.6px;
	}

	#game.container.fullscreen #actionButtons{
		top: 144px;
		bottom: 20%;
	}
	#game.container.fullscreen #characters div{
		width: 40%;
	}
	#game.container.fullscreen #characters div{
		background-size: auto 85%;
	}
}


/**
 * Yearbook
 */
@media (max-width: 1152px) {
	#book.open{
		position: absolute;
		right: 0;
	}
}

/**
 * Responsive
 */
@media (max-width: 1200px) {
	#game.container {
		margin: 0 auto;
		width: 100%;
		min-width: 326px;
		min-height: 700px;
	}

	#optionsList{
		left: 0;
		right: 0;
	}
	#optionsList .wrapper{
		width: 678px;
	}
		#optionsList.left .wrapper,
		#optionsList.right .wrapper{
			width: 100%;
		}
	#actionButtons ul{
		display: block;
	}
	#actionButtons ul li{
		display: inline-block;
	}
	#game #characters div{
		width: 400px;
		min-width: 0;
	}
	#dialogue li:nth-child(2),
	#dialogue li:nth-child(4){
		right: 50.5%;
	}
	#dialogue li:nth-child(3){
		left: 50.5%;
	}
}

@media (max-width: 800px) {
	.container.choice #background,
	.container.choice #characters{
		-webkit-filter: grayscale(70%) brightness(115%);
		   -moz-filter: grayscale(70%) brightness(115%);
			-ms-filter: grayscale(70%) brightness(115%);
			 -o-filter: grayscale(70%) brightness(115%);
				filter: grayscale(70%) brightness(115%);
	}
	#background.game{
	-webkit-transition: transform 1000ms ease-in-out, opacity 1000ms linear, filter 200ms linear;
	   -moz-transition: transform 1000ms ease-in-out, opacity 1000ms linear, filter 200ms linear;
		-ms-transition: transform 1000ms ease-in-out, opacity 1000ms linear, filter 200ms linear;
		 -o-transition: transform 1000ms ease-in-out, opacity 1000ms linear, filter 200ms linear;
			transition: transform 1000ms ease-in-out, opacity 1000ms linear, filter 200ms linear;
	}
	#game > div.bottom_wrapper{
		position: relative;
		min-height: 138px;
	}
	#turnClock{
		font-size: 12px;
		width: 276px;
	}
	#turnClock div{
		padding: 3px .3em 3px 15px;
		width: 120px;
	}
	#turnClock div:before{
		font-size: 14px;
		line-height: 42px;
	}
	#actionTokens{
		position: static;
		padding: 5px 0;
	}
	#turnClock,
	#actionTokens{
		height: 64px;
	}

	#optionsList,
	#actionButtons{
		position: absolute;
		overflow: hidden;
		max-height: 0;
		max-width: 0;
		min-height: 660px;
	}
		#actionButtons,
		#optionsList.visible,
		#actionButtons.visible{
			position: relative;
			top: auto;
			left: auto;
			right: auto;
			max-height: none;
			max-width: none;
		}
	#optionsList .wrapper,
	#actionButtons .wrapper{
		position: static;
		-webkit-transform: none;
		   -moz-transform: none;
			-ms-transform: none;
			 -o-transform: none;
				transform: none;
	}
	#optionsList .wrapper{
		width: 100%;
	}
	#actionButtons ul li{
		display: block;
	}
	#bottomBar{
		position: static;
		height: 180px;
	}
	#game.container {
		height: auto;
		max-height: none;
		min-height: 0;
	}

	#loading{
		position: fixed;
	}

	#dialogue{
		height: 180px;
	}
	#dialogue li{
		font-size: 1.2em;
	}
	#acquisition{
		position: fixed;
	}
	#acquisition > div{
		box-sizing: border-box;
		padding: 14px 2px;
		font-size: 20px;
	}
	#game #characters div{
		width: 50%;
	}
	#game #characters div:first-child,
	#game #characters div:last-child{
		bottom: 178px;
	}
	
	#game > div#hoverBars{
		position: absolute;
		left: -9999px;
		top: -9999px;
	}
	#game > div#hoverBars.visible{
		position: relative;
		left: auto;
		top: auto;
	}

	.container.choice #actionButtons,
	.container #optionsList{
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}
	.container.choice #optionsList{
		position: relative;
		opacity: 1;
		pointer-events: auto;
	}
		.container.choice.grey #background,
		.container.choice.grey #characters{
			-webkit-filter: grayscale(70%) brightness(115%);
			   -moz-filter: grayscale(70%) brightness(115%);
				-ms-filter: grayscale(70%) brightness(115%);
				 -o-filter: grayscale(70%) brightness(115%);
					filter: grayscale(70%) brightness(115%);
		}
}

@media (max-width: 480px) {
	#dialogue li{
		visibility: hidden;
		pointer-events: none;
	}
		#dialogue li.selected{
			visibility: visible;
			pointer-events: auto;
		}
	#game #characters div{
		visibility: hidden;
		max-width: 324px;
	}
		#game #characters div.selected{
			visibility: visible;
		}

	#gameMenu ul li:hover{
		color: rgba(165,165,165,0);
	}
	#gameMenu ul li:hover:before{
		color: #fff;
		opacity: 1;
		-webkit-filter: brightness(100%);
		   -moz-filter: brightness(100%);
			-ms-filter: brightness(100%);
			 -o-filter: brightness(100%);
				filter: brightness(100%);
	}
	#actionTokens,
	#turnClock{
		height: auto;
		width: auto;
		margin: 10px;
	}

	#optionsList,
	#actionButtons{
		min-height: 549px;
	}

	#actionButtons{
		margin: 10px;
	}
	
	#actionButtons ul{
		text-align: center;
	}
	
	#actionButtons ul li{
		display: inline-block;
	}

	#optionsList{
		margin: 10px;
	}
	#acquisition.luck > div > div:before,
	#acquisition.fortune > div > div:before{
		display: none;
	}
	#dialogue li:nth-child(2),
	#dialogue li:nth-child(3),
	#dialogue li:nth-child(4){
		right: 1%;
		left: 1%;
	}
	#game #characters div{
		width: 100%;
	}
}

@media (max-height: 900px){
	#acquisition{
		position: fixed;
	}
}

@media (max-height: 570px) and (max-width: 1215px) {
	#game.container {
		margin: 0 auto;
		width: 100%;
		min-width: 326px;
	}
}