html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

html{
	font-family:Arial;
}
body{
/*	border:1px solid green; */
	color:#000000;
	margin:0 auto;
	width:1024px;
	height:768px;
/*	background-color:#FFFFFF;*/
	font-size: 21px;
	text-align:left;
}
a{
	cursor:pointer;
}


.hide{
	display:none;
}
.left{
	float:left;
}
.right{
	float:right;
}
.clear{
	clear:both;
}
.red{
	color:red;
}
.purple{
	color:purple;
}
.times{
	font-family:Times New Roman;
}
.arial{
	font-family:Arial;
}
.verdana{
	font-family:Verdana;
}
.i{
	font-style:italic;
}
.b{
	font-weight:bold;
}
.maths-a{
	font-family:Times New Roman;
	font-style:italic;
	font-weight:bold;
}
.maths-n{
	font-family:Times New Roman;
	font-weight:bold;
}
.inline-block {
	display: inline-block;
}
.inline {
display:inline;
}

.visible {
visibility: visible;
}

.hidden {
visibility: hidden;
}

sup {
	margin: 0px 0px 0px -5px;
}
sup.large {
	margin: 0px 0px 0px -14px;
	font-style:normal;
}
sub.large {
	margin: 0px 0px 0px 3px;
	font-style:normal;
}


#container{
	position:relative;
	margin:0 auto;
	width:100%;
	height:100%;
	color: #000000;
}
.en #container{
	background:url(../img/en/bg.jpg) ;
	background-repeat:no-repeat;
	background-size:contain;
}
.tc #container{
	background:url(../img/tc/bg.jpg) ;
}

#question_container{
	position:absolute;
	top: 204px;
	left: 100px ;
	width: 600px;
	font-size:21px;
	font-family: Arial;
	line-height:30px;
}
.en #question{
	position:absolute;
	top: 68px;
	left: 20px;
}
.tc #question{
	position:absolute;
	top: 50px;
	left: 20px;
}

#note_container{
	position:absolute;
	font-family:Arial;
	font-size: 15px;
	position:absolute;
	top: 600px;
	left: 100px ;
}
#level_container{
	position:absolute;
	background:#e7cfff;
	font-family:Arial;
	font-weight:bold;
	font-size: 16px;
	position:absolute;
	top: 225px;
	left: 760px ;
	padding: 11px 15px;
	line-height: 21px;
}
.tc #level_container{
	width: 120px;
}
#level_container > label {
	font-weight:normal;
}

#answer_container{
/*	border:1px solid green; */
	position:absolute;
	top: 360px;
	left: 100px ;
	width: 900px;
	font-size:21px;
	font-family: Arial;
	line-height:33px;
}
#answer_lower{
	position:absolute;
	top: 80px;
	width: 900px;
}

#answer_1{
	position:absolute;
}
#answer_2{
	position:absolute;
	left:200px;
}
#answer_3{
	position:absolute;
}
#answer_4{
	position:absolute;
	left:200px;
}
.en #answer_5{
	position:absolute;
	left:520px;
}
.tc #answer_5{
	position:absolute;
	left:480px;
}
input[type=text]{
	text-align:center;
	font-family:Arial;
	color:#000000;
	width:60px;
	height:25px;
    border:1px solid #9a9891;
    background-color:#f2ede3;
	border-radius: 3px; /* css 3 */  
	-moz-border-radius: 3px;  /* mozilla */  
	-webkit-border-radius: 3px;  /* webkit */  
    font-size: 21px;
}

#button_container{
	position:absolute;
	top: 510px;
	left: 100px ;
	width: 600px;
}

#result_container{
	position:absolute;
	top: 688px;
	left: 100px ;
	width: 800px;
}

#num_questions_attempted, #num_correct_answers{
	font-size:17px;
	display: inline;
	position:absolute;
}
#num_questions_attempted > span, #num_correct_answers > span{
	font-size:21px;
	position:absolute;
	top:-1px;
}

.en #num_correct_answers{
	left: 353px ;
}
.tc #num_correct_answers{
	left: 250px ;
}
/*///////////////// Help Window ///////////////////*/

#help{
	position:absolute;
	top: 250px;
	left: 210px;
	}

#help > div{
	width:627px;
	height:402px;
	position:absolute;
}
.en #help > div{
	background:url(../img/en/help.png) no-repeat;
}
.en .help1{
	background:url(../img/en/help_1.png) no-repeat;
}
.tc #help > div{
	background:url(../img/tc/help.png) no-repeat;
}
#help .toolbar{
	width:627px;
	height:25px;
	display:block;
	cursor:move;
}

.btn_close{
	position:absolute;
	top:3px;
	right:12px;
	opacity:0;
	filter:alpha(opacity=0); /* For IE8 and earlier */
	width:25px;
	border:0 none;
	cursor:pointer;
}

/*///////////////// Buttons ///////////////////*/

#btn_check, #btn_confirm, #btn_help, #btn_try_again, #btn_show_answer, #btn_next, #btn_sort{
	position: absolute;
	width:104px;
	height:48px;
	border:none;
	cursor:pointer;
}
.en #btn_sort{
	left:410px;
	top: 60px;
}
.tc #btn_sort{
	left:410px;
	top: 42px;
}
#btn_check{
	left:410px;
	top: 21px;
}
#btn_confirm{
	left:0px;
}
#btn_help{
	left:110px;
}
#btn_try_again{
	left:300px;
}
#btn_show_answer{
	left:410px;
}
#btn_next{
	left:520px;
}

.en #btn_sort{
	background:url(../img/en/s13.png) no-repeat;
}
.tc #btn_sort{
	background:url(../img/tc/s13.png) no-repeat;
}
.en #btn_sort:hover{
	background:url(../img/en/s14.png) no-repeat;
}
.tc #btn_sort:hover{
	background:url(../img/tc/s14.png) no-repeat;
}
.en #btn_check{
	background:url(../img/en/s07.png) no-repeat;
}
.tc #btn_check{
	background:url(../img/tc/s07.png) no-repeat;
}
.en #btn_check:hover{
	background:url(../img/en/s01.png) no-repeat;
}
.tc #btn_check:hover{
	background:url(../img/tc/s01.png) no-repeat;
}
.en #btn_help{
	background:url(../img/en/s08.png) no-repeat;
}
.tc #btn_help{
	background:url(../img/tc/s08.png) no-repeat;
}
.en #btn_help:hover{
	background:url(../img/en/s02.png) no-repeat;
}
.tc #btn_help:hover{
	background:url(../img/tc/s02.png) no-repeat;
}
.en #btn_confirm{
	background:url(../img/en/s09.png) no-repeat;
}
.tc #btn_confirm{
	background:url(../img/tc/s09.png) no-repeat;
}
.en #btn_confirm:hover{
	background:url(../img/en/s03.png) no-repeat;
}
.tc #btn_confirm:hover{
	background:url(../img/tc/s03.png) no-repeat;
}
.en #btn_show_answer{
	background:url(../img/en/s10.png) no-repeat;
}
.tc #btn_show_answer{
	background:url(../img/tc/s10.png) no-repeat;
}
.en #btn_show_answer:hover{
	background:url(../img/en/s04.png) no-repeat;
}
.tc #btn_show_answer:hover{
	background:url(../img/tc/s04.png) no-repeat;
}
.en #btn_try_again{
	background:url(../img/en/s11.png) no-repeat;
}
.tc #btn_try_again{
	background:url(../img/tc/s11.png) no-repeat;
}
.en #btn_try_again:hover{
	background:url(../img/en/s05.png) no-repeat;
}
.tc #btn_try_again:hover{
	background:url(../img/tc/s05.png) no-repeat;
}
.en #btn_next{
	background:url(../img/en/s12.png) no-repeat;
}
.tc #btn_next{
	background:url(../img/tc/s12.png) no-repeat;
}
.en #btn_next:hover{
	background:url(../img/en/s06.png) no-repeat;
}
.tc #btn_next:hover{
	background:url(../img/tc/s06.png) no-repeat;
}

.en #btn_sort:disabled{
	background:url(../img/en/s13.png) no-repeat;
	cursor:default;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}
.tc #btn_sort:disabled{
	background:url(../img/tc/s13.png) no-repeat;
	cursor:default;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}

.en #btn_check:disabled{
	background:url(../img/en/s07.png) no-repeat;
	cursor:default;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}
.tc #btn_check:disabled{
	background:url(../img/tc/s07.png) no-repeat;
	cursor:default;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}

.en #btn_try_again:disabled{
	background:url(../img/en/s11.png) no-repeat;
	cursor:default;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}
.tc #btn_try_again:disabled{
	background:url(../img/tc/s11.png) no-repeat;
	cursor:default;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}

.en #btn_show_answer:disabled{
	background:url(../img/en/s10.png) no-repeat;
	cursor:default;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}
.tc #btn_show_answer:disabled{
	background:url(../img/tc/s10.png) no-repeat;
	cursor:default;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}

.en #btn_confirm:disabled{
	background:url(../img/en/s09.png) no-repeat;
	cursor:default;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}
.tc #btn_confirm:disabled{
	background:url(../img/tc/s09.png) no-repeat;
	cursor:default;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}

.check_indicator{
	position:absolute;
	top: 2px;
	width:25px;
	height:26px;
	background:url(../img/tick.png);
}
.check_indicator.wrong{
	background:url(../img/cross.png);
}
.en #check_indicator1{
	left: 130px;
}
.en #check_indicator2{
	left: 147px;
}
.en #check_indicator3{
	left: 140px;
}
.en #check_indicator4{
	left: 263px;
}
.en #check_indicator5{
	left: 260px;
}
.tc #check_indicator1, .tc #check_indicator2, .tc #check_indicator3, .tc #check_indicator5{
	left: 160px;
}
.tc #check_indicator4{
	left: 222px;
}

input[type=radio]{
	visibility:hidden;
}
.radio{
	width:20px;
	height:20px;
	background:url(../img/Radio_none.png) no-repeat;
}
.radio.on{
	width:20px;
	height:20px;
	background:url(../img/Radio.png) no-repeat;
}