/* ========================== */
/*  V4.2 -  13 Janvier 2008   */
/* ========================== */
/* une page est constituee de differentes parties 
 *    . un body d'une certaine classe 
 *    .               la navigation globale (#navigation)
 *    .               d'un contact          (#contact)
 *    . (optionnelle) d'une categorie       (#categorie)
 *    .               d'un titre            (#titre)
 *    .               d'un contenu          (#content) de meme classe que le body
 *    .               d'un complement       (#complement) de meme classe que le body
 *    .               d'une note            (#note)
 */    
/* ========================== */

/* ===================================== */
/*  elements non encore pris en compte:  */
/*    a.interne                          */
/*    a.externe                          */
/* ===================================== */

/* ===================================== */
/* elements visibles uniquement sans CSS */
/* ===================================== */

.sans_css
{ 
  display:none;
}

/* ======================================================================== */
/* element permettant de contrer le probleme de positionnement dans le flux */
/* ======================================================================== */

.spacer
{
  clear: both;
}

/* ********************************* */
/*   elements generaux               */
/* ********************************* */

/* ---------
 * toutes les pages ont de base le meme look
 */

/* pour maitriser toutes les positions */

*
{
 margin:0;
 padding:0; 
}
p
{
  padding:0.5em 0.5em 0.5em  0.5em;
}

/* couleur de fond de la fenetre */
html
{
 background-color: #cdc3f4;
}

body
{
  /* le fond */
  background-color:#beb5e5;
  border-left:thin ridge #8973ef;
  border-top:thin ridge #8973ef;
  border-right:medium ridge #36304c;
  border-bottom:medium ridge #36304c;

  /* positionnement */
  width: 900px; 
/*  margin: 15px 15px 15px 15px;*/
  margin:15px auto;
  padding: 10px 0px 20px 0px;
/*  position:absolute;
  left:50%;
  margin-left:-300px;*/

  /* le texte */
  text-align:justify;
  color:#36304c;
}

/* ---------
 * les commentaires quelqu'ils soient sont en itallique
 */
p.com
{ 
  font-style:italic;   
}

/* ---------
 * suite au probleme d'utilisation d'un hack pour IE pour les images background avec de la transparence,
 * les liens n'etaient plus actifs.
 * solution trouvee ici:
   http://forum.alsacreations.com/topic.php?fid=4&tid=16650&s=%3Cspan%20class=
 */
a
{
  position: relative;
  z-index: 1; /* pour que ce soit au dessus de l'image sous IE */
}

/* ---------
 * les citations (en particulier de code) se font en police plus petites, pour prendre moins de place en largeur
 */
pre
{ 
  font-size:small;
  color:#000000;
}

/* ---------
 * les textes remplacant une image sont en itallique
 */
span.img
{
  font-style:italic;
  font-weight:bold;
  color: #423c5b;
}

/* ================================= */
/*  navigation/localisation          */
/* ================================= */

#navigation
{ 
  /* positionnement et taille */
  width:150px;
  float:left;
  position:relative;
  margin:5px 0px 0px 15px;
  padding:0.5em 0.5em 0.5em  0.5em;
  /* display */
  list-style-type:none;

  /* fond */
  border-left:thin ridge #8973ef;
  border-top:thin ridge #8973ef;
  border-right:medium ridge #36304c;
  border-bottom:medium ridge #36304c;
  background-color:#a6a0c1;

  /* le texte */
  font-size:small; 
  text-decoration:none;
}
#navigation li
{ 
  display:block;
}

#navigation p
{ 
  color:#4a3c84;
  padding:0.1em 0.1em 0.1em  0.1em;
}

#navigation a
{ 
  color:#4a3c84;
  font-weight:bold;
  text-decoration:none;
  padding:0.1em 0.1em 0.1em  0.1em;
}

#navigation a:hover
{ 
  color:#8973ef;
}

/* ==================================== */
/*   Le contact                         */
/* ==================================== */

#contact
{ 
  /* positionnement et taille */
  width:165px;
  margin:5px 0px 0px 7px;
  padding:0.5em 0.5em 0.5em  0.5em;

  /* fond */
  border-left:thin ridge #8973ef;
  border-top:thin ridge #8973ef;
  border-right:medium ridge #36304c;
  border-bottom:medium ridge #36304c;
  background-color:#a6a0c1;

  /* le texte */
  font-size:small; 
  text-decoration:none;
  color: #4a3c84; 
  font-weight:bold;
}

#contact:hover
{ 
  color:#8973ef;
}


/* ==================================== */
/*   Les categories                     */
/* ==================================== */

#categorie
{
  color:#423c5b;
  text-align:center;
  font-size:small; 
  font-style:italic; 
  padding:0.5em 0.5em 0.5em  0.5em;
}

/* ==================================== */
/*   le titre de la page                */
/* ==================================== */

#titre
{
  color:#423c5b;
  text-align:center;
  font-size:x-large; 
  padding:0.5em 0.5em 0.5em  0.5em;
}

/* ==================================== */
/*   le contenu                         */
/* ==================================== */

#content
{ 
  clear:both;
  margin:5px 15px 5px 15px;
}
.introduction #content
{
  clear:none;
  width:415px;
  min-height:1px;
  float:left;
  margin:5px 5px 5px 15px;
}

.exposition #content, .references #content, .histoire #content 
{
}

/* ==================================== */
/*   le complement                      */
/* ==================================== */

#complement
{ 
  margin:5px 15px 5px 15px;
}
.introduction #complement
{
  width:415px;
  float:right;
  margin:5px 15px 5px 0px;
}
.exposition #complement, .references #complement, .histoire #complement
{
}

/* ==================================== */
/*   Les notes de bas de page           */
/* ==================================== */

#notes
{ 
  /* positionnement et taille */
  margin:20px 15px 10px 15px;
  padding:0px 5px 5px 5px;
  clear:both;
  /* fond */
  border-left:thin ridge #8973ef;
  border-top:thin ridge #8973ef;
  border-right:medium ridge #36304c;
  border-bottom:medium ridge #36304c;
  background-color:#a6a0c1;
  /* le texte */
  font-size:small;
  line-height:10px;
}

#notes p
{ 
/*  display:block;*/
  padding-top:0.2em;
  margin-top:0.2em;
  padding-bottom:0.1em;
  margin-bottom:0.1em;

  color:#736e91;
}

/* il faut agrandir la hauteur de la fenetre pour que les images "bullet" ne fassent pas apparaitre l'ascenseur */
.exposition #notes
{ 
  /* positionnement et taille */
  margin-top:150px;
}

/* ==================================== */
/*   les titres de deuxieme niveau      */
/* ils peuvent etre present dans le contenu ou dans le complement
 * leur specialisation (si necessaire) se fera donc pas la classe du contenant */
/* ==================================== */

.titre-niv2
{ 
  /* positionnement et taille */
  margin-left:15px;
  padding:0.5em 0.5em 0.5em  0.5em;
  /* le texte */
  color:#4e4966;
  text-align:left;
  font-size:large; 
}

/* ====================================== */
/*   specificite navigation entre pages   */
/* ====================================== */

ul.nav-pages
{
  /* positionnement et taille */
  margin:20px 15px 20px 15px;
  padding:5px 5px 5px 5px;
  /* fond */
  border-left:thin ridge #8973ef;
  border-top:thin ridge #8973ef;
  border-right:medium ridge #36304c;
  border-bottom:medium ridge #36304c;
  background-color:#a6a0c1;
  /* le texte */
  list-style-type:none;
  text-decoration: none; 
  color: #4a3c84; 
  font-size:small;
}

li.nav-pages
{
  display:inline;
  margin:0px 5px 0px 5px;
  color:#4a3c84;
}
li.nav-pages A {
  color: #4a3c84; 
  text-decoration: none;
  font-weight:normal;
  font-weight:bold;
}
li.nav-pages A:hover {
  color: #8973ef; 
}


/* ==================================================== */
/* les informations anciennes sont ecrites plus petites */
/* ==================================================== */

.old .titre-niv2
{ 
  font-size:small; 
  color:#645b87;

  padding-top:0.2em;
  margin-top:0.2em;
  padding-bottom:0.1em;
  margin-bottom:0.1em;
}
.old p
{ 
  font-size:small; 
  color:#736e91;

  padding-top:0.2em;
  margin-top:0.2em;
  padding-bottom:0.1em;
  margin-bottom:0.1em;
}

/* **************************************************** */
/* les elements presentes comme des "Galleries"         */
/* **************************************************** */
/* Chaque element d'une gallerie est presente de la meme maniere */
/* afin d'avoir une homogeneite sur le site.                     */
/* seule son orientation peut changer                            */

 .element
{
  /* positionnement */
  margin:5px 0px 5px 0px;
  padding:5px 5px 5px 5px;
  float:left;
  /* le fond */
  border-left:thin ridge #8973ef;
  border-top:thin ridge #8973ef;
  border-right:medium ridge #36304c;
  border-bottom:medium ridge #36304c;
  background-color:#a6a0c1;
}

.dt 
{
  position:relative;
  text-align:center;
}
.dd
{
  font-weight:normal;
}


.element img
{
  border-style:none;
}

.element a
{
  border-style: none;
  text-decoration:none;
}

.dt span.img
{
  display:block;
  padding:0px 5px 0px 5px;
  width:150px;
}

/* ====================================================== */
/* navigation generale = une fausse liste de definition:  */
/*    . element = image + lien                            */
/*    . definition = texte                                */
/*                                                        */
/* presentation (gallerie horizontale):                   */
/*        dt1 dd1                                         */
/*        dt2 dd2                                         */
/* ====================================================== */
/* les references sont sur le meme modele                 */
/* les jdr sont sur le meme modele                        */
/* ====================================================== */

div.glbl-navigation
{
  width:100%;
  clear:both;
}
div.reference, div.jdr
{
  width:100%;
  clear:both;
}

/* orientation horizontale */
.glbl-navigation .element
{
  height:150px;
}
.reference .element, .jdr .element
{
  height:50px;
}

/* gestion dt */

.glbl-navigation .dt 
{
  float:right;
  padding-left:5px;
}
.reference .dt, .jdr .dt 
{
  float:left;
}
.glbl-navigation .dt img {
  width:160px;
}
.reference .dt, .jdr .dt
{
  width:150px;
}

/* gestion dd */

.glbl-navigation .dd
{
  padding:2px 2px 2px 2px;
  width:400px; /* necessaire pour les autres navigateurs que IE */
}
.reference .dd, .jdr .dd
{
  float:left;
 /* +++++ trouver la bonne taille à indiquer car là ça agandit le body */
  width:700px; /* necessaire pour les autres navigateurs que IE */
}
/* ==================================================== */
/* personnages = une fausse liste de definition:        */
/*    . element = image + lien                          */
/*    . definition = texte                              */
/*                                                      */
/* presentation (gallerie verticale):                   */
/*        dt1 dt2                                       */
/*        dd1 dd2                                       */
/*        dt3 dt4                                       */
/*        dd3 dd4                                       */
/* ==================================================== */

div.personnages
{
  width:100%;
  clear:both;
}

/* orientation vericale */
.personnages .element
{
  width:200px;
  height:450px;
  margin:5px 5px 5px 5px;
}

.personnages .dt 
{
}

.personnages .dd
{
}

/* ==================================================== */
/* gallerie = une fausse table:                         */
/*    . un titre                                        */
/*    . une description                                 */
/*    . exposition = lien                               */
/*             (image +                                 */
/*              span bullet contenant une image)        */
/*                                                      */
/* presentation (gallerie table):                       */
/*        a1 a2 a3                                      */
/*        a4 a5 a6                                      */
/* ==================================================== */

div.gallerie
{
  /* positionnement et dimmension */
  margin: 5px 0px 5px 0px;
  padding:5px 5px 5px 5px;
/*  width:100%;*/
  clear:both;
  /* le fond */
  border-left:thin inset #8973ef;
  border-top:thin inset #8973ef;
  border-right:thin inset #36304c;
  border-bottom:thin inset #36304c;
  background-color:#cdc3f4;
}
.gallerie .element
{
  margin:5px 2px 5px 2px;
}
/* l'element est carre*/
.gallerie .element img
{
  width:50px;
  height:50px;
}
.gallerie .element .bullet img
{
  width:200px;
  height:200px;
}

/* gestion du bullet */
.gallerie .element a span.bullet
{
 display:none;
}
.gallerie .element a:hover span.bullet
{
 display:inline;

 /* on le sort du flux */
 position:absolute;
 top:25px;
 left:25px;
}

/* correction d'un bug pour IE (sinon le bullet ne s'affiche pas) */
.gallerie .element a:hover
{
  background:none;
  z-index : 500;
}


/* *********************************************************** */
/* les elements specifiques aux pages des problemes techniques */
/* *********************************************************** */
.probleme
{
  /* positionnement et dimmension */
  margin: 5px 15px 5px 0px;
  padding:5px 5px 5px 5px;
  /* le fond */
  border-left:thin inset #8973ef;
  border-top:thin inset #8973ef;
  border-right:thin inset #36304c;
  border-bottom:thin inset #36304c;
  background-color:#cdc3f4;
}

.probleme-desc
{
 background-color:#a6a0c1;
 padding:0 10px 0 10px;
 margin:0 0 0 0;
}

.probleme-sol
{
 margin:0 0 0 0;
 padding:0 10px 0 10px;
}

.probleme .titre-niv2
{
 background-color:#beb5e5;
 color:#423c5b;
 padding:5px 5px 5px 5px;
 margin:0 0 0 0;
}

/* *********************************************************** */
/* les elements specifiques aux pages d'histoires              */
/* *********************************************************** */

body.histoire-page
{
}

div.page
{
  margin:15px 15px 15px  15px;
}

.page div
{
  margin:0px 5px 0px 5px;    
}

div.histoire-intro
{
 float:left;
 clear:left;
 width:50%;
}

.histoire-intro img
{
  width:100%;
}



/* ================================= */
/*   specificite personnages         */
/* ================================= */

body.jdr-perso
{
}

#photo
{ 
  clear:left;
  float:left;
/*  width:40%;*/
  height:100%;
  padding:5px 5px 5px 5px;
  margin:5px 5px 5px 5px;
}

#general, #physique, #description
{ 
  /* taille et positionnement */
  width:40%;
  float:left; 
  padding:5px 5px 5px 5px;
  margin:5px 5px 5px 5px;
  /* fond */
  border-left:thin ridge #8973ef;
  border-top:thin ridge #8973ef;
  border-right:medium ridge #36304c;
  border-bottom:medium ridge #36304c;
  background-color:#a6a0c1;

}
#general
{ 
/*  clear:right;*/
  font-weight:bold;   
}

#description
{ 
  font-style:italic;   
}


/* ******************************************************************** */
/* Communication                                                        */
/* -------------                                                        */
/* les pages sont différentes, puisqu'il s'agit d'un Pad personnalisé   */
/*                                                                      */
/* ******************************************************************** */

body.communication, body.envoye, body.aide 
{
  width: 600px; 
  height: 800px;
  background-image:url('images/communication_bleue.jpg');
  background-repeat:no-repeat;
  border-style:none;
  background-color:#cdc3f4;

 margin:0;
 padding:0; 
}
body.le_conteur
{
  background-image:url('images/communication_le_conteur_bleue.jpg');
}

body.gbadji
{
  background-image:url('images/communication_gbadji_bleue.jpg');
}

body.angarel
{
  background-image:url('images/communication_angarel_bleue.jpg');
}

body.alatan
{
  background-image:url('images/communication_alatan_bleue.jpg');
}

body.jdr
{
  background-image:url('images/communication_le_joueur_bleue.jpg');
}

/**/

.communication input, .communication textarea
{ 
  position:absolute;
  left:50px;
  z-index:1;
  width:460px;
  overflow:hidden;
  padding: 0.2em 0.2em 0.2em 0.2em;
  font-size: small;
  font-family:Verdana, Georgia,"Times New Roman", Times, cursive;
  color:#423c5b;

  -moz-border-radius:10px;
  -khtml-border-radius:10px;

  border-left:thin ridge #dfd9f9;
  border-top:thin ridge #dfd9f9;
  border-right:medium ridge #36304c;
  border-bottom:medium ridge #36304c;
  background-color:#a6a0c1;
}
.communication input:focus, .communication textarea:focus
{ 
  border-left:thin ridge #36304c;
  border-top:thin ridge #36304c;
  border-right:medium ridge #dfd9f9;
  border-bottom:medium ridge #dfd9f9;
  text-decoration:none;
}
.communication input.nom-pseudo
{ 
  top:200px;
  height:2em;
}
.communication input.mailfrom
{ 
  height:2em;
  top:260px;
}
.communication input.sujet
{ 
  height:2em;
  top:320px;
}
.communication textarea.texte
{ 
  top:410px;
  height:15em;
}

/**/

.envoye p.message
{ 
  position:absolute;
  left:50px;
  padding: 0.2em 0.2em 0.2em 0.2em;
  width:460px;

  color:#423c5b;
  font-size:medium;
  font-style:italic;
  font-size:small;
  font-family:Verdana, Georgia,"Times New Roman", Times, cursive;
  text-align:left;

  -moz-border-radius:10px;
  -khtml-border-radius:10px;

  border-left:thin ridge #dfd9f9;
  border-top:thin ridge #dfd9f9;
  border-right:medium ridge #36304c;
  border-bottom:medium ridge #36304c;
  background-color:#a6a0c1;
}
.envoye p.message.titre
{ 
  top:200px;
  height:2em;
}
.envoye p.message.info
{ 
  top:410px;
  height:15em;
}

/**/

.aide div.aide
{ 
  position:absolute;
  top:200px;
  left:60px;
  width:450px;
  height:380px;
  padding: 0.4em 0.4em 0.4em 0.4em;

  color:#423c5b;
  font-size:medium;
  font-style:italic;
  font-size:small;
  font-family:Verdana, Georgia,"Times New Roman", Times, cursive;
  text-align:left;

  -moz-border-radius:10px;
  -khtml-border-radius:10px;

  border-left:thin ridge #dfd9f9;
  border-top:thin ridge #dfd9f9;
  border-right:medium ridge #36304c;
  border-bottom:medium ridge #36304c;
  background-color:#a6a0c1;
}

/**/

.communication input.envoie, .communication input.retour, .communication input.aide, .envoye input.retour, .aide input.retour 
{
  width:100px;
  height:2em;
  top: 120px;
  cursor:pointer;
 
  -moz-border-radius:10px;
  -khtml-border-radius:10px;

  border-left:thin ridge #dfd9f9;
  border-top:thin ridge #dfd9f9;
  border-right:medium ridge #36304c;
  border-bottom:medium ridge #36304c;
  background-color:#a6a0c1;

  font-size:large;
  font-family:Verdana, Georgia,"Times New Roman", Times, cursive;
}
.communication input.envoie:active, .communication input.retour:active, .communication input.aide:active, .envoye input.retour:active, .aide input.retour:active
{
  border-left:thin ridge #36304c;
  border-top:thin ridge #36304c;
  border-right:medium ridge #dfd9f9;
  border-bottom:medium ridge #dfd9f9;
}

.communication input.envoie
{
  left: 180px;
}

.communication input.retour, .envoye input.retour, .aide input.retour
{
  left: 420px;
}

.communication input.aide
{
  left: 300px;
}


/* ---- */

.communication input.envoie:visited, .communication input.retour:visited
{
  border-style:none;
}

/* ---- */