CocoRoboDesktop/drawingboard-master/drawingboard/css/index.css

.tools {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tools li {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 28px;
  border-top: #dad7d9 solid 1px;
  background: #fefefe;
  cursor: pointer;
  position: relative;
}

.tools li:hover {
  background: #f2f1f2;
}

.tools li.active {
  background: #e34f51;
}

.hide {
  display: none;
}

.canvasDiv {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../image/canvas_bg.jpg) repeat;
  margin-left: 60px;
}

.icon-tools {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url("../image/tools-28.png");
  background-repeat: no-repeat;
  margin-top: 10px;
}

.icon-color-gray {
  background-position: -0px -0px;
}

.icon-color-red {
  background-position: -28px -0px;
}

.icon-color-black {
  background-position: -56px -0px;
}

.icon-color-blue {
  background-position: -84px -0px;
}

.icon-color-select {
  background-position: -112px -0px;
}

.icon-eye-black {
  background-position: -140px -0px;
}

.icon-eye-select {
  background-position: -168px -0px;
}

.icon-noeye-black {
  background-position: -196px -0px;
}

.icon-noeye-select {
  background-position: -0px -28px;
}

.icon-grids-black {
  background-position: -28px -28px;
}

.icon-grids-select {
  background-position: -56px -28px;
}

.icon-nogrids-black {
  background-position: -84px -28px;
}

.icon-nogrids-select {
  background-position: -112px -28px;
}

.icon-pen-black {
  background-position: -140px -28px;
}

.icon-pen-select {
  background-position: -168px -28px;
}

.icon-move-black {
  background-position: -196px -28px;
}

.icon-move-select {
  background-position: -0px -56px;
}

.icon-text-black {
  background-position: -28px -56px;
}

.icon-text-select {
  background-position: -56px -56px;
}

.icon-dottedline-arrow-black {
  background-position: -84px -56px;
}

.icon-dottedline-arrow-select {
  background-position: -112px -56px;
}

.icon-line-black {
  background-position: -140px -56px;
}

.icon-line-select {
  background-position: -168px -56px;
}

.icon-dottedline-black {
  background-position: -196px -56px;
}

.icon-dottedline-select {
  background-position: -0px -84px;
}

.icon-arrow-black {
  background-position: -28px -84px;
}

.icon-arrow-select {
  background-position: -56px -84px;
}

.icon-circle-black {
  background-position: -84px -84px;
}

.icon-circle-select {
  background-position: -112px -84px;
}

.icon-ellipse-black {
  background-position: -140px -84px;
}

.icon-ellipse-select {
  background-position: -168px -84px;
}

.icon-square-black {
  background-position: -196px -84px;
}

.icon-square-select {
  background-position: -0px -112px;
}

.icon-rectangle-black {
  background-position: -28px -112px;
}

.icon-rectangle-select {
  background-position: -56px -112px;
}

.icon-rightangle-black {
  background-position: -84px -112px;
}

.icon-rightangle-select {
  background-position: -112px -112px;
}

.icon-equilateral-black {
  background-position: -140px -112px;
}

.icon-equilateral-select {
  background-position: -168px -112px;
}

.icon-isosceles-black {
  background-position: -196px -112px;
}

.icon-isosceles-select {
  background-position: -0px -140px;
}

.icon-isoscelesrighttriangle-black {
  background-position: -28px -140px;
}

.icon-isoscelesrighttriangle-select {
  background-position: -56px -140px;
}

.icon-remove-black {
  background-position: -84px -140px;
}

.icon-remove-select {
  background-position: -112px -140px;
}

.icon-clear-black {
  background-position: -140px -140px;
}

.icon-clear-select {
  background-position: -168px -140px;
}

.video-preview-modal-div {
  width: 69%;
  margin: 5% auto 0;
  text-align: center;
  background-color: #ffffff;
}

/********* 添加对错号 **************/
.icon-right-black{
  display: inline-block;
  width: 26px;
  height: 26px;
  background-image: url(../image/right.png);
  background-repeat: no-repeat;
  margin-top: 10px;
}

.icon-right-select{
  display: inline-block;
  width: 26px;
  height: 26px;
  background-image: url(../image/right-sel.png);
  background-repeat: no-repeat;
  margin-top: 10px;
}

.icon-wrong-black{
  display: inline-block;
  width: 26px;
  height: 26px;
  background-image: url(../image/wrong.png);
  background-repeat: no-repeat;
  margin-top: 10px;
}

.icon-wrong-select{
  display: inline-block;
  width: 26px;
  height: 26px;
  background-image: url(../image/wrong-sel.png);
  background-repeat: no-repeat;
  margin-top: 10px;
}

.icon-right-small-black{
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url(../image/right-small.png);
  background-repeat: no-repeat;
  margin-top: 10px;
}

.icon-right-small-select{
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url(../image/right-small-sel.png);
  background-repeat: no-repeat;
  margin-top: 10px;
}

.icon-wrong-small-black{
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url(../image/wrong-small.png);
  background-repeat: no-repeat;
  margin-top: 10px;
}

.icon-wrong-small-select{
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url(../image/wrong-small-sel.png);
  background-repeat: no-repeat;
  margin-top: 10px;
}

.icon-submit-black{
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url(../image/submit.png);
  background-repeat: no-repeat;
  margin-top: 10px;
}

.icon-submit-select{
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url(../image/submit-sel.png);
  background-repeat: no-repeat;
  margin-top: 10px;
}