/* 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 */
   
.rules  h1 {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: black; 
  padding: 4px;
  font-size: 1.75em;
  color: black;
  border: none;
  border-bottom: 3px solid #ED7D31;
  width: 60%;
  text-align: right;
  text-transform: uppercase;  
}
#panelRules h1 {
  padding: 2px;
  font-size: 1.5em;
  width: 80%;
}   

.rules .titlepic { border-radius: 0.5em; }

.rules .indent { margin-left: 2em; }
#panelRules .indent { margin-left: 0.5em; }

.rules .rulesbox { 
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.rules .rulesbox p {
  margin-left: 0em;
}
.rules .rulesbox .rulestext { 
  width: 55%; 
  margin-left: 1%
}
#panelRules .rulesbox .rulestext {
  width: 100%; 
}
.rules .rulesbox .rulesfigures { 
  background-color: #ED7D31; 
  color: white; 
  font-style: italic; 
  width: 35%; 
  padding: 1%; 
  margin-left: 4%; 
  margin-top: 2em;
  text-align: center;
}
.rules .rulesbox .figure {width: 60%; margin-top:0.5em; border: 0.5em solid white;}

.rules .sidebarfigure { 
  display:none; 
}
#panelRules .sidebarfigure { 
  display:inherit; 
  width: 80%; 
  background-color: #ED7D31; 
  color: white; 
  font-style: italic; 
  padding: 1%; 
  margin-left: 9%; 
  text-align: center;
}

.rules .dicefont {
  font-family: 'Arial', sans-serif;
  font-size: 1.25em;
}

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