Update Military Sub-Forum and a New Theme

Military section created on the forum. Don't think I need to explain what the topics there should be about.

Also created a new theme. I was going to make it the default theme for the military forum but decided against it. There was also a slight background change to the main theme.

Maybe this link will let you try out the new theme:
Dumaguete Info

This one will bring you back to the regular theme:
Dumaguete Info

You can also change the theme at the bottom left of the page by clicking on the "Xenforo Vanilla" link.

 

Another option available: Side Navigation

 

Kinda, there is a point to it. I need the practice with web design (I'd like to eventually start doing it for a bit of money on the side, along with hosting smaller websites on the servers) and making these themes, banners and mods is helping me to get more comfortable with HTML, CSS, Zend Framework (not sure who uses that framework other than this forum software ) and, to a much lesser extent, PHP....and I absolutely despise PHP! Since I'm pretty much teaching myself to do this it's a whole lot of trial and error......and there was a whole lot of that with this theme.

I can't take too much credit though, I picked up most of the code to move the nav links to the right from someone else.....I did make a significant amount of modifications to it though. The hardest part, for me anyways, was getting those d*mn little numbers that shows how many unread posts there are......and then making the alert and icon to go away when there were no unread messages left.

BTW, this is how you move the navigation tab over to the right:

Spoiler: It'll burn your eyes

Code:

<xen:edithint template="navigation.css" />

<ul class="visitorTabs">

   <xen:if is="{$visitor.user_id}">
     <xen:hook name="navigation_visitor_tabs_start" />
     <!-- account -->
     <li class="navTab account Popup PopupControl PopupClosed {xen:if $tabs.account.selected, 'selected'}">

       <xen:set var="$visitorHiddenUnread" value="{xen:calc '{$visitor.alerts_unread} + {$visitor.conversations_unread}'}" />
       <a href="{xen:link account}" class="navLink accountPopup NoPopupGadget" rel="Menu"><span><img src="{xen:helper avatar, $visitor, s}" alt="" /></span></a>

       <div class="Menu JsOnly {xen:if '{$visitor.customFields.menu}', 'ac_right', 'ac_left'}" id="AccountMenu">
         <div class="primaryContent menuHeader">
           <xen:avatar user="$visitor" size="m" class="NoOverlay plainImage" title="{xen:phrase view_your_profile}" />
         
           <h3><a href="{xen:link members, $visitor}" class="concealed" title="{xen:phrase view_your_profile}">{$visitor.username}</a></h3>
         
           <xen:if hascontent="true"><div class="muted"><xen:contentcheck>{xen:helper usertitle, $visitor}</xen:contentcheck></div></xen:if>
         
           <ul class="links">
             <li class="fl"><a href="{xen:link members, $visitor}">{xen:phrase your_profile_page}</a></li>
           </ul>
         </div>

         <!-- admin and moderator links -->
         <xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
           <div class="menuColumns secondaryContent">
             <ul class="col1 blockLinksList">
               <xen:if is="{$visitor.is_moderator} && !{$xenOptions.reportIntoForumId}">
                 <li>
                   <a href="{xen:link reports}" class="reportedItems modLink">
                     <span class="itemLabel">{xen:phrase reported_items_short}<xen:if is="{$session.reportCounts.total} !=0">:</xen:if></span>
                     <xen:if is="{$session.reportCounts.total} !=0">
                       <span class="itemCount {xen:if '({$session.reportCounts.total} AND {$session.reportCounts.lastUpdate} > {$session.reportLastRead}) OR {$session.reportCounts.assigned}', 'alert'}" title="{xen:if $session.reportCounts.lastUpdate, '{xen:phrase last_report_update}: {xen:datetime $session.reportCounts.lastUpdate}'}"><xen:if is="{$session.reportCounts.assigned}">{$session.reportCounts.assigned} / {$session.reportCounts.total}<xen:else />{$session.reportCounts.total}</xen:if></span>
                     </xen:if>
                   </a>
                 </li>
               </xen:if>
             </ul>
             <ul class="col2 blockLinksList">
               <xen:if is="{$visitor.is_moderator} AND {$session.moderationCounts.total}">
                 <li>
                   <a href="{xen:link moderation-queue}" class="moderationQueue modLink">
                     <span class="itemLabel">{xen:phrase moderation_queue_short}:</span>
                     <span class="itemCount {xen:if {$session.moderationCounts.total}, 'alert'}">{$session.moderationCounts.total}</span>
                   </a>
                 </li>
               </xen:if>
               <xen:if is="{$visitor.is_admin} AND {$session.canAdminUsers} AND {$session.userModerationCounts.total}">
                 <li>
                   <a href="admin.php?users/moderated" class="userModerationQueue modLink">
                     <span class="itemLabel">{xen:phrase users_awaiting_approval_short}:</span>
                     <span class="itemCount {xen:if {$session.userModerationCounts.total}, 'alert'}">{$session.userModerationCounts.total}</span>
                   </a>
                 </li>
               </xen:if>
             </ul>
           </div>
         </xen:if>

         <div class="menuColumns secondaryContent">
           <ul class="col1 blockLinksList">
           <xen:hook name="navigation_visitor_tab_links1">
             <xen:if is="{$canEditProfile}"><li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li></xen:if>
             <xen:if is="{$canEditSignature}"><li><a href="{xen:link account/signature}">{xen:phrase signature}</a></li></xen:if>
             <li><a href="{xen:link account/contact-details}">{xen:phrase contact_details}</a></li>
             <li><a href="{xen:link account/privacy}">{xen:phrase privacy}</a></li>
             <li><a href="{xen:link account/preferences}" class="OverlayTrigger">{xen:phrase preferences}</a></li>
             <li><a href="{xen:link account/alert-preferences}">{xen:phrase alert_preferences}</a></li>
             <xen:if is="{$canUploadAvatar}"><li><a href="{xen:link account/avatar}" class="OverlayTrigger" data-cacheOverlay="true">{xen:phrase avatar}</a></li></xen:if>
             <xen:if is="{$xenOptions.facebookAppId} OR {$xenOptions.twitterAppKey} OR {$xenOptions.googleClientId}"><li><a href="{xen:link account/external-accounts}">{xen:phrase external_accounts}</a></li></xen:if>
             <li><a href="{xen:link account/security}">{xen:phrase password}</a></li>
           </xen:hook>
           </ul>
           <ul class="col2 blockLinksList">
           <xen:hook name="navigation_visitor_tab_links2">
             <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li></xen:if>
             <li><a href="{xen:link conversations}">{xen:phrase conversations}
               <strong class="itemCount {xen:if $visitor.conversations_unread, '', 'Zero'}"
                 id="VisitorExtraMenu_ConversationsCounter">
                 <span class="Total">{xen:number $visitor.conversations_unread}</span>
               </strong></a></li>
             <li><a href="{xen:link account/alerts}">{xen:phrase alerts}
               <strong class="itemCount {xen:if $visitor.alerts_unread, '', 'Zero'}"
                 id="VisitorExtraMenu_AlertsCounter">
                 <span class="Total">{xen:number $visitor.alerts_unread}</span>
               </strong></a></li>
             <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li>
             <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}'}">{xen:phrase your_content}</a></li>
             <li><a href="{xen:link account/following}">{xen:phrase people_you_follow}</a></li>
             <li><a href="{xen:link account/ignored}">{xen:phrase people_you_ignore}</a></li>
             <xen:if is="{$xenCache.userUpgradeCount}"><li><a href="{xen:link account/upgrades}">{xen:phrase account_upgrades}</a></li></xen:if>
             <li><a href="{xen:link account/two-step}">{xen:phrase two_step_verification}</a></li>
           </xen:hook>
           </ul>
         </div>
         <div class="menuColumns secondaryContent">
           <ul class="col1 blockLinksList">
             <li>       
               <form action="{xen:link account/toggle-visibility}" method="post" class="AutoValidator visibilityForm">
                 <label><input type="checkbox" name="visible" value="1" class="SubmitOnChange" {xen:checked $visitor.visible} />
                   {xen:phrase show_online_status}</label>
                 <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
               </form>
             </li>
           </ul>
           <ul class="col2 blockLinksList">
             <li><a href="{xen:link logout, '', '_xfToken={$visitor.csrf_token_page}'}" class="LogOut">{xen:phrase log_out}</a></li>
           </ul>
         </div>
         <xen:if is="{$canUpdateStatus}">
           <form action="{xen:link members/post, $visitor}" method="post" class="sectionFooter statusPoster AutoValidator" data-optInOut="OptIn">
             <textarea name="message" class="textCtrl StatusEditor UserTagger Elastic" placeholder="{xen:phrase update_your_status}..." rows="1" cols="40" style="height:18px" data-statusEditorCounter="#visMenuSEdCount" data-nofocus="true"></textarea>
             <div class="submitUnit">
               <span id="visMenuSEdCount" title="{xen:phrase characters_remaining}"></span>
               <input type="submit" class="button primary MenuCloser" value="{xen:phrase post_verb}" />
               <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
               <input type="hidden" name="return" value="1" />
             </div>
           </form>
         </xen:if>
       </div>   
     </li>

     <!-- conversations popup -->
     <li class="navTab inbox Popup PopupControl PopupClosed">

       <a href="{xen:link conversations}" rel="Menu" class="navLink NoPopupGadget"><i class="fa fa-envelope"></i>
         <strong class="itemCount {xen:if {$visitor.conversations_unread}, '', 'Zero'}"
           id="ConversationsMenu_Counter" data-text="{xen:phrase you_have_x_new_unread_conversations}">
           <span class="Total">{xen:number $visitor.conversations_unread}</span>
         </strong>
       </a>

       <div class="Menu JsOnly navPopup {xen:if '{$visitor.customFields.menu}', 'con_right', 'con_left'}" id="ConversationsMenu"
         data-contentSrc="{xen:link 'conversations/popup'}"
         data-contentDest="#ConversationsMenu .listPlaceholder">

         <div class="menuHeader primaryContent">
           <h3>
             <span class="Progress InProgress"></span>
             <a href="{xen:link conversations}" class="concealed">{xen:phrase conversations}</a>
           </h3>           
         </div>

         <div class="listPlaceholder"></div>

         <div class="sectionFooter">
           <xen:if is="{$canStartConversation}"><a href="{xen:link conversations/add}" class="floatLink">{xen:phrase start_new_conversation}</a></xen:if>
           <a href="{xen:link conversations}">{xen:phrase show_all}...</a>
         </div>
       </div>
     </li>

     <xen:hook name="navigation_visitor_tabs_middle" />

     <!-- alerts popup -->
     <li class="navTab alerts Popup PopupControl PopupClosed"> 

       <a href="{xen:link account/alerts}" rel="Menu" class="navLink NoPopupGadget"><i class="fa fa-flag"></i>
         <strong class="itemCount {xen:if {$visitor.alerts_unread}, '', 'Zero'}"
           id="AlertsMenu_Counter" data-text="{xen:phrase you_have_x_new_alerts}">
           <span class="Total">{xen:number $visitor.alerts_unread}</span>
         </strong>
       </a>

       <div class="Menu JsOnly navPopup {xen:if '{$visitor.customFields.menu}', 'alert_right', 'alert_left'}" id="AlertsMenu"
         data-contentSrc="{xen:link 'account/alerts-popup'}"
         data-contentDest="#AlertsMenu .listPlaceholder"
         data-removeCounter="#AlertsMenu_Counter">

         <div class="menuHeader primaryContent">
           <h3>
             <span class="Progress InProgress"></span>
             <a href="{xen:link account/alerts}" class="concealed">{xen:phrase alerts}</a>
           </h3>
         </div>

         <div class="listPlaceholder"></div>

         <div class="sectionFooter">
           <a href="{xen:link account/alert-preferences}" class="floatLink">{xen:phrase alert_preferences}</a>
           <a href="{xen:link account/alerts}">{xen:phrase show_all}...</a>
         </div>
       </div>
     </li>

     <xen:hook name="navigation_visitor_tabs_end" />

   <xen:else />
     <div>
       <label for="LoginControl" class="reg_button">
         <a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, "Log in or Join now for more", {xen:phrase log_in}}</a>
       </label>
     </div>
   </xen:if>

   <li class="navTab alerts Popup PopupControl PopupClosed">
     <xen:if is="{$visitor.user_id}">
       <xen:set var="$unread"><xen:callback class="UnreadPostCount_Callback" method="getUnreadCount" /></xen:set>   
       <a href="{xen:link find-new/posts}" class="navLink NoPopupGadget {xen:if {$unread}, '', 'Zero'}" title="What's New"><i class="fa fa-comments-o"></i></a>
           <strong class="itemPostCount {xen:if {$unread}, '', 'Zero'}"
           id="AlertsMenu_Counter" data-text="{xen:phrase you_have_x_new_alerts}">
             <span class="Total">
               {xen:number $unread}
         </span>
       </strong>
       </xen:if>
   </li>
   
   <!-- FOOTER LINKS -->
   <div class="footer_links">
       <li><a href="{$requestPaths.requestUri}#top"><i class="fa fa-chevron-circle-up"></i></a></li>
       <!-- admin link -->
       <xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}"><xen:include template="navigation_admin" /></xen:if>

   </div>
</ul>

and then.......

Spoiler: CSS

Code:

/* IB made multiple changes to template for slide menu system */

#col_right {margin-right:5.5rem; border-right: 1px solid @primaryLighter;}
#col_left {margin-left:5.5rem; border-left: 1px solid @primaryLighter;}
#loginBarHandle {display:none;}

.menu_label {padding-left:4px; text-size: 14px;}
#col_right .menu_button {position:fixed; top:3px; right:14px; z-index:200; }
#col_left .menu_button {position:fixed; top:3px; left:24px; z-index:200;}
.menu_button a i {font-size:45px; line-height:45px;}

.slidemenu {
    position: fixed;
    z-index: 1000;
    height: 100%;
    width: 300px;
    background: @contentBackground;}

#col_right .slidemenu {
    right: 0;
    top: 0;
    -webkit-transition: right 0.3s ease, -webkit-box-shadow 0.3s ease 0.2s;
    transition: right 0.3s ease, box-shadow 0.3s ease 0.2s;
    -webkit-box-shadow: -6px 0px 6px 0px @primaryDarker;
    -moz-box-shadow: -6px 0px 6px 0px @primaryDarker;
    box-shadow: -6px 0px 6px 0px @primaryDarker;}

#col_left .slidemenu {
    left: 0;
    top: 0;
    -webkit-transition: left 0.3s ease, -webkit-box-shadow 0.3s ease 0.2s;
    transition: left 0.3s ease, box-shadow 0.3s ease 0.2s;
    -webkit-box-shadow: 6px 0px 6px 0px @primaryDarker;
    -moz-box-shadow: 6px 0px 6px 0px @primaryDarker;
    box-shadow: 6px 0px 6px 0px @primaryDarker;}

#col_right .slidemenu.closed {
    right: -300px;
    -webkit-box-shadow: 0 0 0 @primaryLighter;
    -moz-box-shadow: 0 0 0 @primaryLighter;
    box-shadow: 0 0 0 @primaryLighter;}

#col_left .slidemenu.closed {
    left: -300px;
    -webkit-box-shadow: 0 0 0 @primaryLighter;
    -moz-box-shadow: 0 0 0 @primaryLighter;
    box-shadow: 0 0 0 @primaryLighter;}

.slidemenu #close {float:right; margin-right:6px;}

.slidemenu h2 {
    padding-left: .5em;
    color: @primaryDarker;
    margin: 10px 0px;
    font-size: 18pt;
    text-align: left;}

.slidemenu ul {padding:0; margin:0;}

.slidemenu .maintabs {margin-top:5px; margin-left:2px;}

.slidemenu .maintabs li {
    color:@primaryDarker;
    width:24%;
    height:75px;
    overflow:hidden;
    display:block;
    float:left;
    margin-right:0px;
    text-align:center; }

.slidemenu .maintabs li a {
    color:@primaryDarker;
    font-size:12px;
    overflow:hidden;
    display:block;
    padding:0;
    text-align:center;}

.slidemenu .maintabs li a i {
    font-size:45px;
    overflow:hidden;
    display:block;
    line-height:45px;
    padding:0;
    text-align:center;}

.slidemenu .maintabs li a:hover {
    background: @primaryLighterStill;
    border-color: @primaryLighterStill;
    text-decoration:none;}

.menu_column {
    position: fixed;
    overflow: hidden;
    text-align: center;
    width: 5.5rem;
    z-index: 100;
    height: 100%;
    margin-top:0px;
    background: @contentBackground;}

#col_right .menu_column {top:0;    right:0;}
#col_left .menu_column {top:0; left:0;}
.visitorTabs {width:100%; margin-top: 75px;}
.visitorTabs li {padding:8px 0px;}
.visitorTabs li a, .visitorTabs li {width:100%; display:block;}
.visitorTabs li a i {font-size:30px;}

.navTab .accountPopup img {
    border: 1px solid @primaryDarker;
    border-radius: 5px;
    height: 40px;
    width: 40px;}

#AccountMenu, #AlertsMenu, #ConversationsMenu {z-index:100;}

/*-------------------------*/
/* Account Popup Menu */
#AccountMenu
{
    width: 274px;
}

#AccountMenu .menuHeader
{
    position: relative;
}

    #AccountMenu .menuHeader .avatar
    {
        float: left;
        margin-right: 10px;
    }

    #AccountMenu .menuHeader .visibilityForm
    {
        margin-top: 10px;
        color: @primaryMedium;
    }

    #AccountMenu .menuHeader .links .fl
    {
        position: absolute;
        bottom: 10px;
        left: {xen:calc '10 + 10 + 96'}px;
    }

    #AccountMenu .menuHeader .links .fr
    {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

#AccountMenu .menuColumns
{
    overflow: hidden; zoom: 1;
    padding: 2px;
}

    #AccountMenu .menuColumns ul
    {
        float: left;
        padding: 0;
        max-height: none;
        overflow: hidden;
    }

        #AccountMenu .menuColumns a,
        #AccountMenu .menuColumns label
        {
            width: 115px;
        }

#AccountMenu .statusPoster textarea
{
    width: 245px;
    margin: 0;
    resize: vertical;
    overflow: hidden;
}

#AccountMenu .statusPoster .submitUnit
{
    margin-top: 5px;
    text-align: right;
}

    #AccountMenu .statusPoster .submitUnit .statusEditorCounter
    {
        float: left;
        line-height: 23px;
        height: 23px;
    }

/* ---------------------------------------- */
/* Inbox, Alerts Popups */

.navPopup
{
    width: 260px;
}

.navPopup a:hover,
.navPopup .listItemText a:hover
{
    background: none;
    text-decoration: underline;
}

    .navPopup .menuHeader .InProgress
    {
        float: right;
        display: block;
        width: 20px;
        height: 20px;
    }

.navPopup .listPlaceholder
{
    max-height: 350px;
    overflow: auto;
}

    .navPopup .listPlaceholder ol.secondaryContent
    {
        padding: 0 10px;
    }

        .navPopup .listPlaceholder ol.secondaryContent.Unread
        {
            background-color: @inlineModChecked.background-color;
        }

.navPopup .listItem
{
    overflow: hidden; zoom: 1;
    padding: 5px 0;
    border-bottom: 1px solid @primaryLighterStill;
}

.navPopup .listItem:last-child
{
    border-bottom: none;
}

.navPopup .PopupItemLinkActive:hover
{
    margin: 0 -8px;
    padding: 5px 8px;
    border-radius: 5px;
    background-color: @primaryLighterStill;
    cursor: pointer;
}

.navPopup .avatar
{
    float: left;
}

    .navPopup .avatar img
    {
        width: 34px;
        height: 34px;
    }

.navPopup .listItemText
{
    margin-left: 36px;
}

    .navPopup .listItemText .muted
    {
        font-size: 9px;
    }

    .navPopup .unread .listItemText .title,
    .navPopup .listItemText .subject
    {
        font-weight: bold;
    }

.navPopup .sectionFooter .floatLink
{
    float: right;
}

.itemCount {
    font-weight: bold;
    font-size: 10px;
    color: white;
    background-color: #e03030;
    padding: 0 2px;
    border-radius: 2px;
    position: absolute;
    top: 0px;
    right: 14px;
    line-height: 16px;
    min-width: 12px;
    _width: 12px;
    text-align: center;
    text-shadow: none;
    white-space: nowrap;
    word-wrap: normal;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
    height: 16px;}

.itemPostCount {
    font-weight: bold;
    font-size: 10px;
    color: white;
    background-color: #e03030;
    padding: 0 2px;
    border-radius: 2px;
    position: absolute;
    top: 5px;
    right: 14px;
    line-height: 16px;
    min-width: 12px;
    _width: 12px;
    text-align: center;
    text-shadow: none;
    white-space: nowrap;
    word-wrap: normal;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
    height: 16px;}

.itemCount.Zero {display: none;}
.itemPostCount.Zero {display: none;}
.navLink.Zero {display: none;}

.ac_left {left: 72px !important; top: 75px !important;}
.ac_right {right: 72px !important; top: 75px !important; left:auto !important;}
.con_left {left:72px !important; top:130px !important;}
.con_right {right:72px !important; top:130px !important; left:auto !important;}
.alert_left {left: 72px !important; top: 172px !important;}
.alert_right {right: 72px !important; top: 172px !important; left:auto !important;}

.whats_new {font-size:16px; font-weight:bold;}

/*----------------------*/
/* Reg, Login Button */
.reg_button {
    background-color: white;
    padding: 3px;
    border: 1px solid @secondaryLight;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
    display: block;
    cursor: pointer;}

.reg_button .inner {
    font-weight: bold;
    font-size: 12pt;
    font-family: @button.font-family;
    color: @textCtrlBackground;
    background: @secondaryMedium url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x center -7px;
    border-radius: 4px;
    display: block;}

.reg_button:hover .inner {
    text-decoration: none;
    background-color: @primaryDarker;}

.reg_button:active {
    box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    position: relative;
    top: 2px;}

.sub_menu_links .secondaryContent {background-color: @contentBackground; border-bottom-style: none;}
.sub_menu_links .blockLinksList a {padding: 8px 1px;}

.footer_links {position:fixed; bottom:0px; width:5.5rem;}

<xen:if is="@enableResponsive">
    @media (max-height:580px), (max-width:580px){
        #col_right, #col_left {margin:32px 0 0 0; border:none;}
               #AccountMenu{overflow-y:scroll; max-height:90%;}
           
        .menu_label, .sub_menu_links {display:none;}
        .menu_button a i {font-size:32px; line-height:32px; margin-top:-3px; color:@textCtrlBackground;}

        .slidemenu {width:100%; height:100%; background:#fff; overflow-y:scroll; overflow-x:hidden; z-index:1000; position:fixed; top:0; right:0;}
        #col_right .slidemenu.closed {right:-100%;}
        #col_left .slidemenu.closed {left:-100%;}

        .menu_column {width:100%; height:35px; margin-top:0px; display:block; background-color: @primaryLighter;}
        #col_right .menu_column {text-align:left;}
        #col_left .menu_column {text-align:left; padding-left:3rem;}

        .navTab .accountPopup img {margin:0px 10px;}
        .visitorTabs {position:fixed; top:0px; width:100%; height:32px; text-align:justify; margin:0;}
        .visitorTabs li {width:14%; height:32px; overflow:hidden; display:inline-block; float:left; text-align:center; padding:0px;}
        .visitorTabs li a {height:32px; overflow:hidden; line-height:32px; display:block;}
        .visitorTabs li a i {color:#fff; font-size:24px; line-height:32px;}
        .visitorTabs li a i:hover {color:@primaryMedium;}

        .itemCount {position:relative;top:-10px; padding:3px 5px;}
        .itemPostCount {position:relative;top:-29px; right:-15px; padding:3px 5px;}
       
        .whats_new {color:@textCtrlBackground; border:1px solid @textCtrlBackground;}

        .footer_links {position:static; width:100%;}

        .reg_button {width:120px; padding: 0px; float:right; margin-right:50px;}
        .reg_button .inner {font-size: 9pt;}

        .mobile_sub_menu {display:block; width:100%; height:35px; text-align:center;}
        .mobile_sub_menu ul li {
            background: @primaryLighter;
            width:30%;
            height:35px;
            border-radius:8px;
            overflow:hidden;
            display:block;
            float:left;
            margin:5px 3px 0px;
            text-align:center;
            vertical-align:middle;
            line-height:30px; }
        .mobile_sub_menu ul li a {
            color:@contentText;
            text-decoration:none;
            font-size:11px;
            overflow:hidden;
            width:100%;
            height:35px;
            display:block;
            padding:0;
            text-align:center;}
        .mobile_sub_menu ul li a:hover{text-decoration:none; background:@contentText;}

        .ac_left, .con_left, .alert_left, .ac_right, .alert_right, .con_right {left: 10px !important; top: 32px !important;}
    }

    @media (min-height:740px), (min-width:740px){
        .mobile_sub_menu{display:none;}}
</xen:if>

and then.....well I'm sure nobody really cared about the first two.....and there is a character limit on thread posts, so, I'll stop.