<link href='http://fonts.googleapis.com/css?family=Mrs+Saint+Delafield' rel='stylesheet' type='text/css'><style type='text/css'>
.piccont { width:300px; height:300px; position:relative; overflow:hidden; }
.actualpic { position:absolute; top:0px; left:0px; width:300px; height:300px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.piccont:hover .actualpic { top:300px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.writestuff { position:absolute; top:0px; left:0px; width:260px; height:260px; padding:20px; font-family:times; color:#bbb; font-size:10px; text-align:justify; overflow:auto; }
</style><center><div style='width:350px; padding:50px; background-image:url(http://i.imgur.com/Z7rW4ep.jpg); -webkit-box-shadow: 1px 1px 5px 0px #eee, -1px -1px 5px 0px #eee; -moz-box-shadow:1px 1px 5px 0px #eee, -1px -1px 5px 0px #eee; box-shadow:1px 1px 5px 0px#eee, -1px -1px 5px 0px #eee;'><div style='width:300px; padding:25px; background-color:#fff;'><div style='font-family:mrs saint delafield; font-size:60px; line-height:60px; color:#ceeaef; text-shadow:1px 1px #555;'>

first last

</div><div style='margin-top:-10px; font-family:arial; font-size:7px; text-transform:uppercase; line-height:7px; color:#555; letter-spacing:2px;'> 

## . JOB . FACE CLAIM

</div><div style='height:20px;'></div><div class='piccont'><div class='writestuff'>

words

</div><div class='actualpic' style='background-image:url(http://placehold.it/300);'></div></div></div></div><div style='margin-top:8px; width:450px; text-align:center; font-family:calibri; font-size:8px; color:#777; line-height:100%; letter-spacing:4px;'>[url=http://forums.athousandfireflies.com/index.php?showuser=6755]THANKS TO LOUIS AT ATF![/url]</div></center>

 <link href='http://fonts.googleapis.com/css?family=Vollkorn|Kite+One' rel='stylesheet' type='text/css'>
<style type="text/css">
/* PRELIM*/
#bdtop { width: 500px; height: 200px; position: relative; background-color: ; z-index: 99; }
#bdtop img { position: absolute;  border-radius: 50px; -moz-border-radius: 50px; top: 75px; }
#bdtop img:nth-child(1) { left: 155px; }
#bdtop img:nth-child(2) { left: 225px; }
#bdtop img:nth-child(3) { left: 295px; }
#bdtop ul { position: absolute; top: 160px; left: 50px; height: 20px; width: 360px; list-style: none; border-top: 1px solid rgba(0,0,0,0.1); }
#bdtop li { text-align: right; font-family: kite one, sans-serif; letter-spacing: 5px; text-transform: uppercase; font-size: 6.5px; padding-right: 10px; width: 120px; height: 20px; position: absolute; top: 0; border-bottom: 1px solid rgba(0,0,0,0.2); line-height: 20px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; }
#bdtop li:hover { border-bottom: 1px solid rgba(0,0,0,0.5); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; }
#bdtop li:nth-child(1) { left: 0px; }
#bdtop li:nth-child(2)  { left: 135px; }
#bdtop li:nth-child(3) { left: 270px; }

/* TABS */
#bdtop li > div { height: 0; width: 90px; opacity: 0; font-family: vollkorn; font-size: 9px; text-transform: lowercase; letter-spacing: 1px; line-height: 11px; padding: 20px; background-color: white; color: rgba(0,0,0,0.7); margin-top: 3px; text-align: justify; -webkit-box-shadow: 4px 4px 10px rgba(50, 50, 50, 0.2); -moz-box-shadow: 4px 4px 10px rgba(50, 50, 50, 0.2); box-shadow: 4px 4px 10px rgba(50, 50, 50, 0.2); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; overflow: auto; }
#bdtop li:hover > div { height: 40px; opacity: 1; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; }
#bdbot { width: 300px; padding: 40px 100px; text-align: justify; background-color: white; text-transform: lowercase; font-family: cambria, serif; font-size: 10px; letter-spacing: 1px; line-height: 13px; }

/* SCROLL COLOR */
#bdtop li div::-webkit-scrollbar { height: 10px; width: 8px; background: transparent;} 
#bdtop li div::-webkit-scrollbar-thumb { background: rgba(0,0,0,1); } 
#bdtop li div::-webkit-scrollbar-corner { background: rgba(0,0,0,1); }
#bdtop li div::-webkit-scrollbar-track { background: transparent; }

/* MAIN TEXT */
#bdbot:first-letter { background-color: black; padding: 10px; font-size: 20px; font-style: Arial; margin: 0 7px 0 0; color: white; text-transform: uppercase; float: left; display: block; }
#bdbot .bottag { width: 400px; height: 1px; margin-left: -50px; margin-top: 50px; background-color: rgba(0,0,0,0.1); }

/* BOTTOM */
#bdbot h1 { font-weight: inherit; font-family: vollkorn; font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: rgba(0,0,0,0.7); text-align: center; padding: 20px 0; margin: 0; }
</style>
<center>
<div id="bdtop">

<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">

<ul>

<li>время<div>текст;текст;текс</div></li>
<li>город<div>текст;текст;текст</div></li>
<li>погода <div>текст,текст;текст</div></li>

</ul></div><div id="bdbot">

Легенда гласит, что в небольшой Кельтской деревушки, примерно 2 тыс. лет назад жила девушка и красота ее была ни с кем не сравнима. Поговаривали что эта девушка самая настоящая колдунья, но значения этому никто не придавала. В том числе и два брата Вилей и Киган. Как и многие в деревне они влюбились в эту девушку, но не в силах поделить ее решили, что делать этого вовсе не стоит. Глубокой ночью они пробрались к ней в дом и похитители, отведя девушку в лес, они изнасиловали ее, а после же оставили умирать на холодной земле. Алчные и злые братья даже не подозревали, что девушка останется жива. Следующим утром она вернулась в деревню и на главной площади во всеуслышание прокляла  братьев.<i>- Будьте прокляты вы! И ваши потомки и те кто будет после них! Ты,</i> - <b>ведьма, чье лицо искривляла гримаса злобы, показала на темноволосого мужчину</b>, <i>- никогда больше не увидишь солнечного света, а твой голод будет так силен, что сможет утолить его лишь кровь. Ты никогда не дотронешься до чугун-растения и пусть твоя жизнь будет вечной, сердце твое больше никогда не будет биться. Ты не пройдешь в чужой дом и не сможет иметь детей. Твоя жизнь станет твоим проклятьем, Вилей.</i>
<br>
<i>- А ты, Киган, будь проклят луной!<i>- <b>повернулась женщина к светловолосому,</b> - и ты и твои потомки и те кто будет после них. Луна станет твоим проклятьем и как раньше ты охотился на зверей, так теперь ты будешь одним из них и люди вокруг будут охотится на тебя. Ты станешь волком, животным, что полностью отражает твою суть. Аконит станет твоим ядом, а все твои дети будут прокляты от рождения и до самой смерти. Твой укус будет опасен для людей вокруг и ты никогда не узнаешь вечного покоя! Полная луна, твоя вечная подруга, отныне будет иметь над тобой свою полную власть и ты не сможешь контролировать свою суть. 
<i>- Вы оба! Прокляты будьте навечно!</i> - <b>глаза ведьмы словно загорелись дьявольским светом </b>, - <i>И никогда не знайте мира, как в душе так и с друг другом.</i>
Как только она закончила свою речь, братья упали а их сердца остановились, а сама девушка бесследно исчезла словно ее никогда и не было. 
Братьев похоронили в тот же день, их тела закапали в лесу и в ту же ночь, как только луна показалась из-за туч, ожил первый из них Киган, но на этот раз в обличье свирепого волка, жаждущим крови.Вскоре очнулся и Вилей, такой же ведомый убийствами. 
Они вырезали деревню, не оставив никого и когда последний труп лег на пол, братья, посмотрели друг на друга. Никто не знает что именно они там увидели, но злоба в глаза обоих навсегда положила конец их братским узам. 

<div class="bottag"></div><div align="center" style="padding: 5px 0;">



</div></div><a style="font-size: 6px; line-height: 10px; opacity: .7; letter-spacing: 3px; font-family: calibri;""></a></center>

 <center><link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>

<style type="text/css">
.herecome { font-family: arial; text-transform: uppercase; font-size: 30px; color: white; text-shadow: 1px 1px 0px #CED5DF, 2px 2px 0px white; text-align: left; padding-top: 35px; line-height: 50%; }
.oldflatop { background: #CED5DF; width: 480px; height: 40px; padding: 20px; }
.hecome { background: #fff; width: 400px; padding: 20px; color: black; font-family: calibri; height: 300px; line-height: 110%; text-align: justify; opacity: 0; transition-duration: 0.8s;-moz-transition-duration: 0.8s;-webkit-transition-duration: 0.8s;-o-transition-duration: 0.8s; overflow: auto; }
.hecome:hover { opacity: 1; }
.hecome p:first-line { font-weight: bold; color: #CED5DF; }
.groovingupslowly { width: 490px; height: 400px; background: transparent; padding-top: 30px; }
.hegot::-webkit-scrollbar { width: 5px; background: #fff }
.hegot::-webkit-scrollbar-thumb { background: #CED5DF; }
.hegot::-webkit-scrollbar-corner { background: #CED5DF; }
.joojooeyeball { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); position: relative; top: -200px; left: 222px; font-size: 20px; color: #CED5DF; text-align: left; font-family: 'Oswald', sans-serif;text-transform: uppercase; line-height: 100%; font-weight: 300; }
.heone { width: 420px; color: black; text-align: right; font-family: calibri; font-size: 9px; text-transform: uppercase; margin-top: -27px; line-height: 100%; }
</style>

<div class="oldflatop"><div class="herecome">Seven devils in my house </div></div>

<div style="width: 500px; height: 400px; background:url(http://sd.uploads.ru/7nSAO.jpg );">

<div class="groovingupslowly">

<div class="hecome hegot"><div style="width: 100px; height: 100px; background:url(http://placehold.it/100x100); float: left; margin: 0px 10px 5px 0px; border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; -webkit-border-radius: 50px; -ms-border-radius: 50px;"></div>

<p>
● Ты прячешься под большой ярко-желтый зонт и неспешно идешь вдоль по старой, вымощенной камнем улице. Зонт закрывает тебя от дождливого неба, но также он закрывает тебя и от происходящего вокруг, ты даже не замечаешь, что где-то совсем рядом, промелькнула почти невидимая тень, а вон за тем старым зданием показался ни то волк, ни то человек. Ты обычный человек и тебе даже неведомо, что именно на этой улице находится старый клуб, вход для таких как ты  в который заказан. У тебя своя жизнь, свои заботы, и возможно, этот ярко-желтый зонт единственное интересное пятно в твоей серой судьбе. Тебе даже неизвестно что сегодня ночью в этом клубе, созданном как нейтральная территория для вампиров и оборотней, произойдет двойное убийство и мир, который так сложно было поддерживать  рухнет навсегда. Умрут двое: Старейшина клана вампиров и Альфа оборотней. Они будут убиты неизвестным, и все, что строилось годами, тотчас  разрушится. Возможно, те тени, что чудились тебе не так давно или то странное существо, что показалось из-за дома и есть убийца. А может быть, это совсем другая сила. Может быть, где-то в стенах старого города притаилась третья сторона, которой надоело смотреть на жалкие попытки остальных восстановить, никогда не существующий мир.
</p><p>
●Здравствуйте, дорогие и уже горячо любимые путники. Я приглашаю вас в загадочный мир вампиров, оборотней, ведьм и охотников. В мир чарующий и очень опасный, в мир, полный загадок и тайн, где каждый неверный шаг может стать последним. Идея данного форума в моей голове зреет уже довольно долгое время. И пусть сейчас кто-то скажет опять банальная мистика, но все равно хочу эту мистику. Хочу вместе с вами окунуться в тысячелетнюю борьбу вампиров, оборотней и ведьм, в войну стражей призванных оберегать мир обычных людей от посягательств нечисти. Я не хочу банальщины, но также мне не хочется стать одним из тех форумов, что громко кричат о своей оригинальности и через неделю закрывается. Давайте найдем золотую середину. Возьмем немного канона и приправим его щепоткой фантазии. У меня есть небольшая идея по тому, как именно появились вампиры и оборотни. Это будет связано с богами и проклятиями, проклятием солнца и луны и вечной жаждой крови.
Возможно, вас интересует кто же я такая. Я администратор-универсал, мне 20 лет и я уже нигде не учусь. У меня есть опыт администрирования и желание творить. В мою сферу деятельности входит все: начиная от текста, до дизайнов. Но, как мы все понимаем, один в поле не воин.  Для того чтобы что-то делать, мне нужны такие же идейные, горящие желанием и наделенные свободным временем люди. Люди, готовые идти до конца, а не бросить все и даже не помахав ручкой свалить в неизвестном направление.
</p><p>
●События игры однозначно будет происходит Великобритании или Ирландии. Будет ли это прекрасный Лондон или же чарующий Дублин, а может быть, Ливерпуль...решим вместе. Городов масса, а нам нужен самый-самый. На данном этапе мне очень нужны администраторы в совершенно разных сферах деятельности. Графисты, текстовики, универсалы. Так же приветствуется помощь модераторов во всех направлениях. Ну а вообще в первую очередь, без лишних званий, мне просто нужна команда, сложенная, понимающая друг друга команда.
</p><p>
 </p>
</div></div>
</center>

 .miniprofile { 
width: 180px;
text-align: center;
}

.hoverprofile { width: 180px; height: 180px; background-color: #000000; opacity: 0; position: absolute; z-index: 2; margin-top: 5px; transition: 0.6s; -moz-transition: 0.6s; -webkit-transition: 0.6s; -o-transition: 0.6s; }

.hoverprofile:hover { opacity: 0.8; transition: 0.6s; -moz-transition: 0.6s; -webkit-transition: 0.6s; -o-transition: 0.6s;}

.pa-fld1 {color: #ffffff !important; font-size:10px;}

в доп. поле профиля  див с классом
<center><div class="miniprofile"><div class="hoverprofile"> текст текст текст текст текст текст</div></div></center>