/**
 * This file is part of the iBobr - numbers package
 *
 * (c) Ondřej Záruba <info@zaruba-ondrej.cz>
 *
 * For the full copyright and license information, please view the license.md
 * file that was distributed with this source code.
 */

.numbers-grid-table {
    position: relative;
    width: 180px;
    height: 180px;
    display: inline-block;
}

.numbers-results {
    margin-left: 50px;
}

.numbers-input-box {
    width: 410px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    border: 1px solid #000000;
    box-sizing: border-box;
    margin-top: 15px;
}

.numbers-rest-steps {
    float: right;
}

.numbers-moves img {
    margin-top: 6px;
    margin-right: 2px;
}

.numbers-result-item {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #000000;
}

.numbers-item {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    background: url("./images/item.png");
    line-height: 50px;
    text-align: center;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.2);
}

.numbers-item-0 {
    left: 5px;
    top: 5px;
}

.numbers-item-1 {
    left: 5px;
    top: 65px;
}

.numbers-item-2 {
    left: 5px;
    top: 125px;
}

.numbers-item-3 {
    left: 65px;
    top: 5px;
}

.numbers-item-4 {
    left: 65px;
    top: 65px;
}

.numbers-item-5 {
    left: 65px;
    top: 125px;
}

.numbers-item-6 {
    left: 125px;
    top: 5px;
}

.numbers-item-7 {
    left: 125px;
    top: 65px;
}

.numbers-item-8 {
    left: 125px;
    top: 125px;
}

.numbers-button-clickable {
    cursor: pointer;
}

.numbers-button {
    width: 34px;
    height: 34px;
    position: absolute;
}

.numbers-reset-button {
    margin-top: 15px;
}

.numbers-button-clickable:hover {
    background: url("./images/spinner.gif");
}

.numbers-button-blue {
    background: url("./images/blue.png");
    top: 100px;
    left: 105px;
    z-index: 10;
}

.numbers-button-red {
    background: url("./images/red.png");
    top: 40px;
    left: 105px;
    z-index: 10;
}

.numbers-button-green {
    background: url("./images/green.png");
    top: 40px;
    left: 40px;
    z-index: 10;
}

.numbers-button-yellow {
    background: url("./images/yellow.png");
    top: 100px;
    left: 40px;
    z-index: 10;
}