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

// Constants
@colorBlue: #0F1FFF;
@colorBlueDark: #1D3982;
@colorOrange: #B03500;
@colorGreen: #B6CC95;
@colorGreenDark: #496B15;
@colorPage: #FFFFFF;
@colorFooter: #E5E7FF;
@colorCode: #523C37;


// 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 {
    text-decoration: none;
    color: @colorBlue;
    &:link { color: @colorBlue; }
    &:visited { color: @colorBlue; }
    &:hover { color: @colorBlue; text-decoration: underline; }
    &:active { color: @colorBlue; }
}
a.wiki-link.missing,
a.wiki-meta-link.missing {
    color: @colorOrange;
    &:hover { color: @colorOrange; text-decoration: underline; }
}
.decorator {
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 0.7em;
    letter-spacing: 0.1em;
    color: @colorBlue;
    .rev_id {
        font-family: @monoFontFamily;
    }
}
.tooltip {
    font-size: @baseFontSize*0.75;
}
.alert {
    font-size: @fontSizeSmall;
}

// Main classes
.wrapper>nav,
.wrapper>footer {
    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; }
    }
}
.wrapper>article {
    .box-shadow(0 0 10px, rgb(210, 210, 210));
    background: @colorPage;
    overflow: hidden;

    header {
        background: @colorBlueDark;
        color: @colorPage;
    }
    footer {
        background: @colorFooter;
        border-top: 1px dashed darken(@colorFooter, 5%);
    }
    pre {
        margin-top: @baseLineHeight;
    }
}
.wrapper>article>header,
.wrapper>article>section,
.wrapper>article>footer {
    padding: @baseLineHeight;
}
.wrapper>footer {
    font-size: @fontSizeMini;
}
.special>article {
    background: @colorGreen;
}
.special>article header {
    background: @colorGreenDark;
}
.special>article footer {
    background: @colorGreen;
}

// Search
form.form-search {
    display: inline-block;
    margin: 0;

    .search-query {
        font-size: @fontSizeSmall;
        height: @fontSizeSmall * 1.5;
    }
}
ul.search-results {
    list-style: none;
}
b.match {
    padding: 0 0.2em;
    background: #ffeb84;
}

// Page editing
#page-edit {
    textarea {
        height: 10em;
        font-size: @baseFontSize;
        font-family: @monoFontFamily;
        margin-bottom: 0;
        border-radius: 0;
    }
}
#wmd-form-wrapper>section {
    margin: 1em;
}
#wmd-input-grip {
    background: @grayLighter;
    border: 1px solid @grayLight;
    border-width: 0 1px 1px 1px;
    height: 12px;
    cursor: ns-resize;
}
#wmd-preview-button span {
    background: url(../img/markdown-32x20.png);
    width: 32px;
    height: 20px;
}
/*#wmd-preview-wrapper {
    border: 1px dashed @colorBlueDark;

    h3 {
        margin: 0.5em 1em 0.5em 1em;
    }
    #wmd-preview {
        margin: 1em;
        background: none;
    }
}
#wmd-button-bar li {
    margin-left: 0;
}*/
.preview-wiki-meta {
    .meta-name {
        background: @colorBlueDark;
        color: @colorPage;
        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: @colorFooter;
        color: black;
        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;
}

// Page alerts
article .alert {
    float: right;
    margin-left: -100%;
    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%, 0) translate(-3em, 2.05em) rotate(45deg);
    -moz-transform: translate(50%, 0) translate(-3em, 2.05em) rotate(45deg);
    -webkit-transform: translate(50%, 0) translate(-3em, 2.05em) rotate(45deg);
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
    float: right;
}
.makeRibbonContent(@borderColor, @textColor) {
    border: 1px solid @borderColor;
    color: @textColor;
    display: block;
    margin: 0.05em 0 0.05em 0;
    padding: 0.5em 5em;
    text-align: center;
    text-shadow: 0 0 0.5em rgba(1, 1, 1, 0.2);
}
.ribbon {
    .makeRibbon(lighten(@colorOrange, 10%));
    float: right;

    .ribbon-inner {
        .makeRibbonContent(@colorOrange, @colorPage);
        a { color: #fff; text-decoration: none; }
    }
}