dd-wrt-forum-inspired-themes.user.styl

/* ==UserStyle==
@name           DD-WRT Forum Inspired Themes
@namespace      github.com/style-it-themes/dd-wrt-forum-inspired-themes
@description    Customizable dark themes for the DD-WRT phpBB forums
@author         Style-it Themes: the-j0k3r
@homepageURL    https://github.com/style-it-themes/dd-wrt-forum-inspired-themes
@supportURL     https://github.com/style-it-themes/dd-wrt-forum-inspired-themes/issues/new/choose
@updateURL      https://github.com/style-it-themes/dd-wrt-forum-inspired-themes/raw/main/dd-wrt-forum-inspired-themes.user.styl
@version        1.9.0
@license        MIT
@preprocessor stylus

@var checkbox sdetails     'Show style details'       1

@var select   cg_theme     'Preset themes toggle'     {
    'Custom colors   *' :  'custom-style'  ,
    'Antigua          ' :  'antigua'       ,
    'Dracula          ' :  'dracula'       ,
    'Duo Cocoa        ' :  'duo-cocoa'     ,
    'Material         ' :  'material'      ,
    'Material Darker  ' :  'material-dkr'  ,
    'Solarized Dark   ' :  'solarized-dark',
    'Twilight         ' :  'twilight'      ,
    'The Matrix       ' :  'the-matrix'    ,
    'Ubuntu           ' :  'ubuntu'        ,
}

@var color    cg_bg        'Custom background         ' #111a22
@var color    cg_fg        'Custom foreground         ' #f2f4ff
@var color    cg_ac        'Custom accent             ' #4f74e3

@var range    cg_sat       'Saturation of RGB colors  ' [0, -50, 40, 0.01]
@var range    cg_lig       'Lightness of gray colors  ' [0, -30, 30, 0.01]

@var checkbox new-top-menu 'Use top menu redesign     ' 0
@var checkbox max-vertical 'Maximize vertical height  ' 1
@var checkbox show-hdr-txt 'Show header text          ' 0
@var checkbox avatar_soh   'Avatar on hover scale     ' 0
@var checkbox emoji_new    'Enable emoji override     ' 1
@var checkbox topic-review 'Topic review fixes note   ' 0
@var checkbox stable-scrll 'Stable scrollbar gutter   ' 1

@var text     transition   'Define transition value   ' 'all .15s cubic-bezier(0.3, 0, 0.5, 1)'

==/UserStyle== */
// Helpers.
rq        = unquote
stinfo    = 'DD-WRT Forum Inspired Themes v1.9.0'
copyright = '© 2021 Style-it-themes: the-j0k3r'
license   = 'MIT'
homeURL   = 'https://github.com/style-it-themes/dd-wrt-inspired-themes'
t         = transparent
i         = !important
vendors   = official

// Convert colors to HSLA format.
// NOTE: This is done just for consistency of generated colors.
to_hsla(input) {
  $h = {}
  $h.hue = rq(split('deg', '%s' % ceil(hue(input), 2))[0])
  $h.saturation = ceil(saturation(input), 2)
  $h.lightness = ceil(lightness(input), 2)
  s('hsla(%s,%s,%s,1)', $h.hue, $h.saturation, $h.lightness)
}

// SVG-friendly colors mixin.
// NOTE: Compiler does not like HSLA format, so we convert back to HEX.
to_hex(input) {
  s('\%23%s', rq(substr(s('%s', convert(input)), 1, 6)))
}

// Color mixin.
// All colors: `c: fg bd bg`
// Only border-color: `c: 0 bd`
c(x, y = 0, z = 0, xi = 1, yi = 1, zi = 1) {
  if x != 0 && x != '_' {            color: xi is 0 ? x : x i }
  if y != 0 && y != '_' {     border-color: yi is 0 ? y : y i }
  if z != 0 && z != '_' { background-color: zi is 0 ? z : z i }
}

// SVG colors.
g(x, y = 0, xi = 1, yi = 1) {
  if x != 0 && x != '_' {   fill: xi is 0 ? x : x i }
  if y != 0 && y != '_' { stroke: yi is 0 ? y : y i }
}

// Border radius mixin.
rad() { border-radius: arguments }
// Box-shadow mixin.
bsh() { box-shadow: arguments }
tsh() { text-shadow: arguments }

// Color generator.
// NOTE: Fix the scope to avoid conflicts.
/{
  // Generator -> Color-schemes.
  ColorSchemes = {
    'custom-style'   : { BG:   cg_bg, FG:   cg_fg, AC:   cg_ac }
    'antigua'        : { BG: #14191f, FG: #f1f6fb, AC: #89a90a }
    'dracula'        : { BG: #282A36, FG: #f8f8f2, AC: #bd93f9 }
    'duo-cocoa'      : { BG: #28231f, FG: #ffdac2, AC: #dfb249 }
    'material'       : { BG: #263238, FG: #eeffff, AC: #89ddff }
    'material-dkr'   : { BG: #212121, FG: #eeffff, AC: #82aaff }
    'solarized-dark' : { BG: #002b36, FG: #fdf6e3, AC: #268bd2 }
    'twilight'       : { BG: #141414, FG: #f7f7f7, AC: #8f9d6a }
    'the-matrix'     : { BG: #000000, FG: #ffffff, AC: #00ff00 }
    'ubuntu'         : { BG: #2c071a, FG: #f2f1ef, AC: #ef7847 }
  }

  // Select active color-scheme.
  for color-scheme in ColorSchemes {
    if (color-scheme == cg_theme) {
      define('BG', ColorSchemes[color-scheme].BG, global)
      define('FG', ColorSchemes[color-scheme].FG, global)
      define('AC', ColorSchemes[color-scheme].AC, global)
    }
  }

  // Color values and hues.
  // NOTE: List with anonymous hashes.
  colors = (
    { key: bg, color:   BG } \
    { key: fg, color:   FG } \
    { key: v0, color:   AC } \
    { key: v1, hue:   0deg } \
    { key: v2, hue:  30deg } \
    { key: v3, hue:  60deg } \
    { key: v4, hue: 120deg } \
    { key: v5, hue: 180deg } \
    { key: v6, hue: 210deg } \
    { key: v7, hue: 270deg } \
    { key: v8, hue: 300deg } \
    { key: v9, hue:   0deg } \
  )

  // Alias colors.
  $bg = colors[0]
  $fg = colors[1]

  // Generate background colors.
  for num in 0..5 {
    $color = $bg.color
    if num == 1 {} // Skip base BG color.
    else if num == 0 { $color = darken($color, 10%) }
    else { $color = lighten($color, (num + 2) * num / 2%) }
    $color = to_hsla($color)

    $key = s('%s%s', $bg.key, num)
    $val = 'var(--%s-%s)' % (($bg.key) (num))
    define('$' + $key, $color, global)
    define('' + $key, $val, global)
  }

  // Generate foreground colors.
  for num in 0..5 {
    $color = $fg.color
    if num == 1 { return } // Skip base FG color.
    else if num == 0 { $color = lighten($color, 10%) }
    else { $color = darken($color, (num + num / 1.25) * 5%) }

    $color = to_hsla($color)

    $key = s('%s%s', $fg.key, num)
    $val = 'var(--%s-%s)' % (($fg.key) (num))
    define('$' + $key, $color, global)
    define('' + $key, $val, global)
  }

  // Generate all other colors.
  for c, i in colors[2..length(colors)] {
    $sel  = colors[i + 2]

    for num in 0..9 {
      // Case for accent colors.
      if ($sel.key == v0) {
        $color = darken($sel.color, (80% - ((num + num / 3) * 7.5)))
        $color = darken($sel.color, (100% - (num + 3) * 7.5))
        $color = lightness($color, lightness($color) + num)
      }

      // Case for gray colors.
      else if ($sel.key == v9) {
        $color = hsl($sel.hue, 0%, 50% + cg_lig)
        $color = darken($color, (100% - (num + 2) * 17))
      }

      // Case for RGB colors.
      else {
        $hue   = $sel.hue
        $color = hsl($hue, 60% + cg_sat, 60% + cg_lig)
        $color = darken($color, (100% - (num + 2) * 7.5))
        $color = lightness($color, lightness($color) + num)
      }

      // Convert to HSLA format.
      $color = to_hsla($color)

      $key = s('%s%s', $sel.key, num)
      $val = 'var(--%s-%s)' % (($sel.key) (num))
      define('$' + $key, $color, global)
      define(''  + $key, $val, global)
    }
  }
}
@-moz-document regexp('https?://forum.dd-wrt.com/(?!wiki|demo).*$') {
  // global section triggers and variables
  :root {
    // show style name/version/copyright
    // when inspecting the code or using compiled CSS this info is auto added now.
    --style-name: rq(stinfo)
    --copyright: rq(copyright)
    --license: rq(license)
    --home-url : rq(homeURL)

    // Generate CSS color variables.
    colors = (bg fg v0 v1 v2 v3 v4 v5 v6 v7 v8 v9)
    for color in colors[0..1] {
      for tone in 0..5 {
        { '--%s-%s' % ((color) (tone)) }: $ + color + tone
      }
    }
    for color in colors[2..length(colors)] {
      for tone in 0..9 {
        { '--%s-%s' % ((color) (tone)) }: $ + color + tone
      }
    }
    // remap generated accent colors + keep v09 as 1:1 AC
    shade = (dark(BG)) ? darken : lighten

    --v0-0: mix(shade(BG,  0%), AC, 90%)
    --v0-1: mix(shade(BG, 40%), AC, 80%)
    --v0-2: mix(shade(BG, 40%), AC, 70%)
    --v0-3: mix(shade(BG, 40%), AC, 60%)
    --v0-4: mix(shade(BG, 65%), AC, 50%)
    --v0-5: mix(shade(BG, 50%), AC, 40%)
    --v0-6: mix(shade(BG, 50%), AC, 30%)
    --v0-7: mix(shade(BG, 50%), AC, 20%)
    --v0-8: mix(shade(BG, 50%), AC, 10%)
    --v0-9: mix(shade(BG, 50%), AC, 0%)

    // rgba BG/AC vars
    --rgba-bg-03: rgba(convert($bg1), .3)
    --rgba-bg-04: rgba(convert($bg1), .4)
    --rgba-bg-05: rgba(convert($bg5), .5)
    // Code areas
    --code-bg: darken(BG, 20%)
  }
  if (avatar_soh) {
    /img[src*='avatars'] {
      transition: .33333s ease-in-out
      &:hover {
        transform: scale(1.8)
        margin-left: 1.63333rem
        margin-top: 2.2rem
        margin-bottom: 1rem
        cursor: help
      }
    }
  }
  // reset min height when page says you are working too fast.
  #content {
    min-height: initial
  }
  if (sdetails) {
    .forum #footer {
      border-top: 0
      div:first-of-type::after {
        content: '- Styled with: ' + stinfo i
        bsh: 0 1px darken(convert($bg0), 20%)
        color: v09
      }
    }
  }
  // the on hover orange dd-wrt buttons that dont belong to the forums
  // Because adding transitions to forums touched this and it cant handle anything else.
  #menu_sub a {
    transition: background .2s ease-in
  }

  // fix fuckery with phpbb terrible craziness images displaying where they should not
  // e.g. https://forum.dd-wrt.com/phpBB2/viewtopic.php?p=170921#170921
  [class*='row'].navigation td {
    div[style='position:absolute'] {
      position: relative i
      a img[src*='icq'] {
        margin-top: -1.633rem
        margin-left: calc(24.355rem - .70rem )
      }
    }
  }
  // fix icq badge inline
  // e.g. https://forum.dd-wrt.com/phpBB2/viewtopic.php?p=170921#170921
  img[src*='web.icq'] {
    width: 0
    height: 0
  }
  @keyframes pulse {
    0% { transform: scale(1) }
    50% { transform: scale(1.2); filter: brightness(1.2) }
    100% { transform: scale(1) }
  }
  img {
    image-rendering: smooth
    transition: transition
    &[title*='profile'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="52" y="37" fill="' + to_hex($v99) + '" '
      path  += 'font-weight="100" font-size="20px">\1F6C8\00A0</text>'
      path  += '<text x="73" y="34" fill="' + to_hex($v98) + '" '
      path  += 'font-weight="900" font-size="14px">'profile'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-top: 23px
      padding-right: 78px
      vertical-align: -.1rem
      background-size: 150px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='icon_pm'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="52" y="37" fill="' + to_hex($v99) + '" '
      path  += 'font-weight="900" font-size="20px">\1F5E9\00A0</text>'
      path  += '<text x="85" y="34" fill="' + to_hex($v98) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="900" font-size="14px">'pm'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-top: 23px
      padding-right: 78px
      vertical-align: -.1rem
      background-size: 150px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='icon_www'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="50" y="37" fill="' + to_hex($v98) + '" '
      path  += 'font-weight="600" font-size="16px">\1F517\00A0</text>'
      path  += '<text x="75" y="34" fill="' + to_hex($v98) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="900" font-size="14px">'www'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-top: 23px
      padding-right: 78px
      vertical-align: -.1rem
      background-size: 150px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='icon_email'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="52" y="37" fill="' + to_hex($v98) + '" '
      path  += 'font-weight="900" font-size="18px">\0040\00A0</text>'
      path  += '<text x="73" y="34" fill="' + to_hex($v98) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="900" font-size="14px">'email'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-top: 23px
      padding-right: 78px
      vertical-align: -.1rem
      background-size: 150px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='icon_yim'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="52" y="36" fill="' + to_hex($v19) + '" '
      path  += 'font-weight="900" font-size="16px">Y!</text>'
      path  += '<text x="76" y="34" fill="' + to_hex($v98) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="900" font-size="14px">\00A0'Yim'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-top: 23px
      padding-right: 78px
      vertical-align: -.1rem
      background-size: 150px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='icon_msnm'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="52" y="37" fill="' + to_hex($v69) + '" '
      path  += 'font-weight="900" font-size="18px">\265F</text>'
      path  += '<text x="73" y="34" fill="' + to_hex($v98) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="900" font-size="14px">'msnm'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-top: 23px
      padding-right: 78px
      vertical-align: -.1rem
      background-size: 150px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='icon_aim'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="52" y="37" fill="' + to_hex($v37) + '" '
      path  += 'font-weight="600" font-size="22px">\25CE</text>'
      path  += '<text x="76" y="36" fill="' + to_hex($v98) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="900" font-size="14px">'AIM'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-top: 23px
      padding-right: 78px
      vertical-align: -.1rem
      background-size: 150px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='icon_icq'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="52" y="42" fill="' + to_hex($v46) + '" '
      path  += 'font-weight="100" font-size="36px">\2055</text>'
      path  += '<text x="75" y="36" fill="' + to_hex($v98) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="900" font-size="14px">'ICQ'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-top: 23px
      padding-right: 78px
      vertical-align: -.1rem
      background-size: 150px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='icon_quote'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="77" y="50" fill="' + to_hex($v99) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="100" font-size="34px">\1F677</text>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-top: 23px
      padding-right: 28px
      vertical-align: -.2rem
      background-size: 150px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='icon_edit'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="77" y="36" fill="' + to_hex($v99) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="900" font-size="18px">\270E</text>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-top: 23px
      padding-right: 28px
      vertical-align: -.2rem
      background-size: 150px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      transform: scaleX(-1)
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='icon_delete'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="78" y="37" fill="' + to_hex($v99) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + ''
      path  += ', 0 -1px 0 ' + to_hex($v99) + '" '
      path  += 'font-weight="100" font-size="18px">\1F5D1</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-top: 23px
      padding-right: 28px
      vertical-align: -.2rem
      background-size: 150px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='icon_ip'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="79" y="36" fill="' + to_hex($v98) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="900" font-size="14px">'IP'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-top: 23px
      padding-right: 28px
      vertical-align: -.2rem
      background-size: 150px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='icon_search'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="50" y="37" fill="' + to_hex($v99) + '" '
      path  += 'font-weight="100" font-size="16px">\1F50D\00A0</text>'
      path  += '<text x="70" y="34" fill="' + to_hex($v98) + '" '
      path  += 'font-weight="900" font-size="14px">'search'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-top: 23px
      padding-right: 78px
      vertical-align: -.2rem
      background-size: 150px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      float: right
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    // postimages replacements
    // new topic/new post/post reply/topic locked buttons
    &[src*='msg_newpost'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="40" y="35" fill="' + to_hex($v98) + '" '
      path  += 'font-weight="100" font-size="14px">\1F4DD</text>'
      path  += '<text x="67" y="35" fill="' + to_hex($v98) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="900" font-size="14px">'new pm'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding: 14px
      padding-right: 98px
      background-size: 170px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='english/post'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="40" y="35" fill="' + to_hex($v98) + '" '
      path  += 'font-weight="100" font-size="14px">\1F4C4</text>'
      path  += '<text x="60" y="35" fill="' + to_hex($v98) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="900" font-size="14px">'new topic'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding: 14px
      padding-right: 98px
      background-size: 170px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px

      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='english/reply'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="38" y="35" fill="' + to_hex($v98) + '" '
      path  += 'font-weight="100" font-size="14px">\1F4DD</text>'
      path  += '<text x="58" y="35" fill="' + to_hex($v98) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="900" font-size="14px">'post reply'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding: 14px
      padding-right: 98px
      background-size: 170px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    &[src*='reply-locked'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" '
      path  += 'width="24px" height="24px" viewBox="0 0 170 60">'
      path  += '<text x="40" y="35" fill="' + to_hex($v98) + '" '
      path  += 'font-weight="100" font-size="14px">\1F512</text>'
      path  += '<text x="67" y="35" fill="' + to_hex($v98) + '" '
      path  += 'style="text-shadow: 0 1px 0 ' + to_hex($bg0) + '" '
      path  += 'font-weight="900" font-size="14px">'locked'</text>/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding: 14px
      padding-right: 98px
      background-size: 170px
      background-repeat: no-repeat
      background-position: center
      background-color: bg4
      border: 1px solid bg5
      rad: 4px
      &:hover {
        background-color: v04
        border: 1px solid v05
        bsh: 0 0 8px 0 v04
      }
    }
    // forum icons new/no new/locked
    &[src*='folder_new_big.gif'], &[src*='folder_new_big.gif'][width]:not(#x) {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 24 24"><g fill="' + to_hex($v09) + '"><path d="M12 2v6a2 2 0 0 0 2 2h'
      path  += '6v10a2 2 0 0 1-2 2h-6.81A6.5 6.5 0 0 0 4 11.498V4a2 2 0 0 1 2-2h6z"/><path d="M13.5'
      path  += ' 2.5V8a.5.5 0 0 0 .5.5h5.5l-6-6zM12 17.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zM6.5'
      path  += ' 14a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5zm0 7.125a.625.625 0 1 0 0-'
      path  += '1.25.625.625 0 0 0 0 1.25z"/></g>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding: 14px
      padding-right: 24px
      background-size: 24px
      background-repeat: no-repeat
      background-position: center
    }
    &[src*='folder_big.gif'][alt='No new posts'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M12 8V2H6a2 2 0 0'
      path  += ' 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10h-6a2 2 0 0 1-2-2Zm-3.75 3.5h7.5a.75.75 '
      path  += '0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5Zm0 2.75h7.5a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 '
      path  += '1 0-1.5Zm0 2.75h7.5a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5Zm5.25-9V2.5l6 6H14a.'
      path  += '5.5 0 0 1-.5-.5Z"'
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 14px
      padding-right: 24px
      background-size: 24px
      background-repeat: no-repeat
      background-position: center
    }
    &[src*='folder_locked_big.gif'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M12 2v6a2 2 0 0 0'
      path  += ' 2 2h6v10a2 2 0 0 1-2 2h-6.05c.033-.162.05-.329.05-.5v-5a2.5 2.5 0 0 0-2-2.45V14a3.'
      path  += '5 3.5 0 0 0-6-2.45V4a2 2 0 0 1 2-2h6Zm1.5.5V8a.5.5 0 0 0 .5.5h5.5l-6-6ZM4 15h-.5A1.'
      path  += '5 1.5 0 0 0 2 16.5v5A1.5 1.5 0 0 0 3.5 23h6a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 '
      path  += '9.5 15H9v-1a2.5 2.5 0 0 0-5 0v1Zm1.5-1a1 1 0 1 1 2 0v1h-2v-1Zm2 5a1 1 0 1 1-2 0a1 1'
      path  += ' 0 0 1 2 0Z"'
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 14px
      padding-right: 24px
      background-size: 24px
      background-repeat: no-repeat
      background-position: center
    }
    // new posts/popular/locked/announce/sticky
    &[src*='folder_new.gif'][width]:not([alt*='Popular']) {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M10 2v4.5A1.5 1.5'
      path  += ' 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H9.743A5.5 5.5 0 0 0 4 9.207V3.5A1.5 1.5 '
      path  += '0 0 1 5.5 2H10Zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25ZM10 14.5a4.5 4.5 0 1 1-9 0a4'
      path  += '.5 4.5 0 0 1 9 0ZM5.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5Zm0 5.'
      path  += '125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25Z"'
      bgc    = 'fill="' + to_hex($v09) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 12px
      padding-right: 20px
      background-size: 20px
      background-repeat: no-repeat
      background-position: center
    }
    &[src*='folder_new_hot.gif'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M10 2v4.5A1.5 1.5'
      path  += ' 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H8.632c.25-.473.368-.988.368-1.5a2.5 2.5 '
      path  += '0 0 0-2.273-2.49A3 3 0 0 0 4 9.041V3.5A1.5 1.5 0 0 1 5.5 2H10Zm1 .25V6.5a.5.5 0 0 0'
      path  += ' .5.5h4.25L11 2.25ZM6.5 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0ZM8 16.5C8 17.745 7 19 4.5 19'
      path  += 'S1 17.75 1 16.5A1.5 1.5 0 0 1 2.5 15h4A1.5 1.5 0 0 1 8 16.5Z"'
      bgc    = 'fill="' + to_hex($v09) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 12px
      padding-right: 20px
      background-size: 20px
      background-repeat: no-repeat
      background-position: center
      animation: pulse 1.2s infinite
    }
    &[src*='folder_lock_new'][alt='New posts [ Locked ]'], &[src*='folder_lock_new'][alt='New posts'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M10 2v4.5A1.5 1.5'
      path  += ' 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H10v-4a2 2 0 0 0-1.5-1.937V12A3 3 0 0 0 4'
      path  += ' 9.401V3.5A1.5 1.5 0 0 1 5.5 2H10Zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25ZM3.5 12v1'
      path  += 'H3a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-.5v-1a2 2 0 1 0-'
      path  += '4 0Zm1 1v-1a1 1 0 1 1 2 0v1h-2Zm1 2.25a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5Z"'
      bgc    = 'fill="' + to_hex($v09) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 12px
      padding-right: 20px
      background-size: 20px
      background-repeat: no-repeat
      background-position: center
    }
    &[src*='folder.gif'][width][alt='No new posts'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M10 6.5V2H5.5A1.5'
      path  += ' 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5V8h-4.5A1.5 1.5 0 0'
      path  += ' 1 10 6.5ZM6.5 10h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1Zm0 2h7a.5.5 0 0 1 0 1h-7a.5.5 '
      path  += '0 0 1 0-1Zm0 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1ZM11 6.5V2.25L15.75 7H11.5a.5.5 0 '
      path  += '0 1-.5-.5Z"'
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0 i
      padding: 12px
      padding-right: 20px
      background-size: 20px
      background-repeat: no-repeat
      background-position: center
    }
    &[src*='folder_hot'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M10 2v4.5A1.5 1.5'
      path  += ' 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H8.632c.25-.473.368-.988.368-1.5a2.5 2.5 '
      path  += '0 0 0-2.273-2.49A3 3 0 0 0 4 9.041V3.5A1.5 1.5 0 0 1 5.5 2H10Zm1 .25V6.5a.5.5 0 0 0'
      path  += ' .5.5h4.25L11 2.25ZM6.5 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0ZM8 16.5C8 17.745 7 19 4.5 19'
      path  += 'S1 17.75 1 16.5A1.5 1.5 0 0 1 2.5 15h4A1.5 1.5 0 0 1 8 16.5Z"'
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 12px
      padding-right: 20px
      background-size: 20px
      background-repeat: no-repeat
      background-position: center
      animation: pulse 1.2s infinite
    }
    &[src*='folder_lock.gif'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M10 2v4.5A1.5 1.5'
      path  += ' 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H10v-4a2 2 0 0 0-1.5-1.937V12A3 3 0 0 0 4'
      path  += ' 9.401V3.5A1.5 1.5 0 0 1 5.5 2H10Zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25ZM3.5 12v1'
      path  += 'H3a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-.5v-1a2 2 0 1 0-'
      path  += '4 0Zm1 1v-1a1 1 0 1 1 2 0v1h-2Zm1 2.25a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5Z"'
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 12px
      padding-right: 20px
      background-size: 20px
      background-repeat: no-repeat
      background-position: center
      &:hover {
        bgc    =  'fill="' + to_hex($v99) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      }
    }
    &[src*='folder_announce'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M14.158 1.026a.5.'
      path  += '5 0 0 1 .317.632l-.5 1.5a.5.5 0 0 1-.95-.316l.5-1.5a.5.5 0 0 1 .633-.316Zm3.697 1.8'
      path  += '28a.5.5 0 1 0-.708-.707l-2 2a.5.5 0 0 0 .707.707l2-2Zm-10.248.292a2 2 0 0 1 3.261-.'
      path  += '515l6.587 6.98a2 2 0 0 1-.648 3.203L12.87 14.55A3.504 3.504 0 0 1 9.5 19a3.498 3.49'
      path  += '8 0 0 1-2.975-1.655l-1.2.529a1.5 1.5 0 0 1-1.661-.308l-1.222-1.21a1.5 1.5 0 0 1-.29'
      path  += '9-1.71l5.464-11.5Zm-.154 13.789a2.5 2.5 0 0 0 4.488-1.977l-4.488 1.977ZM17 6a.5.5 0'
      path  += ' 0 0 0 1h1.5a.5.5 0 1 0 0-1H17Z"'
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 12px
      padding-right: 18px
      background-size: 18px
      background-repeat: no-repeat
      background-position: center
      &:hover {
        bgc    =  'fill="' + to_hex($v99) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      }
    }
    &[src*='folder_sticky'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 20 20"><path d="M13.325 2.618a2 2 0 0 0-3.203.52l-1.73 3.458a1.5 1.5 '
      path  += '0 0 1-.784.722l-3.59 1.436a1 1 0 0 0-.335 1.636L6.293 13 3 16.293V17h.707L7 13.707l'
      path  += '2.61 2.61a1 1 0 0 0 1.636-.335l1.436-3.59a1.5 1.5 0 0 1 .722-.785l3.458-1.73a2 2 0 '
      path  += '0 0 .52-3.202l-4.057-4.057z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 12px
      padding-right: 20px
      background-size: 20px
      background-repeat: no-repeat
      background-position: center
      &:hover {
        bgc    =  'fill="' + to_hex($v99) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      }
    }
    // private message area Microsoft MIT lic.
    &[src*='msg_inbox'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 20 20"><path d="M16 10.4v.6h-3.5a.5.5 0 0 0-.5.498v.013l-.004.06a2.57'
      path  += ' 2.57 0 0 1-.256.955 1.694 1.694 0 0 1-.572.667c-.26.174-.63.307-1.168.307-.538 0-.'
      path  += '907-.133-1.168-.307a1.694 1.694 0 0 1-.572-.667A2.572 2.572 0 0 1 8 11.511V11.5a.5.'
      path  += '5 0 0 0-.5-.5H4V7a2 2 0 0 1 2-2h2.022a5.48 5.48 0 0 1 .185-1H6a3 3 0 0 0-3 3v8a3 3 '
      path  += '0 0 0 3 3h8a3 3 0 0 0 3-3V9.743a5.507 5.507 0 0 1-1 .657zm-2.5-.4a4.5 4.5 0 1 0 0-9'
      path  += ' 4.5 4.5 0 0 0 0 9zm-2.354-4.146a.5.5 0 0 1 .708-.708L13 6.293V3.5a.5.5 0 0 1 1 0v2'
      path  += '.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.499.499 0 0 1-.351.146h-.006a.498.498 0 '
      path  += '0 1-.348-.144l-.003-.003-2-2z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 12px
      padding-right: 24px
      background-size: 24px
      background-repeat: no-repeat
      background-position: center
      &:hover {
        bgc    =  'fill="' + to_hex($v09) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      }
    }
    &[src*='msg_sentbox'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 24 24"><path d="M10.499 4a6.454 6.454 0 0 0-.423 1.5H6.25A1.75 1.75 0'
      path  += ' 0 0 4.5 7.25V14H9a.75.75 0 0 1 .743.648l.007.102a2.25 2.25 0 0 0 4.5 0A.75.75 0 0 '
      path  += '1 15 14h4.5l.001-1.733a6.517 6.517 0 0 0 1.5-1.077L21 18.75A3.25 3.25 0 0 1 17.75 2'
      path  += '2H6.25A3.25 3.25 0 0 1 3 18.75V7.25A3.25 3.25 0 0 1 6.25 4h4.249zM16.5 1a5.5 5.5 0 '
      path  += '1 1 0 11 5.5 5.5 0 0 1 0-11zm.216 2.589l-.07.057-.057.07a.5.5 0 0 0 0 .568l.057.07L'
      path  += '18.292 6H13l-.09.008a.5.5 0 0 0-.402.402l-.008.09.008.09a.5.5 0 0 0 .402.402L13 7h5'
      path  += '.292l-1.646 1.646-.057.07a.5.5 0 0 0 .695.695l.07-.057 2.541-2.548.033-.048.034-.06'
      path  += '7.021-.063.015-.082L20 6.5l-.003-.053-.014-.075-.03-.083-.042-.074-.045-.056-2.512-'
      path  += '2.513-.07-.057a.5.5 0 0 0-.568 0z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 12px
      padding-right: 24px
      background-size: 24px
      background-repeat: no-repeat
      background-position: center
      &:hover {
        bgc    =  'fill="' + to_hex($v09) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      }
    }
    &[src*='msg_outbox'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 24 24"><path d="M10.499 4a6.454 6.454 0 0 0-.423 1.5H6.25A1.75 1.75 0'
      path  += ' 0 0 4.5 7.25V14H9a.75.75 0 0 1 .743.648l.007.102a2.25 2.25 0 0 0 4.5 0A.75.75 0 0 '
      path  += '1 15 14h4.5l.001-1.733a6.517 6.517 0 0 0 1.5-1.077L21 18.75A3.25 3.25 0 0 1 17.75 2'
      path  += '2H6.25A3.25 3.25 0 0 1 3 18.75V7.25A3.25 3.25 0 0 1 6.25 4h4.249zM16.5 1a5.5 5.5 0 '
      path  += '1 1 0 11 5.5 5.5 0 0 1 0-11zm.128 2.017l-.086-.015L16.488 3l-.056.005-.06.012-.083.'
      path  += '03-.074.042-.056.045-2.513 2.512-.057.07a.5.5 0 0 0 0 .568l.057.07.07.057a.5.5 0 0 '
      path  += '0 .568 0l.07-.057 1.645-1.646L16 10l.008.09a.5.5 0 0 0 .402.402l.09.008.09-.008a.5.'
      path  += '5 0 0 0 .402-.402L17 10l-.001-5.294 1.647 1.648.07.057a.5.5 0 0 0 .695-.695l-.057-.'
      path  += '07-2.548-2.542-.047-.032-.068-.034-.063-.021z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 12px
      padding-right: 24px
      background-size: 24px
      background-repeat: no-repeat
      background-position: center
      &:hover {
        bgc    =  'fill="' + to_hex($v09) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      }
    }
    &[src*='msg_savebox'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 24 24"><path d="M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1'
      path  += ' 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5zm0 1.5H6.25'
      path  += 'A1.75 1.75 0 0 0 4.5 6.25V13H9a.75.75 0 0 1 .743.648l.007.102a2.25 2.25 0 0 0 4.495'
      path  += '.154l.005-.154A.75.75 0 0 1 15 13h4.5V6.25a1.75 1.75 0 0 0-1.607-1.744L17.75 4.5zm-'
      path  += '11 5h10.5a.75.75 0 0 1 .102 1.493L17.25 11H6.75a.75.75 0 0 1-.102-1.493L6.75 9.5h10'
      path  += '.5-10.5zm0-3h10.5a.75.75 0 0 1 .102 1.493L17.25 8H6.75a.75.75 0 0 1-.102-1.493L6.75'
      path  += ' 6.5h10.5-10.5z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 12px
      padding-right: 24px
      background-size: 24px
      background-repeat: no-repeat
      background-position: center
      &:hover {
        bgc    =  'fill="' + to_hex($v09) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      }
    }
    &[src*='icon_clip.gif'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 12 12"><path d="M9.01 2.582a2.014 2.014 0 0 0-2.83-.01L2.85 5.844a.50'
      path  += '1.501 0 0 1-.707-.004.497.497 0 0 1 .005-.705l3.329-3.271a3.017 3.017 0 0 1 4.24.01'
      path  += '3 2.987 2.987 0 0 1 0 4.237l-4.332 4.314a1.966 1.966 0 0 1-2.772 0 1.947 1.947 0 0 '
      path  += '1 0-2.761l4.04-4.023a.501.501 0 0 1 .706 0 .497.497 0 0 1 0 .704L3.32 8.371a.954.95'
      path  += '4 0 0 0 0 1.353.963.963 0 0 0 1.36 0L9.01 5.41a1.994 1.994 0 0 0 0-2.828z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding: 14px
      padding-right: 0
      padding-top: 0
      padding-bottom: 14px
      background-size: 16px
      background-repeat: no-repeat
      background-position: left
      vertical-align: middle
      &:hover {
        bgc    =  'fill="' + to_hex($v09) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
        transform: scale(1.08)
      }
    }
    &[src*='icon_minipost.gif'][alt='Post'][width='12'], &[src*='icon_minipost.gif'][alt='Post'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path d="M4 2a2 2 0 0 0-2 '
      path  += '2v4a2 2 0 0 0 2 2h1V9H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1'
      path  += ' 1v1a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4Zm7 4v1h1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H8a1 1 0'
      path  += ' 0 1-1-1V8a1 1 0 0 1 1-1V6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V8a2 2 0 0 '
      path  += '0-2-2h-1Z"'
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      height: 17px
      padding-left: 16px
      padding-right: 16px
      padding-top: 0
      padding-bottom: 0
      background-size: 20px
      background-repeat: no-repeat
      background-position: center
      vertical-align: middle
      &:hover {
        bgc    =  'fill="' + to_hex($v09) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      }
    }
    &[src*='icon_minipost_new.gif'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path d="M4 2a2 2 0 0 0-2 '
      path  += '2v4a2 2 0 0 0 2 2h1V9H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1'
      path  += ' 1v1a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4Zm7 4v1h1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H8a1 1 0'
      path  += ' 0 1-1-1V8a1 1 0 0 1 1-1V6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V8a2 2 0 0 '
      path  += '0-2-2h-1Z"'
      bgc    = 'stroke="' + to_hex($v09) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0 i
      height: 17px
      padding-left: 16px
      padding-right: 16px
      padding-top: 0
      padding-bottom: 0
      background-size: 20px
      background-repeat: no-repeat
      background-position: center
      vertical-align: middle
      &:hover {
        bgc    =  'stroke="' + to_hex($v99) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      }
    }
    &[src*='icon_minipost'][alt*='Goto page'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 20 20"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm.854-4.646a.5.5'
      path  += ' 0 0 1-.708-.708l2.147-2.146H6.5a.5.5 0 0 1 0-1h5.793l-2.147-2.146a.5.5 0 0 1 .708-'
      path  += '.708l3 3a.5.5 0 0 1 0 .708l-3 3z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0 i
      height: 16px
      padding-left: 9px
      padding-right: 12px
      padding-top: 0
      padding-bottom: 0
      background-size: 16px
      background-repeat: no-repeat
      background-position: center
      vertical-align: middle
      &:hover {
        bgc    =  'fill="' + to_hex($v99) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      }
    }
    &[src*='icon_latest_reply']:not(#x) {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 16 16"><path d="M4.133 3.692A2.501 2.501 0 0 1 6.5 2h5A2.5 2.5 0 0 1 '
      path  += '14 4.5v5c0 1.098-.708 2.03-1.692 2.367v.364c0 .335-.117.763-.392 1.116-.289.372-.74'
      path  += '8.653-1.377.653h-5.77A2.75 2.75 0 0 1 2 11.23V5.463c0-.549.197-1.006.546-1.323.34-.'
      path  += '309.785-.447 1.223-.447h.364zm-.133 1h-.23a.81.81 0 0 0-.552.188C3.1 4.987 3 5.164 '
      path  += '3 5.462v5.769c0 .993.776 1.77 1.77 1.77h5.769c.299 0 .474-.121.588-.268a.886.886 0 '
      path  += '0 0 .18-.502V12H6.5A2.5 2.5 0 0 1 4 9.5V4.692zM8 6h1.293L6.646 8.646a.5.5 0 1 0 .70'
      path  += '8.708L10 6.707V8a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H8a.5.5 0 0 0 0 1z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0 i
      height: 18px
      padding-right: 14px
      padding-top: 4px
      background-size: 18px
      background-repeat: no-repeat
      background-position: center
      vertical-align: middle
      margin-right: 10px
      float: right
      &:hover {
        bgc    =  'fill="' + to_hex($v09) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
        transform: scale(1.08)
      }
    }
    &[src*='icon_newest_reply'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 16 16"><path d="M4.133 3.692A2.501 2.501 0 0 1 6.5 2h5A2.5 2.5 0 0 1 '
      path  += '14 4.5v5c0 1.098-.708 2.03-1.692 2.367v.364c0 .335-.117.763-.392 1.116-.289.372-.74'
      path  += '8.653-1.377.653h-5.77A2.75 2.75 0 0 1 2 11.23V5.463c0-.549.197-1.006.546-1.323.34-.'
      path  += '309.785-.447 1.223-.447h.364zm-.133 1h-.23a.81.81 0 0 0-.552.188C3.1 4.987 3 5.164 '
      path  += '3 5.462v5.769c0 .993.776 1.77 1.77 1.77h5.769c.299 0 .474-.121.588-.268a.886.886 0 '
      path  += '0 0 .18-.502V12H6.5A2.5 2.5 0 0 1 4 9.5V4.692zM8 6h1.293L6.646 8.646a.5.5 0 1 0 .70'
      path  += '8.708L10 6.707V8a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H8a.5.5 0 0 0 0 1z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      height: 18px
      padding-right: 14px
      padding-top: 4px
      background-size: 18px
      background-repeat: no-repeat
      background-position: center
      vertical-align: middle
      &:hover {
        bgc    =  'fill="' + to_hex($v09) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
        transform: scale(1.08)
      }
    }
    // moderator controls
    &[src*='topic_delete.gif'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 20 20"><path d="M10 1.25a2.75 2.75 0 0 1 2.739 2.5H17a.75.75 0 0 1 .1'
      path  += '02 1.493L17 5.25h-.583L15.15 16.23A2 2 0 0 1 13.163 18H6.837a2 2 0 0 1-1.987-1.77L3'
      path  += '.582 5.25H3a.75.75 0 0 1-.743-.648L2.25 4.5a.75.75 0 0 1 .648-.743L3 3.75h4.261A2.7'
      path  += '5 2.75 0 0 1 10 1.25zM8.5 7.5c-.245 0-.45.155-.492.359L8 7.938v6.125l.008.078c.042.'
      path  += '204.247.359.492.359s.45-.155.492-.359L9 14.062V7.939l-.008-.08C8.95 7.656 8.745 7.5'
      path  += ' 8.5 7.5zm3 0c-.245 0-.45.155-.492.359L11 7.938v6.125l.008.078c.042.204.247.359.492'
      path  += '.359s.45-.155.492-.359l.008-.079V7.939l-.008-.08c-.042-.203-.247-.358-.492-.358zM10'
      path  += ' 2.75c-.605 0-1.11.43-1.225 1h2.45c-.116-.57-.62-1-1.225-1z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding-right: 20px
      background-size: 20px
      background-repeat: no-repeat
      background-position: center
      &:hover {
        bgc    =  'fill="' + to_hex($v09) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
        transform: scale(1.08)
      }
    }
    &[src*='topic_move.gif'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 20 20"><path d="M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1'
      path  += '.5 1.5H9.743A5.5 5.5 0 0 0 4 9.207V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0'
      path  += ' .5.5h4.25L11 2.25zM5.5 19a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm2.354-4.854a.5.5 0 '
      path  += '1 1-.708.708L6 13.707V16.5a.5.5 0 0 1-1 0v-2.793l-1.146 1.147a.5.5 0 1 1-.708-.707l'
      path  += '2-2A.5.5 0 0 1 5.497 12h.006a.498.498 0 0 1 .348.144l.003.003 2 2z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding-right: 20px
      background-size: 22px
      background-repeat: no-repeat
      background-position: center
      &:hover {
        bgc    =  'fill="' + to_hex($v09) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
        transform: scale(1.08)
      }
    }
    &[src*='topic_lock.gif'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 24 24"><path d="M12 2a4 4 0 0 1 4 4v2h2.5A1.5 1.5 0 0 1 20 9.5v11a1.5'
      path  += ' 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-11A1.5 1.5 0 0 1 5.5 8H8V6a4 4 0 0 1 4'
      path  += '-4zm0 11.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM12 4a2 2 0 0 0-2 2v2h4V6a2 2 0 0 0-'
      path  += '2-2z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding-right: 20px
      background-size: 22px
      background-repeat: no-repeat
      background-position: center
      &:hover {
        bgc    =  'fill="' + to_hex($v09) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
        transform: scale(1.08)
      }
    }
    &[src*='topic_unlock.gif'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 24 24"><path d="M12 2.001a4 4 0 0 1 3.771 2.666 1 1 0 0 1-1.84.774l-.'
      path  += '045-.107a2 2 0 0 0-3.88.517L10.002 6v1.999h7.749a2.25 2.25 0 0 1 2.245 2.097l.005.1'
      path  += '54v9.496a2.25 2.25 0 0 1-2.096 2.245l-.154.005H6.25A2.25 2.25 0 0 1 4.005 19.9L4 19'
      path  += '.746V10.25a2.25 2.25 0 0 1 2.096-2.245L6.25 8l1.751-.001v-2A3.999 3.999 0 0 1 12 2.'
      path  += '002zm0 11.498a1.499 1.499 0 1 0 0 2.998 1.499 1.499 0 0 0 0-2.998z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0
      padding-right: 20px
      background-size: 22px
      background-repeat: no-repeat
      background-position: center
      &:hover {
        bgc    =  'fill="' + to_hex($v09) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
        transform: scale(1.08)
      }
    }
    &[src*='topic_split.gif'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 24 24"><g fill="' + to_hex($v99) + '"><path d="M5.25 3A3.25 3.25 0 0 '
      path  += '0 2 6.25v8.5A2.25 2.25 0 0 0 4.25 17h.25V8.75A3.25 3.25 0 0 1 7.75 5.5H19v-.25A2.25'
      path  += ' 2.25 0 0 0 16.75 3H5.25z"/><path d="M7.75 6.5A2.25 2.25 0 0 0 5.5 8.75v9.5a2.25 2.'
      path  += '25 0 0 0 2.25 2.25h3.982A6.5 6.5 0 0 1 22 12.81V8.75a2.25 2.25 0 0 0-2.25-2.25h-12z'
      path  += '"/><path d="M23 17.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zm-8.5-.5a.5.5 0 0 0 0 1h'
      path  += '4.793l-1.647 1.646a.5.5 0 0 0 .708.708l2.5-2.5a.5.5 0 0 0 0-.708l-2.5-2.5a.5.5 0 0 '
      path  += '0-.708.708L19.293 17H14.5z"/></g>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      padding-right: 20px
      background-size: 22px
      background-repeat: no-repeat
      background-position: center
      &:hover {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 24 24"><g fill="' + to_hex($v09) + '"><path d="M5.25 3A3.25 3.25 0 0 '
        path  += '0 2 6.25v8.5A2.25 2.25 0 0 0 4.25 17h.25V8.75A3.25 3.25 0 0 1 7.75 5.5H19v-.25A2.25'
        path  += ' 2.25 0 0 0 16.75 3H5.25z"/><path d="M7.75 6.5A2.25 2.25 0 0 0 5.5 8.75v9.5a2.25 2.'
        path  += '25 0 0 0 2.25 2.25h3.982A6.5 6.5 0 0 1 22 12.81V8.75a2.25 2.25 0 0 0-2.25-2.25h-12z'
        path  += '"/><path d="M23 17.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zm-8.5-.5a.5.5 0 0 0 0 1h'
        path  += '4.793l-1.647 1.646a.5.5 0 0 0 .708.708l2.5-2.5a.5.5 0 0 0 0-.708l-2.5-2.5a.5.5 0 0 '
        path  += '0-.708.708L19.293 17H14.5z"/></g>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        transform: scale(1.08)
      }
    }
    // emoji bye bye gifs
    if (emoji_new) {
      &[src*='icon_biggrin.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><circle fill="%23ffcc4d" cx="18" cy="18" r="18"/><path fill="%'
        path  += '23664500" d="M18 21c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.40'
        path  += '4 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z"/><path fill="%23fff" d="M'
        path  += '9 22s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z"/><ellipse fill="%23664500" cx="12" cy="13.5"'
        path  += ' rx="2.5" ry="3.5"/><ellipse fill="%23664500" cx="24" cy="13.5" rx="2.5" ry="3.5"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_smile.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><circle fill="%23ffcc4d" cx="18" cy="18" r="18"/><path fill="%'
        path  += '23664500" d="M10.515 23.621C10.56 23.8 11.683 28 18 28c6.318 0 7.44-4.2 7.485-4.379'
        path  += 'a.499.499 0 0 0-.237-.554.505.505 0 0 0-.6.077C24.629 23.163 22.694 25 18 25s-6.63-'
        path  += '1.837-6.648-1.855a.502.502 0 0 0-.598-.081.5.5 0 0 0-.239.557z"/><ellipse fill="%23'
        path  += '664500" cx="12" cy="13.5" rx="2.5" ry="3.5"/><ellipse fill="%23664500" cx="24" cy="'
        path  += '13.5" rx="2.5" ry="3.5"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_sad.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M36 18c0 9.941-8.059 18-18 18-9.94 0'
        path  += '-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><ellipse fill="%23664500'
        path  += '" cx="11.5" cy="14.5" rx="2.5" ry="3.5"/><ellipse fill="%23664500" cx="24.5" cy="14'
        path  += '.5" rx="2.5" ry="3.5"/><path fill="%23664500" d="M8.665 27.871a.501.501 0 0 0 .635.'
        path  += '029c.039-.029 3.922-2.9 8.7-2.9 4.766 0 8.662 2.871 8.7 2.9a.5.5 0 0 0 .729-.657C27'
        path  += '.3 27.029 24.212 22 18 22s-9.301 5.028-9.429 5.243a.499.499 0 0 0 .094.628z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_surprised.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M36 18c0 9.941-8.059 18-18 18-9.94 0'
        path  += '-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><ellipse fill="%23664500'
        path  += '" cx="18" cy="27" rx="5" ry="6"/><path fill="%23664500" d="M5.999 11A1 1 0 0 1 5.2 '
        path  += '9.4C8.462 5.05 12.816 5 13 5a1 1 0 0 1 .004 2c-.155.002-3.568.086-6.204 3.6a.998.99'
        path  += '8 0 0 1-.801.4zm24.002 0a.998.998 0 0 1-.801-.4c-2.64-3.521-6.061-3.598-6.206-3.6a1'
        path  += '.002 1.002 0 0 1-.991-1.005A.997.997 0 0 1 23 5c.184 0 4.537.05 7.8 4.4a1 1 0 0 1-.'
        path  += '799 1.6z"/><path fill="%23f5f8fa" d="M18 23c-1.657 0-3 1.79-3 4h6c0-2.21-1.343-4-3-'
        path  += '4z"/><ellipse fill="%23664500" cx="12" cy="14.5" rx="2.5" ry="3.5"/><ellipse fill="'
        path  += '%23664500" cx="24" cy="14.5" rx="2.5" ry="3.5"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_eek.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M36 18c0 9.941-8.059 18-18 18S0 27.9'
        path  += '41 0 18 8.059 0 18 0s18 8.059 18 18"/><ellipse fill="%23664500" cx="18" cy="25" rx='
        path  += '"4" ry="5"/><ellipse fill="%23664500" cx="12" cy="13.5" rx="2.5" ry="3.5"/><ellipse'
        path  += ' fill="%23664500" cx="24" cy="13.5" rx="2.5" ry="3.5"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_confused.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M36 18c0 9.941-8.059 18-18 18-9.94 0'
        path  += '-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><ellipse fill="%23664500'
        path  += '" cx="11.5" cy="16.5" rx="2.5" ry="3.5"/><ellipse fill="%23664500" cx="24.5" cy="16'
        path  += '.5" rx="2.5" ry="3.5"/><path fill="%23664500" d="M12 28c2-5 13-5 13-3 0 1-8-1-13 3z'
        path  += '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_cool.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M36 18c0 9.941-8.059 18-18 18S0 27.9'
        path  += '41 0 18 8.059 0 18 0s18 8.059 18 18"/><path fill-rule="evenodd" clip-rule="evenodd"'
        path  += ' fill="%23292f33" d="M1.24 11.018c.24.239 1.438.957 1.677 1.675.24.717.72 4.784 2.1'
        path  += '58 5.981 1.483 1.232 7.077.774 8.148.24 2.397-1.195 2.691-4.531 3.115-6.221.239-.95'
        path  += '7 1.677-.957 1.677-.957s1.438 0 1.678.956c.424 1.691.72 5.027 3.115 6.221 1.072.535'
        path  += ' 6.666.994 8.151-.238 1.436-1.197 1.915-5.264 2.155-5.982.238-.717 1.438-1.435 1.67'
        path  += '7-1.674.241-.239.241-1.196 0-1.436-.479-.478-6.134-.904-12.223-.239-1.215.133-1.677'
        path  += '.478-4.554.478-2.875 0-3.339-.346-4.553-.478-6.085-.666-11.741-.24-12.221.238-.239.'
        path  += '239-.239 1.197 0 1.436z"/><path fill="%23664500" d="M27.335 23.629a.501.501 0 0 0-.'
        path  += '635-.029c-.039.029-3.922 2.9-8.7 2.9-4.766 0-8.662-2.871-8.7-2.9a.5.5 0 0 0-.729.65'
        path  += '7C8.7 24.472 11.788 29.5 18 29.5s9.301-5.028 9.429-5.243a.499.499 0 0 0-.094-.628z"'
        path  += '/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_lol.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M30.728 5.272c7.029 7.029 7.029 18.4'
        path  += '27 0 25.456s-18.426 7.029-25.456 0c-7.029-7.029-7.029-18.427 0-25.456s18.426-7.029 '
        path  += '25.456 0"/><path fill="%2365471B" d="M19.279 19.28c-3.494 3.494-6.219 5.404-9.645 7'
        path  += '.714-.781.529-1.928 1.929.001 3.859 3.857 3.857 13.111 4.247 19.287-1.929 6.177-6.1'
        path  += '77 5.788-15.43 1.929-19.288-1.929-1.93-3.33-.782-3.858 0-2.308 3.423-4.219 6.149-7.'
        path  += '714 9.644z"/><path fill="%23fff" d="M11.564 28.923s3.858-1.929 9.644-7.716c5.787-5.'
        path  += '786 7.715-9.643 7.715-9.643s1.928 5.787-4.822 12.537c-6.75 6.751-12.537 4.822-12.53'
        path  += '7 4.822z"/><path fill="%2365471B" d="M8.265 25.234a.998.998 0 0 1-1.697-.848c.025-.'
        path  += '176.543-3.63 2.774-6.922-2.627.873-4.589 2.796-4.614 2.821a1 1 0 0 1-1.414-1.415c.1'
        path  += '56-.156 3.882-3.828 8.485-3.828a.999.999 0 0 1 .707 1.707c-3.262 3.262-3.953 7.874-'
        path  += '3.96 7.919a.99.99 0 0 1-.281.566zm16.968-16.97a.994.994 0 0 1-.563.282c-.047.007-4.'
        path  += '676.715-7.921 3.96a1 1 0 0 1-1.707-.707c0-4.604 3.672-8.329 3.828-8.485a1 1 0 0 1 1'
        path  += '.415 1.413c-.026.026-1.949 1.987-2.822 4.614 3.292-2.231 6.745-2.749 6.921-2.774a1 '
        path  += '1 0 0 1 .849 1.697z"/><path fill="%2364aadd" d="M30.101 12.055a4.999 4.999 0 0 0 5.'
        path  += '567-4.36 5 5 0 0 0-4.359-5.568C28.568 1.794 20.9 4.89 20.779 5.883c-.121.992 6.581 '
        path  += '5.837 9.322 6.172zM12.157 29.999a4.999 4.999 0 0 1-4.36 5.567 5 5 0 0 1-5.568-4.359'
        path  += 'c-.334-2.742 2.763-10.41 3.756-10.531.992-.12 5.837 6.582 6.172 9.323z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_mad.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M36 18c0 9.941-8.059 18-18 18-9.94 0'
        path  += '-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><path fill="%23664500" d'
        path  += '="M25.485 29.879C25.44 29.7 24.317 25.5 18 25.5c-6.318 0-7.44 4.2-7.485 4.379a.499.'
        path  += '499 0 0 0 .237.554.507.507 0 0 0 .6-.077c.019-.019 1.954-1.856 6.648-1.856s6.63 1.8'
        path  += '37 6.648 1.855a.502.502 0 0 0 .598.081.5.5 0 0 0 .239-.557zm-9.778-12.586C12.452 14'
        path  += '.038 7.221 14 7 14a1.001 1.001 0 0 0-.001 2c.029 0 1.925.022 3.983.737-.593.64-.982'
        path  += ' 1.634-.982 2.763 0 1.934 1.119 3.5 2.5 3.5s2.5-1.566 2.5-3.5c0-.174-.019-.34-.037-'
        path  += '.507.013 0 .025.007.037.007a.999.999 0 0 0 .707-1.707zM29 14c-.221 0-5.451.038-8.70'
        path  += '7 3.293A.999.999 0 0 0 21 19c.013 0 .024-.007.036-.007-.016.167-.036.333-.036.507 0'
        path  += ' 1.934 1.119 3.5 2.5 3.5s2.5-1.566 2.5-3.5c0-1.129-.389-2.123-.982-2.763A13.928 13.'
        path  += '928 0 0 1 29.002 16 1 1 0 0 0 29 14z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_razz.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M36 18c0 9.941-8.059 18-18 18-9.94 0'
        path  += '-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><ellipse fill="%2366471b'
        path  += '" cx="11.5" cy="14.5" rx="2.5" ry="3.5"/><ellipse fill="%2366471b" cx="24.5" cy="14'
        path  += '.5" rx="2.5" ry="3.5"/><path fill="%2366471b" d="M7 21.262c0 3.964 4.596 9 11 9s11-'
        path  += '5 11-9c0 0-10.333 2.756-22 0z"/><path fill="%23e8596e" d="M18.545 23.604l-1.091-.00'
        path  += '5c-3.216-.074-5.454-.596-5.454-.596v6.961c0 3 2 6 6 6s6-3 6-6v-6.92a28.815 28.815 0'
        path  += ' 0 1-5.455.56z"/><path fill="%23dd2f45" d="M18 31.843a.545.545 0 0 0 .545-.545v-7.6'
        path  += '94l-1.091-.005v7.699a.546.546 0 0 0 .546.545z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_redface.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M36 18c0 9.941-8.059 18-18 18-9.94 0'
        path  += '-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><circle fill="%23ff7892"'
        path  += ' cx="29" cy="23" r="5"/><circle fill="%23ff7892" cx="7" cy="23" r="5"/><circle fill'
        path  += '="%23f5f8fA" cx="24.5" cy="16.5" r="5.5"/><circle fill="%23f5f8fa" cx="11.5" cy="16'
        path  += '.5" r="5.5"/><circle fill="%23292f33" cx="11.5" cy="16.5" r="2.5"/><circle fill="%2'
        path  += '3292f33" cx="24.5" cy="16.5" r="2.5"/><path fill="%23664500" d="M22 30h-8a1 1 0 1 1'
        path  += ' 0-2h8a1 1 0 1 1 0 2zm8.001-19a.998.998 0 0 1-.801-.4c-2.64-3.521-6.061-3.598-6.206'
        path  += '-3.6a1.002 1.002 0 0 1-.991-1.005A.997.997 0 0 1 23 5c.184 0 4.537.05 7.8 4.4a1 1 0'
        path  += ' 0 1-.799 1.6zM5.999 11A1 1 0 0 1 5.2 9.4C8.462 5.05 12.816 5 13 5a1 1 0 0 1 .004 2'
        path  += 'c-.155.002-3.568.086-6.204 3.6a.998.998 0 0 1-.801.4z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_cry.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M36 18c0 9.941-8.059 18-18 18S0 27.9'
        path  += '41 0 18 8.059 0 18 0s18 8.059 18 18"/><path fill="%23664500" d="M22 27c0 2.763-1.79'
        path  += '1 3-4 3-2.21 0-4-.237-4-3 0-2.761 1.79-6 4-6 2.209 0 4 3.239 4 6zm8-12a.987.987 0 0'
        path  += ' 1-.371-.072c-5.229-2.091-7.372-5.241-7.461-5.374a1 1 0 0 1 1.662-1.113c.019.027 1.'
        path  += '93 2.785 6.541 4.629A1 1 0 0 1 30 15zM6 15a1.001 1.001 0 0 1-.372-1.929c4.612-1.844'
        path  += ' 6.523-4.602 6.542-4.629a1.002 1.002 0 0 1 1.387-.27.998.998 0 0 1 .275 1.383c-.089'
        path  += '.133-2.232 3.283-7.46 5.374A1.015 1.015 0 0 1 6 15z"/><path fill="%235dadec" d="M24'
        path  += ' 16h4v19l-4-.046V16zM8 35l4-.046V16H8v19z"/><path fill="%23664500" d="M14.999 18c-.'
        path  += '15 0-.303-.034-.446-.105-3.512-1.756-7.07-.018-7.105 0a1 1 0 1 1-.895-1.789c.182-.0'
        path  += '9 4.498-2.197 8.895 0A1 1 0 0 1 14.999 18zm14 0c-.15 0-.303-.034-.446-.105-3.513-1.'
        path  += '756-7.07-.018-7.105 0a1 1 0 1 1-.895-1.789c.182-.09 4.501-2.196 8.895 0A1 1 0 0 1 2'
        path  += '8.999 18z"/><ellipse fill="%235dadec" cx="18" cy="34" rx="18" ry="2"/><ellipse fill'
        path  += '="%23e75A70" cx="18" cy="27" rx="3" ry="2"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_evil.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><circle fill="%23aa8dd8" cx="18" cy="18" r="18"/><path fill="%'
        path  += '23aa8dd8" d="M10 4C7.42 4 4.369 1.534 3.414.586A1.998 1.998 0 0 0 1.235.153 1.998 1'
        path  += '.998 0 0 0 0 2c0 3.459 1.672 10 8 10a2 2 0 0 0 1.789-1.106l2-4A1.999 1.999 0 0 0 10'
        path  += ' 4zM34.766.153a1.996 1.996 0 0 0-2.18.434C31.7 1.472 28.589 4 26 4a1.999 1.999 0 0 '
        path  += '0-1.789 2.895l2 4A2 2 0 0 0 28 12c6.328 0 8-6.541 8-10 0-.809-.487-1.538-1.234-1.84'
        path  += '7z"/><path fill="%23553986" d="M27.335 25.629a.501.501 0 0 0-.635-.029c-.039.029-3.'
        path  += '922 2.9-8.7 2.9-4.766 0-8.662-2.871-8.7-2.9a.5.5 0 0 0-.729.657C8.7 26.472 11.788 3'
        path  += '1.5 18 31.5s9.301-5.028 9.429-5.243a.499.499 0 0 0-.094-.628zm-11.628-7.336C12.452 '
        path  += '15.038 7.221 15 7 15a1 1 0 0 0-.001 2c.029 0 1.925.022 3.983.737-.593.64-.982 1.634'
        path  += '-.982 2.763 0 1.934 1.119 3.5 2.5 3.5s2.5-1.566 2.5-3.5c0-.174-.019-.34-.037-.507.0'
        path  += '13 0 .025.007.037.007a.999.999 0 0 0 .707-1.707zM29 15c-.221 0-5.451.038-8.707 3.29'
        path  += '3A.999.999 0 0 0 21 20c.013 0 .024-.007.036-.007-.016.167-.036.333-.036.507 0 1.934'
        path  += ' 1.119 3.5 2.5 3.5s2.5-1.566 2.5-3.5c0-1.129-.389-2.123-.982-2.763A13.928 13.928 0 '
        path  += '0 1 29.002 17 1 1 0 0 0 29 15z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_twisted.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><circle fill="%23aa8dd8" cx="18" cy="18" r="18"/><path fill="%'
        path  += '23aa8dd8" d="M10 4C7.42 4 4.369 1.534 3.414.586A1.998 1.998 0 0 0 1.235.153 1.998 1'
        path  += '.998 0 0 0 0 2c0 3.459 1.672 10 8 10a2 2 0 0 0 1.789-1.106l2-4A1.999 1.999 0 0 0 10'
        path  += ' 4zM34.766.153a1.996 1.996 0 0 0-2.18.434C31.7 1.472 28.589 4 26 4a1.999 1.999 0 0 '
        path  += '0-1.789 2.895l2 4A2 2 0 0 0 28 12c6.328 0 8-6.541 8-10 0-.809-.487-1.538-1.234-1.84'
        path  += '7z"/><path fill="%23553986" d="M15.894 14.211l-6-3a2.001 2.001 0 0 0-1.789 3.579l4.'
        path  += '212 2.106c-.306.533-.317 1.105-.317 1.105v2s0 2 2 2 2-2 2-2v-2s-.003-.109-.025-.263'
        path  += 'a1.98 1.98 0 0 0 .814-.843 2.001 2.001 0 0 0-.895-2.684zm12.895-2.105a2 2 0 0 0-2.6'
        path  += '84-.895l-6 3a2 2 0 0 0-.895 2.684c.186.372.476.654.814.843-.021.154-.024.263-.024.2'
        path  += '63v2s0 2 2 2 2-2 2-2v-2s-.011-.572-.318-1.105l4.212-2.106a2 2 0 0 0 .895-2.684zm-4.'
        path  += '507 17.489c-.039-.165-.985-3.848-6.282-3.848-5.291 0-6.245 3.69-6.282 3.848a.6.6 0 '
        path  += '0 0 .274.661.573.573 0 0 0 .703-.092c.015-.016 1.583-1.522 5.306-1.522s5.291 1.507 '
        path  += '5.305 1.521a.567.567 0 0 0 .701.097.61.61 0 0 0 .275-.665z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_rolleyes.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><circle fill="%23ffcc4d" cx="18" cy="18" r="18"/><circle fill='
        path  += '"%23f4f7f9" cx="24.5" cy="13.5" r="5.5"/><circle fill="%23f4f7f9" cx="11.5" cy="13.'
        path  += '5" r="5.5"/><path fill="%2365471b" d="M23.109 23.424c-2.763-.667-8.873-.06-11.162 4'
        path  += '.405a.373.373 0 0 0 .334.546.378.378 0 0 0 .241-.087c3.084-2.58 7.436-2.58 10.036-2'
        path  += '.58 1.635 0 2.536 0 2.536-.708s-.705-1.268-1.985-1.576zM10.5 13a2.5 2.5 0 0 0 2.5-2'
        path  += '.5c0-1.252-.923-2.28-2.124-2.462a5.441 5.441 0 0 0-2.178.736A2.487 2.487 0 0 0 8 10'
        path  += '.5a2.5 2.5 0 0 0 2.5 2.5zm13 0a2.5 2.5 0 0 0 2.5-2.5c0-1.252-.923-2.28-2.124-2.462a'
        path  += '5.437 5.437 0 0 0-2.177.736A2.484 2.484 0 0 0 21 10.5a2.5 2.5 0 0 0 2.5 2.5z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_wink.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M36 18c0 9.941-8.059 18-18 18-9.94 0'
        path  += '-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><ellipse fill="%23664500'
        path  += '" cx="11.5" cy="16.5" rx="2.5" ry="3.5"/><path fill="%23664500" d="M28.457 17.797c-'
        path  += '.06-.135-1.499-3.297-4.457-3.297-2.957 0-4.397 3.162-4.457 3.297a.503.503 0 0 0 .75'
        path  += '5.605c.012-.009 1.262-.902 3.702-.902 2.426 0 3.674.881 3.702.901a.498.498 0 0 0 .7'
        path  += '55-.604zM5.999 12.458a1 1 0 0 1-.799-1.6c3.262-4.35 7.616-4.4 7.8-4.4a1 1 0 0 1 .00'
        path  += '4 2c-.156.002-3.569.086-6.205 3.6a.995.995 0 0 1-.8.4zm23.002 2.125a.998.998 0 0 1-'
        path  += '.801-.4c-2.592-3.457-6.961-2.627-7.004-2.62a1 1 0 0 1-.393-1.961c.231-.047 5.657-1.'
        path  += '072 8.996 3.38a1 1 0 0 1-.798 1.601zm-5.747 8.994a.513.513 0 0 0-.597.06c-.01.008-1'
        path  += '.013.863-4.657.863-3.641 0-4.646-.854-4.646-.854a.5.5 0 0 0-.838.475c.01.044 1.144 '
        path  += '4.379 5.484 4.379s5.474-4.335 5.485-4.379a.497.497 0 0 0-.231-.544z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_exclaim.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M2.653 35C.811 35-.001 33.662.847 32'
        path  += '.027L16.456 1.972c.849-1.635 2.238-1.635 3.087 0l15.609 30.056c.85 1.634.037 2.972-'
        path  += '1.805 2.972H2.653z"/><path fill="%23231f20" d="M15.583 28.953a2.421 2.421 0 0 1 2.4'
        path  += '19-2.418 2.421 2.421 0 0 1 2.418 2.418 2.422 2.422 0 0 1-2.418 2.419 2.422 2.422 0 '
        path  += '0 1-2.419-2.419zm.186-18.293c0-1.302.961-2.108 2.232-2.108 1.241 0 2.233.837 2.233 '
        path  += '2.108v11.938c0 1.271-.992 2.108-2.233 2.108-1.271 0-2.232-.807-2.232-2.108V10.66z"/'
        path  += '>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_question.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23be1931" d="M17 27a3 3 0 0 1-3-3v-4a3 3 0 0 1 3-'
        path  += '3c.603-.006 6-1 6-5 0-2-2-4-5-4-2.441 0-4 2-4 3a3 3 0 1 1-6 0c0-4.878 4.58-9 10-9 8'
        path  += ' 0 11 5.982 11 11 0 4.145-2.277 7.313-6.413 8.92-.9.351-1.79.587-2.587.747V24a3 3 0'
        path  += ' 0 1-3 3z"/><circle fill="%23b31931" cx="17" cy="32" r="3"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_idea.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffd983" d="M29 11.06c0 6.439-5 7.439-5 13.44 0 '
        path  += '3.098-3.123 3.359-5.5 3.359-2.053 0-6.586-.779-6.586-3.361C11.914 18.5 7 17.5 7 11.'
        path  += '06 7 5.029 12.285.14 18.083.14 23.883.14 29 5.029 29 11.06z"/><path fill="%23ccd6dd'
        path  += '" d="M22.167 32.5c0 .828-2.234 2.5-4.167 2.5-1.933 0-4.167-1.672-4.167-2.5 0-.828 2'
        path  += '.233-.5 4.167-.5 1.933 0 4.167-.328 4.167.5z"/><path fill="%23ffcc4d" d="M22.707 10'
        path  += '.293a.999.999 0 0 0-1.414 0L18 13.586l-3.293-3.293a.999.999 0 1 0-1.414 1.414L17 15'
        path  += '.414V26a1 1 0 1 0 2 0V15.414l3.707-3.707a.999.999 0 0 0 0-1.414z"/><path fill="%239'
        path  += '9aab5" d="M24 31a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-6h12v6z"/><path fill="%23ccd6dd" d'
        path  += '="M11.999 32a1 1 0 0 1-.163-1.986l12-2a.994.994 0 0 1 1.15.822.999.999 0 0 1-.822 1'
        path  += '.15l-12 2a.927.927 0 0 1-.165.014zm0-4a1 1 0 0 1-.163-1.986l12-2a.995.995 0 0 1 1.1'
        path  += '5.822.999.999 0 0 1-.822 1.15l-12 2a.927.927 0 0 1-.165.014z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_idea.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffd983" d="M29 11.06c0 6.439-5 7.439-5 13.44 0 '
        path  += '3.098-3.123 3.359-5.5 3.359-2.053 0-6.586-.779-6.586-3.361C11.914 18.5 7 17.5 7 11.'
        path  += '06 7 5.029 12.285.14 18.083.14 23.883.14 29 5.029 29 11.06z"/><path fill="%23ccd6dd'
        path  += '" d="M22.167 32.5c0 .828-2.234 2.5-4.167 2.5-1.933 0-4.167-1.672-4.167-2.5 0-.828 2'
        path  += '.233-.5 4.167-.5 1.933 0 4.167-.328 4.167.5z"/><path fill="%23ffcc4d" d="M22.707 10'
        path  += '.293a.999.999 0 0 0-1.414 0L18 13.586l-3.293-3.293a.999.999 0 1 0-1.414 1.414L17 15'
        path  += '.414V26a1 1 0 1 0 2 0V15.414l3.707-3.707a.999.999 0 0 0 0-1.414z"/><path fill="%239'
        path  += '9aab5" d="M24 31a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-6h12v6z"/><path fill="%23ccd6dd" d'
        path  += '="M11.999 32a1 1 0 0 1-.163-1.986l12-2a.994.994 0 0 1 1.15.822.999.999 0 0 1-.822 1'
        path  += '.15l-12 2a.927.927 0 0 1-.165.014zm0-4a1 1 0 0 1-.163-1.986l12-2a.995.995 0 0 1 1.1'
        path  += '5.822.999.999 0 0 1-.822 1.15l-12 2a.927.927 0 0 1-.165.014z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_arrow.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%233b88c3" d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4'
        path  += 'V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z"/><path fill="%23fff" d="M7 14h9V7l13 11-13 1'
        path  += '1v-7H7z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_neutral.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M36 18c0 9.941-8.059 18-18 18-9.94 0'
        path  += '-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><ellipse fill="%23664500'
        path  += '" cx="11.5" cy="16.5" rx="2.5" ry="3.5"/><ellipse fill="%23664500" cx="24.5" cy="16'
        path  += '.5" rx="2.5" ry="3.5"/><path fill="%23664500" d="M25 26H11a1 1 0 1 1 0-2h14a1 1 0 1'
        path  += ' 1 0 2z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
      &[src*='icon_mrgreen.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 36 36"><path fill="%23ffcc4d" d="M36 18c0 9.941-8.059 18-18 18-9.94 0'
        path  += '-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><path fill="%23664500" d'
        path  += '="M28.457 17.797c-.06-.135-1.499-3.297-4.457-3.297-2.957 0-4.397 3.162-4.457 3.297a'
        path  += '.503.503 0 0 0 .755.605c.012-.009 1.262-.902 3.702-.902 2.426 0 3.674.881 3.702.901'
        path  += 'a.498.498 0 0 0 .755-.604zm-12 0c-.06-.135-1.499-3.297-4.457-3.297-2.957 0-4.397 3.'
        path  += '162-4.457 3.297a.499.499 0 0 0 .754.605C8.31 18.393 9.559 17.5 12 17.5c2.426 0 3.67'
        path  += '4.881 3.702.901a.498.498 0 0 0 .755-.604zM18 22c-3.623 0-6.027-.422-9-1-.679-.131-2'
        path  += ' 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1'
        path  += 'z"/><path fill="%23fff" d="M9 23s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z"/><path fill="%23'
        path  += '5dadec" d="M35 11c0 2.762-2.238 5-5 5s-5-2.238-5-5 4-10 5-10 5 7.238 5 10z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
        width: 0
        height: 16px
        padding-right: 16px
        padding-top: 2px
        background-size: 16px
        background-repeat: no-repeat
        background-position: center
      }
    }
  }
  // post emoticons on left side when posting message
  a[href*='emoticon'] {
    /img[src*='/smiles'] {
      transform: scale(1.09888)
      vertical-align: middle
      margin: 0 .2rem 0 .2rem
    }
  }
}
@-moz-document regexp('https?://forum.dd-wrt.com/(?!wiki|demo).*$') {
  // style selection bg/fg with accent color
  ::selection { background-color: v03; color: v99 }
  * {
    bsh: none
    text-rendering: geometricPrecision
  }
  if (stable-scrll) {
    body {
      scrollbar-gutter: stable
    }
  }
  #header #menu_top li {
    a {
      color: v98
      &:hover {
        color: v09
      }
    }
    &.first {
      display: none
    }
    &:first-of-type + li {
      border-left: 0
    }
  }
  if (max-vertical) {
    #header_wrap[style*='-23px'] {
      height: 70px i
      background-position: 0 0 i
      #menu_forum {
        position: fixed
        width: 1153px
        top: 56px
        padding-bottom: .7rem
        #quick_links {
          margin-right: -.6rem
        }
      }
      #header {
        max-height: 5px i
      }
      #logo {
        transition: transition
        scale: .8
        margin-top: -.7rem
        margin-left: -1.8rem
      }
      #navigation_minimized {
        #menu_sub li a {
          &[href*='imprint'] {
            margin-top: 1rem i
            position: absolute
            padding: 2px 10px 4px i
            right: 7.8rem i
            &:hover {
              padding: 3px 10px 4px i
            }
          }
          &[href*='privacy-policy'] {
            margin-top: 1rem i
            position: absolute
            padding: 2px 10px 4px i
            right: 0
            &:hover {
              padding: 3px 10px 4px i
            }
          }
        }
      }
    }
  }
  @keyframes animate-bg {
    0% { background-position: 0 0 }
    100% { background-position: 0 100% }
  }
  if (new-top-menu) {
    #header_wrap {
      background-image: linear-gradient(darken(convert($v00), 50%) 0%, v00 120%)
      outline: 2px solid bg4
      border-bottom: 2px solid bg0
      height: 150px

      #navigation a,
      #navigation_minimized a {
        color: v98
        tsh: 0 1px 0 bg0
      }
    }
    #navigation {
      #menu_main {
        .parent {
          transition: transition
          background-image: none
          c: v98 v05 v02
          rad: 4px
          tsh: 0 1px 0 bg0
          text-align: center
          margin: -.8rem 5px 8px 10px
          padding: 1px 3px 3px
          width: 16.5rem
          letter-spacing: 1px
          font-size: 14px
          &:hover {
            background-image: none
            c: 0 v04 v08
            transition: transition
            cursor: pointer
          }
          &.active {
            border-bottom: 1px solid v06
            background: v08 i
          }
        }
        ul {
          background: bg2
          border: 1px solid bg4
          padding-top: 0
          border-bottom: 1px solid t
          rad: 4px 4px 0 0
          max-width: @width
          margin-top: -.8rem
          width: 1153px
        }
      }
      #left, #middle, #right {
        display: none
      }
      #menu_sub {
        ul {
          height: 28px
          padding-bottom: 10px
          rad: 0 4px 0 0
          background: bg2
          background-image: none
          border-color: bg4
          margin-bottom: -5px
        }
        li {
          a {
            padding: 4px 10px 4px
            border: solid 1px v04
            border-radius: 4px
            color: v99
            background: v02
            background-image: none
            transition: transition
          }
          .active a, a:hover {
            padding: 4px 10px 4px
            border: solid 1px v08
            border-radius: 4px
            color: v99
            background: v08
            background-image: none
          }
        }
        .active a, a:hover {
          padding: 4px 10px 4px
          border: solid 1px v08
          border-radius: 4px
          color: v99
          background: v08
          background-image: none
        }
      }
      div[style='position: absolute; width: 1000px;'] {
        position: relative i
        width: 1155px i
      }
      &_minimized #menu_sub {
        li {
          a {
            padding: 4px 10px 4px
            border: solid 1px v04
            border-radius: 4px
            color: v99
            background: v02
            background-image: none
            animation: fadeIn 500ms ease-in 1
            &:hover {
              padding: 4px 10px 4px
              border: solid 1px v08
              border-radius: 4px
              color: v99
              background: v08
              background-image: none
            }
            &[href*='imprint'] {
              margin-top: 5.5rem i
              position: absolute
              padding: 2px 10px 4px i
              margin-left: -18rem i
              &:hover {
                padding: 3px 10px 4px i
              }
            }
            &[href*='privacy-policy'] {
              margin-top: 5.5rem i
              position: absolute
              padding: 2px 10px 4px i
              margin-left: -13.6rem i
              &:hover {
                padding: 3px 10px 4px i
              }
            }
          }
        }
      }
    }
  }
  else {
    #header_wrap {
      c: 0 t t
      background: none
      background-image: linear-gradient(#1a1a1a 10%, #1f5f94 105%)
      outline: 2px solid bg4
      border-bottom: 2px solid bg0
      height: 180px
      &[style*='-23px'] {
        background-image: linear-gradient(#1a1a1a 5%, #1f5f94 100%)
        height: 70px
      }
    }
    #navigation {
      #menu_main {
        ul {
          width: 1153px
        }
        .parent {
          padding: 0 8px 2px
          width: 15.641rem
          &:hover {
            background-image: linear-gradient(#318cd8, #2874b4)
            border-bottom: 0
            border-right-color: #2874b4
          }
        }
      }
      #menu_sub {
        ul {
          height: 28px
          padding-bottom: 2px
          margin-bottom: -2px
        }
        li {
          margin-top: 2px
        }
      }
      [style*='width: 1000px'] {
        width: 1155px i
      }
      &_minimized #menu_sub {
        li {
          a {
            padding: 4px 10px 4px
            border: solid 1px v04
            border-radius: 4px
            color: v99
            background: v02
            background-image: none
            animation: fadeIn 500ms ease-in 1
            &:hover {
              padding: 4px 10px 4px
              border: solid 1px v08
              border-radius: 4px
              color: v99
              background: v08
              background-image: none
            }
            &[href*='imprint'] {
              margin-top: 6rem i
              position: absolute
              padding: 2px 10px 4px i
              margin-left: -18rem i
              &:hover {
                padding: 3px 10px 4px i
              }
            }
            &[href*='privacy-policy'] {
              margin-top: 6rem i
              position: absolute
              padding: 2px 10px 4px i
              margin-left: -13.6rem i
              &:hover {
                padding: 3px 10px 4px i
              }
            }
          }
        }
      }
    }
  }
  #header_wrap[style*='background-position-y: -23px'] {
    #content[style*='min-height: 0'] {
      margin-top: .61rem i
      #menu_forum {
        rad: 4px 4px 0 0
      }
    }
  }
  @keyframes fadeIn {
    0% { opacity: 0  }
    100% { opacity: 1 }
  }
  // set new forum width
  #header_wrap #navigation, #header_wrap #navigation_minimized,
  .forum #header, #main, #content, .forum #content #forum_content, #footer {
    width: 1155px
    margin: 0 auto 0 auto
  }

  .cookieinfo {
    c: v98 v35 v61
    .cookieinfo-close {
      c: v98 v04 v02
      tsh: 0 1px 0 bg0
      &:hover {
        c: v99 v08 v08
        bsh: 0 0 10px 0 v04
        rad: 4px
      }
    }
    span a {
      c: v08 0 0
      &:hover {
        c: v09 0 0
      }
    }
  }

  body {
    background: bg0
    color: v98
    box-sizing: border-box
  }
  // fix image in forums flying out of bounds
  // efing ff fix it upstream too
  .attachtable[width='95%'] img {
    max-width: 95%
  }
  if (new-top-menu) {
    #content {
      #menu_forum {
        // when not sicky make it same bg color
        background: bg3
        border-color: bg5 bg4
        border-bottom: 1px solid bg5 i
        rad: 0
        padding-bottom: .7rem
      }
    }
  }
  else {
    #content {
      #menu_forum {
        background: bg3
        border: 1px solid bg4
        border-bottom: 1px solid bg5 i
        rad: 0
      }
    }
  }
  #content {
    font-size: 12px
    line-height: 1.2
    table {
      &[cellspacing='2'][cellpadding='2'][align='center']:not([width]) {
        margin-top: .1rem
      }
      &[width='930'] {
        width: 1130px
      }
    }
    #menu_forum {
      li a {
        color: v98
        rad: 4px
        border: solid 1px v04
        background: v02
        span {
          color: v98
          padding: 4px 20px 4px 0
          tsh: 0 1px 0 bg0
          &:hover {
            color: v99
            background-image: none i
          }
        }
        &:hover {
          background-image: linear-gradient(v08, v08)
          border-color: v08
          tsh: 0 1px 0 bg0
          bsh: 0 0 10px 0 v04
        }
      }
      .active {
        background-image: linear-gradient(v08, v08)
        border-color: v08
        bsh: 0 0 10px 0 v04
        rad: 4px

        span {
          color: v99
          tsh: 0 1px 0 bg0
          background-image: none
        }
      }
			#menuSubList li a:hover span {
        background-image: none
        background: v08
        color: v99
			}
    }
    .infolink {
      a {
        color: v98
        line-height: 1.4
        transition: transition
        background: 0
        font-size: 14px
        &::before {
          content: '\2022\00A0'
          color: v99
          font-size: 14px
          margin-left: -.3rem
        }
        &:hover {
          color: v09
          text-decoration: none
        }
      }
    }
    @keyframes animate-progress {
      to { background-position: -40px 0 }
    }
    .bodyline td {
      &[bgcolor='#FFFFFF'] {
        background-color: v05 i
        border-color: v03
        background-image: linear-gradient(-45deg, t, t 33%,
                                          rgba(convert($v01), .3) 33%,
                                          rgba(convert($v01), .3) 66%, t 66%) i
        background-size: 20px 15px
        animation: animate-progress 4s linear infinite
        rad: 3px
      }
      &.row2[width='100%'] {
        background: bg3
        bsh: inset 0 0 8px 6px bg0
        border: 1px solid bg4
        rad: 3px
        padding: 2px
      }
    }
    fieldset {
      c: 0 bg4 var(--rgba-bg-04)
      rad: 4px
      &:last-of-type:not(:only-of-type),
      &:first-of-type:not(:only-of-type),
      &:only-of-type  {
        margin-top: .5rem
      }
      // realign this shite bad design
      .setting {
        td[align='right'] {
          text-align: left
          // ip search align
          span.gen {
            float: right
          }
        }
        td[nowrap='nowrap'] form[name='jumpbox'] {
          margin-top: initial
        }
        table[width='910'] {
          width: 1100px
        }
      }
      .bodyline .row2[width='175'] {
        background: bg3
        bsh: inset 0 0 8px 6px bg0
        border: 1px solid bg4
        rad: 3px
      }
      .bodyline .row1 {
        &[width='175'], &[width*='3'] {
          background: t
        }
      }
      .row1 {
        background: bg2
        td {
          border-color: bg4
        }
      }
      .row2 {
        background: bg3
        td {
          border-color: bg1
          &[bgcolor='#FFFFFF'] {
            background-color: v05 i
            border-color: v03
            background-image: linear-gradient(-45deg, t, t 33%,
                                              rgba(convert($v01), .3) 33%,
                                              rgba(convert($v01), .3) 66%, t 66%) i
            background-size: 20px 15px
            animation: animate-progress 4s linear infinite
            rad: 3px
          }
        }
      }
      th {
        background: bg3
        border-color: bg0
        border-bottom-color: bg5
        padding: .5rem .8rem
        &.thTop {
          &[width='55%'] { width: 50% }
          &[width='15%'] { width: 20% }
        }
      }
      td {
        transition: transition
        &[width='40%'][valign='top'][nowrap='nowrap'][align='left'] {
          .gensmall {
            a[href*='watch=topic'] {
              font-size: 12px
              position: absolute
              background: v06
              border: 1px solid v06
              color: v98
              padding: .2rem .5rem
              rad: 4px
              tsh: 0 1px 0 bg0
              text-decoration: none
              &:hover {
                background: v08
                border-color: v08
                bsh: 0 0 10px 0 v04
                color: v99
              }
            }
            a[href*='unwatch=topic'] {
              font-size: 12px
              position: absolute
              background: v14
              border-color: v15
              color: v98
              padding: .2rem .5rem
              rad: 4px
              text-decoration: none
              &:hover {
                background: v16
                border-color: v17
                color: v99
                bsh: 0 0 10px 0 v16
              }
            }
          }
        }
      }
    }
    h2 {
      a {
        color: v98
        padding-top: 1rem
        margin-left: .68rem
        &:hover {
          color: v09
        }
      }
    }
    if (topic-review) {
      /[stylus-iframe*='forum.dd-wrt'] {
        #content {
          max-width: 1104px
        }
        .postbody {
          overflow: hidden i
        }
        [width='22%'] {
          width: 140px i
        }
        .quote {
          overflow: hidden i
        }
      }
    }
    #forum_content {
      iframe[width='930'] {
        width: 1122px
        height: 400px
        margin: auto 0
        border-color: v08
        rad: 4px
      }
      td {
        a[href*='viewtopic'] {
          img {
            &[src*='latest_reply'] {
              height: 10px
              width: 22px
            }
          }
        }
      }
      table[width*='928'] {
        width: 1120px
      }
    }
  }
  // https://forum.dd-wrt.com/phpBB2/login.php
  .forum #content:not([style]) {
    .content {
      border-top: 1px solid t
    }
    #menu_forum {
      // when not sicky make it same bg color
      padding: 8px 0
      background: bg3
      border-color: bg4
      border-bottom: 1px solid bg5
      padding-bottom: .7rem
      rad: 4px 4px 0 0
    }
    li a {
      &:hover span {
        background: none i
        background-image: linear-gradient(v05, v06)
        border-color: v08
        color: v98
      }
      span {
        background: none i
        padding: 4px 20px 4px 0
        margin-top: -.1rem
      }
    }
    // fix quick links
    // z-index ensure this displays ontop of the input boxes below.
    #quick_links {
      position: absolute
      top: 209px
      left: 893px
      z-index: 1
      #quick_link_infos {
        border-left: 1px solid v04
        border-right: 1px solid v04
        background: v02
        width: 246px
      }
    }
    h2 {
      padding-top: 0
      padding-bottom: .7rem
    }
    form[action*='login'] {
      td {
        background: bg2
        &[width='45%'], &[align='right'] {
          .gen {
            margin-right: -.6rem
          }
        }
        &[colspan='2'] .gen input[name='autologin'] {
          margin-left: .6rem
          margin-right: -1.6rem
        }
      }
    }
  }

  // https://forum.dd-wrt.com/phpBB2/login.php
  #header  {
    #logo {
      transition: all 120ms ease-in-out
      prefix = 'data:image/png;base64,'
      path    = 'iVBORw0KGgoAAAANSUhEUgAAAkQAAACMCAMAAACqGkaYAAAAYFBMVEUAAAD///////////8kX5T////////'
      path   += '///////////////////////////////////////8kX5QkX5QkX5QkX5QkX5QkX5QkX5QkX5QkX5QkX5QkX5'
      path   += 'QkX5QkX5T///8kX5SoEyUbAAAAHnRSTlMAwECAQBDw4GAgoFAwsJBw0JrwEMDQgOAwYHBQsCDe78ReAAALN'
      path   += 'klEQVR42uzSMQ7CMBBE0RCJjjNk739LCoxsNAhEFYe8V85KW/0FAAAAAAAAAAAAAACA2VTVh1tc4xBz5fzT'
      path   += 'Xk85516Dr3O9iLnJuYk9Du9PW+pzjLHlujQxPoxb18dR30Z9G+RDEYlIRCISkYhEJCIRiUhEIhKRiEQkIhG'
      path   += 'JSEQiEpGIRCQiEYlIRCISkYhEJCIRiUhEIhKRiEQkIhGJ6C8jAoDTu67NbZZHHM66NZdZHnE4IkJE7E9EiI'
      path   += 'j9iQgRcWfX/ncUhGEAjq8ljI6N4RP0/R/zLrkfjIqlI5eY037+NFqFfhVjfD6PyHlE7vk8IucRuefziFT8x'
      path   += 'f964xF5RIJHpPGITDwijUdk4hFpPCITj0jjEZl4RBqPyMQj0nhEJh6RxiMy8Yg0HpGJR6TxiEw8Io1H9KcK'
      path   += 'fqJBQMRi2b0clAchI+J/i0gex4qIHtGRRAMAqyLUPJ7uPuVhgcgqmOl8UIYfQzBZoTUHkwy/8G71I1V4fDJ'
      path   += 'oFN10e6nWcJ7YaC7a7ks1D1rwJKJxKzEFi6Zc+4Om7chkRLjwCSCP6BtN3GNJj3ZPN+4BYpBU+UcNBpn31s'
      path   += '4HpX1ECdjgVjyiTzhxp5gPd19u3YNIjShtdxzDuZn3pmAAW9JhFxFFtiGPKFS+gA52T3xBbQZpWQymq5lQw'
      path   += 'qnCv3AXEbEZvX1EM1+Sxe4vDyItotTzqUIs1Z7Dh9BGRNwhv3lEM18TSex+5YtWJaIA4u2uWXhjLS81JbQR'
      path   += 'IfeI6a0jOlp9BIBl2KkAEFlqd58fDIL7QZMySEJ7ECPfy/Zr+bR/NlFje0bq/bmY3zmiIra+DJjCQwmHJR7'
      path   += 'vfhS3gzpoxPVokP69F81Xs1uzXFX7smmLyHBKRqyT+mtC87Jf3Qe7ZrAbMQgD0Zg0AZLAIvXS///S3kpw0D'
      path   += 'AJqtSK9T3Wyn7yjM0mdfMgwonu/UVKrFuoI59OhNEQes1a0g8C9CC2UwWidQPWvFjf4rgQObW2PzoJiKr++'
      path   += 'qITJZUI3wIP0t2EExs7e2icKxAF35hjKTM4LkQnGtLCf7YE3Xs5JfJPbb00QN/IoeIKoFA4dYcyN2+Vfs2E'
      path   += 'jwrRDhjCEcreHyARQRHWK/LtI2UeCmnj1HxWNp68TM2ZuFEhCuAgjGOxRe9jTnQ8d2XSalSk1GwrRoyDf0J'
      path   += 'RrBmENN4It1EhWkGp+SEmhbXo2A8Fb1AY9VjYoIViIWgEDNq3sJuXQSGCNxjeTgn/xIU7KU0+ZuL3rEomPX'
      path   += 'No9LkiykzRejYoRFgn6OVYsPflZ5o0m22JgRZV1hfhx7arvpG7qhsdokAtz83OyhSfyaIut7S77dpqdiipT'
      path   += 'sSF29RMEhVmdIiyInV9LWAX6rAV7ChSzNgqVXgQyxUJmd4Q3R0Bfb23rLfCQ0SIY7RpaeJ81TfAnUpqbgv8'
      path   += 'MThEuMy8o5JOGsErPjUh6j66SbarjDdzf8scHCKiYlzvfR+NhkBQkDhpB6Sdv2mIuauUZP+fEH1+5Piafi/'
      path   += 'YivG976TxICDa0f5X38U8+4mtlcT8EYi+qTu3pchBIAzjhGxFZ3TlHA5TvP9b7m4WQkRoUpWJyfw3VmlLLv'
      path   += 'jsv5smzt1Kx5VfinMiMfseaonwJQknx+yDTDH6q9EQzmOQ+req/bIqloRzOq/COTEYKCwvj4Jo2FSbvaxqA'
      path   += 'l7BPrMvZK9fcG4bTgsR08LXJMxXjqTygJRkGUS6GC90iGOS+oIouT8UolsBost2iCr3tQbIMvviEeEAZdrb'
      path   += '4nz0rBBZ5SFRk0JH4RtS4xIixqur2unR1NdEWBmi27a9H3aGKDuR7oEaeYDmWu03ALb8OTwcIuJbciwyRH1'
      path   += 'bNkFkIeYkQtoDEqwIEdq2991PQNQBhdf7DBhgcvC7SDlEt8MhIr4tF7xnwZBS1RwzzhBRmDbsQQn2rBD134'
      path   += '4TmyX0tV6rdfmv5BChoyEyMxVOajwJoXH6qlMFradYF0PNWGjXTIwWAaIYTQy+pzgrYxwNHHJpcTJMLJ0Pk'
      path   += 's8KEepqSNTvMc7cvQPvZ58Tophc3Fhu2kgAYWqjwt5rVBGmCTkfJHBhVV6rfbJqmz0rRPXZx2fhB/AoP2H3'
      path   += 'hs4JkQw7WQ3QqdBx0a3KSjWTSBCRlodqaCH9rBAtkLhU3Oyj2oL9rt7bPilE6r+hQJhFGBiw60ExWd0jRAJ'
      path   += '47iQDuix5VIvfz3t/3R+i/N4A0GUWYfkE3iA5FqLyE8ew6U3OVMxJCoESETQ/CTcSnIJtlu9w2LgzRNDVFX'
      path   += 'hI1iU/q8xzTwqRTPmiYWjRgsgaeySxO2ulLAI3jRwYLh0z9nhNEK2d07wBngU7XT7OPSlEbgUYOEDEg/+AM'
      path   += 'tEeYZuM3ogbC6GojdOKKwDRTv+z8aWUWD6yb0I1d57RhsMhSk8sus8aqbjtbeJogEjWA1sQ4RpE3barIH/a'
      path   += 'O7sttUEojEIQzK+JGq0zanz/t+ysOp2DkMhHEF227Lu2SEfY4TDhANqqQ5iNcMlh5Zj32LOfejTF7eUS0Tj'
      path   += 'q05VgWTtMoRIxVKLAvi8flU8koE+bax+2WDm4paekT7xeIvYSiRYPk4gNQQmJHfV9F9T2DS4RDSzCVkLerV'
      path   += 'yN7EBir5coezeJmPHvXUhqtL6zqwmaoitAIvs3Mcdb6emlfEEiPkWi/DkSbZ8tkT2uB+30Cdt7VBvBEN1wj'
      path   += '0QzXbLS/AslY0qkSNXZEp09JDq8SKIW6D5kz2HYLsgV+FOML8OW07HJLCCtiBhTIu4p0XJMjDcIZzWwZxjY'
      path   += 'PcqZdOz5A7RAVRYUOR05Q5YXuZki+RyJSkwi/qZzIn0r9Jw2os/y+UPRSqvIbyrmyF60vmRjvrCMKpHAWkS'
      path   += '8RKJDqETjHdjOP+qR3/yxnH/MFvc7i6bWg+oSsFQa7yujSgSme3bjUW9HYsR42cgeKFE9ELl/C1Hfy2GmRZ'
      path   += 'VRkU8cLfX/dwV8oNW/ccOiSqTPEyVSKh9Z9vj0WPbYQ8seESRifCAayUDkatDh5llVhdeYj0tkJwm1NCwBD'
      path   += '3unfziLLBFDHivZ0RcYXS/FF2BPSLLtOoZE2aChRAEp1C4Hq+8LNWiUmEa5WZHnI77S/IBCb6Fnk8SWqDEf'
      path   += 'K/zMR4o+9zh9d+fxWnaLp4KES3TvSoamrR092DaDCf/pKaJrM2dFyqrIc06vkPNjbmIefd0qRCL/kF9W0o6'
      path   += 'zQmsBYayAbJzx7HzNFvlZeN8DGdvnGBLRs0B0fCVEnt2Qm0eA233Pxytqsxsq8cXUcegcnW3YFOCYQA9+dI'
      path   += 'mkMpqjEaLKvhGiuW2DwpBoTSmv9wMU5bR+ONNjexZFIlar8GsZSMdZeN+8uPTULx8s8ogSURjFEUyXSEu+P'
      path   += 'zrGliOVvdDuVDO//nJl8WiJyKLwe12CLBLMV6IccoKQChiIYIlw8Abp7AX908926RE1Dh89pbFq6fWnz8XW'
      path   += 'LHpcby5XehZLIlZ0D7qqSvJhBiVzSIQMRdLzEpz2GRLhj1UnDYnMDYm7i4Uewra7C8Dm/HiJCDF4M37XXat'
      path   += 'mXHfmkAgJFI3njYxKohKFW4Q7RBLBW6PXjMEWbQ4spkSsKAcvltnEqo8sle8Njg6JoPhUeQ5dgmEShSOUuw'
      path   += '3ERH7a4Rfk0JW9S7n+zOJIRMi2wxXK7ywdyrzBKxKSIRK5xk7le7mkjCYR3rDUBtNJjp/3j4s53s6e7xXur'
      path   += '2UjSUTISvCls98bUbvy62WGVMRFZm8ZQpHGtMpFbZbHJQqnaJuJ5uCidmTKHvan/jLGbr1gJuePfd9vrJL9'
      path   += 'mg6viikRUV9f5ZT8FvFFlRUMp8iy6Ypq9r/xpzX4XxohWmpNEO0cvUQikUgkEolEIpFIJBKJRCKRSCQSiUQ'
      path   += 'ikUj8U/wGqL9uRo5qhC4AAAAASUVORK5CYII='
      background: s("url('%s%s') %s", rq(prefix), rq(path)) i
      background-size: 290px i
      padding-left: 290px
      padding-top: 80px
      height: 0
      width: 0
      margin-top: .5rem
      if (show-hdr-txt) {
        &::after {
          content: '- Community Forums'
          display: block
          color: v98
          font-size: 1.8rem
          position: relative
          top: -47px
          font-family: monospace
          font-weight: 900
          margin-left: .5rem
          white-space: nowrap
        }
      }
    }
    #menu_main {
      // hide for now.
      display: none
      .active a {
        background: t
        span {
          background: t
        }
      }
      a:hover {
        background: none
        span {
          background: none
        }
      }
    }
  }
  // https://forum.dd-wrt.com/phpBB2/login.php
  .forum {
    #header {
      background: bg0
      height: 199px
      #header_ads {
        //fix privacy policy/inprint align on scroll
        display: none
      }
      #menu_areas {
        // hide in https://forum.dd-wrt.com/phpBB2/login.php
        display: none
        li a {
          color: v98
          &:hover span { background: #f07100 }
        }
        .active a {
          background: #f07100
          border: solid 1px #efa03b
          rad: 4px
          color: v99
          padding: 0px 2px 0px 2px
          span {
            background: #f07100
            padding: 0px 2px 0px 2px
          }
        }
      }
    }
    // Fix double word e.g. DD-WRT Forum Forum Index
    strong a.nav { vertical-align: middle }
    a.nav {
      &:hover {
        text-decoration: none
      }
      &[href*='view=']:hover { color: v09 i }
      &[href*='index'] {
         font-size: 14px
         font-weight: 900
         vertical-align: middle
        // add speech bubble before
        &::before {
          content: '\1F578\00A0'
          color: v98
          font-size: 20px
          margin-left: -.5rem
        }
      }
    }
    form {
      &[action*='posting_sec'] {
        .row1:nth-child(2n) {
          td {
            background-color: initial i
            &.quote {
              background-color: bg1 i
            }
          }
        }
      }
      &[action*='posting_sec'],
      &[action*='privmsg.php?folder'] {
        a.nav {
          vertical-align: middle
          &[href*='index'] {
            vertical-align: middle
          }
        }
        input[type*='checkbox'] {
          vertical-align: middle
        }
        table[cellspacing='1'] {
          border-spacing: 0 i
        }
      }
      &[name='jumpbox'] {
        text-align: left
        //margin-top: .688rem
      }
    }
    #main[style] {
      #content h2 {
        border-top: 1px solid bg4
        padding-top: .5rem
        &:first-child {
          border-top: 0
          padding-top: .7rem
        }
      }
    }
  }
  //posts for user x reset odd/even bg colors
  #forum_content {
    &.four_columns .posting {
      table[width='928'] {
        tr.row1:nth-child(2n) td.row1 {
          background-color: initial
        }
        tr[align='right']:first-child {
          .catHead {
            div[style*='float: right'] {
              margin-right: 0
              margin-bottom: .4rem
            }
          }
        }
      }
    }
  }
  .forum #content {
    .content {
      padding: 0 11px 11px 11px
      background: bg2
      border-color: bg4
      border-bottom-left-radius: 4px
      border-bottom-right-radius: 4px
    }
    h2 {
      color: v97
      border-bottom: 1px solid bg4
      padding-top: .4rem
      padding-bottom: .4rem
    }
    // header paging
    tr:first-child {
      td.catHead {
        div[style*='float: left'] {
          margin-bottom: .4rem
          a:not(:first-child):not(:last-child),
          b:not(:first-child):not(:last-child) {
            margin-right: -.25rem
            white-space: nowrap
            position: relative
            z-index: 1
          }
        }
        div[style*='float: right'] a[href*='view=next'] {
          margin-right: -.62rem
        }
      }
    }
    // footer paging
    tr:last-child {
      td.catHead {
        div[style*='float'] {
          margin-top: .4rem
          margin-bottom: -.4rem
          white-space: nowrap
        }
        a, b {
          margin-right: -0.25rem
          white-space: nowrap
          position: relative
          z-index: 1
        }
      }
    }
    .catBottom {
      td[width='25%']:not([align='right']) {
        span.nav b:not(:first-child) {
          background: v05
          border: 1px solid v04
          color: v99
          padding: 3px 6px
          rad: 4px
        }
      }
    }
    .catBottom {
      a:not(:first-child),
      b:not(:first-child) {
        margin-right: -.25rem
        position: relative
        z-index: 1
      }
    }
    .catHead, .catBottom {
      a {
        background: bg4
        border: 1px solid bg5
        color: v99
        padding: 3px 6px
        rad: 4px
        &:hover {
          background: v04
          border: 1px solid v05
          color: v99 i
          padding: 3px 6px
          rad: 4px
          text-decoration: none
        }
        &.topictitle {
          background: t
          border: t
          &:hover {
            color: v09 i
          }
        }
      }
      div[style*='float: left'] {
        b:not(:first-child) {
          background: v04
          border: 1px solid v05
          color: v99
          padding: 3px 6px
          rad: 4px
        }
      }
    }
    .thHead, .thSides,
    .thLeft, .thRight {
      color: fg1
    }
    #quick_links {
      // wider quicklinks so checkbox doesnt wrap
      // we also need the sapce to make this not look so sucky
      width: 260px
      #toggle a {
        color: v99 i
        font-weight: 600
        tsh: 0 1px 0 bg0
        margin-top: .12rem
        margin-left: .3rem
        display: inline-block
        &::before {
          content: '\007C\007C\007C'
          font-size: 12px
          vertical-align: 0
          letter-spacing: -.09em
          margin-right: .6rem
          transform: rotate(90deg)
          tsh: 0 1px 0 bg0
          display: inline-block
        }
        &:hover, &:target {
          color: v09 i
          text-decoration: none
          tsh: 0 1px 0 bg0
          &::before {
            transform: rotate(0deg)
            display: inline-block
          }
        }
      }
      .frame_bottom, .frame_top {
        background: v02
        border-color: v04
      }
      .frame_bottom {
        height: 12px
        border: 1px solid
        border-color: v02 v04 v04 v04
        rad: 0 0 4px 4px
      }
      .frame_top {
        height: 12px
        border: 1px solid
        border-color: v04 v04 v02 v04
        rad: 4px 4px 0 0
        margin-top: -.02rem
      }
      #quick_link_infos {
        padding: 20px 4px 0 10px
        border-left-color: v04
        border-right-color: v04
        background: v02
        h2 {
          margin-top: -1rem
          margin-left: .1rem
          color: v99
        }
        a { font-size: 14px }
        // tweak quicklinks login fields + align
        form.forum_login {
          input {
            margin: .3rem .3rem
            &[class='text'][name='autologin'] {
              vertical-align: middle
              margin-left: .5rem
            }
            &[type='password'],
            &[type='text'][name='username'] {
              width: 56%
              rad: 4px
              padding: .2rem .1rem
            }
            &.mainoption {
              margin-left: -.1rem
              margin-top: .4rem
              margin-bottom: -.1rem
            }
          }
          label {
            margin: .3rem .1rem
          }
        }
      }
    }
    .posting {
      border: 0
      background: bg2
      padding: 3px
      th {
        padding: 5px 4px 8px 0
        background: bg4
        border-bottom: solid 1px bg5
        border-bottom: 1px solid t
        border-top: 1px solid bg4
        color: fg1
        &:first-child {
          border-left: 1px solid bg4
          padding-left: .5rem
          rad: 4px 0 0 4px
        }
        &:last-child {
          border-right: 1px solid bg4
          border-left: 1px solid bg4
          padding-left: .4rem
          rad: 0 4px 4px 0
        }
        &.thLeft[width='150'], &.thCornerL[width='150'] {
          min-width: 150px
        }
        &.thTop:nth-child(2) {
          width: 16rem
        }
      }
      .col1:not(:nth-child(5)), .col2:not(:nth-child(5)) {
        &[valign='middle'][align='center'] {
          text-align: left
          .postdetails {
            text-align: center
          }
        }
      }
      td:nth-child(4)[class=''][valign='middle'][align='center'] {
        text-align: left i
      }
      .info td, .info {
        background: bg1
        border: 1px dashed bg5
        padding: .6rem .6rem
        rad: 4px
        &:first-child {
          border-right: 0
        }
        &[valign='top'][nowrap='nowrap'] {
          background: bg1
          border-left-color: t
        }
        &.catHead[colspan='2'] {
          background: bg1 i
        }
      }
      .navigation td {
        border-top: solid 1px bg4
      }
      .quote {
        border: 0
        background: bg1
        padding: .1rem .3rem
        border-left: 6px solid bg5
        rad: 1px 4px 4px 1px
        max-width: 905px
        margin-right: -1.5rem
        display: block
        text-overflow: fade
        overflow-x: auto
      }
    }
    .block {
      border: 0
      background: bg2
      padding: 3px
      th {
        padding: 8px 8px
        border-top-left-radius: 4px
        border-top-right-radius: 4px
        background: bg4
        border-bottom: 1px solid t
        border-top: 1px solid bg4
        color: fg1
        rad: 0
        &:first-child {
          border-left: 1px solid bg4
          rad: 4px 4px
        }
        &:last-child {
          border-right: 1px solid bg4
          rad: 4px 4px
        }
      }
      .row1 td { border-top: 1px solid bg4 }
    }
    .row1 .col2, .block td {
      padding: 3px 6px
      background: bg2
    }
    .row2 td {
      padding: 3px 6px
      background: bg3
      &[width='150'], &[width='100%'][height='28'],
      &[colspan='2'], &[width='22%'], &[valign='top'][height='28'] {
        background: bg2
      }
      &.attachrow {
        background: darken(convert($bg2), 10%)
      }
    }
    .row1 {
      font-size: 99%
      &:nth-child(2n) td, &:nth-child(2n) td[valign='middle']:first-child {
        background-color: bg3
      }
      &:nth-child(2n) td {
        &[class][width], &[width], &[valign='top'][height='28'],
        &[colspan], &:only-child {
          background-color: initial
        }
        &[width='100%'], &.quote {
          background-color: bg1
        }
      }
      td {
        padding: 3px 6px
        background: bg2
      }
    }
    // https://forum.dd-wrt.com/phpBB2/login.php
    .four_columns .frame_top, .corner_left, .corner_right {
      display: none
    }
    // https://forum.dd-wrt.com/phpBB2/login.php checkbox align
    .four_columns {
      input[type='checkbox'][name='autologin'] {
        vertical-align: middle
      }
    }
  }
  .thTop:not([width='100']), .thCornerR:not(:nth-child(5)) {
    &[align='center'] {
      text-align: right i
    }
  }
  tr > td:nth-child(6) {
    text-align: left i
  }
  .thCornerL[align='center']  {
    width: 60%
  }
  textarea {
    appearance: none
    c: v98 bg4 bg0
    border: 1px solid
    rad: 4px
    resize: vertical
    &:focus, &:focus-visible {
      outline: 1px solid v08
      bsh: 0 0 10px 0 v04
      rad: 4px
    }
    &[name='filecomment'] {
      margin-bottom: .3rem
    }
  }
  // style code blocks all over
  .posting td.code,
  #content [class*='row'] td.code {
    border: 1px solid bg4
    background-color: var(--code-bg) i
    color: v99
    padding: .6rem .5rem
    rad: 4px
    cursor: copy
    max-width: 0
    overflow-x: auto
    overflow-wrap: break-word
    font-family: monospace
  }
  .forum #content .quote td:not(.code) {
    background: t
  }
  .catBottom {
    tbody tr {
      td[align='center'] { padding-top: 1rem; padding-bottom: 1rem }
      td[width='25%'] { width: 23.33333% }
    }
    input[type='submit'][value='Search'] {
      margin-top: 1rem
      margin-bottom: -1.5rem
    }
    .nav { white-space: pre }
  }
  td.attachheader {
    background: bg1 i
    font: normal 11px Verdana, Arial, Helvetica, sans-serif;
    border-color: bg5
    border-right: 0
    border-collapse: unset
    color: v97
    rad: 0
  }
  table.attachtable {
    border: 1px solid bg5 i
    color: v97
    td {
      &.attachrow {
        color: v97
        border-color: t i
        background-color: bg1 i
      }
      &.attachheader {
        border-color: bg5 i
      }
      &[colspan='2'] {
        background-color: bg1 i
      }
    }
  }
  hr[width], hr {
    color: t i
    margin-top: -.21rem
  }
  [style='color: #88171A'], [style='color: red'] {
    c: v18 0 0
  }
  [style='color: #505050'] {
    c: v97 0 0
  }
  [style='color: navy'], [style='color: blue'],
  [color='blue'], [style='color: #0040A0'] {
    c: v69
  }
  [style='color: #EA7E20'], [style='color: brown'] {
    c: v29
  }
  [style='color: #1A3867'] {
    c: v65
  }
  [style='color: #8B0000'] {
    c: v17
  }
  [style='color: black'], [color='black'],
  [style='color: #000000'] {
    c: v99
  }
  [style='color: #404040'] {
    c: v95
  }
  [style='color: darkred'] {
    c: #ff3e3e
  }
  [style='color: purple']  {
    c: v89
  }
  [style='color:#006600'] {
    c: v46
  }
  [style='color:#FFA34F'] {
    c: v29
  }
  [style='color: darkblue'] {
    c: lighten(convert($v69), 40%)
  }
  [style='color: indigo'] {
    c: v79
  }
  [style='color: green'], [style='color: #006400'],
  [style='color: #556B2F'], [style='color: darkgreen'] {
    c: v45
  }
  a, .copyright {
    color: v09
    transition: transition
    &:hover {
      color: v08
    }
  }
  img {
    &[src*='voting_bar'] {
      scale: 1.09
      filter: brightness(1.5)
      &:hover {
        scale: 1.09
      }
    }
    &[src*='vote_lcap'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/200'
      path  += '0/svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet"><path d="M8.5 22.5A3.5'
      path  += ' 3.5 0 0 0 5 26v48a3.5 3.5 0 0 0 3.5 3.5h83A3.5 3.5 0 0 0 95 74V26a3.5 3.5 0 0 0-3.5'
      path  += '-3.5h-83z" fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      height: 12px
      padding-right: 6px
      padding-left: 6px
      background-size: 22px
      background-repeat: no-repeat
      background-position: center
      margin-right: -1rem
      rad: 1px 0 0 1px
      filter: brightness(1.5)
    }
    &[src*='vote_rcap'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/200'
      path  += '0/svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet"><path d="M8.5 22.5A3.5'
      path  += ' 3.5 0 0 0 5 26v48a3.5 3.5 0 0 0 3.5 3.5h83A3.5 3.5 0 0 0 95 74V26a3.5 3.5 0 0 0-3.5'
      path  += '-3.5h-83z" fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path))
      width: 0
      height: 12px
      padding-right: 6px
      padding-left: 6px
      background-size: 22px
      background-repeat: no-repeat
      background-position: center
      margin-left: -.8rem
      rad: 0 1px 1px 0
      filter: brightness(1.5)
    }
  }
  .spaceRow {
    display: none
    img { margin-top: .1rem }
  }
  // tweak avatars and margins a bit
  /img[src*='avatars'] {
    rad: 3px
    margin-top: .3rem
  }
  #content #forum_content {
    td, th {
      // dont break layout max font size is as set here.
      // e.g. https://forum.dd-wrt.com/phpBB2/viewtopic.php?t=51486
      // https://forum.dd-wrt.com/phpBB2/viewtopic.php?t=301950
      font-size: 13px
      line-height: 1.3
    }
    td .genmed, .topictitle, .postdetails, .name {
      font-size: 13px
    }
    .inlineadtitle {
      position: absolute
      .name { display: none }
    }
    .inlinead[height='28'][valign='top'] {
      position: fixed
      height: 0
      .ad-tag { display: none }
    }
    .topictitle img[src*='folder.gif'] {
      prefix = 'data:image/svg+xml;utf8,'
      path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
      path  += ' viewBox="0 0 24 24"><path d="M12 2v6a2 2 0 0 0 2 2h6v10a2 2 0 0 1-2 2h-6.81A6.5 6.'
      path  += '5 0 0 0 4 11.498V4a2 2 0 0 1 2-2h6zm1.5.5V8a.5.5 0 0 0 .5.5h5.5l-6-6zm-1.5 15a5.5 5'
      path  += '.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zm-2.146-2.354a.5.5 0 0 0-.708 0L5.5 18.793l-1.646-'
      path  += '1.647a.5.5 0 0 0-.708.708l2 2a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708z" '
      bgc    = 'fill="' + to_hex($v99) + '"/>'
      background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
      width: 0 i
      padding: 12px
      padding-right: 12px
      background-size: 18px
      background-repeat: no-repeat
      background-position: center
    }
    .postbody {
      // dont break width max font size is as set here.
      // e.g. https://forum.dd-wrt.com/phpBB2/viewtopic.php?t=51486
      // https://forum.dd-wrt.com/phpBB2/viewtopic.php?t=301950
      font-size: 14px
      line-height: 1.22
      max-width: 940px i
      padding: 5px 0 0 10px
      display: block
      text-overflow: ellipsis
      overflow: auto
      ul {
        background: bg1
        margin-left: 1rem
        padding: .5rem .5rem .5rem 1.5rem
        width: 93%
        border: 1px solid bg4
        rad: 4px
      }
    }
    &.four_columns {
      table[width='928'] {
        width: 1120px
        tr.navigation td {
          background: bg1
          border-top: 1px solid bg4
          border-bottom: 1px solid bg4
        }
      }
      // quote table bring it a bit into left and widen it
      // padding needed else it just left aligns
      table[width='90%'] {
        padding-left: 2rem
        margin-left: -1rem
        width: 98%
        td:not(.quote):not(.code) { background: t }
      }
    }
  }
  a[href*='modcp'] {
    img[src*='topic_'] {
      height: 22px
      margin-top: .362rem
    }
  }
  /form {
    // attach-list
    &[action*='uacp.php'] {
      table[width='100%'] {
        tr td {
          height: 35px
        }
        &[cellspacing='1'] {
          border-spacing: 0
        }
        &:nth-child(1) {
          td[align='right'] {
            text-align: right i
          }
        }
        &:nth-child(2) {
          span.gen a, span.gen {
            max-width: 185px
            overflow: hidden
            text-overflow: ellipsis
            display: inline-block
            white-space: nowrap
          }
          .row1, .row2 {
            &:nth-child(3) .gen {
              max-width: 130px
              overflow: hidden
              text-overflow: ellipsis
              display: inline-block
              white-space: nowrap
            }
            &:nth-child(4) .gen {
              max-width: 50px
            }
          }
        }
        &:nth-child(5) {
          span.gensmall {
            float: right i
            margin-top: -1.9rem
            margin-bottom: 1rem
          }
        }
        &[cellspacing='0'] {
          td[align='left'] {
            .nav * {
              margin-top: 2.5rem i
            }
            a:not(:first-child):not(:last-child),
            b:not(:first-child):not(:last-child) {
              margin-right: -.25rem
              white-space: nowrap
              position: relative
              z-index: 1
            }
            b:not(:first-child) {
              background: v05
              border: 1px solid v06
              color: v99
              padding: 3px 6px
              border-radius: 4px
            }
            a {
              background: bg4
              border: 1px solid bg5
              color: v99
              padding: 3px 6px
              border-radius: 4px
              &:hover {
                background: v05
                border: 1px solid v06
                color: v99
                padding: 3px 6px
                border-radius: 4px
                text-decoration: none
              }
            }
          }
          td[align='right'] {
            float: right
          }
        }
      }
    }
    // moderator pannel
    &[action^='modcp'] {
      // moderator move topic checkbox align
      input[type='checkbox'] {
        &[name='move_leave_shadow'] {
          vertical-align: middle
        }
        &[name*='post_id_list'] {
          vertical-align: -4rem
        }
      }
      fieldset td {
        background: t i
        border-color: t i
        input[type='text'] {
          margin-left: 0 i
        }
        &.catBottom {
          border-top: 1px solid bg4
        }
        .quote {
          border: 0 i
          background: bg1 i
          padding: 0.1rem 0.3rem i
          border-left: 6px solid bg5 i
          border-radius: 1px 4px 4px 1px i
        }
      }
      img[src*='icon_minipost.gif'] {
        prefix = 'data:image/svg+xml;utf8,'
        path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
        path  += ' viewBox="0 0 20 20"><path d="M3 5.5A2.5 2.5 0 0 1 5.5 3h5A2.5 2.5 0 0 1 13 5.5a.5.'
        path  += '5 0 0 1-1 0A1.5 1.5 0 0 0 10.5 4h-5A1.5 1.5 0 0 0 4 5.5v5A1.5 1.5 0 0 0 5.5 12h4.51'
        path  += '4a2.25 2.25 0 1 1 .114 1H5.5A2.5 2.5 0 0 1 3 10.5v-5zm8 6.75a1.25 1.25 0 1 0 2.5 0 '
        path  += '1.25 1.25 0 0 0-2.5 0zM7.5 14a.5.5 0 0 0-.5.5A2.5 2.5 0 0 0 9.5 17h5a2.5 2.5 0 0 0 '
        path  += '2.5-2.5v-5A2.5 2.5 0 0 0 14.5 7H9.872a2.25 2.25 0 1 0 .114 1H14.5A1.5 1.5 0 0 1 16 '
        path  += '9.5v5a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 8 14.5a.5.5 0 0 0-.5-.5zm.25-7.5a1.25 '
        path  += '1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z" '
        bgc    = 'fill="' + to_hex($v99) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
        width: 0
        height: 18px
        padding-left: 16px
        padding-right: 14px
        padding-top: 0
        padding-bottom: 0
        background-size: 22px
        background-repeat: no-repeat
        background-position: center
        vertical-align: middle
        &:hover {
          bgc    =  'fill="' + to_hex($v09) + '"/>'
          background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
        }
      }
      // split posts post details styling test
      td[valign='middle'] {
        background-color: bg0 i
        height: 2.5rem
        border: 1px dashed bg5 i
        border-radius: 4px
      }
    }
    // end
    &[action*='memberlist'] {
      tr.row2 td {
        background: bg2 i
      }
      tr[class*='row'] {
        &:hover td {
          background: var(--rgba-bg-05) i
        }
      }
      tr td {
        transition: transition
        }
      }
      &[action*='profile_sec'] {
        // hide broken shit theres no avatars provided in this forum
        .block > table > tbody > tr:nth-child(41) > td > span:last-child,
        input[name='avatargallery'] {
          display: none
        }
        // fix avatar delete checkbox align and tweak margins
        input[type='checkbox'][name='avatardel'] {
          vertical-align: middle
        }
        img[src*='/avatars/'] {
          margin-bottom: .4rem
          if (avatar_soh) {
            &:hover {
              margin-bottom: 2rem
            }
          }
        }
        tr[bgcolor='#FF0000'] {
          background-color: t i
          td {
            background-color: v11 i
            border: 2px dashed v19
            padding: 10px 20px i
            margin: 1rem 0 1rem i
            display: inline-grid
            width: 253%
            rad: 4px
            span[style='color: #f00'] {
              color: v19 i
              font-weight: 900
            }
          }
        }
        // end
        textarea[name='signature'] {
          max-width: 500px i
          width: 500px i
          height: 200%
          resize: vertical i
          margin-left: .3rem
        }
        &[action='posting_sec.php'] {
          table[width='450'] {
            /tr[valign='middle'][align='center'] {
              text-align: left
            }
            /textarea[rows='15'][style*='width'][wrap='virtual'] {
              width: 770px i
              max-width: @width
              resize: vertical
            }
          }
        }
      }
      &[action*='groupcp.php?g=4070'] {
        tr .catSides {
          background: bg2
        }
        tr td.row1 {
          background: bg3 i
        }
        tr td.row2, td.row1[width] {
          background: bg2 i
        }
        tr td[align='right'] {
          .nav {
            margin-left: -26.66rem i
          }
          .gensmall {
            float: right
          }
        }
        table[cellspacing='1'] {
          border-spacing: 0
          padding: 3px
        }
      }
      &[action*='privmsg.php'] {
        table {
          &[width='928'] {
            tr.row1 td {
              background-color: bg2 i
            }
          }
          &[width='100%'][cellspacing='1'] td.row1:not([width]) {
            background: bg1
            border: 1px solid bg4
            rad: 4px
          }
        }
      }
      // style pm's background/border
      &[action*='privmsg.php?folder'] {
        table {
          &[width='100%'][cellspacing='1'][cellpadding='4'] td.row1[colspan='3'][valign='top'] {
            background: bg1
            padding: .3rem .5rem
            border: 1px solid bg4
            rad: 4px
          }
          // pm quotes td header nick wrote; bg color to transparent
          &[width='90%'][cellspacing='1'][cellpadding='3'] {
            tr td:not(.code):not(.quote) {
              background: t i
            }
            // style quotes in PM's
            td.quote {
              border-left: 5px solid bg5
              rad: 1px 4px 4px 1px
            }
          }
          &[cellspacing='1'] td.row1  {
            background: t
          }
          &[cellpadding='3'] {
            .row1, .row2 {
              &[width='15%']:not([align='center']) {
                text-align: left
              }
            }
          }
          &[width='100%']:nth-child(3) {
            td[valign='middle'][align='right'] {
              text-align: right i
              .gensmall:nth-child(1) {
                top: -2rem
                position: relative
                a {
                  position: relative
                  top: 0
                }
              }
            }
          }
          &[width='100%'][cellspacing='1'][cellpadding='3'] {
            .row2[width='55%'] a.topictitle {
              margin-left: .62em
            }
            .row1[width='55%'] a.topictitle {
              margin-left: .32em
            }
            th.thTop {
              &[width='20%'], &[width='15%'] {
                text-align: center
              }
            }
          }
        }
        .catBottom {
          input[type='submit'] {
            margin-top: .8rem
          }
          &[colspan='3'][align='right'] {
            text-align: left
            padding-top: 0
            padding-bottom: 1rem
          }
        }
        span.gen:only-child {
          input.mainoption, input.liteoption {
            margin-top: 1.5rem
          }
        }
        img {
          // read message icon in pm inbox
          &[src*='folder.gif'][alt='Read message'] {
            prefix = 'data:image/svg+xml;utf8,'
            path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
            path  += ' preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M10.257 3.071a.5.'
            path  += '5 0 0 0-.514 0L2.97 7.134a1.999 1.999 0 0 0-.7.709L10 11.934l7.728-4.091a2 2 0 0 0-'
            path  += '.699-.709l-6.772-4.063ZM18 8.831l-7.766 4.11a.5.5 0 0 1-.468 0L2 8.832V14.5A2.5 2.5'
            path  += ' 0 0 0 4.5 17h11a2.5 2.5 0 0 0 2.5-2.5V8.83Z"'
            bgc    = 'fill="' + to_hex($v99) + '"/>'
            background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
            width: 0 i
            padding: 12px
            padding-right: 20px
            background-size: 20px
            background-repeat: no-repeat
            background-position: center
          }
          &[src*='folder_new.gif'][alt='Unread message'] {
            prefix = 'data:image/svg+xml;utf8,'
            path   = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em"'
            path  += ' preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M16.322 8.996L16.'
            path  += '5 9l.183-.005l.238-.02l.08-.01v3.83c0 1.114-.117 1.519-.335 1.926a2.272 2.272 0 0 1'
            path  += '-.945.945c-.407.218-.811.334-1.926.334h-8.59c-1.114 0-1.519-.116-1.926-.334a2.272 2'
            path  += '.272 0 0 1-.945-.945c-.203-.38-.318-.758-.332-1.712L2 7.309l7.277 3.638a.5.5 0 0 0 '
            path  += '.447 0l4.937-2.468c.333.205.702.357 1.096.442l.242.043l.128.016l.195.016ZM4.992 4.0'
            path  += '02L13.336 4l-.05.11l-.07.172c-.036.1-.068.2-.096.303l-.052.219l-.016.087l-.018.11a3'
            path  += '.484 3.484 0 0 0 .663 2.598l.14.173L9.5 9.94L2.224 6.303a.499.499 0 0 0-.18-.051c.0'
            path  += '52-.45.15-.71.29-.973c.218-.407.538-.727.945-.945c.38-.203.758-.318 1.712-.332ZM16.'
            path  += '5 3a2.5 2.5 0 1 1 0 5a2.5 2.5 0 0 1 0-5Z"'
            bgc    = 'fill="' + to_hex($v09) + '"/>'
            background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path) rq(bgc))
            width: 0 i
            padding: 12px
            padding-right: 20px
            background-size: 20px
            background-repeat: no-repeat
            background-position: center
          }
        }
      }
      // external login page fixes due to increasing table width from 928px to 970px
      &[action='login.php']:not(.forum_login) {
        .posting table[width='928'][cellspacing='1']:not(#z) {
          width: 1100px
        }
        h2 {
          margin: 10px 0 8px 0 i
        }
        .row1:nth-child(2n) td {
          background-color: inherit
        }
      }
      // bottom of the forum login addy, reworks this a bit.
      &[action*='login']:not([target]) {
        input {
          margin-top: 1.5rem
          &[type='text'], &[type='password'] {
            width: 20%
            rad: 4px
            padding: .2rem .6rem i
          }
          &[type='checkbox'], &.mainoption[name='login'] {
            margin-top: 0
          }
        }
      }
      &[action='search.php?mode=results'] {
        table[width='928'] {
          input {
            vertical-align: middle
            margin: .1rem .2rem
            &[name='show_results'] {
              margin: .1rem .3rem
            }
          }
          .genmed {
            vertical-align: middle
          }
          .row1:nth-child(2n) td {
            background-color: initial i
          }
        }
      }
    }

    // Better checkbox/radio inputs.
    input {
      &:autofill { background-image: linear-gradient(v24, v24) i }
      prefix  = 'data:image/svg+xml;utf8,'
      prefix += '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">'
      transition: transition

      &[type='radio'],
      &[type='checkbox'] {
        &, &:focus, &:hover:active {
          -webkit-appearance: none
          -moz-appearance: none
          appearance: none
          cursor: pointer
          height: .88rem
          width: @height
          border: 1px solid bg5
          background-size: cover
          c: v08 0 bg1
        }
        &:disabled, &:hover:active:disabled, &:disabled:hover {
          cursor: default
          c: v94 bg5 bg4
        }
      }
      &[type='radio'] {
        // fix border radius for radios
        rad: 50%
        // align with checked state
        padding: 7px
        margin-top: -.1rem
        margin-bottom: .1rem
        vertical-align: middle
        &:checked {
          path = '<circle cx="256" cy="256" r="128" fill="' + to_hex($v99) + '"/>'
          background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path), i)
          c: 0 v07 v07
        }
        &:focus, &:hover { c: 0 v09 v04; bsh: 0 0 10px 0 v04 }
      }

      &[type='checkbox'] {
      rad: 2px
      &:checked {
        path ='<path fill="' + to_hex($v99) + '" d="M99 213l-1 89 104 102 205-201v-91L203 315 99 213z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path), i)
        c: 0 v07 v07

        rad: 3px
      }
      &:focus, &:hover { c: 0 v09 v04; bsh: 0 0 10px 0 v04 }
      &:indeterminate {
        path = '<rect x="128" y="128" width="256" height="256" fill="' + to_hex($v99) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path), i)
          c: 0 v08 v09
          &:hover { c: 0 v09 bg2; bsh: 0 0 10px 0 v04 }
        }
      }

      &[type='file'] {
        &::file-selector-button {
          background-color: bg5
          border: 2px solid bg5
          color: v98
          bsh: 0 1px 0 bg0
          tsh: 0 1px 0 bg0
          rad: 4px
          padding: .1rem .4rem
          cursor: pointer
          transition: transition
          &:hover {
            background-color: v08
            border: 2px solid v08
            color: v98
            bsh: 0 0 10px 0 v04
          }
        }
        &::-webkit-file-upload-button {
          background-color: bg5
          border: 2px solid bg5
          color: v98
          bsh: 0 1px 0 bg0
          tsh: 0 1px 0 bg0
          rad: 4px
          padding: .1rem .4rem
          cursor: pointer
          transition: transition
          &:hover {
            background-color: v08
            border: 2px solid v08
            color: v98
            bsh: 0 0 10px 0 v04
          }
        }
      }
      &[type='text'], &[type='password'] {
        rad: 4px
        border: 1px solid bg5
        c: v98 0 bg1
        margin: .2rem .3rem
        padding: .243333rem .5rem
        &:active, &:focus-visible {
          border: 1px solid v08
          outline: 0
          bsh: 0 0 10px 0 v04
        }
        &:hover { border: 1px solid v08 }
      }
      &[type='password'][name*='password'] {
        padding: .243333rem .5rem
      }
      &[type='text'] {
        &[name='bday_day'], &[name='bday_year'] {
          vertical-align: middle
        }
        &.helpline {
          border: 1px solid bg5
          c: v98 0 bg1
          margin: .2rem .3rem
          padding: .3rem .4rem
          font-size: 12px i
          rad: 2px
          &:active, &:focus-visible {
            border: 1px solid v08
            outline: 0
            bsh: 0 0 10px 0 v04
          }
        }
      }
      &[type='submit'], &[type='reset'] {
        vertical-align: middle
        rad: 4px
        border: 1px solid v04
        c: v98 0 0
        background: v06
        padding: .19rem .6rem
        bsh: 0 1px 0 bg0
        tsh: 0 1px 0 bg0
        cursor: pointer
        &:active, &:focus-visible, &:hover {
          background: v08
          border: 1px solid v08
          outline: 0
          bsh: 0 0 10px 0 v04
        }
      }
      &[type='submit'][value='Go'] {
        border: 1px solid v06
        padding: .243333rem .2rem
        width: 3rem
        bsh: 0 1px 0 bg0
        tsh: 0 1px 0 bg0
        vertical-align: unset
        &:active, &:focus-visible, &:hover {
          background: v08
          border: 1px solid v08
          outline: 0
          bsh: 0 0 10px 0 v04
        }
      }
      // bottom add attach by submit/preview buttons
      &[type='submit'].liteoption[name='add_attachment'] {
        margin-top: calc(-3.3% + .5rem)
        left: calc(50% - 26.4%)
        position: absolute
        bsh: 0 1px 0 bg0
        tsh: 0 1px 0 bg0
        &:active, &:focus-visible, &:hover {
          background: v08
          border: 1px solid v08
          outline: 0
          bsh: 0 0 10px 0 v04
        }
      }
      &.post[name='fileupload'] {
        margin-bottom: 1.9rem
      }
      // preview and post buttons down a bit
      &[type='submit'][name='preview'],
      &[type='submit'][name='post'] {
        margin-top: 1.8rem
      }
      &[type='submit'][name='usersubmit'].liteoption {
        vertical-align: unset
      }
      &[type='button'] {
        border: 1px solid v05
        c: v98 0 v05
        padding: .1rem .1rem
        bsh: 0 1px 0 bg0
        tsh: 0 1px 0 bg0
        rad: 4px
        &:active, &:focus-visible, &:hover {
          background: v08
          border: 1px solid v08
          bsh: 0 0 10px 0 v04
          outline: 0
        }
        &[accesskey] {
          min-width: 100%
          text-transform: uppercase
          cursor: pointer
        }
      }
    }

    // Better select element styles.
    /select {
      // Custom icon.
      prefix  = 'data:image/svg+xml;utf8,'
      prefix += '<svg width="16" height="16" fill="' + to_hex($v95) + '" '
      prefix += 'xmlns="http://www.w3.org/2000/svg">'
      path    = '<path d="M4.427 9.427l3.396 3.396a.251.251 0 00.354 '
      path   += '0l3.396-3.396A.25.25 0 0011.396 9H4.604a.25.25 0 '
      path   += '00-.177.427zM4.423 6.47L7.82 3.072a.25.25 0 01.354 0L11.57 '
      path   += '6.47a.25.25 0 01-.177.427H4.6a.25.25 0 01-.177-.427z"/>'

      & {
        transition: transition
        vertical-align: -.07rem
        &:not([disabled]) {
          c: v97 0 bg0
          border: 1px solid bg5
          padding: .26rem .2rem
          line-height: 1.4
          rad: 4px

        &:hover { c: 0 v08 bg3 }
        &:active { c: 0 0 bg4 }
      }
      option[value='-1'] {
        background: bg4
        &:nth-child {
          &(2), &(4), &(8), &(10), &(25), &(27), &(35), &(37),
          &(41), &(43), &(50), &(52), &(62), &(64) {
            display: none
          }
        }
      }
      option, option[style*='background-color: #FAFAFA'] {
        background: bg0
        &[selected] {
          background: v05
        }
        &:hover { background-color: v02 i }
        &:checked {
          background-color: v05 i
          bsh: inset 0 0 10px 100px v06
        }
      }
    }
  }
}