@charset "UTF-8";
@import "../../css/common.css";

#main #hdArea h1{
	font-size:26px;
	color:#6c6b6b;
	font-weight:bold;
	padding:15px 0 15px 80px;
	background:url(../images/icon_vocabulary.png) no-repeat 0 45%;
	width:250px;
	float:left;
}
#main #hdArea{
	margin:0 0 5px 0;
}
#main #hdArea .btnArea {
	padding:6px 0 0 0;
}
#main #hdArea .btnArea ul li.back_topic{
	background:#FFF;
	border:#eaeaea 2px solid;
}
#main #hdArea .btnArea ul li.back_topic a{
	background:url(../images/icon_back01.png) no-repeat 5px center;
}
#main #hdArea .btnArea ul li.back a{
	background:url(../images/icon_back.png) no-repeat #828181 9px 50%;
	padding:12px 8px 12px 37px;
	font-size:15px;
	color:#FFF;
	display:inline-block;
}
#main #topichd{
	position:relative;
	text-align:left;
	font-weight:bold;
	color:#FFF;
}
#main.topic1 div#topichd{ background-color: #1961c3; }
#main.topic2 div#topichd{ background-color: #ea8610; }
#main.topic3 div#topichd{ background-color: #29b2ae; }
#main.topic4 div#topichd{ background-color: #a351b9; }
#main.topic5 div#topichd{ background-color: #c94848; }
#main.topic6 div#topichd{ background-color: #66a42e; }
#main.topic7 div#topichd{ background-color: #875c40; }
#main.topic8 div#topichd{ background-color: #7351a1; }
#main.topic9 div#topichd{ background-color: #a1456d; }

#main #topichd h2{
	color:#FFF;
	font-size:18px;
	padding:0 15px;
	display:inline-block;
	min-height:42px;
	line-height:42px;
	float:left;
}
#main #topichd h2 span{
	padding:0 0 0 37px;
	display:inline-block;
	background:url(../images/bg_list_border.png) no-repeat 9px center;
}
#main #topichd div#language{
	float:right;
}
#main #topichd div#language ul{
	padding:4px;
    font-size: 0;
}
#main #topichd div#language li{
	display:inline-block;
	background:url(../images/bg_language.png) repeat-x bottom #FFF;
	color:#515151;
	font-size:14px;
	padding:8px 20px;
	cursor:pointer;
}
#main #topichd div#language li:hover{
	color:#FFF;
}
#main #topichd div#language li.stay{
	color:#FFF;
}
#main.topic1 #topichd div#language li.stay,
#main.topic1 #topichd div#language li:hover{
    background: #14468b;
}
#main.topic2 #topichd div#language li.stay,
#main.topic2 #topichd div#language li:hover{
    background: #c9570b;
}
#main.topic3 #topichd div#language li.stay,
#main.topic3 #topichd div#language li:hover{
    background: #067572;
}
#main.topic4 #topichd div#language li.stay,
#main.topic4 #topichd div#language li:hover{
    background: #69287b;
}
#main.topic5 #topichd div#language li.stay,
#main.topic5 #topichd div#language li:hover{
    background: #932323;
}
#main.topic6 #topichd div#language li.stay,
#main.topic6 #topichd div#language li:hover{
    background: #396a0d;
}
#main.topic7 #topichd div#language li.stay,
#main.topic7 #topichd div#language li:hover{
    background: #5e361c;
}
#main.topic8 #topichd div#language li.stay,
#main.topic8 #topichd div#language li:hover{
    background: #44315e;
}
#main.topic9 #topichd div#language li.stay,
#main.topic9 #topichd div#language li:hover{
    background: #5e203b;
}
#main #contents{
	background:#e9e9e9;
	margin:10px 0 20px 0;
}
#main #contents #question{
	background:url(../images/bg_question.png) repeat-x bottom #FFF;
	border:1px solid #dddddd;
	float:left;
	width:308px;
	min-height:244px;
	padding:25px 20px;
}
#main #contents #question h3{
	font-size:50px;
	color:#6c6b6b;
	margin:0 0 30px 0;
}
#main #contents #question h3 span{
	font-size:30px;
}
#main #contents #question div#text{
	color:#474747;
	font-size:26px;
    margin:0 0 0 12px;
    padding:0 0 0 0;
}
#main #contents #question #jplayer_audio img {
    display: none;
}
#main #contents #question #text #q_text p{
    color:#474747;
    font-size:26px;
    margin:0 0 5px 33px;
}
#main #contents #question #text #q_answer p{
    color:#474747;
    font-size:26px;
    margin:0 0 5px 33px;
    text-indent:-33px;
}
#main #contents #question #text #q_answer p img{
    margin:0 5px 0 0;
    cursor:pointer;
}
#main #contents #question #text #roman p{
    font-size:16px;
    font-style:italic;
    color:#e8512e;
    padding:0 0 0 34px;
}
#main #contents #question #text #en p{
    font-size:16px;
    color:#474747;
    padding:0 0 0 34px;
}
#main #contents #select_btn{
	float:right;
	width:526px;
    padding:15px 26px 5px 0px;
	text-align:center;
}
#main #contents #select_btn ul#select_btn_list{
	margin:0 -15px 0 0;
}
#main #contents #select_btn div.familytree{
    text-align: center;
    min-height: 320px;
    margin: 6px;
}
#main #contents #select_btn ul#select_btn_list li{
	float:left;
	margin:0 3px 3px 0;
    position: relative;
    border: 6px solid #E9E9E9;
}
#main #contents #select_btn ul#select_btn_list li img:first-child{
    width: 120px;
    height: 120px;
}
#main #contents #select_btn ul#select_btn_list li img.sign{
    position:absolute;
    top:-18px;
    left:-18px;
}
#main #contents #select_btn ul#select_btn_list li.choice_item{
    cursor:pointer;
}
#main #contents #select_btn ul#select_btn_list li.disable{
    opacity: 0.6;
}
#main.topic1 #contents #select_btn ul#select_btn_list li.choice_item:hover{
    border:6px solid #14468b;
}
#main.topic2 #contents #select_btn ul#select_btn_list li.choice_item:hover{
    border:6px solid #c9570b;
}
#main.topic3 #contents #select_btn ul#select_btn_list li.choice_item:hover{
    border:6px solid #067572;
}
#main.topic4 #contents #select_btn ul#select_btn_list li.choice_item:hover{
    border:6px solid #69287b;
}
#main.topic5 #contents #select_btn ul#select_btn_list li.choice_item:hover{
    border:6px solid #932323;
}
#main.topic6 #contents #select_btn ul#select_btn_list li.choice_item:hover{
    border:6px solid #74ac41;
}
#main.topic7 #contents #select_btn ul#select_btn_list li.choice_item:hover{
    border:6px solid #5e361c;
}
#main.topic8 #contents #select_btn ul#select_btn_list li.choice_item:hover{
    border:6px solid #44315e;
}
#main.topic9 #contents #select_btn ul#select_btn_list li.choice_item:hover{
    border:6px solid #5e203b;
}
#main #advance{
	text-align:center;
}
#main div.btn{
	font-size:16px;
	font-weight:bold;
	display:inline-block;
}
#main div.btn a{
	display:block;
}
#main #advance div#btn_next a{
	color:#FFF;
	background:url(../images/icon_next.png) no-repeat 65% center;
	padding:12px 87px 12px 60px;
}
#main #advance div#btn_result a{
    color:#FFF;
    background:url(../images/icon_next.png) no-repeat 70% center;
    padding:12px 87px 12px 60px;
}
#main div#btn_result a span{
    text-indent: -9999px;
    display: inline-block;
    width: 20px;
    height: 18px;
    background:url(../images/icon_ring.png) no-repeat center left;
}
#main #advance div#btn_next.disable a,
#main #advance div#btn_result.disable a{
    cursor: default;
}
#main #advance div#btn_next.enable,
#main #advance div#btn_result.enable{
    background:#f2683a;
}
#main #advance div#btn_next.enable:hover,
#main #advance div#btn_result.enable:hover{
    opacity:0.7;
    filter: alpha(opacity=30); /* IE lt 8 */
}
#main #advance div#btn_next.disable,
#main #advance div#btn_result.disable{
    background:#cccccc;
}
#main #advance div#btn_next.disable:hover,
#main #advance div#btn_result.disable:hover{
    opacity:1;
    filter: alpha(opacity=100); /* IE lt 8 */
}

/* -------------------------------------------------------------------------- */
/* result */
/* -------------------------------------------------------------------------- */
#main #contents #question h3.result{
	text-align:center;
	font-size:40px;
	margin:98px 0;
}
#main #contents #select_btn div#score{
	font-size:92px;
	font-weight:bold;
	margin:12px 0;
}
#main #contents #select_btn div#score span{
	font-size:32px;
	color:#474747;
}
#main.topic1 #contents #select_btn div#score { color: #0C41A5; }
#main.topic2 #contents #select_btn div#score { color: #CC7204; }
#main.topic3 #contents #select_btn div#score { color: #1A9794; }
#main.topic4 #contents #select_btn div#score { color: #9237A8; }
#main.topic5 #contents #select_btn div#score { color: #BB2B2B; }
#main.topic6 #contents #select_btn div#score { color: #396a0d; }
#main.topic7 #contents #select_btn div#score { color: #5e361c; }
#main.topic8 #contents #select_btn div#score { color: #5E3A8D; }
#main.topic9 #contents #select_btn div#score { color: #8A3157; }

#main #contents #select_btn li{
	margin:0 0 10px 0;
}
#main #contents #select_btn li a{
	width:240px;
	line-height:40px;
	color:#FFF;
	font-size:18px;
	font-weight:bold;
	display:inline-block;
}
#main #contents #select_btn li.list a{
	background:url(../images/icon_next2.png) no-repeat 230px center #3b7af5;
	padding:0 20px 0 0;
}
#main.topic1 #contents #select_btn li.list a{ background-color: #377bd7; }
#main.topic2 #contents #select_btn li.list a{ background-color: #f6a444; }
#main.topic3 #contents #select_btn li.list a{ background-color: #5cbebb; }
#main.topic4 #contents #select_btn li.list a{ background-color: #bb74ce; }
#main.topic5 #contents #select_btn li.list a{ background-color: #d96161; }
#main.topic6 #contents #select_btn li.list a{ background-color: #66a42e; }
#main.topic7 #contents #select_btn li.list a{ background-color: #9d765d; }
#main.topic8 #contents #select_btn li.list a{ background-color: #9276b8; }
#main.topic9 #contents #select_btn li.list a{ background-color: #bb668b; }

#main #contents #select_btn li.retry a{
	background:url(../images/icon_back.png) no-repeat 55px center #0d41a6;
	padding:0 0 0 20px;
}
#main.topic1 #contents #select_btn li.retry a{ background-color: #0C41A5; }
#main.topic2 #contents #select_btn li.retry a{ background-color: #CC7204; }
#main.topic3 #contents #select_btn li.retry a{ background-color: #1A9794; }
#main.topic4 #contents #select_btn li.retry a{ background-color: #9237A8; }
#main.topic5 #contents #select_btn li.retry a{ background-color: #BB2B2B; }
#main.topic6 #contents #select_btn li.retry a{ background-color: #396a0d; }
#main.topic7 #contents #select_btn li.retry a{ background-color: #5e361c; }
#main.topic8 #contents #select_btn li.retry a{ background-color: #5E3A8D; }
#main.topic9 #contents #select_btn li.retry a{ background-color: #8A3157; }
#main #contents #select_btn #choice li:hover{
	opacity:0.7;
	filter: alpha(opacity=70);
}
#main #advance div#btn_choice a{
	color:#FFF;
	padding:12px 15px 12px 45px;
    background:url(../images/icon_back.png) no-repeat 15px center #f2683a;
}

/* -------------------------------------------------------------------------- */
/* mistake */
/* -------------------------------------------------------------------------- */
#main #mistake{
    background:#FFF;
    border:#dddddd 1px solid;
    margin:0 0 20px 0;
    text-align:center;
}
#main #mistake div#incorrectList{
	background:url(../images/bg_incorrectList.jpg) no-repeat right top #FFF;
	padding:25px 5px 10px 40px;
	text-align:left;
}
#main #mistake div#incorrectList h3{
	font-size:30px;
	color:#6c6b6b;
	margin:0 0 30px 0;
	text-align:center;
}
#main #mistake div#incorrectList div.word{
	display:inline-block;
	border-bottom:dotted #cacaca 2px;
	width:406px;
	margin:0 25px 20px 0;
	padding:0 0 20px 3px;
    text-align:left;
}
#main #mistake div#incorrectList div.word div.textArea{
	float:left;
	width:280px;
}
#main #mistake div#incorrectList div.word div.textArea h4{
	font-size:24px;
	color:#474747;
	margin:0 0 0 35px;
	text-indent:-35px;
}
#main #mistake div#incorrectList div.word div.textArea h4 img{
	margin:0 6px 0 0;
	cursor:pointer;
}
#main #mistake div#incorrectList div.word div.textArea div.cap{
	font-size:16px;
	color:#474747;
	margin:5px 0 0 36px;
}
#main #mistake div#incorrectList div.word div.textArea div.cap p.roman{
	font-style:italic;
	color:#e8512e;
}
#main #mistake div#incorrectList div.word div.image{
	float:right;
	width:125px;
}
#main #mistake div#incorrectList div.word .jplayer_audio img {
    display: none;
}
#main div#btn_retry{
	text-align:center;
	margin:0 0 30px 0;
}
#main div#btn_retry a{
	color:#FFF;
	background:#0d41a6;
	background:url(../images/icon_back.png) no-repeat 50px center;
	padding:12px 55px 12px 80px;
}
#main.topic1 div#btn_retry a{ background-color: #0C41A5; }
#main.topic2 div#btn_retry a{ background-color: #CC7204; }
#main.topic3 div#btn_retry a{ background-color: #1A9794; }
#main.topic4 div#btn_retry a{ background-color: #9237A8; }
#main.topic5 div#btn_retry a{ background-color: #BB2B2B; }
#main.topic6 div#btn_retry a{ background-color: #396a0d; }
#main.topic7 div#btn_retry a{ background-color: #5e361c; }
#main.topic8 div#btn_retry a{ background-color: #5E3A8D; }
#main.topic9 div#btn_retry a{ background-color: #8A3157; }


#main div#pager{
    margin: 20px 0 0 0;
    padding: 20px 0 0 0;
    border-top: 6px #bbbbbb solid;
}
#main div#pager span{
    font-size:18px;
    font-weight:bold;
    display:inline-block;
    background:#FFF;
}
#main div#pager span.prev{
    text-align:right;
    float: left;
}
#main div#pager span.next{
    text-align:right;
    float: right;
}
#main div#pager span.prev a{
    color:#f15e35;
    background:url(../images/icon_arrow_l.png) no-repeat 15% center;
    padding:10px 14px 10px 48px;
    display:block;
    border:#f15e35 2px solid;
}
#main div#pager span.next a{
    color:#f15e35;
    background:url(../images/icon_arrow_r.png) no-repeat 85% center;
    padding:10px 48px 10px 14px;
    display:block;
    border:#f15e35 2px solid;
}
#main div#pager a:hover{
    opacity:0.7;
    filter: alpha(opacity=30); /* IE lt 8 */
}


#main:after,#main .heading h2:after,#main #hdArea:after,#main #topichd:after,#main #contents:after,#main #contents #select_btn ul:after,#main div#pager:after{content:".";display:block;height:0px;clear:both;visibility:hidden;}
#main,#main .heading h2,#main #hdArea,#main #topichd,#main #contents,#main #contents #select_btn ul,#main div#pager{ height:1%;}