/* basic styles for displaying rules */
.clear { clear: both; }
@media ( min-width: 65em ) {
    #rulesContainer { font-size: 1.2em; }
}

html body .rules a { color: inherit; } /* override JQuery style */

.floateddiv:after {
  content: "";
  display: table;
  clear: both;
}


.rules a:hover { color: inherit; }
.rules a[href] { color: #3f70b3; }
.rules a[href]:hover { color: #38e; }
.rules ol, .rules ul { margin-top: .2em; margin-bottom: 1em; line-height: normal; }
.rules ol { padding-left: 2em; }
.rules ul { padding-left: 1em; }
.rules { text-align: left; }
.rules p { line-height: normal; margin: .3em 0; }
.rules h1 { color: black; font-size: 1.6em; font-weight: bold; text-align: center; }
.rules h3 { color: black; font-size: 1.4em; font-weight: bold; margin: 1em 0 0; }
.rules h4 { color: black; font-size: 1.2em; font-weight: bold; margin: 1em 0 0; }
.rules h1:nth-child(1), .rules h2:nth-child(1), .rules h3:nth-child(1), .rules h4:nth-child(1) { margin-top: 0; }

.rules .hints4Handling { padding: 1em 0; background-color: white; border: 1px solid black; }
.rules .hints4Handling div { background-color: #eaf2fd; margin: .5em; padding: .5em; }
.rules .hints4Handling h3 { margin-left: 0.5em; }
.rules .deviation { border: 2px solid red; padding: .5em; margin: .5em; background-color: white; }
.rules .hint { font-style: italic; }

.rules .summaryInfo { padding: 1em; margin: 1em 0; background-color: rgb(250, 250, 210); }
.rules .summary { clear: right; float: right; width: 35%; box-sizing: border-box; border: 1px solid black; margin-bottom: 1em; padding: .5em; background-color: rgb(250, 250, 210); }
.rules .hasSummary { margin-right: 35%; padding-right: .5em; }
.rules[showRules=full] .summaryInfo, .rules[showRules=summary] .summaryInfo { display: none; }
.rules[showRules=full] .summary { display: none; }
.rules[showRules=full] .hasSummary { margin-right: 0; padding-right: 0; }
.rules[showRules=summary] .summary { float: none; width: 100%; background-color: transparent; border: none; padding: 0; }
.rules[showRules=summary] .fullOnly { display: none; }
.rules[showRules=summary] .hasSummary { display: none; }
.rules[showRules=summary] #showSummary { display: none; }
.rules[showRules=full] #showFull { display: none; }
.rules[showRules=both] #showBoth { display: none; }
.rules .onShowRulesBoth { display: none; }
.rules[showRules=both] .onShowRulesBoth { display: inline; }
#sidebarPanel #showBoth { display: none; }

.rules .gameTitle { font-size: 2em; font-weight: bold; margin-top: .5em; }
#rulesContainer .gameTitle { margin-top: 0; }

.rules .cover { text-align: center; }
#rulesContainer .cover { display: none; }

.rules .chapter { clear: both; padding: 0; margin: 1.5em 0; }
.rules .chapter .title { color: #3f70b3; font-size: 1.6em; font-weight: bold; margin-bottom: .2em; border-bottom: 1px solid black; border-top: 1px solid black; }
#rulesContainer .chapter .title { color: white; text-shadow: none; background-color: #3f70b3; padding-left: .5em; }

.rules .description { font-style: italic; }

.rules .feature .id { font-weight: bold; }
.rules .feature .id::after { content: ':'; }

.rules img { width: auto; max-width: 100%; }
.rules img.inlineImage { height: 1.2em; width: auto; }
.rules img.floatImage { float: right; padding: 0 0 .5em 1em; }
#sidebarPanel #rules img.floatImage { max-width: 100px; }
#sidebarPanel #rules img.floatImage.stayLarge { max-width: 100%; }

#sidebarBottom #rules .overviewImage { float: right; width: 35%; box-sizing: border-box; }
#rules .overviewImage.sizeSummary { float: right; width: 35%; box-sizing: border-box; }
#sidebarPanel #rules .overviewImage.sizeSummary { width: 100%; }

.rules .itemisation .itemcnt { width: 2.5em; text-align: right; float: left; }
.rules .itemisation .item { margin-left: 3em; }

.rules .paragraph { position: relative; }
#rules .paragraph h1 { text-align: left; font-size: 1.2em; color: black; }
#rules .appendix { border: 1px solid black;  background-color: White; padding: 1em; margin: .3em 0 .7em; display: inline-block; }
#rules .appendix .paragraph { float: left; margin: .5%; padding: 1%; background-color: #f9eed6; }