/* 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 { /*als Ersatz für Calibri*/
    font-family: 'NunitoSans Regular';
    src: local('Exo Regular'), url('fonts/NunitoSans-Regular.ttf') format('truetype');
}
/*Überschriften - Captions*/
.rules h1 {
    font-family: 'NunitoSans Regular';
    text-indent: 0.5em; /*Einrücken des Textes*/
    text-align: left;
    background-image: url(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: 2em;
    line-height: 3.5em; /*Höhe des Hintergrundbildes*/
    padding: 0px 0px 10px 10px;
    text-shadow: none;
}

.rules h2 {
    font-weight: bold;
    text-align: left;
    color: black; /* Farbe*/
    background-color: #f9b030;
    font-size: 1.6em;
    text-shadow: none;
    vertical-align: bottom;
    text-indent: 0.5em; /*Einrücken des Textes*/
}

.rules h3 { /*Für Überschrift "Overview: Sequence of play*/
    font-weight: bold;
    text-align: left;
    color: white; /* Farbe*/
    background-color: #23344e;
    font-size: 1.6em;
    text-shadow: none;
    vertical-align: bottom;
    text-indent: 0.5em; /*Einrücken des Textes*/
}

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

.rules:not(.in_game_rules_info_popup) h5 {
    font-weight: bold;
    text-align: left;
    color: black; /* Farbe*/
    background-color: #f9b030;
    font-size: 1.2em;
    text-shadow: none;
    vertical-align: bottom;
}
.rules h6
{ /*Für Überschrift "Overview: Sequence of play*/
    font-weight: bold;
    text-align: left;
    color: white; /* Farbe*/
    background-color: #23344e;
    border: 1px white solid;
    font-size: 1.6em;
    text-shadow: none;
    vertical-align: bottom;
    text-indent: 0.5em; /*Einrücken des Textes*/
    margin-bottom: 1em; /*Abstand zum nächsten Absatz*/
    margin-top: 2em;
}

#rules .has_background
{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

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

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

    .rules p.spielvorbereitung_luna
    {
        background-image: url(images/rules/luna_1.png);
        background-repeat: no-repeat;
    }
    .rules p.setup_luna
    {
        background-image: url(images/rules/Luna_1_en.png);
        background-repeat: no-repeat;
    }

.rules .yellow_text
{
    color: #f9b030;
}
.rules .bright_yellow_text
{
    color: yellow;
}
.rules .red_shadow_text
{
    text-shadow: 3px 1.5px 1px red;
}
.rules .cell_border {
    border: 1px solid black;
    padding: 3px 3px 3px 3px;
}
.rules .blue_background { /*Für Überschrift "Overview: Sequence of play*/
    color: white; /* Farbe*/
    background-color: #23344e;
}
.rules .padding5 {
    padding: 0px 5px 0px 5px; /*top right bottom left*/
}
.rules .padding10 {
    padding: 0px 10px 0px 10px; /*top right bottom left*/
}
.rules .padding20 {
    padding: 0px 0px 0px 20px; /*top right bottom left*/
}
.rules td {
    text-shadow: none;
}
.rules li {
    text-shadow: none;
}
.rules ul {
    list-style: disc;
}
.rules .white {
    color: white; /* Farbe*/
    text-shadow: none;
    font-size: 1.1em;
    text-shadow: 2px 2px black;

}
.rules .border_grey {
    padding: 0.6em;
    background-color: #a9afba;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.rules .border_blue_grey {
    padding: 0.6em;
    background-color: #7893a0;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.rules .border_white {
    padding: 0.6em;
    background-color: #e8e9eb;
}
.rules .border_brown {
    padding: 0.6em;
    border: solid grey 2px;
    background-color: #e1c9af;
    margin-left: 0.3em;
    margin-top: 0.3em;
}
.rules .border_green {
    border: solid grey 2px;
    padding: 0.6em;
    background-color: #cfe0c0;
    margin-left: 0.3em;
    padding: 0.6em;
    margin-top: 0.3em;
}
.rules .border_yellow {
    border: solid grey 2px;
    padding: 0.6em;
    background-color: #dcd9b5;
    margin-left: 0.3em;
    padding: 0.6em;
    margin-top: 0.3em;
}
.rules .border_red {
    border: solid grey 2px;
    padding: 0.6em;
    background-color: #d8a897;
    margin-left: 0.3em;
    padding: 0.6em;
    margin-top: 0.3em;
}
.rules .border_lila {
    border: solid grey 2px;
    padding: 0.6em;
    background-color: #c8bbd9;
    margin-left: 0.3em;
    padding: 0.6em;
    margin-top: 0.3em;
}
.rules .border_blue {
    border: solid grey 2px;
    padding: 0.6em;
    background-color: #a6afcc;
    margin-left: 0.3em;
    padding: 0.6em;
    margin-top: 0.3em;
}
.rules .border_light_yellow {
    padding: 0.6em;
    background-color: #f1ebdf;
    border: black solid 1px;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.rules .border_light_red {
    padding: 0.6em;
    background-color: #faefe9;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.rules .border_examples {
    padding: 0.6em;
    background-color: white;
    border: black solid 1px;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.rules .border_rosa {
    padding: 0.6em;
    background-color: #c6a6b5;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.rules .border_luna
{
    padding-left: 0.6em;
    background-color: #1d1f2b;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: white; /* Farbe*/
}
.rules .border_orange {
    padding: 0.6em;
    background-color: #fff0d9;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.rules .border_tawac {
    padding: 0.6em;
    background-color: #a8c1c9;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.rules .border_skymine_ressources {
    padding: 0.6em;
    background-color: #cccabb;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.rules .border_minerva {
    padding: 0.6em;
    background-color: #a799ba;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.rules .border_helium {
    padding: 0.6em;
    background-color: #c9a197;
    margin-left: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.rules .rahmen {
    border: black solid 1px;
}
.rules .rahmen_yellow
{
    border: #f9b030 solid 1px;
}
.rules .rahmen_white
{
    border: white solid 1px;
    margin-bottom: 0.5em; /*Abstand zum nächsten Absatz*/
    margin-top: 0.5em; /*Abstand zum nächsten Absatz*/
    padding-left: 0.6em; /*Abstand links*/
    padding-right: 0.6em; /*Abstand links*/
}
.rules .img_55 {
    width: 55%;
}
.rules .img_60 {
    width: 60%;
}
.rules .cell_picture_40 {
    width: 40%;
    vertical-align: top;
}
.rules .cell_picture_15 {
    width: 15%;
    vertical-align: top;
}
.rules .cell_picture_13 {
    width: 13%;
    vertical-align: top;
}
.rules .cell_picture_11 {
    width: 11%;
    vertical-align: top;
}
.rules .cell_picture_20 {
    width: 20%;
    vertical-align: top;
}
.rules .cell_picture_22 {
    width: 22%;
    vertical-align: top;
}
.rules .cell_picture_20_e {
    width: 20%;
    vertical-align: top;
    padding: 0px 0px 0px 5%; /*top right bottom left*/
}
.rules .cell_picture_18_b {
    width: 18%;
    vertical-align: bottom;
}
.rules .cell_picture_25 {
    width: 25%;
    vertical-align: top;
}
.rules .cell_picture_30 {
    width: 30%;
    vertical-align: top;
}
.rules .cell_picture_35 {
    width: 35%;
    vertical-align: top;
}
.rules .cell_picture_37 {
    width: 37%;
    vertical-align: top;
}
.rules .cell_picture_50 {
    width: 50%;
    vertical-align: top;
}
.rules .cell_picture_70x {
    width: 50%;
    vertical-align: top;
}
.rules .cell_picture_3 {
    width: 18%;
    vertical-align: top;
    padding-left: 40px;
}
.rules .img_middle {
    width: 1em;
}
.rules .img_middle3 {
    width: 1.9em;
}
.rules .img_middle2 {
    width: 3em;
}
.rules .img_middle35
{
    width: 3.5em;
}
.rules .img_text {
    width: 2em;
}
.rules .img_text_klein {
    width: 1.2em;
}
.rules .img_5 {
    width: 7%;
}
.rules .img_height_text_klein {
    height: 1.8em;
}
.rules .img_height_text {
    height: 3em;
}
.rules .img_height_boni {
    height: 4em;
}
rules .img_height_cards {
    height: 4.2em;
}
/*Ziffern in Kreisen*/
.rules .label {
    display: inline-block;
    border-radius: 50%;
    height: 1.2em;
    width: 1.2em;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    font-size: 1em;
}
.rules .label_eckig {
    display: inline-block;
    height: 1.1em;
    width: 1.1em;
    background: #fff;
    border: 2.2px solid black;
    color: black;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
}
.rules .label_white
{
    display: inline-block;
    border-radius: 10%;
    border: 1px solid white;
    text-align: center;
    font-size: 1em;
}
.rules ol {
    text-shadow: none;
    vertical-align: top;
}
    .rules ol.abc {
        text-shadow: none;
        list-style-type: lower-alpha;
        vertical-align: top;
    }
.rules .top {
    vertical-align: top;
}
.rules .red {
    color: #cd1725; /* Farbe Lin*/
    text-shadow: none;
}
.rules .green_malik {
    color: #729e78; /* Farbe*/
    text-shadow: none;
}
.rules .yellow_amber {
    color: #f1841a; /* Farbe*/
    text-shadow: none;
}
.rules .blue {
    color: #3f7b95; /* Farbe Kohlenstoff / carbon*/
    text-shadow: none;
}
.rules .green {
    color: #1d8b68; /* Farbe Mineralien*/
    text-shadow: none;
}
.rules .grey {
    color: #615354; /* Farbe Titan*/
    text-shadow: none;
}
/*floating texts*/
#rules .float_right {
    float: right;
    text-align: right;
    margin-right: 1em
}
#rules .float_left {
    float: left;
    text-align: left;
    margin-right: 1em
}
/* In-game click-for-help rules Dialogs: */
.rules.dialogElement .float_right {
    float: right;
    text-align: right;
    margin-right: 1em
}
.rules.dialogElement .float_left {
    float: left;
    text-align: left;
    margin-right: 1em
}
.rules .internal_anchor {
    text-shadow: none;
}
.rules .bottom {
    vertical-align: bottom;
}
.rules .img_80 {
    width: 80%;
}
.rules .img_100 {
    width: 100%;
}
.rules .sidebaronly {
    display: none;
}
#panelRules .sidebaronly {
    display: inherit;
}
.rules .rulesPDF {
    text-shadow: none;
}
.rules .middle {
    vertical-align: middle;
}
.rules .right {
    text-align: right;
}
.rules .center {
    text-align: center;
}
/*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_klein {
    width: 0.5em;
}
.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_9 {
    width: 9%;
    vertical-align: central;
}
.rules .cell_picture_10 {
    width: 10%;
    vertical-align: central;
}
.rules .cell_picture_25_2 {
    width: 25%;
    vertical-align: top;
    padding-left: 5px;
    padding-right: 5px;
}
.rules .cell_picture_45 {
    width: 45%;
    vertical-align: top;
}

.rules .deviation {
    color: #000;
}