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

@font-face { font-family: 'PlainBlackWide'; src: url('/game-plugins/redcathedral/1.1.42/fonts/Plain_Black_Wide-webfont.woff') format('woff'); }
@font-face { font-family: 'CarroisGothicSC'; src: url('/game-plugins/redcathedral/1.1.42/fonts/CarroisGothicSC-Regular.ttf') format('truetype'); }

.rules { background-image: url("/game-plugins/redcathedral/1.1.42/images/rules/background.jpg"); background-size: 100% auto; background-repeat: repeat-y; font-size: 1.1em; }
#rulesPage { max-width: 840px; position: relative; margin-left: auto; margin-right: auto; }

.rc-title {
    font-family: 'PlainBlackWide';
    color: black;
    font-size: 260%;
    padding-bottom: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-image: url('/game-plugins/redcathedral/1.1.42/images/rules/header-separator.png');
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 75% auto;
}
.rc-title::first-letter { color: #be1622; }

.rules .fancy-letter { float: left; width: 7%; margin: 5px; }

.smallcaps-title {
    font-family: 'CarroisGothicSC';
    font-weight: bold;
    color: #be1622;
    font-size: 1.6em;
    margin: 3px 0px;
    border-bottom: 3px solid #be1622;
}
.smallcaps-title-blue {
    font-family: 'CarroisGothicSC';
    font-weight: bold;
    color: #306980;
    font-size: 1.6em;
    margin: 3px 0px;
    border-bottom: 3px solid #306980;
}
.smallcaps-title-purple {
    font-family: 'CarroisGothicSC';
    font-weight: bold;
    color: #736989;
    font-size: 1.6em;
    margin: 3px 0px;
    border-bottom: 3px solid #736989;
}
.smallcaps-text { font-family: 'CarroisGothicSC'; font-weight: bold; font-size: 1.3em; }
.smallcaps-text-red { font-family: 'CarroisGothicSC'; font-weight: bold; font-size: 1.3em; color: #be1622; }
.smallcaps-text-blue { font-family: 'CarroisGothicSC'; font-weight: bold; font-size: 1.3em; color: #306980; }
.smallcaps-subtitle-purple { font-family: 'CarroisGothicSC'; font-weight: bold; font-size: 1.3em; color: #736989; background-color: #D3CEDC; margin-top: 1%; }
.smallcaps-text-purple { font-family: 'CarroisGothicSC'; font-weight: bold; font-size: 1.3em; color: #736989; }
.smallcaps-text-aqua { font-family: 'CarroisGothicSC'; font-weight: bold; font-size: 1.3em; color: #66C8CB; }

.new-guild-title { font-family: 'CarroisGothicSC'; font-weight: bold; font-size: 1.7em; color: #be1622; background: #FBAE47; border-bottom: solid; border-width: 5px; padding-left: 20px; margin-bottom: 15px; }
.new-guild-chapter { background: #FFEAC1; border-bottom: solid; border-width: 5px; border-color: #be1622; margin-left: 5px; margin-right: 5px; margin-bottom: 20px; padding-left: 2px; padding-right: 2px; }

.red-circle {
    display: inline-block;
    background-color: #be1622;
    color: #fff;
    border-radius: 50%;
    line-height: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    font-weight: bold;
    font-style: normal;
}
.gray-circle {
    display: inline-block;
    background-color: #5e492b;
    color: #fff;
    border-radius: 50%;
    line-height: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    font-weight: bold;
    font-style: normal;
}
.purple-circle {
    display: inline-block;
    background-color: #736989;
    color: #fff;
    border-radius: 50%;
    line-height: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    font-weight: bold;
    font-style: normal;
}

.rules ul { margin-bottom: 0; }
ol.setup { list-style: none; counter-reset: item; padding-left: 50px; }
li.setup { counter-increment: item; margin: 0 0 0.5rem 0; position: relative; min-height: 50px; }
li.setup-skip2 { counter-increment: item 2; }
li.setup-skip4 { counter-increment: item 4; }
li.setup:before {
    content: counter(item);
    font-size: 1.4em;
    color: #FCD655;
    font-weight: bold;
    text-align: center;
    position: absolute;
    left: -41px;
    line-height: 41px;
    background-image: url('/game-plugins/redcathedral/1.1.42/images/rules/setup-li.png');
    display: inline-block;
    width: 5%;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.rules .yellow-box { display: inline-block; outline: 3px solid #556987; background: #FFEAC1; padding: 5px; margin-top: 10px; margin-left: 5%; }
.rules .setup .yellow-box { margin-right: 50px; }
.rules .setup .top-offset { padding-top: 50px; }

img.boxed-left { float: left; width: 33%; padding-right: 5px; }
img.boxed-right { float: right; width: 10%; padding-left: 5px; }
img.inline-img { width: 2%; }
img.inline-img-med { width: 4%; }
img.inline-img-large { width: 10%; margin-left: 4%; margin-right: 4%; }

.column { float: left; width: 29.33%; margin-left: 2%; margin-right: 2%; }
.row:after { content: ""; display: table; clear: both; }

.bottom-line { margin: 3px 3px; border-bottom: 2px solid black; }
.rules .setup-wstile { width: 6.8%; }

.green-background { background: #E7E565; }
.light-green-background { background: #F3F2BB; }
.blue-background { background: #D4EDFC; }
.light-blue-background { background: #EAF6FE; }
.purple-background { background: #D3CEDC; }
.light-purple-background { background: #E9E6EE; }
.aqua-background { background: #66C8CB; }
.light-aqua-background { background: #D8EFEE; }

.action-summary {
    font-family: 'PlainBlackWide';
    color: black;
    text-align: center;
    font-size: 2em;
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 15px;
}
.action-summary::first-letter { color: #be1622; }

.action-summary-id {
    float: left;
    margin-left: 30px;
    margin-top: 3px;
    background-color: #5D5143;
    color: #FFEAC1;
    border-radius: 50%;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}

ol.steps { list-style: none; counter-reset: item; }
li.steps { counter-increment: item; position: relative; margin-top: 5px; }
li.steps:before {
    content: counter(item);
    display: inline-block;
    background-color: #be1622;
    color: #fff;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    text-align: center;
    font-weight: bold;
    margin-left: -17px;
}

ol.steps { list-style: none; counter-reset: item; }
li.gray-steps { counter-increment: item; position: relative; margin-top: 5px; }
li.gray-steps:before {
    content: counter(item);
    display: inline-block;
    background-color: #5e492b;
    color: #fff;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    text-align: center;
    font-weight: bold;
}

.rules .action-chapter { padding: 5px; }
.example { font-style: italic; margin-left: 10px; margin-right: 10px; padding: 5px; }

.rules .two-example-images { float: left; width: 46%; margin-left: 2%; margin-right: 2%; }
.rules .three-example-images { float: left; width: 29%; margin-left: 2%; margin-right: 2%; }

.rules .red-border { border-width: 3px; border-style: solid; border-color: #be1622; border-collapse: collapse; padding: 10px; }

.rules .guild-separator { display: block; margin-left: auto; margin-right: auto; }
.rules .guild-table { margin-top: 5%; margin-bottom: 5%; clear: both; }
.rules .guild-img { width: 75%; }
.rules .guild-mark-img { float: right; margin-top: 25%; margin-right: 2%; }
.rules .guild-cell-img { display: block; margin-left: auto; margin-right: auto; }

.rules .guild-left-column { width: 30%; }
.rules .guild-three-column { position: relative; width: 35%; }
.rules .guild-four-column { position: relative; width: 23.3%; }

.rules .guild-three-column-cell-img { width: 50%; }
.rules .guild-four-column-cell-img { width: 75%; }

img.guild-inline-img { width: 10%; }

.rules .new-guild-mark-img { float: left; }
.rules .new-guild-cell-img { margin-left: 15%; margin-bottom: 10px; }
.rules .new-guild-cell-img-with-mark { margin-left: 7%; margin-bottom: 10px; }
.rules .new-guild-mark-text { margin-left: 15%; }
.rules .new-guild-left-column { width: 20%; }
.rules .new-guild-img { width: 100%; }
.rules .new-guild-contractors-mark { float: left; width: 10%; margin-left: 10px; padding: 5px; background: white; border-radius: 40%; }

.rules .tools-parade { width: 10%; margin: 20px; }
.rules .tools-example-img { width: 80%; }

.rules .contract-table-card-img { float: left; width: 40%; margin-right: 10px; }
.rules .contract-table-card-of3-img { float: left; width: 25%; margin-right: 10px; }
.rules .promo2-tile-img { float: left; width: 20%; margin-right: 10px; }

.rules .card-id-4col { position: absolute; width: 10%; top: 1%; right: 1%; }

.rules .card-id-3col-1 { position: absolute; width: 7%; top: 1%; right: 1%; }
.rules .card-id-3col-2 { position: absolute; width: 7%; top: 1%; right: 9%; }
.rules .card-id-3col-3 { position: absolute; width: 7%; top: 1%; right: 17%; }

.rules .building-plan-card { width: 9%; margin: 1%; }