/*
Solid Grid v1.0.4
Copyright 2013, Patrick Robin
www.solidgrid.co.uk
Free to use under the MIT license.
http://www.opensource.org/licenses/mit-license.php
01/10/2013
*/

@import "base.mixins.less";
@import "media.mixins.less";


// reset

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, .table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


// typography

html {
}

body {
    background: @bodyBackground;
    color: @bodyColour;
    font: @fontSize/@lineHeight @bodyFont;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: @lineHeight;
    font-family: @headerFont;
    font-weight: @headerWeight;
    color: @headerColour;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
    text-decoration: none;
    color: @headerLinkColour;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus {
    text-decoration: none;
    color: @headerLinkActiveColour;
}

h1 {
    font-size: @fontSize * 2.25;
    line-height: @lineHeight * 2;
}

h2 {
    font-size: @fontSize * 2;
    line-height: @lineHeight * 2;
}

h3 {
    font-size: @fontSize * 1.75;
    line-height: @lineHeight * 2;
}

h4 {
    font-size: @fontSize * 1.5;
    line-height: @lineHeight;
}

h5 {
    font-size: @fontSize * 1.25;
    line-height: @lineHeight;
}

h6 {
    font-size: @fontSize;
    line-height: @lineHeight;
}

p {
    margin-bottom: @lineHeight;
}

p.introduction {
    padding: (@lineHeight / 2) 0;
    margin-bottom: @lineHeight;
    font-size: (@fontSize * 1.5);
    line-height: @lineHeight * 1.5;
}

em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

a {
    color: @linkColour;
    text-decoration: underline;
}

a:hover, a:focus {
    color: @linkActiveColour;
    text-decoration: none;
}

blockquote {
    border-left: 3px solid @quoteColour;
    margin: @lineHeight 0 @lineHeight @lineHeight;
    padding: 0 0 0 @lineHeight;
}

blockquote, cite {
    font-style: italic;
}

blockquote cite:before {
    content: "\2014 \0020";
}

address {
    display: block;
    margin-bottom: @lineHeight;
}

code, pre {
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
}

code {
    color: @codeColour;
    white-space: nowrap;
    background: @codeBackground;
    vertical-align: top;
    padding: 2px;
    -moz-border-radius: @codeRadius;
    -webkit-border-radius: @codeRadius;
    border-radius: @codeRadius;
}

pre {
    display: block;
    padding: ((@lineHeight / 2) - 1px);
    color: @preColour;
    -ms-word-break: break-all;
    word-break: break-all;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    background: @preBackground;
    -moz-border-radius: @preRadius;
    -webkit-border-radius: @preRadius;
    border-radius: @preRadius;
    margin-bottom: @lineHeight;
    border: 1px solid @preBorder;
    overflow: auto;
}

pre code {
    padding: 0;
    color: inherit;
    white-space: pre-wrap;
    background: transparent;
    border: 0;
}

img {
    margin-bottom: @lineHeight;
}

img.scale {
    max-width: 100%;
    height: auto;
}

img.bordered {
    border: @imageBorderSize solid @imageBorderColour;
    -moz-box-shadow: @imageBorderShadow;
    -webkit-box-shadow: @imageBorderShadow;
    box-shadow: @imageBorderShadow;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

img.rounded {
    -moz-border-radius: @imageRadius;
    -webkit-border-radius: @imageRadius;
    border-radius: @imageRadius;
}

img.circular {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

hr {
    background: @hrColour;
    height: 1px;
    width: 90%;
    border: none;
    margin: @lineHeight auto;
    margin-bottom: (@lineHeight - 1px);
    clear: both;
}

span.quiet {
    color: @quietColour;
}

span.loud {
    color: @loudColour;
}

span.highlight {
    background: @highlightBackground;
    color: @highlightColour;
    padding: 0 (@lineHeight / 4);
}

span.removed {
    text-decoration: line-through;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}


// lists

ul, ol {
    margin: @lineHeight 0 @lineHeight @lineHeight;
}

ul {
    list-style: circle outside;
}

ol {
    list-style: decimal;
    margin-left: @lineHeight;
}

ul ul, ul ol, ol ol, ol ul {
    margin: @lineHeight 0 @lineHeight @lineHeight;
}

li {
    margin: 0;
    line-height: @lineHeight;
}

dl {
    margin: @lineHeight 0 @lineHeight @lineHeight;
}

dt {
    font-weight: bold;
}

dd {
    margin-left: @lineHeight;
}


/* tables */

.table {
    margin-bottom: @lineHeight;
    width: 100%;
    line-height: @lineHeight;
}

.table caption {
    background: @tableCaptionBackground;
    padding: 0 (@lineHeight / 2);
    line-height: @lineHeight * 2;
    font-size: @fontSize * 1.5;
    color: @tableCaptionColour;
    border-bottom: 1px solid #e4e4e4;
}

.table th, .table td {
    padding: 0 (@lineHeight / 2);
}

.table th {
    background: @tableHeaderBackground;
    line-height: @lineHeight * 1.25;
    font-size: @fontSize * 1.25;
    font-weight: bold;
    color: @tableHeaderColour;
}

.table td {
    padding: 0 (@lineHeight / 2);
    line-height: @lineHeight;
    vertical-align: top;
    background: @tableCellBackground;
    color: @tableCellColour;
    border-top: 1px solid #e4e4e4;
}

.table.zebra tr:nth-child(2n+1) td {
    background: @tableCellAlternateBackground;
    color: @tableCellAlternateColour;
}


// froms

form {
    margin-bottom: @lineHeight;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;

    legend {
        display: none;
    }

    > ol {
        list-style-type: none;
        margin: 0;
        padding: 0;

        > li {
            margin: 0;
            padding: 0;
            vertical-align: top;
            line-height: @lineHeight * 1.5;
        }
    }

    > ul {
        list-style-type: none;
        margin: 0;
        padding: 0;

        > li {
            margin: 0;
            padding: 0;
            vertical-align: top;
            line-height: @lineHeight * 1.5;
        }
    }
}

label, input, textarea, select, button, a.button, .button {
    display: inline-block;
    margin: 0;
    margin-bottom: @lineHeight / 2;
    font-family: inherit;
    font-size: inherit;
    vertical-align: top;
}

label {
    font-weight: bold;
    margin-right: @lineHeight / 2;

    span {
        display: block;
        font-weight: normal;
    }

    .error {
        color: @labelErrorColour;
    }
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="file"], textarea, select {
    height: @lineHeight * 1.5;
    line-height: @lineHeight * 1.5;
    padding: 0 (@lineHeight / 4);
    border: 1px solid @inputBorder;
    outline: none;
    -moz-border-radius: @buttonRadius;
    -webkit-border-radius: @buttonRadius;
    border-radius: @buttonRadius;
    color: @inputColour;
    width: 100%;
    background: @inputBackground;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="file"]:focus, textarea:focus, select:focus {
    background: @inputActiveBackground;
    border: 1px solid @inputActiveBorder;
    color: @inputActiveColour;
    -moz-box-shadow: @inputShadow;
    -webkit-box-shadow: @inputShadow;
    box-shadow: @inputShadow;
}

input[type="file"], input[type="file"]:focus {
    border: 0;
    padding: 0;
}

input[disabled], textarea[disabled], select[disabled], button[disabled], .button[disabled] {
    pointer-events: none;
    cursor: default;
    opacity: 0.65;
}

select {
}

textarea {
    line-height: @lineHeight;
    height: auto;
    margin: 0 0 (@lineHeight / 2) 0;
    min-height: @lineHeight * 3;
    overflow: auto;
}

input[type="checkbox"], input[type="radio"] {
    vertical-align: top;
    height: @lineHeight * 1.5;
    line-height: @lineHeight * 1.5;
    margin: 0 (@lineHeight / 2) 0 (@lineHeight / 2);
}

input.error, select.error, textarea.error, .input-validation-error {
    border: 1px solid @inputErrorBorder;
    background: @inputErrorBackground;
    color: @inputErrorColour;
    -moz-box-shadow: @inputErrorShadow;
    -webkit-box-shadow: @inputErrorShadow;
    box-shadow: @inputErrorShadow;
}

button, input[type="submit"], input[type="reset"], input[type="button"], a.button, .button {
    height: @lineHeight * 1.5;
    line-height: @lineHeight * 1.5;
    margin-right: (@lineHeight / 2);
    background: @buttonBackground;
    text-align: center;
    text-decoration: none;
    color: @buttonColour;
    cursor: pointer;
    border: none;
    outline: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-border-radius: @buttonRadius;
    -webkit-border-radius: @buttonRadius;
    border-radius: @buttonRadius;
}

.text-center input[type="submit"], .text-center input[type="reset"], .text-center input[type="button"], .text-center button, .text-center a.button, .text-center .button {
    margin-left: (@lineHeight / 4);
    margin-right: (@lineHeight / 4);
}

.text-right input[type="submit"], .text-right input[type="reset"], .text-right input[type="button"], .text-right button, .text-right a.button, .text-right .button {
    margin-left: (@lineHeight / 2);
    margin-right: 0;
}

a.button, .button {
    height: @lineHeight * 1.5;
    line-height: @lineHeight * 1.5;
    padding: 0 (@lineHeight / 2);
}

button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus, a.button:focus, .button:focus {
    background: @buttonFocus;
}

button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, a.button:hover, .button:hover {
    background: @buttonHover;
}

button.primary, input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary, a.button.primary, .button.primary {
    background: @buttonPrimary;
}

button.primary:focus, input[type="submit"].primary:focus, input[type="reset"].primary:focus, input[type="button"].primary:focus, a.button.primary:focus, .button.primary:focus {
    background: @buttonPrimaryFocus;
}

button.primary:hover, input[type="submit"].primary:hover, input[type="reset"].primary:hover, input[type="button"].primary:hover, a.button.primary:hover, .button.primary:hover {
    background: @buttonPrimaryHover;
}

button:active, button.primary:active, input[type="submit"]:active, input[type="submit"].primary:active, input[type="reset"]:active, input[type="reset"].primary:active, input[type="button"]:active, input[type="button"].primary:active, a.button:active, a.button.primary:active, .button:active, .button.primary:active {
    background: @buttonActive;
}


// utilities

.full-width {
    width: 100%;
    box-sizing: border-box;
}

.pull-left {
    float: left;
    margin: 0 (@lineHeight / 2) (@lineHeight / 2) 0;
}

.pull-right {
    float: right;
    margin: 0 0 (@lineHeight / 2) (@lineHeight / 2);
}

@media @mediumScreen {

    //inline forms
    fieldset.inline li {
        display: inline-block;
        margin-right: @lineHeight / 2;

        label, input, textarea, select, button, a.button, .button {
            vertical-align: middle !important;
        }
    }
}

// screen only styles
@media only screen {

    // utilities
    .hide-on-screen {
        display: none;
    }
}


// print only styles
@media only print {

    // utilities
    .hide-on-paper {
        display: none;
    }
}