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

/* game styles*/
#rules p { clear: both; }
#rules .hasSummary p { clear: none; }
.newcard { border: 1px solid red; }

.examples { margin: .5em; }
.example { float: left; margin: 1em; max-width: 47%; }
.example.fullWidth { max-width: 100%; }
.example.fullWidth .picture { float: left; }
.example.fullWidth .picture img { height: 150px; }
.example.fullWidth .description { float: left; max-width: 40%}

.appendix .paragraph { width: 30%; }
.appendix .paragraph.shrine { width: 100%; }
.appendix .paragraph .images { text-align: center; }
.appendix .paragraph .images img { width: 50%; }
.appendix .paragraph.shrine .images img { width: 15%; }

.appendix .paragraph.points { width: 47%; }
.appendix .forest, .appendix .meadow, .appendix .river { margin: .5em 0 .2em; padding: .5em 1em}
.appendix .forest { background-color: #628440; }
.appendix .meadow { background-color: #a3c266; }
.appendix .river { background-color:  #a0b8e6; }

#sidebarPanel #rules .appendix .paragraph { width: 100%; }
#sidebarPanel #rules .appendix .paragraph .images img { width: 30%; }
#sidebarPanel #rules .appendix .paragraph.shrine .images img { width: 30%; }
#sidebarPanel #rules .example { max-width: 100%;}