/* 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 .personcards { width: 49%; box-sizing: border-box; float: left; }
#rulesContainer #rules .personcards { width: 100%; }
.ui-popup .rules .personcards { width: 100%; }
.rules .personcards .tileImage { float: left;  width: 30%; margin-right: 1em; }

.rules .personcardswide { width: 99%; box-sizing: border-box; float: left; }
#rulesContainer #rules .personcardswide { width: 100%; }
.ui-popup .rules .personcardswide { width: 100%; }
.rules .personcardswide .tileImage { float: left;  width: 15%; margin-right: 1em; }
.rules .personcardswide .exampleimage { float: right;  width: 20%; margin-left: 1em; }

.rules .hints4Handling .playerinfo { width: 48%; box-sizing: border-box; float: left; }
.rules .hints4Handling .playerinfowide { width: 98%; box-sizing: border-box; float: left; }
.rules .hints4Handling .playerinfo .playerinfoicon { float: left; width: 10%; margin-right: 1em; }
.rules .hints4Handling .playerinfowide .playerinfoicon { float: left; width: 5%; margin-right: 1em; }
.rules .hints4Handling .playerinfopic { width: 50%; margin-left: auto; margin-right: auto;}
.rules .hints4Handling .valettepic { float: left; width: 10%; }