CODAGE WE DON'T TALK ANYMORE

[center]<div class="fondfiche"><div class="fondtitre"><titrefiche>We don't talk anymore</titrefiche>
<sstitre>À dire vrai, raison et amour ne vont guère ensemble par les temps qui courent.</sstitre></div>
<div class="blocinfos">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et lacus augue. Maecenas id justo id est faucibus efficitur. Suspendisse egestas vel erat in efficitur. Phasellus in accumsan nunc. Nam bibendum, metus non euismod sodales, massa lorem rhoncus dui, vitae ultricies mauris tellus nec velit. In placerat risus nec elit bibendum malesuada. Duis sit amet tortor justo. Praesent auctor arcu maximus condimentum suscipit. Ut neque nulla, pulvinar at tempus eget, egestas sed nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et lacus augue. Maecenas id justo id est faucibus efficitur. Suspendisse egestas vel erat in efficitur. Phasellus in accumsan nunc. Nam bibendum, metus non euismod sodales, massa lorem rhoncus dui, vitae ultricies mauris tellus nec velit. In placerat risus nec elit bibendum malesuada. Duis sit amet tortor justo. Praesent auctor arcu maximus condimentum suscipit. Ut neque nulla, pulvinar at tempus eget, egestas sed nulla. </div><center><credit>cobain. pour we don't talk anymore</credit></center></div>[/center]

[center]<div class="fondfiche"><div class="fondtitre"><titrefiche>Prénom Prénom Nom</titrefiche>
<sstitre>feat. célébrité</sstitre></div>
<div class="blocinfos"><center><table><tr><td><img src="https://i.imgbox.com/lSvBxlnk.png"class="vavapresa"></td><td><sstitre>carte d'identité</sstitre>
<div class="presabox"><violet>information:</violet> [i]réponse ici[/i]
<rouge>information:</rouge>[i] réponse ici[/i]
<violet>information:</violet> [i]réponse ici[/i]
<rouge>information:</rouge>[i] réponse ici[/i]
<violet>information:</violet> [i]réponse ici[/i]
<rouge>information:</rouge>[i] réponse ici[/i]
<violet>information:</violet> [i]réponse ici[/i]
<rouge>information:</rouge>[i] réponse ici[/i]
<violet>information:</violet> [i]réponse ici[/i]
<rouge>information:</rouge>[i] réponse ici[/i]</div>
<sstitre>Anecdotes et caractère</sstitre>
<div class="presabox"><violet>qualité</violet> ✤ une anecdote en rapport avec la qualité  <rouge>défaut</rouge> ✤ une anecdote en rapport avec le défaut <violet>qualité</violet> ✤ une anecdote en rapport avec la qualité  <rouge>défaut</rouge> ✤ une anecdote en rapport avec le défaut <violet>qualité</violet> ✤ une anecdote en rapport avec la qualité  <rouge>défaut</rouge> ✤ une anecdote en rapport avec le défaut <violet>qualité</violet> ✤ une anecdote en rapport avec la qualité  <rouge>défaut</rouge> ✤ une anecdote en rapport avec le défaut <violet>qualité</violet> ✤ une anecdote en rapport avec la qualité  <rouge>défaut</rouge> ✤ une anecdote en rapport avec le défaut <violet>qualité</violet> ✤ une anecdote en rapport avec la qualité  <rouge>défaut</rouge> ✤ une anecdote en rapport avec le défaut <violet>qualité</violet> ✤ une anecdote en rapport avec la qualité  <rouge>défaut</rouge> ✤ une anecdote en rapport avec le défaut <violet>qualité</violet> ✤ une anecdote en rapport avec la qualité  <rouge>défaut</rouge> ✤ une anecdote en rapport avec le défaut <violet>qualité</violet> ✤ une anecdote en rapport avec la qualité  <rouge>défaut</rouge> ✤ une anecdote en rapport avec le défaut <violet>qualité</violet> ✤ une anecdote en rapport avec la qualité  <rouge>défaut</rouge> ✤ une anecdote en rapport avec le défaut </div></td></tr></table></center></div>
<div class="blocinfos"><center><sstitre>zoom sur le joueur</sstitre></center></div>
<div class="blocinfos"><center><table><tr><td><div class="blocjoueur"><violet>information:</violet> [i]réponse ici[/i] ✤ <rouge>information:</rouge>[i] réponse ici[/i] ✤ <violet>information:</violet> [i]réponse ici[/i] ✤ <rouge>information:</rouge>[i] réponse ici[/i] ✤ <violet>information:</violet> [i]réponse ici[/i] ✤ <rouge>information:</rouge>[i] réponse ici[/i] ✤ <violet>information:</violet> [i]réponse ici[/i] ✤ <rouge>information:</rouge>[i] réponse ici[/i] ✤ <violet>information:</violet> [i]réponse ici[/i] ✤ <rouge>information:</rouge>[i] réponse ici[/i] </div></td><td><img src="https://68.media.tumblr.com/652aefa35d2fd836e54217cd4a6e93c9/tumblr_nwyl0fb1Xt1rz2cbjo1_540.gif"class="imgjoueur"></td></tr></table></center></div><center><credit>cobain. pour we don't talk anymore</credit></center></div>[/center]

[center]<div class="fondfiche"><div class="fondtitre"><titrefiche>We don't know the story</titrefiche>
<sstitre>petite citation de ton choix</sstitre></div>
<div class="blocinfos">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et lacus augue. Maecenas id justo id est faucibus efficitur. Suspendisse egestas vel erat in efficitur. Phasellus in accumsan nunc. Nam bibendum, metus non euismod sodales, massa lorem rhoncus dui, vitae ultricies mauris tellus nec velit. In placerat risus nec elit bibendum malesuada. Duis sit amet tortor justo. Praesent auctor arcu maximus condimentum suscipit. Ut neque nulla, pulvinar at tempus eget, egestas sed nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et lacus augue. Maecenas id justo id est faucibus efficitur. Suspendisse egestas vel erat in efficitur. Phasellus in accumsan nunc. Nam bibendum, metus non euismod sodales, massa lorem rhoncus dui, vitae ultricies mauris tellus nec velit. In placerat risus nec elit bibendum malesuada. Duis sit amet tortor justo. Praesent auctor arcu maximus condimentum suscipit. Ut neque nulla, pulvinar at tempus eget, egestas sed nulla. </div><center><credit>cobain. pour we don't talk anymore</credit></center></div>[/center]

[center]<div class="fondfiche"><div class="fondtitre"><titrefiche>We rule your world</titrefiche>
<sstitre>les staffiens</sstitre></div>
<div class="blocinfos"><center><table><tr><td><img src="https://68.media.tumblr.com/b80c4d6684daee5e90878c8b1d71e84e/tumblr_onc0tjJ3D41uw5fnpo3_r1_250.png"class="presastaff"></td><td><sstitre>pseudo</sstitre>
<div class="presabox"><violet>personnage:</violet> [i]DC: ici[/i]
le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien.le blabla de présentation du staffien. le blabla de présentation du staffien.le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. </div></td></tr></table>
<table><tr><td><sstitre>pseudo</sstitre>
<div class="presabox"><violet>personnage:</violet> [i]DC: ici[/i]
le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien.le blabla de présentation du staffien. le blabla de présentation du staffien.le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. </div></td><td><img src="https://68.media.tumblr.com/b80c4d6684daee5e90878c8b1d71e84e/tumblr_onc0tjJ3D41uw5fnpo3_r1_250.png"class="presastaff"></td></tr></table>
<table><tr><td><img src="https://68.media.tumblr.com/b80c4d6684daee5e90878c8b1d71e84e/tumblr_onc0tjJ3D41uw5fnpo3_r1_250.png"class="presastaff"></td><td><sstitre>pseudo</sstitre>
<div class="presabox"><violet>personnage:</violet> [i]DC: ici[/i]
le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien.le blabla de présentation du staffien. le blabla de présentation du staffien.le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. le blabla de présentation du staffien. </div></td></tr></table><center><credit>cobain. pour we don't talk anymore</credit></center></div>[/center]

[center]<div class="fondfiche"><div class="fondtitre"><titrefiche>We could be friends</titrefiche>
<sstitre>pré-liens de pseudo</sstitre></div>
<div class="blocinfos"><violet>✤ (f/libre) pseudo</violet>
<rouge> ✤(m/libre) pseudo</rouge>
<violet>✤ (f/libre) pseudo</violet>
<rouge> ✤(m/libre) pseudo</rouge></div>
<div class="blocinfos"><center><table><tr><td><div style="background: url('https://68.media.tumblr.com/702e562a9fcf4486d739ef2e13c52da4/tumblr_ogakerFvgp1vehjtfo1_250.png');  width: 200px; height: 200px;"><div class="prelien";><div style="background: #f8f6f6; height: 200px; "><div style="padding: 10px; font: 10px arial; text-align: justify; height: 200px; overflow: auto; line-height: 12px; "><center><pseudoscenario>pseudo</pseudoscenario><br>
<div class="barre"></div>
<lien>intitulé du lien</lien></center>
descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien </div></div></div></div></td><td><div style="background: url('https://68.media.tumblr.com/101fd3cb367c30541e45fc21bbb61dc0/tumblr_ofpbz2FOh11vb5lofo1_250.png');  width: 200px; height: 200px;"><div class="prelien";><div style="background: #f8f6f6; height: 200px; "><div style="padding: 10px; font: 10px arial; text-align: justify; height: 200px; overflow: auto; line-height: 12px; "><center><pseudoscenario>pseudo</pseudoscenario><br>
<div class="barre"></div>
<lien>intitulé du lien</lien></center>
descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien </div></div></div></div></td></tr></table>
<table><tr><td><div style="background: url('https://68.media.tumblr.com/3cc241b7fe6558bf4b5dca0e3841ff61/tumblr_ob57bb5vGy1v40v50o6_250.png');  width: 200px; height: 200px;"><div class="prelien";><div style="background: #f8f6f6; height: 200px; "><div style="padding: 10px; font: 10px arial; text-align: justify; height: 200px; overflow: auto; line-height: 12px; "><center><pseudoscenario>pseudo</pseudoscenario><br>
<div class="barre"></div>
<lien>intitulé du lien</lien></center>
descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien </div></div></div></div></td><td><div style="background: url('https://68.media.tumblr.com/792d1033b01ff70d91be58e54666c142/tumblr_ofpbz2FOh11vb5lofo5_250.png');  width: 200px; height: 200px;"><div class="prelien";><div style="background: #f8f6f6; height: 200px; "><div style="padding: 10px; font: 10px arial; text-align: justify; height: 200px; overflow: auto; line-height: 12px; "><center><pseudoscenario>pseudo</pseudoscenario><br>
<div class="barre"></div>
<lien>intitulé du lien</lien></center>
descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien descriptif du lien </div></div></div></div></td></tr></table></center></div><center><credit>cobain. pour we don't talk anymore</credit></center></div>[/center]

[center]<div class="fondfiche"><div class="fondtitre"><titrefiche>We rule the world</titrefiche>
<sstitre>notre règlement en vigueur!</sstitre></div>
<div class="blocinfos"><center><rouge>✤ titre de section</rouge></center></div>
<div class="blocinfos">écrire ici les règles de la section. écrire ici les règles de la section. écrire ici les règles de la section. écrire ici les règles de la section. écrire ici les règles de la section.

écrire ici les règles de la section. écrire ici les règles de la section. écrire ici les règles de la section. écrire ici les règles de la section. écrire ici les règles de la section. </div>

<div class="blocinfos"><center><violet>✤ titre de section</violet></center></div>
<div class="blocinfos">écrire ici les règles de la section. écrire ici les règles de la section. écrire ici les règles de la section. écrire ici les règles de la section. écrire ici les règles de la section.

écrire ici les règles de la section. écrire ici les règles de la section. écrire ici les règles de la section. écrire ici les règles de la section. écrire ici les règles de la section.</div><center><credit>cobain. pour we don't talk anymore</credit></center></div>[/center]

<br /><meta http-equiv="content-type" content="text/html; charset=utf-8;" />
<div class="fondfiche"><center><img src="https://i.imgbox.com/9RfUuiCm.png"class="imgpub">

<div class="blocinfos"><center><a href="#"><violet>lien</violet></a> ✤ <a href="#"><rouge>lien</rouge></a> ✤ <a href="#"><violet>lien</violet></a> ✤ <a href="#"><rouge>lien</rouge></a> ✤ <a href="#"><violet>lien</violet></a> ✤ <a href="#"><rouge>lien</rouge></a></center></div>
<div class="blocinfos"><center><table><tr><td><div class="contextepub">ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. ici le contexte du forum. </div></td><td><table><tr><td><div style="background: url('http://66.media.tumblr.com/6cee5b44a3500ea9fc40f35e29737d35/tumblr_inline_nql94607MZ1rvwo3h_500.gif");  width: 100px; height: 100px;"><div class="staffpub";><div style="background: #fff; height: 100px; "><div style="padding: 10px; font: 10px cambria; text-align: justify; height: 100px; line-height: 12px; "><center><pseudopub>pseudo</pseudopub><br>
<div class="barrepub"></div>
<postepub>poste occupé</postepub></center></div></div></div></div></td><td><div style="background: url('http://66.media.tumblr.com/8f57ce9fafc528c9116d91d83afbb2a4/tumblr_inline_n7bwguY3c21s2rzmb.gif');  width: 100px; height: 100px;"><div class="staffpub";><div style="background: #fff; height: 100px; "><div style="padding: 10px; font: 10px cambria; text-align: justify; height: 100px; line-height: 12px; "><center><pseudopub>pseudo</pseudopub><br>
<div class="barrepub"></div>
<postepub>poste occupé</postepub></center></div></div></div></div></td></tr></table>
<table><tr><td><div style="background: url('https://31.media.tumblr.com/4f13f9a2adef539c3f0a6ac85658ecc5/tumblr_inline_mygyd30Nzx1s4v3bm.gif');  width: 100px; height: 100px;"><div class="staffpub";><div style="background: #fff; height: 100px; "><div style="padding: 10px; font: 10px cambria; text-align: justify; height: 100px; line-height: 12px; "><center><pseudopub>pseudo</pseudopub><br>
<div class="barrepub"></div>
<postepub>poste occupé</postepub></center></div></div></div></div></td><td><div style="background: url('http://65.media.tumblr.com/aeb787742d810d70922c5bb9b6bae468/tumblr_inline_n2hwg59UWV1sxexyo.gif');  width: 100px; height: 100px;"><div class="staffpub";><div style="background: #fff; height: 100px; "><div style="padding: 10px; font: 10px cambria; text-align: justify; height: 100px;  line-height: 12px; "><center><pseudopub>pseudo</pseudopub><br>
<div class="barrepub"></div>
<postepub>poste occupé</postepub></center></div></div></div></div></td></tr></table></td></tr></table></center></div>
<div class="blocinfos">ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. ici l'intrigue. </div>
<div class="blocinfos">We don't talk anymore est un forum inspiré de l'univers de la saga <b>twilight</b>, le contexte est de <rouge>pseudo</rouge>, d'après une idée originale de <violet>pseudo</violet>. Le forum est la propriété de ses administratrices, <violet>pseudo</violet>, <rouge>pseudo</rouge> et <violet>pseudo</violet>. Toute reproduction partielle ou complète est interdite. Le design a été réalisé par <rouge>pseudo</rouge>, le codage du forum est de <violet>pseudo</violet> que nous remercions pour leur travaille.</div></div>

<style>.fondfiche{
 width:450px;
 height:auto;
 background-color:#EFD1AE;
 padding:4px;
 border-radius:4px;
 text-align:center;
}
.fondtitre{
 background-color:#F6F3E2;
 width:445px;
 height:35px;
 border:1px #F1F8F8 solid;
 text-align:center;
}

titrefiche{
 font-family:lobster;
 font-size:24px;
 font-height:26px;
 color:#493141;
}

sstitre{
 font-family:fjalla one;
 font-size:11px;
 font-height:13px;
 color:#424242;
}

.blocinfos{background-color:#F6F3E2;
 width:441px;
 height:auto;
 border:1px #e37e7e solid;
 text-align:justify;
 padding:4px;
 font-family:arial;
 font-size:11px;
 font-height:13px;
 color:#424242;
}

violet{
 color:#493141;
 font-family:fjalla one;
 text-transform:uppercase;
}

rouge{
 color:#C75D55;
 font-family:fjalla one;
 text-transform:uppercase;
}
 
/*-----fiche de pub-----*/
.imgpub{
 width:443px;
 height:auto;
 padding:2px;
 -webkit-filter: grayscale(50%);
 -moz-filter: grayscale(50%);
 -ms-filter: grayscale(50%);
 -o-filter: grayscale(50%);
 filter: grayscale(50%);
 filter: url(grayscale.svg); /* Firefox 4+ */
 filter: gray;
}

.staffpub {
 width:100px;
 height:100px;
 opacity: 0.0; 
 transition-duration: 0.6s; 
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s; 
 -o-transition-duration: 0.6s;
font-family:arial;
font-size:10px;
font-height:12px;
color:#424242;
}

.staffpub:hover {
 opacity: 0.9;
}
pseudopub{
 font-family:fjalla one;
 font-size:13px;
 font-height:15px;
 color:#493141;
}

.barrepub{

 height:2px;
 width:50px;
 background-color:#fbc39a;
}

postepub{
 font-family:fjalla one;
 font-size:10px;
 font-height:11px;
 text-transform:uppercase;
}

.contextepub{
 width:205px;
 height:205px;
 overflow:auto;
 border:solid 1px #D58C64;
 padding:1px;
 font-family:arial;
 font-size:10px;
 font-height:12px;
 color:#424242;
 text-align:justify;
 text-transform:lowercase;
 background-color:#f8f6f6;
}
credit{
 font-family:arial;
 font-size:10px;
 font-height:11px;
 text-transform:uppercase;
}

/*fiche de présa staff*/
.presastaff{
 width:200px;
 height:200px;
 border:solid 1px #D58C64;
 padding:1px;
  opacity: 0.8;  transition-duration: 0.6s;
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s; 
 -o-transition-duration: 0.6s;
}
.presastaff:hover{
 opacity:0.5;}

/* latin-ext */
@font-face {
 font-family: 'Fjalla One';
 font-style: normal;
 font-weight: 400;
 src: local('Fjalla One'), local('FjallaOne-Regular'), url(https://fonts.gstatic.com/s/fjallaone/v4/SHXJdWnWW6HDq-6DpcG8PyEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
 unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
 font-family: 'Fjalla One';
 font-style: normal;
 font-weight: 400;
 src: local('Fjalla One'), local('FjallaOne-Regular'), url(https://fonts.gstatic.com/s/fjallaone/v4/rxxXUYj4oZ6Q5oDJFtEd6vk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic */
@font-face {
 font-family: 'Lobster';
 font-style: normal;
 font-weight: 400;
 src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/c28rH3kclCLEuIsGhOg7evY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
 unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
 font-family: 'Lobster';
 font-style: normal;
 font-weight: 400;
 src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/RdfS2KomDWXvet4_dZQehvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
 unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
 font-family: 'Lobster';
 font-style: normal;
 font-weight: 400;
 src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/9NqNYV_LP7zlAF8jHr7f1vY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
 unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
 font-family: 'Lobster';
 font-style: normal;
 font-weight: 400;
 src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/cycBf3mfbGkh66G5NhszPQ.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}</style>

/*---------------------------------FICHE WDTA-------------------------------------*/
.fondfiche{
 width:450px;
 height:auto;
 background-color:#EFD1AE;
 padding:4px;
 border-radius:4px;
 text-align:center;
}

.fondtitre{
 background-color:#F6F3E2;
 width:445px;
 height:35px;
 border:1px #F1F8F8 solid;
 text-align:center;
}

titrefiche{
 font-family:lobster;
 font-size:24px;
 font-height:26px;
 color:#493141;
}

sstitre{
 font-family:fjalla one;
 font-size:11px;
 font-height:13px;
 color:#424242;
}

.blocinfos{
background-color:#F6F3E2;
 width:441px;
 height:auto;
 border:1px #F1F8F8 solid;
 text-align:justify;
 padding:4px;
 font-family:arial;
 font-size:11px;
 font-height:13px;
 color:#424242;
}

/*------fiche de présentation------*/
.vavapresa{
 width:200px;
 height:320px;
 border:solid 1px #D58C64;
 padding:1px;
  opacity: 0.8;  transition-duration: 0.6s;
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s; 
 -o-transition-duration: 0.6s;
}
.vavapresa:hover{
 opacity:0.5;}
.presabox{
 width:200px;
 height:130px;
 overflow:auto;
 border:solid 1px #D58C64;
 padding:1px;
 font-family:arial;
 font-size:10px;
 font-height:12px;
 color:#424242;
 text-align:justify;
 text-transform:lowercase;
 background-color:#f8f6f6;
}

violet{
 color:#493141;
 font-family:fjalla one;
 text-transform:uppercase;
}

rouge{
 color:#C75D55;
 font-family:fjalla one;
 text-transform:uppercase;
}

.blocjoueur{
 width:305px;
 height:100px;
 overflow:auto;
 font-family:arial;
 font-size:10px;
 font-height:12px;
 color:#424242;
 text-align:justify;
 border:solid 1px #D58C64;
 padding:1px;
 background-color:#f8f6f6;
}

.imgjoueur{
 border:solid 1px #D58C64;
 width:100px;
 height:100px;
 padding:1px;
 opacity: 0.8;  transition-duration: 0.6s;
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s; 
 -o-transition-duration: 0.6s;
}

.imgjoueur:hover{
opacity: 0.5;
}

/*------fiche de scénario------*/
.vavascena {
 width:200px;
 height:320px;
 opacity: 0.0; 
 transition-duration: 0.6s; 
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s; 
 -o-transition-duration: 0.6s;
font-family:arial;
font-size:10px;
font-height:12px;
color:#424242;
 overflow:auto;
}

.vavascena:hover {
 opacity: 0.9;
}

pseudoscenario{
 font-family:fjalla one;
 font-size:13px;
 font-height:15px;
 color:#493141;
}

.barre{

 height:2px;
 width:150px;
 background-color:#0e2028;
}

lien{
 font-family:fjalla one;
 font-size:10px;
 font-height:11px;
 text-transform:uppercase;
}

/*-----pré-liens-----*/
.prelien {
 width:200px;
 height:200px;
 opacity: 0.0; 
 transition-duration: 0.6s; 
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s; 
 -o-transition-duration: 0.6s;
font-family:arial;
font-size:10px;
font-height:12px;
color:#424242;
 overflow:auto;
}

.prelien:hover {
 opacity: 0.9;
}

.imgprelien{
 width:40px;
 height:40px;
 border-radius:40px;
 margin-right: 10px
}
 
/*-----fiche de pub-----*/
.imgpub{
 width:443px;
 height:auto;
 border:solid 1px #D58C64;
 padding:2px;
 -webkit-filter: grayscale(50%);
 -moz-filter: grayscale(50%);
 -ms-filter: grayscale(50%);
 -o-filter: grayscale(50%);
 filter: grayscale(50%);
 filter: url(grayscale.svg); /* Firefox 4+ */
 filter: gray;
}

.staffpub {
 width:100px;
 height:100px;
 opacity: 0.0; 
 transition-duration: 0.6s; 
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s; 
 -o-transition-duration: 0.6s;
font-family:arial;
font-size:10px;
font-height:12px;
color:#424242;
}

.staffpub:hover {
 opacity: 0.9;
}
pseudopub{
 font-family:fjalla one;
 font-size:13px;
 font-height:15px;
 color:#493141;
}

.barrepub{

 height:2px;
 width:50px;
 background-color:#fbc39a;
}

postepub{
 font-family:fjalla one;
 font-size:10px;
 font-height:11px;
 text-transform:uppercase;
}

.contextepub{
 width:205px;
 height:205px;
 overflow:auto;
 border:solid 1px #D58C64;
 padding:1px;
 font-family:arial;
 font-size:10px;
 font-height:12px;
 color:#424242;
 text-align:justify;
 text-transform:lowercase;
 background-color:#f8f6f6;
}
credit{
 font-family:arial;
 font-size:10px;
 font-height:11px;
 text-transform:uppercase;
}

/*fiche de présa staff*/
.presastaff{
 width:200px;
 height:200px;
 border:solid 1px #D58C64;
 padding:1px;
  opacity: 0.8;  transition-duration: 0.6s;
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s; 
 -o-transition-duration: 0.6s;
}
.presastaff:hover{
 opacity:0.5;}

/* latin-ext */
@font-face {
 font-family: 'Fjalla One';
 font-style: normal;
 font-weight: 400;
 src: local('Fjalla One'), local('FjallaOne-Regular'), url(https://fonts.gstatic.com/s/fjallaone/v4/SHXJdWnWW6HDq-6DpcG8PyEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
 unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
 font-family: 'Fjalla One';
 font-style: normal;
 font-weight: 400;
 src: local('Fjalla One'), local('FjallaOne-Regular'), url(https://fonts.gstatic.com/s/fjallaone/v4/rxxXUYj4oZ6Q5oDJFtEd6vk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic */
@font-face {
 font-family: 'Lobster';
 font-style: normal;
 font-weight: 400;
 src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/c28rH3kclCLEuIsGhOg7evY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
 unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
 font-family: 'Lobster';
 font-style: normal;
 font-weight: 400;
 src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/RdfS2KomDWXvet4_dZQehvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
 unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
 font-family: 'Lobster';
 font-style: normal;
 font-weight: 400;
 src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/9NqNYV_LP7zlAF8jHr7f1vY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
 unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
 font-family: 'Lobster';
 font-style: normal;
 font-weight: 400;
 src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/cycBf3mfbGkh66G5NhszPQ.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}