/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) stylesheet for screen layout
 * (de) Stylesheet für das Bildschirm-Layout
 *
 * @file          basemod-2spaltig-navigation.css
 * @-yaml-minver  4.0
 */

@media screen, projection {
    /**
     * (en) Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera
     * (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera
     *
     * @workaround
     * @affected IE8, FF, Webkit, Opera
     * @css-for all
     * @valid CSS3
     */
    body {
        overflow-y: scroll;
    }

    /*-------------------------------------------------------------------------*/
    /* (en) Marginal areas & page background */
    /* (de) Randbereiche & Seitenhintergrund */
    body {
        background: #f3f3f3 none;
        padding: 0 0 10px 0;
    }

    /* Layout Alignment | Layout-Ausrichtung */
    .ym-wrapper {
        margin: 0 auto;
    }

    /* Layout Properties | Layout-Eigenschaften */
    .ym-wrapper {
        width: 960px;
        background-color: #fff;
    }

    .ym-wbox {
        padding: 0 5px 10px 0;
    }

    #header {
        position: relative;
        padding: 20px 0 0 0;
        color: #000;
        background-color: #fff;
    }

    #topnav {
        position: absolute;
        top: 0;
        right: -30px;
        text-align: right;
        color: #aaa;
        background: transparent;
        z-index: 9999;
    }

    #teaser {
        clear: both;
        padding: 0 10px;
        margin: 10px 0;
    }

    #nav {
        overflow: visible;
        background-color: #709708;
        min-height: 2.3em;
        border-bottom: 1px solid #f3f3f3;
        z-index: 999;

    }

    #main {
        margin: 10px 0;
        background: #fff;
        z-index: 99;
    }

    #footer {
        padding: 10px 0;
        color: #666;
        background: #f9f9f9;
        border-top: 5px #efefef solid;
    }

    /* (en) navigation: horizontal adjustment | (de) horizontale Ausrichtung  */
    #nav ul {
        margin-left: 0;
    }

    /*-------------------------------------------------------------------------*/
    /**
     * (en) Formatting of columns
     * (de) Formatierung der Spalten
     *
     */
    .ym-column {
        display: block;
        overflow: hidden;
        padding-left: 250px; /* width of sidebar */
        width: auto;
    }

    .ym-col1 { /* content */
        position: relative;
        float: left;
        width: 100%;
    }

    .ym-col3 { /* sidebar */
        position: relative;
        float: left;
        width: 250px; /* width of sidebar */
        right: 250px; /* width of sidebar */
        _right: 0; /* fix for ie6 */
        margin: 0 0 0 -100%;
    }

    /*-------------------------------------------------------------------------*/
    /**
     * (en) Formatting of the page border shadow
     *
     */
    .ym-wrapper {
        border: 0 none;
        background-image: url(../../images/gfxborder/border_left.gif);
        background-repeat: repeat-y;
        background-position: left;
    }

    .ym-wbox {
        border: 0 none;
        margin: 0 0 0 5px;
        padding: 0 5px 10px 0;
        background-image: url(../../images/gfxborder/border_right.gif);
        background-repeat: repeat-y;
        background-position: right;
    }


    #border-top {
        overflow: hidden;
        width: auto;
        height: 20px;
        font-size: 0;
        margin-bottom: -15px;
        background-image: url(../../images/gfxborder/border_top.gif);
        background-repeat: repeat-x;
        background-position: top left;
    }

    #border-bottom {
        overflow: hidden;
        width: auto;
        height: 20px;
        margin-top: -15px;
        font-size: 0;
        background-image: url(../../images/gfxborder/border_bottom.gif);
        background-repeat: repeat-x;
        background-position: bottom left;
        background-color: #f9f9f9;
    }

    #edge-tl {
        float: left;
        width: 20px;
        height: 20px;
        font-size: 0;
        background-image: url(../../images/gfxborder/corner_tl.gif);
        background-position: top left;
    }

    #edge-tr {
        position: relative; /* IE Fix | z-index */
        float: right;
        width: 20px;
        height: 20px;
        font-size: 0;
        background-image: url(../../images/gfxborder/corner_tr.gif);
        background-position: top right;
    }

    #edge-bl {
        float: left;
        width: 20px;
        height: 20px;
        background-image: url(../../images/gfxborder/corner_bl.gif);
        background-position: bottom left;
    }

    #edge-br {
        position: relative; /* IE Fix | z-index */
        float: right;
        width: 20px;
        height: 20px;
        background-image: url(../../images/gfxborder/corner_br.gif);
        background-position: bottom right;
    }

}

/** 
 * Different viewports for responsive layout.
 */
@media screen and ( max-width: 590px ) {
    /* Hide left part of header */
    div#header div#ueberschrift .ym-col3 {
        display: none !important;
    }

    /* linearization for grid module */
    .linearize-level-1,
    .linearize-level-1 > [class*="ym-g"] {
        display: block;
        float: none;
        padding: 0;
        margin: 0;
        width: 100% !important;
    }

    /* reset defined gutter values */
    .linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"] {
        overflow: hidden; /* optional for containing floats */
        padding: 0;
        margin: 0;
    }

    /* linearization for column module */
    .linearize-level-1,
    .linearize-level-1 > [class*="ym-col"] {
        display: block;
        float: none;
        padding: 0;
        margin: 0;
        width: 100% !important;
    }

    /* reset defined gutter values */
    .linearize-level-1 > [class*="ym-col"] > [class*="ym-cbox"] {
        overflow: hidden; /* optional for containing floats */
        padding: 0;
        margin: 0;
    }
}

@media screen and ( max-width: 1020px ) {
    div.ym-wrapper {
        width: 90%;
    }

    /* linearization for grid module */
    .linearize-level-2,
    .linearize-level-2 > [class*="ym-g"] {
        display: block;
        float: none;
        padding: 0;
        margin: 0;
        width: 100% !important;
    }

    /* reset defined gutter values */
    .linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"] {
        overflow: hidden; /* optional for containing floats */
        padding: 0;
        margin: 0;
    }

    /* linearization for column module */
    .linearize-level-2,
    .linearize-level-2 > [class*="ym-col"] {
        display: block;
        float: none;
        padding: 0;
        margin: 0;
        width: 100% !important;
    }

    /* reset defined gutter values */
    .linearize-level-2 > [class*="ym-col"] > [class*="ym-cbox"] {
        overflow: hidden; /* optional for containing floats */
        padding: 0;
        margin: 0;
    }
}