vagrant/website/www/source/stylesheets/_base.less

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: @sans-serif-stack;
    font-size: @base-font-size;
    line-height: @base-line-height;
    color: @black;
    background-color: @white;
    letter-spacing: 2px;
    .museo-sans-regular;
}

.wrapper {
    margin-top: 80px;
}

.container {
    z-index: 999; //keep content on top
    position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    color: inherit;
    text-rendering: optimizelegibility;
    .museo-sans-bold;
}

h1 {
    @font-size: 70px;
    font-size: @font-size;
    line-height: 80px;
    letter-spacing: 3px;

    span {
        font-size: @headline-span-size;
        display: block;
    }

    &.all-caps {
        text-transform: uppercase;
        text-align: center;
        font-size: 40px;
    }
}

h2 {
    @font-size: 30px;
    font-size: @font-size;
    line-height: 35px;
}

h3 {
    @font-size: 30px;
    font-size: @font-size;
    line-height: @font-size;
}

h4 {
    @font-size: 24px;
    font-size: @font-size;
    line-height: @font-size;
}

h5 {
    @font-size: 20px;
    font-size: @font-size;
    line-height: @font-size;
}

h6 {
    @font-size: 12px;
    font-size: @font-size;
    line-height: @font-size;
}

p {
    letter-spacing: normal;
    line-height: 32px;

    a {
        color: @docs-blue;
        text-decoration: none;
        border-bottom: 1px solid @docs-blue;

        &:hover {
            text-decoration: none;
            color: darken(@blue, 10%);
            border-bottom: 1px solid darken(@blue, 10%);
        }
    }
}

a {
    color: inherit;
    text-decoration: none;


    &:hover {
        text-decoration: none;
        color: @purple;
        .animate-text-color;
    }

    &:active {
        color: @blue;
    }

    &:visited {

    }
}

ul {

}

li {
    line-height: @base-line-height;
}

blockquote {
    border: none;
    margin: 60px;

    p { // blockquote p
        font-size: @base-font-size * 2;
        line-height: @base-line-height * 2;
        font-style: italic;
    }
}

strong {
    .museo-sans-bold;
}

em {
    .museo-sans-regular-italic;
}

br {
    display:block;
    line-height: (@baseline * 2);
}

pre,
code {
    font-family: @mono-stack;
}

code {
    font-size: inherit;
}

pre {
    border: none;
    font-size: @code-font-size;
    background: @black;
    color: @light-gray-text;
    padding: 20px;
    line-height: @code-line-height;

    span {
        color: @code-highlight-text;
    }
}

hr {

}

.vr {
    width: 2px;
    height: 100%;
}

form {

}

input {
    letter-spacing: 3px;

    &:focus {
        outline: none;
    }
}

::-webkit-input-placeholder  {
    overflow: visible;
    padding-top: 3px;
    color: @light-gray-text;
}

input:-moz-placeholder {
    overflow: visible;
    padding-top: 3px;
    color: @light-gray-text;
}


/* type and styles */
.meta,
.legal,
.date {
    color: @medium-gray-text;
    line-height: @base-line-height;
    .museo-sans-regular;
}

.date {
    text-transform: uppercase;
}

.button {
    color: @white;
    text-align: center;
    background-color: @primary-button-color;
    display: block;
    padding: 15px 0;
    margin-top: 20px !important;
    text-transform: uppercase;
    font-size: 25px;
    letter-spacing: 5px;
    .museo-sans-light;
    .rounded;
    .hover;

    &.inline-button {
        background-color: @vagrant-blue;
        padding: 5px 20px;
        color: @white !important;
        font-size: 15px;
        letter-spacing: 1px;
        .rounded;

        a,
        a:hover {
            color: @white;
        }
    }

    &.white-button {
        background: fade(@white, 20%);

        &:hover {
            background: fade(@white, 30%);
        }
    }

    &.secondary-button {
        background: @light-gray;

        &:hover {
            background: @purple;
        }
    }

    &.with-carat span {
        margin-right: -10px; //recenter text if there's a carat after text

    }

    span {
        // button text styles can go here
    }

    &:hover {
        background-color: @purple;
        .animate-background-color;
    }

    &:active {

    }

    &.disabled {
        background-color: @light-gray-background;
    }

}

a.read-more {
    color: @blue;

    &:hover {
        color: darken(@blue, 10%);
    }
}

// misc. styles
.loading {
    text-align: center;
    font-size: @base-font-size;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: @medium-gray-text;
    padding: 30px 0 20px;
}

.pinned {
    position:fixed;
}

.footnote {
    font-size: 14px;
}

.anchor {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}

.center {
    text-align: center;
}