<!--HTML-->
<link rel="stylesheet" href="http://forumstatic.ru/files/0016/00/32/26364.css">
<script type="text/javascript">
    $('.appearence-item').click(function(){
        if($(this).hasClass('open-appearence')){
             $(this).removeClass('.open-appearence');}
       else { $('.appearence-item').removeClass('open-appearence');      
                $(this).addClass('open-appearence');
         }       
    });
</script>
<div class="appearence-wrap">
<div class="appearence-main">      
      <div class="appearence-cell">
            <div class="appearence-header">WOMEN<br><p>(женские)</p></div>
            <div class="appearence-item"><h4>a-b-c</h4><p>Brit Marling | <a href="http://jurassic.rusff.me/profile.php?id=36">Natalia Szczepaniak</a><br>Coco Rocha | <a href="http://jurassic.rusff.me/profile.php?id=13">Virginia Silver</a><br></p></div>
            <div class="appearence-item"><h4>d-e-f</h4><p>Dichen Lachman | <a href="http://jurassic.rusff.me/profile.php?id=18">Logan Merrow</a><br>Emma Stone | <a href="http://jurassic.rusff.me/profile.php?id=3">Eve Watergate</a><br>Emilia Clarke | <a href="http://jurassic.rusff.me/profile.php?id=10">Madison Rat</a><br>Eva Green | <a href="http://jurassic.rusff.me/profile.php?id=12">Adelaide Brooke</a><br>Emily VanCamp | <a href="http://jurassic.rusff.me/profile.php?id=6">Sydney Huston</a><br></p></div>
            <div class="appearence-item"><h4>g-h-i-k</h4><p>Imogen Poots | <a href="http://jurassic.rusff.me/profile.php?id=5">Alaska Watergate</a><br></p></div>
            <div class="appearence-item"><h4>k-l-m-n</h4><p>Lena Headey | <a href="http://jurassic.rusff.me/profile.php?id=7"> Grace Denaro</a><br></p></div>
            <div class="appearence-item"><h4>o-p-q-r</h4><p>список</p></div>
            <div class="appearence-item"><h4>s-t-u-v</h4><p>Vera Farmiga | <a href="http://jurassic.rusff.me/profile.php?id=21">Jasmine Chase-Walker</a><br></p></div>
            <div class="appearence-item"><h4>w-x-y-z</h4><p>Zoe Saldana | <a href="http://jurassic.rusff.me/profile.php?id=8">Joyce Vaughan</a><br></p></div>
      </div>
      <div class="appearence-cell">
            <div class="appearence-header">MEN<br><p>(мужские)</p></div>
            <div class="appearence-item"><h4>a-b-c</h4><p>Bartek Borowiec | <a href="http://jurassic.rusff.me/profile.php?id=26">Joshua Red Wolf Rock</a><br>
Bradley Darryl Wong | <a href="http://jurassic.rusff.me/viewtopic.php?id=89#p4893">Henry Wu</a><br>
Chris Hemswort | <a href="http://jurassic.rusff.me/profile.php?id=20">Richard Louson</a><br>Chris Evans| <a href="http://jurassic.rusff.me/profile.php?id=28">Kyle Gardner</a><br>Chriss Pratt | <a href="http://jurassic.rusff.me/profile.php?id=33">Nate Roach</a><br>Christian Bale | <a href="http://jurassic.rusff.me/profile.php?id=24">Treb Lowe</a><br></p></div>
            <div class="appearence-item"><h4>d-e-f</h4><p>Dan Stevens | <a href="http://jurassic.rusff.me/profile.php?id=34">Kyle Summers</a><br></p></div>
            <div class="appearence-item"><h4>g-h-i-j</h4><p>Hiroyuki Sanada | <a href="http://jurassic.rusff.me/profile.php?id=11">James Sakai</a><br>Josh Duhamel | <a href="http://jurassic.rusff.me/profile.php?id=31">Mickey Melvin</a><br></p></div>
            <div class="appearence-item"><h4>k-l-m-n</h4><p>Manu Bennett | <a href="http://jurassic.rusff.me/profile.php?id=30">Alan Lock</a><br></p></div>
            <div class="appearence-item"><h4>o-p-q-r</h4><p>Paul Rudd | <a href="http://jurassic.rusff.me/profile.php?id=29">Ethan Robinson</a><br></p></div>
            <div class="appearence-item"><h4>s-t-u-v</h4><p>Shemar Moore | <a href="http://jurassic.rusff.me/profile.php?id=35">Mark Dell</a><br></p></div>
            <div class="appearence-item"><h4>w-x-y-z</h4><p>список</p></div>
      </div>
</div>
</div>
<style>
.appearence-wrap {
      width:654px;
      padding: 20px;
      background-color: #3f8fb3;
}
.appearence-main{
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
     width:612px;
     background-color: #ceddd6;
     padding: 15px;
}

.appearence-cell{
       width: 306px;
       height:auto;
       text-align: center;
       padding: 0 8px;
}

.appearence-header{
       text-align:center;
       text-transform: uppercase;
       font-family: "DIN1451";
       font-size: 1.5em;
       color: #005a7d;
       letter-spacing: 2px;
}


.appearence-header p{
       text-transform: lowercase;
       font-family: century gothic;
       font-size: 0.6em;
       color: #3687a7;
       letter-spacing: 0px;
}
.appearence-item{
      max-height: 100px;
      -webkit-transition: max-height 0.3s ease-in-out;
      -moz-transition: max-height 0.3s ease-in-out;
      -o-transition: max-height 0.3s ease-in-out;
      transition: max-height 0.3s ease-in-out; 
      overflow: hidden;
      //border-bottom: 20px solid #6ebdb4;
}

.appearence-item h4{
     font-family: century gothic;
     font-weight: 500;
     background: #6ebdb4;
     font-size: 1.1em;
     color: white;
     height: 20px;
     padding-top: 2px;
     cursor:pointer;
      -webkit-transition: background 0.3s ease-in-out;
      -moz-transition: background 0.3s ease-in-out;
      -o-transition: background 0.3s ease-in-out;
      transition: background 0.3s ease-in-out; 
}
.appearence-item h4:hover{
     background: #83d3ca;
}
.appearence-item p {
    padding:6px!important;
}
.open-appearence{
      max-height: 150px;
}

</style>

Имя внешности на англ. | <a href="ссылка на профиль">имя на англ.</a><br>