/* NEVER-UTOPIA _ FICHE EVENTAIL ANIME */

.pres_idbloc2
{
  position: relative;
  width: 600px;
  height: 320px;
  overflow: hidden;
  box-shadow: 0px 0px 5px #000000;
  -o-box-shadow: 0px 0px 5px #000000;
  -htm-box-shadow: 0px 0px 5px #000000;
  -webkit-box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
}
.pres_avatar
{
  display: block;
  position: relative;
  z-index: 1;
  float: left;
  width: 500px;
  height: 320px;
  overflow: hidden;
}
.pres_id1
{
  position: absolute;
  z-index: 2;
  width: 500px;
  height: 320px;
  overflow: hidden;
  margin-left: 450px;
  background: #1b1b1b;
  border: 1px solid #2a2a2a;
  box-shadow: 0px 0px 5px #000000;
  -o-box-shadow: 0px 0px 5px #000000;
  -htm-box-shadow: 0px 0px 5px #000000;
  -webkit-box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pres_id1:hover
{
  margin-left: 0px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pres_id2
{
  position: absolute;
  z-index: 3;
  width: 500px;
  height: 320px;
  overflow: hidden;
  margin-left: 480px;
  background: #1b1b1b;
  border: 1px solid #2a2a2a;
  box-shadow: 0px 0px 5px #000000;
  -o-box-shadow: 0px 0px 5px #000000;
  -htm-box-shadow: 0px 0px 5px #000000;
  -webkit-box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pres_id2:hover
{
  margin-left: 25px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pres_id3
{
  position: absolute;
  z-index: 4;
  width: 500px;
  height: 320px;
  overflow: hidden;
  margin-left: 510px;
  background: #1b1b1b;
  border: 1px solid #2a2a2a;
  box-shadow: 0px 0px 5px #000000;
  -o-box-shadow: 0px 0px 5px #000000;
  -htm-box-shadow: 0px 0px 5px #000000;
  -webkit-box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pres_id3:hover
{
  margin-left: 50px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pres_id4
{
  position: absolute;
  z-index: 5;
  width: 500px;
  height: 320px;
  overflow: hidden;
  margin-left: 540px;
  background: #1b1b1b;
  border: 1px solid #2a2a2a;
  box-shadow: 0px 0px 5px #000000;
  -o-box-shadow: 0px 0px 5px #000000;
  -htm-box-shadow: 0px 0px 5px #000000;
  -webkit-box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pres_id4:hover
{
  margin-left: 75px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pres_id5
{
  position: absolute;
  z-index: 5;
  width: 500px;
  height: 320px;
  overflow: hidden;
  margin-left: 570px;
  background: #1b1b1b;
  border: 1px solid #2a2a2a;
  box-shadow: 0px 0px 5px #000000;
  -o-box-shadow: 0px 0px 5px #000000;
  -htm-box-shadow: 0px 0px 5px #000000;
  -webkit-box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pres_id5:hover
{
  margin-left: 100px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pres_idtitle
{
  position: absolute;
  display: block;
  width: 320px;
  margin-top: 160px;
  margin-left: -150px;
  text-align: center;
  transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -htm-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  font-size: 16px;
  letter-spacing: 4px;
  font-size: 18px;
  letter-spacing: 4px;
  font-family: lucida calligraphy;
  color: #5a5a5a;
  text-shadow: 1px 1px 0px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pres_id1:hover .pres_idtitle, .pres_id2:hover .pres_idtitle, .pres_id3:hover .pres_idtitle,
.pres_id4:hover .pres_idtitle, .pres_id5:hover .pres_idtitle
{
  width: 500px;
  margin-top: 5px;
  margin-left: 0px;
  text-align: center;
  transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -htm-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.message_soustitre
{
  font-size: 14px;
  font-family: impact;
  letter-spacing: 2px;
}
.pres_idcontent
{
  position: relative;
  display: block;
  width: 400px;
  height: 270px;
  overflow: auto;
  margin: 25px 0px 0px 28px;
  padding: 5px;
  background: #bcbcbc;
  color: #6d6d6d !important;
  box-shadow: 0px 0px 3px #735c0e;
  -o-box-shadow: 0px 0px 3px #735c0e;
  -htm-box-shadow: 0px 0px 3px #735c0e;
  -webkit-box-shadow: 0px 0px 3px #735c0e;
  -moz-box-shadow: 0px 0px 3px #735c0e;
  font-size: 11px;
  text-align: justify;
  line-height: 12px;
}

<center><div class="pres_idbloc2"><span class="pres_avatar"><img src="http://media.melty.fr/media_aggregate-1635436-ajust_570/johnny-depp-s-est-vu-proposer-un-role-dans.jpg" alt="" /></span><div class="pres_id1"><span class="pres_idtitle">Identité</span><span class="pres_idcontent">
<span class="message_soustitre">Nom - </span>Nom
<span class="message_soustitre">Prénom - </span>Prénom
<span class="message_soustitre">Age - </span>Age
<span class="message_soustitre">Profession - </span>Profession
...
</span></div><div class="pres_id2"><span class="pres_idtitle">Caractère</span><span class="pres_idcontent"><span class="message_soustitre">Qualités</span>
Liste ou description...
<span class="message_soustitre">Défauts</span>
Liste ou description...
</span></div><div class="pres_id3"><span class="pres_idtitle">Histoire</span><span class="pres_idcontent">
Votre histoire...
</span></div><div class="pres_id4"><span class="pres_idtitle">Relations / Objectifs</span><span class="pres_idcontent">
<span class="message_soustitre">Relations avant jeu</span>
Contenu.
<span class="message_soustitre">Objectif(s)</span>
Contenu.
</span></div><div class="pres_id5"><span class="pres_idtitle">Joueur</span><span class="pres_idcontent">
<span class="message_soustitre">Qui êtes-vous ?</span>
Région, âge, expérience RP...
<span class="message_soustitre">Pourquoi nous ?</span>
Comment avez-vous découvert le forum ? Avez-vous eu des difficultés en arrivant ?
=> code du Règlement :
</span></div></div><a href="http://www.never-utopia.com" style="font-size: 10px;">(c) Never-Utopia</a></center>