/* 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 */
   
 
   
   /* Obelix Pro  for headers*/
@font-face {
  font-family: 'Obelix Pro';
  src: local('Obelix Pro'),
       url('/game-plugins/rollecate/1.2.0/fonts/ObelixProB-cyr.ttf') format('truetype');
}   
   
.rules h1 {
  font-family: 'Obelix Pro', sans-serif;
  font-weight: bold;
  text-align: left;
  background-image: url(/game-plugins/rollecate/1.2.0/images/rules/header_background.png);
  background-size: 100% 100%;
  border: none;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: white; 
  text-align: center;
  font-size: 2.5em;
  line-height:1.2em;
  padding: 10px 0px 10px 10px;
  text-shadow:
   -1px -1px 0 #0F3B52,  
    2px -1px 0 #0F3B52,
    -1px 1px 0 #0F3B52,
     1px 3px 0 #0F3B52;
}
#panelRules h1 { font-size: 1.75em; }

.rules h2 {
  font-size: 1.25em;
  font-style: italic;
  color: #34786C;
}

#rules a:link {color: #0F3B52; font-weight:bold;} 
#rules a:visited {color: #0F3B52; font-weight:bold;}
#rules a:active {color: #0F3B52; font-weight:bold;}

.rules li { margin-bottom: 0.2em; }
.rules { font-size: 1.2em; }
#panelRules { font-size: 1em; }

/* rules colors */
.rules .headerblue  { color:#0F3B52; }
.rules .notegreen  { color:#288437; }
.rules .petrol  { color:#34786C; }

.rules .inlinepic { height: 1.2em; margin-left: 0.2em; margin-right: 0.2em; width: auto; }
.rules .biginlinepic { height: 2em; margin-left: 0.2em; margin-right: 0.2em; margin-bottom: -0.4em; width: auto;}

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

/* customized list - white capital numbers on dark blue circle*/
.rules ol.custlist {list-style: none; counter-reset: li}
.rules .custlist li::before {content: counter(li); color: white; font-family: 'Obelix Pro', sans-serif; font-weight: bold; display: inline-block; width: 1.3em;  height:1.3em; text-align:center;  background-color: #0F3B52; border-radius: 50%; padding:0.2em; margin-right: 0.5em;}
.rules .custlist li {counter-increment: li}

.rules .content {
    list-style-type: none;
 }


 /* extended rules boxes */
.rules .extendedbox {
  background-color: white;
  border: 2px solid #34786C; 
  color: #34786C; 
  font-style: italic;
  font-size: 1.1em;
  padding: 1em;
  border-radius: 1em;
  margin: 1em 0.5em 1em 0.5em;
}

.rules .remcards {
  float:right;
  margin-left:1em;
  width:20em;
}

 /* example boxes */
.rules .example {
  background-color: #D5DBBD;
  border: 2px dotted #4D8340; 
  color: #34786C; 
  font-style: italic;
  padding: 1em;
  border-radius: 1em;
  margin: 0.5em;
}
#panelRules .example { display:none; }


.rules .cardimg { float: right; width: 4em; margin-left: 0.2em; border-radius: 0.3em; }
.rules .gap { margin-left: 0.5em; }
.rules .emma { float: right; width: 10em; margin-left: 2em; margin-right: 2em; margin-top: -1.5em;}
.rules .dice { float: right; width: 6em; margin-left: 1em}
.rules .placement img {width: 80%; margin-left: 8%}

.rules .penalty  {float: right; margin-left: 1em; width: 18em; margin-bottom: 1em;}
#panelRules .penalty  { display:none; }
.rules .combine  {width: 28em; margin-left: 13%; margin-top: 0.5em;}
#panelRules .combine  { display:none; }

.rules .connect { height: 12em; }
.rules .connect img { float: left; height: 12em; margin-right: 1em; }

.rules .throwdice { float: right; width: 30%; margin-left: 1em; }
.rules .throwdice img { width:90%; margin-left: 4%; }

.rules .derail { width:58% } /* leave some room for that throwdice example above */
#panelRules .derail  { width: 98%; }

.rules .ex_derail { float: right; width: 30%; margin-left: 1em; clear: right;}
.rules .ex_derail .derail_image { width:100%; }