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

.rules .chapter .title {
    width: 100%;
    background-color: #0076bd;
    color: white;
    border: none;
    text-align: center;
    font-size: 2.4em;
}

.rules .chapter .title.middle {
    font-size: 1.2em;
}

.rules .cover img {
    width: 30%;
}

.rules .chapter h2 {
    text-align: center;
    color: #0076bd;
}

.rules .float_left {
    float: left;
}

.rules .appendix img {
    padding: 1%;
}

.rules .inline-img {
    height: 2em;
    width: auto;
}

.rules .inline-img-small {
    height: 1em;
    width: auto;
}

.rules .appendix .paragraph, .rules .paragraph {
    background-color: lightblue;
    width: 46%;
    position: relative;
    display: inline-block;
    float: none;
    vertical-align: top;
    box-sizing: border-box;
}

.modal-dialog .paragraph {
    width: 400px;
}

.paragraph td {
    padding: 1%;
    vertical-align: top;
}

.paragraph tbody tr td:first-child {
    width: 35%;
    min-width: 35%;
    max-width: 35%;
}

.alternate_colors tbody tr {
    background-color: lightblue;
}

.alternate_colors thead td, .alternate_colors tr td:first-child {
    font-weight: bold;
}

.alternate_colors tbody tr:nth-child(even) {
    background-color: white;
}

.rules p.footnote {
    color: red;
    font-style: italic;
}

.rules .homeland_table {
    width: 100%;
    height: auto;
    position: relative;
    table-layout: fixed;
}

.rules .homeland_table td {
    width: 25%;
}

.rules .homeland_table td.homeland_img_td {
    width: 50%;
}

.rules .homeland_outer_container {
    width: 100%;
    position: relative;
    float: left;
    height: auto;
}

.rules .homeland_inner_container {
    width: 100%;
    height: auto;
    padding-top: 141.93%;
    border: 1px solid black;
    position: relative;
}

.rules .homeland_img {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
}

.rules .homeland_img_moor {
    width: 22%;
    position: absolute;
    bottom: 1.5%;
    height: auto;
    left: 15%;
}

.rules .homeland_img_dehydrated_moor {
    width: 22%;
    position: absolute;
    bottom: 1.5%;
    height: auto;
    left: 39%;
}

.rules .homeland_img_dehydrated_moor_peat_0 {
    width: 4.5%;
    position: absolute;
    bottom: 4%;
    height: auto;
    left: 51%;
}

.rules .homeland_img_dehydrated_moor_peat_1 {
    width: 4.5%;
    position: absolute;
    bottom: 8%;
    height: auto;
    left: 54%;
}

.rules .homeland_img_depot {
    width: 22%;
    position: absolute;
    bottom: 1.5%;
    height: auto;
    left: 62.5%;
}

.rules .homeland_img_park {
    width: 22%;
    position: absolute;
    bottom: 14.5%;
    height: auto;
    left: 62.5%;
}

.rules .homeland_img_park_sheep {
    width: 8%;
    position: absolute;
    bottom: 16%;
    height: auto;
    left: 65%;
}

.rules .homeland_img_park_horse {
    width: 8%;
    position: absolute;
    bottom: 16%;
    height: auto;
    left: 74%;
}

.rules .homeland_img_stable {
    width: 22%;
    position: absolute;
    left: 15%;
    bottom: 27%;
    height: auto;
}

.rules .homeland_img_stable_horse_0 {
    width: 8%;
    position: absolute;
    left: 18%;
    bottom: 27.5%;
    height: auto;
}

.rules .homeland_img_stable_horse_1 {
    width: 8%;
    position: absolute;
    left: 27%;
    bottom: 27.5%;
    height: auto;
}

.rules .homeland_img_stable_horse_2 {
    width: 8%;
    position: absolute;
    left: 18%;
    bottom: 31%;
    height: auto;
}

.rules .homeland_img_stable_horse_3 {
    width: 8%;
    position: absolute;
    left: 27%;
    bottom: 31%;
    height: auto;
}

.rules .homeland_img_forest {
    width: 22%;
    position: absolute;
    left: 39%;
    bottom: 27%;
    height: auto;
}

.rules .homeland_img_flax_field {
    width: 22%;
    position: absolute;
    left: 62.5%;
    bottom: 27%;
    height: auto;
}

.rules .homeland_img_stall {
    width: 22%;
    position: absolute;
    left: 15%;
    bottom: 39.7%;
    height: auto;
}

.rules .homeland_img_stall_sheep_0 {
    width: 8%;
    position: absolute;
    left: 18%;
    bottom: 41%;
    height: auto;
}

.rules .homeland_img_stall_sheep_1 {
    width: 8%;
    position: absolute;
    left: 26%;
    bottom: 41%;
    height: auto;
}

.rules .homeland_img_empty_cattle_0 {
    width: 8%;
    position: absolute;
    left: 42%;
    bottom: 41%;
    height: auto;
}

.rules .homeland_img_empty_cattle_1 {
    width: 8%;
    position: absolute;
    left: 50%;
    bottom: 41%;
    height: auto;
}

.rules .homeland_img_grain_field_0 {
    width: 22%;
    position: absolute;
    left: 62.5%;
    bottom: 39.7%;
    height: auto;
}

.rules .homeland_img_turnery {
    width: 22%;
    position: absolute;
    left: 15%;
    bottom: 55%;
    height: auto;
}

.rules .homeland_img_weaving_parlor {
    width: 22%;
    position: absolute;
    left: 39%;
    bottom: 55%;
    height: auto;
}

.rules .homeland_img_grain_field_1 {
    width: 22%;
    position: absolute;
    left: 62.5%;
    bottom: 55%;
    height: auto;
}

.rules .homeland_img_village_church {
    width: 22%;
    position: absolute;
    left: 15%;
    bottom: 69.8%;
    height: auto;
}

.rules .homeland_img_empty_sheep_0 {
    width: 8%;
    position: absolute;
    left: 42%;
    bottom: 71%;
    height: auto;
}

.rules .homeland_img_empty_sheep_1 {
    width: 8%;
    position: absolute;
    left: 50%;
    bottom: 71%;
    height: auto;
}

.rules .homeland_img_emden {
    width: 10.1%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
}

.rules .homeland_img_norden {
    width: 10.1%;
    position: absolute;
    left: 0;
    bottom: 15.9%;
    height: auto;
}

.rules .homeland_img_food_0 {
    width: 5.5%;
    position: absolute;
    left: 88.7%;
    bottom: 1.7%;
    height: auto;
}

.rules .homeland_img_food_1 {
    width: 5.5%;
    position: absolute;
    left: 88.7%;
    bottom: 29%;
    height: auto;
}

.rules .homeland_img_flax {
    width: 5.5%;
    position: absolute;
    left: 88.7%;
    bottom: 5.7%;
    height: auto;
}

.rules .homeland_img_grain {
    width: 5.5%;
    position: absolute;
    left: 88.7%;
    bottom: 12%;
    height: auto;
}

.rules .homeland_img_hide {
    width: 5.5%;
    position: absolute;
    left: 88.7%;
    bottom: 18.6%;
    height: auto;
}

.rules .homeland_img_wool {
    width: 5.5%;
    position: absolute;
    left: 88.7%;
    bottom: 22.6%;
    height: auto;
}

.rules .homeland_img_dike_0 {
    width: 21%;
    position: absolute;
    left: 15.5%;
    bottom: 67%;
    height: auto;
}

.rules .homeland_img_dike_0_sheep {
    width: 8%;
    position: absolute;
    left: 22%;
    bottom: 67.5%;
    height: auto;
}

.rules .homeland_img_dike_1 {
    width: 21%;
    position: absolute;
    left: 15.5%;
    bottom: 81.9%;
    height: auto;
}

.rules .homeland_img_dike_1_sheep {
    width: 8%;
    position: absolute;
    left: 22%;
    bottom: 82.4%;
    height: auto;
}

.rules .homeland_img_dike_2 {
    width: 21%;
    position: absolute;
    left: 39.5%;
    bottom: 81.9%;
    height: auto;
}

.rules .homeland_img_dike_2_cattle {
    width: 8%;
    position: absolute;
    left: 46%;
    bottom: 82.4%;
    height: auto;
}

.rules .homeland_img_dike_3 {
    width: 21%;
    position: absolute;
    left: 63%;
    bottom: 81.9%;
    height: auto;
}

.rules .homeland_img_dike_3_horse {
    width: 8%;
    position: absolute;
    left: 69.5%;
    bottom: 82.4%;
    height: auto;
}

.rules .homeland_img_dike_4 {
    width: 21%;
    position: absolute;
    left: 15.5%;
    bottom: 97%;
    height: auto;
}

.rules .homeland_img_dike_4_horse {
    width: 8%;
    position: absolute;
    left: 22%;
    bottom: 97.5%;
    height: auto;
}

.rules .numbered_circle {
    width: 1em;
    height: 1em;
    border: 0.1em solid black;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: white;
    text-align: center;
    font-size: 0.8em;
    line-height: 0.8em;
    padding: 0.1em;
    display: inline-block;
}

.rules .circle_tidal_flat_area {
    position: absolute;
    left: 46%;
    bottom: 90.5%;
}

.rules .circle_buildings {
    position: absolute;
    left: 16%;
    bottom: 72%;
}

.rules .circle_stall {
    position: absolute;
    left: 16%;
    bottom: 42%;
}

.rules .circle_stable {
    position: absolute;
    left: 16%;
    bottom: 29%;
}

.rules .circle_travel {
    position: absolute;
    left: 3%;
    bottom: 19%;
}

.rules .circle_moor {
    position: absolute;
    left: 21%;
    bottom: 11%;
}

.rules .circle_field {
    position: absolute;
    left: 73%;
    bottom: 33%;
}

.rules .circle_forest {
    position: absolute;
    left: 49%;
    bottom: 33%;
}

.rules .circle_park {
    position: absolute;
    left: 73%;
    bottom: 22.5%;
}

.rules .circle_goods {
    position: absolute;
    left: 90%;
    bottom: 72.5%;
}

.rules .circle_depot {
    position: absolute;
    left: 73%;
    bottom: 8.5%;
}

.rules .white_box {
    background-color: white;
    position: relative;
    margin: 0.5em;
}

.rules img.marker_height {
    height: 4em;
    width: auto;
}

.rules img.small_equipment_height {
    height: 4.5em;
    width: auto;
}

.rules img.large_equipment_height {
    height: 5.5em;
    width: auto;
}