/*==UserStyle==
@name Themed CMS
@version 1.0.0
@description Adds themes to the CMS pages
@namespace github.com/ColinTimBarndt/cms-sic-saarland
@author CoBa
@preprocessor stylus
@homepageURL https://github.com/ColinTimBarndt/stylus_cms-sic-saarland-theme
@supportURL https://github.com/ColinTimBarndt/stylus_cms-sic-saarland-theme/issues
@updateURL https://raw.githubusercontent.com/ColinTimBarndt/stylus_cms-sic-saarland-theme/main/cms-sic-saarland.user.styl

@var select theme-dark "Theme" {
    "Dark": "true",
    "Light": "false"
}
@var select owl-style-name "Owl" {
    "Monochrome": "'mono'",
    "Colored": "'default'",
    "🏳️‍🌈": "'rgb'"
}
==/UserStyle==*/

@-moz-document domain("cms.sic.saarland"),
               domain("cms.saarland-informatics-campus.de")
    /* font */
    $base-font-size-smallest = 0.815em
    $base-font-size-smaller = 0.875em
    $base-font-size = 0.938em
    $base-font-size-larger = 1.063em
    $base-font-size-largest = 1.118em
    $font-up-6 = 2.296em
    $font-up-5 = 2em
    $font-up-4 = 1.7511em
    $font-up-3 = 1.5157em
    $font-up-2 = 1.3195em
    $font-up-1 = 1.1487em
    $font-0 = 1em
    $font-down-1 = 0.8706em
    $font-down-2 = 0.7579em
    $font-down-3 = 0.6599em
    $font-down-4 = 0.5745em
    $font-down-5 = 0.5em
    $font-down-6 = 0.4355em
    $font-up-3-rem = 1.5157rem
    $font-up-2-rem = 1.3195rem
    $font-up-1-rem = 1.1487rem
    $font-0-rem = 1rem
    $font-down-1-rem = 0.8706rem
    $font-down-2-rem = 0.7579rem
    $font-size-ios-input = 1.07em
    $line-height-small = 1
    $line-height-medium = 1.2
    $line-height-large = 1.4
    $heading-font-family = Arial, sans-serif
    $font-family = Arial, sans-serif

    tint-filter-url($color, $id)
        'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="' + $id + '" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB"><feFlood result="f" flood-color="' + $color + '" flood-opacity="1"/><feComposite in="f" in2="SourceGraphic" operator="in"/></filter></svg>'

    urlembed($url, $append)
        $url = replace('%', '%25', $url)
        $url = replace(' ', '%20', $url)
        $url = replace('"', '%22', $url)
        $url = replace('#', '%23', $url)
        $url = 'url("' + $url + $append + '")'
        unquote($url)

    // Tints the entire element in the specified color
    tint-filter($color)
        urlembed(tint-filter-url($color, "x"), "#x")

    $tint-white-filter = tint-filter(#fff)

    if theme-dark
        // DARK
        $primary = #ddd
        $secondary = #222
        $tertiary = #0f82af
        $quaternary = #c14924
        $header_background = #111
        $header_primary = #ddd
        $highlight = #a87137
        $danger = #e45735
        $warning = #e09a00
        $success = #1ca551
        $love = #fa6c8d
        $always-black-rgb = 0, 0, 0
        $primary-rgb = 221, 221, 221
        $primary-low-rgb = 48.62, 48.62, 48.62
        $secondary-rgb = 34, 34, 34
        $header_background-rgb = 17, 17, 17
        $tertiary-rgb = 15, 130, 175
        $primary-very-low = #282828
        $primary-low = #313131
        $primary-low-mid = #7a7a7a
        $primary-medium = #909090
        $primary-high = #a6a6a6
        $primary-very-high = #c7c7c7
        $header_primary-low = #484848
        $header_primary-low-mid = #838383
        $header_primary-medium = #a4a4a4
        $header_primary-high = #b9b9b9
        $header_primary-very-high = #d2d2d2
        $secondary-low = #bdbdbd
        $secondary-medium = #919191
        $secondary-high = #646464
        $secondary-very-high = #313131
        $tertiary-very-low = #04212c
        $tertiary-low = #052e3d
        $tertiary-medium = #084860
        $tertiary-high = #0b6283
        $tertiary-hover = #14aeea
        $quaternary-low = #3a160b
        $highlight-low = #22170b
        $highlight-medium = #4c3319
        $highlight-high = #976632
        $danger-low = #591b0c
        $danger-low-mid = rgba(99, 30, 13, 0.7)
        $danger-medium = #a13116
        $danger-hover = #c63c1b
        $warning-low = #5c3f00
        /* TODO */
        $success-low = #0b4220
        $success-medium = #116331
        $success-hover = #168441
        $love-low = #8a0524
        $wiki = green
        $blend-primary-secondary-5 = #3c3c3c
        $primary-med-or-secondary-med = #919191
        $primary-med-or-secondary-high = #646464
        $primary-high-or-secondary-low = #bdbdbd
        $primary-low-mid-or-secondary-high = #646464
        $primary-low-mid-or-secondary-low = #bdbdbd
        $primary-or-primary-low-mid = #7a7a7a
        $highlight-low-or-medium = #4c3319
        $tertiary-or-tertiary-low = #052e3d
        $tertiary-low-or-tertiary-high = #0b6283
        $tertiary-med-or-tertiary = #0f82af
        $secondary-or-primary = #ddd
        $tertiary-or-white = #fff
        $facebook-or-white = #fff
        $twitter-or-white = #fff
        $hljs-comment = #bba
        $hljs-number = #aff
        $hljs-string = #f99
        $hljs-literal = #9ae
        $hljs-tag = #99f
        $hljs-attribute = #0ee
        $hljs-symbol = #fbe
        $hljs-bg = #333
        $google = #fff
        $google-hover = #f2f2f2
        $instagram = #e1306c
        $instagram-hover = #ac194b
        $facebook = #1877f2
        $facebook-hover = #0a54b3
        $cas = #70ba61
        $twitter = #1da1f2
        $twitter-hover = #0c85d0
        $github = #100e0f
        $github-hover = #463e42
        $discord = #7289da
        $discord-hover = #4a67cf
        $gold = #e7c300
        $silver = silver
        $bronze = #cd7f32
    else
        /* light */
        $primary = #222
        $secondary = #fff
        $tertiary = #08c
        $quaternary = #e45735
        $header_background = #fff
        $header_primary = #333
        $highlight = #ffff4d
        $danger = #e45735
        $warning = #d99500
        $success = #090
        $love = #fa6c8d
        $always-black-rgb = 0, 0, 0
        $primary-rgb = 34,34,34
        $primary-low-rgb = 232.9,232.9,232.9
        $secondary-rgb = 255,255,255
        $header_background-rgb = 255,255,255
        $tertiary-rgb = 0,136,204
        $primary-very-low = #f8f8f8
        $primary-low = #e9e9e9
        $primary-low-mid = #bdbdbd
        $primary-medium = #919191
        $primary-high = #646464
        $primary-very-high = #434343
        $header_primary-low = #f2f2f2
        $header_primary-low-mid = #d0d0d0
        $header_primary-medium = #afafaf
        $header_primary-high = #929292
        $header_primary-very-high = #5e5e5e
        $secondary-low = #4d4d4d
        $secondary-medium = gray
        $secondary-high = #a6a6a6
        $secondary-very-high = #ededed
        $tertiary-very-low = #e0f5ff
        $tertiary-low = #d1f0ff
        $tertiary-medium = #6cf
        $tertiary-high = #0aadff
        $tertiary-hover = #069
        $quaternary-low = #f7cdc2
        $highlight-low = #ffffca
        $highlight-medium = #ffffa6
        $highlight-high = #a6a600
        $danger-low = #fbe6e1
        $danger-low-mid = rgba(242,171,154,0.7)
        $danger-medium = #ec8972
        $danger-hover = #c63c1b
        $warning-low = #ffefcc
        /* TODO */
        $success-low = #b8ffb8
        $success-medium = #4dff4d
        $success-hover = #007a00
        $love-low = #fee9ee
        $wiki = green
        $blend-primary-secondary-5 = #f9f9f9
        $primary-med-or-secondary-med = #919191
        $primary-med-or-secondary-high = #919191
        $primary-high-or-secondary-low = #646464
        $primary-low-mid-or-secondary-high = #bdbdbd
        $primary-low-mid-or-secondary-low = #bdbdbd
        $primary-or-primary-low-mid = #222
        $highlight-low-or-medium = #ffffca
        $tertiary-or-tertiary-low = #08c
        $tertiary-low-or-tertiary-high = #d1f0ff
        $tertiary-med-or-tertiary = #6cf
        $secondary-or-primary = #fff
        $tertiary-or-white = #08c
        $facebook-or-white = #1877f2
        $twitter-or-white = #1da1f2
        $hljs-comment = #998
        $hljs-number = #099
        $hljs-string = #d14
        $hljs-literal = #458
        $hljs-tag = #000080
        $hljs-attribute = #008080
        $hljs-symbol = #990073
        $hljs-bg = #f8f8f8
        $google = #fff
        $google-hover = #f2f2f2
        $instagram = #e1306c
        $instagram-hover = #ac194b
        $facebook = #1877f2
        $facebook-hover = #0a54b3
        $cas = #70ba61
        $twitter = #1da1f2
        $twitter-hover = #0c85d0
        $github = #100e0f
        $github-hover = #463e42
        $discord = #7289da
        $discord-hover = #4a67cf
        $gold = #e7c300
        $silver = silver
        $bronze = #cd7f32
    shadow-under-text()
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25)
    icon-mono()
        transition: filter 0.25s !important
        filter: $tint-white-filter brightness(lightness($primary))
    icon-mono-hover()
        filter: $tint-white-filter brightness(lightness($secondary))
    if owl-style-name == "mono"
        owl-style()
            icon-mono()
    else if owl-style-name == "default"
        owl-style()
            transition: filter 0.25s !important
    else if owl-style-name == "rgb"
        @keyframes rgb-owl
            from
                filter: hue-rotate(0deg) brightness(150%)
            to
                filter: hue-rotate(360deg) brightness(150%)
        owl-style()
            transition: filter 0.25s !important
            animation: 4s linear infinite running rgb-owl

    html
        color: $primary !important
        font-family: $font-family
        font-size: $base-font-size
        line-height: $line-height-large
        background-color: $secondary !important
        overflow-y: scroll
        direction: ltr
    body
        color: $primary !important
        font-family: $font-family !important
        font-size: $base-font-size
        line-height: $line-height-large !important
        background: transparent !important
        padding-left: 0 !important
        margin-top: -10px
        @media (max-width: 767px)
            padding-right: 0
    /* DROPDOWN */
    .dropdown.open>.dropdown-menu,
    .btn-group.open>.dropdown-menu.open
        color: $primary-high
        border: 1px solid $primary-low !important
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2)
        background-color: $secondary
        border-radius: 0
        display: flex
        flex-direction: column
        padding: 0
        margin: 0
    .dropdown-menu,
    .btn-group>.dopdown-menu>.dopdown-menu.inner
        background-color: $secondary
        max-width: 16em
        padding: 0
        border-radius: 0 !important
        focus-entry()
            background: $tertiary-low !important
        & &
            margin-top: -1px
        &::before, &::after
            display: none !important
        >li.active, >li.selected, >li.dropdown-submenu:hover
            >a, >.dropdownentry
                focus-entry()
        >li.dropdown-submenu>a
            padding-right: 18px !important
            &::after
                position: absolute !important
                border-left-color: $primary
                top: 50% !important
                right: 0 !important
                transform: translate(-15px, -10px)
        >li
            position: relative
            display: flex
            align-items: baseline
            margin: 0
            cursor: pointer
            outline: none
            flex: 1 0 auto
            box-sizing: border-box
            justify-content: flex-start
            padding: 0
            &.divider
                height: 1px
                background: $primary-low
                border: none
                margin: 0.2em 0
            >a, >.dropdownentry
                color: inherit !important
                margin: 0
                display: inline-block
                overflow: hidden
                white-space: nowrap
                text-overflow: ellipsis
                flex-grow: 1
                padding: 0.5em !important
                font-size: inherit
                &:hover, &:focus
                    focus-entry()
    /* CONTENT */
    a[href]:not(.btn), .btn-link
        color: $tertiary
        &:hover, &:focus
            color: $tertiary-hover
    /* WIDGETS */
    .progress
        background: $primary-low !important
        box-shadow: none
    .label,
    .message
        color: $primary
        shadow-under-text()
    .label
        background: $primary-low
        vertical-align: middle
    .bar-success,
    .label-success
        color: $success-low !important
        background: $success !important
    .bar-warning,
    .label-warning,
    .btn-warning
        color: $warning-low !important
        background: $warning !important
    .bar-important,
    .label-important,
    .bar-danger,
    .label-danger
        color: $danger-low !important
        background: $danger !important
    .message
        color: $tertiary
        border-color: $tertiary
        background: $tertiary-low
    .alert
        shadow-under-text()
    .message a[href],
    .alert a[href]
        text-decoration: underline
    .alert-success
        color: $success
        border-color: $success
        background: $success-low
    .news-readmore
        cursor: pointer
        user-select: none
    declare-btn-style($btn-text, $btn-bg, $btn-hover)
        color: $btn-text
        background: $btn-bg
        >.caret
            border-top-color: $btn-text
            border-bottom-color: $btn-text
        &:hover, &:focus
            background: $btn-hover !important
    .btn, select:not([multiple])
        declare-btn-style($primary, $primary-low, $primary-medium)
        border-radius: 0 !important
        box-shadow: none !important
        text-shadow: none
        border: none
        font-size: 15px !important
        line-height: normal !important
        box-sizing: border-box !important
        padding: calc(.5em + 1px) calc(.65em + 1px) !important
        display: inline-flex !important
        align-items: center !important
        justify-content: center !important
        margin: 0 !important
        font-weight: normal !important
        cursor: pointer !important
        transition: all 0.25s !important
        height: 35px
        min-width: 35px
        >.caret
            border-top-color: $primary
            border-bottom-color: $primary
            transition: border-top-color 0.25s !important
        &:hover, &:focus
            color: $secondary
            >.caret
                border-top-color: $secondary
                border-bottom-color: $secondary
    .btn-group
        font-size: inherit
        .btn:not(:first-child)
            margin-left: 4px !important
    .input-append
        >.btn-group
            margin-left: 0
            z-index: 1
        .input-mini, select
            z-index: 2
    .btn-group.open .btn.dropdown-toggle
        background: $primary-medium
        &.btn-success
            background: $success-low
    .btn-small
        font-size: $font-down-2 !important
        height: auto
        min-width: auto
    .btn-success
        declare-btn-style($success, $success-low, $success-hover)
    .btn-danger, .btn-important
        declare-btn-style($danger, $danger-low, $danger-hover)
    a>i, .btn>i
        icon-mono()
    .btn:hover>i,
    .btn:focus>i
        icon-mono-hover()
    .round-button
        color: $primary
        border-color: $primary
        background: transparent
@-moz-document regexp("https://cms\\.(sic\\.saarland|saarland-informatics-campus\\.de)/[\\w-]+/(?!forum).*")
    /* NAV */
    .navbar, .user-login
        background: $secondary !important
        width: 100%
        z-index: 1200
        position: fixed
        top: 0
        right: 0
    .user-login
        padding: 2px 0
        height: 26px
        display: flex
        justify-content: flex-end
        align-items: baseline
        @media (min-width: 1200px)
            max-width: 1110px
            padding: unquote("2px max(10px, calc(50vw - 1110px/2))")
    .navbar-inner
        background: inherit !important
        border: none !important
        color: $primary
        box-shadow: none !important
        min-height: unset
        max-width: 1100px
        margin: 0 auto
    .navbar
        .brand, button
            font-size: $font-up-1
            line-height: $line-height-small
            box-sizing: border-box
            min-height: 30px
            padding: 6px 12px !important
            margin: 0
            color: inherit !important
            transition: background 0.15s
            text-decoration: none !important
        .brand
            margin-left: -10px
            margin-right: 0.5em
        .brand, .pull-right.nav
            &:hover, &:focus
                color: $quaternary !important
                background-color: $quaternary-low !important
        .nav
            margin: 0px
            list-style: none
            padding: 0
        .nav>li
            display: flex
            float: left
            margin-right: 0.5em
            list-style: none
            &.active>a
                box-shadow: none
                background: $secondary-very-high !important
            &>a
                border: none
                padding: 6px 12px
                color: $primary !important
                background: none !important
                font-size: $font-up-1 !important
                line-height: $line-height-small !important
                box-sizing: border-box
                min-height: 30px
                display: flex
                align-items: center
                transition: background 0.15s
                >.caret
                    align-self: start
                    margin-top: 7px !important
                    border-top-color: $primary !important
                    border-bottom-color: $primary !important
                &:hover, &:focus
                    color: $quaternary !important
                    background-color: $quaternary-low !important
                    >.caret
                        border-top-color: $quaternary !important
    /* HEADER */
    .page-header
        background-color: $header_background
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25)
        margin: 0 0 30px
        border: none
        position: sticky
        z-index: 1000
        top: 30px
        display: flex
        gap: 20px
        padding: 10px
        align-items: center
        @media (min-width: 1200px)
            padding: unquote("10px max(10px, calc(50vw - 1110px/2))")
    .page-header .site-logo
        margin: 0
    .page-header .site-logo > img
        owl-style()
        width: auto
        max-height: 60px
    .page-header .site-title
        display: flex
        flex-wrap: wrap
        align-items: baseline
        gap: 0 20px
        margin: 0
    .page-header .site-title
        >strong
            line-height: unset !important
        >small
            color: $primary-medium
        a
            color: $tertiary
    /* CONTENT */
    @media (min-width: 1200px)
        .container
            width: 100%
    .row
        margin: 0
        display: flex
        gap: 30px
        justify-content: center
    .row:last-child
        display: unset
    /* one-column layout */
    .row>.span10
        max-width: 1110px
        margin: 0
        flex-grow: 1
        flex-shrink: 1
    /* right column */
    .row>.span9
        max-width: 1110px
        margin: 0
        flex-shrink: 1
        flex-grow: 1
    /* left aside column */
    .row>.span3
        margin: 0
        flex-shrink: 0
    #scrollspy-container
        position: fixed
        top: 50% !important
        transform: translateY(-50%)
        max-width: 220px
    #scrollspy
        width: 220px
        background: $secondary
        >li>a
            text-shadow: none
            color: $primary
            border-color: $primary-low
        >li:hover>a
            color: $quaternary
            background: $quaternary-low
        >li.active>a
            color: $secondary
            background: $quaternary
    @media (min-width: 1200px)
        #scrollspy-container
            max-width: 270px
        #scrollspy
            width: 228px
    @media (min-width: 768px) and (max-width: 979px)
        #scrollspy-container
            max-width: 166px
        #scrollspy
            width: 166px
    .accordion-group
        border-radius: 0
        border: none
    .accordion-heading
        border-bottom: 3px solid $primary-low
    .accordion-body.in
        border: none !important
    .accordion-body.collapse.in
        overflow: hidden
    table:not([class^="fc"])>tbody>tr
        border-bottom: 1px solid $primary-low
        td, th
            border: none !important
    td, th
        background-color: transparent !important
    .table-bordered
        border: 1px solid $primary-low
    td.name-cell>img
        filter: invert(1) brightness(60%)
        icon-mono()
    .text-muted
        color: $primary-low-mid
    .thumbnail
        border-color: $primary
    .pagination ul>li>a, .pagination ul>li>span, .pagination ul>li>a,
    .pagination ul>li>span, .pagination ul>li>a:hover, .pagination ul>li>a:focus, .pagination ul>.active>a, .pagination ul>.active>span
        background: transparent
        border: none
    .input-append input, .input-append select, .input-append .uneditable-input
        background: transparent
        border: 1px solid $tertiary  
    .modal-header
        border-bottom: 1px solid $primary-low
    .modal-footer
        -webkit-box-shadow: none
        box-shadow: none
        border-top: none
        background: $secondary
        border-radius: 0px
        &>.btn-primary
            declare-btn-style($success, $success-low, $success-hover)
            &:hover, &:focus
                color: $secondary
    .form-modal, .modal
        background: $header_background
        border: none
    .close
        color: $danger
    hr
        border-top: 1px solid $primary-low
        border-bottom: 1px solid $primary-low
    input[type=text], input[type=password]
        border: 1px solid $primary-medium !important
        box-sizing: border-box
        height: 35px !important
        box-shadow: none !important
        border-radius: 0 !important
        padding: 0.5em 0.65em !important
        color: $primary !important
        cursor: text
        background: $secondary !important
        transition: background 0.15s !important
        &:hover
            border: 1px solid $primary-medium
        &:focus
            outline: 3px solid $tertiary !important
            outline-offset: -1px
    #UserLoginForm.dropdown-menu input[type=password]
        margin-left: 6px !important
    button.close
        text-shadow: none
        opacity: 1 !important
        &:hover, &:focus
            color: $danger-hover !important
@-moz-document regexp("https://cms\\.(sic\\.saarland|saarland-informatics-campus\\.de)/[\\w-]+/[^/]+/kNobelpreis")
    #knobelranking
        background: $secondary
        border: 1px solid $secondary-low
        color: $primary
        >li
            border-bottom-color: $secondary-low
        .score
            background: $primary-low
        .achieved
            background: $tertiary
@-moz-document regexp("https://cms\\.(sic\\.saarland|saarland-informatics-campus\\.de)/[\\w-]+/termine/calendar/index")
    .Calendar
        .fc-header tr
            border-bottom: none
        .fc-button
            border-radius: 0 !important
            box-shadow: none
            text-shadow: none
            border: 1px solid transparent
            font-size: $font-0 !important
            line-height: normal !important
            box-sizing: border-box !important
            padding: .5em .65em !important
            display: inline-flex !important
            align-items: center !important
            justify-content: center !important
            margin: 0 !important
            font-weight: normal !important
            color: $primary !important
            background: $primary-low
            transition: all 0.25s !important
            height: 35px
            &:not(.fc-corner-left)
                border-left: 1px solid $secondary-medium
            &:hover, &:focus
                &:not(.fc-state-disabled)
                    color: $secondary !important
                    background: $primary-medium
                    cursor: pointer
        .fc-button-prev, .fc-button-next
            height: 35px
        .fc-day-header
            background: $secondary-high
            border-right: 1px solid $secondary !important
            border-bottom: 4px solid $secondary !important
        .fc-widget-header
            background: $secondary-high !important
            border-color: $secondary
            &:last-child, &:first-child
                background: none !important
        .fc-widget-content
            border-color: $primary-low
        .fc-widget-header .fc-agenda-divider-inner
            background: $primary-low
        .fc-agenda-slots td
            border-color: $primary-low !important
        .fc-event
            border-color: transparent !important
            outline: 1px solid $secondary
            shadow-under-text()
            &.Blue
                color: $tertiary-low !important
                background: $tertiary
            &.Green
                color: $success-low !important
                background: $success
            &.Orange
                color: $warning-low !important
                background: $warning
            &.Red
                color: $danger-low !important
                background: $danger
        .fc-event-bg
            display: none
@-moz-document regexp("https://cms\\.(sic\\.saarland|saarland-informatics-campus\\.de)/[\\w-]+/forum/.*")
    body
        padding: 0 !important
        margin: 0 !important
    input, button, select, textarea
        font-family: $font-family
    /* NAV */
    .navbar-fixed-top
        order: 0
        display: flex
        width: 100%
        justify-content: center
        background: $secondary
        color: $primary
        font-size: $font-up-1
        line-height: $line-height-small
        margin: 0
        position: static
        >.navbar-inner
            flex-grow: 1
            max-width: 1110px
            background: transparent
            box-shadow: none
            min-height: 30px
            padding: 0
        .brand
            margin: 0
            color: inherit
            font-weight: normal
            text-decoration: none !important
        .container-fluid
            padding: 0
        .container-fluid>.btn-group
            padding: 0
        .brand,
        .container-fluid>.btn-group>.btn
            font-size: 1em
            line-height: $line-height-small
            box-sizing: border-box
            min-height: 30px
            padding: 6px 12px !important
            margin: 0
            color: inherit !important
            background: transparent !important
            transition: background 0.15s
            height: 30px
            >.caret
                border-top-color: $primary
            &:hover, &:focus
                color: $quaternary !important
                background-color: $quaternary-low !important
                >.caret
                    border-top-color: $quaternary !important
        .container-fluid>.linklist
            display: flex
            flex-wrap: wrap
            margin-left: 0.5em
            >.divider-vertical
                display: none
            >li>a
                height: 18px
            >*
                display: flex
                float: left
                margin: 0
                margin-right: 0.5em
                list-style: none
                align-self: baseline
                &.active>a
                    box-shadow: none
                    background: $secondary-very-high !important
                &>a
                    border: none
                    padding: 6px 12px
                    color: $primary !important
                    background: none !important
                    font-size: inherit
                    line-height: $line-height-small !important
                    box-sizing: border-box
                    min-height: 30px
                    display: flex
                    gap: 4px
                    transition: background 0.15s
                    >.caret
                        align-self: start
                        margin-top: 7px !important
                        border-top-color: $primary !important
                        border-bottom-color: $primary !important
                    &:hover, &:focus
                        color: $quaternary !important
                        background-color: $quaternary-low !important
                        >.caret
                            border-top-color: $quaternary !important
                        >i
                            filter: tint-filter($quaternary)
    #adv-search
        margin: 0
        padding: 6px 10px 6px 12px
        height: 18px
        display: flex
        transition: background 0.15s
        &:hover, &:focus
            background-color: $quaternary-low
            text-decoration: none !important
            i
                filter: tint-filter($quaternary)
    #search
        margin: 0
        align-self: stretch
        height: 30px
    .navbar #keywords
        box-shadow: none
        text-shadow: none
        color: inherit
        border-radius: 0
        border: 0
        height: 18px
        padding: 6px 12px
        background: $secondary-very-high
        transition: background 0.15s
        &:focus
            background: $secondary-high
    /* HEADER */
    #page-header
        display: flex
        flex-direction: column
        align-items: center
    .headerbar
        position: sticky
        top: 0
        align-self: stretch
        z-index: 100
        display: flex
        flex-direction: column
        background-color: $header_background
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25)
        margin: 0 0 10px
        padding: 0
        border: none
        >.row-fluid
            order: 2
            margin: 0
            padding: 10px
            align-items: center
            width: auto
            @media (min-width: 1200px)
                padding: unquote("10px max(10px, calc(50vw - 1110px/2))")
    #site-description
        display: grid
        grid-template-columns: 60px auto
        grid-template-rows: auto
        grid-template-areas: "logo title" "logo subtitle"
        gap: 0 20px
        margin: 0
        width: 100%
        >h1
            display: inline
            padding: 0 !important
            grid-area: title
            >a
                line-height: 1 !important
                font-size: 38.5px
        >p:first-of-type
            grid-area: subtitle
            font-size: 24.5px
            margin: 0
            margin-top: 0.5em
            color: $primary-medium
        .skiplink>a
            z-index: 2000
            position: fixed
            top: 0
            left: 0
            width: 100vw
            height: 1em
            outline: none
            background: $quaternary
            color: $quaternary-low
            text-align: center
            padding: 4px 0
            line-height: 1
            font-size: 30px
            transform: translateY(-100%)
            transition: transform 0.2s ease
            &:focus
                transform: translateY(0%)
    #logo
        grid-area: logo
        align-self: center
        float: none
        margin: 0
        padding: 0
        owl-style()
        /* Higher quality image */
        background: url('/system/theme/Sic/img/logo.png')
        background-size: cover
        >img
            width: auto
            max-width: unset
            max-height: 60px
            opacity: 0
    /* BREADCRUMBS */
    .breadcrumb
        background: none
        border: none
        box-shadow: none
        text-shadow: none
        >li
            display: flex
            gap: 5px
            align-items: center
            a
                z-index: 1
                shadow-under-text()
            strong
                $size = 0.5
                z-index: 0
                display: inline-block
                color: transparent
                text-shadow: none
                width: $size em
                height: $size em
                margin-left: -(($size**0.5)/2)em
                border-top: 2px solid $primary
                border-right: 2px solid $primary
                transform: rotate(45deg)
                user-select: none
    /* CONTENT */
    body > .container-fluid
        padding: 0
    #page-body
        margin: 0
        max-width: 1110px
        width: 100%
        .row-fluid
            width: auto !important
    #page-header>.row-fluid
        max-width: 1110px !important
        margin-left: auto
        margin-right: auto
        @media (max-width: 1110px)
            max-width: calc(100% - 22px) !important
    a:hover
        text-decoration: underline
    th, td
        border-radius: 0 !important
    .box
        border: 1px solid $primary-low
    .table th
        text-transform: none
    .table-bordered
        border: none
        td
            border: none
            border-bottom: 1px solid $primary-low
        th
            border: none
            border-bottom: 3px solid $primary-low
            color: $primary
            text-align: left
            padding: 8px 15px
    .table-striped>tbody>tr>td
        background: none !important
    thead, .heading
        background: none
    .heading, .box-heading
        background: none
        border-bottom: 3px solid $primary-low
        text-align: left
        text-transform: none
        color: $primary
        font-size: 1em
    table, .box
        background: none
    .posts, .replies, .views
        width: 65px
        text-align: center !important
    .badge
        color: $primary
        background: $primary-low
    .well
        background: none
        border: none
        box-shadow: none
    label, .postbody, .postprofile strong
        color: $primary !important
    .postprofile
        dt, dd
            color: $primary-medium
    .well blockquote
        border: none
        border-left: 5px solid $primary-medium
        background: none
    /* FOOTER */
    .navbar-fixed-bottom
        position: static
        .navbar-inner
            min-height: 30px
            background: none
            box-shadow: none
            display: flex
            justify-content: center
        .linklist
            height: 100%
            margin: 0
            display: flex
            align-items: baseline
        a, li:last-child
            padding: 6px 12px !important
            text-shadow: none
            line-height: 1 !important
            color: $primary !important
        i
            vertical-align: baseline
        li
            margin: 0 !important
        a
            transition: background 0.15s
        a:hover
            color: $quaternary !important
            background: $quaternary-low !important
            >i
                filter: tint-filter($quaternary)
        .divider-vertical
            display: none !important
    img[src="./cron.php?cron_type=tidy_search"]
        display: none
    /* WIDGETS */
    .btn > .caret
        margin-top: 0
    .inputbox, .input-medium
        border: 1px solid $primary-medium
        box-shadow: none !important
        border-radius: 0
        padding: 0.5em 0.65em !important
        color: $primary !important
        cursor: text
        background: $secondary
        transition: background 0.15s
        &:hover
            border: 1px solid $primary-medium
        &:focus
            outline: 3px solid $tertiary
            outline-offset: -1px
    select[multiple]
        border-radius: 0
        background: none
        border: 1px solid $primary-medium
        padding: 0
        cursor: default
        option
            color: $primary
            padding: 0.5em 0.65em
            cursor: pointer
            transition: background 0.15s
            &:hover
                background: $primary-low
    hr
        border: none !important
        border-top: 3px solid $primary-low !important