/* 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
   #rulesPage: ingame rules page display
   #panelRules: ingame rules sidepanel display
   #popup.rules: popup with rules extract only */

/* agency fb for headers*/
@font-face {
  font-family: 'UWC Header';
  src: local('UWC Header'), local('Agency FB'),
       url('/game-plugins/underwatercities/1.2.2/fonts/agency-fb.ttf') format('truetype'); 
}
   
/* agency fb bold for headers*/
@font-face {
  font-family: 'UWC Header bold';
  font-weight: bold;
  src: local('UWC Header bold'), local('Agency FB bold'),
       url('/game-plugins/underwatercities/1.2.2/fonts/agency-fb-bold.ttf') format('truetype'); 
}

/* agency fb for headers*/
@font-face {
  font-family: 'UWC Text';
  src: local('BarlowSemiCondensed Regular'),
       url('/game-plugins/underwatercities/1.2.2/fonts/BarlowSemiCondensed-Regular.ttf') format('truetype'); 
}

#rules .cover {
  background-image: url(/game-plugins/underwatercities/1.2.2/images/rules/background_underwater.jpg);
  background-position: center;
  background-size: cover;
  color: #99C1DA;
  text-align: left;
  font-family: 'UWC Text';
  font-size: 1.25em;
  padding: 1em;
}  

#rules .yellowtext {
  color: #AD9F03;
}
#rules .medium{font-size: 1.25em;}
#rules .big{font-size: 1.5em;}
#rules .verybig{font-size: 2em;}

#rules .pinknumbercircle {
  color: white;
  background-color: #E6007D;
  font-weight: bold;
  font-size:1.2em;
  padding-left:0.2em; padding-right:0.2em;
  border-radius: 50%;
}

#rules .chapter .title {
  background-image: url(/game-plugins/underwatercities/1.2.2/images/rules/header_background.jpg);
  background-position: center;
  background-size: cover;
  color: white;
  text-align: left;
  padding: 7px;
  font-size: 3em;
  font-family: 'UWC Header bold', sans-serif;
  font-weight: bold;
  min-height: 1em;
  line-height: 1em;
  border-radius: 10px;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#rules h1 {
  background-image: url(/game-plugins/underwatercities/1.2.2/images/rules/header_background.jpg);
  background-position: center;
  background-size: cover;
  color: white;
  text-align: left;
  padding: 7px;
  font-size: 2.5em;
  font-family: 'UWC Header bold', sans-serif;
  font-weight: bold;
  min-height: 1em;
  line-height: 1em;
  border-radius: 10px;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#rules h2 {
  color: #E6007D;
  background-color: #BCD7EC;
  text-align: left;
  padding: 4px;
  font-size: 2.25em;
  font-family: 'UWC Header bold', serif;
  font-weight: bold;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#rules h3 {
  text-align: left;
  color: black;
  font-size: 2em;
  font-family: 'UWC Header bold', serif;
  font-weight: bold;
  border: none;
  margin-top: 0em;
  margin-bottom: 0em;
}

#rules h4 {
  text-align: left;
  color: black;
  font-size: 1.25em;
  font-family: 'UWC Header bold', serif;
  font-weight: bold;
  border: none;
  margin-top: 0em;
  margin-bottom: 0em;
}

#rules h5 {
  text-align: left;
  color: red;
  font-size: 1.5em;
  font-family: 'UWC Header bold', serif;
  font-weight: bold;
  border: none;
  margin-top: 0em;
  margin-bottom: 0em;
}


#rules .roundbox {
  padding: 0.5em;
  margin-right: 1em;
  font-size: 1em;
  border-radius: 3px;
  font-family: 'UWC Text';
  box-shadow: 5px 5px 2px #8A9EAE;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#rules .shadowed { border-radius: 4px; box-shadow: 4px 4px 2px #A3B1BD; }
#rules .clear { clear: both; }
#rules .clearleft { clear: left; }
#rules .overflow_hidden { overflow: hidden; }

/* background and border colour definitions */
#rules .yellowishback {  background-color: #FBBA00; }
#rules .yellowishborder { border: 2px solid #EF7916; border-radius: 6px; } 

/* specific pictures */
#rules .resource { float: right; margin-left: 0.5em; border-radius: 4px; box-shadow: 4px 4px 2px #A3B1BD; }
#rules .playerorder { float: right; margin-right: 1em; margin-left: 0.5em; width:20em; }
#rules .cardanatomy { float: left; margin-right: 1em; width:15em; margin-bottom:0.5em;}
#rules .cardtype { float: left; margin-right: 1em; width:5em; margin-bottom:0.5em; border-radius: 4px; }
#rules .action_slot { float: left; margin-right: 1em; width:5em; margin-bottom:0.5em; border-radius: 4px; }
#rules .card_top { float: left; margin-right: 1em; width:7em; height: 3em; margin-bottom:0.5em; border-radius: 4px; overflow: hidden }
#rules .card_top img { width: 100%; height: auto; }
#rules .card_full { position: relative; float: left; margin-right: 1em; width:7em; height: auto; margin-bottom:0.5em; border-radius: 4px; }
#rules .card_full img { width: 100%; height: auto; }
#rules .rectangle_upper_left { border: 0.3em solid red; border-radius: 0.5em; width: 1em; height: 4em; position: absolute; left: 0.2em; top: 0.8em; }
#rules .assistant { float: left; margin-right: 1em; height: 12.5em; width: auto; margin-bottom:0.5em; }
#rules td { padding: 0.4em; }
#rules .small_box { width: 30em; }
#rules .stacked_cards { width: 10em; height: auto; display: inline-block; vertical-align: top; margin-right: 0.5em; }
#rules .stacked_cards > img {
    float: left;
    width: 100%;
    margin-bottom: -126%;
    height: auto;
}

#rules .stacked_cards > img.is_last {
    margin-bottom: 0;
}

#rules .biomatter_universal img {
    height: 4em;
    width: 4em;
    box-shadow: 4px 4px 2px #A3B1BD;
}

#rules .biomatter_universal span {
    vertical-align: baseline;
    font-size: 5em;
    color: white;
    text-shadow: 4px 4px 2px #A3B1BD;
}

#rules .city_action { width: 5em; height: auto; }

#rules .example_expansion_site {
    width: 10em;
    height: 10em;
    overflow: hidden;
    float: left;
    position: relative;
    margin-right: 0.5em;
    background-image: url('/game-plugins/underwatercities/1.2.2/images/player_board_0.jpg');
    background-size: 430%;
    background-position: 80.5% 0;
}

#rules .example_expansion_site .red_circle {
    width: 2.2em;
    height: 2.2em;
    border: 0.2em solid red;
    border-radius: 2.2em;
    position: absolute;
    left: 5.6em;
    top: 6.8em;
}

#rules .example_city_bonus {
    width: 8em;
    height: 8em;
    overflow: hidden;
    float: left;
    position: relative;
    margin-right: 0.5em;
    background-image: url('/game-plugins/underwatercities/1.2.2/images/player_board_0.jpg');
    background-size: 850%;
    background-position: 50% 52.5%;
}

#rules .example_city_bonus_multiplier {
    width: 11em;
    height: 8.5em;
    overflow: hidden;
    float: left;
    position: relative;
    margin: 0.5em;
    background-image: url('/game-plugins/underwatercities/1.2.2/images/player_board_5.jpg');
    background-size: 700%;
    background-position: 73% 13%;
}

#rules .example_tunnel_bonus_multiplier {
    width: 11em;
    height: 8.5em;
    overflow: hidden;
    float: left;
    position: relative;
    margin: 0.5em;
    background-image: url('/game-plugins/underwatercities/1.2.2/images/player_board_6.jpg');
    background-size: 700%;
    background-position: 63% 17%;
}

#rules .example_tunnel_bonus_2_extra_credits {
    width: 8.5em;
    height: 10em;
    overflow: hidden;
    float: left;
    position: relative;
    margin: 0.5em;
    background-image: url('/game-plugins/underwatercities/1.2.2/images/player_board_5.jpg');
    background-size: 700%;
    background-position: 63% 77%;
}

#rules .example_metropolis_bonus_2_points {
    width: 11em;
    height: 8.5em;
    overflow: hidden;
    float: left;
    position: relative;
    margin: 0.5em;
    background-image: url('/game-plugins/underwatercities/1.2.2/images/player_board_6.jpg');
    background-size: 700%;
    background-position: 90% 19%;
}

#rules .example_city_bonus_6_points {
    width: 11.5em;
    height: 8em;
    overflow: hidden;
    float: left;
    position: relative;
    margin: 0.5em;
    background-image: url('/game-plugins/underwatercities/1.2.2/images/player_board_6.jpg');
    background-size: 700%;
    background-position: 27% 52.5%;
}

#rules .example_metropolis_upper_left {
    width: 12em;
    height: 7.5em;
    overflow: hidden;
    position: relative;
    background-image: url('/game-plugins/underwatercities/1.2.2/images/player_board_0.jpg');
    background-size: 400%;
    background-position: 0 9.5%;
}

#rules .example_metropolis_lower_left {
    width: 12em;
    height: 7.5em;
    overflow: hidden;
    position: relative;
    background-image: url('/game-plugins/underwatercities/1.2.2/images/player_board_0.jpg');
    background-size: 400%;
    background-position: 0 95.5%;
}

#rules .production_overview {
    background-image: url('/game-plugins/underwatercities/1.2.2/images/cost_production_overview.jpg');
    background-size: 435%;
    width: 10em;
    height: 6.5em;
    overflow: hidden;
    float: left;
    margin: 0.2em;
}

#rules .production_overview.production_farm_simple {
    background-position: 31.3% 0;
}

#rules .production_overview.production_farm_upgraded {
    background-position: 60.5% 0;
}

#rules .production_overview.production_farm_upgraded_pair {
    background-position: 101.5% 0;
    width: 14em;
    background-size: 310.7%;
}

/* appendix */

#rules .slots, #rules .metropolises {
    display: block;
}

.actionslot {
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 2px;
    height: auto;
    width: 166px;
}

.actionslot .slot_image {
    height: 96px;
    width: auto;
    overflow: hidden;
}

.actionslot .slot_image img {
    width: 166px;
    height: auto;
}

.actionslot .slot_description {
    background-color: white;
    width: auto;
    min-height: 75px;
    padding: 3px;
    border: 1px solid black;
}

.metropolis {
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 1%;
    margin: 1%;
    height: auto;
    width: 46%;
    box-sizing: border-box;
    border: 1px solid black;
}

.modal-dialog .metropolis, #panelRules .metropolis {
    width: 310px;
}

.metropolis img, #rules .metropolis_img {
    width: 123px;
    height: auto;
    float: left;
    margin-right: 12px;
}

.swap_img {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    background-color: black;
}

.swap_cards {
    background-image: url('/game-plugins/underwatercities/1.2.2/images/swap_cards.gif');
}

.swap_board {
    background-image: url('/game-plugins/underwatercities/1.2.2/images/swap_board.gif');
}

.swap_overview {
    background-image: url('/game-plugins/underwatercities/1.2.2/images/swap_overview.gif');
}

.swap_points {
    background-image: url('/game-plugins/underwatercities/1.2.2/images/points.png');
}

.has_background_img {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.resource_small {
    width: auto;
    height: 1.5em;
}