/* .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 .gameTitle { display: none; }
.rules[showRules=summary] .gameTitle { display: block; }

/* game styles*/
#rules .paragraph hr {display: none; } /* popup only */
.ui-popup .rules .images { text-align: center; }
.ui-popup .rules .images img { width: 35%; padding: 0 1em; }


/* special tiles */
#rules .appendix .paragraph.specialTile { width: 23%; padding: .5%; }
#rules .specialTile .images { width: 40%; float: left; }
#rules .specialTile img { width: 90%; padding: 5%; }
.ui-popup.specialTile .rules { width: 14em; }
#sidebarPanel #rules .specialTile { width: 97%; }
#sidebarPanel #rules .specialTile .images { width: 30%; }
@media ( min-width: 80em ) {
    #sidebarPanel #rules .appendix .paragraph.specialTile { width: 48%; padding: .5%; }
    #sidebarPanel #rules .specialTile .images { width: 40%; }
}

/* persons */
#rules .person { width: 47%; }
#sidebarPanel .rules .person { width: 97%; }
#rules .persons .person h1 { width: 81%; float: right; }
#rules .person .images { width: 15%; float: left; }
#rules .person img { width: 90%; padding: 5%; }
#rules .person .feature { width: 81%; float: left; padding-left: 4%; }
.ui-popup.person .rules { width: 16em; }
@media ( min-width: 80em ) {
    #sidebarBottom #rules .appendix .paragraph.person { width: 31%; padding: .5%; }
}

/* buildings */
#rules .appendix .paragraph.building { width: 47%; padding: 1%; }
#sidebarPanel .rules .appendix .paragraph.building { width: 97%; padding: 1%; }
#rules .building .images { width: 20%; float: left; }
.rules .building img { width: 90%; padding: 5%; }
.rules .building img.inlinePic { height: 1.2em; width: auto; padding: 0; }
#rules .building .feature { width: 78%; margin-left: 22%; }
.ui-popup.building .rules { width: 16em; }
@media ( min-width: 80em ) {
    #sidebarPanel #rules .appendix .paragraph.building { width: 48%; padding: .5%; }
    #sidebarPanel #rules .building .images { width: 40%; }
}
@media ( min-width: 80em ) {
    #sidebarBottom #rules .appendix .paragraph.building { width: 31%; padding: .5%; }
}