/* 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
   #rulesPage: ingame rules page display
   #panelRules: ingame rules sidepanel display
   #popup.rules: popup with rules extract only */

#panelRules .chapter .title,
.rules .chapter .title {
    color: #f9f4ba;
    background-color: #923329;
    border: 4px solid #f9f4ba;
    border-radius: 20px;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
}
.rules h2 {
    display: inline;
    color: black;
}

.rules h3 {
    color: #923329;
    clear: left;
}

.rules h4 {
    color: #923329;
    font-size: 1.6em;
}

.rules h5 {
    margin-top: 0.8em;
    margin-bottom: 0.8em;
    clear: both;
}

.rules h6 {
    background: red;
}

.headingLetter {
    border-radius: 70%;
    width: 24px;
    height: 12px;
    padding: 3px;
    margin-right: 8px;
    border: 2px solid black;
    color: #923329;
    text-align: center;
    display: inline-table;
    font-weight: bold;
    font-size: 21px;
}

#panelRules .headingLetter {
    border-radius: 70%;
    width: 29px;
    height: 12px;
    padding: 0px;
    margin-right: 2px;
    border: 2px solid black;
    color: #923329;
    text-align: center;
    display: inline-table;
    font-weight: bold;
    font-size: 21px;
}


.heading {
    border-radius: 14px;
    padding: 6px;
    border: 4px solid beige;
    clear: both;
}
.colorA {
    background: #f6c2d8;
}
.colorB {
    background: #c9dfb7;
}
.colorC {
    background: #d0c8e2;
}
.colorD {
    background: #b4dff4;
}
.colorE {
    background: #f8c0ae;
}
.colorF {
    background: #f8f29b;
}
.colorG {
    background: #d6d5d6;
}

.note {
    font-style: italic;
    font-weight: normal;
    color: black;
}

.rules img.inline {
    float: left;
    margin-right: 1em;
    margin-top: .3em;
    margin-bottom: .7em;
    clear: left;
}

.rules img.inlineRight {
    margin-left: 1em;
    margin-bottom: 0.5em;
    clear: right;
    vertical-align: middle;
}

.rules img.inlineRightBig {
    margin-left: 1em;
    clear: right;
    float: right;
}

.rules td {
    padding: 0.3em;
}

.rules img.w3 {
    width: 3em;
}

.rules img.w4 {
    width: 4em;
}

.rules img.w5 {
    width: 5em;
}

.rules img.w8 {
    width: 8em;
}

.rules img.w12 {
    width: 12em;
}

.rules img.w30 {
    width: 30em;
}

.phaseMarker {
    border-radius: 1em;
    color: #923329;
    border: 2px solid black;
    padding: 0 0.2em;
    font-weight: bold;
}

.rules img.inlinePic {
    height: 1.5em;
    vertical-align: middle;
}

.rules img.inlinePic.big {
    height: 2em;
}

.symbolExp {
    clear: both;
}