/* ------------- FICHE PV-RPG
Créee par Orange de CSSActif (http://www.css-actif.com)
Merci de conserver cette mention par respect ----------- */
.cssactif_fiche, .cssactif_pv { /* Fond de la fiche */
  background-color: #744600; /* 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") */
     
}

div.cssactif_fiche_header { /* En-tête avec image de fond */
  background-repeat: none; /* Empêche la répétition de l'image du header */
  background-position: top center; /* Postionne l'image du header en haut, au center */

 
  height: 150px; /* Donne la hauteur en px du header, l'image de header devrait être même hauteur ou plus grande */
 
  border-bottom: 15px double #921628; /* Bordure au bas du header: ÉPAISSEURpx STYLE #COULEUR (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#border-style)  */
 
 
  /* Bordures  supérieures arrondies (voir: http://border-radius.com/) */
  -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.cssactif_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat; /* Empêche la répétition de l'image du header */
  background-position: top center; /* Postionne l'image du header en haut, au center */

  width: 200px; /* Donne la largeur de la bannière latérale (Largeur de l'avatar) */
  height: 320px; /* Donne la hauteur en px du header, l'image de header devrait être même hauteur ou plus grande (Hauteur de l'avatar) */
 
  border-right: 15px double #921628; /* Bordure côté du header: ÉPAISSEURpx STYLE #COULEUR (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#border-style)  */
 
 
  /* Bordures  gauche arrondies (voir: http://border-radius.com/) */
  -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; /* Ombre du texte */
  font-size: 10px; /* Taille du texte: TAILLEpx */
}

div.cssactif_pv_titre h1, div.cssactif_fiche_titre h1 { /* Titre prénoms & nom */

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) */

  font-size: 32px; /* Taille du texte: TAILLEpx */
 
  text-shadow: 1px 1px 0px #000; /* Ombre du texte */
 
  color: #d51731; /* Couleur du texte */
 
  margin: 0; /* Supprime la marge par défaut de l'élément h1 */
 
  text-align: right;  /* Aligne le titre à droite */
  text-transform: uppercase; /* Met le titre en majuscules */
 
}

div.cssactif_fiche_titre, div.cssactif_pv_titre { /* Titre + feat */
  /* Positionne le titre "à cheval" sur la bordure */
  position: relative;
  top: -28px;
 

  text-align: right;      /* Aligne le texte à droite */
 

  padding-right: 20px;    /* Défifine une marge interne */
  color: #CCCCCC; /* Couleur du feat */
}

.cssactif_pv h2, div.cssactif_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: #921628;  /* 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 */
 
}

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

.cssactif_pv em, .cssactif_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: #921628;  /* 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; /* correction d'un bug IE */
  z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

}
div.infobulle:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;

  width: 300px; /* Largeur de l'infobulle */

  top: 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 #921628;
      padding: 10px; /* marge interne de l'infobulle */
}
/* ------------- FIN FICHE PV-RPG */

<br>

<table class="cssactif_pv" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="right" valign="bottom" class="cssactif_pv_header" style="background-image: url(http://img529.imageshack.us/img529/2913/eragon041280x1024.png);">[b][center]Kamiken[/center][/b]</td><td valign="top"><div class="cssactif_pv_titre"><!--
--><h1> Eragon fils de Brom</h1>
feat Ed Speleers </div><div class="cssactif_pv_content"><!--
--><em>Surnom</em>: Tueur de roi, tueur d'ombre, petit homme (par Saphira)
<em>Âge</em>: 19 ans
<em>Groupe et grade</em>: chef de la confrérie des dragonniers
<em>Objectifs </em>: recréer la caste des dragonniers, être digne de son rang
<em>Précisions</em>: Hybride (possède la force et la puissance des elfes). Célèbre
<em>Personnalité</em>Bon, juste, colérique, pas toujours sur de lui, intelligent et très instinctif.
<em>Physique</em>: Blond, taille moyenne, yeux marrons, athlétique, souple.
<em>Arme(s)</em>: Brisingr, épée de dragonnier bleue + son arc chantée par Islanzadí
<em>Liens</em>:
<div class="infobulle">
    <img src="http://i28.tinypic.com/33eseiq.jpg" />
    <div><a href="#Lien">Saphira fille de Iormungr</a> -Sa dragonne, sa moitié, elle est tout pour lui</div>
</div><!--
--><div class="infobulle">
    <img src="http://i28.tinypic.com/33eseiq.jpg" />
    <div><a href="#Lien">Arya fille d'Islanzadi</a> -Son amour, il l'aime depuis qu'il a posé les yeux sur elle mais elle a de hautes responsabilités depuis qu'elle est reine des elfes et la différence d'âge semble la gêner</div>
</div><!--
--><div class="infobulle">
    <img src="http://i28.tinypic.com/33eseiq.jpg" />
    <div><a href="#Lien">Roran fils de Garrow</a> -Son cousin, il a grandit avec lui et l'aime beaucoup. Il est très protecteur envers lui ainsi que sa femme Katrina et sa fille.</div>
</div><!----><div class="infobulle">
    <img src="http://i28.tinypic.com/33eseiq.jpg" />
    <div><a href="#Lien"> Nasuada, fille d'Adjiad</a> -Il lui a juré fidélité et la voit comme une amie mais il n'hésite pas à lui dire lorsqu'elle lui semble avoir tort et n'obéirait pas à un ordre allant contre ses valeurs.</div>
</div><!--
--><div class="infobulle">
    <img src="http://i28.tinypic.com/33eseiq.jpg" />
    <div><a href="#Lien"> Orik fils de Thriflkz </a> -Son frère adoptif, il l'aime beaucoup et le voit comme un ami de confiance.</div>
</div><!--



--></div></td></tr></table>
<div class="cssactif_pv">
<h2>Résumé de l'histoire</h2><!--
--><div class="cssactif_pv_content">Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante. Quisque sodales sollicitudin nunc at porta. Integer convallis mollis arcu, id cursus risus venenatis ac. Sed gravida, magna et molestie tempor, ante eros dignissim enim, sit amet volutpat elit nulla sit amet magna. Fusce varius, tellus eget tincidunt semper, quam magna tincidunt nisl, imperdiet condimentum lectus orci et neque. Nullam et erat quam, ac condimentum magna. Donec lobortis dapibus eros, vitae blandit felis faucibus eu. Nulla ipsum velit, posuere vel malesuada eu, rutrum et odio. Maecenas arcu augue, blandit a porta sit amet, vulputate non purus. Nullam quis elit quis sem blandit varius sit amet vitae lacus. Suspendisse potenti. Suspendisse fringilla lacinia sagittis.

<div style="font-size: 10px; text-align: center;"> Chroniques D'Alagaësia soutient la création; cette fiche a été codée par Orange de <a href="http://www.css-actif.com">CSSActif</a></div>
</div></div>