<!--HTML-->
<link rel="stylesheet" type="text/css" href="http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Shippers/Radio_Vertical.css">
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900' rel='stylesheet' type='text/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: #31220d!important;
font-size: 14px; 
letter-spacing: 1.5px;
line-height: 140%;
font-family: Playfair Display;
}
  
  .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: Playfair Display;
  letter-spacing: 1.5px;
  color: #af997b;
  }
    
  .jrad1slide {
    display: block;
    width: 500px;
    height: 0px;
    overflow: hidden;
    padding: 0px;
    clear: both;
    position: relative;
    font-size: 14px; 
    font-family: Playfair Display;
    text-align: justify;
    background-color: #af997b;

    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: #af997b;
  }
  
.jrad1content::-webkit-scrollbar { background: #5C65C0; width: 5px; border: 2px solid #af997b; }
.jrad1content::-webkit-scrollbar-thumb { background: #413B6B; }
.jrad1content::-webkit-scrollbar-corner { background: #af997b; }
  
  .jrad1slide h1 {
    width: 175px;
    text-align: center;
    margin: 0px;
    background-color: #af997b;
    padding: 5px;
    font-size: 14px; 
    font-family: Playfair Display;
    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: Playfair Display;
    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/2odKX.jpg" 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 valign="top">
     <td><p><b>Health care</p></b>
       profession - name
     </td>


     <td><p><b>Security</p></b>
       капитан оперативной группы - <a href='http://inequalityofsouls.rusff.me/profile.php?id=5'>Song Joong Ki</a>
       <br>следователь - <a href='http://inequalityofsouls.rusff.me/profile.php?id=11'>Terada Takuya</a>
      </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 valign="top">
     <td><p><b>Education</p></b>
       profession - name
     </td>


     <td><p><b>Sport</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 valign="top">
     <td><p><b>Servicing</p></b>
       profession - name
     </td>


     <td><p><b>Entertainment</p></b>
      русалка в океанариуме - <a href='http://inequalityofsouls.rusff.me/profile.php?id=21'>Minatozaki Sana</a>
      <br>актриса - <a href='http://inequalityofsouls.rusff.me/profile.php?id=26'>Park Hyo Min</a>  
      </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 valign="top">
     <td><p><b>Criminality</p></b>
       profession - name
     </td>


     <td><p><b>Emergency services</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 valign="top">
     <td><p><b>Creation</p></b>
       балерина - <a href='http://inequalityofsouls.rusff.me/profile.php?id=4'>Hwang Mi Young</a>
       <br>фотограф - <a href='http://inequalityofsouls.rusff.me/profile.php?id=6'>Lee Chang Seon</a>
</td>


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

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

<li>
     <input id="jrad71" type="radio" name="radio">
     <label for="jrad71">Economics // Other</label>
     <div class="jrad1slide">
       <h2>about name</h2>
     <div class="jrad1content"><p>
       <table valign="top">
            <tr valign="top">
     <td><p><b>Economics</p></b>
       банкир - <a href='http://inequalityofsouls.rusff.me/search.php?action=show_user_posts&user_id=30'>Park Ji Min</a>
     </td>


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

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


 </ul>
</form>

<br>профессия - <a href='ссылка на профиль'>name</a>