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

/* font for headers*/
@font-face {
	font-family: 'Constantine';
	src: local('Constantine'), local('Tholos header'),
			 url('/Games/Tholos/fonts/Constantine.ttf') format('truetype');
}   

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

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

.rules h1 {
    border: none;
    font-family: 'Constantine', serif;
    font-size: 1.75em; line-height: 2em;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}
#panelRules h1 {
    font-size: 1.5em;
}
.rules .h1_mod {
    background-color: white; 
    color: black;
    border: 1px solid grey;
    padding: 0.4em 1em 0.2em 0.5em;
    border-radius: 0.8em 0.8em 0.8em 0.8em;
    box-shadow: 4px 4px 5px grey;
}

.rules h2 {
    font-family: 'Constantine', serif;
    margin: 0.5em 2.5em 0.6em 0.2em;
    padding: 0.3em 0 0.1em 0.5em;
    background-color: none;
    color: black;
    border: none;
    font-size: 1.75em;
    font-weight: normal;
}
.rules h2 .subtext {font-weight: normal; font-size: 0.7em;}
#panelRules h2 { font-size: 1.4em; }


/* 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.bonusaction { flex: 1 2 48%; }
.rules .flexbox.bonusaction img { height: 6em; margin: 0.3em; float: left;}

.rules .flexbox.ornamenttile { flex: 1 2 48%; }
.rules .flexbox.ornamenttile img { height: 6em; margin: 0.3em; float: left;}

/* 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.custlist {
  margin: 1em 0em 1em 2em;
  list-style-image: url('/Games/Tholos/images/rules/list_icon_u.gif');
}
.rules ul.custlist.indent { margin-left: 48%; } /* doesn't work properly with example pic on left side otherwise */
#panelRules ul.custlist.indent { margin-left: 2em; } 

/* customized list - white numbers on black circle*/
.rules ol.custlist { list-style: none; counter-reset: li; }
.rules ol.custlist>li::before {
	content: counter(li);
	font-family: 'Constantine', serif; color: white; font-weight: bold; text-align: center; font-size: 1.5em;
	width: 2em;  height: 2em;
	background-color: transparent;
	background-image: url(/Games/Tholos/images/rules/list_icon_o.gif);
	background-size: 100% 100%;
	padding: 0.2em 0.5em 0.2em 0.5em;
	margin-right: 0.3em;
	font-style: normal;
}
.rules ol.custlist>li { counter-increment: li; }

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


/* Examples */
.rules .example {
    color: #777777;
    background-color: #fff4; /* somewhat transparent white to retain original background color */
    overflow: auto;
    border: 0.3px solid grey; 
    font-style: oblique;
    margin: 1em;
    padding: 0.5em;    
    border-radius: 1em;
}
#panelRules .example {
    display: none;
}
.rules .example p {  margin-left: 1em; margin-right: 1em;}

.rules .example.workshop { width: 40%; margin-left: 1em; padding: 0.5em; overflow: auto; float:right; margin-top: -1em;}
.rules .example.workshop  img { width: 95%; margin: 0.5em; border-radius: 1em;}

.rules .example.workshop2 { width: 95%; padding: 0.5em; overflow: auto; }
.rules .example.workshop2  img { width: 40%; margin: 0.5em; float: right; border-radius: 1em;}

.rules .example .bluetext { color: #4D9AAD;}
.rules .example .yellowtext {color: #C48507;}

.rules .example.bonusexample1 { width: 45%; float: right; margin-left: 1em; margin-bottom: 1em; border-radius: 1em; margin-top: -2.5em; border: none; padding: 0;}
.rules .example.bonusexample1  img { width: 100%; border-radius: 1em;}

.rules .example.bonusexample2 { width: 95%; padding: 0.5em; overflow: auto; border-radius: 1em;}
.rules .example.bonusexample2  img { width: 40%; margin: 0.5em; float: right; border-radius: 1em;}

.rules .example.scoringreminder { width: 40%; padding: 0.5em; overflow: auto; float: left; margin-right: 1em; border-radius: 1em;}
.rules .example.scoringreminder  img { width: 95%; margin: 0.5em;  border-radius: 1em;}

.rules .example.scoringexample { width: 95%; padding: 0.5em; overflow: auto; border-radius: 1em;}
.rules .example.scoringexample  img { width: 40%; margin: 0.5em; float: left; border-radius: 1em;}

.rules .example.advancedsetup { width: 45%; float: right; margin-left: 1em; margin-bottom: 1em; border-radius: 1em; margin-top: -0em; border: none; padding: 0;}
.rules .example.advancedsetup  img { width: 100%; border-radius: 1em;}

/* various pictures */
.rules .gamecomponents {width: 50%; float: left; margin-right: 1em; margin-bottom: 1em; border-radius: 1em;}
.rules .gamesetup {width: 60%; float: left; margin-right: 1em; margin-bottom: 1em; border-radius: 1em;}