<div class="aay-perso"><div class="aay-presgroup">Zugehörigkeit</div><div class="aay-presname">Vorname Nachname</div><br>
<div class="aay-presinfo"><span class="info">Spitzname:</span> Hast du einen Spitzname? Wie lautet der?
<span class="info">Alter:</span> Wie alt bist du?
<span class="info">Geschlecht:</span> Bist du Männlich oder Weiblich?
<span class="info">Beruf:</span> Was für ein Beruf hast du?
<span class="info">Größe:</span> Wie groß bist du?
<span class="info">Gewicht:</span> Wie viel wiegst du?
<span class="info">Augen- & Haarfarbe:</span> Welche Farbe haben deine Augen und deine Haare?
<span class="info">Merkmale:</span> Hast du irgendwelche besonderen Merkmale?
</div><div class="aay-photo"><img src="http://i84.servimg.com/u/f84/19/41/51/11/pres11.jpg"/><div class="aay-photo-src"><i>Name der Avatarperson und Herkunft</i></div></div>
<div class="aay-title">Familie</div>
<div class="aay-bloctxt"><span class="info">Mutter:</span> Name, Alter, Beruf, Status, Verhältnis
<span class="info">Vater:</span> Name, Alter, Beruf, Status, Verhältnis
<span class="info">Bruder:</span> Name, Alter, Beruf, Status, Verhältnis
<span class="info">Schwester:</span> Name, Alter, Beruf, Status, Verhältnis
<span class="info">Andere Verwandte:</span> Name, Art der Verwandtschaft, Alter, Beruf, Status, Verhältnis
<span class="info">Haustiere:</span> Name, Art des Haustieres, Alter, Status, Verhältnis</div>
<div class="aay-title">Charakter</div>
<div class="aay-bloctxt"> Wie ist dein Charakter? Erkläre ihn uns doch, ca. 400 Wörter. Ja wir wissen das sind sehr viele Wörter, aber das sollte dennoch eigentlich jeder schaffen. Geht einfach nach einem ganz einfachen Prinzip: Wie bist du wirklich? Wie sehen dich andere? Hast du sonst irgendwelche Macken die dich besonders machen? Phobien oder irgendwas anderes. Du kannst dazu alles schreiben. Vergisst aber nicht, wenn ihr Phobien habt z.B. vor Feuer oder so, dass ihr auch in de Biographie schreibt, wie es dazu kam.

<center>[table][td]<form><select name="Vorlieben" style="width:200px">
<option selected>Vorlieben
</option><option>Erste Vorliebe
</option><option>Zweite Vorliebe
</option><option>Dritte Vorliebe
</option><option>Vierte Vorliebe
</option><option>Fünfte Vorliebe
</option></select></form>[/td][td]<form><select name="Abneigungen" style="width:200px">
<option selected>Abneigungen
</option><option>Erste Abneigung
</option><option>Zweite Abneigung
</option><option>Dritte Abneigung
</option><option>Vierte Abneigung
</option><option>Fünfte Abneigung
</option></select></form>[/td][tr][/tr][td]<form><select name="Stärken" style="width:200px">
<option selected>Stärken
</option><option>Erste Stärke
</option><option>Zweite Stärke
</option><option>Dritte Stärke
</option><option>Vierte Stärke
</option><option>Fünfte Stärke
</option></select></form>[/td][td]<form><select name="Schwächen" style="width:200px">
<option selected>Schwächen
</option><option>Erste Schwäche
</option><option>Zweite Schwäche
</option><option>Dritte Schwäche
</option><option>Vierte Schwäche
</option><option>Fünfte Schwäche
</option></select></form>[/td][/table]</center></div>
<div class="aay-title">Biographie</div>
<div class="aay-bloctxt">Erzähle uns aus deinem Leben. Was hast du bisher erlebt? Schreibe hierzu bitte 400 Wörter.</div>
<div class="aay-title">Probepost</div>
<div class="aay-bloctxt">Nur beim Erstaccount vorzulegen. Ca 1000 Zeichen.
 Sollte das ein Zweitaccount sein, könnt ihr den Teil löschen. Von wo bis wo fndet ihr im Code hier in der Box.</div>
<div class="aay-player"><img src="http://i84.servimg.com/u/f84/19/41/51/11/pres11.jpg"/><div class="aay-playerinfo"><span class="info">Account:</span> [size=13]Ist es ein Erstaccount oder Mehraccount. Bitte auch dazuschreiben, welcher der Erstaccount ist, sollte es sich um einen Mehraccount handeln.[/size]
<span class="info">Spielername:</span> Wie sollen wir dich nennen? (Freiwillige Angabe)
<span class="info">Alter:</span> Wie alt bist du wirklich? (Freiwillige Angabe)
<span class="info">Set & Steckiweitergabe</span> Was darf weiter geben werden oder was soll nicht weiter gegeben werden. 
<span class="info">Regeln gelesen?:</span> Ja oder Nein. Wir empfehlen sie zu lesen.
</div></div><div class="aay-opinion"><span class="info">Kwami:</span> Wie heißt dein Kwami?
<span class="info">Miraculous:</span> Was für ein tierähnliches Wesen ist dein Kwami?
<span class="info">Name:</span> Wie lautet dein Superhelden/Bösewicht Name?
<span class="info">Aussehen:</span> Wie siehst du verwandelt aus (Erklären; Bild in Spoiler setzen bzw als Link)
<span class="info">Schmuckstück:</span> Was ist dein Schmuckstück womit du dich verwandelst?
<span class="info">Waffe:</span> Was für eine Waffe trägst du mit
<span class="info">Fähigkeit:</span> Was ist deine besondere Fähigkeit?
<span class="info">Spezialangriff:</span> Was ist dein Spezialangriff und was passiert da? Was musst du da machen?
</div>
</div>

<style type="text/css"> .aay-presgroup {margin-left: auto; background: #adc; width: 118px; padding: 17px;text-align: center; color: #black; font-family: 'Abel'; text-shadow: 1px 2px 1px rgba(0,0,0,0.4); display: inline-block; font-size: 17px; line-height: 23px; text-transform: uppercase; margin-right: 10px;} .aay-presname {margin-right: auto; width: 350px; padding: 10px; text-align: center; color: #269a1f; background: #eaebeb; overflow: hidden; font-family: 'Abel'; font-size: 35px; line-height: 37px; display: inline-block; vertical-align: top; text-shadow: 1px 0px 1px rgb(0, 0, 0), 1px 1px 1px rgb(45, 44, 44); text-transform: uppercase; letter-spacing: 1px;} .aay-perso {margin: auto; text-align: justify; width: 547px;} .aay-presinfo {float: left; width: 286px; height: 200px; overflow: auto; padding: 10px; margin-right: 10px;background: #eaebeb;font-size:13px;} .info {color: #307315; font-size: 13px; text-transform: uppercase; font-style: normal;    font-weight: bold;} .aay-photo {width: 215px; background: black; vertical-align: top; height: 220px; overflow: hidden;} .aay-photo img {-webkit-filter: grayscale(80%); filter: grayscale(80%); transition: 1s; -webkit-transition: 1s; position: relative; z-index: 1;} .aay-photo-src {position: relative; top: -60px; background: rgba(195,195,195,0.6); color: black; text-align: center; font-size: 12px; z-index: 2; padding: 5px; opacity: 0; transition: 1s; -webkit-transition: 1s;} .aay-photo:hover img {-webkit-filter: grayscale(0%); filter: grayscale(0%); transition: 2s; -webkit-transition: 2s;} .aay-photo:hover .aay-photo-src {opacity: 1; transition: 2s; -webkit-transition: 2s;} .aay-bloctxt {background: #eaebeb; padding: 10px; width:512px; height: 250px; overflow: auto; border-top: #075402 4px solid; position: relative; z-index: 2;font-size:13px;} .aay-title {text-shadow: -1px -2px 1px rgba(0,0,0,0.4), 1px 2px 1px rgba(255,255,255,1); text-transform: uppercase; letter-spacing: 1px; font-family: 'Abel'; color: #075402; font-size: 25px; position: relative; left: 5px; bottom: -15px; z-index: 1;} .aay-player {width: 215px; height: 220px; display: inline-block; margin-right: 15px; background: #fa5858;} .aay-opinion {display: inline-block; width: 282px; padding: 10px; height: 200px; overflow: auto; background: #eaebeb; text-align: justify; vertical-align: top;font-size:13px;} .aay-player img {position: relative: 1; -webkit-filter: grayscale(50%); filter: grayscale(50%); transition: 1s; -webkit-transition: 1s; } .aay-playerinfo {padding: 10px; position: relative; z-index: 2; background: #adc; transition: 1s; -webkit-transition: 1s; opacity: 0; overflow: auto; width: 200px; height: 202px; top: -222px;font-size:13px;} .aay-player:hover .aay-playerinfo {opacity: 1; transition: 2s; -webkit-transition: 2s;}</style><link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />