/* 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 .roundbox {
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin-right: 1em;
    font-size: 1em;
    font-weight: bold;
    border-radius: 3px;
}
/* background and border colour definitions */
#rules .reddishback {  background-color: #E5927A; }
#rules .reddishborder { border: 2px solid #D2232A; border-radius: 6px  }
#rules .yellowishback {  background-color: #FFD77D; }
#rules .yellowishborder { border: 2px solid #F8D339; border-radius: 6px  }
#rules .blueishback {  background-color: #99C7EB; }
#rules .blueishborder { border: 2px solid #00A0DC; border-radius: 6px  }
#rules .purplishback {  background-color: #B386B6; }
#rules .purplishborder { border: 2px solid #914591; border-radius: 6px  }
#rules .brownishback {  background-color: #BAA493; }
#rules .brownishborder {  border: 2px solid #89684F; border-radius: 6px }
#rules .greenishback {  background-color: #7CD27A; }
#rules .greenishborder {  border: 2px solid #23D129; border-radius: 6px }
#rules .grayishback {  background-color: #EEEEEE; }
#rules .grayishborder {  border: 2px solid #BBBBBB; border-radius: 6px }
#rules .lavendarback {  background-color: #D1A3FF; }

#rules .imageleft img { width: 8em; float: left; margin-right: 1em; }
#rules .imageleft20 img { width: 20em; float: left; margin-right: 1em; }
#rules .imageleft18 img { width: 18em; float: left; margin-right: 1em; }
#rules .imageleft10 img { width: 10em; float: left; margin-right: 1em; }
#rules .imageleft14 img { width: 14em; float: left; margin-right: 1em; }

#rules .paragraph.forLeftImgAndText { width: 98%; float: left; margin-right: 1em; margin-top: 0.5em; }

#rules .paragraph.spell { width: 48%; float: left; margin-right: 1em; margin-top: 0.5em; }
#rulesContainer #rules .paragraph.spell { width: 95%; }

#rules .chapter .title {
    background-image: url(/game-plugins/pandoria/1.0.1/images/rules/header_background.jpg);
    background-position: center;
    background-size: cover;
    background-color: #E78F53;
    color: #393737;
    text-align: center;
    padding: 0px;
    font-size: 2em;
    border: 0px;
    font-family: Georgia,Trebuchet MS,sans-serif;
    font-variant: small-caps;
    height: 3em;
    line-height: 3em;
}
#rules h1 {
    background-image: url(/game-plugins/pandoria/1.0.1/images/rules/header_background.jpg);
    background-position: center;
    background-size: cover;
    background-color: #E78F53;
    color: #393737;
    padding: 0px;
    font-size: 1.75em;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    height: 2em;
    line-height: 2em;
    font-family: Georgia,Trebuchet MS,sans-serif;
}

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