tutorialuth.css

/**
 *------
 * BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * tutorialuth implementation : © <Your name here> <Your email address here>
 *
 * This code has been produced on the BGA studio platform for use on http://boardgamearena.com.
 * See http://en.boardgamearena.com/#!doc/Studio for more information.
 * -----
 *
 * tutorialuth.css
 *
 * tutorialuth stylesheet
 *
 */

/*
    This is the CSS stylesheet of your game User Interface.

    Styles defined on this file will be applied to the HTML elements you define in your
    HTML template (tutorialuth_tutorialuth.tpl), and to HTML elements you create dynamically
    (in tutorialuth.js).

    Usually, you are using CSS to:

    1°) define the overall layout of your game
        (ex: place the board on the top left, place player's hand beside, place the deck on the right, ...).

    2°) create your CSS-sprites:
        All images of your games should be gathered into a small number of image files. Then, using
        background-image and background-position CSS properties, you create HTML blocks that can
        display these images correctly (see example below).

    3°) ... anything else:
        It is really easy to add and remove CSS classes dynamically from your Javascript with
        dojo.addClass and dojo.removeClass. It is also easy to check if an element has a class
        (dojo.hasClass) or to get all elements with a specific class (dojo.query). This is why,
        very often, using CSS classes for the logic of your user interface allow you to do complex
        thing easily.


     Note: on the production platform, this file will be compressed and comments will be removed.
           Consequently, don't hesitate to put as many comments as necessary.
*/

/* Note: you must not use any @import directive */

/********* You can start writing your CSS below this line: **********/

#board {
    width: 536px;
    height: 528px;
    background-image: url('img/board.jpg');
    position: relative;
}

.square {
    width: 62px;
    height: 62px;
    position: absolute;
}

.token {
    width: 56px;
    height: 56px;
    position: absolute;
    background-image: url('img/tokens.png');
}
.tokenColor_000000 {
    background-position: 0 0;
}
.tokenColor_ffffff {
    background-position: -56px 0;
}

/*
    Example of CSS sprites (a black token and a white token, 20x20px each, embedded in the same "tokens.png" 40x20px image):

    .white_token {
        background-image: url('img/tokens.png');
        background-position: 0px 0px;
    }
    .black_token {
        background-image: url('img/tokens.png');
        background-position: -20px 0px;
    }
    .token {
        width: 20px;
        height: 20px;
        background-repeat: none;
    }
*/