Soucis code css trop long

[steph846]

Bonsoir à tous,

Alors voilà, je suis entrain de créer un forum multi-univers (6 univers) et donc 6 fiches de présentations identiques, mais avec des couleurs différentes. Le problème c'est que mon code ne supporte pas une sixième fiche de présentation. Quand j'enregistre mon code CSS modifié, une page blanche apparaît et évidemment aucun enregistrement n'est fait. J'aimerai vraiment trouver une solution pour réduire ce code ou passer par une autre méthode mais je ne vois pas comment faire :s.

Voici le code CSS en question (probablement bourré de fautes qui plus est :

Code:

/********************************************* FICHE DE PRESENTATION POUR NIGHTFALL*****************************************/

/* ------------- FICHE PV-RPG
Créee par Orange de CSSActif (http://www.css-actif.com)
Merci de conserver cette mention par respect ----------- */
.nightfall_fiche, .nightfall_pv { /* Fond de la fiche */
  background-color: #1D1D1D;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0px 0px 10px 0px #000000;
-moz-box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px #000000;     
}

div.nightfall_fiche_header { /* En-tête avec image de fond */
  background-repeat: none;
  background-position: top center;
  height: 150px;
  border-bottom: 15px double #225444;
  -webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

td.nightfall_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center;
  width: 200px;
  height: 320px;
  border-right: 15px double #225444;
    -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
  text-shadow: 1px 1px 0px #000;
  font-size: 10px;
}

div.nightfall_pv_titre h1, div.nightfall_fiche_titre h1 { /* Titre prénoms & nom */
font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 32px;
  text-shadow: 1px 1px 0px #000;
  color: #222B25;
  margin: 0;
  text-align: right; 
  text-transform: uppercase;
}

div.nightfall_fiche_titre, div.nightfall_pv_titre { /* Titre + feat + Positionne le titre "à cheval" sur la bordure */
  position: relative;
  top: -28px;
  text-align: right;     
  padding-right: 20px;   
}

.nightfall_pv h2, div.nightfall_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
 background-color: #111111; 
 border-color: #225444;
 border-width: 1px 0px;
 border-style: solid;
    -webkit-box-shadow: 0px 0px 3px 0px #000000;
-moz-box-shadow: 0px 0px 3px 0px #000000;
box-shadow: 0px 0px 3px 0px #000000; 
  text-align: center; 
  text-transform: uppercase;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #225444; 
  margin: 0;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 1px 1px 0px #000;
  letter-spacing: 5px;   
}

.cssactif_pv_content, .nightfall_fiche_content { /* Contenu */
 padding: 10px; /* Marge interne */
 text-align: justify; /* Justifie le texte */
 text-shadow: 1px 1px 0px #000; /*Ombre du texte */
}

.nightfall_pv em, .nightfall_fiche em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #225444;  /* Couleur du titre */
  font-style: normal;
  text-transform: uppercase;
}


div.infobulle {
  position: relative;
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
  display: inline-block; /*Place les icones un à côté de l'autre */
  margin: 10px; /* marge entre les icones */
  border: 1px solid #333; /* bordure des icones */
 
  -webkit-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone  (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 5px 0px #000000;  /* Ombre de l'icone  (voir http://css3generator.com/ choix "Box-shadow") */

}

div.infobulle img {
 height: 50px;
 width: 50px; 
}

div.infobulle div{
  display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
  background: none;
  z-index: 500;

}
div.infobulle:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;
  width: 300px;
  top: 50px;
  left: 0px;
  background-color: #1D1D1D;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px; 
  -webkit-box-shadow: 0px 0px 10px 0px #000000;
-moz-box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px #000000; 
      border-left: 6px double #225444;
      padding: 10px;
}

.checkbox{ border: #000000 double 3px;
padding: 10px;
top: 50px;
width: 200px;
background-color: #;
border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-htm-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid #225444;
text-align: center;
line-height: 12px;
box-shadow: 2px 2px 7px black;
text-shadow: #0E0000 1px 1px 1px; }

.titlelinks {
  background: linear-gradient( #6B6B31, #225444);
  text-align: center;
  font-family: Georgia;
  font-weight : bold;
  font-size: 20px;
  margin-top :5px;
  text-shadow: 2px 2px 2px #000000;
  margin-bottom: 5px;}
 
.conteneur {
  margin-top:5px;
  padding: 5px 5px 5px 5px;
  text-align:justify;
  position: relative;
  font-family:Georgia;
  text-shadow: 2px 2px 2px #000000;
  color:#ffffff}
 
.transparente {
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  opacity: 0.5;
  -khtml-opacity: 0.5;
  width: 200px;
  height: 320px;}
 
.pastransparente {
  margin-top:7px;
  top:5px;
  filter:alpha(opacity=0);
  -moz-opacity:0;
  opacity: 0;
  -khtml-opacity: 0;
  position: absolute;
  -webkit-transition: all 0.5s linear 0s;
  -moz-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s;
  width:200px;
  height: 315px;
  overflow:auto;}
 
.pastransparente:hover {
  filter:alpha(opacity=100);
  -moz-opacity:1;
  opacity: 1;
  -khtml-opacity: 1;
  position: absolute;
  height:315px;}

.fiche2{
  z-index:1;
  -moz-border-radius:200px;
  border-radius:200px;
  margin-top:5px;
  text-align:justify;
  font-family:Georgia;
  text-shadow: 2px 2px 2px #000000;
  opacity:0.5;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  position: relative;
  width:250px;
  height:50px;
  overflow:hidden;
  display:inline-block;
  background-color:#000000;
  color:#ffffff;
  -webkit-transition: all 0.5s linear 0s;
  -moz-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s}

.fiche2:hover{
  margin-top:-150px;
  margin-bottom:-330px;
  z-index:99;
  -moz-border-radius:100px;
  border-radius:100px;
  background-color:#1A1B1D;
  width:280px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  opacity:1;
  border:2px solid #225444;
  height:420px}

.nightfall_visage {
  height: 200px;
 width: 200px;
  -moz-border-radius: 100px;
-o-border-radius: 100px;
-htm-border-radius: 100px;
-webkit-border-radius: 100px;
  border: 6px double #225444;}
 

/* ------------- FIN FICHE PV-RPG */

/********************************************* FICHE DE PRESENTATION POUR REDEMPTION*****************************************/

.redemption_fiche, .redemption_pv { /* Fond de la fiche */
  background-color: #1D1D1D;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
    -webkit-box-shadow: 0px 0px 10px 0px #000000;
-moz-box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px #000000;       
}

div.redemption_fiche_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center; 
  border-bottom: 15px double #9E4E12;
  height: 200px;
  -webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

td.redemption_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center;
  width: 200px;
  height: 320px;
  border-right: 15px double #9E4E12;
    -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
  text-shadow: 1px 1px 0px #000;
  font-size: 10px;
} 
 
div.redemption_pv_titre h1, div.redemption_fiche_titre h1 { /* Titre prénoms & nom */
font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 32px;
  text-shadow: 1px 1px 0px #000;
  color: #DB7705;
  margin: 0;
  text-align: right; 
  text-transform: uppercase;
}

div.redemption_fiche_titre, div.redemption_pv_titre { /* Titre + feat + Positionne le titre "à cheval" sur la bordure */
  position: relative;
  top: -28px;
  text-align: right;     
  padding-right: 20px;   
}

.redemption_pv h2, div.redemption_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
  background-color: #111111;  /* Couleur du fond des sous-titres */
  border-color: #6a0e1b; /* Couleur de la bordure */
  border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS  GAUCHE & DROITE */
  border-style: solid; /* Style de la bordure */
  -webkit-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  -moz-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  box-shadow: 0px 0px 3px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  text-align: center;  /* Aligne le titre au centre */
  text-transform: uppercase; /* Met le titre en majuscules */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #9E4E12;  /* Couleur du titre */
  margin: 0; /* Supprimer marge */
  font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
  font-weight: normal; /*Épaisseur du texte */
  text-shadow: 1px 1px 0px #000; /*Ombre du texte */
  letter-spacing: 5px; /* Espacement des caractères */ }

.redemption_pv em, .redemption_fiche em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #9E4E12;  /* Couleur du titre */
  font-style: normal;
  text-transform: uppercase;}


div.infobulle:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;
  width: 300px; /* Largeur de l'infobulle */
  tpp: 50px; /* on positionne notre infobulle */
  left: 0px;
  background-color: #1D1D1D; /* Couleur de fond */
  -webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
  -moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
  border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
  -webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
      border-left: 6px double #9E4E12;
      padding: 10px; /* marge interne de l'infobulle */
}

.checkbox1{ border: #000000 double 3px;
padding: 10px;
top: 50px;
width: 200px;
background-color: #111111;
border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-htm-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid #9E4E12;
text-align: center;
line-height: 12px;
box-shadow: 2px 2px 7px black;
text-shadow: #0E0000 1px 1px 1px; }

.titlelinks1 {
  background: linear-gradient(#9E4E12,#DB7705);
  text-align: center;
  font-family: Georgia;
  font-weight : bold;
  font-size: 20px;
  margin-top :5px;
  text-shadow: 2px 2px 2px #000000;
  margin-bottom: 5px;}

.fiche3{
  z-index:1;
  -moz-border-radius:200px;
  border-radius:200px;
  margin-top:5px;
  text-align:justify;
  font-family:Georgia;
  text-shadow: 2px 2px 2px #000000;
  opacity:0.5;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  position: relative;
  width:250px;
  height:50px;
  overflow:hidden;
  display:inline-block;
  background-color:#000000;
  color:#ffffff;
  -webkit-transition: all 0.5s linear 0s;
  -moz-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s}

.fiche3:hover{
  margin-top:-150px;
  margin-bottom:-330px;
  z-index:99;
  -moz-border-radius:100px;
  border-radius:100px;
  background-color:#111111;
  width:280px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  opacity:1;
  border:2px solid #9E4E12;
  height:420px}

.redemption_pv em, .redemption_fiche em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #9E4E12;
  font-style: normal;
  text-transform: uppercase;
}

td.redemption_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center;
  width: 200px;
  height: 320px;
  border-right: 15px double #9E4E12;
    -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
  text-shadow: 1px 1px 0px #000;
  font-size: 10px;
}

.redemption_pv h2, div.redemption_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
 background-color: #111111; 
 border-color: #9E4E12;
 border-width: 1px 0px;
 border-style: solid;
    -webkit-box-shadow: 0px 0px 3px 0px #000000;
-moz-box-shadow: 0px 0px 3px 0px #000000;
box-shadow: 0px 0px 3px 0px #000000; 
  text-align: center; 
  text-transform: uppercase;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #9E4E12; 
  margin: 0;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 1px 1px 0px #000;
  letter-spacing: 5px;   
}

.redemption_visage {
  height: 200px;
 width: 200px;
  -moz-border-radius: 100px;
-o-border-radius: 100px;
-htm-border-radius: 100px;
-webkit-border-radius: 100px;
  border: 6px double #9E4E12;}
/* ------------- FIN FICHE PV-RPG */

/********************************************* FICHE DE PRESENTATION POUR ATLANTIS*****************************************/

.atlantis_fiche, .atlantis_pv { /* Fond de la fiche */
  background-color: #1D1D1D;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
    -webkit-box-shadow: 0px 0px 10px 0px #000000;
-moz-box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px #000000;       
}

div.atlantis_fiche_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center; 
  border-bottom: 15px double #002431;
  height: 200px;
  -webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

td.atlantis_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center;
  width: 200px;
  height: 320px;
  border-right: 15px double #002431;
    -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
  text-shadow: 1px 1px 0px #000;
  font-size: 10px;
} 
 
div.atlantis_pv_titre h1, div.atlantis_fiche_titre h1 { /* Titre prénoms & nom */
font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 32px;
  text-shadow: 1px 1px 0px #000;
  color: #117FA6;
  margin: 0;
  text-align: right; 
  text-transform: uppercase;
}

div.atlantis_fiche_titre, div.atlantis_pv_titre { /* Titre + feat + Positionne le titre "à cheval" sur la bordure */
  position: relative;
  top: -28px;
  text-align: right;     
  padding-right: 20px;   
}

.atlantis_pv h2, div.atlantis_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
  background-color: #111111;  /* Couleur du fond des sous-titres */
  border-color: #6a0e1b; /* Couleur de la bordure */
  border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS  GAUCHE & DROITE */
  border-style: solid; /* Style de la bordure */
  -webkit-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  -moz-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  box-shadow: 0px 0px 3px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  text-align: center;  /* Aligne le titre au centre */
  text-transform: uppercase; /* Met le titre en majuscules */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #117FA6;  /* Couleur du titre */
  margin: 0; /* Supprimer marge */
  font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
  font-weight: normal; /*Épaisseur du texte */
  text-shadow: 1px 1px 0px #000; /*Ombre du texte */
  letter-spacing: 5px; /* Espacement des caractères */ }

.atlantis_pv em, .atlantis_fiche em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #117FA6;  /* Couleur du titre */
  font-style: normal;
  text-transform: uppercase;}


div.infobulle:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;
  width: 300px; /* Largeur de l'infobulle */
  tpp: 50px; /* on positionne notre infobulle */
  left: 0px;
  background-color: #1D1D1D; /* Couleur de fond */
  -webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
  -moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
  border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
  -webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
      border-left: 6px double #117FA6;
      padding: 10px; /* marge interne de l'infobulle */
}

.checkbox2{ border: #000000 double 3px;
padding: 10px;
top: 50px;
width: 200px;
background-color: #111111;
border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-htm-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid #117FA6;
text-align: center;
line-height: 12px;
box-shadow: 2px 2px 7px black;
text-shadow: #0E0000 1px 1px 1px; }

.titlelinks2 {
  background: linear-gradient(#002431,#117FA6);
  text-align: center;
  font-family: Georgia;
  font-weight : bold;
  font-size: 20px;
  margin-top :5px;
  text-shadow: 2px 2px 2px #000000;
  margin-bottom: 5px;}

.fiche4{
  z-index:1;
  -moz-border-radius:200px;
  border-radius:200px;
  margin-top:5px;
  text-align:justify;
  font-family:Georgia;
  text-shadow: 2px 2px 2px #000000;
  opacity:0.5;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  position: relative;
  width:250px;
  height:50px;
  overflow:hidden;
  display:inline-block;
  background-color:#000000;
  color:#ffffff;
  -webkit-transition: all 0.5s linear 0s;
  -moz-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s}

.fiche4:hover{
  margin-top:-150px;
  margin-bottom:-330px;
  z-index:99;
  -moz-border-radius:100px;
  border-radius:100px;
  background-color:#111111;
  width:280px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  opacity:1;
  border:2px solid #117FA6;
  height:420px}

.atlantis_pv em, .atlantis_fiche em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #117FA6;
  font-style: normal;
  text-transform: uppercase;
}

td.atlantis_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center;
  width: 200px;
  height: 320px;
  border-right: 15px double #117FA6;
  border-radius: 20px;
  text-shadow: 1px 1px 0px #000;
  font-size: 10px;
}

.atlantis_pv h2, div.atlantis_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
  background-color: #111111; 
  border-color: #117FA6;
  border-width: 1px 0px;
  border-style: solid;
  box-shadow: 0px 0px 3px 0px #000000; 
  text-align: center; 
  text-transform: uppercase;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #117FA6; 
  margin: 0;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 1px 1px 0px #000;
  letter-spacing: 5px;   
}

.atlantis_visage {
  height: 200px;
 width: 200px;
  -moz-border-radius: 100px;
-o-border-radius: 100px;
-htm-border-radius: 100px;
-webkit-border-radius: 100px;
  border: 6px double #117FA6;}

/* ------------- FIN FICHE PV-RPG */

/********************************************* FICHE DE PRESENTATION POUR ANTANARIA *****************************************/

.antanaria_fiche, .antanaria_pv { /* Fond de la fiche */
  background-color: #1D1D1D;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
    -webkit-box-shadow: 0px 0px 10px 0px #000000;
-moz-box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px #000000;       
}

div.antanaria_fiche_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center; 
  border-bottom: 15px double #C8AD7F;
  height: 200px;
  -webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

td.antanaria_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center;
  width: 200px;
  height: 320px;
  border-right: 15px double #C8AD7F;
    -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
  text-shadow: 1px 1px 0px #000;
  font-size: 10px;
} 
 
div.antanaria_pv_titre h1, div.antanaria_fiche_titre h1 { /* Titre prénoms & nom */
font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 32px;
  text-shadow: 1px 1px 0px #000;
  color: #8B6C42;
  margin: 0;
  text-align: right; 
  text-transform: uppercase;
}

div.antanaria_fiche_titre, div.antanaria_pv_titre { /* Titre + feat + Positionne le titre "à cheval" sur la bordure */
  position: relative;
  top: -28px;
  text-align: right;     
  padding-right: 20px;   
}

.antanaria_pv h2, div.antanaria_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
  background-color: #111111;  /* Couleur du fond des sous-titres */
  border-color: #C8AD7F; /* Couleur de la bordure */
  border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS  GAUCHE & DROITE */
  border-style: solid; /* Style de la bordure */
  -webkit-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  -moz-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  box-shadow: 0px 0px 3px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  text-align: center;  /* Aligne le titre au centre */
  text-transform: uppercase; /* Met le titre en majuscules */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #C8AD7F;  /* Couleur du titre */
  margin: 0; /* Supprimer marge */
  font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
  font-weight: normal; /*Épaisseur du texte */
  text-shadow: 1px 1px 0px #000; /*Ombre du texte */
  letter-spacing: 5px; /* Espacement des caractères */ }

.antanaria_pv em, .antanaria_fiche em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #C8AD7F;  /* Couleur du titre */
  font-style: normal;
  text-transform: uppercase;}


div.infobulle:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;
  width: 300px; /* Largeur de l'infobulle */
  tpp: 50px; /* on positionne notre infobulle */
  left: 0px;
  background-color: #1D1D1D; /* Couleur de fond */
  -webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
  -moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
  border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
  -webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
      border-left: 6px double #C8AD7F;
      padding: 10px; /* marge interne de l'infobulle */
}

.checkbox3{ border: #000000 double 3px;
padding: 10px;
top: 50px;
width: 200px;
background-color: #111111;
border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-htm-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid #C8AD7F;
text-align: center;
line-height: 12px;
box-shadow: 2px 2px 7px black;
text-shadow: #0E0000 1px 1px 1px; }

.titlelinks3 {
  background: linear-gradient(#C8AD7F,#8B6C42);
  text-align: center;
  font-family: Georgia;
  font-weight : bold;
  font-size: 20px;
  margin-top :5px;
  text-shadow: 2px 2px 2px #000000;
  margin-bottom: 5px;}

.fiche5{
  z-index:1;
  -moz-border-radius:200px;
  border-radius:200px;
  margin-top:5px;
  text-align:justify;
  font-family:Georgia;
  text-shadow: 2px 2px 2px #000000;
  opacity:0.5;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  position: relative;
  width:250px;
  height:50px;
  overflow:hidden;
  display:inline-block;
  background-color:#000000;
  color:#ffffff;
  -webkit-transition: all 0.5s linear 0s;
  -moz-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s}

.fiche5:hover{
  margin-top:-150px;
  margin-bottom:-330px;
  z-index:99;
  -moz-border-radius:100px;
  border-radius:100px;
  background-color:#111111;
  width:280px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  opacity:1;
  border:2px solid #C8AD7F;
  height:420px}

.antanaria_pv em, .antanaria_fiche em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #C8AD7F;
  font-style: normal;
  text-transform: uppercase;
}

td.antanaria_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center;
  width: 200px;
  height: 320px;
  border-right: 15px double #C8AD7F;
    -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
  text-shadow: 1px 1px 0px #000;
  font-size: 10px;
}

.antanaria_pv h2, div.antanaria_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
 background-color: #111111; 
 border-color: #C8AD7F;
 border-width: 1px 0px;
 border-style: solid;
    -webkit-box-shadow: 0px 0px 3px 0px #000000;
-moz-box-shadow: 0px 0px 3px 0px #000000;
box-shadow: 0px 0px 3px 0px #000000; 
  text-align: center; 
  text-transform: uppercase;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #C8AD7F; 
  margin: 0;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 1px 1px 0px #000;
  letter-spacing: 5px;   
}

.antanaria_visage {
  height: 200px;
 width: 200px;
  -moz-border-radius: 100px;
-o-border-radius: 100px;
-htm-border-radius: 100px;
-webkit-border-radius: 100px;
  border: 6px double #C8AD7F;}

/* ------------- FIN FICHE PV-RPG */

/********************************************* FICHE DE PRESENTATION POUR DAMNATION *****************************************/

.damnation_fiche, .damnation_pv { /* Fond de la fiche */
  background-color: #1D1D1D;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
    -webkit-box-shadow: 0px 0px 10px 0px #000000;
-moz-box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px #000000;       
}

div.damnation_fiche_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center; 
  border-bottom: 15px double #6a0e1b;
  height: 200px;
  -webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

td.damnation_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center;
  width: 200px;
  height: 320px;
  border-right: 15px double #6a0e1b;
    -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
  text-shadow: 1px 1px 0px #000;
  font-size: 10px;
} 
 
div.damnation_pv_titre h1, div.damnation_fiche_titre h1 { /* Titre prénoms & nom */
font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 32px;
  text-shadow: 1px 1px 0px #000;
  color: #C0121C;
  margin: 0;
  text-align: right; 
  text-transform: uppercase;
}

div.damnation_fiche_titre, div.damnation_pv_titre { /* Titre + feat + Positionne le titre "à cheval" sur la bordure */
  position: relative;
  top: -28px;
  text-align: right;     
  padding-right: 20px;   
}

.damnation_pv h2, div.damnation_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
  background-color: #111111;  /* Couleur du fond des sous-titres */
  border-color: #6a0e1b; /* Couleur de la bordure */
  border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS  GAUCHE & DROITE */
  border-style: solid; /* Style de la bordure */
  -webkit-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  -moz-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  box-shadow: 0px 0px 3px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  text-align: center;  /* Aligne le titre au centre */
  text-transform: uppercase; /* Met le titre en majuscules */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #6a0e1b;  /* Couleur du titre */
  margin: 0; /* Supprimer marge */
  font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
  font-weight: normal; /*Épaisseur du texte */
  text-shadow: 1px 1px 0px #000; /*Ombre du texte */
  letter-spacing: 5px; /* Espacement des caractères */ }

.damnation_pv em, .damnation_fiche em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #6a0e1b;  /* Couleur du titre */
  font-style: normal;
  text-transform: uppercase;}


div.infobulle:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;
  width: 300px; /* Largeur de l'infobulle */
  tpp: 50px; /* on positionne notre infobulle */
  left: 0px;
  background-color: #1D1D1D; /* Couleur de fond */
  -webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
  -moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
  border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
  -webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
      border-left: 6px double #6a0e1b;
      padding: 10px; /* marge interne de l'infobulle */
}

.checkbox4{ border: #000000 double 3px;
padding: 10px;
top: 50px;
width: 200px;
background-color: #111111;
border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-htm-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid #6a0e1b;
text-align: center;
line-height: 12px;
box-shadow: 2px 2px 7px black;
text-shadow: #0E0000 1px 1px 1px; }

.titlelinks4 {
  background: linear-gradient(#6a0e1b,#8B6C42);
  text-align: center;
  font-family: Georgia;
  font-weight : bold;
  font-size: 20px;
  margin-top :5px;
  text-shadow: 2px 2px 2px #000000;
  margin-bottom: 5px;}

.fiche6{
  z-index:1;
  -moz-border-radius:200px;
  border-radius:200px;
  margin-top:5px;
  text-align:justify;
  font-family:Georgia;
  text-shadow: 2px 2px 2px #000000;
  opacity:0.5;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  position: relative;
  width:250px;
  height:50px;
  overflow:hidden;
  display:inline-block;
  background-color:#000000;
  color:#ffffff;
  -webkit-transition: all 0.5s linear 0s;
  -moz-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s}

.fiche6:hover{
  margin-top:-150px;
  margin-bottom:-330px;
  z-index:99;
  -moz-border-radius:100px;
  border-radius:100px;
  background-color:#111111;
  width:280px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  opacity:1;
  border:2px solid #6a0e1b;
  height:420px}

.damnation_pv em, .damnation_fiche em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #6a0e1b;
  font-style: normal;
  text-transform: uppercase;
}

td.damnation_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center;
  width: 200px;
  height: 320px;
  border-right: 15px double #6a0e1b;
    -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
  text-shadow: 1px 1px 0px #000;
  font-size: 10px;
}

.damnation_pv h2, div.damnation_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
 background-color: #111111; 
 border-color: #6a0e1b;
 border-width: 1px 0px;
 border-style: solid;
    -webkit-box-shadow: 0px 0px 3px 0px #000000;
-moz-box-shadow: 0px 0px 3px 0px #000000;
box-shadow: 0px 0px 3px 0px #000000; 
  text-align: center; 
  text-transform: uppercase;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #6a0e1b; 
  margin: 0;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 1px 1px 0px #000;
  letter-spacing: 5px;   
}

.damnation_visage {
  height: 200px;
 width: 200px;
  -moz-border-radius: 100px;
-o-border-radius: 100px;
-htm-border-radius: 100px;
-webkit-border-radius: 100px;
  border: 6px double #6a0e1b;}

/* ------------- FIN FICHE PV-RPG */

/********************************************* FICHE DE PRESENTATION POUR LONDON *****************************************/

.london_fiche, .london_pv { /* Fond de la fiche */
  background-color: #1D1D1D;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
    -webkit-box-shadow: 0px 0px 10px 0px #000000;
-moz-box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px #000000;       
}

div.london_fiche_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center; 
  border-bottom: 15px double #83619D;
  height: 200px;
  -webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

td.london_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center;
  width: 200px;
  height: 320px;
  border-right: 15px double #83619D;
    -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
  text-shadow: 1px 1px 0px #000;
  font-size: 10px;
} 
 
div.london_pv_titre h1, div.london_fiche_titre h1 { /* Titre prénoms & nom */
font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 32px;
  text-shadow: 1px 1px 0px #000;
  color: #702963;
  margin: 0;
  text-align: right; 
  text-transform: uppercase;
}

div.london_fiche_titre, div.london_pv_titre { /* Titre + feat + Positionne le titre "à cheval" sur la bordure */
  position: relative;
  top: -28px;
  text-align: right;     
  padding-right: 20px;   
}

.london_pv h2, div.london_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
  background-color: #111111;  /* Couleur du fond des sous-titres */
  border-color: #83619D; /* Couleur de la bordure */
  border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS  GAUCHE & DROITE */
  border-style: solid; /* Style de la bordure */
  -webkit-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  -moz-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  box-shadow: 0px 0px 3px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
  text-align: center;  /* Aligne le titre au centre */
  text-transform: uppercase; /* Met le titre en majuscules */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #83619D;  /* Couleur du titre */
  margin: 0; /* Supprimer marge */
  font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
  font-weight: normal; /*Épaisseur du texte */
  text-shadow: 1px 1px 0px #000; /*Ombre du texte */
  letter-spacing: 5px; /* Espacement des caractères */ }

.london_pv em, .london_fiche em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #83619D;  /* Couleur du titre */
  font-style: normal;
  text-transform: uppercase;}


div.infobulle:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;
  width: 300px; /* Largeur de l'infobulle */
  tpp: 50px; /* on positionne notre infobulle */
  left: 0px;
  background-color: #1D1D1D; /* Couleur de fond */
  -webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
  -moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
  border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
  -webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
      border-left: 6px double #83619D;
      padding: 10px; /* marge interne de l'infobulle */
}

.checkbox8{ border: #000000 double 3px;
padding: 10px;
top: 50px;
width: 200px;
background-color: #111111;
border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-htm-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid #83619D;
text-align: center;
line-height: 12px;
box-shadow: 2px 2px 7px black;
text-shadow: #0E0000 1px 1px 1px; }

.titlelinks8 {
  background: linear-gradient(#83619D,#8B6C42);
  text-align: center;
  font-family: Georgia;
  font-weight : bold;
  font-size: 20px;
  margin-top :5px;
  text-shadow: 2px 2px 2px #000000;
  margin-bottom: 5px;}

.fiche8{
  z-index:1;
  -moz-border-radius:200px;
  border-radius:200px;
  margin-top:5px;
  text-align:justify;
  font-family:Georgia;
  text-shadow: 2px 2px 2px #000000;
  opacity:0.5;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  position: relative;
  width:250px;
  height:50px;
  overflow:hidden;
  display:inline-block;
  background-color:#000000;
  color:#ffffff;
  -webkit-transition: all 0.5s linear 0s;
  -moz-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s}

.fiche8:hover{
  margin-top:-150px;
  margin-bottom:-330px;
  z-index:99;
  -moz-border-radius:100px;
  border-radius:100px;
  background-color:#111111;
  width:280px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  opacity:1;
  border:2px solid #83619D;
  height:420px}

.london_pv em, .london_fiche em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #83619D;
  font-style: normal;
  text-transform: uppercase;
}

td.london_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat;
  background-position: top center;
  width: 200px;
  height: 320px;
  border-right: 15px double #83619D;
    -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
  text-shadow: 1px 1px 0px #000;
  font-size: 10px;
}

.london_pv h2, div.london_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
 background-color: #111111; 
 border-color: #83619D;
 border-width: 1px 0px;
 border-style: solid;
    -webkit-box-shadow: 0px 0px 3px 0px #000000;
-moz-box-shadow: 0px 0px 3px 0px #000000;
box-shadow: 0px 0px 3px 0px #000000; 
  text-align: center; 
  text-transform: uppercase;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #884DA7; 
  margin: 0;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 1px 1px 0px #000;
  letter-spacing: 5px;   
}

.london_visage {
  height: 200px;
 width: 200px;
  -moz-border-radius: 100px;
-o-border-radius: 100px;
-htm-border-radius: 100px;
-webkit-border-radius: 100px;
  border: 6px double #83619D;}

/* ------------- FIN FICHE PV-RPG */

Comment puis-je procéder ? :s.

Merci de votre aide.
Je vous mets l'adresse du forum même si vous ne serez pas plus avancé : http://folkstories.forumactif.com/

[Neptunia]

Bonjour ^^

La feuille CSS de votre forum est limitée à approximativement 65000 caractères espaces compris.

Vous allez devoir héberger votre feuille css ailleurs (archive-host par exemple), enfin juste ce qui ne change que rarement (le code des fiches)

Ensuite pour l'intégrer à votre forum plusieurs solutions
- Charger votre feuille css dans votre template overall_header juste avant la balise </head>

Code:

<link href='http://hebergeur.com/votrefeuille.css' rel='stylesheet' type='text/css'>

- Ou l'insérer sous forme de balise meta
PA > Général > Promotion du forum > Les moteurs de recherhe
-> Balises supplémentaires > > Lier une feuille CSS > Sélectionner
Dans le champ de saisie, entrez l'adresse de votre feuille (commence par http et finit par .css) et cliquer sur Ajouter

[steph846]

Bonjour et tout d'abord merci beaucoup neptune.

Seulement, harchive host est payant il apparemment et je ne peux pas me permettre une telle folie en ce moment . N'y a-t-il pas d'autres solutions?

Encore merci en tout cas

[MlleAlys]

bonjour,
vous pourriez raccourcir les codes en ne modifiant que les couleurs pour chaque fiche plutôt que de tout remettre ^^

[steph846]

Bonsoir et merci de votre aide ^^

En fait si c'est possible j'aimerai beaucoup, j'ai essayé pour ne rien vous cacher, mais sans parvenir au même résultat :s.

Mais je ne sais pas comment procéder pour réduire ces codes finalement :s

[Neptunia]

Seulement, harchive host est payant il apparemment et je ne peux pas me permettre une telle folie en ce moment . N'y a-t-il pas d'autres solutions?

Archive-host propose une offre gratuite avec un espace de 500 Mo (ce qui suffit largement pour de simples fichiers texte. Mais ils l'ont bien cachée

https://www.archive-host.com/page-inscriptionf

Sur cette page, précisez que vos besoins sont simples

Merci à SeLfde4Th7 pour l'information.

[MlleAlys]

Vous pouvez mettre les mêmes classes pour toutes les fiches, et en ajouter juste une sur le bloc principal de la fiche qui permettra de cibler son univers :
http://jsfiddle.net/gwzzgfe8/1/

[steph846]

Si j'ai bien compris ce que vous voulez m'expliquer, il s'agirait de réduire les codes au possible ?

Seulement c'est l'impression que j'ai :s. Tout du moins ce que j'ai essayé de faire. J'ai laissé dans mes codes html autant de codes que possible pour que cela reste clair au plus grand nombre malgré tout :s. Et je suis passée par les CSS pour identifier l'appartenance à un forum :

Voilà à quoi ressemble ma fiche. Le seul changement vient des couleurs en fait :s.

[MlleAlys]

serait-il possible d'avoir les codes de deux ou trois fiches pour que je vous montre ce que je veux dire ? ^^

[steph846]

Je suis désolée d'être aussi obtuse :s

Voici la fiche de Nightfall :


Celle de Redemption :


et celle d'Antanaria :

Code:

<div class="antanaria_fiche">
<div class="antanaria_fiche_header" style="background: url(http://i.imgur.com/cQhX1X1.jpg);">

</div><div class="antanaria_fiche_titre"><h1>Prénoms & Nom</h1>
feat. Célébrité</div>

<h2>Identité</h2><!--
--><div class="cssactif_fiche_content">
<table><td><img src="http://i.imgur.com/Hp2wfM4.jpg" class="antanaria_visage"></td><td><div style="width: 360px; height: 200px; overflow: auto; padding-right:7px;"><em>Age</em>: Indiquer l'âge d'apparence physique et l'âge réel (s'il y a).
<em>Lieu et date de naissance</em>: ...
<em>Appartenance</em>: Groupe + Sous-groupe
<em>Etat civil</em>: Célibataire / Marié(e) / Veuf/ve / Autres...
<em>Profession</em>: Merci au besoin d'y ajouter le rang hiérarchique au besoin.
<em>Pouvoirs</em>: Si vous en possédez...
<em>Particularité</em>: Une petite chose que les autres n'auraient pas? Ou une grande qui sait? oO...
<em>Arme de prédilection</em>: A développer au besoin.
<em>Sexualité</em>: Eunuque? Hétéro? Bi? Homo? Lesbienne? Etes-vous en mesure de procréer?...</div></td></table>

<table><tr><td><div style="width: 275px; height: 300px; overflow: auto; padding-right:7px;">▌<em>PHYSIQUE</em>: [i] [size=9]remplissez simplement les champs...[/size][/i]
[b]₪ Taille:[/b] ...
[b]₪ Poids:[/b] ... kgs
[b]₪ Couleur et longueur des cheveux:[/b] ...
[b]₪ Couleur de peau:[/b] ...
[b]₪ Couleur des yeux:[/b] ...
[b]₪ Style vestimentaire:[/b] ...
[b]₪ Autre chose à nous faire savoir:[/b] ...

▌ <em>SIGNES PARTICULIERS;</em>
[b]₪ Allergie(s):[/b] ...
[b]₪ Tatouages(s):[/b] ...
[b]₪ Cicatrice(s):[/b] ...
[b]₪ Maladie(s):[/b] ...
[b]₪ Piercing(s):[/b] ...
[b]₪ Autre(s):[/b] ...</div></td><td><div style="width: 275px; height: 300px; overflow: auto; padding-right:7px;">▌<em>CARACTERE</em>:  [size=9][i]De la même façon qu'à côté, on vous demande ici de parler de votre caractère. Pour cela remplacez simplement les termes qualités ou défauts par des adjectifs correspondants. Soit 8 défauts et 8 qualités obligatoire. Néanmoins et comme précédemment, vous pourrez choisir la méthode traditionnelle, rédigée. Nous vous demanderons alors 10 lignes minimum de descriptifs, de valeur équivalente. Vous pourrez également choisir d'indiquer à côté de chaque qualité et défaut, la manière dont il/elle s'exprime chez votre personnage. Ex: Possessivité: pour X elle s'exprime aussi bien sur les objets que sur les personnes parce que blabla...
En cas de difficultés à trouver des termes vous pouvez toujours vous référer à cette [url=http://www.scribd.com/doc/32545479/Liste-de-qualites-et-de-defauts]liste[/url].[/i][/size]

• Qualité
• Qualité
• Qualité
• Qualité
• Qualité
• Qualité
• Qualité
• Qualité

• Défaut
• Défaut
• Défaut
• Défaut
• Défaut
• Défaut
• Défaut
• Défaut</div></td></table>
</div><!--
--><h2>Histoire</h2><!--
--><div class="cssactif_fiche_content"><div style="width: 580px; height: 400px; overflow: auto; padding-right:7px;">
<em>Parlez-nous de votre vie d'insouciance</em>: (10 lignes) Enfant, aimiez-vous pourchasser les écureuils dans les bois? Les lapider à coup de pierre? Regarder les filles/les garçons se baigner nu(e)s dans la rivière? Etiez-vous un enfant docile à la volonté de ses parents ou plutôt rebelle? Quels étaient vos rêves, vos espoirs, vos envies d’alors ? Parlez-nous des prémices de ce que vous êtes devenus. Du passage  à l’adolescence, des prises de responsabilités qui en découlent. Quelle voie s’ouvrait à vous ? Aviez-vous le choix ? Quels étaient vos rêves et vos espoirs ?...

<em>Et un jour, on devient grand</em>: (5 lignes) Il y a un moment chez tout un chacun où tout change. Cela peut prendre du temps, se faire par étape, mais le jour vient forcément où on se lève en prenant conscience que plus rien ne sera jamais plus comme avant. Parlez-nous de ce ou de ces moment-là. Qu’est-ce qui a bouleversé votre existence et finalement à grandement participer à construire votre destin ? Qu’est-ce qui a fait de vous la femme ou l’homme que vous êtes devenus ? A quel âge avez-vous cessé d’être un enfant ?

<em>Devenu responsable de vous-même, qu'en avez-vous fait?</em>: (10 lignes) Il s’agit ici de parler de votre vie d’adulte, de votre/vos mariage(s), de votre/vos enfant(s), de votre travail, de votre chef vous. Qu’est-ce qui vous motive aujourd’hui ? Qu’est-ce qui fait la différence ? Êtes-vous un adulte épanoui ou bien frustré par un destin que vous n’avez pas été en mesure de choisir ou de maîtriser ? Avez-vous suivi une formation particulière ? Rencontrer des personnages incroyables ou au contraire insupportables ? Qu’est-ce qui fait à présent votre routine ? En avez-vous seulement une ? Courrez-vous les tavernes et le danger ou bien êtes-vous plutôt casanier/ère de nature ? …

<em>Aydindril</em>: (2 lignes) Racontez-nous tout, expliquez-nous pourquoi vous vous rendez à Aydindril ? Est-ce une mission ? Un devoir ? Une volonté propre ? Que venez-vous y chercher (si vous avez des attentes particulières) ? Ou bien êtes-vous simplement curieux/se de nature ? Attiré par l’aventure  ou le prestige de l’évènement ? Vous vous êtes perdu(e) en chemin peut-être ?...

<em>Et si vous deviez choisir votre demain, vous feriez...</em>: (Libre) Qu’elles sont vous attentes personnelles pour l’avenir ? Vous rêvent d’enfant sont-ils les mêmes que ceux qui vous bercent aujourd’hui ?  Quels sont vos espoirs ? Votre/vos plus cher(s) désir(s) ? Si vous aviez un vœu à formuler, quel serait-il ?
</div></div>
<!--
--><h2>Liens</h2><!--
--><div class="cssactif_fiche_content">Si vous êtes un pv vous avez des liens déjà préétablit. Sachez que nous n'accepterons pas un copier/coller de la fiche pv. Nous attendons de vous que vous reformuliez les liens afin que l'on puisse se rendre compte si oui ou non vous avez bien compris ce que nous envisagions pour ce personnage. Pour les personnages inventés, sachez que vous n'êtes pas obligé de remplir ce champ, néanmoins et après vous être mis d'accord avec nos membres, vous pourrez, si vous le souhaitez, ajouter à votre fiche les liens que vous aurez établis ensemble.

<center><table><tr><td><div class="fiche5"><div style="padding:2px;"><div class="titlelinks3">Nom & Prénom</div><div style="padding:2px"><div class="conteneur"><div class="transparente" style="background-image:url('http://i.imgur.com/EHUGHa9.jpg')">
    </div>
    <div class="pastransparente">Décrivez ici le lien avec ce personnage.
    </div>
  </div>

</div></div></div></td><td><div class="fiche5"><div style="padding:2px;"><div class="titlelinks3">Nom & Prénom</div><div style="padding:2px"><div class="conteneur"><div class="transparente" style="background-image:url('http://i.imgur.com/EHUGHa9.jpg')">
    </div>
    <div class="pastransparente">Décrivez ici le lien avec ce personnage.
    </div>
  </div>

</div></div></div></td></tr><tr><td><div class="fiche5"><div style="padding:2px;"><div class="titlelinks3">Nom & Prénom</div><div style="padding:2px"><div class="conteneur"><div class="transparente" style="background-image:url('http://i.imgur.com/EHUGHa9.jpg')">
    </div>
    <div class="pastransparente">Décrivez ici le lien avec ce personnage.
    </div>
  </div>

</div></div></div></td><td><div class="fiche5"><div style="padding:2px;"><div class="titlelinks3">Nom & Prénom</div><div style="padding:2px"><div class="conteneur"><div class="transparente" style="background-image:url('http://i.imgur.com/EHUGHa9.jpg')">
    </div>
    <div class="pastransparente">Décrivez ici le lien avec ce personnage.
    </div>
  </div>

</div></div></div></td></tr><tr><td><div class="fiche5"><div style="padding:2px;"><div class="titlelinks3">Nom & Prénom</div><div style="padding:2px"><div class="conteneur"><div class="transparente" style="background-image:url('http://i.imgur.com/EHUGHa9.jpg')">
    </div>
    <div class="pastransparente">Décrivez ici le lien avec ce personnage.
    </div>
  </div>

</div></div></div></td><td><div class="fiche5"><div style="padding:2px;"><div class="titlelinks3">Nom & Prénom</div><div style="padding:2px"><div class="conteneur"><div class="transparente" style="background-image:url('http://i.imgur.com/EHUGHa9.jpg')">
    </div>
    <div class="pastransparente">Décrivez ici le lien avec ce personnage.
    </div>
  </div>

</div></div></div></td></tr></table></center><br></div><!--
--><br><h2>Test RP</h2><!--
--><div class="cssactif_fiche_content"><div style="width: 580px; height: 300px; overflow: auto; padding-right:7px;">
(20 lignes) Si vous n'êtes pas un scénario, ce test n'est pas obligatoire. Si vous êtes un scénario, rendez-vous dans la fiche du-dit scénario pour découvrir le sujet de votre test.
Si vous êtes un personnage inventé, alors libre à vous de choisir le thème qui vous plaira (avec votre personnage évidemment). ;)
</div></div><br><!--
--><h2>Soi réel</h2>
<!----><div class="cssactif_fiche_content"><table><tr><td><div style="width: 275px; height: 300px; overflow: auto; padding-right:7px;">▌<em>PORTRAIT CHINOIS</em>: [size=9][i]Le principe est simple, ici il vous suffit de répondre du tac au tac le première chose qui vient à l'esprit de votre personnage...[/i][/size]

[b]¤ Mer ou Montagne?[/b] ...
[b]¤ Les enfants c'est[/b] ...
[b]¤ Quelle couleur?[/b] ...
[b]¤ Un moyen de locomotion?[/b] ...
[b]¤ Le courage c'est[/b] ...
[b]¤ Bien ou mal?[/b] ...
[b]¤ La gentillesse, la compassion c'est[/b] ...
[b]¤ Gourmandise ou raison?[/b] ...
[b]¤ La hiérarchie pour toi c'est[/b] ...
[b]¤ Fidèle ou infidèle?[/b] ...
[b]¤ La rancune pour toi c'est[/b] ...
[b]¤ Hommes ou femmes?[/b] ...
[b]¤ Le sexe pour toi c'est[/b] ...
[b]¤ La religion pour toi c'est[/b] ...
[b]¤ Plantes ou animaux?[/b] ...
[b]¤ Tension ou passion?[/b] ...
[b]¤ L’honnêteté c'est...[/b] ...
[b]¤ Seul(e) ou accompagné(e)?[/b] ...
[b]¤ La confiance pour toi c'est[/b] ...
[b]¤ Le jour ou la nuit?[/b] ...
[b]¤ L'amour c'est[/b] ...
[b]¤ Juge, jury ou bourreau?[/b] ...
[b]¤ La liberté c'est[/b] ...
[b]¤ Ce qui m'effraie le plus?[/b] ...
[b]¤ Le mot de la fin?[/b] ...</div></td><td><div style="width: 275px; height: 300px; overflow: auto; padding-right:7px;">▌<em>DERRIERE L'ECRAN</em>:  [size=9][i]Au joueur/A la joueuse de nous parler de lui à présent.[/i][/size]

[b]₪ Prénom ou Pseudo;[/b] ...
[b]₪ Âge;[/b] ...
[b]₪ D'où viens-tu?;[/b] ...
[b]₪ Que penses-tu du forum?[/b] ...
[b]₪ Que penses-tu du design ?[/b] ...
[b]₪ Comment as-tu atterri ici?[/b] ...
[b]₪ Double compte sur FS?[/b][size=9][i] (cf.règlement)[/i][/size]...
[b]₪ Autre chose à ajouter?[/b] ...
[b]₪ As-tu signé le règlement ?[/b]
[spoiler]Je soussigné(e) [NOM ET PRENOM] certifie avoir lu et compris le règlement de ce forum et m'engage à le respecter. Je déclare avoir 18 ans ou plus et avoir conscience que certains propos tenus sur ce forum pourront être "crus" et brutaux. Je dégage l'équipe administrative de toute réaction négative de ma part à ce sujet.
Ceci fait, je promet de m'amuser sur ce forum, de m'y évader et de vénérer ces perfections même, ces personnalités envoûtantes et envoûtées que sont les administratrices de ce forum...[/spoiler]
[b]₪ Que faire de moi?[/b]
[spoiler]Moi [NOM ET PRENOM], AUTORISE/N'AUTORISE PAS le staff à faire ce que bon lui semble de mon personnage en cas de départ de ma part...[/spoiler]
[b]₪ LE CODE DU REGLEMENT;[/b]
[hide]...[/hide]
</div></td></table>


</div>
</div><!--
--></div>

Encore merci.

[MlleAlys]

je suis en train de comprendre le code pour le retravailler, mais une question : à quoi correspondent les classes avec "pv" dedans ? Car je ne les vois pas dans la fiche, servent-elles autre part ? Car si elles ne servent à rien, autant les supprimer pour gagner de la place...

[steph846]

Merci ^^

Alors les classes pvs correspondent aux codes pvs qui vont avec la fiches de présentation :

[MlleAlys]

Voilà :
j'ai changé les classes :
- nightfall_fiche devient les deux classes nightfall fond_fiche
- nightfall_pv devient les deux classes nightfall fond_pv
- nightfall_fiche_header devient fiche_header
- nightfall_pv_header devient pv_header
- nightfall_pv_titre et nightfall_fiche_titre deviennent pv_titre et fiche_titre
- cssactif_pv_content devient pv_content
- cssactif_fiche_content et nightfall_fiche_content deviennent fiche_content
- nightfall_visage devient fiche_visage

Ce qui donne comme code html de la fiche :




et pour celui du pv :


Pour les autres univers, il faut changer nightfall par le nouveau nom, c'est à dire une seule fois tout en haut de la fiche, et au début de chaque gros bloc pour les pvs.
Par exemple pour redemption, le code de la fiche devient (à part les images et le contenu direct, mais qui ne concerne pas le codage) :


et le code du pv :






Pour le code css :


Voilà le code avec les nouvelles classes, et les couleurs de nightfall par défaut puisque c'est sur cette fiche que j'ai travaillé. Cependant, pour changer ces dernières pour les autres fiches, inutile de remettre tout le code, il suffit de cibler les endroits où la couleur va changer, ce qui va considérablement raccourcir le code !

Couleurs pour Nightfall :


Les couleurs pour Redemption (si je ne me suis pas trompée ^^") :


à faire pour les autres fiches donc, juste ce petit bout de code qui ne contient que des propriétés de couleur ^^

...
est ce que c'était à peu près clair ? =s

[steph846]

Bonjour ^^

Hannnnnn oui effectivement, je n'aurais vraiment vraiment pas été capable de le faire toute seule. Un immense merci à vous.

Je vais de ce pas créditer votre travail.

Encore merci.