// moin2 foobar theme css
// stylus bug - https://github.com/LearnBoost/stylus/issues/790
// do NOT end comment lines with colon until the bug is fixed

// includes comments with notice regarding automatically generated css and licensing
@import "notice.css"

// reset all browser-specific default to have common defaults everywhere
@import "reset.css"

// pygments css - colorful theme
@import "colorful.css"

// smileys used by moin wiki parser (and maybe others)
@import "smileys.css"

// admonitions used by moin wiki parser (and maybe others)
@import "admonitions"

// user styles used by moin wiki parser (and maybe others) like red/green/solid/dashed/comment...
@import "userstyles.css"

// color have been used from the color palette
@import "color_palette"

// mime type icons
@import "mime_type_icons"

// moin diff styling
@import "moin_diff"

font_family = Helvetica, Arial, sans-serif
main_font_size = 1em
small_font_size = main_font_size * 0.8
heading_scale = 1.2  // font size factor for h1 .. h6

dir = left  // 'left' means left-to-right (ltr), 'right' means right-to-left (rtl)

scale = 1  // we have the whole screen width as base
global_tray_width = 100% / 6 * scale
local_panel_width = 100% / 6 * scale
global_padding_width = 0.5% * scale
local_padding_width = 0.5% * scale

main_container_width = 99.3% - global_tray_width - (4 * global_padding_width)

scale = 100% / main_container_width  // we have the main container width as base
content_width_with_panel = 99.3% - local_panel_width - (4 * local_padding_width)
content_width_no_panel = 99.3% - (2 * local_padding_width)

body
    color font_color
    background-color base_color
    font-family font_family
    background-image url(../img/base.png)

p
    margin .2em .4em
    font-size 1em
    line-height 1.3em

// the main elements - just the big picture first: panels, header, content, footer

#moin-global-tray
    float dir
    width global_tray_width
    padding global_padding_width
    overflow hidden

#moin-main-container
    float dir
    width main_container_width
    padding global_padding_width

// contains header and content, but not footer
#moin-main-box
    background-color page_color
    border border_style
    border-radius 6px
    box-shadow 2px 2px 4px shadow_color
    overflow hidden

#moin-header
    background-color header_bg_color
    color heading_color
    border-bottom border_style
    padding 0
    overflow auto
    a
        color heading_color

#moin-content-no-panel
    float dir
    width content_width_no_panel
    padding local_padding_width
    {'border-' + opposite-position(dir)} border_style


#moin-content
    float dir
    width content_width_with_panel
    padding local_padding_width
    {'border-' + opposite-position(dir)} border_style

#moin-local-panel
    float dir
    width local_panel_width
    padding local_padding_width
    {'margin-' + dir} -1px  // make it overlap with content border, see border_style
    {'border-' + dir} border_style

#moin-footer
    clear both
    font-size small_font_size
    color footer_color
    padding 0.5% 0.5%
    overflow auto


// now the stuff inside the main elements

// header elements
#moin-breadcrumbs-location
    float dir
    padding 0.5em
    font-weight bold

#moin-interwiki
    vertical-align middle
    a
        vertical-align middle

#moin-pagelocation
    vertical-align middle

.moin-pagepath
    vertical-align middle

// panels, footer
#moin-logo
    width 100%
    padding 0 0 1em 0
    a
        display block
        width 100%
        height 70px
        background-repeat no-repeat
        background-position center center

#moin-global-panel ul,
#moin-local-panel ul
    list-style-type none
    margin 0
    li
        background-color panel_color
        font-size main_font_size
        color panel_heading_color
        font-weight bold
        padding 0.5em
        border border_style
        border-radius 4px
        box-shadow 1px 1px 2px shadow_color
        margin-left 0.5em
        margin-bottom 0.5em
        overflow hidden
        word-wrap break-word
        ul
            padding 0.2em 0.1em
            li
                font-size small_font_size
                color nonexistent_link_color
                font-weight normal
                padding 0.1em 0.1em 0.2em 0.1em
                border none
                box-shadow none
                margin 0
                &:hover
                    background border_color
                a
                    display block

#moin-footer ul,
#moin-credits
    float dir
    list-style-type none
    li
        padding 0.1em
    a
        color footer_color

#moin-footer-logos
    float opposite-position(dir)
    ul li
        display inline

.moin-itemviews,
#moin-trail,
#moin-user
    a
        &:visited
            color link_color
        &:hover
            color hover_color

#moin-metadata
    ul
        li:hover
            background panel_color !important

// form
label
    display block
    font-weight bold

input[type="submit"],
input[type="button"],
button
    font-weight bold
    font-size .75em
    background base_color
    padding 4px 15px
    border border_style
    border-radius 6px
    box-shadow 1px 1px 2px shadow_color
    cursor pointer
    &:hover
        box-shadow 1px 1px 2px font_color
    &:active
        position relative
        top 1px

input,
select
    padding 3px
    background page_color
    border border_style
    border-radius 2px
input[type="text"]
    width 96%
input.blank
    border-color border_color
    border-width 2px

.moin-form
    dd
        float left
        width 65%
        margin-bottom 1em
        margin-left 0
        input
            width 70%
    dt
        clear both
        float left
        width 30%
        text-align right
        margin-top .3em
        padding-right 1%
        label
            &.required:after
                content '*'
                color font_color
    button,
    input[type="submit"]
        clear both
        display block
        margin auto

#moin-modify, form[name="delete_item"], form[name="rename_item"], form[name="destroy_item"]
    dd
        margin-left 0.9em
        width 100%
        float none
        input
            width 96%
    dt
        float none
        text-align left
        width auto
    input[type="submit"]
        margin-left 0
    dl
        margin 0

.moin-textcha
    padding-top .2em

#moin-options
    dd
        float none
        width 38%
        display table-cell
        padding 1.2em
    dt
        margin-left 10%
        text-align left
        width 61%
        margin-top 1.3em

// create table
#moin-create-table
    width 95%
    margin-left auto
    margin-right auto
    border none
    tbody tr
            th
                text-align center
                background table_header_color
                margin 2px
            td
                text-align center
                background page_color
                a
                    color link_color

// index page
.moin-clr
    clear both

.moin-index-message
    width 50%
    margin 1em auto
    text-align center
    display none
    span
        padding 4px
        background-color hover_color
        color heading_color
        border border_style
        border-radius 5px

.moin-download-link
  display none

.moin-index-path
    margin-left 0.5em
    &:before
        content url("../img/moin-parent.png")
        margin 0 0.3em

#moin-initials
    width 90%
    margin 5px auto
    text-align center
    a
        display inline-block
        margin 0
        padding 4px 5px
        &:hover,
        &.selected
            background link_color
            border-radius 5px
            color heading_color
            text-decoration none

.moin-item-index
    width: 100%
    margin-left: 0.5em
    div
        float left
        width 16.5em
        .moin-select-item
            display inline-block
            width 17px
            cursor default
            margin-top 1em

#lightbox
    background page_color
    opacity 0.7
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    z-index 9
    margin 0
    display none

.filter-toggle
    margin 0 0.2em
    font-size .9em

.moin-more-index
    background transparent url("../img/moin-expand.png") no-repeat
    display inline-block
    width 20px
    &:hover
        text-decoration none

.moin-path-separator
    font-size 1.2em
    color link_color

.moin-index-separator
    clear both
    border-top 1px dashed border_color
    display none

// index local panel
.moin-select-all
    span
        cursor pointer
.moin-select-actions
    span
        cursor pointer
    ul
        li
            cursor pointer
            color link_color !important
.moin-contenttypes-wrapper
    div
        cursor pointer
    form
        display none
        li
            label
                cursor pointer
                display inline
                vertical-align middle
                line-height 2em
                color link_color
            span
                display block
                font-size 0.8em

#f_contenttype_filter_submit
    padding-left 20%
    padding-right 20%
    margin-left 22%
    cursor pointer
    box-shadow 1px 1px 2px font_color
    &:hover
        box-shadow 1px 1px 2px shadow_color

.ct-hide:after
  content url("../img/moin-moveup.png")
  margin 0 0.2em
  float right
  vertical-align middle

.ct-shown:after
  content url("../img/moin-movedown.png")
  margin 0 0.2em
  float right
  vertical-align middle

// popups
#popup
    background: transparent url("../img/moin-transparent-bg.png") repeat
    padding 5px
    width 40%
    position absolute
    top 10%
    left 30%
    display none
    z-index 10

.popup-header
    background-color header_bg_color
    color heading_color
    padding 10px
    margin 0

input[value="X"]
    padding 0px 1px
    margin -0.2em
    width 19px
    border-radius 2em
    float right
    &:hover
        background page_color

.popup-body
    clear both
    background-color page_color
    color font_color
    padding 10px
    margin 0
    label
        margin 5px
    input
        margin 8px 5px

.popup-container
    margin 0
    border 5px solid header_bg_color
    border-radius 6px 6px 0px 0px

// upload content
#moin-upload-cont
    min-height 10px

#file_upload
    margin-top 2em

form.upload_file
    background-color base_color
    border border_style
    cursor pointer
    direction ltr
    font-weight bold
    height 2.5em
    line-height 2.5em
    overflow hidden
    position relative
    text-align center
    width 15em
    box-shadow 0px 0px 5px shadow_color
    &:hover
        box-shadow 0px 0px 5px font_color
    input
        cursor pointer
        height 100%
        margin 0
        opacity 0
        position absolute


form.upload_file button
    display none

form.upload_file
    display block

.file_upload_template .file_upload_start
    visibility hidden
    border-width 0px
    padding 0px

.file_upload_template .file_upload_start button
    width 0px

.file_name
    word-break break-all
    word-wrap break-word
    max-width 10em

.upload-form
    display none

.moin-drag
    font-size 0.7em
    color shadow_color

a.moin-conflict:before
    content url(../img/moin-conflict.png)
    margin 0 0.2em

// tabs
.moin-tab-titles
    margin -.5em
    list-style none
    span
        display none

.moin-tab-titles a.moin-current-tab
    color link_color

#moin-usersetting-title
    li a
        font-size .84em
        color panel_heading_color

// history page
#moin-global-history,
#moin-page-history
    font-size .75em

#moin-page-history
    table
        border border_style
        border-radius 5px
        thead
            border-top-left-radius 5px
            border-top-right-radius 5px
            tr th
                    text-align center
                    input[type="Submit"]
                        padding 4px 10px
                        box-shadow 1px 1px 2px shadow_color
                        cursor pointer
                        font-size 1em
                        &:hover
                            box-shadow 1px 1px 2px font_color

.moin-hist-rev
    margin 0
    input
        float left

.moin-history-time
    width 10%

.moin-history-contenttype
    width 18%

.moin-history-editorinfo
    width 17%

.moin-history-comment
    width 30%

.moin-action
    width 2%
    a:hover
        text-decoration none

.moin-history-container
    border border_style
    margin 2em 2em
    border-top-left-radius 5px
    border-top-right-radius 5px

.moin-history-container-header
    background table_header_color
    margin 0px
    padding 4px
    color heading_color
    border-bottom border_style
    border-top-left-radius 5px
    border-top-right-radius 5px
    h2
        display inline
        border none
    a.bookmark-link
        margin-left 10px
        color heading_color

.moin-history-container-body
    margin 0
    padding 0
    font-size 1.2em
    table
        margin 0
        width 100% !important
        border none !important

.moin-history-save:before
    content url('../img/moin-edit.png')

.moin-history-trash:before
    content url('../img/moin-deleted.png')

.moin-history-rename:before
    content url('../img/moin-renamed.png')

.moin-history-copy:before
    content url('../img/moin-new.png')

.moin-inline-label
    display inline

.moin-history-links
    width 5%
    a
        display block

.moin-history-editortext,
.moin-history-links span,
.moin-history-comment span
    color base_color
    display block
    margin-bottom 5px

.moin-offset-links
    float right
    margin-right 20px
    a
        margin-right 10px
        padding 3px 7px
        font-size 1.6em
        background page_color
        border 1px groove border_color
        border-radius 5px
        &:hover
            box-shadow 0px 0px 12px shadow_color

// links
a
    text-decoration none
    // order must be: link, visited, hover, active
    &:link
        color link_color
    &:visited
        color visited_color
    &:hover
        color hover_color
        text-decoration underline
    &:active
        color active_color
        text-decoration underline
    &.moin-nonexistent:link,
    &.moin-nonexistent:visited
        color nonexistent_link_color
        img,
        object
            background nonexistent_link_color
            border 3px dashed footer_color
    &.moin-nonexistent:hover
        color nonexistent_hover_color
    &.moin-nonexistent:active
        color nonexistent_hover_color

.current-link
    color selected_link_color !important

// moin-flash & error
.moin-flash
    margin 0
    padding 6px 6px 6px 38px
    background-color heading_color
    border-bottom border_style
    background-repeat no-repeat
    background-position 16px center

.moin-flash-hint
    background-image url(../img/smileys/idea.png)
    color hover_color

.moin-flash-info
    background-image url(../img/smileys/icon-info.png)
    color hover_color

.moin-flash-warning
    background-image url(../img/smileys/alert.png)
    color error_color

.moin-flash-error
    background-image url(../img/smileys/icon-error.png)
    color error_color

.moin-error
    color error_color
    background base_color
    padding 4px
    margin 1em
    text-align center
    list-style-type none
    border-radius 5px

// search
#moin-searchform
    margin 7px 12px 0px 0px
    font-size 0.82em
    text-align right
    float opposite-position(dir)
    padding 0
    width 15em
    input
        font-size 1em
        vertical-align middle
        background-color page_color
        border 0
        box-shadow none

#moin-search-submit
    text-indent -9000%
    margin-left -24px
    padding 0px
    width 20px
    height 16px
    background url(../img/moin-search.png) center center no-repeat
    background-size 16px 16px
    border none
    overflow hidden
    vertical-align middle
    cursor pointer

#moin-search-query
    padding-right 20px


#moin-long-searchform
    padding 0
    font-size 0.82em
    text-align left
    div
        margin 0
    label
        display inline

.searchresults
    dt
        margin-top 1em
        font-weight normal
    dd, p
        font-size 0.85em
    td
        border-width 0

.searchresults .searchhitinfobar
    margin-top 0
    display inline

.searchresults .foundtext
    margin-top 0

p.searchstats
    font-size 0.8em
    width 100%
    padding-left 14px

p.searchhint
    background-color page_color
    border 1px solid shadow_color
    padding 2px

.searchpages
    margin-left auto
    margin-right auto
    tr, td
        border 0
        padding 5px
        margin 0
        text-align center
        vertical-align middle
        color font_color
        font-weight bold
        font-size 1.05em
    td
        a, a:link
            text-decoration underline

// lists
ul, dl
    margin-left 1.5em
    margin-bottom .5em
ol
    // ordered list, first level needs big margin that will contain the number
    margin-left 3em
    ol
        // for >= second level we need less
        margin-left 1.5em

li
    padding 0.2em

dt
    font-weight bold
    padding 0.1em
dd
    margin-left 1.5em

ul
    &.moin-nobullet-list
        list-style-type none

ol
    &.moin-upperalpha-list
        list-style-type upper-alpha
    &.moin-loweralpha-list
        list-style-type lower-alpha
    &.moin-upperroman-list
        list-style-type upper-roman
    &.moin-lowerroman-list
        list-style-type lower-roman

blockquote
    margin-left 2em

// headings
for n in 1 2 3 4 5 6
    {'h' + n}
        scale_font = heading_scale ** (4 - n)
        font-size main_font_size * scale_font
        margin (1em / scale_font) 0
        heading_underline_thickness = floor(4px - n / 2)
        border-bottom heading_underline_thickness solid border_color
        padding-bottom heading_underline_thickness

// headings with mouseover permalinks
a.moin-permalink
    display none
    cursor pointer
    margin-left 0.1em
    color nonexistent_link_color
    &:hover.moin-permalink
        color nonexistent_hover_color

h1:hover .moin-permalink,
h2:hover .moin-permalink,
h3:hover .moin-permalink,
h4:hover .moin-permalink,
h5:hover .moin-permalink,
h6:hover .moin-permalink
    display inline
    text-decoration none

// horizontal rule ---- and custom rules ----- to ----------
hr
    background-color font_color
    border 0
    margin .9em 0
    height 1px
    &.moin-hr1
        height 2px
    &.moin-hr2
        height 3px
    &.moin-hr3
        height 5px
    &.moin-hr4
        height 7px
    &.moin-hr5
         height 9px
    &.moin-hr6
        height 12px

// tables
table
    margin 1%
    border-collapse collapse
    th, td
        padding 0.3em 0.4em
        vertical-align middle
        text-align left
    th
        border border_style
        background-color table_header_color
        color heading_color
    td
        border border_style

.moin-thead
    background-color table_header_color

table.zebra
    border border_style
    border-collapse separate
    border-spacing 1px
    width 98%
    border-radius 6px
    thead
        background-color table_header_color
        color heading_color
    tfoot
        background-color base_color
    tbody tr,
    > tr
        background-color table_bg_color
    th,
    td
        border none
    td
        form
            input
                width 100%
    tbody tr:nth-child(odd),
    > tr:nth-child(odd)
        background-color table_row_color

pre
    font-family monospace
    white-space pre-wrap
    word-wrap break-word
    border border_style
    background-color base_color
    margin .5em
    padding 5px
    clear both
    &.comment
        background-color header_bg_color
        color heading_color
        margin 0
        padding 0
        border 0
        &:before
            content url(../img/attention.png)

textarea
    font-family monospace
    width 98%
    border border_style
    margin-left .5em

#f_meta_text
    margin-left -.6em

input#f_comment
    width 96%
    border border_style
    margin .3em 0

// subitem
.moin-subitem-navigation
    overflow hidden
    word-wrap break-word
    ul
        display block
        li
            padding .4em !important
        a
            display inline !important
            color link_color
            &:hover
                text-decoration underline

.moin-subitem-navigation .sep
    font-size 1.2em
    margin-left 0px

.moin-subitem-navigation li ul
    display none
    border-left 1px dotted border_color
    padding-left 5% !important

.moin-subitem-navigation .expander
    background url(../img/moin-expand.png) no-repeat center center
    cursor pointer
    height 16px
    overflow hidden
    vertical-align middle
    width 16px
    border hidden
    text-indent -9000%
    box-shadow none

.moin-insertname-action
    border: hidden
    text-indent: -9000%
    padding: 0
    margin: 0 -2px
    vertical-align: middle
    height: 16px
    width: 16px
    overflow: hidden
    cursor: pointer
    box-shadow none
    background: url(../img/moin-link.png) no-repeat center center


// transclusion
.moin-transclusion
    max-width 100%

.moin-item-wrapper
    position relative
    display inline-block

div.moin-item-wrapper
    width 100% // force bottom border of transcluded headings to extend across entire page

.moin-item-overlay-ul,
.moin-item-overlay-lr
    display none
    position absolute
    font-size 1.2em
    font-weight bold
    margin 0
    opacity .5
    padding 1px
    border-color link_color
    border-style double

.moin-item-overlay-ul
    top -4px
    left -4px
    border-width 3px 0 0 3px

.moin-item-overlay-lr
    bottom -4px
    right -4px
    border-width 0 3px 3px 0

.moin-item-overlay-ul:hover,
.moin-item-overlay-lr:hover
    opacity .8
    background-color base_color
    color link_color
    text-decoration none

// table of content
.moin-table-of-contents
    border border_style
    background page_color
    font-size .8em
    margin 0.5em 0 0.5em 0.5em
    padding 0.5em
    text-indent -1em
    max-width 35%
    text-align left
    float right
    clear both
    box-shadow 3px 3px 6px shadow_color
    border-radius 15px

.moin-table-of-contents
    ol
        margin 0
        padding 0 0 0 .92em
    li
        margin .12em 0 0 0
        padding 0
        list-style none

.moin-table-of-contents-heading
    font-weight bold
    padding 0
    margin 0 0 0.5em 1em
    letter-spacing 0.075em

.moin-showhide
    margin-left 10px

table.navigation
    float right
    margin 2px

.moin-permalink
    display none

// text styles
sub
    vertical-align sub
sup
    vertical-align super
ins
    background-color inherit // needed for "/* __My Comment__ */"
    text-decoration underline
.moin-big
    font-size 1.17em
.moin-small
    font-size .83em

html,
body
    height 100%

#moin-main-container
    min-height 100%
    position relative

#moin-main-box
    margin-bottom 60px

#moin-footer
    position absolute
    bottom 5px
    width 98%

.moin-search-option-bar
    width 75%
    padding-left 14px
    span
        float right
        padding 10px

.moin-suggestions
    padding-left 14px

.tablesorter-header
    background-image url('../../../../static/img/bg.png')
    background-repeat no-repeat
    background-position left center
    padding-left 20px
    cursor pointer

.tablesorter-headerAsc
    background-image url('../../../../static/img/asc.png')

.tablesorter-headerDesc
    background-image url('../../../../static/img/desc.png')

.tablesorter-header.sorter-false
    background-image None

#ticket-summary
    width 50%

#ticket-list
    float right
    width 85%

#ticket-table-tip
    float right
    width 85%
    color shadow_color

#moin-ticketsearch-query
    background-image url('../../../../static/img/search.png')
    background-repeat no-repeat
    background-position 5px
    padding-left 24px
    width 150px
    height 20px
    right 40px
    position absolute

.moin-ticketsearch-form
    display inline

.tickets-sort-button
    display inline

.ticket-query-button.active, .ticket-tags-button.active
    background-color visited_color

.tickets-sort-button.dropdown
    z-index 500

.tickets-sort-button.dropdown ul.dropdown-menu
    background-color base_color
    padding 0
    margin 0
    display none
    position absolute
    li
        list-style-type none
        display block
        position relative
        a
            display inline

.tickets-sort-button.dropdown:hover ul.dropdown-menu
    display inline-block

.moin-ticket-tags
    border-bottom none

#moin-ticket-create-link
    display inline
    position absolute
    right 70px
    top 80px

#moin-ticket-create-link button
    width 150px
    height 35px

/* fix tests -- currently checking <big> and <small> */
@media print
    #moin-global-tray
    #moin-local-panel
    #moin-footer
    #moin-searchform
        display none