Caja de perfil Frankenstein's monster

----------------------- CSS -----------------------

.postprofile {
  width: 220px;
  background: #ec474f;
  margin-top: -2px;
  height: 436px;
  overflow: hidden;
  border-left: transparent;
}

.fotoavatar img {
  margin-top: 10px;
  margin-left: 10px;
  max-height: 350px;
  max-width: 200px;
}

.postprofile dd {
  text-align: left;
  margin-left: 10px;
  color: #eeeeee;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: Calibri;
  font-size: 10px;
}

#nombreusuario {
  width: 200px;
  padding-top: 7px;
  padding-bottom: 7px;
  text-transform: uppercase;
  font-family: Oswald;
  text-align: center;
  background: #f1f1f1;
  margin-left: 10px;
  margin-top: 10px;
  font-size: 11px;
}

span.label {
  padding-top: 3px;
  padding-bottom: 3px;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 10px;
  color: #ec474f;
}

/*Pestañas del perfil*/
#pestanas {
list-style: none;
width: 201px;
margin-top: 10px;
margin-left: 9px;
background-color: transparent;
}
#pestanas li a {
font-family: Calibri;
margin-left: 1px;
margin-right: 1px;
font-size: 9px;
text-transform: uppercase;
line-height: 100%;
display: inline-block;
color: #fff;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
width: 65px;
text-align: center;
background: #000;
transition: 0.8s;
}
#pestanas li {display: inline-block;}
#pestanas:hover li a {
  transition: 0.8s;
  box-shadow: inset 0 0 0 #000000;
}

.tab_content {
display: none;
color: #1c1c1c;
width: 220px;
margin: 0px;
background: #000;
height: 370px;
}

#TAB2 img {width: 200px; height: 80px; margin-top: 10px; margin-bottom: 10px;}

#TAB3 img {margin-top: 10px;}

#tabs_content_container {
width: 220px;
height: 370px;
overflow:hidden;
background: #000;
}
.campocontacto {
  margin-top: 10px;
}
.campocontacto a {
  margin-left: 10px;
  width: 200px;
  background: #fff;
  display: block;
  line-height: 100%;
  margin-bottom: 3px;
  font-size: 9px;
  text-transform: uppercase;
  font-family: calibri;
  text-align: center;
  padding-top: 3px;
  padding-bottom: 3px;
}

.campocontacto:hover a {
  text-decoration: none;
}

/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://fonts.gstatic.com/s/oswald/v10/yg0glPPxXUISnKUejCX4qfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://fonts.gstatic.com/s/oswald/v10/pEobIV_lL25TKBpqVI_a2w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


----------------------- JAVASCRIPT 1 -----------------------

$(document).ready(function(){
$("#pestanas li").click(function() {
  currentprofile = $(this).parent().parent().parent().parent();
  $("#pestanas li", currentprofile).removeClass('active');
  $(this).addClass("active");
  $(".tab_content", currentprofile).hide();
  var selected_tab = $(this).find("a").attr("href");
  $(selected_tab, currentprofile).fadeIn();
  return false;
});
});

----------------------- JAVASCRIPT 2 -----------------------

$(function(){
       $(".tab_content").each(function(){
          $(this).html($(this).html()
             .replace("Imagen personal:", " "));
       });
   });

----------------------- PA>VISUALIZACIÓN>TEMPLATES>GENERAL>VIEWTOPIC_BODY -----------------------

<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
                            <div id="nombreusuario"><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong></div>
				<!-- div class="online2"></div-->
                            <ul id='pestanas'><li class='active'><a href='#TAB1'> avatar</a></li><li><a href='#TAB2'>datos</a></li><li><a href='#TAB3'>Contacto</a></li></ul>
					<div id='tabs_content_container'><div id='TAB1' class='tab_content' style="display: block;"> <div class="fotoavatar">{postrow.displayed.POSTER_AVATAR}
                                          </div></div>
					<div id='TAB2' class='tab_content' style="display: block;"><dd>
						<!-- BEGIN profile_field -->
						{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
						<!-- END profile_field -->
						{postrow.displayed.POSTER_RPG}
                                          </dd></div>
					<div id='TAB3' class='tab_content' style="display: block;">
                                          <dd>{postrow.displayed.RANK_IMAGE}</dd> <div class="campocontacto">{postrow.displayed.PROFILE} {postrow.displayed.PM} {postrow.displayed.EMAIL}</div> <!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT} <!-- END contact_field -->
                                          </div></div>
                            </div>