/**
 * This file provides the basic vars and reset styles.
 *
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */


/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* converted vars */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

@background_page-header: __background_page-header__;

@border-radius:          __default_border_radius__;
@fix_border-radius:      2px;

@font_family_screen:     __font_family_screen__;

@color-text:             __text__;
@color-border:           __border__;
@color-nav:              __nav_menu_color__;
@color-nav-hover:        __nav_menu_hover_color__;
@color-nav-hover-bg:     __nav_menu_hover_bg__;

@color-content-bg:       __background_content__;
@color-site-bg:          __background_site__;

@color-link:             __existing__;
@color-link-hover:       @color-nav;

@button_color:           __button_color__;
@button_background:      __button_background__;

@box-shadow-offset:      __box_shadow_offset__;
@box-shadow:             __box_shadow__;
@box-shadow-colored:     __box_shadow_colored__;


/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* global vars */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

@height-context-bar: 50px;

@margin-small:       1rem;
@margin-default:     2rem;
@margin-big:         3.07rem;

@small-spacing:      .3rem;
@very-small-spacing: .2rem;

@grid:               @margin-small;

@transition: ease-out .30s;


/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* fonts */

@font-size-very-small: .73rem;
@font-size-small: .88rem;
@font-size-default: 1rem;
@font-size-big: 1.5rem;
@font-size-bigger: 1.75rem;

@line-height-default: 125%;
@line-height-big: 135%;
@line-height-bigger: 140%;

@font-weight-bold: 800;
@font-weight-normal: 400;

@font-scale-factor: .0769;

@font-size-head6: @font-size-default;
@font-size-head5: @font-size-default + @font-scale-factor;
@font-size-head4: @font-size-default + (@font-scale-factor * 2);
@font-size-head3: @font-size-default + (@font-scale-factor * 3);
@font-size-head2: @font-size-default + (@font-scale-factor * 4);
@font-size-head1: @font-size-default + (@font-scale-factor * 5);

/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* breakpoints */

@break-min-xxs: 480;
@break-max-xxs: (@break-min-xxs - 1);

@break-min-xs: 768;
@break-max-xs: (@break-min-xs - 1);

@break-min-sm: 992;
@break-max-sm: (@break-min-xs - 1);

@break-min-md: 1024;
@break-max-md: (@break-min-md - 1);

@break-min-lg: 1200;
@break-max-lg: (@break-min-lg - 1);

@break-min-xlg: 1440;
@break-max-xlg: (@break-min-xlg - 1);

@break-min-xxlg: 1600;
@break-max-xxlg: (@break-min-xlg - 1);


/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* media queries for breakpoints */

@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";

@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)";
@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)";

@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)";
@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)";

@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";

@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";

@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";

@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";


/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* col width */

@c12:               100%;
@c11:               91.66666667%;
@c10:               83.33333333%;
@c9:                75%;
@c8:                66.66666667%;
@c7:                58.33333333%;
@c6:                50%;
@c5:                41.66666667%;
@c4:                33.33333333%;
@c3:                25%;
@c2:                16.66666667%;
@c1:                8.33333333%;

@grid-columns:      12;


/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* all media */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

html,
body {
    .reset();
    font-size: 100.1%;
}

header,
.nav-direct{
    .elementsReset();
}

div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, em,acronym, img, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
input, select, option, textarea, button {
    font-size: 1rem;
    line-height: 100%;
}


ol,
ul {
    list-style: none outside none;
}

blockquote,
q {
    quotes: none;
}

acronym {
    cursor: help;
    border-bottom: dotted 1px #333;
}

*:focus {
    outline: 0;
}

table{
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    caption-side: top;
}

caption,
th,
td {
    text-align: left;
    vertical-align: top;
}

img {
    display: block;
    float: none;
    border: none 0;
    line-height: @line-height-default;
}

*,
div,
nav,
header {
    box-sizing: border-box;
}

header,
footer,
.container,
.row, nav,
nav > ul {
    &::before,
    &::after {
        display: table;
        content: "  ";
        clear: both;
    }
}


/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* css behaviour */

.sr-out {
    .sr-out();
}

.sr-only {
    .sr-only();
}

.clearer{
    clear: both;
}

.structure,
.none,
.mobile-only {
    display: none;
}

.mobile-only {
    display: none;
    @media @screen_max-md {
        display: inline-block;
    }
}

.mobile-hide {
    display: inline-block;

    @media @screen_max-md {
        display: none;
    }
}


/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* screen only */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

@media screen {
    html {
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

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

    audio,
    canvas,
    progress,
    video {
        display: inline-block;
        vertical-align: baseline;
    }

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

    [hidden],
    template {
        display: none;
    }

    a:active,
    a:hover {
        outline: 0;
    }

    abbr[title] {
        border-bottom: 1px dotted;
    }

    small {
        font-size: 80%;
    }

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sup {
        top: -0.5em;
    }

    sub {
        bottom: -0.25em;
    }

    svg:not(:root) {
        overflow: hidden;
    }

    hr {
        box-sizing: content-box;
        height: 0;
    }

    pre {
        overflow: auto;
    }

    code,
    kbd,
    pre,
    samp {
        font-family: monospace, monospace;
        font-size: 1em;
    }

    button,
    input,
    optgroup,
    select,
    textarea {
        color: inherit;
        font: inherit;
        margin: 0;
    }

    button,
    select {
        text-transform: none;
    }

    button {
        overflow: visible;
    }

    input {
        &[type="checkbox"],
        &[type="radio"] {
            box-sizing: border-box;
            padding: 0;
        }

        &[type="number"] {
            &::-webkit-inner-spin-button,
            &::-webkit-outer-spin-button {
                height: auto;
            }
        }

        &[type="search"] {
            -webkit-appearance: textfield;
            box-sizing: content-box;

            &::-webkit-search-cancel-button,
            &::-webkit-search-decoration {
                -webkit-appearance: none;
            }
        }
    }

    legend {
        border: 0;
        padding: 0;
    }

    textarea {
        overflow: auto;
    }

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

    td,
    th {
        padding: 0;
    }

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote,
    a, abbr, acronym, address, big, cite, 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,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        font-family: @font_family_screen;
        color: @ini_text;
    }
}


/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* print only */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

@media print {
    body {
        font-size: 12pt;
    }
}