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

   
/* Grandstander for headers*/
@font-face {
	font-family: 'Grandstander';
	src: local('Grandstander'), local('Instinkt header'),
			 url('/game-plugins/instinkt/1.2.1/fonts/Grandstander-VariableFont_wght.ttf') format('truetype');
}   

@font-face {
	font-family: 'Henny Penny';
	src: local('Henny Penny'), local('Instinkt cards'),
			 url('/game-plugins/instinkt/1.2.1/fonts/HennyPenny-Regular.ttf') format('truetype');
}   


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

.rules p {
    margin-bottom: 0.5em;
}

.rules b { color: #584D89; /*purple*/ }
.rules b.forbidden { color: red;  }
.rules b.allowed { color: green;  }

.rules h1 {
    border: none;
    font-family: 'Grandstander', serif;
    font-size: 2.5em;
    text-align: left;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}
#panelRules h1 {
    font-size: 1.5em;
}
.rules .h1_mod {
    background-color: black; 
    color: white;
    /* cutting off the corner, but doesn't work with box-shadow
    clip-path: polygon(0 0, 100% 0, 100% 60%, 95% 100%, 0 100% ); 
     -webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 95% 100%, 0 100%);
    */
    padding: 0.4em 1em 0.2em 0.5em;
    border-radius: 0 0 0.8em 0;
    box-shadow: 4px 4px 5px #584D89;
}

.rules .goodtoknow {
    background-color: #584D89;
    color: white;
    padding: 0.5em;
    clear:both;
}
.rules .goodtoknow .h1_mod {
  color: black;
  background-color: white;
  box-shadow: 4px 4px 5px black;
}
.rules .goodtoknow b {
  color: white;
}
.rules .goodtoknow .lightning {
  font-size: 2em; font-weight: bold;
}


.rules h2 {
    font-family: 'Grandstander', serif;
    margin: 0.5em 2.5em 0.6em 0.2em;
    padding: 0.3em 0 0.1em 0.5em;
    background-color: none;
    color: #584D89; /*purple*/
    border: none;
    font-size: 1.75em;
    font-weight: normal;
    text-transform: uppercase;
}
#panelRules h2 { font-size: 1.4em; }

.rules h3 {
    font-family: 'Grandstander',serif;
    color: #584D89; /*purple*/
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    background-color: none;
    text-transform: uppercase;
    text-align: center;
    padding: 0.3em 0 0.3em 1em;
}


/* flex lists basic */
.rules .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em;
}
.rules .flexbox { flex: 1 2 48%;}
#panelRules .flexbox {    flex: 1 1 95%;}

/* special flexboxes */
.rules .flexbox.cards { flex: 1 2 30%; text-align: center;}
.rules .flexbox.cards img { height: 6em; border-radius: 0.3em; }

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

/* cover picture only in main rules */
#rules .cover {
    width: 60%;
    margin-left: 20%;
}
#rulesPage .cover {
    width: 40%;
    margin-left: 30%;
}
#panelRules .cover {
    display: none;
}

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

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

/* customized list - black circles with numbers*/
.rules ol.custlist { list-style: none; counter-reset: li; }
#panelRules ol.custlist {margin-left: 0.5em; padding-left: 0;}
.rules .custlist li::before {
	content: counter(li);
	font-family: 'Grandstander', sans-serif; 
	font-weight: normal; text-align: center; font-size: 1.5em;
	display: inline-block; 
	background-color: black; color: white;
	border-radius: 50%;
  width: 1.3em; height: 1.3em; padding: 3px 2px 1px 2px;
  margin-right: 0.5em; 
}
.rules ol.custlist li { counter-increment: li; margin-bottom: 0.5em;}

.rules ol.custlist.purple>li::before {
	background-color: #584D89;
}

/* link colors */
.rules a:link { color: #584D89; font-weight: bold;}
.rules a:visited { color: #584D89;  font-weight: bold;}
.rules a:hover { color: #584D89; font-weight: bold;}
.rules a:active { color: #584D89; font-weight: bold;}


/* Examples */
.rules .example {
    font-style: italic; 
    color: #584D89;
    padding: 2em 0 2em 0;
    overflow: auto;
    margin: 0.5em;
}
#panelRules .example {
    display: none;
}
.rules .example .imgbox { width: 100%; margin: 0; padding: 0; overflow: auto;}
.rules .example .ex { width: 49.5%; margin: 0; padding: 0;  float: left;}
.rules .example p {  margin-left: 1em; margin-right: 1em;}


/* racoon */
.rules .example.raccoonexample { width: 70%; margin-left: 0%; }
.rules .example.raccoonexample img { width: 40.0%; float: right; margin-left: 1em; margin-top: -2em; }



.rules .advice {
  padding-left: 2em;
  font-style: italic;
  color: #584D89;
}
#panelRules .advice {padding-left: 1em;}

#rules .picturebox { margin: 0.5em; width: 60%; float: right;  
  background-image: url(/game-plugins/instinkt/1.2.1/images/rules/setupillustration.jpg);
  background-position: center;
  background-size: cover; 
  font-size:0.75em;
  color: #584D89;
}
#panelRules .picturebox { display: none; }
  
/* setup picture with text placements */
#rules .picturebox.setupillustration {
  height:35em; 
  width:42em;
  background-image: url(/game-plugins/instinkt/1.2.1/images/rules/setupillustration.jpg); 
  margin-top: -6em;
}
#rules .picturebox.setupillustration .setuptext1 {position: relative; height:2em; width:8em; left:0.5em; top:5.7em;}
#rules .picturebox.setupillustration .setuptext2 {position: relative; height:2em; width:11em; left:18em; top:13.8em;}
#rules .picturebox.setupillustration .setuptext3 {position: relative; height:2em; width:8em; left:0.6em; top:15.7em;}
#rules .picturebox.setupillustration .setuptext4 {position: relative; height:2em; width:8em; left:31.0em; top:15.0em;}
#rules .picturebox.setupillustration .setuptext5 {position: relative; height:3em; width:5em; left:35.0em; top:21.7em;}
    
             
/* placement rules with text placements */
#rules .picturebox.placementrules {
  height:35em; 
  width:43em; 
  background-image: url(/game-plugins/instinkt/1.2.1/images/rules/placementrules.jpg);
  background-size: cover;
  margin-top: -8em;
  text-align: center;
}
#rules .picturebox.placementrules .placementrule1 {position: relative; height:2.5em; width:16em; left:1.6em; top:1.8em;}
#rules .picturebox.placementrules .placementrule2 {position: relative; height:2.5em; width:17em; left:23.0em; top:-1.2em; }
#rules .picturebox.placementrules .placementrule3 {position: relative; height:5.5em; width:10em; left:0.9em; top:17.1em;}
#rules .picturebox.placementrules .placementrule4 {position: relative; height:4em; width:11.5em; left:13.6em; top:18.7em;}
#rules .picturebox.placementrules .placementrule5 {position: relative; height:4em; width:12.5em; left:29.6em; top:14.7em;}

/* some pics */   
.rules .raccoonplacement {float: right; width: 6em; margin-left: 1em; margin-top: -0em; margin-right: 2em;}
.rules .checkmark {color: green; font-weight: bold; font-size:1.3em;}
.rules .cross {color: red; font-weight: bold; font-size:1.3em;}
.rules .goodtoknowpic {float: right; width: 10em; margin-left: 1em; margin-top: -0em;}
#panelRules .goodtoknowpic { margin-top: 1em;}
.rules .stagplacement {float: right; width: 12em; margin-left: 1em; margin-top: -0em; margin-right: 2em;}

/* stag */
.rules .example.stagexample { width: 47%; margin-left: 0%; float: left;}
#rules .picturebox.stagexample {
  height:20em; 
  width:30em; 
  background-image: url(/game-plugins/instinkt/1.2.1/images/rules/stagexample1.jpg);
  background-size: 100% 100%;
  text-align: justify;
  color: #584D89;
  margin-left: -2em;
}
.rules .picturebox.stagexample .stagexampletext1 { text-align: left; position: relative; height:1.2em; width:5.5em; left:4.8em; top:0.8em; font-size: 1.8em; font-style: normal;}
.rules .picturebox.stagexample .stagexampletext2 { text-align: right; position: relative; height:1.2em; width:5.5em; left:10.7em; top:-0.5em; font-size: 1.8em; font-style: normal;}
.rules .picturebox.stagexample.ex2 {background-image: url(/game-plugins/instinkt/1.2.1/images/rules/stagexample2.jpg) !important;}
.rules .picturebox.stagexample.ex2 .stagexampletext1 { left:4.8em; top:0.8em;}
.rules .picturebox.stagexample.ex2 .stagexampletext2 { left:10.7em; top:-0.5em;}
.rules .picturebox.stagexample.ex3 {background-image: url(/game-plugins/instinkt/1.2.1/images/rules/stagexample3.jpg)!important; margin-left: 0.5em !important;}
.rules .picturebox.stagexample.ex3 .stagexampletext1 { left:2.1em; top:0.5em;}
.rules .picturebox.stagexample.ex3 .stagexampletext2 { left:10.7em; top:-0.8em;}
.rules .picturebox.stagexample.ex4 {background-image: url(/game-plugins/instinkt/1.2.1/images/rules/stagexample4.jpg)!important;}
.rules .picturebox.stagexample.ex4 .stagexampletext1 { left:2.1em; top:0.5em;}
.rules .picturebox.stagexample.ex4 .stagexampletext2 { left:10.7em; top:-0.8em;}


/* boardlayout */
.rules .example.boardlayout { padding-top:7em; margin-top: -2em;}
.rules .boardlayout img { width: 70%; margin-left: -30%; float: right; margin-right: 20%; margin-top: -7em;}

/* bordareas */
.rules .boardareas {
  margin-left:29%;
  margin-top: 7.5em;
}
.rules .boardareas.en {
  margin-left:26%;
  margin-top: 6.2em;
}
.rules .boardareas>.txt {
  text-transform: uppercase;
  font-size: 1.5em;
  line-height: 2em;
  font-style: normal;
}
.rules .boardmid {
  color: #7A71A3; 
}
.rules .boardborder  {
  color: #939598;
}
.rules .boardcorner  {
  color: #00AEEF;
}

/* inline pseudo counter */
.rules .refnum {
   border-radius: 50%; background-color: #584D89; color: #F6F8F7 ; font-family: 'Grandstander', serif; 
   padding: 0 0.2em 0 0.2em; font-size: 1.5em; width: 0.7em; display: inline-block; text-align: center;
}
.rules .refnum.black {
   background-color: black; 
   padding: 0.1em 0.2em 0 0.2em;
   width: 0.7em;
   font-size: 1em;
}
#panelRules .refnum { width: 1em;}

/* card values */
.rules .cardvalue { font-family: 'Henny Penny', serif; font-weight: normal; font-size: 1.2em;} 

/* symbol overview */
.rules .flex.symbols {align-items:center;}
.rules .symbols>.flexbox {
    flex: 1 2 25%;
    padding: 0.5em; 
}
.rules .symbols>.flexbox img { height: 2em; float: left; margin-right: 0.5em; margin-top: -0.2em; }
#panelRules .symbols>.flexbox {  flex: 1 1 90%; }

/* animal card appendix */
.rules .flex.animalcards {}
.rules .flexbox.animalcard {
    flex: 1 1 45%;
    background-color: #D3CCFF;
    padding: 0.8em;
    min-height: 9.5em;
}
.rules .flexbox.animalcard .pic1 { width: 7em; float: left; margin-right: 0.5em; border-radius: 0.5em;}
.rules .flexbox.animalcard .pic2 { width: 7em; float: left; margin-left: -6.2em; margin-top: 1em; margin-right: 1em; margin-bottom: 0.5em;border-radius: 0.5em; }
.rules .flexbox.animalcard .cardname { font-weight: bold; color: #584D89; font-size:1.5em; }
.rules .flexbox.animalcard .carddesc { }
#panelRules .flexbox.animalcard { flex: 1 1 95%; }