/* 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 { background-color: #c1c6ca; font-size: 1.2em; text-shadow: 0 0; }
#rules figure { background-color: #e4e7e9; padding-left: 1px; padding-right: 1px; font-style: italic; }
#rules .img-title { width: 75%; }
#rules .imageleft-large img { width: 67%; float: left; margin-right: 1em; margin-bottom: 1em; }
#rules .imageright img { width: 50%; float: right; margin: 0 1em 1em 1em; }
#rules .imageright-large img { width: 67%; float: right; margin: 0 1em 1em 1em; }
#rules .imagetable { width: 100%; }
#rules .title { text-align: center; text-transform: uppercase; background-color: #373650; color: #c1c6ca; border-radius: 25px; font-size: 2em; }
#rules .subtitle { text-align: center; text-transform: uppercase; background-color: #8fa1ac; color: #373650; border-radius: 25px; font-size: 1.5em; margin-top: 15px; }
#rules .subtitle-2 { background-color: #ffffff; color: #373650; border-radius: 15px; font-size: 1.5em; margin-top: 15px; }
#rules .item { margin-top: 5px; }

#rules .components-column-cards { float: left; width: 12%; padding: 5px; }
#rules .components-column-pieces { float: left; width: 4%; padding: 5px; }
#rules .components-row::after { content: ""; clear: both; display: table; }
#rules .components-multiple-cards { width: 100%; }
#rules .components-card { width: 10%; }
#rules .components-board { width: 25%; }
#rules .components-piece { width: 5%; }
#rules .setup-column { float: left; width: 45%; }
#rules .setup-right { float: right; width: 15%; }

#rules .circle-letter { float: left; width: 25px; }
#rules .circle-letter-text { margin-left: 30px; }

#rules .img-with-caption-right { float: right; width: 12%; }

#rules .text-only-title { font-size: 1.3em; font-weight: bold; color: #373650; margin-top: 5px; }
#rules .text-only-title-large { font-size: 1.5em; font-weight: bold; color: #373650; text-transform: uppercase; margin-top: 10px; }
#rules .title-with-background { background-color: #373650; padding-left: 30px; margin-bottom: 10px; }
#rules .title-with-background-inner { background-color: #c1c6ca; padding-left: 2px; padding-right: 2px; }
#rules .grey-text { color: #575756; font-weight: bold; }
#rules .purple-text { color: #71196f; font-weight: bold; }
#rules .pink-text { color: #c95f8f; font-weight: bold; }
#rules .orange-text { color: #ce7e00; font-weight: bold; }
#rules .green-text { color: #007732; font-weight: bold; }
#rules .red-text { color: #e30613; font-weight: bold; }
#rules .blue-text { color: #004177; font-weight: bold; }
#rules .yellow-text { color: #ddca00; font-weight: bold; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
#rules .white-text { color: white; font-weight: bold; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
#rules .flavor-text { background-color: #f2ead6; font-style: italic; border-radius: 15px; padding-left: 10px; padding-right: 10px; margin-left: 2px; margin-right: 2px; }
#rules .icon-inline-with-text { width: 25px; margin-right: 1px; }
#rules .bonus-img { width: 100px; max-width: none; margin-bottom: 2px; }
#rules .objective-card-img { width: 100px; max-width: none; float: left; margin-right: 2px; }
#rules .admin-step-img { width: 100px; float: left; margin-right: 2px; }
#rules .admin-example-caption { background-color: #e4e7e9; font-style: italic; margin-bottom: 5px; padding-left: 1px; padding-right: 1px; }
#rules .end-reputation-img { float: right; width: 50%; margin-right: 10px; }
#rules .commander-table { border-spacing: 0 15px; }
#rules .commanders-title-img { float: left; width: 40%; max-width: none; margin-right: 5px; }
#rules .commanders-leader-img { float: left; width: 40%; max-width: none; margin-right: 5px; }