MyBB Community Forums

Full Version: post content length
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
test site: http://sands.draebox.com

Hi guys! I'm having issues with a theme's post content width for classic mode. I know it is controlled by: .post.classic .post_content as well as, .post_content, but the content is changing width due to the responsive nature of the theme. The person I made the skin for wants it to remain mobile-friendly, and at this point I'm not sure what to put to keep it responsive but without causing any new issues. I've tried using percentages and set pixels but am having the issues regardless of what I put. I'm pretty much at my wit's end with this skin.

I've added a screenshot that shows you the issue I'm having - the content of post #9 is shorter in width due to the coding, whereas #10 is closer to the result we need. I want this result no matter the screensize as that's what requested by the person I made the skin for. 

Avatars are sized at 150x250.

[Image: DwHnkBN.jpg] (click to enlarge.)

body {

 background: url(http://skins.draebox.com/images/mina/larger_back.png), url(http://i6.photobucket.com/albums/y244/j9wolf/minaskin/back_texture2_largec.png); 
    background-position: top center, top left;
background-repeat: no-repeat, repeat;
    background-color: #171717;
  color: #c8c8c8;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: 'Special Elite', cursive;
font-size: 16px;
overflow-y: scroll;
}

a:link,a:visited {
color: #E37A30;
text-decoration: none;
}

a:hover,a:active {
color: #E33030;
text-decoration: none;
}

/* HOLDS EVERYTHING */
#container {
text-align: left;
line-height: 1.4;
margin: 20px auto 20px;
font-family: 'Special Elite', cursive;
min-width: 250px;
    max-width: 1800px;
    background: #7c422b;
    opacity: 0.8;
    border-radius: 25px;
   border: 1px solid #000;
   padding: 10px;
}

/* CONTROLS THE WIDTH OF MULTIPLE COMPONENTS IN THE DESIGN */
.wrapper {
    width: auto;
margin: auto auto;
   background: transparent;
   padding: 0px;
   margin: 6px;
   border: 0px;
}


/* LOGO BASICS CONTAIN */
#logo {
background: transparent;
    text-align: center;
padding: 0px;
border: none;
    max-width: 100%;
    height: auto;
    font-family: 'Special Elite', cursive;
}

/* TO MAKE LOGO IMAGE RESPONSIVE */
#logo img {
      max-width: 100%;
      height: auto;
      border: 1px solid #000;
      border-radius: 20px;
}

#content {
background: transparent;
width: auto !important;
padding: 20px 10px;
overflow: hidden;

}

/* User, Admin and Mod CP links & sub
background styling */
#header ul.menu {
margin: 0;
padding: 6px;
list-style: none;
   border-bottom: 1px solid #070707;
   border-top: none;
   background: transparent;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
}

#header ul.menu li {
margin: 0 7px;
display: inline;
}

#header ul.menu li a {
padding-left: 20px;
background-repeat: no-repeat;
display: inline-block;

}

#logo ul.top_links {
font-weight: bold;
text-align: center;
margin: -10px 5px 0 0;
}

#logo ul.top_links a.search {
background-position: 0 0;
}

#logo ul.top_links a.memberlist {
background-position: 0 -20px;
}

#logo ul.top_links a.calendar {
background-position: 0 -40px;
}

#logo ul.top_links a.help {
background-position: 0 -60px;
}

#logo ul.top_links a.portal {
background-position: 0 -180px;
}

#panel .upper a.logout {
font-weight: bold;
background: transparent;
padding-right: 10px;
margin-left: 10px;
}

#panel .upper a.login,
#panel .upper a.lost_password {
background: transparent;
padding-left: 20px;
margin-left: 10px;
font-weight: bold;
}

#panel .upper a.register {
background: transparent;
padding-right: 20px;
margin-left: 10px;
font-weight: bold;
}

/* . STYLING OF ADMIN, USER AND MOD CP LINKS */
#panel .lower ul.panel_links {
float: left;
}

#panel .lower ul.panel_links a.usercp {
background-position: 0 -120px;
}

#panel .lower ul.panel_links a.modcp {
background-position: 0 -140px;
}

#panel .lower ul.panel_links a.admincp {
background-position: 0 -160px;
}

#panel .lower ul.user_links {
float: right;
}

#panel .lower ul.user_links li a {
padding: 0;
background-image: none;
}

/* Welcome back etc */
#panel .upper {
background: #222;
color: #c8c8c8;
border-top: none;
border-bottom: 1px solid #070707;
padding: 7px;
clear: both;
    opacity: 0.9;
   margin-bottom: none;
}

#panel .upper a:link,
#panel .upper a:visited {
color: #e37a30;
}

#panel .upper a:hover,
#panel .upper a:active {
  color: #e33030;
}

/* MORE ADMIN MOD AND USER CP etc */
#panel .lower {
background: transparent;
color: #c8c8c8
border-top: none
border-bottom: 1px solid #070707;
padding: 5px;
    padding-top: none;
}

#panel .lower a:link,
#panel .lower a:visited {
  color: #e37a30;
}

#panel .lower a:hover,
#panel .lower a:active {
color: #e33030;
}

#search {
border: 0;
padding: 0;
margin: 0;
float: right;
vertical-align: middle;
}

#search input.button,
#search input.textbox {
border-color: #000;
    background: #090909;
}

#search input.button {
background: #222;
color: #C8C8C8;
}

#search input {
margin: -3px 0;
}

#quick_login .remember_me input {
vertical-align: middle;
margin: -3px 0 0 5px;
}

#footer {
clear: both;
}

#footer ul.menu {
margin: 0;
padding: 0;
list-style: none;
}

#footer ul.menu li {
margin: 0 5px;
display: inline;
}

/* Contact us etc */
#footer .upper {
background: #222;
border-top: 1px solid #070707;
border-bottom: 1px solid #070707;
padding: 6px;
font-size: 12px;
overflow: hidden;
}

#footer a:link,
#footer a:visited {
  color: #e37a30;
}

#footer a:hover,
#footer a:active {
color: #e33030;
}

#footer .upper .language {
float: right;
margin: -1px;
margin-left: 15px;
}

#footer .upper .language select {
border-color: #070707;
}

#footer .upper .theme {
float: right;
margin: -1px;
margin-left: 15px;
}

#footer .upper .theme select {
border-color: #070707;
}

#footer .upper ul.bottom_links {
float: left;
margin: 4px 0 0 0;
}

/* Powered by etc */
#footer .lower {
color: #c8c8c8;
padding: 6px 6px 12px 6px;
overflow: hidden;
font-size: 10px;
}

#footer .lower a:link,
#footer .lower a:visited {
color: #e37a30;
font-weight: bold;
}

#footer .lower a:hover,
#footer .lower a:active {
color: #e33030;
text-decoration: none;
font-weight: bold;
}

#footer .lower #current_time {
float: right;
color: #c8c8c8;
    display: none;
}

#debug {
float: right;
text-align: right;
margin-top: 20px;
font-size: 8px;
    display: none;
}

.scaleimages img {
max-width: 100%;
}

.forum_status {
height: 72px;
width: 80px;
    padding: 3px;
background: url(http://i6.photobucket.com/albums/y244/j9wolf/minaskin/key-1.png) no-repeat;
display: inline-block;
}

/* NEW FM */
.forum_on {
background: url(http://skins.draebox.com/images/mina/key.png) no-repeat;
}

/* NONEW FM */
.forum_off {
background: url(http://skins.draebox.com/images/mina/lock.png) no-repeat;
}

/* LOCKED FM */
.forum_offlock {
background: url(http://skins.draebox.com/images/mina/lock.png) no-repeat;
}

/* REDIRECT FM */
.forum_offlink {
background: url(http://skins.draebox.com/images/mina/key.png) no-repeat;
}

.forum_on img,.forum_off img,.forum_offlock img,.forum_offlink img {
    width: 80px;
    margin: auto auto;
}

.subforumicon {
height: 10px;
width: 10px;
display: inline-block;
margin: 0 5px;
background: url(images/mini_status_sprite.png) no-repeat 0 0;
}

.subforum_minion {
background-position: 0 0;
}

.subforum_minioff {
background-position: 0 -10px;
}

.subforum_miniofflock {
background-position: 0 -20px;
}

.subforum_miniofflink {
background-position: 0 -30px;
}

table {
color: #c8c8c8;
}

.tborder {
background: transparent;
width: 100%;
margin: auto auto;
border: none;
padding: 1px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    opacity: 100;
}

.tfixed {
table-layout: fixed;
word-wrap: break-word;
}

.thead {
background: transparent;
color: #c8c8c8;
border-bottom: none;
padding: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 40px;
   text-align: center;
  font-family: 'Special Elite', cursive;
  text-shadow: 1px 1px 1px #000;
  letter-spacing: 3px;
  opacity: 100;
}

.thead a:link,.thead a:visited {
color: #fff;
text-decoration: none;
}

.thead a:hover,
.thead a:active {
color: #c8c8c8;
text-decoration: none;
}

.tcat {
background: #221f29;
color: #c8c8c8;
border-top: 1px solid #070707;
    border-bottom: none;
    border-left: 1px solid #070707;
    border-right: 1px solid #070707;
padding: 6px;
font-size: 12px;
}

.tcat a:link {
color: #fff;
}

.tcat a:visited {
color: #fff;
}

.tcat a:hover,
.tcat a:active {
color: #fff;
}

.trow1 {
background: #471602;
border: 1px solid #070707;
}

.trow2 {
background: #471602;
border: 1px solid #070707;
}

.trow_shaded {
background: #471602; /* 7c422b */
border: 1px solid #66311D;
}

.no_bottom_border {
border-bottom: 0;
}

.post.unapproved_post {
background: #FFC7FB;
    color: #222;
}

.post.unapproved_post .post_author {
border-bottom-color: #070707;
}

.post.classic.unapproved_post .post_author {
border-color: #070707;
}

.post.unapproved_post .post_controls {
border-top-color: #070707;
}

.trow_deleted,
.post.deleted_post {
background: #FFF0DE;
}

.trow_selected,
tr.trow_selected td {
background: #6D2E0E;
color: #c8c8c8;
border-right-color: #070707;
border-bottom-color: #070707;
}

.trow_selected a:link,.trow_selected a:visited {
  color: #e37a30;
}

.trow_selected a:hover,
.trow_selected a:active {
color: #e33030;
}

.trow_sep {
background: #222;
color: #c8c8c8;
border-bottom: 1px solid #070707;
padding: 6px;
font-size: 12px;
font-weight: bold;
}

.tfoot {
border-top: 1px solid #070707;
    border-bottom: 1px solid #070707;
padding: 6px;
background: #222;
color: #c8c8c8;
}

.thead input.textbox,
.thead select {
border: 1px solid #070707;
}

.bottommenu {
background: transparent;
color: #C8C8C8;
border: 1px solid #070707;
padding: 10px;
}

.navigation {
color: #c8c8c8;
font-size: 10px;
}

.navigation a:link {
text-decoration: none;
}

.navigation a:visited {
text-decoration: none;
}

.navigation a:hover,
.navigation a:active {
text-decoration: none;
    color: #fff;
}

.navigation .active {
color: #c8c8c8;
font-size: small;
font-weight: bold;
}

.smalltext {
font-size: 14px;
}

.largetext {
font-size: 22px;
font-weight: bold;
}

fieldset {
padding: 12px;
border: 1px solid #070707;
margin: 0;
        background: #221f29;
}

fieldset.trow1,
fieldset.trow2 {
border-color: #070707;
}

fieldset.align_right {
text-align: right;
}

input.textbox {
background: #59210B;
color: #c8c8c8;
border: 1px solid #070707;
padding: 3px;
outline: 0;
font-size: 13px;
font-family: 'Special Elite', cursive;
}

/* REAL INPUT FIELD FOR POSTS ETC */
textarea {
background: #59210B;
color: #c8c8c8;
border: 1px solid #000;
padding: 2px;
line-height: 1.4;
outline: 0;
font-family: 'Special Elite', cursive;
font-size: 13px;
}

/* drop down menus*/
select {
background: #59210b;
padding: 3px;
border: 1px solid #070707;
outline: 0;
font-family: 'Special Elite', cursive;
font-size: 13px;
    color: #c8c8c8;
}

/* buttons for drop down menus */

button,
input.button {
padding: 3px 8px;
cursor: pointer;
font-family: 'Special Elite', cursive;
font-size: 14px;
background: #59210b;
border: 1px solid #000;
color: #c8c8c8;
outline: 0;
}

button:hover,
input.button:hover {
border-color: #070707;
    background: #3D1200;
}

form {
margin: 0;
padding: 0;
}

form input.error {
border: 1px solid #F5652A;
color: #f8f8f8;
background: #222;
padding: 3px;
outline: 0;
font-size: 13px;
font-family: 'Special Elite', cursive;
}

form input.valid {
border: 1px solid #2ABAF5;
background: #222;
padding: 3px;
outline: 0;
font-size: 13px;
    color: #c8c8c8;
font-family: 'Special Elite', cursive;
}

form label.error {
color: #f30;
margin: 5px;
padding: 0px;
display: block;
font-weight: bold;
font-size: 11px;
}

form #message {
    width: 500px;
}

.editor {
background: #D99C7E;
border: 1px solid #ED804A;
}

.editor_control_bar {
background: #D99C7E;
border: 1px solid #ED804A;
}

.post .editor_control_bar {
background: #D99C7E;
}

.popup_menu {
background: #222;
border: 1px solid #070707;
}

.popup_menu .popup_item {
background: #59210b;
color: #c8c8c8;
}

.popup_menu .popup_item:hover {
background: #3d1200;
color: #c8c8c8;
}

.trow_reputation_positive {
background: #ccffcc;
}

.trow_reputation_negative {
background: #ffcccc;
}

.reputation_positive {
color: green;
}

.reputation_neutral {
color: #444;
}

.reputation_negative {
color: red;
}

.repbox {
font-size:16px;
font-weight: bold;
padding:5px 7px 5px 7px;
}

._neutral {
background-color:#FAFAFA;
color: #999999;
border:1px solid #CCCCCC;
}

._minus {
background-color: #FDD2D1;
color: #CB0200;
border:1px solid #980201;
}

._plus {
background-color:#E8FCDC;
color: #008800;
border:1px solid #008800;
}

img {
border: none;
}

img.attachment {
border: 1px solid #22af29;
padding: 2px;
}

hr {
background-color: #7b5907;
color: #7b5907;
height: 2px;
border: 0px;
}

.clear {
clear: both;
}

.float_left {
float: left;
}

.float_right {
float: right;
}

.hidden {
display: none;
float: none;
width: 1%;
}

.hiddenrow {
display: none;
}

.selectall {
background: #3d1200;
border-bottom: 1px solid #59210b;
color: #c8c8c8;
text-align: center;
}

.expcolimage {
float: right;
width: auto;
vertical-align: middle;
margin-top: 3px;
}

.tcat_menu > .expcolimage {
margin-top: 0;
}

blockquote {
border: 1px solid #ff6e26;
margin: 0;
background: #d99c7e;
padding: 10px;
    border-radius: 4px;
    color: #000;
}

blockquote cite {
font-weight: bold;
border-bottom: 1px solid #070707;
font-style: normal;
display: block;
padding-bottom: 3px;
margin: 0 0 10px 0;
}

blockquote cite span {
float: right;
font-weight: normal;
font-size: 12px;
color: #000;
}

blockquote cite span.highlight {
float: none;
font-weight: bold;
padding-bottom: 0;
}

.codeblock {
background: #D99C7E;
border: 1px solid #FF6E26;
padding: 10px;
    border-radius: 4px;
    color: #000;
}

.codeblock .title {
border-bottom: 1px solid #070707;
font-weight: bold;
padding-bottom: 3px;
margin: 0 0 10px 0;
}

.codeblock code {
overflow: auto;
height: auto;
max-height: 200px;
display: block;
font-family: Monaco, Consolas, Courier, monospace;
font-size: 14px;
}

.smilie {
vertical-align: middle;
}

.smilie_pointer {
cursor: pointer;
}

.separator {
margin: 5px;
padding: 0;
height: 0px;
font-size: 1px;
list-style-type: none;
}

.popup_menu .popup_item_container {
margin: 1px;
text-align: left;
}

.popup_menu .popup_item {
display: block;
padding: 4px;
white-space: nowrap;
text-decoration: none;
}

.popup_menu a.popup_item:hover {
text-decoration: none;
}

.subject_new {
font-weight: bold;
}

.highlight {
background: #ffffcc;
padding-top: 3px;
padding-bottom: 3px;
    color: #000;
}

.pm_alert {
background: #155d7a;
border: 1px solid #5ba1bd;
text-align: center;
padding: 20px 20px;
margin-bottom: 15px;
font-size: 18px;
    color: #000;
}

.pm_alert a:link {
  color: #B943D1;
  font-weight: bold;
}

.pm_alert a:hover {
  color: #222;
}

.red_alert {
background: #FAB84D;
border: 1px solid #FFB030;
color: #000;
text-align: center;
padding: 20px 20px;
margin-bottom: 15px;
font-size: 18px;
word-wrap: break-word;
    font-weight: bold;
}

.red_alert a:link,
.red_alert a:visited,
.red_alert a:hover,
.red_alert  a:active  {
color: #000;
}

.high_warning {
color: #CC0000;
}

.moderate_warning {
color: #F3611B;
}

.low_warning {
color: #AE5700;
}

.online {
color: #39F772;
}

.offline {
color: #000;
}

div.error {
padding: 5px 10px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
background: #070707;
font-size: 12px;
}

div.error p {
margin: 0;
color: #000;
font-weight: normal;
}

div.error p em {
font-style: normal;
font-weight: bold;
padding-left: 24px;
display: block;
color: #c8c8c8;
background: url(images/error.png) no-repeat 0;
}

div.error ul {
margin-left: 24px;
}

.pagination {
font-size: 12px;
padding-top: 10px;
margin-bottom: 5px;
}

.tfoot .pagination,
.tcat .pagination {
padding-top: 0;
}

.pagination .pages {
font-weight: bold;
}

.pagination .pagination_current,
.pagination a {
padding: 6px 6px;
margin-bottom: 3px;
}

.pagination a {
background: #221f29;
border: 1px solid #070707;
}

.pagination .pagination_current {
background: none;
color: #c8c8c8;
border: none;
font-weight: bold;
}

.pagination a:hover {
background: #e33030;
color: #000;
border-color: #070707;
text-decoration: none;
}

.pagination .go_page img {
margin-bottom: -4px;
}

.drop_go_page {
background: #222;
padding: 6px;
}

.pagination_breadcrumb {
background-color: #222;
border: 1px solid #070707;
outline: 1px solid #000;
padding: 5px;
margin-top: 5px;
font-weight: normal;
}

.pagination_breadcrumb_link {
vertical-align: middle;
cursor: pointer;
}

.thread_legend,
.thread_legend dd {
margin: 0;
padding: 0;
}

.thread_legend dd {
padding-bottom: 4px;
margin-right: 15px;
}

.thread_legend img {
margin-right: 4px;
vertical-align: bottom;
}

.forum_legend,
.forum_legend dt,
.forum_legend dd {
margin: 0;
padding: 0;
}

.forum_legend dd {
float: left;
margin-right: 10px;
margin-top: 7px;
}

.forum_legend dt {
margin-right: 10px;
float: left;
}

.success_message {
color: #00b200;
font-weight: bold;
font-size: 10px;
margin-bottom: 10px;
}

.error_message {
color: #C00;
font-weight: bold;
font-size: 10px;
margin-bottom: 10px;
}

#posts_container {
padding: 0;
}

.ignored_post {
border-top: 3px solid #666;
padding: 15px;
}

.ignored_post .show_ignored_post {
margin-top: -15px;
}

.ignored_post .show_ignored_post a.button span {
background-position: 0 -400px;
}

.post {
overflow: hidden;
      border-top-left-radius:15px;
      border-top-right-radius: 15px;
}

.post.classic {
padding-top: 15px;
}

.post .post_author {
border-bottom: 1px solid #070707;
border-top: 2px solid #070707;
background: #221f29;
padding: 2px;
overflow: hidden;
        
}

/* fixed 13.2.15, refixed 18.2.15 - guys, this changes the almost black container around post user information */
.post.classic .post_author {
border: 1px solid #070707;
float: left;
width: 154px;
    height: 100%;
margin: 4px; 
    margin-top: 2px;
padding: 0px;
    padding-right: 2px; 
}

.post .post_author .buddy_status {
vertical-align: middle;
margin-top: -4px;
}

.post .post_author div.author_avatar {
float: left;
margin-right: 0px;
}

.post.classic .post_author div.author_avatar {
float: none;
text-align: center;
margin-bottom: 8px;
}

/* EDITS 26.1.15 - guys this changes the image of users' avatars in classic mode */
.post .post_author div.author_avatar img {
padding: 0px;
border: 1px solid #070707;
background: transparent;
    border-radius: 6px;
    min-height: 250px;  width: 98%;
    margin: 2px; margin-right: 2px;
}

.post .post_author div.author_information {
float: left;
padding: 2px;
}

.post.classic .post_author div.author_information {
float: none;
padding: 0;
text-align: center;
}

.post .post_author div.author_statistics {
float: right;
font-size: 12px;
padding: 3px 10px 3px 5px;
color: #c8c8c8;
line-height: 1.3;
}

.post.classic .post_author div.author_statistics {
border: none;
margin: 6px 0 0 0;
padding: 2px;
float: none;
}

.post .post_head {
font-size: 12px;
padding-bottom: 4px;
border-bottom: 1px solid #070707;
margin-bottom: 8px;
        background: transparent;
}

.post .post_head span.post_date {
color: #c8c8c8;
}

.post .post_head span.edited_post {
font-size: 10px;
color: #c8c8c8;
}

.post .post_head span.edited_post a {
color: #c8c8c8;
}

/* POST CONTENT BACKING */
.post_body {
font-size: 14px;
padding: 12px 0;
}

/* edits 18.2.15 - DRAE EDITS FURTHER 22.2.15*/
.post.classic .post_content {
float: left;
    min-width: 640px;
padding: 8px; /* 0 1% 5px 1% */
}

/* TRUE POST BACK - width, edited 22.2.15 */
.post_content { 
padding: 9px 10px 5px 10px;
    background: #471602;
    max-width: 890px;
}

.post_content .signature {
margin-top: 5px;
border-top: 1px solid #070707;
padding: 10px 0 4px 0;
}

.post .post_meta {
margin: 4px 0;
font-size: 11px;
color: #c8c8c8;
}

.post .post_meta a:link,
.post .post_meta a:visited,
.post .post_meta a:active {
color: #e37a30;
}

.post .post_meta a:hover {
color: #e33030;
}

.post_controls {
clear: both;
background: #070707;
border-bottom: 1px solid #070707;
padding: 5px;
overflow: hidden;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    margin-bottom: 20px;
}
 /* postbit button backs */
.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
display: inline-block;
padding: 2px 5px;
margin: 2px;
font-size: 11px;
background: #222 url() repeat-x; 
border: 1px solid #000;
color: #c8c8c8;
}

.postbit_buttons > a:hover { 
background: #000;
}

.postbit_buttons > a:hover {
border-color: #000;
}

.postbit_buttons a span {
padding-left: 20px;
display: inline-block;
height: 16px;
background-image: url(images/buttons_sprite.png);
background-repeat: no-repeat;
}

.postbit_buttons a.postbit_find span {
background-position: 0 0;
}

.postbit_buttons a.postbit_reputation_add span {
background-position: 0 -20px;
}

.postbit_buttons a.postbit_email span {
background-position: 0 -40px;
}

.postbit_buttons a.postbit_website span {
background-position: 0 -60px;
}

.postbit_buttons a.postbit_pm span {
background-position: 0 -80px;
}

.postbit_buttons a.postbit_quote span {
background-position: 0 -100px;
}

.postbit_buttons a.postbit_multiquote span {
background-position: 0 -120px;
}

.postbit_buttons a.postbit_multiquote_on span {
background-position: 0 -140px;
}

.postbit_buttons a.postbit_edit span {
background-position: 0 -160px;
}

.postbit_buttons a.postbit_qdelete span {
background-position: 0 -180px;
}

.postbit_buttons a.postbit_qrestore span {
background-position: 0 -200px;
}

.postbit_buttons a.postbit_report span {
background-position: 0 -220px;
}

.postbit_buttons a.postbit_warn span {
background-position: 0 -240px;
}

.postbit_buttons a.postbit_purgespammer span {
background-position: 0 -540px;
}

.postbit_buttons a.postbit_reply_pm span {
background-position: 0 -260px;
}

.postbit_buttons a.postbit_reply_all span {
background-position: 0 -280px;
}

.postbit_buttons a.postbit_forward_pm span {
background-position: 0 -300px;
}

.postbit_buttons a.postbit_delete_pm span {
background-position: 0 -320px;
}

a.button:link,
a.button:hover,
a.button:visited,
a.button:active {
background: #222 url() repeat-x;
color: #e37a30;
display: inline-block;
padding: 4px 8px;
margin: 2px 2px 6px 2px;
border: 1px solid #070707;
font-size: 14px;
}

a.button.small_button {
font-size: 13px;
margin: 0;
padding: 3px 6px;
}

a.button span {
padding-left: 20px;
display: inline-block;
background-image: url(images/buttons_sprite.png);
background-repeat: no-repeat;
}

a.button.new_thread_button span {
background-position: 0 -340px;
}

a.button.new_reply_button span {
background-position: 0 -360px;
}

a.button.closed_button span {
background-position: 0 -380px;
}

a.button.rate_user_button span {
background-position: 0 -400px;
}

a.button.add_buddy_button span {
background-position: 0 -440px;
}

a.button.remove_buddy_button span {
background-position: 0 -480px;
}

a.button.add_ignore_button span {
background-position: 0 -460px;
}

a.button.remove_ignore_button span {
background-position: 0 -500px;
}

a.button.report_user_button span {
background-position: 0 -520px;
}

.quick_jump {
background: url(images/jump.png) no-repeat 0;
width: 13px;
height: 13px;
padding-left: 13px; /* amount of padding needed for image to fully show */
margin-top: -3px;
border: none;
}

.pollbar {
background: #3d2d5f;
border: 1px solid #070707;
height: 10px;
}

.pollbar .percent {
display: none;
}

.posticons_label {
white-space: nowrap;
}

/** jGrowl Start **/

/** Special IE6 Style Positioning **/
.ie6 {
position: absolute;
}

.ie6.top-right {
right: auto;
bottom: auto;
left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.top-left {
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-right {
left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-left {
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.center {
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
width: 100%;
}

/** jGrowl Styling **/
.jGrowl {
z-index: 9999;
color: #c8c8c8;
font-size: 12px;
position: fixed;
}

.jGrowl.top-left {
left: 0px;
top: 0px;
}

.jGrowl.top-right {
right: 0px;
top: 0px;
}

.jGrowl.bottom-left {
left: 0px;
bottom: 0px;
}

.jGrowl.bottom-right {
right: 0px;
bottom: 0px;
}

.jGrowl.center {
top: 0px;
width: 50%;
left: 25%;
}

/** Cross Browser Styling **/

.center .jGrowl-notification,
.center .jGrowl-closer {
margin-left: auto;
margin-right: auto;
}

.jGrowl .jGrowl-notification,
.jGrowl .jGrowl-closer {
background-color: #471602;
opacity: .85;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
zoom: 1;
width: 235px;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
font-family: 'Special Elite', cursive;
font-size: 1em;
text-align: left;
display: none;
border-radius: 5px;
}

.jGrowl .jGrowl-notification {
min-height: 40px;
}

.jGrowl .jGrowl-notification,
.jGrowl .jGrowl-closer {
margin: 10px;
}

.jGrowl .jGrowl-notification .jGrowl-header {
font-weight: bold;
font-size: .85em;
}

.jGrowl .jGrowl-notification .jGrowl-close {
z-index: 99;
float: right;
font-weight: bold;
font-size: 1em;
cursor: pointer;
}

.jGrowl .jGrowl-closer {
padding-top: 4px;
padding-bottom: 4px;
cursor: pointer;
font-size: .9em;
font-weight: bold;
text-align: center;
}

/** Hide jGrowl when printing **/
@media print {
.jGrowl {
display: none;
}
}

/** jGrowl End **/

/** Modal Start **/

.modal {
display: none;
width: 400px;
text-align: left;
background: #471602;
    color: #c8c8c8;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-o-box-shadow: 0 0 10px #000;
-ms-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}

.modal a.close-modal {
position: absolute;
top: -12.5px;
right: -12.5px;
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background: url(images/close.png) no-repeat 0 0;
}

.modal-spinner {
display: none;
width: 64px;
height: 64px;
position: fixed;
top: 50%;
left: 50%;
margin-right: -32px;
margin-top: -32px;
background: url(images/spinner_big.gif) no-repeat center center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}

/** Modal End **/

/** Impromptu Start **/

/*! jQuery-Impromptu - v5.2.4 - 2014-05-26
* http://trentrichardson.com/Impromptu
* Copyright (c) 2014 Trent Richardson; Licensed MIT */

.jqifade {
position: absolute;
background-color: #471602;
}

div.jqi {
width: 400px;
max-width:90%;
font-family: 'Special Elite', cursive;
position: absolute;
background-color: #222;
font-size: 11px;
text-align: left;
border: solid 1px #070707;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
padding: 7px;
}

div.jqi .jqiclose {
position: absolute;
top: 4px; right: -2px;
width: 18px;
cursor: default;
color: #c8c8c8;
font-weight: bold;
}

div.jqi .jqistate {
background-color: #222;
}

div.jqi .jqititle {
padding: 5px 10px;
font-size: 16px;
line-height: 20px;
border-bottom: solid 1px #070707;
}

div.jqi .jqimessage {
padding: 10px;
line-height: 20px;
color: #c8c8c8;
}

div.jqi .jqibuttons {
text-align: right;
margin: 0 -7px -7px -7px;
border-top: solid 1px #070707;
background-color: #222;
border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
}

div.jqi .jqibuttons button {
margin: 0;
padding: 15px 20px;
background-color: transparent;
font-weight: normal;
border: none;
border-left: solid 1px #070707;
color: #c8c8c8;
font-weight: bold;
font-size: 12px;
}

div.jqi .jqibuttons button.jqidefaultbutton {
color: #c8c8c8;
}

div.jqi .jqibuttons button:hover,
div.jqi .jqibuttons button:focus {
color: #c8c8c8;
outline: none;
}

.jqiwarning .jqi .jqibuttons {
background-color: #222;
}

/* sub states */

div.jqi .jqiparentstate::after {
background-color: #222;
opacity: 0.6;
filter: alpha(opacity=60);
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

div.jqi .jqisubstate {
position: absolute;
top: 0;
left: 20%;
width: 60%;
padding: 7px;
border: solid 1px #070707;
border-top: none;
border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
}

div.jqi .jqisubstate .jqibuttons button {
padding: 10px 18px;
}

/* arrows for tooltips/tours */

.jqi .jqiarrow {
position: absolute;
height: 0; width: 0;
line-height: 0;
font-size: 0;
border: solid 10px transparent;
}

.jqi .jqiarrowtl {
left: 10px;
top: -20px;
border-bottom-color: #070707;
}

.jqi .jqiarrowtc {
left: 50%;
top: -20px;
border-bottom-color: #070707;
margin-left: -10px;
}

.jqi .jqiarrowtr {
right: 10px;
top: -20px;
border-bottom-color: #070707;
}

.jqi .jqiarrowbl {
left: 10px;
bottom: -20px;
border-top-color: #070707;
}

.jqi .jqiarrowbc {
left: 50%;
bottom: -20px;
border-top-color: #070707;
margin-left: -10px;
}

.jqi .jqiarrowbr {
right: 10px;
bottom: -20px;
border-top-color: #070707;
}

.jqi .jqiarrowlt {
left: -20px;
top: 10px;
border-right-color: #070707;
}

.jqi .jqiarrowlm {
left: -20px;
top: 50%;
border-right-color: #070707;
margin-top: -10px;
}

.jqi .jqiarrowlb {
left: -20px;
bottom: 10px;
border-right-color: #070707;
}

.jqi .jqiarrowrt {
right: -20px;
top: 10px;
border-left-color: #070707;
}

.jqi .jqiarrowrm {
right: -20px;
top: 50%;
border-left-color: #070707;
margin-top: -10px;
}

.jqi .jqiarrowrb {
right: -20px;
bottom: 10px;
border-left-color: #070707;
}

/** Impromptu End */

/*--------------------- MORE EXTRAS  -----------------*/
#affs {
  text-align: center;
  width: auto;
  margin: 6px auto 6px;
}

#thanks {
  text-transform: uppercase;
  font-size: 10px;
}

#thanks a {
  color: #e37a30;
text-decoration: none;
}

#thanks a:hover {
  color: #e33030;
  text-decoration: none;
}

#dann {
  border-radius: 25px;
  width: auto;
  padding: 16px;
  margin: none;
  margin-bottom: 4px;
  border: 1px solid #000;
  overflow-y: scroll;
  max-height: 200px;
  background: #471602;
}

h1,h2,h3,h4 {
  font-family: 'Special Elite', cursive;
  border-bottom: 1px solid #000;
  margin: 16px 6px 4px;
}

h1 {
  font-size: 30px;
  margin-top: 6px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}
  
 h4 {
   font-size: 16px;
 }

em {
  font-weight: bold;
  color: #d99c7e;
  font-style: normal;
}

#sdock {
  border-radius: 4px;
  margin-left: 20px;
  text-align: center;
  border: none;
  padding: 3px;
}

#sdock img {
  height: 20px;
  line-height: -1;
   padding: none;
}

#dlogo {
  text-align: center;
  background: transparent;
}

.menu panel_links {
  background: #222;
}

.dtop {
  background: transparent;
  padding: 4px;
  border: none;
  text-align: center;
  border-radius: 8px;
}

#header #panel .upper {
  background: transparent;
}

#panel .upper { 
  background: #222; 
}

#copyright {
  text-transform: uppercase;
  font-size: 10px;
}

bottom_links {
  background: #222;
  border: none;
}

ul.menu.bottom_links {
  text-align: center;
}

#fm {
  display: block;
  width: 100%;
}

.upper .wrapper {
  width: 100%;
}

.dmenu {
  text-align: center;
}

#dfix {
  display: inline;
  font-size: 10px;
}

#dfix img {
  max-width: 50px;
}

#dcbox {
  position: fixed;
  top: 42px;
  left: 0px;
  max-width: 190px;
  z-index: 2;
  background: #7c422b;
  border: 1px solid #000;
  border-radius: 20px;
  padding: 2px;
}

.draetr {
  border: 1px solid #070707;
  background: #471602;
  border-radius: 15px;
  margin-top: 2px;
  margin-bottom: 2px;
  outline: 1px solid red;
}

#drbx_container { /* NOT USED */
   width: auto;
   margin: auto auto;
   background: #171717;
   padding: 4px;
   border-radius: 15px;
}

#drbx_sidebar {
  padding: 2px;
  margin: 0px 8px 0px 0px;
  border-right: none;
  vertical-align: text-top;
  max-width:160px;
  float:left;
  word-wrap: break-word;
}

#content {
  vertical-align: text-top; 
  padding: 0px; margin: 0px;
  width: auto;
  margin-left: 180px; 
  max-width: 90%;
}

.dpostwrap {
  background: #000;
  border: 1px solid red;
}

#posts {
  background: #471602;
  border: 1px solid #070707;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

div.post_controls {
  border-radius: 0px;
}

/* THREAD VIEW HEADER FIX - added for you due to the default coding class shares the index's styling */
.dthead {
  background: #000; 
  font-size: 18px;
  border-top: 1px solid #070707; 
  border-left:1px solid #070707;
  border-right:1px solid #070707; 
  padding: 4px; 
  margin:0px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  text-align: center;
}

/* ADDITIONALS 12.2.15 */
.draefix {
word-wrap: break-word;
}

div.post_author scaleimages {
max-width: 250px;
word-wrap:break-word;
}

div.author_information {
max-width: 250px;
word-wrap:break-word;
}

Could still do with help on this, thanks Smile
bumping - still need assistance with this.