[dohtml]<link href='https://fonts.googleapis.com/css?family=Fjalla+One|Montserrat:400,700|Fugaz+One' rel='stylesheet' type='text/css'><div style="font-size: 13px; line-height: 120%;"><style>

.r-tb { position: relative;  width: 510px; height:  330px; background-color: #fff; margin-left: -55px; }
.r-tab { float: none; }
.r-tab label { display: block; position: relative; right: 200px; width: 110px; height: 110px; top: 0px; background: #fff; opacity: 0.7; z-index: 2; outline: 15px solid rgba(255,255,255,0.4); outline-offset: -30px;  transition-duration: 0.6s;-moz-transition-duration: 0.6s;-webkit-transition-duration: 0.6s;-o-transition-duration: 0.6s; } .r-tab [type=radio] { display: none;  }
.r-in { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: #eee; width: 400px; height: 330px; margin-left: 110px; }
[type=radio]:checked ~ label { background: white; z-index: 3; opacity: 1; outline-offset: -15px; } [type=radio]:checked ~ label ~ .r-in { z-index: 1; }


.r-top { background-color: #d7dece; padding: 15px; width: 250px; height: 80px; text-align: center; }
.r-top-i { background-color: rgba(255,255,255,0.4); padding: 25px; height: 30px; color: #fff; text-shadow: 2px 2px 0 #c9b59e; font: 22px fugaz one; text-transform: uppercase; }

.r-side { background: center url(http://i.imgur.com/UDBZXWE.png) #c9b59e; padding: 15px 30px; width: 60px; height: 80px; color: #fff; text-shadow: 1px 1px 0 #d7dece; font: 58px fjalla one; vertical-align:middle; }

.r-desc { width: 360px; height: 70px; background-color: #fff; padding: 0px 20px; color: #444; text-align: justify; font: 10.5px calibri; overflow: auto; line-height: 140%; }
.r-desc::-webkit-scrollbar { width: 5px; }
.r-desc::-webkit-scrollbar-thumb { background-color: #ebe3d6; }
.r-desc::-webkit-scrollbar-track { background-color: #eee; }

.r-trait { background-color: #ebe3d6; width: 340px; height: 50px; padding: 30px; font: 700 10px Montserrat; color: #fff; text-shadow: 1px 1px 0 #c9b59e; text-transform: UPPERCASE; letter-spacing: .5px; }
.r-trait td { font: 700 10px Montserrat; }
.r-trait-i { display: table-cell; padding: 5px; font-size: 9px; background-color: rgba(201,181,158,0.4);  height: 10px; width: 110px; text-align: center; color: #fff; }
.r-trait-f { margin: 1px 2px;  padding: 5px; background-color: rgba(201,181,158,0.4);  }

</style><center><div class="r-tb">

<div class="r-tab"><input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1"><img src="http://placehold.it/110x110/ebe3d6/ffffff/" /></label><div class="r-in">



<table cellpadding="0" cellspacing="0">
<td><div class="r-top"><div class="r-top-i">first m. last</div></div></td>
<td><div class="r-side">12</div></div></td></table>

<div style="width: 400px; height: 20px; background-color: #fff;"></div>
<div class="r-desc">Lorem ipsum dolor sit amet, id stet incorrupte sed. Ea per apeirian partiendo elaboraret, vim dicat postulant repudiare cu. Dolorem propriae detraxit has ea, doctus fabellas principes ne mel. Modus discere philosophia vel ex, vis ad tibique propriae probatus. Ne ridens persius nonumes nam, lorem debet mnesarchum cu has. Aeque diceret scribentur eu vim, mei soluta laoreet ea, sed verear adversarium in.<p> Quem philosophia signiferumque has at, vix quas doctus quaestio no. Graece labitur consulatu nec an. Augue commodo definitionem cu pri, labores torquatos nec ei, ex cibo discere vix.</div><div style="width: 400px; height: 20px; background-color: #fff;"></div>
<div class="r-trait"><table cellpadding="0" cellspacing="1">
<td><div class="r-trait-i">trait</div></td>
<td><div class="r-trait-i">trait</div></td>
<td><div class="r-trait-i">trait</div></td>
</table>
<div class="r-trait-f">face claim</div></div>





</div></div><div class="r-tab"><input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2"><img src="http://placehold.it/110x110/b5c4bf/ffffff/" /></label><div class="r-in">



<table cellpadding="0" cellspacing="0">
<td><div class="r-top"><div class="r-top-i">first m. last</div></div></td>
<td><div class="r-side">34</div></div></td></table>

<div style="width: 400px; height: 20px; background-color: #fff;"></div>
<div class="r-desc">Ipsum dolor sit amet, id stet incorrupte sed. Ea per apeirian partiendo elaboraret, vim dicat postulant repudiare cu. Dolorem propriae detraxit has ea, doctus fabellas principes ne mel. Modus discere philosophia vel ex, vis ad tibique propriae probatus. Ne ridens persius nonumes nam, lorem debet mnesarchum cu has. Aeque diceret scribentur eu vim, mei soluta laoreet ea, sed verear adversarium in.<p> Quem philosophia signiferumque has at, vix quas doctus quaestio no. Graece labitur consulatu nec an. Augue commodo definitionem cu pri, labores torquatos nec ei, ex cibo discere vix.</div><div style="width: 400px; height: 20px; background-color: #fff;"></div>
<div class="r-trait"><table cellpadding="0" cellspacing="1">
<td><div class="r-trait-i">trait</div></td>
<td><div class="r-trait-i">trait</div></td>
<td><div class="r-trait-i">trait</div></td>
</table>
<div class="r-trait-f">face claim</div></div>





</div></div><div class="r-tab"><input type="radio" id="tab-3" name="tab-group-1"><label for="tab-3"><img src="http://placehold.it/110x110/d7dece/ffffff/" /></label><div class="r-in">



<table cellpadding="0" cellspacing="0">
<td><div class="r-top"><div class="r-top-i">first m. last</div></div></td>
<td><div class="r-side">56</div></div></td></table>
<div style="width: 400px; height: 20px; background-color: #fff;"></div>
<div class="r-desc">Dolor sit amet, id stet incorrupte sed. Ea per apeirian partiendo elaboraret, vim dicat postulant repudiare cu. Dolorem propriae detraxit has ea, doctus fabellas principes ne mel. Modus discere philosophia vel ex, vis ad tibique propriae probatus. Ne ridens persius nonumes nam, lorem debet mnesarchum cu has. Aeque diceret scribentur eu vim, mei soluta laoreet ea, sed verear adversarium in.<p> Quem philosophia signiferumque has at, vix quas doctus quaestio no. Graece labitur consulatu nec an. Augue commodo definitionem cu pri, labores torquatos nec ei, ex cibo discere vix.</div><div style="width: 400px; height: 20px; background-color: #fff;"></div>
<div class="r-trait"><table cellpadding="0" cellspacing="1">
<td><div class="r-trait-i">trait</div></td>
<td><div class="r-trait-i">trait</div></td>
<td><div class="r-trait-i">trait</div></td>
</table>
<div class="r-trait-f">face claim</div></div>


</div></div></div></div><center><a href="http://cttw.jcink.net/index.php?showuser=679"><div style="margin-left: -450px; margin-top: 5px; font: 900 8px calibri; opacity: 0.3; color: silver;">M A M A</div></a></center>[/dohtml]