/* 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: 'Ehpoque Roman'; src: local('Ehpoque Roman'), url('/game-plugins/paris/1.1.22/fonts/Rafaeiro%20Typeiro%20-%20Ehpoque-Roman.otf') format('truetype'); }
@font-face { font-family: 'ToulouseLautrec'; src: local('ToulouseLautrec'), url('/game-plugins/paris/1.1.22/fonts/TOULOUSELAUTRECPierreBonnard.ttf') format('truetype'); }
@font-face { font-family: 'GrotesqueMTStdCondensed'; src: local('GrotesqueMTStdCondensed'), url('/game-plugins/paris/1.1.22/fonts/GrotesqueMTStd-Condensed.otf') format('truetype'); }

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

.rules .description { font-family: 'Ehpoque Roman'; font-size: 1.4em; }
.rules p { font-family: 'Ehpoque Roman'; font-size: 1.4em; }
.rules li { font-family: 'Ehpoque Roman'; font-size: 1.4em; }

#rules .chapter .title { font-family: 'ToulouseLautrec'; font-size: 6em; font-weight: normal; border-top: none; border-bottom: none; margin-left: 10px; margin-bottom: -0.1em; }
#rulesPage .chapter .title { font-family: 'ToulouseLautrec'; font-size: 5em; font-weight: normal; border-top: none; border-bottom: none; }
#panelRules .chapter .title { font-family: 'ToulouseLautrec'; font-size: 2.5vw; font-weight: normal; border-top: none; border-bottom: none; }
#panelRules .chapter .phase-title { background-color: transparent; }
.rules .chapter .subTitle { clear: both; font-family: 'Ehpoque Roman'; font-size: 2em; font-weight: bold; color: #3f70b3; text-transform: uppercase; padding-top: 10px; }
.rules .chapter .postcard-subTitle { text-align: center; grid-area: title; }

.rules .table-caption { font-family: 'GrotesqueMTStdCondensed'; font-size: 1.5em; }
.rules .table-caption-left { text-align: end; }
.rules .table-spaced td { padding-bottom: 10px; padding-top: 10px; }

.rules .image-column { float: left; margin-left: 8%; width: 15%; padding: 5px; }
.rules .image-row { content: ""; clear: both; display: table; }

.rules .phase { position: relative; margin-top: 40px; }
.rules .phase-header { width: 100%; }
.rules .phase .phase-title { color: white; position: absolute; bottom: 0; margin-bottom: 0; text-shadow: 2px 2px black; background-color: transparent; }

.rules .inline-img { width: 3%; }
.rules .blue-caps { font-weight: bold; color: #3f70b3; text-transform: uppercase; }
.rules .orange-caps { font-weight: bold; color: #FF7E2E; text-transform: uppercase; }

.rules .postcard { width: 25%; float: right; }
.rules .postcard-rotate { transform: rotate(90deg); width: 25%; float: right; }
.rules .postcard-help { float: right; }

.rules .postcard-grid { display: grid; grid-template-columns: 3fr 1fr 1fr ; grid-template-areas: "title title title" "rules diagram art"; }
.rules .postcard-grid-rules { grid-area: rules; }
.rules .postcard-grid-art { grid-area: art; }
.rules .postcard-grid-rotate-art { grid-area: art; transform: rotate(90deg); }
.rules .postcard-grid-diagram { grid-area: diagram; }

@media screen and (min-width: 800px) {
    .rules .column { float: left; width: 33%; }
}
.rules .row.after { content: ""; clear: both; display: table; }

.rules .h4hSubTitle { text-align: center; }
@media screen and (min-width: 550px) {
    .rules .sideBySide { display: flex; }
}
.rules .side { flex: 50%; }