tv_xiaoyouxi/games/bhlb/css/style.css

html,body,div,p,ul,li,span,h1,h2,h3 { 
	padding: 0;
	margin: 0;
	
}
html,body{
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: #fff;
}

.view {
	width: 640px;
	height: 100%;
	margin: 0 auto;
	background: url(../images/bg.jpg) center 0 no-repeat;
	background-size: cover;
	-webkit-touch-callout: none;  /*防止用户复制和保存图片*/
	-webkit-user-select: none;    /*禁用了复制粘贴功能*/
	-moz-user-select: none;
	position: relative;
}

#page_index,#page_game,#page_gameOver{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

/*page_index*/
.index_img {
	width: 523px;
	height: 310px;
	background: url(../images/index_img.png) no-repeat;
	margin-left: 60px;
	margin-top: 120px;
}
.index_text {
	height: 47px;
	background: url(../images/index_text.png) no-repeat;
	padding-left: 340px;
	line-height: 50px;
	font-size: 40px;
	margin-top: 20px;
	margin-left: 120px;
}
#start_btn {
	position: absolute;
	display: inline-block;
	width: 290px;
	height: 302px;
	background: url(../images/start_btn.png) no-repeat;
	bottom: 80px;
	left: 175px;
}
.boyaaLogo {
	display: inline-block;
	position: absolute;
	width: 224px;
	height: 52px;
	background: url(../images/boyaalogo.png) no-repeat;
	right: 15px;
	bottom: 10px;
}

#voice_btn,.help_btn {
	display: inline-block;
	width: 67px;
	height: 72px;
	position: absolute;
	top: 20px;
	background: url(../images/top_btn.png) no-repeat;
}
#voice_btn{
	left: 20px;
	background-position: 0 0;
}
#voice_btn.off{
	background-position: 0 -80px;
}
.help_btn{
	right: 20px;
	background-position: 0 -160px;
}


/*page_game*/
header .highest,header .score,#new_game_button,#share_btn,#continue_btn{
	background: url(../images/btn_img.png) no-repeat;
	display: inline-block;
}

header {
	display: block;
	width: 100%;
	overflow: hidden;
	padding-top:30px;
	padding-bottom: 30px;
}
header .highest,header .score{
	float: left;
	width: 202px;
	height: 94px;
	margin-left: 10px;
	overflow: hidden;
}
header .highest span,header .score span{
	display: block;
	width: 90px;
	height: 30px;
	margin-top: 47px;
	margin-left: 75px;
	text-align: center;
	font-size: 26px;
	line-height: 30px;
}

header .highest {
	margin-left: 15px;
	background-position: 0 -328px;
}
header .score {
	background-position: 0 -216px;
}


header #new_game_button {
	display: block;
	width: 81px;
	height: 87px;
	float: right;
	margin-right: 30px;
	background-position: 0 -437px;
}

header p {
	font-family: Arial;
	font-size: 25px;
	margin: 5px auto;
}

#game_container {
	width: 100%;
	overflow: hidden;
	position: absolute;
	top:50%;
	left: 50%;
	margin-left: -290px;
	margin-top: -230px;
}

#grid_container {
	width: 580px;
	height: 660px;
	background-color: #102F42;
	border-radius: 10px;
	position: relative;
}

.grid_cell {
	width: 110px;
	height: 110px;
	border-radius: 6px;
	background-color: #17394D;
	position: absolute;
}

.number_cell {
	border-radius: 6px;
	font-family: Arial;
	font-weight: bold;
	font-size: 20px;
	line-height: 26px;
	text-align: center;
	position: absolute;
	overflow: hidden;
	background-size: 100% 100%;
	z-index: 3;
}
.number_cell span{
	display: block;
	width: 60px;
	height: 25px;
	margin: 100px auto 0 auto; 
	background-color: rgba(0, 0, 0, 0.6);
	border: 2px solid #fff;
	border-radius: 10px;
}

footer{
	display: block;
	margin: 0px auto;
	width: 100px;
	padding: 10px 10px;
	font-family: Arial;
	color: white;
	border-radius: 10px;
	text-decoration: none;
}

/*gameOver*/
#page_gameOver,#page_share{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
}
#page_help {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 640px;
	text-align: center;
	background-image:-webkit-linear-gradient(bottom, #107DE4, #032147);
	background-image:-o-linear-gradient(bottom, #107DE4, #032147);
	background-image:linear-gradient(to top, #107DE4, #032147);
}
#close_help_btn {
	position: absolute;
	bottom: 50px;
	left: 50%;
	margin-left: -185px;
}

#page_gameOver:before,#page_share:before{
	display: block;
	content: " ";
	background-color: rgba(0, 0, 0, 0.7);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right:0;
}

#gameOver {
	position: relative;
	width: 602px;
	height: 650px;
	background: url(../images/gameover.png) no-repeat;
	z-index: 10;
	top:50%;
	left: 50%;
	margin-left: -301px;
	margin-top: -350px;
	overflow: hidden;
}

#this_score {
	position: absolute;
	top:325px;
	left: 250px;
	font-size: 40px;
	font-weight: 700;
}

#highest_score {
	position: absolute;
	top:420px;
	left: 370px;
	font-size: 40px;
	color:#4a85af;
	font-weight: 700;
}

#share_btn,#continue_btn{
	width: 269px;
	height: 95px;
	position: absolute;
	top:550px;
}
#share_btn{
	background-position: 0 0;
	left: 20px;
}

#continue_btn{
	background-position: 0 -109px; 
	right: 20px;
}

#grid_container .number_cell {
	position: absolute;
	-webkit-transition: -webkit-transform 200ms ease-in-out;
	-moz-transition: -moz-transform 200ms ease-in-out;
	transition: transform 200ms ease-in-out;
	background-image: url(../images/ren.png);
	background-repeat:  no-repeat;
	background-size: 120px 727px;
}

.anim_add{
    width:180px;
    height: 180px;
    position:absolute;
    z-index:12;
    background:url(../images/animation1.png) no-repeat 180px bottom;
    -webkit-animation:add 400ms steps(10) 0s;
}

@-webkit-keyframes add{
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1800px 0;
    }
}

.anim_eli{
    width:200px;
    height: 200px;
    position:absolute;
    z-index:12;
    background:url(../images/animation2.png) no-repeat 200px bottom;
    -webkit-animation:eli 400ms steps(7) 0s;
}

@-webkit-keyframes eli{
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1400px 0;
    }
}

.cont_wrap{
	position: absolute;
	z-index: 11;
	top:15px;
	right: 0px;
}

.boss_key, .boss_Qr {
    position: absolute;
    bottom: 50px;
}
.boss_key {
    left: 50%;
    margin-left: 450px;
}

.boss_Qr {
    left: 50%;
    margin-left: -674px;
}