/* 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 .gameTitle { display: none; }
.rules[showRules=summary] .gameTitle { display: block; }
#sidebarPanel #rules .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 */
.char_effects {
    width:47%;
    min-height:110px;
}

#sidebarPanel #rules .char_effects,
 .ui-popup .rules .char_effects {
    width:100%;
    min-height:0px;
}

.sym_image { margin-right:4%; min-width:20%; max-width:30%; float:left; }
.sym_descr { margin-right:4%; max-width:62%; float:left; }
.res_image { position:relative; width:2.5em; height:2.5em; float:left; }

.char_image { float:left; margin-right:4%; width:33%; }
.char_name { float:left; margin-right:4%; width:58%; font-weight: bold; }
.char_descr { float:left; margin-right:4%; width:58%; }

.appendix table {
    width:100%;
    table-layout:fixed;
}

/* Expansion - New Characters*/

.setup_exp, .gift_exp{
 float: left;
 width: 50%;
}

#sidebarPanel #rules .setup_exp, #sidebarPanel #rules .gift_exp {
    width: 100%;
}

/*
.setup_exp_image { margin-right:6%; width:8%; float:left; }
.setup_exp_descr { margin-right:16%; width:20%; float:left; }

.sym_exp_image { margin-right:4%; width:10%; float:left; }
.sym_exp_descr { margin-right:4%; width:72%; float:left; }

.gift_exp_image { margin-right:4%; width:10%; float:left; }
.gift_exp_descr { margin-right:4%; width:32%; float:left; }

*/

.setup_exp_image { margin-right:12%; width:16%; float:left; }
.setup_exp_descr { margin-right:22%; width:50%; float:left; }

.sym_exp_image { margin-right:4%; width:10%; float:left; }
.sym_exp_descr { margin-right:4%; width:72%; float:left; }

.gift_exp_image { margin-right:8%; width:20%; float:left; }
.gift_exp_descr { margin-right:8%; width:64%; float:left; }