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

/* fonts - standin for Century font which is not free */
/* sorts-mill-goudy-regular - latin-ext_latin */
@font-face {
  font-family: 'Sorts Mill Goudy';
  font-style: normal;
  font-weight: 400;
  src: url('/game-plugins/roam/1.2.2/fonts/SortsMillGoudy-Regular.ttf'); 
  src: local('Sorts Mill Goudy Regular'), local('SortsMillGoudy-Regular'),
       url('/game-plugins/roam/1.2.2/fonts/SortsMillGoudy-Regular.ttf') format('truetype'); 
}

/* sorts-mill-goudy-italic - latin-ext_latin */
@font-face {
  font-family: 'Sorts Mill Goudy';
  font-style: italic;
  font-weight: 400;
  src: url('/game-plugins/roam/1.2.2/fonts/SortsMillGoudy-Italic.ttf'); 
  src: local('Sorts Mill Goudy Italic'), local('SortsMillGoudy-Italic'),
       url('/game-plugins/roam/1.2.2/fonts/SortsMillGoudy-Italic.ttf') format('truetype'); 
}

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

.rules h1 {
  background-color: #F6F0EA;
  color: #702D39;
  padding: 0px;
  font-size: 2.5em;
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-family: 'Sorts Mill Goudy',serif;
  text-transform: uppercase;
  box-shadow: 20px 0px 20px #F6F0EA, -20px 0px 20px #F6F0EA;
}
#panelRules h1 {font-size: 1.75em; }

.rules .description { color: #702D39; }
.rules h2 {
  color: #702D39;
  font-size: 1.5em;
  text-align: left;
  font-family: 'Sorts Mill Goudy',serif;
  border: none;
  margin-bottom: 0em;
}
#panelRules h2 {font-size: 1.2em; }


.rules h3 {
  color: #702D39;
  font-size: 2.0em;
  text-align: left;
  font-family: 'Sorts Mill Goudy',serif;
  border: none;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}
#panelRules h3 {font-size: 1.3em; }

.rules h4 {
  color: #702D39;
  text-align: left;
  font-family: 'Sorts Mill Goudy',serif;
}

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

/* links */
#rules a:link, a:visited, a:active {color: #702D39;}



/* customized list - brown numbers, white circle, brown border*/
#rules ol.custlist {list-style: none; counter-reset: li}
#rules .custlist li::before {content: counter(li); color: #702D39; font-size: 1.5em; font-family: 'Sorts Mill Goudy',serif; font-weight: bold; display: inline-block; width: 1.5em;  height:1.5em; text-align:center;  background-color: #F6F0EA; border-radius: 50%; padding:0.1em; padding-bottom: 0.2em; margin-right: 0.5em; border: 2px solid #702D39; }
#rules .custlist li {counter-increment: li; margin-top: 0.5em;}

.rules ul {
  margin: 1em 0em 1em 2em;
  list-style-image: url('/game-plugins/roam/1.2.2/images/rules/list_icon_u.png');
}

.rules .clear { clear:both; }

/* images */
.rules .setupimg {float: right; margin-left: 1em; width: 50%; }

/* boxed remark */
.rules .boxed_remark {
    background-color: #F6F0EA;
    border-radius: 1em;
    border: 3px solid #702D39;
    padding: 0.5em 0.5em 0.5em 1.5em;
    margin: 0em 1em 1em 0.5em;
    font-style: italic;
    color: #702D39;
    margin-top: 0.5em;
}

/* examples box */
.rules .example {
    background-color: #F6F0EA;
    border-radius: 1em;
    border: 3px solid #702D39;
    padding: 0.5em 0.5em 0.5em 1.5em;
    float: right;
    margin: 0em 1em 1em 0.5em;
    max-width: 60%;
    line-height: 1em;
    font-style: italic;
    color: #702D39;
}
.rules .example p { line-height: 1em;  }
/* don't display examples in the sidebar */
#panelRules .example {
    display: none;
}
.rules .example .exampleimage {
    float: left;
    width: 60%;
    margin-right: 1em;
}

/* appendix and popup artifact boxes */
.rules .flex {  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em; clear: both;}
.rules .artifactbox {flex: 1 1 47%; background-color: #FAECD3; padding: 1%; border-radius: 0.3em;  box-shadow: 0 2px 2px 0 #D3C8B3, 0 2px 2px 0 #D3C8B3;}
.rules .artifactbox img {float: left; margin: 0.3em; margin-right: 1em; width: 8em; border-radius: 0.3em;  box-shadow: 0 2px 2px 0 black, 0 2px 2px 0 black;}
#panelRules .artifactbox {flex: 1 1 95%;}
#panelRules .artifactbox img {width: 6em; }
#popup.rules.artifactHelp {width: 60%;}
#popup.rules .artifactbox img {width: 6em; }