body {
  margin: 0px;
  background-color: black;
  color: #F4B893;
  font-family: sans-serif;
  font-size: 10pt;

  }

a img {
  border-style: none;
}

img.lien, button {
  cursor: pointer;
}

span.elementActif {
  color: #F3DACB}

span.stabylo {
  background-color: #F3DACB  color: black;
  font-weight: bold;
}

p {
  margin: 0px;
  margin-bottom: 0.5em;
}

li {
  margin-bottom: 0.25em;
}

ul {
  margin-top: 0px;
}

/* ========== Hyperliens ========== */

a:link, a:active, a:visited {
  color: #F4B893;
}

a:hover {
  color: #F3DACB}


#haut a:link, #haut a:active, #haut a:visited,
#bas a:link, #bas a:active, #bas a:visited {
 color: #F4B893;
}

#haut a:hover,
#bas a:hover {
  color: #F3DACB}

/* ==================== structuration de la page ==================== */

#haut, #milieu {
  padding-left: 10px;
  padding-right: 10px;
}

/* ==================== partie haute de la page ==================== */

#haut {
 height: 60px;
 background-image: url("Images/fondHaut.gif");
 background-repeat: repeat;
 overflow: hidden;
}

#toc {
  margin-top: 32px; /* 24 26 */
  float: right;
  padding-right: 0px;
}

#toc p {
  float: left;
  margin-left: 8px;
  padding-left: 2px;
  font-size: 8pt;
  text-transform: uppercase;
  font-weight: bold;
  height: 18px; /* 26px; */
  /*  width: 140px; */
  background-image: url("Images/souligneRubrique.gif");
  background-repeat: no-repeat;
  background-position: left bottom;
}

#toc p a:link, #toc p a:active, #toc p a:visited {
  text-decoration: none;
}

/* ==================== zone centrale de la page ==================== */

#milieu {
  padding-top: 5px;
  padding-bottom: 5px;
  overflow: hidden;
}

 
#reportage {
  width: 576px;
  height: 355px; /* 11 + 324 + 20 de contrôle player */
  border-color: #AB5D2C;
  border-style: solid;
  border-width: 2px;
  padding: 0px;
}

#video {
  height: 344px; /* 324 + 20 (contrôle player) )*/
}

#jeNeVoisPasLaVideo {
  padding: 0px;
  height: 11px;
  width: 576px;
  background-color: #AB5D2C;
}

div.reportageEtLegende {
  float: left;
}

/* ----- La Legende du Reportage ----- */

#legende {
 width: 580px; /* + 4 pixels à cause du crade de la vidéo 2 + 2*/
 overflow: auto;
}

#legende h1 {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 10pt;
  font-weight: bold;
  text-transform: uppercase;
}

#legende h2 {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 10pt;
  font-weight: bold;
}

/* ----- LA ZONE D'EXPLICATIONS (à droite) ----- */

#zoneMilieuDroit {
  margin-left: 584px;
}

#bandeauMilieuDroit {
  height: 100px;
  background-image: url("Images/bandeauLesReportages.gif");
    /* url("Images/bandeauLesReportages.jpg"); */
  background-repeat: no-repeat;
  border-color: #AB5D2C;
  border-width: 2px;
  border-style: solid;
}

#colonneGauche {
 height: 464px; /* 470px avant le padding-bottom: 6px; */ /* 494 - 24 pour thèmes XP (cf. cas écran SP) */
 padding-bottom: 6px;
 overflow: auto;
}

#colonneGauche h5 {
  clear: left;
  text-transform: uppercase;
  font-size: 10pt;
  border-style: solid;
  border-width: 0px;
  border-bottom-width: 1px;
  border-color: #AB5D2C;
  margin: 0px;
  margin-bottom: 5px;
  padding-top: 10px;
}

div.ficheCatalogue {
  float: left;
  margin: 0px 2px 2px 2px;
  width: 116px;
  height: 148px;
  overflow: hidden;
}

div.ficheCatalogue h1, div.ficheCatalogue h2 {
  margin: 0px;
}

div.ficheCatalogue h1 {
  text-align: right;
  padding: 0px;
  margin: 0px;
  margin-top: 6px;
  padding-left: 2px;
  text-transform: uppercase;
  font-size: 8pt;
  color: #F4B893;
  background-color: #AB5D2C;
  height: 12px;
  overflow: hidden;
}

div.ficheCatalogue h2 {
  font-size: 8pt;
  text-transform: uppercase;
}

div.ficheCatalogue p {
 font-size: 8pt;
 margin: 0px;
}

button.vignette {
  padding: 0px;
  width: 116px;
  height: 66px;
  margin-top: 4px;
  margin-bottom: 0px;
  border-color: #AB5D2C;
  border-style: solid;
  border-width: 1px;
}

button.vignette img {
  width: 114px;
  height: 64px;
  margin-top: -1px; margin-left: -3px;}


/* ==================== partie basse de la page ==================== */

#bas {
  width: 100%;
  height: 33px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-image: url("Images/fondBandeauBas.gif");
  background-repeat: repeat;
/*  background-color: #AB5D2C; */
}

#bas a, #bas span {
  margin-right: 8px; /* 20px */
}

/* ========== Absence de Javascript  ========== */

#jsNonActif {
 position: absolute;
 top: 0px;
 left: 0px;
  padding: 5px;
  background-color: white;
  border-color: red;
  border-style: solid;
  color: black;
  font-weight: bold;
}

#jsNonActif .pb {
 color: red
}

#jsNonActif .sol {
  color: green;
}

/* ========== Formulaire ========== */

body.formulaire {
  margin-top: 0px;
  color: #F4B893;
}

body.formulaire p {
  margin-top: 0px;
}

body.formulaire a:link, body.formulaire a:active, body.formulaire a:visited, body.formulaire a:hover {
 color: white;
}

label {
  color: #F4B893;
  font-weight: bold;
}

input, textarea {
  font-family: monospace;
  font-size: 10pt;
  background-color: white;
  border-color: #AB5D2C;
  border-style: solid;
  border-width: 1px;
}

input.submit {
 color: white;
  font-family: sans-serif;
  background-color: #AB5D2C;
  border-color: #AB5D2C;
  font-weight: bold;
  border-style: outset;
  border-width: 2px;
}

/* ----- Affichage de la zone PB vidéo : lecteur Flash trop ancien ----- */

#pb {
  overflow: auto;
  padding: 5px;
}

#pb h1, #pb h2 {
  color: #F4B893;
  font-size: 10pt;
  margin: 10px 0px 5px 0px;
}

#pb h1 {
  text-align: center;
}

#pb h2 {
  margin-top: 15px;
}

#pb p, #pb ul li {
  margin-top: 0px;
  margin-bottom: 5px;
}

#pb ul {
  margin-top: 5px;
  margin-bottom: 5px;
}