.message-userExtras dl {
 padding: 5px 8px 5px 25px;
 background-color: #fff;
 margin: 0 0 3px;
 position: relative;
 font-size: 10px;
 height: 24px;
 border-radius: 15px;
 border: 1px solid #e4e4e4;
}

.message-userExtras dl i {
 position: absolute;
 top: 0;
 left: 0;
 width: 24px;
 height: 24px;
 background-color: #ffc168;
 color: #fff;
 display: block;
 text-align: center;
 line-height: 20px;
 font-size: 13px;
 text-shadow: 0 1px 0 #654e2f;
}
.pairs.pairs--justified > dt {
    color: #212121;
}
/*
* Droid Arabic Kufi (Arabic) https://www.google.com/fonts/earlyaccess
*/
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot);
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf) format('truetype');
}
/*-------------------------------- Navbar & Forum category -----------------------------------*/
.p-nav {
    line-height: 40px;
}
.p-sectionLinks {
    border-bottom: 1px solid #8ab107;
}
.p-sectionLinks {
	padding: 6px 0;
    margin-bottom: 10px;

}
.p-sectionLinks .p-navEl {
    background-color: #98c010;
	color: #fff;
    margin-left: 5px;
    border-radius: 22px;
}
.p-sectionLinks-list .p-navEl.is-menuOpen {
    background: rgb(27, 143, 161);

}
.p-sectionLinks-list .p-navEl-link, .p-sectionLinks-list .p-navEl-splitTrigger {

    padding-top: 2px;
    padding-bottom: 2px;

}

/*-------------------------------- //End Navbar & Forum category -----------------------------------*/
/*-------------------------------- sidebar -----------------------------------*/
.contentRow-main {
    font-size: 13px;
}
.contentRow-main a {
    color: #505050;
}
.pairs {
    font-size: 13px;
    padding: 5px;
}
.contentRow-main.contentRow-main--close {
    border-bottom: 1px solid #ececec;
	line-height: 25px;
	font-size: 12px;
}
/*-------------------------------- //End sidebar -----------------------------------*/	
/*-------------------------------- widget style -----------------------------------*/
.block-minorHeader {
    font-size: 13px;
	font-weight: 700;
    color: #1b8fa1;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 4px solid rgb(236, 240, 241);
    font-family: 'Droid Arabic Kufi';
    width: auto;
    margin-top: 5px;
	padding-left: 25px;
    position: relative;
    line-height: 15px;

}
.block-minorHeader a {
    color: #1b8fa1;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}
.block-minorHeader::before {
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -9px;
    left: 5px;
    vertical-align: middle;
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
    content: "\f0fd";
}
.block-minorHeader::after {
    content: "";
    position: absolute;
    bottom: -3px;
    right: 0px;
    width: 10%;
    height: 3px;
    background-color: #1b8fa1;
}

/*-------------------------------- //End widget -----------------------------------*/
/*-------------------------------- Breadcrumb -----------------------------------*/
.crumb-wrap {
  margin: 15px 0;
  position: relative;
}
.crumb-in {
  margin-left: 42px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 6px 10px;
  min-height: 36px;
}
.crumb-in a {
    font-weight: 700;
	color: #58646f;
}
.crumb-wrap .p-breadcrumbs {
  margin: 0;
}
.p-breadcrumbs>li:last-child:after {
  display: none;
}

.p-breadcrumbs>li:last-child a {
  font-weight: 700;
  color: #58646f;
}
.crumb-home-icon {
  display: block;
  float: left;
  width: 36px;
  height: 36px;
  text-align: center;
  background-color: #fff;
  line-height: 36px;
  font-size: 25px;
  position: absolute;
  top: 0;
  left: 0;
  background: none repeat scroll 0 0 #e1e1e1;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #646c74;
  box-shadow: 0 0 3px #ccc;
  text-shadow: 0 1px 0 #fff;
}
/*-------------------------------- //End Breadcrumb -----------------------------------*/

.PrevNextThread {
    margin: 4px;
    padding: 2px 4px 2px 4px;
    font-family: "Droid Arabic Kufi","Open Sans",sans-serif;
    font-size: 13px;
    color: #0027B0;
    font-weight: lighter;
}
.PrevNextThread a {
    background-color: #DBECC0;
    margin: 4px;
    padding: 2px 4px 2px 4px;
    font-family: "Droid Arabic Kufi","Open Sans",sans-serif;
    font-size: 13px;
    border: 1px solid #B5CD8E;
    box-shadow: 0px 0px 3px #E2E2E2;
    border-radius: 5px;
    color: #4C6A13;
    font-weight: lighter;
}

<xf:macro name="post" arg-post="!" arg-thread="!">
	<xf:css src="message.less" />
	
	<xf:set var="$isIgnored" value="{{ $post.isIgnored() }}" />
	<article class="message message--post js-post js-inlineModContainer {{ $isIgnored ? 'is-ignored' : '' }} {{ $post.isUnread() ? ' is-unread' : '' }}"
		data-author="{{ $post.User.username ?: $post.username }}"
		data-content="post-{$post.post_id}"
		id="js-post-{$post.post_id}">

		<span class="u-anchorTarget" id="post-{$post.post_id}"></span>

		<div class="message-inner">
			<div class="message-cell message-cell--user">
				<xf:set var="$dateHtml"><a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" class="u-concealed" rel="nofollow"><xf:date time="{$post.post_date}" /></a></xf:set>
				<xf:set var="$linkHtml"><a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" class="u-concealed" rel="nofollow">#{{ number($post.position + 1) }}</a></xf:set>
				<xf:macro template="message_macros" name="user_info" arg-user="{$post.User}" arg-fallbackName="{$post.username}" arg-dateHtml="{$dateHtml}" arg-linkHtml="{$linkHtml}" />		
			</div>
			<div class="message-cell message-cell--main">
				<div class="message-main js-quickEditTarget">

					<header class="message-attribution">
						<a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" class="message-attribution-main u-concealed" rel="nofollow"><xf:date time="{$post.post_date}" /></a>
						<div class="message-attribution-opposite">
							<xf:if is="$post.isUnread()">
								<span class="message-newIndicator">{{ phrase('new') }}</span>
							</xf:if>
							<a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" class="u-concealed" rel="nofollow">#{{ number($post.position + 1) }}</a>
						</div>
					</header>

					<div class="message-content js-messageContent">

						<xf:if is="$post.message_state == 'deleted'">
							<div class="messageNotice messageNotice--deleted">
								<xf:macro template="deletion_macros" name="notice" arg-log="{$post.DeletionLog}" />
							</div>
						<xf:elseif is="$post.message_state == 'moderated'" />
							<div class="messageNotice messageNotice--moderated">
								{{ phrase('this_message_is_awaiting_moderator_approval_and_is_invisible_to_normal') }}
							</div>
						</xf:if>
						<xf:if is="$post.warning_message">
							<div class="messageNotice messageNotice--warning">
								{$post.warning_message}
							</div>
						</xf:if>
						<xf:if is="$isIgnored">
							<div class="messageNotice messageNotice--ignored">
								{{ phrase('you_are_ignoring_content_by_this_member') }}
								<xf:showignored />
							</div>
						</xf:if>

						<div class="message-userContent lbContainer js-lbContainer {{ $isIgnored ? 'is-ignored' : '' }}"
							data-lb-id="post-{$post.post_id}"
							data-lb-caption-desc="{{ $post.User ? $post.User.username : $post.username }} &middot; {{ date_time($post.post_date) }}">

							<xf:if is="$post.isFirstPost()">
								<xf:macro template="custom_fields_macros" name="custom_fields_view"
									arg-type="threads"
									arg-group="before"
									arg-onlyInclude="{$thread.Forum.field_cache}"
									arg-set="{$thread.custom_fields}"
									arg-wrapperClass="message-fields message-fields--before" />
							</xf:if>

							<article class="message-body js-selectToQuote">
								<xf:ad position="post_above_content" arg-post="{$post}" />
								{{ bb_code($post.message, 'post', $post) }}
								<div class="js-selectToQuoteEnd">&nbsp;</div>
								<xf:ad position="post_below_content" arg-post="{$post}" />
							</article>

							<xf:if is="$post.isFirstPost()">
								<xf:macro template="custom_fields_macros" name="custom_fields_view"
									arg-type="threads"
									arg-group="after"
									arg-onlyInclude="{$thread.Forum.field_cache}"
									arg-set="{$thread.custom_fields}"
									arg-wrapperClass="message-fields message-fields--after" />
							</xf:if>

							<xf:if is="$post.attach_count">
								<xf:macro template="message_macros" name="attachments"
									arg-attachments="{$post.Attachments}"
									arg-message="{$post}"
									arg-canView="{{ $thread.canViewAttachments() }}" />
							</xf:if>
						</div>

						<xf:if is="$post.last_edit_date">
							<div class="message-lastEdit">
								<xf:if is="$post.user_id == $post.last_edit_user_id">
									{{ phrase('last_edited:') }} <xf:date time="{$post.last_edit_date}" />
								<xf:else />
									{{ phrase('last_edited_by_moderator:') }} <xf:date time="{$post.last_edit_date}" />
								</xf:if>
							</div>
						</xf:if>

						<xf:macro template="message_macros" name="signature" arg-user="{$post.User}" />
					</div>
 <xf:if is="$post->position == 0">            
<div class="PrevNextThread" align="center">

        اسم الموضوع : <a href="{{ link('threads' . (($thread.isUnread() AND !$forceRead) ? '/unread' : ''), $thread) }}" data-xf-init="tooltip" data-original-title="{$thread.title}">{$thread.title}</a>
            |
        المصدر : <a href="{{ link('forums', $thread.Forum) }}" data-xf-init="tooltip" data-original-title="{$thread.Forum.title}">{$thread.Forum.title}</a>
        </div>
</xf:if>  
					<footer class="message-footer">
						<xf:if contentcheck="true">
							<div class="message-actionBar actionBar">
								<xf:contentcheck>
									<xf:if contentcheck="true">
										<div class="actionBar-set actionBar-set--external">
										<xf:contentcheck>
											<xf:if is="$post.canLike()">
												<a href="{{ link('posts/like', $post) }}" class="actionBar-action actionBar-action--like" data-xf-click="like" data-like-list="< .js-post | .js-likeList"><xf:if is="$post.isLiked()">{{ phrase('unlike') }}<xf:else />{{ phrase('like') }}</xf:if></a>
											</xf:if>
											<xf:if is="$thread.canReply()">
												<xf:set var="$quoteLink">{{ link('threads/reply', $thread, {'quote': $post.post_id}) }}</xf:set>

												<xf:if is="$xf.options.multiQuote">
													<a href="{$quoteLink}"
														class="actionBar-action actionBar-action--mq u-jsOnly js-multiQuote"
														title="{{ phrase('toggle_multi_quote_tooltip')|for_attr }}"
														data-message-id="{$post.post_id}"
														data-mq-action="add">{{ phrase('quote') }}</a>
												</xf:if>

												<a href="{$quoteLink}"
													class="actionBar-action actionBar-action--reply"
													title="{{ phrase('reply_quoting_this_message')|for_attr }}"
													data-xf-click="quote"
													data-quote-href="{{ link('posts/quote', $post) }}">{{ phrase('reply') }}</a>
											</xf:if>
										</xf:contentcheck>
										</div>
									</xf:if>

									<xf:if contentcheck="true">
										<div class="actionBar-set actionBar-set--internal">
										<xf:contentcheck>
											<xf:if is="$post.canUseInlineModeration()">
												<span class="actionBar-action actionBar-action--inlineMod">
													<xf:checkbox standalone="true">
														<xf:option value="{$post.post_id}" class="js-inlineModToggle"
															data-xf-init="tooltip"
															title="{{ phrase('select_for_moderation')|for_attr }}" />
													</xf:checkbox>
												</span>
											</xf:if>

											<xf:if is="$post.canReport()">
												<a href="{{ link('posts/report', $post) }}"
													class="actionBar-action actionBar-action--report"
													data-xf-click="overlay">{{ phrase('report') }}</a>
											</xf:if>

											<xf:set var="$hasActionBarMenu" value="{{ false }}" />
											<xf:if is="$post.canEdit()">
												<xf:js src="xf/message.js" min="1" />
												<a href="{{ link('posts/edit', $post) }}"
													class="actionBar-action actionBar-action--edit actionBar-action--menuItem"
													data-xf-click="quick-edit"
													data-editor-target="#js-post-{$post.post_id} .js-quickEditTarget"
													data-menu-closer="true">{{ phrase('edit') }}</a>

												<xf:set var="$hasActionBarMenu" value="{{ true }}" />
											</xf:if>
											<xf:if is="$post.edit_count && $post.canViewHistory()">
												<a href="{{ link('posts/history', $post) }}"
													class="actionBar-action actionBar-action--history actionBar-action--menuItem"
													data-xf-click="toggle"
													data-target="#js-post-{$post.post_id} .js-historyTarget"
													data-menu-closer="true">{{ phrase('history') }}</a>

												<xf:set var="$hasActionBarMenu" value="{{ true }}" />
											</xf:if>
											<xf:if is="$post.canDelete('soft')">
												<a href="{{ link('posts/delete', $post) }}"
													class="actionBar-action actionBar-action--delete actionBar-action--menuItem"
													data-xf-click="overlay">{{ phrase('delete') }}</a>

												<xf:set var="$hasActionBarMenu" value="{{ true }}" />
											</xf:if>
											<xf:if is="$post.canCleanSpam()">
												<a href="{{ link('spam-cleaner', $post) }}"
													class="actionBar-action actionBar-action--spam actionBar-action--menuItem"
													data-xf-click="overlay">{{ phrase('spam') }}</a>

												<xf:set var="$hasActionBarMenu" value="{{ true }}" />
											</xf:if>
											<xf:if is="$xf.visitor.canViewIps() && $post.ip_id">
												<a href="{{ link('posts/ip', $post) }}"
													class="actionBar-action actionBar-action--ip actionBar-action--menuItem"
													data-xf-click="overlay">{{ phrase('ip') }}</a>

												<xf:set var="$hasActionBarMenu" value="{{ true }}" />
											</xf:if>
											<xf:if is="$post.canWarn()">

												<a href="{{ link('posts/warn', $post) }}"
													class="actionBar-action actionBar-action--warn actionBar-action--menuItem">{{ phrase('warn') }}</a>

												<xf:set var="$hasActionBarMenu" value="{{ true }}" />
											<xf:elseif is="$post.warning_id && $xf.visitor.canViewWarnings()" />
												<a href="{{ link('warnings', {'warning_id': $post.warning_id}) }}"
													class="actionBar-action actionBar-action--warn actionBar-action--menuItem"
													data-xf-click="overlay">{{ phrase('view_warning') }}</a>
												<xf:set var="$hasActionBarMenu" value="{{ true }}" />
											</xf:if>

											<xf:if is="$hasActionBarMenu">
												<a class="actionBar-action actionBar-action--menuTrigger"
													data-xf-click="menu"
													title="{{ phrase('more_options')|for_attr }}"
													role="button"
													tabindex="0"
													aria-expanded="false"
													aria-haspopup="true">•••</a>

												<div class="menu" data-menu="menu" aria-hidden="true" data-menu-builder="actionBar">
													<div class="menu-content">
														<h4 class="menu-header">{{ phrase('more_options') }}</h4>
														<div class="js-menuBuilderTarget"></div>
													</div>
												</div>
											</xf:if>
										</xf:contentcheck>
										</div>
									</xf:if>

								</xf:contentcheck>
							</div>
						</xf:if>

						<div class="likesBar js-likeList {{ $post.likes ? 'is-active' : '' }}">
							<xf:likes content="{$post}" url="{{ link('posts/likes', $post) }}" />
						</div>

						<div class="js-historyTarget message-historyTarget toggleTarget" data-href="trigger-href"></div>
					</footer>
				</div>
			</div>
		</div>
	</article>
</xf:macro>

<xf:macro name="post_deleted" arg-post="!" arg-thread="!">
	<xf:css src="message.less" />
	<div class="message message--deleted message--post{{ $post.isIgnored() ? ' is-ignored' : '' }}{{ $post.isUnread() ? ' is-unread' : '' }} js-post js-inlineModContainer"
		data-author="{{ $post.User.username ?: $post.username }}"
		data-content="post-{$post.post_id}">

		<span class="u-anchorTarget" id="post-{$post.post_id}"></span>
		<div class="message-inner">
			<div class="message-cell message-cell--user">
				<xf:macro template="message_macros" name="user_info" arg-user="{$post.User}" arg-fallbackName="{$post.username}" />
			</div>
			<div class="message-cell message-cell--main">
				<div class="message-attribution">
					<ul class="listInline listInline--bullet message-attribution-main">
						<li><a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" class="u-concealed" rel="nofollow"><xf:date time="{$post.post_date}" /></a></li>
						<li><xf:username user="{$post.User}" defaultname="{$post.username}" class="u-concealed" /></li>
					</ul>
				</div>

				<div class="messageNotice messageNotice--deleted">
					<xf:macro template="deletion_macros" name="notice" arg-log="{$post.DeletionLog}" />

					<a href="{{ link('posts/show', $post) }}" class="u-jsOnly" data-xf-click="inserter" data-replace="[data-content=post-{$post.post_id}]">{{ phrase('show...') }}</a>
				</div>
			</div>
		</div>
	</div>
</xf:macro>