@charset "UTF-8"; 


/* !---------- Common ---------- */
* {margin:0; padding:0;}
BODY{position: relative; width:100%; height:100%; background: #B4B4B4; background: #E0E0E0; font-family: Arial,Helvetica,sans-serif; font-size:16px; color: #333; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-select:none;}
IMG {display: block; width: 100%; max-width: 100%;}
TABLE {border-spacing: 0;}
.icon {display: block; margin: 0 auto; width: 25px; height: 25px; background: url(../images/icon.png) no-repeat;}


#header {
	clear: both; 
	position: fixed; 
	padding: 5px 0; 
	width: 100%; 
	z-index: 100;
	background: #fdfdfd; /* Old browsers */
	background: -moz-linear-gradient(top,  #fdfdfd 0%, #e4e4e4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#e4e4e4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fdfdfd 0%,#e4e4e4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fdfdfd 0%,#e4e4e4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fdfdfd 0%,#e4e4e4 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fdfdfd 0%,#e4e4e4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#e4e4e4',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.3); box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}

#nav {display: table; width: 100%;}
#nav > DIV {display: table-cell; /*height: 30px; */ height: auto; vertical-align: middle;}
#nav > DIV .ui-btn {/*display: block; position: absolute; top: 7px;*/ display: inline-block; width: 25px; height: 25px; /*border: 1px red solid;*/}
#nav DIV+DIV {border-left: 1px white solid;}
#nav DIV.control {width: 25px;}
#nav DIV {padding: 4px 8px 0; border-right: 1px #CCC solid;}
#nav DIV:last-child {border-right: none;}
#nav DIV.pageNum {color: #8ad800; text-shadow: 0 1px 0 white; text-align: center;}
#nav DIV.pageNum > .pageText {margin-right: 5px;}

#nav DIV .ui-btn.replay {display: none;}
#nav DIV .ui-btn.autoplay {
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3); box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	-webkit-border-radius: 5px; border-radius: 5px;
	background: #efefef; /* Old browsers */
	background: -moz-linear-gradient(top,  #efefef 0%, #d8d7d7 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#d8d7d7)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #efefef 0%,#d8d7d7 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #efefef 0%,#d8d7d7 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #efefef 0%,#d8d7d7 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #efefef 0%,#d8d7d7 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#d8d7d7',GradientType=0 ); /* IE6-9 */
}
#nav DIV .ui-btn.back .icon {background-position: -100px 0;}
#nav DIV .ui-btn.prev .icon {background-position: -50px 0;}
#nav DIV .ui-btn.next .icon {background-position: -75px 0;}
#nav DIV .ui-btn.replay .icon {background-position: -175px 0;}
#nav DIV .ui-btn.autoplay.off .icon {background-position: -125px 0; opacity: 0.3; cursor: default;}
#nav DIV .ui-btn.autoplay.on .icon {background-position: -150px 0;}






.mainContentContainer {position: relative; width:100%; overflow: hidden;}

.content .screenShot {}
.content .guideTextContent {
	position: relative; 
	top: -10px; 
	padding: 15px 15px 5px; 
	background: white; /*border-top: 2px white solid;*/ 
	text-shadow: 0 01px 0 white;
	-webkit-box-shadow: 0 -2px 1px rgba(0,0,0,0.2); box-shadow: 0 -2px 1px rgba(0,0,0,0.2);
	-webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #e0e0e0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#e0e0e0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#e0e0e0 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#e0e0e0 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
}
.content .guideTextContent::before {
	display: block; content: "";
	position: absolute;
	width: 30px; height: 20px;
	background: url(../images/icon.png) -210px 3px no-repeat;
	right: 7%; top: -20px;
}

.content H2 {display: none; font-size: 18px; color: #005991;}
.content P {color: white; color: green;}
.content H2+P, .content P+P {/*margin-top: 10px;*/} 

.cover {
background: #95dc1f; /* Old browsers */
background: -moz-linear-gradient(top,  #95dc1f 0%, #79ba12 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#95dc1f), color-stop(100%,#79ba12)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #95dc1f 0%,#79ba12 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #95dc1f 0%,#79ba12 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #95dc1f 0%,#79ba12 100%); /* IE10+ */
background: linear-gradient(to bottom,  #95dc1f 0%,#79ba12 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95dc1f', endColorstr='#79ba12',GradientType=0 ); /* IE6-9 */
}
.cover H2 {color: white; padding: 30px 10px; font-size: 20px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,0.2);}
.cover .screenShot {margin: 0 auto; width: 300px; height: 272px; background-position: center top; background-size: 100% auto; background-repeat: no-repeat;}



#index_pg #header {background: transparent; -webkit-box-shadow: none; box-shadow: none;}
#index_pg .mainContentContainer{
	display: table; 
	padding-top: 0;
	background: #9ae121; /* Old browsers */
	background: -moz-linear-gradient(top,  #9ae121 0%, #77b711 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae121), color-stop(100%,#77b711)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #9ae121 0%,#77b711 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #9ae121 0%,#77b711 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #9ae121 0%,#77b711 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #9ae121 0%,#77b711 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae121', endColorstr='#77b711',GradientType=0 ); /* IE6-9 */	
}
#index_pg .mainContentContainer > DIV {display: table-cell; padding: 0 10px; background: url(../images/index_overlay.png) center center; text-align: center; vertical-align: middle;}
#index_pg .mainContentContainer H2 {color: white; line-height: 1.5em; text-shadow: 0 2px 3px rgba(0,0,0,0.4);}
#index_pg .mainContentContainer H2+A {
	display: inline-block; 
	margin-top: 20px;
	padding: 8px 10px;
	min-width: 100px; max-width: 200px;  
	background: #999; 
	background: #fdfdfd; /* Old browsers */
	background: -moz-linear-gradient(top,  #fdfdfd 0%, #e4e4e4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#e4e4e4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fdfdfd 0%,#e4e4e4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fdfdfd 0%,#e4e4e4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fdfdfd 0%,#e4e4e4 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fdfdfd 0%,#e4e4e4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#e4e4e4',GradientType=0 ); /* IE6-9 */
	-webkit-border-radius: 5px; border-radius: 5px; 
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.3); box-shadow: 0 2px 3px rgba(0,0,0,0.3);
	font-weight: bold; color: #347ec5; text-decoration: none; text-shadow: 0 1px 1px white;
}

#lang {display: block; position: absolute; right: 10px; top: 15px;}
#lang A {display: block; padding: 5px 0;	color: white; text-decoration: none; font-size: 12px; text-shadow: 0 -1px 0 rgba(0,0,0,0.4);}
#lang UL {display: table; border-spacing: 5px;}
#lang UL LI {
	display: table-cell;
	width: 40px;
	border: 1px #498c00 solid;
	text-align: center;
	-webkit-border-radius: 5px; border-radius: 5px; 
	-webkit-box-shadow: inset 0 1px 4px rgba(255,255,255,0.4); box-shadow: inset 0 1px 3px rgba(255,255,255,0.4);
	background: #75BD28; /* Old browsers */
	background: -moz-linear-gradient(top,  #75bd28 0%, #498c00 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#75bd28), color-stop(100%,#498c00)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #75bd28 0%,#498c00 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #75bd28 0%,#498c00 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #75bd28 0%,#498c00 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #75bd28 0%,#498c00 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75bd28', endColorstr='#498c00',GradientType=0 ); /* IE6-9 */
}




/* ----- 2x styles ----- */
@media all and (-webkit-min-device-pixel-ratio:1.5) {
	.icon, .content .guideTextContent::before {
		background-image: url(../images/icon@2x.png);
		background-size: 250px 250px;
	}
}