/* 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 */

@font-face { font-family: 'Bubblegum Sans'; src: local('Bubblegum Sans'), local('Bubblegum'), url('/game-plugins/sagani/1.2.10/fonts/BubblegumSans-Regular.ttf') format('truetype'); }

.rules { background-image: url("/game-plugins/sagani/1.2.10/images/rules/background.jpg"); background-repeat: repeat; font-size: 1.1em; }
.rules h1 { font-family: 'Bubblegum Sans', sans-serif; text-align: left; font-size: 2.0em; color: #533920; }
.rules b { color: #B34843; }
.rules .bold-brown { color: #533920; }
.rules ul { margin-bottom: 0; }

.rules .components-container { display: flex; flex-flow: row wrap; }
.rules .component { flex-basis: 50%; margin-top: 35px; text-align: center; font-weight: bold;}
.rules .tiles-chapter-container { display: flex; flex-flow: column; }
.rules .tiles-chapter-row { display: flex; flex-flow: row; align-items: center; row-gap: 25px; }
.rules .tiles-chapter-cell { flex-basis: 50%; }
.rules .fwea-header { font-family: 'Bubblegum Sans', sans-serif; text-align: center; font-size: 1.5em; color: #533920; }
.rules .subtitle { font-family: 'Bubblegum Sans', sans-serif; font-size: 1.5em; color: #533920; }
.rules .numbered-subtitle { font-family: 'Bubblegum Sans', sans-serif; font-size: 1.5em; color: #533920; margin-top: 25px; margin-left: 50px; }
.rules .play-step { float: left; width: 45px; margin-top: 10px; }
.rules .inline-step { width: 14px; }
.rules .inline-h4h { width: 20px; margin-right: 3px; }
.rules .two-columns { display: flex; flex-flow: row; }
.rules .column-container { flex-basis: 48%; }
.rules .column-divider { flex-basis: 4%; }
.rules .image-left  { float: left;  width: 40%; }
.rules .image-left-small  { float: left;  width: 14%; margin-left: 2%; }
.rules .image-right { float: right; width: 40%; }
.rules .red-callout   { outline: 2px dashed #B34843; background: #B34843; color: white; padding: 5px; }
.rules .green-callout { outline: 2px dashed #5A7F26; background: #5A7F26; color: white; padding: 5px; }
.rules .red-callout-left { width: 60%; }
.rules .red-callout-right { width: 53%; margin-left: 45%; }
.rules .red-callout b { color: white; }
.rules .clear-me { clear: both; }