@charset "UTF-8";

/**
* @section browser reset
* @see     http://www.yaml.de/en/documentation/css-components/base-stylesheet.html
*/

/* Global reset of paddings and margins for all HTML elements */
* {
    margin: 0;
    padding: 0;
}

/**
* Global fix of the Italics bugs in IE 5.x and IE 6
*
* @bugfix
* @affected   IE 5.x/Win, IE6
* @css-for    IE 5.x/Win, IE6
* @valid      yes
*/
* html body * {
    overflow: visible;
}
* html iframe,
* html frame {
    overflow: auto;
}
* html frameset {
    overflow: hidden;
}

/* without this, html will be 100vw max */

html {
    min-width: $min-width;
}

body {
    /* Fix for rounding errors when scaling font sizes in older versions of Opera browser */
    font-size: 100.01%;

    /* Standard values for colors and text alignment */
    color: #000;
    text-align: left; /* LTR */
}

/* avoid visible outlines on DIV containers in Webkit browsers */
div {
    outline: 0 none;
}

/* Clear borders for <fieldset> and <img> elements */
fieldset, img {
    border: 0 solid;
}

/* new standard values for lists, blockquote and cite */
ul, ol, dl {
    margin: 0 0 1em 1em;  /* LTR */
}
li {
    line-height: 1.5;
    margin-left: 0.8em; /* LTR */
}

dt {
    font-weight: bold;
}
dd {
    margin: 0 0 1em 0.8em;  /* LTR */
}

blockquote {
    margin: 0 0 1em 0.8em;  /* LTR */
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}

/*------------------------------------------------------------------------------------------------------*/

/**
* @section clearing methods
* @see     http://yaml.de/en/documentation/basics/general.html
*/

/* alternative solution to contain floats */
.floatbox {
    overflow: hidden;
}

.page_wrapper {
    @include pie-clearfix();
}

/*------------------------------------------------------------------------------------------------------*/

/**
* @section hidden elements | Versteckte Elemente
* @see     http://www.yaml.de/en/documentation/basics/skip-links.html
*
* skip links and hidden content
*/

/* classes for invisible elements in the base layout */
.skip, .hideme, .print {
    position: absolute;
    top: -32768px;
    left: -32768px; /* LTR */
}

/* make skip links visible when using tab navigation */
.skip:focus, .skip:active {
    position: static;
    top: 0;
    left: 0;
}

/* skiplinks:technical setup */
#skiplinks {
    position: absolute;
    top: 0;
    left: -32768px;
    z-index: 1000;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#skiplinks a.skip:focus,
#skiplinks a.skip:active {
    left: 32768px;
    outline: 0 none;
    position: absolute;
    width: 100%;
}

@media screen, projection {
    #header {
        position: relative;
    }

    /* Text Alignment for #topnav content */
    #topnav {
        text-align: right;  /* LTR */
    }

    /* Absolute positioning only within #header */
    #header #topnav {
        position: absolute;
        top: 0.8em;
        right: 0.8em; /* LTR */
    }

    /* Backup for correct positioning */
    #header, #nav, #main, #footer, #subheader, #welcome-message {
        clear: both;
    }

    /* Preparation for absolute positioning within content columns */
    #sidebar {
        position: relative;
    }

    /*------------------------------------------------------------------------------------------------------*/

    /**
    * Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera
    *
    * @workaround
    * @affected IE8, FF, Webkit, Opera
    * @css-for all
    * @valid CSS3
    */

    body {
        overflow-y: scroll;
    }

    /*-------------------------------------------------------------------------*/

    /* Marginal areas */
    body {
        padding: 0;
        min-height: 100vh;
    }

    /* Layout Alignment | Layout-Ausrichtung */
    .page_wrapper {
        /* absolute positioning should be relative to this */
        position: relative;

        margin: 0 auto;
        max-width: $max-width;
        background: transparent;
        padding: 0 0.5em;
        @include box-sizing(border-box);
    }

    #header {
        position:relative;
        padding: 0;
        color: #000;
        background-color: $header-color;
        @include background-image(linear-gradient(to bottom, darken($header-color, 2%), lighten($header-color, 2%)));
    }
    #topnav { text-align: right; color: #fff; background: transparent; }
    #main { margin: 0.8em 0 2.5em; }
    #footer {
        padding: 0;
        background-color: $bg1;
        @include background-image(linear-gradient(top, $bg1, $bg2));
    }

    /*-------------------------------------------------------------------------*/

    #col1,
    #col3 {
        margin-bottom: 2em;
    }
}

@media print {
    /**
    * float clearing for .floatbox and subtemplates. Uses display:table to avoid bugs in FF & IE
    *
    * @bugfix
    * @since     3.0
    * @affected  FF2.0, FF3.0, IE7
    * @css-for   all browsers
    * @valid     yes
    */

    .subcolumns > div,
    .floatbox {
        overflow: visible;
        display: table;
    }

    /* make .print class visible */
    .print {
        position: static;
        left: 0;
    }

    /* generic class to hide elements for print */
    .noprint {
        display: none !important;
    }

    /**
     * @section basic layout preparation
     * @see     http://www.yaml.de/en/documentation/css-components/layout-for-print-media.html
     */

    /* change font size unit to [pt] - avoiding problems with [px] unit in Gecko based browsers  */
    body {
        font-size: 10pt;
    }

    /* Hide unneeded container of the screenlayout in print layout */
    #topnav, #nav, #searchbox, #feedback, #tutorial-banner {
        display: none;
    }

    /*------------------------------------------------------------------------------------------------------*/

    /* Avoid page breaks right after headings */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}


@include desktop {
    #col1 {
        float: left;
        width: 67%;
    }
    #col3 {
        width: 33%;
        margin: 0 0 0 67%;
    }
    #sidebar {
        margin: 0 0 0 5%;
    }
    #settings #col1 {
        float: right;
        // if this fails it falls back to the default 67%
        width: calc(100% - 13em);
    }
    #settings #col3 {
        width: 12em;
        margin-left: 0;
    }

    #settings #sidebar {
        margin: 0;
        .well {
            width: 12em;
        }
        .affix {
            top: 1.5em;
        }
    }

    /**
     * @section subtemplates
     * @see     http://www.yaml.de/en/documentation/practice/subtemplates.html
     */
    .subcolumns {
        width: 100%;
        overflow: hidden;
    }

    .c33l, .c60l { float: left; }
    .c33r, .c40r { float: right; margin-left: -5px; }

    .c40r { width: 40%; }
    .c60l { width: 60%; }
    .c33l, .c33r { width: 33.333%; }

    .subcl { padding: 0 1em 0 0; }
    .subcr { padding: 0 0 0 1em; }

    .subcl { padding: 0 1.5em 0 0; }
    .subc { padding: 0 0.8em; }
    .subcr { padding: 0 0 0 1.5em; }
}
