/* Feuille faite a partir de ktd.css; */

:root {
  --gris:       #808080;
  --grisclair:  #bfbfbf;
  --grispale:   #e6e6e6;
  --bleupale:   #e6eeff;
  --bleuclair:  #b3ccff;
  --bleu:       #3377ff;
  --vert:       #14cc14;
  --jaune:      #ffcc00;
  --jauneclair: #ffe680;
  --orange:     #f76300;
  --rouge:      #a34155;
  --chair:      #fcd0c1;
  --brun:       #6d482c;
  --brunclair:  #bc865c;
  --brunpale:   #dabca4;
  --bleufonce:  #001a4d;
}

/* NB: autres couleurs = black, white, blue */

body {
  background-color: white;
  color: black;
  font-family: Arial, sans-serif;
  font-size: xx-large;
  max-width: 1200px;
  margin: auto;
}

h1 {
	color: blue;
}

h2 {
	color: var(--bleufonce);
}

h3.jeu { 
    margin: 0;
    text-align: center;
}


a:link    { color: var(--orange)}
a:active  { color: var(--jaune)}
a:visited { color: var(--rouge)}
a.nodec   { text-decoration: none; }


button {
    font-size: 100%;
    color: white;
    background-color: var(--bleufonce);
    font-weight: bold;
    padding: 10px 15px 10px 15px;
    text-decoration: none;
    border-radius: 20px;
    box-shadow: 2px 2px 8px black;
}
/* Change the link color to #111 (black) on hover */
button:hover, .menuv li:hover {
    background-color: blue;
}
button.blanc { color: black; background-color: white; }



p.clear {
  clear: both;
}

/* ===== Centered image ===== */

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 400px;
  margin-bottom: 0;
}

/* ===== IHM ===== */

div.ui {
    background-color: var(--bleupale);
    border: 1px solid;
    border-radius: 100px;
    padding: 100px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
  }

  textarea, input[type=text], input[type=password] {
    font-size: xx-large;
    color: black ;
    background-color : var(--jauneclair);
  }

  /* Customized radio buttons */
  .labrad {
      font-weight: normal;
  }
  .labrad:hover {
    background-color: var(--bleufonce);
    color: var(--grispale);
    cursor: pointer;
  }
  .labrad input[type=radio]:checked ~ .txt {
    background-color: black;
    color: white;
    font-weight: bold;
  }



/* ================== DAMIER ========= */

  #page_jeu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; 
  }
  #tab_jeu {
    margin-top: 0;
    margin-bottom: 0;
  }
  #tab_jeu td {
    padding: 20px;
  }
  #damier {
    padding: 0;
    border: 1px solid;
    border-collapse: collapse;
  }
  #damier td { 
    padding: 0; 
    border: 1px solid;
  }
  #damier td img { 
    width: 100px;
    height: 100px;
    display: block;
    margin: 0; 
  }
  #damier tr { 
    padding: 0; 
  }

    /* Images affichees au-dessus du damier */
  #tab_top{
    padding: 0;
  }
  #tab_top tr{
    padding: 0;
  }
  #tab_top td{
    padding: 0;
  }
  #pion_depart {
    height: 100px;
    margin: 0;
  }
  #de {
    height: 100px;
    width: auto;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
  }

  /* Panneau lateral ou en-dessous */
  div.in_panel {
    text-align: center;
  }
  #argent, #tresor{
    width: 290px;
    height: 70px;
    padding: 20px;
    margin-right: auto;
    margin-left: auto;
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    border: 1px solid;
  }

  #score_final {
    font-size: 70px;
    font-weight: bold;
  }

  #msg_game_over {
    font-size: 40px;
    font-weight: bold;
  }

  #echo { 
    font-size: xx-large; 
    font-style: italic;
  }
  #cont_echo { overflow: hidden; }