Современный облачный хостинг провайдер | Aéza
Контакты ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430
Новый вид страницы пользователя

Новый вид страницы пользователя

Обзор Обновления (1) Обсуждение

Новый вид страницы пользователя

Ищем шаблон member_view

Удаляем весь код в шаблоне, и ставим этот код
Код: 
<xen:title>{$user.username}</xen:title>
<xen:h1></xen:h1> <xen:comment>H1 empty, do not render.</xen:comment>
<xen:container var="$head.canonical">
  <link rel="canonical" href="{xen:link 'canonical:members', $user, 'page={$page}'}" /></xen:container>
<xen:container var="$head.description">
  <meta name="description" content="{xen:phrase x_is_a_y_at_z, 'name={$user.username}', 'title={xen:helper stripHtml, {xen:helper usertitle, $user}}', 'location={$xenOptions.boardTitle}'}" /></xen:container>
<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
  <xen:set var="$url">{xen:link 'canonical:members', $user}</xen:set>
  <xen:set var="$title">{$user.username}</xen:set>
  <xen:set var="$avatar">{xen:helper avatar, $user, 'm', '', 'true'}</xen:set>
</xen:include></xen:container>
<xen:require css="member_view.css" />
<xen:require js="js/xenforo/quick_reply_profile.js" />
<div class="ctncoverpf">
  <div class="avatarcoverpf" id="avar-hover">
   
   
   
  <xen:if is="{$visitor.user_id} == {$user.user_id}">
<a class="imgsptcover editavatar OverlayTrigger" href="{xen:link account/avatar}" rel="leditavatar" ></a>
  <a href="{xen:link account/avatar}">
  <img width="180" height="180" alt="{$user.username}" title="{$user.username}" style="background: url({xen:helper avatar, $user, l, 'true'}) no-repeat center center" src="http://img.me.zdn.vn/v3/images/blank.gif" itemprop="photo" />
  </a>
  <xen:else />
  <span class="Av{$user.user_id}l">
  <img width="180" height="180" alt="{$user.username}" title="{$user.username}" style="background: url({xen:helper avatar, $user, l, 'true'}) no-repeat center center" src="http://img.me.zdn.vn/v3/images/blank.gif" itemprop="photo" />
  </span>
  </xen:if>
   
  </div>
  <div id="idcover" class="imgcoverpf" style="position: relative; width: 100%; height: 120px!important">
   
   
  <div id="iddragmove" class="dragmovepf" style="z-index: 5;display: none">
  <div class="textcover"><span class="imgsptcover icocursormove"></span>Di chuyển vị trí ảnh bìa</div>
  <p class="textcoversml">sau đó hãy lưu lại thay đổi này</p>
  <a id="idupdatecover" class="imgsptcover savechange" href="#" style="z-index: 15;display: none"></a>
  <a id="idcancelcover" class="imgsptcover cancelchange" href="#" style="z-index: 15;display: none"></a>
  </div>
 <xen:if is="{$visitor.user_id} AND {$user.user_id} != {$visitor.user_id}">
 <center>
             
               <xen:if is="{$user.isFollowingVisitor}">
               <div class="muted" id="fonMuted-ON">
                 {xen:phrase user_is_following_you, 'user={$user.username}'}
                 </div>
               <xen:else />
               <div class="muted" id="fonMuted-OFF">
                 {xen:phrase user_is_not_following_you, 'user={$user.username}'}
                 </div>
               </xen:if>
             
             </center>
           </xen:if>

  <div id="idcoverholder" class="coverBorder" style="bottom:0;left:0;position:absolute;right:0;top:0;display: none;"></div>
  </div>
  <div class="infocoverpf">
  <div class="usernamecoverpf">
  <h1>
  <span class="txtusername_pro">{xen:helper richUserName, $user}</span>
  </h1>
   
  <p class="perforpf">
  Симпатии: <span class="txtpointpf" id="user_point"><strong>{xen:number $user.like_count}</strong></span>
  <span class="skin icodotpf"></span>
  Сообщения: <strong><span id="idCounter">{xen:number $user.message_count}</span></strong>
  </p>
  <script type="text/javascript">
  zm.ready(function(){zm("#user_point strong").html(zmString.formatNumber(0));});
  </script>
   
  <p>
   
  <xen:if is="{$visitor.user_id} == {$user.user_id}">
   
  <a href="{xen:link account/personal-details}#ctrl_custom_field_customtheme" title="Изменить профиль" class="" >Изменить профиль</a>
  <xen:else />
   
  <a title="Начать переписку" href="{xen:link 'conversations/add', '', 'to={$user.username}'}" class="">Написать</a>
  </xen:if>
   
   
   
  </p>
   
   
  </div>
   
  <div class="clr"></div>
  </div>
</div>
<style>
<xen:if is="{$user.customFields.customtheme}">
.theme-custom {
  background:transparent url({$user.customFields.customtheme}) center top no-repeat;
  margin-top: 34px;
}
<xen:else />
.theme-custom {
  background:transparent url(http://stheme.zdn.vn/theme_default.jpg) center top no-repeat;
  margin-top: 34px;
}
</xen:if>
<xen:if is="{$user.customFields.customcolor}">
.color-custom {
  background-color: #{$user.customFields.customcolor};
}
<xen:else />
.color-custom {
  background-color: #F3FAFF;
}
</xen:if>
</style>
<div class="pf_ctnprofile">
<div class="followBlock" id="followBlockFon">
           
             <xen:follow user="$user" title=""  />
             <xen:if is="{xen:helper isIgnored, $user.user_id}">
               <a href="{xen:link members/unignore, $user}" class="FollowLink">{xen:phrase unignore}</a> |
             <xen:elseif is="{$canIgnore}" />
               | <a href="{xen:link members/ignore, $user}" class="FollowLink">{xen:phrase ignore}</a> |
             </xen:if>
             <xen:if is="{$canWarn}">
               <a href="{xen:link members/warn, $user}">{xen:phrase warn}</a> |
             </xen:if>
             <xen:if is="{$canBanUsers}">
               <xen:if is="{$user.is_banned}">
                 <a href="{xen:adminlink banning/users/lift, $user}">{xen:phrase lift_ban}</a> |
               <xen:else />
                 <a href="{xen:adminlink banning/users/add, $user}" target="_blank">{xen:phrase ban}</a> |
               </xen:if>
             </xen:if>
             <xen:if is="{$canEditUsers}">
               <a href="{xen:adminlink users/edit, $user}" target="_blank">{xen:phrase edit}</a>
             </xen:if>
         </div>
         
<div class="profilePage" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
  <div id="ctnmain_id">
  <div class="pf_colfirst">
  <div class="pf_maincolst">
  <div class="pf_mainprofile">
  <div class="pf_status">
   
 
   
  <a href="#" id="delStatusId" onclick="return false;" class="imgsptcover icodelstt" style="display: none;"></a>
   
  <span class="imgsptcover icostt_left"></span>
  <span id="spStatus" style="">{xen:helper bodyText, $user.status}</span>
  <span class="imgsptcover icostt_right"></span>
  <span id="spStatusDate" class="grey"><xen:datetime time="$user.status_date" /></span>
  <script type="text/javascript">
  zm(".pf_status").hover(function(){
  zm("#delStatusId").show();
  }, function(){
  zm("#delStatusId").hide();
  });
  zm.ready(function(){
  if(zm("#spStatus #nstt_more").size()){
  zm("#spStatus #nstt_more").click();
  }
  zm("#spStatus").show();
  });
  </script>
  </div>
  <br />
   
  <div class="section primaryUserBlock">
   
   
  <ul class="tabs mainTabs Tabs" data-panes="#ProfilePanes > li" data-history="on">
  <li><a href="{$requestPaths.requestUri}#profilePosts">{xen:phrase profile_posts}</a></li>
  <xen:if is="{$showRecentActivity}"><li><a href="{$requestPaths.requestUri}#recentActivity">{xen:phrase recent_activity}</a></li></xen:if>
  <li><a href="{$requestPaths.requestUri}#postings">{xen:phrase postings}</a></li>
  <li><a href="{$requestPaths.requestUri}#info">{xen:phrase information}</a></li>
  <xen:if is="{$warningCount}"><li><a href="{$requestPaths.requestUri}#warnings">{xen:phrase warnings} ({xen:number $warningCount})</a></li></xen:if>
  <xen:hook name="member_view_tabs_heading" params="{xen:array 'user={$user}'}" />
  </ul>
  </div>

         

  <ul id="ProfilePanes">
  <li id="profilePosts" class="profileContent">
  <xen:if is="{$canViewProfilePosts}">
  <xen:require css="message_simple.css" />
  <xen:if is="{$canPostOnProfile}">
  <form action="{xen:link members/post, $user}" method="post"
  class="messageSimple profilePoster AutoValidator primaryContent" id="ProfilePoster"
  data-optInOut="optIn">
  <xen:avatar user="$visitor" size="s" />
  <div class="messageInfo">
  <xen:if is="{$visitor.user_id} == {$user.user_id}">
  <textarea name="message" class="textCtrl StatusEditor Elastic" placeholder="{xen:phrase update_your_status}..." rows="3" cols="50" data-statusEditorCounter="#statusEditorCounter"></textarea>
  <xen:else />
  <textarea name="message" class="textCtrl Elastic" placeholder="{xen:phrase write_something}..." rows="3" cols="50"></textarea>
  </xen:if>
  <div class="submitUnit">
  <span id="statusEditorCounter" title="{xen:phrase characters_remaining}"></span>
  <input type="submit" class="button primary" value="{xen:phrase post_verb}" accesskey="s" />
  <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
  </div>
  </div>
  </form>
  </xen:if>
   
  <xen:include template="ad_member_view_above_messages" />
  <form action="{xen:link 'inline-mod/profile-post/switch'}" method="post"
  class="InlineModForm section"
  data-cookieName="profilePosts"
  data-controls="#InlineModControls"
  data-imodOptions="#ModerationSelect option">
  <ol class="messageSimpleList" id="ProfilePostList">
<div class="ctnfeed">
  <div id="fcontent">
  <xen:if is="{$profilePosts}">
  <xen:foreach loop="$profilePosts" value="$profilePost">
  <xen:if is="{$profilePost.isDeleted}">
  <xen:include template="profile_post_deleted" />
  <xen:else />
  <xen:include template="profile_post" />
  </xen:if>
  </xen:foreach>
  <xen:else />
   
  <li id="NoProfilePosts">{xen:phrase there_no_messages_on_xs_profile_yet, 'name={$user.username}'}</li>
   
  </xen:if></div></div>
  </ol>
  <xen:if is="{$inlineModOptions}">
  <div class="sectionFooter InlineMod Hide">
  <label for="ModerationSelect">{xen:phrase perform_action_with_selected_posts}...</label>
  <xen:include template="inline_mod_controls">
  <xen:set var="$text">{xen:phrase post_moderation}</xen:set>
  <xen:set var="$options">
  <xen:if is="{$inlineModOptions.delete}"><option value="delete">{xen:phrase delete_posts}</option></xen:if>
  <xen:if is="{$inlineModOptions.undelete}"><option value="undelete">{xen:phrase undelete_posts}</option></xen:if>
  <xen:if is="{$inlineModOptions.approve}"><option value="approve">{xen:phrase approve_posts}</option></xen:if>
  <xen:if is="{$inlineModOptions.unapprove}"><option value="unapprove">{xen:phrase unapprove_posts}</option></xen:if>
  <option value="deselect">{xen:phrase deselect_posts}</option>
  </xen:set>
  <xen:set var="$checkboxTitle">{xen:phrase select_deselect_all_posts_on_this_page}</xen:set>
  <xen:set var="$selectedItemsPhrase">{xen:phrase selected_posts}</xen:set>
  </xen:include>
  </div>
  </xen:if>
  <div class="pageNavLinkGroup">
  <div class="linkGroup SelectionCountContainer"></div>
  <div class="linkGroup"{xen:if '!{$ignoredNames}', ' style="display: none"'}><a href="javascript:" class="muted jsOnly DisplayIgnoredContent Tooltip" title="{xen:phrase show_hidden_content_by_x, "names={xen:helper implode, $ignoredNames, ', '}"}">{xen:phrase show_ignored_content}</a></div>
  <xen:pagenav link="members" linkdata="{$user}" page="{$page}" perpage="{$profilePostsPerPage}" total="{$totalProfilePosts}" />
  </div>
  <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
  </form>
  <xen:else />
  <div id="NoProfilePosts">{xen:phrase there_no_messages_on_xs_profile_yet, 'name={$user.username}'}</div>
  </xen:if>
  </li>
  <xen:if is="{$showRecentActivity}">
  <li id="recentActivity" class="profileContent" data-loadUrl="{xen:link members/recent-activity, $user}">
  <span class="jsOnly">{xen:phrase loading}...</span>
  <noscript><a href="{xen:link members/recent-activity, $user}">{xen:phrase view}</a></noscript>
  </li>
  </xen:if>
  <li id="postings" class="profileContent" data-loadUrl="{xen:link members/recent-content, $user}">
  <span class="jsOnly">{xen:phrase loading}...</span>
  <noscript><a href="{xen:link members/recent-content, $user}">{xen:phrase view}</a></noscript>
  </li>
  <li id="info" class="profileContent">
  <xen:if is="{$user.signature}">
  <div class="section">
  <h3 class="textHeading">{xen:phrase signature}</h3>
  <div class="primaryContent">
  <div class="baseHtml signature ugc">{xen:raw $user.signatureHtml}</div>
  </div>
  </div>
  </xen:if>
  <xen:if hascontent="true">
  <div class="section">
  <h3 class="textHeading">{xen:phrase about}</h3>
  <div class="secondaryContent">
  <xen:contentcheck>
  <xen:if hascontent="true">
  <div class="pairsColumns aboutPairs">
  <xen:contentcheck>
  <xen:if is="{$user.gender}">
  <dl><dt>{xen:phrase gender}:</dt> <dd><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd></dl>
  </xen:if>
  <xen:if is="{$birthday}">
  <dl><dt>{xen:phrase birthday}:</dt> <dd>{xen:date $birthday.timeStamp, $birthday.format} <xen:if is="{$birthday.age}">({xen:phrase age}: {xen:number $birthday.age})</xen:if></dd></dl>
  </xen:if>
  <xen:if is="{$user.homepage}">
  <dl><dt>{xen:phrase home_page}:</dt> <dd><a href="{xen:string censor, $user.homepage, 'x'}" rel="nofollow" target="_blank">{xen:string censor, $user.homepage}</a></dd></dl>
  </xen:if>
  <xen:if is="{$user.location}">
  <dl><dt>{xen:phrase location}:</dt> <dd>{xen:string censor, $user.location}</dd></dl>
  </xen:if>
  <xen:if is="{$user.occupation}">
  <dl><dt>{xen:phrase occupation}:</dt> <dd>{xen:string censor, $user.occupation}</dd></dl>
  </xen:if>
   
  <xen:if is="{$customFieldsGrouped.personal}">
  <xen:foreach loop="$customFieldsGrouped.personal" value="$field">
  <xen:include template="custom_field_view" />
  </xen:foreach>
  </xen:if>
  </xen:contentcheck>
  </div>
  </xen:if>
  <xen:if is="{$user.about}"><div class="baseHtml ugc">{xen:raw $user.aboutHtml}</div></xen:if>
  </xen:contentcheck>
  </div>
  </div>
  </xen:if>
  <div class="section">
  <h3 class="textHeading">{xen:phrase interact}</h3>
  <div class="primaryContent">
  <div class="pairsColumns contactInfo">
  <dl>
  <dt>{xen:phrase content}:</dt>
  <dd><ul>
  <xen:hook name="member_view_search_content_types">
  <li><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}">{xen:phrase find_all_content_by_x, 'name={$user.username}'}</a></li>
  <li><a href="{xen:link search/member, '', 'user_id={$user.user_id}', 'content=thread'}">{xen:phrase find_all_threads_by_x, 'name={$user.username}'}</a></li>
  </xen:hook>
  </ul></dd>
  </dl>
  <xen:if is="{$canStartConversation}">
  <dl><dt>{xen:phrase conversation}:</dt> <dd><a href="{xen:link 'conversations/add', '', 'to={$user.username}'}">{xen:phrase start_conversation}</a></dd></dl>
  </xen:if>
  <xen:if is="{$customFieldsGrouped.contact}">
  <xen:foreach loop="$customFieldsGrouped.contact" value="$field">
  <xen:include template="custom_field_view" />
  </xen:foreach>
  </xen:if>
  </div>
  </div>
  </div>
  </li>
   
  <xen:if is="{$warningCount}">
  <li id="warnings" class="profileContent" data-loadUrl="{xen:link members/warnings, $user}">
  {xen:phrase loading}...
  <noscript><a href="{xen:link members/warnings, $user}">{xen:phrase view}</a></noscript>
  </li>
  </xen:if>
   
  <xen:hook name="member_view_tabs_content" params="{xen:array 'user={$user}'}" />
  </ul>
   
</div>
<div class="clr"></div>
</div>
</div>


<div class="pf_colsecond">
  <div class="pf_colsecond_wp">
  <div class="avatarScaler">
   
<div class="gcol01">
</div>

<div id="flower_box" class="bxmodule01 bxblog">
  <div class="bxcont">
  <!-- begin: Box content -->
  <ul class="list01">
<xen:hook name="member_view_info_block">
  <li><img src="http://static.group.zing.vn/images/me_app/icon_lnav01.gif" alt=""> {xen:phrase joined} : {xen:date $user.register_date}</li>
  <li><img src="http://static.group.zing.vn/images/me_app/icon_lnav03.gif" alt=""> {xen:phrase trophy_points}: <a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger">{xen:number $user.trophy_points}</a></li>
  <xen:if is="{$canViewWarnings}"><li><img src="http://static.group.zing.vn/images/me_app/icon_lnav05.gif" alt=""> {xen:phrase warning_points}:{xen:number $user.warning_points}</li></xen:if>
  <xen:if is="{$canViewOnlineStatus}"><li><img src="http://static.group.zing.vn/images/me_app/icon_lnav02.gif" alt=""> {xen:phrase last_activity}: <xen:datetime time="$user.effective_last_activity" /></li></xen:if>
</xen:hook>
</ul>
  <!-- end: Box content -->
  <div class="clr"></div>
   
  </div>
</div>
   
  </div>
  </div>
   
  <xen:include template="ad_member_view_below_avatar" />
  <xen:hook name="member_view_sidebar_start" params="{xen:array 'user={$user}'}" />
   
  <xen:hook name="member_view_sidebar_middle1" params="{xen:array 'user={$user}'}" />
  <div class="followBlocks">
  <xen:if is="{$following}">
  <div class="section">
  <h3 class="subHeading textWithCount" title="{xen:phrase x_is_following_y_members, 'name={$user.username}', 'count={xen:number $followingCount}'}">
  <span class="text">{xen:phrase following}</span>
  <a href="{xen:link 'members/following', $user}" class="count OverlayTrigger">{xen:number $followingCount}</a>
  </h3>
  <div class="primaryContent avatarHeap">
  <ol>
  <xen:foreach loop="$following" key="$followUserId" value="$followUser">
  <li>
  <xen:avatar user="$followUser" size="s" text="{$followUser.username}" class="Tooltip" title="{$followUser.username}" itemprop="contact" />
  </li>
  </xen:foreach>
  </ol>
  </div>
  <xen:if is="{$followingCount} > {xen:count $following, false}">
  <div class="sectionFooter"><a href="{xen:link 'members/following', $user}" class="OverlayTrigger">{xen:phrase show_all}</a></div>
  </xen:if>
  </div>
  </xen:if>
  <xen:if is="{$followers}">
  <div class="section">
  <h3 class="subHeading textWithCount" title="{xen:phrase x_is_being_followed_by_y_members, 'name={$user.username}', 'count={xen:number $followersCount}'}">
  <span class="text">{xen:phrase followers}</span>
  <a href="{xen:link 'members/followers', $user}" class="count OverlayTrigger">{xen:number $followersCount}</a>
  </h3>
  <div class="primaryContent avatarHeap">
  <ol>
  <xen:foreach loop="$followers" key="$followUserId" value="$followUser">
  <li>
  <xen:avatar user="$followUser" size="s" text="{$followUser.username}" class="Tooltip" title="{$followUser.username}" itemprop="contact" />
  </li>
  </xen:foreach>
  </ol>
  </div>
  <xen:if is="{$followersCount} > {xen:count $followers, false}">
  <div class="sectionFooter"><a href="{xen:link 'members/followers', $user}" class="OverlayTrigger">{xen:phrase show_all}</a></div>
  </xen:if>
  </div>
  </xen:if>
  </div>
  <xen:hook name="member_view_sidebar_middle2" params="{xen:array 'user={$user}'}" />
  <xen:if hascontent="true">
  <div class="section infoBlock">
  <dl class="secondaryContent pairs">
  <xen:contentcheck>
  <xen:if is="{$user.gender}">
  <dt>{xen:phrase gender}:</dt>
  <dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
  </xen:if>
  <xen:if is="{$birthday}">
  <dt>{xen:phrase birthday}:</dt>
  <dd><span itemprop="dob">{xen:date $birthday.timeStamp, $birthday.format}</span> <xen:if is="{$birthday.age}">({xen:phrase age}: {xen:number $birthday.age})</xen:if></dd>
  </xen:if>
  <xen:if is="{$user.homepage}">
  <dt>{xen:phrase home_page}:</dt>
  <dd><a href="{xen:string censor, $user.homepage, 'x'}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</a></dd>
  </xen:if>
  <xen:if is="{$user.location}">
  <dt>{xen:phrase location}:</dt>
  <dd><a href="{xen:link misc/location-info, '', 'location={xen:string censor, $user.location, 'x'}'}" rel="nofollow" target="_blank" itemprop="address">{xen:string censor, $user.location}</a></dd>
  </xen:if>
  <xen:if is="{$user.occupation}">
  <dt>{xen:phrase occupation}:</dt>
  <dd itemprop="role">{xen:string censor, $user.occupation}</dd>
  </xen:if>
  </xen:contentcheck>
  </dl>
  </div>
  </xen:if>
   
  <xen:if is="{$user.allow_view_profile} == 'everyone'">
  <xen:include template="sidebar_share_page">
  <xen:set var="$url">{xen:link canonical:members, $user}</xen:set>
  </xen:include>
  </xen:if>
  <xen:hook name="member_view_sidebar_end" params="{xen:array 'user={$user}'}" />
   
  <xen:include template="ad_member_view_sidebar_bottom" />
</div>
</div>
</div>
</div>


Ищем шаблон member_view.css

Удаляем весь код в шаблоне, и ставим этот код
Код: 
.profilePage
{
   @property "profilePage";

   @property "/profilePage";
}

.profilePage .primaryUserBlock .userBanners .userBanner
   {
     display: inline-block;
     margin-bottom: 5px;
   }

{xen:helper clearfix, '.profilePage'}

.profilePage .mast
{
   float: left;
   width: @profilePageSidebarWidth;
   padding-right: 10px;
   border-right: 1px solid @primaryLighterStill;
   
}

.profilePage .mainProfileColumn
{
   margin-left: {xen:calc '@profilePageSidebarWidth + 10'}px;
   border-left: 1px solid black;
   zoom: 1;
}

/** ************************ **/

.profilePage .mast .section
{
}
   
   .profilePage .mast .sectionFooter
   {
     border-left: 1px solid black;
     border-right: 1px solid black;
     text-align: right;
     
   }

/** ************************ **/

.profilePage .mast .followBlocks .section
{
   margin-bottom: 20px;  
   
}



.profilePage .mast .followBlocks .primaryContent.avatarHeap
{
   border: 1px solid @primaryLighterStill;
   border-top: none;
   
}

/** ************************ **/

.profilePage .mast .section.infoBlock
{
   @property "profilePageSidebarInfoBlock";
   padding: 2px;
   margin-bottom: 20px;
   border: 1px solid @primaryLighterStill;
   border-radius: 4px;
   @property "/profilePageSidebarInfoBlock";
}

   .profilePage .mast .section.infoBlock .primaryContent,
   .profilePage .mast .section.infoBlock .secondaryContent
   {
     overflow: hidden;
   }

   .profilePage .mast .section.infoBlock .primaryContent:last-child,
   .profilePage .mast .section.infoBlock .secondaryContent:last-child
   {
     border: none;
   }

   .profilePage .infoBlock dt
   {
     @property "profilePageSidebarInfoBlockDt";
     font-size: 11px;
     margin-top: 5px;
     @property "/profilePageSidebarInfoBlockDt";
   }

   .profilePage .infoBlock dd
   {
     @property "profilePageSidebarInfoBlockDd";
     margin-bottom: 5px;
     @property "/profilePageSidebarInfoBlockDd";
   }

   .profilePage .infoBlock .dob,
   .profilePage .infoBlock .age
   {
     white-space: nowrap;
   }
   
   .profilePage .mast .shareControl
   {
     margin-top: 10px;
   }

/* ***************************** */
/** [ Items...........(count) ] **/

.textWithCount
{
   overflow: hidden; zoom: 1;
}

   .textWithCount .text
   {
     float: left;
   }

   .textWithCount .count
   {
     float: right;
   }
   
     .textWithCount.subHeading .text
     {     
       color: @secondaryDarker;
     }
     
     .textWithCount.subHeading .count
     {
       margin: -3px 0;
       padding: 2px 6px;
       border-radius: 5px;
       border: 1px solid @secondaryLighter;
       background-color: @secondaryLightest;
       color: @secondaryDarker;
     }

/** ************************ **/

.profilePage .primaryUserBlock
{
   border-top: 1px solid @primaryLighterStill;
}

.profilePage .primaryUserBlock .mainText
{
   padding-bottom: {xen:calc '@profilePageTabHeight + 14'}px;
}

   .profilePage .primaryUserBlock .followBlock
   {
     float: right;
     font-size: 11px;
     text-align: right;
     overflow: hidden; zoom: 1;
   }
   
     .profilePage .primaryUserBlock .followBlock li
     {
       float: right;
       margin-left: 10px;
     }
   
     .profilePage .primaryUserBlock .followBlock .muted
     {
       font-size: 10px;
       clear: both;
     }

   .profilePage .primaryUserBlock h1
   {
     @property "profilePageUsername";
     font-size: 18pt;
     @property "/profilePageUsername";
   }

   .profilePage .primaryUserBlock .userBlurb
   {
     margin-bottom: 5px;
   }
   
   .profilePage .primaryUserBlock .userBanners .userBanner
   {
     display: inline-block;
     margin-bottom: 5px;
   }
   
   .profilePage .primaryUserBlock .userStatus
   {
     @property "messageText";
     font-size: 11pt;
     font-family: Georgia, "Times New Roman", Times, serif;
     line-height: 1.4;
     @property "/messageText";
     
     @property "profilePageUserStatus";
     font-style: italic;
     font-size: 9pt;
     padding-top: 5px;
     margin-top: 5px;
     @property "/profilePageUserStatus";
   }
   
   .profilePage .primaryUserBlock .deleteSpam
   {
     font-size: 11px;
     margin-left: 10px;
   }
   
   .profilePage .primaryUserBlock .lastActivity
   {
     @property "profilePageLastActivityText";
     font-size: 11px;
     padding-top: 5px;
     margin-top: 5px;
     border-top: 1px solid @primaryLighterStill;
     @property "/profilePageLastActivityText";
   }
   
     .profilePage .primaryUserBlock .userStatus .DateTime
     {
       color: @mutedTextColor;
       font-size: 10px;
     }
   
   .profilePage .primaryUserBlock .primaryContent,
   .profilePage .primaryUserBlock .secondaryContent
   {
     padding-left: @profilePageTabInset;
     border: none;
   }

.profilePage .tabs.mainTabs
{
   padding: 0 @profilePageTabInset;   
   margin-top: -{xen:calc '@profilePageTabHeight + 1'}px;
   min-height: {xen:calc '@profilePageTabHeight + 1'}px;
   height: auto;
   position: relative; /* ensure separate stacking context from .mainText */
   background: @secondaryContent.background-color;
}

   .profilePage .tabs.mainTabs li a
   {
     padding-left: @profilePageTabHeight;
     padding-right: @profilePageTabHeight;     
     line-height: @profilePageTabHeight;
     height: @profilePageTabHeight;
     
     @property "profilePageTab";
     font-weight: bold;
     @property "/profilePageTab";   
   }
   
     .profilePage .tabs.mainTabs li a:hover
     {
       @property "profilePageTabHover";
       background-color: @primaryLighter;
       @property "/profilePageTabHover";
     }
   
   .profilePage .tabs.mainTabs li.active a
   {
     @property "profilePageTabSelected";
     background-color: @contentBackground;
     @property "/profilePageTabSelected";
   }

.profilePage .profileContent
{
   margin-left: @profilePageTabInset;
}

   .profilePage .profilePoster
   {
     padding-bottom: 10px;
     position: relative;
   }
   
     .profilePage .profilePoster textarea
     {
       height: 54px;
       width: 100%;
       box-sizing: border-box;
       *width: 98%;
       resize: vertical;
     }
     
     .profilePage .profilePoster .submitUnit
     {
       margin-top: 5px;
       text-align: right;
     }

.profilePage .profileContent .InlineMod
{
   overflow: hidden; zoom: 1;
   
}

.contactInfo,
.aboutPairs
{
   max-width: 500px;
}

   .contactInfo dl,
   .aboutPairs dl
   {
     margin-bottom: 5px;
   }
   
   .contactInfo dt,
   .aboutPairs dt
   {
     width: 30%;
   }
   
   .contactInfo dd,
   .aboutPairs dd
   {
     width: 68%;
   }

.aboutPairs
{
   margin-bottom: 1em;
}

.signature
{
   @property "messageText";
   font-size: 11pt;
   font-family: Georgia, "Times New Roman", Times, serif;
   line-height: 1.4;
   @property "/messageText";
   
   /*border: 1px solid @primaryLighterStill;
   padding: 10px;*/
}

.profilePage .eventList li
{
   padding-left: 0;
}

.profilePage .eventList:first-of-type li:first-child
{
   padding-top: 0;
}

.profilePage .searchResult:first-child
{
   margin-top: -5px;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
   .Responsive .profilePage
   {
     display: table;
     table-layout: fixed;
     width: 100%;
     box-sizing: border-box;
   }

   .Responsive .profilePage .mast
   {
     display: table-footer-group;
     
     float: none;
     padding-right: 0;
     border-right: none;
     margin: 0 auto;
     margin-top: 10px;
   }

   .Responsive .profilePage .avatarScaler
   {
     text-align: center;
   }

   .Responsive .profilePage .mast .sharePage
   {
     display: none;
   }

   .Responsive .profilePage .profileContent
   {
     margin-left: 0;
   }

   .Responsive .profilePage .mainProfileColumn
   {
     display: table-header-group;

     margin-left: 0;
     border-left: none;
     border-bottom: 1px solid @primaryLighter;
     padding-bottom: 10px;
   }

   .Responsive .profilePage .mast > *
   {
     max-width: 192px;
     margin-left: auto;
     margin-right: auto;
   }
}

@media (max-width:@maxResponsiveNarrowWidth)
{
   .Responsive .warningList .warningExpiry
   {
     display: none;
   }
}

@media (max-width:340px)
{
   .Responsive .profilePage .mast > *
   {
     max-width: none;
   }
}
</xen:if>
.profilePage
{
  @property "profilePage";

  @property "/profilePage";
}
{xen:helper clearfix, '.profilePage'}
.profilePage .mast
{
  float: left;
  width: @profilePageSidebarWidth;
  padding-right: 10px;
  border-right: 1px solid @primaryLighterStill;
}
.profilePage .main
{
  margin-left: {xen:calc '@profilePageSidebarWidth + 10'}px;
  border-left: 1px solid @primaryLighterStill;
  zoom: 1;
}
/** ************************ **/
.profilePage .mast .section
{
}
  .profilePage .mast .sectionFooter
  {
  border-left: 1px solid @primaryLighterStill;
  border-right: 1px solid @primaryLighterStill;
  text-align: right;
  }
/** ************************ **/
#followBlockFon {
background: #222;
border: 1px solid black;
float:right;
padding: 10px;
}
.profilePage .mast .followBlocks .section
{
  margin-bottom: 20px;
}
.profilePage .mast .followBlocks .primaryContent.avatarHeap
{
  border: 1px solid @primaryLighterStill;
  border-top: none;
   
}
/** ************************ **/
.profilePage .mast .section.infoBlock
{
  @property "profilePageSidebarInfoBlock";
  padding: 2px;
  margin-bottom: 20px;
  border: 1px solid @primaryLighterStill;
  border-radius: 4px;
  @property "/profilePageSidebarInfoBlock";
}
  .profilePage .mast .section.infoBlock .primaryContent,
  .profilePage .mast .section.infoBlock .secondaryContent
  {
  overflow: hidden;
  }
  .profilePage .mast .section.infoBlock .primaryContent:last-child,
  .profilePage .mast .section.infoBlock .secondaryContent:last-child
  {
  border: none;
  }
  .profilePage .infoBlock dt
  {
  @property "profilePageSidebarInfoBlockDt";
  font-size: 11px;
  margin-top: 5px;
  @property "/profilePageSidebarInfoBlockDt";
  }
  .profilePage .infoBlock dd
  {
  @property "profilePageSidebarInfoBlockDd";
  margin-bottom: 5px;
  @property "/profilePageSidebarInfoBlockDd";
  }
  .profilePage .mast .shareControl
  {
  margin-top: 10px;
  }
/* ***************************** */
/** [ Items...........(count) ] **/
.textWithCount
{
  overflow: hidden; zoom: 1;
}
  .textWithCount .text
  {
  float: left;
  }
  .textWithCount .count
  {
  float: right;
  }
  .textWithCount.subHeading .text
  {   
  color: @secondaryDarker;
  }
   
  .textWithCount.subHeading .count
  {
  margin: -3px 0;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid @secondaryLighter;
  background-color: @secondaryLightest;
  color: @secondaryDarker;
  }
/** ************************ **/
.profilePage .primaryUserBlock
{
  border-top: 1px solid @primaryLighterStill;
}
.profilePage .primaryUserBlock .mainText
{
  padding-bottom: {xen:calc '@profilePageTabHeight + 14'}px;
}
  .profilePage .primaryUserBlock .followBlock
  {
  float: right;
  font-size: 11px;
  text-align: right;
  overflow: hidden; zoom: 1;
  }
  .profilePage .primaryUserBlock .followBlock li
  {
  float: right;
  margin-left: 10px;
  }
  .profilePage .primaryUserBlock .followBlock .muted
  {
  font-size: 10px;
  clear: both;
  }
 #fonMuted-OFF {
 color: whitesmoke;
 background: darkred;
 float: right;
 border: 1px solid black;
 box-shadow: 0px 0px 3px 2px black;
 border-radius: 5px;
 padding: 5px;
 opacity: 1;
 }
  #fonMuted-ON
  {
 color: whitesmoke;
  float: right;
 background: darkgreen;
 border: 1px solid black;
 box-shadow: 0px 0px 3px 2px #333;
 border-radius: 5px;
 padding: 5px;
 opacity: 1;
 }
 .LikeText > a
{
   color: white;
   font-weight: bold;
   text-shadow: 0 0 3px #54803a;
   text-decoration: underline;
   
}
 .likesSummary  {
     color: white; background-color: #90d666; border: 1px solid #6ea84a; text-shadow: 0 0 3px #54803a; box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);}

 }
  .profilePage .primaryUserBlock h1
  {
  @property "profilePageUsername";
  font-size: 18pt;
  @property "/profilePageUsername";
  }
  .profilePage .primaryUserBlock .userStatus
  {
  @property "messageText";
  font-size: 11pt;
  font-family: Georgia, "Times New Roman", Times, serif;
  line-height: 1.4;
  @property "/messageText";
   
  @property "profilePageUserStatus";
  font-style: italic;
  font-size: 9pt;
  padding-top: 5px;
  margin-top: 5px;
  @property "/profilePageUserStatus";
  }
  .profilePage .primaryUserBlock .deleteSpam
  {
  font-size: 11px;
  margin-left: 10px;
  }
  .profilePage .primaryUserBlock .lastActivity
  {
  @property "profilePageLastActivityText";
  font-size: 11px;
  padding-top: 5px;
  margin-top: 5px;
  border-top: 1px solid @primaryLighterStill;
  @property "/profilePageLastActivityText";
  }
  .profilePage .primaryUserBlock .userStatus .DateTime
  {
  color: @mutedTextColor;
  font-size: 10px;
  }
  .profilePage .primaryUserBlock .primaryContent,
  .profilePage .primaryUserBlock .secondaryContent
  {
  padding-left: @profilePageTabInset;
  border: none;
  }
.profilePage .tabs.mainTabs
{
  padding: 0 @profilePageTabInset;
  margin-top: -{xen:calc '@profilePageTabHeight + 1'}px;
  min-height: {xen:calc '@profilePageTabHeight + 1'}px;
  height: auto;
  position: relative; /* ensure separate stacking context from .mainText */
  background: @secondaryContent.background-color;
}
  .profilePage .tabs.mainTabs li a
  {
  padding-left: @profilePageTabHeight;
  padding-right: @profilePageTabHeight;   
  line-height: @profilePageTabHeight;
  height: @profilePageTabHeight;
   
  @property "profilePageTab";
  font-weight: bold;
  @property "/profilePageTab";
  }
  .profilePage .tabs.mainTabs li a:hover
  {
  @property "profilePageTabHover";
  background-color: @primaryLighter;
  @property "/profilePageTabHover";
  }
  .profilePage .tabs.mainTabs li.active a
  {
  @property "profilePageTabSelected";
  background-color: @contentBackground;
  @property "/profilePageTabSelected";
  }
.profilePage .profileContent
{
  margin-left: @profilePageTabInset;
}
  .profilePage .profilePoster
  {
  padding-bottom: 10px;
  position: relative;
  }
  .profilePage .profilePoster textarea
  {
  height: 54px;
  width: 100%;
  box-sizing: border-box;
  *width: 98%;
  resize: vertical;
  }
   
  .profilePage .profilePoster .submitUnit
  {
  margin-top: 5px;
  text-align: right;
  }
.profilePage .profileContent .InlineMod
{
  overflow: hidden; zoom: 1;
}
.contactInfo,
.aboutPairs
{
  width: 500px;
}
  .contactInfo dl,
  .aboutPairs dl
  {
  margin-bottom: 5px;
  }
  .contactInfo dt,
  .aboutPairs dt
  {
  width: 30%;
  }
  .contactInfo dd,
  .aboutPairs dd
  {
  width: 68%;
  }
.aboutPairs
{
  margin-bottom: 1em;
}
.signature
{
  @property "messageText";
  font-size: 11pt;
  font-family: Georgia, "Times New Roman", Times, serif;
  line-height: 1.4;
  @property "/messageText";
  /*border: 1px solid @primaryLighterStill;
  padding: 10px;*/
}
/* Button ---------- */
.btn_newprofile{background-image:url(@imagePath/btn_newprofile-1.00.gif);background-repeat:no-repeat;height:25px;float:left;text-indent:-9999px;}
.btn_newprofile.givegift{width:79px;background-position:-168px -37px;}
.btn_newprofile.tease{width:79px;background-position:0 -37px;}
.btn_newprofile.message{width:79px;background-position:-84px -37px;}
.btn_newprofile.sharefrd{width:120px;background-position:0 -73px;}
.btn_newprofile.setbackground{width:89px;background-position:0 -109px;}
.btn_newprofile.setmusic{width:87px;background-position:-93px -109px;}
.btn_newprofile.editinfo{width:93px;background-position:-124px -73px;}
.btn_newprofile.viewinfo{width:79px;background-position:-221px -73px;}
.btn_newprofile.message{width:79px;background-position:-84px -37px;}
.btn_newprofile.housewall{width:89px;background-position:-183px -109px;}
.btn_newprofile.makefrdpf{width:87px;background-position:0 -144px;}
.btn_newprofile.fanspf{width:87px;background-position:-91px -144px;}
.btn_newprofile.likedpf{width:69px;background-position:-182px -144px;}
.btn_newprofile.votepf{width:90px;background-position:-150px 0;}
.btn_newprofile.acceptfrd{width:132px;background-position:0 -179px;}
.btn_newprofile.shop{width:60px;background-position:-136px -179px;}
.btn_newprofile.utility{width:71px;background-position:-200px -179px;}
.marightpf{margin-right:5px;}
/* @@@@@[ PROFILE COVER BANNER ]@@@@@ */
.ctnbtnleftpf{margin-bottom:12px;}
#left-contentpf{ display: inline;float: left;margin: 0 17px 0 0;position: relative;text-align: left;width: 516px;}
#main-contentpf{background:#fff;display: block;float: left;padding:15px 16px;position: relative;}
#mainprofile{background:#fff;width:978px;height:1%;border:1px solid black;margin:0 auto;}
.ctncoverpf{ background:#c8d4e5;position:relative;}
.avatarcoverpf{ position:absolute;top:5px;left:15px;width:180px;height:180px;background:#fff;border:1px solid #a2a2a2;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;padding:5px;z-index:2}
.imgcoverpf{width:980px;height:150px; background: #333; overflow:hidden;position:relative;z-index:1;}
.imgcoverpf.cursormove{cursor:move;}
.infocoverpf{ padding:12px 15px 10px; margin:0 1px; height:88px; background:#222; box-shadow: 0px 0px 5px 2px black;}
.usernamecoverpf{width:313px;padding-left:205px;float:left;}
.usernamecoverpf.fanpage{width:443px;}
.usernamecoverpf .txtusername_pro{font-size:18px;font-weight:bold;line-height:25px;margin:0 5px 7px 0;display:block;max-width:310px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;float:left;}
.usernamecoverpf .txtusername_pro.fanpage{max-width:431px;}
.usernamecoverpf .txtpointpf{color:#fa9300;}
.usernamecoverpf .perforpf{ clear:both; margin-bottom:8px; font-size:12px; text-align:left; overflow:hidden;}
.usernamecoverpf .profile_like_btn, .usernamecoverpf .profile_fan_btn {text-indent:-999999em;display: inline-block;height:22px;vertical-align:6px;margin: 0 5px;*vertical-align:middle;}
.usernamecoverpf .profile_like_btn {width:63px;background-position: 0 -192px;}
.usernamecoverpf .profile_fan_btn {width:78px;background-position: -196px -192px;}
.icodotpf{background-position: -152px -34px;height:11px;margin:0 5px;width:3px;display: inline-block;}
ul.coreappf{width:400px;float:left; margin-top:2px;}
ul.coreappf.fanpage{width:300px;}
ul.coreappf li{width:98px; margin-left:2px; float:left; display: inline-block; overflow:hidden;}
ul.coreappf li a{display:inline-block}
ul.coreappf li a.imgcoreappf{width:96px; height:70px; border:1px solid #e2e1e1; overflow:hidden; vertical-align:bottom;}
ul.coreappf li .coreappf_name{clear:both; text-align:center; font-weight:bold;font-size:10px;}
ul.coreappf li .coreappf_name a{ color:#444;text-shadow: -1px 1px #fff, 1px 1px #fff}
ul.coreappf li .coreappf_name span{color:#888; font-size:10px; font-weight:normal;}
.imgsptcover{background-image: url(@imagePath/img_newpofile-1.00.png);background-repeat:no-repeat;}
.imgsptcover.editavatar{width:91px;height:20px;background-position:-101px 0;position:absolute;bottom:10px;right:5px;}
.imgsptcover.editavatar:hover{background-position:-101px -24px;}
.imgsptcover.editcover{width:97px;height:20px;background-position:0 0;position:absolute;bottom:10px;right:10px;}
.imgsptcover.editcover:hover{background-position:0 -24px;}
.imgsptcover.savechange{width:130px;height:36px;background-position:0 -70px;position:absolute;top:60%;left:12.5%;}
.imgsptcover.cancelchange{width:89px;height:36px;background-position:-137px -70px;position:absolute;position:absolute;top:60%;left:58.5%;}
.imgsptcover.badpress{width:12px; height:12px; background-position:-211px -116px; display:inline-block; margin-right:5px; vertical-align:-2px;}
.imgsptcover.icoradiobg{width:32px; height:32px; background-position:0 -147px; display:inline-block; margin-right:5px; vertical-align:-6px;}
.imgsptcover.icoradiobg.checkpf{background-position:-38px -147px;}
.dragmovepf{background: url(@imagePath/overlay_black.png) repeat 0 0;padding:15px 20px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;position:absolute;top:37%;left:42%; height:90px; box-shadow:0 0 8px #fff;}
.bgusernamepf{position:absolute;top:15px;left:15px;}
.bgusernamepf .usernamepf{font-size:14px; font-weight:bold; color:#000; background: url(@imagePath/overlay_white.png) repeat 0 0; background:#fff; opacity:0.65; padding:2px 5px 3px; margin-bottom:1px;}
.bgusernamepf .usernamepf.linkpf{font-size:12px; background: url(@imagePath/overlay_black.png) repeat 0 0; color:#fff;background:#000; opacity:0.6;}
.dragmovepf .textcover{color:#fff;font-size:20px; font-weight:bold;}
.dragmovepf .textcoversml{font-size:12px; font-weight:bold; text-align:center; color:#ccc; margin-top:10px;}
.icocursormove{width:20px;height:20px;background-position:0 -48px;margin-right:8px;display:inline-block;vertical-align:-4px;}
.icomorertpf{width:3px; height:6px; background-position:-136px -48px; margin-right:3px; display:inline-block;}
.icoarrowtitpf{width:5px; height:10px; background-position:-143px -48px; margin:5px 8px 0; display:inline-block;}
.icosongpf{width:18px; height:18px; background-position:-179px -45px; margin-right:6px; display:inline-block; vertical-align:-3px;}
.icoeventpf{width:18px;height:18px; background-position:-206px -45px; margin-right:6px; display:inline-block; vertical-align:-3px;}
.levelnotify{width:26px; height:26px; background-position:-174px -116px; float:left; margin-right:5px;}
/* Main Timetime ---------- */
.pf_ctnprofile{width:100%;height:1%; background:#333;border-left:1px solid black;border-right:1px solid black;padding-top:15px;}
.pf_ctnprofile.ctntabpf{padding-top:0;}
.pf_ctnprofile .onlycol{padding:0 15px 15px;}
.pf_ctnprofile .pf_colfirst{width:639px;margin-right:0px;float:left;}
.pf_ctnprofile .pf_colsecond{width:306px;margin-right:23px;float:right; position: relative;}
.pf_ctnprofile .pf_colsecond .pf_colsecond_wp {width: 306px;}
@media screen and (-webkit-min-device-pixel-ratio:0) {.moveLeft .pf_colsecond_wp.fixed_pos{margin-left: -95px;}}
@media \0screen {.moveLeft .pf_colsecond_wp.fixed_pos{margin-left: -95px;}}
.pf_maincolst{background:#333; padding-right:15px;}
.pf_maincolview{background:#333; padding:0px 6px 15px 15px;}
.pf_ctnprofilemain{width:100%; float:left;}
ul.pf_menutab{ float:left;border-bottom:1px solid #d4ddea; border-top:1px solid #d4ddea;width:100%; margin-bottom:15px; background-color:#eff2f6;color:#444;line-height:17px; box-shadow:0 18px 12px 0px #fff inset;}
ul.pf_menutab li{ float:left;display:block;border-right:1px solid #d4ddea; border-left:1px solid #fff; height:32px;}
ul.pf_menutab li.end{border-right:none;}
ul.pf_menutab li.end a{ padding:0 27px 0 26px}
ul.pf_menutab li a{font-weight:bold;color:#444;padding:0 19px;height:32px;line-height:30px;display:block;}
ul.pf_menutab li a:hover{text-decoration:none;background:#fff;}
ul.pf_menutab li a.current{background:#333;border-bottom:1px solid black;border-right:none; margin-left:-1px;}
.pf_mainprofile{ clear:both;background:#333;*height:1%}
.pf_status{ position:relative;margin:0 -5px 15px 0; background:#333; font-size:16px; padding:0 20px 15px 15px;line-height:normal; border-bottom:1px solid #eaeff4; word-wrap: break-word;}
.pf_timestt{ color:#808080; display:inline-block; padding-top:5px; font-size:11px;}
.icostt_left{width:13px;height:8px;background-position:-25px -48px;display:inline-block;margin-right:5px;vertical-align:5px;}
.icostt_right{width:13px;height:8px;background-position:-42px -48px;display:inline-block;margin:0 5px;vertical-align:5px;}
.icodelstt{width:18px;height:16px;background-position:-58px -48px;position:absolute;top:0;right:0;}
.icodelstt:hover{background-position:-78px -48px;}PROFILE COVER BANNER
.imgtimeline{ position:absolute; top:-7px; right:-7px; background-position:-104px -48px; width:26px; height:14px; z-index:9;}
.timeline_feed{position:absolute; top:-11px; right:-12px;height:19px; background-position:0 0 ; color:#fff; padding-left:30px; font-size:11px; float:left; display:block;line-height:18px;}
.timeline_feed .ltimgtimeline{width:11px; height:19px; background-position: right -20px; float:left; display:block;}
/*Profile new*/
.bgtimeline{ background-image:url(@imagePath/timeline_bar-1.01.png); background-repeat:no-repeat;}
.timeline_stt{position:absolute; bottom:-11px; right:-7px;height:21px; background-position:0 -40px; color:#333; padding-left:30px; font-size:11px; float:left; display:block;line-height:18px; font-weight:bold;}
.timeline_stt span{ line-height:19px;}
.timeline_stt .ltimgtimeline{width:11px; height:22px; background-position: -139px -61px; float:left; display:inline-bolck;}
.status_button{height:28px; float:right; overflow:hidden;}
.status_colshare{float:left; color:#888; margin-top:5px;}
.pf_btnshare{width:83px; height:28px; background-position:0 -116px; display:inline-block;}
.pf_btnshare:hover{background-position:-88px -116px;}
#status_att ul.att li img {margin: 0 4px 4px 0;}
/* */
.topdot{display:block; background:none; border-left:1px solid #fff; border-right:1px solid #fff; height:1px; overflow:hidden;*display:inline-table;}
.feed_tab{display:block; height:21px; margin:0 15px;}
.feed_tab a{margin-right:5px; display:inline-block; overflow:hidden; height:20px; text-decoration:none; text-align:center; font-weight:bold;}
.feed_tab a:hover{color:#f1f2f3;}
.feed_tab a.acti{background:#75BDE5;border-bottom: 1px solid #429ACA; color:#fff;}
.feed_tab a.unacti{background:#E9E9E9;border-bottom: 1px solid #C6C6C6;color: #555;}
.feedtpl{border-top:1px solid #eaeff4; margin-top:17px; padding:15px 15px 0; display:block; _display:inline-block; position:relative;}
.feedlt{width:50px; float:left;}
.feedlt a{display:block;}
.feedrt{margin-left:60px;}
/* Profile right column ---------- */
.bxmodule01 {margin-bottom:20px;margin-top:20px;}
.bxmodule01 .bxtitle{font-size:11px;height:16px;clear:both;line-height:normal;text-transform:uppercase;}
.bxmodule01 .bxtitle strong{float:left;background-color:#fff;padding-right:5px;margin-top:-4px; min-width:90px; max-width:156px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bxmodule01 .bxtitle a.morertpf{float:right; background-color:#fff; padding-left:5px; margin-top:-3px; font-size:10px; color:#888; text-decoration:underline;}
.bxmodule01 .bxtitle a.morertpf:hover{ text-decoration:none;color:#888;}
.bxmodule01 .bxtitle a {color:#444;}
.bxmodule01 .bxtitle a:hover{ text-decoration:underline; color:#476DA4;}
.bxmodule01 .bxtitlenum{color:#888;font-weight:normal}
.bxmodule01 .bxtitleline{height:7px;background:#f0f3f7;border-bottom:1px solid #c8d4e5;display:block;border-bottom:1px solid #c8d4e5;margin-top:4px;}
.bxmodule01 .bxcont{padding:3px 0 0;}
/*Mem Info*/
.gcol01 {
  padding: 5px 5px;
  font-weight: bold;
  margin: 5px;
  border: none;
  font-size: 11px; }
.gcol01 {
  width: 100%;
  float: left;
  display: inline;
  margin: 0; }
.grpviewtop {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  background: url(@imagePath/bgd_grpviewtop.gif) no-repeat;
  padding: 0 10px;
  text-align: center;
  margin-top: 2px; }
.list01 {
  margin: 0;
  padding: 5px 0 0 0;
  list-style: none;
  width: 100%;
  }
  .list01 li {
  border-bottom: 1px solid lightgray;
  padding: 15px 7px;  width: 100%; background: #222; box-shadow: 0px 0px 3px 1px black;}

  .list01 li a, .list01 li img {
  margin: 0 2px 0 0;
  vertical-align: middle;  }
   
  .comment  {
  background: #222;
  }

Демо:
2014-04-01 10-59-45 Скриншот экрана.png
2014-04-01 11-00-38 Скриншот экрана.png
Назад
Сверху Снизу