@font-face {
	font-family: Allatuq;
	src: url('../assets/fonts/allatuq/allatuq.eot');
	src: url('../assets/fonts/allatuq/allatuq.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/allatuq/allatuq.woff') format('woff'), url('../assets/fonts/allatuq/allatuq.ttf') format('truetype'), url('../assets/fonts/allatuq/allatuq.svg#AllatuqRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

* {
	font-weight: normal !important;
	cursor: default;
}

body {
/*	font-family: Allatuq, AiPaiNutaaq, Pigiarnig, AiPaiNunavik, AiNunavik, AiPaiNuNa;*/
	font-family: Allatuq;
	margin: 0;
	padding: 0;
	border: 0;
	background: #213a3a;
	overflow: hidden;
	color: #fff;
	text-shadow: 0 1px 1px #222;
/*			letter-spacing: -0.176em;*/
/*			word-spacing: 0.1em;*/
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-webkit-user-select: none;
	-moz-user-select: none;
}

p, ul, ol, li, dl, dt, dd,
h1, h2, h3, h4, h5, h6 { margin: 0 }

h1 {
	font-size: 4.2em;
}
h2 {
	font-size: 1.8em;
	letter-spacing: -0.135em;
	word-spacing: 0.2em;
}
h2.dialog-text {
	width: 100%;
	text-align: center;
}
h2.section-title {
	font-size: 2.1em;
	letter-spacing: -0.135em;
	word-spacing: 0.2em;
	width: 87%;
	text-align: center;
	left: 13%;
	bottom: 0;
}
	h2.section-title span {
		display: inline-block;
		padding: 0.3em 0.4em;
		background: rgba(0,0,0,0.2);
		
		-webkit-border-top-left-radius: 0.2em;
		-webkit-border-top-right-radius: 0.2em;
		-moz-border-radius-topleft: 0.2em;
		-moz-border-radius-topright: 0.2em;
		border-top-left-radius: 0.2em;
		border-top-right-radius: 0.2em;
	}
	.lt-ie9 h2.section-title span {
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#25000000', endColorstr='#25000000');
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#25000000', EndColorStr='#25000000')";;
	}

h1.animal-name {
	font-size: 4.5em;
	left: 10.4%;
	letter-spacing: -0.15em;
	text-align: center;
	top: 9%;
	width: 89.6%;
}
	h1.animal-name span {
		display: inline-block;
		padding: 0.3em 0.4em 0.29em;
		
		-webkit-border-radius: 0.2em;
		-moz-border-radius: 0.2em;
		border-radius: 0.2em;
	}
	
	.section-water h1.animal-name span {
		background: rgba(05,192,243,0.3);
	}
	.lt-ie9 .section-water h1.animal-name span {
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c05c0f3', endColorstr='#4c05c0f3');
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c05c0f3', EndColorStr='#4c05c0f3')";;
	}
	
	.section-land h1.animal-name span {
		background: rgba(253,130,5,0.3);
	}
	.lt-ie9 .section-land h1.animal-name span {
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#acfd8205', endColorstr='#4cfd8205');
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4cfd8205', EndColorStr='#4cfd8205')";;
	}
	
	.section-birds h1.animal-name span {
		background: rgba(62,228,177,0.4);
	}
	.lt-ie9 .section-birds h1.animal-name span {
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#663ee4b1', endColorstr='#663ee4b1');
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#663ee4b1', EndColorStr='#663ee4b1')";;
	}

a, a img {
	text-decoration: none;
	border: 0;
}

.pre-home #stage { background-image: url('../assets/images/backgrounds/medium/home.jpg') }
#stage {
	position: absolute;
	top: 50%;
	left: 50%;
	
	width: 880px;
	height: 550px;
	margin-top: -285px;
	margin-left: -440px;
	
	font-size: 1em;
	
	border: 10px solid #182a2a;
}

@media screen and (max-width: 919px), screen and (max-height: 589px) {
	.pre-home #stage { background-image: url('../assets/images/backgrounds/small/home.jpg') }
	#stage {
		width:  616px;
		height: 385px;
		margin-left: -318px;
		margin-top:  -202px;
		font-size: 0.7em;
	}
	ul.progress-stars li {
		width: 22px;
		height: 22px;
		margin: 0 2px 2px 0;
	}
	ul.progress-stars li span {
		background-image: url('../assets/images/ui/small/progress-star.png');
		background-position: 2px 2px;
	}
}
@media screen and (min-width: 920px) and (min-height: 590px) and (max-width: 1095px),
		screen and (min-width: 920px) and (min-height: 590px) and (max-height: 699px) {
	.pre-home #stage { background-image: url('../assets/images/backgrounds/medium/home.jpg') }
	#stage {
		width:  880px;
		height: 550px;
		margin-left: -450px;
		margin-top:  -285px;
		font-size: 1em;
	}
	ul.progress-stars li {
		width: 31px;
		height: 31px;
		margin: 0 4px 3px 0;
	}
	ul.progress-stars li span {
		background-image: url('../assets/images/ui/medium/progress-star.png');
		background-position: 3px 2px;
	}
}
@media screen and (min-width: 1096px) and (min-height: 700px) {
	.pre-home #stage { background-image: url('../assets/images/backgrounds/big/home.jpg') }
	#stage {
		width: 1056px;
		height: 660px;
		margin-left: -538px;
		margin-top:  -340px;
		font-size: 1.2em;
	}
	ul.progress-stars li {
		width: 38px;
		height: 38px;
		margin: 0 4px 4px 0;
	}
	ul.progress-stars li span {
		background-image: url('../assets/images/ui/big/progress-star.png');
		background-position: 4px 4px;
	}
}

.small ul.progress-stars li {
	width: 22px;
	height: 22px;
	margin: 0 2px 2px 0;
}
.small ul.progress-stars li span {
	background-image: url('../assets/images/ui/small/progress-star.png');
	background-position: 2px 2px;
}

.medium ul.progress-stars li {
	width: 31px;
	height: 31px;
	margin: 0 4px 3px 0;
}
.medium ul.progress-stars li span {
	background-image: url('../assets/images/ui/medium/progress-star.png');
	background-position: 3px 2px;
}

.big ul.progress-stars li {
	width: 38px;
	height: 38px;
	margin: 0 4px 4px 0;
}
.big ul.progress-stars li span {
	background-image: url('../assets/images/ui/big/progress-star.png');
	background-position: 4px 4px;
}

/* Progress Panel {{{
******************************************************************************/

.progress-panel {
	top: 21%;
	left: 1.8%;
	width: 9.2%;
	height: 57%;
}
	.level-number {
		top: 22.4%;
		left: 2.5%;
		width: 8.1%;
		font-size: 2.2em !important;
		padding: 0.15em 0 0.25em;
		text-align: center;
		letter-spacing: -0.05em;
		text-indent: -0.1em;
	}
		ul.progress-stars {
			top: 32.2%;
			left: 2.5%;
			width: 10.1%;
			padding: 0;
			margin: 0;
		}
			ul.progress-stars li {
				display: block;
				position: relative;
				float: left;
				background-clip: padding-box;
				-webkit-background-clip: padding-box;
				-webkit-border-radius: 0.4em;
				-moz-border-radius: 0.4em;
				border-radius: 0.4em;
				border: 1px solid #bbab9d;
				background: #5c4f44;
			}
			ul.progress-stars li.done {
				border: 1px solid #5d554e;
				background-color: #2e2722;
			}
				ul.progress-stars li span {
					display: none;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-repeat: no-repeat;
				}
				
	.time-left {
		top: 65.5%;
		left: 2.5%;
		width: 8.1%;
		font-size: 1.8em !important;
		padding: 0.15em 0 0.25em;
		text-align: center;
		letter-spacing: -0.05em;
		text-indent: -0.1em;
	}
	.time-gauge {
		top: 73.7%;
		left: 2.95%;
		width: 7.15%;
		height: 2%;
		background: red;
	}
		.time-gauge span {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #66cc66 url(../assets/images/ui/chronometer-stripes.png) repeat;
		}
		.time-gauge {
			-webkit-box-shadow: -2px -2px 4px rgba(0,0,0,0.6) inset;
			-moz-box-shadow: -2px -2px 4px rgba(0,0,0,0.6) inset;
			box-shadow: -2px -2px 4px rgba(0,0,0,0.6) inset;
		}
		.time-gauge, .time-gauge span {
			-webkit-box-shadow: 0 -2px 4px rgba(0,0,0,0.5) inset;
			-moz-box-shadow: 0 -2px 4px rgba(0,0,0,0.5) inset;
			box-shadow: 0 -2px 4px rgba(0,0,0,0.5) inset;
			-webkit-border-radius: 0.2em;
			-moz-border-radius: 0.2em;
			border-radius: 0.2em;
		}

p.level-number {
	font-size: 3em;
}

/* }}} */

.stage-element {
	position: absolute;
	z-index: 400;
	background-repeat: no-repeat !important;
}

#stage .actor {
	display: block;
	-webkit-user-select: none;
	-moz-user-select: none;
	z-index: 200;
}
#stage .interactive {
	z-index: 400;
}
#stage .interactive:active, a:active {
	opacity: 0.8;
}
	#stage .interactive,
	#stage .interactive > * {
		cursor: pointer;
	}

#stage .dialog {
	z-index: 600;
}
#stage .dialog-stars {
	z-index: 650;
}
#stage .dialog-button {
	z-index: 700;
}
#stage .dialog-text {
	z-index: 900;
}


/* Questions {{{
******************************************************************************/

/* type 1-2 */
.big-circle .actor {
	top: -9%;
	left: -7%;
}
/* type 3-4 */
.question-type-3-answer-text {
	margin-left: -72%;
	margin-top: 22%;
	text-align: center;
	width: 250%;
	font-size: 4.4em;
}
.question-type-3-answer-text.small-text {
/*	margin-top: 0.05em;*/
	font-size: 3.4em;
}
.question-type-3-answer-text.smaller-text {
	margin-top: 0.02em;
	font-size: 3.4em;
}
.question-type-3-answer-text.smallest-text {
	margin-top: 0.05em;
	font-size: 3.4em;
}

/* type 5 */
span.missing-syllabic {
	position: relative;
}
span.missing-syllabic:after {
	content: '?';
	opacity: 0.3;
	position: absolute;
	bottom: 0.3em;
	left: 0.2em;
}
.lt-ie9 .section-water span.missing-syllabic:after { color: #7b8fa5 }
.lt-ie9 .section-land  span.missing-syllabic:after { color: #988d84 }
.lt-ie9 .section-birds span.missing-syllabic:after { color: #a5a8b4 }

.question-type-5-animal-name {
	width: 47%;
	text-align: center;
}

/* }}} */

.home-screen-dialog {
	left: 16.7%;
	top: 19%;
}
	.close-dialog-button {
		right: -2.7%;
		top: -5.1%;
	}

.veil {
	background: rgba(0,0,0,0.25);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.lt-ie9 .veil {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#40000000', endColorstr='#40000000');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#40000000', EndColorStr='#40000000')";;
}

.right-answer-dialog, .wrong-answer-dialog {
	top: 25%;
	left: 32.3%;
}
	.right-answer-dialog-button, .wrong-answer-dialog-button {
		left: 41.5%;
		bottom: -11.5%;
	}
	
.end-level-dialog, .end-section-dialog {
	top: 35%;
	left: 32.3%;
}
	.end-level-dialog-stars, .end-section-dialog-stars {
		top: -53%;
		left: 24.8%;
	}
	.end-level-dialog-text, .end-section-dialog-text {
		top: 39%;
		left: 0%;
	}
	.end-level-dialog-button, .end-section-dialog-button {
		left: 41.5%;
		bottom: -18.5%;
	}