div.whole:focus {
    /* The following suppresses the outline of the element that has the focus. Only when
       that focus is set, the keyboard mappings work. You may of course enable the outline
       for debugging purposes. */
    outline: 0;
}

span.whiteHeader:before {
    content: " White: ";
}

span.blackHeader:before {
    content: " Black: ";
}

span.restHeader:before { content: " ("}
span.restHeader:after { content: ")"}

div.layout-left.whole, div.layout-right.whole {
    display: flex;
    flex-flow: row wrap;
}

div.layout-left > .headers, div.layout-right > headers {
    flex: 1 100%;
}

div.moves {
    /* overflow-y: auto; */
    padding: 10px;
}
div.layout-left > .moves, div.layout-right > .moves {
    position: relative;
    flex: 1 40%;
}

div.layout-left > .moves, div.layout-right > .moves, div.layout-top > .moves, div.layout-bottom > .moves {
    overflow-y: auto;
}

div.layout-right > .moves {
    order: 1;
}

div.layout-right > .outerBoard {
    order: 2;
    /* flex: 1 1 auto; */
}

div.layout-bottom.whole {
    display: flex;
    flex-flow: column wrap;
}

div.layout-bottom > .outerBoard {
    order: 2;
}

div.layout-top-left > .outerBoard {
    float: left;
    margin-right: 10px;
}

div.layout-bottom-left > .outerBoard {
    float: left;
    margin-right: 10px;
    /* display: table-cell;
    vertical-align: bottom; */
}

div.layout-top-right > .outerBoard {
    float: right;
    margin-left: 10px;
}

/* Not found any trick that allows to use baseline, bottom, ... with float: left|right */
div.layout-bottom-right > .outerBoard {
    float: right;
    margin-left: 10px;
}

div.layout-left > .outerBoard {
    /* flex: 0 0 400px; */
}

div.edit .gray, div.buttons .gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

/** Font Awesome buttons (see http://fontawesome.io/) */

.fen {
    width: 96%;
    height: 30px;
    min-height: 30px;
    padding: 2px;
    font-family: monospace;
}

div.error {
    color: red;
}
div.buttons > i.button, div.edit > i.button {
    font-size: 16px;
    line-height: 1.4em;
    color: #71a0df;
    background-color: white;
    background-image: none;
     margin: 5px;
    padding: 4px;
    border: solid lightgrey 1px;
    border-radius: 4px;
}

div.buttons > i.button.selected, div.edit > i.button.selected {
    color: #fff;
    background-color: #71a0df;
}

/* Necessary fixes for examples  */
button.ui-multiselect {
    background-image: none;
    background-color: white;
}

ul.ui-multiselect-checkboxes > li {
    margin-bottom: 0px;
}

select.nag {
    width: 80px;
}


div.buttons > i.button:hover,div.edit > i.button:hover  {
    cursor: pointer;
    border: solid dimgrey 1px;
}

/** The following are all font-awesome buttons.
  Where known, I have added their short names (to find them later again). **/
div.buttons > .button.flipper.default:before { /* fa-adjust */
    content: "\f042";
}
div.buttons > .button.first.default:before { /* fa-fast-backward */
    content: "\f049";
}
div.buttons > .button.prev.default:before {    /* fa-step-backward */
    content: "\f048";
}
div.buttons > .button.next.default:before {    /* fa-step-forward */
    content: "\f051";
}
div.buttons > .button.last.default:before {    /* fa-fast-forward */
    content: "\f050";
}
div.buttons > .button.play.default:before {    /* fa-play-circle */
    content: "\f144";
}
div.buttons > .button.stop.default:before {     /* fa-pause */
    content: "\f04c";
}

div.edit > .button.promoteVar.default:before { /* hand-o-up */
    content: "\f0a6";
}
div.edit > .button.deleteMoves.default:before { /* scissors  */ 
    content: "\f0c4";
}

.button.fa-times {
   color: red;
}

.button.fa-times:hover {
    border: red 2px solid;
}

textarea.pgn {
    padding: 2px;
    border: 1px solid grey;
    width: 96%;
    height: 100px;
    font-family: monospace;
}

/* Green buttons. */
div.buttons.green > .button, div.edit.green > .button {
    color: green;
    border: solid lightgrey 1px;
    border-radius: 4px;
}
/* Blue buttons. */
div.buttons.blue > .button, div.edit.blue > .button {
    color: blue;
    border: solid lightgrey 1px;
    border-radius: 4px;
}

.ui-widget {
    font-size: 1em;
}

div.commentRadio label {
    display: inline;
}
div.comment > textarea.comment {
    font-family: monospace;
    width: 96%;
    height: 50px;
    padding: 2px;
}

.moves a {
    text-decoration: underline;
}

.moves .move a.yellow {
    background-color: rgba(255, 255, 153, 1.0);
}

.moves .move a {
    text-decoration: none;
    border: 1px solid transparent;
}

.moves .move a:hover {
    border: 1px yellow dotted;
    background-color: rgba(255, 255, 153, 1.0);
    cursor: crosshair;
}

.moves .move {
    font-size: 16px;
    font-family: Georgia, "Bitstream Charter", serif;;
    color: black;
    font-weight: 700;
    line-height: 24px;
}

.moves .move.var {
    font-weight: 500;
}

.moves .variation {
    font-size: 100%;
    display: block;
    padding: 5px;
}
.moves .variation:before {
    content: ' ( ';
}

.moves .variation .variation:before {
    content: ' ( ';
}

.moves .variation .variation {
    font-size: 90%;
    padding-left: 10px;
    padding-right: 10px;
}

.moves .variation .variation:after {
    content: ' ) ';
}

.moves .variation:after {
    content: ' ) ';
}

.moves > .varblock .white:before {
    display: inline;
}

.moves .move .moveNumber {
/*    font-size: 24px;*/
}

.moves .move .comment {
    color: green;
    font-weight: 500;
}

.moves .white:before {
    content: '\A';
    display: inline-block;
}

/* Pattern of the Zeit journal */
/* board */
.zeit .board-b72b1 {
    /*    border: 2px solid #404040; */
    border-color: #6494b1;
    /*border-width: 20px;*/
}

/* white square */
.zeit .white-1e1d7 {
    background-color: #ccc;
    color: #6494b1;
}

/* black square */
.zeit .black-3c85d {
    color: #ccc;
    background-color: #6494b1;
}

/* Pattern of the Chess.com similar */
/* board */
.chesscom.whole {
    /*    border: 2px solid #404040; */
    border: 2px gray solid;
    width: 800px;
    display: flex;
    flex-flow: row wrap;
}

.chesscom .headers {
    font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
    font-size: 18px;
/*    padding: 15px;*/
    background-color: #f3f3f3;
    font-weight: bold;
    flex: 1 100%;
}

.chesscom .headers > .whiteHeader:before {
    content: "";
}

.chesscom .headers > .whiteHeader {
    display: inline-block;
    padding-top: 10px;
    padding-left: 10px;
}

.chesscom .headers > .blackHeader:before {
    content: "  vs. ";
}

.chesscom .headers > .blackHeader {
    display: inline-block;
    padding-top: 10px;
    padding-left: 10px;
}
.chesscom .headers > .restHeader {
    display: block;
    padding-left: 10px;
    padding-bottom: 10px;
    font-weight: 500;
    font-size: 80%;
}

.chesscom .players {
    font-weight: 900;
}

.chesscom .outerBoard {
    /* float: left; */
    width: 388px;
}

/* .chesscom .movesScroller {
    padding: 3px 3px;
    font-size: 13px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-weight: bold;
    border-right: 2px solid #f3f3f3;
    background: #ffffff;
    vertical-align: baseline;
    text-align: left;
    overflow: auto;
} */


.moves {
    /*  position: relative;
    overflow-y: auto;*/
    padding: 10px;
}

.chesscom .endBoard {
    clear: both;
}
.chesscom .moves a {
    text-decoration: none;
}

/* white square */
.chesscom .white-1e1d7 {
    background-color: #ededd9;
    color: #6494b1;
}

/* black square */
.chesscom .black-3c85d {
    color: #ededd9;
    background-color: #4c6D92;
}

.chesscom .alpha-d2270 {
    bottom: 2px;
    right: 2px;
}

.chesscom .numeric-fc462 {
        top: 1px;
        left: 2px;
}

/* notation */
.chesscom .notation-322f9 {
    /* cursor: default;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
    font-size: 10px;

}

/*************** End chesscom pattern *****************************/

/* Pattern for something greenish. */
/* board */
.informator .board-b72b1 {
    /*    border: 2px solid #404040; */
    border: 4px solid black;
}

/* white square */
.informator .white-1e1d7 {
    background-color: #eeeeee;
    color: #aaaaaa;
}

/* black square */
.informator .black-3c85d {
    color: #eeeeee;
    background-color: #aaaaaa;
}

/*************** End informator pattern *****************************/

/* Pattern for something greenish. */
/* board */
.sportverlag .board-b72b1 {
    /*    border: 2px solid #404040; */
    border: 4px black;
}

/* white square */
.sportverlag .white-1e1d7 {
    background-color: #f4f4f4;
    color: rgba(2, 2, 2, 0.75);
}

/* black square */
.sportverlag .black-3c85d {
    color: rgba(2, 2, 2, 0.75);
    /*background-image: -webkit-repeating-linear-gradient(top left, #333 1%, #eee 8%);*/
    background-image: url("../img/pattern/diagonal1x3.png");
}


/*************** End sportverlag pattern *****************************/

/* Pattern for beyer. */
/* board */
.beyer .board-b72b1 {
    /*    border: 2px solid #404040; */
    padding: 4px;
    outline: 1px solid black;

}

/* white square */
.beyer .white-1e1d7 {
    background-color: #f4f4f4;
    color: rgba(2, 2, 2, 0.75);
}

/* black square */
.beyer .black-3c85d {
    color: rgba(2, 2, 2, 0.75);
    /*background-image: -webkit-repeating-linear-gradient(top left, #333 1%, #eee 8%);*/
    background-image: url("../img/pattern/vertical1x3.png");
}

.beyer .alpha-d2270 {
    bottom: -22px;
    right: 20px;
}

.beyer .numeric-fc462 {
    top: 18px;
    left: -17px;
}

/* notation */
.beyer .notation-322f9 {
    /* cursor: default;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
    font-size: 12px;
}

/*************** End Beyer pattern *****************************/

/* board */
.falken .board-b72b1 {
    /*    border: 2px solid #404040; */
    border: 1px solid black;

    /* #2 */
    padding: 20px;

    /* #3 */
    outline: 2px solid black;
}

/* white square */
.falken .white-1e1d7 {
    background-color: #f4f4f4;
    color: rgba(2, 2, 2, 0.75);
}

/* black square */
.falken .black-3c85d {
    color: rgba(2, 2, 2, 0.75);
    background-color: #636b6a;
}

.falken .alpha-d2270 {
    bottom: -15px;
    right: 20px;
}

.falken .numeric-fc462 {
    top: 20px;
    left: -15px;
}

/* notation */
.falken .notation-322f9 {
    /* cursor: default;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
    font-size: 12px;

}


/*************** End falken pattern *****************************/

/* Pattern for something greenish. */
/* board */
.green .board-b72b1 {
    /*    border: 2px solid #404040; */
    border-color: green;
    /*border-width: 20px;*/
}

/* white square */
.green .white-1e1d7 {
    background-color: rgba(116, 185, 48, 0.80);
    color: rgba(116, 185, 48, 0.20);
}

/* black square */
.green .black-3c85d {
    color: rgba(116, 185, 48, 0.80);
    background-color: rgba(116, 185, 48, 0.20);
}

/* highlighted square */
.green .highlight1-32417, .highlight2-9c5d2 {
    -webkit-box-shadow: inset 0 0 3px 3px yellow;
    -moz-box-shadow: inset 0 0 3px 3px yellow;
    box-shadow: inset 0 0 3px 3px yellow;
}

/* notation */
.green .notation-322f9 {
    /* cursor: default;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
    font-size: 14px;

}

.green .alpha-d2270 {
    /*bottom: -16px;*/
    /*right: 21px;*/
}

.green .numeric-fc462 {
/*
    top: 19px;
    left: -12px;
*/
}


/* Theme: BLUE */

/* board */
.blue .board-b72b1 {
    /*    border: 2px solid #404040; */
    border-color: blue;
}

/* white square */
.blue .white-1e1d7 {
    background-color: rgba(187, 234, 249, 0.38);
    color: rgba(0, 0, 139, 0.73);
}

/* black square */
.blue .black-3c85d {
    color: rgba(187, 234, 249, 0.38);
    background-color: rgba(0, 0, 139, 0.73);
}

/* highlighted square */
.blue .highlight1-32417, .highlight2-9c5d2 {
    -webkit-box-shadow: inset 0 0 3px 3px yellow;
    -moz-box-shadow: inset 0 0 3px 3px yellow;
    box-shadow: inset 0 0 3px 3px yellow;
}

/* notation */
.blue .notation-322f9 {
    /* cursor: default;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
    font-size: 20px;

}

.blue .alpha-d2270 {
    bottom: 1px;
    right: 3px;

}

.blue .numeric-fc462 {
    top: 0;
    left: 0;

}

/* Styling when moves are possible */
.square-55d63.black-3c85d.possible {
    background-color: #696969;
}

.square-55d63.white-1e1d7.possible {
    background-color: #a9a9a9;
}