Alterar estilo das categorias

• Descrição:
  

Olá am!
Estive a ver e será possível alterar o aspeto das minhas categorias (http://gyazo.com/bc490ec316ab61fd6cfd5a57f80b6327) - para algum assim: http://gyazo.com/e14a59583ecd15e0d7368544d4adaf49

Aguarda resposta.

• Informações:
  

Código:

<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
      <li>
            <script type="text/javascript">//<![CDATA[
            var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
            var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
            var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
            var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
            var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
            insert_plus_menu_new('f{FORUM_ID}&amp;f={FORUM_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
         //]]>
         </script>
      </li>
         <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
         <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
         <li><a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a></li>
   </ul>
   <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
   <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->




{BOARD_INDEX}

<div class="breadcrumb top ipsList_inline left">
   <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</p>
</div>
 
<br>


<div class="main paged">
 
     <div class="clearfix">
      <!-- BEGIN topicpagination -->
      <p class="paging">{PAGINATION}</p>
      <!-- END topicpagination -->
      <p class="posting">
         <!-- BEGIN switch_user_authpost -->                 
              <div class="repbutton" style="float:right;"><a href="{U_POST_NEW_TOPIC}"> Start new topic</a></div>                                   
         <!-- END switch_user_authpost -->
      </p>
   </div>
  <br/>
 
   {TOPICS_LIST_BOX}

  <br>

</div>


<div id="pun-info" class="main">
   <div class="main-content">
      <div id="stats">
         <p class="right">{L_MODERATOR} : {MODERATORS}</p>
         {LOGGED_IN_USER_LIST}
      </div>
      <div id="onlinelist">
         <p>{L_TABS_PERMISSIONS} <br />{S_AUTH_LIST}</p>
      </div>
   </div>
</div>

 
  <style>.repbutton {
      background: url('http://www.ipbfocus.com/skindemo/public/style_images/iskin34x/maintitle.png') repeat-x scroll 0px 50% #8394A1;
    border-radius: 3px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.1) inset, 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
    font: bold 11px/32px Tahoma,Helvetica,Arial,sans-serif;
    height: 32px;
    padding: 0px 10px;
    text-align: center;
    min-width: 125px;
    display: inline-block;
    cursor: pointer;
}
  .repbutton a {
    color:#fff!important;
  }</style>
 

Código:

.maintitle {
   background: url(http://i.imgur.com/Y4tOGX5.png) !important;
   height: 10px;
   border-radius: 0 !important;
   border: 0 !important;
}
.removeDefault .ipsBox, .removeDefault.ipsBox {
   margin-top: 5px !important;
   padding: 15px !important;
   background: #EAE3DD !important;
}

.pun table.table td {
   border-bottom: 1px solid #DAD6D3 !important;
}
.pun table.table tr {
   border: 0px !important;
   background: #FEFAF7 !important;
}
table.table a {
   color: #645F5B !important;
}