/* 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 */
   
 
/* Manuale Semibold italic for headers (the correct font Acuta is not free) */
@font-face {
  font-family: 'Manuale';
  src: local('Manuale'),
       url('/game-plugins/arnak/1.2.8/fonts/Manuale-MediumItalic.ttf') format('truetype');
}
   
/* Sandy lite for diary entries (the correct font Blooms Regular is not free) */
@font-face {
  font-family: 'MakDah';
  src: local('MakDah'), local('Mak Dah'),
       url('/game-plugins/arnak/1.2.8/fonts/Mak%20Dah.ttf') format('truetype');
}       

       
.rules .chapter .title, .rules h1, .rules h2, .rules h3, .rules h4, .rules h5 {
  font-family: 'Manuale', sans-serif;
  font-weight: bold;
  color: #4F041A;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.rules .chapter .title {  
  padding: 0px;  
  font-size: 3em;   
  background-color: #DCC9B5; 
  text-align: center;
  background-image: url(/game-plugins/arnak/1.2.8/images/rules/header_background.jpg);
  background-size: 100% 100%;
}
.rules .chapter .title.extrawide {background-image: url(/game-plugins/arnak/1.2.8/images/rules/header_background_extrawide.jpg); }
.rules .chapter .title.narrow {background-image: url(/game-plugins/arnak/1.2.8/images/rules/header_background_narrow.jpg); }
#panelRules .chapter .title {  padding: 2px;  font-size: 2em; background-image: url(/game-plugins/arnak/1.2.8/images/rules/diary_background.jpg); color: #4F041A;}

.rules h1 {  padding: 2px;  font-size: 2em; text-align: left; }
#panelRules h1 {  padding: 2px;  font-size: 1.75em;}

.rules h2 {  padding: 2px;  font-size: 1.75em;}
#panelRules h2 {  padding: 2px;  font-size: 1.5em;}

.rules h3 {  font-size: 1.6em;  margin-top: 0em;  margin-bottom: 0em;  padding-left: 4px; }

.rules h4 {  font-size: 1.5em;  margin-top: 0em;  margin-bottom: 0em; color: #12120D; font-variant: small-caps; clear:left;}

.rules h5 {  font-size: 1.5em;  margin-top: 0em;  margin-bottom: 0em; color: black; font-variant: small-caps; }
 
.rules b {color: #00476A;}
.rules em {color: black; font-weight: bold; font-style: inherit;}

/* diary */
.rules .diary { 
  background-color: #CFDFEB; 
  color: #340023;
  font-family: 'MakDah', serif;
  font-size: 1.75em;
  background-image: url(/game-plugins/arnak/1.2.8/images/rules/diary_background.jpg);
  background-size: 100% 100%;
  margin: 0.5em;
  padding: 0.5em;
}
.rules .diary.high{background-image: url(/game-plugins/arnak/1.2.8/images/rules/diary_background_high.jpg);}
#panelRules .diary { display:none; }

/*additional info pinned note style*/
.rules .addinfo { 
  color: #12120D;
  font-family: 'Manuale', serif;
  background-color: transparent; 
  background-image: url(/game-plugins/arnak/1.2.8/images/rules/addinfo_background.png);
  background-size: 100% 100%;
  margin: 0.1em;
  padding: 1.5em 6.5em 1.5em 4.5em;
}
.rules .addinfo.wide {background-image: url(/game-plugins/arnak/1.2.8/images/rules/addinfo_background_wide.png);padding-top: 5em; padding-left: 5.5em;}
.rules .addinfo.extrawide {background-image: url(/game-plugins/arnak/1.2.8/images/rules/addinfo_background_extrawide.png); padding-top: 4em; }
.rules .addinfo.reservetiles {float:right; width:45%; margin-top: 8em; padding: 5em 6em 3em 5.5em; }
.rules .addinfo.reservetilesde {float:right; width:45%; margin-top: 4em; padding: 5em 6em 3em 5.5em; }
.rules .addinfo.handcards  {padding: 2em 4.5em 2.5em 6.5em; float: right; width: 45%; margin-top: -4em;}
.rules .addinfo.totems  {padding: 4.5em 6.5em 3em 5.5em; }
.rules .addinfo.exile {padding: 7.5em 7.5em 4em 5.5em; margin-top:-4em;}

/*banner*/
.rules .banner { 
  color: #12120D;
  font-family: 'Manuale', serif;
  font-variant: small-caps; 
  font-size: 1.5em;
  font-weight: bold;
  background-color: transparent; 
  background-image: url(/game-plugins/arnak/1.2.8/images/rules/banner.png);
  background-size: 100% 100%;
  margin: 0.1em;
  line-height: 2.3em;
  padding: 0.5em 2.5em 0.7em 1.5em;
  margin-bottom:0.2em;
}

.rules ul {list-style-type: '\2666\00A0';}

/* customized list - brown circled number */
.rules ol.custom {list-style: none; counter-reset: li;}
.rules ol.custom.continue {counter-reset: none;}
.rules ol.custom>li::before {
  content: counter(li); 
  font-family: 'Manuale', sans-serif; color: #5F4E43; font-weight: bold; text-align:center; font-size:1.5em; 
  width: 2.5em;  height:1.75em;
  background-color: transparent;
  background-image: url(/game-plugins/arnak/1.2.8/images/rules/list_icon_background.png);
  background-size: 100% 100%;
  padding:0.2em 0.5em 0.2em 0.5em; 
  margin-right: 0.3em;
}
.rules ol.custom>li {counter-increment: li; }



.rules .w60 { width: 60%; }
#panelRules .w60 { width: 95%; }
.rules .w40 { width: 40%; }
#panelRules .w40 { width: 95%; clear:both; }

/* don't display examples in the sidebar */
#panelRules .example { display:none; }
#rules .example { 
  color: #00476A;
  font-style: italic;
}

.rules .clearleft { clear: left; }

/* split content */
.rules .content {width:45%; float:left; margin-right:1em;}
#panelRules .content { width: 95%; }
.rules .content ul {list-style: none;}

/* two columns in main rules*/
.rules .twocolumn {width:45%; float:left; margin-right:1em;}
#panelRules .twocolumn { width: 95%; }

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


/* some general picture definitions */
.rules .examplepicright { width: 30%; float: right; margin-left: 2em; }
.rules .examplepicleft { width: 30%; float: left; margin-right: 2em; }
.rules .examplepicfull { width: 90%; margin-left: 3%; margin-right: 3%}
.rules .inlinepic { height: 1.2em; margin-left: 0.2em; margin-right: 0.2em;}
.rules .biginlinepic { height: 2em; margin-left: 0.2em; margin-right: 0.2em; margin-bottom: -0.4em; }
.rules .biginlinepic_back { height: 2em; margin-left: -1.3em; margin-right: 0.2em; margin-bottom: -0.4em; }
.rules .biginlinepic_start { height: 2em; margin-left: 0.2em; margin-right: 0em; margin-bottom: -0.4em; }
.rules .biginlinepic_mid { height: 2em; margin-left: 0em; margin-right: 0em; margin-bottom: -0.4em; }
.rules .biginlinepic_mid2 { height: 2em; margin-left: -0.5em; margin-right: -0.5em; margin-bottom: -0.4em; }
.rules .biginlinepic_end { height: 2em; margin-left: 0em; margin-right: 0.2em; margin-bottom: -0.4em; }

/* special pictures */
.rules .reservetile { width: 4em; float: left; margin-right: 0.5em; border-radius:30%}
.rules .setup { width: 60%; float: left; margin-right: 0.5em; }
.rules .blockmarker { height: 2em; margin-left: 0.5em; }
.rules .templetile { width: 7em; float: right; margin-left: 0.5em; margin-right: 2em;}
.rules .playerboard { width: 40%; float: left; margin-right: 0.5em; margin-bottom: 0.5em;}
.rules .startplayer { width: 4em; float: left; margin-right: 0.5em;margin-bottom: 0.5em;}
.rules .rounds { width: 95%; margin-left: 2%;margin-bottom: 0.5em;}
.rules .ressource { height: 3em; float: left; margin-right: 0.5em;margin-bottom: 0.2em; margin-left: -4.2em;}
.rules .rindent { margin-left: 4.2em; clear: left; margin-bottom:0.5em;}
.rules .example_dig { width: 30%; float: right; margin-left: 0.5em; margin-right: 2em; margin-top: -1em;}
.rules .tokenbox { float:right; margin-right: 0.2em;}
.rules .token { height: 3em;  margin-right: 0.2em;margin-bottom: 0.2em;}
.rules .guardians { height: 3em;  float: left; margin-right: 1em;margin-bottom: 2em;}
.rules .movement_hierarchy { height: 12em; float: left; margin-right: 0.5em; margin-bottom: 0.2em; }
.rules .explore { width: 16em; float: right; margin-left: 0.5em; margin-bottom: 0.2em; }
.rules .lost_temple { width: 16em; float: left; margin-right: 0.5em; margin-bottom: 0.2em; }
.rules .assistant_symbol { width: 7em; float: left; margin-right: 0.5em; margin-bottom: 0.2em; }
.rules .assistant_refresh { width: 3em; float: left; margin-right: 0.5em; margin-bottom: 0.2em; }
.rules .scoring { width: 75%}
#panelRules .scoring { width: 95%}
.rules .scoring_icon { width: 12em; margin-right: 1.5em; margin-bottom: 0.2em; }
.rules .scoring_icon_fear { width: 3em; margin-right: 1.5em; margin-bottom: 0.2em; }
.rules .board { width: 60%; margin-left: 2%; }
#panelRules .board { width: 95%; margin-left: 2%; }
.rules .save_helper1 { width: 6em; margin-right: 1em; float:left;}
.rules .save_helper2 { width: 6em; margin-right: 1em; float:left;}
.rules .save_helper3 { width: 4em; margin-right: 1em; float:left;}
.rules .save_helper4 { width: 4em; margin-right: 1em; float:left;}
.rules .bonustile { width: 20em; margin-right: 1em; float:left; clear: both; margin-top: 0.5em;}
#panelRules .bonustile { width: 15em; }

.rules .blessings { width: 31%; float: left; margin-right: 1em; margin-top: 0.5em; }
.rules .blessings .blessingImage { float: left; width: 5em; margin-right: 0.5em;}
#panelRules .blessings { width: 95%; }

.rules .helpers { margin-top: 0.5em; min-height:9em; clear:left;}
.rules .helpers .helperImage { float: left; height: 8.5em; margin-right: 0.5em; border-radius:5px;}

.rules .picturebox {font-family: 'Manuale', sans-serif;  font-weight: bold;  color: #4F041A; line-height:1.1em;}
.rules .picturebox.explore_temple {float:right; height:22.5em; width:33em; margin-right:1em; background-image: url(/game-plugins/arnak/1.2.8/images/rules/explore_lost_temple.jpg); background-size: 100% 100%;}
.rules .picturebox.explore_temple .text1 {float:left; height:2em; width:9em; margin-left:23.6em; margin-top:3.5em; text-align:center;}
.rules .picturebox.explore_temple .text2 {float:left; height:2em; width:9em; margin-left:11.5em; margin-top:12.5em; text-align:center;}

.rules .cards { width: 45%; float: left; margin-right: 2%; margin-top: 0.5em; margin-bottom: 0.5em; background-color: #C6C5BA; padding: 1em;}
.rules .cards .cardImage { float: left; width: 7em; margin-right: 0.5em; border-radius:5px;}
.rules .cards .header {font-family: 'Manuale', sans-serif;  font-weight: bold;  font-size: 1.5em;  margin-top: 0em;  margin-bottom: 0em; color: black; font-variant: small-caps; }
#panelRules .cards { width: 95%; }

.rules .effects { width: 45%; float: left; margin-right: 2%; margin-top: 0.5em; margin-bottom: 0.5em; background-color: #C6C5BA; padding: 1em;}
#panelRules .effects { width: 95%; }

/* from the layout.css */
.rules .thisTurnOnly { border-radius: 100%; box-shadow: 0px 0px 0.4em 0.2em yellow; }

/* scoring table */
.rules .scoring {border-spacing: 1em;}

/* fading */
.rules .fade {
    margin: 0 auto;
    overflow-y: hidden;
    position: relative;
    float:left;
}
.rules .fade::after {
    box-shadow: inset 0 10px 7px -6px, inset 0 -20px 12px -8px;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    color: #FDE7B6;
}
#panelRules .fade::after {
    color: #e8f0f3;
}

.rules .fadelight {
    margin: 0 auto;
    overflow-y: hidden;
    position: relative;
    float:left;
}
.rules .fadelight::after {
    box-shadow: inset 0 10px 7px -6px, inset 0 -20px 20px -15px;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    color: #FDE7B6;
}
#panelRules .fadelight::after {
    color: #e8f0f3;
}

/* flex containers align the height of side by side boxes */
.rules .flexcontainer {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}