/* 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 */
   
/* 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 {
    color: white;
    background-image: url('images/rules/header_background_blue.jpg');
    background-color: #FDE7B6;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    text-align: left;
    padding: 4px;
    font-size: 2.5em;
    font-family: sans-serif;
    border: none;
    margin-top: 0em;
    margin-bottom: 0.5em;
}
#sidebarPanel #rules .chapter .title
{
    background-size: cover;
    font-size: 2em;
}

.rules h1 {
    color: white;
    background-image: url('images/rules/header_background_blue.jpg');
    background-color: #FDE7B6;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    text-align: left;
    padding: 4px;
    font-size: 2.5em;
    font-family: sans-serif;
    font-weight: bold;
    border: none;
    margin-top: 0em;
    margin-bottom: 0.5em;
}
.rules .appendix h1 { 
  background-image: url('images/rules/header_background_white.jpg');
  background-color: white;
  clear:both;
}
#sidebarPanel #rules .appendix h1
{
    background-size: cover;
    font-size: 2em;
}

.rules h2 {
    color: white;
    background-color: #346973;
    font-family: sans-serif;
    margin-top: 0em;
    margin-bottom: 0.5em;
    font-size: 2em;
    padding: 1px;
    margin-top: 0.5em;
}
.rules h2.missionheader {
    background-image: url('images/rules/header_background_mission.jpg');
    background-color: #FDE7B6;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}
.rules h2.specialistheader {
    background-image: url('images/rules/header_background_specialist.jpg');
    background-color: #FDE7B6;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

#rules p.clear { clear:both; }

/* numbered list with the little planet as background */
#rules .background-list { 
  font-size: 2em;
  font-weight: bold;
  color: white;
  font-family: 'Bebas Neue', sans-serif;
  float: left; width: 1em; height: 1em; 
  background-image: url('images/rules/list_background.png'); 
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: center;
  padding:0.2em;
  padding-left: 0.1em;
  clear:left;
  margin-right: 0.2em;
}

/* inline pictures */
.rules .inlinepic { height: 1.2em; margin-left: 0.1em; margin-right: 0.1em;}

/* don't display examples in the sidebar */
#rules .example { padding: 0.8em; border-radius:1em; background-color: #D5C9A9; border: 3px solid #CB9B67; margin-bottom: 1em;}
#sidebarPanel #rules .example { display:none; }
#rules .example h4 {background-color: #CB9B67; color: black;}
#rules .example h2 {background-color: #CB9B67; color: black;}

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

/* dark blue with white letter */
#rules .darkbox { padding-left: 0.2em; padding-right: 0.2em; border-radius:3px; background-color: #231F20; font-size: 1.2em; font-weight: bold; color:white; }

/* some image definitions */
#rules .titlepic { float:right; width: 30%; margin-right: 2em; margin-top: -3em;}
#rules .phase2 { float:right; margin-left: 1em; width: 50%}
#rules .invest { float:right; margin-left: 1em; }
#rules .lab { float:right; margin-left: 1em; width: 8em;}
#rules .mission { float:left; margin-right: 0.5em; width: 9em; margin-bottom: 0.5em;}
#rules .specialist { float:right; margin-left: 0.5em; width: 14em;}
#rules .phase2setup { float:right; margin-left: 0.5em; margin-right:1em; width: 17em;}
#rules .missionright { float:right; margin-left: 0.5em; width: 9em; margin-bottom: 0.5em; margin-top: 0.5em;}
#rules .gameendleft { float:left; margin-right: 0.5em; width: 9em; margin-bottom: 0.5em; margin-top: 0.5em;}

#rules .missionstack { float:right; margin-left: 4em; }
#rules .missionstack img { float:left; margin-right: 0.5em; width: 7em; margin-bottom: 0.5em; margin-left:-3em;}

/* appendix stuff */

#rules .flexcontainer {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.flexbox {
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex;
}


#rules .gameend { width:46%; float:left; margin-right:1%; margin-bottom:1em; background-color: #E7E1CF; padding: 0.5em; min-height: 7.5em;  display: -webkit-flex;   display: -ms-flexbox;  display: flex;}
#rules .gameend .card { float: left; margin-right: 1em; width: 10em; margin-bottom:0.5em;}
#rulesContainer  #rules .gameend { width: 95%; }

#rules .appendix .lab { float:right; margin-left: 0.5em; width: 6em; margin-bottom:0.5em;}

#rules .missioncardlist { width:18%; float:left; margin-right:0.5%; margin-bottom:1em; padding: 0.2em; border-radius: 2px; background-color: #E7E1CF;   display: -webkit-flex;   display: -ms-flexbox;  display: flex;}
#rules .missioncardlist.empty { background-color: white; }
#rules .missioncardlist .card { width: 100%; margin-bottom:0.5em; }
#rulesContainer  #rules .missioncardlist { width: 47%; }