/* 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 and ingame display 
   #rulesContainer #rules: ingame rules display only 
   #sidebarPanel #rules: ingame rules display on right side only 
   #sidebarBottom #rules: ingame rules display at bottom only 
   .ui-popup .rules: popup with rules extract only */

/* font for main headers */
@font-face {
  font-family: 'FairyTaleJF';
  src: local('FairyTaleJF'), 
       url('/Games/Alpujarras/fonts/FairyTaleJF_Regular.ttf') format('truetype'); 
}

#rules .cover {
    width: 60%;
    margin-left: 20%;
}

#rules .postIntroBand { width: 100%; }

/* links */
#rules a:link, a:visited, a:active {color: #542E12;}


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

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

.rules h1 {
    border: none;
    font-family: 'FairyTaleJF', serif;
    padding: 5px;
    font-size: 2.5em;
    text-align: left;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: #39200C;
    letter-spacing: 2px;
}

#sidebarPanel #rules h1 {
    font-size: 1.5em;
}

.rules h2 {
    font-family: 'FairyTaleJF', serif;
    margin-top: 0.5em;
    margin-bottom: 0.6em;
    color: #39200C;
    letter-spacing: 2px;
}

.rules h3 {
    font-family: 'FairyTaleJF',serif;
    color: #39200C;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: #39200C;
    letter-spacing: 2px;   
}

.rules h4 {
    font-family: 'FairyTaleJF',serif;
    color: #39200C;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.rules .twocol {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
}

.rules div.compact {overflow: auto;}

.rules .componentsTable table, .componentsTable td, .componentsTable tr {
    border: 1px solid #39200C;
    border-collapse: collapse;
    text-align: center;
}

.rules .componentsTable {
    width: 100%;
}

.rules .components {
    float: left;
    width: 100%;
    margin-right: 0em;
    margin-bottom: 1em;
}


/* customized list - whiteish numbers, brown circle, whiteish border, grey shadow */
.rules ol.custlist {list-style: none; counter-reset: li}
.rules .custlist li::before {content: counter(li); color: #F5F2DC; font-size: 1.5em; font-family: 'FairyTaleJF',serif; font-weight: bold; display: inline-block; width: 1.5em;  height:1.5em; text-align:center;  background-color: #6A4832; border-radius: 50%; padding:0.0em; padding-bottom: 0.2em; margin-right: 0.5em; border: 2px solid #EFDBA7; box-shadow:  4px 0px 4px #9E9788;}
.rules .custlist li {counter-increment: li; margin-top: 0.5em;}
.rules ol.custlist.c6 {    counter-set: li 5; }
    
.rules ol.custlist.alpha li::before {content: counter(li,upper-alpha)}

/* inline pseudo counter */
.rules .ic {
   color: #F5F2DC; font-size: 1em; font-family: 'FairyTaleJF',serif; font-weight: bold; display: inline-block; width: 1.5em;  height:1.5em; text-align:center;  background-color: #6A4832; border-radius: 50%; padding:0.0em; padding-bottom: 0.2em; margin-right: 0.1em; border: 2px solid #EFDBA7; box-shadow:  4px 0px 4px #9E9788;
}

/* special box for important stuff */
.rules .importantBox {
    background-color: #DBBED6;
    padding: 0.5em;
    border-radius: 0.5em;
    margin: 0.5em;
    display: block;
    min-height: 4em;
}
.rules .importantBox.spacetypes {width: 50%; float: right; margin-left: 1em;}
.rules .importantIcon { height: 3em; float: left; margin: 1 1 0.5 0.5em;}


/*Special box for examples. Don't show them in side panel */
.rules .example {
    background-color: #BBD365;
    padding: 0.5em;
    border-radius: 0.5em;
    margin: 0.5em;
    float: right;
    width: 50%;
    margin-left: 1em;
    font-style: italic;
}
#sidebarPanel #rules .example { display: none; }

.rules .example.moveorder {}

.rules .example.addFarmer img {width: 48%; margin-bottom: 2em;}
.rules .example.addFarmer .addFarmer2 { float: right; margin-left: 1em; width: 48%;}

.rules .example.moveFarmer {width: 35%; margin-top: -4em; }
.rules .example.moveFarmer img {float: right; margin-left: 1em; width: 70%;}

.rules .example.irrigation {width: 45%; margin-top: 0em; clear: right;}
.rules .example.irrigation img {float: right; margin-left: 1em; width: 40%;}
.rules .example.irrigation .inlineIcon { height: 2em; width: auto;}

.rules .example.deliveryToken {width: 45%; margin-top: 0em; clear: right;}
.rules .example.deliveryToken img {float: right; margin-left: 1em; width: 60%;}
.rules .example.deliveryToken .cherries {float: right; margin-left: 1em; width: 6em;}

.rules .example.marketBonus {width: 45%; margin-top: 0em; clear: right;}
.rules .example.marketBonus img {float: right; margin-left: 1em; width: 60%;}

.rules .example.deliveryCard {width: 25%; margin-top: 0em; clear: right;}
.rules .example.deliveryCard img {float: right; margin-left: 1em; width: 6em;}

.rules .example.awardTokens {width: 45%; margin-top: 0em; clear: right;}
.rules .example.awardTokens img {float: right; margin-left: 1em; width: 30%;}

.rules .example.harvest {width: 35%; margin-top: 0em; clear: right;}
.rules .example.harvest img { margin-left: 1%; width: 95%;}

.rules .example.twoPlayer {width: 45%; margin-top: 0em; clear: right;}
.rules .example.twoPlayer img {float: right; margin-left: 1em; width: 30%;}


/* other pictures and assorted items */
.rules .inlineIcon { height: 2em; }
.rules .inlineIcon3 { height: 3em; }
.rules .headerIcon { height: 1.8em; }
.rules .neutralmule { height: 2em; }
.rules .strategic {    background-color: #D1EB88; }
.rules .setup {    float: right;    width: 75%;    margin: 1em; margin-top: -2em;}
.rules .addFarmerColor {    float: right;    width: 4em;    margin: 1em; margin-top: 0em;}
.rules .irrigateTokens {    float: right;    width: 20%;    margin-left: 1em; margin-top: -2.5em;}
.rules .completeAGoal {    float: right;    width: 20%;    margin-left: 5em; margin-right: 3em; margin-top: -5em;}
#sidebarPanel #rules  .completeAGoal { display: none;}
.rules .determiningAWinner {    float: left;    width: 6em;    margin-right: 2em;  }
#sidebarPanel #rules  .determiningAWinner { display: none;}

/* flexboxes */
.rules .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em;
}

.rules .flexbox {
    flex: 1 1 30%;
    background-color: #D0B36E;
    padding: 0.5em;
    text-align: center
}
.rules .standardActions .flexbox { flex: 1 1 13%; font-family: 'FairyTaleJF',serif; font-style: bold; color: #39200C; font-size: 1.25em;}
.rules .standardActions .flexbox img { height: 5em; }

.rules .goalsappendix .flexbox { flex: 1 1 24%; color: #39200C; font-size: 1.25em; text-align: center;}
.rules .goalsappendix .flexbox img { width: 90%; }