/* 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 */
   
/* font for main headers */
@font-face {
  font-family: 'MorrisRoman';
  src: local('MorrisRoman'), 
       url('/game-plugins/cartographers/1.2.8/fonts/MorrisRoman-Black.ttf') format('truetype'); 
}

/* font for atmosphere texts */
@font-face {
  font-family: 'Bouwsma';
  src: local('Bouwsma'), 
       url('/game-plugins/cartographers/1.2.8/fonts/Bouwsma_Script_Regular.ttf') format('truetype'); 
}

.rules { padding: 0.5em; text-shadow: none; }

#rules .cover { width: 60%; margin-left: 20%; }
#rulesPage .cover { width: 40%; margin-left: 25%; }
#rules .cover.double {flex: 1 2 45%; margin-left: 0em; }
.rules .heroes_cover { width: 60%; margin-left: 1%; }

#panelRules .gameTitle { font-size: 1.5em;}

.rules h1 {
  text-align: left;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: #002D3D; 
  font-size: 2.5em;
  font-weight: bold;
  font-family: 'MorrisRoman', serif;
}
#panelRules h1 {
  font-size: 1.8em;
}

.rules h2 {
  color: #002D3D;
  font-size: 1.5em;
  font-family: 'Calibri', sans-serif;
  text-transform: uppercase;
}
#panelRules h2 {
  margin-bottom: 0.5em;
  font-size: 1.2em;
 }

.rules h3 {
  font-size: 1.3em;
  color: black;
  font-family: 'Calibri', sans-serif;
  text-transform: uppercase;
 }
 #panelRules h3 {
  font-size: 1.1em;
 }

.rules ul {  list-style-type: disc; }

.rules .descriptiontext {
  font-family: 'Bouwsma', sans-serif;
  color: #937C4E;
  font-size: 1.2em;
}

/* 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;
}

/* links */
.rules a:link, a:visited, a:active {color: #002D3D;}
.rules a:hover {color: #005B7A;}

.rules .content ul {
    margin: 1em 0em 1em 1em;
    list-style-type: none;
    list-style-image: none;
}  

/* 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;}


/* 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; }


/* expansion boxes and icons */
.rules .flex {  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em; clear: both;}
.rules .expansionbox {
  border: 1px dotted brown;
  border-radius: 0.5em;
  padding: 0.5em 0.5em 0.5em 0.5em;
  background-size: cover;
  margin: 0em;
  margin-top: 1.2em;
  flex: 1 2 45%;
}  
.rules .expansionbox.cartographer {  background-color: #FFB993;}
.rules .expansionbox.cartographer h4 { color: #321A23; font-family: 'MorrisRoman', sans-serif; font-size:1.5em;} 

.rules .expansionbox.heroes {  background-color: #C6B7B4;}
.rules .expansionbox.heroes h4 { color: #4E1B19; font-family: 'MorrisRoman', sans-serif; font-size:1.5em;}

.rules .expansion_icon { height: 1.2em; margin-left: 0.2em; margin-right: 0.2em; margin-bottom:-0.2em;}
.rules .expansion_indicator {float: left; margin: -1.5em -0em 0.1em -0.5em; line-height:1em; }
.rules .heroes .expansion_indicator { float: right; margin: -1.5em -0.5em 0.1em 0.5em; }
.rules .expansion_indicator img { height:2.5em; }



/* other stuff */
.rules .setup_1 {float: right; margin-left: 1em; width: 60%; margin-top: 0.5em; clear: right;}
.rules .setup_2 {float: right; margin-left: 1em; width: 30%; margin-right: 5%; clear: right;}
.rules .time_unit {float: right; margin-left: 1em; width: 4em;}
.rules .ruins {float: right; margin-left: 1em; width: 40%; }
.rules .draw_phase_1 {margin: 1em; width: 40%}
.rules .draw_phase_2 {margin: 1em; width: 40%}
.rules .draw_phase_3 {float: right; margin-left: 1em; width: 41%; margin-right: -2em;}
.rules .draw_phase_4 {float: right; margin-left: 1em; width: 30%; margin-right: 2.5em; margin-top: 0.5em;}
.rules .draw_phase_5 { margin: 1em;  width: 90%}
.rules .draw_phase_6 {float: right; margin-left: 1em; width: 30%; margin-right: 2.5em;}
.rules .check_1 {float: right; margin-left: 1em; width: 20%; margin-top: -2em;}
.rules .check_2 {float: right; margin-left: 1em; width: 22%}
.rules .score_1 {float: right; margin-left: 1em; width: 40%}

.rules .score_hint {background: #B51B26; border-radius: 50%; border: 1px solid white; color: white; padding: 2px; padding-left: 0.5em; padding-right: 0.5em; display: inline; font-weight: bold;}

.rules table.solo_titles {width: 40%; float: right; margin: 1em; }
.rules tr:nth-child(odd) {background-color: #CCB992;}
.rules table.solo_titles.wide {width: 95%; float: none; margin: 0.5em; }


/* appendix boxes */
.rules .flex {  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em; clear: left;}

.rules .terrain {flex: 1 1 13%; text-align: center; font-family: 'Bouwsma', sans-serif; font-size: 1.5em;}
.rules .terrain img {width: 100%;}
#panelRules .terrain {flex: 1 0 20%; }


.rules .specialterrain { float: left; width: 5em; clear: left; margin: 0.5em;}
.rules .flex>.specialterrain {flex: 1 1 10%; }
.rules .flex>.specialterraintext {flex: 1 5 80%; }

.rules .scoringcard {flex: 1 1 48%;}
.rules .scoringcard img {float: left; margin-right: 1em; width: 10em; border-radius: 0.3em;}
.rules .flair {font-family: 'Bouwsma', sans-serif; font-size: 1.2em; color: #7E9BA9;}
#panelRules .scoringcard {flex: 1 1 95%;}
#panelRules .scoringcard img {width: 45%; margin-right: 0.5em; float: left;}
#panelRules .flair { display: none; }

.rules .ambushcard {flex: 1 1 48%;}
.rules .ambushcard img {float: left; margin-right: 1em; width: 10em; border-radius: 0.3em;}
#panelRules .ambushcard {flex: 1 1 95%;}
#panelRules .ambushcard img {width: 45%; margin-right: 0.5em; float: left;}

.rules .ambush_icon {width: 1.5em; font-size: 1.5em; background-color: #64207C; color: white; border: 3px solid #957E96; border-radius: 2px; text-align: center; float: left; margin-right: 0.4em;}