*{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

body{
	background-color: #333;
	background: -webkit-linear-gradient(#333, #111); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#333, #111); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#333, #111); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#333, #111); /* Standard syntax */
  background-attachment: fixed;
  background: center center cover;
}

.wrapper{
	width: 960px;
	height: 600px;
	margin: 0 auto;
	position: relative;
	z-index: 0;
	font-family: 'Righteous', cursive;
} 

/*-----------------color default-----------------*/
.green{
	background-color:green;
	background: -webkit-linear-gradient(left top, #00CC66, green); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #00CC66, green); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #00CC66, green); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #00CC66, green); /* Standard syntax */
	border-radius: 100% 0 0 0;
  -moz-border-radius: 100% 0 0 0;
  -webkit-border-radius: 100% 0 0 0;
 }
.red{
	background-color:red;
	background: -webkit-linear-gradient(right top, #FF6666, red); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom left, #FF6666, red); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom left, #FF6666, red); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom left, #FF6666, red); /* Standard syntax */
	border-radius:  0 100% 0 0;
  -moz-border-radius: 0 100% 0 0;
  -webkit-border-radius: 0 100% 0 0;
}
.blue{
	background-color:blue;
	background: -webkit-linear-gradient(bottom right, #3399FF, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top left, #3399FF, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top left, #3399FF, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top left, #3399FF, blue); /* Standard syntax */
	border-radius: 0 0 100% 0;
  -moz-border-radius: 0 0 100% 0;
  -webkit-border-radius: 0 0 100% 0;
}
.yellow{
	background-color:yellow;
	background: -webkit-linear-gradient(bottom left, #FFFF99, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top right, #FFFF99, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top right, #FFFF99, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top right, #FFFF99, yellow); /* Standard syntax */
	border-radius: 0 0 0 100%;
  -moz-border-radius: 0 0 0 100%;
  -webkit-border-radius: 0 0 0 100%;
}


/*------------------color clicked----------------*/
.lightgreen{
	background-color:lightgreen;
	background: linear-gradient(to bottom right, #00CC66, lightgreen);
	background: -o-linear-gradient(bottom right, #00CC66, lightgreen); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #00CC66, lightgreen); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #00CC66, lightgreen); /* Standard syntax */
	border-radius: 100% 0 0 0;
  -moz-border-radius: 100% 0 0 0;
  -webkit-border-radius: 100% 0 0 0;
}
.lightred{
	background-color:pink;
	background: -webkit-linear-gradient(right top, #FF6666, pink); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom left, #FF6666, pink); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom left, #FF6666, pink); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom left, #FF6666, pink); /* Standard syntax */
	border-radius:  0 100% 0 0;
  -moz-border-radius: 0 100% 0 0;
  -webkit-border-radius: 0 100% 0 0;
}
.lightblue{
	background-color:aliceblue;
	background: -webkit-linear-gradient(bottom right, #3399FF, aliceblue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top left, #3399FF, aliceblue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top left, #3399FF, aliceblue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top left, #3399FF, aliceblue); /* Standard syntax */
	border-radius: 0 0 100% 0;
  -moz-border-radius: 0 0 100% 0;
  -webkit-border-radius: 0 0 100% 0;
}
.lightyellow{
	background-color:lightyellow;
	background: -webkit-linear-gradient(bottom left, #FFFF99, lightyellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top right, #FFFF99, lightyellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top right, #FFFF99, lightyellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top right, #FFFF99, lightyellow); /* Standard syntax */
	border-radius: 0 0 0 100%;
  -moz-border-radius: 0 0 0 100%;
  -webkit-border-radius: 0 0 0 100%;
}

/*---------------------game board-------------------------*/
.board{
	width: 400px;
	height: 400px;
	margin: 0 auto;
	font-size:0;  
	background-color: gold;
	border-radius: 50%;
	position: relative;
	z-index: 10;
}

.rim{
	width: 425px;
	height: 425px;
	position: relative;
	z-index: 9;
	background-color: #222;
	border-radius: 50%;
	top: -412.5px;
	left: 267.5px;
	background: -webkit-linear-gradient(bottom right, #000,#000, grey, #000); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top left, #000,#000, grey, #000); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top left, #000,#000, grey, #000); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top left, #000,#000, grey, #000); /* Standard syntax */
}
.square{
	width:200px;
	height:200px;
	display: inline-block; 
	position: relative;
	z-index: 20;
}
.square:hover{cursor: pointer;}

.button{
	width: 100px;
	height: 100px;
	font-size: 24px;
	position: relative;
	z-index: 100; 
	text-align: center;
	border-radius: 50%;
	background-color: #222;
	top: -275px;
	left: 125px;
	color: whitesmoke;
	padding: 25px;
	background: -webkit-linear-gradient(bottom right, #000, #555); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top left, #000, #555); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top left, #000, #555); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top left, #000, #555); /* Standard syntax */
}

.play_button:hover{  
	background: -webkit-linear-gradient(bottom right, #000, #666); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top left, #000, #666); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top left, #000, #666); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top left, #000, #666); /* Standard syntax */
	cursor: pointer;
}
.play_text{cursor: pointer;}
.text{position: relative;top: 15px;}

/*------------------------Title---------------------------*/
.title{
	font-size: 65px; 
	width: 960px;
	height: 120px;
	text-align: center;
	font-weight: bolder;  
}

.green_text{display: inline-block;transform:rotate(5deg);color:green;}
.red_text{display: inline-block;transform:rotate(5deg);color:red;}
.blue_text{display: inline-block;transform:rotate(5deg);color:blue;}
.yellow_text{display: inline-block;transform:rotate(5deg);color:gold;}
.pink_text{display: inline-block;transform:rotate(5deg);color:pink;}

.info{
	width: 100px;
	height: auto;  
	position: relative;
	top: -1200px;
	left: 900px;
}

.color{
	width: 100px;
	height: auto;
	position: relative;
	top: -900px;
}
.mode_panel{
	position: relative;
	top: -800px;
	left: -50px;
	width: 150px;
	height: auto;
	font-size: 20px;
	color:grey;
}
.modes{
	color:whitesmoke;
	text-align: center;
	padding-top: 15px; 
	font-size: 30px;
	width: 150px;
	height: 60px;
	border-radius: 5px;
	border: #222 solid 1px;
	background: -webkit-linear-gradient(bottom right, #000, #555); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top left, #000, #555); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top left, #000, #555); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top left, #000, #555); /* Standard syntax */
} 

.modes:hover{
	cursor: pointer;
	background: -webkit-linear-gradient(bottom right, red, orange); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top left, red, orange); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top left, red, orange); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top left, red, orange); /* Standard syntax */
}
.highlighted{
	color:#222;
	font-size: 40px;
	padding-top: 10px;
	padding-bottom: 5px;
	border: grey solid 1px;
	background: -webkit-linear-gradient(bottom right, red, orange); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top left, red, orange); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top left, red, orange); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top left, red, orange); /* Standard syntax */
}

.score{
	width: 350px;
	height: auto;
	position: relative;
	right: -775px;
	top: -970px;
	font-size: 30px;
	color: grey;
}

.footer{
	position: relative;
	top: -860px;
	left: -48px;
	font-size: 12px;
	font-family: Garamond;
	font-weight: normal;
}

.reset{
	position: relative;
	top: -700px;
	left: 140px;
	color:whitesmoke;
	text-align: center;
	padding-top: 7.5px;
	padding-bottom: 7.5px; 
	font-size: 20px;
	width: 100px;
	height: 30px;
	border-radius: 50%;
	border: #333 solid 1px;
	background: -webkit-linear-gradient(bottom right, #222, #999); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top left, #222, #999); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top left, #222, #999); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top left, #222, #999); /* Standard syntax */
}

.reset:hover{
	font-size: 22px;
	padding-top: 7.5px; 
	padding-bottom: 7.5px;
	border: darkred solid 1px;
	background: -webkit-linear-gradient(bottom right, darkred, red); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top left, darkred, red); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top left, darkred, red); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top left, darkred, red); /* Standard syntax */
}

.high_score_panel{
	position: relative;
	top: -1250px;
	left: 900px;
	width: 150px;
	height: 25px;
	font-size: 20px;
	border-radius: 5px;
	text-align: center;
	background: -moz-linear-gradient(gold, orange);
	background: -webkit-linear-gradient(gold, orange);
	background: -o-linear-gradient(gold, orange);
}

.high_score_panel:hover{
	background: -moz-linear-gradient(whitesmoke, pink);
	background: -webkit-linear-gradient(whitesmoke, pink);
	background: -o-linear-gradient(whitesmoke, pink);
	cursor: pointer;
}

.score_board{
	width: 250px;
	height: 30px;
	position: relative;
	left: -100px;
	background-color: gold;
	background: -moz-linear-gradient(gold, orange);
	background: -webkit-linear-gradient(gold, orange);
	background: -o-linear-gradient(gold, orange);
	border-radius: 5px;
}

.score_board:hover{
	background: -moz-linear-gradient(whitesmoke, cyan);
	background: -webkit-linear-gradient(whitesmoke, cyan);
	background: -o-linear-gradient(whitesmoke, cyan);
}

.left{float: left; padding-left: 5px;}
.right{float: right; padding-right: 5px;}

.light{
	position: relative;
	top: -875px;
	left: -40px;
	font-size: 20px;
	color: grey;
}

.light_toggle{
	position: relative;
	top: 5px;
	left: 20px;
}

.light_toggle:hover{
	cursor: pointer;
}

.bright{
	background: -webkit-linear-gradient(white, whitesmoke, whitesmoke); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(white, whitesmoke, whitesmoke); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(white, whitesmoke, whitesmoke); /* For Firefox 3.6 to 15 */
  background: linear-gradient(white, whitesmoke, whitesmoke); /* Standard syntax */
  background-attachment: fixed;
  background: center center cover;
}

.dark{
	background: -webkit-linear-gradient(#333, #111); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#333, #111); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#333, #111); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#333, #111); /* Standard syntax */
  background-attachment: fixed;
  background: center center cover;
}

.modal_box{
	position: fixed;
	top: 0;right: 0;bottom: 0;left: 0;
	text-align: center;
	background: rgba(0,0,0,0.5);
	z-index: 200;
}

.modal_text{
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: whitesmoke;
	background: -moz-linear-gradient(gold, orange);
	background: -webkit-linear-gradient(gold, orange);
	background: -o-linear-gradient(gold, orange);
}

.close_button{
	background: #333;
	color: whitesmoke;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	height: 22px;
	text-decoration: none;
	font-weight: bold;
	border-radius: 50%;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close_button:hover{ background: red; }

.name_input{
	position: relative;
	left: -40px;
}
.save_button{	
	position: relative;
	top: -22px;
	left: 235px;
	color:whitesmoke;
	text-align: center;
	padding-bottom: 7.5px; 
	font-size: 18px;
	width: 70px;
	height: 20px;
	border-radius: 50%;
	border: #333 solid 0.5px;
	background: -webkit-linear-gradient(bottom right, #222, #999); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top left, #222, #999); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top left, #222, #999); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top left, #222, #999); /* Standard syntax */
}

.save_button:hover{
	font-size: 20px;
	padding-bottom: 7.5px;
	border: red solid 0.5px;
	background: -webkit-linear-gradient(bottom right, orange, red); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top left, orange, red); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top left, orange, red); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top left, orange, red); /* Standard syntax */
}