/* 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
   #popup.rules: popup with rules extract only */   
   
.rules { padding: 0.5em; text-shadow: none; }

#rules .cover { width: 60%; margin-left: 20%; }
#rulesPage .cover { width: 40%; margin-left: 25%; }
#panelRules .gameTitle { font-size: 1.5em;}

.rules h1 {
  text-align: center;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: #CA311B; 
  text-transform: uppercase;
  padding: 4px;
  font-size: 2.5em;
  font-weight: bold;
}
#panelRules h1 {
  padding: 2px;
  font-size: 1.4em;
}

.rules h2 {
  color: #CA311B;
  font-size: 2.0em;
}
#panelRules h2 {
  margin-bottom: 0.5em;
  font-size: 1.3em;
 }

.rules h3 {
  font-size: 1.2em;
 }
 #panelRules h3 {
  font-size: 1.1em;
 }

.rules ul {  list-style-type: disc; }
.rules ul>li::marker  {
	color:#CA311B; 
	font-size:1.5em;
}

.rules ol {margin-left: 1.5em;}
.rules ol>li::marker  {
	color:#CA311B; 
	font-size:1.5em;
}


.rules .gamehints {
  padding: 1em;
}

/* two columns in main rules - one in sidebar */
.rules .twocol { column-count: 2; -moz-column-count: 2;   -webkit-column-count: 2;}
#panelRules .twocol {column-count: 1; -moz-column-count: 1;   -webkit-column-count: 1;}

/* sidebar or not sidebar */ 
#panelRules .nosidebar { display:none; }
.ui-popup .rules .nopopup { display:none; }
.rules .sidebaronly { display:none; }
#panelRules .sidebaronly { display:inherit; }

.rules img.inlinepic {
    height: 1.5em;
}

/* example boxes */
.rules .example {
  background-color: #D1E1EB;
  border: 1px solid #9F1B1E;
  padding: 0.5em 0.5em 0.5em 0.5em;
  float: right;
  margin-left: 1em;
  width: 50%;
  font-style: italic;
}
#panelRules .example { display: none; }
.rules .example.playCards {width: 35%; margin-top: 3.5em; }
.rules .example.histfacts {width: 50%; margin: 1em; }

.rules .example .text { float:left; background-color: #CDD2D6; color: red; font-style: italic; margin:0.5em; box-shadow: 10px 0px 10px #CDD2D6, -10px 0px 10px #CDD2D6; padding: 0.5em;}
.rules .example.getlost1 {height:20em; width:20em; margin-right:1em; background-image: url(/game-plugins/amundsenvsscott/1.26.1/images/rules11.png); background-size: 100% 100%}
.rules .example.getlost1 .text { width:16.5em; margin-top: 3em;}

.rules .example.getlost2 {height:18em; width:22.5em; margin-right:1em; background-image: url(/game-plugins/amundsenvsscott/1.26.1/images/rules12.png); background-size: 100% 100%}
.rules .example.getlost2 .text { width:20em; }

.rules .example.getlost3 {height:18em; width:22.5em; margin-right:1em; background-image: url(/game-plugins/amundsenvsscott/1.26.1/images/rules13.png); background-size: 100% 100%}
.rules .example.getlost3 .text { width:12em; }


.rules .cardexplanation { width: 25%; float: right; margin-left: 1em; margin-right: 25% }
#panelRules .cardexplanation { width: 95%; float: none; margin-right: 0em; }

.rules .takeCards { height: 8em; margin-bottom: 0.5em;}
.rules .discardEffect {width: 4em; float: left; margin-right: 1em; }
.rules .activateEffect {width: 4em; float: left; margin-right: 1em; }
.rules .reachSouthpole {width: 25%; float: right; margin-left: 1em; margin-right: 10em; margin-top: -3em;}
#panelRules .reachSouthpole { margin-right: 2em; margin-top: -3em;}
.rules .jokers { width: 40%; margin-right: 1em; float: left;}
.rules .jokers img { width: 48%; }  
#panelRules .jokers   { width: 95%; }

/* appendix and popup cardinfo boxes */
.rules .flex {  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em; clear: both;}
.rules .cardinfobox {flex: 1 1 48%;}
.rules .cardinfobox.basecard {flex: 1 1 23%;}
.rules .cardinfobox img {float: left; margin-right: 1em; width: 12em;}
#panelRules .cardinfobox {flex: 1 1 95%;}
#panelRules .cardinfobox.basecard {flex: 1 1 45%;}
#panelRules .cardinfobox img {width: 45%; margin-right: 0.5em; float: left;}
#panelRules .cardinfobox.basecard img {width: 95%;}
#popup.rules .cardinfobox  {width: 50em; background-image: url(/game-plugins/amundsenvsscott/1.26.1/images/background.jpg);}

.rules .charactersummary .flex { align-items: center; }
#popup.rules .charactersummary  {width: 30em; background-image: url(/game-plugins/amundsenvsscott/1.26.1/images/background.jpg);}
.rules .charactercard { float: left; width:4em; margin-right: 1em; }
.rules .charactersummaryleft { flex: 1 1 23%;}
.rules .charactersummaryright { flex: 1 1 75%;}
#panelRules .charactersummaryleft { flex: 1 1 95%;}
#panelRules .charactersummaryright { flex: 1 1 95%;}
.rules .charactersummaryright img { width: 23%; margin-left: 1%; float: left;}

.rules .greenText {
    color: white;
    background-color: green;
}

.rules .blueText {
    color: white;
    background-color: blue;
}

.rules .yellowText {
    color: black;
    background-color: yellow;
}