// Includes
@import "/bootstrap/less/bootstrap.less";
@import "/css/syntax.css";
@import "/css/wmd.css";

// Constants
@wikiLinkColor: #12f;
@wikiLinkColorHover: #36f;
@wikiLinkColorMissing: #f12;

@colorBlueDark: #48577D;
@colorBlueMedium: #7690CF;
@colorBlueLight: #D9E3FF;

@colorGrayBlueLight: #D3DCF2;
@colorGrayBlueMedium: #9197A6;
@colorGrayBlueDark: #43464C;

@colorCode: #523C37;

@pageBackground: white;
@pageBackgroundSpecial: #E5D19E;

// Macros
.box-shadow(@style, @c) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}

// Main tags
body {
    background: url('../img/gray_jean.png');
    //background-image: url(http://basehold.it/i/27);
}

// Global classes
a.wiki-link {
    text-decoration: none;
    color: @wikiLinkColor;
    &:link { color: @wikiLinkColor; }
    &:visited { color: @wikiLinkColor; }
    &:hover { color: @wikiLinkColorHover; text-decoration: underline; }
    &:active { color: @wikiLinkColor; }
}
a.wiki-link.missing {
    color: @wikiLinkColorMissing;
}
.decorator {
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 0.7em;
    letter-spacing: 0.1em;
    color: @colorBlueDark;
    .rev_id {
        font-family: @monoFontFamily;
        color: @colorCode;
    }
}

div.alert {
    font-size: @fontSizeSmall;
}

.container {
    nav, .meta {
        color: @grayLight;
        font-size: @fontSizeSmall;
        line-height: (@baseLineHeight * 2);
        a {
            padding: 0 1em;
            display: inline-block;
            text-decoration: none;
            color: @grayLight;
            &:link { color: @grayLight; }
            &:visited { color: @grayLight; }
            &:hover { color: @linkColorHover; }
            &:active { color: @grayLight; }
        }
    }
    .page {
        .box-shadow(0 0 10px, rgb(210, 210, 210));
        padding: @baseLineHeight;
        background: @pageBackground;
        overflow: hidden;
    }
    .page.special {
        background: @pageBackgroundSpecial;
    }

    .page>pre {
        margin-top: @baseLineHeight;
    }
    .meta {
        font-size: @fontSizeMini;
    }
}

form.form-search {
    display: inline-block;
    margin: 0;
    
    .search-query {
        font-size: @fontSizeSmall;
        height: @fontSizeSmall * 1.5;
    }
}
ul.search-results {
    list-style: none;
}

form.page-edit {
    textarea {
        height: 10em;
        font-size: @baseFontSize;
        font-family: @monoFontFamily;
        margin-bottom: 0;
        border-radius: 0;
    }
}
.wmd-input-wrapper {
    padding: 1em 0;

    .wmd-input-grip { 
        background: @grayLighter;
        border: 1px solid @grayLight;
        border-width: 0 1px 1px 1px;
        height: 12px;
        cursor: ns-resize;
    }
}
.wmd-preview-wrapper {
    border: 1px dashed @colorGrayBlueMedium;
    background: @colorGrayBlueLight;

    h3 {
        margin-left: 1em;
        margin-right: 1em;
        margin-bottom: 1em;
    }
    .wmd-preview {
        margin: 1em;
        background: none;
    }
}
#wmd-button-bar li {
    margin-left: 0;
}
.preview-wiki-meta {
    .meta-name {
        background: @colorBlueMedium;
        color: #fff;
        padding: 0.2em 0.4em 0.2em 0.6em;
        border-radius: 0.5em 0 0 0.5em;
        font-variant: small-caps;
        letter-spacing: 0.18em;
    }
    .meta-value {
        background: @colorGrayBlueDark;
        color: #fff;
        padding: 0.2em 0.6em 0.2em 0.4em;
        border-radius:  0 0.5em 0.5em 0;
    }
}
.commit-meta {
    margin-top: 1em;
    margin-bottom: 1em;
}

b.match {
    padding: 0 0.2em;
    background: #ffeb84;
}

// Page alerts
.page .alert {
    float: right;
    margin-left: -100%;
    top: -@baseLineHeight;
    position: relative;
    width: 50%;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

// Corner ribbon
.makeRibbon(@bgColor) {
    background-color: @bgColor;
    overflow: hidden;
    transform: translate(50%, -@baseLineHeight) translate(-3em,3em) rotate(45deg);
    -moz-transform: translate(50%, -@baseLineHeight) translate(-3em,3em) rotate(45deg);
    -webkit-transform: translate(50%, -@baseLineHeight) translate(-3em,3em) rotate(45deg);
    box-shadow: 0 0 1em #888;
    -moz-box-shadow: 0 0 1em #888;
    -webkit-box-shadow: 0 0 1em #888;
}
.makeRibbonContent(@borderColor, @textColor) {
    border: 1px solid @borderColor;
    color: @textColor;
    display: block;
    margin: 0.05em 0 0.05em 0;
    padding: 0.5em 3.5em;
    text-align: center;
    text-shadow: 0 0 0.5em #444;
}
.ribbon {
    .makeRibbon(#a00);
    margin-bottom: @baseFontSize * -2.6 - 4px;

    .ribbon-inner {
        .makeRibbonContent(#faa, #fff);
    }
}