/* 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 */
   
/* Kingthings Petrock bold for Text*/
@font-face {
  font-family: 'Hadara Text';
  font-weight: bold;
  src: local('Hadara Text'), local('Kingthings Petrock'),
       url('/game-plugins/hadara/1.3.6/fonts/Kingthings_Petrock.ttf') format('truetype');
}

/* Kingthings Petrock for Text*/
@font-face {
  font-family: 'Hadara Text';
  src: local('Hadara Text'), local('Kingthings Petrock Light'),
       url('/game-plugins/hadara/1.3.6/fonts/Kingthings_Petrock_light.ttf') format('truetype');
}

/* Norse for Numbers*/
@font-face {
  font-family: 'Hadara Number';
  src: local('Hadara Number'), local('Norse'),
       url('/game-plugins/hadara/1.3.6/fonts/Norse-KaWl.otf') format('opentype');
}

/* Norse Bold for Numbers*/
@font-face {
  font-family: 'Hadara Number';
  font-weight: bold;
  src: local('Hadara Number'), local('Norse Bold'),
       url('/game-plugins/hadara/1.3.6/fonts/NorseBold-2Kge.otf') format('opentype');
}

#rules .hadarafont {font-family: 'Hadara Text', serif; font-size: 1.3em;  }

#rules .chapter .title {
    color: #FEFADF;
    background-image: url('/game-plugins/hadara/1.3.6/images/rules/titlebar.png');
    background-color:initial;
    background-repeat: no-repeat;
    text-align: left;
    padding: 7px;
    font-size: 3em;
    font-family: 'Hadara Text', serif;
    font-weight: bold;
    color: #E8CB8E;
    min-height: 1em;
    line-height: 1em;
    border: none;
    margin-top: 0em;
    margin-bottom: 0.5em;
}

.rules h1 {
    color: black;
    text-align: center;
    padding: 3px;
    font-size: 3em;
    font-family: 'Hadara Text', serif;
    font-weight: bold;
    min-height: 1em;
    line-height: 1em;
    margin-top: 0em;
    margin-bottom: 0em;
}

.rules h2 {
  padding: 2px;
  font-family: 'Hadara Text', serif;
  font-weight: bold;
  font-size: 2.5em;
  color: black;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
}

#rules h3 {
  padding: 2px;
  font-family: 'Hadara Text', serif;
  font-weight: bold;
  font-size: 2em;
  clear: left;
}

#rules h4 {
  padding: 2px;
  margin-top: 0.2em;
  font-family: 'Hadara Text', serif;
  font-weight: bold;
  font-size: 1.5em;
}

#rules li {margin-top: 0.5em; }

#rules .number {font-family: 'Hadara Number'; }
#rules .bignumber {font-family: 'Hadara Number'; font-size: 2em;}
#rules .outlined {text-shadow: 1px  1px 1px black,  1px -1px 1px black,    -1px  1px 1px black,    -1px -1px 1px black;}
#rules .headlineremark {font-style:italic; font-weight: normal; font-size: small; }
#rules .unpadded {padding: 0}
.rules .indented {padding-left: 0.5em;}
#rules .leftindent {padding-left: -0.5em;}
#rules .referback {float:right; font-size:1.5em; font-weight:bold; margin-right:1em; color: #267D38; }


#rules .gametitle { width:50%; }
#rules .capital {font-family: 'Hadara Text', serif; font-size: 3em; margin-left:0.2em; margin-right:0.2em; color:#1553A4; display:inline; }
#rules .right { float: right; margin-left: 0.5em; }
#rules .left { float: left; margin-right: 0.5em; }
.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; }

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

/* specific pictures */
#rules .communal_board { float: right; margin-top: -5em; margin-left: 0.5em; width:30%; }
#rules .epoch_card { float: right; margin-left: 0.5em; width:5em; margin-right: 4.5em;}
#rules .star { float: right; margin-left: 0.5em; height:4em; margin-top: -0.5em;}
#rules .colony_cards { float: right; margin-left: 0.5em; width:40%; }
#rules .setup_card { float: right; margin-left: 0.5em; width:15em; margin-right:5em; margin-top: -3em;}
#rules .setupcard_anatomy { float: right; margin-left: 0.5em; width:40em; margin-right:1.5em; }
#rules .epochcard_anatomy { float: right; margin-left: 1em; width:100%; margin-right:-0.5em; }
#rules .effectcard1 { float: right; margin-left: 0.5em; width:40%; margin-right:0.5em; }
#rules .effectcard2 { float: right; margin-left: 0.5em; width:40%; margin-right:-25%; margin-top:20%}
#rules .example_initiative { float: left; margin-right: 0.5em; width:60%;}
#rules .example_setwheel { float: right; margin-left: 0.5em; width:50%;}
#rules .example_drawcards { float: right; margin-left: 0.5em; width:55%;}
#rules .example_addtrack { float: right; margin-left: 0.5em; margin-right: 0.5em; width:95%;}
#rules .track_past_10 { float: right; margin-left: 0.5em; margin-right: 2.5em; width:55%; margin-top:-0.5em;}
#rules .reduce_cost { float: right; margin-left: 0.5em; margin-right: 0.5em; width:45%;}
#rules .sell_red_card { float: right; margin-left: 0.5em; margin-right: 0.5em; width:45%;}
#rules .gain_2_coins { float: left; margin-left: 1.0em; margin-right: 1.0em; width:15%;}
#rules .turn_wheel { float: right; margin-left: 0.5em; margin-right: 0.5em; width:40%;}
#rules .example_income { float: right; margin-left: 0.5em; margin-right: 0.5em; width:90%;}
#rules .colony_anatomy_back { float: left; margin-left: 0.5em; margin-right: 0.5em; width:60%;}
#rules .colony_plunder_integrate { float: left; margin-left: 0.5em; margin-right: 0.5em; width:15%;}
#rules .colony_plunder { float: right; margin-left: 0.5em; margin-right: 0.5em; width:8%;}
#rules .colony_integrate { float: right; margin-left: 0.5em; margin-right: 0.5em; width:8%;}
#rules .example_colony_plunder { float: left; margin-left: 0.5em; margin-right: 0.5em; width:12%;}
#rules .example_colony_coins { float: right; margin-left: 0.5em; margin-right: 0.5em; width:8%;}
#rules .example_colony_integrate { float: left; margin-left: 0.5em; margin-right: 0.5em; width:12%;}
#rules .example_colony_backside { float: right; margin-left: 0.5em; margin-right: 0.5em; width:10%;}
#rules .example_statue_faceup1 { float: right; margin-left: 0.5em; margin-right: 0.5em; width:35%; margin-top: 0.5em;}
#rules .example_statue_faceup2 { float: right; margin-left: 0.5em; margin-right: 0.5em; width:65%; clear:right;}
#rules .example_statue_facedown { float: right; margin-left: 0.5em; margin-right: 0.5em; width:35%;}
#rules .food_ok { float: left; margin-left: 0.2em; margin-right: 0.5em; width:4em;}
#rules .food_notok { float: left; margin-left: 0.2em; margin-right: 0.5em; width:4em;}
#rules .food_discard { float: left; margin-left: 0.2em; margin-right: 0.5em; width:3em;}
#rules .example_foodok { float: right; margin-left: 0.5em; margin-right: 0.5em; width:40%;}
#rules .example_foodnotok { float: right; margin-left: 0.5em; margin-right: 0.5em; width:40%;}
#rules .example_fooddiscard1 { float: right; margin-left: 0.1em; margin-right: 0.5em; margin-top:1em; width:32%;}
#rules .example_fooddiscard2 { margin-left: 1.2em; margin-right: 0.5em; width:55%; display:block;}
#rules .medal { margin-left: 0.2em; margin-right: 0.2em; width:45%; float:left;}
#rules .medalcost { margin-left: 0.5em; margin-right: 0.2em; width:10em; float:right; margin-top: -1em;}
#rules .example_silvermedal { margin-left: 0.5em; margin-right: 0.5em; width:30%; float:right;}
#rules .example_goldmedal { margin-left: 0.5em; margin-right: 0.5em; width:30%; float:right;}
#rules .example_score { margin-left: 4em; margin-right: 2em; width:37%; float:right;}

/* boxes */
#rules .note { padding: 1em; margin: 1em 0; background-color: #BDC2C7; border-radius:1em; }
#rules .roundbox { padding: 0.2em; border-radius:1em; }
#rules .maxwidth { display:inline-block; width:98%; }

#rules .w60 { width: 60%; float: right; margin-left: 0.5em; }
#rules .w55 { width: 55%; float: right; margin-left: 0.5em; }
#rules .w50 { width: 50%; float: right; margin-left: 0.5em; }
#rules .w40 { width: 40%; float: right; margin-left: 0.5em; }
#rules .w35 { width: 35%; float: right; margin-left: 0.5em; }
#rules .w30 { width: 30%; float: right; margin-left: 0.5em; }
#rules .w20 { width: 20%; float: right; margin-left: 0.5em; }
#rules .w15 { width: 15%; float: right; margin-left: 0.5em; }


/* box colours */
#rules .example { background-color: #EBE3DA; border: 3px solid #DFD6CE; font-style: italic; font-family: 'Hadara Text', serif; font-size: 1.2em; }
#rules .orange { background-color: #F5C276; border: 3px solid #EC8E00; }

#rules .light { background-color: #FBF2E6; border: 3px solid #FFFFFF; }
#rules .light .example { background-color: #EBE3DA; border: 3px solid #DFD6CE; }

/* red is the colour of the German rules. The English one is more orange */
#rules .red { background-color: #E68783; border: 3px solid #CD171A; }
#rules .red .example { background-color: #F5CECC; border: 3px solid #FFFFFF; }

#rules .yellow { background-color: #FCE36C; border: 3px solid #F3C100; }
#rules .yellow .example { background-color: #FEF4C2; border: 3px solid #FFFFFF; }

#rules .blue { background-color: #AACDE6; border: 3px solid #4BB4E7; }
#rules .blue .example { background-color: #DCEBF6; border: 3px solid #FFFFFF; }

#rules .lightgreen { background-color: #B8CF8E; border: 3px solid #97BE72; }
#rules .lightgreen .example { background-color: #E2ECD1; border: 3px solid #FFFFFF; }

#rules .darkgreen { background-color: #7BB960; border: 3px solid #3FA535; }
#rules .darkgreen .example { background-color: #C9E3BE; border: 3px solid #FFFFFF; }

#rules .purple { background-color: #BD8FAE; border: 3px solid #8C4F92; }
#rules .purple .example { background-color: #E4D1DE; border: 3px solid #FFFFFF; }

/* split content */
#rules .content {width:45%; float:left; margin-right:1em;}
#rulesContainer #rules .content { width: 95%; }

/* the Purple cards*/
#rules .cost img { height:3.5em; }
#rules .card { width:44.85%; float:left; margin-right:1%; margin-bottom:1%; background-color: #EBE3DA; border: 3px solid #DFD6CE;}
#rules .card .images { position:relative; margin-right:0.5em; margin-bottom:0.5em; width:9.9em; height:7.2em; display:block; float: left; overflow:hidden; border-radius:0.75em; }
#rules .card .images>img { position:absolute; top: -1em; }
#rules .card .carddesc { display: inline; }
#rulescontainer  #rules .card { width: 95%; }

/* the stuff for the Epoch summary reference sheet */
.reference {
    background-image: url('/game-plugins/hadara/1.3.6/images/rules/summary.gif');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #FBF2E6;
    width: 31em;
    padding: 1em;
    vertical-align: middle;
    color:black;    
    padding-bottom:2em;
    min-height: 44em;
}

.reference .element {height:2em; width:89%; margin-left:5%; border-radius:2px; padding-left:0.5em; padding-top:0.2em; margin-top:0.3em; clear:both;}
              
.reference .wheel  {height:2em; background-color: #FBF2E6;}
.reference .cards  {height:3em; background-color: #FBF2E6;}
.reference .income {height:2em; background-color: #FCE36C;}
.reference .colony {height:2em; background-color: #E68783;}
.reference .statue {height:2em; background-color: #AACDE6;}
.reference .food   {height:2em; background-color: #B8CF8E;}
.reference .medals {height:3em; background-color: #FBF2E6;}

.refpic { height:100%; width: auto; float: right; margin-left: 0.5em; margin-right:0.5em;}