/* 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 .yellow_background {
    background-color: #f3d828;
}

.rules .cover {
    display: block !important;
}

#rules .appendix.stations {
    width: 100%;
}

#rules .appendix.stations img {
    width: 20%;
    float: left;
    margin: 2%;
}

#rules .collapse {
    border-collapse: collapse;
}

#rules .white {
    background-color: white;
}

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

#rules .yellow {
    background-color: yellow;
}

#rules .events {
    float: left;
    height: 3.5em;
    width: auto;
}

#rules .resource_cube_container {
    width: 6em;
    float: left;
    clear: left;
    text-align: right;
}

#rules .image_gap {
    margin-left: 6em;
}

#rules .resource_cube {
    width: auto;
    height: 1.2em;
}

#rules .meeple {
    width: auto;
    height: 2em;
}

#rules .appendix.trains .enclosing_div {
    width: 100%;
    overflow: hidden;
}

#rules .appendix.trains .paragraph {
    width: 47%;
}

.rules .train_image img {
    width: 54%;
    float: left;
    margin-right: 1em;
}

#rulesContainer #rules .appendix.trains .paragraph {
    width: 100%;
}

#rules .appendix.cards .paragraph {
    width: 47%;
}

.rules .contract_image img {
    width: 35%;
    float: left;
    margin-right: 1em;
}

#rulesContainer #rules .appendix.cards .paragraph {
    width: 100%;
}

.rules.inDialog .paragraph {
    width: 100%;
}

.rules.inDialog {
    overflow: hidden;
    margin-bottom: 1em;
}