/* 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 */
   
/* Tjempaka for headers*/
@font-face {
	font-family: 'Tjempaka';
	src: local('Tjempaka'), local('WC header'),
			 url('/Games/WhiteCastle/fonts/tjempaka-tjempaka-regular-400.ttf') format('truetype');
}   
/* Brush for other h2 headers */ 
@font-face {
	font-family: 'CaveatBrush';
	src: local('CaveatBrush'), local('WC header2'),
			 url('/Games/WhiteCastle/fonts/CaveatBrush-Regular.ttf') format('truetype');
}   
/* Charter BT for h3 headers */
@font-face {
	font-family: 'CharterBT';
	src: local('CharterBT'), local('WC header3'),
			 url('/Games/WhiteCastle/fonts/CHARTRK.TTF') format('truetype');
}   

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

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

.rules h1 {
    border: none;
    font-family: 'Tjempaka', serif;
    padding: 5px;
    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: #645C59;
    color: #FCEABC;
    font-weight: bold;
    padding: 0.4em 1em 0.2em 1em;
    border: none;
    box-shadow: 0px 1px 0 #312521, 0px 3px 0 #FBDA2C, 0 4px 0 #312521,
      0px -1px 0 #312521, 0px -3px 0 #FBDA2C, 0 -4px 0 #312521 ;
    margin-left: -0.3em;
}
.rules h1 img { margin-left:-0.5em; height:2.5em; margin-bottom: -0.8em;}


.rules h2 {
    font-family: 'Tjempaka', serif;
    margin: 0.5em 2.5em 0.6em 1.5em;
    padding: 0.3em 0 0.1em 1.5em;
    background-color: #89211B;
    color: #FCEABC;
    border: none;
    font-size: 1.75em;
}
#panelRules h2 { font-size: 1.2em; margin: 0.5em 0em 0.6em 0em; padding: 0.3em 0 0.1em 0.2em;}

/* using pictures as background */
.rules .h2left { width: 1.5em;margin-left:-3em; height:1.5em; margin-top: -0.3em; float: left; background-image: url(/Games/WhiteCastle/images/rules/h2_left.gif); background-size: 100% 100%;}
.rules .h2right { width: 2em; margin-right: -1em; height:1.5em; margin-top: -0.3em; float: right;background-image: url(/Games/WhiteCastle/images/rules/h2_right.gif); background-size: 100% 100%;}
#panelRules .h2left {display: none}
#panelRules .h2right {display: none}

.rules .subchapter.rose { background-color: #D8BEB1; padding: 1em 2em 1em 2em; color:#441511; border-radius: 2em; font-family: 'CharterBT';}
#panelRules .subchapter.rose { background-color: #D8BEB1; padding: 0.5em; color:#441511; border-radius: 0.5em; font-family: sans-serif; }
.rules .subchapter.rose>h2 {background-color: #C29487; color: #441511; font-family: 'CharterBT'; font-size: 1.6em; padding: 0.2em 0 0.1em 0.5em; }
.rules .subchapter.rose>h2>.h2left { background-image: url(/Games/WhiteCastle/images/rules/h2_left_rose.gif); margin-top: -0.2em; margin-left:-2em;}
.rules .subchapter.rose>h2>.h2right { background-image: url(/Games/WhiteCastle/images/rules/h2_right_rose.gif); margin-top: -0.2em;}

.rules .subchapter.grey { background-color: inherit; padding: 0.5em;}
.rules .subchapter.grey>h2 {background-color: #A49A93; color: #2E2B38; font-family: 'CharterBT',serif;}
.rules .subchapter.grey>h2>.h2left { background-image: url(/Games/WhiteCastle/images/rules/h2_left_grey.gif);}
.rules .subchapter.grey>h2>.h2right { background-image: url(/Games/WhiteCastle/images/rules/h2_right_grey.gif);}

.rules .subchapter.brown { background-color: inherit; padding: 0.5em;}
.rules .subchapter.brown>h2 {background-color: #AF9B83; color: #614327; }
.rules .subchapter.brown>h2>.h2left { background-image: url(/Games/WhiteCastle/images/rules/h2_left_brown.gif);}
.rules .subchapter.brown>h2>.h2right { background-image: url(/Games/WhiteCastle/images/rules/h2_right_brown.gif);}


/* areas */
.rules .area>h2 {
    font-family: 'CaveatBrush',serif;
    margin: 0.5em 2.5em 0.6em 1.5em;
    padding: 0.1em 0 0.1em 0.5em;
    background-color: #89211B;
    color: #FCEABC;
    border: none;
    font-size: 2em;
    font-weight: normal;
    text-transform: uppercase;
}


/* using pictures as background */
.rules .area>h2>.h2left { width: 1.5em;margin-left:-2em; height:1.5em; margin-top: -0.1em; float: left; background-image: url(/Games/WhiteCastle/images/rules/h2_left.gif); background-size: 100% 100%;}
.rules .area>h2>.h2right { width: 2em; margin-right: -1em; height:1.5em; margin-top: -0.1em; float: right;background-image: url(/Games/WhiteCastle/images/rules/h2_right.gif); background-size: 100% 100%;}


.rules .area.brown { background-color: #C7B196; padding: 0.5em;}
.rules .area.brown>h2 {background-color: #AF9B83; color: white; }
.rules .area.brown>h2>.h2left { background-image: url(/Games/WhiteCastle/images/rules/h2_left_brown.gif);}
.rules .area.brown>h2>.h2right { background-image: url(/Games/WhiteCastle/images/rules/h2_right_brown.gif);}


.rules .area.darkgrey { background-color: #677B8F; padding: 0.5em;}
.rules .area.darkgrey>h2 {background-color: #586577; color: white; font-family: 'CaveatBrush',serif; text-transform: uppercase;}
.rules .area.darkgrey>h2>.h2left { background-image: url(/Games/WhiteCastle/images/rules/h2_left_darkgrey.gif);}
.rules .area.darkgrey>h2>.h2right { background-image: url(/Games/WhiteCastle/images/rules/h2_right_darkgrey.gif);}

.rules .area.green { background-color: #539E88; padding: 0.5em;}
.rules .area.green>h2 {background-color: #377B70; color: white; font-family: 'CaveatBrush',serif; text-transform: uppercase;}
.rules .area.green>h2>.h2left { background-image: url(/Games/WhiteCastle/images/rules/h2_left_green.gif);}
.rules .area.green>h2>.h2right { background-image: url(/Games/WhiteCastle/images/rules/h2_right_green.gif);}

.rules .area.darkrose { background-color: #9C7574; padding: 0.5em;}
.rules .area.darkrose>h2 {background-color: #A16566; color: white; font-family: 'CaveatBrush',serif; text-transform: uppercase;}
.rules .area.darkrose>h2>.h2left { background-image: url(/Games/WhiteCastle/images/rules/h2_left_darkrose.gif);}
.rules .area.darkrose>h2>.h2right { background-image: url(/Games/WhiteCastle/images/rules/h2_right_darkrose.gif);}

.rules .charter { font-family: 'CharterBT' !important; font-weight: normal !important;}

.rules .subchapter.boxed { border: 4px double #2E2B38; padding: 0 0.5em 0.5em 0.5em; margin-left:0.5em; margin-right:0.5em;}
.rules .boxed h3 { background-color: #2E2B38; font-size: 1.2em; margin-left: -0.6em; margin-right: -0.6em; }
#panelRules .boxed h3 { margin-right: 0; margin-left: 0; font-size: 1em}
.rules h2.wide { margin-left:-0.2em; margin-right:-0.5em; font-size: 1.4em !important;}

.rules .h2contextright {float: right; font-family: 'Tjempaka'; color: black; margin-top: -0.8em; margin-right: -0.5em;}
.rules .h2contextright img {width: 2.5em; margin-bottom: -0.6em;}
.rules .h2contextright.well {margin-top: -0.3em; margin-right: -0.5em;}
.rules .h2contextright.well img {width: 4em; }
.rules .h2contextright.training {margin-top: -1em; margin-right: -0.5em;}
.rules .h2contextright.training img {width: 3.5em; }
.rules .h2contextright.gardener {margin-top: -1em; margin-right: -0.5em;}
.rules .h2contextright.gardener img {width: 3.5em; }
.rules .h2contextright.courtier {margin-top: -1em; margin-right: -0.5em;}
#panelRules .h2contextright.courtier {margin-top: -0.2em; margin-right: -0.5em;}
.rules .h2contextright.courtier img {width: 11em; }
#panelRules .h2contextright.courtier img {width: 6em; }

.rules .h2contextleft {float: left; margin-top: -0.8em; margin-left: -0.5em; margin-right: 0.3em;}
.rules .h2contextleft img {width: 2.5em; margin-right: 0.3em;}


.rules h3 {
    font-family: 'CharterBT',serif;
    color: #E5C29E;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    background-color: #89211B;
    padding: 0.3em 0 0.3em 1em;
}

.rules h4 {
    font-family: 'Tjempaka',serif;
    color: #2E1617;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.rules h5 {
    font-family: 'Tjempaka',serif;
    color: #2E1617;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.rules .subchapter.endgame h4 {
    font-family: 'CharterBT',serif;
    color: #89211B;
    background-color: #CEBC94;
    margin: 0.5em 2.5em 0.6em 1.5em;
    padding: 0.3em 0 0.3em 1em;
}
#panelRules .subchapter.endgame h4 {margin: 0.5em 0em 0.6em 0em;    padding: 0.3em 0.3em 0.3em 0.3em; font-size: 1em;}
.rules .endgame>h4>.h4left { width: 1.5em;margin-left:-2em; height:1.8em; margin-top: -0.3em; float: left; background-image: url(/Games/WhiteCastle/images/rules/h2_left_darksand.gif); background-size: 100% 100%;}
.rules .endgame>h4>.h4right { width: 2em; margin-right: -1em; height:1.8em; margin-top: -0.3em; float: right;background-image: url(/Games/WhiteCastle/images/rules/h2_right_darksand.gif); background-size: 100% 100%;}
#panelRules .h4left { display: none; }
#panelRules .h4right { display: none; }
.rules .h4contextright {float: right; font-family: 'Tjempaka'; color: black; margin-top: -0.9em; margin-right: 0.2em;}
.rules .h4contextright img {height: 3em; }
.rules .h4c {
   border-radius: 50%; background-color: #A49A94; color: white ; font-family: 'Tjempaka', serif; float: left; 
   padding: 0.2em 0.3em 0 0.3em; font-size: 2em; width: 0.7em; text-align: center;
   margin-top: -0.4em; margin-right: 0.5em; 
}
#panelRules .h4c {margin-left: 0.1em; margin-right: 0.2em; padding: 0.2em 0.8em 0 0.3em;}

/* 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; border: 1px solid black;}
.rules .flexbox.area { flex: 1 1 45%; }
.rules .flexbox.coinseals { flex: 1 1 45%; }
.rules .flexbox.ressources { flex: 2 2 25%; }
.rules .flexbox.light { background-color: #fff3; /* somewhat transparent white to retain original background color */ padding: 0.5em;}
.rules .flexbox.action { flex: 2 2 25%; }
.rules .flexbox.action img { width: 4em; margin-right: 1em; float: left;  }
#panelRules .flexbox.action img { width: 2.5em; margin-right: 1em; float: left;  }
.rules .flexbox.seals { flex: 1 1 30%; text-align: center;}
.rules .flexbox.seals img { width: 18em; }


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

/* unordered lists */
.rules ul {
    margin: 1em 0em 1em 2em;
    list-style-image: url('/Games/WhiteCastle/images/rules/list_icon_u.gif');
}
#panelRules ul {margin-left: 0.5em; }

.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;
}
.rules ul.browndots {
    margin: 1em 0em 1em 5em;
    list-style-image: url('/Games/WhiteCastle/images/rules/list_icon_u2.gif');
}

/* customized list - red squares with numbers*/
.rules ol.custlist { list-style: none; counter-reset: li; }
#panelRules ol.custlist {margin-left: 0.5em; padding-left: 0;}
.rules ol.custlist.c2 { counter-reset: li 1; }
.rules ol.custlist.c3 { counter-reset: li 2; }
.rules ol.custlist.c4 { counter-reset: li 3; }
.rules ol.custlist.c7 { counter-reset: li 6; }
.rules ol.custlist.c8 { counter-reset: li 7; }
.rules ol.custlist.c9 { counter-reset: li 8; }
.rules ol.custlist.c10 { counter-reset: li 9; }
.rules ol.custlist>li::before {
	content: counter(li);
	font-family: 'Tjempaka', serif; color: #C0C4C0; font-weight: bold; text-align: center; 
	/* background-color: #89211B;	box-shadow: 2px 0px 5px #9C8880, -2px -0px 5px #9C8880; 
	width: 1.2em; height: 1.2em; padding: 3px 4px 2px 3px; */
	margin-right: 0.5em;
	background-color: transparent;
	background-image: url(/Games/WhiteCastle/images/rules/list_icon_o.gif);
	background-size: 100% 100%;
	font-size: 1.3em;
  width: 2em; padding: 0.3em 0.4em 0.2em 0.3em;
}
.rules ol.custlist>li { counter-increment: li; margin-bottom: 0.5em;}

.rules ol.custlist.round>li::before {
	content: counter(li);
	font-family: 'CaveatBrush', serif; color: white; font-weight: normal; text-align: center; font-size: 1.5em;
	background-color: #A49A94;
	background-image: none;
	box-shadow: none;
	border-radius: 50%;
  width: 1.5em; height: 1.5em; padding: 1px 8px 1px 8px;
  margin-right: 0.5em; 
}
.rules ol.custlist.round.inverted>li::before {
	background-color: #E0ECE7;
	color: #2E2B38;
}
.rules ol.custlist.round.castleactions>li::before {
	background-color: #614327;
	color: white;
}
.rules .andor {color: #614327; font-family: 'Tjempaka', serif; font-size: 1.5em; clear: both; margin-left: 6.5em; margin-bottom: 0.5em;}
#panelRules .andor { margin-left: 4em; }
.rules ol.custlist.castleactions img {width: 8em; float:left; margin-right: 0.5em;}
#panelRules  ol.custlist.castleactions img {width: 5em; }

.rules ol.upperalpha {list-style: none; counter-reset: li;}
.rules ol.upperalpha>li { counter-increment: li; margin-bottom: 0.5em;}
.rules ol.upperalpha>li::before {
	content: counter(li, upper-alpha)".";
	font-family: 'Tjempaka', serif; color: #614327; font-weight: normal; font-size: 1.5em;
}


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

/* pseudo headers */
.rules div.underlined {font-family: 'Tjempaka', serif; font-weight: bold;  margin-top: 1em; margin-bottom: 0.5em; font-size: 1.2em;
 text-decoration: underline #645C59 solid 2px; }
.rules div.underlined.double { text-decoration-style: double; }
.rules .underlined.blue { text-decoration-color: #156781; color: #156781; }

/* clipped corners test
.rules .cornerclip {clip-path: polygon(5% 0%, 95% 0%,98% 10%, 100% 5%, 100% 100%, 0% 100%, 0% 0%) ;
 -webkit-clip-path: polygon(5% 0%, 99% 0%, 98% 10%, 100% 5%, 100% 100%, 0% 100% , 0% 0%) ;}
 */

/* Examples */
.rules .example {
    /* font-style: italic; the font itself is already italic */
    color: white;
    background-color: transparent;
    background-image: url(/Games/WhiteCastle/images/rules/example_background.gif);
    background-size: 100% 100%;
    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; border: 2px solid #441511; float: left;}
.rules .example p {  margin-left: 1em; margin-right: 1em;}

.rules .example.diceplace { width: 70%; margin-left: 15%; padding: 1.4em 0 1.4em 0;}
.rules .example.diceplace .ex { width: 49.3%; }

.rules .example.dicechoose { width: 70%; margin-left: 15%; padding: 1.2em 0 1.2em 0;}
.rules .example.dicechoose .ex { width: 49.3%; }

.rules .example.diceplace3 { width: 70%; margin-left: 15%; padding: 1.2em 0 1.1em 0;}
.rules .example.diceplace3 .ex { width: 49.3%; float: left; margin-right: 1em;}

.rules .example.exwall { width: 70%; margin-left: 15%; padding: 1.2em 0 1.1em 0;}
.rules .example.exwall .ex { width: 49.3%; float: left; margin-right: 1em;}

.rules .example.exwell { width: 70%; margin-left: 15%; padding: 1.2em 0 1.1em 0;}
.rules .example.exwell .ex { width: 49.3%; float: left; margin-right: 1em;}

.rules .example.exfamily { width: 70%; margin-left: 15%; padding: 1.7em 0 1.8em 0;}
.rules .example.exfamily .ex { width: 99.5%; margin-bottom: 0.5em;}

.rules .example.exwarrior { width: 99%; padding: 1.9em 0 1.9em 0;}
.rules .example.exwarrior .ex { width: 60%; float: left; margin-right: 0.5em;}

.rules .example.excourtier { width: 99%; padding: 1.9em 0 1.9em 0; font-size: 0.9 em;}
.rules .example.excourtier .ex { width: 50%; float: left; margin-right: 0.5em;}

.rules .example.excourtier2 { width: 70%; margin-left: 15%; padding: 1.2em 0 1.1em 0;}
.rules .example.excourtier2 .ex { width: 49.3%; float: left; margin-right: 1em;}

.rules .example.exlantern { width: 70%; margin-left: 15%; padding: 1.5em 0 1.8em 0;}
.rules .example.exlantern .ex { width: 99.5%; margin-bottom: 0.5em;}

.rules .example.exinfluence { width: 70%; margin-left: 15%; padding: 1em 0 0.5em 0;}
.rules .example.exinfluence .ex { width: 99.5%; margin-bottom: 0.5em;}

.rules .example.exactivategardener { width: 70%; margin-left: 15%; padding: 1em 0 0.5em 0;}
.rules .example.exactivategardener .ex { width: 49.3%; float: left; margin-right: 1em;}

.rules .example.exendgameseason { width: 70%; margin-left: 15%; padding: 1em 0 0.5em 0;}
.rules .example.exendgameseason .ex { width: 99.5%; margin-bottom: 0.5em;}

.rules .example.exgameend{ width: 70%; margin-left: 15%; padding: 1.7em 0 1.7em 0; background-size: 100% 50%; background-repeat: repeat;}
.rules .example.exgameend .ex { width: 99.5%; margin-bottom: 0.5em;}


/* Flair */
.rules .flair {
    background-color: #fff4; /* somewhat transparent white to retain original background color */
    color: #156781; font-weight: bold; font-style: italic;
    padding: 1em;
    overflow: auto;
    border-radius: 1em;
    text-align: center;
}
#panelRules .flair {
    display: none;
}

.rules .important {
    background-color: #fff4; /* somewhat transparent white to retain original background color */
}

/* inline pseudo counter */
.rules .ic {
   border-radius: 50%; background-color: #E6C7A4; color: #441511 ;font-family: 'CaveatBrush', serif; padding: 0 0.2em 0 0.2em; font-size: 1.5em; width: 0.7em; display: inline-block; text-align: center;
}



/* some pics */
.rules .setup1 {float: right; width: 25%; margin-left: 1em; margin-top: -0em;}
.rules .setup2 {float: right; width: 70%; margin-left: 1em; clear: right;}
.rules .subchapter .points {float: right; height: 4em; margin-left: 0.5em; margin-right: 1em;}
.rules .subchapter .point {float: right; height: 3em; margin-left: 0.5em; margin-right: 3em; margin-top: 0.6em;}
#panelRules .subchapter .point {float: left; clear: left; width: 3em; margin-left: 0em; margin-right: 0.5em; margin-top: 0em;}
.rules .subchapter .extrapoints {float: left; width: 8em; margin-left: 0.5em; margin-right: 1em; margin-top:-0.5em;}
.rules .dicestack {float: right; width: 6em; margin-left: 1em; margin-right: 1em; margin-top:-0.5em;}
.rules .get_coins {float: left; height: 4em; margin-left: 0.5em; margin-right: 1em; margin-top:-0.5em;}
.rules .pay_seals {float: left; height: 4em; margin-left: 0.5em; margin-right: 1em; margin-top:-0.5em;}
.rules .ressource {float: left; height: 4em; margin-left: 0.5em; margin-right: 1em; margin-top:-0.5em;}
#panelRules .ressource {float: left; height: 2em; margin-left: 0.5em; margin-right: 1em; margin-top:-0.5em;}
.rules .area_family2 {width: 70%; margin-left: 15%; }
.rules .courtiercards {float: left; width: 4em; margin-right: 1.5em; margin-top:0.5em; margin-bottom:0.5em}
#panelRules .courtiercards {display: none;}
.rules .lanternbonus { width: 3em; margin-left: 1em; margin-right: 1em; }
.rules .endpoint { width: 3em; float: left; margin-right: 1em; }
.rules .activategardener { width: 4em; float: left; margin-right: 1em; }
.rules .gameendfigures { height: 3em; margin-right: 1em; }
.rules .gameendfiguresdiv { float:right; }
#panelRules .actioncost {float: left; height: 2em; margin-left: 0.5em; margin-right: 1em; }

/* symbol overview */
.rules .flexbox.symboloverview {
    flex: 1 1 47%;
    background-color: #E5D9B7;
    padding: 0.5em;
    border-right: 2px solid brown;
    border-bottom: 2px solid brown;
}
#panelRules .flexbox.symboloverview {
    flex: 1 1 95%;
}
.rules .flexbox.symboloverview .imgbox {
    width: 6em;
    float: left;
    margin-right: 0.5em;
}

.rules .flexbox.symboloverview .imgbox img {
    height: 4em;
    float: left;
}
.rules .flexbox.symboloverview .x { height: 4em; float: right; margin-left: -1.3em; }
.rules .flexbox.symboloverview .xred { height: 4em; float: right; margin-left: -4.5em; }
#panelRules .flexbox.symboloverview .imgbox { width: 4em; }
#panelRules .flexbox.symboloverview .imgbox img { height: 3em; }
#panelRules .flexbox.symboloverview .x { height: 3em; float: right; margin-left: -1.3em; }
#panelRules .flexbox.symboloverview .xred { height: 3em; float: right; margin-left: -4.5em; }