/* 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 */
   
span.emphasize {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
div.FAQ_Question {
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: 6px;
}
span.FAQ_AnswerHeader {
  font-weight: bold;
}
div.FAQ_Answer {
  margin-top: 10px;
  margin-bottom: 12px;
  line-height: 130%;
}
#rules .faq_card_image__equipment_card {
  width: 8em;
  border-radius: 5%;
  box-shadow: 0.07em 0.07em 0.14em 0 rgba(0, 0, 0, 0.2);
}
#rules .faq_card_image__ship {
  width: 6em;
  border-radius: 0.6em;
}
#rules .faq_card_image__god {
  width: 3em;
}
#rules .faq_question_separator_hr {
  border-color: #911e20;
  border-style: dashed;
}

#rules .deviation__zeustile_image {
  width: 48px;
}
#rules .deviation__new_paragraph {
  margin-top: 2em;
}
#rules .deviation__shrine_image {
  vertical-align: bottom;
  width: 26px;
}
#rules .log__coord {
  padding: 0em 0.4em;
  border-radius: 0.3em;
  border: 1px solid #A9A9A9;
}

#rules .chapter .title {
  background-color: #911e20;
  background-image: url(/game-plugins/delphi/1.0.0/images/rules/titleline_background_varcol.png);
  background-position: center;
  background-size: cover;
  color: #e9dbc3;
  text-align: center;
  padding: 0px;
  font-size: 2em;
  border: 0px
}

#rules h1 {
  background-image: url(/game-plugins/delphi/1.0.0/images/rules/titleline_background_varcol.png);
  background-position: center;
  background-size: cover;
  padding: 0px;
  font-size: 2em;
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
   
#rules h2 {
  color: #911e20;
  font-size: 1.75em;
  margin: 0.2em 0em;
  clear: left;
}

#rules h3 {
  color: #C85702;
  font-size: 1.5em;
  clear: left;
}

#rules h4 {
  color: #A50B02;
  font-size: 1em;
}

/* set those cute blue Kringels */
#rules ul {
    padding-left: 1.8em;
    list-style-image: url('/game-plugins/delphi/1.0.0/images/rules/bullet.png');
}

/* 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 .setupsupply { width: 35%; float: right; margin-left: 2em; }
#rules .setupplayer { width: 65%; float: right; margin-left: 2em; }
#rules .gamecomps { width: 99%; float: center; border: 1px solid #911e20; border-radius: 4px }

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;
}

#rules .redback { 
  background-color: #911e20;
  color: #e9dbc3;
}

#rules .greenback { 
  background-color: #557a50;
  color: #e9dbc3;
}

#rules .blueback { 
  background-color: #356987;
  color: #e9dbc3;
}

#rules .brownback { 
  background-color: #965d3f;
  color: #e9dbc3;
}

/* gamecomponents */
#rules .paragraph.gamecomps { width: 75%; }
#rules .paragraph.gamecomps .image img { width: 100%; }

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

/* actions */
#rules .paragraph.action { width: 100%; clear:left; margin-top: 0.5em;}
#rules .paragraph.action .image img { width: 8em; float: left; margin-right: 1em; }
#rulesContainer #rules .paragraph.action { width: 90%; }

/* godspecials */
#rules .paragraph.godspecial { width: 45%; background-color: #e7e4cf; float: left; margin: .3em .5em; padding: .2em .5em; border: 1px solid #911e20; border-radius: 4px }
#rules .paragraph.godspecial .image img { height: 7em; float: left; margin-right: 1em; }
#rulesContainer #rules .paragraph.godspecial { width: 90%; }

/* shiptiles */
#rules .paragraph.shiptiles { width: 30%; background-color: #e7e4cf; float: left; margin: .3em .5em; padding: .2em .5em; border: 1px solid #911e20; border-radius: 4px }
#rules .paragraph.shiptiles .image img { width: 7em; float: left; margin-right: 1em; }
#rulesContainer #rules .paragraph.shiptiles  { width: 90%; }

/* equipmenttiles */
#rules .paragraph.equipmenttiles { width: 45%; background-color: #e7e4cf; float: left; margin: .3em .5em; padding: .2em .5em; border: 1px solid #911e20; border-radius: 4px }
#rules .paragraph.equipmenttiles .image img { width: 9em; float: left; margin-right: 1em; }
#rulesContainer #rules .paragraph.equipmenttiles { width: 90%; }

/* zeustiles */
#rules .paragraph.zeustiles { width: 95%; background-color: #e7e4cf; float: left; margin: .3em .5em; padding: .2em .5em; border: 1px solid #911e20; border-radius: 4px }
#rules .paragraph.zeustiles .image img { height: 6em; float: left; margin-right: 1em; }
#rulesContainer #rules .paragraph.zeustiles  { width: 90%; }

/* shortvariant */
#rules .paragraph.shortvariant { width: 20%; float: left; margin: .3em .5em; padding: .2em .5em; }
#rules .paragraph.shortvariant .subtext { width: 100%; clear:right; }
#rules .paragraph.shortvariant .image img { height: 9em; }
#rulesContainer #rules .paragraph.shortvariant  { width: 90%; }

/* actionislands */
#rules .actionisland { clear: left; margin-top: 1.5em; min-height: 2em; }
#rules .actionisland > .image { float: left; width: 4em; margin-right: 1em; }
#rules .actionisland > .description_text { float: left; display: contents; }