styles.less

@bg: #ffffff;
@linkBg: #EEEEF0;
@text: #222525;
@highlight1: #222222;
@highlight2: #06799F;
@border: #CCCCCC;
@codeBg: darken(@bg, 1%);


body {
    font-family: "Crimson Text", Georgia, serif;
    font-size: 110%;
    line-height: 1.25em;
    color: @text;
    background: @bg;
    width: 80%;
    max-width: 50em;
    margin: 0 auto;
}

a {
    &:link {
        color: @highlight1;
    }
    &:hover {
        color: lighten(@text, 15%);
    }
    &:visited {
        color: lighten(@text, 25%);
    }
}



div#scroller {
    position: fixed;
    top: 30%;
    right: 0.5em;
    max-width: 8%;
    font-size: 0.9em;
}

div#header {
    font-variant: small-caps;
    h1, h2 {
        text-align: center;
        letter-spacing: 0.1em;
        font-weight: normal;
        line-height: 1.25em;
        text-shadow: 1px 1px 1px darken(@bg, 30%);
    }
    h1 {
        font-size: 3em;
    }
    h2 {
        font-size: 2em;
    }
    margin-bottom: 2em;
}
div#credits {
    font-style: italic;
    color: lighten(@text, 15%);
}
div#info {
    margin-top: 1em;
    div.leftCol {
        float: left;
        padding-right: 3em;
        border-right: 1px dashed lighten(@text, 60%);
    }
    div.rightCol {
        float: left;
        padding-left: 3em;
    }
}
li.unnumbered {
    list-style-type: none;
    padding-top: 0.2em;
}
div#toc {
    font-size: 0.9em;
    ol {
        list-style-type: upper-roman;
        li {
            font-weight: bold;
        }
        ol {
            margin-top: -0.5em;
            list-style-type: decimal;
            li {
                font-weight: normal;
            }
            a:hover {
                background: lighten(@linkBg, 5%);
            }
        }
    }
}

.spacer {
    display: block;
    margin-bottom: 2em;
    clear: both;
}

h3 {
    padding: 0.5em 1em 0.2em 1em;
    font-size: 2em;
    border-bottom: 3px solid @text;
}
h4 {
    padding: 0.5em 1em 0.2em 1.3em;
    font-size: 1.5em;
    border-bottom: 1px dotted @text;
}

strong {
    color: @highlight2;
}

.shadow(@color, @distance: 5px) {
    -moz-box-shadow:    inset 0 0 @distance @color;
    -webkit-box-shadow: inset 0 0 @distance @color;
    box-shadow:         inset 0 0 @distance @color;
}


.qa-before(@letter) {
    content: @letter;
    font-style: normal;
    font-size: 1.5em;
    float: left;
    display: block;
    margin-right: 0.3em;
}

div.question {
    background: url("img/az_subtle.png") repeat;
    border-left: 2px solid darken(@bg, 10%);
    padding: 0.5em;
    font-style: italic;
    font-size: 1.5em;
    line-height: 1.8em;
    margin-bottom: 0;
    &:before {
        .qa-before("Q: ");
    }
}


div.answer {
    margin-top: 0;
    padding: 2em;
    clear: left;
    border-left: 2px solid darken(@bg, 10%);
    &:before {
        .qa-before("A: ");
        font-size: 2.25em;
        line-height: 1.6em;
    }
    div.question, div.answer {
        margin-left: 25px;
    }
    p {
        font-size: 1.1em;
        line-height: 1.3em;
    }
}



pre, code, div.editor, div.CodeMirror {
    font-family: "Inconsolata", Monaco, Consolas, monospace;
}
code {
    color: #003838;
    font-size: 0.7em;
    border: 1px solid @border;
    padding: 0.1em;
}
// Fallback for CodeMirror
pre {
    white-space: pre-wrap;
    font-size: 0.8em;
    border-left: 1em solid darken(@border, 10%);
    background: @codeBg;
    background: url("img/billie_holiday.png") repeat;
    margin: 2em;
    padding: 0.8em;
    &:hover {
        border-left: 1em solid @border;
    }
}
div.editor {
    ul.tabs {
        right: 0;
        float: right;
        list-style-type: none;
        text-align: center;
        margin-bottom: -1px;
        li {
            font-size: 0.8em;
            line-height: 1em;
            padding: 0.2em;
            margin-left: -1px;
            display: inline-block;
            border: 1px solid @border;
            &:first-child  {
                border-top-left-radius: 5px;
            }
            &:last-child {
                border-top-right-radius: 5px;
            }
            .gradient2(darken(@bg, 3%), darken(@bg, 9%));
            &:hover {
                .gradient2(darken(@bg, 1%), darken(@bg, 6%));
            }
            a {
                text-decoration: none;
            }
        }
    }
    div.CodeMirror {
        clear: right;
        border: 1px solid @border;
        font-size: 0.8em;
    }
}

div#bibliography {
    // http://www.library.cornell.edu/resrch/citmanage/apa
    font-size: 0.9em;
    ol {
        width: 90%;
        list-style-type: none;
        li {
            margin-bottom: 1em;
            .hanging-indent(2.5em);
            counter-increment: theIndex;
            &:before {
                content: "["counter(theIndex)"] ";
            }

        }
    }
    .book {
        .title {font-style: italic}
    }
    .encyc {
        .encyc {font-style: italic}
    }
    .website {
        .title {font-style: italic}
    }
}

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
.gradient(@from) {
    .gradient2(@from, darken(@from, 10%));
}
.gradient2(@from, @to) {
    background: @from;
    background: linear-gradient(@from, @to);
    background: -o-linear-gradient(@from, @to);
    background: -moz-linear-gradient( @from, @to);
    background: -webkit-linear-gradient( @from, @to);
    background: -ms-linear-gradient( @from, @to);
}
.hanging-indent(@indent) {
    padding-left: @indent;
    text-indent: -@indent;
}