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

:root {
    /* coin/cointext colors */
    --gold: #ffc100;
    --darkgold: #a45c16;
}

.rules .chapter .title {
    color: #6d2815;
    background: white;
}

#rules .is_automatic {
    display: inline-block;
    vertical-align: text-bottom;
    color: black;
    background-image: url(/bundles/images/ui-icons_222222_256x240.png)
}
/* Jquery UI may be missing from the rules */
.ui-icon {
    width: 16px;
    height: 16px;
}
.ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px;
}
#rules .note {
    font-style: italic;
}

#rules .verybig{font-size: 2em;}
#rules .subtitle {
    font-weight: bold;
    font-style: italic;
    font-size: x-small;
    color: black;
}
#rules img.icon {
    width: 1em;
    margin: 0 0 0.2em 0.1em;
    vertical-align: middle;
}

.circle {
    font-weight: bold;
    border-radius: 50%;
    padding: 0 0.3em;
    font-style: normal;
    color: #fff;
    font-family: sans-serif;
}
.red.circle {
    background: red;
}
.yellow.circle {
    background: gold;
    color: #000;
}
.blue.circle {
    background: royalblue;
}
.orange.circle {
    background: orange;
}
.green.circle {
    background: green;
}

.rules .card {
    position: relative;
    display: inline-block;
    margin: 1%;
    height: auto;
    border-radius: 6.5% / 4%;
    box-shadow: 0.1em 0.1em 0.2em #9bb2bb;
}

#rules .narrow {
    height: 8em;
    width: 46%;
}
#rules .fade {
    margin: 0 auto;
    overflow-y: hidden;
    position: relative;
}
#rules .fade::after {
    box-shadow: inset 0 20px 14px -6px, inset 0 -40px 24px -16px;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    color: #FDE7B6;
}
#rulesContainer #rules .fade::after {
    color: #e8f0f3;
}
#rules .card:not(.partial) {
    width: 20%;
}
#rules .card.partial {
    width: calc(100% - 0.5em);
}
#rules .inset .card {
    width: 70%;
}
#rules #cart2.narrow {
    height: 10em;
}
#rules #cart1 .card.partial {
    top: -3.3em;
}
#rules #cart2 .card.partial {
    top: -1em;
}
#rules .card.angled {
    transform: rotate(-45deg);
    top: 1em;
    margin-right: calc(-100% / 7);
    width: 25%;
    left: 3em;
}

#rules .card.side {
    border-radius: 3% / 5.5%;
    width: 45%;
}

#rules .doubles {
    height: 14.5em;
    overflow: hidden;
}

#rules .left { float: left; }
#rules .right { float: right; }
#rules .inset {
    position: relative;
    display: inline-block;
    margin: 1%;
    width: 30%;
    height: auto;
}
#rules .layout1 { width: 98%; }
#rules .layout2 { width: 59%; }
#rules .refill { width: 75%; }
#rules .buildex { width: 80%; margin: 0 10%; }
#rules .ex .overlay { width: 92%; top: 51%; margin: 0 4%; }
#rules p.basic { width: 90%; }
#rules #poul.narrow { height: 12.6em; }
#rules #poul .card.partial {
    top: -0.9em;
}
#rules .unlockex {
    text-align: center;
}
#rules .unlockex #square {
    margin: 0 auto;
    display: block;
    margin-bottom: -18%;
}
#rules .unlockex .v {
    margin: -0.5%;
}
#rules .unlockex #coop {
    z-index: 3;
}
#rules .unlockex #brew {
    transform: rotate(-2deg);
    z-index: 2;
}
#rules .thin {
    position: relative;
    flex-direction: column;
    display: flex;
    margin-top: 5%;
    width: 50%;
    left: -4%;
}

#rules #sp {
    width: 59%;
    overflow: hidden;
    height: 6em;
    padding-top: 1em;
    margin-top: 0;
}
#rules #sp.fade::after {
    box-shadow: inset 0 -40px 24px -16px;
}
#rules #sp .card {
    transform: rotate(-8deg);
    left: 10%;
    width: calc(100% - 2em);
}
#rules #sp .overlay {
    top: 27%;
    left: 73%;
}


#rules #groc {
    width: 59%;
    overflow: hidden;
    height: 18em;
}
#rules #groc .card {
    transform: rotate(-9deg);
    width: calc(100% - 4em);
    top: -4.5em;
    left: 2em;
}
#rules #groc .overlay {
    top: 50%;
    left: 27%;
}

#rules .captionbox {
    border: 1px solid black;
    padding: 0.5em;
    background-color: #fff;
    font-weight: bold;
    font-style: italic;
    font-size: 0.9em;
}

#rules .has_background {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#rules .hasOverlay {
    position: relative;
}
#rules .anatomy {
    width: 99%;
    padding-top: 104%;
    position: relative;
    display: inline-block;
}
#rules .anatomy.has_background {
    background-image: url('/game-plugins/villagers/1.1.13/images/rules/anatomy.png');
}
#rules .overlay {
    left: 0;
    position: absolute;
}
#rules #cart1 .overlay {
    top: 27%;
    left: 2.5%;
}
#rules #poul #a.overlay {
    top: 13%;
}
#rules #poul #b.overlay {
    top: 75%;
    left: 21%;
}
#rules #keyring .overlay {
    top: 31%;
    left: 51%;
}
#rules .overlay>* {
    position: absolute;
}

#rules .anatomy>div {
    font-size: 0.85em;
    padding: 3px;
}

#rules .anatomy .col1 { width: 15.2%; height: 6%; left: 5.25%;}
#rules .anatomy .col2 { width: 41.25%; left: 57%;}
#rules .anatomy .food { top: 43.75%; }
#rules .anatomy .build { top: 52%; }
#rules .anatomy .row1 { top: 5%; }
#rules .anatomy .row2 { top: 10.5%; }
#rules .anatomy .row3 { top: 15%; }
#rules .anatomy .row4 { top: 21%; }
#rules .anatomy .row5 { top: 23.5%; }
#rules .anatomy .row6 { top: 28%; }
#rules .anatomy .row7 { top: 34%; }
#rules .anatomy .row8 { top: 37%; }
#rules .anatomy .row9 { top: 41.7%; }
#rules .anatomy .row10 { top: 46%; }
#rules .anatomy .row11 { top: 50.3%; }
#rules .anatomy .row12 { top: 56.2%; }
#rules .anatomy .row13 { top: 62.5%; }
#rules .anatomy .short { display: none; }
#rules .anatomy .col1.short { left: 4.75%; width: 14.5%; text-align: center; }
#rules .anatomy .food.short { top: 42.75%; }
#rules .anatomy .build.short { top: 51%; }
#rules .anatomy .row1.short { top: 4.5%; }
#rules .anatomy .row2.short { top: 9.5%; }
#rules .anatomy .row4.short { top: 19%; }
#rules .anatomy .row5.short { top: 22.5%; }
#rules .anatomy .row6.short { top: 27%; }
#rules .anatomy .row7.short { top: 32.5%; }
#rules .anatomy .row8.short { top: 36%; }
#rules .anatomy .row9.short { top: 40%; }
#rules .anatomy .row10.short { top: 44%; }
#rules .anatomy .row11.short { top: 49%; }
#rules .anatomy .row12.short { top: 55%; }
#rules .anatomy .row13.short { top: 59%; left: 66%; width: 30%; }
#rulesContainer #rules { max-width: 99%; }
#rulesContainer #rules .anatomy .short { font-size: .75em; display: inline-block; position: absolute; }
#rulesContainer #rules .anatomy.overlay { position: relative; padding-top: unset; }
#rulesContainer #rules .anatomy.overlay>div {
    font-size: unset;
    width: unset;
    height: unset;
    left: unset;
    position: relative;
}
#rulesContainer #rules .captionbox { font-weight: normal; }

#rules .sym {
    height: 1.5em;
    width: auto;
    display: inline;
    vertical-align: text-bottom;
}

#rules .ptext {
    top: 10.5%;
    left: 2%;
}

#rules .coin {
    position: absolute;
    bottom: 10%;
    left: 10%;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    line-height: 4.1em;
    height: 4em;
    width: 4em;
    font-weight: bold;
    text-shadow: none;
    border-width: 0.1em;
    border-style: solid;
    color: black;
    transform: rotate(6deg);
}

#rules .coin.gold {
    background: var(--gold);
    border-color: var(--darkgold);
    box-shadow: 2px 2px var(--darkgold);
}

#rules .coin.gold .inner {
    border: 1px solid var(--darkgold);
    border-radius: 50%;
    width: 70%;
    height: 70%;
    margin: auto;
    position: relative;
    top: 13%;
    line-height: 2.3em;
    font-size: 1.2em;
}

#rules .appendix {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#rules .appendix .comment {
    padding: 4px;
    margin: 4px;
    width: 100%;
}
.rules .paragraph {
    display: flex;
}
.rules .paragraph .text {
    margin: auto 1em;
}
.ui-popup .rules .paragraph .text {
    max-width: 21em;
    min-width: 16em;
}
#rules .appendix.cards .paragraph {
    width: calc(97% / 3);
    display: flex;
    align-items: center;
    padding: 0;
}
#rules .appendix.cards .paragraph.half {
    width: 49%;
}
#rules .appendix.cards .paragraph.mid {
    width: calc(99% - calc(100% / 3));
}
#rules .appendix.cards .paragraph.shalf {
    width: 37%;
}
#rules .appendix.cards .paragraph.shalf .card {
    min-width: 23.5%;
}
#rules .appendix.cards .paragraph.lhalf {
    width: 61%;
}
#rules .appendix.cards .paragraph.long {
    width: 99%;
}
#rules .appendix.cards .paragraph .text {
    margin: 1%;
}
#rules .appendix.cards .paragraph .card {
    float: left;
    width: 7.5em;
    margin: 3%;
}
#rules .appendix.cards .paragraph .card.sideways {
    width: 13em;
}
#rules .appendix.cards .paragraph.long .card {
    width: 15%;
}
#rules .appendix.cards .paragraph.long .text {
    width: 85%;
}

.rules .paragraph .clarification {
    margin-top: 1em;
    font-size: smaller;
    font-style: italic;
}
.rules .paragraph .deviation {
    overflow: auto;
}

#rules hr.separator {
    border: none;
    border-top: medium double #000;
}

#rules img.expansion.title {
    width: 50%;
}

#rulesContainer #rules .narrow {
    width: 21em;
}
#rulesContainer #rules #sp, #rulesContainer #rules #groc {
    width: 100%;
}
#rulesContainer #rules #keyring {
    width: 100%;
    text-align: center;
}
#rulesContainer #rules .doubles { height: 7.5em; }
#rulesContainer #rules .paragraph { width: 100%; display: block; }
#rulesContainer #rules .paragraph .text { margin: 3%; }
#rulesContainer #rules .paragraph.duo .text { display: inline-block; }
#rulesContainer #rules .paragraph .card:not(.keyringex) { width: 30%; }
#rulesContainer #rules #keyring .overlay { left: 63%; }
#rulesContainer #rules .coin { left: 5em; }
#rulesContainer #rules .thin { left: 0; width: unset; }

@media ( min-width: 100em ) {
    #rulesContainer #rules .anatomy .short { font-size: 1em; padding-top: 0.5em;}
}
@media ( min-width: 100em ) {
    #rulesContainer #rules .doubles { height: 10em; }
}
@media ( max-width: 100em ) {
    #rulesContainer #rules .exsmall { font-size: smaller; }
}