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

#rules h1 {
  background-color: #4f7091;
  color: #e3d280;
  font-family: Gabriola, Papyrus, "Trebuchet MS", Verdana, sans-serif;
  font-size: 2.25em;
  font-variant: small-caps;
}
   
#rules h2 {
  color: #4f7091;
  font-family: Gabriola, Papyrus, "Trebuchet MS", Verdana, sans-serif;
  font-size: 2.25em;
  font-variant: small-caps;
  margin: 0.2em 0em;
}

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


#rules h4 {
  color: #4f7091;
  font-family: Gabriola, Papyrus, "Trebuchet MS", Verdana, sans-serif;
  font-variant: small-caps;
}

#rules
.faction {
  font-style:italic;
  color: #750d16;
}

#rules .inlinePic { padding: 0 .2em; height: 1.5em; width: auto; vertical-align: middle; }


.ui-popup .rules { width: 30em; }
.ui-popup .rules img { width: 100%; }

#rules .picFinalscore { width: 195px; float: left; margin-right: 2em; }
.finalscore ul { list-style: none; }


.rules .poweractions { width: 47%; }
#rulesContainer #rules .poweractions { width: 100%; }
.rules .poweractions img { width: 100px; float: left; margin-right: 1em; margin-bottom: .5em; }
#rules .poweractions h3 { background-color: inherit; color: #782471; }


.rules .scoringTiles { width: 49%; box-sizing: border-box; float: left; }
#rulesContainer #rules .scoringTiles { width: 100%; }
.ui-popup .rules .scoringTiles { width: 100%; }
.rules .scoringTiles .tileImage { float: left;  width: 40%; margin-right: 1em; }

.rules .bonusTiles { width: 32%; box-sizing: border-box; float: left; }
#rulesContainer #rules .bonusTiles { width: 100%; }
.ui-popup .rules .bonusTiles { width: 100%; }
.rules .bonusTiles .tileImage { float: left;  width: 25%; margin-right: 1em; }

.rules .townTiles { width: 32%; box-sizing: border-box; float: left; }
#rulesContainer #rules .townTiles { width: 100%; }
.ui-popup.townTile .rules { width: 20em; }
.ui-popup .rules .townTiles { width: 100%; }
.rules .townTiles .tileImage { float: left;  width: 40%; margin-right: 1em; }
.ui-popup .rules .townTiles .tileImage { width: 30%; }
#rulesContainer .townTiles .tileImage { width: 30%; }

.rules .favorTiles { width: 32%; box-sizing: border-box; float: left; }
#rulesContainer #rules .favorTiles { width: 100%; }
.ui-popup.favorTile .rules { width: 20em; }
.ui-popup .rules .favorTiles { width: 100%; }
.rules .favorTiles .tileImage { float: left;  width: 40%; margin-right: 1em; }
.ui-popup .rules .townTiles .tileImage { width: 30%; }
.rules .favorTiles .special { clear: both; }


.rules .factionInfo { width: 47%; }
#rulesContainer #rules .factionInfo { width: 100%; }
.rules .factionTitle { font-size: 2em; font-weight: bold; vertical-align: middle; padding: .2em; margin-bottom: .2em; }
.rules .factionTitle img { width: 50px; float: left; margin-right: 1em; }
.rules .factionInfo hr { clear: both; }
.rules .factionAbility { clear: both; }
.rules .factionAbility img { float: left; margin-right: 1em; margin-bottom: .5em; }
.rules .strongholdAbility img { float: left; margin-right: 1em; width: 100px; }
#rules .factionTitle h1 { background-color: inherit; color: inherit; }
#rules .factionTitle.coloryellow { background-color: #efe75d; }
#rules .factionTitle.colorred { background-color: #d22027; }
#rules .factionTitle.colorblue  { background-color: #127bca; }
#rules .factionTitle.colorbrown { background-color: #aa8052; }
#rules .factionTitle.colorgreen { background-color: #0b6133; }
#rules .factionTitle.colorblack { color: #ccc; background-color: #191410; }
#rules .factionTitle.colorgrey { background-color: #b2b1b1; }