/* Rechtsnavi */
section.sidebar {
    width: 210px;
    padding: 25px;
    padding-top: 35px;
    /*background-color: #dfeaf0*/ /* Die uebernimmt der Container*/
}

/* Navigationsleiste */
nav.side .guide-only {
    display: none;  /* Nur in nav.guide anzeigen */
}

nav.side > ul > li > a {  /*.u1 */
    /*font: 18px "Futura Std Book"*/
    font-size: 23px;
    /*text-transform: uppercase */
    /*color: #124b6b*/
    margin: 0 -25px;
    padding: 5px 25px;
}

/* 25.12.2013: Kapitel durch Linien abtrennen */
nav.side > ul > li > a {  /* .u1 */
    padding-top: 19px;
    border-top: 2px solid rgba(173, 148, 125, 0.8); /*#A07F60*/ 
}

nav.side > ul > li.first > a,
nav.side > ul > li:first-child > a { /* .u1 */
    border-top: none; /* Nicht ueber erstem Eintrag (Computer History) */ 
}

nav.side > ul > li > ul { /* .u2 */
    margin: 0 0 20px 0;
}

nav.side > ul > li > ul > li > a { /* .u2 */
    /*text-transform: uppercase */
    font-size: 17px;
    margin: 0 -25px;
    padding: 5px 25px;
}

nav.side > ul > li > ul > li.active > a {  /* .u2 */
    color: #E90015; /* hellblau:  #40a8e2 */
    /*font-weight: bold*/
}

nav.side > ul > li > ul > li > ul {  /* .u3 */
    margin-left: 12px;
    margin-bottom: 12px;
}

nav.side > ul > li > ul > li > ul { /* .u3 */
    display: none;
}

nav.side > ul > li > ul > li.active ul,    /* .u3 */
nav.side > ul > li > ul > li:focus-within > ul,
nav.side > ul > li > ul > li > a:focus + ul {
    display: block;
}

nav.side ul ul ul > li > a { /* .u3  */
    font-size: 14px;
    margin: 0 -25px 0 -40px;
    padding: 1px 25px 1px 40px;
    opacity: .9;
    /*text-transform: uppercase*/
}

nav.side ul ul ul > li.active > a, /* .u3 */
nav.side ul ul ul ul > li.active > a { /* .u4 */
    color: #e90015;
    /*font-weight: bold*/
}

/* 4. Ebene, wird derzeit nicht aktiv verwendet (nur fuer .u4.geraete) */
nav.side ul ul ul ul { /* .u4 */
    margin-left: 8px;
    margin-bottom: 8px;
}

nav.side ul ul ul ul  > li > a { /* .u4 */
    font-size: 12px;
    margin: 0 -32px 0 -48px;
    padding: 1px 32px 1px 48px;
}

/* nav.side .geraete-Listen */
nav.side .geraete a {
    text-transform: none !important;
    opacity: .5 !important;
}

nav a:hover, nav ul.rich-text li:hover a, nav a:focus, nav ul.rich-text li:focus a {
    color: #A12A40;
    background-color: white;
}


/* Nav-Hover-Transistions */
//nav a, nav a:link, nav a:visited, nav a:hover, nav a:focus 
	//-webkit-transition: color,background-color .05s cubic-bezier(0.420, 0.000, 0.580, 1.000)
	//-moz-transition: color,background-color .05s cubic-bezier(0.420, 0.000, 0.580, 1.000)
	//-ms-transition: color,background-color .05s cubic-bezier(0.420, 0.000, 0.580, 1.000)
	//-o-transition: color,background-color .05s cubic-bezier(0.420, 0.000, 0.580, 1.000)
	//transition: color .05s cubic-bezier(0.420, 0.000, 0.580, 1.000)



/* Nav-Hover-Transistions */
/* Scroll-Zustände der Navigationsleiste
 * Siehe Script, es gibt:
 *   html.no-js			 - Ausgangslage ohne Javascript
 *   html.mini-menu		 - Anzeige nur der aktiven Komponenten
 *   html.static-menu	   - Default mit Javascript
 *   html.fixed-menu		- Umgeschaltet auf fix
 *   html.stick-top-menu	- Zwischensituation wenn fix und ganz hochgescrollt (wie static-menu)
 *   html.stick-bottom-menu - Zwischensituation wenn fix und ganz runtergescrollt (absolut positioniert)
 */
html.static-menu nav.side, html.stick-top-menu nav.side {
    /* Ein/Ausblendeffekt fuer .get-menu-Button erzeugen  */
    /* http://www.colorzilla.com/gradient-editor */
    background: -moz-linear-gradient(top, #dfeaf0 0%, #dfeaf0 82%, rgba(223, 234, 240, 0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dfeaf0), color-stop(82%, #dfeaf0), color-stop(100%, rgba(223, 234, 240, 0)));
    background: -webkit-linear-gradient(top, #dfeaf0 0%, #dfeaf0 82%, rgba(223, 234, 240, 0) 100%);
    background: -o-linear-gradient(top, #dfeaf0 0%, #dfeaf0 82%, rgba(223, 234, 240, 0) 100%);
    background: -ms-linear-gradient(top, #dfeaf0 0%, #dfeaf0 82%, rgba(223, 234, 240, 0) 100%);
    background: linear-gradient(top, #dfeaf0 0%, #dfeaf0 82%, rgba(223, 234, 240, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfeaf0', endColorstr='#00dfeaf0',GradientType=0 );
    
    
    padding-bottom: 200%; /* sic! die 82% aus dem gradient muessen unterhalb der Navi anfangen*/
    position: relative;
    z-index: 10;
}

html.fixed-menu nav.side {
    position: fixed;
    width: 210px;
    top: 15px;
}

html.stick-bottom-menu nav.side {
    position: absolute;
    width: 210px;
    /* Top-Wert durch JS gesetzt. */
}

html.mini-menu nav.side li {
    display: none;
}

html.mini-menu nav.side li.active,
html.mini-menu nav.side li.active > ul.u3 > li,
html.mini-menu nav.side li.active > ul.u4 > li {
    display: inline;
}

/* Buttons in Navigationsleiste */
section.sidebar .button {
    display: block;
    cursor: pointer;
    
    /*font: 14px "Myriad Pro Light"*/
    font-size: 17px; /*  25.12.2013: .button.collapsed-menu in Navigation drinnnen */
    /*text-transform: uppercase */
    color: #a07f60;
    /*font-weight: bold*/
}

section.sidebar .button:hover {
    background-color: white;
}

section.sidebar .button.get-menu {
    /* Menü-runterhol-Button */
    position: fixed;
    z-index: 1;
    bottom: 0;
    margin: 0 -25px;
    padding: 15px 25px;
    text-align: center;
    width: 210px;
}

section.sidebar .button.collapse-menu {
    /* Ein/Ausklapp-Button */
	/* Seit 25.12.2013 direkt zwischen den Navigationselemten, jeweils nach li.collapsible-button-after. */
	//margin: 3em -25px 0 -25px
	//padding: 5px 25px
	padding: 5px 25px;
    margin: 0 -25px;
    margin-top: -10px;
    margin-bottom: 20px;
}

html.fixed-menu nav.side .button.collapse-menu,
html.stick-bottom-menu nav.side .button.collapse-menu {
    display: none;
}

section.sidebar .button.for-geraete {
    /* Geraete content collapse button */
    position: relative;
    top: -27px;
    right: -140px;
    width: 70px;
    margin-top: 0;
}

body.collapsed-menu-u3 section.sidebar .button.for-geraete {
    display: none;
}

/* Untere Sidebar */
section.sidebar.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
}

section.sidebar.bottom .button.get-menu {
    position: static;
    margin-bottom: -25px;
}

html.button-stick-bottom section.sidebar.top .button.get-menu {
    display: none;
}
