/* ---------------------------------------------------------------- */
/*        Projekt:  goemint.de                                      */
/*        File:     navigation.css                                  */
/*        Autor:    Stephan Buchholz                                */
/*        Datum:    23.06.2019                                      */
/* ---------------------------------------------------------------- */

/* ---------------------------------------------------------------- */
/* Normalisierung Navigation */

nav *,
nav ul,
nav li,
nav a,
nav label,
nav input
{
   margin: 0; 
   padding: 0;
   border: 0;
}

/* Normalisierung Listenelemente */
nav ul,
nav li
{
   list-style: none;
display: block;
/*display: block;*/
}
/* Normalisierung Ankerelemente */
nav a
{
   display: block; /* makes the whole link area clickable */
   text-decoration: none; 
}
/* Normalisierung Labelelemente */
nav label,
nav input
{
   display: block;
   cursor: pointer;
}

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

/* Position der Navigation */
/* Haupt-Navigation */
nav
{
   flex: 1 1 100%;
   order: 25;
/*   text-align: left;*/
   margin: 0.0em 0.5em 0.0em 0.5em;
   padding: 0.5em 0.5em 0.5em 0.5em;
   width: auto;
   height: auto;
   background: var(--nav_background_color);
background-image: linear-gradient(100deg, #CFCFCF 0%, #FFFFFF 10%, #FFFFFF 35%, #DFDFDF 50%, #FFFFFF 65%, #FFFFFF 90%, #CFCFCF 100%);
   /* sub-flex-container */
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: stretch;
   box-shadow: 0.1em 0.1em 0.3em white inset, 0.2em 0.2em 0.2em grey;
/*   border: 1px solid black;*/
}

/* primäre Listenköpfe */
nav > ul
{
/*   flex: 1 1 auto;*/
/*  height: 3.5em;*/
/*width: 10em;*/
   font-size: 1.0em;
   /* sub-flex-container */
   display: flex;
   flex-flow: row wrap;  
   align-items: space-between;
   justify-content: space-around;
/*   background: green;*/
}
/* spezielle Einstellungen primärer Listenkopf */
#nav-left
{
   flex: 1 1 9em;
   order: 10;
/*align-content: center;*/
justify-content: flex-start;
/*   justify-content: flex-start;*/
}
#nav-middle
{
   flex: 3 3 27em;
   order: 20;
/*   justify-content: space-around;*/
}
#nav-right
{
   flex: 1 1 9em;
   order: 15;
justify-content: flex-end;
/*   justify-content: flex-end;*/
}

/* primäre Listenelemente */
nav > ul > li
{
   flex: 0 0 9.0em;
   /* sub-flex-container */
   display: block;
   position: relative;
height: 2.5em;
width: 9.0em;   
background: blue;
/*   border: 1px solid black;*/
   margin: 0.5em 0.5em 0.5em 0.5em;
/*   border-radius: 0.3em;*/
/*   box-shadow: 0.3em 0.3em 0.5em white inset, 0.5em 0.5em 0.5em grey;*/
/*margin: auto;*/
}

/* Menuelement */
nav > ul > li > div 
{
 flex: 1 1 9.0em;
   height: 2.5em;
   width: 9em;
   display: block;
   position: relative;
background: yellow;
/*margin: auto;*/
}

/* Submenu */
/* Position sekundärer Listenkopf */
nav > ul > li > ul
{
   position: absolute;
   top: 2.5em;
   left: -1px; /*0.0em;*/
   background: #333333;
   color: red;
   width: 9em;
/*   border: 1px solid black;*/
}
/* sekundäre Listenelemente */
nav > ul > li > ul > li
{
/*   height: 2.5em;*/
/*text-align: right;*/
}


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

/* Aussehen der Standardelemente */

/* Gestalt Anker */
nav a
{
   color: var(--nav_a_text_color);
   background-color: var(--nav_a_background_color);
    line-height: 2.5em;
   height: 2.5em;
   width: 9.0em;
 /*  font: 1.5em  Arial, Helvetica, sans-serif;*/
   text-align: center;
vertical-align:middle;
}

/* Farbe Anker mit der Tabulatortaste gewählt oder mit Mauszeiger berührt */
nav a:focus,
nav a:hover
{
  color: var(--nav_a_hover_text_color);
}


nav a:focus,
nav a:hover,
nav a:active
{
    background-color: var(--nav_a_hover_background_color);
}
/* Position Anker-elemente */
nav > ul > li > a
{
   position: absolute;
   top: 0;
   left: 0.0em;
   width: 9.0em;
height: 2.5em;
   text-align: center;
vertical-align:middle;
 /*  box-shadow: 0 5px 10px white inset;*/
}

/* Farbe Anker besucht */
nav a:active
{
  color: green;
}
/* ---------------------------------------------------------------- */


/* ---------------------------------------------------------------- */
/* navigation - Funktionalität */
/* ---------------------------------------------------------------- */

/* default alle sub-Navigation aus */
nav > ul > li > ul
{
display: none;
}

/* ---------------------------------------------------------------- */
nav > ul > li:hover > ul
{
   display: block;
   z-index: 10;
background: red;
}

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