/*** SUR TOUT LE SITE ***/

 
   /*** Apparence générale bodyline ***/


body {
   background-color: #DCDADA;
}
table.bodylinewidth {
   width: 824px;
   margin-top: -20px;
   
}
.bodyline {
   background: white;
}


   /*** Apparence générale forumline ***/
 
.forumline {
   border-collapse: collapse;
   background: #CDC9CA; 
   border-radius: 50px;
   margin: 25px 0;
}


   /*** Liens ***/
 
/* Liens généraux */

a {
    text-decoration: none!important;
   text-decoration: none;
}

a:link, a:visited , .forumline .nav a:link, .forumline .nav a:visited {
    text-decoration: none!important;
   text-decoration: none;
   transition: all 0.3s ease;
   color: #8E7D7C;
   text-shadow: #CDC9CA 0 1px 1px;
}
a:hover, .forumline .nav a:hover {
    text-decoration: none !important;
   text-decoration: none;
   transition: all 0.3s ease;
   color: #96C9E0;
}


   /* Liens de navigation et "Marquer tous les forums comme lus, etc." et "Pagefooter" */

.nav {
   text-align: center;
   font-weight: normal;
}

a.nav img {
   display: block;
}


   /*** Marges et justifié par défaut ***/

div.postbody {
   text-align: justify;
   margin: 10px;
}


   /*** Suppression "Dernière édition par..." ***/

tr.post span.gensmall {
   display: none;
}




               /*** BARRE DE NAVIGATION ***/

#navig {
   position: fixed;
   top: 50px;
   left: 20px;
   width: 130px;
   background: #FFF;
   border-radius: 15px;
   box-shadow: #CDC9CA 2px 2px 2px;
   padding: 13px 0;
}

a.mainmenu {
   display: block;
   text-align: center;
   margin-bottom: -16px;
   padding: 0 5px;
   color: black;
}

a.mainmenu:link, a.mainmenu:visited {
   background: white;
}

a.mainmenu:hover, a.mainmenu:active, a.mainmenu:focus {
   background: #96C9E0;
}
.mainmenu img {
   display: none;
}


 
               /*** BANNIERE ***/
 

#i_logo
{
   max-height: 600px;
   width: 800px;
}

               /*** AFFICHAGE DES FORUMS ET CATEGORIES ***/


         /*** Catégorie ***/


th.secondarytitle {
   border-bottom: 5px #FFF double;
   background: #DCDADA;
   border-radius: 50px 50px 0 0;
   height: 50px;
   transition: all .2s ease;
}

th.secondarytitle h2 {
   font-family: Georgia;
   font-size: 24px;
   font-weight: normal;
   text-transform: none;
   text-shadow: #CDC9CA 1px 1px 2px;
   color: #000;
}

.forumline:hover th.secondarytitle, .forumline:hover .basdecateg {
   background: #CDC9CA;
   transition: all .2s ease;
}

.basdecateg {
   border-top: 5px #FFF double;
   background: #DCDADA;
   border-radius: 0 0 50px 50px;
   height: 50px;
   transition: all .2s ease;
   font-family: Georgia;
   font-size: 18px;
   text-align: center;
   position: relative;
   vertical-align: bottom;
}

.basdecateg span {
   position: relative;
   top: -13px;
   padding: 0 10px;
}
.basdecateg:hover:before, .basdecateg:hover:after {
   content: url('http://img4.hostingpics.net/pics/301119birthday45.png');
}
 
         /*** Forums ***/

td.fofo {
   width: 700px;
   position: relative;
   border: rgba(205,201,202,0) solid 20px;
   display: block;
   left: 30px;
}         
.blocfo {
   position: relative;
   width: 685px;
   height: 80px;
   background: #DCDADA;
   border-radius: 10px 0 0 10px;
}

.blocfo .lastpost {
   display: inline-block;
   width: 150px;
   height: 40px;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 100;
   padding: 20px 0;
   text-align: center;
}

.blocfo img.newnonew {
   width: 150px;
   height: 80px;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 5;
   opacity: 0.7;
}

.blocfo .descrip {
   display: block;
   position: absolute;
   top: 15px;
   left: 150px;
   z-index: 10;
   height: 50px;
   margin: 10px 5px 5px 5px;
   text-align: justify;
   padding: 0 5px;
   overflow: auto;
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(10%,rgba(255,255,255,1)), color-stop(90%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
   background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%); /* FF3.6+ */
   background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%); /* IE10+ */
   background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

.fofo .onglet {
   z-index: 20;
   text-align: center;
   background: #DCDADA;
   border-radius: 0 10px 10px 0;
   height: 80px;
   width: 15px;
   position: absolute;
   left: 685px;
   top: 0;
}

.fofo .onglet .visible {
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
   height: 15px;
   width: 80px;
   position: relative;
   top: 33px;
   left: -32px;
   text-align: center;
   text-shadow: white 0 1px 1px;
   transition: all .2s ease;
     color: #8E7D7C;
     text-transform: uppercase;
     letter-spacing: -1px;
}

.fofo .onglet:hover .visible {
     text-shadow: #8E7D7C 0 0 1px;
   transition: all .2s ease;
}

.onglet .cache {
   width: 0;
   display: none;
   float: right; 
}
.onglet:hover .cache {
   overflow: hidden;
   display: block;
   position: relative;
   top: 10px;
   left: -5px;
   height: 50px;
   margin: 0 5px;
   padding: 0 15px 0 5px;
   width: 515px;
   -webkit-animation: glissade 0.7s;
   animation: glissade 0.7s;
   background: #DCDADA;
}

@-webkit-keyframes glissade
{
   from { opacity: 0; width: 0px; }
   to {opacity: 1; width: 515px;}
}
@keyframes glissade
{
   from { opacity: 0; width: 0px; }
   to {opacity: 1; width: 515px;}
}

.onglet:hover .cache .inside {
   padding: 0 5px 0 0;
   overflow-x: hidden;
   overflow-y: auto;
   text-align: center;
   display: block;
   height: 100%;
   width: 100%;
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(10%,rgba(255,255,255,1)), color-stop(90%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
   background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%); /* FF3.6+ */
   background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%); /* IE10+ */
   background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */

}


   /* Sous-forums */

.stats {
   display: inline-block;
   position: relative;
   left: -75px;
   color: #CDC9CA;
   text-transform: uppercase;
   letter-spacing: 3px;
   transition: all .3s ease;
     font-size: 9px;
}
.stats:hover {
   letter-spacing: -.5px;
   transition: all .3s ease;
}
.sousfo {
   font-size: 0;
   display: block;
   text-align: justify;
}
.sousfo a {
   font-size: 11px;
   padding: 0 2px;
   color: black;
}   
.sousfo a:before {
   content: '*';
   padding-right: 2px;
   text-shadow: #CDC9CA 0 1px 1px;
   color: #8E7D7C;
}
.sousfo a:hover:before {
   content: '✦';
   color: #CDC9CA;
    text-shadow: #8E7D7C 0 1px 1px;
}

   /* Titre forum */

.forumlink a {
   display: block;
   text-align: center;
   text-transform: uppercase;
   font-size: 15px;
   padding: 5px;
   font-weight: normal;
   text-shadow: white 0 1px 1px;
   letter-spacing: 0;
   transition: all .3s ease;
    color: #8E7D7C;
}

.forumlink a:hover {
   letter-spacing: 2px;
   transition: all .3s ease;
}


.forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right {
   margin: 0;
   padding: 0;
}


               /*** VIEWFORUM ***/
               
               
.ListeSujets {
   width: 800px;
   margin: auto;
}               

.HautSujets {
   background: #442C15;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   padding: 15px;
}
.BasSujets {
   background-image: url('http://img18.imageshack.us/img18/2438/l3vw.png');
   height: 200px;
   position: relative;
   top: -20px;
}
               

               
               /*** BOUTONS, ZONES DE TEXTE, ETC. ***/

input, select, textarea {
    color : #000000;
    font: normal 11px Arial;
   border-radius: 10px;
   padding: 5px;
}
textarea, select {
    border-left: 3px solid #26150A;
    border-right: 3px solid #26150A;
   border-top: none;
   border-bottom: none;
   transition: all 0.5s ease;
}
input {
    border: none;
}
textarea:hover, select:hover {
    border-left: 3px solid black;
    border-right: 3px solid black;
   transition: all 0.5s ease;
}

#text_editor_iframe, input.post, select, textarea.inputbox, textarea.post, textarea, select, option, input {
    background-color: white;
}


 
               /*** AFFICHAGE DES MESSAGES ***/
 

td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides {
    border-style: none;
}

td.catRight, td.Right, th.thRight, td.row3Right, td.spaceRow {
    border-style: none;
}

th, h1.cattitle {
    font-size: 12px;
    text-decoration: none!important;
 text-decoration: none;
 text-align:center;
 text-transform: uppercase;
 font-family: Arial, Serif;
 color: white;
}

th.thBottom,th.thCornerL,th.thCornerR, th.thHead,th.thLeft,th.thRight,th.thSides,th.thTop {
 border: none;
}
 



               /*** CODES, SPOILER, CITER ***/

 
.quote, .code, .spoiler_content, .spoiler_closed {
   color: #000000;
   background: url('http://imageshack.us/a/img196/9121/cxp0.png');
   width: 100%;
   padding: 5px;
   border-radius: 10px;
   box-shadow: 3px 3px 5px #DCDADA;
     border: none;
}

.quote{
}

.code{
   font-family: Courier,Courier New,sans-serif;
}

.spoiler_closed{
}

 
               
               
               /*** PROFIL ***/
div.infobulle_avatar em {
display:none;
}

div.infobulle_avatar:hover {
background: none;
z-index: 999;
cursor: hand;
transition: all 0.5s ease;
position: relative;
text-decoration:none;
border: 0;
}

div.infobulle_avatar:hover em {
font-style: normal; /*écriture de la police*/
font-size: 10px; /*taille de la police*/
color:#000 !important; /*couleur de la police*/
padding: 3px;
display: block;
position: absolute;
-moz-border-radius: 5px; /* bord arrondis*/
-webkit-border-radius: 5px; /* bord arrondis*/
border-radius: 5px ; /* bord arrondis*/
background-color: #FFF; /*couleur de fond de l'infobulle*/
border: 1px solid #DCDADA; /*taille et couleur de la bordure de l'infobulle*/
width:150px; /*largeur de l'infobulle*/
top: 100px; /*infobulle à 100px du haut*/
left: 100px; /*infobulle à 100px de la gauche*/
}               
.viewtopic {
   background: #DCDADA;
   border-radius: 150px;
   padding: 20px;
   color: #100100;
}

.name {
    font-size: 12px;
}
.name strong.posternom a:link, .name strong.posternom a:visited {
   text-shadow: none;
   font-size: 14px;
   font-variant: normal;
   text-transform: uppercase;
   border-radius: 30px;
   display: block;
   background: url('http://imageshack.us/a/img196/9121/cxp0.png');
   width: 210px;
   padding-top: 5px;
   padding-bottom: 5px;
   margin-top: 5px;
   margin-bottom: 5px;
}

span.Avatar img, span.postdetails.poster-profile img {
   border-radius: 10px;
}
span.Avatar img {
   width: 200px;
   height: 320px;
}
span.postdetails.poster-profile img {
  width: 200px;
  max-height: 200px;
}

.cadre1 {
  padding: 5px;
  background: #CDC9CA;
  border-radius: 10px;
  margin: 5px;
}

.cadre2 {
  background: url('http://imageshack.us/a/img196/9121/cxp0.png');
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  padding: 5px;
}

.cadre3 {
  background: url('http://imageshack.us/a/img196/9121/cxp0.png');
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 5px;
  border: 5px solid #DCDADA;
  margin: 5px;
}

.cadre2, .cadre3 {
  width: 200px;
}

div.profil, div.ficherpg {

}

div.profil {
  text-align: left;
}
div.ficherpg {

}
div.ficherpg a {
    font-size: 12px;
  text-align: center;
  position: relative;
  bottom: 6px;
  text-transform: uppercase;
  color: #7A0000;
  text-family: Arial, Serif;
}

.imgrang img, .nomrang img {
   opacity: 1;
   transition: all 1s linear;
   background: none;
   display: block;
   border-radius: 30px;
   width: 210px;
   text-align: center;
   margin: auto;
}
.imgrang img:hover, .nomrang img:hover {
   opacity: .7;
   transition: all 1s linear;
}
.nomrang {
   color: black;
}
.profil .label {
}
.profil .postdetails.poster-profile .label:before {
   content: "* ";
   color: black;
   font-weight: bold;
}
.postdetails {
   color: #956C56;
}
.profil .content{
}
.profil .separator{
}
.name textarea {
   border-color: #0F0101;
}
.name a:link, .name a:visited {
   opacity: 1;
}



 
 
         /*** Infobulle ***/
         
.infobulleprofil {
   height: 320px;
   width: 200px;
   position: relative;
   border-radius: 10px;
   overflow: hidden;
}
.infobulleprofil .cache {
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   height: 310px;
   width: 190px;
   padding: 5px;
   background: rgba(165,94,53,.5);
   border-radius: 10px;
   color: black;
   transition: opacity 0.2s ease 0.2s;
}
.infobulleprofil:hover  .cache{
   opacity: 1;
   transition: opacity 0.3s ease;
}
.infobulleprofil .cache .postdetails.poster-profile {
   opacity: 0;
   transition: opacity 0.3s ease;
}
 .infobulleprofil:hover .cache .postdetails.poster-profile {
   opacity: 1;
   transition: opacity 0.2s ease 0.2s;
}

 

               /*** PV, MESSAGES OFFICIELS, PRESENTATIONS ***/
 

               /*** A GARDER ! Ne changer que les couleurs, ecritures, etc. ***/

.credits span {
   border-bottom-right-radius: 20px;
   border-bottom-left-radius: 20px;
}
.credits span.cred1, .statut {
   text-transform: uppercase;
   font-family: Verdana, Arial, Serif;
   letter-spacing: -2px;
   font-size: 18px;
   color: #8E7D7C;
}
.credits:hover span.cred1 {
   border-radius: 0;
}

.credits span.cred2 {
   visibility: hidden;
}
.credits:hover span.cred2 {
   visibility: visible;
}

.credits span, .statut {
   background: white;
   text-align: center;
   display: block;
   padding: 5px;
}

.statut {
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   width: 300px;
   position: relative;
   top: 20px;
}

.credits {
   display: block;
   width: 300px;
   position: relative;
   bottom: 20px;
}

.PVstructure {
   background: url('http://imageshack.us/a/img196/9121/cxp0.png');
   border: 3px solid white;
   padding: 35px 20px 35px 20px;
   border-radius: 30px;
   box-shadow: 2px 2px 2px #DCDADA;
   font-size: 12px;
   line-height: 14px;
}

.nompv, .celeb, .texte, .lien1, .lien2, .pres1, .pres2, .texto, .textomaj {
   background: white;
   transition: all .5s ease;
}

.texte:hover, .lien1:hover, .lien2:hover, .pres1:hover, .pres2:hover, .texto:hover, .textomaj:hover {
   background: #DCDADA;
   transition: all .5s ease;
 }

.nompv, .celeb {
   text-align:center;
   color: #8E7D7C;
   display: inline-block;
   font-family: Verdana, Arial, Serif;
   letter-spacing: -2px;
    text-shadow: #CDC9CA 0 1px 1px;
}

.nompv {
   font-size:36px;
   text-transform: uppercase;
   padding: 15px;
   margin: 0px 15px 15px 15px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   line-height: 30px;
}

.celeb {
   font-size:24px;
   padding: 5px;
   border-radius: 10px;
   position: relative;
   bottom: 15px;
}

img.imgpv {
   border-radius: 40px;
   border-width: 5px;
   border-style: solid;
   width: 500px;
}

.iconpv {
   border-radius: 20px;
   border-width: 3px;
   border-style: solid;
   margin-left:20px;
   margin-right:20px;
   z-index: 100;
   height: 100px;
   width: 100px;
}
img.imgpv, .iconpv {
   border-color: #8E7D7C;
   transition: all 0.5s ease;
}

img.imgpv:hover, .iconpv:hover {
   border-color: white;
   transition: all 0.5s ease;
}

.texte, .texto, .textomaj {
   text-align:justify;
   border-radius: 10px;
}
.texte {
   margin: 10px;
   padding:10px;
}
.texte strong, .lien1 i, .lien2 i, .demidieu i {
   font-family: Verdana, Arial, Serif;
   letter-spacing: -1px;
   font-variant: small-caps;
   color: #8E7D7C;
   font-size: 14px;
}

.texte:hover strong, .lien1:hover i, .lien2:hover i, .demidieu:hover i {
   text-shadow: 0 0 1px #8E7D7C;
}

.demidieu span {
   margin-left: 10px;
}
.demidieu span:before {
   content: "* ";
   color: #8E7D7C;
   font-weight: bold;
}
.lien1, .lien2 {
   overflow:auto;
   height:120px;
   width:120px;
   z-index:1;
   padding: 5px;
   text-align:justify;

}
.lien1 {
   margin-left:-45px;
   padding-left: 25px;
   border-top-left-radius: 25px;
   border-bottom-left-radius: 25px;
   border-left: 5px solid #8E7D7C;
}

.lien2 {
   margin-right:-45px;
   padding-right: 25px;
   border-top-right-radius: 25px;
   border-bottom-right-radius: 25px;
   direction: rtl;
   border-right: 5px solid #8E7D7C;
}
.inlien2 {
   direction: ltr;
   text-align: justify;
   display: block;
}

.PVstructure table td .partie {
   text-align: center;
}
.partie {
   position: relative;
   top: 7px;
   font-size: 16px;
   text-align: center;
   font-family: Tahoma, Sans-Serif;
   letter-spacing: -1px;
   text-transform: uppercase;
   color: #8E7D7C;
   transition: all .3s ease;
}
.partie:hover {
   letter-spacing: 2px;
   transition: all .3s ease;
}
.pres1, .pres2 {
   z-index:1;
   text-align:justify;
}

.pres1 {
   border-radius: 10px;
   border-top-left-radius: 40px;
   border-bottom-left-radius: 40px;
   margin-left: -60px;
   padding: 10px 5px 5px 50px;
   border-left: 5px solid #8E7D7C;
}

.pres2 {
   border-radius: 10px;
   border-top-right-radius: 40px;
   border-bottom-right-radius: 40px;
   margin-right: -60px;
   padding: 10px 50px 5px 5px;
   border-right: 5px solid #8E7D7C;
}

.texto, .textomaj {
   padding: 10px 5px 5px 5px;
}

.textomaj:first-letter{
   float: left;
   margin-right: 5px;
   font-family: Georgia, "Times New Roman", Serif;
   color: #8E7D7C;
   font-size:36px;
   text-transform: uppercase;
}

tr td.deco {
   background-image: url('http://imageshack.us/a/img196/5195/elok.png');
   width: 50px;
   height: 176px;
   background-repeat: no-repeat;
   background-position: center center;
   opacity: 0.6;
   transition: all 1s linear;
}
tr:hover td.deco {
   opacity: 1;
   transition: all 1s linear;
}

table.relation {
   background: white;
   border-radius: 20px;
}

table.relation .izquierda img.ava {
   border-radius: 10px;
   border: 3px solid #8E7D7C;
   height: 320px;
   width: 200px;
}

table.relation .izquierda div {
   padding: 0px;
   border-radius: 10px;
   border: 3px solid #8E7D7C;
   width: 200px;
}

table.relation td.izquierda {
   padding: 5px 0px 5px 5px;
}
table.relation td.derecha {
   padding: 5px;
   text-align: justify;
}

.derecha fieldset {
   background: #DCDADA;
   border-radius: 10px;
   border-left: 3px solid #8E7D7C;
   border-right: 3px solid #8E7D7C;
   border-top: none;
   border-bottom: none;
   margin: 5px;
   transition: all 0.5s ease;
}

.derecha fieldset:hover {
   border-left: 3px solid black;
   border-right: 3px solid black;
   transition: all 0.5s ease;
}

.derecha select {
   background-color: #DCDADA;
     border-color: #8E7D7C;
}

.derecha select:hover {
   border-color: black;
}

div.imgrp {
   padding: 0px;
   border-radius: 10px;
   border: 3px solid #8E7D7C;
   height: 320px;
   display: inline-block;
   transition: all 0.5s ease;
}
div.imgrp:hover {
   border-color: white;
   transition: all 0.5s ease;
}

div.imgrp img {
   height: 320px;
   width: 200px;
}


               /***** PAGE D'ACCUEIL *****/
               
#pa {
   position: relative;
   height: 540px;
   width: 800px;
   text-align: justify;
}

#pagraphique {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 0;
}

#pv {
   position: absolute;
   left: 44px;
   top: 104px;
   width: 190px;
   height: 82px;
   z-index: 27;
   text-align: left;
}

#pv img {
   width: 38px;
   height: 38px;
   border-radius: 20px;
   box-shadow: 1px 1px 2px rgba(0,0,0,.9);
   transition: all .2s ease;
   opacity: .8;

}

#pv img:hover {
   transition: all .2s ease;
   opacity: 1;
}

#pv a {
   position: relative;
   color: black;
}
#pv a span {
   display: none;
   z-index: 30;
}
#pv a:hover span {
   display: inline-block;
   position: absolute;
   top: 14px;
   left: -25px;
   width: 84px;
   padding: 3px;
   background: #DCDADA;
   border-radius: 10px;
   text-align: center;
   box-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
#pv a:hover span:before {
   content:"";
   position: absolute;
   top: -6px;
   left: 42px;
   height: 0;
   width: 0;
   border-bottom: 6px solid #DCDADA;
   border-right: 3px solid transparent;
   border-left: 3px solid transparent;
}

#contexte div {
   position: absolute;
   width: 180px;
   height: 173px;
   margin: 5px;
   padding-right: 3px;
   top: 224px;
   left: 28px;
   z-index: 11;
   overflow: auto;
}

#contexte img {
   position: absolute;
   left: 54px;
   top: 180px;
}


         /*** Onglets staff et news ***/

.systeme_onglets {
   position: absolute;
   top: 0;
   left: 0;
}

.onglet_1
{

}

.contenu_onglet {
   display: none;
}
.contenu_onglet div
{
   position: absolute;
   left: 283px;
   top: 70px;
   width: 224px;
   height: 119px;
   margin: 5px;
   overflow: auto;
   text-align: justify;
}

#contenu_onglet_gateau div span {
   color: white;
   text-shadow: #CDC9CA 0 1px 1px;
}

.contenu_onglet img {
   position: absolute;
   top: 26px;
   left: 332px;
   z-index: 50;
}

#onglet_news {
   display: inline-block;
   position: absolute;
   top: 360px;
   left: 53px;
   width: 223px;
   height: 180px;
   z-index: 10;
}

#onglet_persephone {
   display: inline-block;
   position: absolute;
   top: 200px;
   left: 255px;
   width: 129px;
   height: 324px;
   z-index: 49;
}

#onglet_anubis {
   display: inline-block;
   position: absolute;
   top: 193px;
   left: 384px;
   width: 177px;
   height: 331px;
   z-index: 49;
}

#onglet_gateau {
   display: inline-block;
   position: absolute;
   top: 382px;
   left: 329px;
   width: 149px;
   height: 143px;
   z-index: 50;
}

div.admin {
   text-align: center;
}

.admin span {
   display: inline-block;
}

.ft {
   font-size: 9px;
   text-transform: uppercase;
}
.presence {
   margin: 5px 0;
   padding: 3px 0;
   display: block;
   width: 100%;
   text-transform: uppercase;
   font-weight: bold;
   background: white;
   background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(20%,rgba(255,255,255,1)), color-stop(80%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%); /* IE10+ */
   background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}




               /*** QEEL ***/
               
#qeel {
   width: 800px;
   height: 400px;
   background: url('http://img824.imageshack.us/img824/7458/71w6.png');
   position: relative;
}

#qeel_left {
   position: absolute;
   left: 103px;
   top: 83px;
   width: 210px;
   height: 200px;
   padding: 5px;
   text-align: justify;
   overflow: auto;
}

#qeel_right td {
   position: absolute;
   left: 483px;
   top: 81px;
   width: 210px;
   height: 200px;
   padding: 5px;
   text-align: justify;
   overflow: auto;
}

.infogrp {
   position: absolute;
}

.infogrp em {
   display: none;
}

.infogrp:hover em {
   display: inline-block;
   width: 180px;
   text-align: center;
   height: 81px;
   background: url('http://img15.hostingpics.net/pics/828093fond.png');
   padding: 30px 10px;
   position: absolute;
   top: -115px;
   left: -5px;
}

.infogrp a.carre {
   width: 50px;
   height: 50px;
   display: block;
}

.humains {
   left: 348px;
   top: 101px;
}
.scandinaves {
   left: 414px;
   top: 203px;
}
.grecs {
   left: 674px;
   top: 283px;
}
.egyptiens {
   left: 468px;
   top: 341px;
}
.creatures {
   left: 90px;
   top: 336px;
}
.romains {
   left: 305px;
   top: 278px;
}               

               /*** A GARDER ***/

 
/*LISTE MEMBRES*/
.avatar.mini, .avatar.mini img {
  width: 44px;
  height: 70px;
  }

 /* CHATBOX */
#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before {
content: "Parle-moi, t'auras mon Nutella";
 }
 
/* INFOBULLE ARBRE GENEALOGIQUE */

.arbre {
 position: relative;
}
.arbre div {
  position: absolute;
}
.arbre div span {
 position: relative;
}
.arbre div span span {
  display: none;
}
.arbre div span:hover {
  background: none;
  z-index: 500;
}
.arbre div span:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: -10px;
  left: 20px;
  background: white;
}

<div id="pa">
    <img src="http://imageshack.us/a/img51/3213/d1tz.png" usemap="#mappa" id="pagraphique" />
   <div id="pv">
       <a href="http://terre-divine.lebonforum.com/t24-les-divinites-grecques#194"> <img src="http://img4.hostingpics.net/pics/392183robertdowneyjrgladtwcame.png" alt="Robert Downey Jr, by gladtwcame" /> <span><strong>ZEUS</strong><br /><em> dieu grec</em><br />Important pour l'intrigue</span> </a> <a href="http://terre-divine.lebonforum.com/t28-les-creatures#16046"> <img src="http://img4.hostingpics.net/pics/322542brittanyrobertsonobroseysmg.png" alt="Brittany Robertson, by @obroseysmg" /> <span><strong>CÆCILIA</strong><br /><em>créature</em><br />Importante pour l'intrigue</span> </a> <a href="http://terre-divine.lebonforum.com/t26-les-divinites-egyptiennes#543"> <img src="http://img4.hostingpics.net/pics/111130shanewestrkstewarts.png" alt="Shane West, by @rkstewarts" /> <span><strong>OSIRIS </strong><br /><em> dieu égyptien</em><br />Important pour l'intrigue</span> </a> <a href="http://terre-divine.lebonforum.com/t27-les-divinites-romaines#718"> <img src="http://img4.hostingpics.net/pics/353085bradleycooperehyboobear.png" alt="Bradley Cooper, by @ehyboobear" /> <span><strong>JUPITER </strong><br /><em> dieu romain</em><br />Important pour l'intrigue</span> </a> <br /> <a href="http://terre-divine.lebonforum.com/t25-les-divinites-nordiques#208"> <img src="http://img4.hostingpics.net/pics/480617charlizetheronstarkskingdom.png" alt="Charlize Theron, by @starkskingdom" /> <span><strong>FRIGGA </strong><br /><em> déesse scandinave</em><br />4 liens présents</span> </a> <a href="http://terre-divine.lebonforum.com/t26-les-divinites-egyptiennes#777"> <img src="http://img4.hostingpics.net/pics/504027danielgilliessavichele.png" alt="Daniel Gillies, by @savichele" /> <span><strong>HORUS </strong><br /><em> dieu égyptien</em><br />3 liens présents</span> </a> <a href="http://terre-divine.lebonforum.com/t24-les-divinites-grecques#713"> <img src="http://img4.hostingpics.net/pics/471570emmarobertsffifthjohn.png" alt="Emma Roberts, by @ffifthjohn" /> <span><strong>ATHENA </strong><br /><em> déesse grecque</em><br />3 liens présents</span> </a> <a href="http://terre-divine.lebonforum.com/t26-les-divinites-egyptiennes#780"> <img src="http://img4.hostingpics.net/pics/403784jensenacklesnebuIosa.png" alt="Jensen Ackles, by nebuIosa" /> <span><strong>THOT </strong><br /><em> dieu égyptien</em><br />4 liens présents</span> </a>
   </div>
   
   <div id="contexte">
       <img src="http://imageshack.us/a/img834/4285/4xhs.png" />
      <div>
          De nombreuses mythologies ont vu le jour à travers les âges. Mais les Hommes, aussi imbus de leur personne que les Dieux, ont fini par se lasser de ceux qu'ils avaient jadis adulés. Sans personne pour croire en eux, les Divinités perdirent mystérieusement leurs pouvoirs, et les Hommes parvinrent à les exiler tous sur une île : Néméïl. Mais les dieux ne sont pas seuls : des créatures, des demi-dieux et même quelques humains les ont suivi sur cette terre d'asile. Bienvenue sur Néméïl.
         <p style="text-align:right;margin:0;">
             <a href="http://terre-divine.lebonforum.com/t195-le-contexte-mythique">→ voir le contexte complet</a>
         </p>
         
      </div>
      
   </div>
    <script type="text/javascript">
//<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
</script>
   <div class="systeme_onglets">
      
      <div class="onglets">
          <span class="onglet_0 onglet" id="onglet_news" onclick="javascript:change_onglet('news');"></span> <span class="onglet_0 onglet" id="onglet_persephone" onclick="javascript:change_onglet('persephone');"></span> <span class="onglet_0 onglet" id="onglet_anubis" onclick="javascript:change_onglet('anubis');"></span> <span class="onglet_0 onglet" id="onglet_gateau" onclick="javascript:change_onglet('gateau');"></span>
      </div>
      
      <div align="center" class="contenu_onglets">
         
         <div class="contenu_onglet" id="contenu_onglet_news">
             <img src="http://imageshack.us/a/img202/4985/4379.png" alt="News" />
            <div>
                <em>Les dieux sont sur Néméïl depuis six mois. Ils viennent de découvrir l'existence des humains sur leur terre d'asile.</em><br /> Cliquez sur les <strong>personnages</strong> pour tout découvrir des admins (tout... ou presque), sur le <strong>gâteau</strong> pour voir les news, et sur le <strong>loup</strong> pour revenir à cet onglet.
            </div>
            
         </div>
         
         <div class="contenu_onglet" id="contenu_onglet_persephone">
            
            <div class="admin">
                <span class="ft">ft. Kristen Stewart</span><br /> <span class="pseudo">Marion | Andromaque</span> <span class="presence">Perséphone<br /> <span style="color:green;">présente</span><br /> <a href="http://terre-divine.lebonforum.com/u1">profil</a> | <a href="http://terre-divine.lebonforum.com/privmsg?mode=post&u=1">MP</a> | <a href="http://terre-divine.lebonforum.com/t341-le-staffounet-divin#6801">présentation</a></span> <span class="role">Fondatrice en charge des Grecs, Scandinaves ainsi que des Humains et des Créatures appartenant à ces mythologies. Elle joue aussi le PNJ Néméïl.</span>
            </div>
            
         </div>
         
         <div class="contenu_onglet" id="contenu_onglet_anubis">
            
            <div class="admin">
                <span class="ft">ft. Ian Somerhalder</span><br /> <span class="pseudo">Marie | © Psychotikbitch</span> <span class="presence">Anubis<br /> <span style="color:green;">présente</span><br /> <a href="http://terre-divine.lebonforum.com/u7">profil</a> | <a href="http://terre-divine.lebonforum.com/privmsg?mode=post&u=7">MP</a> | <a href="http://terre-divine.lebonforum.com/t341-le-staffounet-divin#6802">présentation</a></span> <span class="role">Administratrice en charge des Égyptiens, Romains ainsi que des Créatures et des Humains appartenant à ces mythologies.</span><br /> <strong>DC :</strong> Hercule
            </div>
            
         </div>
         
         <div class="contenu_onglet" id="contenu_onglet_gateau">
             <img src="http://imageshack.us/a/img202/4985/4379.png" alt="News" />
            <div>
                <span>*</span> Ouverture du forum le 22 janvier 2013 <span>*</span> Première intrigue : les humains <a href="http://terre-divine.lebonforum.com/t194-premiere-intrigue-mythique">(en savoir plus)</a> <span>*</span>Le deuxième RP en commun est terminé, et un RP pour les Créatures a vu le jour: <a href="http://terre-divine.lebonforum.com/t741-cours-particuliers-rp-commun-creatures">Cours particuliers</a> <span>*</span> 22 janvier 2014 : Le forum a <strong>UN AN</strong> ! Merci à nos membres de faire vivre Terre Divine. ♥ <span>*</span> <a href="http://terre-divine.lebonforum.com/t342-credits-et-remerciements">Crédits et remerciements</a>
            </div>
            
         </div>
         
      </div>
      
   </div>
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'news';
                change_onglet(anc_onglet);
        //-->
</script>
</div>
 <map id="mappa">
   <!--    Liens rapides    --> <area shape="rect" coords="0,0,130,40" href="http://terre-divine.lebonforum.com/t196-le-reglement-mythique" alt="Règlement - à lire obligatoirement !" title="Règlement - à lire obligatoirement !" /> <area shape="rect" coords="130,0,240,40" href="http://terre-divine.lebonforum.com/t195-le-contexte-mythique" alt="Contexte et intrigue" title="Contexte et intrigue" /> <area shape="rect" coords="240,0,325,40" href="http://terre-divine.lebonforum.com/t17-bottin-des-avatars" alt="Bottin des avatars" title="Bottin des avatars" /> <area shape="rect" coords="325,0,425,40" href="http://terre-divine.lebonforum.com/t18-les-groupes" alt="Groupes : serez-vous une créature, un humain ou un dieu ?" title="Groupes : serez-vous une créature, un humain ou un dieu ?" /> <area shape="rect" coords="425,0,605,40" href="http://terre-divine.lebonforum.com/f4-dieux-attendus" alt="PV - Quelques dieux attendus" title="PV - Quelques dieux attendus" /> <area shape="rect" coords="605,0,722,40" href="http://terre-divine.lebonforum.com/f91-les-scenarios" alt="Scénarios des membres" title="Scénarios des membres" /> <area shape="rect" coords="722,0,800,40" href="http://terre-divine.lebonforum.com/f50-espace-invites" alt="Espace invités" title="Espace invités" />
   <!--    Partenaires    --> <area shape="rect" coords="586,126,638,149" target="_blank" href="http://weins-academie.forumgratuit.org/" alt="Weins Académie" title="Weins Académie" /> <area shape="rect" coords="644,136,696,159" target="_blank" href="http://imrunningfromawarzon.weshforum.com/" alt="Show Me Love" title="Show Me Love" /> <area shape="rect" coords="705,145,757,168" target="_blank" href="" alt="" title="" /> <area shape="rect" coords="599,151,651,174" target="_blank" href="" alt="" title="" /> <area shape="rect" coords="656,164,708,187" target="_blank" href="" alt="" title="" /> <area shape="rect" coords="712,171,764,194" target="_blank" href="" alt="" title="" /> <area shape="rect" coords="735,108,782,127" target="_blank" href="http://terre-divine.lebonforum.com/t62-nos-partenaires" alt="Tous nos partenaires" title="Tous nos partenaires" /> <area shape="rect" coords="735,127,784,145" target="_blank" href="http://terre-divine.lebonforum.com/t61-demande-de-partenariat" alt="Demande de partenariat" title="Demande de partenariat" />
   <!--    Top sites    --> <area shape="rect" coords="572,287,616,308" target="_blank" href="http://en.root-top.com/toplist/coop/in.php?ID=3087" alt="N°1 comme nos membres - parce que vous êtes les meilleurs ♥" title="N°1 comme nos membres - parce que vous êtes les meilleurs ♥" /> <area shape="rect" coords="569,267,609,286" target="_blank" href="http://en.root-top.com/toplist/cherry23/in.php?ID=6692" alt="N°2 comme le nombre d'admins, toujours là pour vous" title="N°2 comme le nombre d'admins, toujours là pour vous" /> <area shape="rect" coords="596,243,632,272" target="_blank" href="http://www.root-top.com/topsite/soushi/in.php?ID=2141" alt="N°3 comme la Trinité - parce qu'on est des dieux aussi, non mais oh !" title="N°3 comme la Trinité - parce qu'on est des dieux aussi, non mais oh !" /> <area shape="rect" coords="633,243,654,281" target="_blank" href="http://www.root-top.com/topsite/horsevalleys/in.php?ID=1609" alt="N°4 comme les quatre mythologies du forum - Grecs, Romains, Egyptiens et Scandinaves" title="N°4 comme les quatre mythologies du forum : Grecs, Romains, Egyptiens et Scandinaves" /> <area shape="rect" coords="659,252,703,275" target="_blank" href="http://www.root-top.com/topsite/niviel/in.php?ID=920" alt="N°5 comme Chanel - parce qu'on a la classe" title="N°5 comme Chanel - parce qu'on a la classe" /> <area shape="rect" coords="704,240,726,278" target="_blank" href="http://www.root-top.com/topsite/heroicfantasy/in.php?ID=1451" alt="N°6 comme nos six groupes - humains, créatures et quatre mythologies" title="N°6 comme nos six groupes - humains, créatures et quatre mythologies" /> <area shape="rect" coords="727,231,757,256" target="_blank" href="http://www.root-top.com/topsite/dracula/in.php?ID=182" alt="N°7 comme les nains - parce que ça porte bonheur" title="N°7 comme les nains - parce que ça porte bonheur" /> <area shape="rect" coords="733,259,777,282" target="_blank" href="http://en.root-top.com/toplist/obsession27/in.php?ID=20145" alt="N°8 comme... Je ne sais plus, mais c'est le dernier ! Merci d'avoir soutenu TD ♥" title="N°8 comme... Je ne sais plus, mais c'est le dernier ! Merci d'avoir soutenu TD ♥" /> <area shape="rect" coords="734,285,780,308" target="_blank" href="        " alt="Un immense merci pour vos votes. ♥" title="Un immense merci pour vos votes. ♥" />
   <!--    Membres du mois    --> <area shape="rect" coords="565,313,654,522" alt="Merci à Sekhmet - membre le plus ancien" title="Merci à Sekhmet ♥ membre le plus ancien" /> <area shape="rect" coords="654,332,724,522" alt="Merci à Arya - DC le plus actif" title="Merci à Arya ♥ DC le plus actif" /> <area shape="rect" coords="724,327,800,522" alt="Merci à Thor - membre le plus fidèle" title="Merci à Thor ♥ membre le plus fidèle" /> </map>

$(function() {
 
  var a = ["http://img18.imageshack.us/img18/2203/dzs8.png", "http://img11.hostingpics.net/pics/408561header.png"];
 
  $("#pun-logo img,#i_logo,#logo img").attr("src", a[Math.floor(Math.random() * a.length)])
 
});