@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: Carolina;
	src: url('../fonts/carolinaltstd.eot'),
		 url('../fonts/carolinaltstd.ttf'),
		 url('../fonts/carolinaltstd.otf')
}
@font-face{
	font-family: BrunoJBStd;
	src: url('../fonts/BrunoJBStd.eot'),
		 url('../fonts/BrunoJBStd.ttf'),
		 url('../fonts/BrunoJBStd.otf')
}

/*body,html{
background-color: #CCC;
	overflow:scroll !important;
}

#all{
	position:absolute;
	left:0px;
	top:0px;
	width:920px;
	height:585px;
	background-image:url('../cover_case/bg0.png');
	background-repeat:no-repeat;
	overflow:hidden;
	border-radius: 10px;
	margin-top: 7%;
}*/

body,html{
    overflow:none !important;
    background-color:  rgb(204, 204, 204) !important;
}
#all{
    position:absolute;
    top:0px;
    left:0px;
    width:920px;
    height:635px;
    background-image:url("../cover_case/bg0.png");
    background-size:920px 585px;
    background-repeat:no-repeat;
    border-radius: 10px;
    background-color: white;
}
#t1{
	position: absolute;
	left: 75px;
	top: 25px;
	width: 600px;
	font-size: 22px;
	color:black;
	font-family: sans-serif;

}
#t3 {
	position: absolute;
	left: 780px;
	top: 8px;
	width: 110px;
}
#print{
	position: absolute;
	left: 0px;
	cursor:pointer;
}
#restart{
	position: absolute;
	left: 45px;
	cursor:pointer;
}
#restart_msg{
		z-index:2;
		position: absolute;
		top:45px;
		left: 10px;
		display:none;
}
#close_msg{
		z-index:2;
		position: absolute;
		top:45px;
		left: 35px;
		display:none;
}
#close{
	position: absolute;
	left:90px;
	cursor:pointer;
}
#page1, #page2{
	position:absolute;
	left:5px;
	top:45px;
	width:910px;
	height:505px;
}
#page2{
	/*background:url(../images/bg2.png) no-repeat;*/
	display:none;
}
#page1_Instruction{
	position: absolute;
	left:75px;
	top:50px;
	font-family:sans-serif;
	font-size: 13px;
}
#img{
	position: absolute;
	left: 60px;
	width: 710px;
	height: 387px;
	background: url(../images/bg11.png) no-repeat;
	top: 95px;
}
.drag{
	position: absolute;
	left: 88px;
	width: 151px;
	height: 32px;
	background: url('../images/dragbox.png') no-repeat;
	font-family: Jacoby;
	font-size: 17px;
	text-align: center;
	line-height: 34px;
	color: #333;
}
.drop{
	position: absolute;
	left: 580px;
	width: 153px;
	height: 31px;
	background: url('../images/dropbox.png') no-repeat;
	font-family: Jacoby;
	font-size: 12px;
	text-align: center;
	line-height: 34px;
	border-radius: 12px;
	border: 2px solid rgba(102, 102, 255, 0);
	color: #333;
}
#drag1, #drop1, #dropBox1{
	top:150px;
}
#drag2, #drop2, #dropBox2{
	top:200px;
}
#drag3, #drop3, #dropBox3{
	top:250px;
}
#drag4, #drop4, #dropBox4{
	top:300px;
}
#drag5, #drop5, #dropBox5{
	top:350px;
}
#drag6, #drop6, #dropBox6{
	top:400px;
}
.arrow{
	z-index:1;
	position:absolute;
	left:240px;
	width:17px;
	height:19px;
	background:url(../images/arrow.png) no-repeat;
	cursor:pointer;
}
#arrow1, #dot1{
	top:157px;
}
#arrow2, #dot2{
	top:207px;
}
#arrow3, #dot3{
	top:257px;
}
#arrow4, #dot4{
	top:307px;
}
#arrow5, #dot5{
	top:357px;
}
#arrow6, #dot6{
	top:407px;
}
.dot{
	position:absolute;
	left:550px;
	width:20px;
	height:20px;
	background:url(../images/dot.png) no-repeat;
	cursor:pointer;
}
canvas{
	z-index:0;
	position:absolute;
	left:5px;
	top:45px;
}
.dropBox{
	position:absolute;
	left:550px;
	width:272px;
	height:30px;
}
.result_img{
	position:absolute;
	left:800px;
	display:none;
}
#img1{
	top:140px;
}
#img2{
	top:190px;
}
#img3{
	top:240px;
}
#img4{
	top:290px;
}
#img5{
	top:340px;
}
#img6{
	top:385px;
}
#check_img
{
	position: absolute;
	left: 762px;
    top: 490px;
    width: 147px;
	height:auto;
	opacity:1;
}
#check_over{
	position: absolute;
	left: 758px;
	top: 490px;
	width: 146px;
	height: 54px;
	background-color:rgba(0,0,0,0);
	cursor:pointer;
}
#reiniciar, #siguiente{
	z-index:2;
	position: absolute;
	left: 280px;
    top: -300px;
	width: 252px;
	height: 172px;
}
#reiniciar_img, #siguiente_img{
	position: absolute;
	left: 0;
	top: 0;
	width:inherit;
	height:inherit;
}
#reiniciar_click, #siguiente_click{
	position: absolute;
	left: 62px;
	top: 100px;
	width: 136px;
	height: 53px;
	cursor: pointer;
}
#page2Heading{
	font-size: 22px;
    left: 30px;
    position: absolute;
    top: 9px;
	font-family: Trebuchet MS;
}
#inputbox1
{
	background: none repeat scroll 0 0 transparent;
    border-bottom: 1px solid black;
    border-left: medium none;
    border-top: medium none;
    font-size: 24px;
    left: 214px;
    position: absolute;
    top: 236px;
    width: 436px;
}
#inputbox2{
  	background: none repeat scroll 0 0 transparent;
    border-bottom: 1px solid black;
    border-left: medium none;
    border-top: medium none;
    font-size: 24px;
    left: 324px;
    position: relative;
    top: 334px;
    width: 169px;
}
#bg2{
	position:absolute;
	left:0px;
	right:0px;
	margin:0 auto;
	top:38px;
	text-align:center;
}

#page2_inst {
	position: absolute;
	top: 25px;
	left: 100px;
	font-family:sans-serif;
	font-size: 13px;
	width: 880px;
	text-align: left;

}
#bgImg2{
	position: absolute;
	background: url(../images/bgimg21.png) no-repeat;
	width: 841px;
	height: 441px;
	left: 36px;
	top: 62px;
}
 #field_2 {
	height: 400px;
	cursor: default;
	margin-left: -10px;
	position: absolute;
	display: none;
	z-index: 1;
}

#correct_2 {
	position: absolute;
	margin-top: -50px;
	margin-left: 320px;
	width: 250px;
}


#field1_2 {
	height: 400px;
	cursor: default;
	margin-left: -10px;
	position: absolute;
	display: none;
	z-index: 1;
}

#reiniciar_1 {
	position: absolute;
	width: 175px;
	height: 60px;
	left: 405px;
	top: 334px;
	cursor: pointer;
}

#wrong_2 {
	position: absolute;
	margin-top: -50px;
	margin-left: 320px;
	width: 250px;
}

#countdown_text{
	position: absolute;
	font-size: 30px;
	font-weight: bold;
	left: 412px;
	top: 455px;
	z-index: 1;
}

#dif1{
	position: absolute;
	background-color: transparent;
	width: 52px;
	height: 48px;
	top: 101px;
	left: 592px;
	cursor: pointer;
	display: block;
	z-index:2;
}
#dif2{
	position: absolute;
	background-color: transparent;
	width: 30px;
	height: 30px;
	top: 127px;
	left: 759px;
	cursor: pointer;
	display: block;
	z-index:2;
}
#dif3{
	position: absolute;
	background-color: transparent;
	width: 29px;
	height: 30px;
	top: 168px;
	left: 638px;
	cursor: pointer;
	display: block;
	z-index:2;
}
#dif4{
	position: absolute;
	background-color: transparent;
	width: 29px;
	height: 30px;
	top: 201px;
	left: 800px;
	cursor: pointer;
	display: block;
	z-index:2;
}
#dif5{
	position: absolute;
	background-color: transparent;
	width: 53px;
	height: 56px;
	top: 234px;
	left: 479px;
	cursor: pointer;
	display: block;
	z-index:2;
}
#dif6{
	position: absolute;
	background-color: transparent;
	width: 33px;
	height: 30px;
	top: 302px;
	left: 574px;
	cursor: pointer;
	display: block;
	z-index:2;
}
#dif7{
	position: absolute;
	background-color: transparent;
	width: 53px;
	height: 77px;
	top: 243px;
	left: 749px;
	cursor: pointer;
	display: block;
	z-index:2;
}

#block{
	position: absolute;
	width: 400px;
	height: 298px;
	background-color: transparent;
	left: 464px;
	top: 79px;
	cursor: pointer;
	z-index: 1;
	display: none;
}

#dummyImg{
	position: absolute;
	width: 400px;
	height: 298px;
	background-color: transparent;
	left: 464px;
	top: 79px;
	z-index: 1;
	display: none;
}

#r1{
	width: 40px;
	position: absolute;
	top: 106px;
	left: 597px;
	display: none;
	opacity: 0;
}

#r3{
	width: 40px;
	position: absolute;
	top: 161px;
	left: 632px;
	display: none;
	opacity: 0;
}

#r2{
	width: 46px;
	position: absolute;
	top: 118px;
	left: 752px;
	display: none;
	opacity: 0;

}

#r4{
	width: 34px;
	position: absolute;
	top: 202px;
	left: 798px;
	display: none;
	opacity: 0;
}

#r5{
	width: 52px;
	position: absolute;
	top: 227px;
	left: 476px;
	display: none;
	opacity: 0;
}

#r7{
	width: 44px;
	position: absolute;
	top: 253px;
	left: 752px;
	display: none;
	opacity: 0;
}

#r6{
	width: 40px;
	position: absolute;
	top: 304px;
	left: 567px;
	display: none;
	opacity: 0;
}

#box{
    height: 299px;
    left: 476px;
    position: absolute;
    top: 79px;
    width: 397px;
	z-index:1;
}
#clock1 {
    display: none;
height: 54px;
left: 369px;
position: absolute;
top: 407px;
width: 85px;
z-index: 5;
}
#timer1 {
display: block;
height: 74px;
left: 394px;
position: absolute;
top: 419px;
width: 107px;
}
#clock {

    display: block;
     height: 40px;
    left: 375px;
    position: absolute;
    top: 424px;
    width: 45px;
    z-index: 5;
}