body {
  background-image:url(http://www.supermouton-online.fr/jeux/MH/images/96389/Fond.jpg);
  width: 716px;               /* Définit une largeur fixe à l'élément, pour pouvoir le centrer sur la page... */
  margin: 16 auto;        /* Petite astuce CSS pour centrer un élément (nécessite de fixer la largeur !) */
  font-size: 0.7em;
}

h1 {
  background-color: #FDF1B8;
  color: #660000;             
  text-align: center; 
  font-size: 300%;
  font-family:"Lucida Calligraphy", "Lucida Blackletter", Times;
  -moz-border-radius:10px;
/* TODO pour remplacer par image */
/*	background: transparent url(http://www.pipeshow.net/RM/Titre_profil_grabuge.gif) scroll no-repeat center center;
	text-align: left;
	letter-spacing: -20px;*/
}

/* Survol des liens. Tous ceux-ci se comportent de la même manière : */
ul#pjLinks a:hover, dd.numero span#envoiMessage a:hover, div#navigation a:hover, dd.guilde a:hover, dd.mouches a:hover {
  color: #ED7F10; 
}

ul#pjLinks {
  background-color: #FDF1B8;
  list-style-type: none;    /* Supprime les puces */
  padding-left: 0;          /* Annule l'indentation automatique de la liste, cale le texte à gauche */
  text-align: center;       /* Centre le texte vis à vis du conteneur (la liste "pjLinks") */
  -moz-border-radius:10px;
}

ul#pjLinks li {
  display: inline;        /* Affiche les différents éléments du conteneur sur une même ligne */
  padding: 10px;          /* Donne un peu d'espace aux liens, applique des "marges intérieures" TODO récupérer pour events */
}

ul#pjLinks a {
  text-decoration: none;  /* Supprime le style par défaut "souligné" des liens */
  font-style: italic;
  color: #660000;
}

#formView {
  position: fixed;         /* Positionnement absolu et fixe (lors du défilement) */
  top: 0;                  /* Fixe le formulaire dans le coin, en haut... */
  right: 0;                /* ... à droite. */
  padding: 10px;           /* Eloigne un peu les éléments du bord */
  text-align: center;      /* Centre les éléments dans le "cadre" */
  width: 180px;            /* Définit une largeur fixe à l'élément, une idée derrière la tête ... */
}

#IDPJ label {
  display: none;         /* Fait disparaitre l'intitulé "Trõll n° : " */
}

#IDPJ input {
  width: 50px;             /* Largeur de la zone de saisie du "numéro" du troll à afficher */
  text-align: center;      /* Centre le "numéro du troll" dans le champ <input> du formulaire */
}

form#formView .submit {
  margin-top: 10px;        /* "Décolle" le bouton "Afficher" des éléments du dessus */
}

form#formView .submit input {
  background-color: #660000;  /* Applique un fond au bouton "Afficher" */
  color: #FDF1B8;
}

h2 {
  display: none;          /* Masque les titres "Son Profil Général" et "Description" */
}

#profil {
  background-color: #FDF1B8;
  margin-top: 20px;
  padding: 20px;          /* "Décolle" la liste des bords */
  line-height: 20px;      /* Donne davantage d'air à la liste */
  -moz-border-radius:10px;
}

dt {
  float: left;            /* Pour que les informations se trouvent sur la même ligne que leur intitulé */
  font-weight: bold;      /* Fait ressortir les intitulés de la description, génère un décalage */
}

dd {
  color: #DB1702;         /* Un peu de couleur... */
  text-indent: 10px;      /* Décolle un peu les valeurs des intitulés */
}

dt.blason {
  display: none;          /* Fait disparaitre le texte "Blason", tant pis pour l'accessibilité... */
}

dd.blason {
  text-align: right;      /* Plaque l'image de votre avatar à droite */
  float: right;           /* Pour que la description du profil "enveloppe" le blason par la gauche */
}

dd.numero span#envoiMessage {
  display: block;         /* Affiche le lien "[Envoyer un message à ce Trõll]" sur une nvelle ligne */
}

dd.numero span#envoiMessage a {
  text-decoration: none;  /* Mêmes idées que pour les liens "Profil | Evénements | Classements" */
  color: #660000;
}

dd.numero span#envoiMessage a:hover {
  color: #ED7F10;
}

/* Cacher l'e-mail que de toutes facons je n'affiche pas. Ca allège. */
.email {
  display: none;         
}

/* Infos et lien de la guilde, et des mouches */
dd.guilde a, dd.mouches a {
  text-decoration: none;
  color: #660000;
  font-weight: bold;
}

dt.guilde, dt.mouches, dt.meurtres, dt.deces, dt.equipement {
  margin-top: 0px;        /* De nouveau un décalage à rattraper, à cause du "gras" sur dd.guilde a */
}

/* On descend un peu */
dt.distinctionsHorsJeu, dt.tagsRP, dt.faitsDeChasse, dt.palmares, dt.maladie, dt.trolligion, dt.equipement, dt.possessions {
  float: none;            
}

dd.numero, dd.distinctionsHorsJeu, dd.tagsRP, dd.faitsDeChasse, dd.palmares, dd.maladie, dd.trolligion {
	margin-left: 0;
	border-left: none;
}

dd.numero ul, dd.distinctionsHorsJeu ul, dd.tagsRP ul, dd.faitsDeChasse ul, dd.palmares ul, dd.maladie ul, dd.trolligion ul, dd.equipement ul, dd.possessions ul  {
  list-style-type: none;  /* Pas de puces dans ces listes */
}

/* images pour remplacer les puces */
dd.numero li, dd.distinctionsHorsJeu li, dd.tagsRP li, dd.faitsDeChasse li, dd.palmares li, dd.maladie li, dd.trolligion li, dd.equipement li, dd.possessions li {
  background: url(http://supermouton-online.fr/jeux/MH/images/96389/Wullie_micro_tete.png) no-repeat;
  padding-left: 17px;
}

/* aligner */
dd.equipement ul, dd.possessions ul {
  padding: 2px 0;  
}

/* Templates de l'équipement */
dd.equipement li span.magie {
  color: #660000;         
  font-weight: bold;
}

dd.equipement li span.magie:hover, dd.possessions a:hover {
  color: #ED7F10;
}

/* Les bidouilles */
dd.possessions a {
  text-decoration: none;  
  font-weight: bold;
  color: #660000;
}

/* "Toutes les informations présentées en dessous de cette ligne..." */
#disclaimer {            
   font-size: x-small;
   font-weight: normal;
   text-align: center;
}

/* Zone "Description" */
#description {           
  background-color: #FDF1B8;
  padding: 20px;
  font-size: 0.9em;
  -moz-border-radius:10px;
}

/* Change d'apparence */
#styleSwitcher {
  position: fixed;
  top: 80px;
  right: 0;
  padding: 10px;
  text-align: center;
  width: 180px;
}

#styleSwitcher a {
  text-decoration: none;
  color: #660000;
  font-style: italic;
}

#styleSwitcher a:hover {
  color: #ED7F10;
}

.mh_monstres { color: #993300; text-decoration: none; font-weight: bold }
.mh_trolls_0 { color: #008040; text-decoration: none; font-weight: bold }
.mh_trolls_1 { color: #0000FF; text-decoration: none; font-weight: bold }

/*L'info-bulle du matos sous Mz*/
div#infosVue {
  text-align:center;
  font-family:helvetica,verdana;
  font-size:9pt;
  text-decoration:none;
  border: 2px solid #FDF1B8;
  color: #FDF1B8;
  min-width:250px;
  -moz-border-radius:5px;
  background-color:#660000;
}

/* Page d'events */
form#formEvents div {
  display: inline;        /* Affiche les différents éléments du conteneur sur une même ligne */
  padding: 5px;          /* Donne un peu d'espace aux liens, applique des "marges intérieures"*/
}

div#IDPJ_Events label, div#IDPJ_Events input{
  display: none;
}

div#EventType{
  color: #FDF1B8;
  font-weight: bold;
  margin-left: 312px;
}

div#EventType label {
  display: none;
}

/* Flèches de navigation */
div#navigation {
  float: left;
  margin-top: 5px;
  margin-left: 30px;
  font-weight: bold;
  color: #FDF1B8;
  text-decoration: none;
}

div#navigation a {
  font-weight: bold;
  color: #FDF1B8;
  text-decoration: none;
}

/* Liste déroulante */
div#EventType{
  color: #FDF1B8;
  font-weight: bold;
}

form#formEvents select {
  background-color: #660000; 
  color: #FDF1B8;
}

form#formEvents .submit input {
  background-color: #660000; 
  color: #FDF1B8;
}

#events {
  background-color: #FDF1B8;
  margin-top: 20px;
  padding: 20px;
  -moz-border-radius:10px;
}

#suppressionEvents {
  color: #FDF1B8;
  font-weight: bold;
  font-style: italic;
  text-align: center;
}

/* Tableau des évènements */
table#events, table#chasse {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}
table#events th, table#events td, table#chasse th, table#chasse td {
	border: 0px solid #000;
	font-size: 90%;
	padding: 2px;
}

table#events td.eventDate {
	text-align: center;
}

/* Page de classements */
#classements {
  background-color: #FDF1B8;
  margin-top: 20px;
  padding: 20px;
  -moz-border-radius:10px;
}

dl#classements dt {
  width: 300px;
}

dl#classements dd {
  margin-left: 306px;
  font-weight: bold;
}

/* Page des mouches */
#mouches {
  background-color: #FDF1B8;
  margin-top: 20px;
  padding: 20px;
}

table#mouches {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
 -moz-border-radius:10px;
}

table#mouches thead a {
  font-weight: bold;
  color: #660000;
  text-decoration: none;
}

table#mouches thead a:hover {
  color: #ED7F10; 
}

table#mouches th, table#mouches td {
  border: 0px solid #000;
  /*font-size: 0.8em;*/
  padding: 2px;
}
table#mouches td {
  text-align: center;
}