section, article, header, footer, nav, aside, hgroup {
    display: block;
}

@almostblack: #252525;
@nearwhite: #dfdfdf;
@folderbackground: #fff6a8;

/**
 * Font definitions
 */
.font-imfell {
    font-family: 'IM Fell DW Pica', arial, serif;
}

/**
 * Functions
 */
.1shadow {
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
    -o-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
}

.paper-shadow {
    @color: rgba(67, 63, 31, 0.7);
    @shadow: 0px 1px 10px;
    -webkit-box-shadow: @shadow @color;
    -moz-box-shadow: @shadow @color;
    -o-box-shadow: @shadow @color;
    box-shadow: @shadow @color;
}

.rotate(@value) {
    -webkit-transform: rotate(@value);
    -moz-transform: rotate(@value);
    -o-transform: rotate(@value);
    transform: rotate(@value);
}

.transition(@value) {
    -webkit-transition: @value;
    -o-transition: @value;
    -moz-transition: @value;
    transition: @value;
}

/**
 * Z-index layers
 */
.layer-middle {
    z-index: 1;
}

.layer-top {
    z-index: 2;
}

html {
    background: @folderbackground url(../img/very-top-background.png) scroll repeat-x;
}

body, a {
    color: @nearwhite;
    overflow-x: hidden;
}

.label {
    display: block;
    width: 250px;
    height: 123px;
    background-image: url(../img/clear-label.png);
}

@footerheight: 216px;

footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    color: @nearwhite;
    height: @footerheight;
    background-color: transparent;
    background-image: url(../img/drawer.png);
    background-repeat: repeat-x;
    .layer-top;

    .handle {
        @width: 415px;

        background: transparent url(../img/handle.png) scroll no-repeat 50% 100%;
        position: absolute;
        left: 50%;
        bottom: 0px;
        width: @width;
        margin-left: @width / -2;
        height: 115px;
    }

    .tab-hint {
        background-image: url(../img/pull-folder.png);
        position: absolute;
        display: block;
        height: 255px;
        width: 268px;
        right: 20px;
        bottom: -75px;
        text-indent: -9999px;
    }

    .label {
        .font-imfell;
        position: absolute;
        bottom: 15px;
        left: 20px;
        .rotate(-2deg);
    }   

    a {
        text-decoration: none;
    }

    img {
        position: absolute;
        top: 40px;
    }   

    span {
        position: absolute;
        bottom: 15px;
        left: 20px;
        font-size: 140%;
    }

    &.down {
        bottom: -150px;
    }
}

.folders {
    header {
        display: none;
    }

    &:after {
        content: '';
        display: block;
        height: @footerheight;
    }
}

@tab-height: 167px;

.cap {
    content: "";
    position: absolute;
    display: block;
    height: @tab-height;
    width: 37px;
    top: 0px;
}

.folder {
    width: 100%;

    h1 {
        font-family: 'Droid Sans', arial, serif;
        color: @almostblack;
        font-size: 120%;

        span {
            display: inline-block;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 4px;
            .1shadow;
        }
    }


    dl {
        height: 18px;

        &.expand {
            height: auto;

            dd {
                margin-bottom: -100px;
                section.doc {
                    display: block;
                }
            }
        }
    }

    &:nth-of-type(1) dl.expand {
        background-color: @almostblack;
    }

    dt {
        background: transparent url(../img/folders/closed/lower_middle.png) scroll repeat-x;

        &.open {
            background-image: url(../img/folders/open/lower_middle.png);
        }

        margin: 0 37px 0 37px;
        position: relative;
        height: @tab-height;

        a {
            position: relative;
            display: block;
            top: 15px;
            .layer-middle;
            .rotate(-1deg);
            overflow: visible;
        }

        &:before {
            .cap;
            left: -37px;
            background: transparent url(../img/folders/closed/lower_left.png) scroll no-repeat;
        }

        &.open:before {
            background-image: url(../img/folders/open/lower_left.png);
        }


        .tab {
            background: transparent url(../img/folders/closed/upper_middle.png) scroll repeat-x;
            width: 27%;
            left: 33%;
            height: @tab-height;
            margin: 0px 36.9px 0px 36.9px;
            position: relative;

            &:before {
                .cap;
                left: -37px;
                background: transparent url(../img/folders/closed/upper_left.png) scroll no-repeat;
            }
        }

        &.open {
            .tab {
                background-image: url(../img/folders/open/upper_middle.png);

                &:before {
                    background-image: url(../img/folders/open/upper_left.png);
                }
            }
        }
    }


    dd {
        background-color: @folderbackground;
        padding: 10px;

        section.doc {
            display: none;
            position: relative;
            top: -100px;
            .paper-shadow;
            padding: 55px 75px;
            background-color: white;
            margin: 10px;
            color: @almostblack;

            div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
            blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
            font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b,
            u, i, center, dl, dt, dt:after, dt:before, dd, ol, ul, li, fieldset, form,
            label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
                margin: 0;
                padding: 0;
                border: 0;
                height: auto;
                outline: 0;
                font-size: 100%;
                vertical-align: baseline;
                background: transparent;
            }

            img {
                max-width: 100%;
            }
        }
    }
}

/**
 * For desktop
 */
@media screen and (min-width: 900px) {
    .folder {
        .left {
            margin-left: 0;

            .tab {
                left: 0;

                &:before {
                    background: transparent url(../img/folders/closed/upper_left_cap.png) scroll no-repeat;
                }
            }

            &.open {
                .tab:before {
                    background-image: url(../img/folders/open/upper_left_cap.png);
                }
            }
        }

        .left, .middle {
            &:after {
                .cap;
                right: -37px;
                background: transparent url(../img/folders/closed/lower_right.png) scroll no-repeat;
            }

            &.open:after {
                .cap;
                right: -37px;
                background-image: url(../img/folders/open/lower_right.png);
            }

            .tab {
                &:after {
                    .cap;
                    right: -37px;
                    background: transparent url(../img/folders/closed/upper_right.png) scroll no-repeat;
                }
            }

            &.open {
                .tab:after {
                    background-image: url(../img/folders/open/upper_right.png);
                }
            }
        }

        .middle {
            .tab {
                left: 33.333%;
                width: 28%;
            }
        }

        .right {
            margin-right: 0;

            &:after {
                background: none;
                right: 0px;
            }

            .tab {
                position: absolute;
                top: 0px;
                right: 0px;
                left: auto;

                &:after {
                    .cap;
                    right: -37px;
                    display: block;
                    background: transparent url(../img/folders/closed/upper_right_cap.png) scroll no-repeat;
                }
            }

            &.open {
                .tab:after {
                    background-image: url(../img/folders/open/upper_right_cap.png);
                }
            }
        }
    }
}

.all-left-tabs {
    .folders {
        header {
            display: block;
        }
    }

    .folder {
        dl {
            height: 48px;
        }

        dd {
            section.doc {
                padding: 25px;
            }
        }

        .left, .middle, .right {
            margin-left: 0;
            margin-right: 0;

            .tab {
                width: 80%;
                left: 0;

                &:before {
                    background: transparent url(../img/folders/closed/upper_left_cap.png) scroll no-repeat;
                }

                &:after {
                    .cap;
                    right: -37px;
                    background: transparent url(../img/folders/closed/upper_right.png) scroll no-repeat;
                }
            }

            &.open {
                .tab:before {
                    background-image: url(../img/folders/open/upper_left_cap.png);
                }
                .tab:after {
                    background-image: url(../img/folders/open/upper_right.png);
                }
            }
        }
    }

    footer {
        .label, .tab-hint {
            opacity: 0;
            .transition(opacity .20s ease-in-out);
        }
    }
}

.mobile-display {
    .folders {
        header {
            display: block;
        }
    }

    footer {
        display: none;
    }
}

/**
 * For mobile and smaller screens
 */
@media screen and (max-width: 900px) {
    .all-left-tabs;
}

/**
 * This is set exactly to our viewport for mobile browsers, let's turn the footer off entirely
 */
@media only screen and (max-width: 768px) {
    .mobile-display;
}

/**
 * For the iPad and other tablets in landscape mode
 */
@media only screen and (orientation: landscape) and (min-device-width: 481px) and (max-device-width: 1024px) {
    .mobile-display;
}

/**
 * For iPad and others in portrait mode
 */
@media only screen and (orientation: portrait) and (min-device-width: 481px) and (max-device-width: 1024px) {
    .mobile-display;
}
