/*
 * X-Chessboard HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

/*
 * Do you like this solution? Please, donate:
 * https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
 **/

acidjs-xchessboard,
acidjs-xchessboard *
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

acidjs-xchessboard li:nth-child(-2n+8), 
acidjs-xchessboard li:nth-child(8) ~ li:nth-child(-2n+15), 
acidjs-xchessboard li:nth-child(16) ~ li:nth-child(-2n+24),
acidjs-xchessboard li:nth-child(24) ~ li:nth-child(-2n+31),
acidjs-xchessboard li:nth-child(32) ~ li:nth-child(-2n+40),
acidjs-xchessboard li:nth-child(40) ~ li:nth-child(-2n+47),
acidjs-xchessboard li:nth-child(48) ~ li:nth-child(-2n+56),
acidjs-xchessboard li:nth-child(56) ~ li:nth-child(-2n+63)
{
    background-color: #2f343a;
}

acidjs-xchessboard,
acidjs-xchessboard ul
{
    display: inline-block;
}

acidjs-xchessboard *
{
    margin: 0;
    padding: 0;
    list-style: none;
}

acidjs-xchessboard
{
    margin: auto;
    cursor: default;
    background: #fff;
}

acidjs-xchessboard ul
{
    border: solid 3px #2f343a;
}

acidjs-xchessboard li
{
    float: left;
    width: 64px;
    height: 64px;
    text-align: center;
}

acidjs-xchessboard li:nth-child(8n + 1)
{
    clear: left;
}

acidjs-xchessboard li::after
{
    display: block;
    font: bold 64px/64px "Arial Rounded MT", Arial, Helvetica, Sans-serif;
    color: #1572b7;
}

acidjs-xchessboard .black::after
{
    color: #e74c3c;
}

acidjs-xchessboard .rook::after
{
    content: "\2656";
}

acidjs-xchessboard .pawn::after
{
    content: "\2659";
}

acidjs-xchessboard .knight::after
{
    content: "\2658";
}

acidjs-xchessboard .bishop::after
{
    content: "\2657";
}

acidjs-xchessboard .king::after
{
    content: "\2654";
}

acidjs-xchessboard .queen::after
{
    content: "\2655";
}