/* 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 { padding: 0.5em; text-shadow: none; }

#rules .cover { width: 60%; margin-left: 20%; }
#rulesPage .cover { width: 40%; margin-left: 25%; }

.rules h1 {
  font-weight: bold;
  border: none;
  margin-top: 1em;
  margin-bottom: 0.5em;
  background-color: #FCEB93;
  background-color: #EFDA70;
  color: black; 
  text-align: left;
  font-size: 2.0em;
  padding: 0.1em;
}
#panelRules h1 { font-size: 1.75em; }

.rules h2 {
  font-weight: bold;
  border: none;
  margin-top: 1em;
  margin-bottom: 0.5em;
  background-color: #FCEB93;
  color: black; 
  text-align: left;
  font-size: 1.5em;
}
#panelRules h2 {font-size: 1.1em; }

.rules li { margin-bottom: 0.2em; }

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


.rules ul {
  margin: 1em 0em 1em 2em;
  list-style-image: url('images/rules/list_icon_u.png');
}

.rules .content ul {
    margin: 1em 0em 1em 1em;
    list-style-type: none;
    list-style-image: none;
 }

 /* customized list - white letter*/
.rules ol.custlist { list-style: none; counter-reset: li;}
.rules ol.custlist>li::before {
  content: counter(li, upper-alpha);
  color: white; font-weight: bold; text-align: center;  font-size: 1.5em; 
  width: 2.5em;  height: 1.75em;
  background-color: #B95529;
  background-color: transparent;
  padding: 0.1em 0.5em 0.1em 0.4em;
  margin-right: 0.3em;
  clear: left;
  text-shadow:
   -1px -1px 0 black,  
    1px -1px 0 black,
    -1px 1px 0 black,
     1px 1px 0 black;
}
.rules ol.custlist>li { counter-increment: li; margin-top: 0.3em; margin-bottom: 0.1em;}
 

 /* example boxes */
#panelRules .example { display:none; }

.rules .examplemovecontainer {  display: flex; flex-wrap: wrap; }
.rules .examplemovecontainer .examplemove {  flex: 0 0 45% ; padding: 0.5em;}
.rules .examplemovecontainer img { width: 50%; float: left; margin-right: 1em; }


.rules .startarea { float: right; width: 30%; margin-left: 1em; }
.rules .roowalk {  text-align: center; }
.rules .roowalk img { height: 9em; }
.rules .roojump {  text-align: center; }
.rules .roojump img { height: 9em; }
.rules .roobillabong { float: right; width: 10%; margin-left: 1em; margin-right: 20em; margin-top: -3em; }
#panelRules .roobillabong { float: right; width: 5em; margin-left: 1em; margin-right: 0em; margin-top: -1em; }
.rules .forbiddenjumps { float: left; width: 20%; margin-right: 1em; padding-right: 1em;}
.rules .referee { float: left; width: 20%; margin-right: 1em; }
.rules .fanblock { float: right; width: 30%; margin-left: 1em; }
.rules .fanblock img { width: 100%; }
.rules .deviation--end_of_game { width: 65%; }
.rules img.kangaroo { height: 1.8em; }
.rules img.quickstart_variant_img { display: inline-block; width: 15em; }
.rules img.startarea--quickstart { display: inline-block; width: 30%; margin-left: 1em; }
.rules img.stopwatch_icon { height: 1.8em; vertical-align: middle; }
.rules .Zzz_char { font-size: 2em; vertical-align: middle; }