.test{
	/*outline:solid red 1px;*/
}
.test1{
	/*outline:solid green 1px;*/

}

@font-face {
font-family: 'frgotmed';
src: url('FranklinGothicMediCondC.otf') format('opentype'); 
}
@font-face {
font-family: 'frgotbook';
src: url('FranklinGothicBookC.otf') format('opentype'); 
}
@font-face {
font-family: 'frgotbookcmpc';
src: url('FranklinGothicBookCmpC.otf') format('opentype'); 
}

.page-container{	
	position:absolute;
	top: 0px;
	left: 0px;
	/*width:2666px; 
	height:1500px;
	*/
	width: 1920px;
	height: 1080px;
}

body{
	/*overflow:hidden;*/
	overflow: scroll;
	/*cursor: none;*/
	-webkit-user-select: none;
}

#data{
	position:absolute; /* out of flow */
}

#preload{
	position:absolute;
	display:none;
	left: 200px;
	top: 200px;
	width: 1px;
	height: 1px;
}

.exit-button{
	position: absolute;
	width: 283px;
	height: 120px;
	top: 600px;
	left: 1600px;
	background: url(buttons/exit.png) no-repeat top left;
}
.exit-hook{
	position:absolute;
	display:none;
}
.exit-hidden{
	position: absolute;
	display:none;
}
#result-page-text{
	position: absolute;
	left:90px;
	top: 710px;
	width: 1500px;
    font-size: 30px;
    font-family: 'frgotmed';
    color: #454243;
    padding-left:20px;
	line-height:40px;
}
/* ///////////// double icons ////////////////// */

.double-icon{
	position:absolute;
	/*top: 1273px;
	width: 100px;
	height: 200px;
	*/
	top: 917px;
	width: 72px;
	height: 144px;
	background:no-repeat top left;
}

.num{
 text-align: center;
 /*font-size: 88px;*/
 font-size: 63px;
 font-family: 'frgotbookcmpc';
 color: #656263;
}
.num-undef{
	color: #656263;
}
.num-active{
	color: #e76f00;
}
.num-right{
	color: #8d0000;
}
.num-wrong{
	color: #000000;
}

.icon{
width: 100%;
/*height: 100px;*/
height: 72px;

}

.icon-right{
	background-size: 70%;
	background-repeat:no-repeat;
	background-position:center;
	background-image:url(star.png);/* no-repeat top left; */
}
.icon-wrong{
	background-size: 30%;
	background-repeat:no-repeat;
	background-position:center;
	background-image:url(crestik.png);/* no-repeat top left; */
}


/*#di1{
	left: 120px;
}
#di2{
	left: 280px;
}
#di3{
	left: 435px;
}
#di4{
	left: 590px;
}
#di5{
	left: 745px;
}
#di6{
	left: 890px;
}
#di7{
	left: 1045px;
}
#di8{
	left: 1200px;
}
#di9{
	left: 1350px;
}
#di10{
	left: 1510px;
}
*/
#di1{
	left: 86px;
}
#di2{
	left: 201px;
}
#di3{
	left: 313px;
}
#di4{
	left: 424px;
}
#di5{
	left: 536px;
}
#di6{
	left: 641px;
}
#di7{
	left: 752px;
}
#di8{
	left: 864px;
}
#di9{
	left: 972px;
}
#di10{
	left: 1087px;
}

/*
.di1-on{
	background:url(di1-on.png); 
}
.di1-off{
	background:url(di1-off.png); 
}
.di2-on{
	background:url(di2-on.png); 
}
.di2-off{
	background:url(di2-off.png); 
}
.di3-on{
	background:url(di3-on.png); 
}
.di3-off{
	background:url(di3-off.png); 
}
.di4-on{
	background:url(di4-on.png); 
}
.di4-off{
	background:url(di4-off.png); 
}
.di5-on{
	background:url(di5-on.png); 
}
.di5-off{
	background:url(di5-off.png); 
}
.di6-on{
	background:url(di6-on.png); 
}
.di6-off{
	background:url(di6-off.png); 
}
.di7-on{
	background:url(di7-on.png); 
}
.di7-off{
	background:url(di7-off.png); 
}
.di8-on{
	background:url(di8-on.png); 
}
.di8-off{
	background:url(di8-off.png); 
}
.di9-on{
	background:url(di9-on.png); 
}
.di9-off{
	background:url(di9-off.png); 
}
.di10-on{
	background:url(di10-on.png); 
}
.di10-off{
	background:url(di10-off.png); 
}
*/

/* //////////////////// table cells ////////////// */

.table{
	position:absolute;
	/*
	left: 472px;
	top: 456px;
	width: 859px;
	*/
	left: 340px;
	top: 329px;
	width: 619px;
}
.table tr{
	/*height: 110px;*/
	height: 76px;
}

.td1{
	/*width: 158px;*/
	width: 114px;
}

.table .tr-button{
	/*height: 130px;*/
	height: 88px;
}


.cell-small{
	width: 100%;
	height: 76px; /* same as tr */
	background:no-repeat top left;
	
}
.cell-large{
	width: 100%;
	height: 76px; /* same as tr */
	
}
#a1{
}

.a1-off{
}
.a1-on{
	background:url(cell-a1-on.png);
	/*background-color: rgba(255,150,0,0.9);*/
}
.b1-off{
}
.b1-on{
	background:url(cell-b1-on.png);
	/*background-color: rgba(255,150,0,0.9);*/
}
.c1-off{
}
.c1-on{
	background:url(cell-c1-on.png);
	/*background-color: rgba(255,150,0,0.9);*/
}
.d1-off{
}
.d1-on{
	background:url(cell-d1-on.png);
	/*background-color: rgba(255,150,0,0.9);*/
}

.a1-no{
	background:url(cell-a1.png);
	/*background-color: rgba(255,150,0,0.9);*/
}
.b1-no{
	background:url(cell-b1.png);
	/*background-color: rgba(255,150,0,0.9);*/
}
.c1-no{
	background:url(cell-c1.png);
	/*background-color: rgba(255,150,0,0.9);*/
}
.d1-no{
	background:url(cell-d1.png);
	/*background-color: rgba(255,150,0,0.9);*/
}
.a2-no{
	background:url(line.png) center;
	margin:5px;
	width:97%;

	height:20px;
	/*background-color: rgba(255,150,0,0.9);*/
}
.b2-no{
	background:url(line.png) center;
	margin:5px;
	width:97%;

	height:20px;
	/*background-color: rgba(255,150,0,0.9);*/
}
.c2-no{
	background:url(line.png) center;
	margin:5px;
	width:97%;

	height:20px;
	/*background-color: rgba(255,150,0,0.9);*/
}
.d2-no{
	background:url(line.png) center;
	margin:5px;
	width:97%;
	height:20px;
	/*background-color: rgba(255,150,0,0.9);*/
}
/* ////////////// buttons ///////////////// */

.execute_long{
	position:absolute;
	bottom:-3px;
	left:-12px;
	width: 101%;
	/*height: 110px;*/
	height: 85px;
	
	background-repeat: no-repeat;
	background-position: center;
	
}
.execute-anim-layer_long{
	/*border: solid green 3px;*/
	width:100%;
	height: 100%;
	background-image: url(buttons/button_otvet1_long.png);
	background-repeat: no-repeat;
	background-position: center;

}
.execute{
	position:absolute;
	bottom:-3px;
	left: 0px;
	width: 101%;
	/*height: 110px;*/
	height: 85px;
	
	background-repeat: no-repeat;
	background-position: center;
	
}
.execute-anim-layer{
	/*border: solid green 3px;*/
	width:100%;
	height: 100%;
	left:3px;
	background-image: url(buttons/button_otvet1.png);
	background-repeat: no-repeat;
	background-position: center;

}
/*
.execute-anim-1{
	background: url(buttons/button_otvet12.png);
}
.execute-anim-2{
	background: url(buttons/button_otvet2.png);
}
.execute-anim-3{
	background: url(buttons/button_otvet22.png);
}
.execute-anim-4{
	background: url(buttons/button_otvet3.png);
}
.execute-anim-5{
	background: url(buttons/button_otvet32.png);
}
*/
.execute-anim-0{
	background-image: url(buttons/button_otvet1.png) !important;
}
.execute-anim-1{
	background-image: url(buttons/button_otvet2.png) !important;
}
.execute-anim-2{
	background-image: url(buttons/button_otvet3.png) !important;
}

.long-execute{
	bottom: 0px !important;
	
}
.long-execute-layer{
	bottom: 0px !important;
}


#home{
	position:absolute;
	top: 910px;
	left: 1700px;
	width: 160px; /* size of image */
	height: 83px;
	/*background: url(buttons/button_v_na4alo_red.png) no-repeat top left;*/
}
.idle-home{
	background: url(buttons/button_v_na4alo_red.png) no-repeat top left;
}
.pressed-home{
	background: url(buttons/button_v_na4alo_3.png) no-repeat top left;
}
.active-home{
	background: url(buttons/button_v_na4alo_2.png) no-repeat top left;
}

#continue{
	position:absolute;
	top: 910px;
	left: 1650px;
	width: 210px; /* size of image */
	height: 83px;
}
.idle-continue{
	background: url(buttons/button_prodol_1_wight.png) no-repeat top left;
}
.pressed-continue{
	background: url(buttons/button_prodol_3_wight.png) no-repeat top left;
}
.active-continue{
	background: url(buttons/button_prodol_2_wight.png) no-repeat top left;
}

#level1{
	position:absolute;
	/*opacity: 0.5;*/
	top: 744px;
	left: 292px;
	width: 160px; /* size of image */
	height: 83px;
}
.idle-level1{
	background: url(buttons/button_1level_grey.png) no-repeat top left;
}
.selected-level1{
	background: url(buttons/button_1level_red.png) no-repeat top left;
}
.pressed-level1{
	background: url(buttons/button_1level_orange2.png) no-repeat top left;
}
.active-level1{
	background: url(buttons/button_1level_orange.png) no-repeat top left;
}


#level2{
	position:absolute;
	/*opacity: 0.5;*/
	top: 744px;
	left: 445px;
	width: 160px; /* size of image */
	height: 83px;
}
.idle-level2{
	background: url(buttons/button_2level_grey.png) no-repeat top left;
}
.selected-level2{
	background: url(buttons/button_2level_red.png) no-repeat top left;
}
.pressed-level2{
	background: url(buttons/button_2level_orange2.png) no-repeat top left;
}
.active-level2{
	background: url(buttons/button_2level_orange.png) no-repeat top left;
}

#level3{
	position:absolute;
/*	opacity: 0.5;*/
	top: 744px;
	left: 598px;
	width: 160px; /* size of image */
	height: 83px;
}
.idle-level3{
	background: url(buttons/button_3level_grey.png) no-repeat top left;
}
.selected-level3{
	background: url(buttons/button_3level_red.png) no-repeat top left;
}
.pressed-level3{
	background: url(buttons/button_3level_orange2.png) no-repeat top left;
}
.active-level3{
	background: url(buttons/button_3level_orange.png) no-repeat top left;
}




#block_id{
    position:absolute;
	text-align: left end;
	left:339px;
	padding-top:20px;
	width: 620px;
    bottom:430px; 
	z-index:999;
	background-color:#fff;
	border: 1px solid black;
	 
	}
#text_block{
	left:400px;
	top: 260px;
	width: 580px;
    min-height:400px;
    font-size: 30px;
    font-family: 'frgotbookcmpc';
    color: #656263;
    padding-left:20px;
    margin-bottom:-60px;
	line-height:34px;
	}
.next{
	
	width: 101%; /* size of image */
		position:relative;
	bottom:-3px;
	left: -3px;
	height: 85px;
	top: 95px;
	
	z-index:999;
		background-repeat: no-repeat;
	background-position: center;
	
	}


.exit{
	position:relative;
	width: 101%; /* size of image */
	left:-4px;
	height: 85px;
	top: 95px;
	
	z-index:999;
		background-repeat: no-repeat;
	background-position: center;
	}
.next_long{
	position:relative;
	width: 101%; /* size of image */
	left:-4px;
	height: 85px;
	top: 95px;
	bottom:1px;
	z-index:999;
		background-repeat: no-repeat;
	background-position: center;
	}
.next_anim{
	
	width: 101%; /* size of image */
	bottom:-3px;
	left: -3px;
	height: 85px;
	top: 95px;
	background: url(buttons/button_sled_vopros1.png);
	z-index:999;
		background-repeat: no-repeat;
	background-position: center;
	}
.exit_anim{
	
	width: 101%; /* size of image */
	left:-4px;
	height: 85px;
	top: 95px;
	background: url(buttons/button_zakonchit_1.png);
	z-index:999;
		background-repeat: no-repeat;
	background-position: center;
	}
.next_anim_long{
	
width: 101%; /* size of image */
	left:-2px;
	height: 85px;
	top: 95px;
	background: url(buttons/button_sled_vopr1_long.png);
	z-index:999;
		background-repeat: no-repeat;
	background-position: center;
	}
	
	
#top{
    position:absolute;
	width: 629px; /* size of image */
	left:1221px;
	height: 304px;
	top: 512px;
	background: url(buttons/top.png);
	z-index:999;
		background-repeat: no-repeat;
	background-position: center;
}