vastthecrystalcaverns.css

/**
 *------
 * BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * VastTheCrystalCaverns implementation : © Silvligh / Funce <funce.973@gmail.com>
 *
 * 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.
 * -----
 *
 * vastthecrystalcaverns.css
 *
 * VastTheCrystalCaverns 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 (vastthecrystalcaverns_vastthecrystalcaverns.tpl), and to HTML elements you create dynamically
    (in vastthecrystalcaverns.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: **********/

.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.card {
    text-align: center;
    color: rgb(34, 30, 31);
}

.card p {
    margin: 0;
}

.card h3 {
    position: absolute;
    right: 13%;
    left: 13%;
    font-size: 145%;
    transform: translateY(-45%);
    top: 47.5%;
    font-weight: bold;
}

.card .description {
    position: absolute;
    right: 18%;
    left: 18%;
    top: 70%;
    transform: translateY(-50%);
    font-size: 55%;
    color: rgb(255, 255, 255);
}

.card .quote {
    font-size: 55%;
    position: absolute;
    right: 13%;
    left: 13%;
    top: 89.5%;
    transform: translateY(-45%);
    font-style: italic;
}

.sidequest .grit_reward {
    color: rgb(255, 255, 255);
    position: absolute;
    right: 7.2%;
    top: 3.1%;
    font-size: 150%;
    font-weight: bold;
    text-shadow:
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}