/* add all special styles used for displaying the rules */

/* .rules: used for all elements loading rules (rules at main site, rules ingame, popup with rules extract
   #rules: div with complete rules used at main site and ingame display
   #rulesContainer #rules: ingame rules display only
   #sidebarPanel #rules: ingame rules display on right side only
   #sidebarBottom #rules: ingame rules display at bottom only
   .ui-popup .rules: popup with rules extract only */

.card_image {
    float: left;
    margin-right: 4%;
    width: 33%;
    height: 60px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
}

.card_container {
    float: left;
    padding: 1.5%;
    width: 21%;
}

#rules_cards {
    width: 100%;
    position: relative;
    float: left;
}

.frequency {
    padding-top: 70%;
    text-align: center;
    width: 100%;
    font-weight: bold;
}

#rules_cards .inner_container {
    padding-bottom: 80%;
}

.inner_container > .card_image {
    position: absolute;
    width: 100%;
    height: 80%;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
}

.race_title {
    padding-bottom: 25%;
    width: 90%;
    padding-left: 5%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("/game-plugins/race/1.0.1/images/race_title.svg");
}

.rithle_power {
    background-image: url("/game-plugins/race/1.0.1/images/Rithle_Superpower.svg");
}

.aristas_power {
    background-image: url("/game-plugins/race/1.0.1/images/Aristas_Superpower.svg");
}

.celya_power {
    background-image: url("/game-plugins/race/1.0.1/images/Celya_Superpower.svg");
}

.elaari_power {
    background-image: url("/game-plugins/race/1.0.1/images/Elaari_Superpower.svg");
}

.celya7 {
    background-image: url("/game-plugins/race/1.0.1/images/Celya7.svg");
}

.aristas7 {
    background-image: url("/game-plugins/race/1.0.1/images/Aristas7.svg");
}

.elaari7 {
    background-image: url("/game-plugins/race/1.0.1/images/Elaari7.svg");
}

.rithle7 {
    background-image: url("/game-plugins/race/1.0.1/images/Rithle7.svg");
}

.celya5 {
    background-image: url("/game-plugins/race/1.0.1/images/Celya5.svg");
}

.aristas5 {
    background-image: url("/game-plugins/race/1.0.1/images/Aristas5.svg");
}

.elaari5 {
    background-image: url("/game-plugins/race/1.0.1/images/Elaari5.svg");
}

.rithle5 {
    background-image: url("/game-plugins/race/1.0.1/images/Rithle5.svg");
}

.celya3 {
    background-image: url("/game-plugins/race/1.0.1/images/Celya3.svg");
}

.aristas3 {
    background-image: url("/game-plugins/race/1.0.1/images/Aristas3.svg");
}

.elaari3 {
    background-image: url("/game-plugins/race/1.0.1/images/Elaari3.svg");
}

.rithle3 {
    background-image: url("/game-plugins/race/1.0.1/images/Rithle3.svg");
}

.celya20 {
    background-image: url("/game-plugins/race/1.0.1/images/Celya20.svg");
}

.aristas20 {
    background-image: url("/game-plugins/race/1.0.1/images/Aristas20.svg");
}

.elaari20 {
    background-image: url("/game-plugins/race/1.0.1/images/Elaari20.svg");
}

.rithle20 {
    background-image: url("/game-plugins/race/1.0.1/images/Rithle20.svg");
}

.plus12 {
    background-image: url("/game-plugins/race/1.0.1/images/Plus12.svg");
}

.plus14 {
    background-image: url("/game-plugins/race/1.0.1/images/Plus14.svg");
}

.plus9 {
    background-image: url("/game-plugins/race/1.0.1/images/Plus9.svg");
}

.card_effects {
    width: 30%;
    min-height: 110px;
    position: relative;
}

#rules_board {
    width: 50%;
    float: left;
    position: relative;
}

#rules_board .inner_container {
    padding-bottom: 85.2%;
    position: relative;
    top: 0%;
    left: 0%;
}

#rules_board .board_image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("/game-plugins/race/1.0.1/images/race_board.svg");
}

#rules_knonsters {
    width: 50%;
    float: right;
    position: relative;
}

#rules_knonsters>.knonster_container {
    width: 45%;
    height: 100%;
    padding-right: 2%;
    padding-left: 3%;
    float: left;
    position: relative;
}

.inner_container {
    position: relative;
    top: 0%;
    left: 0%;
    padding-bottom: 100%;
    width: 100%;
}

.inner_container>div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#rules_knonsters .rithle {
    background-image: url("/game-plugins/race/1.0.1/images/Knonster_Rithle.svg");
}

#rules_knonsters .celya {
    background-image: url("/game-plugins/race/1.0.1/images/Knonster_Celya.svg");
}

#rules_knonsters .elaari {
    background-image: url("/game-plugins/race/1.0.1/images/Knonster_Elaari.svg");
}

#rules_knonsters .aristas {
    background-image: url("/game-plugins/race/1.0.1/images/Knonster_Aristas.svg");
}

#sidebarPanel #rules .card_effects,
 .ui-popup .rules .card_effects {
    width: 100%;
    min-height: 0;
}