/* 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-image: url(/game-plugins/bruges/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/bruges/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;
}
   
#rules h2 {
  color: #393737;
  font-size: 1.75em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  clear: left;
  font-family: Georgia,Trebuchet MS,sans-serif;
}

#rules h3 {
  color: #393737;
  font-size: 1.5em;
  clear: left;
  font-family: Georgia,Trebuchet MS,sans-serif;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-indent: 1em;
}

#rules h4 {
  color: black;
  font-size: 1.25em;
  font-family: Georgia,Trebuchet MS,sans-serif;
}

#rules ul {margin:1em 0em 1em 2em; }
#rules ol {margin:1em 0em 1em 2em; }

/* some picture definitions */
#rules .examplepicright { width: 30%; float: right; margin-left: 2em; }
#rules .examplepicleft { width: 50%; float: left; margin-right: 2em; }
#rules .examplepicfull { width: 95%; float: center; margin-right: 2em; margin-left: 2em;}
#rules .inlinepic { height: 2em; margin-left: 0.2em; margin-right: 0.2em;}

span.clear { clear: left; display: block; }

#sidebarPanel #rules .nosidebar { display:none; }
.ui-popup .rules .nopopup { display:none; }
#rules .sidebaronly { display:none; }
#sidebarPanel #rules .sidebaronly { display:inherit; }

#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 .orangeback {  background-color: #F47721; }
#rules .whiteback {  background-color: #E6E6E6; }


/* exampleright */
#rules .exampleright { width: 40%; float: right; margin: .3em .5em; padding: .2em .5em; font-style: italic;}
#rules .exampleright .image img { width: 50%; float: left; margin-right: 1em;}

/* examplefull */
#rules .examplefull { width: 95%; float: right; margin: .3em .5em; padding: .2em .5em; font-style: italic;}
#rules .examplefull .image img { width: 20em; float: right; margin-left: 1em;}


/* threats */
#rules .paragraph.threat { width: 90%; clear:left; margin-top: 0.5em; }
#rules .paragraph.threat .imageleft img { width: 8em; float: left; margin-right: 1em; }
#rules .paragraph.threat .imageright img { width: 8em; float: right; margin-left: 1em; }
#rulesContainer #rules .paragraph.threat { width: 90%; }

/* majorities */
#rules .paragraph.majority { width: 20%; float: left; margin: .3em .5em; padding: .2em .5em; }
#rules .paragraph.majority .subtext { width: 100%; clear:right; text-align:center;}
#rules .paragraph.majority .image img { height: 7em; }
#rulesContainer #rules .paragraph.majority  { width: 90%; }

/* boats */
#rules .paragraph.boat { width: 45%; background-color: #E6E6E6; float: left; margin: .3em .5em; padding: .2em .5em; border: 2px solid #D2232A; border-radius: 6px }
#rules .paragraph.boat .image img { width: 11em; float: left; margin-right: 1em; }
#rulesContainer #rules .paragraph.boat { width: 90%; }

/* split appendix */
#rules .appendixleft { width: 49%; float: left; }
#rules .appendixright { width: 49%; float: right; }
#rulesContainer #rules .appendixleft { width: 95%; float: left; }
#rulesContainer #rules .appendixright { width: 95%; float: right; }


/* clip card images */
#rules .paragraph.card { width: 95%; float: left; margin: .3em .5em; padding: .2em .5em; }
#rules .paragraph.card .cardpicture{ max-width: 68px;  max-height: 113px;  overflow: hidden; float: left; margin-right: 1em; }
#rules .paragraph.card .cardpicture img { max-width: initial; margin-left: -188px; }
    
/* card list */
#rules .paragraph.cardlist { width: 22%; float: left; margin: .3em .5em; padding: .2em .5em; }
#rulesContainer #rules .paragraph.cardlist { width: 45%; float:left; }