/* ========================== */
/*  V4.0 -  10 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
 */
body
{
  /* le fond */
  background-color:#ffe3c9;
  background-image:url('images/background_fract1.jpg');
  background-repeat:no-repeat;

  /* positionnement */
  width: 900px; 
  margin: 0px;
  padding: 0px;

  /* le texte */
  text-align:justify;
  color:#8e5414;
}

/* ---------
 * 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;
}

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

#navigation
{ 
  margin-top:20px;
  list-style-type:none;

  /* le texte */
  font-size:small; 
  text-decoration:none;
}
#navigation li
{ 
  display:inline;
  margin-right:2px;
}

#navigation p
{ 
  display:inline;
  padding:0.2em 0.6em; 

  color:#ead4a5;
  background-color:#a79682; 
}

#navigation a
{ 
  padding:0.2em 0.6em; 

  color:#ead4a5;
  background-color:#a79682;
  text-decoration:none;
}

#navigation a:hover
{ 
  color:#a79682;
  background-color:#ead4a5;
}

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

#contact
{ 
  float:right;
  border:none;
  padding:0.2em 0.6em; 
  font-size:small; 
  text-decoration:none;

  color:#ead4a5;
  background-color:#a79682;
}

#contact:hover
{ 
  color:#a79682;
  background-color:#ead4a5;
}


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

#categorie
{
  color:#442d17;
  text-align:center;
  font-size:small; 
  font-style:italic; 
}

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

#titre
{
  color:#442d17;
  text-align:center;
  font-size:x-large; 
  padding-bottom:30px
}

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

#content
{ 
  margin-left:150px;
  padding-left:10px;
  padding-right:10px;
}

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

#complement
{ 
  margin-left:150px;
  padding-left:10px;
  padding-right:10px;
}

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

#notes
{ 
  margin-left:150px;
  margin-top:100px;
  font-size:small;
  line-height:0.8em;
  clear:both;
}

/* ==================================== */
/*   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
{ 
  color:#442d17;
  text-align:left;
  font-size:large; 
  padding-top:10px;
  padding-bottom:10px;
}

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

ul.nav-pages
{
  float:right;
  list-style-image:url('images/page_16x16.png');
  list-style-type:circle;
  margin-right:5px;
  font-size:x-small; 
  text-align:left;
}

li.nav-pages
{
  /*display:inline;*/
  padding-top:2px;
  padding-left:2px;
  padding-right:2px;
}


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

.old .titre-niv2, .old p
{ 
  font-size:small; 
}

/* **************************************************** */
/* 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
{
  background-color:#f6d4b6;

  float:left;
  padding:5px 5px 5px 5px;

  border-top:medium ridge #fef4f4;
  border-bottom:medium ridge #8e5414;
  border-left:medium ridge #fef4f4;
  border-right:medium ridge #8e5414;
}

.dt 
{
  position:relative;
  text-align:center;
}
.dd
{
 padding-left:10px;
}

.element img
{
  border-style:none;
}

.element a
{
  text-decoration:none;
}

.dt span.img
{
  display:block;
  padding:0px 5px 0px 5px;
  width:200px;
  color:#442d17;
}

/* ====================================================== */
/* 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, div.reference, div.jdr
{
  padding:10px;
  margin-right:1em;
  width:100%;
  clear:both;
}

/* orientation horizontale */
.glbl-navigation .element
{
  width:100%;
  height:120px;
  margin:2px 0px 2px 0px;
}
.reference .element, .jdr .element
{
  width:100%;
  height:50px;
  margin:2px 0px 2px 0px;
}

.glbl-navigation .dt, .reference .dt, .jdr .dt 
{
  float:left;
}

.glbl-navigation .dd, .reference .dd, jdr .dd
{
  float:left;
  width:500px;/* 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
{
  padding:10px;
  margin-right:1em;
  width:100%;
  clear:both;
}

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

.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
{
  padding:10px;
  margin-right:1em;
  width:100%;
  clear:both;

  background-color:#f0d0b0;
  margin:10px 2px 2px 2px;
}

/* l'element est carré*/
.gallerie .element img
{
  width:50px;
  height:50px;
  margin:2px 2px 2px 2px;
}
.gallerie .element .bullet img
{
  width:200px;
  height:200px;
  margin:2px 2px 2px 2px;
}

/* 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
{
  margin-bottom:50px;
  border-width:medium;
  border-style:ridge;
}

.probleme-desc
{
 background-color:#d4c4b0;
 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:#a79682;
 color:#ead4a5;
 padding:5px 5px 5px 5px;
 margin:0 0 0 0;
}

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

body.histoire-page
{
 background-image:url('images/background_page.jpg');
 background-repeat:no-repeat;
}

div.page
{
 margin-left:30px;
 margin-right:10px;
 margin-bottom:10px;
 padding-left:5px;
 padding-right:5px;
 width:780px;
 height:840px;
}

.page div
{
  padding-left:5px;
}

div.histoire-intro
{
 float:left;
 clear:left;
 width:50%;
 padding-right:5px;
}

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

.page p:first-child:first-letter
{
  color:#442d17;
  font-size:400%;
  float:left;
}


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

body.jdr-perso
{
  background-image:url('images/background_fract2.jpg');
  background-repeat:no-repeat;
}

#photo
{ 
  float:left;
  width:40%;
  height:100%;
  margin-left:150px;
  margin-right:10px;
/*  border-width: thin;
  border-style: outset; */
}

#general
{ 
  margin-left:600px;
  margin-right:10px;
  margin-top:10px;
  margin-bottom:10px;
  padding-right:10px;

  border-right-width: thin;
  border-right-style: inset;
  border-bottom-width: thin;
  border-bottom-style: inset;
  font-weight:bold;   
}

 #physique
{ 
  margin-left:600px;
  margin-right:10px;
  margin-top:10px;
  margin-bottom:10px;
  padding-right:10px;

  border-right-width: thin;
  border-right-style: inset;
  border-bottom-width: thin;
  border-bottom-style: inset;
}

#description
{ 
  margin-left:600px;
  margin-right:10px;
  margin-top:10px;
  margin-bottom:10px;
  padding-right:10px;

  border-right-width: thin;
  border-right-style: inset;
  border-bottom-width: thin;
  border-bottom-style: inset;
  font-style:italic;   
}


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

body.communication 
{
  width: 600px; 
  height: 800px;
  background-image:url('images/communication.jpg');
  background-repeat:no-repeat;
}

body.envoye 
{
  background-image:url('images/communication_envoye.jpg');
  background-repeat:no-repeat;
}

body.aide 
{
  background-image:url('images/communication_aide.jpg');
  background-repeat:no-repeat;
}

/**/

.communication input, .communication textarea
{ 
  position:absolute;
  left:50px;
  border:none;
  z-index:1;
  width:390px;
  background-color:#b98856;
  background-color:transparent;
  overflow:hidden;
  font-size: medium;
  font-family:Verdana, Georgia,"Times New Roman", Times, cursive;
}
.communication input.nom-pseudo
{ 
  top:110px;
}
.communication input.mailfrom
{ 
  top:210px;
}
.communication input.sujet
{ 
  top:310px;
}
.communication textarea.texte
{ 
  top:410px;
  width:500px;
  height:320px;
}

/**/

.envoye p.message
{ 
  position:absolute;
  color:#643202;
  font-size:medium;
  font-style:italic;
  font-weight:bolder;
  font-family:Verdana, Georgia,"Times New Roman", Times, cursive;
/*  font-family:"Caliph Ultra-Light",Georgia,"Times New Roman", Times, cursive*/
}
.envoye p.message.titre
{ 
  top:100px;
  left:60px;
  width:370px;
}
.envoye p.message.info
{ 
  top:400px;
  left:60px;
  width:460px;
}

/**/

.aide div.aide
{ 
  position:absolute;
  color:#643202;
  font-size:medium;
  font-style:italic;
  font-weight:bolder;
  font-family:Verdana, Georgia,"Times New Roman", Times, cursive;
/*  font-family:"Caliph Ultra-Light",Georgia,"Times New Roman", Times, cursive*/
  top:200px;
  left:60px;
  width:400px;
  height:540px;
}

/**/

.communication input.envoie
{
  left: 480px;
  top: 100px;
  width:60px;
  height:60px;
  cursor:pointer;
}

.communication input.retour
{
  left: 480px;
  top: 200px;
  width:60px;
  height:60px;
  cursor:pointer;
}
.envoye input.retour, .aide input.retour
{
  top: 100px;
}

.communication input.aide
{
  left: 480px;
  top: 300px;
  width:60px;
  height:60px;
  cursor:pointer;
}

/* bouton Envoyer */

.communication input.envoie
{
  border-style:none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='../images/communication_bouton_orange_E.png');
}

.communication input.envoie[class]
{
  background-image:url('images/communication_bouton_orange_E.png');
  background-repeat:no-repeat;
}

.communication input.envoie:active
{
  border-style:none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='../images/communication_bouton_vert_E.png');
}

.communication input.envoie:active[class]
{
  background-image:url('images/communication_bouton_vert_E.png');
  background-repeat:no-repeat;
}

/* bouton Retour */
.communication input.retour
{
  border-style:none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='../images/communication_bouton_rouge_R.png');
}

.communication input.retour[class]
{
  background-image:url('images/communication_bouton_rouge_R.png');
  background-repeat:no-repeat;
}

.communication input.retour:active
{
  border-style:none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='../images/communication_bouton_vert_R.png');
}

.communication input.retour:active[class]
{
  background-image:url('images/communication_bouton_vert_R.png');
  background-repeat:no-repeat;
}
/* bouton Aide */
.communication input.aide
{
  border-style:none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='../images/communication_bouton_chair_A.png');
}

.communication input.aide[class]
{
  background-image:url('images/communication_bouton_chair_A.png');
  background-repeat:no-repeat;
}

/* ---- */

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

/* ---- */
.communication label.contact
{
  position:absolute;
  left: 60px;
  top: 30px;
  width:460px;
  height:50px;
}

.communication label.le_conteur
{
  background-image:url('images/communication_le_conteur.png');
  background-repeat:no-repeat;
}

.communication label.gbadji
{
  background-image:url('images/communication_gbadji.png');
  background-repeat:no-repeat;
}

.communication label.angarel
{
  background-image:url('images/communication_angarel.png');
  background-repeat:no-repeat;
}

.communication label.alatan
{
  background-image:url('images/communication_alatan.png');
  background-repeat:no-repeat;
}

.communication label.jdr
{
  background-image:url('images/communication_le_joueur.png');
  background-repeat:no-repeat;
}