Caja de perfil Spring Candy

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

/*perfil*/
.postprofile dt a img {
align: center;
max-height: 350px;
position: absolute;
top: 10px;
left: 10px;
max-width: 200px;
}

#contenidoperfil {
  width: 200px;
  height: 355px;
  overflow:hidden;
  position: relative;
  left: 10px;
  top: -4px;
}
.contactoperfil {
  margin-left: 10px;
}
#contenidoperfil .efecto {
  background: #654143;
  width: 200px;
  height: 355px;
  position: absolute;
  text-align: left;
  text-transform: uppercase;
  font-family: calibri;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 1px;
  right: -200px;
  top: 0px;
  -webkit-transition-duration: 1.5s;
}
#contenidoperfil:hover .efecto {
  background: #654143;
  width: 190px;
  height: 355px;
  padding: 5px;
  position: absolute;
  right: 0px;
  top: 0px;
  text-align: left;
  margin-top: 4px;
  color: #ffffff;
  text-transform: uppercase;
  font-family: calibri;
  font-size: 9px;
  letter-spacing: 1px;
  -webkit-transition-duration: 1.5s;
}

.spanstyle {
  background: #EBE2C1;
  padding-top: 3px;
  color: #000000;
  font-weight: bold;
  padding-left: 4px;
  padding-right: 3px;
  padding-bottom: 3px;
  display: inline-block;
  margin: 2px;
}

.postprofile {
  display: block;
  width: 220px;
  background: #EBE2C1;
  border: 5px solid #654143;
  position:relative;
  color: #fff;
  height: 430px;
  overflow: hidden;
}

.rango {
  left: 10px;
  position: absolute;
  bottom: 10px;
}

.usuarioperfil {
background-color: #654143;
display: block;
font-family: calibri;
float: right;
font-size: 12px;
letter-spacing: 1px;
max-height: 15px;
max-width: 230px;
min-height: 15px;
min-width: 230px;
padding-bottom: 15px;
padding-top: 15px;
position: relative;
text-align: center;
text-transform: uppercase;
margin-bottom: 0px;
margin-top: 10px;
}

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

<div class="usuarioperfil">{postrow.displayed.POSTER_NAME}</div><div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
				<!-- div class="online2"></div-->
				<dl>
					<dt>
						{postrow.displayed.POSTER_AVATAR}
						<br />
					</dt>
					<div id="contenidoperfil"><div class="efecto">
					<br />
					<dd>
						<!-- BEGIN profile_field -->
                                          <span class="spanstyle">{postrow.displayed.profile_field.LABEL}</span> {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
						<!-- END profile_field -->
						{postrow.displayed.POSTER_RPG}
					</dd>
					<br />

                                          <div class="contactoperfil">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --></div>
                                          </div></div>
                                  <div class="rango">{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</div>
				</dl>
                          </div>