/* 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 */
   
/* moonhouse for headers */
@font-face {
  font-family: 'moonhouse';
  src: local('moonhouse'), 
       url('/game-plugins/betacolony/1.0.1/fonts/moonhouse.ttf') format('truetype'); 
}
   
/* Menlo for Examples */
@font-face {
  font-family: 'Menlo';
  font-weight: bold;
  src: local('Menlo'), local('Menlo'),
       url('/game-plugins/betacolony/1.0.1/fonts/Menlo-Regular.ttf') format('truetype'); 
}      

/* Volt's Orbitron font for numbers */
@font-face {
  font-family: 'Orbitron';
  font-weight: bold;
  src: local('Orbitron'), local('Orbitron'),
       url('/game-plugins/betacolony/1.0.1/fonts/orbitron-v14-latin-700.ttf') format('truetype'); 
}      

       
.rules .chapter .title {
  font-family: 'moonhouse', sans-serif;
  text-align: center;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: black; 
  text-transform: uppercase;
  padding: 6px;
  font-size: 3em;
  background-image: url(/game-plugins/betacolony/1.0.1/images/rules/header_background.jpg);
  background-size: 100% 100%;
  color: black;
}
#sidebarPanel #rules .chapter .title {
  padding: 2px;
  font-size: 2em;
}

.rules h1,h2,h3,h4 {
  font-family: 'moonhouse', sans-serif;
  text-align: left;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: black; 
  text-transform: uppercase;
}

.rules h2 {
  padding: 2px;
  font-size: 2.5em;
  text-align: center;
}
 #sidebarPanel #rules h2 {
  padding: 2px;
  font-size: 1.75em;
}

.rules h3 {
  font-size: 2em;
  margin-top: 0em;
  margin-bottom: 0em;
}

.rules h4 {
  font-size: 1.5em;
  margin-top: 0em;
  margin-bottom: 0em;
}
 
.rules .betatext {font-family: 'Menlo', sans-serif; font-size: 1.2em;}
.rules .center {text-align: center; }
 
/* don't display examples in the sidebar */
.rules .example { 
  background-color: transparent; 
  background-image: url(/game-plugins/betacolony/1.0.1/images/rules/box_background.png);
  background-size: 100% 100%;
  color: white;
  padding: 3.5em 2em 3em 2.5em;
  font-family: 'Menlo', sans-serif;
  font-style: italic;
}
#sidebarPanel #rules .example { display:none; }

.rules .example.high {background-image: url(/game-plugins/betacolony/1.0.1/images/rules/box_background_high.png);}
.rules .example.move {
  background-image: url(/game-plugins/betacolony/1.0.1/images/rules/box_background_high.png);
  float:right;
  margin: 0.5em 1em 0.5em 1em;
  width: 45%;
}
.rules .example_move {width: 80%; margin-left: 10%; margin-right:10%;}

.rules .example.majority {
  background-image: url(/game-plugins/betacolony/1.0.1/images/rules/box_background_high.png);
  float:right;
  margin: 0em 1em 0.5em 1em;
  padding: 3.5em 1em 2em 1em;
  width: 30%;
}

.rules .example.pods {
  background-image: url(/game-plugins/betacolony/1.0.1/images/rules/box_background_high.png);
  float:right;
  margin: -2em 1em 0.5em 1em;
  padding: 3.5em 1em 2em 1em;
  width: 40%;
}
.rules .example_podbuilding {width: 90%; margin-left: 1%; margin-right:3%;}

.rules .example.influence {
  background-image: url(/game-plugins/betacolony/1.0.1/images/rules/box_background_high.png);
  float:right;
  margin: 2.5em 1em 0.5em 1em;
  padding: 3.5em 2em 2em 2em;
  width: 35%;
}
.rules .example_colony_influence {width: 53%; margin-right: 2%;}


.rules .cyclecard_box {
  background-color: transparent; 
  background-image: url(/game-plugins/betacolony/1.0.1/images/rules/box_background_high.png);
  background-size: 100% 100%;
  color: white;
  font-family: 'Menlo', sans-serif;
  float: left;
  margin: 0em 1em 0.5em 1em;
  padding: 3.5em 1em 2em 1em;
  width: 40%;
  text-align: right;
}
.rules .cyclecard {width: 60%; float: right; margin-left: 0.5em; margin-top: -0.1em;}


.rules .achievement_box {
  background-color: transparent; 
  background-image: url(/game-plugins/betacolony/1.0.1/images/rules/box_background_high.png);
  background-size: 100% 100%;
  color: white;
  font-family: 'Menlo', sans-serif;
  float:right;
  margin: 0em 1em 0.5em 1em;
  padding: 3.5em 1em 2em 1em;
  width: 40%;
}
.rules .achievement {width: 55%; float: left; margin-right: 0.5em; }


.rules .clearleft { clear: left; }

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


/* lists */
.rules ul {
  margin:1em 0em 1em 1em; 
  list-style-image: url('/game-plugins/betacolony/1.0.1/images/rules/list_symbol.png');
}
.rules li { margin-bottom: 0.2em; }

.rules ol {margin:1em 0em 1em 0.5em; }
.rules ol.roman { list-style-type: upper-roman; }

.rules ul.content {  list-style-type: none; }
.rules ul.content ul {  list-style-type: none; }

/* customized list - white capital numbers/alpha on black hexagon */
.rules ol.hexlist {list-style: none; counter-reset: li; margin-left: 3.1em; text-indent: -3.1em; }
.rules ol.hexlist>li::before {
  content: counter(li); 
  font-family: 'Orbitron', sans-serif; color: white; font-weight: bold; text-align:center; font-size:1.3em;  
  width: 2.5em;  height:1.75em; 
  background-color: black;
  background-color: transparent;
  background-image: url(/game-plugins/betacolony/1.0.1/images/rules/list_icon_background.png);
  background-size: 100% 100%;
  padding:0.2em 0.5em 0.2em 0.5em; 
  margin-right: 0.3em;
}
.rules ol.hexlist>li {counter-increment: li; }

.rules ol.hexlist.alpha>li::before {
  content: counter(li, upper-alpha);
}

.rules .hexback {
  font-family: 'Orbitron', sans-serif; color: white; font-weight: bold; text-align:center;   
  background-color: transparent;
  background-image: url(/game-plugins/betacolony/1.0.1/images/rules/list_icon_background.png);
  background-size: 100% 100%;
  padding:0.2em 0.5em 0.2em 0.5em; 
}

.rules .greybox {
  color: white;
  background-color: #444C64;
  padding: 1em;
  border-radius: 0.5em;
  margin: 0.5em;
  border: 2px solid white;
}

.rules table.betatable {
  color: black;
  background-color: #E4D6D2;
  border: 1px solid black;
  border-collapse: collapse;
  margin-top: 0.5em;
  padding: 0.4em 1em 0.4em 1em;
}

.rules table.betatable td  {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 0.4em 1em 0.4em 1em;
}

.rules .bigfont { font-size: 1.5em; font-weight: bold;}

/* some general picture definitions */
.rules .examplepicright { width: 30%; float: right; margin-left: 2em;}
.rules .examplepicleft { width: 30%; float: left; margin-right: 2em; }
.rules .examplepicfull { width: 90%; margin-left: 3%; margin-right: 3%}
.rules .low {margin-bottom: -1em;}
.rules .inlinepic { height: 1.2em; margin-left: 0.2em; margin-right: 0.2em;}
.rules .biginlinepic { height: 2em; margin-left: 0.2em; margin-right: 0.2em; margin-bottom: -0.4em; }


/* special pictures */
.rules .beta {width: 45%; float:right; margin-right: -3em; margin-left:1em; margin-top: -4em; overflow: hidden; }
.rules .components1 {width: 65%; float:right; margin-right: 0.5em; margin-left:1em;}
.rules .components2 {width: 88%; float:right; margin-right: -0.5em; margin-left:1em;}
.rules .setup {width: 95%; margin-left:2%;}
.rules .dice {width: 10em; float:right; margin-right: 0.5em; margin-left:1em;}
.rules .loc_gan_de {width: 15em; float:right; margin-right: 0.5em; margin-left:1em; border-radius: 0.75em; }
.rules .loc_jyo {width: 15em; float:right; margin-right: 0.5em; margin-left:1em; border-radius: 0.75em; }
.rules .loc_nebra {width: 15em; float:right; margin-right: 0.5em; margin-left:1em; border-radius: 0.75em; }
.rules .loc_manufactory {width: 15em; float:right; margin-right: 0.5em; margin-left:1em; border-radius: 0.75em; }
.rules .loc_ridback {width: 13em; float:right; margin-right: 0.5em; margin-left:1em; border-radius: 0.75em; }
.rules .loc_nexus {width: 20em; float:right; margin-right: 0.5em; margin-left:1em; border-radius: 0.75em; }
.rules .game_element {width: 10em; float:right; margin-right: 0.5em; margin-left:1em; margin-top: -0.5em;}

/* bonuses */
/* infoboxes flex container - align the height of side by side boxes */
.rules .flexcontainer {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   justify-content: space-between;
}
.rules .bonusbox { flex: 4 1 40%;  margin-right: 1%; margin-top: 0.5em; background-color: #E4D6D2; padding: 0.5em; text-align: center;}
.rules .bonusbox.icon2 { flex: 2 1 25%; }
.rules .bonusbox.icon1 { flex: 1 1 12%; }
.rules .bonusbox.icon1w { flex: 2 1 25%; }
#sidebarPanel #rules .bonusbox { flex: 1 1 95%; }
#sidebarPanel #rules .bonusbox.icon2 { flex: 2 1 60%; }
#sidebarPanel #rules .bonusbox.icon1 { flex: 1 1 30%; }
#sidebarPanel #rules .bonusbox.icon1w { flex: 1 1 45%; }



.rules .bonusbox.fifth { flex: 1 1 17%; }
#sidebarPanel #rules .bonusbox.fifth { flex: 1 1 45%; }
.rules .bonus { width:5em; margin-left: 0.3em; margin-right: 0.3em;}

.rules .flexcontainer.colonybonus {max-width: 45em;}
#sidebarPanel #rules .flexcontainer.colonybonus {max-width: 98%}
.rules .colonypic { flex: 1 1 100%; margin-top: 0.5em; max-width: 100%; text-align: center;}
.rules .colonytext { flex: 1 1 18%; margin: 1%; max-width: 18%; text-align: center;}
.rules .colonytext.high { margin-top: -3.5em;}
#sidebarPanel #rules .colonytext.high { margin-top: -2.5em;}

#rules .paragraph.cycleCardAppendix { width: 31%; float: left; margin-right: 1em; margin-top: 0.5em; }
#rulesContainer #rules .paragraph.cycleCardAppendix { width: 95%; }
#rules .imageleft10 img { width: 10em; float: left; margin-right: 1em; }

#rules .paragraph.matAppendix { width: 100%; float: left; margin-right: 1em; margin-top: 0.5em; }
#rulesContainer #rules .paragraph.matAppendix { width: 95%; }
#rules .imageleft20 img { width: 20em; float: left; margin-right: 1em; }

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

.rules[showRules=summary] .bothNotFull { display: none; }
.rules[showRules=both] .bothNotFull { display: inline; }
.rules[showRules=full] .bothNotFull { display: none; }
.rules[showRules=summary] .fullNotBoth { display: none; }
.rules[showRules=both] .fullNotBoth { display: none; }
.rules[showRules=full] .fullNotBoth { display: inline; }