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

@font-face {
  font-family: 'Showguide';
  font-style: normal;
  font-weight: 400;
  src: url('/game-plugins/steamrollers/1.0.2/fonts/showguide.TTF'); 
  src: local('Showguide'), local('Showguide'),
       url('/game-plugins/steamrollers/1.0.2/fonts/showguide.TTF') format('truetype'); 
}

#rules .chapter .title {
  color: black;
  background-color: #E2CEA3;
  text-align: center;
  padding: 5px;
  font-size: 3em;
  font-family: 'Showguide', serif; 
  min-height: 1em;
  line-height: 1em;
  border: none;
  margin-top: 0em;
  margin-bottom: 0em;
}
   
#rules .imageleft img { width: 10%; float: left; margin-right: 1em; }
#rules .imageright img { width: 10%; float: right; margin-right: 1em; }
#rules .imageleftwide img { width: 20%; float: left; margin-right: 1em; }

#rules .example { border: 2px solid green; border-radius: 10px; overflow: hidden; float: right; width: 30%; }
#rules .example img {width: 10%; float: left; margin: 1em; }

#rules .full-example { border: 2px solid green; border-radius: 10px; padding: 5px; overflow: hidden; }
#rules .full-example img {width: 50%; float: right; }

#rules .micro-expansion { border: 2px solid #3f70b3; border-radius: 10px; padding: 5px; margin: 5px; overflow: hidden; }

#rules .contain-image { overflow:hidden; }

/* #master-middlet1 */
#rules .tile { width: 95%; background-color: #e7e4cf; float: left; margin: .3em .5em; padding: .2em .5em; border: 1px solid #911e20; border-radius: 4px; }
#rules .tile img { width: 25%; float: left; margin-right: 1em; }

#rules .column { float: left; width: 50%; }
#rulesContainer #rules .column { float:unset; width:unset; margin-right: 5px; }
#rules .row:after { content: ""; display: table; clear: both; }