body    {background-color: white;
         font-family: Arial, Helvetica, sans-serif; 
         margin: 0px;
         padding: 0px;
}

h1      {text-align: center;
         font-size: 18px;
         margin: 2px auto 2px auto;
}
.externe    {width: 410px;                  /* div englonant tout le reste sauf le titre H1 */
             height: 800px;
             background-color: white;
             margin: auto;  /* centrage horizontal dans l'écran */
}

.pion   {width: 60px;
         height: 40px;
         margin: 5px;
         float: left;
         border-radius: 10px;
}
.rouge  {background-color: red;}           /* choix des couleurs     */
.vert   {background-color: green;}
.bleu   {background-color: blue;}
.jaune  {background-color: yellow;}


.result {width: 48px;
    height: 40px;
    background-color: white ;
    float: left;
    margin: 5px;
    text-align: center;
    font-size: 28px;
    vertical-align: middle;     /* pour alignement vertical */
    line-height: 40px;          /* pour alignement vertical */
}
.BP     {color: green;}     /* nombre de pions Bien Placés  */
.MP     {color: red;}       /* nombre de pions Mal Placés   */

#plateau    {width: 400px;      /* div englobant les coups déjà joués (les pions de couleur) */
             background-color: silver;
             height: 610px;
             min-height: 610px;
             padding-top: 5px;
             margin: 0px auto 0px auto;
}

#jeu    {width: 400px;          /* div englobant les boutons de choix de couleur et le bouton OK */ 
         height: 50px;
         background-color: gray;
         vertical-align: middle;     /* pour alignement vertical */
         line-height: 50px;    
         margin: 0px auto 0px auto;
}

.btnJeu {width: 58px;
         height: 38px;
         margin: 4px;
         background-color: white;
         border: none;
         border-radius: 10px;
         cursor: pointer;
}

#btnOK  {width: 110px;
         height: 40px;
         color: green;
         font-weight: bold;
         cursor: pointer;
}

.pied   {width: 400px;          /* div englobant les boutons de bas d'écran */
         background-color: black;
         height: 40px;
         vertical-align: middle;     /* pour alignement vertical */
         line-height: 40px;    
         text-align: center;
         margin: 0px auto 0px auto;
}
.btnPied    {width: 30%;                   /* boutons du bas d'écran */
             cursor: pointer;
}

/* =============== page Comment Jouer ========================================= */

.cjMainDiv  {
    width: 900px;
    padding: 0px;
    padding-left: 10px;  
}

.cjImage    {
    float: left;
}

.cjTexte    {
    width: 410px;
    padding-left: 10px;  
    float: left;
}