/* 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 .chapter .title { background-color: #3f70b3; color: white; padding: .5em; }
.rules hr { clear: both; }
.rules hr.ingameOnly { display: none; }
#rulesContainer #rules .rules hr.ingameOnly { display: block; }
.rules .business { background-color: #ced5dd; padding: 1em .5em;-moz-border-radius: 2em; border-radius: 2em; }
.rules .business h1 { margin: .5em; font-size: 2em; text-align: left; }
.rules .business h2 { margin: .3em; margin-top: 1em; }
.rules .businessImg {width: auto; max-width: 97%; height: auto; float: left;  margin: .5em; margin-right: 1em; }
.rules .businessImg img { width: auto; max-width: 97%; height: auto; }
.rules .business.room { width: 47%; float: left; margin: .5%; -moz-border-radius: 1em; border-radius: 1em; }
.rules .business.room h1 { font-size: 1.6em; }
#rulesContainer #rules.rules .business h1 { font-size: 1.4em; }
#rulesContainer #rules.rules .business h2 { font-size: 1.2em; }
#rulesContainer #rules .business.room { width: 96%; margin: 0; }
.ui-popup .rules .business { max-width: 800px; }
.ui-popup .rules .business h1 { font-size: 1.4em; }
.ui-popup .rules .business.room { width: 30em; margin: 0; }

.rules .summaryOnly { display: none; }
.rules[showRules=summary] .summaryOnly { display: block; }


.rules .Entrepreneur { float: left; margin: 0 1em; }
.rules .AutomaCard { float: left; margin: 0 1em; }
.rules .Forecast { float: left; margin: 0 1em; }