@font-face {
  font-family: "Ferox";
  src: url('../font/FeroxAlternates.ttf');
}

@font-face {
  font-family: "Georgia";
  src: url('../font/georgia.ttf');
}

@font-face {
  font-family: "Blackmoore";
  src: url('../font/Blackmoor_LET_Plain_2.0.ttf');
}

@font-face {
  font-family: "Baroque";
  src: url('../font/BaroqueTextJF.ttf');
}

@font-face {
  font-family: "Frushand";
  src: url('../font/FRUSHAND.otf');
}

@font-face {
  font-family: "MyriadPro";
  src: url('../font/MyriadPro-Regular.otf');
}

@font-face {
  font-family: "chn1";
  src: url('../font/chn1_regular.ttf');
}

.debug {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  color: black;
}

body {
  background-image: url('../images/bg-2.png');
  background-size: cover;
  font-family: "Georgia";
  font-size: 18px;
}

.capitale {
  font-family: "Baroque";
}

.remarque {
  font-family: "Frushand";
  font-size: 1.2em;
  font-weight: 400;
  color: rgb(92, 52, 15);
}

h1 {
  font-family: "Blackmoore";
  font-size: 3.0em;
  font-weight: 400;
  color: white;
  text-shadow: 0 0 5px rgb(92, 52, 15), 4px 4px 10px #000;
  background-image: url('../images/titre-bg.png');
  background-repeat: no-repeat, no-repeat;
  background-position: -40px 0;
  padding-top: 25px;
  padding-left: 50px;
  min-height: 120px;
  height: 120px;
  margin-bottom: 20px;
  margin-top: 20px;
}

h2 {
  /* font-family: "Blackmoore";
    font-size: 2.0em;
    color: white;
    text-shadow: 0 0 5px rgb(92, 52, 15), 2px 2px 10px #000; */
  font-family: "Ferox";
  font-size: 2.0em;
  color: rgb(92, 52, 15);
  border-bottom: 1px solid rgb(92, 52, 15);
  font-weight: 200;
}

h3 {
  /* font-family: "Blackmoore";
    font-size: 2.0em;
    color: white;
    text-shadow: 0 0 5px rgb(92, 52, 15), 2px 2px 10px #000; */
  font-family: "Ferox";
  font-size: 1.5em;
  color: rgb(92, 52, 15);
  font-weight: normal;
  margin-bottom: 0;
}

.marron {
  color: rgb(92,52,15);
}

.sousligne {
  border-bottom: 1px solid rgb(92, 52, 15);
  margin-bottom: 30px;
}

.blockinfopage {
  float: left;
  width: 20%;
  max-width: 280px;
  padding-right: 10px;
  vertical-align: top;
}

.blockpage {
  margin-top: -20px;
  margin-bottom: 0;
  max-width: 100%;
  width: 100%;
  display: -webkit-flex;
}

.blockpage-left {
  width: 20%;
  max-width: 280px;
  min-width: 190px;
  padding-right: 10px;
  border-right: 1px solid rgb(92, 52, 15);
  margin: 0;
  vertical-align: top;
}

.blockpage-main {
  padding-right: 10px;
  padding-left: 10px;
  margin: 0;
  width: 100%;
  max-width: 100%;
  vertical-align: top;
}

.remplissage {
  height: 300px;
}

label {
  font-family: "Georgia", "Ferox";
  color: #333;
  font-size: 1.1em;
  font-weight: 700;
}

fieldset {
  border: 0;
}

/* p {
  font-size: 16px;
} */

table {
  /* max-width: 550px; */
  width: 100%;
}

.carac {
  max-width: 300px;
}

.carac td input, .carac td select {
  align-content: center;
  text-align: center;
  width: 70px;
  height: 38px;
}

th {
  background-color: rgb(92, 52, 15);
  color: #fff;
  width: 50px;
  height: 38px;
  font-family: "MyriadPro";
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 1px;
}

.highlight th {
  background-color: rgb(38, 67, 96);
  box-shadow: 0 0 10px #48baff;
}

.highlight input {
  box-shadow: 0 0 10px #48baff;
  text-shadow: 0 0 10px #48baff;
}

.blockline {
  display: inline-block;
  width: 100%;
}

.attaque {
  max-width: 400px;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button
  {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type="checkbox"]:checked, input[type="checkbox"]:not(:checked ) {
  width: 15px;
  background-color: #ffffff70;
  border-color: rgb(92, 52, 15);
}

.attaque th {
  background-color: red;
}

.defense th {
  background-color: #48baff;
}

.lft {
  float: left;
}

.rgt {
  float: right;
}

.mr10 {
  margin-right: 10px;
}

.mr30 {
  margin-right: 30px;
}

.mt30 {
  margin-top: 30px;
}

.ml10 {
  margin-left: 10px;
}

.mw50 {
  max-width: 50%;
}

.clmn20 {
  width: 19%;
  padding-right: 1%;
  text-align: justify;
}

.rang-desc {
  vertical-align: top;
  font-family: "Georgia";
  font-size: 10px;
}

.titre-rang {
  padding-top: 10px;
  font-weight: bold;
  font-family: "Georgia";
  font-size: 10px;
}

.titre-voie, .voie h3 {
  background-color: transparent;
  color: rgb(92, 52, 15);
  font-family: "Ferox";
  font-size: 1.0em;
  font-weight: normal;
  border-bottom: 1px solid rgb(92, 52, 15)
}

.voie label, .voie input {
  font-size: 12px;;
/*   width: 75%; */
  vertical-align: middle;
}

.weapons {
  margin-left: 10px;
  margin-top: 13px;
}

.weapons h3 {
  font-size: 1.2em;
}

.weapons input {
  height: 38px;
  margin: 3px 5px 1px 0;
  padding-left: 5px;
  padding-right: 5px;
}

.txtcenter {
  text-align: center;
}

.ferox {
  font-family: "Ferox";
  font-size: 1.8em;
  font-weight: 200;
  color: rgb(92, 52, 15);
  margin-bottom: -10px;
}

.myriad {
  font-family: "MyriadPro";
  font-size: 0.9em;
  font-weight: 200;
  color: #333;
}

.ft-myriad {
  font-family: "MyriadPro";
}

.myriad a, .myriad a:visited {
  text-decoration: none;
  color: #333;
}

.myriad a:hover {
  text-decoration: underline;
  color: #000;
}

.intro {
  background-color: #ffffff70;
  border-radius: 20px;
  border-color: #ffffff55;
  border-style: solid;
  margin-left: 0px;
  margin-right: 0px;
  padding: 10px;
}

.dice, .d4, .d6, .d8, .d10, .d12, .d20 {
  background-image: url('../img/d6.png');
  background-size: 32px 32px;
  background-repeat: no-repeat;
  padding-left: 35px;
}

.d4 {
  background-image: url('../img/d4.png') !important;
}

.d8 {
  background-image: url('../img/d8.png') !important;
}

.d10 {
  background-image: url('../img/d10.png') !important;
}

.d12 {
  background-image: url('../img/d12.png') !important;
}

.d20 {
  background-image: url('../img/d20.png') !important;
}

.displaynone {
  display: none;
}

.displayblock {
  display: block;
}

input, select {
  background-color: #ffffff90;
  border-radius: 3px;
  border-color: rgb(92, 52, 15);
  border-width: 1px;
  border-style: solid;
  color: #000;
  height: 24px;
  /* margin: 5px; */
  padding: 2px 5px;
}

.btn, .submitbtn {
  background-color: #ffffff70;
  border-radius: 5px;
  border-color: rgb(92, 52, 15);
  border-width: 1px;
  border-style: solid;
  color: rgb(92, 52, 15);
  height: 38px;
  box-shadow: 2px 2px 5px #333;
}

.fiche-siva {
  background-image: url('../img/CO Fan Kit_Couverture_v1.png');
  background-size: 160px 200px;
  background-repeat: no-repeat;
}

.fiche-noobchro {
  background-image: url('../img/Fiche-perso-NooblieesChroniques.png');
  background-size: 160px 200px;
  background-repeat: no-repeat;
}

.fiche-noobchro-nb {
  background-image: url('../img/Fiche-perso-NooblieesChroniques-2-NB-p1.png');
  background-size: 160px 200px;
  background-repeat: no-repeat;
}

.fiche-classic {
  background-image: url('../img/Fiche-perso-classic-p1.png');
  background-size: 160px 200px;
  background-repeat: no-repeat;
}

.fiche-init {
  background-image: url('../img/Fiche-perso-classique.png');
  background-size: 160px 200px;
  background-repeat: no-repeat;
}

.submitbtn {
  width: 160px;
  height: 100px;
  padding-top: 15px;
  font-family: "Blackmoore";
  font-size: 24px;
  color: #fff;
  text-shadow: 0 0 4px rgb(92, 52, 15), 0 0 8px #000, 4px 4px 16px #000;
  margin-bottom: 20px;
  margin-right: 20px;
  white-space: normal;
}

.btn:active, .submitbtn:active {
  box-shadow: none;
}

#modSum, #evaluation {
  font-weight: bold;
}

#evaluation {
  font-weight: bold;
  margin: 5px 20px;
}

.blockfiche {
  margin: 0;
}

.blockfiche img {
  border: 1px solid rgb(92, 52, 15);
}

.dafiche {
  width: 75%;
  max-width: 500px;;
}

.choixraciale {
  min-width: 200px;
}

.encart {
  border: 1px solid rgb(92, 52, 15);
  padding: 10px 20px;
  margin-top: 10px;
}

.tarea {
  background-color: #ffffff70;
  border: 1px solid rgb(92, 52, 15);
  border-radius: 10px;
  color: #333;
  padding: 5px;
}

.header {
  background-image: url('../images/deco-haut.png');
  background-repeat: repeat-x;
  min-height: 150px;
  height: 121px;
  margin-top: 0px;
  margin-bottom: 0px;
  /* box-shadow: 0 10px 10px #333; */
}

.footer {
  background-image: url('../images/deco-bas.png');
  background-repeat: repeat-x;
  height: 97px;
  width: 100%;
  display: inline-block;
}

.chevron {
  background-image: url('../images/chevron.png');
  background-size: 140px 118px;
  background-repeat: no-repeat;
  width: 140px;
  height: 80px;
  padding-top: 42px;
  padding-left: 38px;
  float: right;
  margin-top: -18px;
  margin-right: -25px;
  margin-left: -20px;
}

.chevron img {
  max-width: 75px;
  max-height: 95px;
}

.blk-abs {
  position: fixed;
  padding: 0 20px;
  padding-bottom: 20px;
  border: 1px solid rgb(92, 52, 15);
  background: rgb(255,255,255,0.75);
  border-radius: 20px;
  top: 435px;
  right: 20px;
}

.ligne-lvlup {
  display: block;
  background: rgb(38, 67, 96);
  border: 1px solid rgb(38, 67, 96);
  border-radius: 42px 0 0 42px;
  margin: 5px 0;
}

.ligne-save {
  display: block;
  background: #417505;
  border: 1px solid #417505;
  border-radius: 42px 0 0 42px;
  margin: 10px 0;
}

.ligne-switch {
  display: block;
  background: rgb(92, 52, 15);
  border: 1px solid rgb(92, 52, 15);
  border-radius: 42px 0 0 42px;
  margin: 10px 0;
}

.ligne-public {
  display: block;
  background: #d0021b;
  border: 1px solid #d0021b;
  border-radius: 42px 0 0 42px;
  margin: 10px 0;
}

.ligne-customize {
  display: block;
  background: #48baff;
  border: 1px solid #48baff;
  border-radius: 42px 0 0 42px;
  margin: 10px 0;
}

.menu-ligne {
  box-shadow: 2px 2px 10px #333;
}

.menu-ligne:hover {
  box-shadow: 2px 2px 10px #333, 0 0 20px darkcyan;
}

.menu-ligne:active {
  box-shadow: 1px 1px 2px #333, 0 0 18px darkcyan;
}

.menu-ligne:hover, .menu-ligne img:hover, .menu-ligne label:hover,
.menu-ligne:active, .menu-ligne img:active, .menu-ligne label:active {
  cursor: pointer;
}

.roundimg {
  width: 32px;
  height: 32px;
  background: white;
  border-radius: 42px;
  margin-right: 5px;
  padding: 4px;
}

.menutxt {
  color: white;
  font-family: 'Georgia';
  font-size: 18px;
  font-weight: 400;
  position: relative;
  top: 8px;
  vertical-align: top;
}

.cbxalign {
  position: relative;
  top: -6px;
  font-weight: 400 !important;
  font-size: 18px !important;
}

.blk-info {
  display: block;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0 20px;
  border: 1px solid rgb(92, 52, 15);
  border-radius: 10px;
  margin-top: 60px;
}

.iblock, .iblk {
  display: inline-block;
}

#NC, #INT, #NM {
  font-family: 'Myriad Pro';
  font-size: 22px;
  text-align: center;
  margin-bottom: 5px;
  width: 48px;
  border: 0;
  border-radius: 0;
  border-bottom: 2px dotted rgb(92, 52, 15);
  background: transparent;
}

#CAT {
  font-family: 'Ferox', 'Myriad Pro';
  font-size: 24px;
  color: rgb(92, 52, 15);
  background: transparent;
  border: 1px solid rgb(92, 52, 15);
  border-radius: 10px;
  height: 40px;
}

#tresor-lvl {
  margin-top: 30px;
}

.number-requiem {
  font-family: 'Myriad Pro';
  font-size: 24px;
  color: rgb(92, 52, 15);
  text-align: center;
  margin: 0 10px 10px 10px;
  width: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.blk-bt-tresor {
  clear: both;
  width: 100%;
}

#bt-tresor-roll {
  background-image: url('../img/btstep.png');
  /* background-size: 100%; */
  color: white;
  text-align: center;
  font-family: 'Blackmoore';
  font-size: 24px;
  padding: 20px 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 10px 50px;
  margin-bottom: 50px;
  margin-left: 33%;
  max-width: 400px;
  cursor: pointer;
  filter: drop-shadow(5px 5px 10px #333);
}

#bt-tresor-roll:hover {
  filter: drop-shadow(0 0 20px #00367b);
}

#bt-tresor-roll:active {
  filter: drop-shadow(0 0 5px #00367b);
  margin-top: 15px;
  margin-left: 34%;
  /* padding-top: 25px;
  padding-left: 55px; */
}

#tresor, #money, #joyaux, #mineur, #moyen, #majeur, #random-result {
  clear: both;
  width: 100%;
}

.hidden {
  display: none;
}

.bt-roll {
  background-image: url('../img/btstep.png');
  color: white;
  text-align: center;
  font-family: 'Blackmoore';
  font-size: 24px;
  padding-top: 16px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 10px 50px;
  margin-bottom: 50px;
  cursor: pointer;
  filter: drop-shadow(5px 5px 10px #333);
  width: 200px;
  height: 77px;
}

.bt-roll img {
  width: 60px;
}


.bt-roll:hover {
  box-shadow: 2px 2px 10px #333, 0 0 20px darkcyan;
}

.bt-roll:active {
  box-shadow: 1px 1px 2px #333, 0 0 18px darkcyan;
}

.shadow-marron {
  filter: drop-shadow(4px 4px 4px #000);
}