/* 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 and ingame display 
   #rulesContainer #rules: ingame rules display only 
   #sidebarPanel #rules: ingame rules display on right side only 
   #sidebarBottom #rules: ingame rules display at bottom only 
   .ui-popup .rules: popup with rules extract only */

.rules { background-color: #F0EBD9; padding: 0.5em; text-shadow: none; }
#sidebarPanel #rules { font-size: 1em; padding-left:0.5em;}

@font-face {
  font-family: 'Oronteus Finaeus';
  src: local('Oronteus Finaeus'), 
       url('/game-plugins/gildedcompass/1.0.1/fonts/Oronteus_Finaeus_W01_Regular.ttf') format('truetype'); 
}

#rules h1 {
  color: #393737;
  padding: 0px;
  font-size: 3em;
  text-align: center;
  margin-top: 0em;
  margin-bottom: 0em;
  font-family: 'Oronteus Finaeus', serif;
}
#sidebarPanel #rules h1 {font-size: 2em; }
   
#rules h2 {
  background-image: url(/game-plugins/gildedcompass/1.0.1/images/rules/h2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90% 100%;
  padding: 0.5em 0em 0.5em 0em;
  text-align: center;
  color: white;
  font-size: 2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-family: 'Oronteus Finaeus', serif;
  font-style: italic;
  clear:both;
}
#sidebarPanel #rules h2 {background-size: 100% 100%; font-size: 1.75em;}

#rules h3 {
  background-image: url(/game-plugins/gildedcompass/1.0.1/images/rules/h3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70% 100%;
  padding: 0.5em 0em 0.5em 0em;
  text-align: center;
  color: white;
  font-size: 1.75em;
  font-family: 'Oronteus Finaeus', serif;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  clear:both;
}
#sidebarPanel #rules h3 {background-size: 90% 100%; font-size: 1.5em;}

#rules h4 { text-align: center; font-family: 'Oronteus Finaeus', serif; font-weight: bold; padding-bottom: 0.5em; }
#sidebarPanel #rules h4 { padding: 0 0 0 0em; margin: 0 0 0.5 0em; }

#rules h5 { float: right; width: 100%; font-family: 'Oronteus Finaeus', serif; font-size: 1.5em;}

#rules .sidebaronly { display: none; }
.rules[showRules=summary] .sidebaronly { display: block; }
#sidebarPanel #rules .sidebaronly { display:inherit; }
#sidebarPanel #rules .nosidebar { display:none; }
.ui-popup .rules .nopopup { display:none; }

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

.rules ul.custlist { list-style-image: url('/game-plugins/gildedcompass/1.0.1/images/rules/list_icon_u.png');}
.rules ul.content ul {  list-style-type: none; margin: 0 0 0 1em;}
.rules div.content ul {  list-style-type: none; }

/* customized list - white number on orangish icon*/
.rules ol.custlist { list-style: none; counter-reset: li;}
.rules ol.custlist>li::before {
  content: counter(li);
  font-family: 'Oronteus Finaeus', serif; color: white; font-weight: bold; text-align: center;  font-size: 1.5em; font-style: italic;
  width: 2.5em;  height: 1.75em;
  background-color: #B95529;
  background-color: transparent;
  background-image: url(/game-plugins/gildedcompass/1.0.1/images/rules/list_icon_o.png);
  background-size: 100% 100%;
  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.alpha>li::before { content: counter(li, upper-alpha); }
.rules ol.custlist>li { counter-increment: li; margin-top: 0.3em; margin-bottom: 0.1em;}
  
.rules a:link {color: #633509; font-weight:bold;} 
.rules a:visited {color: #705B3E; font-weight:bold;}
.rules a:hover {color: #705B3E; font-weight:bold;}
.rules a:active {color: #633509; font-weight:bold;}

.rules .components {width: 100%;}

.rules .buildingExample { float: left; margin: 0em 1em 0.5em 1em; width: 40%; clear: left;}
#rules .building { width: 100%; float: left; margin-right: 1em; margin-top: 0.5em; }
#rules .buildingpic img { width: 18em; float: left; margin: 0em 1em 0.5em 1em; }
#sidebarPanel #rules .buildingpic {display: none; }

#rules .special_Ability {  margin-right: 1em; margin-top: 0.5em; clear: left;} 
#rules .specialAbilitypic img { width: 8em; float: left; margin-right: 1em; margin-bottom: 0.2em;}


#rules .treasure { width: 30%; float: left; margin-right: 1em; margin-top: 0.5em; }
#sidebarPanel #rules .treasure { width: 95%; }
#rules .imageleft6 img { width: 6em; float: left; margin-right: 1em; }


.rules .scoringExample { float: left; margin: 0em 1em 0.5em 1em; width: 16%; clear: left; }
#sidebarPanel #rules .scoringExample { width: 40%; }
#rules .scoring { width: 100%; float: left; margin-right: 1em; margin-top: 0.5em; }

.rules .missiontilescontainer {  display: flex; flex-wrap: wrap; }
.rules .missiontilescontainer .mission {  flex: 0 0 45% ; padding: 0.5em;}
#sidebarPanel #rules .missiontilescontainer .mission {  flex: 0 0 98% ; padding: 0.5em;}
#rules .imageleft8 img { width: 8em; float: left; margin-right: 1em; }

.rules .promopiccontainer {width: 12em; float: left; margin-right: 0.5em; display: flex; flex-wrap: wrap;}
#sidebarPanel #rules .promopiccontainer { width: 9em; }
.rules .promocoveted {flex: 0 0 99% ; margin:0.1em;}
.rules .promoally {flex: 0 0 99% ; margin:0.1em;}
.rules .promopowertool {flex: 0 0 99% ; margin:0.1em;}
.rules .promotreasurefragment {flex: 0 0 47% ; margin:0.1em;}