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


/* Offenbacher Reform CAT - for title */
@font-face {
    font-family: 'Offenbacher Reform CAT';
    src: local('Offenbacher Reform CAT'), url('fonts/Offenbacher.ttf') format('truetype');
}
/* neutron.italic - for headers. The exact font would be commercial */
@font-face {
    font-family: 'neuton.italic';
    src: local('neuton.italic'), url('fonts/neuton.italic.ttf') format('truetype');
}

.rules .title {
    font-family: 'Offenbacher Reform CAT';
    font-weight: bold;
    text-align: center;
    border: none;
    margin-top: 1em;
    margin-bottom: 0.5em;
    color: #5f4f3d;
    font-size: 5em;
    line-height: 1.2em;
    padding: 0px 0px 10px 10px;
    text-shadow: none;
}

.rules h1 { /*rot breiter Balken*/
    font-family: 'neuton.italic';
    font-weight: bold;
    text-align: center;
    background-image: url(/game-plugins/messina1347/1.1.48/images/rules/header_background.png); /*Hintergrundbild*/
    background-repeat: no-repeat; /*Kein Wallpaper*/
    background-position: center; /*Position des Hintergrundbildes*/
    border: none;
    margin-top: 1em;
    margin-bottom: 0.2em;
    color: white; /* Farbe*/
    font-size: 2.3em;
    line-height: 1.9em; /*Höhe des Hintergrundbildes*/
    padding: 10px 0px 10px 10px;
    text-shadow: none;
}

.rules h2 { /*gelb*/
    font-family: 'neuton.italic';
    font-weight: bold;
    text-align: center;
    background-image: url(/game-plugins/messina1347/1.1.48/images/rules/header_background_2.png); /*Hintergrundbild*/
    background-repeat: no-repeat; /*Kein Wallpaper*/
    background-position: center; /*Position des Hintergrundbildes*/
    border: none;
    margin-top: 1em;
    margin-bottom: 0.2em;
    color: #921d15; /* Farbe*/
    font-size: 1.9em;
    line-height: 1.9em; /*Höhe des Hintergrundbildes*/
    padding: 10px 0px 10px 0px;
    text-shadow: none;
}

.rules h3 { /*beige*/
    font-family: 'neuton.italic';
    font-weight: bold;
    text-align: center;
    background-image: url(/game-plugins/messina1347/1.1.48/images/rules/header_background_3.png); /*Hintergrundbild*/
    background-repeat: no-repeat; /*Kein Wallpaper*/
    background-position: center; /*Position des Hintergrundbildes*/
    border: none;
    margin-top: 1em;
    margin-bottom: 0.2em;
    color: #921d15; /* Farbe*/
    font-size: 1.5em;
    line-height: 1.9em; /*Höhe des Hintergrundbildes*/
    padding: 10px 0px 10px 0px;
    text-shadow: none;
}

.rules h4 { /*rot, kurzer Baken*/
    font-family: 'neuton.italic';
    font-weight: bold;
    text-align: center;
    background-image: url(/game-plugins/messina1347/1.1.48/images/rules/header_background_4.png); /*Hintergrundbild*/
    background-repeat: no-repeat; /*Kein Wallpaper*/
    background-position: center; /*Position des Hintergrundbildes*/
    border: none;
    margin-top: 1em;
    margin-bottom: 0.2em;
    color: white; /* Farbe*/
    font-size: 1.9em;
    /*text-indent: 6em;*/
    line-height: 1.9em; /*Höhe des Hintergrundbildes*/
    padding: 10px 0px 10px 0px;
    text-shadow: none;
}

.rules h5 { /*ohne Balken*/
    font-family: 'neuton.italic';
    font-weight: bold;
    text-align: center;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    font-size: 1.5em;
    text-shadow: none;
}

/*für sidpanel*/
.rules h6 { /*rot breiter Balken, entspricht h1, nur kleiner Schrift*/
    font-family: 'neuton.italic';
    font-weight: bold;
    text-align: center;
    background-image: url(/game-plugins/messina1347/1.1.48/images/rules/header_background.png); /*Hintergrundbild*/
    background-repeat: no-repeat; /*Kein Wallpaper*/
    background-position: center; /*Position des Hintergrundbildes*/
    border: none;
    margin-top: 1em;
    margin-bottom: 0.2em;
    color: white; /* Farbe*/
    font-size: 1.5em;
    line-height: 1.9em; /*Höhe des Hintergrundbildes*/
    padding: 10px 0px 10px 10px;
    text-shadow: none;
}

/*Boxen*/
.rules .border {
    border-radius: 1em;
    border: none;
    padding: 0.6em;
    background-color: #c4b295;
    margin: 0.5em;
}

.rules .border2 {
    background-color: #f3ede5;
}

.rules .border_background {
    border-radius: 1em;
    border: none;
    padding: 0.6em;
    background-color: #edddc4;
    margin: 0.5em;
}
 /*kein Schatten*/
.rules p {
    text-shadow: none;
}

.rules ol {
    text-shadow: none;
}

.rules ul {
    text-shadow: none;
}
.rules td {
    text-shadow: none;
}
/*Sidebar*/
.rules .sidebaronly {
    display: none;
}

#panelRules .sidebaronly {
    display: inherit;
}

/*images*/
.rules .img_tiles {
    padding: 1%;
    width: 10em;
}

.rules .img_mini {
    width: 0.5em;
}

.rules .img_klein {
    width: 1em;
}

.rules .img_klein2 {
    width: 2em;
    vertical-align: bottom;
}

.rules .img_middle {
    width: 2em;
}

.rules .img_middle2 {
    width: 4em;
}


.rules .img_30 {
    width: 30%;
} 
.rules .img_40 {
    width: 40%;
} 

.rules .img_60 {
    width: 60%;
}

.rules .img_70 {
    width: 70%;
}

.rules .img_80 {
    width: 80%;
}

.rules .img_100 {
    width: 100%;
}

.rules .img_110 {
    width: 110%;
}

.rules .img_160 {
    width: 160%;
}

.rules .img_contents {
    width: 93%;
}

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

.rules img {
    width: 50%;
}

/*Spaltenbreiten*/
.rules .cell_picture {
    width: 10%;
}

.rules .cell_picture_12 {
    width: 12%;
}

.rules .cell_picture_middle {
    width: 15%;
}

.rules .cell_picture_20 {
    width: 20%;
}

.rules .cell_picture_25 {
    width: 25%;
}

.rules .cell_picture_30 {
    width: 30%;
}

.rules .cell_picture_33 {
    width: 33%;
}

.rules .cell_picture_big {
    width: 40%;
}

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

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

#rules .round_corners {
    border-radius: 10px;
}

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

#rules .padding {
    padding: 0.2em;
}

/* Fire Token Clarification: */
.rules .fire_token_clarification_table {
    width: 70%;
    border-collapse: collapse;
    border: 1px solid black;
}
.rules .fire_token_clarification_table th {
    border-collapse: collapse;
    border: 1px solid black;
}
.rules .fire_token_clarification_table td {
    border-collapse: collapse;
    border: 1px solid black;
}
.rules .fire_token_clarification_table img {
    vertical-align: middle;
    width: 2em;
}

.rules .deviation__img--inline {
    width: initial;
    vertical-align: middle;
}

/* In-game popup referencing rules html: */
.modal-body .rules__scrollboardtrack {
    vertical-align: top;
}
.modal-body .rules__scrollboardtrack__image {
    width: 8em;
}
.modal-body .rules__scrollboardtrack__text {
    padding-left: 1em;
}