<!--HTML-->
<link rel="stylesheet" type="text/css" href="http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Shippers/Radio_Vertical.css">

<style>
    .jrad1container * { margin: 0px; padding: 0px; }
  ul { list-style: none; margin: 0px; padding: 0px; }
  .jrad1container input { display: none; }
  
  .jrad1container input[type=radio]:checked ~ .jrad1slide {
  height: 250px;  
  }

.jrad1container input[type=radio]:checked ~ label {
background-color: #785c37;
border: none;
text-decoration: none;
color: #fff!important;
font: 14px/40px Helvetica, Verdana, sans-serif;
}
  
  .jrad1container {
    width: 500px;
    height: auto;
    margin: 15px auto;
  }
  
.jrad1container p {padding-bottom:5px!important;}
  
  .jrad1container label {
  display: block;
  float: left;
  height: 40px;
  width: 500px;
  overflow: hidden;
  background: #785c37;
  text-align: center;
  font-size: 14px; 
  font-family: Book Antiqua;
  color: #af997b;
  }
    
  .jrad1slide {
    display: block;
    width: 500px;
    height: 0px;
    overflow: hidden;
    padding: 0px;
    clear: both;
    position: relative;
    font-size: 14px; 
    font-family: Book Antiqua;
    text-align: justify;
    background-color: #fff;

    transition: all 0.5s ease-in 0s;
    -webkit-transition: all 0.5s ease-in 0s;
    -moz-transition: all 0.5s ease-in 0s;
    -o-transition: all 0.5s ease-in 0s;
  }
  
  .jrad1content {
    width: 430px;
    height: 180px;
    margin: 0px auto;
    padding-right: 3px;
    overflow: auto;
    background-color: #fff;
  }
  
.jrad1content::-webkit-scrollbar { background: #5C65C0; width: 5px; border: 2px solid #fff; }
.jrad1content::-webkit-scrollbar-thumb { background: #413B6B; }
.jrad1content::-webkit-scrollbar-corner { background: #fff; }
  
  .jrad1slide h1 {
    width: 175px;
    text-align: center;
    margin: 0px;
    background-color: #fff;
    padding: 5px;
    font-size: 14px; 
    font-family: Book Antiqua;
    text-transform: uppercase;
    color: #000;
    position: absolute;
    top: 180px;
    left: 50px;
  }
  
  .jrad1slide h2 {
    margin: 20px 0px 5px 0px;
    color: #413B6B;
    font-size: 14px; 
    font-family: Book Antiqua;
    text-transform: uppercase;
    text-align: center;
  }
  

  
  .jrad1slide h2::before, .jrad1slide h2::after {
    content: "";
    width: 30px;
    height: 1px;
    background-color: #6F95FF;
    vertical-align: middle;
    display: inline-block;
    margin: 0px 10px;
  }
  
  .jrad1container p { padding-bottom:5px; }

</style>

<div class="jrad1container">

<form>
 <ul>
   <li>
     <input id="jrad11" type="radio" name="radio" checked>
     <label for="jrad11"></label>
     <div class="jrad1slide">
     <img src="http://funkyimg.com/i/2nSMM.png" width="500" height="250">
     </div>
   </li>
   <li>
     <input id="jrad21" type="radio" name="radio">
     <label for="jrad21">Health care & Security</label>
     <div class="jrad1slide">
       <h2>about name</h2>
     <div class="jrad1content"><p>
      
<table>
            <tr>
     <td><p><b>health care</p></b>
       profession - name
     </td>


     <td><p><b>security</p></b>
       profession - name
      </td></tr></table>


     </p></div></div>
   </li>
   <li>
     <input id="jrad31" type="radio" name="radio">
     <label for="jrad31">Education & Sport</label>
     <div class="jrad1slide">
     <h2>relationships</h2><div class="jrad1content"><p>
 
   <table>
            <tr>
     <td><p><b>health care</p></b>
       profession - name
     </td>


     <td><p><b>security</p></b>
       profession - name
      </td></tr></table>

     </p></div></div>
   </li>
    <li>
     <input id="jrad41" type="radio" name="radio">
     <label for="jrad41">Servicing & Entertainment</label>
     <div class="jrad1slide">
       <h2>about name</h2>
     <div class="jrad1content"><p>
       <table>
            <tr>
     <td><p><b>health care</p></b>
       profession - name
     </td>


     <td><p><b>security</p></b>
       profession - name
      </td></tr></table>

     </p></div></div>
   </li>

<li>
     <input id="jrad51" type="radio" name="radio">
     <label for="jrad51">Criminality & Emergency services</label>
     <div class="jrad1slide">
       <h2>about name</h2>
     <div class="jrad1content"><p>
       <table>
            <tr>
     <td><p><b>health care</p></b>
       profession - name
     </td>


     <td><p><b>security</p></b>
       profession - name
      </td></tr></table>

     </p></div></div>
   </li>


<li>
     <input id="jrad61" type="radio" name="radio">
     <label for="jrad61">Creation & Jurisprudence</label>
     <div class="jrad1slide">
       <h2>about name</h2>
     <div class="jrad1content"><p>
       <table>
            <tr>
     <td><p><b>health care</p></b>
       profession - name
     </td>


     <td><p><b>security</p></b>
       profession - name
      </td></tr></table>

     </p></div></div>
   </li>


 </ul>
</form>

<div style="width: 480px; font-family: Arial; margin: 0 auto; font-size: 25px; text-align: right; line-height: 70%;"><a href="http://cttw.jcink.net/index.php?showuser=6">•</a><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=4829">•</a><a href="http://wecode.jcink.net/index.php?showuser=268">•</a></div></div>

<!--HTML--><link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/bb2wd560axy4fn2/queenbee%20%281%29.css?dl=1">

<style>
.lorde-back { width: 500px; height:500px; overflow:hidden; background-color:#785c37;  transition-duration: 0.6s;  -moz-transition-duration: 0.6s;  -webkit-transition-duration: 0.6s;  -o-transition-duration: 0.6s; }
.lorde-back:hover .lorde-image {  transition-duration: 0.6s;  -moz-transition-duration: 0.6s;  -webkit-transition-duration: 0.6s;  -o-transition-duration: 0.6s; margin-top:500px; }

.lorde-image { width: 450px; height:460px; padding:25px; background-image:url(http://placehold.it/500x460);  transition-duration: 0.6s;  -moz-transition-duration: 0.6s;  -webkit-transition-duration: 0.6s;  -o-transition-duration: 0.6s; }

.lorde-inner{ background-color:#af997b; width: 450px; height:450px; padding:25px; transition-duration: 0.6s;  -moz-transition-duration: 0.6s;  -webkit-transition-duration: 0.6s;  -o-transition-duration: 0.6s;  }
.lorde-back:hover .lorde-inner { margin-top:-1010px; }

.lorde-triangle { width: 0px; height: 0px; border-style: solid; border-width: 25px 25px 0 25px; border-color: #af997b transparent transparent transparent;  transition-duration: 0.6s;  -moz-transition-duration: 0.6s;  -webkit-transition-duration: 0.6s;  -o-transition-duration: 0.6s;  }

.lorde-name { width:200px; padding:10px; line-height:100%; font-family:times; font-size:12px; letter-spacing:2px; font-style:italic; color:#31220d; background-color:#af997b;}

.lorde-back:hover .lorde-triangle { border-style: solid; border-width: 0px 0px 0 0px; border-color: #af997b transparent transparent transparent; }

.lorde-title { font-family:times; font-style:italic; font-size:25px; letter-spacing:3px;}
.lorde-subtitle { font-family:calibri; font-size:8px; letter-spacing:2px; text-transform:uppercase; padding-top:3px; }
.lorde-simb { width:100px; padding:5px; border:1px solid #785c37; }
.lorde-text { font-family:calibri; line-height:99%; text-transform:lowercase; font-size: 14px; text-align:justify; width:300px; height:220px; overflow:auto; padding-left:5px; padding-right:5px;}
.lorde-outer { width:400px; height:250px; border-bottom:15px solid #785c37; }
.lorde-text::-webkit-scrollbar { width: 5px; }
.lorde-text::-webkit-scrollbar-track { background-color:#cccccc; }
.lorde-text::-webkit-scrollbar-thumb { background-color:#785c37; }
.codesbymerc {  font-family:calibri; font-size:10px;  color:#785c37; }
.codesbymerc a {  text-decoration:none; margin-top:-15px; }
</style>

<center><div class="lorde-back">
<div class="lorde-name">I need you</div>
<div class="lorde-triangle"></div>
<!-- ЗДЕСЬ ВАШЕ ФОТО 500х460 -->
<div class="lorde-image" style="background-image:url((http://placehold.it/500x460));"></div>
<div class="lorde-inner">
<div class="lorde-title">ваша красивая цитата</div>
<div class="lorde-subtitle">дополнительная цитата.</div>
<div style="padding-top:5px;"></div><center>
<table><tr vAlign="top">
<!-- ЗДЕСЬ ВАШЕ ФОТО 100х100 -->
<td><div class="lorde-simb"><img src="http://placehold.it/100x100"></div></td>
<td><div style="padding-left:10px"></div><div class="lorde-simb"><img src="http://placehold.it/100x100"></div></td>
<td><div style="padding-left:10px"></div><div class="lorde-simb"><img src="http://placehold.it/100x100"></div></td></tr></table></center>

<center><div class="lorde-outer"><div style="padding-top:10px;"></div>
<div class="lorde-text">

<!-- <i></i> курсив, <b></b> жирный текст, <br></br> новая строка, <s></s> зачёркнутый текст -->

<center><br><b>ВОЗРАСТ:</b> пишем здесь. 
<br><b>Профессия:</b> пишем здесь. 
<br><b>Ориентация:</b> пишем здесь. 
</center>

<br><center><b>О персонаже</b> 
<br>пишем здесь. 
</center>

<br><center><b>Отношения</b> 
<br>Пишем здесь. 
</center>

<br><center><b>Связь</b> 
<br>пишем здесь. 
</center>

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

</div>
</div><div class="codesbymerc"><a href="http://athousandfireflies.jcink.net/index.php?showuser=18">MERC</a></div></center>

<!--HTML-->
<link rel="stylesheet" type="text/css" href="http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Shippers/Bad_News.css">



<center><div id="j9container"><div class="j9topborder"><div class="j9name">

first<br>
middle<br>
last</div>

<div class="j9lyrics">

i know i'm bad news i saved it all for you oh i want to teach you a lesson in the worst kind of way

</div></div><div class="j9tabs"><div class="j9tab">
<input type="radio" id="j9tab-1" name="j9tab-group-1" checked>
<label for="j9tab-1">i</label>
<div class="j9content" div style="background-color: #999;">

<img src="250x350 URL HERE">

</div>
</div>


<div class="j9tab">
<input type="radio" id="j9tab-2" name="j9tab-group-1">
<label for="j9tab-2">ii</label>
<div class="j9content"><div class="j9content2">

<h1>about firstname</h1>
<h2>##. trait. trait. trait.</h2>

Information on character!

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


<div class="j9tab">
<input type="radio" id="j9tab-3" name="j9tab-group-1">
<label for="j9tab-3">iii</label>
<div class="j9content">
<div class="j9content3"> 
 
 <h1>relationships</h1>
<h3>first l.</h3> - description <br>
<h3> first l.</h3> - description here 
 
</div>
</div>
</div>


</div></div><div style="width: 460px;font-size: 20px; text-align: right; line-height: 100%;"><a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=26371">•</a> <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=4829">•</a> <a href="http://wecode.jcink.net/index.php?showuser=268">•</a></div></center>

<!--HTML-->
<center> <link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC' rel='stylesheet' type='text/css'>

<style type="text/css">#killer {width: 400px; height: 460px; position: relative; overflow: hidden;}

#killer .yaas { -WEBKIT-TRANSITION: 2S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; position: absolute; right: 0px; bottom: 0px; width:400px; height: 460px;}

#killer:hover .yaas {-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; right: -400px;}</style>

<div id="killer"><div class="yaas">

<img src="http://i.imgur.com/2TnS7LD.png">

</div>

<div style="width: 280px; height:300px;background-color: #fff; padding: 60px; font-family: 'Playfair Display SC', serif; font-size:40px;color: #000;text-align:justify;"> Serial Killer

<div style="width:280px; height:300px;background-color: #fff; font-family: times new roman; font-size:10px; text-align: justify;overflow:auto;margin-top:30px;padding-right: 6px;line-height:12px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a risus sed ipsum consequat tincidunt nec sed odio. Suspendisse potenti. Vivamus suscipit malesuada mauris ornare molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac consequat nunc, sed euismod sem. Integer at consequat orci. Suspendisse mollis pulvinar ligula, a interdum sem ultrices nec. Maecenas eget lacus laoreet, elementum leo in, dictum metus. Ut a dolor nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed justo ligula, aliquam eget pulvinar ut, tincidunt eu quam. In aliquet ligula sit amet quam dictum, non blandit enim elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
<P>
Cras non gravida purus, a dignissim ante. Donec pulvinar ligula tortor, fermentum feugiat odio sodales luctus. Nam aliquet sollicitudin congue. Nam at dapibus urna. Integer id rhoncus risus, eu dapibus nulla. Donec id congue erat. Curabitur auctor ultricies nulla sit amet ullamcorper.
<P>
Maecenas dolor nulla, posuere ut ullamcorper nec, malesuada pellentesque ante. Proin scelerisque neque dui, non venenatis nisl suscipit quis. Sed sed tortor sollicitudin, ultricies enim non, rhoncus ligula. Duis sit amet interdum velit. Nulla volutpat commodo luctus. Quisque pharetra neque vel neque commodo scelerisque. Praesent consectetur, nisi nec tempus rutrum, massa nulla venenatis justo, non viverra mauris ante nec nisi. Praesent id laoreet orci. Vivamus lectus magna, adipiscing et auctor ut, vehicula sed urna. Aenean dictum urna feugiat elit adipiscing, vel feugiat sapien dictum.
</div></div>
<div style="width:360px;background-color: #fff; padding:20px;font-size:6px;">[url=http://z10.invisionfree.com/Shadowplay/index.php?showuser=9755]CR[/url]</div>

</center>