president.css

/**
 * Copyright (c) 2020. Quaresma.
 */


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

#player_table {
    display: block;
    border: 1px solid;
    margin: 0px auto;
    position: relative;
    background-color: #244018;
    border-radius: 8px 8px 8px 8px;
}

#revolution_box {
    background-image: url('img/revolution.png');
    position: absolute;
    top: 2%;
    left: 2%;  
    width: 70px;
    height: 70px;
}

#round_box {
    position: absolute;
    bottom: 0.5%;
    right: 0.5%;
    color: white;
}

.cardIcon {
    color: black;
    font-weight: bold;
    position: absolute;
    background-color: white;
    border-radius: 6px 6px 6px 6px;
    padding: 2px;
    text-align: center;
    font-size: 15px;
}

.player_table_4 {
    height: 550px;
    width: 520px;
}

.player_table_5 {
    height: 550px;
    width: 520px;
}

.player_table_6 {
    height: 550px;
    width: 520px;
}

.player_table_7 {
    height: 550px;
    width: 100%;
}

.player_table_8 {
    height: 545px;
    width: 100%;
}

#table {
    position: absolute;
    height: 150px;
    width: 150px;
    text-align: center;
    left: 42%;
    top: 39%;
}

.tableCard {
    position: relative;
    margin: 0px auto;
    width: 150px;
    height: 150px;
}

/*** cards on table ***/

.cardsOnTable {
    position: absolute;
    width: 89px;
    height: 128px;
}

.cardOnTable {
    position: absolute;
    width: 89px;
    height: 128px;
    background-image: url('img/cards.jpg');
    border-radius: 5px 5px 5px 5px;
    border: 1px black solid;
}

.stockitem {
    border: 0px blue solid;
    border-radius: 5px 5px 5px 5px;
}

.cardSelected {
    top: -5px !important;
}

.qIcon {
    margin-right: 10px;
}

.qHidden {
    display: none;
}

.iconPresident {
    display: inline-block;
    background-image: url('img/noun_president_638003_x30.png');
    width: 30px;
    height: 30px;
    margin-right: 10px;
    position: relative;
    float: left;
}

.iconPrimeMinister {
    display: inline-block;
    background-image: url('img/noun_Businessman_690690_x30.png');
    width: 30px;
    height: 30px;
    margin-right: 10px;
    position: relative;
    float: left;
}

.iconCitizen {
    display: inline-block;
    background-image: url('img/noun_people_1244257_x30.png');
    width: 30px;
    height: 30px;
    margin-right: 10px;
    position: relative;
    float: left;
}

.iconPeasant {
    display: inline-block;
    background-image: url('img/noun_Farmer_684392_x30.png');
    width: 30px;
    height: 30px;
    margin-right: 10px;
    position: relative;
    float: left;
}

.iconBeggar {
    display: inline-block;
    background-image: url('img/noun_beggar_968713_x30.png');
    width: 30px;
    height: 30px;
    margin-right: 10px;
    position: relative;
    float: left;
}

.card_place_4_1 {
    left: 42%;
    bottom: 11%
}

.card_place_4_2 {
    left: 5%;
    top: 33%
}

.card_place_4_3 {
    left: 42%;
    top: 0%
}

.card_place_4_4 {
    left: 78%;
    top: 33%
}

.card_place_5_1 {
    left: 42%;
    bottom: 11%
}

.card_place_5_2 {
    left: 10%;
    top: 46%
}

.card_place_5_3 {
    left: 25%;
    top: 0%
}

.card_place_5_4 {
    left: 64%;
    top: 0%
}

.card_place_5_5 {
    left: 75%;
    top: 46%
}

.card_place_6_1 {
    left: 42%;
    bottom: 11%
}

.card_place_6_2 {
    left: 10%;
    top: 53%
}

.card_place_6_3 {
    left: 10%;
    top: 14%
}

.card_place_6_4 {
    left: 42%;
    top: 0%
}

.card_place_6_5 {
    left: 76%;
    top: 14%
}

.card_place_6_6 {
    left: 76%;
    top: 53%
}

.card_place_7_1 {
    left: 42%;
    bottom: 11%
}

.card_place_7_2 {
    left: 21%;
    top: 62%
}

.card_place_7_3 {
    left: 7%;
    top: 30%
}

.card_place_7_4 {
    left: 30%;
    top: 0%
}

.card_place_7_5 {
    left: 58%;
    top: 0%
}

.card_place_7_6 {
    left: 80%;
    top: 30%
}

.card_place_7_7 {
    left: 67%;
    top: 62%
}

.card_place_8_1 {
    left: 42%;
    bottom: 11%
}

.card_place_8_2 {
    left: 22%;
    top: 65%
}

.card_place_8_3 {
    left: 4%;
    top: 34%
}

.card_place_8_4 {
    left: 22%;
    top: 1%
}

.card_place_8_5 {
    left: 42%;
    top: 0%
}

.card_place_8_6 {
    left: 65%;
    top: 1%
}

.card_place_8_7 {
    left: 81%;
    top: 34%
}

.card_place_8_8 {
    left: 65%;
    top: 65%
}

.player_card {
    width: 90px;
    height: 130px;
    border-radius: 5px;
    position: absolute;
}

.player_name {
    text-align: center;
    border-radius: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    width: auto;
    margin-bottom: 5px;
    word-wrap:break-word;
    font-size: 13px;
    font-weight: bold;
}

.card_places {
    width: 89px;
    height: 129px;
    background-image: url('img/cards.jpg');
    border-radius: 5px 5px 5px 5px;
    border: 1px black solid;
    background-position: -200% -400%;
    opacity: 1;
}

@media only screen and (max-width: 540px) {

    #table {
        position: absolute;
        height: 150px;
        width: 150px;
        text-align: center;
        left: 40%;
        top: 39%;
    }

    .card_place_4_1 {
        left: 40%;
        bottom: 11%
    }

    .card_place_4_2 {
        left: 5%;
        top: 33%
    }

    .card_place_4_3 {
        left: 40%;
        top: 0%
    }

    .card_place_4_4 {
        left: 77%;
        top: 33%
    }

    .card_place_5_1 {
        left: 40%;
        bottom: 11%
    }

    .card_place_5_2 {
        left: 5%;
        top: 46%
    }

    .card_place_5_3 {
        left: 20%;
        top: 0%
    }

    .card_place_5_4 {
        left: 60%;
        top: 0%
    }

    .card_place_5_5 {
        left: 73%;
        top: 46%
    }

    .card_place_6_1 {
        left: 40%;
        bottom: 11%
    }

    .card_place_6_2 {
        left: 10%;
        top: 53%
    }

    .card_place_6_3 {
        left: 10%;
        top: 14%
    }

    .card_place_6_4 {
        left: 40%;
        top: 0%
    }

    .card_place_6_5 {
        left: 70%;
        top: 14%
    }

    .card_place_6_6 {
        left: 70%;
        top: 53%
    }

    .card_place_7_1 {
        left: 40%;
        bottom: 11%
    }

    .card_place_7_2 {
        left: 10%;
        top: 62%
    }

    .card_place_7_3 {
        left: 2%;
        top: 29%;
        z-index: 10;
    }

    .card_place_7_4 {
        left: 25%;
        top: 0%
    }

    .card_place_7_5 {
        left: 55%;
        top: 0%
    }

    .card_place_7_6 {
        left: 80%;
        top: 29%
    }

    .card_place_7_7 {
        left: 70%;
        top: 62%
    }

    .card_place_8_1 {
        left: 40%;
        bottom: 11%
    }

    .card_place_8_2 {
        left: 18%;
        top: 65%
    }

    .card_place_8_3 {
        left: 2%;
        top: 34%
    }

    .card_place_8_4 {
        left: 18%;
        top: 1%
    }

    .card_place_8_5 {
        left: 40%;
        top: 0%
    }

    .card_place_8_6 {
        left: 62%;
        top: 1%
    }

    .card_place_8_7 {
        left: 80%;
        top: 34%
    }

    .card_place_8_8 {
        left: 62%;
        top: 65%
    }
}