/* will be replaced by theme.css from packaged theme */

table td {
    vertical-align: top;
    padding: 5px 20px;
}
table td h3 {
    margin-bottom: 0;
}
table td p {
    margin: 0;
}

#banner_title {
  background-color: #224386;
}
#footer {
  border-top-color: #224386;
}

#banner_guichet {
  position: relative;
  top: 0px;
  left: 0px;
  height: 100px;
  background: white url(../images/background/guichetvdl.jpg) no-repeat;
}

#banner_vdl {
  position: relative;
  top: 0px;
  left: 0px;
  height: 100px;
  background: white url(../images/background/vdl.jpg) no-repeat;
}

.bouton {
  background: url('../images/bouton-gauche.png'); /* Bord gauche et contenu du bouton */
  float: left; /* Afin que le DIV prenne la largeur de son contenu, et non la largeur de la page, pour des raisons didactiques */
  margin: 7px; /* Espacer les boutons entre eux, rien à voir avec la technique des portes coulissantes */

  /* Ce qui change par rapport à l'exemple précédent : */
  display: block; /* Pour pouvoir assigner une taille */
  text-decoration: none; /* On utilise un lien au lieu d'un div. Un lien est souligné par défaut, mais on veut le même look qu'avant */
  cursor: pointer; /* Curseur en forme de main, pour résoudre un bug sous IE, causé lors du changement du lien en affichage bloc, quelques lignes plus haut */
}

.bouton span {
  background: url('../images/bouton-droite.png') 100% 0 no-repeat; /* Bord droit du bouton, aligné à droite ! */
  height: 30px; /* Hauteur des images bouton-gauche.png et bouton-droite.png */
  line-height: 30px; /* Centrer le texte verticalement sur le bouton */
  padding: 0 10px; /* S'assurer que le texte ne soit pas collé aux bordures du bouton */
  color: white; /* Le bouton est bleu foncé, le texte doit être clair */

  /* Ce qui change par rapport à l'exemple précédent : */
  display: block; /* Pour pouvoir assigner une taille */
}

.bouton:hover,
.bouton:focus,
.bouton:active {
  background-color: yellow; /* On n'utilise pas la forme courte "background: ...;" car on devrait alors re-spécifier l'URL vers l'image */
  background-position: 0 -30px; /* On remonte l'image de 30 pixels (la moitié de sa hauteur) pour voir la partie jaune */
}

.bouton:hover span,
.bouton:focus span,
.bouton:active span {
  background-position: 100% -30px; /* Toujours aligné à droite, mais remonté de 30 pixels (la moitié de sa hauteur) pour voir la partie jaune */
  color: black; /* Le fond devient jaune, donc le texte doit être noir pour être visible */
}

.textBouton {
 font-weight: bold;
 font: 2em/2.0em Arial, sans-serif;
}