/* 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 */
   
/* fonts */
/* The Missus Hand Oblique */
@font-face {
  font-family: 'The Missus Hand Oblique';
  font-style: normal;
  font-weight: 400;
  src: url('/game-plugins/lorenzo/1.0.1/fonts/The_Missus_Hand_Oblique.ttf');
  src: local('The Missus Hand Oblique'), 
       url('/game-plugins/lorenzo/1.0.1/fonts/The_Missus_Hand_Oblique.ttf') format('truetype');
}
   
#rules .lorenzofont {font-family: 'The Missus Hand Oblique', serif; font-size: 1.3em;  }

#rules .chapter .title {
    color: #FEFADF;
    background-image: url('/game-plugins/lorenzo/1.0.1/images/rules/header_background.png');
    background-color: #EDE9E1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-align: center;
    padding: 7px;
    font-size: 3em;
    font-family: 'The Missus Hand Oblique', serif;
    font-weight: bold;
    color: black;
    min-height: 1em;
    line-height: 1em;
    border: none;
    margin-top: 0em;
    margin-bottom: 0.5em;
}

#rules .chapter .title.narrow {background-image: url('/game-plugins/lorenzo/1.0.1/images/rules/header_background_narrow.png');}
#rules .chapter .title.wide {background-image: url('/game-plugins/lorenzo/1.0.1/images/rules/header_background_wide.png');}
#rules .chapter .title.extrawide {background-image: url('/game-plugins/lorenzo/1.0.1/images/rules/header_background_extrawide.png');}

.rules h1 {
    color: #FEFADF;
    background-image: url('/game-plugins/lorenzo/1.0.1/images/rules/header_background.png');
    background-color: #EDE9E1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 7px;
    font-size: 3em;
    font-family: 'The Missus Hand Oblique', serif;
    font-weight: bold;
    color: black;
    min-height: 1em;
    line-height: 1em;
    border: none;
    margin-top: 0em;
    margin-bottom: 0.5em;
}

.rules h2 {
  padding: 2px;
  font-family: 'The Missus Hand Oblique', serif;
  font-weight: bold;
  font-size: 2.5em;
  color: black;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
}

.rules h3 {
  padding: 2px;
  font-family: 'The Missus Hand Oblique', serif;
  font-weight: bold;
  font-size: 2em;
  clear: left;
}

.rules h4 {
  padding: 2px;
  margin-top: 0.2em;
  font-family: 'The Missus Hand Oblique', serif;
  font-weight: bold;
  font-size: 1.5em;
}

#rules ul {
  list-style-image: url('/game-plugins/lorenzo/1.0.1/images/rules/list_symbol.png');
}
#rules li {margin-top: 0.5em; }
#rules td {vertical-align: top; padding: 0.2em;} 
#rules ul.nosymb { list-style-type:none;   list-style-image: none;}
#rules p { margin-bottom: 0.5em;}

#rules .clear { clear:both; } 

#rules .example {font-family: 'The Missus Hand Oblique', serif; font-size: 1.3em; font-style: italic; line-height:90%; 
    background-image: url('/game-plugins/lorenzo/1.0.1/images/rules/example_background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0.5em;}
#rules .example p {line-height:90%}
#rules .example li {line-height:90%}
#rules .outlined {text-shadow: 1px  1px 1px black,  1px -1px 1px black,    -1px  1px 1px black,    -1px -1px 1px black;}
#rules .referback {float:right; font-size:1.5em; font-weight:bold; margin-right:1em; color: #267D38; }
.rules .inlinepic { height: 1.2em; margin-left: 0.1em; margin-right: 0.1em;}
.rules .biginlinepic { height: 2em; margin-left: 0.2em; margin-right: 0.2em; margin-bottom: -0.4em; }
#rules .listsymbol { height: 0.7em; margin-left: 0.2em; margin-right: 0.2em; margin-bottom: 0em; }
#rules .roundbox { padding: 0.2em; border-radius:1em; }
#rules .maxwidth { display:inline-block; width:98%; }
#rules .outlined {
  font-size:1.5em;
  color: white;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}     

#rules .background-list { 
  font-size: 2.5em;
  font-weight: bold;
  font-family: 'The Missus Hand Oblique', serif;
  float: left; width: 1em; height: 1em; 
  background-image: url('/game-plugins/lorenzo/1.0.1/images/rules/list_background.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: center;
  padding:0.2em;
  clear:left;
}
#rules .background-list.header { font-size: 1em; margin-top: -0.4em;}


#rules .note {
  background-image: url('/game-plugins/lorenzo/1.0.1/images/rules/note_background.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  width: 12em;
  height: auto;
  padding: 1.5em;
  padding-top:3em;
}
#rules .n20 {width: 20em; height:10em; padding-top:5em;}
#rules .n30 {width: 30em; height:15em; padding: 2.5em; padding-top:7em;}
#rules .note.phases {width: 19.5em; height:auto; padding: 2.5em; padding-bottom:2em; padding-right:1.5em; float:right; margin-left:1em; }
#rules .note.council {width: 80%; height:auto; padding: 3em; padding-bottom:2em; padding-right:2em; padding-left: 4em; float:left; margin-left:5%; }

#rules .w60 { width: 60%; float: right; margin-left: 0.5em; }
#rules .w55 { width: 55%; float: right; margin-left: 0.5em; }
#rules .w50 { width: 50%; float: right; margin-left: 0.5em; }
#rules .w45 { width: 45%; float: right; margin-left: 0.5em; }
#rules .w40 { width: 40%; float: right; margin-left: 0.5em; }
#rules .w35 { width: 35%; float: right; margin-left: 0.5em; }
#rules .w30 { width: 30%; float: right; margin-left: 0.5em; }
#rules .w20 { width: 20%; float: right; margin-left: 0.5em; }
#rules .w15 { width: 15%; float: right; margin-left: 0.5em; }


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

/* split content */
#rules .content {width:45%; float:left; margin-right:1em;}
#rulesContainer #rules .content { width: 95%; }


/* specific pictures */
#rules .action { float: left; margin-top: 0em; margin-right: 0.5em; width:5em; }
#rules .territories { width: 80%; margin-left: 10% }
#rules .example_building { float: right; margin-left: 0.5em; width:20%; margin-top:-2em;}
#rules .buildings { width: 69%; margin-left: 5% }
#rules .characters { width: 69%; margin-left: 5% }
#rules .ventures { width: 69%; margin-left: 5% }
#rules .example_venture { float: right; margin-left: 0.5em; width:6em; margin-top:0em;}
#rules .tower_floor { margin: 0.5em; margin-right: 1em; width:4em; }
#rules .tower_placements { float: right; margin-left: 0.5em; width:10em; margin-right:-2em;}
#rules .harvest_production_area { float: right; margin-left: 0.5em; width:20em; margin-right:0em;}
#rules .harvest_production_placement { margin-left: 15%; width:60%; margin-right:20%; margin-top:-0.5em;}
#rules .personal_bonus { float:right; margin-left: 0.5em; width:3em; }
#rules .example_permanent_effects_terr { width: 89%; margin-left: 5% }
#rules .example_permanent_effects_prod { float:right; margin-left: 1em; width: 60%; }
#rules .market { float:left; margin-right: 1em; width: 20em; }
#rules .marketpiece { width: 80%; margin-left: 10%}
#rules .marketpiece_summary { float:left; margin-right: 1em; width: 4em;}
#rules table .markettable {table-layout: fixed; width: 100%; }
#rules .markettable td {width: 25%; }
#rules .council { float:right; margin-left: 1em; width: 20em; }
#rules .councilprivs { margin-left: 10%; width: 80%; }
#rules .vatican1 { width: 69%; margin-left: 5% }
#rules .vatican2 { float:right; margin-left: 1em; width: 20em; }
#rules .vatican3 { width: 69%; margin-left: 5% }
#rules .vatican4 { width: 90%; margin-left: 5%; }
#rules .endpoints_territories { width: 60%; margin-left: 10%; }
#rules .endpoints_characters { width: 60%; margin-left: 10%; }
#rules .endpoints_ventures { width: 60%; margin-left: 10%; }
#rules .endpoints_military { float: right; margin-left: 2em; width: 5em; margin-right: 3em; margin-top:-2.5em; }
#rules .endpoints_resources { width: 60%; margin-left: 10%; }
#rules .leadercard { float: right; margin-left: 2em; width: 12em; margin-right: 1em; margin-top:-2.5em; }
#rules .excomm_header { width: 60%; margin-left: 20%; margin-bottom:0.5em; }

/* appendix */

#rules .effect { width:46%; float:left; margin-right:1%; margin-bottom:1em; background-color: #EBE3DA; border-left: 3px solid #958E80; border-bottom: 3px solid #958E80; padding: 0.5em; min-height: 7.5em;}
#rules .effect .effectimage { float: left; margin-right:0.5em; height: 3em; margin-bottom:1.5em;}
#rules .effect .effectdesccription { display: inline; }
#rulesContainer  #rules .effect { width: 95%; }

#rules .leader { width:46%; float:left; margin-right:1%; margin-bottom:1em; background-color: #EBE3DA; border-left: 3px solid #958E80; border-bottom: 3px solid #958E80; padding: 0.5em; min-height: 7.5em;}
#rules .leader .leaderimage { float: left; margin-right:0.5em; width: 10em; margin-bottom:0.5em;}
#rules .leader .leaderdesccription { display: inline; }
#rules .leader .leadername { margin-top: 0.2em; font-family: 'The Missus Hand Oblique', serif;  font-weight: bold;  font-size: 2em; }
#rulesContainer  #rules .leader { width: 95%; }

#rules .vatican { width:30%; float:left; margin-right:1%; margin-bottom:1em; background-color: #EBE3DA; border-left: 3px solid #958E80; border-bottom: 3px solid #958E80; padding: 0.5em; min-height: 7.5em;}
#rules .vatican .vaticanimage { float: left; margin-right:0.5em; width: 28%; margin-bottom:0.5em;}
#rules .vatican .vaticandesccription { display: inline; }
#rulesContainer  #rules .vatican { width: 95%; }

.rules .attention { color:red; }
.rules .left { float: left; margin-right:0.5em; }
.rules .hints4Handling div { display:inline-block; }
.rules .hints4Handling p { display:inline; }