/****************************************************************************************
 * On trouvera ici les réglages pour le cadre de la page.
 ****************************************************************************************/

a img { /* Pas de contour bleu autour d'une image cliquable */
  border: none;
}


/*--------------------------------------------------------------------------------------*
 * Le fond
 *--------------------------------------------------------------------------------------*/

html {
  background-color: #eaf47d;
}

body {
  position: relative;
  width: 860px;
  margin: 0px auto;
  background-color: #DCED26;
  padding: 92px 70px;
}

div#moitie-droite {
  position: absolute; top: 0px; right: 0px;
  width: 310px; height: 100%;
}


/*--------------------------------------------------------------------------------------*
 * En haut à gauche
 *--------------------------------------------------------------------------------------*/

div#bloc-haut-gauche {
  position: absolute; top: 0px; left: 0px;
}

div#bloc-haut-gauche img {
  vertical-align: top;
}

div#bloc-haut-gauche span#onglets-top {
  position: relative; top: 5px;
  color: #999933;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 7pt;
}

div#bloc-haut-gauche span#onglets-top a {
  margin: 5px;
  color: #999933;
  text-decoration: none;
  text-transform: uppercase;
}

div#bloc-haut-gauche span#onglets-top a:hover { color: #666633; }


/*--------------------------------------------------------------------------------------*
 * En haut à droite
 *--------------------------------------------------------------------------------------*/

div#moitie-droite {
  /* IE7 ne comprendra que "lien-connexion" est un lien que si le logo est en background-image du div englobant. */
  background: #a584e2 url(../images/styles/catalogue/logo-top-right.gif) no-repeat top left;
}

div#moitie-droite a#lien-connexion {
  position: absolute; top: 0px; right: 70px;
  width: 85px; height: 30px;
}

div#moitie-droite a#lien-accueil {
  position: absolute; top: 50px; left: 15px;
  width: 180px; height: 40px;
}

/*--------------------------------------------------------------------------------------*
 * Au milieu
 *--------------------------------------------------------------------------------------*/

div#frame-contenu {
  position: relative;
  width: 860px;
  background-color: white;
}

div#frame-contenu div#bandeau-haut {
  height: 115px;
  padding-left: 181px;
  /* IE7 ne comprendra que "lien-pan-top-left" est un lien que si le pan est en background-image du div englobant. */
  background: transparent url(../images/styles/catalogue/pan-top-left.gif) no-repeat top left;
}

div#frame-contenu div#bandeau-haut a#lien-pan-top-left {
  position: absolute; top: 0px; left: 37px;
  width: 75px; height: 75px;
}

/*--------------------------------------------------------------------------------------*
 * Les onglets (temporaire)
 *--------------------------------------------------------------------------------------*/

div#frame-contenu div#bandeau-haut div#onglets {
  height: 24px;
  background: transparent url(../images/styles/onglets-catalogue.gif) no-repeat top left;
}
div#frame-contenu div#bandeau-haut div#onglets a { position: absolute; top: 0px;  height: 24px; }
div#frame-contenu div#bandeau-haut div#onglets a#lien-accueil   { left: 190px; width: 70px; }
div#frame-contenu div#bandeau-haut div#onglets a#lien-maison    { left: 260px; width: 125px; }
div#frame-contenu div#bandeau-haut div#onglets a#lien-catalogue { left: 385px; width: 90px; }
div#frame-contenu div#bandeau-haut div#onglets a#lien-actualite { left: 475px; width: 85px; }
div#frame-contenu div#bandeau-haut div#onglets a#lien-echanger  { left: 560px; width: 85px; }
div#frame-contenu div#bandeau-haut div#onglets a#lien-commander { left: 645px; width: 100px; }

/*--------------------------------------------------------------------------------------*
 * Le chemin
 *--------------------------------------------------------------------------------------*/

div#frame-contenu div#bandeau-haut div#chemin {
  position: relative; left: 15px;
  margin-top: 1.5em;
  color: #666666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 7pt;
}

div#frame-contenu div#bandeau-haut div#chemin span#elements-chemin {
  color: black;
  letter-spacing: 1px;
}

div#frame-contenu div#bandeau-haut div#chemin span#elements-chemin a {
  color: black;
  text-decoration: none;
}

div#frame-contenu div#bandeau-haut div#chemin span#elements-chemin a:hover {
  color: blue;
  text-decoration: underline;
}

div#frame-contenu div#bandeau-haut div#chemin span#elements-chemin span {
  font-weight: bold;
}

/*--------------------------------------------------------------------------------------*
 * Le pied de page
 *--------------------------------------------------------------------------------------*/

div#frame-contenu div#bandeau-bas {
  position: relative; z-index: 5;
  margin-top: 30px;
  padding-left: 10px; padding-bottom: 10px;
  color: #AAAA77;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 7pt;
  letter-spacing: 1.5px;
}

div#frame-contenu div#bandeau-bas a {
  color: #AAAA77;
  text-decoration: none;
}

div#frame-contenu div#bandeau-bas a:hover {
  text-decoration: underline;
}

div#frame-contenu img#pan-bas-droite {
  position: absolute; bottom: 0px; right: 0px;
}

/*--------------------------------------------------------------------------------------*
 * Le milieu du milieu, sur trois colonnes
 *--------------------------------------------------------------------------------------*/

div#frame-contenu table#trois-colonnes {
  position: relative; z-index: 10;
  width: 100%;
  border-collapse: collapse;
}

div#frame-contenu table#trois-colonnes tr { vertical-align: top; }

div#frame-contenu table#trois-colonnes td#colonne-gauche { width: 181px; }
div#frame-contenu table#trois-colonnes td#colonne-droite { width: 205px; }

/*--------------------------------------------------------------------------------------*
 * Le menu (colonne de gauche)
 *--------------------------------------------------------------------------------------*/

div#frame-contenu table#trois-colonnes div#contenu-gauche {
  color: #AAAA77;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8pt;
  line-height: 10pt;
}

div#frame-contenu table#trois-colonnes div#contenu-gauche ul {
  margin: 0px;
  padding-left: 10px;
  list-style: none;
}

div#frame-contenu table#trois-colonnes div#contenu-gauche li.niveau1 {
  margin: 8px 0px;
  text-transform: uppercase;
}

div#frame-contenu table#trois-colonnes div#contenu-gauche li.niveau2 {
  margin-top: 4px;
  color: #ddd;
}

div#frame-contenu table#trois-colonnes div#contenu-gauche a {
  color: #AAAA77;
  text-decoration: none;
}

div#frame-contenu table#trois-colonnes div#contenu-gauche a:hover {
  color: blue;
}

div#frame-contenu table#trois-colonnes div#contenu-gauche div#avertissement {
  margin: 10px; margin-top: 15px; margin-right: 20px;
  border: 1px solid #AAAA77;
  padding: 5px;
}