/* 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 */
   
 
#rulesPage .rules, .modal.rules .modal-body { background-color: #BEAB8A; font-size: 1.1em; padding: 0.5em; text-shadow: none; }
#panelRules { font-size: 1em; padding-left:0.5em;}

/* OldSH  for headers*/
@font-face {
  font-family: 'OldSH';
  src: local('OldSH'),
       url('/game-plugins/newton/1.2.0/fonts/OLDSH___.TTF') format('truetype'); 
}   
/* Athelas  for list numbers*/
@font-face {
  font-family: 'Athelas1';
  src: local('Athelas1'),
       url('/game-plugins/newton/1.2.0/fonts/Athelas1.ttf') format('truetype'); 
}   
/* Century Old Style Std Italic  for Expansion headers*/
@font-face {
  font-family: 'CenturyOldSI';
  src: local('CenturyOldSI'),
       url('/game-plugins/newton/1.2.0/fonts/Century_Old_Style_Std_Italic.otf') format('opentype'); 
}   

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

.rules h1 {
  font-family: 'OldSH', sans-serif;
  font-weight: bold;
  background-image: url(/game-plugins/newton/1.2.0/images/rules/header_background.gif);
  background-size: auto 100%;
  background-repeat: repeat-x;
  border: none;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: black; 
  text-align: center;
  font-size: 2.5em;
  line-height:1.2em;
  padding: 10px 0px 10px 10px;
}
#panelRules h1 { font-size: 1.75em; }
.rules .h1_mod { background-image: url(/game-plugins/newton/1.2.0/images/rules/header_font_background.png); background-size: 100% 100%;  padding: 0px 10px 0px 10px; box-shadow: 10px 0px 10px #BFAD91, -10px 0px 10px #BFAD91;}
#panelRules .h1_mod { background-image: url(/game-plugins/newton/1.2.0/images/rules/header_font_background_w.png); background-size: 100% 100%;  padding: 0px 15px 0px 10px; box-shadow: 10px 0px 10px #E8F0F3, -10px 0px 10px #E8F0F3;}

.rules h2 {
  font-family: 'OldSH', sans-serif;
  font-size: 1.75em;
  color: black;
  text-align: center;
}
#panelRules h2 {font-size: 1.25em; }

.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 li { margin-bottom: 0.2em; }

.rules .ae {background-color: transparent; background-image: url(/game-plugins/newton/1.2.0/images/rules/ae_dots.png); background-size: 100% 100%;}

/* rules colors */
.rules .background  { color:#BFAD91; } /* grayish brown */
.rules .background_light  { color:#DDD3C2; } /* light greyish brown */
.rules .frame_inner  { color:#522A0E; } /* dark brown */
.rules .frame_outer  { color:#9E350A; } /* dark red */

.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; }
.modal-dialog .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;}

/* customized list - black capital letters or numbers on white circle with yellow frame*/
.rules ol.custlist { list-style: none; counter-reset: li; }
.rules ol.custlist>li::before {
  content: counter(li);
  font-family: 'Athelas1', sans-serif; color: black; font-weight: bold; text-align: center; font-size: 1.5em;
  width: 2.5em;  height: 1.75em;
  background-color: #EEE3CD;
  background-color: transparent;
  background-image: url(/game-plugins/newton/1.2.0/images/rules/list_icon_o.png);
  background-size: 100% 100%;
  padding: 0.2em 0.5em 0.2em 0.5em;
  margin-right: 0.3em;
}
.rules ol.custlist.alpha>li::before { content: counter(li, upper-alpha); }
.rules ol.custlist>li { counter-increment: li; }

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

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


 /* extended rules boxes  stuff */
 .rules .ext_box_frame {border: 2px solid #9E350A; margin: 0.5em;}
 .rules .ext_box_frame.topped { margin-top: 3em;}
 .rules .ext_box {
   border: 3px solid #522A0E;
   background-color: #DDD3C2;
   margin: 0.2em;
   padding:  1.5em; padding-bottom: 0.5em;
 }
.rules h3 {
  font-family: 'OldSH', sans-serif;
  font-size: 1.5em;
  color: black;
  text-align: center;
}

.rules .chapter_topping_box {display: flex; justify-content: center; align-items: center; margin-top: -1em;}    
.rules .chapter_topping {background-color: transparent; background-image: url(/game-plugins/newton/1.2.0/images/rules/chapter_topping.png); background-size: 100% 100%;  
    width: 5.2em; margin-top: -5em;  text-align: center; margin-bottom: -1.8em; padding-top: 0.3em; }    
#panelRules  .chapter_topping { background-image: url(/game-plugins/newton/1.2.0/images/rules/chapter_topping_side.png); }
.rules .chapter_topping img { width: 100%; margin-top: 1em;}

 
 /* example boxes */
.rules .example {
  font-style: italic;
  margin: 0.5em;
  padding: 0.5em;
}  
.rules .shadedlight {
  background-color: #DDD3C2;
  box-shadow: 0px 0px 0.5em 0.5em #DDD3C2;
}
.rules .shaded {
  background-color: #D1C1A9;
  box-shadow: 0px 0px 0.5em 0.5em #D1C1A9;
}
#panelRules .example { display:none; }


.rules .example.action_work img { width: 90%; margin-left: 5%; }

.rules .example.action_technology  { float:right; width: 45%; margin-left: 1em; }
.rules .example.action_technology img { width: 100%; }
#rulesPage .example.action_technology { width: 50%; }
#rulesPage .example.action_technology img { width: 40%; float: left; margin-right: 0.5em;}

.rules .example.action_travel  { float:right; width: 45%; margin-left: 1em; }
.rules .example.action_travel img { width: 100%; }
#rulesPage .example.action_travel img { width: 55%; float: left; margin-right: 0.5em;}


.rules .example.action_lesson  { float:right; width: 40%; margin-left: 5%; }
.rules .example.action_lesson img { width: 70%; margin-left:23%; margin-top:-0.5em;}
#rulesPage .example.action_lesson  {  margin-left: 1em; width: 35%;}
#rulesPage .example.action_lesson img { width: 14em; margin-left:0.5em; margin-top:-3em; float: right; margin-right: 1em; }

.rules .example.action_study  { margin-top: 1em; display: inline-block;}
.rules .example .action_study1 img { width: 48%; float:left; margin-right: 1em;}
.rules .example .action_study2 img { width: 25%; float:left; margin-left: -1em; margin-right: 1em; margin-top: 1.1em;}
#rulesPage .example .action_study1 img { width: 20%; float: left; margin-right: 2em; margin-left: 6%;}
#rulesPage .example .action_study2 img { width: 10%; float: left; margin-left: -2em; margin-right: 2em; margin-top: 0.6em; margin-bottom: 1em;}


.rules .example.action_joker  { float:right; width: 60%; margin-left: 3%; margin-right:-1em; }
.rules .example.action_joker img { width: 90%; margin-left: 2%; margin-top: -2.5em;}
#rulesPage .example.action_joker  { float:right; width: 50%; margin-left: 10%; margin-right:0em;}
#rulesPage .example.action_joker img { float: left; width: 20em; margin-right: 1em; margin-top: -1.5em;}

.rules .example.actions  { float:right; width: 50%; margin-left: 3%; padding-right:0em;}
.rules .example.actions img { width: 90%; margin-left: 2%; }
#rulesPage .example.actions  { float:right; width: 30%; margin-left: 3%; padding-right:0em; clear:right; margin-right: 5%; }

.rules .example.scoring  { margin-top: 1em; clear: both; overflow:auto}
.rules .example.scoring .board { float: left; width: 55%; margin-right: 1em;}
.rules .example.scoring  .objective { min-height: 3em; }
.rules .example.scoring  .objective img { width: 5em; float:left; margin-right: 0.5em;}
.rules .example.scoring  .mastercard { width: 10%; margin: 0.5em;}


.rules .main_boards { float: right; width: 70%; margin-left: 1em; }
.rules .player_boards { width: 90%; margin-left: 5%; }
.rules .tile {width: 7em; margin-right: 1em; float: left; clear: left; margin-top:0.5em; margin-bottom:0.5em; display: block;}
.rules .apple { width: 5em; float: right; margin-left: 3em; margin-right: 10em; margin-top: -1em;}
#panelRules  .apple { margin-right: 0.5em; }

.rules .solo_scoring {  float:right; width: 50%; margin-left: 1.5em; margin-top: -0.5em}
#panelRules .solo_scoring {  float:none; width: 95%; margin-left: 0.5em; margin-top: 0em}
#rulesPage .solo_scoring {  float:right; width: 40%; margin-left: 1.5em; margin-top: -0.5em }
.rules .solo_scoring th {   font-family: 'OldSH', sans-serif;  font-size: 1.2em; }
.rules .solo_scoring table {   padding-left: 1em; border-collapse: collapse; }
.rules .solo_scoring th,.solo_scoring td {   padding-left: 1em; }
.rules .solo_scoring .leftcol { border-right: 2px solid gray; width: 40%; text-align: right; padding-right: 1em; }

.rules .bonustiles {margin-right: 3em; clear: both; }
#panelRules .bonustiles {margin-right: 10%; margin-left: -2em; clear: left; margin-bottom: 0.5em;}
#rulesPage .bonustiles {width: 80%; margin-right: 1em; margin-left: 10em; clear: left; margin-bottom: 0.5em;}
.rules .bonustile {float: right; margin-right: -3%; width: 9%; border-radius: 50%; background-color: #BFAD91;}
.rules .bonus { min-height: 3.5em; }
.rules .bonus img { max-height: 3.3em; width: 3em; float:left; margin-right: 0.5em;clear: left;}

.rules .specializetiles {margin: 0.5em 3em 0.5em 0em; clear: both; overflow: auto;}
#panelRules .specializetiles {margin: 0.5em 0.5em 0.5em 0em; clear: both; overflow: auto;}
.rules .specializetile {float: right; width: 9%; margin-left: 1%;}
.rules .example_study_tableau {float: right; width: 40%; margin: 0em 0em 0.5em 0.5em;}

.rules .ideatiles {margin: 0.5em 22% 0.5em auto; clear: both; overflow: auto; text-align: center;}
#panelRules .ideatiles {margin: 0.5em 0.5em 0.5em 0.5em; }
.rules .ideatile {float: right; width: 12%; margin-left: 1%;}
#panelRules .ideatile {width: 19%; }
.rules .example_ideatiles {float: right; width: 40%; margin: 0em 0em 0.5em 0.5em;}

.rules .medicinetiles {margin: 0.5em 22% 0.5em auto; clear: both; overflow: auto;}
#panelRules .medicinetiles {margin: 0.5em 0.5em 0.5em 0.5em; }
.rules .medicinetile {float: right; width: 12%; margin-left: 1%;}
#panelRules .medicinetile {width: 19%; }

.rules .tilescontainer {  display: flex; flex-wrap: wrap; }
.rules .tilescontainer .tilesbox {  flex: 0 0 31% ; padding: 0.5em;}
#panelRules .tilescontainer .tilesbox {  flex: 0 0 99% ; padding: 0.5em;}
.rules .tilescontainer .tilesbox img { width: 6em; float: left; margin-right: .5em; }

.rules .tilescontainer.cities .tilesbox {  flex: 0 0 31% ; padding: 0.5em;}
#panelRules .tilescontainer.cities .tilesbox {  flex: 0 0 99% ; padding: 0.5em;}
.rules .tilescontainer.cities .tilesbox img { width: 6em; float: left; margin-right: .5em; }

.rules .tilescontainer.objective .tilesbox {  flex: 0 0 31% ; padding: 0.5em;}
#panelRules .tilescontainer.objective .tilesbox {  flex: 0 0 99% ; padding: 0.5em;}
.rules .tilescontainer.objective .tilesbox img { width: 7em; float: left; margin-right: .5em; }

.modal-dialog .tilesbox.rules {  display: flex; flex-wrap: wrap; flex: 0 0 31% ; padding: 0.5em;}
.modal-dialog .tilesbox.rules img { width: 6em; float: left; margin-right: .5em; }
.modal.objective.rules .modal-dialog  .tilesbox img { width: 7em; } 

.rules .effectcontainer {  display: flex; flex-wrap: wrap; }
.rules .effectcontainer .effectbox {  flex: 0 0 31% ; padding: 0.5em;}
#panelRules .effectcontainer .effectbox {  flex: 0 0 99% ; padding: 0.5em;}
.rules .effectcontainer .effectbox img { height: 4.5em; float: left; margin-right: .5em; }

.rules .masterscroll { width: 4em; margin-right: .5em; margin-bottom: -0.7em;}

.rules .mastercontainer {  display: flex; flex-wrap: wrap; }
.rules .mastercontainer .masterbox {  flex: 0 0 48% ; padding: 0.5em;}
#panelRules .mastercontainer .masterbox {  flex: 0 0 99% ; padding: 0.5em;}
.rules .mastercontainer .masterbox img { width: 9em; float: left; margin-right: .5em; border-radius:0.5em; }


/* Expansion stuff */
.rules .expansion_header {
  background-image: url(/game-plugins/newton/1.2.0/images/rules/expansion_header_background.jpg); background-size: 100% 100%; 
  background-color: #BEAB8A;
  padding: 0.5em 1em 2em 1em;
  box-sizing: border-box;
  box-shadow: inset 0em -0.5em 0.8em 0 #BEAB8A;
}

.rules .expansion_header_text {
  font-family: 'CenturyOldSI', sans-serif;
  font-size: 1.75em;
  color: #FAECA5;
  text-align: left;
}

.rules .faq_left {
    text-align: left;
    font-size: 1.3em;
}
#panelRules .faq_left {
    text-align: left;
    font-size: 1.15em;
}

.rules .faq_question {
    color: #542b19;
    /*font-weight: bold;*/
}