@charset "utf-8";
/* CSS Document */

#main { padding: 0; }
#main .menu { text-align:center; background-color:white; padding-top:10px; }
#main .menu a.selected { color:#69F; }
#main .menu a:hover { color:#33C; font-weight:bold; }
#main .menu a { 
	width: 110px;
	padding: 15px;
	font-size: 24pt;
	text-align:center;
	display: inline-block;
	vertical-align: middle; }
	
#main .dialector { margin:10px auto; }

/* 補充教材 */
.extension { padding: 0 px; }
.extension .tabs   { height:50px; padding-left:15px; }
.extension .tabs a { width: 166px; height:51px; display:inline-block; margin-right: 10px; }
.extension .beam { height:60px; margin:auto; width:970px; }

.extension .header { padding-top: 30px;  text-align: center;}
.extension .header > * { display:inline-block; vertical-align:middle; }
.extension .header .title { width: 600px; padding-right:10px; text-align:left; }
.extension .header .prev_1.hidden { visibility: hidden; }
.extension .header .next_1.hidden { visibility: hidden; }
.extension .header .no {
	color: #917A50; font-size: 48pt; padding: 0 20px 0 40px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif }
.extension .header .Ab { font-size: 30pt; margin-bottom: 5px; }
.extension .header .Ch { font-size: 26pt; margin: 20px 0; }

.extension .labels { 
	padding: 0;
	height: auto;
	margin: 20px 0;
	text-align: center;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999; }
.extension .labels a { 
	margin: 0;
	width: 200px;
	height: auto;
	padding: 10px 50px;
	vertical-align: top;
	display: inline-block;}
.extension .labels a.selected { background-color:#EEE; }
.extension .labels a:hover,
.extension .labels a.selected:hover { background-color:#CCC; }
/*------------------------------| RWD |-------------------------*/
@media screen and (min-width: 1000px) {

}
@media only screen and (min-width: 680px) and (max-width: 1000px) {
.extension.sp .tabs a {
	width: 16%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom left;
}
}
@media screen and (max-width: 680px){
.extension.sp .tabs a {
	width: 16%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom left;
	height:30px;
}
}
/* 句型篇 */
.extension.sp .practice          { background: url(sp_image/practice.png) no-repeat;	}
.extension.sp .practice:hover,
.extension.sp .practice.selected { background-image: url(sp_image/practice_hover.png)	}
.extension.sp .video             { background: url(sp_image/video.png) no-repeat;		}
.extension.sp .video:hover,
.extension.sp .video.selected    { background-image: url(sp_image/video_hover.png)		}
.extension.sp .guide             { background: url(sp_image/guide.png) no-repeat;		}
.extension.sp .guide:hover,
.extension.sp .guide.selected    { background-image: url(sp_image/guide_hover.png)		}
.extension.sp .exam              { background: url(sp_image/exam.png) no-repeat			}
.extension.sp .exam:hover,
.extension.sp .exam.selected     { background-image: url(sp_image/exam_hover.png)		}
.extension.sp .download          { background: url(sp_image/download.png) no-repeat;	}
.extension.sp .download:hover,
.extension.sp .download.selected { background-image: url(sp_image/download_hover.png)	}

/* 圖畫故事篇 */
.extension.ps .beam { background:url(ps_image/beam.png) no-repeat;  margin:0px; width:1000px;}
.extension.ps .practice       { background:url(ps_image/practice.png) no-repeat; }
.extension.ps .practice.selected,
.extension.ps .practice:hover { background:url(ps_image/practice_hover.png) no-repeat; }
.extension.ps .guide          { background:url(ps_image/guide.png) no-repeat; }
.extension.ps .guide:hover    { background:url(ps_image/guide_hover.png) no-repeat; }

.extension.ps .download.selected,
.extension.ps .download:hover    { background:url(ps_image/download_hover.png) no-repeat; }
.extension.ps .download          { background:url(ps_image/download.png) no-repeat; }

/* 生活會話篇 */
.extension.conversation .beam { background:url(https://web.klokah.tw/extension/con_image/beam.png) no-repeat; background-color: white;  margin:0px; width:1000px;}
.extension.conversation .practice       { background:url(https://web.klokah.tw/extension/con_image/practice.png) no-repeat; }
.extension.conversation .practice.selected,
.extension.conversation .practice:hover { background:url(https://web.klokah.tw/extension/con_image/practice_hover.png) no-repeat; }
.extension.conversation .guide          { background:url(https://web.klokah.tw/extension/con_image/guide.png) no-repeat; }
.extension.conversation .guide:hover    { background:url(https://web.klokah.tw/extension/con_image/guide_hover.png) no-repeat; }

.extension.conversation .download.selected,
.extension.conversation .download:hover    { background:url(https://web.klokah.tw/extension/con_image/download_hover.png) no-repeat; }
.extension.conversation .download          { background:url(https://web.klokah.tw/extension/con_image/download.png) no-repeat; }

.extension.conversation .exam.selected,
.extension.conversation .exam:hover    { background-color:#00aded; color:white; }
.extension.conversation .exam { 
	vertical-align: top;
	background-color: #ddd0c2;
	border-radius: 5px 5px 0 0;
	text-align: center;
	line-height: 51px;
	font-size: 24pt;
	font-weight: bold;
}

/* 歌謠篇 */

.extension.song .beam { background:url(song_image/beam.png) no-repeat;  margin:0px; width:1000px;}

.extension.song .practice.selected,
.extension.song .practice:hover { background:url(song_image/practice_hover.png) no-repeat; }
.extension.song .practice       { background:url(song_image/practice.png) no-repeat; }

.extension.song .guide.selected,
.extension.song .guide:hover    { background:url(song_image/guide_hover.png) no-repeat; }
.extension.song .guide          { background:url(song_image/guide.png) no-repeat; }

.extension.song .download.selected,
.extension.song .download:hover    { background:url(song_image/download_hover.png) no-repeat; }
.extension.song .download          { background:url(song_image/download.png) no-repeat; }

/* 字母篇 */
.extension.alphabet .beam { background:url(ab_image/beam.png) no-repeat; margin:0px; width:1000px;}

.extension.alphabet .exam:hover,
.extension.alphabet .exam.selected     { background:url(ab_image/exam_hover.png) no-repeat; }
.extension.alphabet .exam              { background:url(ab_image/exam.png) no-repeat; }

.extension.alphabet .download:hover,
.extension.alphabet .download.selected     { background:url(ab_image/download_hover.png) no-repeat; }
.extension.alphabet .download      		{ background:url(ab_image/download.png) no-repeat; }

.extension.alphabet .guide:hover,
.extension.alphabet .guide.selected    { background:url(ab_image/guide_hover.png) no-repeat; }
.extension.alphabet .guide             { background:url(ab_image/guide.png) no-repeat; }

.extension.alphabet .practice:hover,
.extension.alphabet .practice.selected { background:url(ab_image/practice_hover.png) no-repeat; }
.extension.alphabet .practice          { background:url(ab_image/practice.png) no-repeat; }

/* 閱讀書寫篇 */
.extension.rd .beam { background:url(https://web.klokah.tw/extension/rd_image/beam.png) no-repeat;  margin:0px; width:1000px;}
.extension.rd .practice       { background:url(https://web.klokah.tw/extension/rd_image/practice.png) no-repeat; }
.extension.rd .practice.selected,
.extension.rd .practice:hover { background:url(https://web.klokah.tw/extension/rd_image/practice_hover.png) no-repeat; }
.extension.rd .guide          { background:url(https://web.klokah.tw/extension/rd_image/guide.png) no-repeat; }
.extension.rd .guide:hover    { background:url(https://web.klokah.tw/extension/rd_image/guide_hover.png) no-repeat; }
.extension.rd .labels a { width: 135px;}

.extension.rd .download.selected,
.extension.rd .download:hover    { background:url(https://web.klokah.tw/extension/rd_image/download_hover.png) no-repeat; }
.extension.rd .download          { background:url(https://web.klokah.tw/extension/rd_image/download.png) no-repeat; }

/* 文化篇 */
.extension.cu .beam { background:url(https://web.klokah.tw/extension/cu_image/beam.png) no-repeat;  margin:0px; width:1000px;}
.extension.cu .practice       { background:url(https://web.klokah.tw/extension/cu_image/practice.png) no-repeat; }
.extension.cu .practice.selected,
.extension.cu .practice:hover { background:url(https://web.klokah.tw/extension/cu_image/practice_hover.png) no-repeat; }
.extension.cu .guide          { background:url(https://web.klokah.tw/extension/cu_image/guide.png) no-repeat; }
.extension.cu .guide:hover    { background:url(https://web.klokah.tw/extension/cu_image/guide_hover.png) no-repeat; }
.extension.cu .labels a { width: 135px;}
.extension.cu .download.selected,
.extension.cu .download:hover    { background:url(https://web.klokah.tw/extension/cu_image/download_hover.png) no-repeat; }
.extension.cu .download          { background:url(https://web.klokah.tw/extension/cu_image/download.png) no-repeat; }