/* 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 .chapter .title {
  background-color: #dc9f56;
  color: #000000;
  text-align: center;
  padding: 0px;
  font-family: Gabriola, Papyrus, "Trebuchet MS", Verdana, sans-serif;
  font-size: 2em;
  font-variant: small-caps;
}

#rules h1 {
  background-color: #dc9f56;
  color: #000000;
  font-family: Gabriola, Papyrus, "Trebuchet MS", Verdana, sans-serif;
  font-size: 2em;
  font-variant: small-caps;
  text-align: left;
}
   
#rules h2 {
  background-color: #ecd39b;
  color: #744818;
  font-family: Gabriola, Papyrus, "Trebuchet MS", Verdana, sans-serif;
  font-size: 2em;
  font-variant: small-caps;
  margin: 0.2em 0em;
  clear: left;
}

#rules h3 {
  color: #744818;
  font-family: Gabriola, Papyrus, "Trebuchet MS", Verdana, sans-serif;
  font-size: 1.75em;
  font-variant: small-caps;
}

#rules h4 {
  color: #744818;
  font-family: Gabriola, Papyrus, "Trebuchet MS", Verdana, sans-serif;
  font-size: 1.5em;
  font-variant: small-caps;
}

#rules img.inlinePic { width: 2em; }
#rules img.inlinePicbig { width: 4em; }
#rules .sealpicleft { width: 5%; float: left; margin-right: 2em; }
span.clear { clear: left; display: block; }

/* used in PRC, needed here?
.ui-popup .rules .nopopup { display:none; }
.rules img.card { width: 12%; }   
*/

/* show only ingame in the sidebar */
#rules .sidebaronly { display:none; }
#sidebarPanel #rules .sidebaronly { display:block; }

/* do NOT show ingame in the sidebar */
#sidebarPanel #rules .nosidebar { display:none; }

/* keep things together in a compact box */
#rules .compact { overflow: hidden; margin-top: 1em;}
#rules .compact .image img { width: 15%; float: left; margin-right: 1em; clear:left; margin-top: 0.2em;}
#rules .compact .desc { width: 75%; margin-left: 20%; }

/* board setup */
#rules .boardsetup { overflow: hidden; margin-top: 1em;}
#rules .boardsetup .image img { width: 60%; float: left; margin-right: 2em; clear:left; margin-top: 0.2em;}
#rules .boardsetup .desc { width: 38%; margin-left: 61%; }

/* action paragraph */
#rules .actions { overflow: hidden; margin-top: 1em;}
#rules .actions .image img { width: 15%; float: left; margin-right: 1em; clear:left; margin-top: 0.2em;}
#rules .actions .desc { width: 75%; margin-left: 20%; }
#rulesContainer #rules .actions .paragraph { width: 100%; }


/* APPENDIX */
#rules .appendix .paragraph { width: 98%; }

/* City Quarters */
#rules .appendix.quarters .image img { width: 10%; float: left; margin-right: 1em; }
#rules .appendix.quarters .ability img { width: 20%; float: right; margin-left: 1em; }
#rulesContainer #rules .appendix.quarters .paragraph { width: 100%; }

/* Descendants */
#rules .appendix.descendants .paragraph { width: 47%; }
#rules .appendix.descendants .image img { width: 35%; float: left; margin-right: 1em; }
#rulesContainer #rules .appendix.descendants .paragraph { width: 100%; }

/* Cards */
#rules .appendix.cards .paragraph { width: 47%; }
#rules .appendix.cards .image img { width: 35%; float: left; margin-right: 1em; }
#rules .appendix.cards .cardname { font-variant: small-caps; margin-bottom: 1em; text-decoration: underline; font-weight:bold; }
#rulesContainer #rules .appendix.cards .paragraph { width: 100%; }

/* Tower */
#rules .appendix.tower .paragraph { width: 30%; }
#rules .appendix.tower .image img { width: 30%; float: left; margin-right: 1em; }
#rulesContainer #rules .appendix.tower .paragraph { width: 100%; }