.chessBoard {
  border: 1px solid #000;
  padding: 1px;
  background-color: #fff;
  width: 290px;
  height:290px;
  margin: 1em;
}

.chessFields { width: 288px; height: 288px; position: relative; border: 1px solid #ccc; }

.chessFields .Field { padding: 2px; width: 32px; height: 32px; position: absolute; }

.chessFields .Notation-Row, .chessFields .Notation-Col { color: #98a; font: 11px tahoma,verdana,sans-serif; }
.chessFields .Notation-Row { position: absolute; left: -15px; margin-top: 12px; }
.chessFields .Notation-Col { position: absolute; top: 100%; margin-left: 15px; margin-top: 8px; }

.chessFields .At-jos {position: absolute; top:95%; margin-left:298px;}
.chessFields .At-sus {position: absolute; top:0%; margin-left:298px;}

.chessFields .Col-a { left: 0 }
.chessFields .Col-b { left: 12.5% }
.chessFields .Col-c { left: 25% }
.chessFields .Col-d { left: 37.5% }
.chessFields .Col-e { left: 50% }
.chessFields .Col-f { left: 62.5% }
.chessFields .Col-g { left: 75% }
.chessFields .Col-h { left: 87.5% }
.chessFields .Row-8 { top: 0 }
.chessFields .Row-7 { top: 12.5% }
.chessFields .Row-6 { top: 25% }
.chessFields .Row-5 { top: 37.5% }
.chessFields .Row-4 { top: 50% }
.chessFields .Row-3 { top: 62.5% }
.chessFields .Row-2 { top: 75% }
.chessFields .Row-1 { top: 87.5% }

.reverseFields .Col-h { left: 0 }
.reverseFields .Col-g { left: 12.5% }
.reverseFields .Col-f { left: 25% }
.reverseFields .Col-e { left: 37.5% }
.reverseFields .Col-d { left: 50% }
.reverseFields .Col-c { left: 62.5% }
.reverseFields .Col-b { left: 75% }
.reverseFields .Col-a { left: 87.5% }
.reverseFields .Row-1 { top: 0 }
.reverseFields .Row-2 { top: 12.5% }
.reverseFields .Row-3 { top: 25% }
.reverseFields .Row-4 { top: 37.5% }
.reverseFields .Row-5 { top: 50% }
.reverseFields .Row-6 { top: 62.5% }
.reverseFields .Row-7 { top: 75% }
.reverseFields .Row-8 { top: 87.5% }

.piece { width: 32px; height: 32px; overflow: hidden; background: transparent url("pieces.gif") no-repeat 0 0; }

div.piece-white-bishop  { background-position: 0      0; }
div.piece-white-king    { background-position: -32px  0; }
div.piece-white-knight  { background-position: -64px  0; }
div.piece-white-pawn     { background-position: -96px  0; }
div.piece-white-queen   { background-position: -128px 0; }
div.piece-white-rook    { background-position: -160px 0; }

div.piece-black-bishop  { background-position: 0      -32px; }
div.piece-black-king    { background-position: -32px  -32px; }
div.piece-black-knight  { background-position: -64px  -32px; }
div.piece-black-pawn    { background-position: -96px  -32px; }
div.piece-black-queen   { background-position: -128px -32px; }
div.piece-black-rook    { background-position: -160px -32px; }

.whiteField { background-color: #ffffff; }
.blackField { background: #dddeee; }

.highlight { border: 1px solid red;cursor:pointer; }
.hghl{color:red;}

.BeforeBoard { margin-top:10px;margin-left:24px;}

.dlg {
/*  border: 1px solid #000; */
  padding: 1px;
  background-color: #fff;
  width: 34px;
  height:34px;
/*  margin: 2px; */
  margin-top:-34px;
  margin-left:-2px;
  position:absolute;
}

.Piecew{ width: 16px; height: 16px; overflow: hidden; background: transparent url("w4.gif") no-repeat 0 0; background-color:#eee;}
.Pieceb{ width: 16px; height: 16px; overflow: hidden; background: transparent url("b4.gif") no-repeat 0 0; background-color:#eee;}
.Piecep-bishop  { background-position: 0 -16px; }
.Piecep-knight  { background-position: -16px -16px; }
.Piecep-queen   { background-position: 0 0;}
.Piecep-rook    { background-position: -16px 0; }
.dlgProm { width: 32px; height: 32px; position: relative;}
.dlgProm .Field { padding: 1px; width: 16px; height: 16px; position: absolute; border: 1px solid #ccc;cursor:pointer;z-index:1000;}
.dlgProm .Col-a { top: 0; left:0;}
.dlgProm .Col-b { top: 0;left:50%;}
.dlgProm .Col-c { top: 50%;left:0;}
.dlgProm .Col-d { top: 50%;left:50%;}

.dSheet { position:absolute;top:10px;left:440px; }
.dSheet button, .BeforeBoard button { cursor:pointer; font-size:0.9em; }
.Sheet { height: 300px; width:175px; overflow: auto; }
.Sheet table { empty-cells: show; border-collapse: collapse; background-color: #eef; }
.Sheet table th { padding:2px;}
.Sheet table td { padding: 0px 3px; font-family: monospaced; text-align: left;}
.Sheet table td.num { background-color: #edf; text-align: right; font-size: 0.9em; font-weight: bold; color: #879; padding-right:2px;}
#racere { border-top: 1px dotted #666; }
#hsheet { font-size:0.9em;color:red; cursor:pointer;}
.hghlm, .hghm{background-color: #ede; }
td.whm, td.blm { cursor:pointer; }

.sndmove table tr td {font-size:0.9em; padding: 2px;}

#tabsah { margin-top:60px;margin-left:20px; }