@charset "utf-8";
.animated {
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: 2;
}
@keyframes flash{from,50%,to{opacity:1}25%,75%{opacity:0}}
.flash{-webkit-animation-name:flash;animation-name:flash}
#gameContent, #splash, .level, #worldmap, #feedback, .final, .block-free-game {height:414px; width: 690px}
#gameContent{
	color:#666;	
	font-family: 'Alegreya', serif;
	font-size:16px;
	margin:30px auto 0 auto;
	overflow:hidden;
	position: relative;
}
#splash{
 background: url('img/ATW-splash.jpg') no-repeat 0 0;
 }
#splash > p{
	width:300px;
	position:absolute;
	top:160px;
	left:60px;
	font-size:20px;	
}
.ATW-button {
	 width:120px;
	 height:30px;
	 display:block;
	 cursor:pointer;
	 color:#666;
	 font-variant:small-caps;
	 position: absolute;
	 bottom: 56px;
 }
.ATW-button:hover {
	color:#630;
	background: rgba(237,225,98,1);
	background: radial-gradient(ellipse at center, rgba(237,225,98,1) 0%, rgba(254,182,69,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ede162', endColorstr='#feb645', GradientType=1 );
}
#howtoplay{left: 21px}
#startButton{
	left: 284px;
	font-size: 32px;
	line-height: 20px;
}
#lessonButton{left: 143px}
#cheatsheetButton{right: 143px}
#didyouknow{right: 18px}
#howtoplay-panel, #didyouknow-panel{
	display:none;
	background-color: #FFF;
	border:2px dotted #666;
	font-size:15px;
	padding:10px;
	position:absolute;
	top:20px;
	width: 550px;
	height: 242px;
	right: 60px;
}
#howtoplay-panel h3, #didyouknow-panel h3{
	color:#999;
	font-variant:small-caps;
	letter-spacing:4px;
	margin: 10px auto 0;
}
#worldmap{
	background: url('img/worldmap.jpg') no-repeat 0 0;
}
.cache{
	display:block;
	background-color:#CCC;	
	position:absolute;
}
#africa{
	top: 91px;
	left: 25px;
	width:95px;
	height:79px;
}
#europe{
	top: 79px;
	left: 138px;
	width:56px;
	height:79px;
}
#asia{
	top: 88px;
	left: 207px;
	width:58px;
	height:85px;
}
#america{
	top: 19px;
	right: 22px;
	width:80px;
	height:111px;
}
#pixHolder{
 position:absolute;
 top: 114px;
 right: 192px;
 width:116px;
 overflow:hidden;
} 
#pixHolder img{position:relative}
#showPinyin, #pinyin-revealed{
	position:absolute;
 	left: 0;
	top: 247px;
	color:#36C;
	cursor:pointer;
	width: 300px;
}
#pinyin-revealed{
	font-family: Arial Unicode MS, Tahoma, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif;
	display:none;
}
#guesses{
	position:absolute;
	left: 0;
	top: 293px;
	color:#690;
	width: 300px;
	text-shadow: 1px 1px 5px rgb(255, 255, 255);
}
#clockOuter{
	width:60px;
	height:60px;
	position:absolute;
	top: 16px;
	left: 410px;
	overflow:hidden;
}
#clockInner{
	position: absolute;
	top: 0;
	left: 0;
}
#numericalDisplay{
	font-size:23px;
	line-height: 56px;
}
#score{
	position:absolute;
	top:294px;
	left: 430px;
}
#clueHolder{
 position:absolute;
 left: 0;
 top: 224px;
 color:#69F;
 width: 300px;
 font-size:22px;
 font-family: Arial Unicode MS, Tahoma, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif;
 text-shadow: 1px 1px 5px rgb(255, 255, 255);
}
#wordHolder{
	position:absolute;
	left: 40px;
	top: 350px;
}
#replay{
	color:#F09;
	font-size: 30px;
}
#replay:hover{
	color:#F09;
	font-size: 28px;
	cursor: pointer;
}
.tile{
 height:40px;
 width:40px;
 float:left;
 margin-right:10px;
 background-color:white;
 border:1px dotted #CCC;
 text-align:center;
 font-size:24px;
 color:#333;
 padding-top:5px;
}
#level1{
 background: url('img/level1.jpg') no-repeat 50% 50%;
}
#level2{
 background: url('img/level2.jpg') no-repeat 50% 50%;
}
#level3{
 background: url('img/level3.jpg') no-repeat 50% 50%;
}
#next-level{color:#F09;	font-size: 25px; position: absolute; bottom: 50px; right: 30px; cursor: pointer}
.level{ 
 font-size:50px;
 font-variant:small-caps;
 color:#FC0;
 line-height: 45px;
 }
.level span{
font-size:32px;
color:#DEBE41;
font-variant:normal;
}
.block-free-game {
 padding: 45px 80px;
 background-color: #fff;
 border: 6px solid #c93;
 box-sizing: border-box;
 box-shadow: inset 10px 10px 27px 0px rgba(0, 0, 0, 0.75)
 }
@media screen and (max-width: 690px) and (orientation : portrait){
#gameContent{display: none}
}