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

/* Van Helsing for headers */
@font-face {
  font-family: 'VanHelsing';
  src: local('VanHelsing'),
       url('/game-plugins/saintpetersburg2/1.0.0/fonts/VanHelsing.ttf') format('truetype'); 
}

.rules .chapter .title, .rules h1, .rules h2 {
  font-family: 'VanHelsing', serif;
  font-weight: normal;
  color: black;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-size: 3em;   
  background-image: url(/game-plugins/saintpetersburg2/1.0.0/images/rules/header_background.jpg);
  background-size: 100% 100%;
}
.rules .chapter .title, .rules h1 {
  background-image: url(/game-plugins/saintpetersburg2/1.0.0/images/rules/header_background0.jpg); 
  color: #F2C364;
  text-align: center;
}
#sidebarPanel #rules .chapter .title, 
#sidebarPanel #rules h1,
#sidebarPanel #rules h2 {
  font-size: 2.5em; 
  font-weight: normal;
}

.rules h3 {  
  font-family: 'VanHelsing', serif; 
  font-weight: normal;
  font-size: 2em;   
}

.rules h4 { clear:left; }

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

.ui-popup .rules {
    width: 35em;
}

#rules .SP2gamecard{
    width: auto;
    height: 90px;
    float: right;
    margin-left: 1em;
    margin-right: 5em;
    margin-top: -1em;
}

.rules .cardImg {
    width: 150px;
    height: 240px;
}
#rules .cardImg {
    width: 75px;
    height: 120px;
}

#rules .needTranslation{
    background-color: darkorange;
}

#rules .marketValueImg {
    width: 90px;
    height: 35px;
}

#rules .smallSquare {
    width: 40px;
    height: 40px;
}

.rules .obstacleImg {
    width: 150px;
    height: 150px;
}
#rules .obstacleImg {
    width: 75px;
    height: 75px;
}

#rules .appendix {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#rules .appendix.cards .paragraph {
    width: calc(97% / 1);
    display: flex;
    align-items: center;
    padding: 0.2em;
    margin: 0.2em;
}

.rules .paragraph .clarification {
    margin-top: 1em;
    font-size: smaller;
    font-style: italic;
}

.rules .paragraph .deviation {
    overflow: auto;
}

.rules .paragraph {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;    
}

    .rules .paragraph .text {
        margin: auto 1em;
    }

#rules .mirror {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    display: Inline-block;
}

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

/* don't display examples in the sidebar */
#sidebarPanel #rules .example { display:none; }
.rules .example { 
  font-style: italic;
}
.rules .example.scoring { width: 155px; float: right; margin-left: 1em;}

/* card list flex container - align the height of side by side boxes */
.rules .cardlist {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.rules .cardlist .paragraph { width: 47%; float: left; margin-right: 1em; margin-top: 0.5em; }
.rules .cardlist .paragraph .cardImage { float: left; width: 5em; margin-right: 0.5em;}
#sidebarPanel #rules .cardlist .card { width: 95%; }

/* infoboxes flex container - align the height of side by side boxes */
.rules .infoboxes {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.rules .infoboxes .infobox { width: 47%; float: left; margin-right: 2%; margin-top: 0.5em; }
.rules .infoboxes .infobox .cardImage { float: right; height: 7.5em; margin-left: 0.5em;}
.rules .infoboxes .infobox .marketsymbols { float: right; width: 20em; margin-left: 0.5em; margin-top:0.5em;}
#sidebarPanel #rules .infoboxes .infobox { width: 97%; }


/* 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 .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; }
.rules .biginlinepic_back { height: 2em; margin-left: -1.3em; margin-right: 0.2em; margin-bottom: -0.4em; }
.rules .biginlinepic_start { height: 2em; margin-left: 0.2em; margin-right: 0em; margin-bottom: -0.4em; }
.rules .biginlinepic_mid { height: 2em; margin-left: 0em; margin-right: 0em; margin-bottom: -0.4em; }
.rules .biginlinepic_mid2 { height: 2em; margin-left: -0.5em; margin-right: -0.5em; margin-bottom: -0.4em; }
.rules .biginlinepic_end { height: 2em; margin-left: 0em; margin-right: 0.2em; margin-bottom: -0.4em; }
.rules .msymbol_inline { height: 2.5em; margin-left: 0.1em; margin-right: 0.1em; margin-bottom: -0.4em; }


/* some specific picture definitions */
.rules .nobles_vp { width: 20em; float: right; margin: 1em;}
.rules .marketSymbols { width: 20em; float: right; margin: 1em;}
.rules .nsoc_sack { height: 90px; float: right; margin-left: 1em; margin-right: 3em; }
#rules .nsocTurnorder { width: 100px; height: 100px; float: left; margin-right: 1em; margin-top: 0.5em;}
.rules .marketExample { width: 15em; float: left; margin-right: 1em; }
.rules .cardlayout_cost { width: 35em; float: left; margin-right: 1em; }
.rules .cardlayout_income { width: 33em; float: right; margin-left: 1em; margin-top: -1em; }
.rules .cardlayout_functions { width: 7em; float: right; margin-left: 1em; margin-right: 25em; margin-top: -1.2em; }
.rules .cardlayout_workersymbols { width: 15em; float: left; margin-right: 1em; }
.rules .cardlayout_czar { width: 7em; float: right; margin-left: 1em; margin-top:-2em; margin-right:1em;}