A lifeless light surrounds us each night. Never could I imagine that something so luminous could feel so dark. It's this glow that reminds us of the dreamless existence we've been sentenced to. Now this city is full of dry eyes caught in a trance of obedience, devoid of any trace of an identity. Such a curious sight, to see bright eyes strangled by the darkness.

luminous beings are we, not this crude matter

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » luminous beings are we, not this crude matter » archive » илай тестит дерьмо


илай тестит дерьмо

Сообщений 1 страница 14 из 14

1

кто, если не ты
когда, если не сейчас

полезные сайты:
http://wecode.jcink.net (нужна регистрация)
http://code.jcink.net/index.php?act=idx

– чтобы вызвать html код нужно вставить код в тэг кода (логика) и вставить <!--HTML--> в самое начало перед кодом, получается [*code]<!--HTML--> твой код[/*code] (ток без звездочек)

– если код тупой и наезжает на подпись (тот, что в следующем соо так делал), можно заставить его подняться дублированием выравнивания текста. короче, просто после закрытия тэга кода вставляешь четыре-пять раз выравнивание по центру/ширине/любое (главное не выравнивай внутри выравнивания ахахах) и вуаля

– вообще я вызов html хочу вставить нам в кнопки над формой ответа, чтобы не прописывать каждый раз, но не сегодня ахахахха

– зачем нам это? МНЕ НАДО, МНЕ КРАСИВО АХАХАХХА

– а ещё авторы часто ставят ублюдские копирайты, их можно жестоко вырезать >: )

2

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic' rel='stylesheet' type='text/css'>
<style type="text/css">
.hpdh-kreacher {
    width:400px;
    height:126px;
    background-image:url(http://i.imgur.com/kPzMhlL.png);
}
.hpdh-dobby {
    width:80px;
    height:80px;
    padding:10px;
    border:1px solid #fcfcfc;
}
.hpdh-winky {
    width:200px;
    font-family:playfair display;
    font-size:11px;
    font-style:italic;
    padding-bottom:4px;
    text-align:center;
    border-bottom:1px solid #fcfcfc;
    margin-left:26px;
    color:#fcfcfc;
}
.hpdh-griphook {
    background-color:#E8E8E8;
    width: 300px;
    padding-left:50px;
    padding-right:50px;
    padding-top:25px;
    padding-bottom:25px;
    font-family:playfair display;
    font-size:11px;
    text-align:justify;
    line-height:98%;
    columns:125px 2;
    -webkit-columns:125px 2;
    -moz-columns:125px 2;
    color:#191919;
}
.hpdh-griphook i {
    font-style:italic;
    font-size:30px;
    font-weight:bold;
    line-height:100%;
    float:left;
    padding-left:15px;
    padding-right:3px;
    color:#191919;
}</style>

<center>
    <div class="hpdh-kreacher">
        <div style="padding-top:10px;"></div>
        <table>
            <tr>
                <td>
                    <div class="hpdh-dobby">
                        <img src="http://placehold.it/80x80">
                    </div>
                </td>
                <td>
                    <div class="hpdh-winky">" morsmordre "</div>
                </td>
            </tr>
        </table>
    </div>
    <div class="hpdh-griphook">
        <i>N</i>othing but the first letter of each paragraph in italics unless you want your writing to look super funky!</div>
    <div class="hpdh-kreacher" style="height:50px;">
        <div class="hpdh-winky" style="padding-top:13px; margin-left:0px; font-size:9px;">for draco. 573 words. sorry it took so long!</div>
    </div>
    <div style="font-size:8px; text-transform:uppercase;"><a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=37282">THANKS</a> <a href="http://code.jfbs.net/index.php?showtopic=35">MERC</a>
    </div>
</center>

3

Код:
<!--HTML--><style type="text/css">
#funeral {
 width: 450px;
 padding: 20px;
 margin: 10px auto;
}
#funeral .m-box h1 {
 font-family: montserrat;
 text-align: right;
 font-size: 11px;
 letter-spacing: 2px;
 font-style: italic;
 color: #DD912F;
 text-transform: uppercase;
 padding-top: 10px;
}
#funeral .m-box h2 {
 font-family: trebuchet ms;
 text-align: right;
 font-size: 8px;
 letter-spacing: 2px;
 color: #cccccc;
 text-transform: uppercase;
 margin-top: -10px;
}
.m-box .m-line {
 width: 281px;
 height: 1px;
 background-color: #DD912F;
 margin-top: 10px;
 margin-left: 29px;
}
.m-box {
 width: 280px;
 padding: 30px;
 background-color: #f5f5f5;
 margin-left: 37px;
 line-height: 100%;
}
.m-box .m-text {
 font-family: trebuchet ms;
 font-size: 10px;
 line-height: 135%;
 text-align: justify;
 padding: 30px;
 color: #696969;
 background-color: #fbfbfb;
}
.m-img {
 float: left;
 top: 40px;
 position: relative;
 width: 75px;
 height: 75px;
 -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 margin: auto;
 overflow: hidden;
 outline: 1px solid #DD912F;
 outline-offset: 3px;
}
.m-img img {
 -ms-transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 margin-top: -25px;
 margin-left: -25px;
 width: 125px;
 height: auto;
}
.mercCred {
text-align: center;
width: 200px;
margin: 1px auto;
color: #767B8A;
text-align: center;
font-family: calibri;
font-size: 8px;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
}
.mercCred a { color: #767B8A; text-decoration: none; }
</style>

<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

<div id="funeral">
 <div class="m-img">
   <img src="http://placehold.it/125x125/000000/ffffff" />
 </div>
 <div class="m-box">
   <h1>no mourners, no funerals</h1>
   <h2>2,571 words for inej ghafa</h2>
   
   <div class="m-line"></div>
   
   <div class="m-text">
   
   Prefect’s bathroom Trelawney veela squashy armchairs, SPEW: Gamp’s Elemental Law of Transfiguration. Magic Nagini bezoar, Hippogriffs Headless Hunt giant squid petrified. Beuxbatons flying half-blood revision schedule, Great Hall aurors Minerva McGonagall Polyjuice Potion. Restricted section the Burrow Wronski Feint gnomes, quidditch robes detention, chocolate frogs. Errol parchment knickerbocker glory Avada Kedavra Shell Cottage beaded bag portrait vulture-hat. Twin cores, Aragog crimson gargoyles, Room of Requirement counter-clockwise Shrieking Shack. Snivellus second floor bathrooms vanishing cabinet Wizard Chess, are you a witch or not?
   </div>
 </div>
</div>

4

братхэйм
http://s6.uploads.ru/wOU4r.jpg
поместье маккензи в чарльстоне
http://www.worldpropertyjournal.com/news-assets/American_greenwich-nki.jpg
дом маккензи на фрипп айленде
http://funkyimg.com/i/2FSbj.jpg
два дома в бостоне уолшей/макмилланнов
http://funkyimg.com/i/2FSbk.jpg

поместье блэквудов
http://funkyimg.com/i/2NNjN.png

5

<font face="Playfair Display"><align=center>вы наверняка знаете меня как «ещё одного маккензи», но только тёте остаре известно, что на самом деле меня зовут <b><a href="http://vseljubjatfly.mybb.ru/viewtopic.php?id=117">ванилио ван лав винни маккензи</a></b>. я родился <i>31 октября</i> под созвездием скорпиона, чтобы, как говорят, просаживать родительское состояние, когда на самом деле <i>инженер</i>. если я не на работе, ищите меня в компании <b><a href="http://vseljubjatfly.mybb.ru/profile.php?id=17">малолетней выскочки</a></b>, которую мне очень нравится бесить.</align></font>

если кому-то надо заполнить лз и не умереть с кодами

6

мне потом оч лень будет исскать, так что когда, как не сегодня? (:<

Код:
<!--HTML-->
<div class="tenniscourt"><div class="beautyqueen">


<img src="(YOUR ICON HERE. WILL RESIZE TO 100x100 IF NEEDED.)">


</div> <div class="classclown"><div class="killingit">


all your im stuff here. will scrolll.


</div><div style="font-family: courier new; font-size: 9px; color: black; text-align:left; padding: 5px; border: 1px solid black; background-color: black; color:#ccc;"><img src="http://i.imgur.com/dyFTJ53.gif">


(USERNAME!!!!) is typing ...</div>

</div><div style="clear:both;"></div> </div><div style="width:400px; text-align:right; opacity:0.8; font-size:9px; margin:0 auto;"> <a href="http://code.jfbs.net/?showuser=2">PIERROT</a></div><style>.tenniscourt { width:400px; padding:10px; margin:0 auto;  } .beautyqueen { border:10px solid black;  width:100px; height:100px; float:left;  } .beautyqueen img { width:100px; height:100px; } .classclown { background-image: url(http://i.imgur.com/osILbKh.png); background-position: 0px 40px; background-repeat: no-repeat; padding-left: 50px; float: left; width: 230px; line-height: 100%; font-family: helvetica; font-size: 11px;} .killingit { height: 83px; overflow: auto; background: black; padding: 7px; color: white; letter-spacing: 1px; line-height: 1.4em; }</style>
Код:
<!--HTML-->
<div class="googoo"><a href="http://code.jfbs.net/?showuser=2"><div class="breakurheart"></div></a> 
  <div class="breaktitle"> USERNAMEEEEE </div>
  <div class="breaktext"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
  <div style="clear:both;"></div>
</div>

<style>
.googoo { width:500px; margin:0 auto; background:rgb(251, 158, 158); text-align:justify; font-family:georgia; } .breakurheart { float:left; width: 200px; height: 200px;

 background-image:url(YOUR 200 X 200 IMAGE HEREEE); 

background-position:center; -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); } .googoo a { display:inline; } .breaktitle { font-size:25px; color:black; margin-top:20px; padding-left:20px; float:left; } .breaktext { width:240px; height: 120px; color:#AD8787; background:rgba(0, 0, 0, 0.63); float:left; margin-left:20px; padding:10px; margin-top:-1px; }
</style>
Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,800' rel='stylesheet' type='text/css'>

<style>

.shipping { background-image:url(http://i.imgur.com/B96SvPZ.gif); padding: 30px; width: 300px; height: 500px; border: 1px solid #f2f2f2; box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.1);}

.shipping-two { width: 300px; height: 500px; background-image:url(300 X 500 IMAGE OF YOUR CHARACTER GOES HERE);  webkit-transition: all 1s ease; overflow: hidden }


.shipping-two .shipping-three { opacity: 0; background-color: rgba(178, 0, 255, 0.3); padding: 30px; width: 240px; height: 440px;  webkit-transition: all 1s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease; -ms-transition: all 3s ease; transition: all 3s ease;}
.shipping-two:hover .shipping-three { opacity: 1; webkit-transition: all 1s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease; -ms-transition: all 3s ease; transition: all 3s ease; }

.shipping-two .shipping-four { width: 240px; height: 440px; webkit-transition: all 1s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease; -ms-transition: all 3s ease; transition: all 3s ease; opacity: 0; margin-top: -470px; margin-left: -900px }

.shipping-two:hover .shipping-four { opacity: 1; margin-left: 0px; webkit-transition: all 1s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease; -ms-transition: all 3s ease; transition: all 3s ease; }

.shipping-five { font-family: raleway; color: #fff; letter-spacing: -2px; text-align: center; font-size: 30px; text-transform: uppercase }
.shipping-six { font-size: 8px; font-family: helvetica; letter-spacing: 1px; text-transform: uppercase; text-align: center; color: #fff }

.shipping-seven { width: 220px; height: 310px; padding: 10px; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); }
.shipping-eight { margin-top: -1px; background-color: #fff; padding: 10px; width: 100px; height: 50px; border-radius: 0px 0px 100px 100px; border-bottom: 1px solid rgba(0, 0, 0, 0.2);}

.shipping-nine { padding: 10px; text-align: justify; height: 250px; overflow: auto; font-family: helvetica; text-transform: lowercase; font-size: 9px; letter-spacing: 1px; color: #000; line-height: 90% } 
.shipping-nine b { color: #9A66AE; font-size: 12px }

.shipping-nine::-webkit-scrollbar { width: 7px; background-color: #fff }
.shipping-nine::-webkit-scrollbar-track { background:#fff; border: 1px solid #fff; }
.shipping-nine::-webkit-scrollbar-thumb { background:#9A66AE; border:1px solid #fff;}

</style>

<center>


<div class="shipping">
<div class="shipping-two">
<div class="shipping-three">

</div>


<div class="shipping-four">

<div class="shipping-five">

first last

</div>

<div class="shipping-six">

age #, membergroup, occupation

</div>

<div class="shipping-seven">

<div class="shipping-nine">

your shipper stuff goes here <b>use bold tags to emphasis text</b>

</div>

</div>

<div class="shipping-eight">

<img src="GIF ICON GOES HERE" style="margin-top: -50px; width: 100px; height: 100px; border-radius: 100px">

</div>

</div>

</div>
</div>


<a href="http://wecode.jcink.net/index.php?showuser=66"><div style="margin-top: 5px; padding: 5px; font-size: 9px; color: #aaa; text-align: center; font-family: arial">♛♛♛</div></a>
</center>
Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

<style type='text/css'>
.mmm {background-image:url(http://subtlepatterns.com/patterns/nasty_fabric.png); width:400px; padding:15px; border:#f3f3f3 5px solid;}
.whatcha {padding:30px; width:330px; background-color:#3e3e3e; font-family:fugaz one; font-size:22px; text-align:center;text-transform:lowercase; letter-spacing:-1px; color:#fff; border: #f3f3f3 5px solid; text-shadow:1px 1px 0px #3e3e3e, 2px 2px 0px #a8caed;}
.say {width:330px; margin-top:8px; height:1px; background-color:#fff;}
.mm {background-color:#fff; padding:20px; width:350px; border:#f3f3f3 5px solid; margin-top:5px;}
.that {width:106px; margin-bottom:3px; height:106px; padding:10px; background-image:url(http://subtlepatterns.com/patterns/nasty_fabric.png); border:#f3f3f3 5px solid;}
.that img {with:100px; height:100px; border:#f3f3f3 3px solid;}
.you {width:190px; padding:5px; margin-bottom:3px; height:124px; border:#f3f3f3 1px solid; overflow:auto; text-align:justify; font-family:calibri; font-size:11px; color:#7f7f7f; line-height:100%;;}
.you::-webkit-scrollbar { background: #fff; width: 4px; }
.you::-webkit-scrollbar-thumb { background: #a8caed; width: 4x }
.you::-webkit-scrollbar-corner { background: #fff; }
.you b {font-family:roboto condensed; font-size:7px; text-transform:uppercase; color:#a8caed; letter-spacing:1px;}
.you i {font-family:roboto condensed; font-size:7px; text-transform:uppercase; color:#a8caed; letter-spacing:1px;}
.you s {font-family:roboto condensed; font-size:7px; text-transform:uppercase; color:#a8caed; letter-spacing:1px;}
#only { width: 106px; height: 106px; position: relative; overflow: hidden; } 
#only .meant { width: 106px; height: 106px; top: 126px; position: absolute; transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out;}
#only:hover .meant {top:0px;}
.well {width:66px; height:66px; padding:20px; background-color: rgba(0,0,0,0.5);}
.its {margin-top:10px; font-family:roboto condensed; color:#fff; font-size:7px; text-transform:uppercase; letter-spacing:1px; text-align:center; line-height:100%;}
.all {width:66px; margin-top:5px; margin-bottom:5px; height:1px; background-color:#fff;}



</style>

<center><div class='mmm'><div class='whatcha'>i always sing to myself in public<div class='say'></div></div><div class='mm'>
<table>
<td>
<div class='that'><div id='only'><img src='http://placehold.it/100'><div class='meant'><div class='well'><div class='its'>face claim<div class='all'></div>##. group.</div></div></div></div></div>
</td><td>
<div class='you'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

<p>

<b>Sed</b> <i>ut</i> <s>perspiciatis</s> unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

</div>
</td></table>
</div></div></center>
<center><A href='http://wecode.jcink.net/index.php?showuser=24'>✿</a> <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=26160'>✿</a></center>

и тут мне стало лень уже даже коды вставлять.........
http://wecode.jcink.net/index.php?showtopic=1213
http://wecode.jcink.net/index.php?showtopic=1898
http://wecode.jcink.net/index.php?showtopic=1887
http://wecode.jcink.net/index.php?showtopic=1106
http://wecode.jcink.net/index.php?showtopic=1118
http://wecode.jcink.net/index.php?showtopic=547
http://wecode.jcink.net/index.php?showtopic=282

7

http://s4.uploads.ru/cQlZj.gif
http://s5.uploads.ru/nJxST.gif

8

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Pragati+Narrow:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Palanquin+Dark:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,600' rel='stylesheet' type='text/css'>
<style type="text/css"> 
.image {width:300px; padding:10px; background-color:#fff; border:#f3f3f3 1px solid;}
.image1 { width: 300px; height: 169px; align: center; background-image: url(300x169 image or gif here); }
.image2 {  opacity: 0; width: 300px; height: 169px; transition-duration: 2.5s;  -moztransition-duration: 2.5s;  -webkit-transition-duration: 2.5s;  -o-transition-duration: 2.5s;} 
.image2:hover {opacity: 1;} 

.melissa-credit {text-align:center; margin-top:3px;}
.melissa-credit a {font-family:roboto condensed !important; font-size:7px !important; text-transform:uppercase !important; color:#7f7f7f !important; letter-spacing:1px !important;}

img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }

#slide { width: 300px; height: 169px; position: relative; overflow: hidden; } 
#slide .sslide { width: 300px; height: 169px; top:-189px; position: absolute; transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out;}
#slide:hover .sslide {top:0px;}

.name { padding:20px; width:260px; background-color: rgba(0,0,0,0.5);}
.name1 {font-family:pragati narrow; font-size:30px; text-transform:lowercase; text-align:center; color:#ADD8C7; }
.name2 {font-family:raleway; font-size:7px; text-transform:uppercase; font-weight:600; letter-spacing:1px; color:#fff; letter-spacing:1px; margin-top:3px; text-align:center;}

.container1 {width:360px; padding:30px; background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/176/176757.png);}
.container2 {width:320px; padding:20px; background-color:#f7f7f7;}

.request-content1 {width:300px; padding:10px; background-color:#fff; border:#f3f3f3 1px solid; height:250px; overflow:auto; font-family:raleway; font-size:11px; text-align:justify; line-height:100%; color:#7f7f7f;}
.request-content1 b {color:#ADD8C7; font-size:13px; font-family:Palanquin dark; text-transform:lowercase;} 
.request-content1 i {color:#8CCCBE; font-size:13px; font-family:Palanquin dark; text-transform:lowercase;} 
.request-content1 b i {color:#7AC1C4; font-size:13px; font-family:Palanquin dark; text-transform:lowercase;} 
.request-content1::-webkit-scrollbar { background: #fff; width: 5px; }
.request-content1::-webkit-scrollbar-thumb { background: #70AFC4; width: 5px }
.request-content1::-webkit-scrollbar-corner { background: #fff; }
</style>


<center><div class='container1'><div class='container2'><div class='image'>
<div id='slide'><div class='image1'><div class='image2'> <img src=SAME IMAGE GOES HERE class=desaturate><div class='sslide'>
<div class='name'><div class='name1'>

first last

</div><div class='name2'>

short description of chracter

</div></div></div>
</div></div></div></div>

<div class='request-content1'>



<b>bold</b> // <i>italic</i> // <b><i>bold italic</i></b>




<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <b>dolore magna aliqua</b>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <i>dolore magna aliqua</i>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <b><i>dolore magna aliqua</i></b>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


</div>

</div>
</div>

<div class='melissa-credit'><A href='http://wecode.jcink.net/index.php?showuser=24'>✿</a> <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=26160'>✿</a></div></center>

9

Код:
<!--HTML-->

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>


<link rel="stylesheet" type="text/css" href="http://arabesque.b1.jcink.com/uploads/arabesque/jessshipper1.css">

<center><div class="shippertabs">

<div class="shippertab">
<input type="radio" id="shippertab-1" name="shippertab-group-1" checked>
<label for="shippertab-1">tracy</label>
<div class="shippercontent">
<img src="http://placehold.it/150x210/000/fff" align="left" style="margin-right: 6px; display: inline-block;"/>

<div class="boxes" style="position:relative; left: -130px; top:212px;"><div class="boxname">tracy<br>hope<br>macmillan</div></div> 
<div class="boxes1" style="position:relative; left: -130px; top:217px;"><div class="boxname2"">18 july 1979</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:222px;"><div class="boxname2">hogwart's [hufflepuff]</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:227px;"><div class="boxname2">imagine dragons – next to me</div></div>

<div class="shipperwords" id="jess">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>

<div class="shippertab">
<input type="radio" id="shippertab-2" name="shippertab-group-1">
<label for="shippertab-2" style="margin-top:30px;">miles</label>
<div class="shippercontent">
<img src="http://placehold.it/150x210/000/fff" align="left" style="margin-right: 6px; display: inline-block;"/>

<div class="boxes" style="position:relative; left: -130px; top:212px;"><div class="boxname">miles<br>joe<br>walsh</div></div> 
<div class="boxes1" style="position:relative; left: -130px; top:217px;"><div class="boxname2"">7 march 1979</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:222px;"><div class="boxname2">hogwart's [gryffindor]</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:227px;"><div class="boxname2">bastille – flaws</div></div>

<div class="shipperwords" id="jess">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>

<div class="shippertab">
<input type="radio" id="shippertab-3" name="shippertab-group-1">
<label for="shippertab-3" style="margin-top:60px;">ayleen</label>
<div class="shippercontent">
<img src="http://placehold.it/150x210/000/fff" align="left" style="margin-right: 6px; display: inline-block;"/>

<div class="boxes" style="position:relative; left: -130px; top:212px;"><div class="boxname">ayleen<br>clarissa<br>blackwood</div></div> 
<div class="boxes1" style="position:relative; left: -130px; top:217px;"><div class="boxname2"">2 may 1979</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:222px;"><div class="boxname2">hogwart's [slytherin]</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:227px;"><div class="boxname2">twenty one pilots – run and go</div></div>

<div class="shipperwords" id="jess">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>

<div class="shippertab">
<input type="radio" id="shippertab-4" name="shippertab-group-1">
<label for="shippertab-4" style="margin-top:90px;">theo</label>
<div class="shippercontent">
<img src="http://placehold.it/150x210/000/fff" align="left" style="margin-right: 6px; display: inline-block;"/>

<div class="boxes" style="position:relative; left: -130px; top:212px;"><div class="boxname">theodore<br>michael<br>graham</div></div> 
<div class="boxes1" style="position:relative; left: -130px; top:217px;"><div class="boxname2"">age</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:222px;"><div class="boxname2">hogwart's [hufflepuff]</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:227px;"><div class="boxname2">bear's den – elysium</div></div>

<div class="shipperwords" id="jess">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>


<div class="shippertab">
<input type="radio" id="shippertab-5" name="shippertab-group-1">
<label for="shippertab-5" style="margin-top:120px">michèle</label>
<div class="shippercontent">
<img src="http://placehold.it/150x210/000/fff" align="left" style="margin-right: 6px; display: inline-block;"/>

<div class="boxes" style="position:relative; left: -130px; top:212px;"><div class="boxname">michèle<br>alliot<br>laurent</div></div> 
<div class="boxes1" style="position:relative; left: -130px; top:217px;"><div class="boxname2"">16 october 1972</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:222px;"><div class="boxname2">beauxbatons</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:227px;"><div class="boxname2">-</div></div>

<div class="shipperwords" id="jess">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>

<div class="shippertab">
<input type="radio" id="shippertab-6" name="shippertab-group-1">
<label for="shippertab-6" style="margin-top:150px">character</label>
<div class="shippercontent">
<img src="http://placehold.it/150x210/000/fff" align="left" style="margin-right: 6px; display: inline-block;"/>

<div class="boxes" style="position:relative; left: -130px; top:212px;"><div class="boxname">first <br>middle <br>last</div></div> 
<div class="boxes1" style="position:relative; left: -130px; top:217px;"><div class="boxname2"">age</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:222px;"><div class="boxname2">member group</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:227px;"><div class="boxname2">extra</div></div>

<div class="shipperwords" id="jess">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>

<div class="shippertab">
<input type="radio" id="shippertab-7" name="shippertab-group-1">
<label for="shippertab-7" style="margin-top:180px">character</label>
<div class="shippercontent">
<img src="http://placehold.it/150x210/000/fff" align="left" style="margin-right: 6px; display: inline-block;"/>

<div class="boxes" style="position:relative; left: -130px; top:212px;"><div class="boxname">first <br>middle <br>last</div></div> 
<div class="boxes1" style="position:relative; left: -130px; top:217px;"><div class="boxname2"">age</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:222px;"><div class="boxname2">member group</div></div>
<div class="boxes1" style="position:relative; left: -130px; top:227px;"><div class="boxname2">extra</div></div>

<div class="shipperwords" id="jess">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>


</div>
<div style="width:500px; text-align:right; font-family:arial; font-size:7px; color:#A8DBA8; text-transform:uppercase;"><a href="http://wecode.jcink.net/index.php?showuser=107">TY</a></div><p>
</center> 

10

Код:
/*************************************************************
A - SETUP
**************************************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
  @import url(style_cs.css);
@import url(https://forumstatic.ru/files/0011/e0/60/93962.css);

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

/* A2.1 */
html, body {margin: 0; padding: 0}

/* A2.2 */
.punbb * {
  margin: 0
  }

/* A2.3 */
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {
  list-style: none;
  }

/* A2.4 */
.punbb img {
  border:none
  }

/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  width: 100%;
  }

/* A2.6 */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}

/* A2.7 */
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle
  }


 /* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */
body {
  font-size: 100.01%;
  }

/* A3.2 */
.punbb {
  font: normal 68.75% verdana, arial, helvetica, sans-serif;
  }

/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif
  }

/* A3.4 */
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th {
  font-weight: normal;
  font-size: 11px;
  }

/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
  font-size: 11px;
  }

/* A3.6 */
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* A3.7 */
.punbb address, .punbb em {
  font-style: normal
  }

/* A3.8 */
.punbb .post-content em {
  font-style: italic
  }

/* A3.9 */
.punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
  }

/* A3.10 */
.punbb a {
  text-decoration: underline
  }

/* A3.11 */
.punbb optgroup {
  font-weight: bold;
  }


/* A4 Float clearing and hidden items
-------------------------------------------------------------*/

/* A4.1 */
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow:hidden;
  line-height: 0.0;
  font-size: 0;
  }

/* A4.2 */
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden;
  }


/* A5 Basic page layout and borders
-------------------------------------------------------------*/

/* A5.1 */
#pun {
  margin: auto;
  width: 950px;
  float: top center;
  padding: 0px 0px 0px 0px;}

/* A5.2 */
.punbb {
  margin-left: 10px;
  float: none;
  width: 868px;
  height: auto;
  }

/* A5.3 */
#pun-redirect, #pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
  }

/* A5.4 */
.punbb .section, .punbb .main {
  margin-bottom: 1em;
  }

/* A5.5 */
.punbb .category, .punbb .post {
  margin-top: 0.4em;
  }

/* A5.6 */
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {
  margin-top: 0;
  }

/* 5.7 */
#pun-post .topic {
  margin-top: 1em;
  }

/* A5.8 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-style: none none none none;
  border-width: 0px 0px 0px 0px;
  }

/* A5.9 */
.punbb .container {
  border-style: none;
  border-width: 20px;
  }

/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
  padding: 0.6em 0em 0.6em 0em;
  border-style: none none none none;
  border-width: 0 0px 0px 0;
  }


/*************************************************************
B - MAIN CONTENT - GENERAL
**************************************************************/

/* B1 Parsed Content, Signatures and Scroll Boxes
-------------------------------------------------------------*/

/* B1.1 */
.punbb .post-content {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
  text-align: justify;
  }

/* B1.2*/
.punbb .post-sig dt {
  display: block;
  width: 100%;
  margin: 20px;
  }

/* B1.3 */
.punbb .post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 150%;
  }

/* B1.4 */
.punbb .post-content img {
  vertical-align: text-bottom
  }

/* B1.5 */
.punbb .post-content img.postimg {
  vertical-align: middle;
  }

/* B1.6 */
.punbb .post-content .blockcode, .punbb .post-content blockquote {
  width: 100%;
  overflow: hidden;
  }

/* B1.7 */
.punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;
  }

/* B1.8 */
.punbb .post-content .quote-box, .punbb .post-content .code-box {
  margin: 0.4em 1.8em 1.4em 1.8em;
  padding: 1em;
  }

/* B1.9 */
.punbb .quote-box cite, .punbb .code-box strong.legend {
  display: block;
  padding-bottom: 0.7em;
  font-size: 1.1em;
  font-weight: bold;
  font-style: normal;
  margin: 0;}


/* B2 Information boxes
-------------------------------------------------------------*/

/* B2.1 */
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: solid;
  border-width: 1px;
  margin: 0 0 1.1em 0;
  }

/* B2.2 */
.punbb .info-box * {
  padding: 0 0 0.7em 0;
  }

/* B2.3 */
.punbb #pun-main .info-box .legend {
  font-weight: bold;
  }


/* B3 Pagination and posting links
-------------------------------------------------------------*/

/* B3.1 */
.punbb .linkst {
  float: left;
  position: relative;
  width: 100%;
  font-size: 1.1em;
  height: 0;
  }

/* B3.2 */
.multipage {
  margin-top: 3em;
  }

/* B3.3 */
.linkst .pagelink {
  position: absolute;
  top: -4em;
  left: 1em;
  width: 24em;
  }

/* B3.4 */
.linkst .postlink {
  position: absolute;
  top: -4em;
  right: 1em;
  width: 16em;
  text-align: right;
  font-weight: bold;
  }

/* B3.5 */
.punbb .linksb {
  text-align: right;
  padding: 0.4em 1em 0.5em 1em;
  font-size: 11px;
  }

/* B3.6 */
.linksb .pagelink {
  float: left;
  width: 24em;
  text-align: left;
  font-size: 11px;
  }

/* B3.7 */
.linksb .postlink {
  float: right;
  width: 16em;
  font-weight: bold
  }

/* B3.8 */
.subscribelink {
  clear:both;
  padding-top: 0.3em;
  padding-bottom: 0.5em;
  }

/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/

/* C1 Form layout
-------------------------------------------------------------*/

/* C1.1 */
.punbb .formal .container {
  background-color: #b1977e;
  background-image: url("http://funkyimg.com/i/2EQBs.png"); 
  color: #130c06;
  padding: 1.5em 2.0em 1.5em 2.0em;
  font-size: 14px;
  }

/* C1.2 */
.punbb .formsubmit {
  padding: 0 0 0 1.7em;
  margin: -1.7em 0 0 0;
  font-size: 11px;
  }

/* C1.3 */
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {
  margin: 0 0.6em 0 0;
  font-size: 11px;
  }

/* C1.4 */
.punbb fieldset {
  border-style: solid;
  border-width: 1px;
  padding: 0 18px 0 18px;
  margin: 0 0 1em 0;
  font-size: 11px;
  }

/* C1.5 */
.punbb fieldset legend {
  padding: 0;
  margin: 0 0 0 11px;
  font-size: 11px;
  }

/* C1.6 */
.punbb fieldset legend span {
  padding: 0 5px;
  margin: 0 0 0 -15px;
  font-size: 11px;
  }

/* C1.7 */
.punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px 0;
  font-size: 11px;
  }

/* C1.8 */
.punbb .fs-box {
  padding: 1em 0 0.8em 0;
  font-size: 11px;
  }

/* C1.9 */
.punbb .fs-box p, .punbb .fs-box fieldset {
  padding: 0 0 0.8em 0;
  font-size: 11px;
  }

/* C1.10 */
.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield {
  float: left;
  margin-right: 1em;
  font-size: 11px;
  }

/* C1.11 */
.punbb .inline .infofield {
  clear:both
  }

/* C1.12 */
.punbb .datafield br {
  display: none
  }

/* C1.13 */
.punbb .required label, .punbb .datafield span.input {
  font-weight: bold
  font-size: 11px;
  }

/* C1.14 */
.punbb .datafield span.input a {
  font-weight: normal;
  font-size: 11px;
  }

/* C1.15 */
.punbb .areafield span.input, .punbb p.longinput span.input {
  display: block;
  padding: 0 12em 0 0;
  height: 100%; /* For IE */
  }

/* C1.16 */
.punbb textarea, .punbb .longinput input {
  width: 64%;
  margin: 0;
  font-size: 11px;
  }

/* C1.17 */
.punbb .hashelp {
  position: relative;
  }

/* C1.18 */
.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;
  width: 36%;
  font-size: 11px;
  }

/* c1.19 */
.punbb #profile .helplinks {
  top: 1.5em;
  font-size: 11px;
  }

/* C1.20 */
.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
  font-size: 11px;
  }

/* C1.21 */
#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  font-size: 11px;
  margin: 0;
  }


/* C2 Table layout
-------------------------------------------------------------*/

/* C2.1 */
.punbb .main .tcl {
  overflow: hidden;
  text-align: left;
  width: 50%;
  font-size: 11px;
  }

/* C2.2 */
.category .container thead {display: none;}
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
  background-color: transparent;
  text-align: center;
  width: 10%;
  font-size: 11px;
  }

/* C2.3 */
.punbb .main .tcr {
  background-color: transparent;
  overflow: hidden;
  text-align: center;
  width: 30%;
  font-size: 11px;
  }

/* C2.4 */
#pun-userlist .main .tcl,
#pun-searchtopics .main .tcl,
#pun-modviewforum .main .tcl {
background-color: transparent;
  width: 40%
  }

/* C2.5 */
#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 {
background-color: transparent;
  text-align: center;
  font-size: 11px;
  width: 20%;
  }

/* C2.6 */
#pun-debug table .tcl {
background-color: transparent;
  width: 15%;
  white-space:normal;
  }

/* C2.7 */
#pun-debug .tcr {
background-color: transparent;
  width: 90%;
  white-space: normal;
  }

/* C2.8 названия подфорумов*/ 
#pun-index .tcl h3 {
  font-size: 1.6em;
  font-weight: bold;
  font-family: Arial;
  text-align: center;
  text-transform: lowercase;
 text-shadow: 1px 1px 1px rgba(216,188,158,7);
  }

/* C2.9 */
.punbb td span.youposted {
  font-weight: bold;
  margin-left: -1em;
  position: absolute;
  }

/* C2.10 */
.punbb td .modlist {
  display: block;
  padding-top: 0.3em
  }

/* C2.11 */
.punbb .main td {
  border-style: solid none none solid;
  border-width: 1px 0 0 1px;
  padding: 0.8em 1em;
  }

/* C2.12 */
.punbb .main th {
  border-style: none none none solid;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em 0.4em 1em;
  }

/* C2.13 */
.punbb .main .tcl {
      border-left-style: none;
      border-left-width: 0
      }

    * html .tclcon {height: 1px}

/* C2.14 */
#pun-index td div.tclcon {
   border: 3px double rgba(94,74,57,7);
   width: 300px;
   padding: 10px;
   font-size: 10px;
   line-height: 11px;
   color: #130c06;
   font: 11px arial;
   text-align: center;
   background-image : url("http://funkyimg.com/i/2An7e.png");
}
  
/* C2.15 */
.punbb div.icon {
  float: right;
  display: block;
  height: 65px;
width: 65px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
  

 /* C3 Topics

-------------------------------------------------------------*/
#pun-title, #pun-navlinks {
  border-color: #202021;
}

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3 {
  border-color: transparent;
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
    border-style: transparent;
    border-width: 0;
  }

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: transparent;
  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: transparent;
  }

/* CS2.5 */
.punbb th {
  border-color: transparent;
  }

/* CS2.6 */

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: transparent;
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: transparent;
  }

.punbb .divider {
  border-color: transparent;
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid transparent;
  font-size: 11px;
  }

li.pa-online {
  border-left-color: transparent;
  margin-bottom: 10px;
  }

/* C3.1 */
.punbb .post .container {
  border-style: none solid solid solid;
  border-width: 1px;
  margin-top: -1px;
  padding-bottom: 1px;
  }

/* C3.2 */
.punbb .post h3 {
  border-style: solid solid none solid;
  border-width: 1px;

  }

/* C3.3 */
.punbb .post h3 span {
  padding: 0.5em 1em;
  display: block;
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px
  }

/* C3.4 */
.punbb .post h3 strong {
  float: right;
  width: 5em;
  text-align: center;
  font-weight: normal;
  }

/* C3.5 */
.punbb .post .post-author {
  float: left;
  width: 217px;
  margin-top: -1.5em;
   overflow: hidden;
    }


/* C3.6 */
.punbb .post .post-author ul, .punbb .post .post-author p {
  padding: 0em 0em 0em 0em;
  line-height: 100%;
  }

/* C3.7 */
.pa-author {
  font-size: 14px;
  font-weight: bold;
  margin-top: -5px;
  padding: 3px;
   }

/* C3.8 */
.pa-author a {
  text-decoration: none;
  text-transform: normal;
  font-family: Bebas Neue;
  font-weight: normal;
  letter-spacing: 2px;
  text-shadow: 1px 1px 1px rgba(216,188,158,7);
  }

/* C3.9 */
li.pa-title {
  padding-bottom: 0.4em;
  font-weight: normal;
  font-family: arial; 
  font-size: 9px; 
  letter-spacing: 1px;
  line-height: 8px;
  }


li.pa-online {
  line-height: 0.8em;
  border-left-style: solid;
  border-left-width: 0.7em;
  padding-left: 0.4em;
  margin-top: 0.7em;
  }

/* C3.11 */
.punbb .post-body {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
  padding: 0 0 1px 0;
  }

/* C3.12 */
.punbb .post-box {
  padding: 1em;
  }

/*C3.13 */
.punbb fieldset .post-box {
  margin-bottom: 0.8em
  }

/* C3.14 */
.punbb .post-links {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
  }

/* C3.15 */
.punbb .post-links ul {
  padding: 0 1em 0 0;
  height: 2em;
  line-height: 2em;
  margin-left: -19em;
  border-top-style: dashed;
  border-top-width: 1px;
  background: transparent;
  text-align: right;
  }

/* C3.16 */
.punbb .post-links li {
  display: inline;
  padding-left: 1em;
  }

/* C3.17 */
.pl-email, .pl-website {
  float: left;
  }

/* C3.18 */
.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
  }


/* C4 Moderator menu
-------------------------------------------------------------*/

/* C4.1 */
.punbb .modmenu .container {
  padding: 0.5em 1em;
  text-align: right;
  }

/* C4.2 */
.punbb .modmenu strong, .punbb .modmenu a {
  height: 1.8em;
  line-height: 1.8em;
  }

/* C4.3 */
.punbb .modmenu .container strong {
  float: left;
  }

/* C4.4 */
.punbb .modmenu input {
  margin-left: 1em;
  }


/* C5 Message boxes
-------------------------------------------------------------*/

/* C5.1 */
.punbb .info .container {
  padding: 0.8em 1em
  font-size: 11px;
  }

/* C5.2 */
.punbb .info .container .backlink {
  padding-top: 0.8em;
  font-size: 11px;
  }


/* C6 Profile
-------------------------------------------------------------*/

/* C6.1 */
#profile .container {
  padding-left: 18.6em;
  }

/* C6.2 */
#profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;
  font-size: 11px;
  }

/* C6.3 */
#profilenav li {
  padding-bottom: 0.8em;
  font-weight: bold;
  font-size: 11px;
  }

/* C6.4 */
#viewprofile ul, #profilenav ul {
  border-style: solid;
  border-width: 1px;
  padding: 1.5em 18px 0.8em 18px;
  margin: 0 0 1em 0;
  font-size: 11px;
  }

/* C6.5 */
#viewprofile h2, #profilenav h2 {
  background: transparent;
  font-size: 11px;
  border: none;
  padding: 0 0 0 0;
  margin: 0 14px -0.6em 14px;
  }

/* C6.6 */
#viewprofile h2 span, #profilenav h2 span {
  padding: 0 5px;
  position: relative;
  font-size: 11px;
  }

/* C6.7 */
#viewprofile li, #setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em;
  }

/* C6.8 */
#viewprofile li span {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.5em 1em;
  font-weight: bold;
  font-size: 11px;
  }

/*C6.9 */
#setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: bold;
  display: inline;
  font-size: 11px;
  }

/* C6.10 */
#viewprofile li strong, #viewprofile li div, #setmods dd {
  display: block;
  padding: 0.5em 1em;
  font-weight: normal;
  font-size: 11px;
  }

/* C6.11 */
.punbb img.avatardemo {
  float: right;
  margin: 0 0 0.8em 1.8em
  }


/* C7 User list
-------------------------------------------------------------*/

/* C7.1 */
#pun-userlist .formal, #pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* C7.2 */
#pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em 2.3em;
  border-top: none;
  }

/* C7.3 */
#pun-userlist .usertable table {
  border-style: solid;
  border-width: 1px;
  }


/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/

/* D1 Logo and description
-------------------------------------------------------------*/

/* D1.1 */
#pun-title {
  margin: 0;
  border-style: none none none none;
  border-width: 0px 0px 0 0px;}

/* D1.2 */
#pun-title h1 {
  display : block;}

/* D1.3 */
#pun-title .container {
  border-style: none none none none;}


/* D1.4 */
#pun-title h1 span  {
  display: none;}

#pun-title h1 span  {
  font-size: 1.5em;}


/* D2 Page navigation
-------------------------------------------------------------*/

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  top: 55px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;
  }

/* D2.2 */
#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0}

/* D2.3 */
#pun-pagelinks .container li {
  display: inline}

/* D2.4 */
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float:left;
  width: 100%;}

/* D2.5 */
#pun-pagelinks a:active, #pun-pagelinks a:focus {
  position:relative;
  margin: 0;}

#pun-pagelinks li a span {
  display:block;
  margin: 0 1em}



/* D3 Forum navigation
-------------------------------------------------------------*/

/* D3.1 */
#pun-navlinks, #pun-navlinks .container {
  text-align: center;  
margin-left: 0px;
margin-top: -129px; 
letter-spacing: 0px;
font-family: Times New Roman;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(216,188,158,7);
}

/* D3.2 */
#pun-navlinks .container {
  padding: 0.2em 1em;
  padding-top: 0px;}

/* D.3 */
#pun-navlinks li {
  display: inline;
  padding-right: 1em;
  }


/* D4 User links
-------------------------------------------------------------*/

/* D4.1 */
#pun-ulinks  {
  margin-left: -21px;
  margin-top: 50px;
  font-family: Times New Roman;
  letter-spacing: 2px;
  }

/* D4.2 */
#pun-ulinks .container {
  text-align: center;
    margin-top: 0px;
  }

/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
  display: inline;
  border-left-style: solid;
  border-left-width: 1px;
  white-space: nowrap;
  }

/* D4.4 */
#pun-ulinks li a {
  padding: 0 0.3em 0 0.6em
  }

/* D4.5 */
#pun-ulinks li.item1, #pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0;
  }

/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/

/* D5.1 */
#pun-status, #pun-status .container {
  border-bottom: none;
  color: #17131;
  margin-bottom: 0;
  margin-top: 0px;
  }

/* D5.2 */
#pun-status .container {
  color: #371e05;
  padding: -0.3 em 1em 1em 1em;
  text-align: center;
  }

/* D5.3 */
#pun-status span {
  color: #17131;
  white-space: nowrap;
  margin-right: 0.5em;
  }

/* D5.4 */
#pun-crumbs1 {
  color: #17131;
  font-weight: bold;
  overflow: hidden;
  margin-top: 0;
  }

/* D5.5 */
#pun-crumbs1 p.container {
  font-family: Arial;
  font-weight: bold;
  border-top: none;
  font-size: 1.1em;
  text-align: center;
  padding: 1.4em 0em 0em 0em;
  }

/* D5.6 */
#pun-break1 {
  font-family: Arial;
 font-weight: bold;
  margin: 0 1em;
  border-style: solid none;
  border-width: 1px 0;
  height: 0;
  margin: -2px 1em;
  position: relative;
  z-index: 1;
  }

/* D6 Announcement
-------------------------------------------------------------*/

/* D6.1 */
#pun-announcement h2 {
  padding: 0;
  margin: 0 1em -3.5em 1em;
  border-style: none none solid none;
  border-width: 0 0 1px 0;
  position: relative;
  font-weight: normal;
  }

/* D6.2 */
#pun-announcement h2 span {
  display: block;
  padding: 1em 0 0.8em 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  }

/* D6.3 */
#pun-announcement .container {
  padding: 2.5em 1em 1em 1em;
  margin-top: -23px; 
  line-height: 1.1
  }


/* D7 Statistics
-------------------------------------------------------------*/

/* D7.1 */
#pun-stats .container {
  padding: 0.8em 1em
  }

/* D7.2 */
#pun-stats li.item1, #pun-stats li.item2 {
  float: left;
  clear: both;
  line-height: 150%;
  }

/* D7.3 */
#pun-stats li.item3, #pun-stats li.item4 {
  text-align: right;
  line-height: 150%;
  }

/* D7.4 */
li#onlinelist {
  margin-top: 1em;
  border-top-style: solid;
  border-top-width: 1px;
  float: left;
  width: 100%;
  line-height: 130%;
  }

/* D7.5 */
li#onlinelist div {
  border-top-style: solid;
  border-top-width: 1px;
  padding: 0.7em 0 0 0;
  }

/* D8 Quick Jump - About - Bottom Breadcrumbs
-------------------------------------------------------------*/

/* D8.1 */
#pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left;
  }

/* D8.2 */
#pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em;
  }

/* D8.3 */
#pun-about {
  margin-top: 0;
  margin-bottom: 0;
  }

/* D8.4 */
#pun-about .container {
  border-top-style: none;
  text-align: center;
  line-height: 150%;}

/* D8.5 */
#pun-about p span {
  display:block;
  padding-left: 50%;
  }

/* D8.6 */
#pun-crumbs2 {
  font-weight: bold;
  overflow: hidden;
  margin-bottom: 0;
  border-bottom: none;
  }

/* D8.7 */
#pun-crumbs2 .container {
  display: none;
  font-family: Arial;
  border-bottom: none;
  padding: 0.8em 1em;
  font-size: 1.1em;
  }

/* D8.8 */
#pun-break4 {
  margin: -2px 1em;
  border-style:  none;
  border-width: 0px 0;
  position: relative;
  height: 0;
  z-index: 1;
  }



/* D9 Help file
-------------------------------------------------------------*/

/* D9.1 */
#pun-help .formal .info-box h3.legend {
  border-bottom-style: none;
  border-bottom-width: 0px;
  padding-bottom: 0;
  margin-bottom: 0.8em;
  }

/* D9.2 */

#pun-help .formal .info-box h3.legend span {
  padding-bottom: 0.6em;
  display: block;
  border-bottom-style: none;
  border-bottom-width: 0px;
  font-size: 1.1em;
  }

/* D9.3 */
#pun-help .formal p, #pun-help .formal dd {
  margin-bottom: 1em
  }

/* D9.4 */
#pun-help .formal ul, #pun-help .formal dl {
  padding: 0 0 0 1em
  }

/* D9.5 */
#pun-help .formal li {
  padding: 0;
  line-height: 130%
  }

/* D9.6 */
#pun-help .formal li * {
  vertical-align: text-top
  }

/* D9.7 */
#pun-help .formal dt span {
  font: 1.4em/120% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* D9.8 */
#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode {
  padding-bottom: 0;
  }

11

коды для результатов экзаменов для англии
Код:
[spoiler="[size=14][font=PlayFair Display][u][align=center][b]Результаты Ж.А.Б.А.[/b][/align][/u][/font][/size]"][u][i][b][size=18][font=Playfair Display]Базовые предметы:[/font][/size][/b][/i][/u]

[size=12][i][font=Playfair Display]Трансфигурация[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Астрономия[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Заклинания[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Защита от Тёмных искусств[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Травология[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]История магии[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Зельеварение[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Полеты на метле[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[u][i][b][size=18][font=Playfair Display]Дополнительные предметы:[/font][/size][/b][/i][/u]

[size=12][i][font=Playfair Display]Алхимия[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Нумерология[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Уход за магическими существами[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Прорицания[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Маггловедение[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Изучение Древних рун[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i][/spoiler]
коды для результатов экзаменов для америки
Код:
[spoiler="[size=14][font=PlayFair Display][u][align=center][b]Результаты Ж.А.Б.А.[/b][/align][/u][/font][/size]"][u][i][b][size=18][font=Playfair Display]Базовые предметы:[/font][/size][/b][/i][/u]

[size=12][i][font=Playfair Display]Трансфигурация[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Астрономия[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Заклинания[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Защита от Тёмных искусств[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Травология[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]История магии[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Зельеварение[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Полеты на метле[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[u][i][b][size=18][font=Playfair Display]Дополнительные предметы:[/font][/size][/b][/i][/u]

[size=12][i][font=Playfair Display]Алхимия[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Нумерология[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Уход за магическими существами[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Прорицания[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Изучение Древних рун[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Вуду[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Зачарование живописи и портретов[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Изготовление и зачарование магических предметов[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Магическое законодательство[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Магическая кулинария[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Не-магическая современная культура[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Не-магические технологии[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Ритуальная практика[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Целительство[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Шаманизм[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Драконология[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]
[/spoiler]
коды для шармбатона
Код:
[spoiler="[size=14][font=PlayFair Display][u][align=center][b]Результаты Ж.А.Б.А.[/b][/align][/u][/font][/size]"][u][i][b][size=18][font=Playfair Display]Базовые предметы:[/font][/size][/b][/i][/u]

[size=12][i][font=Playfair Display]Основы этикета[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Бальные танцы[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Магический транспорт: история, теория, практика[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]История магии[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Прорицание[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Основы целительства[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Защита от тёмных искусств[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Зельеварение[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Основы этикета и дипломатии[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Заклинания[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Трансфигурация[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Знакомство с магическими существами[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Знакомство с магическими растениями[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Введение в музыку и изобразительное икусство[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Магловедение[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Уход за магическими существами[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Введение в историю магии[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Введение в историю магии[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Введение в магическое искусствоведение[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[u][i][b][size=18][font=Playfair Display]Дополнительные предметы:[/font][/size][/b][/i][/u]

[size=12][i][font=Playfair Display]Боевая магия[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Защита от тёмных искусств[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Уход за магическими существами[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Прорицания[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Целительство[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Травология[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Магические животные в практическом применении[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Уход за магическими растениями[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]История магии[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Магическое искусствоведение[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Артефактология[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Рунология[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i]

[size=12][i][font=Playfair Display]Легилименция и окклюменция[/font][/i][/size] [i][b][size=12][font=Playfair Display]П[/font][/size][/b][/i][/spoiler]

12

[nick]Peter M. Andreson[/nick][icon]https://funkyimg.com/i/2Xxfa.png[/icon]Питер Майло Андерсон // Peter Milo Anderson
певец, поэт, социальный активист;
https://funkyimg.com/i/2XsGR.gif https://funkyimg.com/i/2XsGQ.gif
landon leboiron

ОБЩАЯ ИНФОРМАЦИЯ
— Сын магглорождённой волшебницы и волшебника. Дебора, несмотря на законченное магическое образование в Хогвартсе, посвятила себя преподаванию в обычной маггловской школе танцев. Артур же пошел по противоположному пути, став ликвидатором заклятий. Оба родителя учились на Хаффлпаффе, но сошлись уже после окончания школы.
— Питер родился 3 июня 2006 года. Не сказать, что появление ребёнка в семье Андерсонов было неожиданным, но в планах Питера не наблюдалось ещё, как минимум, пару лет. Увы, спрашивать никто не стал. К счастью, жалоб от родителей тоже не поступало.
— Поначалу, он ничем не отличался от обычного среднестатистического младенца. Здоровый вес, хороший аппетит, миловидное щекастое лицо, вынуждавшее каждого, кто проходил мимо, растягивать последнее в гармошку и припадочно сюсюкать. Хорошо, что Питер не помнит, хотя к своим щекам относится ревностно – хочешь потрогать, потрогай свои, ничем не хуже.
Но это только поначалу. Проблемы начались, когда возраст мальчишки едва перевалил за год. Сначала он хватал все болячки. Затем хватал их, выдавая худшие из осложнений. А в один день уже вовсю бегающий по дому Питер принялся звать Дебору в слезах: он упал, потому что больше не чувствовал своих ног. Не первый и далеко не последний раз.
— Все детские воспоминания Питера разделены на две категории: очередной поход в больницу, – и не важно волшебную или нет, – и Шарлотт Эстер Уолш. Не подумайте, он прекрасно помнит всех, кто существовал на его улице, но судьба (или сама Чарли) распорядилась доставать соседского ребёнка так скоро, как только научилась ходить и складывать слова в понятные (насколько это возможно для Чарли) фразы.
— Она была его лучшим другом в самом глубоком смысле, на который только способен ребёнок. Фионна, Алексис, сестра-близнец Чарли, Тео – все они были добры и приветливы с Питером, но лишь одна Шарлотт прибегала, если он не выходил на улицу больше дня, делилась своими интересами, мечтами и иногда выслушивала его собственные. Она была бесстрашной, заметной, несмотря на младший возраст девочка не стеснялась размахивать кулаками на тех, с кем была не согласна. В ней было всё, чего так не хватало тихому и осторожному Питеру, и, разумеется, он к ней тянулся.
— Всё изменилось, когда Питеру исполнилось шесть. Казалось, бесконечная череда колдомедиков, сменявшихся неврологами, сменявшихся колдомедиками, и так по спирали вниз, внезапно достигла финальной точки. У него был диагноз. Ужасный, пугающий диагноз, но всё же лучше, чем куча вопросов без ответов. Помощи, необходимой Питеру, в Англии не было, и родители мальчишки были вынуждены бросить всё, чтобы переехать в Калифорнию – поближе к госпиталю, в котором знали, что с их сыном. А Питеру, в свою очередь, пришлось распрощаться со всем, к чему он привязался.
— Он делал всё возможное, чтобы не терять связи с друзьями из Бостона, но довольствоваться одними письмами, шедшими непомерно долго, было тяжело, и Питеру приходилось общаться с детьми из дневной больницы, какими бы скучными последние ни были. Свет к конце тоннеля появился, когда мальчик слёг в больницу на постоянную основу. Эван Маккензи не имел ничего общего с до сих пор попадавшимися ему детьми. Он был самодостаточный, читал книжки тогда, когда большинство кидались друг в друга конструктором, и излучал знакомую ауру бесстрашия и самобытности, которой всё ещё не хватало Питеру. И он попытал свой шанс на дружбу, только чтобы получить смачной коровьей какашкой в лицо. Впрочем, вымыл коровий навоз тот же, кто его и оставил – не прошло и нескольких месяцев. Питер часто напоминает Маккензи об этой ситуации, когда ему надо сказать либо, что Эван слеп, либо, что он настолько неотразим, что даже слепой Эван узрел.
— Несмотря на взлёты и падения, дружба с Маккензи, как и дружба с Шарлотт Уолш, была константой в жизни Питера. Он всегда смотрел на Эвана с восхищением, считал его самым умным и талантливым человеком, которого ему доводилось знать, и больше всего на свете боялся потерять их дружбу. Потому что себя ни умным, ни талантливым, ни интересным Питер никогда не считал. И там, где может показаться, что он отталкивал Маккензи от завышенного эго, Питер просто-напросто «бросал себя» прежде, чем это сделает Эван. В приступах ненужности он даже принимался критиковать Маккензи, когда на деле прекрасно понимал, что просто бьёт по больным точкам человека, которого знает как облупленного. Почему? Питер всегда вёл себя по принципу, если мне больно, то тебе тоже должно стать больно.
— Свою влюблённость в Шарлотт он осознал в раннем возрасте и, не имея возможность разрешить этот конфликт в себе, пронёс это сквозь долгие годы. Впрочем, после всех мучений и драм на ровном месте, когда девушка не ответила ему взаимностью, Питеру стало скорее легче, чем хуже. Спустя выздоровление и несколько месяцев самокопания, он смог взглянуть на свои чувства трезво и понял, что был скорее влюблён в «идею» Шарлотт, чем в саму Шарлотт. Настоящая Чарли порой зазнавалась, грубила не к месту и часто не замечала людей, вокруг себя, и именно такую Чарли он любил по-настоящему. Он просто не был в неё влюблён, и в этом не было никакой трагедии, как он воображал себе раньше.
— Кроме Шарлотт, искреннее чувство в нём смогла вызвать только одна девочка. Танья была обскурусом и лежала в том же отделении, что и он с Эваном. Она была жизнерадостной, светлой и невероятной выдумщицей, нередко становясь причиной их общих наказаний. К тому же, когда Эван стал всё чаще пропадать в школе, постепенно выздоравливая, она была единственной компанией Питера. К сожалению, признаться ей до трагичной гибели девушки Питер не успел. Он до сих пор носит подаренный Таньей плетёный браслет из ракушек, собранный на береге у их госпиталя.
— В остальном, Питер не имел длительных отношений с девушками. Порой он нравился медсестрам, порой падким на «страдающих» парней дамочкам из окружения Эвана, но кого-то действительно стоящего среди них парень так и не нашёл.
— Одним из самых травматичных событий, помимо смерти Таньи, стала смерть отца после тринадцатого дня рождения Питера, на которое он не попал. Мужчина много работал и поэтому был вынужден много путешествовать. К сожалению, одно такое путешествие закончилось вышедшим из под контроля заклинанием и несчастным случаем. Несмотря на то, что папа мальчишки редко присутствовал в его жизни, от этого Питер дорожил им только сильней. Он любил слушать его рассказы, – благодаря нему кругозор Питера мог потягаться с кругозором Маккензи, – ценил их редкие совместные занятия, а отцовских советов волшебник придерживается до сих пор.
— Образование Питера проходило заочно. Все теоретические предметы юноша сдал в одно время с Эваном. Практику Питер сдал многим позднее, когда «выздоровел». Сдавал он её в Хогвартсе летом 2030 года. В списке выпускников числится за факультетом Слизерин.
— Сколько себя помнит, Питер всегда тянулся к перу и бумаге, когда ему было необходимо выплеснуть свои переживания. За столько лет накопил внушительное количество стихов и песен, но редко (если не никогда) делился ими с окружающими. В сравнении с Эваном, его голос не мог охватить столько нот, и долгое время он стеснялся пробовать, боясь показаться смешным на фоне талантливого друга. С возрастом пережил бестолковый комплекс и открыл в себе выдрессированный скороговорками талант к быстрой читке.
— Связать себя с музыкой Питер решил не сразу. Отправившись в годовое путешествие на поиски себя, он поначалу верил, что станет колдомедиком, но все чаще и чаще наблюдения ложились рифмой на бумагу и Андерсон рискнул.
— За год побывал в глубоких африканских племенах, тибетских монастырях, в штормах и лесных пожарах – он накопил достаточно опыта, чтобы с уверенностью решить, чего хочет, а чего не хочет. Жить на другом конце света от Эвана Маккензи он не хотел больше всего.
— Самым неожиданным открытием Питера была... сестра-близнец Чарли, у которой появилось имя только после Барбадоса. Он всегда «видел» Джозефину, но лишь на острове осознал, что помешанная на внешности, одежде и красивом парне Джо была куда добрей, открытей и приземлённей, чем могло показаться. В отличие от своей старшей сестры, она умела слушать, сидеть на месте и существовать в чуть более замедленном мире. Вероятно, ее родственники бы махнули рукой, но уверенная в себе Джо оказалась со звездой во лбу только на словах. И это не делало её хуже. Наоборот. Увидеть человека, вместо намалёванной куклы было куда приятней. Найти общие интересы, взгляды на жизнь и цели было вдвойне приятней.
— Стоит ли говорить, что Питер рванул на другой конец света, когда понял, что вторая близнец принялась вызывать короткое замыкание в груди, когда ее никто не просил? Он был в ужасе, и не сказать, что пугало его больше: реакция людей вокруг или реакция Джо на новость года. Он прекрасно понимал, что Джозефина не имела ничего, ни-че-го общего, кроме лица, со своей сестрой, и всё же паниковал, что кто-нибудь разглядит в его чувстве именно это, и поэтому не стал ничего говорить, решив, что отпустит.
— Спойлер: не отпустило, и спустя сто и одно тупое решение, Питер сделал одно не тупое и обрёк себя на счастливую жизнь.
— Создаёт впечатление крайне вежливого, тактичного и чуткого человека, что, в принципе, так и есть. Питер заботливый, любит тратить своё время на людей и, возможно, из-за необходимости быть полезным миру и близким рвётся поддерживать волшебные меньшинства и говорить о магических проблемах публично и громко. Он из тех людей, которые остаются в тени больших компаний, но если прислушаться – им всегда найдётся что сказать. Он начитанный, у него широкий кругозор и мало предрассудков. Он верный друг и человек привязанностей. Пожалуй, узнать его с первого раза – очень тяжело. Питер редко делится своими проблемами, кроме очевидных, и предпочитает слушать чужие. Практически никогда не говорил о своей болезни в прошлом. Единственные, кто, действительно, слышали насколько сильно его недуг влиял на Питера, были Эван и мать волшебника. А для остальных, если Эван обращал проблемы в шутку, то у Питера всё просто «хорошо». Острый на язык и, в принципе, часто обращается к сарказму в разговоре. Любит «играть» с людьми в диалогах, вводить в заблуждение и незаметно тыкать людей в их же какашки. Эмоционален и экспрессивен. Склонен надумывать больше, чем есть, и анализировать там, где уже нечего анализировать. «Громко» обижается, но способен признавать свои ошибки и идти на перемирие первым, даже если обидели его. Предпочитает принимать и понимать близких, часто их идеализируя – и ему не мешает. С посторонними Питер ведёт себя куда строже и не скупится показывать пальцем там, где воняет – впрочем, это он научился делать только с возрастом. Целенаправленный и настырный – если Питер решит, что ему надо в закрытую дверь, ему откроют. Горе-романтик, верящий в судьбу. Требует от себя куда больше, чем от остальных, и за многое не простил себя, когда на деле его друзья уже давным-давно обо всём забыли.

13

bella hadid, kendall jenner, stella maeve, benjamin wadsworth, george macckay, bill skarsgard, sean demper and jamie campbell bower

14

илай нашел красивый код

[html]<div id="spiritworkroom">
  <div class="spiritfirst">
    <div class="spiritfirstpic"><img src="https://i.imgur.com/5uipK4n.png"></div>
    <div class="spiritfirsttitle">от вещего духа
      <subtitle>однако, дратути</subtitle></div>
    <div class="spiritfirsttext"><subtitle>да, этот мужик смотрит вам в душу хд</subtitle>
      <about>шел оформлять тему в графику, но споткнулся о раздел с дизайнами. к такому меня жизнь не готовила. прежде перебивался заказами от знакомых через знакомых, но сейчас решил оформиться, так сказать, официально. дизайнами и вот этим вот всем занимаюсь столько, сколько себя на ролевых помню, в связи с чем по факту могу как минимум в плане кодов исполнить практически любое пожелание. графически тоже не отстаю и в процессе работы стараюсь передать дизайном атмосферу и направленность проекта. это, собственно, всё, что я хотел сказать в приветствии.</about></div>
  </div>
 
  <div class="spiritsecond">
<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1">информация</label>

    <input id="tab2" type="radio" name="tabs">
    <label for="tab2">вопросник</label>

    <input id="tab3" type="radio" name="tabs">
    <label for="tab3">портфолио</label>

    <section id="content-tab1">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

Maecenas pellentesque eros vitae elementum condimentum. Sed nec orci est. Vestibulum a ex nec nisl euismod varius. Etiam bibendum nibh id tortor vehicula malesuada volutpat ut augue. Integer sodales, leo eget molestie finibus, nibh diam laoreet dui, quis efficitur lectus lacus suscipit mi. Aliquam finibus et lorem congue imperdiet. Curabitur porta dolor sit amet eros semper viverra. Fusce aliquet, ligula quis mattis bibendum, nulla eros vulputate tortor, eget gravida erat tortor eget nulla. In arcu nisl, elementum sed tristique id, elementum eu odio. Duis imperdiet metus ac justo tempus vehicula et a sem. Vestibulum et volutpat libero. Cras vestibulum diam sit amet pulvinar accumsan. Donec sed ultrices libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean sed ex arcu.
        </p>
    </section> 
    <section id="content-tab2">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

        </p>
    </section>
    <section id="content-tab3">
        <p>
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
    </p>
    </section>   
</div>
  </div>
</div>
<div class="clearer"></div>

<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');

#spiritworkroom {width: 610px;
height: 520px;
background: #fefefe;
margin:auto;
box-shadow: 0 0 0 1px rgba(0,0,0,.2)}

.spiritfirst {float: left;
  margin: 10px;
width: 190px;
height: 490px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #fefefe}

.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}

.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 190px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 73px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}
.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
  font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute;
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}
.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 190px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
  color: #efefef;}
.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute;
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
  text-align: center;
  display: block;
  width: 190px;
  font-size: 9px;
  font-family: pt sans;
  color: #999;
  opacity: 0;
  transform: translate(0,400px);
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}

.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
  transform: translate(0,0px)}

.spiritsecond {background: #fefefe;
width: 389px;
  margin: 10px;
  height: 500px;
  margin-top:9px;
border: 1px solid rgba(0,0,0,.2);
  position: absolute;
  margin-left: 211px
}

.tabs {
padding: 0px;
margin: 0 auto;
}

.tabs>section {
display: none;
padding: 10px;
  height: 440px;
  overflow-y: auto;
  margin: 5px;
  font-family: arial;
  font-size: 11px;
  text-align: justify
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
color: #383838;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}

@keyframes fadeIn {
from {
    transform: translate(-400px,0);
    transform-origin: 50% 0%;
}
to {
    transform: translate(0px,0);
}
}

.tabs>input {
display: none;
position: absolute;
}

.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
display: inline-grid;
margin: 0 -3px 0px;
padding: 10px 0px;
font-weight: 600;
text-align: center;
color: #aaa;
background: #fefefe;
  width: 131px;
  border: solid rgba(0,0,0,.2);
  border-width: 0px 0px 1px 0px;
  left: 3px;
  top: 0px;
  position: relative;
  font-family: pt sans;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: lighter;
  box-shadow: 1px 0 0 0 rgba(0,0,0,.2) inset
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #dfdfdf;
left:3px;
bottom:3px;
transform: scaleX(0);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

.tabs>label:hover:after {transform: scaleX(1);
background: #888;}
.tabs>label:hover {
color: #888;
cursor: pointer;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}

.tabs>input:checked+label {
color: #555;
  background: #f1f1f1;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #888;
left:3px;
bottom:3px;
transform: scaleX(1);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
display: block;
}
</style>[/html]


Вы здесь » luminous beings are we, not this crude matter » archive » илай тестит дерьмо