@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
.animated {
  animation-duration: 2s;
  animation-fill-mode: both;
}
@keyframes flash{from,50%,to{opacity:1}25%,75%{opacity:0}}
.flash{animation-name:flash}
@keyframes fadeIn {from {opacity: 0} to {opacity: 1}}
.fadeIn {animation-name: fadeIn}
#navContent, #game1, #game2, .splash, .intermediaire, .gameplay, .failure,.final, .block-free-game {height:414px; width: 690px}
#navContent{
	font-family: Arial Unicode MS, Tahoma, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif;
	margin:50px auto;
	position:relative;
	overflow:hidden;
	line-height: 25px;
}
#game1{
margin:auto;
right:0px;
position:absolute;
}
#game2{ 
margin:auto;
right:-800px;
position:absolute;
}
/*SPLASH ==========*/
.splash{
font-size:16px;
background:url('splash.jpg'); 
color: #600;
position:absolute;
}
.splash p{
	width:280px;
	margin:218px 0 0 225px;
}
.splash-btn {
	cursor:pointer;
	width:92px;
	height:38px;
	display:block;
	position: absolute;
	bottom:10px;
}
.splash-btn:hover {
	-webkit-box-shadow: inset 0px -30px 25px -25px rgba(55,235,255,0.7);
	-moz-box-shadow: inset 0px -30px 25px -25px rgba(55,235,255,0.7);
	box-shadow: inset 0px -30px 25px -25px rgba(55,235,255,0.7);	
	border-radius: 8px 8px 8px 8px;
	-moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	border: 0px solid #000000;
}
#howtoplay {left: 173px}
#didyouknow{left: 540px}
#cheatsheet-btn{left: 435px; bottom: 8px}
#start {width:137px; height:59px; left: 286px}
.splash-panel{
	display:none;
	background-color: #FFF;
	border: 5px solid #ccc;
	padding:12px;
	-webkit-box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
	position: absolute;
	left: 180px;
	bottom: 90px;
	width:420px;  
	height:260px;
}
.splash-panel em{
	background-color: #ffeeee;
	padding: 1px 5px;
	font-style: normal;
	font-size: 12px;
	border: 1px solid #aa9999;
	color: #393939;
}
/*GAMEPLAY ==========*/
.gameplay{background:url('gameplay.jpg');font-size:22px; color:#cc3399}
#gameplay-cheat{width:68px;height:46px; bottom: 19px; left: 404px}
#gameplay-more{bottom: 15px; left: 140px; width:68px; height:40px;}
#gameplay-learn{width:68px;height:32px; bottom: 12px; left: 276px}
#levels-mao{position: absolute;top: 16px;left: 241px; font-family: "Fredoka One", cursive}
.hint, .hint-reveal{width:120px;position: absolute;	top: 150px;right: 0; font-family: "Fredoka One", cursive}
.hint{font-size: 19px; font-family: Arial Unicode MS, Tahoma, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif;
display:none}
.hint-reveal{cursor:pointer;display: block}
.pinyin-revealed{
	font-size:16px;
	color:#36C;
	display:none;
}
.pinyin-reveal{
	font-size:16px;
	color:#36C;
	cursor:pointer;
}
.questionText{
	font-size: 26px;
	width: 108px;
	/*For Mao2, width: 178px;*/
	background-color:#FFF; 
	padding:9px 0 5px 0;
	color:#333;
	border-radius: .4em;
	position: absolute;
	left: 160px;
	/*For Mao2, left: 130px;*/
	top: 248px;
}
.questionText:after {
	content: '';
	position: absolute;
	right: 0;
	top: 40%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-left-color: #ffffff;
	border-right: 0;
	border-top: 0;
	margin-top: -10px;
	margin-right: -20px;
}

.pix img:hover{
	cursor:pointer;
	-webkit-box-shadow: inset 0px -20px 25px -25px rgba(252,217,111,1);
	-moz-box-shadow: inset 0px -20px 25px -25px rgba(252,217,111,1);
	box-shadow: inset 0px -20px 25px -25px rgba(252,217,111,1);

	border-radius: 200px 200px 200px 200px;
	-moz-border-radius: 200px 200px 200px 200px;
	-webkit-border-radius: 200px 200px 200px 200px;
	border: 0px solid #000000;
}
.pix img:nth-child(1){position: absolute; top: 122px; left: 35px}
.pix img:nth-child(2){position: absolute; top: 224px; left: 22px}
.pix img:nth-child(3){position: absolute; top: 316px; left: 62px}
.pix img:nth-child(4){position: absolute; top: 80px; right: 167px}
.pix img:nth-child(5){position: absolute; top: 180px; right: 135px}
.pix img:nth-child(6){position: absolute; top: 278px; right: 148px}
#face-speaking, #face-purring, #face-mean{position: absolute;top: 177px; left: 288px}
#face-purring, #face-mean{display: none}
.good-feedback, .bad-feedback {
	position:absolute;
	display: none;
}
.good-feedback{	
	background: url('img/purr.gif');
	top: 80px;
	left:170px;
	width: 142px;
	height: 128px;
}
.bad-feedback{
	background: url('img/scratch.gif');
	top: 100px;
	left:140px;
	width: 215px;
	height: 193px;
}

/*GAMEPLAY: Progression-related: TIMER*/
.progression{
 	height:24px;
	display:block;
	background-color:#3262a0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	position: absolute;
	color:#fff;
	font-size: 14px;
 }
 .timer-container, .score, .hearts{right: 0}
 .timer-container{top: 0; width: 176px}
 .score{top: 34px; width: 156px; font-family: "Fredoka One", cursive}
 .hearts {top: 68px; width: 125px}

 .timer{
	width:1px;
	height:18px;
	margin: 3px;
	display:block;
	background: #b7deed;
	background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%);
	background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
	background: linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 );
	-moz-border-radius: 10px 0 0 10px;
	-webkit-border-radius: 10px 0 0 10px;
	border-radius: 10px 0 0 10px;
}
.hide{
	width:20px;
	height:20px;
	display:block;
	background-color:#3262a0;
	position:absolute;
	opacity: 0.8;
	top:70px;
	right: 35px;
}

/*FAILURE ==========*/
.failure{
font-size:18px;
background:url('failure.jpg') no-repeat; 
font-family: "Fredoka One", cursive;
color:#6b3100;
padding-top: 50px;
}
.failure p{
	width: 225px;
	padding: 129px 0 0 309px;
}
#failure-replay{width:140px; height:55px; right: 83px; bottom: 22px}
#failure-cheat {right: 235px; bottom: 15px}

/*LEVELS ==========*/
.intermediaire{
font-size:22px;
background:url('intermediate.jpg');
color:#6b3100;
font-family: "Fredoka One", cursive;
}

.intermediaire p{
	width: 286px;
  position: absolute;
  top: 152px;
  right: 0;
  background-color: #FFF;
  border: 5px solid #6C0;
  padding: 10px;
  height: 150px;
}
#next-level{right:33px; bottom: 6px}