body {
	background-color: #333;
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
a:link {
	color: #777;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #777;
}
a:hover {
	text-decoration: none;
	color: #777;
}
a:active {
	text-decoration: none;
	color: #777;
	-webkit-tap-highlight-color:rgba(200,0,0,0.4);
}


#title-bar {
	position: absolute;	width: 320px; left: 0px; height: 45px;	top: 0px; z-index: 0;
	background-image:-webkit-gradient(linear, right bottom, right top, from(rgba(255,255,255,0)), color-stop(0.50, rgba(255,255,255,0)), color-stop(0.52, rgba(255,255,255,0.2)), to(rgba(255,255,255,0.35)));
	background-color:#000;
	text-align:center; color:rgba(255, 255, 220, 0.9); font-family:"Arial Rounded MT Bold"; font-size: 20px; line-height: 45px;
}
#title-bar #btn-twitter {
	position:absolute; top:11px; right:10px; width:25px; height:25px; cursor:pointer;
	background-repeat:no-repeat; background-image:url(img/twitter.png);
	font-size:20px; line-height:25px;
}
#title-bar #btn-home {
	position:absolute; top:11px;left:10px; width:34px; height:25px; cursor:pointer;
	background-repeat:no-repeat; background-image:url(img/home.png);
	font-size:20px; line-height:25px;
}


.ads {
	position:absolute; width: 320px; height: 50px; top: 366px; left:0px; z-index:10;
}



.page {
	position:absolute; width:320px; height:370px; top:45px; left:0px;
	background-image:-webkit-gradient(linear, right bottom, right top, from(#ccc), to(#fff));
}

/* page 1*/
#page1 .menu-title {
	margin-top:10px; margin-left:15px;
	font-size:16px; line-height:35px;
}
#page1 .menu-box {
	margin-left:10px; margin-right:10px;
	font-size:14px; line-height:30px; text-indent:10px;
	border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;
	background-color:#FFF;
}
#page1 .menu-box-top {
	border-top: 1px solid #ccc;
	-webkit-border-top-left-radius:8px; -webkit-border-top-right-radius:8px;
}
#page1 .menu-box-bottom {
	-webkit-border-bottom-left-radius:8px; -webkit-border-bottom-right-radius:8px;
}
#page1 .footer {
	margin-top:5px;
	font-size:12px; line-height:20px; text-align:center; color:#666;
}


/* page 2 */
#page2 {
	padding:10px; width: 300px;	height:355px;
}
#page2 .title {
	font-size:13px; line-height:20px; font-weight: bold; color:#36c;
}
#page2 td {
	font-size:12px; line-height:16px; 
}
#page2 li {
	font-size:12px; line-height:16px;	
}
#page2 img {
	margin-right:20px;	border:1px solid #ccc; 
}


/* page 4 */
#page4 .hanzi {
	position: absolute; height:300px; width: 320px; left: 0px; top: 0px; z-index:0;
	color:#333; font-family:Arial, Helvetica, sans-serif; font-size:14px; text-align:center; line-height:300px;
	background-position:center center; background-repeat:no-repeat;
	overflow: hidden;
}
#page4 .trace {
	position:absolute; left:0px; top:0px; width:320px; height:300px; z-index:1;
}
#page4 .canvas {
	position:absolute; left:0px; top:0px; width:320px; height:300px; 
}
#page4 .guide {
	position: absolute; height:300px; width: 320px; left: 0px; top: 0px; z-index:2;
	overflow: hidden;
}
#page4 .pinyin {
	position: absolute; height:20px; width:320px; left:0px; top: 300px; z-index:0;
	line-height:20px; font-size:13px; text-align:center; 
	overflow: hidden; 
}
#page4 .snd {
	position: absolute; height:20px; width:20px; right:100px; top: 0px; z-index:0; visibility:hidden;
	-webkit-border-radius:10px; 
}
#page4 .en {
	position: absolute; height:20px; width: 320px; left: 0px; top: 320px; z-index:0;
	line-height:20px; font-size:13px;  text-align:center;
	overflow: hidden; 
}
#page4 .dot {
	position:absolute; width:30px; height:30px; 
	-webkit-border-radius: 15px;
	text-align:center; line-height:30px; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#000; background-color:rgba(255,0,0,0.5);
}
#page4 .btn-back {
	text-align:center; 
	position: absolute; height:20px; width: 320px; left: 0px; top: 340px; z-index:0;
}
#page4 .footer {
	position: absolute; height:20px; width: 320px; left: 0px; top: 390px; z-index:0;
	font-size:11px; line-height:20px; text-align:center; color:#666;
}

/* popup box */
#popup-box {
	position:absolute; width: 240px; top: 150px; left: 30px; height:100px; z-index:4;
	background-color:rgba(10,10,10,0.9); color:rgba(255, 255, 255, 0.85); font-family:Arial; line-height:30px; padding:10px; font-size:15px;
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.85);
}
#popup-box .btn-ok {
	position:absolute; width: 80px; height:30px; bottom:10px; left:90px;
	background-image:-webkit-gradient(linear, right bottom, right top, color-stop(0, #000), color-stop(0.53, #333));
	color:rgba(255, 255, 255, 0.7); font-size:14px; line-height:30px; text-align: center; 
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.85);
}