/*
 * X-TicTacToe 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://martinivanov.net
 **/

/*
 * USAGE:
 * 1. If you are planning to use this component for a personal project, please retain the credits in the code. Donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS), however is highly appreciated.
 * 2. If you will use it on a live website, donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS) is required. 
 **/

acidjs-xticatactoe *
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    list-style: none;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Firefox button reset styles cannot be combinet in a single rule */
acidjs-xticatactoe button:-moz-focus-inner
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

acidjs-xticatactoe button::-moz-focus-inner
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

/* placeholder cannot be combinet in a single rule */
acidjs-xticatactoe ::-webkit-input-placeholder 
{
    color: rgba(255, 255, 255, .85);
}

acidjs-xticatactoe :-moz-placeholder 
{
    color: rgba(255, 255, 255, .85);
}

acidjs-xticatactoe ::-moz-placeholder
{
    color: rgba(255, 255, 255, .85);
}

acidjs-xticatactoe :-ms-input-placeholder 
{  
    color: rgba(255, 255, 255, .85);
}

acidjs-xticatactoe button,
acidjs-xticatactoe input[type="text"],
acidjs-xticatactoe .acidjs-xticatactoe-board span::before
{
    display: block;
}

acidjs-xticatactoe,
acidjs-xticatactoe .acidjs-xticatactoe-board span,
acidjs-xticatactoe .acidjs-xticatactoe-lobby ul
{
    display: inline-block;
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby,
acidjs-xticatactoe .acidjs-xticatactoe-board span,
acidjs-xticatactoe .acidjs-xticatactoe-game-controls
{
    text-align: center;
}

acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(1) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(2) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(3) span
{
    border-top: 0;
}

acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(7) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(8) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(9) span
{
    border-bottom: 0;
}

acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(1) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(4) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(7) span
{
    border-left: 0;
}

acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(3) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(6) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(9) span
{
    border-right: 0;
}

acidjs-xticatactoe[stage="game-over"] .acidjs-xticatactoe-board,
acidjs-xticatactoe .acidjs-xticatactoe-board input:disabled + span
{
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby,
acidjs-xticatactoe .acidjs-xticatactoe-board input
{
    position: absolute;
}

acidjs-xticatactoe,
acidjs-xticatactoe row > *
{
    vertical-align: middle;
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby + grid,
acidjs-xticatactoe .acidjs-xticatactoe-board span::before
{
    opacity: 0;
}

acidjs-xticatactoe button,
acidjs-xticatactoe .acidjs-xticatactoe-board span
{
    cursor: pointer;
}

acidjs-xticatactoe form[data-player="x"] h4 span:first-child,
acidjs-xticatactoe .acidjs-xticatactoe-board input:checked + span::before
{
    color: #ff1d77;
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby[hidden] + grid,
acidjs-xticatactoe .acidjs-xticatactoe-board input:checked + span::before
{
    opacity: 1; 
}

acidjs-xticatactoe form[data-player="o"] h4 span:first-child,
acidjs-xticatactoe .acidjs-xticatactoe-board input[data-player="o"]:checked + span::before
{
    color: #77b900;
}

acidjs-xticatactoe button,
acidjs-xticatactoe input[type="text"]
{
    color: #fff;
}

acidjs-xticatactoe button,
acidjs-xticatactoe input[type="text"]
{
    font-family: inherit;
    font-size: 1em;
}

acidjs-xticatactoe button,
acidjs-xticatactoe row > *
{
    padding: .5em;
}

acidjs-xticatactoe button,
acidjs-xticatactoe .acidjs-xticatactoe-lobby
{
    width: 100%;
}

acidjs-xticatactoe h4,
acidjs-xticatactoe .acidjs-xticatactoe-lobby li
{
    margin: .5em 0;
}

acidjs-xticatactoe
{
    font-family: "Comic Sans MS", cursive;
    font-size: 16px;
    background: #fafafa;
    cursor: default;
}

acidjs-xticatactoe[size="small"]
{
    font-size: 12px;
}

acidjs-xticatactoe[size="large"]
{
    font-size: 32px;
}

acidjs-xticatactoe [hidden]
{
    display: none;
}

acidjs-xticatactoe .acidjs-xticatactoe-board
{
    margin: auto;
}

acidjs-xticatactoe .acidjs-xticatactoe-board li
{
    float: left;
}

acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(3n + 1)
{
    clear: both;
}

acidjs-xticatactoe .acidjs-xticatactoe-board input
{
    clip: rect(0, 0, 0, 0);
}

acidjs-xticatactoe .acidjs-xticatactoe-board span
{
    border: solid 2px #666;
    width: 3em;
    height: 3em;
    line-height: 3em;
}

acidjs-xticatactoe .acidjs-xticatactoe-board span::before
{
    content: "X";
    color: transparent;
    transform: scale(0);
    transition: all .25s ease-in-out;
}

acidjs-xticatactoe .acidjs-xticatactoe-board input[data-player="o"] + span::before
{
    content: "O";
}

acidjs-xticatactoe .acidjs-xticatactoe-board input:checked + span::before
{
    font-size: 1.5em;
    transform: scale(2.25);
}

acidjs-xticatactoe .acidjs-xticatactoe-board-win
{
    color: #fe7c22;
}

acidjs-xticatactoe form
{
    position: relative;
    border: solid 1px #666;
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby
{
    z-index: 5;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, .75);
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby + grid
{
    transition: opacity .5s ease-in-out;
}

acidjs-xticatactoe input[type="text"]
{
    width: 20em;
    padding: 0 .25em;
    background: #ff1d77;
    line-height: 2em;
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby ul
{
    margin: 1em 0 0;
}

acidjs-xticatactoe button
{
    background: #77b900;
}

acidjs-xticatactoe grid
{
    display: table;
    border-collapse: collapse;
}

acidjs-xticatactoe row
{
    display: table-row;
}

acidjs-xticatactoe row > *
{
    display: table-cell;
    max-width: 11em;
    min-width: 11em;
}

acidjs-xticatactoe h4
{
    color: #666;
    font-weight: bold;
    font-size: 1.25em;
}