.FldColor1 .WhField { background: #f8f0ff; }
.FldColor1 .BlField { background: lightgrey; }
.FldColor2 .WhField { background: #f2d798; /*#e5e1c6;*/ /*#ffebc7;*/ }
.FldColor2 .BlField { background: #c9ad6f; /*#cccbac;*/ /*#e6cc95;*/ }
.FldColor3 .WhField { background: #e5e1c6; /*#f8f0ff;*/ }
.FldColor3 .BlField { background: #cccbac; /*#f8f0ff url("images/hash5.gif") 50% 50%;*/ }

.chBkg { position: absolute; left: -8%; top: -50%; width:0.9em; height:2.8em; border: 1px dotted white; cursor:pointer;}
.chBkg .chBkg1 {height:0.9em; margin-bottom:1px; background: lightgrey;}
.chBkg .chBkg2 {top: 6%; height:0.9em; margin-bottom:1px; background: #e6cc95;}
.chBkg .chBkg3 {top: 12%; height:0.9em; background: #cccbac; }

.main_grid {
    display: grid;
    grid-template-columns: 2fr 18% 2fr;
    grid-column-gap: 1em;
}
.main_g1 {
    grid-column: 1;  /* 'chessman- ' 'GameNav' 'crt-FEN'*/
}
.MoveList {
    grid-column: 2;
    /* height: 250px; */
    overflow: auto;
    font-size:0.9em;
}
.AnnoWrap {
    grid-column: 3;
    font-size:0.85em;
    color: #448;
    padding-left:1.5em;
}

.MoveList a { 
    color: brown; 
    text-decoration: none;
    padding-left:1px;
    padding-right: 1px;
}

.AnnoList p {
    margin-top: 0em;
    margin-bottom: 0.2em;
}

.oneMove:hover { 
    background-color: #ccf; 
}
.oneMoveSel, .oneMoveSel:hover { 
    background-color: #ccc; 
    color: #660000; 
}
.numberOfMove {
    font-family: Verdana;
    font-size:0.9em;
    padding-right: 0.2em;
}
span.print-fen {
    font-family: monospace;
    font-size: 1.2em;
    color: black;
    background: #eee;
    padding:0.1em;
}
.annhide { display: none; }
.annsel {
    color: brown;
}
div.ann-init {
    color: brown;
    font-size:1.05em;
    margin-bottom: 1em;
}
div.ann-crt {
    margin-bottom: 1em;
}
div.ann-crt p {
    margin-left: 2em;
}
div.ann-mark, div.ann-nag, div.ann-variant {
    margin-bottom: 0.5em;
}
.ann-variant { cursor:pointer;}

span.moveMark {
    color:black;
    background-color:#fff;
}
span.numberOfMove {
    color: #333;
}

.GameNav {margin-top:0.5em; position:relative;}
.GameInfo { font-size: 0.9em; text-align: left; margin-bottom: -0.75em;}
.GameNav p { text-align:center;  height: 1.5em; line-height: 1.5em;}
.GameNav span {font-size: 1.5em; color: black; cursor: pointer;}
.GameNav a {font-size: 1.5em;}
img {
    vertical-align: middle; 
    border: 0;
    cursor: pointer;
    max-width: 100%;
}
.GameNav img { height: 1.2em; width: 1.3em;}

/* div.BoardFields contains the 64 chess fields (also, the notation of the table) */
.BoardFields { position: relative; border: 1px solid black; }

/*  absolute positioning the chess fields (inclusive for the reversed table)
    independently of the used set-N of pieces  
    Adding .revBoard property to the DIV.BoardFields result a very simple procedure
    for to reverse the chess table (an ideea exposed by chess.dynarch.com, 2008).  */
.Col-1, .revBoard .Col-8 { left: 0%; }
.Col-2, .revBoard .Col-7 { left: 12.5%; }
.Col-3, .revBoard .Col-6 { left: 25%; }
.Col-4, .revBoard .Col-5 { left: 37.5%; }
.Col-5, .revBoard .Col-4 { left: 50%; }
.Col-6, .revBoard .Col-3 { left: 62.5%; }
.Col-7, .revBoard .Col-2 { left: 75%; }
.Col-8, .revBoard .Col-1 { left: 87.5%; }

.Row-8, .revBoard .Row-1 {  top: 0%; }
.Row-7, .revBoard .Row-2 {  top: 12.5%; }
.Row-6, .revBoard .Row-3 {  top: 25%; }
.Row-5, .revBoard .Row-4 {  top: 37.5%; }
.Row-4, .revBoard .Row-5 {  top: 50%; }
.Row-3, .revBoard .Row-6 {  top: 62.5%; }
.Row-2, .revBoard .Row-7 {  top: 75%; }
.Row-1, .revBoard .Row-8 {  top: 87.5%; }

/*  background-position for the chessmen, independently of piece set  */
.wh-pawn   { background-position: 0%; }      
.wh-king   { background-position: -100%;}  
.wh-queen  { background-position: -200%;}  
.wh-rook   { background-position: -300%;}  
.wh-bishop { background-position: -400%;}  
.wh-knight { background-position: -500%;} 

.bl-knight { background-position: -600%;}
.bl-bishop { background-position: -700%;} 
.bl-rook   { background-position: -800%;}
.bl-queen  { background-position: -900%;}
.bl-king   { background-position: -1000%;}
.bl-pawn   { background-position: 100%; }

.Notation-Row, .Notation-Col { position: absolute; color: #98a; font-family: monospace; }
.Notation-Row { left: -6%; height: 12.5%; font-size: 0.75em; }
.Notation-Col { top: 101%; width: 12.5%; text-align:center; font-size: 0.8em; }

.Field { position: absolute; padding: 1px; /* 2px; when N > 23 */ }

/*  "../images/men*.png" are sprites of 12 chessmen based on the PNG  
    pieces set from http://ixian.com/chess/jin-piece-sets/
    and so created using ImageMagick - see the file 'chessmen-sprites.sh'
    
    If div.Piece is NxN pixels and div.Field has padding of D (=1 or D=2) pixels, then
    div.BoardFields has as dimensions 8*N + (7*2*N + 2*D) = 8*N + 16*D.
    The following CSS definitions are obtained by the script 'chessmen-css.sh'. 
*/
.chessmen-20 {width: 196px;}
.chessmen-20 .BoardFields {width: 176px; height: 176px;}
.chessmen-20 .Field {width: 20px; height: 20px; }
.chessmen-20 .sPiece {width: 20px; height: 20px; background-image: url('../images/men20.png')}

.chessmen-21 {width: 205px;}
.chessmen-21 .BoardFields {width: 184px; height: 184px;}
.chessmen-21 .Field {width: 21px; height: 21px; }
.chessmen-21 .sPiece {width: 21px; height: 21px; background-image: url('../images/men21.png')}

.chessmen-22 {width: 214px; }
.chessmen-22 .BoardFields {width: 192px; height: 192px;}
.chessmen-22 .Field {width: 22px; height: 22px; }
.chessmen-22 .sPiece {width: 22px; height: 22px; background-image: url('../images/men22.png')}

.chessmen-23 {width: 223px;}
.chessmen-23 .BoardFields {width: 200px; height: 200px;}
.chessmen-23 .Field {width: 23px; height: 23px; }
.chessmen-23 .sPiece {width: 23px; height: 23px; background-image: url('../images/men23.png')}

.chessmen-24 {width: 248px;}
.chessmen-24 .BoardFields {width: 224px; height: 224px;}
.chessmen-24 .Field {width: 24px; height: 24px; padding: 2px;}
.chessmen-24 .sPiece {width: 24px; height: 24px; background-image: url('../images/men24.png')}

.chessmen-25 {width: 257px;}
.chessmen-25 .BoardFields {width: 232px; height: 232px;}
.chessmen-25 .Field {width: 25px; height: 25px; padding: 2px;}
.chessmen-25 .sPiece {width: 25px; height: 25px; background-image: url('../images/men25.gif')}

.chessmen-26 {width: 266px;}
.chessmen-26 .BoardFields {width: 240px; height: 240px;}
.chessmen-26 .Field {width: 26px; height: 26px; padding: 2px;}
.chessmen-26 .sPiece {width: 26px; height: 26px; background-image: url('../images/men26.png')}

.chessmen-27 {width: 275px;}
.chessmen-27 .BoardFields {width: 248px; height: 248px;}
.chessmen-27 .Field {width: 27px; height: 27px; padding: 2px;}
.chessmen-27 .sPiece {width: 27px; height: 27px; background-image: url('../images/men27.png')}

.chessmen-28 {width: 284px;}
.chessmen-28 .BoardFields {width: 256px; height: 256px;}
.chessmen-28 .Field {width: 28px; height: 28px; padding: 2px;}
.chessmen-28 .sPiece {width: 28px; height: 28px; background-image: url('../images/men28.png')}

.chessmen-29 {width: 293px;}
.chessmen-29 .BoardFields {width: 264px; height: 264px;}
.chessmen-29 .Field {width: 29px; height: 29px; padding: 2px;}
.chessmen-29 .sPiece {width: 29px; height: 29px; background-image: url('../images/men29.png')}

.chessmen-30 {width: 302px;}
.chessmen-30 .BoardFields {width: 272px; height: 272px;}
.chessmen-30 .Field {width: 30px; height: 30px; padding: 2px;}
.chessmen-30 .sPiece {width: 30px; height: 30px; background-image: url('../images/men30.png')}

.chessmen-31 {width: 311px;}
.chessmen-31 .BoardFields {width: 280px; height: 280px;}
.chessmen-31 .Field {width: 31px; height: 31px; padding: 2px;}
.chessmen-31 .sPiece {width: 31px; height: 31px; background-image: url('../images/men31.png')}

.chessmen-32 {width: 320px;}
.chessmen-32 .BoardFields {width: 288px; height: 288px;}
.chessmen-32 .Field {width: 32px; height: 32px; padding: 2px;}
.chessmen-32 .sPiece {width: 32px; height: 32px; background-image: url('../images/men32.png')}