/* 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 */
   
/* Taranis regular for headers*/
@font-face {
  font-family: 'Taranis';
  src: local('Taranis'), 
       url('/game-plugins/vikings2/1.3.22/fonts/Taranis.ttf') format('truetype'); 
}
   
.rules .chapter .title {
  font-family: 'Taranis', sans-serif;
  font-weight: bold;
  text-align: left;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: black; 
  padding: 4px;
  font-size: 3em;
  color: #9C3521;
  text-shadow:
   -1px -1px 0 #FEF4E8,  
    1px -1px 0 #FEF4E8,
    -1px 1px 0 #FEF4E8,
     1px 1px 0 #FEF4E8;
}
#panelRules .chapter .title {
  padding: 2px;
  font-size: 2em;
}

.rules h1, h2, h3 {
  font-family: 'Taranis', sans-serif;
  font-weight: bold;
  text-align: left;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: black; 
  border: none;
}

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

.rules h3 {
  font-size: 1.75em;
  margin-top: 0em;
  margin-bottom: 0em;
}

.rules h4 {
  font-size: 1.2em;
  margin-top: 0.5em;
  margin-bottom: 0em;
}   


.rules .color_smith {color: #ABA000;}
.rules .color_fisher {color: #00457D;}
.rules .color_noble {color: #9E0217;}
.rules .color_scout {color: #00793D;}
.rules .color_boatsman {color: #77787A;}

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

/* don't display examples in the sidebar */
#panelRules .example { display:none; }
.rules .example { 
  font-style: italic;
  background-image: url(/game-plugins/vikings2/1.3.22/images/rules/example_background.jpg);
  background-size: 100% 100%;
  border-radius:0.5em;
  padding:0.5em;
}

.rules .example.offer { width: 40%; float: right; margin-left: 1em;}
.rules .example-aCompletedOffer { width: 95%; margin-left: 1%; margin-bottom: 0.5em; } 

.rules .wheelRotationbox { 
   width: 95%; 
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.rules .example.wheelRotation { width: 30%; float:left; margin-right:1%; }
.rules .wheelRotation-part1 { width: 95%; margin-left: 1%; margin-bottom: 0.5em; }
.rules .wheelRotation-part2 { width: 95%; margin-left: 1%; margin-bottom: 0.5em; }

.rules .example.placingTiles { width: 40%; float: right; margin-left: 1em; }
.rules .placingTiles2 { width: 95%; margin-left: 1%; margin-bottom: 0.5em; }
.rules .placingTiles3 { width: 95%; margin-left: 1%; margin-bottom: 0.5em; }
.rules .placingVikings { width: 95%; margin-left: 1%; margin-bottom: 0.5em; }

.rules .example.threatExamplebox { width: 40%; float: right; margin-left: 1em; }
.rules .threatExample { width: 95%; margin-left: 1%; margin-bottom: 0.5em; }

.rules .example.largeScoringExample { width: 95%; margin-top: 1em;}

.rules .example.advancedVariant { width: 40%; float: right; margin-left: 1em; }
.rules .advancedVariant-example1 { width: 95%; margin-left: 1%; margin-bottom: 0.5em; }
.rules .example.advancedVariant3 { width: 50%; float: right; margin-left: 3em; }
.rules .advancedVariant-example3 { width: 95%; margin-left: 1%; margin-bottom: 0.5em; }


.rules .tilepic { max-width: initial; margin-right: 1em; margin-bottom:0.2em; }
.rules .scoringtile {width: 6em; float:left; margin-right: 1em; margin-bottom:0.2em; clear:left;}
.rules .game_component__viking { width: 1.5em; }
.rules .RoundIndicator-smallScoring { width: 3.5em; }
.rules .RoundIndicator-largeScoring { width: 3.5em; }
.rules .RoundIndicator-finalScoring { width: 3.5em; }
.rules .placingTiles1 {width:15em; float: left; margin-right: 2em; }

.rules .components__tile_img {
  width: 43px;
  height: 43px;
}
.rules .startplayer_figure_img {
  width: 30px;
  height: 24px;
}
.rules .SpecialTile_explanation {
  margin-bottom: 0.5em;
}
.rules .SpecialTile_explanation td {
  vertical-align: top;
}