/* .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 */
/* form #rules: rules at main site only */
/* #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 */

/* game styles */

#rules .appendix.factory .paragraph { width: 31%; padding: .5%; }
.appendix.factory .paragraph hr { display: none; }
.paragraph.factory.cnt4,.paragraph.factory.cnt7 { clear: both; }
.paragraph.factory .images { width: 25%; float: left; margin-right: 1em; }
.paragraph.factory .images img { width: 100%; }
.paragraph.factory .images div { font-weight: bold; text-align:center; }

#sidebarPanel .appendix .paragraph.factory { width: 100%; }
#sidebarPanel .appendix .paragraph.factory .images { width: 15%; }

#rules .appendix.factory.factoryGRR .paragraph { width: 100%; padding: .5%; }
#rules .appendix.factory.factoryGRR .paragraph.factory .images { width: 10%; }

#rules .appendix .paragraph.engineer { width: 31%; padding: .5%; }
.paragraph.engineer hr { display: none; }
.engineer.cnt4, .engineer.cnt7, .engineer.cnt10, .engineer.cnt13 { clear: both; }
.paragraph.engineer .images { width: 40%; float: left; margin-right: 1em; }
.paragraph.engineer .images img { width: 100%; }
.paragraph.engineer .images div { font-weight: bold; text-align:center; }

#sidebarPanel .appendix .paragraph.engineer { width: 100%; }
.ui-popup .paragraph.engineer { width: 200px; }
.ui-popup .paragraph.engineer .images { width: 100%; float: none; }
.ui-popup .paragraph.engineer hr { display: block; }

#rules .appendix .paragraph.isCard { width: 31%; padding: .5%; }
.paragraph.isCard hr { display: none; }
.quCard.cnt4, .quCard.cnt7, .quCard.cnt10, .quCard.cnt13 { clear: both; }
.paragraph.isCard .images { width: 40%; float: left; margin-right: 1em; }
.paragraph.isCard .images img { width: 100%; }
.paragraph.isCard .images div { font-weight: bold; text-align:center; }
.paragraph.quToken.isCard .images img { width: 6em; }

#sidebarPanel .appendix .paragraph.isCard { width: 100%; }
#sidebarPanel .appendix .paragraph.isCard .images { width: 25%; }
.ui-popup .paragraph.isCard { width: 400px; }
.ui-popup .paragraph.isCard .images { width: 100%; float: none; text-align: center }
.ui-popup .paragraph.isCard .images img { width: 25%; }
.ui-popup .paragraph.isCard hr { display: block; }

.extension1 img { width: 8%; }
.extension2 img { width: 12%; }
.extension3 img { width: 16%; }

.important { border: 1px solid black; margin: .5em; padding: .5em; background-color: white; }