Announcement

Collapse
No announcement yet.

Style var broke

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Style var broke

    No idea what happened, but seems as if my style var has broken for the sprite icons.

    http://tunerheat.com

    Anyone know what I did wrong?

  • #2
    Did you make any edits to the style variable? If so can you show a screenshot of what it looks like now? When I "Inspect Element" in my browser where the icon should be I'm seeing bad/malformed CSS:

    Code:
    padding-{vb: stylevar left\}: 38px;
    Likely causing the problem.

    Comment


    • #3
      Originally posted by Joe D. View Post
      Did you make any edits to the style variable? If so can you show a screenshot of what it looks like now? When I "Inspect Element" in my browser where the icon should be I'm seeing bad/malformed CSS:

      Code:
      padding-{vb: stylevar left\}: 38px;
      Likely causing the problem.
      I didn't change any of the edits. The only thing I can think that broke it is I went to the style edit on site builder > css > hit save changes (I didn't change any coding or move things around. Just accidentally hit it and cancel wasn't working so I hit save changes)

      the images are located in images/quarto/red/css/

      Comment


      • #4
        Go to Site Builder -> CSS and copy any CSS that is there for your style and paste it into a post. Please put it between [CODE] BB Code tags.

        Comment


        • #5
          Originally posted by Joe D. View Post
          Go to Site Builder -> CSS and copy any CSS that is there for your style and paste it into a post. Please put it between [CODE] BB Code tags.
          Code:
          /* Start over-ride postbit avatar size */
          .b-avatar--m {
              height: 100%;
              width: 100%;
          }
          .b-avatar--m > img {
          max-height: 100%;
          max-width: 100% !important;
          }
          
          a, a:active, a:visited, .b-link, .ui-widget-content a {
              border: 0px;
          }
          /* Stop over-ride postbit avatar size */
          
          /* Image paths */
          
          #htmlTag .b-button__icon {
              background-image: url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") !important;
          }
          
          #htmlTag .b-editor .cke_top .b-icon__x-circle--dark,
          #htmlTag .b-form-select__select .selectBox-arrow,
          #htmlTag .b-icon {
              background-image: url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") !important;
          }
          #htmlTag .button.follow-btn .button-icon,
          #htmlTag .button.follow_button .button-icon,
          #htmlTag .button.share-btn .button-icon {
              background-image: url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg");
              width:14px;
              height:9px;
          }
          #htmlTag .content-entry-box .action-buttons .fb-publish span,
          #htmlTag .dialog-container.ui-dialog .ui-dialog-titlebar-close .ui-icon,
          #htmlTag .pollresults-data tr td.pollvoter-cell .voter-icon {
              background-image: url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg");
          }
          #htmlTag .conversation-toolbar-wrapper .conversation-toolbar .toolset-right > li,
          #htmlTag .toolbar-wrapper .horizontal-toolbar .toolset.h-right > li {
              background-image: none;
          }
          #htmlTag .slideshow .slideshow-wrapper > .jcarousel-next-horizontal,
          #htmlTag .slideshow .thumbnails > .jcarousel-next-horizontal,
          #htmlTag .slideshow .slideshow-wrapper > .jcarousel-prev-horizontal,
          #htmlTag .slideshow .thumbnails > .jcarousel-prev-horizontal,
          #htmlTag .conversation-list.stream-view .list-item-header .info .subscribed span,
          #htmlTag .conversation-list.stream-view .list-item-header .info .joined span,
          #htmlTag .private-message-widget .pending-posts-container .photo-count .icon,
          #htmlTag .pending-post-overlay-container button .button-icon,
          #htmlTag #main-navbar .lnkAdminCP a .icon,
          #htmlTag .selectBox-dropdown .selectBox-arrow,
          #htmlTag #pmFloatingBarContent button .button-icon,
          #htmlTag .profile-sidebar-widget .profileContainer .profile-acct .edit-user-link,
          #htmlTag .profile-sidebar-widget .profileContainer .profile-acct .edit-user-link:hover,
          #htmlTag .profileNavOuter .icon,
          #htmlTag #edit-navbar .navbar-list .nav-item-controls > .navbar-item-delete,
          #htmlTag #edit-navbar .navbar-list .nav-item-controls > .navbar-item-edit,
          #htmlTag #edit-navbar .navbar-list .nav-item-controls > .navbar-item-opensubnav,
          #htmlTag #add-modules .category-arrow-left,
          #htmlTag #create-new-module-dialog .category-arrow-left,
          #htmlTag #add-modules .category-arrow-right,
          #htmlTag #create-new-module-dialog .category-arrow-right,
          #htmlTag .page_manager_table .buttons span,
          #htmlTag .dataTables_wrapper .axdtable .axdtable-action .editlink > span,
          #htmlTag .dataTables_wrapper .axdtable .axdtable-action .deletelink > span,
          #htmlTag .dataTables_wrapper .axdtable .axd-cell > span,
          #htmlTag .vb-icon,
          #htmlTag .forum-list-container .forum-item .cell-forum .icon,
          #htmlTag .forum-list-container .subforum-list .subforum-item .icon,
          #htmlTag .forum-list-container .forum-item.sub .cell-forum .icon,
          #htmlTag .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper .go-to-first-unread,
          #htmlTag .topic-list-container .topic-list .topic-item .cell-lastpost .go-to-last-post,
          /*#htmlTag .moderationmenu_container .moderation-mainmenu .moderation > span,*/
          #htmlTag .adminmenu_container .admin-mainmenu .moderation > span,
          /*#htmlTag .moderationmenu_container .moderation-mainmenu .administrative > span ,*/
          #htmlTag .adminmenu_container .admin-mainmenu .administrative > span,
          #htmlTag .notice > .close,
          #htmlTag .faqs .ui-accordion .ui-accordion-header .ui-icon,
          #htmlTag .faqs .faq-search-title .ui-icon,
          #htmlTag .faqs .ui-accordion .ui-state-active .ui-icon,
          #htmlTag #private-message-search #private-message-search-button-container #btnSearchPM:before,
          #htmlTag .conversation-list.stream-view .list-item.list-item-channel.list-item-forum .avatar .forum-icon,
          #htmlTag .b-comp-menu-dropdown__trigger-icon--gear-icon,
          #htmlTag .b-comp-menu-dropdown__trigger-icon--topic-icon {
              background-image: url("images/{vb:stylevar imgdir_button}/red/css/sprite_icons_vb_{vb:stylevar textdirection}.svg");
          }
          /* Responsive image paths */
              #htmlTag #mobile-main-menu-sections .sections-menu-icon .icon,
              #htmlTag #mobile-main-menu-sections .sections-icon .icon,
              #htmlTag #mobile-main-menu-sections .selected-sections-icon .icon,
              #htmlTag #channel-tabbar ul li .mobile.dropdown-icon .icon
                  {background-image: url("images/{vb:stylevar imgdir_button}/css/ico_vb_responsive.svg");}
          
              #htmlTag #searchForm fieldset label {background-image: url("images/{vb:stylevar imgdir_button}/css/ico_vb_responsive.svg");}
              #htmlTag #searchForm fieldset .search-btn {background-image: url("images/{vb:stylevar imgdir_button}/css/ico_vb_responsive.svg");}
          
          #htmlTag .edit-mode .canvas-layout-container .widget-header .module-buttons .module-button-item.axd-edit-button span {
              background:transparent url("images/css/sprite_icons_{vb:stylevar textdirection}.png") no-repeat scroll -32px -64px;
          }
          #htmlTag .edit-mode .canvas-layout-container .widget-header .module-buttons .module-button-item.close-button span {
              background:transparent url("images/css/sprite_icons_{vb:stylevar textdirection}.png") no-repeat scroll 0 -64px;
          }
          #htmlTag .edit-mode .canvas-layout-container .widget-header .module-buttons .module-button-item.toggle-button.collapse span {
              background:transparent url("images/css/sprite_icons_{vb:stylevar textdirection}.png") no-repeat scroll -96px -64px;
          }
          #htmlTag .edit-mode .canvas-layout-container .widget-header .module-buttons .module-button-item.toggle-button.expand span {
              background:transparent url("images/css/sprite_icons_{vb:stylevar textdirection}.png") no-repeat scroll -128px -64px;
          }
          #htmlTag .edit-mode .dialog-container.dialog-box .dialog-content .icon.warning-icon {
              background: url("images/css/sprite_icons_{vb:stylevar textdirection}.png") no-repeat scroll 0 -96px transparent;
          }
          
          <vb:comment>Add the "posted" overlay</vb:comment>
          #htmlTag .posted .vb-icon-topic-status {
              background:
                  url("images/{vb:stylevar imgdir_button}/topic-posted-{vb:stylevar textdirection}.svg") no-repeat,
                  url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") -68px -240px;
          }
          #htmlTag .posted.read .vb-icon-topic-status {
              background:
                  url("images/{vb:stylevar imgdir_button}/topic-posted-{vb:stylevar textdirection}.svg") no-repeat,
                  url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") -100px -240px;
          }
          #htmlTag .posted.closed .vb-icon-topic-status {
              background:
                  url("images/{vb:stylevar imgdir_button}/topic-posted-{vb:stylevar textdirection}.svg") no-repeat,
                  url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") -132px -240px;
          }
          #htmlTag .posted.deleted .vb-icon-topic-status {
              background:
                  url("images/{vb:stylevar imgdir_button}/topic-posted-{vb:stylevar textdirection}.svg") no-repeat,
                  url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") -228px -240px;
          }
          
              media only screen and (max-width:767px) {
          
              }
              #htmlTag #mobile-main-menu .mobile-search .icon {
                  background-image: url("images/{vb:stylevar imgdir_button}/css/ico_vb_responsive.svg");
              }
          
          }
          
          media only screen and (max-width:479px) {
            #htmlTag .blogAdminActive:after {
              background-image: url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") !important;
            }
          }
          
          
          body {
              background: url(images/th/back.png);
              /*background-size: 100% auto;*/
              /*background-attachment: fixed;*/
          }
          * {
              border-radius: 0 !important;
          }
          th {
              font-weight: normal;
          }
          h2 {
              font-weight: normal;
          }
          #htmlTag #wrapper {
              min-width: 300px;
          }
          #htmlTag #main-navbar {
            min-width: 300px;
          }
          #htmlTag #footer-copyright {
            min-width: 300px;
          }
          #htmlTag #content {
              background-color: #F5F5F5;
          }
          
          /* Admin navbar */
          
          #htmlTag #main-navbar,
          #htmlTag #main-navbar-wrapper {
              height: 45px;
          }
          #htmlTag #main-navbar ul.main-nav {
              margin-{vb:stylevar right}: 0px;
          }
          #htmlTag #main-navbar ul li a {
              font-family: inherit;
              font-size: inherit;
              font-weight: normal;
              line-height: 45px;
          }
          #htmlTag #main-navbar ul li a:hover {
              text-decoration: none;
          }
          #htmlTag #main-navbar ul li li a:hover {
              text-decoration: none;
              color: inherit;
          }
          .ie9 #main-navbar ul li.sb-menu > a,
          .ie9 #main-navbar ul.secondary-nav > li > a {
              line-height:45px;
          }
          #htmlTag #main-navbar ul li a .icon {
              vertical-align: middle;
          }
          #htmlTag #main-navbar ul li .divider {
              display: none;
          }
          #htmlTag #main-navbar .username-container,
          #htmlTag #main-navbar .notifications-container {
              height: 45px !important;
          }
          #htmlTag #main-navbar .username-container.username-container-active,
          #htmlTag #main-navbar .username-container.b_menu__dropdown--active {
              background: transparent none;
          }
          #htmlTag #main-navbar .username-container > ul {
              border: 0;
              background-color: #FFFFFF;
          }
          #htmlTag #main-navbar .username-container ul.submenu li {
              border-bottom-color: #f5f5f5;
              border-top: 0;
          }
          #htmlTag #main-navbar .username-container ul.submenu li:hover {
              background-color: #f5f5f5;
          }
          #htmlTag #main-navbar .username-container ul.submenu li a {
              line-height: 35px;
          }
          #htmlTag #main-navbar > ul > li {
              line-height: 45px;
          }
          .ie9 #main-navbar > ul > li {
              line-height: 45px;
          }
          #htmlTag #main-navbar .lnkAdminCP {
              margin: 0;
              padding: 0 10px 0 0;
              height: 45px;
          }
          #htmlTag #main-navbar .lnkAdminCP a {
              font-size: inherit;
              line-height: 45px;
              padding: 0 5px 0 0;
          }
          #htmlTag #main-navbar .lnkAdminCP,
          #htmlTag #main-navbar .lnkAdminCP.h-disabled:hover {
              background: transparent none;
          }
          #htmlTag .notifications-count {
              display:inline-block;
              background: #FF5500 none;
              font: bold 11px/18px 'Noto Sans', sans serif;
              min-width: 10px;
              height: 18px;
              padding: 0 4px;
              top:15px;
              border: 0;
              -moz-border-radius: 9px !important;
              -webkit-border-radius: 9px !important;
              border-radius: 9px !important;
          }
          #htmlTag #lnkUsernameMenu,
          #htmlTag #lnkLoginSignupMenu {
              font-size: inherit;
              font-weight: normal;
          }
          #htmlTag #lnkUsernameMenu img {
              margin-top: 10px;
              border: 0;
          }
          #htmlTag #main-navbar #lnkUsernameMenu img.b-menu__username-avatar {
              max-width: 25px !important;
              max-height: 25px;
          }
          
          /*START Switch controls*/
          
          #htmlTag .switch-container {
              font-size: inherit;
              font-weight: normal;
              color: {vb:stylevar main_nav_admin_bar_text_disabled_color};
          }
          #htmlTag .edit-switch-container .switch-control {
              margin-top: 12px;
              height: 20px;
          }
          #htmlTag .switch-control .switch-label {
              line-height: 20px;
              background: {vb:stylevar main_nav_admin_bar_text_disabled_color};
              color: #FFFFFF;
          }
          #htmlTag .switch-control .switch-label.on {
              background: {vb:stylevar button_primary_background.color} none;
          }
          #htmlTag .switch-control .switch-label .switch-handle {
              background: #2A2834 none;
          }
          #htmlTag .switch-control .switch-label.off .switch-handle {
              border-{vb:stylevar right}: none;
          }
          #htmlTag .switch-control .switch-label.on .switch-handle {
              border-{vb:stylevar left}: none;
          }
          
          /* Header */
          
          #htmlTag #header {
              height:210px;
          }
          #htmlTag #header .toolbar {
              width: 310px;
              padding-{vb:stylevar right}: 0px;
          }
          
          /* Header search box */
          
          #htmlTag #header .toolbar > ul li {
              height:46px;
          }
          #htmlTag .search-container .search-box .search-term {
              height: 40px;
              border: none !important;
              padding-{vb:stylevar left}: 10px;
              padding-{vb:stylevar right}: 26px;
              padding-top: 3px;
              padding-bottom: 3px;
              width: 208px;
              background-color: #1a1a1a !important;
              box-shadow: none !important;
              color: {vb:stylevar header_search_input_text_color};
          }
          #htmlTag #header .search-container .search-box.search-btn-inside-box .search-btn {
              background: #1a1a1a none;
              border: none;
              width: 46px;
              height: 46px;
              padding: 4px 0px 0px 2px;
          }
          #htmlTag #header .search-container .search-box.search-btn-inside-box .search-btn:hover {
              background-color: {vb:stylevar button_primary_background.color};
          }
          #htmlTag #header .search-container .search-box.search-btn-inside-box .search-btn .vb-icon-search {
              opacity: .6;
          }
          #htmlTag #header .search-container .search-box.search-btn-inside-box .search-btn:hover .vb-icon-search {
              opacity: 1;
          }
          #htmlTag #header .search-container .vb-icon-arrow-down-small {
              background-position: -64px -16px;
              margin-top: 18px;
          }
          #htmlTag #header .search-container #searchPopupControl {
              height: 45px;
              {vb:stylevar right}: 50px;
              width: 25px;
          }
          #htmlTag #header .search-container .search-box.search-btn-inside-box .vertical-divider-left {
              {vb:stylevar right}: 75px;
              top: 10px;
              height: 26px;
              border-{vb:stylevar right}: 1px solid #454545;
          }
          #htmlTag .search-container #searchPopupContent,
          #htmlTag .search-result-header .PopupContent {
              top: 48px;
              border: 0;
              width: 98.5%;
              background-color: #FFFFFF;
              font-size: 13px;
          }
          #htmlTag .search-container .searchPopupBody,
          #htmlTag .search-result-header .PopupBody{
              padding: 15px;
          }
          #htmlTag #header .search-container #btnAdvSearch {
              font-weight: normal !important;
          }
          #htmlTag #header #searchPopupContent .h-clear + div {
              line-height: 40px;
          }
          #htmlTag #main-navbar ul.main-nav li.sb-menu a:active,
          #htmlTag #main-navbar ul.main-nav li.sb-menu a.selected,
          #htmlTag #main-navbar ul.secondary-nav li.sb-menu a:active,
          #htmlTag #main-navbar ul.secondary-nav li.sb-menu a.selected {
              height: auto;
          }
          
          /* Top navigation */
          
          #htmlTag #channel-tabbar {
              height: 60px !important;
              text-transform: inherit !important;
              border-bottom: {vb:stylevar header_tabbar_border} !important;
          }
          #htmlTag #channel-tabbar ul li {
              height: 60px !important;
              line-height: 60px !important;
          }
          #htmlTag #channel-tabbar ul li a {
              font-weight: normal !important;
              height: 60px !important;
              line-height: 60px !important;
              padding-left: 20px !important;
              padding-right: 20px !important;
              font-size: 16px !important;
              border-bottom: {vb:stylevar header_tabbar_border} !important;
          }
          #htmlTag #channel-tabbar ul li.current a,
          #htmlTag #channel-tabbar ul li.current a:hover,
          #htmlTag .edit-mode #channel-tabbar ul li.current a:hover {
              border-bottom: {vb:stylevar header_tab_border_active} !important;
              border-top: 0 !important;
              background: #440165;
          }
          #htmlTag #channel-tabbar ul li a:hover {
              border-bottom: solid 5px #4D376D !important;
              text-decoration: none !important;
          }
          #htmlTag #channel-subtabbar {
              height: 45px !important;
          }
          #htmlTag #channel-subtabbar ul li {
              height: 45px !important;
              line-height: 45px !important;
          }
          #htmlTag #channel-subtabbar ul li a {
              font-size: 13px !important;
              font-weight: normal !important;
              text-transform: inherit !important;
          }
          #htmlTag #channel-tabbar ul li a:before {
              content: "";
              display: inline-block;
              width: 16px;
              height: 16px;
              vertical-align: middle;
              margin-{vb:stylevar right}: 5px;
              background: url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") scroll no-repeat -684px -80px;
              opacity: .5;
          }
          #htmlTag #channel-tabbar ul li a:hover:before {
              opacity: 1;
          }
          #htmlTag #channel-tabbar ul li.current a:before {
              opacity: 1;
          }
          #htmlTag #channel-tabbar ul li a.navbar_home:before {
              background-position: -620px -80px;
          }
          #htmlTag #channel-tabbar ul li a.navbar_blogs:before {
              background-position: -636px -80px;
          }
          #htmlTag #channel-tabbar ul li a.navbar_articles:before {
              background-position: -652px -80px;
          }
          #htmlTag #channel-tabbar ul li a.navbar_social_groups:before {
              background-position: -668px -80px;
          }
          
          /* Breadcrumbs */
          #htmlTag div#breadcrumbs {
              margin: 0;
              padding: 0;
          }
          #htmlTag ul#breadcrumbs {
              margin: auto;
              font: 13px Noto Sans, sans-serif;
              background-color: transpare;
              padding: 20px 20px 10px;
          }
          
          /* The Loading Indicator */
          
          #htmlTag .b-ajax-loading-indicator {
              background-color: #fcf1ae;
              border: none;
              padding: 15px 20px;
              color: #555555;
              font-size: 16px;
              font-weight: normal;
              {vb:stylevar left}: 45%;
          }
          
          /* Forumhome */
          
          #htmlTag .page-title-widget .main-title,
          #htmlTag .canvas-layout-container div#canvas-layout-full.canvas-layout div.canvas-layout-row div.canvas-widget-list div.canvas-widget div.widget-header div.module-title h1.main-title {
              font-size: 26px;
              letter-spacing: -1px;
              font-weight: normal;
              margin-top: 20px;
              line-height: 1.5;
          }
          #htmlTag .page-title-widget .widget-header {
              margin: 0 !important;
          }
          #htmlTag .view-mode .widget-no-border > .widget-header {
              margin: 0 !important;
          }
          #htmlTag .page-title-widget .widget-header .module-title {
              margin: 0 !important;
          }
          #htmlTag .module-title h1 {
              font-size: 14px;
              font-weight: normal;
          }
          #htmlTag .module-title a .b-icon__rss {
              margin-{vb:stylevar left}: 10px;
          }
          
          /* Forum list */
          /*#htmlTag .l-row__fixed--right > .l-col__flex-6 {
              margin-{vb:stylevar right}: 305px;
          }*/
          #htmlTag .view-mode .widget-no-border {
              padding: 0 !important;
          }
          #htmlTag .canvas-layout-container .canvas-widget {
              margin: 0 0 20px;
              padding: 20px;
          }
          #htmlTag .canvas-layout-container .canvas-widget.collapsed {
              padding-top: 20px;
              padding-bottom: 0;
          }
          #htmlTag .canvas-layout-container .widget-header {
              margin: -20px;
              margin-bottom: 0;
              min-height: -30px;
          }
          #htmlTag .view-mode .widget-tabs .widget-tabs-nav {
              height: 50px;
              min-height: 50px !important;
              line-height: 50px !important;
          }
          #htmlTag .view-mode .widget-tabs .widget-tabs-nav .module-title {
              min-height: 50px;
              height: 50px;
          }
          #htmlTag .activity-stream-widget.widget-tabs .widget-header.widget-tabs-nav .ui-tabs-nav {
              height: 50px;
          }
          #htmlTag .widget-tabs .widget-tabs-nav li {
              height: 50px;
              line-height: 50px;
              margin: 0;
              border: 0;
          }
          #htmlTag .widget-tabs .widget-tabs-nav li a {
              padding: 0 20px !important;
          }
          #htmlTag .ui-tabs .ui-tabs-nav li a,
          #htmlTag .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
              outline: 0;
          }
          #htmlTag .conversation-toolbar-wrapper .conversation-toolbar,
          #htmlTag .forum-list-container .forum-list-header {
              height: 40px;
              line-height: 40px;
              font-size: 13px;
              color: #A7A7A7;
              background-image: none;
              background-color: {vb:customstylevar toolbar_background.color};
          }
          #htmlTag .subchannel-widget .widget-content .forum-list-container .forum-list-header {
              background: {vb:stylevar primary_module_subheader_background};
              height: 50px;
              color: #FFFFFF;
          }
          #htmlTag .forum-list-container {
              font-size: inherit;
          }
          #htmlTag .forum-list-container .category-header {
              height: 50px;
          }
          #htmlTag .forum-list-container .category-header td {
              padding: 0 20px;
              border-top: {vb:stylevar primary_module_subheader_border};
          }
          #htmlTag .forum-list-container .category-header .category {
              font-weight: normal;
          }
          #htmlTag .forum-list-container .forum-list-header th:first-child span {
              margin-{vb:stylevar left}: 20px;
          }
          #htmlTag .forum-item,
          #htmlTag .subforum-list {
              background-color: #ffffff;
          }
          
          #htmlTag .forum-list-container .forum-item td {
              padding: 20px 0;
          }
          #htmlTag .forum-list-container .forum-item td:first-child {
              padding-{vb:stylevar left}: 20px;
          }
          #htmlTag .forum-list-container .forum-item td:last-child {
              padding-{vb:stylevar right}: 20px;
          }
          #htmlTag .forum-list-container .forum-item .cell-forum .forum-title {
              font-size: 16px;
              font-weight: normal;
              letter-spacing: -0.02em;
          }
          #htmlTag .forum-list-container .forum-item .cell-forum .forum-desc {
              margin-{vb:stylevar left}: 38px;
              font-size: 13px;
              color: #a0a0a0;
          }
          #htmlTag .forum-list-container .forum-item .cell-forum .icon {
              width: 29px;
              height: 26px;
          }
          #htmlTag .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {
              padding-{vb:stylevar left}: 38px;
          }
          #htmlTag .forum-list-container .subforum-list .subforum-header {
              font-weight: normal;
              font-size: 13px;
          }
          #htmlTag .forum-list-container .subforum-list > td {
              padding-{vb:stylevar right}:20px;
              padding-{vb:stylevar left}:59px;
          }
          #htmlTag .forum-list-container .subforum-list .subforum-item .icon,
          #htmlTag .forum-list-container .forum-item.sub .cell-forum .icon {
              margin-top: 4px;
          }
          #htmlTag .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info + .h-margin-right-xl {
              margin-{vb:stylevar right}: 0;
          }
          #htmlTag .forum-list-container .forum-item.sub .cell-forum .forum-wrapper > .icon {
              background-position: -36px -208px;
          }
          #htmlTag .forum-list-container .forum-item.sub.new .cell-forum .icon {
              background-position: -4px -208px;
          }
          #htmlTag .post-date {
              color: #a0a0a0;
              font-size: inherit;
              margin-top: 5px;
          }
          #htmlTag .private-message-widget-layout .post-date {
               margin-top: 0 !important;
          }
          #htmlTag .avatar {
              border: 0;
          }
          #htmlTag .forum-list-divider {
              height: 20px;
              line-height: 20px;
          }
          #htmlTag .widget-content > .forum-list-container tr td.forum-list-divider {
              border: 0 none;
              height: 0;
              line-height: 0;
          }
          #htmlTag .widget-content > .forum-list-container tr:last-child td.forum-list-divider {
              height: 20px;
              line-height: 20px;
          }
          #htmlTag #forum-tab.dataLoaded {
              border-bottom: 0;
          }
          #htmlTag .list-footer {
              padding: 15px;
              background: #1a1a1a;
          }
          #htmlTag .conversation-empty {
              background: #333;
              font-weight: normal;
              font-size: 16px;
          }
          #htmlTag .conversation-toolbar-wrapper .toolbar-filter-overlay,
          #htmlTag .toolbar-wrapper .toolbar-filter-overlay {
              top: 42px;
              box-shadow: 0 8px 7px rgba(0, 0, 0, 0.15);
          }
          #htmlTag .conversation-toolbar-wrapper .toolbar-filter-overlay .filter-options-list > li,
          #htmlTag .toolbar-wrapper .toolbar-filter-overlay .filter-options-list > li {
              border-{vb:stylevar left}: 1px solid {vb:stylevar toolbar_dropdown_divider_color};
          }
          
          /* Latest activity */
          
          #htmlTag .conversation-list.stream-view .list-item {
              padding: 20px;
              box-sizing: border-box;
              margin: 0;
              background: #252525;
          }
          #htmlTag .conversation-list.stream-view .list-item-header .post-header .post-action-wrapper.ellipsis {
              max-height: inherit;
              line-height: 20px;
          }
          #htmlTag .b-post__title {
              font-weight: normal !important;
          }
          #htmlTag .b-post-sm__title {
              font-weight: normal;
          }
          #htmlTag .b-post__article-meta {
              font-size: 13px;
              color: inherit;
          }
          #htmlTag .b-post__label {
              border: 1px solid #C4C4C4;
              color: #555555;
              font-family: inherit;
              font-size: 13px;
              line-height: inherit;
              height: auto;
              background-color: #F5F5F5;
          }
          #htmlTag .conversation-list.stream-view .list-item-body .post-links,
          #htmlTag .pm-message-list .list-item .post-links {
              font-size: 13px;
              font-weight: normal;
              margin-top: 20px;
              text-transform: none;
          }
          #htmlTag .conversation-list .b-post .b-post__footer.h-margin-horiz-xl.h-padding-bottom-m {
              margin-left: 0;
              margin-right: 0;
              padding-bottom: 0;
          }
          #htmlTag .conversation-list .b-post .b-post__footer .h-margin-top-m.js-post-controls {
              margin-top: 10px;
          }
          #htmlTag .b-divider {
              border-style: solid;
              border-color: #F5F5F5;
          }
          #htmlTag .collapse > .vb-icon-toggle,
          #htmlTag .expand > .vb-icon-toggle {
              opacity: .8;
          }
          
          /* Widget styling */
          
          #htmlTag .module-title {
              margin: 15px 15px;
          }
          #htmlTag .view-mode .canvas-layout-container .canvas-widget.widget-no-border > .widget-header .module-title {
              margin: 0 0 8px;
          }
          
          /* Footer */
          
          #htmlTag #footer-tabbar {
              border-top: 0;
              height: auto;
              padding: 10px 0;
          }
          #htmlTag #footer-tabbar ul.nav-list li a {
              border-{vb:stylevar left}: none;
              text-transform: none;
          }
          #htmlTag .prefooter + #footer-tabbar {
              background-color: #503B5B;
          }
          #htmlTag #footer-copyright {
              margin: 20px 0;
              text-align:{vb:stylevar left};
              width: 60%
          }
          #htmlTag #footer-copyright a,
          #htmlTag #footer-copyright a:hover {
              color: #FFFFFF;
          }
          #htmlTag .footer-copyright-outer {
              margin: 0 auto;
              max-width: 1200px;
              min-width: 300px;
          }
          
          /* Buttons */
          
          #htmlTag .button,
          #htmlTag .ui-widget .button {
              height: 40px;
              min-width: 65px;
              padding: 10px 20px;
              font-size: 13px;
              font-weight: normal;
              line-height: 13px;
          }
          #htmlTag .b-button,
          #htmlTag .b-button:link,
          #htmlTag .b-button:visited {
              height: 40px;
              min-width: 65px;
              font-weight: normal;
              line-height: 32px;
              padding: 1px 20px;
              background-image: none !important;
          }
          #htmlTag .b-button.b-button--secondary.history-backbutton {
              line-height: 16px;
          }
          #htmlTag .b-button,
          #htmlTag .ui-widget .b-button {
              font-size: 13px;
          }
          
          /* Default hover/focus state */
          
          #htmlTag .b-button:focus,
          #htmlTag .b-button:hover {
              background-color: transparent;
              text-decoration: none;
          }
          #htmlTag .button.secondary:hover,
          #htmlTag .button.secondary:focus,
          #htmlTag .split-button .split-button-wrapper.button.secondary:hover,
          #htmlTag .split-button .split-button-wrapper.button.secondary:focus {
              background-color: transparent;
          }
          #htmlTag .b-button[disabled]:hover {
              color: {vb:stylevar button_disabled_text_color};
          }
          /* Selects */
          
          #htmlTag #footer-tabbar .selectBox-dropdown {
              border: 0;
              height: 35px;
          }
          #htmlTag #footer-tabbar .selectBox-dropdown .selectBox-label {
              height: 31px;
              line-height: 31px;
          }
          #htmlTag .selectBox-options LI A {
              line-height: 35px !important;
          }
          #htmlTag .selectBox-options LI A:hover {
              text-decoration: none;
          }
          #htmlTag .conversation-toolbar-wrapper .conversation-toolbar input[type="text"],
          #htmlTag #private-message-toolbar .pagenav input[type="text"] {
              background-image: none;
              background-color: #FFFFFF;
              border: 0;
          }
          #htmlTag .conversation-toolbar .toolbar-inline-mod .moderationmenu_container {
              border-{vb:stylevar left}: 0;
              height: 40px;
          }
          #htmlTag .conversation-toolbar-wrapper .conversation-toolbar .toolset-right > .toolbar-inline-mod {
              border-{vb:stylevar left}: 0;
              margin-top: -8px;
              height: 40px;
          }
          #htmlTag .conversation-toolbar .toolbar-inline-mod .moderationmenu_container .moderation-mainmenu .mainmenu.hover {
              height: 40px;
              border-{vb:stylevar right}: solid 1px #FFFFFF;
          }
          #htmlTag .conversation-toolbar .toolbar-inline-mod .moderationmenu_container .moderation-mainmenu .mainmenu.administrative + .mainmenu.moderation.hover {
              border-{vb:stylevar left}: solid 1px #FFFFFF;
          }
          
          /* Moderator thread menu */
          
          #htmlTag .conversation-toolbar .toolbar-inline-mod .moderationmenu_container .moderation-mainmenu .mainmenu.moderation .submenu {
              {vb:stylevar right}: -1px;
          }
          #htmlTag .mainmenu .submenu {
              border: 0;
          }
          #htmlTag .conversation-toolbar .toolbar-inline-mod .moderationmenu_container .moderation-mainmenu .mainmenu .submenu > li,
          #htmlTag .conversation-toolbar .toolbar-inline-mod .moderationmenu_container .moderation-mainmenu [class*="-submenu"] li.b-comp-menu-dropdown__content-item {
              border-top-style: solid;
              border-top-color: #F5F5F5;
          }
          #htmlTag .conversation-toolbar .toolbar-inline-mod .moderationmenu_container .moderation-mainmenu .mainmenu .submenu.splitmenu > li.col1 {
              border-{vb:stylevar right}: 1px solid #F5F5F5;
          }
          #htmlTag .conversation-toolbar .toolbar-inline-mod .moderationmenu_container .moderation-mainmenu .mainmenu .submenu.splitmenu > li.col2.last-item,
          #htmlTag .conversation-toolbar .toolbar-inline-mod .moderationmenu_container .moderation-mainmenu .mainmenu .submenu.splitmenu > li.col2.last-child {
              border-bottom: 1px solid #F5F5F5;
          }
          #htmlTag .conversation-toolbar .toolbar-inline-mod .moderationmenu_container .moderation-mainmenu .mainmenu .submenu.splitmenu > li a,
          #htmlTag .conversation-toolbar .toolbar-inline-mod .moderationmenu_container .moderation-mainmenu .mainmenu .submenu > li > a,
          #htmlTag .conversation-toolbar .toolbar-inline-mod .moderationmenu_container .moderation-mainmenu [class*="-submenu"] li.b-comp-menu-dropdown__content-item a {
              color: #555555;
              padding: 8px 15px;
              font-size: 13px;
          }
          #htmlTag .mainmenu .submenu li a:hover,
          .moderationmenu_container .moderation-mainmenu [class*="-submenu"] li.b-comp-menu-dropdown__content-item a:hover {
              background-color: #F5F5F5;
          }
          
          /* Component containers
          ----------------------------------*/
          
          #htmlTag .ui-widget-content.ui-dialog {
              background: #252525 none;
              border: 0;
          }
          #htmlTag .ui-widget-content.widget-tabs {
              background: transparent none;
          }
          #htmlTag .ui-dialog {
              padding: 0;
          }
          #htmlTag .ui-dialog .ui-widget-header {
              background: {vb:stylevar module_header_background.color} none;
          }
          #htmlTag .ui-dialog .ui-dialog-titlebar {
              padding: 0 20px;
              border: 0;
              color: #FFFFFF;
              font-size: 14px;
              font-weight: normal;
              line-height: 46px;
              height: 50px;
          
          }
          #htmlTag .site-logo-dialog-container .ui-dialog-titlebar {
              overflow: hidden;
          }
          #htmlTag .ui-dialog .ui-dialog-titlebar-close {
              {vb:stylevar right}: 10px;
              background-color: transparent;
              border: solid 1px transparent;
          }
          #htmlTag .ui-dialog .ui-dialog-titlebar-close.ui-state-hover {
              border-color: transparent;
              background: transparent none;
          }
          #htmlTag .ui-dialog .ui-dialog-titlebar-close span {
              background-image: url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg");
              background-position: -544px -80px;
          }
          #htmlTag .ui-dialog .ui-dialog-content {
              padding: 20px;
          }
          #htmlTag .ui-dialog .ui-dialog-content h4 {
              font-size: 16px;
              font-weight: normal;
          }
          #htmlTag .ui-dialog .blog-form-row {
              margin: 20px 0 0;
          }
          #htmlTag .ui-dialog .blog-form-row .row-content {
              margin-{vb:stylevar left}: 40px;
          }
          #htmlTag .ui-dialog #imgUrl {
              padding: 0 10px;
              height: 38px;
              line-height: 38px;
          }
          #htmlTag .ui-dialog #btnSGIconUrlSubmit {
              float: none;
          }
          #htmlTag .canvas-widget.blogadmin-widget .title-bar {
              height: 40px;
              border: 0;
          }
          #htmlTag .canvas-widget.blogadmin-widget .title-bar a.button,
          #htmlTag .canvas-widget.blogadmin-widget .title-bar a.b-button {
              border: 2px solid {vb:stylevar button_primary_background.color};
              background-color: {vb:stylevar button_primary_background.color};
              color: #FFFFFF;
              height: 22px;
              padding: 0 20px;
              margin-{vb:stylevar left}: 10px;
              margin-top: 10px;
              line-height: 15px;
          }
          #htmlTag .canvas-widget.blogadmin-widget .title-bar a.button:hover,
          #htmlTag .canvas-widget.blogadmin-widget .title-bar a.b-button:hover {
              background-color: transparent;
              color: {vb:stylevar button_primary_background.color};
              text-decoration: none;
          }
          
          /* Topic list container */
          
          #htmlTag .topic-list-container .topic-list-header {
              height: 50px;
              line-height: 50px;
              font-size: inherit;
          }
          #htmlTag .topic-list-container .topic-list {
              background: {vb:stylevar module_content_background};
          }
          #htmlTag .topic-list-container .topic-list-header .header-topic {
              padding-{vb:stylevar left}: 20px;
          }
          #htmlTag .topic-list-container .topic-list .topic-item td {
              padding: 20px;
              border-bottom: {vb:stylevar module_search_list_item_border};
              border-top: 0;
          }
          #htmlTag .topic-list-container .topic-list .topic-item.unapproved td,
          #htmlTag .topic-list-container .topic-list .topic-item.unapproved td {
              border-bottom: 0;
          }
          #htmlTag .topic-list-container .topic-list .topic-item .cell-topic {
              padding-{vb:stylevar left}: 20px;
          }
          #htmlTag .topic-list-container .topic-list .topic-item .cell-count {
              font-size: inherit;
          }
          #htmlTag .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper {
              margin-{vb:stylevar left}: 8px;
              font-weight: normal;
              font-size: 16px;
          }
          #htmlTag .cell-topic .vb-icon-topic-status {
              margin-top: 5px;
              margin-bottom: -5px;
          }
          #htmlTag .topic-list-container .topic-list .topic-item.unapproved {
              background: #E2F0CE;
          }
          #htmlTag .topic-list-container .topic-list .topic-item.deleted {
              background: #EEEEEE;
          }
          #htmlTag .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper .go-to-first-unread:hover,
          #htmlTag .topic-list-container .topic-list .topic-item .cell-lastpost .go-to-last-post:hover {
              text-decoration: none;
          }
          #htmlTag .conversation-toolbar-wrapper .conversation-toolbar .toolset-left > li .button,
          #htmlTag .conversation-toolbar-wrapper .conversation-toolbar .toolset-left > li .b-button {
              height: 22px !important;
              padding: 0 20px;
              border: solid 2px {vb:stylevar button_primary_background.color};
              line-height: 13px !important;
          }
          #htmlTag .conversation-toolbar-wrapper .conversation-toolbar .toolset-left > li .button:hover,
          #htmlTag .conversation-toolbar-wrapper .conversation-toolbar .toolset-left > li .b-button:hover {
              background-color: transparent;
              color: {vb:stylevar button_primary_background.color} !important;
          }
          #htmlTag .conversation-showmore {
              background-color: #1a1a1a;
              border: 0;
          }
          
          /* Form inputs */
          
          #htmlTag .b-form-input__input {
              height: 32px;
              padding: 3px 8px;
          }
          #htmlTag .b-form-input__input + *[type="button"] {
              vertical-align: baseline;
          }
          #htmlTag .b-form-input__input--full {
              height: 40px;
          }
          #htmlTag .textbox[type="text"] {
              height: 36px;
          }
          #htmlTag .pagenav-controls .textbox[type="text"],
          #htmlTag .toolbar-search-form .textbox[type="text"] {
              height: 22px;
              background: #1a1a1a;
          }
          
          /* Dropdown menu */
          
          #htmlTag .selectBox-dropdown-menu {
              border: solid 1px {vb:stylevar form_dropdown_border.color}; /* should be the same border width as .selectBox-dropdown */
          }
          #htmlTag .selectBox-dropdown {
              height: 40px;
              box-sizing: border-box;
          }
          #htmlTag .selectBox-dropdown .selectBox-label {
              height: 34px;
              line-height: 34px;
          }
          #htmlTag .selectBox-dropdown:focus,
          #htmlTag .selectBox-dropdown:focus .selectBox-arrow {
              border-color: {vb:stylevar form_dropdown_border.color};
          }
          
          /* Editor toolbar */
          
          .b-toolbar__item {
              border-{vb:stylevar right}: 0;
          }
          
          /* Popups */
          
          #htmlTag .dialog-container {
              border: 0;
          }
          #htmlTag .dialog-container.ui-dialog .ui-dialog-titlebar {
              border-bottom: none;
              background:{vb:stylevar module_header_background};
              color: #FFFFFF;
              font-size: 13px;
              height: 50px;
              line-height: 50px;
              font-weight: normal;
              padding-left: 20px;
              padding-right: 20px;
          }
          #htmlTag .photo-selector-wrapper .photo-selector-galleries .photo-item .photo-checkbox input {
              top: 5px !important;
              {vb:stylevar right}: 5px !important;
          }
          
          /* Date picker */
          
          #htmlTag .ui-datepicker {
              background-color: #252525;
              padding: 0 !important;
              -moz-box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.3);
              -webkit-box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.3);
              box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.3);
          }
          #htmlTag .ui-datepicker .ui-widget-header {
              background-color: #EEEEEE;
              background-image: none;
              border: 0;
              padding: 5px 0 !important;
              font-weight: normal;
          }
          #htmlTag .ui-datepicker-calendar a {
              background-image: none;
              text-align: center;
              background-color: #F5F5F5;
          }
          #htmlTag .ui-datepicker-calendar a:hover {
              background-color: {vb:stylevar module_header_background.color};
              background-image: none;
              color: #252525 !important;
              border-color: {vb:stylevar module_header_background.color};
              text-decoration: none;
          }
          .ui-state-default,
          .ui-widget-content .ui-state-default,
          .ui-widget-header .ui-state-default {
              background-image: none;
              background-color: #F5F5F5;
          }
          #htmlTag .ui-state-highlight,
          #htmlTag .ui-widget-content .ui-state-highlight,
          #htmlTag .ui-widget-header .ui-state-highlight,
          #htmlTag .ui-datepicker-calendar .ui-datepicker-days-cell-over .ui-state-default {
              background: none repeat scroll 0 0 {vb:stylevar button_primary_background.color} !important;
              border: 1px solid {vb:stylevar button_primary_background.color} !important;
              color: #252525 !important;
          }
          #htmlTag .ui-datepicker-unselectable.ui-state-disabled span {
              background-color: #252525;
              border: 0;
          }
          #htmlTag .ui-datepicker-calendar .ui-state-default.ui-state-active:hover {
              color: inherit !important;
          }
          #htmlTag .b-datepicker.b-poll-fieldset__datepicker-container input[type="text"] {
              height: 40px; 
          }
          
          /* Editor Toolbar */
          
          #htmlTag .cke_toolgroup,
          #htmlTag .cke_combo_button {
              -moz-border-radius:0px !important;
              -webkit-border-radius:0px !important;
              border-radius:0px !important;
              background-color: #FBFBFB !important;
              border: 1px solid #E4E4E4 !important;
              background-image: none !important;
          }
          #htmlTag a.cke_button_off:hover, 
          #htmlTag a.cke_button_off:focus, 
          #htmlTag a.cke_button_off:active, 
          #htmlTag a.cke_button_disabled:hover, 
          #htmlTag a.cke_button_disabled:focus, 
          #htmlTag a.cke_button_disabled:active,
          #htmlTag .cke_combo_off a.cke_combo_button:active,
          #htmlTag .cke_combo_on a.cke_combo_button,
          #htmlTag .cke_button_on {
              background: #E4E4E4 none !important;
              -webkit-box-shadow: none !important;
              -moz-box-shadow: none !important;
              box-shadow: none !important;
          }
          #htmlTag .cke_panel {
              -moz-border-radius:0px !important;
              -webkit-border-radius:0px !important;
              border-radius:0px !important;
              border: solid 1px #E4E4E4 !important;
          }
          
          /* CKE editor */
          
          #htmlTag .cke_reset_all,
          #htmlTag .cke_reset_all * {
              /*font-size: 13px !important;*/
              font-family: "Noto Sans", sans-serif;
          }
          #htmlTag .cke_dialog_body {
              border: solid 1px #E4E4E4 !important;
              -moz-border-radius: 0px !important;
              -webkit-border-radius: 0px !important;
              border-radius: 0px !important;
              -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2) !important;
              -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2) !important;
              box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2) !important;
              /* For IE 8 */
              -ms-filter: "progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC')";
          }
          #htmlTag .cke_dialog_title {
              background: {vb:stylevar module_header_background.color} none !important;
              border-bottom: 0 !important;
              -moz-border-radius: 0px !important;
              -webkit-border-radius: 0px !important;
              border-radius: 0px !important;
              color: #FFFFFF !important;
              font-size: 13px !important;
              font-weight: normal !important;
              padding: 16px 12px !important;
              -webkit-box-shadow: none !important;
              -moz-box-shadow: none !important;
              box-shadow: none !important;
              text-shadow: none !important;
              margin: -1px -1px 0 !important;
          }
          #htmlTag .cke_dialog_close_button {
              background: transparent url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}") no-repeat scroll -192px -130px !important;
          }
          #htmlTag .cke_ltr .cke_dialog_close_button {
              top: 14px;
              {vb: stylevar right}: 11px;
          }
          #htmlTag .cke_dialog_contents_body {
              padding: 6px 12px 0 !important;
          }
          #htmlTag .cke_dialog_ui_vbox_child {
              padding: 6px 0 !important;
          }
          #htmlTag .cke_dialog iframe.cke_pasteframe {
              border: 1px solid #E4E4E4 !important;
              -moz-border-radius: 0px !important;
              -webkit-border-radius: 0px !important;
              border-radius: 0px !important;
          }
          #htmlTag .cke_dialog_footer {
              background: none repeat scroll 0 0 #FFFFFF !important;
              border: 0 none !important;
              -moz-border-radius: 0px !important;
              -webkit-border-radius: 0px !important;
              border-radius: 0px !important;
              -webkit-box-shadow: none !important;
              -moz-box-shadow: none !important;
              box-shadow: none !important;
              outline: 0 !important;
              padding-bottom: 7px !important;
          }
          #htmlTag a.cke_dialog_ui_button_ok {
              color: #FFFFFF;
              text-shadow: none;
          }
          #htmlTag a.cke_dialog_ui_button {
              -moz-border-radius: 0px !important;
              -webkit-border-radius: 0px !important;
              border-radius: 0px !important;
              -webkit-box-shadow: none !important;
              -moz-box-shadow: none !important;
              box-shadow: none !important;
              height: 40px !important;
              line-height: 34px !important;
              min-width: 75px !important;
              outline: 0 none !important;
              padding: 0 12px !important;
              font-weight: bold !important;
              -moz-box-sizing: border-box !important;
              -webkit-box-sizing: border-box !important;
              box-sizing: border-box !important;
              -webkit-transition: all 0.3s ease;
              -moz-transition: all 0.3s ease;
              -ms-transition: all 0.3s ease;
              -o-transition: all 0.3s ease;
              transition: all 0.3s ease;
              background: none repeat scroll 0 0 #EBEBEB !important;
              border: 3px solid #EBEBEB !important;
              font-weight: normal !important;
          }
          #htmlTag a.cke_dialog_ui_button:hover {
              text-decoration: none;
              border: 3px solid #EBEBEB !important;
              background-color: transparent !important;
          }
          #htmlTag a.cke_dialog_ui_button span {
              text-shadow: none !important;
          }
          #htmlTag a.cke_dialog_ui_button_ok {
              background: none repeat-x scroll 0 0 {vb:stylevar button_primary_background.color} !important;
              border: solid 3px {vb:stylevar button_primary_background.color} !important;
              color: #FFFFFF !important;
              margin-{vb: stylevar right}: 5px !important;
          }
          #htmlTag a.cke_dialog_ui_button_ok:hover {
              background-color: #FFFFFF !important;
              color: {vb:stylevar button_primary_background.color} !important;
              border: solid 3px {vb:stylevar button_primary_background.color} !important;
          }
          #htmlTag a.cke_dialog_ui_button_ok:focus, 
          #htmlTag a.cke_dialog_ui_button_ok:active, 
          #htmlTag a.cke_dialog_ui_button_cancel:focus, 
          #htmlTag a.cke_dialog_ui_button_cancel:active {
              border-width: 3px !important;
              padding: 0 12px !important;
              min-width: 75px !important;
          }
          #htmlTag a.cke_dialog_ui_button_ok:focus span,
          #htmlTag a.cke_dialog_ui_button_ok:active span,
          #htmlTag a.cke_dialog_ui_button_cancel:focus span,
          #htmlTag a.cke_dialog_ui_button_cancel:active span {
              padding: 0 12px !important;
          }
          #htmlTag .cke_dialog .cke_resizer {
              margin-top: 30px !important;
          }
          #htmlTag select.cke_dialog_ui_input_select,
          #htmlTag input.cke_dialog_ui_input_text,
          #htmlTag input.cke_dialog_ui_input_password,
          #htmlTag textarea.cke_dialog_ui_input_textarea {
              height: 40px !important;
              line-height: 32px !important;
              padding: 5px 6px !important;
              -webkit-box-shadow: none !important;
              -moz-box-shadow: none !important;
              box-shadow: none !important;
              -moz-border-radius: 0px !important;
              -webkit-border-radius: 0px !important;
              border-radius: 0px !important;
              border: 1px solid #E4E4E4 !important;
          }
          #htmlTag a.cke_dialog_tab {
              -moz-border-radius: 0px !important;
              -webkit-border-radius: 0px !important;
              border-radius: 0px !important;
              background: #EEEEEE none !important;
          }
          #htmlTag a.cke_dialog_tab:hover {
              background: #FFFFFF none !important;
              text-decoration: none !important;
          }
          #htmlTag a.cke_dialog_tab_selected {
              background: #FFFFFF none !important;
          }
          #htmlTag .cke_dialog_footer_buttons {
              margin: 5px 10px 5px 0 !important;
          }
          #htmlTag .cke_dialog_footer_buttons a.cke_dialog_ui_button span {
              font-weight: normal !important;
          }
          
          /* tag editor */
          
          #htmlTag .add-tag-link {
              font-weight: normal;
          }
          
          /* Notices */
          
          #htmlTag .notices {
              overflow: hidden;
              background-color: #1a1a1a;
              margin: auto;
              padding: 5px 5px 0;
          }
          #htmlTag .notice {
              padding: 10px 20px;
              margin-bottom: 10px;
              font-size: 14px;
              font-weight: normal;
          }
          
          
          /* Topic */
          
          #htmlTag .conversation-toolbar-wrapper .conversation-toolbar .toolbar-search .search-container .search-btn,
          #htmlTag .faq-search .search-btn {
              background-image: none;
              background-color: {vb:stylevar module_header_background.color};
              width: 22px;
              {vb:stylevar right}: 3px;
          }
          #htmlTag .conversation-toolbar-wrapper .conversation-toolbar .toolbar-search .search-container .search-btn:hover,
          #htmlTag .faq-search .search-btn:hover {
              background-color: {vb:stylevar button_primary_background.color};
          }
          #htmlTag .conversation-toolbar .toolbar-inline-mod .moderationmenu_container .moderation-mainmenu .mainmenu.administrative + .mainmenu.moderation {
              background-image: none;
          }
          #htmlTag .conversation-toolbar-wrapper .filtered-by {
              background-color: #FFFFFF;
          }
          #htmlTag .b-post {
              margin-top: 20px;
          }
          #htmlTag .b-post.inlinemod_highlight,
          #htmlTag .b-post.inlinemod_highlight .b-post__body {
              background-color: #FFFCDC;
          }
          #htmlTag .b-post--unapproved,
          #htmlTag .b-post--unapproved .b-post__body {
              background: {vb:stylevar postbit_unapproved_background};
          }
          #htmlTag .b-post--deleted,
          #htmlTag .b-post--deleted .b-post__body {
              background: {vb:stylevar postbit_deleted_background};
          }
          #htmlTag .b-post__unpublish-info,
          #htmlTag .b-post__unpublish-info .b-post__date {
              font-size: 13px;
          }
          #htmlTag .b-post__arrow {
              display: none;
          }
          #htmlTag .b-meter__bar--selected {
              background-image: none;
              background-color: #5EBC08;
          }
          #htmlTag .b-post__count,
          #htmlTag .b-post__timestamp {
              font-size: inherit;
          }
          #htmlTag .h-text-size--11 {
              font-size: inherit;
          }
          
          .b-post__timestamp {
              font-size: 11px;
          }
          #htmlTag .b-post .b-post__label {
              border: none;
              background-color: {vb:stylevar module_header_background.color};
              color: #FFFFFF;
          }
          #htmlTag .bbcode_container .bbcode_quote {
              border: solid 1px #EDEDED;
          }
          #htmlTag .bbcode_container .bbcode_quote .bbcode_quote,
          #htmlTag .bbcode_container .bbcode_quote .bbcode_quote .bbcode_quote .bbcode_quote {
              background-color: #FBFBFB;
          }
          #htmlTag .bbcode_container .bbcode_quote .bbcode_quote .bbcode_quote,
          #htmlTag .bbcode_container .bbcode_quote .bbcode_quote .bbcode_quote .bbcode_quote .bbcode_quote {
              background: {vb:stylevar bbcode_quote_background};
          }
          #htmlTag .conversation-content-widget .list-container .list-item.unapproved .list-item-body-wrapper,
          #htmlTag .album-widget .list-container .list-item.unapproved {
              background-color: transparent;
          }
          #htmlTag .conversation-list.stream-view .list-item-header .avatar {
              margin-{vb:stylevar left}: 0;
          }
          #htmlTag .list-container .list-item .list-item-body {
              padding: 20px 0;
          }
          #htmlTag .pagenav-container .pagenav a.button,
          #htmlTag .pagenav-container .pagenav a.b-button {
              height: auto;
              line-height: 22px;
              min-width: 22px;
              padding: 1px 5px;
          }
          #htmlTag .pagenav-container .pagenav a.button:hover,
          #htmlTag .pagenav-container .pagenav a.b-button:hover {
              text-decoration: none;
          }
          
          /* Comments */
          
          #htmlTag .b-post__footer ~ .b-comments {
              margin-top: 20px;
          }
          #htmlTag .b-post.b-comment {
              margin-top: 0;
              border-bottom: solid 1px #303030;
          }
          #htmlTag .b-post.b-comment .b-post__footer {
              padding-bottom: 10px !important;
          }
          #htmlTag .b-comments__header,
          #htmlTag .b-comments__footer {
              border: 0;
              border-bottom: solid 1px #303030;
              padding: 12px 10px;
              font-size: inherit;
              line-height: inherit;
              font-weight: normal;
          }
          #htmlTag .b-comments .js-comments__total {
              margin-{vb:stylevar left}: 0;
          }
          
          /* Give infraction dialog */
          
          #htmlTag .give-infraction-dialog .blockrow-head {
              color: #FFFFFF;
              font-weight: normal;
              font-size: 13px;
              padding: 0 10px;
              line-height: 50px;
          }
          #htmlTag .give-infraction-dialog .blockrow-body {
              padding: 10px 0;
          }
          #htmlTag .infraction-send-pm .b-toolbar {
              border: solid 1px #DADADA;
          }
          #htmlTag .infraction-send-pm .b-editor {
              border: solid 1px #DADADA;
              border-top: 0;
          }
          
          /* Preview dialog */
          
          #htmlTag #preview-overlay .conversation-list.stream-view .list-item {
              padding: 0;
          }
          
          /* Move post dialog */
          
          #htmlTag .move-posts-form .blockhead.move-posts-header,
          #htmlTag .copy-posts-body .blockhead.move-posts-header {
              margin-bottom: 10px;
          }
          #htmlTag .move-posts-form .blockrow > h4,
          #htmlTag .copy-posts-body .blockrow > h4 {
              margin-bottom: 10px;
          }
          #htmlTag .move-posts-form p.description,
          #htmlTag .copy-posts-body p.description {
              margin-top: 5px;
              color: #75899c;
          }
          #htmlTag .move-posts-form input[type="text"],
          #htmlTag .copy-posts-body input[type="text"] {
              height: 40px;
              line-height: 40px;
              margin-{vb:stylevar left}: 5px;
              padding: 0 10px;
          }
          
          /* Conversation toolbar selects */
          
          #htmlTag .conversation-toolbar .selectBox-dropdown {
              height: 28px;
          }
          #htmlTag .conversation-toolbar .selectBox-label {
              height: 22px;
              line-height: 22px;
          }
          #htmlTag .search-result-header .resultPopupControl {
              height: 30px;
              line-height: 30px;
          }
          #htmlTag .search-result-header .resultPopupControl.open {
              height: 30px;
              background-color: #FFFFFF;
              border-color: #FFFFFF;
          }
          #htmlTag .search-result-header .PopupContent {
              top: 26px;
          }
          #htmlTag .search-result-header .search-controls .PopupContent .searchPopupBody .button.search-btn {
              background-color: {vb:stylevar body_background.color} !important;
              height: 36px !important;
              margin-{vb:stylevar right}: 2px !important;
              margin-top: -12px !important;
              min-width: inherit !important;
              padding: 3px !important !important;
              width: 36px !important;
              padding: 0;
          }
          #htmlTag .search-result-header .search-controls .PopupContent .searchPopupBody .button.search-btn:hover {
              background-color: {vb:stylevar button_primary_background.color} !important;
          }
          #htmlTag .searchConfigFields .autocomplete-container,
          #htmlTag .searchPopupBody .autocomplete-container {
              padding-bottom: 10px !important;
              padding-top: 10px !important;
          }
          #htmlTag .autocomplete-container {
              border-color: #DADADA !important;
          }
          
          /* WOL */
          
          #htmlTag .canvas-layout-container .wollist-widget .widget-header {
              height: 50px;
          }
          #htmlTag .canvas-layout-container .wollist-widget .user-counts {
              margin-top: 20px;
          }
          #htmlTag .canvas-layout-container .wollist-widget table {
              width: 100%;
              margin-top: 20px;
          }
          #htmlTag .canvas-layout-container .wollist-widget th {
              background-color: #252525;
              height: 37px;
          }
          #htmlTag .canvas-layout-container .wollist-widget .b-table__row--header {
              padding: 0 10px;
              height: 50px;
          }
          #htmlTag .canvas-layout-container .wollist-widget .b-table__cell--header {
              font-size: inherit;
              font-weight: normal;
              line-height: 50px;
          }
          #htmlTag .wollist-widget .b-table .b-table-row {
          
              background-color: #252525;
              padding: 20px 10px;
              margin-bottom: -4px;
          }
          #htmlTag .canvas-layout-container .wollist-widget .vb-icon-wrapper {
              height: 50px;
          }
          #htmlTag .canvas-layout-container .wollist-widget .vb-icon-wrapper .vb-icon-triangle-down-wide {
              background-position: -71px -41px !important;
          }
          #htmlTag .canvas-layout-container .wollist-widget .vb-icon-wrapper .vb-icon-triangle-up-wide {
              background-position: -47px -42px !important;
          }
          
          /* Member list */
          
          #htmlTag .memberlist-widget .b-memberlist__letterfilter {
              margin-bottom: 20px;
          }
          #htmlTag .b-memberlist__letterfilter label {
              border-color: transparent;
              padding: 2px 4px;
          }
          #htmlTag .memberlist-widget .b-table .b-table__row--header {
              min-height: 50px;
              padding: 0 10px;
          }
          #htmlTag .memberlist-widget .b-table .b-table__row--header div > span {
              line-height: 50px;
          }
          #htmlTag .memberlist-widget .b-table .b-table__cell--header {
              font-size: inherit;
              font-weight: inherit;
          }
          #htmlTag .memberlist-widget .b-table .b-table__row,
          #htmlTag .wollist-widget .b-table .b-table__row {
              padding: 20px;
              background-color: #252525;
              }    
          
          #htmlTag .memberlist-widget .b-table .b-table-row .memberAvatar {
              padding-{vb:stylevar right}: 10px;
              width: 70px;
          }
          #htmlTag .memberlist-widget .vb-icon-triangle-down-wide {
              background-position: -71px -40px !important;
          }
          #htmlTag .memberlist-widget .vb-icon-triangle-up-wide {
              background-position: -46px -40px !important;
          }
          
          /* Blogs */
          
          #htmlTag .list-container .list-header {
              font-size: inherit;
              font-weight: inherit;
              height: 50px;
              line-height: 50px;
          }
          #htmlTag #memberblog-tab .list-container.dataLoaded {
              border-bottom: 0;
          }
          #htmlTag .blog-channel-content-widget .button.follow-btn {
              background-color: {vb:stylevar button_secondary_background.color};
              border-color: {vb:stylevar button_secondary_background.color};
              color:{vb:stylevar button_secondary_text_color};
          }
          #htmlTag .blog-channel-content-widget .button.follow-btn:hover {
              background-color: transparent;
          }
          #htmlTag .blog-channel-content-widget .button.follow-btn.isSubscribed,
          #htmlTag .blog-channel-content-widget .b-button.b-button--follow.isSubscribed,
          #htmlTag .blog-channel-content-widget .b-button.b-button--follow.isSubscribed:hover,
          #htmlTag .blog-channel-content-widget .b-button.b-button--follow:hover {
              background: {vb:stylevar button_special_background};
              border: {vb:stylevar button_special_border};
              color: {vb:stylevar button_special_text_color};
          }
          #htmlTag .blog-channel-content-widget .button.unfollow-btn.isSubscribed,
          #htmlTag .blog-channel-content-widget .b-button.b-button--unfollow.isSubscribed,
          #htmlTag .blog-channel-content-widget .b-button.b-button--unfollow.isSubscribed:hover {
              background-color: transparent;
              border-color: {vb:stylevar button_secondary_background.color};
              color:{vb:stylevar button_secondary_text_color};
          }
          #htmlTag .mainmenu .submenu.administrative-submenu li a,
          #htmlTag .mainmenu .submenu.administrative-submenu li a:hover {
              color: #555555;
          }
          #htmlTag .blog-summary-details h4 {
              font-weight: normal;
              font-size: 16px;
              margin-bottom: 10px;
          }
          #htmlTag .blog-summary-details h4 span {
              font-weight: bold;
          }
          #htmlTag .profile-sidebar-widget .profileContainer .profile-photo-wrapper .edit-profile,
          #htmlTag .groupSummaryContainer .sg-icon-wrapper .editGroupIcon,
          #htmlTag .blogSummaryContainer .blog-icon-wrapper .editBlogIcon {
              font-weight: normal;
              font-size: inherit;
              padding: 10px;
          }
          #htmlTag .profile-sidebar-widget .profileContainer .profile-photo-wrapper .edit-profile:hover,
          #htmlTag .groupSummaryContainer .sg-icon-wrapper .editGroupIcon:hover,
          #htmlTag .blogSummaryContainer .blog-icon-wrapper .editBlogIcon:hover {
              text-decoration: none !important;
          }
          #htmlTag .blogAdminLeft li {
              font-weight: normal;
          }
          #htmlTag .blogAdminLeft li a {
              padding: 15px 20px;
          }
          #htmlTag .blogAdminRight {
              width: 80%;
              background-color: #252525;
              min-height: 400px;
          }
          #htmlTag .blogAdminRight .blog-form-row .row-title {
              font-weight: normal;
              font-size: 16px;
          }
          #htmlTag .blogAdminRight .blog-form-row .row-content input[type="text"] {
              height: 40px;
              padding: 3px 10px;
          }
          
          #htmlTag .blogAdminRight .blog-form-row .row-content .autocomplete-container input[type="text"] {
              height: auto;
              margin-top: -3px !important;
              padding: 3px 0;
          }
          #htmlTag .blogAdminRight .sidebar-modules-container .widget {
              height: 50px;
              line-height: 50px;
              color: #FFFFFF;
          }
          #htmlTag .blogAdminRight .sidebar-modules-container .widget .module-title {
              margin: 0;
          }
          #htmlTag .blogAdminRight .sidebar-modules-container .widget .module-controls label input {
              margin-top: 18px;
          }
          #htmlTag .blogadmin-widget .widget-content > h3 {
              font-size: 20px;
              font-weight: normal;
              margin-bottom: 15px;
          }
          #htmlTag .contributors-list th,
          #htmlTag .blogAdmin-stats-table th {
              height: 50px;
              padding: 0 10px;
          }
          #htmlTag .blogAdminRight .conversation-toolbar .button-set .secondary {
              border-color: #D7D7D7 !important;
              background-color: #D7D7D7;
          }
          #htmlTag .blogAdminRight .conversation-toolbar .toolset-left > li .secondary:hover {
              background-color: transparent;
              color: #252C2F !important;
          }
          #htmlTag .blogAdminForm .action-buttons {
              margin: 20px;
          }
          #htmlTag .blog-list .b-comments--blog .b-comments__header {
              background-color: #F5F5F5;
          }
          #htmlTag .blog-list .b-comments--blog .b-comment {
              border-bottom-color: #F5F5F5;
              padding-top: 20px !important;
          }
          #htmlTag .blog-list .b-comments--blog .b-comment:last-child {
              border-bottom: 0;
          }
          #htmlTag .blog-conversation-content-widget .conversation-list .comment-entry-box {
              margin-top: 20px;
          }
          
          /* Articles */
          
          #htmlTag .article-list .b-comments--article .b-comments__header {
              background-color: #F5F5F5;
          }
          #htmlTag .article-list .b-comments--article .b-comment {
              border-bottom-color: #F5F5F5;
              padding-top: 20px !important;
          }
          #htmlTag .article-list .b-comments--article .b-comment:last-child {
              border-bottom: 0;
          }
          #htmlTag .b-content-entry-panel__content--article-options .b-content-entry-panel__section-title {
              background: {vb:stylevar module_header_background.color};
              font-weight: normal;
              padding: 16px 10px;
              border: 0;
              color: #FFFFFF;
          }
          #htmlTag .b-content-entry-panel__content--article-options .b-content-entry-panel__section-title .js-collapse__icon {
              margin-top: 2px;
          }
          #htmlTag .OLD__edit-conversation-container > .b-content-entry,
          #htmlTag .OLD__edit-conversation-container > #newTextForm {
              margin: 0;
          }
          #htmlTag .b-toggle-slider {
              font-weight: normal;
              border: solid 1px #DDDDDD;
              font-size: 12px;
              min-width: 34px;
              height: 18px;
          }
          #htmlTag .b-toggle-slider__label {
              line-height: 18px;
              min-width: 16px;
              text-align: center;
              padding: 0 5px;
              position: relative;
          }
          #htmlTag .b-toggle-slider__label--yes {
              background: {vb:stylevar button_primary_background.color} none;
              color: #FFF;
          }
          #htmlTag .b-toggle-slider__label--no {
              background: #EBEBEB none;
          }
          #htmlTag .b-toggle-slider__handle {
              background: #252525 none
          }
          #htmlTag .b-toggle-slider__handle--yes {
              border-{vb:stylevar left}: 1px solid #DDDDDD;
          }
          #htmlTag .b-toggle-slider__handle--no {
              border-{vb:stylevar right}: 1px solid #DDDDDD;
          }
          #htmlTag .b-post__footer ~ .notice {
              margin-bottom: 0;
              margin-top: 20px;
          }
          #htmlTag .search-results-widget .list-item-header > .post-header, 
          #htmlTag .search-results-widget .list-item-header > .channel-info {
              margin-{vb:stylevar left}: 0;
          }
          #htmlTag .search-results-widget .list-item-header > .avatar + .post-header {
              margin-{vb:stylevar left}: 20px;
          }
          
          /* Groups */
          
          #htmlTag #groups-tab .toolset-left .js-button-filters .js-button-filter {
              border: 2px solid #DDDDDD;
              background-color: #DDDDDD;
          }
          #htmlTag #groups-tab .toolset-left .js-button-filters .js-button-filter:hover {
              color:     #252C2F !important;
          }
          #htmlTag #groups-tab .toolset-left .js-button-filters .js-button-filter.js-checked {
              border: 2px solid {vb:stylevar button_primary_background.color};
              background-color: {vb:stylevar button_primary_background.color};
              color: #FFFFFF;
          }
          #htmlTag #groups-tab .toolset-left .js-button-filters .js-button-filter.js-checked:hover {
              background-color: transparent;
              color: {vb:stylevar button_primary_background.color} !important;
          }
          #htmlTag .groups-tab .sg-groups-list-container.dataLoaded {
              border-bottom: 0;
          }
          #htmlTag .list-container .replylike_count {
              margin-top: 15px;
              margin-bottom: 15px;
          }
          #htmlTag .list-container .replylike_count li {
              font-size: 13px;
          }
          #htmlTag .b-post-sm__date {
              font-size: 13px;
          }
          #htmlTag .button.special.has-joined:hover,
          #htmlTag .button.special.is-pending:hover {
              color: #F27935;
          }
          #htmlTag .groupSummaryContainer h4 {
              font-size: 16px;
              font-weight: normal;
              margin-bottom: 10px;
          }
          #htmlTag .groupSummaryContainer h4 span {
              font-weight: bold;
          }
          #htmlTag .summary-widget .widget-header .module-title {
              min-height: 20px;
          }
          #htmlTag .blogAdminLeft li span {
              padding: 15px 20px;
          }
          #htmlTag .blogAdminRight form.sgAdminForm .action-buttons {
              margin: 20px;
          }
          #htmlTag .contributors-list tr,
          #htmlTag .blogAdmin-stats-table tr {
              border-bottom-style: solid;
          }
          
          /* Album */
          
          #htmlTag .album-widget .widget-content .widget-subheader {
              height: 40px;
              padding: 0;
          }
          #htmlTag .album-widget .conversation-list.stream-view .list-item-header .post-header {
              margin-{vb:stylevar left}: 0;
          }
          #htmlTag .album-detail.conversation-list.stream-view {
              background-color: #252525;
              margin: 0;
              padding: 20px;
          }
          
          /* Help */
          
          #htmlTag .help-widget .main-title {
              color: inherit;
          }
          #htmlTag .faq-content {
              padding: 20px 20px 20px 22px;
          }
          #htmlTag .faq-block .faq-group-title {
              font-size: 20px;
              font-weight: normal;
              margin-bottom: 20px;
          }
          #htmlTag .faq-block h2 {
              font-size: 14px;
              font-weight: bold;
              margin-bottom: 10px;
              margin-top: 20px !important;
          }
          #htmlTag .faqs .faq-search {
              padding: 0 20px 0 0;
              background-color: transparent;
          }
          #htmlTag .faq-search-field {
              position: relative;
          }
          #htmlTag .faq-search #faqsearchquery {
              width: 182px;
          }
          #htmlTag .faq-search .search-btn {
              position: absolute;
              {vb:stylevar right}: 2px;
              top: 2px;
              width: 36px;
              height: 36px;
          }
          #htmlTag .faqSearchControl {
              font-size: inherit;
              font-weight: normal;
              display: block;
              margin-bottom: 10px;
          }
          #htmlTag .faqSearchFields .form_row {
              color: #555555;
          }
          #htmlTag .faqSearchFields .form_row label input[type="radio"] {
              margin-{vb:stylevar left}: 0;
          }
          #htmlTag .faqs .faq-groups {
              padding-{vb:stylevar right}: 20px;
          }
          #htmlTag .faqs .ui-accordion .ui-accordion-header .ui-icon,
          #htmlTag .faqs .faq-search-title .ui-icon,
          #htmlTag .faqs .ui-accordion .ui-state-active .ui-icon {
              {vb:stylevar left}: 0;
          }
          #htmlTag .faqs .faq-group a.faq-group-title,
          #htmlTag .faqs .faq-search-title {
              padding-{vb:stylevar left}: 12px;
              font-size: 14px;
              line-height: 18px;
              font-weight: normal;
          }
          #htmlTag .faq-groups .sub-faqs {
              padding-{vb:stylevar left}: 12px;
          }
          
          /* Contact form */
          
          #htmlTag .contactusFields.form_layout {
              padding: 20px;
              background-color: #252525;
          }
          #htmlTag .contactusFields_email {
              padding: 10px 15px;
              font-size: 13px;
          }
          
          /* User settings */
          
          #htmlTag .b-tabbed-pane.js-user-settings .h-padding-horiz-xl {
              padding-left: 0;
              padding-right: 0;
          }
          #htmlTag .b-tabbed-pane.js-user-settings .b-tabbed-pane__pane .b-button-group {
              float: {vb:stylevar right};
          }
          #htmlTag .b-tabbed-pane__tab--underline {
              font-weight: normal;
              font-size: 13px;
              text-transform: uppercase;
              border-bottom: 0;
          }
          #htmlTag .b-tabbed-pane__tab--underline.b-tabbed-pane__tab--selected {
              background-color: #FFFFFF;
          }
          #htmlTag .b-tabbed-pane__tab--underline a {
              padding: 16px 20px;
              outline: none;
          }
          #htmlTag .b-tabbed-pane__tab--underline a:hover {
              text-decoration: none;
          }
          #htmlTag .profile-settings-widget .h-margin-bottom-l {
              margin-bottom: 20px;
          }
          #htmlTag #lnkFacebookLoginSettings {
              border: 0;
              padding: 0;
              background-color: transparent;
              height: auto;
          }
          
          /* Messages */
          
          #htmlTag .interconnected-widgets.private-message-widget-layout {
              margin-bottom: 0 !important;
          }
          #htmlTag .private-message-widget-layout.interconnected-widgets .canvas-layout-row.has-columns .canvas-widget-list {
              border: 0 !important;
          }
          #htmlTag .private-message-widget.widget-no-header.private-message-search {
              padding-bottom: 0;
          }
          #htmlTag #private-message-search {
              position: relative;
          }
          #htmlTag .canvas-layout-container .private-message-search {
              background-color: transparent !important;
          }
          #htmlTag .canvas-layout-container .private-message-toolbar, 
          #htmlTag .canvas-layout-container .private-message-search {
              height: 40px;
          }
          #htmlTag .canvas-layout-container .private-message-toolbar {
              margin-bottom: 0;
          }
          #htmlTag .canvas-layout-container .private-message-toolbar #pmFloatingBarContent {
              margin-bottom: 0;
          }
          #htmlTag .canvas-layout-container .private-message-toolbar #pmFloatingBarContent .toolset {
              margin-top: 5px;
          }
          #htmlTag .canvas-layout-container .private-message-toolbar #pmFloatingBarContent .toolset.h-right {
              margin-top: 2px;
          }
          #htmlTag .canvas-layout-container .private-message-toolbar .toolset .button,
          #htmlTag .canvas-layout-container .private-message-toolbar .toolset .b-button {
              height: 22px;
              padding: 0 20px;
          }
          #htmlTag .canvas-layout-container .private-message-toolbar .toolset .button.secondary,
          #htmlTag .canvas-layout-container .private-message-toolbar .toolset .b-button--secondary {
              background-color: #DDDDDD;
              border: 2px solid #DDDDDD;
              line-height: 16px;
          }
          #htmlTag .canvas-layout-container .private-message-toolbar .toolset .button.secondary:hover,
          #htmlTag .canvas-layout-container .private-message-toolbar .toolset .b-button--secondary:hover {
              background-color: transparent;
              text-decoration: none;
          }
          #htmlTag .canvas-layout-container .private-message-toolbar #pmBtnDelete .phrase,
          #htmlTag .canvas-layout-container .private-message-toolbar #pmBtnNotificationDelete .phrase {
              line-height: 17px;
          }
          #htmlTag #pmSearch {
              padding: 0;
          }
          #htmlTag #private-message-search #pmSearchText {
              margin: 0;
              padding-{vb:stylevar right}: 44px;
              width: 280px;
              height: 40px;
          }
          #htmlTag #private-message-search #private-message-search-button-container {
              position: absolute;
              {vb:stylevar right}: 22px;
              top: 2px;
              background: none transparent;
          }
          #htmlTag #private-message-search #private-message-search-button-container #btnSearchPM {
              width: 36px;
              height: 36px;
              background-color: {vb:stylevar module_header_background.color};
              background-image: none;
              margin: 0;
          }
          #htmlTag #private-message-search #private-message-search-button-container #btnSearchPM:hover {
              background-color: {vb:stylevar button_primary_background.color};
          }
          
          #htmlTag #private-message-search #private-message-search-button-container #btnSearchPM:before {
              background-position: -32px -48px;
              content: "";
              display: inline-block;
              height: 16px;
              {vb:stylevar left}: 13px;
              position: absolute;
              top: 13px;
              width: 16px;
          }
          #htmlTag[dir="rtl"] #private-message-search #private-message-search-button-container #btnSearchPM:before {
              background-position: -27px -48px;
          }
          #htmlTag .private-message-widget .nav-pane {
              padding-top: 0;
              padding-{vb:stylevar right}: 20px;
              margin: 0;
              box-sizing: border-box;
              background: #222;
          }
          #htmlTag .compose-btn-container {
              padding: 0;
          }
          #htmlTag #prvmsg-compose-new-btn,
          #htmlTag #privateMessageNavContainer .compose-btn-container {
              margin-bottom: 20px;
          }
          #htmlTag #prvmsg-compose-new-btn:hover,
          #htmlTag #privateMessageNavContainer .compose-btn-container .b-button:hover {
              background-color: transparent;
              text-decoration: none;
              color: {vb:stylevar button_primary_background.color} !important;
          }
          #htmlTag .private-message-widget .folder-link.selected,
          #htmlTag .private-message-vidget .folder-link.selected[href]:hover,
          #htmlTag .private-message-widget .folder-link.selected[data-href]:hover {
              background: transparent;
              font-weight: bold;
              color: {vb:stylevar body_link_color};
          }
          #htmlTag .private-message-widget .folder-link {
              color: inherit;
          }
          #htmlTag .private-message-widget .folder-link:hover {
              background-color: transparent;
              color: {vb:stylevar body_link_color};
          }
          #htmlTag .private-message-widget .inbox .label {
              margin-{vb:stylevar left}: 0px;
          }
          #htmlTag .private-message-widget .folder-link .vb-icon {
              {vb:stylevar left}: 0px;
              margin-top: -7px;
          }
          #htmlTag .private-message-widget .nav-pane .folder-item.special-folder .label {
              width: 140px;
          }
          #htmlTag .private-message-widget .nav-pane .folder-item .vb-icon + .label {
              margin-{vb:stylevar left}: 25px;
          }
          #htmlTag .folder-item .count {
              {vb:stylevar right}: 0px;
              margin-top: -6px;
              background: none repeat scroll 0 0 #FF5500;
              border: 0;
              border-radius: 9px !important;
              display: inline-block;
              font: bold 11px/18px "Noto Sans",sans serif;
              height: 18px;
              min-width: 10px;
              padding: 0 4px;
              color: #FFFFFF;
          }
          #htmlTag .folder-item-main {
              font-weight: normal;
          }
          #htmlTag .private-message-widget .main-pane .main-pane-header {
              margin: 0;
              height: 50px;
              line-height: 50px;
              font-size: 14px;
              font-weight: normal;
              text-transform: none;
          }
          #htmlTag .private-message-widget .main-pane .main-pane-header + ul li.main-pane-header {
              color: inherit;
              background-color: #EBEBEB;
              font-size: 13px;
          }
          #htmlTag .message-empty {
              font-weight: normal;
              padding: 20px;
          }
          #htmlTag .private-message-widget .main-pane .message-list .message-item {
              border-bottom: solid 1px #F5F5F5;
          }
          #htmlTag .private-message-widget .main-pane .message-list .message-item:last-child {
              border-top: 0;
          }
          #htmlTag .private-message-widget .main-pane .message-list .message-item.message-unread {
              border-bottom-color: #E2ECEF;
          }
          #htmlTag #privateMessageContainer .action-buttons {
              padding: 0;
          }
          #htmlTag #privateMessageContainer .action-buttons .button.primary.light:hover,
          #htmlTag #privateMessageContainer .pmRequestAccept:hover {
              background-color: transparent;
              color: {vb:stylevar button_primary_background.color} !important;
          }
          #htmlTag .list-container.message-list + .action-buttons.h-align-center {
              padding: 20px !important;
              text-align: center;
          }
          #htmlTag .see-all-btn,
          #htmlTag .view-more-btn {
              height: 40px !important;
              line-height: 13px !important;
              font-size: 13px !important;
          }
          #htmlTag .see-all-btn:hover,
          #htmlTag .view-more-btn:hover {
              text-decoration: none;
          }
          #htmlTag .private-message-widget .split-button .split-button-wrapper {
              border: 0 !important;
              background: none #FFFFFF !important;
              box-sizing: border-box;
              padding: 0 !important;
          }
          #htmlTag .private-message-widget .split-button .split-button-wrapper .button-set .button-text {
              padding-{vb:stylevar left}: 20px;
              font-size: 13px;
              font-weight: normal;
          }
          #htmlTag .split-button .split-button-wrapper .button-set .button-text .ui-button-text {
              line-height: 19px;
          }
          #htmlTag .canvas-layout-container .private-message-toolbar .split-button.b-button--dropdown-menu-button {
              border: 0;
              padding: 0;
          }
          
          #htmlTag .canvas-layout-container .private-message-toolbar .split-button.b-button--dropdown-menu-button #btnMove {
              background-color: transparent;
              margin: 0;
              padding: 0;
              padding-{vb:stylevar left}: 20px;
              border: 0;
          }
          #htmlTag .canvas-layout-container .private-message-toolbar .split-button-wrapper .td .b-button__icon {
              background-color: transparent;
              height: 22px;
              margin: 0;
          }
          #htmlTag .canvas-layout-container .private-message-toolbar .split-button-wrapper .td .b-button__icon .vb-icon-triangle-down-wide {
              margin-top: -7px !important;
          }#htmlTag .split-button .split-button-wrapper .button-set .vb-icon-triangle-down-wide {
              background-position: -63px -11px !important;
          }
          #htmlTag .split-button .split-button-wrapper .submenu {
              background: none #FFFFFF;
          }
          #htmlTag .split-button.open .split-button-wrapper .button-set {
              border-bottom: 0;
          }
          #htmlTag .private-message-widget .split-button .split-button-wrapper .submenu {
              top: 30px;
          }
          #htmlTag .split-button .split-button-wrapper .submenu li {
              height: 40px;
              line-height: 40px;
          }
          #htmlTag #privateMessageContainer .privateMessageActionCheck {
              margin-{vb:stylevar left}: 0px;
          }
          #htmlTag #privateMessageContainer .jsPsuedoLink:hover, 
          #htmlTag #privateMessageContainer .jsPseudoLink:hover {
              color: #FFFFFF;
          }
          #htmlTag .private-message-widget .main-pane .message-list.pm-message-list .message-item .message-checkbox {
              height: 32px;
          }
          #htmlTag .private-message-widget .main-pane .message-list .message-item .message-body {
              padding-{vb:stylevar left}: 22px;
          }
          #htmlTag .pm-message-list .list-item .post-links {
              padding-{vb:stylevar left}: 22px;
          }
          #htmlTag .notifications-action-bar,
          #htmlTag .notifications-action-bar label {
              color: #555555;
          }
          #htmlTag .notifications-action-bar .jsPsuedoLink:hover, 
          #htmlTag .notifications-action-bar .jsPseudoLink:hover {
              color: #555555 !important;
          }
          #htmlTag .pm-message-list td.cell-gotopost {
              width: 130px;
          }
          #htmlTag .pm-message-list td.cell-gotopost .button:hover {
              text-decoration: none;
          }
          #htmlTag table.list-container.message-list.pm-message-list.folder-message-list.topic-list-container.conversation-list > tbody > tr {
              background-color: #FFFFFF;
          }
          #htmlTag table.list-container.message-list.pm-message-list.folder-message-list.topic-list-container.conversation-list > tbody > tr > td {
              border-bottom: solid 1px #F5F5F5;
              padding: 10px;
          }
          #htmlTag table.list-container.message-list.pm-message-list.folder-message-list.topic-list-container.conversation-list > tbody > tr > td:first-child {
              padding-{vb:stylevar left}: 20px;
          }
          #htmlTag table.list-container.message-list.pm-message-list.folder-message-list.topic-list-container.conversation-list > tbody > tr > td:last-child {
              padding-{vb:stylevar right}: 20px;
          }
          
          #htmlTag .private-message-widget .main-pane .message-list.pm-message-list .topic-item .cell-topic .topic-title,
          #htmlTag .private-message-widget .main-pane .message-list.pm-message-list .forum-item .cell-forum .forum-title,
          #htmlTag .private-message-widget .main-pane .message-list.pm-message-list .user-item .cell-user .author {
              font-size: 14px;
          }
          #htmlTag .private-message-widget .main-pane .message-list.pm-message-list .topic-item .cell-topic .topic-info {
              margin-top: 10px;
          }
          #htmlTag #privateMessageContainer .deletedItems-list .list-item-body-wrapper {
              margin-{vb:stylevar left}: 25px;
          }
          #htmlTag #privateMessageContainer .deletedItems-list .list-item-body-wrapper .pending-buttons .button.goto-post {
              background-color: {vb:stylevar button_secondary_background.color};
              color: {vb:stylevar button_secondary_text_color};
          }
          #htmlTag #privateMessageContainer .deletedItems-list .list-item-body-wrapper .pending-buttons .button.goto-post:hover {
              background-color: transparent;
          }
          #htmlTag .private-message-widget {
              background-color: #FFFFFF;
          }
          #htmlTag .private-message-widget .content-entry-box-header {
              color: inherit;
          }
          #htmlTag .private-message-widget .lastpost {
              width: 45%;
          }
          #htmlTag .private-message-widget .lastpost-info .lastpost-title.ellipsis {
              white-space: normal;
          }
          
          /* User profile */
          
          #htmlTag .profile-widget-layout .canvas-layout-row.has-columns .canvas-widget-list {
              border: 0 !important;
          }
          #htmlTag .profile_sidebar_content {
              font-family: inherit;
              background: #1a1a1a;
              margin: -15px;
                  color: #ccc;
          }
          #htmlTag .profile-sidebar-widget .profileContainer {
              padding: 0;
              padding-{vb:stylevar right}: 20px;
          }
          #htmlTag .profile-sidebar-widget .profileContainer .profile-photo-wrapper .profile-photo {
              border: 0;
          }
          #htmlTag .profile-sidebar-widget .profileContainer .profile-info {
              font-size: inherit;
          }
          #htmlTag .profile-sidebar-widget .profile-menulist .profile-menulist-item {
              padding: 0;
              padding-{vb:stylevar right}: 20px;
          }
          #htmlTag .profile-sidebar-widget .profile-menulist .profile-menulist-item > a {
              font-weight: normal;
          }
          #htmlTag .profile-sidebar-widget .profile-menulist .profile-menulist-item > a:hover {
              color: inherit;
          }
          #htmlTag .profile-sidebar-widget .profile-menulist .profile-menulist-item > a > .subscriptions-count,
          #htmlTag .profile-sidebar-widget .profile-menulist .profile-menulist-item .subscriptions-count {
              {vb:stylevar right}: 20px;
              margin-top: 5px;
              background: none repeat scroll 0 0 #FF5500;
              border: 0;
              border-radius: 9px !important;
              display: inline-block;
              font: bold 11px/18px "Noto Sans",sans serif;
              height: 18px;
              min-width: 10px;
              padding: 0 4px;
              color: #FFFFFF;
          }
          #htmlTag .profileTabs .widget-tabs-nav li a {
              background-color: transparent;
          }
          #htmlTag .profileTabs .widget-tabs-nav li.ui-tabs-selected a {
              background-color: {vb:stylevar toolbar_background.color};
          }
          #htmlTag .profile-widget-layout .profile-widget .widget-content .profile-container .profileTabs > .widget-tabs-nav,
          #htmlTag .profile-widget-layout .profile-widget .widget-content .profile-container .profileTabs > .tab {
              margin: 0px !important;
          }
          #htmlTag #profileTabs .conversation-list.stream-view {
              border: 0 !important;
          }
          #htmlTag #profileTabs.profileTabs,
          #htmlTag #profileTabs.profileTabs .conversation-list.stream-view .list-item,
          #htmlTag #profileTabs.profileTabs .widget-content,
          #htmlTag #profileTabs.profileTabs .post-content {
              background-color: #1a1a1a;
              color: #ccc;
          }
          #htmlTag #profileTabs .tab.widget-tabs-panel {
              background-color: #FFFFFF;
          }
          #htmlTag #profileTabs .ui-tabs .ui-tabs-nav li {
              top: 0;
          }
          #htmlTag #profileTabs .conversation-toolbar .action_button,
          #htmlTag #profileTabs .conversation-toolbar .button.edit-subscribed,
          #htmlTag #profileTabs .conversation-toolbar .b-button.edit-subscribed,
          #htmlTag #profileTabs .conversation-toolbar .button.infractionCtrl,
          #htmlTag #profileTabs .conversation-toolbar .b-button.infractionCtrl,
          #htmlTag .conversation-toolbar .b-button.back-button,
          #htmlTag .conversation-toolbar .b-button {
              background: {vb:stylevar button_primary_background};
              color: #FFFFFF;
          }
          #htmlTag #profileTabs .conversation-toolbar .button.edit-subscribed,
          #htmlTag #profileTabs .conversation-toolbar .b-button.edit-subscribed,
          #htmlTag .conversation-toolbar .back-button {
              display: block;
              line-height: 18px !important;
          }
          #htmlTag #profileTabs .conversation-toolbar .action_button:hover,
          #htmlTag #profileTabs .conversation-toolbar .button.infractionCtrl:hover,
          #htmlTag .conversation-toolbar .b-button:hover {
              background-color: transparent;
          }
          #htmlTag #profileTabs .conversation-toolbar .action_button.subscribed_button {
              background: {vb:stylevar button_special_background};
              border-color: {vb:stylevar button_special_border.color};
          }
          #htmlTag #profileTabs .conversation-toolbar .pm_button {
              background: #1a1a1a;
              color: #FFFFFF;
              line-height: 18px;
          }
          media screen and (-webkit-min-device-pixel-ratio: 0) { 
              #htmlTag #profileTabs .conversation-toolbar .pm_button {
                  line-height: 17px;
              }
          }
          #htmlTag #profileTabs .conversation-toolbar .pm_button:hover,
          #htmlTag #profileTabs .conversation-toolbar .button.edit-subscribed:hover {
              background-color: transparent;
          }
          #htmlTag #profileTabs .conversation-list.stream-view .list-item-header {
              margin-{vb:stylevar left}: 0px;
          }
          #htmlTag .conversation-list.stream-view .list-item.list-item-channel.list-item-forum .avatar .forum-icon {
              height: 26px;
              width: 29px;
          }
          #htmlTag .profileTabs .section .section-header {
              background: #000;
              color: #fff;
              border: 0;
              height: 40px;
              line-height: 40px;
              font-weight: normal;
              padding-left: 20px;
              padding-right: 20px;
          }
          #htmlTag .profileTabs .sub-section .section-header {
              background: transparent;
              border: 0;
              height: 40px;
              line-height: 40px;
              font-weight: bold;
              padding-left: 0px;
              padding-right: 0px;
          }
          #htmlTag .section .section-content.table .tr .td {
              padding: 10px 20px;
              background: #1a1a1a;
              color: #fff;
          }
          #htmlTag .section .section-content.table .sub-section {
              border-top: solid 1px #F5F5F5;
          }
          #htmlTag .section .section-content.table .sub-section:first-child {
              border-top: 0;
          }
          #htmlTag #profileTabs #media-tab .conversation-toolbar .button.secondary {
              background: none #DDDDDD;
              border-color: #DDDDDD;
              display: inline-block;
          }
          #htmlTag #profileTabs #media-tab .conversation-toolbar .button.secondary:hover {
              background-color: transparent;
              color: {vb:stylevar button_secondary_text_color} !important;
          }
          #htmlTag #mediaList .item-album {
              margin-{vb:stylevar right}: 10px;
              margin-bottom: 10px;
              border: 1px solid #E7E7E7;
          }
          #htmlTag #mediaList .item-album .media-title,
          #htmlTag #mediaList .item-album .media-count {
              font-size: inherit;
              font-weight: normal;
          }
          #htmlTag .photo-preview .photoPreviewBox,
          #htmlTag .photo-preview .photoPreviewBox .photoPreviewBox-large {
              border-color: #E7E7E7;
          }
          #htmlTag .galleryLink .thumbnail-photo,
          #htmlTag .galleryLink .thumbnail-photo:hover {
              border: 0;
          }
          #htmlTag #profileTabs .infraction-container h3 {
              padding: 20px;
              font-size: 16px;
              font-weight: normal;
          }
          #htmlTag #profileTabs .infraction-list th {
              background: {vb:stylevar toolbar_background};
              height: 30px;
              padding: 5px;
          }
          #htmlTag #profileTabs .infraction-list td {
              padding: 10px;
          }
          #htmlTag #profileTabs .infraction-list td:first-child {
              padding-{vb:stylevar left}: 20px;
          }
          #htmlTag #profileTabs .infraction-list td:last-child {
              padding-{vb:stylevar right}: 20px;
          }
          #htmlTag #profileTabs .infraction-list tr:first-child td {
              padding-top: 20px;
          }
          #htmlTag #profileTabs .infraction-list tr:last-child td {
              padding-bottom: 20px;
          }
          #htmlTag #subscriptionsTab .conversation-toolbar .button.secondary,
          #htmlTag #subscribersTab .conversation-toolbar .button.secondary {
              background: none #DDDDDD;
              border-color: #DDDDDD;
              display: inline-block;
              color: {vb:stylevar button_secondary_text_color};
              line-height: 18px;
          }
          #htmlTag #subscriptionsTab .conversation-toolbar .button.secondary:hover,
          #htmlTag #subscribersTab .conversation-toolbar .button.secondary:hover {
              background-color: transparent;
              color: {vb:stylevar button_secondary_text_color} !important;
          }
          #htmlTag #subscriptionsTab .conversation-toolbar .button.secondary .vb-icon-back,
          #htmlTag #subscribersTab .conversation-toolbar .button.secondary .vb-icon-back {
              margin-top: 5px;
          }
          #htmlTag .profile-widget-layout .subscriptions-widget .widget-content .subscribeTabs .subscription-list-container .subscription-list .subscription-item .td {
              padding: 10px;
              border-bottom: solid 1px #F5F5F5;
          }
          #htmlTag .profile-widget-layout .subscriptions-widget .widget-content .subscribeTabs .subscription-list-container .subscription-list .subscription-item .td:first-child {
              padding-{vb:stylevar left}: 20px;
          }
          #htmlTag .profile-widget-layout .subscriptions-widget .widget-content .subscribeTabs .subscription-list-container .subscription-list .subscription-item .td:last-child {
              padding-{vb:stylevar right}: 20px;
          }
          #htmlTag .profile-widget-layout .subscriptions-widget .widget-content .subscribeTabs .subscription-list-container .subscription-list .subscription-item:first-child > div {
              padding-top: 20px !important;
          }
          #htmlTag .profile-widget-layout .subscriptions-widget .widget-content .subscribeTabs .subscription-list-container .subscription-list .subscription-item:last-child > div {
              padding-bottom: 20px !important;
          }
          #htmlTag .profile-widget-layout .subscriptions-widget .widget-content .subscribeTabs .subscription-list-container .subscription-list .subscription-item .td a {
              font-weight: normal;
          }
          #htmlTag .profile-widget-layout .subscriptions-widget .widget-content .subscribeTabs .subscription-list-container .first_column {
              width: 55%;
          }
          #htmlTag .profile-widget-layout .subscriptions-widget .widget-content .subscribeTabs .subscription-list-container .third_column {
              width: 25%;
              text-align: {vb:stylevar right};
          }
          #htmlTag .profile-menulist .profile-action-buttons {
              padding: 0;
              padding-{vb:stylevar right}: 20px;
              padding-top: 10px;
          }
          #htmlTag .profile-sidebar-widget .profile-menulist .profile-action-buttons a.button,
          #htmlTag .profile-sidebar-widget .profile-menulist .profile-action-buttons button {
              background-image: none;
              background: {vb:stylevar button_primary_background};
              border-color: {vb:stylevar button_primary_background.color};
              color: #FFFFFF !important;
          }
          #htmlTag .profile-sidebar-widget .profile-menulist .profile-action-buttons a.button:hover,
          #htmlTag .profile-sidebar-widget .profile-menulist .profile-action-buttons button:hover {
              background-color: transparent;
              color: {vb:stylevar button_primary_background.color} !important;
          }
          #htmlTag .profile-sidebar-widget .profile-menulist .profile-action-buttons .customize-theme {
              background: #1a1a1a !important;
              border: {vb:stylevar button_secondary_border};
              color: inherit !important;
          }
          #htmlTag .profile-sidebar-widget .profile-menulist .profile-action-buttons .customize-theme:hover {
              color: inherit !important;
          }
          #htmlTag .view-mode .interconnected-widgets.profile-widget-layout {
              margin-bottom: 0 !important;
          }
          
          /* Profile custom edit */
          
          #htmlTag .profile_custom_edit #profileNavTabs {
              background-color: {vb:stylevar contententry_toolbar_background.color};
              border: 0;
          }
          #htmlTag .profileNavTabs ul.profileNavOuter {
              background-color: transparent;
          }
          #htmlTag .profileNavInner {
              margin-bottom: 10px;
          }
          #htmlTag .profileNavInner a.button {
              background-color: {vb:stylevar contententry_toolbar_background.color};
          }
          #htmlTag .profile_custom_edit .profCustomTab ul li.ui-state-active a.button {
              background-color: {vb:customstylevar button_primary_background.color, {vb:var userid}} !important;
              border-color: {vb:customstylevar button_primary_border.color, {vb:var userid}} !important;
          }
          #htmlTag .profile_custom_edit .profileEditButtonsInner .button.secondary {
              background: none #DDDDDD;
              border-color: #DDDDDD;
          }
          #htmlTag .profile_custom_edit .profileNavInner li:first-child a {
              margin-{vb:stylevar left}: 0 !important;
          }
          #htmlTag .profile_custom_edit .profileEditButtonsInner .button.secondary:hover {
              background-color: transparent;
          }
          #htmlTag .profCustomTab {
              background-color: #FFFFFF !important;
              box-shadow: 5px 2px 5px rgba(0,0,0,0.1);
          }
          #htmlTag .ui-tabs-panel > .profCustomEditField,
          #htmlTag .profCustomEditBorderTop {
              border-top-color: #F5F5F5;
          }
          #htmlTag .profile-img-option-container .custom-upload-button {
              vertical-align: bottom;
          }
          
          /* Login box */
          
          #htmlTag #idLoginIframeContainer {
              background-color: #FFFFFF;
              border-bottom: 0;
          }
          #htmlTag .username-container #lnkLoginSignupMenu + ul {
              background-color: #F5F5F5;
          }
          #htmlTag #externalLoginProviders {
              height: 50px !important;
              line-height: 50px !important;
              background: none transparent;
          }
          #htmlTag #externalLoginProviders .vb-icon {
              vertical-align: sub;
          }
          
          /* Register page */
          
          #htmlTag .registration-widget {
              background-color: #FFFFFF;
          }
          #htmlTag .registration-widget .signup-content {
              padding: 20px;
          }
          #htmlTag .registration-widget .signup-header-text,
          #htmlTag registration-widget .signup-success,
          #htmlTag registration-widget .notice {
              padding: 0 0 20px;
              margin: 0;
          }
          #htmlTag .registration-widget .signup-content .form_layout {
              padding: 0;
          }
          #htmlTag .form-fieldset .form_row .label_column,
          #htmlTag .form_layout .label {
              font-weight: normal;
          }
          #htmlTag .registration-widget .textbox[type="password"] {
              height: 36px;
              padding: 1px 8px;
          }
          
          /* Forgot password */
          
          #htmlTag .forgot-password-widget {
              background-color: #FFFFFF;
          }
          #htmlTag .forgot-password-widget .widget-content {
              padding: 20px;
              box-sizing: border-box;
          }
          #htmlTag .forgot-password-widget .form_layout {
              padding: 0;
          }
          
          /* Pagenav */
          #htmlTag .pagenav-container {
              /* height: 30px; */
              margin-top: 20px !important;
              margin-bottom: 10px;
          }
          
          /* Misc */
          #htmlTag a.button:hover {
              text-decoration: none;
          }
          #htmlTag hr {
              border: 0 none;
              color: #F5F5F5;
              height: 1px;
          }
          #htmlTag #footer {
              width: {vb:stylevar wrapper_width};
              min-width: {vb:stylevar wrapper_min_width};
              max-width: {vb:stylevar wrapper_max_width};
              margin: 0 auto;
          }
          #htmlTag .footer-spacer {
              height: 20px;
          }
          #htmlTag code {
              background-color: transparent;
          }
          #htmlTag .selectBox-dropdown {
              box-shadow: none;
          }
          #htmlTag .ui-tooltip-default .ui-tooltip-titlebar,
          #htmlTag .ui-tooltip-default .ui-tooltip-content {
              border: none;
          }
          #htmlTag .b-form-input__label {
              font-weight: normal;
          }
          #htmlTag .group-categories-widget .widget-content {
              padding-top: 15px;
          }
          #htmlTag .inlinemod-auth-form .login-fields .textbox {
              height: 40px;
              line-height: 40px;
          }
          #htmlTag .button.primary[disabled=""] {
              border-color: {vb:stylevar button_disabled_border.color} !important;
              color: {vb:stylevar button_disabled_text_color} !important;
          }
          #htmlTag .activity-stream-widget select,
          #htmlTag div.widget-tabs-nav > select {
              background-color: #FFFFFF;
          }
          body.ie .activity-stream-widget select,
          html.firefox .activity-stream-widget select {
              background-color: #ffffff !important;
              border: 1px solid #e4e4e4;
              padding-{vb:stylevar right}: 20px;
              height: 40px;
          }
          body.ie .activity-stream-widget select,
          html.firefox .activity-stream-widget select {
              background: #ffffff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAGCAYAAADOic7aAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTZBOTk1RjMxRjZCMTFFMUFDRjA5NUJCNzg2QTA1OEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTZBOTk1RjQxRjZCMTFFMUFDRjA5NUJCNzg2QTA1OEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxNkE5OTVGMTFGNkIxMUUxQUNGMDk1QkI3ODZBMDU4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxNkE5OTVGMjFGNkIxMUUxQUNGMDk1QkI3ODZBMDU4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtOZMNcAAABeSURBVHjaYmBgYJgGxP8J4JkMIMb//zgxCDAD8XY8hhwAYjZiDAIBfiC+hMWQh0AsClNEjEEgIA3ET5AM+QbEusgKiDWIAarxM9SgEHRJUgwCAT8grsMmgc8ggAADAGY/m1aWUowGAAAAAElFTkSuQmCC) no-repeat 99% 50% !important;
          }
          #htmlTag #header .site-logo {
              padding-{vb:stylevar left}: 0;
              padding-{vb:stylevar right}: 0;
          }
          #htmlTag .wol-widget .display-avatar {
              margin-bottom: 0;
          }
          #htmlTag .advancedSearchFields.form_layout {
              padding: 20px;
              background-color: #FFFFFF;
          }
          #htmlTag .b-menu__login-iframe {
              min-height: 245px;
          }
          
          /* Transitions */
          
          #main-navbar ul li a,
          #main-navbar .username-container ul.submenu li,
          #channel-tabbar ul li a,
          #header .search-container .search-box.search-btn-inside-box .search-btn,
          .button, .ui-widget .button,
          #channel-tabbar ul li a:before,
          .quarto-social-links li a,
          #htmlTag .button,
          #htmlTag .b-button,
          #htmlTag .conversation-toolbar-wrapper .conversation-toolbar .toolbar-search .search-container .search-btn,
          #htmlTag .faq-search .search-btn,
          #htmlTag .search-btn {
              transition: all 0.1s linear 0s;
              transition-property: color, background-color, border-color, opacity;
          }
          
          /* Box shadow */
          
          #htmlTag .search-container .searchPopupBody,
          #htmlTag .search-result-header .PopupBody,
          #htmlTag #main-navbar .username-container > ul,
          #htmlTag .mainmenu .submenu,
          #htmlTag .b-comp-menu-dropdown .b-comp-menu-dropdown__content,
          #htmlTag .selectBox-dropdown-menu,
          #htmlTag .dialog-container,
          #htmlTag .search-container #searchPopupContent,
          #htmlTag .search-result-header .PopupContent,
          #htmlTag .ui-tooltip-shadow,
          #htmlTag .ui-widget-content.ui-dialog,
          #htmlTag .private-message-widget .split-button .split-button-wrapper .submenu,
          #htmlTag .b-memberlist__sortby-overlay {
              box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
          }
          
          /* chrome hack for 1 pixel search box/button fix */
          
          media screen and (-webkit-min-device-pixel-ratio:0) {
              #q {
                  height: 40px !important;
              }
          }
          
          /* Site builder */
          
          #htmlTag .sb-menu a.selected {
              background-color: {vb:stylevar button_primary_background.color} !important;
              background-image: none !important;
              color: #FFFFFF !important;
          }
          #htmlTag #edit-page-dropdown .tabs .tabs-list .tab-item,
          #htmlTag #manage-page-dropdown .tabs .tabs-list .tab-item,
          #htmlTag .sb-style-panel .tabs .tabs-list .tab-item {
            background-image: none;
          }
          #htmlTag #sitebuilder-wrapper .shadow,
          #htmlTag .edit-mode #sitebuilder-wrapper .button {
              box-shadow: none;
          }
          #htmlTag #sitebuilder-wrapper .textbox[type="text"] {
              height: 22px;
              padding-top: 1px;
              padding-bottom: 1px;
          }
          #htmlTag #sitebuilder-wrapper .button,
          #htmlTag #sitebuilder-wrapper .ui-widget .button {
              padding: 0 15px !important;
              height: 24px !important;
          }
          #htmlTag #sitebuilder-wrapper .button.secondary:hover {
              border-width: 1px;
          }
          #htmlTag .admin-only .edit.button,
          #htmlTag .axd-edit-button.button {
              height: 22px;
              line-height: 22px;
              padding: 0 15px;
          }
          
          /* RESPONSIVE */
          
          media only screen and (max-width:767px) {
              #htmlTag #outer-wrapper {
                  padding: 0 10px;
              }
              #htmlTag .prefooter {
                  display: block;
              }
              #htmlTag .prefooter-block {
                  display: block;
                  width: 100%;
              }
              #htmlTag .quarto-social-links {
                  float: none;
                  text-align: center;
                  width: 100%;
              }
              #htmlTag #footer-copyright {
                  text-align: center;
                  width: 100%;
              }
              #htmlTag #footer-tabbar > ul.chooser-list {
                  text-align: center;
                  margin-top: 10px;
              }
              #htmlTag #footer-tabbar > ul.chooser-list > li {
                  display: inline-block;
              }
              #htmlTag #footer-tabbar > ul.nav-list {
                  text-align: center;
                  margin-top: 10px;
              }
              #htmlTag #footer-tabbar > ul.nav-list > li {
                  display: inline-block;
                  float: none !important;
                  width: auto;
              }
              #htmlTag #channel-tabbar .mobile.sections{
                  height:28px;
                  line-height:28px;
              }
              #htmlTag #mobile-main-menu-sections div.main-menu-control-sections {
                  height: auto;
                  padding-{vb:stylevar left}: 20px;
              }
              #htmlTag #channel-tabbar ul li.section-item {
                  background: {vb:stylevar header_tabbar_background};
                  height: 65px !important;
              }
              #htmlTag #channel-tabbar ul li a:hover {
                  background: {vb:stylevar header_tab_background_hover};
              }
              #htmlTag #channel-tabbar ul li.section-item a {
                  background-image: none;
                  box-sizing: border-box;
                  color: {vb:stylevar  header_tab_text_color_active};
                  height: 65px !important;
              }
              #htmlTag #channel-tabbar ul li.current,
              .edit-mode #channel-tabbar ul li.current {
                  background: {vb:stylevar header_tab_background_active} !important;
              }
              #htmlTag #channel-tabbar ul li.current a,
              #htmlTag #channel-tabbar ul li.current a:hover,
              #htmlTag .edit-mode #channel-tabbar ul li.current a:hover {
                  background: {vb:stylevar header_tab_background_active} !important;
              }
              #htmlTag #mobile-main-menu-sections div.main-menu-control-sections {
                  background-color: transparent;
              }
              #htmlTag #mobile-main-menu span.sections-title {
                  font-size: 16px;
                  font-weight: normal;
                  color: {vb:stylevar header_tab_background_active.color};
              }
              #htmlTag #channel-tabbar .mobile.sections .collapsed {
                  color: #FFFFFF;
              }
              #htmlTag #channel-subtabbar ul li a {
                  margin-{vb:stylevar left}: 20px;
              }
              #mobile-main-menu-search {
                  height: 49px;
                  padding-{vb:stylevar left}: 20px;
                  padding-top: 11px;
              }
              #mobile-main-menu-sections,
              #mobile-main-menu-search {
                  width: 85%;
              }
              #htmlTag #mobile-main-menu .mobile-search .icon.h-right {
                  margin-top: 23px;
                  margin-{vb:stylevar right}: 20px;
              }
              #htmlTag #mobile-main-menu.mobile.sections #mobile-main-menu-search #searchForm.mobile.mobileSearch fieldset .search-inputs .textbox.search-term {
                  border: 0 !important;
                  height: 40px !important;
              }
              #htmlTag #content .widget-tabs .widget-tabs-nav .module-title {
                  padding: 0px;
              }
              #htmlTag div.channel-content-widget > .widget-content > .channel-conversation-list-wrapper > .widget-tabs-nav > select {
                  margin: 0;
              }
              #htmlTag .l-small .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper {
                  width: 87%;
              }
              #htmlTag .view-mode .widget-tabs .widget-tabs-nav {
                  /*margin-bottom: 10px !important;*/
              }
              #htmlTag .social-groups-widget .list-item-footer > .replylike_count li a,
              #htmlTag .social-groups-widget .widget-footer a,
              #htmlTag .post-controls.h-right .editCtrl span.label,
              #htmlTag .post-controls.h-right .flagCtrl span.label,
              #htmlTag .post-controls.h-right .commentCtrl span.label,
              #htmlTag .post-controls.h-right .quoteCtrl span.label,
              #htmlTag .post-controls.h-right .voteCtrl span.label,
              #htmlTag .post-controls .infractionCtrl .label,
              #htmlTag .post-links a.goto-post{
                  padding: 5px 10px;
                  background-color: {vb:stylevar contententry_toolbar_background.color};
                  color: #555555;
              }
              #htmlTag .l-small .b-post-control--responsive {
                  background-color: {vb:stylevar contententry_toolbar_background.color};
                  color: #555555;
              }
              #htmlTag .activity-stream-widget select,
              #htmlTag div.widget-tabs-nav > select {
                  padding: 10px 20px 10px 10px;
              }
              #htmlTag .l-small .h-padding-right-xl,
              #htmlTag .l-small .h-padding-horiz-xl,
              #htmlTag .l-small .h-padding-xl,
              #htmlTag .l-small .h-padding-right-xxl,
              #htmlTag .l-small .h-padding-horiz-xxl,
              #htmlTag .l-small .h-padding-xxl {
                  padding-{vb:stylevar right}: 0;
              }
              #htmlTag .b-button,
              #htmlTag .b-button:link,
              #htmlTag .b-button:visited {
                  font-weight: normal;
                  height: 40px !important;
                  line-height: 32px !important;
                  min-width: 65px !important;
                  padding: 1px 20px !important;
              }
              #htmlTag .canvas-layout-container .private-message-toolbar .toolset .b-button {
                  height: 22px !important;
                  padding: 0 20px !important;
                  line-height: 16px !important;
              }
              #htmlTag .b-post__body {
                  padding: 20px !important;
              }
              #htmlTag .goto-post {
                  color: #555555 !important;
              }
              #htmlTag .goto-post:hover {
                  text-decoration: none;
              }
              #htmlTag #profileTabs .widget-tabs-nav > select {
                  margin: 0;
              }
              #htmlTag .l-small .h-margin-left-xl,
              #htmlTag .l-small .h-margin-horiz-xl,
              #htmlTag .l-small .h-margin-xl,
              #htmlTag .l-small .h-margin-left-xxl,
              #htmlTag .l-small .h-margin-horiz-xxl,
              #htmlTag .l-small .h-margin-xxl {
                  margin-{vb:stylevar right}: 10px;
              }
              #htmlTag .l-small .h-margin-left-xl,
              #htmlTag .l-small .h-margin-horiz-xl,
              #htmlTag .l-small .h-margin-xl,
              #htmlTag .l-small .h-margin-left-xxl,
              #htmlTag .l-small .h-margin-horiz-xxl,
              #htmlTag .l-small .h-margin-xxl {
                  margin-{vb:stylevar left}: 10px;
              }
              #htmlTag .profile-sidebar-widget .profileContainer {
                  padding: 0;
              }
              #htmlTag .profile-sidebar-widget .profile-menulist .profile-menulist-item {
                  padding: 0;
              }
              #htmlTag .profile-menulist .profile-action-buttons {
                  padding-{vb:stylevar right}: 0 !important;
              }
              #htmlTag .profile-sidebar-widget .profile-menulist .profile-menulist-item > a > .subscriptions-count,
              #htmlTag .profile-sidebar-widget .profile-menulist .profile-menulist-item .subscriptions-count {
                  {vb:stylevar right}: 0;
              }
              #htmlTag .search-result-header .PopupContent {
                  top: 35px;
              }
              #htmlTag .searchPopupBody .searchFields_keywords + .search-btn {
                  position: relative;
              }
              #htmlTag #breadcrumbs:empty {
                  padding: 0;
              }
              #htmlTag .b-tabbed-pane__pane > form > .h-padding-horiz-xxl.h-margin-top-xl {
                  margin-top: 0;
                  padding: 20px;
              }
              #htmlTag .b-tabbed-pane__tabs.b-tabbed-pane__tabs--stacked .b-tabbed-pane__tab {
                  background-color: {vb:stylevar  button_secondary_background.color};
              }
              #htmlTag .b-tabbed-pane__tabs--stacked .b-tabbed-pane__tab--underline.b-tabbed-pane__tab--selected {
                  background-color: #FFFFFF;
              }
              #htmlTag .b-tabbed-pane__tabs--stacked .b-tabbed-pane__tab--underline {
                  padding-{vb:stylevar left}: 0;
              }
              #htmlTag .b-tabbed-pane__tab--underline a {
                  box-sizing: border-box;
              }
              #htmlTag #header .site-logo img {
                  max-width: 100%;
              }
              #htmlTag .advancedSearchFields.form_layout {
                  padding: 20px !important;
              }
              #htmlTag .topic-list-container .topic-item .cell-topic .topic-avatar {
                  top: 15px;
                  {vb:stylevar left}: 15px;
              }
              #htmlTag .l-small .topic-list-container .topic-list .cell-inlinemod-item {
                  {vb:stylevar right}: 12px;
                  top: 12px;
              }
              #htmlTag .topic-list-container .topic-list .topic-item .cell-topic {
                  overflow: hidden;
              }
              #htmlTag .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper {
                  margin-{vb:stylevar left}: 45px;
              }
              #htmlTag .topic-list-container .topic-list .topic-item td {
                  margin-{vb:stylevar left}: 0;
                  padding: 20px;
                  padding-{vb:stylevar left}: 65px;
                  border-bottom: 0;
              }
              #htmlTag .topic-list-container .topic-list .topic-item td.cell-lastpost {
                  border-bottom: solid 1px #F5F5F5;
              }
              #htmlTag .topic-list-container .topic-list .topic-item td:not(:nth-last-child(2)) {
                  padding-bottom: 5px;
              }
              #htmlTag .topic-list-container .topic-list .topic-item td:not(:first-child) {
                  padding-top: 5px;
              }
              #htmlTag #private-message-search #pmSearchText {
                  width: 100%;
              }
              #htmlTag #private-message-search #private-message-search-button-container {
                  {vb:stylevar right}: 2px;
              }
              #htmlTag[dir="rtl"] #channel-subtabbar ul li {
                  margin-right: 0 !important;
              }
          
              /* vB 5.2.3 mobile main menu */
              #htmlTag .b-comp-menu-dropdown--main-menu {
                  height: 65px;
                  line-height: 60px;
              }
              #htmlTag .b-comp-menu-dropdown--main-menu .b-icon__hamburger {
                  background-position: 0 0;
                  background-image: url("images/{vb:stylevar imgdir_button}/css/ico_vb_responsive.svg") !important;
                  width: 12px;
                  margin-{vb:stylevar left}: 10px;
              }
              #htmlTag .b-comp-menu-dropdown--main-menu:hover .b-icon__hamburger {
                  background-position: -16px 0;
              }
              #htmlTag .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content {
                  top: 65px;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.js-search-item {
                  background-color: #EBEBEB !important;
                  height: 50px !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.js-search-item:first-child {
                  height: 65px !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.js-search-item > a {
                  padding: 10px !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.js-search-item > form {
                  height: 40px !important;
                  padding: 15px 15px 10px !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.js-search-item > form > .search-term {
                  margin: 0 !important;
                  -webkit-box-shadow: none !important;
                  -moz-box-shadow: none !important;
                  box-shadow: none !important;
                  border: none 0 !important;
                  font-size: 13px !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.js-search-item > form > .search-btn {
                  border: none 0;
                  margin: 0px !important;
                  padding: 0px !important;
                  vertical-align: top;
                  height: 38px;
                  width: 38px;
                  background: {vb:stylevar header_tabbar_background};
                  cursor: pointer;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.js-search-item > form > .search-btn:hover {
                  background: {vb:stylevar header_tab_background_active} !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.js-search-item > form > .search-btn .vb-icon-search {
                  margin-{vb:stylevar left}: 2px !important;
                  margin-top: 2px !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.js-search-item + .js-search-item {
                  height: 30px !important;
                  border-top: none 0 !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.js-search-item + .js-search-item > a {
                  text-align: center !important;
                  height: 20px !important;
                  line-height: 20px !important;
                  font-size: 13px !important;
                  padding-top: 0 !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.js-search-item a:before {
                  display: none !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.js-search-item a:hover,
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.js-search-item:hover {
                  background-color: #EBEBEB !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li {
                  padding: 0 !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li[class*="indent"]:hover a {
                  background: {vb:stylevar header_tab_background_hover} !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li[class*="indent"] a {
                  font-size: 13px !important;
                  padding-{vb:stylevar left}: 37px !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li[class*="indent"] a:hover {
                  color: #FFFFFF !important;
                  padding-{vb:stylevar left}: 37px !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li[class*="indent"] a:before {
                  display: none !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li:not(.js-search-item) {
                  height: 50px !important;
                  line-height: 50px !important;
                  border-top: none 0 !important;
              }
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li a,
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li a:hover,
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.current a,
              #htmlTag #channel-tabbar .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content li.current a:hover {
                  height: 50px !important;
                  line-height: 50px !important;
                  padding-left: 15px !important;
                  padding-right: 15px !important;
                  border-bottom-width: 0 !important;
          
              }
          }
          
          media only screen and (max-width:460px) {
              #mobile-main-menu-sections,
              #mobile-main-menu-search {
                  width: 75%;
              }
          }
          media only screen and (max-width:480px) {
              html { 
                  webkit-text-size-adjust: 100%;
              }
              #htmlTag #mobile-main-menu-sections div.main-menu-control-sections {
                  padding-{vb:stylevar left}: 10px;
              }
              #htmlTag #channel-subtabbar ul li a {
                  margin-{vb:stylevar left}: 10px;
              }
              #htmlTag #mobile-main-menu .mobile-search .icon.h-right {
                  margin-{vb:stylevar right}: 10px;
              }
              #htmlTag ul#breadcrumbs {
                  padding: 20px 10px 10px;
              }
              #htmlTag .canvas-layout-container .canvas-widget {
                  padding: 10px;
              }
              #htmlTag .canvas-layout-container .canvas-widget .widget-header {
                  margin: -10px -10px 0 !important;
              }
              #htmlTag .view-mode .widget-no-border > .widget-header {
                  margin: 0 !important;
              }
              #htmlTag .forum-list-container .subforum-list > td {
                  padding-{vb:stylevar left}:49px;
              }
              #htmlTag .memberlist-widget .b-table .b-table-row {
                  padding: 10px;
              }
              #htmlTag .b-memberlist__member-details.l-col__flex-1 {
                  margin-{vb:stylevar left}: 70px;
              }
              #htmlTag .memberlist-widget .b-memberlist__member-details__row--small {
                  padding-{vb:stylevar left}: 0;
              }
              #htmlTag .b-memberlist__sortby--small {
                  height: 34px;
                  line-height: 34px;
                  margin-bottom: 10px;
              }
              #htmlTag .b-memberlist__sortby-overlay {
                  top: 48px;
              }
              #htmlTag .conversation-list.stream-view .list-item {
                  padding: 10px;
              }
              #htmlTag .l-small .b-post-control--responsive {
                  padding: 0 5px;
              }
              #htmlTag .search-results-widget .list-item-header > .avatar {
                  margin-{vb:stylevar right}: 0;
              }
              #htmlTag .search-results-widget .list-item-header > .avatar + .post-header {
                  margin-{vb:stylevar left}: 40px;
              }
              #htmlTag .conversation-list.stream-view .list-item-header .post-header {
                  width: 88%;
              }
              #htmlTag .conversation-list.stream-view .list-item-header .h-right.checkbox {
                  width: auto;
              }
              #htmlTag .button.primary {
                  /* Blue to darker blue gradient */
                  background-image: none !important;
                  background: {vb:stylevar button_primary_background} !important;
              }
              #htmlTag .button.secondary {
                  /* White to light gray gradient */
                  background-image: none !important;
                  background: {vb:stylevar button_secondary_background} !important;
              }
              #htmlTag .private-message-widget .button.light {
                  /* Lighter blue gradient */
                  background-image: none !important;
              }
              #htmlTag .button.primary:hover {
                  color: {vb:stylevar button_primary_background.color} !important;
              }
              #htmlTag .button.primary:hover,
              #htmlTag .button.secondary:hover {
                  background-color: transparent !important;
              }
              #htmlTag .forum-list-container .forum-list-header th:first-child span {
                  margin-{vb:stylevar left}: 10px;
              }
              #htmlTag .forum-list-container .forum-item td:first-child {
                  padding-{vb:stylevar left}: 10px;
              }
              #htmlTag .forum-list-container .forum-list-header .header-posts,
              #htmlTag .forum-list-container .forum-item .posts-count {
                  padding-{vb:stylevar right}: 10px;
              }
              #htmlTag .topic-list-container .topic-list-header .header-topic {
                  padding-{vb:stylevar left}: 10px;
              }
              #htmlTag .topic-list-container .topic-list .topic-item .cell-topic,
              #htmlTag .topic-list-container .topic-list .topic-item td {
                  padding: 10px;
                  padding-{vb:stylevar left}: 5px;
                  padding-{vb:stylevar right}: 5px;
                  box-sizing: border-box;
              }
              #htmlTag .topic-list-container .topic-list .topic-item .cell-topic {
              border-bottom: 0;
          }
          #htmlTag .topic-list-container .topic-list .topic-item td:first-child {
                  padding-{vb:stylevar left}: 10px;
                  padding-{vb:stylevar right}: 0px;
              }
              #htmlTag .topic-list-container .topic-list .topic-item td:last-child {
                  padding-{vb:stylevar right}: 5px;
              }
              #htmlTag .topic-list-container .topic-list .topic-item .cell-count,
              #htmlTag .topic-list-container .topic-list .topic-item .cell-lastpost {
                  padding: 0 10px 10px;
                  padding-{vb:stylevar left}: 55px;
              }
              #htmlTag .l-small .topic-list-container .topic-list .topic-item .cell-topic .topic-info {
                  font-size: 1em;
              }
              #htmlTag .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper {
                  font-size: 16px;
                  /*margin-{vb:stylevar left}: 0;*/
                  line-height: 1.3;
              }
              #htmlTag .cell-topic .vb-icon-topic-status {
                  margin-bottom: 10px;
              }
              #htmlTag .b-post__body {
                  padding: 10px !important;
              }
              #htmlTag .conversation-view > .conversation-toolbar-wrapper > .conversation-toolbar.mobile-search > ul.toolset-right > li.toolbar-search div.search-container {
                  width: 129px;
              }
              #htmlTag .conversation-view > .conversation-toolbar-wrapper > .conversation-toolbar.mobile-search > ul.toolset-right > li.toolbar-search div.search-container input {
                  width: 92px;
              }
              #htmlTag .button,
              #htmlTag .ui-widget .button,
              #htmlTag .b-button {
                  margin-bottom: 10px;
              }
              #htmlTag .section .section-content.table .tr .td {
                  padding: 10px !important;
              }
              #htmlTag .section .section-content.table .sub-section .section-content.table .tr .td {
                  padding: 10px 0 !important;
              }
              #htmlTag #privateMessageContainer .toolset.h-left {
                  padding: 10px 0;
              }
              #htmlTag .private-message-widget .split-button .split-button-wrapper .button-set button {
                  height: 40px;
              }
              #htmlTag .private-message-widget .split-button .split-button-wrapper .submenu {
                  top: 40px;
              }
              #htmlTag .private-message-widget .main-pane .message-list .message-item {
                  padding: 10px;
              }
              #htmlTag .private-message-widget .nav-pane {
                  padding-{vb:stylevar right}: 0;
              }
              #htmlTag table.list-container.message-list.pm-message-list.folder-message-list.topic-list-container.conversation-list > tbody > tr > td {
                  padding: 10px 5px;
              }
              #htmlTag table.list-container.message-list.pm-message-list.folder-message-list.topic-list-container.conversation-list > tbody > tr > td:first-child {
                  padding-{vb:stylevar left}: 10px;
              }
              #htmlTag table.list-container.message-list.pm-message-list.folder-message-list.topic-list-container.conversation-list > tbody > tr > td:last-child {
                  padding-{vb:stylevar right}: 10px;
              }
              #htmlTag .private-message-widget .cell-gotopost {
                  display: none;
              }
              #htmlTag .private-message-widget .main-pane .message-list .message-item .message-header {
                  height: auto;
              }
              #htmlTag .private-message-widget .main-pane .message-list .message-item .message-header .subject {
                  font-weight: normal;
                  height: auto;
              }
              #htmlTag #privateMessageContainer .deletedItems-list .list-item-body-wrapper {
                  margin-{vb:stylevar left}: 0;
              }
              #htmlTag #header {
                  display: block;
              }
              #htmlTag #header .header-cell {
                  width: 100%;
                  display: block;
                  position: relative;
                  top: 50%;
                  -webkit-transform: translateY(-50%);
                      -ms-transform: translateY(-50%);
                          transform: translateY(-50%);
              }
              #htmlTag #header .site-logo {
                  text-align: center;
                  width: 100%;
                  max-width: 100%;
                  min-width: 300px;
              }
              #htmlTag #header .site-logo img {
                  max-width: 100%;
              }
              #htmlTag .notices {
                  padding: 10px 10px 0;
              }
              #htmlTag .advancedSearchFields.form_layout {
                  padding: 10px !important;
              }
              #htmlTag .search-fields-widget .searchConfigFields .add-search-fieldset.form-fieldset input.searchFields_keywords,
              #htmlTag .search-fields-widget .searchConfigFields .add-search-fieldset.form-fieldset input.searchFields_author {
                  width: 93%;
              }
              #htmlTag .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {
                  padding-{vb:stylevar left}: 2px;
              }
              #htmlTag .forum-list-container .forum-item .cell-forum .rx-forum-stats,
              #htmlTag .forum-list-container .forum-item .cell-forum .rx-lastpost-info {
                  padding-{vb:stylevar left}: 39px;
                  padding-{vb:stylevar right}: 5px;
              }
              #htmlTag .l-row__fixed--right > .l-col__flex-6.l-col--flex-first > .l-col__flex-content {
                  margin-{vb:stylevar right}: 0px !important;
              }
              #htmlTag .l-xsmall .b-comp-menu-dropdown__trigger {
                  padding: 0.2em 0.9em;
              }
              #htmlTag .widget-tabs-panel .conversation-toolbar-wrapper > .conversation-toolbar > ul.toolset-right > li.toolbar-pagenav div.horizontal-arrows {
              width: 50px;
              }
              #htmlTag .widget-tabs-panel .conversation-toolbar-wrapper > .conversation-toolbar > ul.toolset-right > li.toolbar-pagenav div.horizontal-arrows a {
              width: 20px;
              }
              #htmlTag .private-message-widget .split-button .split-button-wrapper {
                  background-color: transparent !important;
              }
          }
          
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] .ui-dialog-titlebar {
              line-height: 24px;
              padding: 20px;
          }
          
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] .action-buttons #btnSaveEditSiteLogo,
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] .action-buttons #btnCancelEditSiteLogo {
              display: inline;
          }
          
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] .custom-upload-button,
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] #btnAttachLogo,
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] #btnSaveEditSiteLogo {
              background-image: none;
              background-color: #ced0d1;
              border: 0;
              box-shadow: none;
              color: #252c2f !important;
              text-shadow: none;
          }
          
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] #btnCancelEditSiteLogo,
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] #btnCancelEditSiteLogo:hover {
              background: {vb:stylevar header_tab_background_active} !important;
              text-shadow: none;
              color: #FFFFFF !important;
              border: 0;
          }
          #htmlTag .l-row__fixed--right > .l-col__flex-6.l-col--flex-first > .l-col__flex-content {
              /*margin-{vb:stylevar right}: 305px;*/
          }
          
          /* Logo upload dialog box fix */
          
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] .ui-dialog-titlebar {
              line-height: 24px;
              padding: 20px;
          }
          
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] .action-buttons #btnSaveEditSiteLogo,
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] .action-buttons #btnCancelEditSiteLogo {
              display: inline;
          }
          
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] .custom-upload-button,
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] #btnAttachLogo,
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] #btnSaveEditSiteLogo {
              background-image: none;
              background-color: #ced0d1;
              border: 0;
              box-shadow: none;
              color: #252c2f !important;
              text-shadow: none;
          }
          
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] #btnCancelEditSiteLogo,
          #htmlTag .ui-dialog[aria-labelledby="ui-dialog-title-edit-site-logo-dialog"] #btnCancelEditSiteLogo:hover {
              background: {vb:stylevar header_tab_background_active} !important;
              text-shadow: none;
              color: #FFFFFF !important;
              border: 0;
          }
          
          /* CKE bottom */
          
          #htmlTag .cke_bottom {
              background: {vb:stylevar contententry_toolbar_background};
              border-top: solid 1px #DADADA;
              box-shadow: none;
          }
          
          #htmlTag .conversation-toolbar-wrapper.top {
              margin-top: -1px !important;
          }
          #htmlTag #media-tab .conversation-toolbar-wrapper.top {
              margin-top: 1px !important;
          }
          #htmlTag .slideshow .slideshow-wrapper > .close-btn {
              background-position: -205px -174px;
              border: solid 1px transparent;
          }
          #htmlTag[dir="rtl"] .b-icon__tool-advanced {
              background-position: -497px -208px;
              width: 14px;
          }
          #htmlTag[dir="rtl"] .b-toolbar__item--active .b-icon__tool-advanced,
          #htmlTag[dir="rtl"] .b-icon__tool-advanced--active,
          #htmlTag[dir="rtl"] .b-icon__tool-advanced:hover {
              background-position: -513px -208px;
          }
          #htmlTag .split-button .split-button-wrapper .button-set .button-text .b-button__text-secondary {
              margin-{vb:stylevar left}: 0;
          }
          #htmlTag .private-message-widget .folder-item.custom-folder.edit-folder-mode .edit-folder-box {
              height: 24px;
          }
          #htmlTag .private-message-widget .folder-item.custom-folder.edit-folder-mode .edit-folder-box + .vb-icon-delete {
              background-position: -352px -80px;
          }
          #htmlTag[dir="rtl"] .profile-menulist .profile-menulist-item > a > .subscriptions-count {
              float: left;
          }
          #htmlTag[dir="rtl"] .b-icon__tool-attachment {
              background-position: -465px -208px;
          }
          #htmlTag[dir="rtl"] .b-toolbar__item--active .b-icon__tool-attachment,
          #htmlTag[dir="rtl"] .b-icon__tool-attachment--active,
          #htmlTag[dir="rtl"] .b-icon__tool-attachment:hover {
              background-position: -481px -208px;
          }
          #htmlTag .b-button--primary-light:focus,
          #htmlTag .b-button--primary-light:hover {
              color: {vb:stylevar button_primary_light_border.color};
          }
          
          #htmlTag .topic-list-container .topic-list-header th {
              line-height: 50px;
              background: #473251;
          }
          #htmlTag .l-narrow-column .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper,
          #htmlTag .l-small .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper {
              padding-{vb:stylevar left}: 0;
          }
          #htmlTag .js-footer-chooser-list .b-comp-menu-dropdown--open .b-comp-menu-dropdown__trigger {
              background-color: #FFFFFF;
          }
          #htmlTag .js-footer-chooser-list .b-comp-menu-dropdown__content-item {
              border-top-style: solid;
              border-top-color: #F5F5F5;
          }
          #htmlTag .js-footer-chooser-list .b-comp-menu-dropdown__content-item:hover,
          #htmlTag #footer-tabbar .b-comp-menu-dropdown--open .b-comp-menu-dropdown__content-item:hover {
              background-color: #F5F5F5;
          }
          #htmlTag #main-navbar > ul > li > a {
              padding: 0 6px;
          }
          #htmlTag .b-comp-menu-dropdown .b-comp-menu-dropdown__content > li > a {
              line-height: 23px;
              height: 23px;
          }
          #htmlTag .search-controls .b-comp-menu-dropdown__trigger {
              background: #EEEEEE;
              padding: 2px 7px;
              margin-{vb:stylevar right;}: 6px;
              font-weight: bold;
              border: 1px solid #DADADA;
              color: #555555;
              line-height: 30px;
          }
          #htmlTag .search-controls .b-comp-menu-dropdown--open .b-comp-menu-dropdown__trigger,
          #htmlTag #footer-tabbar .b-comp-menu-dropdown--open .b-comp-menu-dropdown__trigger {
              background-color: #FFFFFF;
              border-color: #FFFFFF;
          }
          #htmlTag .button-set.js-button-filters .js-button-filter.b-button--secondary:not(.js-checked) {
              color: #555555;
          }
          #htmlTag .ui-widget input,
          #htmlTag .ui-widget select,
          #htmlTag .ui-widget textarea,
          #htmlTag .ui-widget button {
              font-family: 'Noto Sans',sans-serif;
              font-size: 13px;
          }
          #htmlTag .b-comp-menu-dropdown--main-menu .b-comp-menu-dropdown__content-item > a {
              margin: inherit !important;
              padding: inherit;
          }
          #htmlTag .l-xsmall .b-comp-menu-dropdown {
              font-size: 13px;
          }
          #htmlTag .b-icon__pm {
              background-position: -46px -78px;
          }
          
          /* vB Messenger */
          
          #htmlTag .b_menu__dropdownbutton {
              font-size: inherit !important;
              font-weight: inherit !important;
          }
          #htmlTag .b_menu__dropdown--active {
              background: transparent none;
          }
          #htmlTag .b-menu__dropdown-submenu.b-pmchat__message-list {
              background-color: #252525;
              border: none 0;
              box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
          }
          #htmlTag .b-menu__dropdown-submenu.b-pmchat__message-list li {
              border-bottom-color: #303030 !important;
              border-top: none 0;
          }
          #htmlTag .b-menu__dropdown-submenu.b-pmchat__message-list li:hover {
              background-color: #252525;
          }
          #htmlTag .b-menu__dropdown-submenu.b-pmchat__message-list li > a {
              line-height: 35px !important;
          }
          
          #forumbit-first, #forumbit-middle {
              border-right: medium none white;
          }
          .trow1, .trow2 {
              background: white none repeat scroll 0 0;
              border-bottom: 1px solid #151515;
              border-top: 1px solid #303030;
          }
          table {
              color: #a0a0a0;
              font-size: 14px;
              text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
          }
          body {
              color: #a0a0a0;
              font-family: Roboto,sans-serif;
          }
          #container, body {
              font-size: 14px;
              line-height: 1.4;
              text-align: left;
          }
          #htmlTag .forum-item, #htmlTag .subforum-list {
              background-color: #252525;
          }
          #htmlTag #content {
          background: #252525;
          }
          
          .page-title-widget .module-title, .page-title-widget .module-title h1 {
              display: none;
              }
          .b-post__body {
              border-left: 1px solid #151515;
          }
          
          #header { position: relative; }
          #header .header-cell { width: 100%; }
          #header .site-logo, #header .site-logo img { max-width: 100%; } /* makes logo spans the width of the header */
          #header .site-logo { padding: 0; } /* remove padding around the banner logo */
          #header .toolbar {
              position: absolute;
              right: 0; /* for LTR languages (change right to left for RTL; see note below) */
              bottom: 3px; /* you may need to adjust this accordingly */
              padding: 0;
              width: auto;
          }
          /* reduce search box width from 168px to 120px or any size if you want */
          .search-container .search-box .search-term { width: 120px; }
          
          
          .canvas-layout-container .canvas-widget {
                   border: 0px solid #151515;
          -moz-border-radius-topleft:0px !important;
          -moz-border-radius-topright:0px !important;
          -webkit-border-top-left-radius:0px !important;
          -webkit-border-top-right-radius:0px !important;
          border-top-left-radius:0px !important;
          border-top-right-radius:0px !important;
          }
          }
          .canvas-widget.default-widget, .search-widget, .blogsidebar-widget {
               border: 2px solid #151515;
          -moz-border-radius-topleft:10px !important;
          -moz-border-radius-topright:10px !important;
          -webkit-border-top-left-radius:10px !important;
          -webkit-border-top-right-radius:10px !important;
          border-top-left-radius:10px !important;
          border-top-right-radius:10px !important;
          -moz-border-radius-bottomleft:10px !important;
          -moz-border-radius-bottomright:10px !important;
          -webkit-border-bottom-left-radius:10px !important;
          -webkit-border-bottom-right-radius:10px !important;
          border-bottom-left-radius:10px !important;
          border-bottom-right-radius:10px !important;
          }

          Comment


          • #6
            Stylevars don't work in css_additional anymore where they used to. This is a bug that should be fixed. I'm not sure if there's a JIRA for this.

            GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

            Comment


            • #7
              Originally posted by Glenn Vergara View Post
              Stylevars don't work in css_additional anymore where they used to. This is a bug that should be fixed. I'm not sure if there's a JIRA for this.


              So so what do you suggest I do from here?

              Comment


              • #8
                Hardcode them. You don't support RTL anyway, right?

                GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                Comment


                • #9
                  Originally posted by Glenn Vergara View Post
                  Hardcode them. You don't support RTL anyway, right?
                  Easy enough. Sorry if this is a noob question, but how do I know which sprite icon is for each variable as they don't tell me which one to look for? Do I just replace everything with:

                  images/quarto/red/css/sprite_icons_vb_ltr.png
                  or
                  images/quarto/red/css/sprite_icons_vb_rtl.png

                  There's also a lot more

                  Comment


                  • #10
                    I think this is what you need.

                    images/quarto/red/css/sprite_icons_vb_ltr.png

                    GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                    Comment


                    • #11
                      Originally posted by Glenn Vergara View Post
                      I think this is what you need.

                      images/quarto/red/css/sprite_icons_vb_ltr.png
                      What about the svg files?

                      Code:
                      #htmlTag .b-button__icon {
                          background-image: url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") !important;
                      }
                      Code:
                      #htmlTag .b-editor .cke_top .b-icon__x-circle--dark,
                      #htmlTag .b-form-select__select .selectBox-arrow,
                      #htmlTag .b-icon {
                          background-image: url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") !important;
                      }
                      [code]#htmlTag .button.follow-btn .button-icon,
                      #htmlTag .button.follow_button .button-icon,
                      #htmlTag .button.share-btn .button-icon {
                      background-image: url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg");
                      width:14px;
                      height:9px;
                      }[/ecod]

                      [code]#htmlTag .content-entry-box .action-buttons .fb-publish span,
                      #htmlTag .dialog-container.ui-dialog .ui-dialog-titlebar-close .ui-icon,
                      #htmlTag .pollresults-data tr td.pollvoter-cell .voter-icon {
                      background-image: url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg");
                      }[code]

                      Code:
                      }
                      #htmlTag .slideshow .slideshow-wrapper > .jcarousel-next-horizontal,
                      #htmlTag .slideshow .thumbnails > .jcarousel-next-horizontal,
                      #htmlTag .slideshow .slideshow-wrapper > .jcarousel-prev-horizontal,
                      #htmlTag .slideshow .thumbnails > .jcarousel-prev-horizontal,
                      #htmlTag .conversation-list.stream-view .list-item-header .info .subscribed span,
                      #htmlTag .conversation-list.stream-view .list-item-header .info .joined span,
                      #htmlTag .private-message-widget .pending-posts-container .photo-count .icon,
                      #htmlTag .pending-post-overlay-container button .button-icon,
                      #htmlTag #main-navbar .lnkAdminCP a .icon,
                      #htmlTag .selectBox-dropdown .selectBox-arrow,
                      #htmlTag #pmFloatingBarContent button .button-icon,
                      #htmlTag .profile-sidebar-widget .profileContainer .profile-acct .edit-user-link,
                      #htmlTag .profile-sidebar-widget .profileContainer .profile-acct .edit-user-link:hover,
                      #htmlTag .profileNavOuter .icon,
                      #htmlTag #edit-navbar .navbar-list .nav-item-controls > .navbar-item-delete,
                      #htmlTag #edit-navbar .navbar-list .nav-item-controls > .navbar-item-edit,
                      #htmlTag #edit-navbar .navbar-list .nav-item-controls > .navbar-item-opensubnav,
                      #htmlTag #add-modules .category-arrow-left,
                      #htmlTag #create-new-module-dialog .category-arrow-left,
                      #htmlTag #add-modules .category-arrow-right,
                      #htmlTag #create-new-module-dialog .category-arrow-right,
                      #htmlTag .page_manager_table .buttons span,
                      #htmlTag .dataTables_wrapper .axdtable .axdtable-action .editlink > span,
                      #htmlTag .dataTables_wrapper .axdtable .axdtable-action .deletelink > span,
                      #htmlTag .dataTables_wrapper .axdtable .axd-cell > span,
                      #htmlTag .vb-icon,
                      #htmlTag .forum-list-container .forum-item .cell-forum .icon,
                      #htmlTag .forum-list-container .subforum-list .subforum-item .icon,
                      #htmlTag .forum-list-container .forum-item.sub .cell-forum .icon,
                      #htmlTag .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper .go-to-first-unread,
                      #htmlTag .topic-list-container .topic-list .topic-item .cell-lastpost .go-to-last-post,
                      /*#htmlTag .moderationmenu_container .moderation-mainmenu .moderation > span,*/
                      #htmlTag .adminmenu_container .admin-mainmenu .moderation > span,
                      /*#htmlTag .moderationmenu_container .moderation-mainmenu .administrative > span ,*/
                      #htmlTag .adminmenu_container .admin-mainmenu .administrative > span,
                      #htmlTag .notice > .close,
                      #htmlTag .faqs .ui-accordion .ui-accordion-header .ui-icon,
                      #htmlTag .faqs .faq-search-title .ui-icon,
                      #htmlTag .faqs .ui-accordion .ui-state-active .ui-icon,
                      #htmlTag #private-message-search #private-message-search-button-container #btnSearchPM:before,
                      #htmlTag .conversation-list.stream-view .list-item.list-item-channel.list-item-forum .avatar .forum-icon,
                      #htmlTag .b-comp-menu-dropdown__trigger-icon--gear-icon,
                      #htmlTag .b-comp-menu-dropdown__trigger-icon--topic-icon {
                          background-image: url("images/{vb:stylevar imgdir_button}/red/css/sprite_icons_vb_{vb:stylevar textdirection}.svg");
                      }
                      Code:
                      /* Responsive image paths */
                          #htmlTag #mobile-main-menu-sections .sections-menu-icon .icon,
                          #htmlTag #mobile-main-menu-sections .sections-icon .icon,
                          #htmlTag #mobile-main-menu-sections .selected-sections-icon .icon,
                          #htmlTag #channel-tabbar ul li .mobile.dropdown-icon .icon
                              {background-image: url("images/{vb:stylevar imgdir_button}/css/ico_vb_responsive.svg");}
                      
                          #htmlTag #searchForm fieldset label {background-image: url("images/quarto/red/css/ico_vb_responsive.svg");}
                          #htmlTag #searchForm fieldset .search-btn {background-image: url("images/quarto/red/css/ico_vb_responsive.svg");}
                      
                      #htmlTag .edit-mode .canvas-layout-container .widget-header .module-buttons .module-button-item.axd-edit-button span {
                          background:transparent url("images/css/sprite_icons_{vb:stylevar textdirection}.png") no-repeat scroll -32px -64px;
                      }
                      #htmlTag .edit-mode .canvas-layout-container .widget-header .module-buttons .module-button-item.close-button span {
                          background:transparent url("images/css/sprite_icons_{vb:stylevar textdirection}.png") no-repeat scroll 0 -64px;
                      }
                      #htmlTag .edit-mode .canvas-layout-container .widget-header .module-buttons .module-button-item.toggle-button.collapse span {
                          background:transparent url("images/css/sprite_icons_{vb:stylevar textdirection}.png") no-repeat scroll -96px -64px;
                      }
                      #htmlTag .edit-mode .canvas-layout-container .widget-header .module-buttons .module-button-item.toggle-button.expand span {
                          background:transparent url("images/css/sprite_icons_{vb:stylevar textdirection}.png") no-repeat scroll -128px -64px;
                      }
                      #htmlTag .edit-mode .dialog-container.dialog-box .dialog-content .icon.warning-icon {
                          background: url("images/css/sprite_icons_{vb:stylevar textdirection}.png") no-repeat scroll 0 -96px transparent;
                      }
                      
                      <vb:comment>Add the "posted" overlay</vb:comment>
                      #htmlTag .posted .vb-icon-topic-status {
                          background:
                              url("images/{vb:stylevar imgdir_button}/topic-posted-{vb:stylevar textdirection}.svg") no-repeat,
                              url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") -68px -240px;
                      }
                      #htmlTag .posted.read .vb-icon-topic-status {
                          background:
                              url("images/{vb:stylevar imgdir_button}/topic-posted-{vb:stylevar textdirection}.svg") no-repeat,
                              url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") -100px -240px;
                      }
                      #htmlTag .posted.closed .vb-icon-topic-status {
                          background:
                              url("images/{vb:stylevar imgdir_button}/topic-posted-{vb:stylevar textdirection}.svg") no-repeat,
                              url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") -132px -240px;
                      }
                      #htmlTag .posted.deleted .vb-icon-topic-status {
                          background:
                              url("images/{vb:stylevar imgdir_button}/topic-posted-{vb:stylevar textdirection}.svg") no-repeat,
                              url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") -228px -240px;
                      }
                      
                          media only screen and (max-width:767px) {
                      
                          }
                          #htmlTag #mobile-main-menu .mobile-search .icon {
                              background-image: url("images/quarto/red//css/ico_vb_responsive.svg");
                          }
                      
                      }
                      
                      media only screen and (max-width:479px) {
                        #htmlTag .blogAdminActive:after {
                          background-image: url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") !important;
                        }

                      Comment


                      • #12
                        Check your server which directory those SVGs and sprite icons for Quarto theme are located and update the URL accordingly.

                        GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                        Comment


                        • #13
                          Originally posted by Glenn Vergara View Post
                          Stylevars don't work in css_additional anymore where they used to. This is a bug that should be fixed. I'm not sure if there's a JIRA for this.
                          It is actually by design as that template is designated as "Text Only". The change was made to make it available to vBulletin Cloud.
                          Translations provided by Google.

                          Wayne Luke
                          The Rabid Badger - a vBulletin Cloud demonstration site.
                          vBulletin 5 API - Full / Mobile
                          Vote for your favorite feature requests and the bugs you want to see fixed.

                          Comment


                          • #14
                            Originally posted by Glenn Vergara View Post
                            Check your server which directory those SVGs and sprite icons for Quarto theme are located and update the URL accordingly.
                            So each one is ltr and not the other file? That's what I'm confused on

                            Comment


                            • #15
                              Replace {vb:stylevar imgdir_button} with the subdirectory that holds your sprint.

                              Replace {vb:stylevar textdirection} with ltr.

                              Or you can replace the entire url with the url directly to your image.
                              Translations provided by Google.

                              Wayne Luke
                              The Rabid Badger - a vBulletin Cloud demonstration site.
                              vBulletin 5 API - Full / Mobile
                              Vote for your favorite feature requests and the bugs you want to see fixed.

                              Comment

                              Related Topics

                              Collapse

                              Working...
                              X