/* 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 .normalText {
    font-family: 'Times New Roman';
    font-size: 1.4em;
    font-style: normal;
}

#rules .imageleft img {
    width: 25%;
    float: left;
    margin: 1em;
}

#rules .tinyimageleft img {
    width: 15%;
    float: left;
    margin: 1em;
}

figure {
    display:inline-block;
    float: left;
    width: 25%;
}

figure img {
    vertical-align: top;
}

figure figcaption {
    text-align: center;
    font-style: italic;
}

#rules .imageright img {
    width: 67%;
    float: right;
    margin: 1em;
}

#rules .mediumimageright img {
    width: 50%;
    float: right;
    margin: 1em;
}

#rules .wideimage img {
    width: 100%;
}

#rules .reference-tile {
    width: 10%;
    float: left;
    margin-right: 1em;
}

#rules .title { text-align: center; color: black; position: relative; overflow: hidden; height: 60px; line-height: 60px; }
#rules .title .title-text { position: relative; z-index: 2; font-size: 1.8em; }
#rules .title .title-text-smaller { position: relative; z-index: 2; font-size: 1.8em; }
#sidebar .title .title-text-smaller { font-size: 0.8em; }
#rules .title img { height: 100%; }
#rules .title img { position: absolute; left: 0; top: 0; width: 100%; opacity: 0.5; }

#rules .left-major { padding-left: 60px; }
#sidebar .left-major { padding-left: 0px; }
#rules .left-minor { padding-left: 40px; }
#sidebar .left-minor { padding-left: 0px; }
#rules .left-tiny { padding-left: 10px; }
#sidebar .left-tiny { padding-left: 0px; }

#rules .tile { width: 95%; float: left; margin: .3em .5em; padding: .2em .5em; border: 1px solid #911e20; border-radius: 4px; }
#rules .tile-gray { background-color: #e7e4cf; }
#rules .tile-orange { background-color: #fbc485; }
#rules .tile-yellow { background-color: #f9f47a; }
#rules .tile-green { background-color: #afdc9a; }
#rules .tile-brown { background-color: #d4b09a; }
#rules .tile img { width: 25%; float: left; margin-right: 1em; }

/* Using the master-middletl anchor here so these styles do not affect the rules panel in game  */
#master-middletl .div-farmhand-1    { height: 10em; }
#master-middletl .div-farmhand-1-de { height: 13em; }
#master-middletl .div-farmhand-2    { height: 11.2em; }
#master-middletl .div-farmhand-2-de { height: 14em; }
#master-middletl .div-farmhand-3    { height: 14em; }
#master-middletl .div-farmhand-3-de { height: 15.5em; }

#master-middletl .div-townsfolk-1    { }
#master-middletl .div-townsfolk-2    { height: 22em; }
#master-middletl .div-townsfolk-2-de { height: 25.5em; }
#master-middletl .div-townsfolk-3    { height: 20.5em; }
#master-middletl .div-townsfolk-3-de { height: 22em; }

#master-middletl .div-event-1    { height: 16em; }
#master-middletl .div-event-1-de { height: 17em; }
#master-middletl .div-event-2    { height: 10em; }
#master-middletl .div-event-2-de { height: 11.5em; }
#master-middletl .div-event-3    { height: 38em; }
#master-middletl .div-event-3-de { height: 42em; }
#master-middletl .div-event-4    { height: 18em; }
#master-middletl .div-event-4-de { height: 19em; }
#master-middletl .div-event-5    { height: 22em; }
#master-middletl .div-event-5-de { height: 24em; }
#master-middletl .div-event-6    { }
#master-middletl .div-event-7    { }

#rules .h4hcolumns { height: 32em; }

#rules p { margin-bottom: 15px; }

#rulesContainer a { color: black; }
#rulesContainer .chapter .title { background-color: white; height: 50px; line-height: 50px; }

#rules .column { float: left; width: 50%; }
#rulesContainer #rules .column { float:unset; width:unset; margin-right: 5px; }
#rules .row:after { content: ""; display: table; clear: both; }