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

/* Garamon EB for headers*/
@font-face {
    font-family: 'EBGaramond';
    src: local('EBGaramond'),
    url('/game-plugins/innovationultimate/1.5.53/fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'SansSerifFLF';
    src: local('SansSerifFLF'),
    url('/game-plugins/innovationultimate/1.5.53/fonts/SansSerifFLF.otf') format('opentype');
}

.rules h1 {
    font-family: 'EBGaramond', sans-serif;
    font-weight: bold;
    margin: 0.5em 2em 0.5em 2em;
    color: #CAA04F;
    padding: 4px;
    font-size: 1.75em;
    border: none;
    text-align: center;
    text-transform: uppercase;
    border-radius: 0.2em;
    background-image: url(/game-plugins/innovationultimate/1.5.53/images/rules/h1_background.png);
    background-size: 100% 100%;
    text-shadow: none;
}

#panelRules h1 {
    padding: 2px;
    font-size: 1.5em;
    margin: 0.5em;
}

.rules .chapter h2 {
    font-family: 'EBGaramond', sans-serif;
    font-weight: bold;
    margin: 0.5em 2em 0.5em 2.5em;
    color: #CAA04F;
    background-color: #230C04;
    padding: 4px;
    padding-left: 1em;
    font-size: 1.5em;
    border: none;
    text-align: left;
    text-transform: uppercase;
    width: 50%;
    text-shadow: none;
}

#panelRules h2 {
    font-size: 1.25em;
    padding: 2px;
    margin: 0.5em;
    width: 90%;
}

/* h3 is used in expansionboxes */

.rules h4 {
    font-family: 'EBGaramond', sans-serif;
    font-weight: bold;
    margin: 0.5em 0.5em 0.5em 0.5em;
    color: #CAA04F;
    background-color: #230C04;
    padding: 4px;
    font-size: 1.25em;
    border: none;
    text-align: left;
    text-transform: uppercase;
    text-shadow: none;
}

#panelRules h4 {
    font-size: 1.25em;
    background-color: transparent;
    color: #230C04;
}

.rules h5 {
    margin: 0.5em;
    text-align: left;
    font-size: 1.1em;
    font-family: 'SansSerifFLF', sans-serif;
}

.rules .expansionname {
    font-family: 'SansSerifFLF', sans-serif;
}

.rules .expansionheader {
    width: 40%;
    margin-left: 30%;
}

/* split content */
.rules .content {
    width: 45%;
    float: left;
    margin-right: 1em;
}

#panelRules .content {
    width: 95%;
}

.rules .content ul {
    list-style: none;
}


.rules p {
    margin-bottom: 0.8em;
}


/* sidebar or not sidebar */
#panelRules .nosidebar {
    display: none;
}

.ui-popup .rules .nopopup {
    display: none;
}

.rules .sidebaronly {
    display: none;
}

#panelRules .sidebaronly {
    display: inherit;
}

/* don't display examples in the sidebar */
#panelRules .example {
    display: none;
}

.rules .example {
    font-style: italic;
}

.rules .rightside {
    float: right;
    width: 45%;
    margin-left: 1em;
}

.rules .leftside {
    float: left;
    width: 53%;
}

.rules .supply_piles {
    margin-top: 3em;
}

.rules .boxed {
    border: 2px solid #CAA04F;
    border-radius: 1em;
    padding: 0.5em;
    margin-top: -0.6em;
    margin-bottom: 0.5em;
}

.rules .r50 {
    float: right;
    margin-left: 1em;
    width: 45%;
}

.rules .r55 {
    float: right;
    margin-left: 1em;
    width: 55%;
}

/* 2 column text - only main rules */
.rules .col2 {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
}

#panelRules .col2 {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
}

/* infoboxes light brown */
.rules .infobox {
    background-color: #CAA04F;
    border: 2px solid #230C04;
    border-radius: 2em;
    padding: 0.5em;
}

/* expansion specific boxes */
.rules .expansionbox {
    border: 1px solid black;
    border-radius: 0.5em;
    padding: 0.5em;
    background-size: cover;
    margin: 0.5em;
    flex: 1 1 45%;
}

.rules .expansionbox.cities {
    background-image: url(/game-plugins/innovationultimate/1.5.53/images/rules/background_red.jpg);
}

.rules .expansionbox.cities h3 {
    color: #751E21;
    font-family: 'SansSerifFLF', sans-serif;
    font-size: 2em;
}

.rules .expansionbox.echoes {
    background-image: url(/game-plugins/innovationultimate/1.5.53/images/rules/background_blue.jpg);
}

.rules .expansionbox.echoes h3 {
    color: #282275;
    font-family: 'SansSerifFLF', sans-serif;
    font-size: 2em;
}

.rules .expansionbox.artifacts {
    background-image: url(/game-plugins/innovationultimate/1.5.53/images/rules/background_purple.jpg);
}

.rules .expansionbox.artifacts h3 {
    color: #4F215E;
    font-family: 'SansSerifFLF', sans-serif;
    font-size: 2em;
}

.rules .expansionbox.figures {
    background-image: url(/game-plugins/innovationultimate/1.5.53/images/rules/background_green.jpg);
}

.rules .expansionbox.figures h3 {
    color: #0C4F2B;
    font-family: 'SansSerifFLF', sans-serif;
    font-size: 2em;
}

.rules .as_header {
    width: 50%;
    margin-left: 25%;
    margin-top: 2.5em;
    text-align: center;
}

.rules .expansion_icon {
    height: 1.2em;
    margin-left: 0.2em;
    margin-right: 0.2em;
    margin-bottom: -0.2em;
}

.rules .expansion_indicator {
    float: left;
    margin: 0.5em;
    margin-left: -1.3em;
    margin-top: -1.1em;
    line-height: 1em;
}

.rules .expansion_indicator img {
    height: 1.8em;
}

.rules .cities .expansion_indicator img {
    height: 2.2em;
}

.rules .artifacts .expansion_indicator img {
    height: 1.5em;
}


.rules .inlinepic {
    height: 1.2em;
    margin-left: 0.2em;
    margin-right: 0.2em;
}

.rules .biginlinepic {
    height: 2em;
    margin-left: 0.2em;
    margin-right: 0.2em;
    margin-bottom: -0.4em;
}

.rules .iconcontainer .iconbox {
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    margin: 0.2em;
    padding: 0.3em;
    align-items: center;
    clear: left;
}

.rules .iconcontainer .iconbox .iconimg {
    flex: 1 1 10%;
    text-align: center;
}

.rules .iconcontainer .iconbox .iconimg img {
    width: 4em;
}

.rules .iconcontainer .iconbox .descr {
    flex: 1 1 85%;
    text-align: left;
    margin-left: .5em;
}

#panelRules .iconcontainer .iconbox {
    width: 99%;
}

.rules .basicicons table {
    float: left;
    margin-right: 1em;
    width: 14em;
    text-align: center;
}

#panelRules .basicicons table {
    width: 50%;
}

.rules .basicicons td {
    max-width: 3em;
    padding: 0.1em;
}


.rules .bonus_icon {
    width: 4em;
    float: right;
    margin-left: 1em;
    margin-right: 10%;
    margin-top: -0.5em;
}

.rules .cardright {
    width: 12em;
    float: right;
    margin-left: 1em;
    border-radius: 1em;
}

.rules .left_icons {
    height: 6em;
    float: left;
    margin-right: 1em;
}

.rules .left_icon {
    height: 4em;
    float: left;
    margin-right: 1em;
}

.rules .anatomycontainer {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    margin: 0.2em;
    padding: 0.3em;
    align-items: center;
    max-width: 37em;
}

.rules .anatomycontainer .cardtitle {
    flex: 1 1 35%;
    text-align: center;
    margin-right: 1em;
}

.rules .anatomycontainer .cardvalue {
    flex: 1 1 55%;
    text-align: center
}

.rules .anatomycontainer .cardpic {
    flex: 1 1 58%;
    text-align: center
}

.rules .anatomycontainer .dogmaeffects {
    flex: 1 1 38%;
    text-align: center
}

.rules .anatomycontainer .cardicons {
    flex: 1 1 42%;
    text-align: center;
    margin-right: 1em;
}

.rules .anatomycontainer .cardimage {
    flex: 1 1 45%;
    text-align: center
}


.rules .flexcontainer {
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
    align-content: stretch;
    flex-wrap: wrap;
    margin: 0.2em;
    padding: 0.3em;
    align-items: center;
}

.rules .flexcontainer p {
    width: 100%;
}

.rules .winningconditions table {
    border: none;
    text-align: center;
    border-collapse: collapse;
    width: 100%
}

.rules .winningconditions .noborder {
    border: none;
}

.rules .winningconditions th {
    border: 1px solid black;
    border-left: 0px;
    border-top: 0px;
    text-align: center;
}

.rules .winningconditions td {
    border: 1px solid black;
    border-right: 0px;
    border-bottom: 0px;
}


/* specific pictures */
.rules .setup {
    width: 100%;
}

.rules .example_splays1 {
    float: right;
    width: 8em;
    margin-right: 1em;
}

.rules .example_splays2 {
    float: right;
    width: 20em;
    clear: right;
    margin-right: 1em;
    margin-bottom: 1em;
}

.rules .example_score {
    float: right;
    width: 20em;
    margin-right: 1em;
    margin-bottom: 1em;
}

.rules .special_achievement_card {
    float: left;
    width: 12em;
    margin-right: 1em;
    border-radius: 1em;
}

.rules .example_echo_effects {
}

.rules .example_inspire {
    width: 70%;
    margin-left: 1em;
    float: right;
}

/*figures card cutouts */
.rules .card_cutout {
    width: 22em;
    float: left;
    margin: .3em .5em;
    padding: .2em .5em;
}

.rules .card_cutout .cutout_1_2 {
    max-width: 30em;
    max-height: 4em;
    overflow: hidden;
    float: left;
    margin-right: 0.1em;
}

.rules .card_cutout .cutout_1_2 img {
    max-width: 30em;
    margin-left: -8.5em;
    margin-top: -4.3em
}

.rules .card_cutout .cutout_1_2.high img {
    max-width: 30em;
    margin-left: -8.5em;
    margin-top: -4em
}

.rules .card_cutout .cutout_2_2 {
    max-width: 30em;
    max-height: 4em;
    overflow: hidden;
    float: left;
    margin-right: 0.1em;
}

.rules .card_cutout .cutout_2_2 img {
    max-width: 30em;
    margin-left: -8.5em;
    margin-top: -8.1em
}

.rules .card_cutout .cutout_1_3 {
    max-width: 30em;
    max-height: 5em;
    overflow: hidden;
    float: left;
    margin-right: 0.1em;
}

.rules .card_cutout .cutout_1_3.little {
    max-width: 30em;
    max-height: 4.5em;
    overflow: hidden;
    float: left;
    margin-right: 0.1em;
}

.rules .card_cutout .cutout_1_3 img {
    max-width: 30em;
    margin-left: -8.5em;
    margin-top: -4.3em
}

.rules .card_cutout .cutout_1_3.little img {
    max-width: 30em;
    margin-left: -8.5em;
    margin-top: -4em
}

.rules .card_cutout .cutout_2_3 {
    max-width: 30em;
    max-height: 5em;
    overflow: hidden;
    float: left;
    margin-right: 0.1em;
}

.rules .card_cutout .cutout_2_3 img {
    max-width: 30em;
    margin-left: -8.5em;
    margin-top: -8.1em
}


/* side bar expansion specific */
.rules .expansion_note {
    border: 2px solid #CAA04F;
    border-radius: 1em;
    padding: 0.5em;
    margin: 0.5em;
}

.rules .expansion_note.cities {
    border-color: #751E21
}

.rules .expansion_note.echoes {
    border-color: #282275
}

.rules .expansion_note.artifacts {
    border-color: #4F215E
}

.rules .expansion_note.figures {
    border-color: #0C4F2B
}


#panelRules .expansionOnly {
    display: none;
}

#panelRules.showAllExpansions #showUnusedExpansions {
    display: none;
}

#panelRules:not(.showAllExpansions) #dontShowUnusedExpansions {
    display: none;
}

#panelRules.echoes .expansionOnly.echoes, #panelRules.figures .expansionOnly.figures, #panelRules.cities .expansionOnly.cities, #panelRules.artifacts .expansionOnly.artifacts, #panelRules.showAllExpansions .expansionOnly {
    display: inherit;
}

#panelRules.echoes li.expansionOnly.echoes, #panelRules.figures li.expansionOnly.figures, #panelRules.cities li.expansionOnly.cities, #panelRules.artifacts li.expansionOnly.artifacts, #panelRules.showAllExpansions li.expansionOnly {
    display: list-item;
}

#panelRules.echoes span.expansionOnly.echoes, #panelRules.figures span.expansionOnly.figures, #panelRules.cities span.expansionOnly.cities, #panelRules.artifacts span.expansionOnly.artifacts, #panelRules.showAllExpansions span.expansionOnly {
    display: unset;
}