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

/* Taranis regular for headers*/
@font-face {
  font-family: 'Cinzel';
  src: local('Cinzel'), 
       url('/game-plugins/bonfire/1.1.16/fonts/Cinzel-VariableFont_wght.ttf') format('truetype');
}   
   
.rules .chapter .title {
  font-family: 'Cinzel', serif;
  text-align: center;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: black; 
  text-transform: uppercase;
  padding: 4px;
  font-size: 3em;
  font-weight: bold;
  background-image: url(/game-plugins/bonfire/1.1.16/images/rules/header_background.jpg);
  background-size: 100% 100%;
  text-shadow:
   -1px -1px 0 white,  
    1px -1px 0 white,
    -1px 1px 0 white,
     1px 1px 0 white;
}
#panelRules .chapter .title {
  padding: 2px;
  font-size: 2em;
}

/* h1 is used for the colored headings for actions in game play chapter*/
.rules h1 {
  font-family: 'Cinzel', serif;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: black; 
  padding: 2px;
  font-size: 2.25em;
  text-align: left;
  background-color: grey;
  background-image: linear-gradient( to bottom , darkgrey, lightgrey, darkgrey );
  border: none;
  box-shadow: 0px 1px 1px 1px #545454;
}
#panelRules h1 {  font-size: 1.75em; }
.rules .greenheader { background-image: linear-gradient( to bottom , #B2D281, #E0ECC8 , #B2D281 );}
.rules .blueheader { background-image: linear-gradient( to bottom , #8ECFE0, #D2EBF3 , #8ECFE0 );}
.rules .redheader { background-image: linear-gradient( to bottom , #ED9587, #F9D5CC , #ED9587 );}
.rules .whiteheader { background-image: linear-gradient( to bottom , #D7E6E6, #F2F7F9 , #D7E6E6 );}
.rules .purpleheader { background-image: linear-gradient( to bottom , #BC93C1, #E4D0E7 , #BC93C1 );}
.rules .brownheader { background-image: linear-gradient( to bottom , #D7BA88, #EFE4C8 , #D7BA88 );}

.rules .headingpic { margin: 0em; margin-bottom:-0.45em; margin-right: 0.5em; height: 1.5em; width: auto; border-radius: 2px; box-shadow: 1px 1px 3px 1px #545454; }
.rules .headingpic.light { margin-left: -0.4em; background-color: white; z-index: 2; opacity:.4;}
.rules .headingpic.light2 { margin-left: -0.4em; background-color: white; z-index: 2; opacity:.2;}

/* dark blue heading with white text */
.rules h2 {
  font-family: 'Cinzel', serif;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  background-color: #153C4F;
  color: white; 
  text-transform: uppercase;
  padding: 1px;
  font-size: 2em;
  text-align: center;
}
#panelRules h2 {  font-size: 1.5em; }

/* normal black heading font */
.rules h3 {
  font-family: 'Cinzel', serif;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  padding: 1px;
  font-size: 2em;
  font-weight: bold;
}
#panelRules h3 {
  font-size: 1.5em;
}


.rules img.inlinePic {
    height: 1.2em;
    width: auto;
}

.rules .TileInfoContainer {
    display: flex;
    flex-wrap: wrap;
}

.rules .TileInfoContainer h3 {
    width: 100%
}

.rules .TileInfoContainer .TileInfo {
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    margin: 0.2em;  
    padding: 0.5em;
}

.rules .TileInfo {
    display: flex;
    align-items: center;
    background-color: #F4ECE1;
}
#rules .TileInfo, #panelRules .TileInfo {
    border: 2px solid #6E3320;
}

#rules .columns2 .TileInfo {
    width: 47%;
}
#panelRules .columns2 .TileInfo {
    width: 95%;
}


#rules .columns3 .TileInfo {
    width: 30.33%;
}
#panelRules .columns3 .TileInfo {
    width: 98%;
}

.rules .TileInfo .image {
    flex: 1 1 40%;
}
#panelRules .TileInfo .image {
    flex: 1 1 25%;
}
#panelRules .columns2 .TileInfo .image {
    flex: 1 1 50%;
}

.rules .TileInfo .image img {
    width: 100%;
}

.rules .TileInfo .description {
    flex: 1 1 60%;
    font-size: .9em;
    margin-left: .5em;
    text-align: left;
}
#panelRules .TileInfo .description {
    flex: 1 1 75%;
}
#panelRules .columns2 .TileInfo .description {
    flex: 1 1 50%;
}

.rules .tile {
    border-radius: 5%;
}

.rules .playerCount { color:forestgreen; }
.rules table.playerCount { width: 50%; text-align:center; }
#panelRules table.playerCount { width: 95%; }


/* sidebar visibility */
#panelRules .nosidebar { display:none; }
.ui-popup .rules .nopopup { display:none; }
.rules .sidebaronly { display:none; }
#panelRules .sidebaronly { display:inherit; }


/* the box will need amendments for padding-left depending on height resp amount of text */
.rules .gnomebox {
  background-color: #F4ECE1;
  border-radius: 0em 10em 10em 0em;
  border: 3px solid #153C4F;
  padding: 2px;
  width: 80%;
  background-image: url(/game-plugins/bonfire/1.1.16/images/rules/gnome.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: 0% 100%;
  padding-left: 2em;
}
.rules .gnomebox.lines5 {  width: 50%; padding-left: 8em; padding-right: 2em;}
.rules .gnomebox.lines15 {  padding-left: 10em; padding-right: 2em; background-size: 10em auto;}

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

/* box layout for "special case" paragraphs */
.rules .specialcasebox {
  background-color: #F6ECE1;
  border: 3px solid #C2B29B;
  padding: 0.5em;
  font-style: italic;
}

/* examples */
.rules .hasExample { display:inline-block; }
.rules .example {
  background-color: #F6ECE1;
  border-radius: 2em;
  border: 3px solid #7E1710;
  padding: 0.5em 0.5em 0.5em 1.5em;
  float: right;
  margin: 1em;
  width: 50%;
}
.rules .full {
    width: 90%;
    left: 5%;
}


/* don't display examples in the sidebar */
#panelRules .example { display:none; }
.rules .exampleimage { float:right; max-width:50%; }
.rules .leftimage { float:left; max-width:30%; }
.rules .left { float:left; width:30%; }
.rules .right { float:right; max-width:70%; }
.rules .left2 { float:left }
.rules .left40 { float:left; width:40%; }

/* actions 
.rules .actioncontainer {  display: flex; flex-wrap: wrap; }*/
.rules .actioncontainer .actionbox {
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    margin: 0.2em;
    padding: 0.3em;
    align-items: center;
}
.rules .actioncontainer .actionbox .actiontile {    flex: 1 1 10%; }
.rules .actioncontainer .actionbox .actiontile img {    width: 3em;  border-radius: 2px; box-shadow: 1px 1px 3px 1px #545454; }
.rules .actioncontainer .actionbox .description {    flex: 1 1 85%;    text-align: left;  margin-left: .5em;}
#panelRules .actioncontainer .actionbox { width: 95%; }

.turnOverview { display: flex; }
.turnImage { width: 11.5em; margin-right: 1em; align-self:center;  }