/* 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 .chapter .title {
    background-color: #D12229;
    color: yellow;
    text-align: center;
    padding: 0.2em;
    border: none;
    margin-bottom:0.5em;
    margin-top:0.5em;
    clear:both;
}

#rules h2 {
    background-color: #993D75;
    color: yellow;
    padding: 0.2em;
    padding-left: 0.5em;
    border: none;
    margin-bottom:0.5em;
    margin-top:0.5em;
    font-size: 1.25em;
    clear:both;
}

#rules h3 {
    background-color: #24408E;
    color: yellow;
    padding: 0.2em;
    padding-left: 0.5em;
    margin-left:1em;
    border: none;
    margin-bottom:0.5em;
    margin-top:0.5em;
    clear:both;
}

/* sidebar or not sidebar */ 
#sidebarPanel #rules .nosidebar { display:none; }
.ui-popup .rules .nopopup { display:none; }
.rules .sidebaronly { display:none; }
#sidebarPanel #rules .sidebaronly { display:inherit; }

#rules .hint {
  padding: 0.5em 1em 0.5em 1em;
  background-color: white;
  border: 1px solid #24408E;
  border-radius: 1em;
  font-style: italic;
}
   
#rules .imageleft8 img { width: 8em; float: left; margin-right: 0.3em; margin-bottom: 0.5em; }
#rules .imageleft10 img { width: 10em; float: left; margin-right: 1em; margin-bottom: 0.5em; }
#rules .imageleft10indent img { width: 10em; float: left; margin-right: 1em; margin-bottom: 0.5em; margin-left: 4em;}
#sidebarPanel #rules .imageleft10indent img { margin-left: 1em;}
#rules .pushdown img { margin-top: 4em;}
#rules .imageleft14 img { width: 14em; float: left; margin-right: 1em; margin-bottom: 0.5em; }
#rules .imageleft18 img { width: 18em; float: left; margin-right: 1em; margin-bottom: 0.5em; }
#rules .imageleft40 img { width: 40em; float: left; margin-right: 1em; margin-bottom: 0.5em; }
#rules .imageright10 img { width: 10em; float: right; margin-left: 1em; margin-right: 0.5em;}
#rules .imageright14 img { width: 14em; float: right; margin-left: 1em; margin-right: 0.5em;}
#rules .imageright18 img { width: 18em; float: right; margin-left: 1em; margin-right: 0.5em;}

#rules .buildingplacement img { width: 14em; float: right; margin-left: 1em; margin-right: 0.5em;}
#sidebarPanel #rules .buildingplacement img { width: 40%; float: right; margin-left: 1em; margin-right: 0.5em;}

#rules .actionStyle {
    background-color: #40AD48;
    color: white;
    padding: 0.1em;
    padding-left: 0.5em;
    margin-left:1em;
    margin-bottom:0.5em;
    margin-top:0.5em;
    font-size: 1.1em;
    clear:right;
}

#rules .paragraph { clear: left; margin-top: 1em; margin-bottom: 0.5em; }
#rules .clear { clear: both; }
#rules .clearleft { clear: left; }