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

.rules img.ProvinceBoard { width: 350px; padding-right: 1em; float: left; }

.rules hr { clear: both; }
#rules hr.ingameOnly { display: none; }
#rulesContainer hr.ingameOnly { display: block; }
.rules .clearleft { clear: left; }
.rules .picWithDesc { float: left; text-align: center; margin: 0 1em; }

#rules .place { width: 50%; float: left; }
#rules .place.chambers { width: 33%; }
#rulesContainer .place { width: 100%; }
#rulesContainer .place.chambers { width: 100%; }
.rules .place .desc { font-style: italic; }
.ui-popup .place { width: 400px; }

#rules .RYields .paragraph { width: 49%; margin: .5%; box-sizing: border-box; float: left; }
#rulesContainer #rules .RYields .paragraph { width: 99%; }
.rules .RYield { width: 400px; }
.rules .RYield .yieldImg { width: 15%; float: left; }
.rules .RYield .yieldDesc { width: 85%; float: left; box-sizing: border-box; padding: 0 .5em; }