.btn {
  width: 100%;
  height: 70px;
  border: none;
  max-width: 100%;
  cursor: pointer;
}

/* btnAnswer */
.btnAnswer {
  background: url(../images/btn-answer.png) no-repeat;
  background-size: 100%;
}

.btnAnswer.active {
  background: url(../images/btnAnswer-active.png) no-repeat;
  background-size: 100%;
}

/* btnDiagram */
.btnDiagram {
  background: url(../images/btn-diagram.png) no-repeat;
  background-size: 100%;
}

.btnDiagram.active {
  background: url(../images/btnDiagram-active.png) no-repeat;
  background-size: 100%;
}

.btnDetail.active {
  background: url(../images/btnDiagram-active.png) no-repeat;
  background-size: 100%;
}

/* btnPencil */
.btnPencil {
  background: url(../images/btn-pencil.png) no-repeat;
  background-size: 100%;
}

.btnPencil.active {
  background: url(../images/btnPencil-active.png) no-repeat;
  background-size: 100%;
}

/* btnEraser */
.btnEraser {
  background: url(../images/btn-eraser.png) no-repeat;
  background-size: 100%;
}

.btnEraser.active {
  background: url(../images/btnEraser-active.png) no-repeat;
  background-size: 100%;
}

/* btnReset */
.btnReset {
  background: url(../images/btn-reset.png) no-repeat;
  background-size: 100%;
}

.btnReset.active {
  background: url(../images/btn-reset-active.png) no-repeat;
  background-size: 100%;
}

/* btnSwitch */
.btnSwitch {
  background: url(../images/button-swap-left.png) no-repeat;
  background-size: 100%;
}

.btnSwitch.change {
  background: url(../images/button-swap-right.png) no-repeat;
  background-size: 100%;
}