/* .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
   #rulesPage: ingame rules page display
   #panelRules: ingame rules sidepanel display
   #popup.rules: popup with rules extract only */

#panelRules {
    font-size: 1.2em;
    overflow-x: hidden;
}

.rules .title,
.rules .chapter .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;
  font-weight: normal;
}

.rules h1 {
  background-color: #4f7091;
  color: #e3d280;
  font-family: Gabriola, Papyrus, "Trebuchet MS", Verdana, sans-serif;
  font-size: 2.25em;
  font-variant: small-caps;
  font-weight: normal;
}
   
.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 .appendix { clear: both; }

.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; }
#panelRules .picFinalscore { width: 30%; float: left; margin-right: 2em; }
.finalscore ul { list-style: none; }


.rules .poweractions { width: 47%; }
#panelRules .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 #poweractionSpade { clear: both; }


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

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


.rules .townTiles { width: 32%; box-sizing: border-box; float: left; }
#panelRules .townTiles { width: 100%; }
.rules .townTiles .tileImage { float: left;  width: 40%; margin-right: 1em; }
.modal .townTiles { width: 20em; }
.modal .townTiles .tileImage { width: 30%; }
.rules #townPower { clear: both; }
#rulesContainer .townTiles .tileImage { width: 30%; }
.rules div.townTilesPromo { clear: both; padding-top: 1em; margin: 0; }

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


.rules .factionInfo { width: 47%; }
.rules .factionTitle { font-size: 2em; font-weight: bold; vertical-align: middle; padding: .2em; margin-bottom: .2em; }
.rules .factionTitle img { width: 50px; vertical-align: middle; 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; margin: 0; text-align: left; }
.rules .factionTitle.colorgreen { background: url(/game-plugins/terramystica/2.4.4/images/background/green.jpg) repeat; }
.rules .factionTitle.coloryellow { background: url(/game-plugins/terramystica/2.4.4/images/background/yellow.jpg) repeat; }
.rules .factionTitle.colorblue { background: url(/game-plugins/terramystica/2.4.4/images/background/blue.jpg) repeat; }
.rules .factionTitle.colorblack { background: url(/game-plugins/terramystica/2.4.4/images/background/black.jpg) repeat; color: #ccc!important; }
.rules .factionTitle.colorgrey { background: url(/game-plugins/terramystica/2.4.4/images/background/grey.jpg) repeat; }
.rules .factionTitle.colorred { background: url(/game-plugins/terramystica/2.4.4/images/background/red.jpg) repeat; }
.rules .factionTitle.colorbrown  { background: url(/game-plugins/terramystica/2.4.4/images/background/brown.jpg) repeat; }

#panelRules .factionInfo { width: 100%; }
#panelRules .factionTitle img { margin: 0; }

/*.rules .ui-popup .factionAbility img,
.rules .ui-popup .strongholdAbility img { width: 200px; }*/