/* 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 { padding: 0.5em; text-shadow: none; }

.rules p { margin-bottom: 0.5em; }

.rules h1 {
  background-image: url(/game-plugins/discordia/1.0.1/images/rules/header_background.gif);
  background-size: 100% 100%;
  border: none;

    font-family: 'Arial', sans-serif;
    color: #84482A;
    font-style: italic;
    text-transform: uppercase;
    padding: 0px;
    font-size: 2.5em;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
#sidebarPanel #rules h1 { font-size: 1.5em; background-image: none;}
.rules .h1_mod { background-image: url(/game-plugins/discordia/1.0.1/images/rules/header_font_background.jpg); background-size: 100% 100%; padding: 0.02em 1em 0.01em 1em;}
#sidebarPanel #rules .h1_mod { background-image: none;}


.rules h2 { 
   font-family: 'Arial', sans-serif;
    color: #69262B;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.rules h3 { 
  font-family: 'Arial', sans-serif;
  color: #69262B;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.rules h4 { 
  font-family: 'Arial', sans-serif;
  color: black;
  font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0.2em;
   text-align: left; 
   font-size: 1.1em;
}
/* used for intro: */
.rules .intro {background-color: #84482A; border: 2px dotted black; padding: 1em; color: white;}
.rules h5 { 
  font-family: 'Arial', sans-serif;
  color: white;
  font-size: 2em;
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 1em;
  font-weight: bold;
  text-transform: uppercase;
  font-style: italic;
}
.rules h6 { 
  font-family: 'Arial', sans-serif;
  color: white;
  font-size: 1.5em;
  font-style: normal;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* two columns in main rules - one in sidebar */
.rules .twocol { column-count: 2; -moz-column-count: 2;   -webkit-column-count: 2;}
#sidebarPanel #rules .twocol {column-count: 1; -moz-column-count: 1;   -webkit-column-count: 1;}


#rules .cover { width: 60%; margin-left: 20%; }
#rulesPage .cover { width: 40%; margin-left: 25%; }

/* 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 ul {
  margin: 1em 0em 1em 2em;
  list-style-image: url('/game-plugins/discordia/1.0.1/images/rules/list_icon_u.png');
}

.rules .content ul {
    margin: 1em 0em 1em 1em;
    list-style-type: none;
    list-style-image: none;
}    

/* link colors */
.rules a:link {color: #84482A; font-weight:bold;} 
.rules a:visited {color: #84482A; font-weight:bold;}
.rules a:hover {color: #84482A; font-weight:bold;}
.rules a:active {color: #84482A; font-weight:bold;}

 
.rules .setupTilesTable table, .setupTilesTable td, .setupTilesTable tr 
   { border: 1px solid black; border-collapse: collapse; text-align: center;}


.rules .components {float: left; width: 48%; margin-right: 2%; margin-bottom: 1em;}


/* boxes */
#sidebarPanel #rules .example { display:none; }

.rules .flex {  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em;}
.rules .flexsetup {  flex: 2 2 48% ; }
.rules .flex1left {  flex: 3 2 60% ; }
.rules .flex1right { flex: 2 2 37% ; }
.rules .flex2left {  flex: 2 2 40% ; }
.rules .flex2right { flex: 3 3 55% ; }
.rules .flexfullwidth { flex: 1 1 95% ; }
.rules .flexpriv1DEleft {  flex: 0 0 50% ; margin-right: 1em; }
.rules .flexpriv1DEright {  flex: 1 1 40% ; }

.rules .notebox {
  background-color: #E85B66;
  padding: 0.5em;
  border: #605D5A dotted 2px;
  font-style: italic;
}
.rules .twodice {float: right; width: 30%; margin-left: 1em;}
.rules .waiver  {float: right; width: 30%; margin-left: 1em;}
.rules .notebox.takeCityTile1 {width: 50%; float: left; }
.rules .notebox.takeCityTile3 {width: 50%; float: left; }
 
.rules .picturebox {
  background-color: #EB945B;
  padding: 0.5em;
  border: #605D5A dotted 2px;
  font-style: italic;
}
.rules .picturebox.saturnalia {float: right; width: 7em; margin-left: 1em;}
.rules .takeCityTile1 img { width: 35%; float: left; margin-right: 1.8em; }
.rules .picturebox.takeCityTile2 { width: 40%; float: left; margin-right: 1em; }
.rules .picturebox.deployment1 { width: 33%; float: right; margin-left: 1em; }
.rules .picturebox.takeCityExpansion1 { width: 60%; float: left; margin-right: 1em; }
.rules .picturebox.develop1 { width: 40%; float: right; margin-left: 1em; }
.rules .develop2 { float: right; width: 4em; margin-left:  1em; }
.rules .picturebox.takeStars1 { width: 20%; float: right; margin-left: 1em; margin-top: -2.5em; }
.rules .picturebox.seasonsBoat1 { width: 33%; float: right; margin-left: 1em; }
.rules .seasonsBoatDie { width: 2em; float: left; margin-right: 1em;}
.rules .picturebox.specialDeployment { width: 55%; float: right; margin-left: 1em; }
.rules .specialDeployment1 { width: 5em; float: right; margin-left: 1em;}
.rules .specialDeployment2 { width: 51%; float: right; margin-left: 1em; }
.rules .picturebox.multipleCityExpansions1 { width: 25%; float: left; margin-right: 1em; margin-bottom: 1em; }
.rules .picturebox.expeditionAndDevelopment1 { width: 25%; float: left; margin-right: 1em; margin-bottom: 1em; }
.rules .picturebox.fulfillDecree1 { width: 50%; float: right; margin-left: 1em; }
.rules .picturebox.fulfillDecree1 img { width: 60%; float: left; margin-right: 1em; }

.rules .militaryTowerFlex { flex: 1 1 45% ; }
.rules .picturebox.militaryTower1 { min-height: 8em; }
.rules .picturebox.militaryTower1 img { width: 50%; float: left; margin-right: 1em; }
.rules .militaryTower2 { width: 50%; float: right; margin-left: 1em; }
.rules .militaryTower2Die { width: 5em; float: right; margin-left: 1em;}
.rules .militaryTower3 { width: 50%; float: right; margin-left: 1em; }
.rules .militaryTower3Die { width: 35%; float: right; margin-left: 4%;}

.rules .picturebox.tradingTower1 { width: 35%; float: left; margin-right: 1em; }
.rules .picturebox.privileges1  { width: 55%; float: left; margin-right: 1em; }
.rules .picturebox.privileges1 img { width: 70%; float: right; margin-left: 0em; }
.rules .picturebox.privileges1DE  { width: 100%; } /* this is flex in DE rules */
.rules .picturebox.privileges1DE img { width: 70%; float: right; margin-left: 0em; }
.rules .picturebox.privileges2  { width: 50%; float: left; margin-right: 1em; min-height: 7em; }
.rules .picturebox.aqueduct1  { width: 40%; float: right; margin-left: 1em; }

.rules .picturebox.germanicRaid  { width: 62%; float: right; margin-left: 1em; margin-bottom: 0.5em;}
.rule .germanicRaid1  { width: 100%;  margin-right: 1em;}
.rules .germanicRaid2  { width: 15%; float: right; margin-left: 0.5em; margin-top: -3em; }
.rules .germanicRaid3  { width: 15%; float: right; margin-left: 1em; }
.rules .germanicRaid4  { width: 16%; float: right; margin-left: 1em; }

.rules .picturebox.infrastructure1  { width: 60% ; float: left; margin-right: 1em; margin-bottom: 0.2em;}
    
.rules .picturebox.newYear1  { width: 18em; float: left; margin-right: 3em; }

.rules .flexdecree { flex: 1 1 30% ; background-color: #E5D9B7; padding: 0.5em;}
#sidebarPanel #rules .flexdecree { flex: 1 1 95% ; }
.rules .flexdecree img { width: 10em; float: left; margin-right: 1em;}
    
.rules .flex.down {  flex-direction: column; max-height: 50em;}
.rules .flexsymbol { flex: 2 2  42% ; background-color: #E5D9B7; padding: 0.5em;}
.rules .flexsymbol.s1 { flex: 1 2  30% ; }
.rules .flexsymbol.s3 { flex: 2 2  50% ; }
#sidebarPanel #rules .flexsymbol { flex: 1 1 95% ; }
.rules .flexsymbol img { width: 10em; float: left; margin-right: 1em;}
.rules .flexsymbol.s3 img { width: 10em; float: left; margin-right: 1em;}
.rules .flexsymbol.s1 img { width: 6em; float: left; margin-right: 1em;}
.rules .symbolsPerm { text-align: center; font-family: 'Arial', sans-serif; color: #69262B; font-weight: bold; font-size: 1.25em;}
.rules .symbolsPerm img { width: 3em; margin-top: 1em;}