Action section in posts to the top of the posts

website: www.vielamort.net

Question: move the edit section of a topic to the header?

So I want this (from the bottom of the post):



Up here like this:

Hi there,

Because your post buttons are on the bottom, which usually they are on the top by default, does that mean you edited your template "viewtopic_body"?

No it was part of the skin that i found I think

Is that template edited at all though, even if it wasn't done by you? If not, can you please provide either that or your entire CSS? Thanks.

You said you found that skin? It's gorgeous!

Heres the View_topic:

Code:


<script type="text/javascript">//<![CDATA[
  var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
  $(function(){
 
      if(typeof(_atc) == "undefined") {
          _atc = { };
      }
 
      _atc.cwait = 0;
      $('.addthis_button').mouseup(function(){
          if ($('#at15s').css('display') == 'block') {
              addthis_close();
          }
      });
  });
 
  var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
  showHiddenMessage = function(id)
  {
      try
      {
          var regId = parseInt(id, 10);
          if( isNaN(regId) ) { regId = 0; }
     
          if( regId > 0)
          {
              $('.post--' + id).toggle(0, function()
          {
              if( $(this).is(":visible") )
              {
                $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
              }
              else
              {
                $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
              }
          });
          }
      }
      catch(e) { }
 
    return false;
  };
 
  //]]>
</script>
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
  <ul>
      <!-- BEGIN switch_plus_menu -->
      <li>
        <script type="text/javascript">//<![CDATA[
            var url_favourite = '{switch_user_logged_in.U_FAVOURITE_JS_PLUS_MENU}';
            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}';
            insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
        </script>
      </li>
      <!-- END switch_plus_menu -->
      <li><a class="addthis_button" href="#">{L_SHARE}</a></li>
      <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
      <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</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 -->
<div class="pun-crumbs noprint">
  <p class="crumbs">
      <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC} »
      <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
      <!-- BEGIN switch_twitter_btn -->
      <span id="twitter_btn" style="margin-left: 6px; ">
        <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
      </span>
      <!-- END switch_twitter_btn -->
      <!-- BEGIN switch_fb_likebtn -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
  </script>
  <div class="fb-like right" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false" style="top:-15px;"></div>
  <!-- END switch_fb_likebtn -->
  </p>
</div>
<div class="main paged">
  <div class="pagesection">
      <div class="nextlinks"><a href="{U_VIEW_OLDER_TOPIC}">« previous</a> <a href="{U_VIEW_NEWER_TOPIC}">next »</a></div>
      <!-- BEGIN topicpagination -->
      <p class="paging">{PAGINATION}</p>
      <!-- END topicpagination -->
      <p class="posting">
        <!-- BEGIN switch_user_logged_in -->
        <!-- BEGIN watchtopic -->
      <ul>
        <li class="left">{S_WATCH_TOPIC}</li>
      </ul>
     
      <!-- END watchtopic -->
      <!-- END switch_user_logged_in -->
      <!-- BEGIN switch_user_authpost -->
      <div class="buttonlist floatright">
        <ul>
            <li><a class="button_strip_print" href="{L_POST_NEW_TOPIC}" rel="new_win nofollow"><span class="last">Opret emne</span></a></li>
        </ul>
      </div>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
      <div class="buttonlist floatright">
        <ul>
            <li><a class="button_strip_print" href="{U_POST_REPLY_TOPIC}" rel="new_win nofollow"><span class="last">Svar</span></a></li>
        </ul>
      </div>
      <!-- END switch_user_authreply -->
      </p>
  </div>
  {POLL_DISPLAY}
  <div class="main-head clearfix">
      <p class="h2">
        <img src="http://i.imgur.com/gC0UJxo.gif" align="bottom" alt="" style="float: left;margin: 9px 0.5em 0 0;" />
        <span id="author" style="margin: 0 7.7em 0 0;">Author</span>
        Topic: {TOPIC_TITLE}
      </p>
  </div>
  <div class="main-content topic">
      <!-- BEGIN postrow -->
      <!-- BEGIN hidden -->
      <p class="p-hidden">{postrow.hidden.MESSAGE}</p>
      <!-- END hidden -->
      <!-- BEGIN displayed -->
      <!-- BEGIN first_post_br -->
  </div>
  <hr id="first-post-br" />
  <div class="main-content topic">
      <!-- END first_post_br -->
      <div class="post post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
      <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -20px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
      <div class="postmain"{postrow.displayed.THANK_BGCOLOR}>
        <div class="keyinfo">
            <div class="messageicon">
              <img src="http://i.imgur.com/qA3M1mQ.gif" alt="" />
            </div>
            <h5 id="subject_8">
              <a href="http://demo.dzinerstudio.com/smf2/index.php?topic=7.msg8#msg8" rel="nofollow">{TOPIC_TITLE}</a>
            </h5>
            <div class="smalltext" style="margin-bottom: 6px;">« <strong> on:</strong> {postrow.displayed.POST_DATE_NEW} »</div>
            <div id="msg_8_quick_mod"></div>
        </div>
        <div class="postbody"{postrow.displayed.THANK_BGCOLOR}>
            <div class="user">
              <div class="user-ident">
                  <h4 class="username">{postrow.displayed.POSTER_NAME}<br /></h4>
                  <div class="user-basic-info">
                    {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}<br />
                    {postrow.displayed.POSTER_AVATAR}
                  </div>
              </div>
              <div class="user-info">
                  <!-- BEGIN profile_field -->
                  {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                  <!-- END profile_field -->
                  {postrow.displayed.POSTER_RPG}
              </div>
              <br />
              <div class="user-contact profile_{postrow.displayed.PROFILE_POSITION}">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
              </div>
            </div>
            <div class="post-entry">
              <div class="entry-content">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                    <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                    <!-- END switch_vote -->
                    <!-- BEGIN switch_bar -->
                    <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        <!-- BEGIN switch_vote_plus -->
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->
                        <!-- BEGIN switch_vote_minus -->
                        <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                    </div>
                    <!-- END switch_bar -->
                    <!-- BEGIN switch_no_bar -->
                    <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                    <!-- END switch_no_bar -->
                    <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                    <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->
                  <div>
                    <div>{postrow.displayed.MESSAGE}</div>
                    <!-- BEGIN switch_attachments -->
                    <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                          <!-- BEGIN switch_post_attachments -->
                          <dl class="file">
                              <dt>
                                <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />
                                <!-- BEGIN switch_dl_att -->
                                <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_dl_att -->
                                <!-- BEGIN switch_no_dl_att -->
                                {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_no_dl_att -->
                              </dt>
                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->
                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->
                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                          </dl>
                          <!-- END switch_post_attachments -->
                        </dd>
                    </dl>
                    <!-- END switch_attachments -->
                    <div class="clear"></div>
                  </div>
                  <p>
                    {postrow.displayed.EDITED_MESSAGE}
                  </p>
              </div>
            </div>
        </div>
        <!-- BEGIN switch_signature -->
        <div class="sig-content">
            {postrow.displayed.SIGNATURE_NEW}
        </div>
        <!-- END switch_signature -->
        <div class="postfoot">
            <div class="post-options profile_{postrow.displayed.PROFILE_POSITION}">
              {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
            </div>
            <div style="clear:both;"></div>
        </div>
      </div>
  </div>
  <!-- END displayed -->
  <!-- END postrow -->
</div>
<div class="main-foot clearfix">
  <p class="h2">
      <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> 
      {L_MESSAGE} [{PAGE_NUMBER}]
  </p>
  <p class="options">
      <input type="hidden" name="t" value="{TOPIC_ID}" />
      <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
      <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
      <!-- BEGIN viewtopic_bottom -->
      {S_TOPIC_ADMIN}
      <!-- END viewtopic_bottom -->
  </p>
</div>
<a name="bottomtitle"></a>
</div>
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<span class="right">{S_WATCH_TOPIC}</span>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
<div class="pun-crumbs">
  <p class="crumbs">
      <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC} »
      <strong><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></strong>
  </p>
</div>
<!-- BEGIN promot_trafic -->
<div class="main" id="ptrafic_close" style="display:none">
  <div class="main-head clearfix">
      <p class="h2">{PROMOT_TRAFIC_TITLE}</p>
      <p class="options"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></p>
  </div>
</div>
<div class="main" id="ptrafic_open" style="display:''">
  <div class="main-head clearfix">
      <p class="h2">{PROMOT_TRAFIC_TITLE}</p>
      <p class="options"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></p>
  </div>
  <div class="main-content clearfix">
      <!-- BEGIN link -->
      » <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
      <!-- END link -->
  </div>
</div>
<!-- END promot_trafic -->
<!-- BEGIN switch_forum_rules -->
<div class="main" id="forum_rules">
  <div class="main-head clearfix">
      <p class="h2">{L_FORUM_RULES}</p>
  </div>
  <table class="main-content frm">
      <tr>
        <!-- BEGIN switch_forum_rule_image -->
        <td class="logo">
            <img src="{RULE_IMG_URL}" alt="" />
        </td>
        <!-- END switch_forum_rule_image -->
        <td class="rules entry-content">
            {RULE_MSG}
        </td>
      </tr>
  </table>
</div>
<!-- END switch_forum_rules -->
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->
<div id="pun-info" class="main">
  <div class="main-content">
      <div id="stats">
        <p>{L_TABS_PERMISSIONS} <br />{S_AUTH_LIST}</p>
      </div>
  </div>
</div>
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
  //<![CDATA[
  $(resize_images({ 'selector' : '.post-entry .entry-content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
  //]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

CSS:

Code:

/*-Fora-*/
body {
  background: #404331 url(https://www.transparenttextures.com/patterns/brushed-alum-dark.png);
  font: 13px/22px 'Lato', 'Arial', sans-serif;
  margin: 0 auto;
  padding: 0;
}
.pun {
  font: 13px/22px 'Lato', 'Arial', sans-serif;
  margin: 0 auto;
  padding: 0;
  width: 99.8%;
  border: 1px solid #1a1a1a;
  margin-top:-31px;
}
body, td, th, tr {
  color: #1e1e1e;
}
.wrapper {
  margin: 0 auto;
  width: 80% !important;
  margin-top: 30px;
}
a {
  text-decoration: none;
  outline: none;
  -o-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
a:hover, #footer a:hover {
  text-decoration: underline;
  cursor: pointer;
}
.pun a:link {
  color: #3a3a3a;
}
.pun a:visited {
  color: #3a3a3a;
}
.pun a:hover {
  color: #91BC8B;
  text-decoration: underline;
  cursor: pointer;
}
@font-face{
  font-family:Lato;
  font-style:normal;
  font-weight:400;
  src:local('Lato Regular'), local(Lato-Regular), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format("woff")
}
@font-face{
  font-family:Lato;
  font-style:normal;
  font-weight:700;
  src:local('Lato Bold'), local(Lato-Bold), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format("woff")
}
#tabs {
  width: 980px;
  margin-left: -15px;
}
/*-Header-*/
#header {
  height: 90px;
  background: url(http://i.imgur.com/EtVNgYr.jpg);
  height: 400px;
  background-position: 30% 20%;
}
#logo {
  display: block;
  float: left;
  width: 600px;
  height: 200px;
  background: url(http://i.imgur.com/lNj3wCR.png) 50% 0 no-repeat;
  margin-top: 100px;
  margin-left: -100px;
}
#describ {
  font-family: tahoma;
  font-size: 10px;
  text-transform:uppercase;
  margin-right: 50px;
  float: right;
  letter-spacing: 0.8px;
  margin-top: 100px;
  color: #7e7e7e;
  text-align:center;
}
#search {
  float: right;
  width: 240px;
  height: 32px;
  border: 1px solid #76abb5;
  margin-top: 65px;
  border-radius: 5px;
  margin-right: -230px;
}
span, form, p {
  margin: 0;
  padding: 0;
}
#search input {
  float: left;
  background: none;
  border: none;
  outline: none;
  padding: 0;
}
#search input[type=text] {
  width: 186px;
  height: 16px;
  line-height: 16px;
  padding: 8px 10px;
  color: #C0F0F0;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
}
#search input[type=submit] {
  background: url(http://i.imgur.com/tjwe4L1.png) 0 0 no-repeat;
  border-left: 1px solid #76abb5;
  border-radius: 0;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
#search input[type=text]:focus {
  background: transparent;
  color: #D3FFFF;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
input, button, select, textarea {
  font: 95%/115% 'Lato', sans-serif;
  color: #4F5961;
  background: #fff;
  border: 1px solid #7f9db9;
  padding: 5px;
  border-radius: 3px;
}
/*-Navbar-*/
#navbar {
      background:#fff;
    color:#FFF;
    height:50px;
    padding:.5em;
    position:absolute;
    width: 98.96%;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
    border-top: 2px solid #7CB0B8;
}
div#navbar.fixed {
    position: fixed;
    top: 30px;
    z-index: 999;
}
#topnav, #topnav ul {
  margin: 0;
  padding: 0;
  z-index: 999;
}
#topnav li {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
}
#topnav > li > a.active {
  background-color: #79D3C1;
  color: #fff;
  margin-top: -30px;
}
#topnav > li > a {
  line-height: 50px;
  padding: 0 18px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  color: #555F67;
  margin-top: -30px;
}
#topnav li a {
  display: block;
  text-decoration: none;
  -o-transition: all .15s ease-out;
  -moz-transition: all .15s ease-out;
  -webkit-transition: all .15s ease-out;
  transition: all .15s ease-in-out;
}
#topnav > li:hover > a {
  background: #4D5760;
  color: #fff;
}
#topnav > li {
  margin-right: 2px;
  padding-bottom: 5px;
}
#topnav li ul {
  position: absolute;
  width: 210px;
  left: -999em;
  padding: 5px 0;
  background: #4D5760;
  border-radius: 5px;
  margin-top: -30px;
}
#topnav li:hover ul {
  left: 0;
  top: 52px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
#topnav li li {
  width: 200px;
  height: auto;
}
#topnav li {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
}
#topnav li li a {
  color: #fff;
  line-height: 30px;
  font-size: 13px;
}
#topnav li li a {
  display: block;
  width: 174px;
  padding: 0 18px;
  color: #fff;
  height: auto;
  float: none;
  line-height: 30px;
  font-size: 13px;
}
#topnav > li {
  margin-right: 2px;
  padding-bottom: 5px;
}
#topnav li ul {
  position: absolute;
  width: 210px;
  left: -999em;
  padding: 5px 0;
  background: #4D5760;
  border-radius: 5px;
}
#topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul {
  left: 190px;
  top: 0;
}
#topnav ul li a:hover {
  color: #85F6F5;
}
#topnav li li {
  width: 200px;
  height: auto;
}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li:hover ul ul ul ul {
  top: -999em;
  left: auto;
}
#topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul {
  left: 190px;
  top: 0;
}
/*-Board Notice-*/
#board-notice {
  padding: 20px 0;
  line-height: 20px;
  text-align: right;
  font-size: 12px;
}
/*-Toolbar-*/
#content-wrapper {
  margin-bottom: 40px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}
#pun-visit, .main-box {
  display: inline-block;
  width: 97.5%;
  background-color: #cfcfcf;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 2px;
  border: 1px solid #9e9e9e;
}
#toolbar {
  height: 60px;
  background-color: #80A461;
  background-image: linear-gradient(#80A461, #3F5748);
  border-bottom: 1px solid #3F5748;
}
#toolbar a {
  color: #dde7c9;
  font-size: 13px;
  font-family: 'Lato', sans-serif;
}
#quicknav {
  float: left;
  margin: 15px 0 0 15px;
}
#quicknav ul {
  margin: 0;
  padding: 0;
}
#quicknav li {
  float: left;
  list-style: none;
  margin: 0 3px 0 0;
  padding: 0;
}
#quicknav li.social a {
  background: #fff url(http://i.imgur.com/5ZzJfCW.png) no-repeat;
  height: 34px;
  width: 34px;
  padding: 0;
  text-indent: -9999px;
  border-radius: 34px;
}

#quicknav li a {
  display: block;
  padding: 0 0 0 15px;
  line-height: 34px;
  font-size: 13px;
  color: #fff;
  text-transform: uppercase;
}
#quicknav li a:hover {
  text-decoration: none;
}
#account {
  float: right;
  margin: 15px 15px 0 -15px;
}
#account input[type=text], #account input[type=password] {
  background: #566069;
  border: 1px solid #45494F;
  width: 120px;
  height: 18px;
  padding: 7px 10px;
  border-radius: 5px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
}
#account input[type=text]:focus, #account input[type=password]:focus {
  background: #4C565F;
  border-radius: 5px;
  color: #9BA5AE;
}
#account input {
  float: left;
  border: none;
  outline: none;
  padding: 0;
  margin-left: 5px;
  color: #7A848D;
  line-height: 1;
}
#account input[type=submit], #account a.signup-btn {
  height: 34px;
  width: 34px;
  cursor: pointer;
  border-radius: 34px;
}
#account input[type=submit] {
  background: #91C5CD url(http://i.imgur.com/n5dzb3A.png) 0 0 no-repeat;
  -o-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
#account input[type=submit]:hover {
  background-color: #7FB3BB;
}
#account .signup-btn {
  background: #ff8488 url(http://i.imgur.com/n5dzb3A.png) 0 -39px no-repeat;
  float: left;
  margin-left: 5px;
}
#account .signup-btn:hover {
  background-color: #EC7175;
}
#userarea {
  line-height: 34px;
  color: #929ca5;
  float: right;
  letter-spacing: 1px;
  margin: 15px 15px 0 0;
  width: 500px;
  text-align: justify;
}
/*-Main Content-*/
#main-content {
  background-color: #808672;
  padding: 15px;
  overflow: hidden;
}
.pun .main-content {
  background-color: #EDEDED;
  border: none;
}
#profile-advanced-details div.separator {
  border-bottom: 1px solid #9e9e9e;
}
#profile-advanced-details dl {
  margin: 0.6em 0 0;
  padding: 0.6em 0px 0.7em 0;
  width: 98%;
}
.pun .user-ident .user-basic-info {
  margin-top: 5px;
  margin-bottom: -5px;
}
.main .main-foot, .main .main-head {
  background-color: #3F5748;
  color: #fff;
  -webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
  line-height: 38px;
  font-size: 1.12em;
  font-weight: bold;
  font-family: 'Lato', 'Arial', sans-serif;
  padding: .0em 0.5em;
}
#tabs ul li.activetab a {
  background-color: #90c4cc;
  border-color: #90c4cc;
  color: #f4f9fd;
  text-decoration: underline;
}
#tabs ul li a {
  background-color: #ededed;
  border: 1px solid #E9E9E9;
  border-bottom: none;
}
#tabs ul li.activetab a:hover {
  background-color: #89BAC2;
}
#profile-advanced-right .main-content.clearfix.center img:first-child {
  padding: 2px;
  border-radius: 10px;
  border: 1px solid #9e9e9e;
  background: #ededed;
  width: 125px;
  -o-transition: all .15s ease-out;
  -moz-transition: all .15s ease-out;
  -webkit-transition: all .15s ease-out;
  transition: all .15s ease-in-out;
}
#profile-advanced-right .main-content.clearfix.center img:first-child:hover {
  opacity: 0.9;
}
.main-content.standalone h2 {
  border-bottom: 1px solid #9e9e9e;
}
.main-content.standalone .button {
  background-color: #90c4cc;
  border: 1px solid #90c4cc;
  color: #f4f9fd;
  margin: 1em;
  padding: .5em 1em;
}
.main-content.standalone .button:hover {
  background-color: #89BAC2;
  border: 1px solid #90c4cc;
}
.main-content.standalone .button.button1 {
  font-weight: 500;
}
/*-Footer-*/
#pun-about #qjump, #pun-about fieldset {
  display: none;
}
#pun-about {
  background-color: #ededed;
  border-color: #1a1a1a;
      width: 97.89%;
    margin-left: -0.9px;
}
#footer {
  padding: 30px 0;
  background: #3F5748;
  color: #889497;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  border-top:1px solid #000;
}
#footer .wrapper {
  position: relative;
}
#footer a.backtop {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  background: url(http://i.imgur.com/20hmQGl.png) 0 0 no-repeat;
  height: 22px;
  width: 22px;
}
#footer a.backtop:hover {
  background-position: 0 -27px;
}
#footer a {
  color: #000;
  font-size: 13px;
  font-family: 'Lato', sans-serif;
}
#footer strong {
  color: #ADB9BC;
}
a:link, a:visited {
  color: #717F53;
  text-decoration: none;
}
.smalltext, tr.smalltext th {
  font-size: 11px;
}
/*-Categorias-*/
.pun table.table td {
  background-color: #e6e6e6 !important;
  border-color: rgba(0,0,0,0);
  border-style: none;
  border-width: 0;
}
.pun .main table td.tc2, .pun .main table td.tc3 {
    background-color: #e6e6e6 !important;
}
.pun tbody.statused span.status {
  position: relative;
  width: 0px;
}
.icon.windowbg span img {
  margin-left: .1em;
}
.icon.windowbg {
  text-align: center;
  width: 5.9%;
}
.pun .main-content .table .statused tr {
  border-bottom: 1px solid #9e9e9e;
}
.pun tbody.statused td.tcl {
  padding-left: 40px;
}
.pun table.table td {
  line-height: 130%;
}
.pun table .tcr {
  font-size: 11px;
  text-align: right;
background-color: #e6e6e6;
}
.pun table .tcr {
  font-size: 11px;
  overflow: hidden;
  padding: 0 .9em 0 .5em !important;
  text-align: right;
  width: 26%;
  background-color: #e6e6e6;
}
.pun .table .tc2, .pun .table .tc3 {
  font-size: 11px;
  line-height: 140%;
  text-align: left;
  width: 15%;
  background-color: #e6e6e6;
}
.pun table.table th {
    background-color: #e6e6e6;
    border-color: #;
    border-style: none;
    color: #333;
    padding: .5em 0;
}
  .pun .frm-form {
    background: #e6e6e6;
    border: none;
}
.tc2 span {
  color: #444;
  font-size: 133%;
}
table.table_list tbody.header td {
  padding: 0;
}
table.table_list tbody.header td div.cat_bar {
  margin-bottom: -1px;
}
div.cat_bar {
  background: #3F5748;
  padding-left: 9px;
  height: 38px;
  overflow: hidden;
  margin-top: 15px;
}
 
h4.catbg, h4.catbg2, h3.catbg, h3.catbg2, .table_list tbody.header td.catbg {
  background: #3F5748;
  padding-right: 9px;
}
h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a {
  color: #fff;
}
.pun h3.catbg, h3.catbg2, h3.titlebg, h4.titlebg, h4.catbg {
  line-height: 38px;
  font-size: 20px;
  font-family: 'poiret one', sans-serif;
  text-align:center;
  text-transform:uppercase;
  letter-spacing: 5;
  text-weight: 100;
      text-shadow: 1px 1px 2px #000;
}
.pun h2.topic-title {
  line-height: 3;
  font-family: 'poiret one', san-serif;
  text-transform: uppercase;
  text-weight: 600;
  font-size: 15px;
  letter-spacing: 0.8;
}

.tcl .hierarchy .forumtitle {
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: #708559;
  height:20px;
  text-transform:uppercase;
}
#posting_icons {
  padding: 0 1em 0.5em 1em;
  margin: 1.5em 0 2.4em 0;
  line-height: 1em;
}
#posting_icons ul {
  font-size: 0.8em;
}
ul.reset, ul.reset li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.floatleft {
  float: left;
}
#posting_icons img {
  vertical-align: middle;
  margin: 0 0 0 4ex;
}
#posting_icons ul {
  font-size: 0.8em;
}
.pun-crumbs {
  display: block;
  margin: 10px;
  padding: 5px 10px;
  overflow: hidden;
  clear: both;
  border: 1px solid #20231E;
  border-radius: 3px;
}
.pun-crumbs .crumbs a {
  white-space: pre;
  color: #37553b;
  font-size: 12px;
}
.pun-crumbs p {
  line-height: 1.9;
  color: #fff;
}
.pun .paged-foot, .pun .paged-head {
  background-color: transparent;
  border: none;
  padding: .6em 1.3em .3em;
}
#stats {
  border: 1px solid #9e9e9e;
  border-bottom: none;
  background-color: #ededed;
}
#onlinelist {
  background-color: #ededed;
  border: 1px solid #9e9e9e;
}
/*-Stats-*/
.roundframe {
background: #E1E1E1;
border: 2px solid #eee;
border-radius: 5px;
padding: 10px;
}
#upshrinkHeaderIC {
margin-top: 4px;
}
div.title_barIC {
  background: #80A15D;
  -webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
height: 40px;
margin-bottom: 1px;
overflow: hidden;
padding-left: 9px;
}
div.title_barIC h4.titlebg {
  background: #80A15D;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #fff;
  font-weight: 100;
    text-shadow: 1px 1px 2px #000;
}
h4.titlebg, h3.titlebg {
  background: #80A15D;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding-right: 9px;
}
h4.titlebg img.icon {
float: left;
margin: 8px 8px 0 0;
}
div.roundframe div.cat_bar h3.catbg {
  background: #80A15D;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
      text-shadow: 1px 1px 2px #000;
}
div.roundframe div.cat_bar {
  background: #80A15D;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
margin-bottom: 0;
}
#upshrinkHeaderIC p {
margin: 0 0 0.5em 0;
padding: 0.5em;
}
#upshrinkHeaderIC p.stats {
font-size: 1.1em;
padding-top: 8px;
}
#upshrinkHeaderIC p.inline {
border: none;
margin: 0;
}
#upshrinkHeaderIC p.last {
margin: 0;
padding: 0.5em;
border-top: 2px dotted #bbb;
}
/*-Register-*/
#username_reg, #email, #password_reg {
  font: 95%/115% 'Lato', sans-serif;
  color: #4F5961;
  background: #E1E1E1;
  border: 1px solid #7f9db9;
  padding: 5px;
  border-radius: 3px;
}
fieldset.frm-set.multi {
  border-bottom: none;
  padding: 0;
  margin-bottom: -0px;
}
.main .main-content.frm {
  background-color: #E1E1E1;
}
.frm-buttons {
  border-top: 1px solid #8e8e8e;
}
.pun .frm .frm-buttons input {
  background: #FE7B7F;
  color: #fff;
  cursor: pointer;
  font-weight: normal;
  border: none;
  font: 95%/115% 'Lato', sans-serif;
  padding: 5px;
  border-radius: 3px;
}
.pun .frm .frm-buttons input:hover {
  background: #4D5760;
}
#pun-announcement {
  background-color: transparent;
  border: 1px solid transparent;
  color: #4F5961;
  font-weight: 700;
  margin-top: -20px;
  border-radius: 2px;
  padding: 1em;
}
.main .frm-info {
  background: #ededed;
  border: 1px solid #D6EFF8;
  color: #4F5961;
  font-weight: 700;
  margin: 0.5em;
  padding: 1em;
}
/*-Chat-*/
#chatbox_members {
  border-right: 1px solid #9e9e9e;
  bottom: 37.5px;
}
#chatbox_footer {
  border-top: 1px solid #9e9e9e;
}
#chatbox_header.main-head {
  background-color: #3F5748;
  border-radius: 2px;
}
.chatbox-title, .chatbox-title a.chat-title {
  color: #FFFFFF;
  text-decoration: none;
  margin-left: -7px;
}
.chatbox-title {
  padding: 3px 5px 0;
}
.chatbox-options li:hover, .chatbox-options li a:hover, .chatbox-options li label:hover {
  color: white;
}
#chatbox_members .member-title {
  background-color: rgba(144, 196, 204, 0.5);
  border-bottom: 2px solid #90C4CC;
}
.member-title.away {
  background-color: rgba(77, 87, 96, 0.5);
  border-bottom: 2px solid #4D5760;
}
/*-Posts-*/
.pagesection {
 font-size: 0.9em;
  margin: 10px 0;
  overflow: hidden;
}
.nextlinks {
  text-align: right;
  margin-top: -1px;
}
.buttonlist.floatright ul li a {
color: #FFF;
}
.buttonlist ul {
  z-index: 100;
  padding: 0;
  margin: 0 0 5px 0;
}
.buttonlist li {
  margin: 0 0 0 2px;
  padding: 0;
  list-style: none;
  float: left;
}
.buttonlist li a {
  display: block;
  font-size: 12px;
  color: #fff;
  background: #626C75;
  height: 22px;
  line-height: 21px;
  padding: 0 8px;
  cursor: pointer;
  border-radius: 3px;
}
.buttonlist.floatright {
  float: right;
}
.align_top ul li a, .align_bottom ul li a {
  margin: 0 12px 0 0;
}
.pun .paging {
  float: left;
  font-size: .9em;
  font-weight: 300;
}
.pun .postmain {
    background-color: #ededed;
    border-left: none;
    margin-left: 14.6em;
    margin-top: 15px;
}
.pun .main .main-content p.message {
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 1.7em;
    padding: 1em;
    margin-top: 0px;
}
.main .main-content.frm {
    background-color: #E1E1E1;
    margin-top: -22px;
}
.pun .post .user {
  float: left;
  margin-left: -14em;
  margin-top: -45px;
  border-right: 0px solid #1a1a1a;
}
.user-basic-info a img {
  width: 160px;
  border: 1px solid #000;
  padding: 1px;
  margin-top: -10px;
}
.pun .posthead {
  background: #E1E1E1;
  border-bottom: 1px solid #519873;
  padding: 0;
}
.pun .post-entry {
background: #ededed;
}
.pun .entry-content {
    overflow: hidden;
    padding-bottom: .8em;
    width: 95%;
    text-align: justify;
}

.postfoot {
  background-color:#ededed;
  border-top: 1px solid #1a1a1a;
  clear: both;
  margin-left: -14.6em;
}
.pun .user {
  width: 15em
}
.sig-content {
  border-top: 1px solid #519873;
}
.pun .user .user-info {
  font-size: 11px;
  width: 160px;
  text-align: justify;
  line-height: 1.4;
}
.pun .user .username {
  font-size: 16px;
  color: #434D55;
  padding-top: 10px;
}
.keyinfo {
  margin-top: 8px;
  border-bottom: 1px solid #1a1a1a;
  background-color: #ededed;
}
.messageicon {
  float: left;
  margin: 0 0.5em 0 0;
}
.messageicon img {
  padding: 6px 3px;
}
h5 {
  color: #434D55;
  font-size: 1em;
  margin: 0;
  padding: 0;
}
/**
 * FA.BEGIN Two-Column Categories
 */
 
.wrapper {
    min-width: 1185px;
}
 
.cat_bar + .main-content tbody {
    overflow: hidden;
}
 
.cat_bar + .main-content .statused > tr {
    display: block;
    width: 45%;
    margin: 2.5%;
    float: left;
    box-sizing: border-box;
    background-color: #e6e6e6;
    border: 1px #ccc solid;
    position: relative;
}
 
.cat_bar + .main-content .statused > tr > td {
    background: none !important;
    padding: 5px;
    display: block; 
    padding-right: 15px;
}
 
.cat_bar + .main-content .tc2 {
    clear: both;
    width: auto;
    text-align: right;
    border-top: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
}
 
.cat_bar + .main-content .tc2,
.cat_bar + .main-content .tc2 span {
    font-size: 0.7rem;
}
 
.cat_bar + .main-content .tc2 span {
    margin-right: 10px;
}
 
.cat_bar + .main-content .tc2 br {
    display: none;
}
 
.cat_bar + .main-content .statused > tr > .tcr {
    display: none;
}
 
.cat_bar + .main-content .tcl {
    box-sizing: border-box;
    height: 175px;
    display: block;
    margin-left: 70px;
    width: auto;
}
 
.cat_bar + .main-content .icon {
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -32px;
}
 
.cat_bar + .main-content .hierarchy {
    display: block;
    padding-top: 10px;
    text-align: center;
}
 
.cat_bar + .main-content .hierarchy + br {
    display: none;
}
/**
 * FA.END Two-Column Categories
 */
.module .main-head {
  text-shadow: 1px 1px 3px black;
  font-family: poiret one;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 3;
  line-height: 2;
}
.module.main {
  font-size:10px;
  font-family: verdana;
}
::-webkit-scrollbar-track
{
   border: 1px solid black;
   background-color: #F5F5F5;
}
::-webkit-scrollbar
{
   width: 10px;
   background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
   background-color: #000000;   
}
#topnav li:hover ul li:hover ul {
    left: auto;
    right: -100%;
    top: 0;
}
.tdtopics img {
    vertical-align: middle;
    padding: 5px;
}
/* Headerbox */
#headerbox {
width:100%;
padding:15px;
background: #transparent;
border:1px solid #EEE;
  margin-top: -30px;
}

#headerbox .headerin {
width:50%px;
padding:10px;
background-color:#transparent;
border:1px solid #F3F3F3;
}

h3 {
    font-size: 30px;
}
 
.center1 {
    display: flex;
    justify-content: justify;
    align-items: center;
    height: auto;
}
 
.center_box1 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 250px;
    height: auto;
    border: 1px solid #70ad47;
    background: #52614A; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#fff, #fff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#fff, #fff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fff, #fff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#fff, #fff); /* Standard syntax */
 
}
 
.flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
 
.label1 {
    width: 80%;
    height: 10px;
    background-image: url('http://cottonwoodpetresort.com/Images/Main/arrow_down.png');
    background-size: 10%;
    background-position: right;
    background-repeat: no-repeat;
}
 
#menu_trigger {
    display: none;
}
 
#menu_trigger:checked + div {
    height: auto;
    padding: 10px;
    background-color:none;
}
 
.center_box1 > div {
    transition: all .2s;
    width: 100%;
    height: 0px;
    overflow: hidden;
    display: flex;
    justify-content: left;
    align-items: center;
}
 
.center1 {
    display: flex;
    justify-content: justify;
    align-items: center;
    height: auto;
}
 
.center_box2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 250px;
    height: auto;
    border: 1px solid #70ad47;
    background: #52614A; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#fff, #fff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#fff, #fff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fff, #fff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#fff, #fff); /* Standard syntax */
 
}
 
.flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
 
.label2 {
    width: 80%;
    height: 10px;
    background-image: url('http://cottonwoodpetresort.com/Images/Main/arrow_down.png');
    background-size: 10%;
    background-position: right;
    background-repeat: no-repeat;
}
 
#menu_trigger {
    display: none;
}
 
#menu_trigger:checked + div {
    height: auto;
    padding: 10px;
    background-color:none;
}
 
.center_box2 > div {
    transition: all .2s;
    width: 100%;
    height: 0px;
    overflow: hidden;
    display: flex;
    justify-content: left;
    align-items: center;
}
 
.center2 {
    display: flex;
    justify-content: justify;
    align-items: center;
    height: auto;
}
 
.center_box3 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 250px;
    height: auto;
    border: 1px solid #70ad47;
    background: #52614A; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#fff, #fff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#fff, #fff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fff, #fff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#fff, #fff); /* Standard syntax */
 
}
 
.flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
 
.label3 {
    width: 80%;
    height: 10px;
    background-image: url('http://cottonwoodpetresort.com/Images/Main/arrow_down.png');
    background-size: 10%;
    background-position: right;
    background-repeat: no-repeat;
}
 
#menu_trigger {
    display: none;
}
 
#menu_trigger:checked + div {
    height: auto;
    padding: 10px;
    background-color:none;
}
 
.center_box3 > div {
    transition: all .2s;
    width: 100%;
    height: 0px;
    overflow: hidden;
    display: flex;
    justify-content: left;
    align-items: center;
}
img[alt="avatar"]{
max-width:160px !important;
max-height:220px !important;
}
#fa_usermenu img {
    max-height: 120px !important;
    max-width: 120px;
}
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }
        .fa_vote, .fa_voted, .fa_count {
          font-size:12px;
          font-family:Verdana, Arial, Helvetica, Sans-serif;
          display:inline-block !important;
          width:auto !important;
          float:none !important;
          transition:300ms;
        }
     
        .fa_voted, .fa_vote:hover { opacity:0.4 }
        .fa_voted { cursor:default }
     
        .fa_count {
          font-weight:bold;
          margin:0 3px;
          cursor:default;
        }
     
        .fa_positive { color:#36BB8A }
        .fa_negative { color:#BB364A }
     
        .fa_votebar, .fa_votebar_inner {
          background:#C44;
          height:3px;
        }
     
        .fa_votebar_inner {
          background:#4A0;
          transition:300ms;
        }

Edit: I found the basics of it xD.. most of it is edited with my own thouch and some help from in here ^^
It was this one: http://www.punbb.biz/t598-pelikan-integrated-with-forumotion-backup-template

bump

Hello, can you please post the viewtopic_body template here? You need to do some modifications to it in order for the entire line to move up.

Here it is:

Code:


<script type="text/javascript">//<![CDATA[
  var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
  $(function(){
 
      if(typeof(_atc) == "undefined") {
          _atc = { };
      }
 
      _atc.cwait = 0;
      $('.addthis_button').mouseup(function(){
          if ($('#at15s').css('display') == 'block') {
              addthis_close();
          }
      });
  });
 
  var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
  showHiddenMessage = function(id)
  {
      try
      {
          var regId = parseInt(id, 10);
          if( isNaN(regId) ) { regId = 0; }
     
          if( regId > 0)
          {
              $('.post--' + id).toggle(0, function()
          {
              if( $(this).is(":visible") )
              {
                $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
              }
              else
              {
                $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
              }
          });
          }
      }
      catch(e) { }
 
    return false;
  };
 
  //]]>
</script>
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
  <ul>
      <!-- BEGIN switch_plus_menu -->
      <li>
        <script type="text/javascript">//<![CDATA[
            var url_favourite = '{switch_user_logged_in.U_FAVOURITE_JS_PLUS_MENU}';
            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}';
            insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
        </script>
      </li>
      <!-- END switch_plus_menu -->
      <li><a class="addthis_button" href="#">{L_SHARE}</a></li>
      <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
      <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</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 -->
<div class="pun-crumbs noprint">
  <p class="crumbs">
      <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC} »
      <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
      <!-- BEGIN switch_twitter_btn -->
      <span id="twitter_btn" style="margin-left: 6px; ">
        <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
      </span>
      <!-- END switch_twitter_btn -->
      <!-- BEGIN switch_fb_likebtn -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
  </script>
  <div class="fb-like right" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false" style="top:-15px;"></div>
  <!-- END switch_fb_likebtn -->
  </p>
</div>
<div class="main paged">
  <div class="pagesection">
      <div class="nextlinks"><a href="{U_VIEW_OLDER_TOPIC}">« previous</a> <a href="{U_VIEW_NEWER_TOPIC}">next »</a></div>
      <!-- BEGIN topicpagination -->
      <p class="paging">{PAGINATION}</p>
      <!-- END topicpagination -->
      <p class="posting">
        <!-- BEGIN switch_user_logged_in -->
        <!-- BEGIN watchtopic -->
      <ul>
        <li class="left">{S_WATCH_TOPIC}</li>
      </ul>
     
      <!-- END watchtopic -->
      <!-- END switch_user_logged_in -->
      <!-- BEGIN switch_user_authpost -->
      <div class="buttonlist floatright">
        <ul>
            <li><a class="button_strip_print" href="{L_POST_NEW_TOPIC}" rel="new_win nofollow"><span class="last">Opret emne</span></a></li>
        </ul>
      </div>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
      <div class="buttonlist floatright">
        <ul>
            <li><a class="button_strip_print" href="{U_POST_REPLY_TOPIC}" rel="new_win nofollow"><span class="last">Svar</span></a></li>
        </ul>
      </div>
      <!-- END switch_user_authreply -->
      </p>
  </div>
  {POLL_DISPLAY}
  <div class="main-head clearfix">
      <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
        <img src="http://i.imgur.com/gC0UJxo.gif" align="bottom" alt="" style="float: left;margin: 9px 0.5em 0 0;" />
        <span id="author" style="margin: 0 7.7em 0 0;">Author</span>
        Topic: {TOPIC_TITLE}
      </p>
  </div>
  <div class="main-content topic">
      <!-- BEGIN postrow -->
      <!-- BEGIN hidden -->
      <p class="p-hidden">{postrow.hidden.MESSAGE}</p>
      <!-- END hidden -->
      <!-- BEGIN displayed -->
      <!-- BEGIN first_post_br -->
  </div>
  <hr id="first-post-br" />
  <div class="main-content topic">
      <!-- END first_post_br -->
      <div class="post post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
      <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -20px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
      <div class="postmain"{postrow.displayed.THANK_BGCOLOR}>
        <div class="keyinfo">
            <div class="messageicon">
              <img src="http://i.imgur.com/qA3M1mQ.gif" alt="" />
            </div>
            <h5 id="subject_8">
              <a href="http://demo.dzinerstudio.com/smf2/index.php?topic=7.msg8#msg8" rel="nofollow">{TOPIC_TITLE}</a>
            </h5>
            <div class="smalltext" style="margin-bottom: 6px;">« <strong> on:</strong> {postrow.displayed.POST_DATE_NEW} »</div>
            <div id="msg_8_quick_mod"></div>
        </div>
        <div class="postbody"{postrow.displayed.THANK_BGCOLOR}>
            <div class="user">
              <div class="user-ident">
                  <h4 class="username">{postrow.displayed.POSTER_NAME}<br /></h4>
                  <div class="user-basic-info">
                    {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}<br />
                    {postrow.displayed.POSTER_AVATAR}
                  </div>
              </div>
              <div class="user-info">
                  <!-- BEGIN profile_field -->
                  {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                  <!-- END profile_field -->
                  {postrow.displayed.POSTER_RPG}
              </div>
              <br />
              <div class="user-contact profile_{postrow.displayed.PROFILE_POSITION}">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
              </div>
            </div>
            <div class="post-entry">
              <div class="entry-content">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                    <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                    <!-- END switch_vote -->
                    <!-- BEGIN switch_bar -->
                    <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        <!-- BEGIN switch_vote_plus -->
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->
                        <!-- BEGIN switch_vote_minus -->
                        <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                    </div>
                    <!-- END switch_bar -->
                    <!-- BEGIN switch_no_bar -->
                    <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                    <!-- END switch_no_bar -->
                    <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                    <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->
                  <div>
                    <div>{postrow.displayed.MESSAGE}</div>
                    <!-- BEGIN switch_attachments -->
                    <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                          <!-- BEGIN switch_post_attachments -->
                          <dl class="file">
                              <dt>
                                <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />
                                <!-- BEGIN switch_dl_att -->
                                <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_dl_att -->
                                <!-- BEGIN switch_no_dl_att -->
                                {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_no_dl_att -->
                              </dt>
                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->
                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->
                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                          </dl>
                          <!-- END switch_post_attachments -->
                        </dd>
                    </dl>
                    <!-- END switch_attachments -->
                    <div class="clear"></div>
                  </div>
                  <p>
                    {postrow.displayed.EDITED_MESSAGE}
                  </p>
              </div>
            </div>
        </div>
        <!-- BEGIN switch_signature -->
        <div class="sig-content">
            {postrow.displayed.SIGNATURE_NEW}
        </div>
        <!-- END switch_signature -->
        <div class="postfoot">
            <div class="post-options profile_{postrow.displayed.PROFILE_POSITION}">
              {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
            </div>
            <div style="clear:both;"></div>
        </div>
      </div>
  </div>
  <!-- END displayed -->
  <!-- END postrow -->
</div>
<div class="main-foot clearfix">
  <p class="h2">
      <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> 
      {L_MESSAGE} [{PAGE_NUMBER}]
  </p>
  <p class="options">
      <input type="hidden" name="t" value="{TOPIC_ID}" />
      <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
      <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
      <!-- BEGIN viewtopic_bottom -->
      {S_TOPIC_ADMIN}
      <!-- END viewtopic_bottom -->
  </p>
</div>
<a name="bottomtitle"></a>
</div>
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<span class="right">{S_WATCH_TOPIC}</span>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
<div class="pun-crumbs">
  <p class="crumbs">
      <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC} »
      <strong><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></strong>
  </p>
</div>
<!-- BEGIN promot_trafic -->
<div class="main" id="ptrafic_close" style="display:none">
  <div class="main-head clearfix">
      <p class="h2">{PROMOT_TRAFIC_TITLE}</p>
      <p class="options"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></p>
  </div>
</div>
<div class="main" id="ptrafic_open" style="display:''">
  <div class="main-head clearfix">
      <p class="h2">{PROMOT_TRAFIC_TITLE}</p>
      <p class="options"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></p>
  </div>
  <div class="main-content clearfix">
      <!-- BEGIN link -->
      » <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
      <!-- END link -->
  </div>
</div>
<!-- END promot_trafic -->
<!-- BEGIN switch_forum_rules -->
<div class="main" id="forum_rules">
  <div class="main-head clearfix">
      <p class="h2">{L_FORUM_RULES}</p>
  </div>
  <table class="main-content frm">
      <tr>
        <!-- BEGIN switch_forum_rule_image -->
        <td class="logo">
            <img src="{RULE_IMG_URL}" alt="" />
        </td>
        <!-- END switch_forum_rule_image -->
        <td class="rules entry-content">
            {RULE_MSG}
        </td>
      </tr>
  </table>
</div>
<!-- END switch_forum_rules -->
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->
<div id="pun-info" class="main">
  <div class="main-content">
      <div id="stats">
        <p>{L_TABS_PERMISSIONS} <br />{S_AUTH_LIST}</p>
      </div>
  </div>
</div>
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
  //<![CDATA[
  $(resize_images({ 'selector' : '.post-entry .entry-content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
  //]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

I noticed something other that seems to be incorrect. When clicking on a topics tilte / link in the topic it goes forth to this site: http://demo.dzinerstudio.com/cgi-sys/suspendedpage.cgi?topic=7.msg8#msg8

Dkn what causes this.. :s

Edit: got the topic title to work by my self. But is it not possible, when clicking on the topic title url, that it jumps directly to the first post in the topic? ^^

bump