﻿/* 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 */

   
/* HoneymeadBB for headers*/
@font-face {
	font-family: 'HoneymeadBB';
	src: local('HoneymeadBB'), local('Fasanerie header'),
			 url('/Games/Fasanerie/fonts/HoneyMead_BB_W00_Regular.ttf') format('truetype');
}   


.rules {
    padding: 0.5em;
    text-shadow: none;
    background: #F5EFE3;
}

.rules p {
    margin-bottom: 0.5em;
}

.rules h1 {
    border: none;
    font-family: 'HoneymeadBB', 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: #D3DF8B; 
    color: black;
    padding: 0.2em 1em 0.2em 0.5em;
    border-radius: 0 0.8em 0.8em 0;
}

.rules h2 {
    font-family: 'HoneymeadBB', serif;
    margin: 0.5em 2.5em 0.6em 0.2em;
    background-color: none;
    color: black;
    border: none;
    font-size: 1.5em;
    font-weight: normal;
}
#panelRules h2 { font-size: 1.5em; }

/* cover Text */
.rules .covertext {
    color: #FFFAD1;
    text-shadow:
     -3px -3px 2px #004F1E,  
      3px -3px 2px #004F1E,
      -3px 3px 2px #004F1E,
       3px 3px 2px #004F1E;
   font-size: 10em;     
   font-family: 'HoneymeadBB', serif;
   text-align: center;
}
#panelRules .covertext {
    font-size: 4em;
}
.rules .covertext.upper {text-transform: uppercase;}

.rules .inlinepic { height: 1.5em; margin-left: 0.2em; margin-right: 0.2em; }

/* 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 45%; 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;
}


/* 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;
}

/* link colors */
.rules a:link { color: #004F1E; font-weight: bold;}
.rules a:visited { color: #004F1E;  font-weight: bold;}
.rules a:hover { color: #004F1E; font-weight: bold;}
.rules a:active { color: #004F1E; font-weight: bold;}


/* Examples */
.rules .example {
    font-style: italic; 
    padding: 1em;
    overflow: auto;
    margin: 0.5em;
    border: 2px solid #A1B851;
    border-radius: 1em;
}
#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;}

.rules .example.example_firstgame {width: 50%; float: right; margin-left: 1em; }
.rules .example.example_setup {width: 95%;}
.rules .example.example_move {width: 95%;}

.rules .ronald {
  padding-left: 2em;
  font-style: italic;
}
#panelRules .ronald {padding-left: 1em;}


/* animal card appendix */
.rules .flex.animalcards {}
.rules .flexbox.animalcard {
    flex: 1 1 45%;
    background-color: #D4E0A8;
    padding: 0.8em;
    min-height: 9.5em;
}
.rules .flexbox.animalcard img { width: 7em; float: left; margin-right: 0.5em; border-radius: 0.5em;}
.rules .flexbox.animalcard .cardname { font-weight: bold; color: #004F1E; font-size:1.1em; }
.rules .flexbox.animalcard .carddesc { }
#panelRules .flexbox.animalcard { flex: 1 1 95%; }
