@font-face  { font-family: Jacoby; src: url('../fonts/Jacoby_ICG_Black.eot'), url('../fonts/Jacoby_ICG_Black.ttf'),  url('../fonts/jacoby_icg_black.otf') }

@font-face  { font-family: Trebuchet;
 src: url('../fonts/trebuchet_ms.otf'),
      url('../fonts/Trebuchet MS.ttf')
       }
       body,html{
       background-color: #CCC;
        overflow:scroll !important;
       }

#all
 {
    background-image: url("../cover_case/bg0.png");
    height: 585px;
    left: 0;
    position:absolute;
    top: 0;
    width: 920px;
	background-repeat:no-repeat;


}

#all{
border-radius: 10px;
margin-top: 7%;
}
#tit{

left: 75px;
top: 25px;
width: 600px;
font-size: 22px;
color:black;
font-family: sans-serif;
}

#tit_txt{
	color:black;
    font-size: 22px;
    height: 33px;
	top: 20px;
    left: 80px;
    position: absolute;
	font-family:sans-serif;
}

#intro{
	height: 49px;
    left: 7px;
    position: absolute;
    top: 52px;
    width: 787px;
}

#intro_txt{
  position: absolute;
  left:75px;
  top:50px;
  font-family:sans-serif;
  font-size: 13px;
}

#chart
{
	left: 20px;
    position: absolute;
    top: 101px;
}
#txt1
{
	font-size: 20px;
    left: 337px;
    position: absolute;
    top: 157px;

}
#txt2
{
	height: 0;
    left: 158px;
    position: absolute;
    top: 273px;
    width: 30px;
}
#span_txt2
{
	display: inline-block;
    white-space: nowrap;
    font-family: Verdana;
    font-size: 14pt;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: center center;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: center center;
	position:absolute;
	left: 8px;
}
#txt3
{
	font-size: 22px;
    left: 393px;
    position: absolute;
    top: 375px;
}

#ch1 {
    font-family: Arial;
    font-size: 17px;
    height: 10px;
    left: 310px;
    position: absolute;
    top: 354px;
    width: 0;
}
#ch2 {
    font-family: Arial;
    font-size: 17px;
    height: 10px;
    left: 369px;
    position: absolute;
    top: 354px;
    width: 0;
}
#ch3 {
    font-family: Arial;
    font-size: 17px;
    height: 10px;
    left: 450px;
    position: absolute;
    top: 354px;
    width: 0;
}
#ch4 {
    font-family: Arial;
    font-size: 17px;
    height: 10px;
    left: 518px;
    position: absolute;
    top: 354px;
    width: 0;
}
.drop {
    height: 32px;
    position: absolute;
    width: 149px;

    font-family: Jacoby;
    font-size: 28px;
    cursor: pointer;
    text-align: center;
}
#drop1 {
    left: 21px;
    top: 247px;
}
#drop2 {
    left: 696px;
    top: 102px;
}
#drop3
{
	left: 696px;
    top: 218px;
}
.drag {
    /*background-image: url("../img/drag_img.png");
    background-repeat: no-repeat;
    background-repeat: no-repeat;*/
    border: 1px solid #6CC56C;
    cursor: pointer;
    height: 36px;
    position: absolute;
    width: 155px;
	background-color:white;
}
#drag1 {
    left: 250px;
    top: 437px;
}
#drag2 {
    left: 443px;
    top: 437px;
}
#drag3 {
    left: 344px;
    top: 497px;
}
#drag1_txt {
    font-family: Jacoby;
    font-size: 28px;
    left: 41px;
    position: absolute;
	color:#666666;
    top: 1px;
}
#drag2_txt {
    font-family: Jacoby;
    font-size: 28px;
    left: 47px;
    position: absolute;
    top: 1px;
	color:#666666;
}

#drag3_txt {
    font-family: Jacoby;
    font-size: 28px;
    left: 36px;
    position: absolute;
    top: 1px;
	color:#666666;
}

#correct1, #wrong1 {
    display: none;
    left: 32px;
    position: absolute;
    top: 290px;
}
#correct2, #wrong2 {
    display: none;
    left: 751px;
    position: absolute;
    top: 140px;
}
#correct3, #wrong3 {
    display: none;
    left: 754px;
    position: absolute;
    top: 257px;
}
#check
{
	cursor: pointer;
    left: 746px;
    opacity:1;
    position: absolute;
    top: 473px;
	width: 145px;
    height: 60px;
}
#close_btn{
	height: 40px;
    left: 382px;
    position: absolute;
    top: 347px;
    width: 33px;
	cursor:pointer;
	}
#close_txt{
	font-size: 35px;
    left: 285px;
	cursor:pointer;
    position: absolute;
    top: 346px;
}
#correctanim
{
	height: 168px;
    left: 198px;
    position: absolute;
    top: -200px;
    width: 252px;
}
#wronganim
{
	height: 168px;
    left: 198px;
    position: absolute;
    top: -200px;
    width: 252px;
}
#t4a {
    cursor: pointer;
    display: none;
    height: 41px;
    left: 255px;
    position: absolute;
    top: 473px;
    width: 129px;
	background-color:#FFF;
	opacity:0.01;
}

#page1
{
	display:block;
}

#page2{

	display:none;

	}

#popupmsg1
{
    height: 359px;
    left: 27px;
    position: absolute;
    top: 2px;
    width: 415px;
	background-color:white;

}
#close
{
    cursor: pointer;
    height: 30px;
    left: 397px;
    position: absolute;
    top: 319px;
    width: 30px;
}


#close1
{
	height: 30px;
    position: absolute;
    width: 30px;
}

#close2
{
	font-family: verdana;
    font-size: 20px;
    font-weight: bold;
    left: -76px;
    position: absolute;
    top: 0;
    width: 30px;
}
#restartbutton
{
    cursor: pointer;
	left: 839px;
    position: absolute;
    top: 8px;

}

#restartmsg
{
	display: none;
    left: 808px;
    position: absolute;
    top: 43px;
	z-index: 4;
}

#closebutton
{
	cursor: pointer;
    left: 878px;
    position: absolute;
    top: 8px;

}
#closemsg
{
	display: none;
    left: 816px;
    position: absolute;
    top: 43px;
	z-index: 4;
}

/* ---------------------  page2 -------------------------*/

#intro1{
	height: 49px;
    left: 7px;
    position: absolute;
    top: 52px;
    width: 787px;
}

#intro_txt1{
	color: black;
    font-size: 13px;
	top: 15px;
    height: 33px;
    left: 95px;
    position: absolute;
	width:870px;
	font-family:sans-serif;
}

#p2_img {
    background-image: url("../img/p2_img.png");
    background-repeat: no-repeat;
    height: 316px;
    left: 10px;
    position: absolute;
    top: 127px;
    width: 449px;
}
#p2_img1 {
    background-image: url("../img/p2_img1.png");
    background-repeat: no-repeat;
    height: 314px;
    left: 457px;
    position: absolute;
    top: 127px;
    width: 458px;
}

#pg2_img22
{
	 height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width: 400px;
	cursor:pointer;
}
#click_img1 {
    cursor: pointer;
    height: 25px;
    left: 511px;
    position: absolute;
    top: 206px;
    width: 30px;
	z-index:2;
}
#click_img2 {
    cursor: pointer;
    height: 22px;
    left: 526px;
    position: absolute;
    top: 240px;
    width: 23px;
	z-index:2;
}
#click_img3 {
    cursor: pointer;
    height: 25px;
    left: 616px;
    position: absolute;
    top: 199px;
    width: 30px;
	z-index:2;
}
#click_img4 {
    cursor: pointer;
    height: 47px;
    left: 554px;
    position: absolute;
    top: 349px;
    width: 43px;
	z-index:2;
}
#click_img5 {
    cursor: pointer;
    height: 50px;
    left: 796px;
    position: absolute;
    top: 298px;
    width: 54px;
	z-index:2;
}
#click_img6 {
    cursor: pointer;
    height: 51px;
    left: 790px;
    position: absolute;
    top: 392px;
    width: 49px;
	z-index:2;
}
#click_img7 {
    cursor: pointer;
    height: 56px;
    left: 861px;
    position: absolute;
    top: 373px;
    width: 52px;
	z-index:2;
}
#click_img1_1 {

    height: 27px;
    left: 511px;
    opacity: 0;
    position: absolute;
    top: 207px;
    width: 30px;
}
#click_img2_1 {
    height: 21px;
    left: 526px;
    opacity: 0;
    position: absolute;
    top: 240px;
    width: 21px;
}
#click_img3_1 {
    height: 26px;
    left: 615px;
    opacity: 0;
    position: absolute;
    top: 200px;
    width: 32px;
}
#click_img4_1 {
    height: 45px;
    left: 554px;
    opacity: 0;
    position: absolute;
    top: 350px;
    width: 45px;
}
#click_img5_1 {
    height: 56px;
    left: 793px;
    opacity: 0;
    position: absolute;
    top: 292px;
    width: 56px;
}
#click_img6_1 {
    height: 56px;
    left: 786px;
    opacity: 0;
    position: absolute;
    top: 394px;
    width: 56px;
}
#click_img7_1 {
    height: 56px;
    left: 861px;
    opacity: 0;
    position: absolute;
    top: 374px;
    width: 54px;
}
#click_img1_wrong {
    cursor: pointer;
    display: none;
    height: 40px;
    left: 497px;
    position: absolute;
    top: 191px;
    width: 56px;
}
#click_img2_wrong {
    cursor: pointer;
    display: none;
    height: 32px;
    left: 513px;
    position: absolute;
    top: 232px;
    width: 46px;
}
#click_img3_wrong {
    cursor: pointer;
    display: none;
    height: 42px;
    left: 601px;
    position: absolute;
    top: 189px;
    width: 58px;
}
#click_img4_wrong {
    cursor: pointer;
    display: none;
    height: 68px;
    left: 541px;
    position: absolute;
    top: 341px;
    width: 74px;
}
#click_img5_wrong {
    cursor: pointer;
    display: none;
    height: 60px;
    left: 787px;
    position: absolute;
    top: 295px;
    width: 70px;
}
#click_img6_wrong {
    cursor: pointer;
    display: none;
    height: 51px;
    left: 788px;
    position: absolute;
    top: 390px;
    width: 60px;
}
#click_img7_wrong {
    cursor: pointer;
    display: none;
    height: 68px;
    left: 859px;
    position: absolute;
    top: 363px;
    width: 56px;
}
#drop_over
{
	display: none;
    height: 437px;
    left: 47px;
    opacity: 0.3;
    position: absolute;
    top: 105px;
    width: 870px;
}


 #check_over
{
	 height: 50px;
    left: 758px;
    position: absolute;
    top: 485px;
    width: 146px;
}

#clock
{
    left: 24px;
    position: absolute;
    top: 77px;
}
#clock_gif
{
    display: none;
    left: 14px;
    position: absolute;
    top: 65px;
}


#timer_IMG
{
	left: 45px;
    position: absolute;
    top: 73px;
}
#timer_txt1
{
	font-size: 30px;
    height: 29px;
    left: 62px;
    position: absolute;
    text-align: center;
    top: 114px;
    width: 38px;
}
#timer_txt2
{
	font-size: 30px;
    height: 29px;
    left: 106px;
    position: absolute;
    text-align: center;
    top: 114px;
    width: 38px;

}

#timer
{
    height: 0px;
	left: 351px;
	position: absolute;
	top: 387px;
	width: 165px;
}
#reiniciar_pg2
{
	left: 271px;
    position: absolute;
    top: -300px;
}

#reiniciar_img_pg2
{
	height: 241px;
    left: 0;
    position: absolute;
    top: 0;
    width: 381px;
}

#reiniciar_click_pg2
{
	cursor: pointer;
    height: 48px;
    left: 110px;
    position: absolute;
    top: 158px;
    width: 164px;
}


#siguiente_pg2
{

	 left: 271px;
    position: absolute;
    top: -300px;
}

#siguiente_img_pg2
{
	 height: 241px;
    left: 0;
    position: absolute;
    top: 0;
    width: 381px;
}

#siguiente_click_pg2
{
  	cursor: pointer;
    height: 48px;
    left: 110px;
    position: absolute;
    top: 158px;
    width: 164px;
}