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

.rules img.inlinePic {
    height: 1.2em;
    width: auto;
}

.rules .gallery {
    display: flex;
    flex-direction: column;
    text-align:center;
    float: left;
}
.rules .gallery img {
    width: 90%;
    margin: 0 5%;
}

.rules .clearBoth {
    clear: both;
}

.rules img.inline {
    float: left;
    margin-right: 1em;
}

#panelRules.rules img.inline {
    max-width: 60%;
}

.rules .appendix h1 {
    text-align:left;
    margin-top: 1em;
    width: 100%;
}
.rules .hexTiles .hexTile {
    width: 13%;
    position: relative;
}
.rules div.appendix .PlazaTiles .hexTile {
    width: 9.5%;
}
.rules div.appendix .PlazaTiles .hexTile:nth-of-type(2n) {
    margin-right: 5%;
}

.rules .hexTiles.ActionTiles .hexTile {
    width: 10%;
}

.rules .hexTiles.ProductionTiles .hexTile {
    width: 6.5%;
    vertical-align: middle;
}
.rules .hexTiles.ProductionTiles span {
    vertical-align: middle;
}

.rules .TechnologyLevel,
.rules.TechnologyLevel {
    display: flex;
    flex-flow: wrap;
}
.rules .TileInfo {
    display: flex;
    align-items: center;
}
.rules .TileInfo .image {
    flex: 1 1 40%;
}
.rules .TileInfo .image img {
    width: 100%;
}
.rules .TileInfo .description {
    flex: 1 1 60%;
    font-size: .9em;
    margin-left: .5em;
    text-align: left;
}

.rules .TileInfoContainer h3 {
    width: 100%
}

.rules #BridgeTilesLevelGold p {
    width: 100%;
}
.rules #Seals .TileInfo .image {
    flex: 1 1 30%;
}
.rules #Seals .TileInfo .description {
    flex: 1 1 70%;
}

.rules #ProductionTiles img {
    width: auto;
}

#panelRules .rulesLinks,
#panelRules #showSummary,
#panelRules #showFull,
#panelRules #showBoth {
    display: none;
}

#rulesPage .summaryInfo,
#rulesPage #showSummary,
#rulesPage #showFull,
#rulesPage #showBoth {
    display: none;
}

.rules #PerformAction .gallery {
    width: 16%;
}
#panelRules.rules #PerformAction .gallery {
    width: 33%;
}

.rules #ScorePlaza img.inline {
    width: 3em;
}

.rules #Technology img.inline,
.rules #University img.inline {
    width: 10%;
}


#panelRules.rules .hexTiles .hexTile {
    width: 19%;
}
#panelRules.rules .hexTiles.ActionTiles .hexTile {
    width: 15%;
}
#panelRules .TileInfo .description {
    font-size: 1em;
}
#rules .TechnologyLevel .TileInfo {
    width: 32%;
    margin: .2em .5%;
}
.rules .TileInfoContainer {
    display: flex;
    flex-wrap: wrap;
}
#rules .TileInfoContainer .TileInfo {
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    width: 32%;
    margin: .2em .5%;
}

.rules img.inlinePic.big {
    height: 2em;
}

.rules img.inlinePic.extraBig {
    height: 4em;
    vertical-align: middle;
}


.modal.rules { max-width: 98%; }
.modal.rules h1 { width: 100%; }
.modal.rules .TechnologyLevel { max-width: 800px; }
.modal.rules .TechnologyLevel .TileInfo { width: 48%; margin: .2em .5%; }
    /*.modal.rules .TileInfo > div { max-width: 190px; }*/

.modal.rules #Seals .TileInfoContainer .TileInfo { width: 100%; }