/* 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/innovation/2.3.44/fonts/EBGaramond-VariableFont_wght.ttf') format('truetype'); 
}

@font-face {
  font-family: 'SansSerifFLF';
  src: local('SansSerifFLF'), 
       url('/game-plugins/innovation/2.3.44/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/innovation/2.3.44/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/innovation/2.3.44/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/innovation/2.3.44/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/innovation/2.3.44/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/innovation/2.3.44/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;
}