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

.rules .grid {
    width: 18em;
    height: auto;
    display: inline-block;
    position: relative;
}

.rules .points_div_row {
    width: 25%;
    height: 11.11%;
    padding: 0;
    position: absolute;
    left: 57%;
}

.rules .points_div {
    width: 10em;
    height: 16.4em;
    background-image: url('/game-plugins/cityofrome/1.0.1/images/scoring_sheet.jpg');
    position: relative;
    display: inline-block;
}

.blue_victory_points {
    background-image: url('/game-plugins/cityofrome/1.0.1/images/point_marker.jpg');
    background-repeat: repeat-x;
    background-size: contain;
    height: 1em;
    position: absolute;
}

.blue_victory_points_pos2 {
    width: 2em;
    left: 13.75em;
    top: 7em;
}

.blue_victory_points_pos4 {
    width: 4em;
    left: 4.75em;
    top: 11.5em;
}

.rules .points_pos_0 {
    top: 0;
}

.rules .points_pos_1 {
    top: 11.11%;
}

.rules .points_pos_2 {
    top: 22.22%;
}

.rules .points_pos_3 {
    top: 33.33%;
}

.rules .points_pos_4 {
    top: 44.44%;
}

.rules .points_pos_5 {
    top: 55.56%;
}

.rules .points_pos_6 {
    top: 66.67%;
}

.rules .points_pos_7 {
    top: 77.78%;
}

.rules .points_pos_8 {
    top: 88.89%;
}

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

.rules .grid img {
    float: left;
}

.rules .card_image {
    width: 4.5em;
    height: auto;
}

.rules .coin_image {
    width: 3em;
    height: auto;
}

.rules .building_marker_image {
    width: 4em;
    height: auto;
}

.from_right {
    float: right;
    margin-left: -3.47em;
}

.from_right2 {
    float: right;
    margin-left: -3.86em;
}

.from_right3 {
    float: right;
    margin-left: -3.71em;
}

.card_stack {
    height: 4.5em;
    position: relative;
    width: 22.5em;
}

.building_expl {
    min-height: 11em;
}

.building_expl img {
    float: left;
    width: 10em;
    height: auto;
    padding: 0.5em;
}

table.overview {
    border-collapse: collapse;
}

.overview th {
    border-bottom: 2px solid black;
}

.overview tfoot td {
    border-top: 2px solid black;
}

.overview tbody td {
    border-bottom: 1px solid black;
}

.overview td:not(.first_column), .overview th:not(.first_column) {
    border-left: 1px solid black;
}

.overview td.first_column, .overview th.first_column {
    border-right: 2px solid black;
}