<style>
.sub_forums:last-child {
    margin-bottom: 12px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.sub_forums {
    font: 11px Tahoma;
    background-color: #FFFFFF;
    vertical-align: top;
    text-decoration: none;
    border: 1px solid #DDD;
    padding-bottom: 3px;
    margin-bottom: 1px;
    margin-top: -2px;
    list-style: outside none none;
    float: right;
    width: 99.7%;
}
.categorys {
    list-style: none;
    clear: both;
    margin: 0px;
    padding: 0px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
.forum-last-post {
    background-image: url(images/background/sub-forums.png);
    border: 1px solid #DDD;
    float: left;
    font-family: "Droid Arabic Kufi","tahoma",sans-serif;
    line-height: 18px;
    margin: 4px;
    padding: 8px;
    border-radius: 15px 0px 15px 0px;
    width: 270px;
}
.category a {
    font-size: 15px;
    font-weight: bold;
}
.describe
{
    font-size: 13px;
}
.awaiting_approval {
    background-color: #FFFFFF;
    color: #65987A;
    font: normal 11px tahoma;
    margin: 5px;
    padding-right: 5px;
    padding-left: 3px;
    padding-top: 2px;
    padding-bottom: 3px;
    border: 1px solid #DDD;
    border-radius: 4px 4px 4px 4px;
    width: 188px;
}

.title_n {
    font-family: "Droid Arabic Kufi","tahoma",sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding-top: 8px;
    padding-right: 8px;
}
@media (max-width:980px) {
.forum-last-post {
width: 240px;
padding: 8px 2px;
}    
}
@media (max-width:750px) {
.forum-last-post
{
width:230px;
padding:8px 2px;
}    
.div-sub-forums-columns
{
width:300px;
}
.sbp_forum, .sbp_sbar
{
width:100% !important;
}
}
@media (max-width:650px) {
.forum_sub_vis, .forum_sub_rep, .forum_sub_icon, .sm_sub_lasts, .resp-susp{
display: none !important;
}
.forum-last-post {
margin: auto;
float: none;
width: 98%;
padding: 8px 2px;
}
.describe {
width: auto;
}
    
}    

@media screen and (max-width: 480px) {
.describe {
width: auto;
}
}
</style>
<div class="sections">
{if {$SHOW_SUB_SECTIONS}}
<!-- start_category-in_page_forum -->
<ul class="categorys">
<li class="category forum_sub">
<span>{$lang['forum_sub']} : {$Section_Title}</span>
</li>
{/if}
{Des::foreach}{forums_list}{forum}
{if {$forum['parent']} == 0}
{if {$forum['sort']} != 1}
</ul></div>
<!-- end_categorys_one_by_one -->
{/if}
<!-- start_categorys_one_by_one -->
<script type="text/javascript">
$(document).ready(function()
{
var img = "collapseimage_{$forum['id']}";
var imgChange = document.getElementById(img);
if($.cookie("pbboard_collapse_forumid_{$forum['id']}") == "{$forum['id']}") {
$("#collapseimg_forumbit_{$forum['id']}").css('display', 'none');
imgChange.className = "collapsed";
};
});
</script>
<ul class="categorys">
<li class="category">
<a class="CollapseIcon" href="#collapseforum_{$forum['id']}" onclick="return collapse_toggle('{$forum['id']}')" id="collapseforum_{$forum['id']}">
<span id="collapseimage_{$forum['id']}" class="expanded"></span>
</a>
<a href="index.php?page=forum&amp;show=1&amp;id={$forum['id']}">
<span>{$forum['title']}</span></a>
</li>
</ul>
<div id="collapseimg_forumbit_{$forum['id']}">
<ul class="categorys">
{elseif {$forum['parent']} != 0}
<li class="sub_forums">
<div class="forum-icon">
{if {$forum['use_section_picture']} and {$forum['sectionpicture_type']}== 1}
<span class="section_picture" title="{$lang['section_picture']}"><img src="{$forum['section_picture']}" alt="{$lang['section_picture']}" /></span>
{else}
<span class="{$forum['forum_icon']}" title="{$forum['forum_icon_alt']}"></span>
{/if}
</div>
<div class="forum-stats">
<div class="title_n"><a href="index.php?page=forum&amp;show=1&amp;id={$forum['id']}">
{$forum['title']}</a></div>
{if {$forum['use_section_picture']} and {$forum['sectionpicture_type']} == 2}
<div class="section_picture_dn_describe">
<span class="section_picture" title="{$forum['forum_icon_alt']}"><img src="{$forum['section_picture']}" alt="{$forum['forum_icon_alt']}" /></span>
</div>
{/if}
{if {$_CONF['info_row']['no_describe']} and {$forum['section_describe']} != ''}
<div class="describe">
{$forum['section_describe']}
</div>
{/if}
<div class="numrs">
<span class="subject_num subject_num_icon" title="{$lang['subject_num']}">
{$lang['subject_num']} :<b>{$forum['subject_num']}</b>
</span>
<span class="reply_num reply_num_icon" title="{$lang['reply_num']}">
{$lang['reply_num']} : <b>{$forum['reply_num']}</b>
</span>
{if {$forum['forum_online']}}
<span class="forum_online online_num_icon" title="{$lang['Whos_Online']}">
( <b>{$forum['forum_online']}</b>
{$lang['viewer']})
</span>
{/if}
</div>
{if {$_CONF['info_row']['no_moderators']} and {$forum['moderators_list']}}
<div class="home-moderators-lain">
{$lang['moderators_list']} {$forum['moderators_list']}
</div>
{/if}
{if {$forum['is_sub']} and {$_CONF['info_row']['no_sub']}}
<div class="home-sub-forums-lain">
{$lang['forum_sub']}:
</div>
<div class="div-sub-forums-columns">
<ol class="home-sub-forums-columns">
{$forum['sub']}
</ol>
</div>
{/if}
{if {$forum['num_subjects_awaiting_approval']} >0 and {$forum['IsModeratorCheck']}}
<div class="awaiting_approval">{$lang['subjects_review']}: <b>{$forum['num_subjects_awaiting_approval']}</b></div>
{/if}
{if {$forum['num_replys_awaiting_approval']} >0 and {$forum['IsModeratorCheck']}}
<div class="awaiting_approval">{$lang['replys_review_num']}: <b>{$forum['num_replys_awaiting_approval']}</b>
{if {$align} == 'right'}
<a class="appssroveposts" href="index.php?page=search&amp;option=6&amp;review_reply=1&section={$forum['id']}&amp;sort_order=DESC" title="{$lang['approveposts']}"><i class="fa fa-arrow-circle-left" title="{$lang['approveposts']}"></i> </a>
 {else}
<a class="appssroveposts" href="index.php?page=search&amp;option=6&amp;review_reply=1&section={$forum['id']}&amp;sort_order=DESC" title="{$lang['approveposts']}"><i class="fa fa-arrow-circle-right" title="{$lang['approveposts']}"></i> </a>
{/if}
</div>
{/if}
</div>
<div class="forum-last-post">
{if {$forum['linksection']}}
<div class="no_post">{$lang['linkvisitor']} {$forum['linkvisitor']}</div>
{elseif {$forum['hide_subject']} and {$forum['ModeratorCheck']}}
<div class="no_post">{$lang['speciality']}</div>
{elseif {$forum['section_password']} and {$forum['ModeratorCheck']}}
<div class="no_post">{$lang['speciality']}</div>
{elseif {$forum['last_subject']} != ''}
{if {$_CONF['info_row']['allow_avatar']}}
<div class="UserPhoto_tiny_RCS" title="{$lang['Picture']} {$forum['username']} {$lang['Personal']}">
<span class="User-Picture-forum-Home" style="background-image: url({$forum['writer_photo']});"></span>
</div>
{if {$align} == 'right'}
<div class="PBB-WBS borderRightColor" style="border-right-color: #DDDDDD;"></div>
 {else}
<div class="PBB-WBS borderLeftColor" style="border-left-color: #DDDDDD;"></div>
{/if}

{/if}
<div class="Info_last_post">
<div class="Info_last_Reply">
<script type="text/javascript">
$(document).ready(function() {
var iconImg = new Image();
iconImg.src="{$ForumAdress}{$forum['icon']}";
$(iconImg).one('load',function(){
iconWidth = iconImg.width;
iconHeight = iconImg.height;
$(".last_icon_{$forum['id']}").css('height', iconHeight);
$(".last_icon_{$forum['id']}").css('width', iconWidth);
$(".last_icon_{$forum['id']}").css('float', 'right');
$(".last_icon_{$forum['id']}").css('margin', '0');
$(".last_icon_{$forum['id']}").css('background', 'transparent url('+iconImg.src+') no-repeat scroll center center');
});
});
</script>
<i class="Iconchevron last_icon_{$forum['id']}"></i>:<a href="index.php?page=topic&amp;show=1&amp;id={$forum['last_subjectid']}" title="{$forum['last_subject_title']}">{$forum['last_subject']}</a></div>
<div class="NewsUser">{$lang['last_writer']}
{$forum['last_writer']}
</div>
<div class="NewsTime"><i class="IconNewsTime fa fa-history"></i> {$forum['last_date_ago']} <span class="last_time_ago">{$forum['last_time_ago']}</span>
<a href="index.php?page=topic&amp;show=1&amp;id={$forum['last_subjectid']}&amp;count={$forum['last_berpage_nm']}#{$forum['last_reply']}" title="{$lang['Go_to_last_post']}">
{if {$align} == 'right'}
<i class="Iconchevron fa fa-arrow-circle-left" title="{$lang['Go_to_last_post']}"></i>
 {else}
<i class="Iconchevron fa fa-arrow-circle-right" title="{$lang['Go_to_last_post']}"></i>
{/if}
</a></div>
</div>
{else}
<div class="no_post">{$lang['no_post']}</div>
{/if}
</div>
</li>
{/if}
{/Des::foreach}
</ul>
{if !{$SHOW_SUB_SECTIONS}}
</div>
{/if}
<!-- End_All-categorys -->
</div>