/**
 * This file provides the main design styles for the
 * bits that surround the content.
 *
 * @author Anika Henke <anika@selfthinker.org>
 * @author Andreas Gohr <andi@splitbrain.org>
 * @author Clarence Lee <clarencedglee@gmail.com>
 */

/* header
********************************************************************/


#dokuwiki__header {
    width: 100%; 
    height: 100px; 
    position: fixed; 
    right:0;
    left:0;
    top:0;
    z-index: 30;
    
    .pad {
        width: 100%; 
        height: 60px; 
        background: #222c37;
    }

    .headings {
        width: 271px; 
        height: 34px; 
        float: left;
        padding: 13px 0 0 0;
    }
    
    .tools {
        width: 170px; 
        height: 60px; 
        float: right; 
        position: relative; 
        


        .holder {
            .pure-menu-link;
        }
        
        .menu {
            list-style: none; 
            width:100%;
            height:100%;

            &:hover ul {
                display:block;
            }
            ul {
                .pure-menu-children；
            }

            li {
                background:#222c37;
                .pure-menu-item;
                margin: 0px 0 0 -19px;
                width: 190px;
                a {
                    padding-left: 30px;
                }
                a { 
                    height: 40px; 
                    line-height: 40px; 
                    display: block; 
                    float: left; 
                    margin: 0 15px; 
                    text-decoration: none; 
                    cursor: pointer; 
                    color: #D1D1D1; 
                    -webkit-transition: color .15s; 
                    -moz-transition: color .15s; 
                    -ms-transition: color .15s; 
                    -o-transition: color .15s; 
                    transition: color .15s; 
                }
                a:hover { color: #00cccc; }
                a.selected {
                    color: #00cccc; position: relative; font-family: 'avalonbold', sans-serif; line-height: 44px; 
                }
                a.selected:after { 
                    content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 11px; left: 0; background: #00cccc; 
                }
            }

            a {
                height: 40px;
                line-height: 40px;
                display: block;
                float: left;
                margin: 0px 15px;
                text-decoration: none;
                cursor: pointer;
                color: #D1D1D1;
                transition: color 0.15s ease 0s;
            }
        }

        ul { 
            display:none;
            position: relative; 
            z-index: 15; 
            list-style: none; 
            margin: 15px 15px 15px 0; 
        }

        li { 
            float: left; 
            margin: 0 0 0 20px; 
            font-size: 1em; 
            font-family: 'avalon', sans-serif; 
        }
        
    }

    [dir=rtl] .tools li {
        margin-right: 1em;
        margin-left: 0;
    }

    form.search {
        float: right; position: relative; 

        :before {
            content: ''; 
            width: 18px; 
            height: 60px; 
            position: absolute; 
            left: -17px; 
            background: url(images/shard-left.png) 0 0 no-repeat; 
        }        
        :after {
            content: ''; 
            width: 18px; 
            height: 60px; 
            position: absolute; 
            right: -17px; 
            background: url(images/shard-right.png) 0 0 no-repeat; 
        }

        input.edit { 
            width: 350px; 
            line-height: 20px; 
            padding: 20px 50px 20px 20px; 
            border: 0; 
            margin: 0; 
            outline: none;
            -webkit-border-radius: 0; 
            -moz-border-radius: 0; 
            border-radius: 0; 
        }

        input.edit:focus { 
            background: #fff !important;
        }

        input.button {         
            background: transparent url(images/search.png) no-repeat 0 0;
            border-width: 0;
            width: 19px;
            height: 14px;
            text-indent: -99999px;
            margin-left: -35px;
            box-shadow: none;
            padding: 0;
        }

    }

    [dir=rtl] form.search {
        input.edit {
            padding: .35em .1em .35em 22px;
        }

        input.button {
            background-position: 5px 0;
            margin-left: 0;
            margin-right: -20px;
            position: relative;
        }
    }

    #IE7 form.search {
        min-height: 1px;
        z-index: 21;
    }


    .links {
        ul {
            float: right; 
            list-style-type: none; 
            margin: 10px 0; 
            padding: 0 30px 0 0;
        }

        li { 
            float: left; 
            margin: 0 1px 0 0; 
            font-size: 1em; 
            font-family: 'avalon', sans-serif; 
            a { 
                height: 40px; 
                line-height: 40px; 
                display: block; 
                float: left; 
                margin: 0 15px; 
                text-decoration: none; 
                cursor: pointer; 
                color: #D1D1D1; 
                -webkit-transition: color .15s; 
                -moz-transition: color .15s; 
                -ms-transition: color .15s; 
                -o-transition: color .15s; 
                transition: color .15s; 
            }
            a:hover { color: #00cccc; }
            a.selected { color: #00cccc; position: relative; font-family: 'avalonbold', sans-serif; line-height: 44px; }
            a.selected:after { content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 11px; left: 0; background: #00cccc; }
        }

    }

    h1 {
        margin: 0;
        font-size: 1.5em;
        font-weight: normal;

        img {
            float: left;
            margin: 0px 10px 0px 20px;
        }

        span {
            display: block;
            width:100%;

        }

        a { 
            color: #D1D1D1; 
        }
        a:hover { color: #00cccc; }
        a.selected {
            color: #00cccc; position: relative; font-family: 'avalonbold', sans-serif; line-height: 44px; 
        }
        a.selected:after { 
            content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 11px; left: 0; background: #00cccc; 
        }
    }

    p.claim {
        margin-bottom: 0;
        font-size: 0.875em;
    }

    /* make all links in header (including breadcrumb and interwiki) same colour as the rest */
    a {
        color: @ini_link;
        background-color: inherit;
    }
}

[dir=rtl] #dokuwiki__header h1 img {
    float: right;
    margin-left: .5em;
    margin-right: 0;
}

/* highlight selected tool */
.mode_admin a.action.admin,
.mode_login a.action.login,
.mode_register a.action.register,
.mode_profile a.action.profile,
.mode_recent a.action.recent,
.mode_index a.action.index,
.mode_media a.action.media,
.mode_revisions a.action.revs,
.mode_backlink a.action.backlink,
.mode_subscribe a.action.subscribe {
    .pur
}


#dokuwiki__usertools a.action,
#dokuwiki__usertools a.iw_user {
    padding-left: 20px;
    background: transparent url(images/usertools.png) no-repeat 0 0;
}

[dir=rtl] #dokuwiki__usertools a.action {
    padding-left: 0;
    padding-right: 20px;
}

[dir=rtl] #IE7 #dokuwiki__usertools a.action {
    display: inline-block;
}

#dokuwiki__header .mobileTools {
    display: none; /* hide mobile tools dropdown to only show in mobile view */
}

/*____________ user tools ____________*/

#dokuwiki__usertools {

    .pure-menu; 
    .pure-menu-horizontal;
    float:right;
    width:auto;
    background:#333;

    li.much {
        .pure-menu-item;
        .pure-menu-has-children;
        .pure-menu-allow-hover;
    }

    ul {
        .pure-menu-item;
    }

    li {
        .pure-menu-item;
    }
}

[dir=rtl] ##dokuwiki__header usertools {
    text-align: left;
    left: 40px;
    right: auto;

    a.action.admin {
        background-position: right 0;
    }

    a.action.profile {
        background-position: right -32px;
    }

    a.action.register {
        background-position: right -64px;
    }

    a.action.login {
        background-position: right -96px;
    }

    a.action.logout {
        background-position: right -128px;
    }
}

/*____________ site tools ____________*/

#dokuwiki__sitetools {
    text-align: right;
    form.search {
        font-size: 0.875em;
    }
    a.action.recent {
        background-position: left -96px;
    }

}

[dir=rtl] #dokuwiki__sitetools {
    text-align: left;
}

/*____________ breadcrumbs ____________*/

.dokuwiki div.breadcrumbs {

    width: 100%; 
    background: #e6e6e6; 
    border-bottom: #222c37 0px solid;

    div {
        padding: .1em .35em;
    }

    div:only-child {
        border-top: 1px solid @ini_background;
        border-bottom: 1px solid @ini_border;
    }

    div:first-child {
        //border-top: 1px solid @ini_background;
    }

    div:last-child {
        //border-bottom: 1px solid @ini_border;
    }

    .bcsep {
        font-size: 0.75em;
    }

    .trace {
        span.info {
            float: right;
        }
    }
}

#IE7 .dokuwiki div.breadcrumbs div,
#IE8 .dokuwiki div.breadcrumbs div {
    //border-bottom: 1px solid @ini_border;
}

/* sidebar
********************************************************************/

.dokuwiki .aside {
    font-size: 0.875em;
    overflow: hidden;
    word-wrap: break-word;

    /* make sidebar more condensed */

    h1 {
        font-size: 1.714em;
        margin-bottom: .292em;
    }

    h2 {
        margin: 2em 0 1em 0;
        font-size: 14px;
        border-bottom: 1px solid #EEE;
        padding-left: 10px;
    }

    h3 {
        margin-bottom: .444em;
    }

    h4 {
        margin-bottom: .5em;
    }

    h5 {
        margin-bottom: .5714em;
    }

    p,
    ul,
    ol,
    dl,
    pre,
    table,
    fieldset,
    hr,
    blockquote,
    address {
        margin-bottom: .7em;
    }

    ul,
    ol {
        padding-left: .5em;
    }

    li ul,
    li ol {
        margin-bottom: 0;
        padding: 0;
    }

    a:link,
    a:visited {
        color: @ini_link;
        background-color: inherit;
    }
}

[dir=rtl] .dokuwiki .aside ul,
[dir=rtl] .dokuwiki .aside ol {
    padding-right: .5em;
}

/* content
********************************************************************/

.dokuwiki .pageId {
    margin: 0.2em 0;
    color: #333;
    text-align: center;
    border-bottom: 1px solid #eee;     
    font-size: 3em;
    font-weight: 300;
    max-width: 800px;
    margin: 0px auto 50px;
}

.dokuwiki div.page {
    margin: 0 auto;
    max-width: 800px;
    margin-bottom: 50px;
    line-height: 1.6em;
    padding: 1.556em 2em 0;

    p {
        margin: 1em auto;
        padding: 0 2em;
        max-width: 800px;
        line-height: 1.6em;
    }
}

.dokuwiki .docInfo {
    font-size: 0.875em;
    text-align: right;
}

/* license note under edit window */
.dokuwiki div.license {
    font-size: 93.75%;
}

[dir=rtl] .dokuwiki .docInfo {
    text-align: left;
}

[dir=rtl] .dokuwiki .pageId {
    right: auto;
    left: -1em;
}

/* footer
********************************************************************/

.dokuwiki .wrapper {
    margin-bottom: 1.4em;
}

#dokuwiki__footer {
    margin-bottom: 1em;
    text-align: center;

    > .pad {
        font-size: 0.875em;
    }

    div.license {
        margin-bottom: 0.5em;
        font-size: 100%;
    }

    div.buttons a {
        img {
            opacity: 0.5;
        }

        &:hover img,
        &:active img,
        &:focus img {
            opacity: 1;
        }
    }

}

[dir=rtl] #dokuwiki__footer .license img {
    margin: 0 0 0 .5em;
}