*{
	margin:0;
}

hr{
	clear:left;
}

body{

	padding:0px;
	background-color:lightblue; 
	margin:0px;
	height:100%;
	width:100%;
	font-family:Arial,Helvetica,sans-serif;
	color:#006699;
	text-align:center;
}

h1{
	margin-top:0px;
	padding-top:0px;
	margin-bottom:0px;
	padding-bottom:0px;
	font-size:large;
	font-weight:bold;
	color:#006699;
	font-family:Arial,Helvetica,sans-serif;
}

h2{
	margin-top:0px;
	padding-top:0px;
	margin-bottom:0px;
	padding-bottom:0px;
	font-weight:bold;
	padding-left:0px;
	color:#006699;
	font-family:Arial,Helvetica,sans-serif;
}
h3{
	color:#006699;
	font-family:Arial,Helvetica,sans-serif;
}

p
{
	padding-left:10px;
	padding-right:10px;
	color:#006699;
	/*font-family:"Comic Sans MS",arial, "lucida console", sans-serif;*/
	font-family:Arial,Helvetica,sans-serif;
}

a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:hover { text-decoration:none; }
a:active { text-decoration:none; }


A:link { text-decoration: none; color:#006666 }
A:visited { text-decoration: none; color:#006699}
A:hover { text-decoration: none; color:#DC143C}


#top10_bg1{
	display:block;
	position:fixed;
	z-index:-1;
	width:100%;height:100%;
background-image:url(http://www.jeuxdemots.org/top10/pics/toptext6.png);
background-repeat:repeat;
background-position:center center;
background-size:120px; 
opacity:0.15;
}

.jdm-term-context {
	color:grey;
	display:inline;
}

#top10_instruction{
	font-size:32pt;
	text-shadow: 2px 2px 3px grey;
	margin-top:30px;
	margin-bottom:20px;
	}
#top10_subinstruction{
	font-size:20pt;
	text-shadow: 2px 2px 3px grey;
	top:-10px;
	position:relative;
	}
		
.top10_qbox{
	z-index:2;
	display:inline-block;
	position: relative;
	width: 80px;
	height: 80px;
	border:1px grey solid;
	margin:0px;
	margin-top:4px;margin-left:4px;margin-right:4px;margin-bottom:4px;
	padding:10px;
	background-color:#008080;
	color:white;
	text-shadow: 2px 2px 3px grey;
	vertical-align: middle;
	border-radius: 10px;
	text-align:center;	
}
.top10_qbox_text{
  height:100%;width:100%;
  overflow: hidden;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border:0px red solid;
  color:white;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}
	
.top10_qbox_text_span{ 
  vertical-align: middle; 
  text-align: center; 
  color:white;
  text-shadow: 2px 2px 3px black;
}



.top10_qbox_outer{
   width: 115px;
   height: 115px;
   display:inline-block;
   overflow: hidden;
}
.top10_label{
	color:white;
	}
	
.top10_user_elements{
	display:inline-block;
	z-index:1;
	color:white;
	text-shadow: 2px 2px 3px grey;
	}

#top10_pname_block{
	z-index:-1;
	display:block;
	position:fixed;left:0px;top:0px;width:200px;
	border:0px red solid;
	color:white;
	height:100%;
	display:table-cell;
	vertical-align:middle;

	}
#top10_pname{
	z-index:-1;
  	display:inline-block;
  	position:fixed;bottom:20px;left:5px;;
  	opacity:0.3;
	font-size:80pt;
	text-shadow: 2px 2px 3px grey;
	color:white;
	border:0px green solid;
	
	transform-origin: left top 0;
	transform: rotate(-90deg);
	
	 -ms-transform: rotate(7deg); /* IE 9 */
	 
	-webkit-transform-origin: left top 0;
    -webkit-transform: rotate(-90deg);
	}	
#top10_score{
	z-index:-1;
	display:inline-block;
	position:relative;left:-25px;top:120px;
	color:white;
	text-shadow: 2px 2px 3px grey;
	opacity:0.9;
	font-size:20pt;
	border:0px blue solid;
	}	
	
#top10question_block{
	display:inline-block;
	top:0px;
	min-width:800px;
	width:60%;
	border:red 0px solid;
	margin-left:auto;
	margin-right:auto;
	}
	
			
.top10_answerbox{
	display:inline-block;
	/*width: 80px;*/
	min-width:80px;
	height: 80px;
	border:2px grey solid;
	margin:2px;
	padding:5px;
	text-align:justify;
	background-color:white;
	color:grey;
	text-shadow: 2px 2px 3px grey;
	vertical-align: middle;
	border-radius: 10px;
}
.top10_answerbox_text{
	line-height:80px;
	opacity:0.5;
	font-size:40pt;
	color:orange;
	display:inline-block;
	border:0px red solid;
	width:100%;
	/*height:100%;*/
	display: inline-block;
  	vertical-align: middle;
  	text-align:center;
	}	
	
.top10_found{
	/*line-height:normal;*/
	line-height:80px;
	opacity:1;
	color:grey;
	font-size:18pt;
	word-wrap: break-word;
	
	}
	
@keyframes colorshake {
            0% { transform:         translate(2px, 1px) rotate(0deg); 
            -webkit-transform:         translate(2px, 1px) rotate(0deg); 
             background-color:white;
            }
            10% { transform:     translate(-1px, -2px) rotate(-2deg); 
             -webkit-transform:     translate(-1px, -2px) rotate(-2deg); 
            }
           20% { transform:     translate(-3px, 0px) rotate(3deg); 
            -webkit-transform:     translate(-3px, 0px) rotate(3deg); 
           }
           30% { transform:     translate(0px, 2px) rotate(0deg);
           -webkit-transform:     translate(0px, 2px) rotate(0deg);
           }
            40% { transform:     translate(1px, -1px) rotate(1deg); 
             -webkit-transform:     translate(1px, -1px) rotate(1deg); 
            }
           50% { transform:     translate(-1px, 2px) rotate(-1deg); 
            -webkit-transform:     translate(-1px, 2px) rotate(-1deg); 
            background-color:lightgreen;
           }
            60% { transform:     translate(-3px, 1px) rotate(0deg); 
             -webkit-transform:     translate(-3px, 1px) rotate(0deg); 
            }
           70% { transform:     translate(2px, 1px) rotate(-2deg); 
            -webkit-transform:     translate(2px, 1px) rotate(-2deg); 
           }
            80% { transform:     translate(-1px, -1px) rotate(4deg); 
             -webkit-transform:     translate(-1px, -1px) rotate(4deg);
            }
          90% { transform:     translate(2px, 2px) rotate(0deg); 
           -webkit-transform:     translate(2px, 2px) rotate(0deg); 
          }
           100% { transform:     translate(1px, -2px) rotate(-1deg); 
            -webkit-transform:     translate(1px, -2px) rotate(-1deg); 
            background-color:white;
           }           
}


 @-webkit-keyframes colorshake {
            0% {-webkit-transform:         translate(2px, 1px) rotate(0deg); 
             background-color:white;
            }
            10% { -webkit-transform:     translate(-1px, -2px) rotate(-2deg); 
            }
           20% { -webkit-transform:     translate(-3px, 0px) rotate(3deg); 
           }
           30% {-webkit-transform:     translate(0px, 2px) rotate(0deg);
           }
            40% {  -webkit-transform:     translate(1px, -1px) rotate(1deg); 
            }
           50% { -webkit-transform:     translate(-1px, 2px) rotate(-1deg); 
            background-color:lightgreen;
           }
            60% {-webkit-transform:     translate(-3px, 1px) rotate(0deg); 
            }
           70% { -webkit-transform:     translate(2px, 1px) rotate(-2deg); 
           }
            80% {  -webkit-transform:     translate(-1px, -1px) rotate(4deg);
            }
          90% { -webkit-transform:     translate(2px, 2px) rotate(0deg); 
          }
           100% { -webkit-transform:     translate(1px, -2px) rotate(-1deg); 
            background-color:white;
           }           
}

@keyframes shake {
            0% { transform:         translate(2px, 1px) rotate(0deg); 
            -webkit-transform:         translate(2px, 1px) rotate(0deg); 
            }
            10% { transform:     translate(-1px, -2px) rotate(-2deg); 
             -webkit-transform:     translate(-1px, -2px) rotate(-2deg); 
            }
           20% { transform:     translate(-3px, 0px) rotate(3deg); 
            -webkit-transform:     translate(-3px, 0px) rotate(3deg); 
           }
           30% { transform:     translate(0px, 2px) rotate(0deg);
           -webkit-transform:     translate(0px, 2px) rotate(0deg);
           }
            40% { transform:     translate(1px, -1px) rotate(1deg); 
             -webkit-transform:     translate(1px, -1px) rotate(1deg); 
            }
           50% { transform:     translate(-1px, 2px) rotate(-1deg); 
            -webkit-transform:     translate(-1px, 2px) rotate(-1deg); 
           }
            60% { transform:     translate(-3px, 1px) rotate(0deg); 
             -webkit-transform:     translate(-3px, 1px) rotate(0deg); 
            }
           70% { transform:     translate(2px, 1px) rotate(-2deg); 
            -webkit-transform:     translate(2px, 1px) rotate(-2deg); 
           }
            80% { transform:     translate(-1px, -1px) rotate(4deg); 
             -webkit-transform:     translate(-1px, -1px) rotate(4deg);
            }
          90% { transform:     translate(2px, 2px) rotate(0deg); 
           -webkit-transform:     translate(2px, 2px) rotate(0deg); 
          }
           100% { transform:     translate(1px, -2px) rotate(-1deg); 
            -webkit-transform:     translate(1px, -2px) rotate(-1deg); 
           }           
}

 @keyframes colorit {            
           0% {background-color:white;}
           50% {background-color:lightgreen;}
           100% {background-color:white;}
}
 @-webkit-keyframes colorit {            
           0% {background-color:white;}
           50% {background-color:lightgreen;}
           100% {background-color:white;}
}

 @keyframes coloritred {            
           0% {background-color:white;}
           50% {background-color:pink;}
           100% {background-color:white;}
}
@-webkit-keyframes coloritred {            
           0% {background-color:white;}
           50% {background-color:pink;}
           100% {background-color:white;}
}

 @keyframes coloritorange {            
           0% {background-color:white;}
           50% {background-color:orange;}
           100% {background-color:white;}
}
@-webkit-keyframes coloritorange {            
           0% {background-color:white;}
           50% {background-color:orange;}
           100% {background-color:white;}
}

 @keyframes colorityellow {            
           0% {background-color:white;}
           50% {background-color:#FEFF99;}
           100% {background-color:white;}
}
 @-webkit-keyframes colorityellow {            
           0% {background-color:white;}
           50% {background-color:#FEFF99;}
           100% {background-color:white;}
}

     
        
 .shaking {
	-webkit-animation: shake 2s; /* Chrome, Safari, Opera */
	animation: shake 2s;
}

.coloring {
	-webkit-animation: colorit 2s; /* Chrome, Safari, Opera */
	animation: colorit 2s;
}
.coloringred {
	-webkit-animation: coloritred 2s; /* Chrome, Safari, Opera */
	animation: coloritred 2s;
}
.coloringorange {
	-webkit-animation: coloritorange 2s; /* Chrome, Safari, Opera */
	animation: coloritorange 2s;
}
.coloringyellow {
	-webkit-animation: colorityellow 2s; /* Chrome, Safari, Opera */
	animation: colorityellow 2s;
}

 .colorsshaking {
	-webkit-animation: colorshake 2s; /* Chrome, Safari, Opera */
	animation: colorshake 2s;
}

#top10_main_block{
	position:absolute;
	border:0px solid red;
	top:130px;
	left:140px;
	right:10px;
	bottom:0px;
	padding-bottom:30px;
}

#top10_main_title_block{
	z-index:10;
	position:fixed;
	top:0px;left:-2px;right:0px;
	height:100px;
	line-height:100px;
	background-color:#141414;
	color:white;
	font-size:48pt;
	box-shadow: 0px 3px 10px black;
}

.top10_pawn{
	display:inline-block;
	position:relative;
	top:-25px;left:42px;z-index:9;
	width:22px;	
	transform: rotate(-17deg);
	-ms-transform: rotate(-17deg); /* IE 9 */
    -webkit-transform: rotate(-17deg);
    opacity:0.9;
}
.top10_stiker{
	display:block;
	position:relative;
	top:-125px;left:10px;z-index:10;	
	border-radius: 50%;
	width: 10px;
	height: 10px;
	background-color:yellow;
	border:1px solid black;
}

.not-active {
   pointer-events: none;
   cursor: default;
}