/*  Stylesheets für Seite mit vertikaler
    und Horizontaler Navigationsleiste   */

BODY {
      BACKGROUND:     #F1E4C2;
      COLOR:          #B58000;
      DISPLAY:           FLEX;
      FLEX-FLOW:     ROW WRAP;
      FONT-FAMILY:  Helvetica, 
                      Verdana, 
                        Arial;
      MARGIN:               0;
      MAX-WIDTH:        840px;
     }

ARTICLE {
         COLOR:       #B58000;
         LINE-HEIGHT:   1.3em;
        }

SECTION {
         MARGIN-LEFT:    10px;
         MARGIN-TOP:     20px;
        }

FOOTER {
        BACKGROUND:   #EEEDE0;
        FONT-SIZE:       12px;
        MARGIN-TOP:     1.5em;
        TEXT-ALIGN:    CENTER;
       }

HEADER,
FOOTER   {FLEX: 1 1 100%}
SECTION  {FLEX: 1 1 0%}

/*   Elemente   */

BUTTON {
        BACKGROUND:    #EEDC82;
        BORDER:           NONE;
        COLOR:         #8B5742;
        FONT-SIZE:        16px;
        LINE-HEIGHT:      40px;
        MARGIN:           10px;
        TYPE:         "BUTTON";
       }

BUTTON.Active {
               BACKGROUND:       #CDC673;
               COLOR:            #8B5742;
               FONT-WEIGHT:       BOLDER;
             }

BUTTON:HOVER {
              BACKGROUND:       #CDAD00;
              COLOR:            #976B01;
              FONT-SIZE:         1.05em;
              FONT-WEIGHT:       BOLDER;
              FONT-STRETCH:    EXPANDED;
             }

BUTTON.Active:HOVER {
                     BACKGROUND:  #CDC673;
                     COLOR:       #8B5742;
                     FONT-SIZE:    1.0em;
                    }

.BUTTON_h,
.BUTTON_h_O {
             MARGIN:           0px;
             TEXT-ALIGN:    CENTER;
            }
.BUTTON_h   {
             WIDTH:          120px;
            }

.BUTTON_h_O {
            WIDTH:          200px;
            }

.BUTTON_v {
           TEXT-ALIGN:      LEFT;
           WIDTH:          150px;
          }

.BUTTON_ve {
           MARGIN:           5px;
           MARGIN-LEFT:     50px;
           TEXT-ALIGN:     RIGHT;
           WIDTH:          110px;
         }

H1       {
          FONT-SIZE:        20px;
          }

H2       {
          FONT-SIZE:        16px;
          }

H3       {
          FONT-SIZE:        14px;
          }

/*   Navigationsbereiche   */

Nav {
     DISPLAY:              FLEX;
    }

/*   Navigationsbereich horizontal   */

#Nav_h {
        DISPLAY:                   FLEX;
        FLEX-DIRECTION:             ROW;
        FLEX-WRAP:                 WRAP;
        HEIGHT:                    60px;
        JUSTIFY-CONTENT:  SPACE-BETWEEN;
       }

/*   Navigationsbereich vertikal   */

#Nav_v,
#Nav_vs {
         FLEX-DIRECTION:         COLUMN;
         MARGIN-LEFT:              10px;
         WIDTH:                   170px;
        }

#Nav_v {
        MARGIN-TOP:                10px;
       }

#Nav_vs {
         MARGIN-TOP:               60px;
        }

/*
ARTICLE
         BACKGROUND:  #FFFFCC;
NAV
     BACKGROUND:        #FFA07A;
*/