/************************************************************************/
/*            FEUILLE DE STYLE POUR LA PAGE "SlidingEx.html"            */
/*     réalisée par Luc De Droogh  (c) 2010 http://www.ldd-soft.be      */
/*  Si vous utilisez ce script, veuillez laisser ces 3 lignes intactes. */
/************************************************************************/
/*  Pour modifier l'aspect de l'exercice, vous pouvez changer certaines */
/*  valeurs ci-dessous. Si vous n'avez aucune notion en CSS, soyez très */
/*  prudent, car l'exercice ne pourrait plus fonctionner!               */
/************************************************************************/

body {background-color:#5B607D;} /* couleur de fond de la page (valeur hexadécimale)*/
div {
  width:780px; /* largeur des différents cadres*/
  margin-left:auto;  /* permet de centrer les cadres sur l'écran */
  margin-right:auto; /*                idem                      */
  text-align:center; /* alignement du texte dans les cadres */
  padding:10px;
  margin-top:1px; /* cette ligne permet de créer le fin trait entre les cadres */
  border:2px solid yellow; /* épaisseur, style et couleur des bordures */
}
div#titre {
  margin-top:100px; /* positionne le cadre supérieur (titre) à 100 pixels en dessous du haut de l'écran */
  background:#FFFF99; /* couleur de fond du titre (valeur hexadécimale)*/
  font:bold 14pt arial; /* graisse, taille et famille de la police du titre */
  color:#51676A; /* couleur du titre*/
  letter-spacing:2px; /* espacement entre les caractères du titre */
}
div#consigne {
  background:#FFF; /* couleur de fond de la consigne (valeur hexadécimale)*/
  font:bold 11pt arial; /* graisse, taille et famille de la police de la consigne */
  color:gray;  /* couleur de la consigne */
  font-style:italic; /* style de la police */
}
div#reponse {
  height:30px; /* hauteur du cadre vers lequel on glisse les éléments */
  background-color:#FFFFCC; /* couleur de fond de ce cadre (valeur hexadécimale)*/
  color:#FFFFCC; /* couleur de la police (doit rester la même que celle du fond pour masquer le point) */
}
div#qu {background-color:#DBD5BD;} /* couleur de fond du cadre contenant les éléments à déplacer (valeur hexadécimale)*/
div#hlp {
  background:blue; /* couleur de fond du cadre de l'aide (valeur hexadécimale)*/
  color:yellow; /* couleur de l'aide */
  display:none; /* cachée en temps normal */
  font-size:12pt; /* taille de la police de l'aide */
  text-align:left; /* alignement du texte de l'aide (left / center / right / justify) */
}
div#cmd {background-color:#EAEAEA;} /* couleur de fond du cadre contenant les boutons (valeur hexadécimale)*/
div#score {
  margin-top:0px;
  float:left; /* positionne le petit cadre du score dans le cadre des commandes */
  width:15%; /* largeur relative du cadre du score */
  padding:3px 0px;
  font:bold 10pt 'arial black'; /* graisse, taille et famille de la police du score */
  color:#5B607D; /* couleur du score */
  border-color:#5B607D; /* couleur de la bordure du score */
  background-color:#FFF; /* couleur de fond du score (valeur hexadécimale)*/
}
div#boutons {
  margin-top:0px;
  margin-left:15%; /* marge de gauche par rapport au cadre des commandes*/
  width:70%; /* largeur relative du cadre des boutons */
  padding:0px;
  border:none;
}
div#boutons input {
  background-color:#5B607D; /* couleur de fond des boutons (valeur hexadécimale)*/
  color:#EAEAEA; /* couleur de la police des boutons */
  font:bold 10pt arial; /* graisse, taille et famille de la police des boutons */
}
div#boutons input:hover {
  background-color:#CCC; /* couleur de fond des boutons au passage de la souris (valeur hexadécimale)*/
  color:#5B607D; /* couleur de la police des boutons au passage de la souris */
  cursor:pointer; /* aspect du curseur */
}
div#fb {
  background-color:#D9DFEA; /* couleur de fond du cadre feed-back (valeur hexadécimale)*/
  color:navy; /* couleur de la police des messages feed-back */
  font:bold 12pt arial; /* graisse, taille et famille de la police des messages feed-back */
}
p.com { /* commentaires */
  background:#EAEAEA; /* couleur de fond du commentaire (valeur hexadécimale)*/
  color:gray; /* couleur de la police du commentaire */
  font-size:12px; /* taille de la police du commentaire */
  text-align:left; /* alignement du texte du commentaire (left / center / right / justify) */
  padding:2px;
  border:1px solid gray; /* épaisseur, style et couleur de la bordure autour du commentaire */
}
div#cpr { /* cadre du copyright */
  color:#EAEAEA; /* couleur */
  font:normal 8pt arial; /* graisse, taille et famille de la police */
  text-align:center; /* alignement du texte */
  padding:0px 10px;
  border:none;
}
div#cpr a:link { /* lien du copyright */
  text-decoration:none;
  color:#EAEAEA;
}
div#cpr a:hover { /* lien du copyright au passage de la souris */
  text-decoration:underline; /* souligne le lien au passage de la souris*/
  color:yellow; /* couleur du lien au passage de la souris */
}
.dragme{ /* classe des éléments à déplacer */
  position:relative;
  font:bold 11pt arial; /* graisse, taille et famille de la police des éléments à déplacer */
  color:navy; /* couleur de la police des éléments à déplacer */
  cursor:pointer; /* aspect du curseur au passage de la souris */
  background-color:#A0E1EF; /* couleur de fond des éléments à déplacer (valeur hexadécimale)*/
  padding:3px;
}
span.fermer { /* bouton de fermeture de l'aide */
  font:normal 9pt arial; /* graisse, taille et famille de la police */
  color:gray; /* couleur de la police */
  border:outset 2px white; /* aspect, épaisseur et couleur de la bordure du bouton */
  padding:0px 1px;
  background-color:#EAEAEA; /* couleur de fond du bouton (valeur hexadécimale)*/
  cursor:pointer; /* aspect du curseur */
}
span.fermer:hover {
  background-color:gray; /* couleur de fond du bouton au passage de la souris (valeur hexadécimale)*/
  color:#EAEAEA; /* couleur de la police du bouton au passage de la souris */
}
input#help {display:none;} /* masquer le cadre de l'aide en temps normal */