@charset "utf-8";
.header
{
	display:block;
	margin:0px auto;
	width:100%;     /* 兼容移动端 */
	text-align:center;
}
.btn
{
	border: none;
	width:100px;
	background-color:rgba(25,130,239,0.1);
	font-family:sans-serif;
	font-size: 18px;
	color: #ECEAEA;
	float: right;
	position: relative;
	border-radius:5px;
}
a
{ 
	text-decoration: none;
	color: #ECEAEA;
}
a:hover
{
	color: white;
	text-decoration: none;
}
#button-cell
{
	width: 100px;
	height: 120px;
	padding: 10px;
	margin: 2px auto;
	background-color: rgba(239,202,26,0.8);
	position: absolute;
	left: 25px;
	top: 150px;
	border-radius: 10px;
}
.button-cell
{
	color: rgba(255,255,255,0.8);
	font-size: 40px;
	font-weight: bold;
	font-family: sans-serif;
	text-align: center;
	position: relative;
}

.header #newgame
{
	display:block;
	margin:0px auto;
	width:230px;
	padding:10px 10px;
	background-color:rgba(254,153,61,0.8);
	font-family:sans-serif;
	font-size: 18px;
	color:white;
	text-decoration:none;
	left: 160px;
	top: 250px;
	position: absolute;
	border-radius:10px;
}
.header #newgame:hover
{
	background-color:rgb(254,153,61);
}
#score-cell
{
	width: 100px;
	height: 70px;
	padding: 10px;
	margin: 2px auto;
	background-color: rgba(25,130,239,0.8);
	position: absolute;
	left: 160px;
	top: 150px;
	border-radius: 10px;
}
.score-cell
{
	color: rgba(255,255,255,0.8);
	font-size: 20px;
	font-weight: bold;
	font-family: sans-serif;
	text-align: center;
	position: relative;
}

#hscore-cell
{
	width: 100px;
	height: 70px;
	padding: 10px;
	margin: 2px auto;
	background-color: rgba(25,130,239,0.8);
	position: absolute;
	left: 295px;
	top: 150px;
	border-radius: 10px;
}
.hscore-cell
{
	color: rgba(255,255,255,0.8);
	font-size: 20px;
	font-weight: bold;
	font-family: sans-serif;
	text-align: center;
	position: relative;
}
.help
{
	width: 50px;
	height: 50px;
	background: url(../img/help.png);
	background-size: 100% 100%;
	border: 0;
	opacity: 0.8;
	left: 360px;
	top: 300px;
	position: absolute;
}
.music
{
	width: 50px;
	height: 50px;
	background: url(../img/music.png);
	background-size: 100% 100%;
	border: 0;
	border-radius: 10px;
	opacity: 0.8;
	left: 295px;
	top: 300px;
	position: absolute;
}
.share
{
	width: 50px;
	height: 50px;
	background: url(../img/share2.png);
	background-size: 100% 100%;
	border-radius: 10px;
	border: 0;
	opacity: 0.8;
	left: 230px;
	top: 300px;
	position: absolute;
}
/* grid-container */
#grid-container
{
	width:460px;
	height:460px;
	padding:50px;
	margin:5px auto;
	top: 50px;
	background-color:rgba(139,185,202,0.5);
	border-radius:10px;
	position:relative;
}
.grid-cell
{
	width:100px;
	height:100px;
	border-radius:6px;
	background-color:rgba(147,201,235,0.5);     /*  利用rgba设置颜色及透明度，防止牵连设置到子div的透明度*/
	position:absolute;
}
.number-cell
{
	border-radius:6px;
	width:100px;
	height:100px;
	font-family:Arial;
	font-weight:bold;
	font-size:60px;
	line-height:100px;
	text-align:center;
	position:absolute;
}
.jiathis_style_32x32
{
	opacity: 0.5;
	/*float: right;
	position: relative;*/
	top: 310px;
	left: 25px;
	position: absolute;
}
/*清除浮动*/
.clearfix:after{
    content:"";
    display:block;
    height:0; 
    visibility:hidden;
    clear:both;
}
.clearfix{zoom:1}	/*for IE6/7 Mac*/		
/* 清除浮动是为了清除使用浮动元素产生的影响。
浮动的元素，高度会塌陷，而高度的塌陷使页面后面的布局不能正常显示，
如背景色不能显示等。三种方法常用 clear：both  overflow:auto/hidden  after; */