/* 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: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/game-plugins/cubirds/1.2.1/fonts/fa-solid-900.ttf") format("truetype");
}

.rules h1 {
  background-color: #0F3D66;
  color: white;
  font-family: 'Font Awesome 6 Free';
  border-radius: 0.3em;
  padding: 6px;
  margin: 0.5em 0em 0.5em 0em;
}

.rules h2 {
  color: #0F3D66;
  font-family: 'Font Awesome 6 Free';
  text-align: left;
  text-transform: uppercase;
}

.rules p {
    margin-bottom: 0.8em;
    line-height: 150%;
    width: 100%;
}

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

  
/* boxes */
.rules .note { padding: 1em; margin: 1em 0; background-color: #BDC2C7; border-radius:1em; }
.rules .roundbox { padding: 0.2em; border-radius:1em; }
.rules .maxwidth { display:inline-block; width:98%; }

/* the species cards*/
.rules .cards {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}
.rules .card { flex: 1 1 22.66%; float:left; margin-right:1%; margin-bottom:0.5em; background-color: #EBE3DA; border: 3px solid #DFD6CE;}
#panelRules .card {flex: 1 1 45%;}
.rules .card .images>img { width:100%; height:auto; border-radius:0.5em; }
.rules .card .carddesc { width:100%; }
.rules .card .carddesc>td { width:50%; }
.rules .card .carddesc>td.headcell { width: 58% }
#panelRules .card { width: 47.5%; display:inline-block; }

.rules .split {
    float: right;
    max-width: 50%;
}

/* examples box */
.rules .example {
    background-color: #c3f6f6;
    border-radius: 2em;
    border: 5px solid #82f7f7;
    padding: 0.5em 0.5em 0.5em 1.5em;
    float: right;
    margin: 0em 1em 1em 0.5em;
    max-width: 60%;
    line-height: 1em;
    font-style: italic;
    color: #0F3D66;
}
.rules .example p {line-height: 1em;}
/* don't display examples in the sidebar */
#panelRules .example { display:none; }

.rules .example .exampleimage {float: left; width: 60%; margin-right: 1em; }

/* flock size */
.rules .flockbox {
    background-color: #FEDDBA;
    border-radius: 2em;
    border: 5px solid #F17531;
    padding: 0.5em 0.5em 0.5em 1.5em;
    float: right;
    margin: 0em 1em 1em 0.5em;
    max-width: 60%;
    font-style: italic;
    color: #0F3D66;
    font-weight: bold;
}
#panelRules .flockbox { float: left; width: 98%}
.rules .flexbox {display:flex; text-align: center;  color: #F17531; }
.rules .flockbox>img {flex: 2 1 60%;}

/* objective */
.rules .overview { display: flex; width:100%; text-align: center; }
.rules .overview.object img { padding:1em; }
#panelRules .overview.object img { max-width:95%; }

.rules .block { display: inline-block; width:100%; }

.rules .minicard {  width: 3em; margin-left: 0.5em; }

/* some restrictions on ingame rules dialogs */
.rules .cardsHelp {
    max-width: 62em;
}
#popup.rules p {
    width:100%;
    display:block;
    text-align:center;
}
#popup.rules .roundbox {
    max-width: 14em;
}