@charset "utf-8";

html {
	font-size		: 20px;
	font-family	: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
}
body {
	font-size		: 1rem;
	margin			: 0;
	background-color	: rgb(251,235,199);
	/*background-image	: url(image/bkg.png);
	background-repeat	: no-repeat;
	background-size		: 100% auto;*/
}
a, button {
	-webkit-tap-highlight-color	: transparent; /* ios link flicker issue */
}
.button {
	display			: inline-block;
	width			: 114px;
	height			: 43px;
	text-align		: center;
    text-decoration	: none;
	font-weight		: bold;
    color			: grey;
    box-sizing		: border-box;
    padding			: 5px;
	background-image	: url(image/btn_a.png);
	background-repeat	: no-repeat;
	background-size		: 228px 43px;
}
.button:hover {
	background-position	: -114px 0px;
}
.button_go {
	display			: inline-block;
	width			: 110px;
	height			: 66px;
	text-align		: center;
    text-decoration	: none;
	background-image	: url(image/btn_go.png);
	background-repeat	: no-repeat;
	background-size		: 220px 66px;
}
.button_go:hover {
	background-position	: -110px 0px;
}
.tac {
	text-align		: center;
}
.tal {
	text-align		: left;
}
.tar {
	text-align		: right;
}
.fpurple {
	font-size	: 0.5rem;
    color		: purple;
}
.dotted {
	border-bottom	: 1px dotted black;
}
.myoverlay {
	display		: none;
	position	: absolute;
	top			: 0px;
	left		: 0px;
	width		: 100%;
	height		: 100%;
}
.mydialog_bkg {
	opacity				: 0.5;
	background-color	: grey;
}
.mydialog {
	display		: none;
	position	: absolute;
	top			: 200px;
	left		: 0px;
	width		: 100%;
	/*height		: 100px;*/
	text-align	: center;
}
.mydialog_content {
	display	: inline-block;
	width	: 300px;
	background-color: white;
	border-radius	: 10px;
	border		: 3px solid rgb(255,108,68);
}
.mymess {
	padding		: 10px;
}
#mydialog_redem {
	top			: 20px;
}
#mydialog_redem .mydialog_content {
	width		: 700px;
	text-align	: center;
}
#mydialog_bulb_note {
	top			: 20px;
}
#mydialog_bulb_note .mydialog_content {
	width		: 700px;
	text-align	: center;
}
.myfinished {
	position	: absolute;
	top			: 260px;
	left		: 0;
	display		: inline-block;
	width		: 100%;
	/*width		: 334px;*/
	height		: 147px;
	background-color	: transparent;
	background-position	: top center;
	background-repeat	: no-repeat;
	background-size		: 334px 147px;
	background-image	: url(image/end_gameOver.png);
}
.mytimes_up {
	position	: absolute;
	top			: 260px;
	left		: 0;
	display		: inline-block;
	width		: 100%;
	/*width		: 334px;*/
	height		: 147px;
	background-color	: transparent;
	background-position	: top center;
	background-repeat	: no-repeat;
	background-size		: 334px 147px;
	background-image	: url(image/end_timeOff.png);
}
.myeq_wrong {
	position	: absolute;
	top			: 260px;
	left		: 0;
	display		: inline-block;
	width		: 100%;
	/*width		: 334px;*/
	height		: 147px;
	background-color	: transparent;
	background-position	: top center;
	background-repeat	: no-repeat;
	background-image	: url(image/popup_wrong_answer.png);
}
.mybtnok, .mybtncancel {
	display	: inline-block;
	width	: 60px;
	height	: 26px;
	background-position	: 0px 0px;
	background-size		: 60px 54px;
}
.mybtnok:hover, .mybtncancel:hover {
	background-position	: 0px 26px;
}
.mybtnok {
	background-image	: url(image/pop_confirm.png);
}
.mybtncancel {
	background-image	: url(image/pop_delete.png);
}
.myintro {
	background-repeat	: no-repeat;
	background-position	: top center;
	background-size		: 960px 600px;
}
.myintro_matching {
	background-image	: url(image/instruction_matching.jpg);
}
.myintro_assembly, .myintro_mc_rule, .myintro_dragdrop {
	background-image	: url(image/instruction_puzzle.jpg);
}
.myintro_mc_video {
	background-image	: url(image/instruction_video.jpg);
}
.myintro_whackamole {
	background-image	: url(image/instruction_whac.jpg);
}
.myintro_mc_text {
	background-image	: url(image/instruction_MC.jpg);
}
.ss2016_intro_bkg {
	box-sizing			: border-box;
	width				: 960px;
	height				: 460px;
	padding				: 0px 30px 30px 30px;
	text-align			: center;
	background-color	: rgb(228,249,228);
}
.ss2016_intro_bkg2 {
	height				: 100%;
	background-color	: rgb(207,239,238);
}
.ss2016_intro_content {
	width		: 490px;
	margin-left	: auto;
    margin-right: auto;
    margin-top	: 240px;
}
.ss2016_intro_content  td {
	text-align		: left;
	vertical-align	: top;
}
.ss2016_intro_content  td:nth-child(1) {
	min-width		: 70px;
}
.ss2016_dot {
	width				: 30px;
    height				: 30px;
    border-radius		: 15px;
    text-align			: center;	
    background-color	: rgb(255,204,64);
	margin-right		: 10px;
}
.ss2016_matching {
	display				: inline-block;
    width				: 205px;
    height				: 76px;
	margin-bottom		: 30px;
    background-image	: url(image/logo_matching.png);
    background-repeat	: no-repeat;	
}
#hkectopbar_div {
	display		: none;
}
#content_centered {
	position			: relative;
	width				: 980px;
	max-width			: 980px;
	margin-left			: auto;
	margin-right		: auto;
}
#mypages {
	position		: relative;
	overflow		: hidden;
}
#loading_gif {
	position		: absolute;
	top				: 200px;
	left			: 450px;
}
.mypage {
	/*display			: none;*/
	width			: 960px;
	position		: relative;
}
#page_tt {
	font-weight	: bold;
}
.page_tt_banner {
	position	: absolute;
	top			: 10px;
	left		: 10px;
	display		: inline-block;
	width		: 194px;
	height		: 108px;
	background-image	: url(image/logo.png);
	background-repeat	: no-repeat;
	background-size		: 194px 108px;
	animation	: twiggle 4s infinite;
}
#page_tt_left {
	position	: absolute;
    top			: 150px;
    left		: 20px;
	display		: inline-block;
	width		: 194px;
	height		: 210px;
	/*padding-left		: 40px;
	padding-right		: 30px;*/
	background-image	: url(image/profile_box.png);
	background-repeat	: no-repeat;
	background-size		: contain;
	/*background-position	: 20px 10px;*/
	font-size			: 0.8rem;
}
#page_tt_left1 {
	margin-top	: 40px;
	margin-bottom	: 10px;
}
#page_tt_left1a {
	display	: inline-block;
	width	: 60px;
	height	: 60px;
	background-image	: url(image/name.png);
	background-position	: bottom right;
    background-repeat	: no-repeat;
	background-size		: 50px 39px;
	vertical-align	: bottom;
}
#page_tt_left1b {
	display	: inline-block;
	width: 120px;
	vertical-align	: bottom;
	margin-bottom: 10px;
}
#page_tt_left2 {
	margin-bottom	: 10px;
}
#page_tt_left2a {
	display	: inline-block;
	width	: 60px;
	height	: 30px;
	background-image	: url(image/school.png);
	background-position	: bottom right;
    background-repeat	: no-repeat;
	background-size		: 50px 39px;
	vertical-align	: bottom;
}
#page_tt_left2b {
	display	: inline-block;
	width: 120px;
	vertical-align	: bottom;
}
#page_tt_left3a {
	display	: inline-block;
	width	: 60px;
	height	: 30px;
	background-image	: url(image/score.png);
	background-position	: bottom right;
    background-repeat	: no-repeat;
	background-size		: 50px 39px;
	vertical-align	: bottom;
}
#page_tt_left3b {
	display	: inline-block;
	width: 120px;
	vertical-align	: top;
}
#page_tt_left4 {
	position	: absolute;
    top			: 220px;
	left		: 10px;
	width		: 188px;
	height		: 220px;
	background-image	: url(image/ranking_lion.png);
	background-repeat	: no-repeat;
	background-size		: 188px 144px;
	background-position	: bottom;
}
.showlb {
	display		: inline-block;
	width		: 88px;
	height		: 96px;
	margin-left	: 10px;
	background-image	: url(image/ranking_btn.png);
	background-repeat	: no-repeat;
	background-size		: 176px 96px;
	animation: jumping_lb 4s step-start infinite;
}
.showlb:hover {
	background-position	: -88px 0px;
}
.showlb.closed {
	background-position	: -88px 0px;
	cursor	: default;
}
#page_tt_right {
	position	: absolute;
	top			: 0px;
	right		: 10px;
	display		: inline-block;
	width		: 690px;
	height		: 480px;
}
#page_tt_right_top {
	position	: absolute;
	top			: 20px;
	right		: 50px;
	display		: inline-block;
	width		: 360px;
	height		: 45px;
	border-radius		: 5px;
	background-image	: url(image/organizer.png);
	background-repeat	: no-repeat;
	background-position	: center;
	background-size		: contain;
	animation: floating 8s ease infinite;
}
#page_tt_table {
	position	: absolute;
	top				: 80px;
	right			: 10px;
	display			: inline-block;
	width			: 690px;
	height			: 480px;
	border-radius	: 10px 10px 0px 10px;
	background-color: rgb(123,206,205);
}
#page_tt_table_top {
	position		: relative;
	height			: 55px;
}
#page_tt_table_top_left {
	position	: absolute;
	bottom		: 0px;
	left		: -30px;
	width		: 372px;
	height		: 131px;
	background-image	: url(image/profile_characters.png);
	background-position-x: -45px;
	background-position-y: -5px;
	background-size		: 372px 141px;
}
#page_tt_table_top_right {
	position	: absolute;
	bottom		: 0px;
	right		: 20px;
	width		: 418px;
	height		: 45px;
	background-image	: url(image/profile_menu.png);
	background-size		: contain;
}
#page_tt_table_content {
	background-image		: url(image/mid_yellow.png);
    background-position-x	: 10px;
    background-repeat		: no-repeat;	
	background-size			: 667px 414px;
}
.page_tt_table_row {
	position		: relative;
	display			: inline-block;
	width			: 420px;
	height			: 76px;
	margin-left		: 10px;
	margin-bottom	: 9px;
	padding-left	: 250px;
    background-repeat: no-repeat;
	background-size: 670px 76px;
}
.page_tt_table_row:nth-child(1) {
	background-image	: url(image/week_1st.png);
}
.page_tt_table_row:nth-child(2) {
	background-image	: url(image/week_2nd.png);
}
.page_tt_table_row:nth-child(3) {
	background-image	: url(image/week_3rd.png);
}
.page_tt_table_row:nth-child(4) {
	background-image	: url(image/week_4th.png);
}
.page_tt_table_row:nth-child(5) {
	background-image	: url(image/week_5th.png);
}
#page_tt_legend {
	position			: absolute;
	top					: 550px;
	right				: 10px;
	display				: inline-block;
	width				: 275px;
	height				: 49px;
	background-image	: url(image/date_indicate.png);
	background-repeat	: no-repeat;
	background-size		: 251px 49px;
	background-color	: rgba(123,206,205);
	border-bottom-left-radius: 15px;
}

.game_icon {
	display				: inline-block;
	width				: 43px;
	height				: 61px;
    box-sizing			: border-box;
	margin				: 7px 20px 0px 5px;
	padding				: 13px 0px 0px 2px;
	vertical-align		: top;
    font-size			: 0.6rem;
	font-weight			: bold;
	text-align			: center;
    background-repeat	: no-repeat;
	background-size		: contain;
	background-image	: url(image/date_notReady.png);
	color				: rgb(211,176,209);
	cursor				: default;
}
.game_icon.game_open {
	background-image	: url(image/date_open.png);
	color				: rgb(145,55,140);
	cursor				: pointer;
	animation			: brighten 5s ease infinite;
}
.game_icon.game_play1 {
	background-image	: url(image/date_play1.png);
	color				: rgb(145,55,140);
	cursor				: pointer;
}
.game_icon.game_play2 {
	background-image	: url(image/date_play2.png);
	color				: rgb(145,55,140);
	cursor				: pointer;
}
.game_icon.game_finished {
	background-image	: url(image/date_finished.png);
	color				: rgb(145,55,140);
	/*color				: white;*/
}
.game_icon.game_play1.game_missed {
	background-image	: url(image/date_incompleted_play1.png);
}
.game_icon.game_play2.game_missed {
	background-image	: url(image/date_incompleted_play2.png);
}
.game_icon.game_finished.game_missed {
	background-image	: url(image/date_incompleted_play3.png);
}
.game_date {
	background-color	: rgb(255,255,255,0.5);
	border-radius		: 3px;
	padding				: 0 3px;
}
.redem_icon {
	display				: inline-block;
	width				: 40px;
	height				: 60px;
	position			: absolute;
	top					: 5px;
	right				: 15px;
	background-repeat	: no-repeat;
	background-size		: contain;
	background-image	: url(image/gift_weekly_deem.png);
	opacity				: 0.7;
	cursor				: default;
}
.redem_icon.active {
	background-image	: url(image/gift_weekly.png);
	opacity				: 1;
	cursor				: pointer;
	animation			: twiggle 4s infinite;
}
#leaderboard {
	/*display				: none;*/
	width				: 100%;
	height				: 100%;
	box-sizing			: border-box;
	padding-top			: 190px;
	padding-bottom		: 70px;
	background-image	: url(image/ranking_bkg.png);
    background-repeat	: no-repeat;
	background-position	: top center;
	background-size		: 100%;
}
#lb_page1 {
	height	: 350px;
}
#lb_page2, #lb_page3 {
	height	: 350px;
	display	: none;
}
.leaderboard_spacer {
	display				: inline-block;
	width				: 50px;
	height				: 100px;
	vertical-align		: top;
}
.leaderboard_arrow {
	display				: inline-block;
	width				: 50px;
	height				: 100px;
	opacity				: 0.3;
	vertical-align		: top;
	margin-top			: 100px;
	background-color	: black;
	background-repeat	: no-repeat;
	background-size		: contain;
	background-position	: center;
}
.leaderboard_arrow:hover {
	opacity		: 0.7;
}
.leaderboard_prev {
	background-image	: url(image/icon-slide-left.png);
}
.leaderboard_next {
	background-image	: url(image/icon-slide-right.png);
}
.leaderboard_table {
	display			: inline-block;
	width			: 52%;
	background-color: rgb(255,232,170);
    border-radius	: 5px;
}
.leaderboard_table  tr {
	height	: 30px;
}
.leaderboard_rank {
	width				: 30px;
    height				: 30px;
    border-radius		: 15px;
    text-align			: center;	
    background-color	: rgb(244,182,178);
	margin-right		: 10px;
}
.leaderboard_name {
	width			: 250px;
	padding-left	: 40px;
	text-align		: center;
}
.leaderboard_score {
	width		: 150px;
}
.leaderboard_row.leaderboard_row_head {
	font-size	: 1rem;
	color		: rgb(110,73,143);
}
.leaderboard_row.leaderboard_row_head  .leaderboard_name {
	padding-left	: 0px;
	text-align		: center;
}
.leaderboard_row.leaderboard_row_myrank {
	color		: firebrick;
}
.leaderboard_row_my  .leaderboard_rank, .leaderboard_row_my  .leaderboard_name, .leaderboard_row_my  .leaderboard_score {
	border-top	: 5px solid orange;
	padding-top	: 15px;
	padding-bottom: 15px;
	color		: orange;
}
.myrank {
	position		: absolute;
    bottom			: 20px;
    left			: 320px;
    width			: 321px;
    height			: 53px;
    box-sizing		: border-box;
    padding-top		: 10px;
    background-image: url(image/ranking_namebox.png);
	background-size	: contain;
}
#myanimation {
	background-color	: white;
}
#myanimation_frame {
	border	: 0;
}
#mygamestore {
	position	:absolute;
	top			: -9999px;
	left		: -9999px;
	opacity		: 0;
}
#mygame {
	position	: relative;
	text-align	: center;
	min-height	: 600px;
}
#mygame  .jaqp_item_container {
	min-height		: 460px;
}
#mycontent_overlay {
    background-color: transparent;
}
#mycontent_bkg {
	display			: block; 
	background-color: white; 
	opacity			: 0.7;
}
#mycontent_table {
	box-sizing: border-box;
	display			: table;
    background-color: transparent;
	padding			: 120px 0px 0px 0px;
}
#mycontent {
	display			: table-cell;
	/*vertical-align	: bottom;*/
	/*background-color: rgb(228,249,228);*/
	background-color: #8dc5dc;
}
.mycontent_page {
	display			: none;
	height			: 100%;
	background-color: lightyellow;
	text-align		: center;
}
.content_arrow {
	position			: absolute;
	top					: 200px;
	width				: 30px;
	height				: 100px;
	display				: inline-block;
	background-color	: black;
	opacity				: 0.3;
	text-decoration		: none;
	background-repeat	: no-repeat;
	background-size		: 50px 100px;
	background-position	: top center;
}
.content_arrow:hover {
	opacity				: 0.7;
}
.content_prev {
	left				: 200px;
	background-image	: url(image/icon-slide-left.png);
}
.content_next {
	right				: 200px;
	background-image	: url(image/icon-slide-right.png);
}
.myloading {
	opacity				: 0.5;
	background-color	: grey;
	background-repeat	: no-repeat;
    background-position	: center;
    background-image	: url(image/loading.gif);
}
#myheader {
	position			: relative;
	height				: 130px;
	background-color	: rgb(244,183,179);
	background-image	: url(image/header.png);
	background-position	: top center;
	background-repeat	: no-repeat;
	background-size		: 960px 100px;
}
#mygamedesc {
	display			: none;
	font-size		: 2rem;
	color			: #eeeea4;
}
#mylogo {
	position			: absolute;
	top					: 10px;
	left				: 180px;
	display				: inline-block;
	width				: 194px;
	height				: 108px;
	/*background-image	: url(image/logo.png);*/
	background-repeat	: no-repeat;
}
#myscore {
	position			: absolute;
	bottom				: 5px;
	right				: 150px;
}
#mytimer {
	position			: absolute;
	bottom				: 0px;
	right				: 50px;
}
.quit {
	position	: absolute;
	top			: 10px;
	right		: 10px;
	display		: inline-block;
	width		: 33px;
	height		: 33px;
	background-image	: url(image/btn_exit.png);
	background-repeat	: no-repeat;
	background-size		: contain;
	background-position	: 0px 0px;
}
.close {
	position	: absolute;
	top			: 10px;
	right		: 10px;
	display		: inline-block;
	width		: 28px;
	height		: 28px;
	background-image	: url(image/logout.png);
	background-repeat	: no-repeat;
	background-size		: 56px 28px;
	background-position	: 0px 0px;
}
.close:hover {
	background-position	: -28px 0px;
}
#showq {
	display		: none;
	position	: absolute;
	bottom		: 20px;
	left		: 430px;
}
#showq0 {
	position	: absolute;
	bottom		: 20px;
	left		: 430px;
}
#startq {
	display		: none;
	position	: absolute;
	bottom		: 20px;
	left		: 430px;
}
#toggle_sec_content {
	display		: none;
	position	: absolute;
	top			: 230px;
	right		: 30px;
	width		: 114px;
	height		: 43px;
	background-image	: url(image/btn_video_photo.png);
	background-size		: contain;
}
#toggle_sec_content:hover {
	background-position	: 0px 0px;
}
#toggle_sec_2 {
	position	: absolute;
	right		: 30px;
	bottom		: 20px;
}
#confirm_end {
	display		: none;
	position	: absolute;
	bottom		: 20px;
	right		: 180px;
}
#recycle {
	display		: none;
	position	: absolute;
	bottom		: 20px;
	right		: 30px;
}
#back {
	display		: none;
	position	: absolute;
	bottom		: 20px;
	right		: 30px;
}
#hidelb {
	position	: absolute;
	top			: 120px;
	right		: 60px;
}
#skip {
	position	: absolute;
	bottom		: 20px;
	right		: 30px;
}
.bulb_note {
	position		: absolute;
    bottom			: 8px;
    right			: 25px;
    display			: inline-block;
	width			: 23px;
	height			: 23px;
    text-decoration	: none;
	background-image: url(image/btn_Q.png);
	background-size		: contain;
}
.bulb_note:hover {
	opacity	: 0.7;
}
/*
#page_result {
}
#page_result_text {
	position			: absolute;
	top					: 380px;
	left				: 200px;
	display				: inline-block;
	width				: 500px;
	height				: 60px;
	text-align			: left;
}
#score_total {
	position			: absolute;
	top					: 110px;
	left				: 330px;
	display				: inline-block;
	width				: 140px;
	height				: 60px;
	text-align			: right;
}
*/



/* overrides */
body  #dp-toasts {
	bottom	: 60%;
}
body .jaqp_layout_59250f6a316e83d86e000000 .jaqp_prompt, body .jaqp_layout_59250f6a316e83d86e000000 .jaqp_puzzle,
body .jaqp_layout_59251068316e83776f000000 .jaqp_prompt, body .jaqp_layout_59251068316e83776f000000 .jaqp_choices, body .jaqp_layout_592511139034437035000000 .jaqp_prompt, body .jaqp_layout_592511139034437035000000 .jaqp_whackamole_space, body .jaqp_layout_5925119f316e83cd6f000000 .jaqp_prompt, body .jaqp_layout_5925119f316e83cd6f000000 .jaqp_choices {
	background-color	: #8dc5dc;
}
body .jaqp_layout_5924e3549034430f1e010000 {
	background-color	: #8dc5dc;
	background-image	: url(image/sea.jpg);
}

/* animate */
@keyframes jumping_lb {
	0%   { transform: translate(50px, 10px); }
	50%  { transform: translate(0px, 0px); }
	100% { transform: translate(50px, 10px); }
}

@keyframes floating {
  0%   { transform: translateY(0%);  }
  50%  { transform: translateY(20%); }
  100% { transform: translateY(-0%); }   
}

@keyframes brighten {
  0%   { filter: brightness(0.7); }
  30%  { filter: brightness(1.5); }
  70%  { filter: brightness(1.5); }
  100% { filter: brightness(0.7); }
}

@keyframes twiggle {
	0%		{transform: rotate(0deg);}
	10%		{transform: rotate(-5deg);}
	20%		{transform: rotate(5deg);}
	30%		{transform: rotate(0deg);}
	100%	{transform: rotate(0deg);}
}

body .jaqp_fraction_table {
	display			: inline-block;
	font-size		: 0.7rem;
	margin			: 0 auto;
	vertical-align	: middle;
	text-align		: center;
}
body .jaqp_fraction_cell_a {
	padding		: 0 .1rem;
}
.jaqp_fraction_cell_bc div {
	padding		: 0 5px;
}
.jaqp_fraction_table hr {
	margin		: 0;
	border		: 1px solid;
}