/* CSS Document */
* { margin:0; padding:0; }

/* Style général du site */
body {
  font-family:verdana,arial,sans-serif;
  font-size:12px;
  color:black;
  background-color:#999999;
  margin-top:20px;
  margin-bottom:20px;
  }

/* Définition de la structure en largeur fixe avec en-tete, colonne gauche, colonne droite et pied de page */
#page {
  width:990px;
  margin-left:auto;
  margin-right:auto;
  border:5px solid red;
  background-color:white;
  }
#entete {
  height:227px;
  width:990px;
  border-bottom:5px solid red;
  background-image:url(marvel.jpg);
  background-repeat:no-repeat;
  background-position:right top;
  }
#entetegauche {
  float:left;
  width:364px;
  }
#colonneGauche {
  float:left;
  width:170px;
  padding:20px 10px 20px 10px;
  border-right:1px solid #888888;
  }
#colonneDroite {
  padding:25px;
  margin-left:190px; /* valeur de la marge gauche en fonction de la largeur de la colonne de gauche+ses marges */
  border-left:1px solid #888888;
  }
#pieddepage {
  clear:both;
  border-top:5px solid red;
  padding:10px 10px 10px 10px;
  background-color:#DDEEFF;
  }
#lienindex { 
  width:364px;
  height:200px;
  margin:0;
  padding:0;
  }
#lienindex a { text-decoration:none; }

/* Définition de la structure des onglets de l'en-tete */
#onglet { margin:0; }
#onglet h5 { display:none; }
#onglet ul { 
  margin:0;
  padding:0 5px 0 5px; /* espacement à droite et gauche du bord avant de commencer les onglets */
  font-size:14px;
  font-weight:bold;
  }
#onglet ul li {
  display:inline;
  float:left;
  background-image:url(ongletd.gif);
  background-repeat:no-repeat;
  background-position:right top;
  padding:0;
  margin:0 0 0 9px; /* espacement séparant chaque onglet de son voisin de gauche */
  }
#onglet ul li a { 
  display:block;
  background-image:url(ongletg.gif);
  background-repeat:no-repeat;
  background-position:left top;
  padding:5px 10px; /* espacement entre le texte et les bords de l'onglet */
  text-decoration:none;
  }
#onglet ul li a:link, #onglet ul li a:visited { color:black; } /* lien en noir en temps normal, y compris les liens déjà visités */
#onglet ul li a:hover, #onglet ul li a:active { color:red; } /* lien en rouge quand survolé ou cliqué */
#onglet ul li#encours { position:relative; top:5px; } /* onglet actif décalé vers le bas */
#onglet ul li a#encours { color:#990000; }

/* Définition des éléments du menu de gauche */
#optionmenu { margin-bottom:20px; } /* espace entre la dernière option d'une catégorie et la titre de catégorie suivant */
#optionmenu h5 { 
  font-size:14px;
  font-weight:bolder;
  color:#888888;
  border-left:5px solid blue;
  border-top:1px solid #888888;
  border-bottom:1px solid #888888;
  padding-left:5px;
  }
#optionmenu ul {
  display:block;
  color:black;
  list-style:none;
  padding:5px 0 0 20px;
  }
#optionmenu ul li {
  font-size:12px;
  font-weight:normal;
  }
#optionmenu ul li a { text-decoration:none; }
#optionmenu ul li a:link, #optionmenu ul li a:visited { color:red; }
#optionmenu ul li a:hover, #optionmenu ul li a:active { color:black; }
#optionmenu ul li a#encours { color:blue; }

/* Définition des styles de texte généraux */
.paragraphe {
  margin-bottom:25px;
  }
.paragraphe h3 {
  font-family:Arial,sans-serif;
  font-size:20px;
  font-weight:bolder;
  color:#888888;
  border-bottom:2px solid #888888;
  padding-left:10px;
  margin-bottom:10px;
  }
.paragraphe h4 {
  font-size:14px;
  font-weight:bolder;
  color:blue;
  margin-bottom:10px;
  }
.paragraphe p {
  text-align:justify;
  margin-bottom:10px;
  }
.paragraphe h5 {
  font-style:normal;
  font-weight:normal;
  font-size:12px;
  text-decoration:underline;
  margin-bottom:10px;
  }
.paragraphe ul {
  display:block;
  list-style:disc;
  padding:5px 0 0 15px;
  }
.paragraphe ul li {
  font-style:italic;
  }
.paragraphe a {
  color:red;
  text-decoration:none;
  }
.paragraphe a:link, .paragraphe a:visited { color:red; }
.paragraphe a:hover, .paragraphe a:active { color:black; }
.commentaire {
  font-size:12px;
  font-style:italic;
  font-weight:normal;
  }
.paragraphe h6 { /* pour les cases d'affichage ou non des blocs avis */
  margin:10px 645px 0px 10px;
  padding:1px 0px 1px 10px;
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:normal;
  color:red;
  background-color:#FFFFEE;
  border:2px solid #888888;
}
.Liste_Options {
  margin-left:30px;
  font-family:Verdana,Arial,sans-serif;
  font-size:13px;
  font-weight:bold;
  color:red;
}
.Liste_Options ul {
  padding:0;
  list-style:disc;
}
.Liste_Options ul li {
  margin-bottom:10px;
  font-style:normal;
}
.Liste_Options ul li a { text-decoration:none; }
.Liste_Options ul li a:link, .Liste_Options ul li a:visited { color:red; }
.Liste_Options ul li a:hover, .Liste_Options ul li a:active { color:black; }
#bouton { margin:0; }
#bouton h5 { display:none; }
#bouton ul { 
  margin:0;
  padding:0 15px 0 15px; /* espacement à droite et gauche du bord avant de commencer les onglets */
  font-size:12px;
  font-weight:normal;
  font-family:Arial,sans-serif;
  font-style:normal;
  }
#bouton ul li {
  display:inline;
  float:left;
  /* background-image:url(ongletd.gif); */
  /* background-repeat:no-repeat; */
  /* background-position:right top; */
  padding:0;
  margin:0 0 0 30px; /* espacement séparant chaque onglet de son voisin de gauche */
  }
#bouton ul li a { 
  display:block;
  /* background-image:url(ongletg.gif); */
  /* background-repeat:no-repeat; */
  /* background-position:left top; */
  background-color:#FFFFEE;
  border:2px solid #888888;
  padding:5px 10px; /* espacement entre le texte et les bords de l'onglet */
  text-decoration:none;
  color:red;
  }

/* Définition des blocs de commentaires ou avis */
.avis {
  margin:0px 10px 10px 10px;
  border:2px solid #888888;
  padding:10px;
  position:relative; top:-2px;
}
.avis h3 {
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:bold;
  color:#000099;
  background-color:#DDDDFF;
  border-top:1px solid #000099;
  border-bottom:1px solid #000099;
}
#avis_h3bis {
  float:right;
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:normal;
  color:blue;
  margin-right:15px;
}
.avis p {
  font-family:times,serif;
  font-style:italic;
  font-size:14px;
}
/* Définition du second style d'avis */
.avis2 {
  margin:0 5px 5px 5px;
  padding:5px;
  background-color:#F4F9FF;
}
.avis2 h3 {
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:bold;
  color:#000099;
  border-bottom:1px solid #AAAACC;
}
.avis2 p {
  font-family:times,serif;
  font-style:italic;
  font-size:14px;
}

/* Définition des styles de formulaires */
.saisietext {
  width:250px;
  font-family:monospace;
  font-size:12px;
  font-weight:normal;
  color:blue;
  background-color:#FFFFCC;
  border:1px solid red;
  padding:2px;
}
.saisietextarea {
  width:740px;
  font-family:monospace;
  font-size:12px;
  font-weight:normal;
  color:blue;
  background-color:#FFFFCC;
  border:1px solid red;
  padding:2px;
}
.boutonEnvoi {
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:normal;
  color:red;
  background-color:#EEEEEE;
  border:2px solid red;
  padding:0 10px 0 10px;
  text-align:center;
}
.saisieselect {
  width:250px;
  font-family:monospace;
  font-size:12px;
  font-weight:normal;
  color:blue;
  background-color:#FFFFCC;
  border:1px solid red;
}
/* tableau marvel */
.marveltableau {
  border-collapse:collapse;
  border:2px solid black;
  width:749px;
  margin-bottom:20px;
}
.marveltableau th {
  background-color:#DDDDDD;
  color:red;
  font-family:Verdana,Arial,sans-serif;
  font-weight:bold;
  font-size:14px;
  padding:3px;
  border:2px solid black;
  text-align:center;
}
.marveltableau td {
  font-family:Verdana,Arial,sans-serif;
  font-weight:normal;
  font-size:12px;
  color:black;
  border:2px solid black;
  padding:3px;
  text-align:left;
}
.marveltableau tr {
  background-color:#FFFFDD;
}
.marveltableau tr#pair {
  background-color:#EEFFFF;
}