@import "frameless.less";
@font-face {font-family: Delicious; src: url('/static/fonts/Delicious-type1/DelicRom');}
@font-face {font-family: Delicious; src: url('/static/fonts/Delicious-opentype/Delicious-Roman.otf');}

//
//  MAIN STYLES
//


html > body {
    font-family: Delicious;
    margin: 0;
    font-size: (@font-size)/16*1em;
    line-height: (@line-height)/16*1em;
    background-color: darken(white, 1%);
}

header {
    position: absolute;
    width: 128px;
    top: 0;
    bottom: 0;

    .logo img {
        width: 92px;
        height: 92px;
        opacity: 0.5;
        margin-bottom: 3.75em;
    }

    h1 {
        color: lighten(black, 20%);
        font-size: @line-height*1.5/@em;
        line-height: @line-height/@em;
        font-weight: bold;
        margin: .7em 5px 0;
    }

    h2 {
        color: lighten(black, 70%);
        font-size: @font-size /@em;
        line-height: @line-height * (4/5)/@em;
        font-weight: normal;
        margin: 0 5px;
    }

    ul {
        list-style: none;
        padding: 0;
        line-height: @line-height * (4/5)/@em;
        margin-bottom: .5em;

        .active a { color: white; }

        li p { margin: 0 5px; }

        a:hover li { background-color: darken(white, 1%); }
    }

    .caption {
        color: darken(white, 1%);
        transition: 1s;
    }

    :hover .caption {
        color: lighten(black, 40%)
    }

    a {
        color: lighten(black, 40%);
        text-decoration: none;
    }
    a:hover {
        color: black;
        text-decoration: none;
    }
}

article {
    position: absolute;
    top: 0;
    left: 128px;
    right: 0;
    bottom: 0;

    p { margin: 0; }

    .flash {
        width: 100%;
        background-color: rgba(161, 221, 255, 0.36);
        border-bottom: 1px solid rgba(86, 120, 139, 0.28);

        span { margin: 5px 10px; }
    }

    .hidden {
        display: none;
    }

    #container {margin: 1em .5em;}

    section {
        position: absolute;
        margin-bottom: 1em;
        // overflow: hidden;

        &.card {
            border-radius: 3px;
            box-shadow: 0 0 3px 2px darken(white, 3%);
            border: 1px solid darken(white, 10%);
            padding: 2px;
            margin: -2px;
            background-color: white;
        }

        a {
            color: black;
            text-decoration: none;
        }

        &.w1, &.w2 {
            .content {
                font-size: (@font-size - 1)/16*1em;
                line-height: ((@font-size - 1) * 1.5)/16*1em;
            }

            .content img {display: none;}
        }

        &.w5, &.w6, &.w7, &.w8 {
            .content {
                font-size: (@font-size * 2.5)/16*1em;
                line-height: 1em;
            }
        }

        &.framed {
            border: 1px solid darken(white, 20%);
        }

        .content {
            display: block;
        }

        .meta {
            height: 1em;
            font-size: (@font-size - 4)/@em;
            line-height: (@line-height - 6)/@em;

            span { margin-right: 3px; }

            a {
                color: lighten(black, 40%);
                text-decoration: none;
            }

            a:hover { text-decoration: underline; }

            form {
                display: inline;
            }

            .btn {
                line-height: 16px;
            }
        }

        .fullsize-input > textarea, .fullsize-input > input {
            width: (22.8em);
            height: 3em;
            border: none;
            resize: none;
            box-shadow: none;
            font-size: 1em;
        }

        .card-handle {
            float: left;
            margin-left: -1.5em;
            color: lighten(black, 60%);
        }

        .sidenav {
            position: relative;
            float: right;
            width: 8em;
            margin-right: -9em;
            // border: 1px solid #eee;
            // box-shadow: 2px 2px 2px #eee;
            padding: 2px;
        }

        .fileupload {

            .thumbnail {
                width: 160px;
                height: 120px;
                border: none;
                box-shadow: none;
            }

        }
    }
}

.w3, .w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11, .w12, .w13, .w14, .w15, .w16 {
&.image-overlay {
    background-color: none);
    color: white;
    transition: 1s;

    &:hover {
        background-color: rgba(0,0,0,0.15);

        .meta a {
            color: white;
        }
    }

    .meta a {
        display: inline;
        color: #333;
    }

    // i + span:after { content:"\A"; white-space:pre; }

    .attribute {
        display: block;
        // font-size: 200%;
        margin: 0 0 0 6px;
    }

    .content {
        padding: 6px 6px 0;
    }
    .meta {
        padding: 0 6px;
    }

    .inline-semantic {
        display: none;
    }
}
}

.imagewrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;

    img {
        position: absolute;
    }
}

.link {
    margin-top: 3em;
}
