* {
  margin: 0;
  padding: 0;
  border: 0;
}
html, body {
	-ms-touch-action: none
}
html {
	background: rgba(0,0,0,0.85);
	overflow: hidden
}

img {
	border: 0
}

body {
  /* padding-top: 100px; */
  /*火狐*/
  -webkit-user-select: none;
     -moz-user-select: none;
  /*webkit浏览器*/
      -ms-user-select: none;
  /*早期浏览器*/
          user-select: none; 

  background: #000;
  /*IE10*/

   -khtml-user-select: none;
}

.wrapper {
  position: relative;
  width: 900px;
  height: 600px;
  margin: 0 auto;
}

.wrapper .game-box {
  position: relative; 

  width: 100%;
}

.wrapper .game-box .toolbar {
  font-size: 24px;
  line-height: 104px;

  position: relative; 

  width: 100%;
  height: 104px;

  background: url('images/toolbar3.png') center no-repeat;
  background-size: cover;
}

.wrapper .game-box .toolbar .time {
  line-height: 34px; 

  position: absolute;
  top: 32px;
  left: 80px;
}

.wrapper .game-box .toolbar .more {
  /* line-height: 34px; */

  position: absolute;
  top: 0px;
  left: 180px;

  width: 68px;
  height: 74px;

  cursor: pointer;

}

.wrapper .game-box .toolbar .pause {
  line-height: 34px;

  position: absolute;
  top: 0px;
  left: 280px;

  width: 70px;
  height: 74px;

  cursor: pointer;

}

.wrapper .game-box .toolbar .level {
  line-height: 34px; 

  position: absolute;
  top: 20px;
  left: 380px;

  height: 34px;
}

.wrapper .game-box .toolbar .level img {
  height: 34px;
}

.wrapper .game-box .toolbar .disorder {
  position: absolute;
  left: 471px;

  width: 65px;
  height: 74px;

  cursor: pointer;
}

.wrapper .game-box .toolbar .disorder img {
  position: absolute;
  top: 50px; 
  right: 0;
}

.wrapper .game-box .toolbar .scoring {
  line-height: 34px;

  position: absolute;
  top: 30px;
  left: 695px;

  width: 205px;
  height: 34px;

}

.wrapper .game-box .toolbar .scoring img {
  height: 34px;
}


.wrapper .game-box .toolbar .hint {
  position: absolute;
  left: 555px;

  width: 65px;
  height: 74px;

  cursor: pointer;
}

.wrapper .game-box .toolbar .hint img {
  position: absolute;
  top: 50px; 
  right: 0;
}

.wrapper .game-box .game-area {
  position: relative;
}

.wrapper .game-box .game-area table#game {
  border-spacing: 0; 
  border-collapse: collapse;
}


.wrapper .game-box .game-area table#game .game-row td {
  width: 80px;
  height: 80px;

  text-align: center;
  vertical-align: middle;
}

.wrapper .game-box .game-area table#game .game-row td .pic-box {
  line-height: 64px;

  display: inline-block;

  width: 64px;
  height: 64px;

  cursor: pointer;

  background: url('images/pic-bg.png') center no-repeat;
  background-size: contain;
}

.wrapper .game-box .game-area table#game .game-row td .pic-box.active {
  width: 80px;
  height: 80px;

  border-radius: 16px; 
  background: url('images/active.png') center no-repeat;
  background-size: 124%;
}

.wrapper .game-box .game-area table#game .game-row td .pic-box img {
  vertical-align: middle;
}

.wrapper .game-box .game-area #canvas {
  position: absolute;
  left: 0;
  top: 0;

  width: 900px;
  height: 560px;
}

.wrapper .game-over {
  position: absolute;
  top: 0;

  width: 900px;
  height: 600px;

  background: rgba(0, 0, 0, .4) url('images/game-over.png') center no-repeat;
  background-size: auto;
}

.wrapper .game-over .current-score {
  position: absolute;
  top: 180px;
  left: 300px;

  width: 350px;
  height: 60px;

  text-align: center;
}

.wrapper .game-over .history-score {
  font-size: 20px; 

  position: absolute;
  top: 300px;
  left: 400px;

  width: 350px;
  height: 60px;

  color: #999;
}

.wrapper .game-over .replay-btn {
  position: absolute;
  top: 387px;
  left: 301px;

  width: 104px;
  height: 100px;

  cursor: pointer;
}
.wrapper .game-over .over-more-btn {
  position: absolute;
  top: 387px;
  left: 494px;

  width: 104px;
  height: 100px;

  cursor: pointer;
}

.wrapper .game-pause {
  position: absolute;
  top: 0;

  width: 900px;
  height: 600px;

  background: rgba(0, 0, 0, .4) url('images/game-pause.png') center no-repeat;
  /* background-size: auto; */
}

.wrapper .game-pause .resume-btn {
  position: absolute;
  top: 180px;
  left: 397px;

  width: 104px;
  height: 100px;

  cursor: pointer;
}

.wrapper .game-pause .pause-home-btn {
  position: absolute;
  top: 315px;
  left: 300px;

  width: 104px;
  height: 100px;

  cursor: pointer;
}

.wrapper .game-pause .pause-more-btn {
  position: absolute;
  top: 315px;
  left: 496px;

  width: 104px;
  height: 100px;

  cursor: pointer;
}

.empty {
  opacity: 0;
}

.hidden {
  display: none;
}

.number {
  display: inline-block;

  width: 34px; 
  height: 34px;

  background-size: contain;
}

#loading {
	z-index: 1;
	background: #fff
}

#gameContainer, #adContainer {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0
}

#rotateHint {
	background: rgba(255,255,255,0.85);
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: center;
	display: none;
	z-index: 99999;
	font-family: Arial, Helvetica, Sans-serif;
	padding: 2em;
	color: #000
}
#rotateHint h2 {
	font-size: 20px
}
#rotateHint img.rotate {
	width: 80%;
	max-width: 400px
}
#rotateHint #rotateClose {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 32px;
	height: 32px;
	cursor: pointer
}
.backPos {
	position: absolute;
	left: 0;
	top: 0
}

.progressbar {
	position: absolute;
	top: 300px;
	left: 150px;
	width: 600px;
	border-radius: 8px;
	padding: 4px;
	background-color: #fff;
	box-shadow: 0 -1px 1px rgba(0,0,0,0.4) inset;
	border-collapse: separate
}
.progressbar>div {
	width: 0;
	height: 15px;
	border-radius: 10px;
	background: #b61515;
	background: -moz-linear-gradient(top, hsl(120, 98%, 48%) 0, #096d1c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #096d1c), color-stop(100%, #096d1c));
	background: -webkit-linear-gradient(top, #096d1c 0, #096d1c 100%);
	background: -o-linear-gradient(top, #096d1c 0, #096d1c 100%);
	background: -ms-linear-gradient(top, #096d1c 0, #096d1c 100%);
	background: linear-gradient(to bottom, #096d1c 0, #096d1c 100%)
}

.mouse2Div {
	cursor: pointer
}

#title {
  animation-name: flyIn;
  animation-duration: 2s;
}
@-webkit-keyframes flyIn{
  0%{top:-100px;opacity: 0;}
  100%{opacity: 1;}
}
@keyframes flyIn{
  0%{top: -100px;opacity: 0;}
  100%{opacity: 1;}
}