@bl-unit: 30px;
@indent-unit: 48px;
@background: #fffce3;
@silkygray: rgba(0, 0, 0, 0.1);

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

.inconsolata {
    font-family: 'Inconsolata', monospace;
}

.crimsontext {
    font-family: 'Crimson Text', arial, serif;
}

section > header {
    .imfell;
    font-size: 26px;
    padding: (@bl-unit / 2) @bl-unit;
    padding-bottom: (@bl-unit / 3);
    text-align: center;
}

section.docs {
    .crimsontext;
    font-size: 24px;
    
    /**
     * Establish a grid for all block elements
     */
    div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
    blockquote, pre, address, img, dl, dt, dd, ol, ul, li, fieldset, form,
    label, legend, table {
        margin-bottom: @bl-unit;
    }
}

.folder {
    dd {
        section.doc {
            .crimsontext;
            font-size: 24px;
            color: #797979;
            
            a {
                color: black;
                
                tt.literal {
                    text-decoration: underline;
                    padding: 0;
                }
            }
            
            /**
             * Establish a grid for all block elements
             */
            div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
            blockquote, pre, address, img, dl, dt, dd, ol, ul, li, fieldset, form,
            label, legend, table, hr {
                margin-bottom: @bl-unit;

                &:last-child {
                    margin-bottom: 0;
                }
            }

            h1, h2, h3, h4, h5, h6 {
                .imfell;                
                color: black;
                &:first-child {
                    margin-top: 0;
                }

                a, a tt.literal {
                    text-decoration: none;
                    padding: 0;
                }
            }

            h1 { font-size: 74px; margin-top: 46px; }
            h2 { font-size: 60px; }
            h3 { font-size: 48px; }
            h4 { font-size: 38px; }
            h5 { font-size: 30px; }
            h6 { font-size: 24px; }

            em {
                font-style: italic;
            }

            strong {
                font-weight: bold;
            }

            cite {
                font-variant: small-caps;
            }

            tt {
                font-size: 90%;
                background-color: @background;
                padding: 0 4px;
            }

            ul, dl, ol {
                padding-left: @indent-unit;

                li, dd {
                    margin-bottom: @bl-unit / 2;
                }

                dt {
                    font-weight: bold;
                    margin-bottom: 0;
                }

                dd {
                    padding-left: @indent-unit;
                }
            }

            ul {
                li {
                    list-style: square outside;
                }
            }

            ol {
                li {
                    list-style: decimal outside;
                }
            }

            table {
                width: 100%;
                border-collapse: separate;
                th, td {
                    border: none;
                    border-bottom: 1px solid @silkygray;
                    padding-bottom: 2px;
                    margin-bottom: 2px;
                }
            }

            table.footnote, table.citation {
                td {
                    border: none;
                }

                td:first-child {
                    width: 5%;
                }
                td:nth-child(2) {
                    width: 95%;
                }
            }

            pre.literal-block, div.line-block, div.highlight {
                margin-left: @indent-unit;
                margin-right: @indent-unit;
                border: 1px solid @silkygray;
                padding: (@bl-unit * 0.6) @bl-unit;
                line-height: 150%;
                font-size: 70%;
                color: black;
                overflow: auto;

                div.line-block {
                    border: none;
                    padding: 0;
                    font-size: 100%;
                }

                div.line, div.line-block {
                    margin-bottom: 0;
                }
            }

            div.highlight span{
                line-height: 150%;
            }

            blockquote {
                padding-left: @indent-unit;
            }
        }
    }
}

@media screen and (max-width: 900px) {
    section.docs {
        font-size: 18px;
    }

    .folder {
        dd {
            section.doc {
                font-size: 18px;

                h1 { font-size: 36px; margin-top: 30px; }
                h2 { font-size: 32px; }
                h3 { font-size: 28px; }
                h4 { font-size: 24px; }
                h5 { font-size: 20px; }
                h6 { font-size: 20px; }

                ul, dl, ol {
                    padding-left: @indent-unit / 2;
                    dd {
                        padding-left: @indent-unit / 2;
                    }
                }

                pre.literal-block, div.line-block, div.highlight {
                    margin-left: @indent-unit / 2;
                    margin-right: @indent-unit / 2;
                    padding: (@bl-unit * 0.3) (@bl-unit * 0.6);
                }

                blockquote {
                    padding-left: @indent-unit / 2;
                }
            }
        }
    }
}
