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

/* fonts */
/* Mignon for Headers */
@font-face {
  font-family: 'Mignon';
  font-style: normal;
  font-weight: 400;
  src: url('/game-plugins/kraftwagen/1.0.1/fonts/Mignon-Regular.otf'); 
  src: local('Mignon'), 
       url('/game-plugins/kraftwagen/1.0.1/fonts/Mignon-Regular.otf') format('opentype'); 
}

#rules .chapter .title, h1, h2, h3 {
  font-family: 'Mignon', serif;
  font-weight: bold;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
#rules .chapter .title, h1 {  
  color: #577887; 
  background-color:#C2DDED;
  border-bottom: solid #577887 2px;
  border-top: solid #577887 2px;
  font-size: 2em;
}
#rules h2 { font-size: 1.75em; margin-top: 1em; color: #2C3D44;}
#rules h3 { font-size: 1.3em; margin-top: 1em; color: #2C3D44;}
  
#rules ol { margin-left:2em; }
#rules ol.roman {list-style: none; counter-reset: li}
#rules ol.roman>li::before { content: counter(li, upper-roman)"."; font-weight: bold; }
#rules ol.roman>li {counter-increment: li}


#rules .clear { clear: both; }
#rules .clearleft { clear: left; }

#rules .paragraph { clear: left; margin-top: 1em; margin-bottom: 0.5em; }

/* examples */
#rules .example { font-style: italic; font-weight: normal; background-color: #C2DDED; padding: 0.5em; width: 62%; }
#rules .example.wide { width: 98%; }
/* don't display examples in the sidebar */
#sidebarPanel #rules .example { display:none; }

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


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

/* generic pictures */
#rules .imageleft4 img { width: 4em; float: left; margin-right: 1em; }
#rules .imageleft6 img { width: 6em; float: left; margin-right: 1em; }
#rules .imageleft8 img { width: 8em; float: left; margin-right: 1em; }
#rules .imageleft12 img { width: 12em; float: left; margin-right: 1em; }
#rules .imageleft14 img { width: 14em; float: left; margin-right: 1em; }

/* specific pictures */
#rules .markertoken { width: 3em; float: right; margin-left: 1em; margin-top: -1.5em; margin-bottom: 1em; }
#rules .flipStartTile { width: 14em; float: left; margin-right: 1em; margin-bottom: 0.5em; }


#rules .tile { width: 47%; float: left; margin-right: 1%; margin-bottom: 0.5em; padding: 0.5em; }
#rules .tile.A { background-color: #F5EED4 }
#rules .tile.B { background-color: #E2D9E2 }
#rules .tile.C { background-color: #D5DDD4 }
#sidebarPanel #rules .tile { width: 95%; }

#rules .instantaction { width: 47%; float: left; margin-right: 1%; margin-bottom: 0.5em; padding: 0.5em; background-color: #F5EED4 }
#sidebarPanel #rules .instantaction { width: 95%; }

/* 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;
}
#rules .engineer { width: 47%; float: left; margin-right: 1%; margin-bottom: 0.5em; padding: 0.5em; background-color: #F5EED4 }
#sidebarPanel #rules .engineer { width: 95%; }