.jKnight * {
      margin: 0;
      padding: 0;
      border: none;
}
.jKnight {
      position: relative;
}

/*all squares*/
.jKnight .sq {
      color: #cdc;
      float: left;
	  box-sizing: border-box;
}

/*dark squares*/
.jKnight .sq.d0 {
      background: #aba;
}

/*light squares*/
.jKnight .sq.d1 {
      background: #bcb;
}

/*overlay for squares available to play (if you don't want it, delete it)*/
.jKnight .sq.av {
	background-image: url('dot.png');
	background-repeat: no-repeat;
	background-position: center center;
}

/*overlay for hover on squares available to play (if you don't want it, delete it)*/
.jKnight .sq.hover {
	background: #4ad;
}

/*squares already played*/
.jKnight .sq.sel {
      background: #efe;
}
.jKnight .res, .ar {
      font-size: 22px;
}

/* classes for knight */
.jKnight .k {
      position: absolute;
      text-align: center;
      display: none;
/*
You can enable this if you want text symbol for knight instead of image (it is ♘ for white knight and ♞ for black one)
font-family: "Arial Unicode MS","Microsoft Sans Serif","Free Sans","Gentium Plus","Gentium Basic","Gentium","GentiumAlt","DejaVu Sans","DejaVu Serif","Free Serif","TITUS Cyberbit Basic","Bitstream Cyberbit","Bitstream CyberBase","Doulos SIL","Code2000","Code2001";
*/
}
.jKnight .k img {
      width: 100%;
      height: 100%;
}

/*
classes for message on success / failure (you can change messages content in jknight.js)
*/
.jKnight .message {
      position: absolute;
      padding: 2%;
      width: 74%;
      left: 10%;
      font-size: 16px;
      text-align: center;
      background: #cdc;
      border: 1px solid #ded;
      -moz-box-shadow: 0 3px 7px rgba(0,0,0,0.4);
      -webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.4);
      box-shadow: 0 3px 7px rgba(0,0,0,0.4);
      display: none;
}
.jKnight .message.win {
	background: yellow;
}
.jKnight .playagain {
      font-size: 18px;
      color: #232;
}
.jKnight .playagain:hover {
      color: #efe;
      cursor: pointer;
}