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

/* Header */
@font-face {
    font-family: 'Agenda';
    src: local('Agenda'), url('fonts/agenda-mediumcondensed.ttf') format('truetype');
}

.rules .cover { width: 70%; margin-left: 15%; }

.rules h1 {
  font-family: 'Agenda', sans-serif;
  font-weight: bold;
  border: none;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-size: 2.2em;
  text-transform: uppercase;
  text-align: left;
  padding: none;
}
#panelRules h1 { font-size: 1.6em; }
.rules h1 .nh1 {color: white; background-color: #58585A; padding: 2px 10px 2px 10px; border-radius: 0px 5px 5px 0px;}

.rules h2 {
  font-family: 'Agenda', sans-serif;
  font-weight: bold;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: black;
  background-color: none;
  font-size: 1.5em;
  text-transform: uppercase;
}
#panelRules h2 { font-size: 1.2em; }
.rules h2 .nh2 {color: black; background-color: #D2D3D5; padding: 2px 10px 2px 10px; border-radius: 0px 3px 3px 0px;}

.rules .flex {  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5em; clear: both;}
.rules .card-box {flex: 1 1 8%; }
#panelRules .card-box {flex: 1 1 18%;}

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

.rules ol>li {margin-bottom: 0.5em; }

.rules .rlevel { float:right; margin-left: 1em; width: 30% }
.rules .rfield { float:right; margin-left: 1em; width: 15% }
.rules .placement_rule { float:right; margin-left: 1em; width: 40%; }


/* examples */
.rules .example {
   background-color: #D2D3D5;
   border: 3px solid #58585A;
   border-radius:0.3em;
   font-style: italic;
   padding: 0.5em;
}
#panelRules .example {
    display: none;
}

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