/* 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 */

#rules .chapter .title {
    background-color: #1ab3c0;
    color: white;
    text-align: center;
    padding: 0px;
    font-size: 2em;
    font-variant: small-caps;
}

#rulesContainer #rules .chapter .title {
    background-color: #1ab3c0;
    color: white;
    text-align: center;
    padding: 0px;
    font-size: 1.5em;
    font-variant: small-caps;
}

#rules .symbol-card {
    float:left;
    clear:left;
    width: 7%;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 1%;
}

#rules .symbol-card-text {
    float:left;
    width: 89%;
    clear: right;
}

#rulesContainer #rules .symbol-card {
    width: 20%;
}

#rulesContainer #rules .symbol-card-text {
    width: 76%;
}

#rules .appendix.cards .paragraph {
    width: 47%;
}

#rules .appendix.cards .paragraph .card {
    float: left;
    width: 44%;
    margin: 3%;
}

#rulesContainer #rules .appendix.cards .paragraph {
    width: 100%;
}