/* .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 */
   
/* Troika for Numbers*/
@font-face {
    font-family: 'Quibbles Number';
    src: local('Quibbles Number'), local('Troika'), url('/game-plugins/quibbles/1.2.0/fonts/troika_regular.otf') format('opentype');
}

/* Patrick for headers */
@font-face {
    font-family: 'Quibbles Header';
    src: local('Quibbles Header'), local('Patrick Hand'), url('/game-plugins/quibbles/1.2.0/fonts/PatrickHand-Regular.ttf') format('truetype');
}

/* Patrick for Action type highlights (and h2)*/
@font-face {
    font-family: 'Quibbles Actions';
    src: local('Quibbles Actions'), local('FiraSans'), url('/game-plugins/quibbles/1.2.0/fonts/Fira_Sans_Condensed/FiraSansCondensed-Regular.ttf') format('truetype');
}

.rules h1 {
  font-family: 'Quibbles Header', 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 .qh1 {color: white; background-color: #5294A5; padding: 2px 10px 2px 10px; border-radius: 3px;}

.rules h2 {
  font-family: 'Quibbles Actions', sans-serif;
  font-weight: bold;
  border: none;
  border-radius: 2px;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: white;
  background-color: none;
  font-size: 1.5em;
  text-transform: uppercase;
}
#panelRules h2 { font-size: 1.2em; }
.rules h2 .qh2 {color: white; background-color: #87487E; padding: 2px 10px 2px 10px; border-radius: 3px;}

.rules b {color: #87487E;}

#rules ol {list-style: none; counter-reset: li}
#rules ol li::before {content: counter(li); color: #2291BC; font-weight: bold;}
#rules ol li {counter-increment: li; margin-top: 0.5em;}
#rules li::marker {  color: #2291BC; }

.rules tr.componentlist>td {padding: 0.3em; }
#panelRules tr.componentlist>td {padding: 0em; }

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

/* two columns in main rules */
.rules .twocol { column-count: 2; -moz-column-count: 2;   -webkit-column-count: 2;}
#panelRules .twocol {column-count: 1; -moz-column-count: 1;   -webkit-column-count: 1;}

.rules .actionhighlight {
  color: white;
  background-color: #87487E;
  padding: 2px 5px 2px 5px;
  line-height: 1.5em; 
  border-radius: 2px;
  text-transform: uppercase;
  font-family: 'Quibbles Actions', sans-serif;
}

.rules .qnumber {
  font-family: 'Quibbles Number', sans-serif;
  color: white;
  text-shadow:
   -1px -1px 0 black,  
    1px -1px 0 black,
    -1px 1px 0 black,
     1px 1px 0 black; 
  font-size:1.8em;
  margin-right: 0.2em;
}
.rules .qnumber.qn0 { color: #B3A496; text-shadow: -1px -1px 0 #514A44, 1px -1px 0 #514A44, -1px 1px 0 #514A44, 1px 1px 0 #514A44; }
.rules .qnumber.qn1 { color: #4837C3; }
.rules .qnumber.qn2 { color: #2FB7C7; }
.rules .qnumber.qn3 { color: #49BA15; }
.rules .qnumber.qn4 { color: #AD38AA; }
.rules .qnumber.qn5 { color: #E46922; }
.rules .qnumber.qn6 { color: #EDCD00; }
    .rules .qnumber.qn7 {
        background-image: linear-gradient(80deg, #97006D, #97006D, red, orange, #E0BB00, green, blue, indigo);
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow:none;
        font-size: 2em;
    }

.rules .example {
   background-color: #D9C7D9;
   font-style: italic;
   padding: 0.5em;
}
#panelRules .example {
    display: none;
}