/* 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: modal-dialog with rules extract only */


.rules .clearBoth {
    clear: both;
}

.rules .chapter ol ul { margin: 0; }

#rules .careTile { width: 100px; }
.rules #goalTilesContainer { display: flex; flex-wrap: wrap }
.rules #goalTilesContainer .paragraph { flex: 0 0 24%; }
.rules #scoreTilesContainer { display: flex; flex-wrap: wrap }
.rules #scoreTilesContainer .paragraph { flex: 0 0 24%; }
.rules #ScoreTiles .paragraph img { width: 40%; margin-right: .5em; float: left; }
.rules #wantTilesContainer { display: flex; flex-wrap: wrap }
.rules #wantTilesContainer .paragraph { flex: 0 0 32%; }
.rules #wantTilesContainer .paragraph img { width: 40%; margin-right: .5em; float: left; }

#rulesPage #rules.rules #goalTilesContainer .paragraph { flex: 0 0 24%; }
#rulesPage #rules.rules #scoreTilesContainer .paragraph { flex: 0 0 24%; }
#rulesPage #rules.rules #wantTilesContainer .paragraph { flex: 0 0 32%; }

#rules.rules #goalTilesContainer .paragraph { flex: 0 0 22%; }
#rules.rules #scoreTilesContainer .paragraph { flex: 0 0 22%; }
#rules.rules #wantTilesContainer .paragraph { flex: 0 0 30%; }

#panelRules img.sidepanelFull { width: 100%; max-width: 100%; }
#panelRules.rules #wantTilesContainer .paragraph { flex: 0 0 100%; }
#panelRules.rules #scoreTilesContainer .paragraph { flex: 0 0 100%; }
#panelRules.rules #goalTilesContainer .paragraph { flex: 0 0 100%; }
#panelRules .wantTiles .paragraph img { width: 100px; margin-right: .5em; float: left; }
#panelRules #ScoreTiles .paragraph img { width: 80px; margin-right: .5em; float: left; }

.modal.rules { width: 90%; height: 80% }

.modal.rules.scoreTile img { width: 150px; float: left; margin-right: .5em;  }

.modal.rules.goal img { width: 200px; float: left; margin-right: .5em;  }

.modal.rules.wantTile img { width: 200px; float: left; margin-right: .5em; }

.rules .popupOnly { display: none; }
.modal.rules .popupOnly { display: block; }
.modal.rules li.popupOnly { display: list-item; }
.modal.rules .noPopup { display: none; }

.modal-dialog.rules .simplifiedScoring img { margin-right: 2em; }


.basicVersion #modal-dialog.rules .simplified { display: none; }
.simplifiedVersion #modal-dialog.rules .baseGame { display: none; }
.simplifiedVersion #modal-dialog.rules #scoringSimplified img { display: none; }