
#shell{
  display: block;
  height: auto;
  width: 470px;
}
.title{
  text-align: center;
}
#skin{
  position: relative;
  display: table;
  margin: 50px auto 0 auto;
}
.chocoban-container {
  position: absolute;
  background-color: #ddd;
  top: 60px;
  left: 174px;
}

.chocoban-container .cell {
  position : absolute;
  -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
  color : #fff;
  text-align : center;
  z-index : 1;
  box-sizing: border-box;
}

.chocoban-container .cell.free {
}

.chocoban-container .cell.tree {
}

.chocoban-container .cell.box, .chocoban-container .cell.boxOnBomb {
}

.chocoban-container .cell.box.onBomb, .chocoban-container .cell.boxOnBomb.onBomb {
}

.chocoban-container .cell.player, .chocoban-container .cell.playerOnBomb {
}

.chocoban-container .cell.wall {
}

.chocoban-container .cell.onBomb {
}

.chocoban-container .cell.moving {
  z-index : 10;
}

.chocoban-container .winTitle {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  background-color: rgba(0,0,0, 0.7);
  z-index: 100;
  color: #fff;
  margin : 0;
}

/* Test de theme ex : theme en nuance de gris... */
.chocoban-container.theme-grey .cell.free {
  background-color : rgb(0,0,0);
}

.chocoban-container.theme-grey .cell.tree {
  background-color : rgb(50,50,50);
}

.chocoban-container.theme-grey .cell.box, .theme-grey .chocoban-container .cell.boxOnBomb {
  background-color : rgba(100, 100, 100);
}

.chocoban-container.theme-grey .cell.player, .chocoban-container .theme-grey .cell.playerOnBomb {
  background-color : rgba(150, 150, 150);
  color : #fff;
}

.chocoban-container.theme-grey .cell.wall {
  background-color : black;
  color : #fff;
}


