@charset "utf-8";
/* CSS Document */
.general
{
 position:fixed;
 width:100%;
 height:100%;
 background-color: #333;
 z-index:0
 }
#Base{
	position:absolute;
	border:4px solid  #88B4B7;
	border-radius: 20px;
	top:10%;
	left:10%; 
	background-color:#000;
	width:80%;
	height:80%;
	z-index:0
	}
#Settings{
	position:absolute;
	border-radius: 20px;
	/*border:1px solid  #CCC;*/ 
	background-color: #000;
	width:100%;height:100%;
	opacity:0.8;
	z-index:9
	}
	#logo_s{
	position:absolute;
	top:5%;
	left:2%;
	width: 20%;
	height: 40%;
	background-repeat:no-repeat;
	}
#Instructions{
	position:absolute;
	top:10%;
	left:20%;
	width:50%;
	color: #FFF; 
	}
#setTime{
	position:absolute;
	top:10%;
	left:19%;
	width:50%;
	color: #FFF; 
}
#setTimeR{
	position:absolute;
	top:25%;
	left:19%;
	width:50%;
	color: #FFF; 
	}
#setSpeed{
	position:absolute;
	top:40%;
	left:19%;
	width:50%;
	color: #FFF; 
}
#setAfr{
	position:absolute;
	top:55%;
	left:19%;
	width:50%;
	color: #FFF; 
	}


#valueTime{
	position:absolute;
	top:10%;
	left: 50%;
	color:#FFF;
	text-align:center;
	background: #333;
	width:5%;
	height:auto;
	border:2px solid #a1a1a1;
	padding:4% 8%; 
	border-radius:30px;
	}
#valueTimeR{
	position:absolute;
	top: 10%;
	left: 50%;
	color:#FFF;
	text-align:center;
	background: #333;
	width:5%;
	height:auto;
	border:2px solid #a1a1a1;
	padding:4% 8%; 
	border-radius:30px;
	}
	#valueSpeed{
	position:absolute;
	top: 10%;
	left: 50%;
	color:#FFF;
	text-align:center;
	background: #333;
	width:5%;
	height:auto;
	border:2px solid #a1a1a1;
	padding:4% 8%;  
	border-radius:30px;
	}
#valueAfr{
	position:absolute;
	top:10%;
	left: 50%;
	color:#FFF;
	text-align:center;
	background: #333;
	width:5%;
	height:auto;
	border:2px solid #a1a1a1;
	padding:4% 8%; 
	border-radius:30px;
	}
#divStart{
	position:absolute;
	border-radius: 20px;
	/*border:1px solid #CCC; */
	background-color: #000;
	width:100%;height:100%;
	color: #FFF; 
	opacity:0.8;
	z-index:9
	
	}

#canvasCirc{
	position:absolute;
	border-radius: 20px; 
	/*background-color: #121212;*/
	z-index:8
	}
#Rec{
	position:absolute;
	border-radius: 20px;
	position: absolute; left:2%;top:90%; 
	color: #FFF; width:40%; height:5%;
	background-color: #333; 
	opacity:0.5;
	/*border:1px solid #d3d3d3;*/
	z-index:8
	}
#missed{
	position:absolute;top:50%;
	border-radius: 200px;
	left:43%;width:15%;height:10%;
	color:#FFF; font-size:large; 
	text-align: center;
	background-color:#033;
	opacity:0.5; z-index:8;
	display:none;
	}
#early{
	position:absolute;top:50%;
	border-radius: 200px;
	left:43%;width:15%;height:10%;
	color:#FFF; text-align:center;
	background-color:#033;
 	opacity:0.5;z-index:8;
	display:none;
		}
#divEnd{
	position:absolute; 
	border-radius: 20px;
	width:100%;
	height:100%;
	z-index:9;
 	opacity:0.8;color:#FFF;
	/*border:1px solid  #CCC;*/ 
	background-color: #121212;
	font-size:24px;
	display:none;
	}
#endScore{
	position:absolute;
	border-radius: 20px;
	left:5%;top:2%;
 	width:50%;height:8%;
  	z-index:9; background-color:#333;
	opacity:0.5;color:#FFF;
	border:1px solid #88B4B7;
	}
#endEarly{
	position:absolute;
	border-radius: 20px;
	left:5%;top:12%;
  	width:50%;height:8%;
 	z-index:9;
  	background-color: #333;
 	opacity:0.5;color:#FFF;
	border:1px solid #d3d3d3; 
	}
#endMissed{
	position:absolute;
	border-radius: 20px;
	left:5%;top:22%;
 	width:50%;height:8%;
	z-index:9;
    background-color: #333;
 	opacity:0.5;color:#FFF;
	border:1px solid #d3d3d3; 
	}
#endErrors{
	position:absolute;
	border-radius: 20px;
	left:5%;top:42%;
 	width:50%;height:8%;
	z-index:9;
  	background-color: #333;
	opacity:0.5;color:#FFF;
	border:1px solid #d3d3d3;
	}
#averageTime{
	position:absolute;
	border-radius: 20px;
	left:5%;top:32%;
 	width:50%;height:8%;
	z-index:9;
  	background-color: #333;
	opacity:0.5;color:#FFF;
	border:1px solid #d3d3d3;
	}
#time{
	position:absolute;
	border-radius: 20px;
	left:5%;top:52%;
 	width:50%;height:8%;
	z-index:9;
  	background-color: #333;
	opacity:0.5;color:#FFF;
	border:1px solid #d3d3d3;
	}
#speedmove{
	position:absolute;
	border-radius: 20px;
	left:5%;top:62%;
 	width:50%;height:8%;
	z-index:9;
  	background-color: #333;
	opacity:0.5;color:#FFF;
	border:1px solid #d3d3d3;
	}
#endAfr{
	position:absolute;
	border-radius: 20px;
	left:5%;top:72%;
 	width:50%;height:8%;
	z-index:9;
  	background-color: #333;
	opacity:0.5;color:#FFF;
	border:1px solid #d3d3d3;
	}
#endButtons{
	position:absolute;
	left:5%;top:82%;
 	width:50%;height:8%;
	z-index:9;
  	color:#FFF;
	
	}
input[type=range] {
    -webkit-appearance: none;
    background-color: #3C0;
    width: 200px;
    height:6px;
}

input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
    background-color: #9F0;
    opacity: 0.5;
    width: 10px;
    height: 26px;
}
  #start1 {
	position:absolute;
	top: 75%;left:40%;
   border-top: 1px solid #96d1f8;
   background: #65d6ba;
   background: -webkit-gradient(linear, left top, left bottom, from(#55d920), to(#65d6ba));
   background: -webkit-linear-gradient(top, #55d920, #65d6ba);
   background: -moz-linear-gradient(top, #55d920, #65d6ba);
   background: -ms-linear-gradient(top, #55d920, #65d6ba);
   background: -o-linear-gradient(top, #55d920, #65d6ba);
   padding: 20px 40px;
   -webkit-border-radius: 40px;
   -moz-border-radius: 40px;
   border-radius: 40px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 36px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
#start1:hover {
   border-top-color: #d6c032;
   background: #d6c032;
   color: #ccc;
   }
#start1:active {
   border-top-color: #a3c7a4;
   background: #a3c7a4;
   }
  #next {
   border-top: 1px solid #96d1f8;
   background: #b7e8dc;
   background: -webkit-gradient(linear, left top, left bottom, from(#7cc5cf), to(#b7e8dc));
   background: -webkit-linear-gradient(top, #7cc5cf, #b7e8dc);
   background: -moz-linear-gradient(top, #7cc5cf, #b7e8dc);
   background: -ms-linear-gradient(top, #7cc5cf, #b7e8dc);
   background: -o-linear-gradient(top, #7cc5cf, #b7e8dc);
   padding: 20px 40px;
   -webkit-border-radius: 40px;
   -moz-border-radius: 40px;
   border-radius: 40px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 24px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
#next:hover {
   border-top-color: #6d8f8c;
   background: #6d8f8c;
   color: #ccc;
   }
#next:active {
   border-top-color: #a3c7a4;
   background: #a3c7a4;
   }
 #playAgain{
	  border-top: 1px solid #96d1f8;
   background: #b7e8dc;
   background: -webkit-gradient(linear, left top, left bottom, from(#7cc5cf), to(#b7e8dc));
   background: -webkit-linear-gradient(top, #7cc5cf, #b7e8dc);
   background: -moz-linear-gradient(top, #7cc5cf, #b7e8dc);
   background: -ms-linear-gradient(top, #7cc5cf, #b7e8dc);
   background: -o-linear-gradient(top, #7cc5cf, #b7e8dc);
   padding: 20px 40px;
   -webkit-border-radius: 40px;
   -moz-border-radius: 40px;
   border-radius: 40px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 24px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
	 }
	#playAgain:hover {
   border-top-color: #6d8f8c;
   background: #6d8f8c;
   color: #ccc;
   }
#playAgain:active {
   border-top-color: #a3c7a4;
   background: #a3c7a4;
   }
  #saveRezult{
	  border-top: 1px solid #96d1f8;
   background: #b7e8dc;
   background: -webkit-gradient(linear, left top, left bottom, from(#7cc5cf), to(#b7e8dc));
   background: -webkit-linear-gradient(top, #7cc5cf, #b7e8dc);
   background: -moz-linear-gradient(top, #7cc5cf, #b7e8dc);
   background: -ms-linear-gradient(top, #7cc5cf, #b7e8dc);
   background: -o-linear-gradient(top, #7cc5cf, #b7e8dc);
   padding: 20px 40px;
   -webkit-border-radius: 40px;
   -moz-border-radius: 40px;
   border-radius: 40px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 24px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
	 }
	#saveRezult:hover {
   border-top-color: #6d8f8c;
   background: #6d8f8c;
   color: #ccc;
   }
#saveRezult:active {
   border-top-color: #a3c7a4;
   background: #a3c7a4;
   }