/* 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-face {
    font-family: 'Carlito Regular';
    src: local('Carlito Regular'), url('fonts/Carligo-Regular.ttf') format('truetype');
}
*/
@font-face {
    font-family: 'Exo Regular';
    src: local('Exo Regular'), url('/Games/Renature/fonts/Exo-Regular.otf') format('truetype');
}
@font-face {
    font-family: 'Fvriosa';
    src: local('Fvriosa'), url('/Games/Renature/fonts/Fvriosa.ttf') format('truetype');
}
.rules .sidebaronly {
    display: none;
}

#panelRules .sidebaronly {
    display: inherit;
}

/*Überschriften - Captions*/
.rules h1 {
    font-family: 'Exo Regular';
    text-indent: 0.5em; /*Einrücken des Textes*/
    text-align: left;
    background-image: url(/Games/Renature/images/rules/header_background.png); /*Hintergrundbild*/
    background-repeat: no-repeat; /*Kein Wallpaper*/
    /*background-position: center; /*Position des Hintergrundbildes*/
    border: none;
    color: white; /* Farbe*/
    font-size: 1.7em;
    line-height: 3.5em; /*Höhe des Hintergrundbildes*/
    padding: 10px 0px 10px 10px;
    text-shadow: none;
}


.rules h3 { /*Für Überschrift "Overview: Sequence of play*/
    font-family: 'Exo Regular';
    text-indent: 0.5em; /*Einrücken des Textes*/
    text-align: left;
    background-image: url(/Games/Renature/images/rules/overview_background.png); /*Hintergrundbild*/
    background-repeat: no-repeat; /*Kein Wallpaper*/
    /*background-position: center; /*Position des Hintergrundbildes*/
    border: none;
    color: white; /* Farbe*/
    font-size: 1.7em;
    line-height: 3.5em; /*Höhe des Hintergrundbildes*/
    padding: 10px 0px 10px 10px;
    text-shadow: none;
}

.rules h2 {
    font-weight: bold;
    text-align: left;
    color: black; /* Farbe*/
    font-size: 1.7em;
    text-shadow: none;
    vertical-align: bottom;
}

.rules h4 {
    font-weight: bold;
    text-align: center;
    color: black; /* Farbe*/
    font-size: 1.7em;
    text-shadow: none;
    vertical-align: bottom;
}

/*Texte - texts*/
.rules .Fvriosa {
    font-family: Fvriosa;
    font-size: 1.5em;
    text-shadow: none;
}

.rules p {
    font-size: 1.2em;
    color: black;
    text-shadow: none;
}

.rules .rulesPDF {
    text-shadow: none;
}

.rules .internal_anchor {
    text-shadow: none;
}


.rules ol {
    font-size: 1.2em;
    color: black;
    text-shadow: none;
}


.rules .red {
    font-size: 1.2em;
    color: red; /* Farbe*/
    text-shadow: none;
}

.rules .orange {
    color: darkorange; /* Farbe*/
    text-shadow: none;
}

.rules .grey {
    color: grey; /* Farbe*/
    text-shadow: none;
}

.rules .white {
    color: white; /* Farbe*/
    text-shadow: none;
}

.rules .top {
    vertical-align: top;
}

.rules .bottom {
    vertical-align: bottom;
}

.rules .middle {
    vertical-align: middle;
}

.rules .right {
    text-align: right;
}

/*floating texts*/
#rules .float_right {
    float: right;
    text-align: right;
    margin-right: 1em
}

#rules .float_left {
    float: left;
    text-align: left;
    margin-right: 1em
}

/*Boxen - boxes*/
.rules .border_green {
    border: none;
    padding: 0.6em;
    background-color: #a6af77;
    margin-left: 0.3em;
}

.rules .border_orange {
    padding: 0.6em;
    background-color: #d09e75;
    margin-left: 0.3em;
    margin-top: 0.3em;
    border-color: #404c23;
    border-top: 0.1em solid;
    border-bottom: 0.1em solid;
    border-left: 0.1em solid;
    border-right: 0.1em solid;
}


.rules .border_lila {
    padding: 0.6em;
    background-color: #9991a3;
    margin-left: 0.3em;
    margin-top: 0.3em;
    border-color: #404c23;
    border-top: 0.1em solid;
    border-bottom: 0.1em solid;
    border-left: 0.1em solid;
    border-right: 0.1em solid;
}

.rules .border_blue {
    padding: 0.6em;
    background-color: #b2c5d4;
    margin-left: 0.3em;
    margin-top: 0.3em;
    border-color: #404c23;
    border-top: 0.1em solid;
    border-bottom: 0.1em solid;
    border-left: 0.1em solid;
    border-right: 0.1em solid;
}

.rules .border_brown {
    padding: 0.6em;
    background-color: #a38a73;
    margin-left: 0.3em;
    margin-top: 0.3em;
    border-color: #404c23;
    border-top: 0.1em solid;
    border-bottom: 0.1em solid;
    border-left: 0.1em solid;
    border-right: 0.1em solid;
}

.rules .border_dark_green {
    padding: 0.6em;
    background-color: #999d46;
    margin-left: 0.3em;
    margin-top: 0.3em;
    border-color: #404c23;
    border-top: 0.1em solid;
    border-bottom: 0.1em solid;
    border-left: 0.1em solid;
    border-right: 0.1em solid;
}

.rules .border_light_orange {
    padding: 0.6em;
    background-color: #dcba9b;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.rules .border_light_orange2 {
    padding: 0.6em;
    background-color: #e4c7af;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.rules .border_light_lila {
    padding: 0.6em;
    background-color: #b2afbc;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.rules .border_light_blue {
    padding: 0.6em;
    background-color: #cbd8e1;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.rules .border_yellow {
    padding: 0.6em;
    background-color: #e3e3ac;
    margin-left: 0.3em;
    margin-top: 0.3em;
    border-color: #fac109;
    border-top: 0.2em solid #fac109;
    border-bottom: 0.2em solid #fac109;
    border-left: 0.2em solid #fac109;
    border-right: 0.2em solid #fac109;
}

.rules .border_blue_overview {
    padding: 0.6em;
    background-color: #c4e0ed;
    margin-left: 0.3em;
    margin-top: 0.3em;
    border-color: #404c23;
    border-top: 0.1em solid;
    border-bottom: 0.1em solid;
    border-left: 0.1em solid;
    border-right: 0.1em solid;
}

.rules .border_light_yellow {
    padding: 0.6em;
    background-color: #f0f2db;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.rules .border_light_green {
    padding: 0.6em;
    background-color: #b8b57b;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.rules .border_light_green2 {
    padding: 0.6em;
    background-color: #c9ccaf;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.rules .border_yellow_green {
    padding: 0.6em;
    background-color: #cec165;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    width: 100%;
}

.rules .border_yellow_valley {
    padding: 0.6em;
    background-color: #f1e09e;
    margin-left: 0.3em;
    margin-top: 0.3em;
    border-color: #404c23;
    border-top: 0.1em solid;
    border-bottom: 0.1em solid;
    border-left: 0.1em solid;
    border-right: 0.1em solid;
}


.rules .border_green_setup {
    padding: 0.6em;
    background-color: #ded7ba;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    width: 100%;
}

/*Bilder - images*/
.rules .img_10 {
    width: 10%;
}
.rules .img_15 {
    width: 15%;
}

.rules .img_20 {
    width: 20%;
}

.rules .img_30 {
    width: 30%;
}

.rules .img_29 {
    width: 29%;
}

.rules .img_40 {
    width: 40%;
}

.rules .img_35 {
    width: 35%;
}

.rules .img_50 {
    width: 50%;
}

.rules .img_60 {
    width: 60%;
}

.rules .img_80 {
    width: 80%;
}

.rules .img_100 {
    width: 100%;
}


.rules .img_klein {
    width: 0.5em;
}

.rules .img_middle {
    width: 1.5em;
}

.rules .img_middle2 {
    width: 1.7em;
}

.rules .img_centered {
    display: flex;
    justify-content: center; /*zentriert*/
    align-items: center;
}

/*Tabellen - tables*/
.rules .cell_picture_5 {
    width: 5%;
    vertical-align: central;
}
.rules .cell_picture_7 {
    width: 7%;
    vertical-align: central;
}

.rules .cell_picture_10 {
    width: 10%;
    vertical-align: central;
}

.rules .cell_picture_15 {
    width: 15%;
    vertical-align: central;
}

.rules .cell_picture_20 {
    width: 20%;
    vertical-align: central;
}

.rules .cell_picture_25 {
    width: 25%;
    vertical-align: top;
}

.rules .cell_picture_25_2 {
    width: 25%;
    vertical-align: top;
    padding-left: 5px;
    padding-right: 5px;
}

.rules .cell_picture_30 {
    width: 30%;
    vertical-align: top;
}

.rules .cell_picture_40 {
    width: 40%;
    vertical-align: top;
}

.rules .cell_picture_45 {
    width: 45%;
    vertical-align: top;
}

rules .cell_picture_50 {
    width: 50%;
    vertical-align: top;
}