/* 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 .portletheader { 
    background-color: white; text-shadow: none; color: #3f70b3; padding-left: .5em; 
    font-size: 1.6em; font-weight: bold; margin: .2em 0; border-bottom: 1px solid black; border-top: 1px solid black; }


.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; }

#rules .popuponly { display: none; }
#rules .ui-popup .rules .popuponly { display: block; }

/* appendix jungle tiles */
#rules .jungleType { display: inline-block; }
#rules .jungleType h2 { border: 1px solid #043460; border-left: none; border-right: none; margin-bottom: 2px; margin-top: 1em; }
#rules .jungle { width: 47%; }
#rules .full .jungle { width: 97%; }
#sidebarPanel .rules .jungle { width: 97%; }
#rules .jungle h1 { width: 80%; float: right; }
#rules .jungle .images { width: 20%; float: left; }
#rules .full .jungle .images { width: 10%; float: left; }

#rules .paragraph.hut { width: 47%; height: 100px; background-color: white; float: left; margin: .2em .5em; padding: .2em .5em; }
#rules .paragraph.hut img { width: 100px; float: left; }
#rules .paragraph.hut .info { width: 280px; margin-left: 10px; float: left; }
#rules .paragraph.hutinfo { width: 675px; }

#sidebarPanel #rules .jungle h1 { width: 75%; }
#sidebarPanel #rules .jungle .images { width: 25%; }
#sidebarPanel #rules .paragraph.hut { width: 100%; height: auto; }
#sidebarPanel #rules .paragraph.hut img { width: 30%; }
#sidebarPanel #rules .paragraph.hut .info { width: 50%; }
#sidebarPanel #rules .paragraph.hutinfo { width: 100%; }

#rules img.inlinePic { width: 2em; }

#rules .jungle img { width: 90%; padding: 5%; }
.ui-popup.jungle .rules { width: 16em; }



@media ( min-width: 80em ) {
    #sidebarBottom #rules .appendix .paragraph.jungle { width: 31%; padding: .5%; }
}