/* 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 */
   
/* Romance Fatal for main headers */
.rules { padding: 0.5em; text-shadow: none; }
.rules p.center {text-align: center}

.rules .cover {}

.rules h1 {
  background-color: #905501;
  border: none;
  color: white;
  padding: 0px;
  font-size: 2.5em;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-family: 'Romance Fatal';
  text-transform: uppercase;
}
#panelRules h1 {font-size: 1.75em; }

.rules h2 {
  color: #905501;
  background-color: white;
  font-size: 2em;
  text-align: center;
  font-family: 'Romance Fatal';
  border: none;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}
#panelRules h2 {font-size: 1.5em; }

.rules h3 {
  color: #905501;
  font-size: 1.5em;
  text-align: center;
  border: none;
  font-style: bold;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}
#panelRules h2 {font-size: 1.3em; }

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

/* links */
.rules a:link, .rules a:visited {color: #704101;}
.rules a:hover {color: #70410199 !important;}
.rules a:active {color: #704101;}

/* content */
.rules .content { font-family: 'Romance Fatal'; color: #0F2F3A; text-align: center; }
.rules .content p {font-size: 1.3em;}


.rules ul {
  margin: 1em 0em 1em 2em;
}

.rules .clarification {color: red; }
.rules .specialchar {font-family: serif;}

/* images */                                 
.rules .inlinepic {height:2em; width: auto; float: none;}
.rules .cardback { width: clamp(5em,20%,6em); float: left; margin-right: 1em;}

/* card boxes and card stacks */
.rules .cardbox {width:102px; float: left;  border-radius:5px; position: relative; z-index:10}
.rules .cardbox.single {margin-right: 0.5em;}            
.rules .stackedcards {margin-bottom: 1em; clear: right; width:104px; margin-top: 90px;}
.rules .stackedcards > .cardbox:nth-child(2) {margin-left:-102px;margin-top:-30px; z-index: 9;}
.rules .stackedcards > .cardbox:nth-child(3) {margin-left:-102px;margin-top:-60px; z-index: 8;}
.rules .stackedcards > .cardbox:nth-child(4) {margin-left:-102px;margin-top:-90px; z-index: 7;}
.rules .stackedcards > .cardbox:nth-child(5) {margin-left:-102px;margin-top:-120px; z-index: 6;}
.rules .stackedcards > .cardbox:nth-child(6) {margin-left:-102px;margin-top:-150px; z-index: 5;}
.rules .stackedcards > .cardbox:nth-child(7) {margin-left:-102px;margin-top:-180px; z-index: 4;}
.rules .stackedcards > .cardbox:nth-child(8) {margin-left:-102px;margin-top:-210px; z-index: 3;}
.rules .stackedcards > .cardbox:nth-child(9) {margin-left:-102px;margin-top:-240px; z-index: 2;}

/* examples box */
.rules .example {
    background-color: #90550144;
    border: 3px solid #704101;
    border-radius: 1em;
    padding: 0.5em ;
    margin: 0.5em;
    font-style: italic;
    color: #704101;
    overflow: auto;
}
/* don't display examples in the sidebar */
#panelRules .example {
    display: none;
}

.rules .example .cardbox {margin-right: 0.5em; }

/* flex boxes */
.rules .flex {  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5em; }
@media (max-width: 992px) {
    .rules .flex.mobile { flex-direction: column; /* columns below each other */ gap: 0em; /* remove gap in coolumn layout */ }
}
#panelRules .flex.mobile { flex-direction: column; /* columns below each other */ gap: 0em; /* remove gap in coolumn layout */ }

.rules .column { flex: 1; /* equal width columns */ }
.rules .column.wide { flex: 2; /* wider column */ }
.rules .flex.evenly {justify-content: space-evenly;}     
                    
.rules .flex.personcards {align-items: flex-end; text-align: center; }
.rules .flex.personcards .flexbox {flex:auto;}

.rules .flex.expeditions .flexbox {flex:auto;}
.rules .flex.expeditions .flexbox img {width:102px;}
.rules .flex.expeditions .flexbox.extra .cardbox {border: 3px solid red; margin-right: 1em;}
.rules .flex.expeditions .flexbox.extra p {max-width: 240px;}

.rules .flex.ships .cardbox {margin-right: 0.5em}
.rules .flex.newships .stackedcards {margin-right: 0.5em; clear: none; margin-top: 30px; width: auto;}
.rules .flex.additionalcards {text-align: center; justify-content: space-evenly;}


.rules .flex.phases {justify-content: space-evenly;}    
.rules .flex.phases .flexbox {border:2px solid #905501;border-radius:0.5em; padding: 0.5em;}

.rules .flex.taxes  .flexbox { flex: 1 1 48% ;  }

.rules .flex.multicards { justify-content: space-evenly; gap: 0.5em; }
.rules .flex.multicards  .flexbox { flex: 1 ; text-align: center; }
.rules .flex.multicards  .flexbox img { width:102px; }

.rules .flex.multicards  .stackedcards { margin-top: 30px;}

.rules .flex.contract  {justify-content: space-evenly;}
.rules .flex.contract .flexbox {flex: 0 1 9em; text-align: center;}
.rules .flex.contract .flexbox img {width:8em; margin: auto;}

.rules .flex.contractnew  {justify-content: space-between;}
.rules .flex.contractnew .flexbox {flex: 1 1 12em;  }
.rules .flex.contractnew .flexbox img {width:12em; margin: auto;}

.rules .shaded {background-color: #00000011; padding: 0.3em; border-radius: 0.3em; text-align: center;}
.rules .yellowship {background-color: yellow; padding: 0.3em; border-radius: 0.3em; text-align: center;}
.rules .greenship {background-color: #3FBD00; padding: 0.3em; border-radius: 0.3em; text-align: center;}
.rules .blueship {background-color: blue; padding: 0.3em; border-radius: 0.3em; text-align: center; color: white;}
.rules .redship {background-color: #EA4425; padding: 0.3em; border-radius: 0.3em; text-align: center;}
.rules .blackship {background-color: black; padding: 0.3em; border-radius: 0.3em; text-align: center; color: white;}