MyBB Community Forums

Pages: 1 2 3 4 5

Yes, i noticed now.

If i replace my text logo with this: <img src="{$theme['logo']}"/>
the margin bottom -40px called from "logo img" works well and the header gets smaller. But idk how do that for my html text logo.

Your given code above doesn't change anything.

Never mind, i fixed it like this:

I gave the html logo text a new div like:

<div id="logo2">

and on css, i just added

#logo2 {
margin-bottom: -40px;
}

Thanks anyway. Wink

(2016-12-13, 05:25 PM)thelovelyone Wrote: [ -> ]Yes, i noticed now.

If i replace my text logo with this: <img src="{$theme['logo']}"/>
the margin bottom -40px called from "logo img" works well and the header gets smaller. But idk how do that for my html text logo.

Your given code above doesn't change anything.

Never mind, i fixed it like this:

I gave the html logo text a new div like:

<div id="logo2">

and on css, i just added

#logo2 {
margin-bottom: -40px;
}

Thanks anyway.

#logo {
   background: #fff;
   padding: 10px 0;
}

.logo-text {
  color: #fff;
  text-decoration: none;
  font-size: 30px;
  font-weight: bold;
}

.logo-slogan {
  color: #E63A20;
  font-weight: bold;
  font-style: italic;
  font-size: 14px;
}

.logo-link:hover {
  text-decoration: none;
}

#logo-as-text {
  margin-bottom: -45px;
}

            <div id="logo">    
                <div class="wrapper">{$quicksearch}
                    <div id="logo-as-text">
                    <a href="{$mybb->settings['bburl']}/index.php" class="logo-link"><span class="logo-text">MY WEBSITE</span></a>
                        <br /><span class="logo-slogan">slogan comes here.</span></div>

Example:

Your global.css you provided slightly modified:


body {
    background-image: url();
    color: #333;
    text-align: center;
    line-height: 1.4;
    margin: 0;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    overflow-y: scroll;
}

h2 {
   font-size: 400%;
}

a:link {
    color: #0072BC;
    text-decoration: none;
}

a:visited {
    color: #0072BC;
    text-decoration: none;
}

a:hover,
a:active {
    color: #FFFF00;
    text-decoration: underline;
    text-shadow: 0 0 10px #fff;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}

#container {
    color: #333;
    text-align: left;
    line-height: 1.4;
    margin: 0;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    min-width: 990px;
}

.wrapper {
    width: 75%;
    min-width: 970px;
    max-width: 1500px;
    margin: auto auto;
}

#logo {
    background: #fff;
    padding: 10px 0;
}

.logo-text {
color: #000;
text-decoration: none;
font-size: 30px;
    font-weight: bold;
}

.logo-slogan {
color: #E63A20;
font-weight: bold;
font-style: italic;
font-size: 14px;
}

.logo-link:hover {
text-decoration: none;
}

#logo-as-text {
 margin-bottom: -45px;
}

#content {
    background-image: url();
    width: auto !important;
    padding: 20px 10px;
    overflow: hidden;
}

#header ul.menu {
margin: 0;
padding: 0;
list-style: none;
}
#header ul.menu li {
margin: 0 7px;
display: inline;
}
#header ul.menu li a {
background-repeat: no-repeat;
display: inline-block;
line-height: 16px;
}

#panel .upper ul.top_links {
font-weight: bold;
text-align: right;
margin: 0px 5px -20px 0;
}

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

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

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

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

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

#panel .upper ul.top_links a:hover {
color: #ff7500;
}

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

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

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

#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;
}
#panel .lower ul.user_links li a:hover {
color: #0072BC;
}
#panel .upper {
background: #A23535;
color: #fff;
border-top: 1px solid #444;
border-bottom: 1px solid #000;
padding: 7px;
clear: both;
}
#panel .upper a:link, #panel .upper a:visited, #panel .upper a:hover, #panel .upper a:active {
color: #fff;
}
#panel .lower {
background: #efefef;
color: #999;
border-top: 1px solid #fff;
border-bottom: 1px solid #ccc;
padding: 5px;
}
#panel .lower a:link, #panel .lower a:visited, #panel .lower a:hover, #panel .lower a:active {
color: #666;
}

#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;
}

#footer .upper {
    background: #222121;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 6px;
    font-size: 12px;
    overflow: hidden;
}

#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active {
text-decoration: none;
color: white;
}

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

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

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

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

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

#footer .lower {
    color: #666;
    padding: 6px 6px 12px 6px;
    overflow: hidden;
    font-size: 11px;
}

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

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

#footer .lower #current_time {
    float: right;
    color: #888;
}

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

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

.forum_status {
height: 25px;
width: 25px;
font-size: 25px;
text-align: center;
}

.forum_status i {
display: inline-block;
line-height: 25px;
}

.forum_on {
color: #0094d1;
}

.forum_off, .forum_offlock, .forum_offlink {
color: #333;
}

.forum_off i {
opacity: .4;
}

.forum_offlock i:before {
content: "\f023";
}

.forum_offlink i:before {
content: "\f0c1";
}

.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: #333;
    font-size: 13px;
}

.tborder {
    background: #fff;
    width: 100%;
    margin: auto auto;
    border: 1px solid #ccc;
    padding: 1px;
}

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

.thead {
    background: #fff url(images/thead.png) top left repeat-x;
    color: #ffffff;
    border-bottom: 1px solid #263c30;
    padding: 8px;
}

.thead a:link {
    color: #ffffff;
    text-decoration: none;
}

.thead a:visited {
    color: #ffffff;
    text-decoration: none;
}

.thead a:hover,
.thead a:active {
    color: #ffffff;
    text-decoration: underline;
}

.tcat {
    background: #0f0f0f url(images/tcat.png) repeat-x;
    color: #fff;
    border-top: 1px solid #444;
    border-bottom: 1px solid #000;
    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: #f5f5f5;
    border: 1px solid;
    border-color: #fff #ddd #ddd #fff;
}

.trow2 {
    background: #efefef;
    border: 1px solid;
    border-color: #fff #ddd #ddd #fff;
}

.trow_shaded {
    background: #ffdde0;
    border: 1px solid;
    border-color: #fff #ffb8be #ffb8be #fff;
}

.no_bottom_border {
    border-bottom: 0;
}

.post.unapproved_post {
    background: #ffdde0;
}

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

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

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

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

.trow_selected,
tr.trow_selected td {
    background: #FFFBD9;
    color: #333;
    border-right-color: #F7E86A;
    border-bottom-color: #F7E86A;
}

.trow_selected a:link,
.trow_selected a:visited,
.trow_selected a:hover,
.trow_selected a:active {
    color: #333;
}

.trow_sep {
    background: #ddd;
    color: #333;
    border-bottom: 1px solid #c5c5c5;
    padding: 6px;
    font-size: 12px;
    font-weight: bold;
}

.tfoot {
    border-top: 1px solid #fff;
    padding: 6px;
    background: #ddd;
    color: #666;
}

.tfoot a:link {
    color: #444;
    text-decoration: none;
}

.tfoot a:visited {
    color: #444;
    text-decoration: none;
}

.tfoot a:hover,
.tfoot a:active {
    color: #444;
    text-decoration: underline;
}

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

.bottommenu {
    background: #efefef;
    color: #333;
    border: 1px solid #4874a3;
    padding: 10px;
}

.navigation {
    color: #333;
    font-size: 12px;
}

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

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

.navigation a:hover,
.navigation a:active {
    text-decoration: underline;
}

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

.smalltext {
    font-size: 11px;
}

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

fieldset {
    padding: 12px;
    border: 1px solid #ddd;
    margin: 0;
}

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

fieldset.align_right {
    text-align: right;
}

input.textbox {
    background: #ffffff;
    color: #333;
    border: 1px solid #ccc;
    padding: 3px;
    outline: 0;
    font-size: 13px;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

textarea {
    background: #ffffff;
    color: #333;
    border: 1px solid #ccc;
    padding: 2px;
    line-height: 1.4;
    outline: 0;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

select {
    background: #ffffff;
    padding: 3px;
    border: 1px solid #ccc;
    outline: 0;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

button,
input.button {
    padding: 3px 8px;
    cursor: pointer;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    background: #eee url(images/buttons_bg.png) repeat-x;
    border: 1px solid #bbb;
    color: #333;
    outline: 0;
}

button:hover,
input.button:hover {
    border-color: #aaa;
}

form {
    margin: 0;
    padding: 0;
}

input.error, textarea.error, select.error {
    border: 1px solid #f30;
    color: #f30;
}

input.valid, textarea.valid, select.valid {
    border: 1px solid #0c0;
}

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

form #message {
   width: 500px;
}

.editor {
    background: #f1f1f1;
    border: 1px solid #ccc;
}

.editor_control_bar {
    background: #fff;
    border: 1px solid #ccc;
}

.post .editor_control_bar {
    background: #f5f5f5;
}

.popup_menu {
    background: #fff;
    border: 1px solid #ccc;
}

.popup_menu .popup_item {
    background: #efefef;
    color: #333;
}

.popup_menu .popup_item:hover {
    background: #0072BC;
    color: #fff;
}

.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 #E9E5D7;
    padding: 2px;
}

hr {
    background-color: #000000;
    color: #000000;
    height: 1px;
    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: #FFFBD9;
    border-bottom: 1px solid #F7E86A;
    color: #333;
    text-align: center;
}

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

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

blockquote {
    border: 1px solid #ccc;
    margin: 0;
    background: #fff;
    padding: 10px;
}

blockquote cite {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    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: #666;
}

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

.codeblock {
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
}

.codeblock .title {
    border-bottom: 1px solid #ccc;
    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: 13px;
}

.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;
}

.pm_alert {
    background: #FFF6BF;
    border: 1px solid #FFD324;
    text-align: center;
    padding: 5px 20px;
    margin-bottom: 15px;
    font-size: 11px;
}

.red_alert {
    background: #FBE3E4;
    border: 1px solid #A5161A;
    color: #A5161A;
    text-align: center;
    padding: 5px 20px;
    margin-bottom: 15px;
    font-size: 11px;
    word-wrap: break-word;
}

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

.high_warning {
    color: #CC0000;
}

.moderate_warning {
    color: #F3611B;
}

.low_warning {
    color: #AE5700;
}

.online {
    color: #15A018;
}

.offline {
    color: #C7C7C7;
}

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

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

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

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

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

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

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

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

.pagination a {
    background: #f5f5f5;
    border: 1px solid #ccc;
}

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

.pagination a:hover {
    background: #0072BC;
    color: #fff;
    border-color: #263c30;
    text-decoration: none;
}

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

.drop_go_page {
    background: #f5f5f5;
    padding: 4px;
}

.pagination_breadcrumb {
    background-color: #efefef;
    border: 1px solid #fff;
    outline: 1px solid #ccc;
    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 #333;
    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;
}

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

.post .post_author {
    border-bottom: 1px solid #ccc;
    border-top: 2px solid #ccc;
    background: #f5f5f5;
    padding: 5px;
    overflow: hidden;
}

.post.classic .post_author {
    border: 1px solid #ddd;
    float: left;
    width: 15%;
    margin: 0 1% 15px 0;
    border-left: 0;
    padding: 5px 1%;
}

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

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

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

.post .post_author div.author_avatar img {
    padding: 5px;
    border: 1px solid #ddd;
    background: #fff;
}

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

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

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

.post.classic .post_author div.author_statistics {
    border-top: 1px dotted #ccc;
    margin: 6px 0 0 0;
    padding: 6px 6px 3px 6px;
    float: none;
}

.post .post_head {
    font-size: 11px;
    padding-bottom: 4px;
    border-bottom: 1px dotted #ddd;
    margin-bottom: 4px;
}

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

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

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

.post_body {
    font-size: 14px;
    padding: 12px 0;
}

.post.classic .post_content {
    float: left;
    width: 79%;
    padding: 0 1% 5px 1%;
}

.post_content {
    padding: 9px 10px 5px 10px;
}

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

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

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

.post .post_meta a:hover,
.post .post_meta a:active {
    color: #777;
}

.post_controls {
    clear: both;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
    padding: 5px;
    overflow: hidden;
}

.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: #eee url(images/buttons_bg.png) repeat-x;
    border: 1px solid #ccc;
    color: #555;
}

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

.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: #0f0f0f url(images/tcat.png) repeat-x;
    color: #fff;
    display: inline-block;
    padding: 4px 8px;
    margin: 2px 2px 6px 2px;
    border: 1px solid #000;
    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;
    font-size: 80%;
}

a.button.remove_buddy_button span {
    background-position: 0 -480px;
    font-size: 80%;
}

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;
    font-size: 80%;
}

.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: url(images/pollbar.png) top left repeat-x;
    border: 1px solid #3f3f3f;
    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: #ffffff;
 font-size: 13px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 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 **/

.jGrowl.center .jGrowl-notification,
.jGrowl.center .jGrowl-closer {
 margin-left: auto;
 margin-right: auto;
}
.jGrowl-notification {
 background-color: #E4A316;
 opacity: 0.9;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
 zoom: 1;
 width: 420px;
 padding: 10px;
 margin: 10px;
 text-align: left;
 display: none;
 border-radius: 5px;
 word-break: break-all;
 min-height: 18px;
}
.jGrowl-notification .ui-state-highlight,
.jGrowl-notification .ui-widget-content .ui-state-highlight,
.jGrowl-notification .ui-widget-header .ui-state-highlight {
 border: 1px solid #000;
 background: #000;
 color: #fff;
}
.jGrowl-notification .jGrowl-header {
 font-weight: bold;
 font-size: .85em;
}
.jGrowl-notification .jGrowl-close {
 background-color: transparent;
 color: #000000;
 border: none;
 z-index: 99;
 float: right;
 font-weight: bold;
 font-size: 1em;
 cursor: pointer;
}
.jGrowl-closer {
 background-color: #000000;
 opacity: 0.9;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
 zoom: 1;
 width: 250px;
 padding: 10px;
 margin: 10px;
 text-align: left;
 display: none;
 border-radius: 5px;
 word-break: break-all;
 padding-top: 4px;
 padding-bottom: 4px;
 cursor: pointer;
 font-size: .9em;
 font-weight: bold;
 text-align: center;
}
.jGrowl-closer .ui-state-highlight,
.jGrowl-closer .ui-widget-content .ui-state-highlight,
.jGrowl-closer .ui-widget-header .ui-state-highlight {
 border: 1px solid #000;
 background: #000;
 color: #fff;
}

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

/** jGrowl End **/

/** Modal Start **/

.modal {
    display: none;
    width: 400px;
    text-align: left;
    background: #fff;
    -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 - v6.2.1 - 2015-05-10
* http://trentrichardson.com/Impromptu
* Copyright (c) 2015 Trent Richardson; Licensed MIT */

.jqifade{
    position: absolute;
    background-color: #777777;
}
iframe.jqifade{
    display:block;
    z-index:-1;
}
div.jqi{
    width: 400px;
    max-width:90%;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    position: absolute;
    background-color: #ffffff;
    font-size: 11px;
    text-align: left;
    border: solid 1px #eeeeee;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    padding: 7px;
}
div.jqi .jqicontainer{
}
div.jqi .jqiclose{
    position: absolute;
    top: 4px; right: -2px;
    width: 18px;
    cursor: default;
    color: #bbbbbb;
    font-weight: bold;
}
div.jqi .jqistate{
    background-color: #fff;
}
div.jqi .jqititle{
    padding: 5px 10px;
    font-size: 16px;
    line-height: 20px;
    border-bottom: solid 1px #eeeeee;
}
div.jqi .jqimessage{
    padding: 10px;
    line-height: 20px;
    color: #444444;
    overflow: auto;
}
div.jqi .jqibuttonshide{
    display: none;
}
div.jqi .jqibuttons{
    text-align: right;
    margin: 0 -7px -7px -7px;
    border-top: solid 1px #e4e4e4;
    background-color: #f4f4f4;
    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 #e4e4e4;
    color: #777;
    font-weight: bold;
    font-size: 12px;
}
div.jqi .jqibuttons button.jqidefaultbutton{
    color: #489afe;
}
div.jqi .jqibuttons button:hover,
div.jqi .jqibuttons button:focus{
    color: #287ade;
    outline: none;
}
div.jqi .jqibuttons button[disabled]{
    color: #aaa;
}
.jqiwarning .jqi .jqibuttons{
    background-color: #b95656;
}

/* sub states */
div.jqi .jqiparentstate::after{
    background-color: #777;
    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 #eeeeee;
    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: #ffffff; }
.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; }
.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; }

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

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

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

/** Impromptu End */

.ads { float: right;
padding-top: 16px;
padding-right: 320px; }

/* DVZ Shoutbox */
#shoutbox { margin-bottom: 10px; border: solid 2px rgba(0,0,0,0.1); background: #F2F2F2; }
#shoutbox .head { padding: 8px; }
#shoutbox.front .head { cursor: pointer; }
#shoutbox .head .right { float: right; margin: 0; font-size: 13px; }
#shoutbox.collapsed .head { opacity: 0.6; }
#shoutbox.collapsed .body { display: none; }

#shoutbox .panel { border-top: solid 2px rgba(0,0,0,0.1); }
#shoutbox input.text { margin: 0; padding: 10px 8px; width: 100%; box-sizing: border-box; border: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); font-family: Arial, sans-serif; font-size: 12px; color: #000; }
#shoutbox .minposts, #shoutbox .blocked { padding: 6px; font-size: 11px; }
#shoutbox .panel.minposts { background: #FFFED8; color: #727250; }
#shoutbox .panel.blocked { background: #FCEFEF; color: #543A3A; }
#shoutbox .panel p { margin: 0; }

#shoutbox .window { border-top: solid 2px rgba(0,0,0,0.1); overflow-y: scroll; }
#shoutbox .data { display: table; width: 100%; border-top: solid 2px rgba(0,0,0,0.1); font-family: Arial, sans-serif; font-size: 12px; }
#shoutbox.front .data { border-top: none; }

#shoutbox .entry { display: table-row !important; width: 100%; transition: background-color 0.2s; }
#shoutbox .entry:nth-child(even) { background-color: rgba(0,0,0,0.01); }
#shoutbox .entry.new { background-color: rgba(255,255,100,0.1); }
#shoutbox .entry > div { border-bottom: dashed 1px rgba(0,0,0,0.05); }
#shoutbox .entry:last-child > div { border-bottom: none; }

#shoutbox .entry > div { display: table-cell; padding: 6px; }

#shoutbox .avatar img { margin: 0 auto; vertical-align: middle; max-height: 20px; max-width: 20px; border: solid 1px rgba(255,255,255,0.1); box-shadow: 0 0 2px rgba(0,0,0,0.1); cursor: pointer; }
#shoutbox .user { border-right: solid 1px rgba(0,0,0,0.05); text-align: right; white-space: nowrap; }
#shoutbox .text { width: 100%; color: #555; }
#shoutbox .info { font-size: 11px; color: #AAA; white-space: nowrap; text-align: right; }
#shoutbox .mod { padding: 6px 8px; font-size: 9px; font-weight: bold; color: #AAA; text-decoration: none; }
#shoutbox .mod:nth-of-type(2) { margin-right: 5px; border-left: solid 1px rgba(0,0,0,0.1); }
#shoutbox  .ip { margin-right: 10px; color: #CECECE; }

.tabs{
background: #4D4D4D;
margin: 0px;
padding: 0px;
margin-top: 1px;
list-style: none;
text-decoration: none;
}
.tabs li{
background: none;
color: #fff;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
text-decoration: none;
}

.tabs li.current{
background: #fff;
color: #222;
}

.tab-content{
display: none;
background: #41403B;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
.memprof
{
background: #4D4D4D; /*For old browsers*/
color: #fff;
}
.memtext
{
font-size: 16px;
font-weight: bold;
color: #fff;
}
.memprof a:link
{color: #ffff00;
}
.memprof a:visited
{
color: #fff;
}


/*Max img*/
#maximage
{
max-width: 45px;
}

.signature img {max-width:600px; max-height:150px; overflow:hidden;}

.signature {border-top: 1px solid #aaaaaa; width:100%; margin-top:1em; padding-top:0.2em; max-height:400px; overflow:hidden;}

.button2 {
   background-color: #A73E3E; /* Green */
   border: none;
   color: white;
   padding: 8px 16px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
   cursor: pointer;
}

.button2:hover {
   background-color: #4CAF50;
   color: white;
}

.button3 {
   background-color: #A73E3E; /* Green */
   border: none;
   color: white;
   padding: 8px 16px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
   cursor: pointer;
}

.button3:hover {
   background-color: #4CAF50;
   color: white;
}

.alignright {
    float: right;
}

.post.forum-11.group-8 {
border-left: 3px solid #F4DB60;
background-color: #F7F6F2;
left: -2px;

}

.post.forum-27.group-8 {
border-left: 3px solid #F4DB60;
background-color: #F7F6F2;
left: -2px;

}

.post.forum-28.group-8 {
border-left: 3px solid #F4DB60;
background-color: #F7F6F2;
left: -2px;

}

.button2 {
 -webkit-border-radius: 3;
 -moz-border-radius: 3;
 border-radius: 3px;
 font-family: Arial;
 color: #ffffff;
 font-size: 18px;
 background: #D04040;
 padding: 6px 14px 6px 14px;
 border: solid #BABABA 1px;
 text-decoration: none;
}

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

.button2:hover {
 -webkit-border-radius: 3;
 -moz-border-radius: 3;
 border-radius: 3px;
 border: solid #BABABA 1px;
 color: #FFFFFF;
 background: #FBC649;
 font-size: 18px;
 text-decoration: none;
}

.button3 {
 -webkit-border-radius: 3;
 -moz-border-radius: 3;
 border-radius: 3px;
 font-family: Arial;
 color: #fff;
 font-size: 16px;
 background: #D04040;
 padding: 6px 14px 6px 14px;
 border: solid #BABABA 1px;
 text-decoration: none;
}

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

.button3:hover {
 -webkit-border-radius: 3;
 -moz-border-radius: 3;
 border-radius: 3px;
 border: solid #BABABA 1px;
 color: #FFFFFF;
 background: #FBC649;
 font-size: 16px;
 text-decoration: none;
 top: -9px
}

.loginbutton a:link, .loginbutton a:visited {
     padding: 3px 8px;
     margin-left: 10px;
    font-size: 120%;
     color: black;
     transition: all 0.5s ease;
     background: #3B6FB0;
     text-decoration: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.loginbutton a:hover, .loginbutton a:active{
     transition: all 0.5s ease;
     background: #D04040;
     text-decoration: none;
}

.registerbutton a:link, .registerbutton a:visited {
     padding: 5px 8px;
     margin-left: 10px;
    font-size: 125%;
     color: #FFFFFF;
     transition: all 0.5s ease;
     background: #EF9817;
     text-decoration: none;
        -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.registerbutton a:hover, .registerbutton a:active {
     transition: all 0.5s ease;
     background: #FEA219;
}

.googlebutton a:link, .googlebutton a:visited {
     padding: 5px 8px;
    font-size: 90%;
     margin-left: 6px;
     color: #FFFFFF;
     transition: all 0.5s ease;
   background-color: #252525;
   border: 2px solid #F0503E;
     text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.googlebutton a:hover, .googlerbutton a:active {
     transition: all 0.5s ease;
     background: #F0503E;
}

.bam_announcement.redd {
   background-color: #f44336;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.redd, .bam_announcement.redd a:link {
   background-color: #f44336;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.greenn {
   background-color: #4CAF50;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.greenn, .bam_announcement.greenn a:link {
   background-color: #4CAF50;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.bluee {
   background-color: #2196F3;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.bluee, .bam_announcement.bluee a:link {
   background-color: #2196F3;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.orangee {
   background-color: #ff9800;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.orangee, .bam_announcement.orangee a:link {
   background-color: #ff9800;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

#notificationbar {
   background-color: #F1F1F1;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
   border: 1px solid #F5DC4A;
   border-radius: 3px;
}

.jGrowl-notification .jGrowl-message {
   word-break: normal
}

a.red:hover {color:#D95C57;}

.niyaprefix {
height: 4px;
line-height: 4px;
vertical-align: middle;
display: inline-block;
padding: 5px;
font-size: 9px;
font-weight: bold;
color: white;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background-repeat: repeat-x;
background-position: 0 -1px;
margin-bottom: 3PX;
}

.user-details {
background: transparent;
}

.profbg {
background-size: 100% 100%;
border: 1px solid #555555;
border-radius: 3px;
box-shadow: 0px 0px 3px 2px #888888;
}

.ud-text {
background: rgba(255,255,255,0.7);
padding: 5px;
border: 3px solid rgba(255, 255, 255, .5);
border-radius: 22px
box-shadow: 0px 0px 5px 2px #eee;
max-width: 350px;
}

.ud-img img {
border: 2px solid #FFFFFF;
border-radius: 3px;
max-width: 350px;
}

.post_body a:link, .post_body a:active, .post_body a:visited{
color: #196EC9 !important; /* Its Yellow color. You may change it to your desired color. */
}

#topmenu {
    font-size: 15px;
    text-align: right;
    position: relative;
    margin: 30px 0 -14px 0;
}

#topmenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#topmenu ul li {
    margin: 0 1px;
    display: inline-block;
}

#topmenu ul li a {
    color: #0072BC;                  
    display: block;
    text-decoration: none;
    padding: 5px 10px 5px;
   border-bottom: 4px solid transparent;
}

#topmenu ul li a:hover {
    color: #ff7500;                    
    border-bottom: 4px solid #ff7500;
}

#topmenu ul li.selected a {
    color: #000000;                    
    font-weight: bold;
    border-bottom: 4px solid #ff7500;
}

#panel .upper ul.top_links a:hover {
    color: #ff7500;                    
}

i.topmenu {
    padding-right: 5px;
}

i.panel-register {
   padding-right: 5px;
    color: #98C78B;
    font-size: 14px;
}

i.panel-login {
   padding-right: 5px;
    color: #C49A38;
    font-size: 14px;
}

i.panel-logout {
   padding-right: 5px;
    color: #98C78B;
    font-size: 14px;
}

i.panel-usercp {
    padding-right: 2px;
    padding-left: 10px;
    color: #0072BC ;
    font-size: 14px;
}

i.panel-modcp {
    padding-right: 2px;
    padding-left: 10px;
    color: #0072BC;
    font-size: 14px;
}

i.panel-admincp {
    padding-right: 2px;
    padding-left: 10px;
    color: #0072BC;
    font-size: 14px;
}

i.topmenu-home {
padding-right: 2px;
padding-left: 2px;
}

i.topmenu-portal {
padding-right: 2px;
padding-left: 2px;    
}

i.topmenu-forum {
padding-right: 2px;
padding-left: 2px;
}

i.topmenu-online {
padding-right: 2px;
padding-left: 2px;
}

i.topmenu-stats {
padding-right: 2px;
padding-left: 2px;
}

i.toplinks-portal {
padding-right: 2px;
padding-left: 2px; 

}

i.toplinks-search {
padding-right: 2px;
padding-left: 2px; 
}

i.toplinks-memberlist {
padding-right: 2px;
padding-left: 2px; 
}

i.toplinks-calendar {
padding-right: 2px;
padding-left: 2px; 
}

i.toplinks-help {
padding-right: 2px;
padding-left: 2px;
}

#search input.textbox {
    border-color: #A5A5A5;
    margin: -3px 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    line-height: 20px;
    display: inline-block;
    width: 200px;
}
.search_icon {
    background: none;
    cursor: pointer;
    margin-left: -24px;
    padding: 0;
    border: 0;
    display: inline-block;
    color: #747474;
}

#search {
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    display: block;
}

#search input.button {
    background: url(images/headerlinks_sprite.png) 0px 0px no-repeat;
    border: 0;
    height: 16px;
    margin-left: -25px;
}

header


<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div id="logo">
  <div class="wrapper">{$quicksearch}
    <div id="logo-as-text"> <a href="{$mybb->settings['bburl']}/index.php" class="logo-link"><span class="logo-text">MY WEBSITE</span></a> <br />
      <span class="logo-slogan">slogan comes here.</span></div>
    <div id="topmenu">
      <ul>
        <!-- start: header_menu_home -->
        <li><a href="{$mybb->settings['homeurl']}" class="" title=""><i class="fa fa-home topmenu-home"> </i>{$mybb->settings['homename']}</a></li>
        <!-- end: header_menu_home --> 
        <!-- start: header_menu_portal -->
        <li><a href="{$mybb->settings['bburl']}/portal.php" class="" title=""><i class="fa fa-bell topmenu-portal"></i>Portal</a></li>
        <!-- end: header_menu_portal --> 
        <!-- start: header_menu_forum -->
        <li><a href="{$mybb->settings['bburl']}/index.php" class="" title=""><i class="fa fa-comments topmenu-forum"></i>{$mybb->settings['bbname']}</a></li>
        <!-- end: header_menu_forum --> 
        <!-- start: header_menu_online -->
        <li><a href="{$mybb->settings['bburl']}/online.php" class="" title=""><i class="fa fa-user topmenu-online"></i>Who's Online</a></li>
        <!-- end: header_menu_online --> 
        <!-- start: header_menu_stats -->
        <li><a href="{$mybb->settings['bburl']}/stats.php" class="" title=""><i class="fa fa-bar-chart topmenu-stats"></i>Forum Stats</a></li>
        <!-- end: header_menu_stats -->
      </ul>
    </div>
  </div>
</div>
<div id="panel">
<div class="upper">
  <div class="wrapper">
    <ul class="menu top_links">
      {$menu_portal}
      {$menu_search}
      {$menu_memberlist}
      {$menu_calendar}
      <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><i class="fa fa-question-circle toplinks-help"></i>{$lang->toplinks_help}</a></li>
    </ul>
    {$welcomeblock} 
    <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest --> 
    <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest --> 
  </div>
</div>
<div id="content">
<div class="wrapper">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
{$awaitingusers}
<navigation>
<br />

header_menu_calendar

<li><a href="{$mybb->settings['bburl']}/calendar.php" class="calendar"><i class="fa fa-calendar toplinks-calendar"></i>{$lang->toplinks_calendar}</a></li>

header_menu_memberlist

<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="memberlist"><i class="fa fa-users toplinks-memberlist"></i>{$lang->toplinks_memberlist}</a></li>

header_menu_portal

<li><a href="{$mybb->settings['bburl']}/portal.php" class="portal"><i class="fa fa-bell toplinks-portal"></i>{$lang->toplinks_portal}</a></li>

header_menu_search

<li><a href="{$mybb->settings['bburl']}/search.php" class="search"><i class="fa fa-search toplinks-search"></i>{$lang->toplinks_search}</a></li>

header_quicksearch

            <form action="{$mybb->settings['bburl']}/search.php" method="post">
            <fieldset id="search">
               <input name="keywords" type="text" class="textbox" placeholder="Search..." />
                <i class="fa fa-search search_icon"></i><input value="" type="submit" class="search_icon" />
                <input type="hidden" name="action" value="do_search" />
                <input type="hidden" name="postthread" value="1" />
                </fieldset>
                </form>

header_welcomeblock_guest

<!-- Continuation of div(class="upper") as opened in the header template -->
<span class="welcome">{$lang->welcome_guest} <a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;" class="login"><i class="fa fa-sign-in panel-login"></i>{$lang->welcome_login}</a> <a href="{$mybb->settings['bburl']}/member.php?action=register" class="register"><i class="fa fa-user-plus panel-register"></i>{$lang->welcome_register}</a></span>
</div>
</div>
<div class="modal" id="quick_login" style="display: none;">
<form method="post" action="{$mybb->settings['bburl']}/member.php">
<input name="action" type="hidden" value="do_login" />
<input name="url" type="hidden" value="" />
<input name="quick_login" type="hidden" value="1" />
<table width="100%" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" border="0" class="tborder">
<tr>
<td class="thead" colspan="2"><strong>{$lang->login}</strong></td>
</tr>
<tr>
<td class="trow1" width="25%"><strong>{$login_username}</strong></td>
<td class="trow1"><input name="quick_username" id="quick_login_username" type="text" value="" class="textbox initial_focus" /></td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->password}</strong></td>
<td class="trow2">
<input name="quick_password" id="quick_login_password" type="password" value="" class="textbox" /> <a href="{$mybb->settings['bburl']}/member.php?action=lostpw" class="lost_password">{$lang->lost_password}</a>
</td>
</tr>
<tr>
<td class="trow1">&nbsp;</td>
<td class="trow1 remember_me">
<input name="quick_remember" id="quick_login_remember" type="checkbox" value="yes" class="checkbox" checked="checked" />
<label for="quick_login_remember">{$lang->remember_me}</label>
</td>
</tr>
<tr>
<td class="trow2" colspan="2">
<div align="center"><input name="submit" type="submit" class="button" value="{$lang->login}" /></div>
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
$("#quick_login input[name='url']").val($(location).attr('href'));
</script>

header_welcomeblock_member

<!-- Continuation of div(class="upper") as opened in the header template -->
 <span class="welcome">{$lang->welcome_back} <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="logout"><i class="fa fa-sign-out panel-logout"></i>{$lang->welcome_logout}</a></span>
</div>
</div>
<div class="lower">
<div class="wrapper">
<ul class="menu panel_links">
<li><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp"><i class="fa fa-user panel-usercp"></i>{$lang->welcome_usercp}</a></li>
{$modcplink}
{$admincplink}
</ul>
<ul class="menu user_links">
<li><a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup&modal=1', null, true); return false;">{$lang->welcome_open_buddy_list}</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php?action=getnew">{$lang->welcome_newposts}</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a></li>
<li><a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a> {$lang->welcome_pms_usage}</li>
</ul>
</div>
<br class="clear" />
</div>

header_welcomeblock_member_admin

<li><a href="{$mybb->settings['bburl']}/{$admin_dir}/index.php" class="admincp"><i class="fa fa-cog panel-admincp"></i>{$lang->welcome_admin}</a></li>

header_welcomeblock_member_moderator

<li><a href="{$mybb->settings['bburl']}/modcp.php" class="modcp"><i class="fa fa-file-text panel-modcp"></i>{$lang->welcome_modcp}</a></li>

And here is an example in a complete modified version of the devel theme..., utilizing both yours and my logo text concepts...

[attachment=38007]

Here is that as a theme file: * you will have to do download devel from the mods site in order to to grab the theme files as this theme file is a slightly modified devel. https://community.mybb.com/mods.php?action=view&pid=703
[attachment=38008]

**I will update the theme file here as I make improvements and get the color css re-sorted to reflect the changes to this devel variant..., also will add the files folder here at some point because currently it has changed a bit on what I am currently doing to it..., will add all that when I get around to it... as I added a slider to the portal page, lightbox to the attachments and other various stuff as tinker with it...

[WIP] - Random tinkering - Here is that progress so far:
[attachment=38014]

theme files as it has alot of stuff added to devel currently you will have to use these:

http://s000.tinyupload.com/index.php?fil...5313529065 * will soon remove this file
as it will be much easier for folks to just grab it from here as I work on it:

https://github.com/vintagedaddyo/MyBB-Th...yOne_Devel

*** still need to clean up the color.css files specifically on topmenu and fix this lil thing or that, but eh, I haven't had much time to work on this lately and it works enough to share progress

Basic WIP previews:

*Latest Progress:
[Image: 28saohh.png]

*older progress
[Image: m9pmxu.png]

(2016-12-13, 07:16 PM)vintagedaddyo Wrote: [ -> ]

(2016-12-13, 05:25 PM)thelovelyone Wrote: [ -> ]Yes, i noticed now.

If i replace my text logo with this: <img src="{$theme['logo']}"/>
the margin bottom -40px called from "logo img" works well and the header gets smaller. But idk how do that for my html text logo.

Your given code above doesn't change anything.

Never mind, i fixed it like this:

I gave the html logo text a new div like:

<div id="logo2">

and on css, i just added

#logo2 {
margin-bottom: -40px;
}

Thanks anyway.

#logo {
   background: #fff;
   padding: 10px 0;
}

.logo-text {
  color: #fff;
  text-decoration: none;
  font-size: 30px;
  font-weight: bold;
}

.logo-slogan {
  color: #E63A20;
  font-weight: bold;
  font-style: italic;
  font-size: 14px;
}

.logo-link:hover {
  text-decoration: none;
}

#logo-as-text {
  margin-bottom: -45px;
}

            <div id="logo">    
                <div class="wrapper">{$quicksearch}
                    <div id="logo-as-text">
                    <a href="{$mybb->settings['bburl']}/index.php" class="logo-link"><span class="logo-text">MY WEBSITE</span></a>
                        <br /><span class="logo-slogan">slogan comes here.</span></div>

Example:

Your global.css you provided slightly modified:


body {
    background-image: url();
    color: #333;
    text-align: center;
    line-height: 1.4;
    margin: 0;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    overflow-y: scroll;
}

h2 {
   font-size: 400%;
}

a:link {
    color: #0072BC;
    text-decoration: none;
}

a:visited {
    color: #0072BC;
    text-decoration: none;
}

a:hover,
a:active {
    color: #FFFF00;
    text-decoration: underline;
    text-shadow: 0 0 10px #fff;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}

#container {
    color: #333;
    text-align: left;
    line-height: 1.4;
    margin: 0;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    min-width: 990px;
}

.wrapper {
    width: 75%;
    min-width: 970px;
    max-width: 1500px;
    margin: auto auto;
}

#logo {
    background: #fff;
    padding: 10px 0;
}

.logo-text {
color: #000;
text-decoration: none;
font-size: 30px;
    font-weight: bold;
}

.logo-slogan {
color: #E63A20;
font-weight: bold;
font-style: italic;
font-size: 14px;
}

.logo-link:hover {
text-decoration: none;
}

#logo-as-text {
 margin-bottom: -45px;
}

#content {
    background-image: url();
    width: auto !important;
    padding: 20px 10px;
    overflow: hidden;
}

#header ul.menu {
margin: 0;
padding: 0;
list-style: none;
}
#header ul.menu li {
margin: 0 7px;
display: inline;
}
#header ul.menu li a {
background-repeat: no-repeat;
display: inline-block;
line-height: 16px;
}

#panel .upper ul.top_links {
font-weight: bold;
text-align: right;
margin: 0px 5px -20px 0;
}

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

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

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

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

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

#panel .upper ul.top_links a:hover {
color: #ff7500;
}

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

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

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

#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;
}
#panel .lower ul.user_links li a:hover {
color: #0072BC;
}
#panel .upper {
background: #A23535;
color: #fff;
border-top: 1px solid #444;
border-bottom: 1px solid #000;
padding: 7px;
clear: both;
}
#panel .upper a:link, #panel .upper a:visited, #panel .upper a:hover, #panel .upper a:active {
color: #fff;
}
#panel .lower {
background: #efefef;
color: #999;
border-top: 1px solid #fff;
border-bottom: 1px solid #ccc;
padding: 5px;
}
#panel .lower a:link, #panel .lower a:visited, #panel .lower a:hover, #panel .lower a:active {
color: #666;
}

#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;
}

#footer .upper {
    background: #222121;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 6px;
    font-size: 12px;
    overflow: hidden;
}

#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active {
text-decoration: none;
color: white;
}

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

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

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

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

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

#footer .lower {
    color: #666;
    padding: 6px 6px 12px 6px;
    overflow: hidden;
    font-size: 11px;
}

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

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

#footer .lower #current_time {
    float: right;
    color: #888;
}

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

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

.forum_status {
height: 25px;
width: 25px;
font-size: 25px;
text-align: center;
}

.forum_status i {
display: inline-block;
line-height: 25px;
}

.forum_on {
color: #0094d1;
}

.forum_off, .forum_offlock, .forum_offlink {
color: #333;
}

.forum_off i {
opacity: .4;
}

.forum_offlock i:before {
content: "\f023";
}

.forum_offlink i:before {
content: "\f0c1";
}

.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: #333;
    font-size: 13px;
}

.tborder {
    background: #fff;
    width: 100%;
    margin: auto auto;
    border: 1px solid #ccc;
    padding: 1px;
}

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

.thead {
    background: #fff url(images/thead.png) top left repeat-x;
    color: #ffffff;
    border-bottom: 1px solid #263c30;
    padding: 8px;
}

.thead a:link {
    color: #ffffff;
    text-decoration: none;
}

.thead a:visited {
    color: #ffffff;
    text-decoration: none;
}

.thead a:hover,
.thead a:active {
    color: #ffffff;
    text-decoration: underline;
}

.tcat {
    background: #0f0f0f url(images/tcat.png) repeat-x;
    color: #fff;
    border-top: 1px solid #444;
    border-bottom: 1px solid #000;
    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: #f5f5f5;
    border: 1px solid;
    border-color: #fff #ddd #ddd #fff;
}

.trow2 {
    background: #efefef;
    border: 1px solid;
    border-color: #fff #ddd #ddd #fff;
}

.trow_shaded {
    background: #ffdde0;
    border: 1px solid;
    border-color: #fff #ffb8be #ffb8be #fff;
}

.no_bottom_border {
    border-bottom: 0;
}

.post.unapproved_post {
    background: #ffdde0;
}

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

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

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

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

.trow_selected,
tr.trow_selected td {
    background: #FFFBD9;
    color: #333;
    border-right-color: #F7E86A;
    border-bottom-color: #F7E86A;
}

.trow_selected a:link,
.trow_selected a:visited,
.trow_selected a:hover,
.trow_selected a:active {
    color: #333;
}

.trow_sep {
    background: #ddd;
    color: #333;
    border-bottom: 1px solid #c5c5c5;
    padding: 6px;
    font-size: 12px;
    font-weight: bold;
}

.tfoot {
    border-top: 1px solid #fff;
    padding: 6px;
    background: #ddd;
    color: #666;
}

.tfoot a:link {
    color: #444;
    text-decoration: none;
}

.tfoot a:visited {
    color: #444;
    text-decoration: none;
}

.tfoot a:hover,
.tfoot a:active {
    color: #444;
    text-decoration: underline;
}

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

.bottommenu {
    background: #efefef;
    color: #333;
    border: 1px solid #4874a3;
    padding: 10px;
}

.navigation {
    color: #333;
    font-size: 12px;
}

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

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

.navigation a:hover,
.navigation a:active {
    text-decoration: underline;
}

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

.smalltext {
    font-size: 11px;
}

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

fieldset {
    padding: 12px;
    border: 1px solid #ddd;
    margin: 0;
}

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

fieldset.align_right {
    text-align: right;
}

input.textbox {
    background: #ffffff;
    color: #333;
    border: 1px solid #ccc;
    padding: 3px;
    outline: 0;
    font-size: 13px;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

textarea {
    background: #ffffff;
    color: #333;
    border: 1px solid #ccc;
    padding: 2px;
    line-height: 1.4;
    outline: 0;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

select {
    background: #ffffff;
    padding: 3px;
    border: 1px solid #ccc;
    outline: 0;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

button,
input.button {
    padding: 3px 8px;
    cursor: pointer;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    background: #eee url(images/buttons_bg.png) repeat-x;
    border: 1px solid #bbb;
    color: #333;
    outline: 0;
}

button:hover,
input.button:hover {
    border-color: #aaa;
}

form {
    margin: 0;
    padding: 0;
}

input.error, textarea.error, select.error {
    border: 1px solid #f30;
    color: #f30;
}

input.valid, textarea.valid, select.valid {
    border: 1px solid #0c0;
}

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

form #message {
   width: 500px;
}

.editor {
    background: #f1f1f1;
    border: 1px solid #ccc;
}

.editor_control_bar {
    background: #fff;
    border: 1px solid #ccc;
}

.post .editor_control_bar {
    background: #f5f5f5;
}

.popup_menu {
    background: #fff;
    border: 1px solid #ccc;
}

.popup_menu .popup_item {
    background: #efefef;
    color: #333;
}

.popup_menu .popup_item:hover {
    background: #0072BC;
    color: #fff;
}

.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 #E9E5D7;
    padding: 2px;
}

hr {
    background-color: #000000;
    color: #000000;
    height: 1px;
    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: #FFFBD9;
    border-bottom: 1px solid #F7E86A;
    color: #333;
    text-align: center;
}

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

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

blockquote {
    border: 1px solid #ccc;
    margin: 0;
    background: #fff;
    padding: 10px;
}

blockquote cite {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    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: #666;
}

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

.codeblock {
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
}

.codeblock .title {
    border-bottom: 1px solid #ccc;
    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: 13px;
}

.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;
}

.pm_alert {
    background: #FFF6BF;
    border: 1px solid #FFD324;
    text-align: center;
    padding: 5px 20px;
    margin-bottom: 15px;
    font-size: 11px;
}

.red_alert {
    background: #FBE3E4;
    border: 1px solid #A5161A;
    color: #A5161A;
    text-align: center;
    padding: 5px 20px;
    margin-bottom: 15px;
    font-size: 11px;
    word-wrap: break-word;
}

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

.high_warning {
    color: #CC0000;
}

.moderate_warning {
    color: #F3611B;
}

.low_warning {
    color: #AE5700;
}

.online {
    color: #15A018;
}

.offline {
    color: #C7C7C7;
}

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

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

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

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

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

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

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

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

.pagination a {
    background: #f5f5f5;
    border: 1px solid #ccc;
}

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

.pagination a:hover {
    background: #0072BC;
    color: #fff;
    border-color: #263c30;
    text-decoration: none;
}

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

.drop_go_page {
    background: #f5f5f5;
    padding: 4px;
}

.pagination_breadcrumb {
    background-color: #efefef;
    border: 1px solid #fff;
    outline: 1px solid #ccc;
    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 #333;
    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;
}

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

.post .post_author {
    border-bottom: 1px solid #ccc;
    border-top: 2px solid #ccc;
    background: #f5f5f5;
    padding: 5px;
    overflow: hidden;
}

.post.classic .post_author {
    border: 1px solid #ddd;
    float: left;
    width: 15%;
    margin: 0 1% 15px 0;
    border-left: 0;
    padding: 5px 1%;
}

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

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

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

.post .post_author div.author_avatar img {
    padding: 5px;
    border: 1px solid #ddd;
    background: #fff;
}

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

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

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

.post.classic .post_author div.author_statistics {
    border-top: 1px dotted #ccc;
    margin: 6px 0 0 0;
    padding: 6px 6px 3px 6px;
    float: none;
}

.post .post_head {
    font-size: 11px;
    padding-bottom: 4px;
    border-bottom: 1px dotted #ddd;
    margin-bottom: 4px;
}

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

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

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

.post_body {
    font-size: 14px;
    padding: 12px 0;
}

.post.classic .post_content {
    float: left;
    width: 79%;
    padding: 0 1% 5px 1%;
}

.post_content {
    padding: 9px 10px 5px 10px;
}

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

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

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

.post .post_meta a:hover,
.post .post_meta a:active {
    color: #777;
}

.post_controls {
    clear: both;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
    padding: 5px;
    overflow: hidden;
}

.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: #eee url(images/buttons_bg.png) repeat-x;
    border: 1px solid #ccc;
    color: #555;
}

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

.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: #0f0f0f url(images/tcat.png) repeat-x;
    color: #fff;
    display: inline-block;
    padding: 4px 8px;
    margin: 2px 2px 6px 2px;
    border: 1px solid #000;
    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;
    font-size: 80%;
}

a.button.remove_buddy_button span {
    background-position: 0 -480px;
    font-size: 80%;
}

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;
    font-size: 80%;
}

.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: url(images/pollbar.png) top left repeat-x;
    border: 1px solid #3f3f3f;
    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: #ffffff;
 font-size: 13px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 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 **/

.jGrowl.center .jGrowl-notification,
.jGrowl.center .jGrowl-closer {
 margin-left: auto;
 margin-right: auto;
}
.jGrowl-notification {
 background-color: #E4A316;
 opacity: 0.9;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
 zoom: 1;
 width: 420px;
 padding: 10px;
 margin: 10px;
 text-align: left;
 display: none;
 border-radius: 5px;
 word-break: break-all;
 min-height: 18px;
}
.jGrowl-notification .ui-state-highlight,
.jGrowl-notification .ui-widget-content .ui-state-highlight,
.jGrowl-notification .ui-widget-header .ui-state-highlight {
 border: 1px solid #000;
 background: #000;
 color: #fff;
}
.jGrowl-notification .jGrowl-header {
 font-weight: bold;
 font-size: .85em;
}
.jGrowl-notification .jGrowl-close {
 background-color: transparent;
 color: #000000;
 border: none;
 z-index: 99;
 float: right;
 font-weight: bold;
 font-size: 1em;
 cursor: pointer;
}
.jGrowl-closer {
 background-color: #000000;
 opacity: 0.9;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
 zoom: 1;
 width: 250px;
 padding: 10px;
 margin: 10px;
 text-align: left;
 display: none;
 border-radius: 5px;
 word-break: break-all;
 padding-top: 4px;
 padding-bottom: 4px;
 cursor: pointer;
 font-size: .9em;
 font-weight: bold;
 text-align: center;
}
.jGrowl-closer .ui-state-highlight,
.jGrowl-closer .ui-widget-content .ui-state-highlight,
.jGrowl-closer .ui-widget-header .ui-state-highlight {
 border: 1px solid #000;
 background: #000;
 color: #fff;
}

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

/** jGrowl End **/

/** Modal Start **/

.modal {
    display: none;
    width: 400px;
    text-align: left;
    background: #fff;
    -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 - v6.2.1 - 2015-05-10
* http://trentrichardson.com/Impromptu
* Copyright (c) 2015 Trent Richardson; Licensed MIT */

.jqifade{
    position: absolute;
    background-color: #777777;
}
iframe.jqifade{
    display:block;
    z-index:-1;
}
div.jqi{
    width: 400px;
    max-width:90%;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    position: absolute;
    background-color: #ffffff;
    font-size: 11px;
    text-align: left;
    border: solid 1px #eeeeee;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    padding: 7px;
}
div.jqi .jqicontainer{
}
div.jqi .jqiclose{
    position: absolute;
    top: 4px; right: -2px;
    width: 18px;
    cursor: default;
    color: #bbbbbb;
    font-weight: bold;
}
div.jqi .jqistate{
    background-color: #fff;
}
div.jqi .jqititle{
    padding: 5px 10px;
    font-size: 16px;
    line-height: 20px;
    border-bottom: solid 1px #eeeeee;
}
div.jqi .jqimessage{
    padding: 10px;
    line-height: 20px;
    color: #444444;
    overflow: auto;
}
div.jqi .jqibuttonshide{
    display: none;
}
div.jqi .jqibuttons{
    text-align: right;
    margin: 0 -7px -7px -7px;
    border-top: solid 1px #e4e4e4;
    background-color: #f4f4f4;
    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 #e4e4e4;
    color: #777;
    font-weight: bold;
    font-size: 12px;
}
div.jqi .jqibuttons button.jqidefaultbutton{
    color: #489afe;
}
div.jqi .jqibuttons button:hover,
div.jqi .jqibuttons button:focus{
    color: #287ade;
    outline: none;
}
div.jqi .jqibuttons button[disabled]{
    color: #aaa;
}
.jqiwarning .jqi .jqibuttons{
    background-color: #b95656;
}

/* sub states */
div.jqi .jqiparentstate::after{
    background-color: #777;
    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 #eeeeee;
    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: #ffffff; }
.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; }
.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; }

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

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

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

/** Impromptu End */

.ads { float: right;
padding-top: 16px;
padding-right: 320px; }

/* DVZ Shoutbox */
#shoutbox { margin-bottom: 10px; border: solid 2px rgba(0,0,0,0.1); background: #F2F2F2; }
#shoutbox .head { padding: 8px; }
#shoutbox.front .head { cursor: pointer; }
#shoutbox .head .right { float: right; margin: 0; font-size: 13px; }
#shoutbox.collapsed .head { opacity: 0.6; }
#shoutbox.collapsed .body { display: none; }

#shoutbox .panel { border-top: solid 2px rgba(0,0,0,0.1); }
#shoutbox input.text { margin: 0; padding: 10px 8px; width: 100%; box-sizing: border-box; border: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); font-family: Arial, sans-serif; font-size: 12px; color: #000; }
#shoutbox .minposts, #shoutbox .blocked { padding: 6px; font-size: 11px; }
#shoutbox .panel.minposts { background: #FFFED8; color: #727250; }
#shoutbox .panel.blocked { background: #FCEFEF; color: #543A3A; }
#shoutbox .panel p { margin: 0; }

#shoutbox .window { border-top: solid 2px rgba(0,0,0,0.1); overflow-y: scroll; }
#shoutbox .data { display: table; width: 100%; border-top: solid 2px rgba(0,0,0,0.1); font-family: Arial, sans-serif; font-size: 12px; }
#shoutbox.front .data { border-top: none; }

#shoutbox .entry { display: table-row !important; width: 100%; transition: background-color 0.2s; }
#shoutbox .entry:nth-child(even) { background-color: rgba(0,0,0,0.01); }
#shoutbox .entry.new { background-color: rgba(255,255,100,0.1); }
#shoutbox .entry > div { border-bottom: dashed 1px rgba(0,0,0,0.05); }
#shoutbox .entry:last-child > div { border-bottom: none; }

#shoutbox .entry > div { display: table-cell; padding: 6px; }

#shoutbox .avatar img { margin: 0 auto; vertical-align: middle; max-height: 20px; max-width: 20px; border: solid 1px rgba(255,255,255,0.1); box-shadow: 0 0 2px rgba(0,0,0,0.1); cursor: pointer; }
#shoutbox .user { border-right: solid 1px rgba(0,0,0,0.05); text-align: right; white-space: nowrap; }
#shoutbox .text { width: 100%; color: #555; }
#shoutbox .info { font-size: 11px; color: #AAA; white-space: nowrap; text-align: right; }
#shoutbox .mod { padding: 6px 8px; font-size: 9px; font-weight: bold; color: #AAA; text-decoration: none; }
#shoutbox .mod:nth-of-type(2) { margin-right: 5px; border-left: solid 1px rgba(0,0,0,0.1); }
#shoutbox  .ip { margin-right: 10px; color: #CECECE; }

.tabs{
background: #4D4D4D;
margin: 0px;
padding: 0px;
margin-top: 1px;
list-style: none;
text-decoration: none;
}
.tabs li{
background: none;
color: #fff;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
text-decoration: none;
}

.tabs li.current{
background: #fff;
color: #222;
}

.tab-content{
display: none;
background: #41403B;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
.memprof
{
background: #4D4D4D; /*For old browsers*/
color: #fff;
}
.memtext
{
font-size: 16px;
font-weight: bold;
color: #fff;
}
.memprof a:link
{color: #ffff00;
}
.memprof a:visited
{
color: #fff;
}


/*Max img*/
#maximage
{
max-width: 45px;
}

.signature img {max-width:600px; max-height:150px; overflow:hidden;}

.signature {border-top: 1px solid #aaaaaa; width:100%; margin-top:1em; padding-top:0.2em; max-height:400px; overflow:hidden;}

.button2 {
   background-color: #A73E3E; /* Green */
   border: none;
   color: white;
   padding: 8px 16px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
   cursor: pointer;
}

.button2:hover {
   background-color: #4CAF50;
   color: white;
}

.button3 {
   background-color: #A73E3E; /* Green */
   border: none;
   color: white;
   padding: 8px 16px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
   cursor: pointer;
}

.button3:hover {
   background-color: #4CAF50;
   color: white;
}

.alignright {
    float: right;
}

.post.forum-11.group-8 {
border-left: 3px solid #F4DB60;
background-color: #F7F6F2;
left: -2px;

}

.post.forum-27.group-8 {
border-left: 3px solid #F4DB60;
background-color: #F7F6F2;
left: -2px;

}

.post.forum-28.group-8 {
border-left: 3px solid #F4DB60;
background-color: #F7F6F2;
left: -2px;

}

.button2 {
 -webkit-border-radius: 3;
 -moz-border-radius: 3;
 border-radius: 3px;
 font-family: Arial;
 color: #ffffff;
 font-size: 18px;
 background: #D04040;
 padding: 6px 14px 6px 14px;
 border: solid #BABABA 1px;
 text-decoration: none;
}

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

.button2:hover {
 -webkit-border-radius: 3;
 -moz-border-radius: 3;
 border-radius: 3px;
 border: solid #BABABA 1px;
 color: #FFFFFF;
 background: #FBC649;
 font-size: 18px;
 text-decoration: none;
}

.button3 {
 -webkit-border-radius: 3;
 -moz-border-radius: 3;
 border-radius: 3px;
 font-family: Arial;
 color: #fff;
 font-size: 16px;
 background: #D04040;
 padding: 6px 14px 6px 14px;
 border: solid #BABABA 1px;
 text-decoration: none;
}

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

.button3:hover {
 -webkit-border-radius: 3;
 -moz-border-radius: 3;
 border-radius: 3px;
 border: solid #BABABA 1px;
 color: #FFFFFF;
 background: #FBC649;
 font-size: 16px;
 text-decoration: none;
 top: -9px
}

.loginbutton a:link, .loginbutton a:visited {
     padding: 3px 8px;
     margin-left: 10px;
    font-size: 120%;
     color: black;
     transition: all 0.5s ease;
     background: #3B6FB0;
     text-decoration: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.loginbutton a:hover, .loginbutton a:active{
     transition: all 0.5s ease;
     background: #D04040;
     text-decoration: none;
}

.registerbutton a:link, .registerbutton a:visited {
     padding: 5px 8px;
     margin-left: 10px;
    font-size: 125%;
     color: #FFFFFF;
     transition: all 0.5s ease;
     background: #EF9817;
     text-decoration: none;
        -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.registerbutton a:hover, .registerbutton a:active {
     transition: all 0.5s ease;
     background: #FEA219;
}

.googlebutton a:link, .googlebutton a:visited {
     padding: 5px 8px;
    font-size: 90%;
     margin-left: 6px;
     color: #FFFFFF;
     transition: all 0.5s ease;
   background-color: #252525;
   border: 2px solid #F0503E;
     text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.googlebutton a:hover, .googlerbutton a:active {
     transition: all 0.5s ease;
     background: #F0503E;
}

.bam_announcement.redd {
   background-color: #f44336;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.redd, .bam_announcement.redd a:link {
   background-color: #f44336;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.greenn {
   background-color: #4CAF50;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.greenn, .bam_announcement.greenn a:link {
   background-color: #4CAF50;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.bluee {
   background-color: #2196F3;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.bluee, .bam_announcement.bluee a:link {
   background-color: #2196F3;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.orangee {
   background-color: #ff9800;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

.bam_announcement.orangee, .bam_announcement.orangee a:link {
   background-color: #ff9800;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
}

#notificationbar {
   background-color: #F1F1F1;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
   border: 1px solid #F5DC4A;
   border-radius: 3px;
}

.jGrowl-notification .jGrowl-message {
   word-break: normal
}

a.red:hover {color:#D95C57;}

.niyaprefix {
height: 4px;
line-height: 4px;
vertical-align: middle;
display: inline-block;
padding: 5px;
font-size: 9px;
font-weight: bold;
color: white;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background-repeat: repeat-x;
background-position: 0 -1px;
margin-bottom: 3PX;
}

.user-details {
background: transparent;
}

.profbg {
background-size: 100% 100%;
border: 1px solid #555555;
border-radius: 3px;
box-shadow: 0px 0px 3px 2px #888888;
}

.ud-text {
background: rgba(255,255,255,0.7);
padding: 5px;
border: 3px solid rgba(255, 255, 255, .5);
border-radius: 22px
box-shadow: 0px 0px 5px 2px #eee;
max-width: 350px;
}

.ud-img img {
border: 2px solid #FFFFFF;
border-radius: 3px;
max-width: 350px;
}

.post_body a:link, .post_body a:active, .post_body a:visited{
color: #196EC9 !important; /* Its Yellow color. You may change it to your desired color. */
}

#topmenu {
    font-size: 15px;
    text-align: right;
    position: relative;
    margin: 30px 0 -14px 0;
}

#topmenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#topmenu ul li {
    margin: 0 1px;
    display: inline-block;
}

#topmenu ul li a {
    color: #0072BC;                  
    display: block;
    text-decoration: none;
    padding: 5px 10px 5px;
   border-bottom: 4px solid transparent;
}

#topmenu ul li a:hover {
    color: #ff7500;                    
    border-bottom: 4px solid #ff7500;
}

#topmenu ul li.selected a {
    color: #000000;                    
    font-weight: bold;
    border-bottom: 4px solid #ff7500;
}

#panel .upper ul.top_links a:hover {
    color: #ff7500;                    
}

i.topmenu {
    padding-right: 5px;
}

i.panel-register {
   padding-right: 5px;
    color: #98C78B;
    font-size: 14px;
}

i.panel-login {
   padding-right: 5px;
    color: #C49A38;
    font-size: 14px;
}

i.panel-logout {
   padding-right: 5px;
    color: #98C78B;
    font-size: 14px;
}

i.panel-usercp {
    padding-right: 2px;
    padding-left: 10px;
    color: #0072BC ;
    font-size: 14px;
}

i.panel-modcp {
    padding-right: 2px;
    padding-left: 10px;
    color: #0072BC;
    font-size: 14px;
}

i.panel-admincp {
    padding-right: 2px;
    padding-left: 10px;
    color: #0072BC;
    font-size: 14px;
}

i.topmenu-home {
padding-right: 2px;
padding-left: 2px;
}

i.topmenu-portal {
padding-right: 2px;
padding-left: 2px;    
}

i.topmenu-forum {
padding-right: 2px;
padding-left: 2px;
}

i.topmenu-online {
padding-right: 2px;
padding-left: 2px;
}

i.topmenu-stats {
padding-right: 2px;
padding-left: 2px;
}

i.toplinks-portal {
padding-right: 2px;
padding-left: 2px; 

}

i.toplinks-search {
padding-right: 2px;
padding-left: 2px; 
}

i.toplinks-memberlist {
padding-right: 2px;
padding-left: 2px; 
}

i.toplinks-calendar {
padding-right: 2px;
padding-left: 2px; 
}

i.toplinks-help {
padding-right: 2px;
padding-left: 2px;
}

#search input.textbox {
    border-color: #A5A5A5;
    margin: -3px 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    line-height: 20px;
    display: inline-block;
    width: 200px;
}
.search_icon {
    background: none;
    cursor: pointer;
    margin-left: -24px;
    padding: 0;
    border: 0;
    display: inline-block;
    color: #747474;
}

#search {
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    display: block;
}

#search input.button {
    background: url(images/headerlinks_sprite.png) 0px 0px no-repeat;
    border: 0;
    height: 16px;
    margin-left: -25px;
}

header


<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div id="logo">
  <div class="wrapper">{$quicksearch}
    <div id="logo-as-text"> <a href="{$mybb->settings['bburl']}/index.php" class="logo-link"><span class="logo-text">MY WEBSITE</span></a> <br />
      <span class="logo-slogan">slogan comes here.</span></div>
    <div id="topmenu">
      <ul>
        <!-- start: header_menu_home -->
        <li><a href="{$mybb->settings['homeurl']}" class="" title=""><i class="fa fa-home topmenu-home"> </i>{$mybb->settings['homename']}</a></li>
        <!-- end: header_menu_home --> 
        <!-- start: header_menu_portal -->
        <li><a href="{$mybb->settings['bburl']}/portal.php" class="" title=""><i class="fa fa-bell topmenu-portal"></i>Portal</a></li>
        <!-- end: header_menu_portal --> 
        <!-- start: header_menu_forum -->
        <li><a href="{$mybb->settings['bburl']}/index.php" class="" title=""><i class="fa fa-comments topmenu-forum"></i>{$mybb->settings['bbname']}</a></li>
        <!-- end: header_menu_forum --> 
        <!-- start: header_menu_online -->
        <li><a href="{$mybb->settings['bburl']}/online.php" class="" title=""><i class="fa fa-user topmenu-online"></i>Who's Online</a></li>
        <!-- end: header_menu_online --> 
        <!-- start: header_menu_stats -->
        <li><a href="{$mybb->settings['bburl']}/stats.php" class="" title=""><i class="fa fa-bar-chart topmenu-stats"></i>Forum Stats</a></li>
        <!-- end: header_menu_stats -->
      </ul>
    </div>
  </div>
</div>
<div id="panel">
<div class="upper">
  <div class="wrapper">
    <ul class="menu top_links">
      {$menu_portal}
      {$menu_search}
      {$menu_memberlist}
      {$menu_calendar}
      <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><i class="fa fa-question-circle toplinks-help"></i>{$lang->toplinks_help}</a></li>
    </ul>
    {$welcomeblock} 
    <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest --> 
    <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest --> 
  </div>
</div>
<div id="content">
<div class="wrapper">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
{$awaitingusers}
<navigation>
<br />

header_menu_calendar

<li><a href="{$mybb->settings['bburl']}/calendar.php" class="calendar"><i class="fa fa-calendar toplinks-calendar"></i>{$lang->toplinks_calendar}</a></li>

header_menu_memberlist

<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="memberlist"><i class="fa fa-users toplinks-memberlist"></i>{$lang->toplinks_memberlist}</a></li>

header_menu_portal

<li><a href="{$mybb->settings['bburl']}/portal.php" class="portal"><i class="fa fa-bell toplinks-portal"></i>{$lang->toplinks_portal}</a></li>

header_menu_search

<li><a href="{$mybb->settings['bburl']}/search.php" class="search"><i class="fa fa-search toplinks-search"></i>{$lang->toplinks_search}</a></li>

header_quicksearch

            <form action="{$mybb->settings['bburl']}/search.php" method="post">
            <fieldset id="search">
               <input name="keywords" type="text" class="textbox" placeholder="Search..." />
                <i class="fa fa-search search_icon"></i><input value="" type="submit" class="search_icon" />
                <input type="hidden" name="action" value="do_search" />
                <input type="hidden" name="postthread" value="1" />
                </fieldset>
                </form>

header_welcomeblock_guest

<!-- Continuation of div(class="upper") as opened in the header template -->
<span class="welcome">{$lang->welcome_guest} <a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;" class="login"><i class="fa fa-sign-in panel-login"></i>{$lang->welcome_login}</a> <a href="{$mybb->settings['bburl']}/member.php?action=register" class="register"><i class="fa fa-user-plus panel-register"></i>{$lang->welcome_register}</a></span>
</div>
</div>
<div class="modal" id="quick_login" style="display: none;">
<form method="post" action="{$mybb->settings['bburl']}/member.php">
<input name="action" type="hidden" value="do_login" />
<input name="url" type="hidden" value="" />
<input name="quick_login" type="hidden" value="1" />
<table width="100%" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" border="0" class="tborder">
<tr>
<td class="thead" colspan="2"><strong>{$lang->login}</strong></td>
</tr>
<tr>
<td class="trow1" width="25%"><strong>{$login_username}</strong></td>
<td class="trow1"><input name="quick_username" id="quick_login_username" type="text" value="" class="textbox initial_focus" /></td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->password}</strong></td>
<td class="trow2">
<input name="quick_password" id="quick_login_password" type="password" value="" class="textbox" /> <a href="{$mybb->settings['bburl']}/member.php?action=lostpw" class="lost_password">{$lang->lost_password}</a>
</td>
</tr>
<tr>
<td class="trow1">&nbsp;</td>
<td class="trow1 remember_me">
<input name="quick_remember" id="quick_login_remember" type="checkbox" value="yes" class="checkbox" checked="checked" />
<label for="quick_login_remember">{$lang->remember_me}</label>
</td>
</tr>
<tr>
<td class="trow2" colspan="2">
<div align="center"><input name="submit" type="submit" class="button" value="{$lang->login}" /></div>
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
$("#quick_login input[name='url']").val($(location).attr('href'));
</script>

header_welcomeblock_member

<!-- Continuation of div(class="upper") as opened in the header template -->
 <span class="welcome">{$lang->welcome_back} <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="logout"><i class="fa fa-sign-out panel-logout"></i>{$lang->welcome_logout}</a></span>
</div>
</div>
<div class="lower">
<div class="wrapper">
<ul class="menu panel_links">
<li><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp"><i class="fa fa-user panel-usercp"></i>{$lang->welcome_usercp}</a></li>
{$modcplink}
{$admincplink}
</ul>
<ul class="menu user_links">
<li><a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup&modal=1', null, true); return false;">{$lang->welcome_open_buddy_list}</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php?action=getnew">{$lang->welcome_newposts}</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a></li>
<li><a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a> {$lang->welcome_pms_usage}</li>
</ul>
</div>
<br class="clear" />
</div>

header_welcomeblock_member_admin

<li><a href="{$mybb->settings['bburl']}/{$admin_dir}/index.php" class="admincp"><i class="fa fa-cog panel-admincp"></i>{$lang->welcome_admin}</a></li>

header_welcomeblock_member_moderator

<li><a href="{$mybb->settings['bburl']}/modcp.php" class="modcp"><i class="fa fa-file-text panel-modcp"></i>{$lang->welcome_modcp}</a></li>

And here is an example in a complete modified version of the devel theme..., utilizing both yours and my logo text concepts...

Here is that as a theme file: * you will have to do download devel from the mods site in order to to grab the theme files as this theme file is a slightly modified devel. https://community.mybb.com/mods.php?action=view&pid=703

**I will update the theme file here as I make improvements and get the color css re-sorted to reflect the changes to this devel variant..., also will add the files folder here at some point because currently it has changed a bit on what I am currently doing to it..., will add all that when I get around to it... as I added a slider to the portal page, lightbox to the attachments and other various stuff as tinker with it...

[WIP] - Random tinkering - Here is that progress so far:

theme files as it has alot of stuff added to devel currently you will have to use these:

http://s000.tinyupload.com/index.php?fil...5313529065 * will soon remove this file
as it will be much easier for folks to just grab it from here as I work on it:

https://github.com/vintagedaddyo/MyBB-Th...yOne_Devel

*** still need to clean up the color.css files specifically on topmenu and fix this lil thing or that, but eh, I haven't had much time to work on this lately and it works enough to share progress

Basic WIP previews:

*Latest Progress:
[Image: 28saohh.png]

*older progress
[Image: m9pmxu.png]

@thelovelyone

Haven't looked at the "LovelyOne_Devel" theme or worked on it in a while as I have been away from doing MyBB stuff for a bit nor am I sure if there was any further interest or past interest in the continuance of this theme but.....

1.8.11 usage requires minor changes to the theme

Also it is no longer calling from the devel directory as it was better to make a directory for lovelyone_devel rather than keep modifying another theme's ( "devel" https://community.mybb.com/mods.php?action=view&pid=703 ) directory...

The "LovelyOne_Devel" package is still larger than the allowed upload size here hence why I did not add it to the mods site or attach it via this thread as an attachment nor * have I updated the github version of this yet so you will have to download from external source here http://s000.tinyupload.com/index.php?fil...6996734483

I don't need it anymore, settled things a while ago, thanks anyway.

(2014-11-20, 12:31 PM)mmadhankumar Wrote: [ -> ]4. News Bars

Goto ACP >> Templates >> Your Theme's Templates >>Index Page Templates >> index

and add these codes just after the {header} like this....
{$header} 
<div class="newsbar newsbar1"><a href="Link to Announcement1">Announcement 1</a></div>
<div class="newsbar newsbar2"><a href="Link to Announcement2">Announcement 2</a></div>
<div class="newsbar newsbar3"><a href="Link to Announcement3">Announcement 3</a></div>
<div class="newsbar social">
    <span>Find us on Social Networks</span>
	<span><a href="Your Twitter Link">Follow us on Twitter</a></span>
	<span><a href="Your Facebook Link">Like us on Facebook</a></span>
	<span><a href="Your Youtube Link">Subscribe to our Youtube Channel</a></span>
</div>
So what URL do I use to replace "Link to Announcement1" to show an announcement that is a sticky in a forum on my board?

Pages: 1 2 3 4 5

thelovelyone

User 6029

User 6029

thelovelyone

Korg