Style var broke

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • THVossen
    Member
    • Oct 2016
    • 71
    • 5.2.x

    Style var broke

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



    Anyone know what I did wrong?
  • BirdOPrey5
    Senior Member
    • Jul 2008
    • 9613
    • 5.6.3

    #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

    • THVossen
      Member
      • Oct 2016
      • 71
      • 5.2.x

      #3
      Originally posted by Joe D.
      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

      • BirdOPrey5
        Senior Member
        • Jul 2008
        • 9613
        • 5.6.3

        #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

        • THVossen
          Member
          • Oct 2016
          • 71
          • 5.2.x

          #5
          Originally posted by Joe D.
          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;
          }
          
              [USER="3396"]media[/USER] 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");
              }
          
          }
          
          [USER="3396"]media[/USER] 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;
          }
          [USER="3396"]media[/USER] 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 */
          
          [USER="3396"]media[/USER] 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 */
          
          [USER="3396"]media[/USER] 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;
          
              }
          }
          
          [USER="3396"]media[/USER] only screen and (max-width:460px) {
              #mobile-main-menu-sections,
              #mobile-main-menu-search {
                  width: 75%;
              }
          }
          [USER="3396"]media[/USER] 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

          • glennrocksvb
            Former vBulletin Developer
            • Mar 2011
            • 3957
            • 5.7.X

            #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.

            Flag Icon Postbit Insert GIPHY Impersonate User INITIALS AVATAR Better Name Card Quote Selected Text Collapsed PM Post Footer Translate Stop Links in Posts +MORE!

            Comment

            • THVossen
              Member
              • Oct 2016
              • 71
              • 5.2.x

              #7
              Originally posted by Glenn Vergara
              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

              • glennrocksvb
                Former vBulletin Developer
                • Mar 2011
                • 3957
                • 5.7.X

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

                Flag Icon Postbit Insert GIPHY Impersonate User INITIALS AVATAR Better Name Card Quote Selected Text Collapsed PM Post Footer Translate Stop Links in Posts +MORE!

                Comment

                • THVossen
                  Member
                  • Oct 2016
                  • 71
                  • 5.2.x

                  #9
                  Originally posted by Glenn Vergara
                  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

                  • glennrocksvb
                    Former vBulletin Developer
                    • Mar 2011
                    • 3957
                    • 5.7.X

                    #10
                    I think this is what you need.

                    images/quarto/red/css/sprite_icons_vb_ltr.png

                    Flag Icon Postbit Insert GIPHY Impersonate User INITIALS AVATAR Better Name Card Quote Selected Text Collapsed PM Post Footer Translate Stop Links in Posts +MORE!

                    Comment

                    • THVossen
                      Member
                      • Oct 2016
                      • 71
                      • 5.2.x

                      #11
                      Originally posted by Glenn Vergara
                      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;
                      }
                      
                          [USER="3396"]media[/USER] only screen and (max-width:767px) {
                      
                          }
                          #htmlTag #mobile-main-menu .mobile-search .icon {
                              background-image: url("images/quarto/red//css/ico_vb_responsive.svg");
                          }
                      
                      }
                      
                      [USER="3396"]media[/USER] 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

                      • glennrocksvb
                        Former vBulletin Developer
                        • Mar 2011
                        • 3957
                        • 5.7.X

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

                        Flag Icon Postbit Insert GIPHY Impersonate User INITIALS AVATAR Better Name Card Quote Selected Text Collapsed PM Post Footer Translate Stop Links in Posts +MORE!

                        Comment

                        • Wayne Luke
                          vBulletin Technical Support Lead
                          • Aug 2000
                          • 73464
                          • 6.0.X

                          #13
                          Originally posted by Glenn Vergara
                          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

                          Comment

                          • THVossen
                            Member
                            • Oct 2016
                            • 71
                            • 5.2.x

                            #14
                            Originally posted by Glenn Vergara
                            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

                            • Wayne Luke
                              vBulletin Technical Support Lead
                              • Aug 2000
                              • 73464
                              • 6.0.X

                              #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

                              Comment

                              Related Topics

                              Collapse

                              Working...
                              😀
                              😂
                              🥰
                              😘
                              🤢
                              😎
                              😞
                              😡
                              👍
                              👎