/* 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 .big { font-size: 2em; }
#rules .title {
    background-image: url('/game-plugins/red7/1.0.1/images/banner.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 2.5em;
    border: none;
    text-align: center;
    text-shadow: 2px 2px 4px #000000;
    color: white;
    padding-top: 1em;
}
#rulesContainer .chapter .title { background-color: initial; }

.cardslot { position: relative; text-align: center; margin: 0.1em; display: inline-grid; width: 3em; height: 4.37em; border-radius:0.5em; align-content: center; vertical-align:middle; }
.cardslot .cardNumber { position: absolute; font-size: 3em; color: white; text-shadow: 2px 2px 4px #000000; left: 20%; }
.cardslot .splash { position: absolute; top: 0.4em; }

.rules table { width: 100%; }
.rules .icon { width: 4em; }
.rules .warning { color: red; }
.rules .centered { text-align: center; }
.rules .tied { color: white; background-color:black; }

.rules .colorRules { font-size: 1.2em; font-weight:bold; }
.rules .colorRules td { border-bottom: 1px dashed darkgrey; }
.rules .rule6 { color: red; }
.rules .rule5 { color: orangered; }
.rules .rule4 { color: orange; }
.rules .rule3 { color: green; }
.rules .rule2 { color: cornflowerblue; }
.rules .rule1 { color: darkblue; }
.rules .rule0 { color: indigo; }

.rules thead { font-size: 1.2em; font-weight:bold; }
.rules td { border-bottom: 1px dashed darkgrey; text-align: center; }
.rules .expert td { text-align: left; }

.rules .colorRules .cardslot { margin-left: -0.4em; border: 1px solid black;  border-width: 1px 0 0 1px; display: inline-block; width: 1.5em; height: 1.5em; border-radius: 0.5em 0 0 0; vertical-align:bottom; }
.rules .colorRules .cardslot.selected { height:2em; }
.rules .colorRules .cardNumber { font-size: 1em; text-shadow: 2px 2px 4px #000000; }
.rules .color0 { background-image: url('/game-plugins/red7/1.0.1/images/color0.gif'); }
.rules .color1 { background-image: url('/game-plugins/red7/1.0.1/images/color1.gif'); }
.rules .color2 { background-image: url('/game-plugins/red7/1.0.1/images/color2.gif'); }
.rules .color3 { background-image: url('/game-plugins/red7/1.0.1/images/color3.gif'); }
.rules .color4 { background-image: url('/game-plugins/red7/1.0.1/images/color4.gif'); }
.rules .color5 { background-image: url('/game-plugins/red7/1.0.1/images/color5.gif'); }
.rules .color6 { background-image: url('/game-plugins/red7/1.0.1/images/color6.gif'); }

.rules .winning .cardslot { border: 1px solid black; display: inline-block; width: 1.5em; height: 2.19em; border-radius: 0.5em; vertical-align:middle; font-size:1.2em; font-weight: bold; }
.rules .winning .cardslot.overlaps { z-index: 1; margin-left: -1.5em; }
.rules .winning .white { background-color: white; }
.rules .winning .blue { background-color: cornflowerblue; color: black; }
.rules .winning .red { background-color: red; color: black;}

.rules .float { float: left; }
.rules .inlineicon { height: 2em; }