/* ======================================================================================================================
                         P Stephan - Standard drop down Menu I. in n Level - Stylesheet
                   ( Erklaerungen der CSS Eigenschaften aus: http://www.w3schools.com/sitemap.asp )
   ====================================================================================================================== */


/* ====================================================================================================================== */
/* Die folgenden preload Klassen finden sich direkt am Body Anfang als Klassen fuer ein SPAN. Da die SPAN's leer sind     */  
/* wird nichts angezeigt, aber die Bilder werden durch die Klasse im Span vorgeladen! (Cleverer Trick)                    */                                                            */
/* ====================================================================================================================== */
   .preload1 {background: url(../../images/menuitems/blank_over.gif);}
   .preload2 {background: url(../../images/menuitems/blank_overa.gif);}

/* ====================================================================================================================== */
/* Listen Definition <UL> Generell fuer alle Bereiche                                                                     */
/* ====================================================================================================================== */
   #nav 
      {
        position: relative; 
        height: 19;
        z-index: 500; 

        list-style: none; 
        padding: 0;                              /* Define the space between the element border and the element content.  */
        margin: 0;                                        /* The CSS margin properties define the space around elements.  */
 

        font-family:arial, verdana, sans-serif;
        background:#fff;
      } 

/* ====================================================================================================================== */
/* Definition der Listen Punkte in der Obersten Ebene (Listenpunkte mit Bild Hintergrund)                                 */
/* ====================================================================================================================== */
   #nav li.top 
      {
        display: block;                    /* Element is displayed as a block, as paragraphs and headers have always been */ 
        float: left;
      }

/* ====================================================================================================================== */
/* Definition eines Link "A" in einem ListenPunkt "LI" der Klasse "top_link" (Alle Links in Listenpunkte mit Bild)        */
/* ====================================================================================================================== */
   #nav li a.top_link 
      {
        height: 19; 
        line-height: 19px;                                   /* The line-height property sets the distance between lines. */

        display: block;
        float: left; 
        padding: 0 0 0 12px;

        cursor: pointer;                     /* specifies the type of cursor to be displayed when pointing on an element. */

        font-size: 11px; 
        font-weight: bold; 
        color: #ccc; 
        text-decoration: none; 

        background: url(../../images/menuitems/blank.gif);
      }

/* ====================================================================================================================== */
/* Linktext in einem <SPAN> innerhalb eines Haupmenu Links (Oberste Ebene) und ohne weitere Untermenus                    */
/* ---------------------------------------------------------------------------------------------------------------------- */
/* Definition eines <SPAN> in einem Link "A" fuer ListenPunkte "LI" der Klasse "top_link" (Wieder fuer Listenpkt. m. Bild)*/
/* ====================================================================================================================== */
   #nav li a.top_link span 
      {
        height: 19px;

        display: block; 
        float: left; 
        padding: 0 34px 0 12px; 

        background: url(../../images/menuitems/blank.gif) right top;
      }

/* ====================================================================================================================== */
/* Linktext in einem <SPAN> innerhalb eines Haupmenu Links (Oberste Ebene) und MIT weitere Untermenus                     */
/* ---------------------------------------------------------------------------------------------------------------------- */
/* Definition eines <SPAN class="down"> in einem Link "A" fuer ListenPunkte "LI" der Klasse "top_link"                    */
/* ====================================================================================================================== */
   #nav li a.top_link span.down 
      {
       height: 19; 

       display:block; 
       float:left; 
       padding:0 24px 0 12px; 

       background:url(../../images/menuitems/blanka.gif) no-repeat right top;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li a.top_link:hover 
      {
       color: #fff; 
       background: url(../../images/menuitems/blank_over.gif) no-repeat;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li a.top_link:hover span 
      {
       background: url(../../images/menuitems/blank_over.gif) no-repeat right top;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li a.top_link:hover span.down 
      {
       background: url(../../images/menuitems/blank_overa.gif) no-repeat right top;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*  Syntax: E > F = Matches any F element that is a child of an element E.                                                */
/* ====================================================================================================================== */
   #nav li:hover > a.top_link 
      {
       color: #fff; 
       background: url(../../images/menuitems/blank_over.gif) no-repeat;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li:hover > a.top_link span 
      {
       background: url(../../images/menuitems/blank_over.gif) no-repeat right top;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li:hover > a.top_link span.down 
      {
       background: url(../../images/menuitems/blank_overa.gif) no-repeat right top;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li:hover 
      {
       position: relative; 
       z-index: 200;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
/* keep the 'next' level invisible by placing it off screen. */
   #nav ul, 
   #nav li:hover ul ul,
   #nav li:hover ul li:hover ul ul,
   #nav li:hover ul li:hover ul li:hover ul ul,
   #nav li:hover ul li:hover ul li:hover ul li:hover ul ul 
      {
       position: absolute; 
       left: -9999px; 
       top: -9999px; 
       width: 0; 
       height: 0; 
       margin: 0; 
       padding: 0; 
       list-style: none;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li:hover ul.sub 
      {
       left: 0; 
       top: 19px; 
       background: #FFFFCC; 
       padding: 3px; 
       border: 1px solid #800000; 
       white-space: nowrap; 
       width: 85px; 
       height: auto; 
       z-index: 300;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li:hover ul.sub li 
      {
       display: block; 
       height: 19px; 
       position: relative; 
       float: left; 
       width: 90px; 
       font-weight: normal;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li:hover ul.sub li a 
      {
       display: block; 
       font-size: 11px; 
       height: 19px; 
       width: 90px; 
       line-height: 19px; 
       text-indent: 5px; 
       color: #000; 
       text-decoration: none;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li ul.sub li a.fly 
      {
       background: #fff url(../../images/menuitems/arrow.gif) 80px 7px no-repeat;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li:hover ul.sub li a:hover 
      {
       background: #FF0000; 
       color: #fff;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li:hover ul.sub li a.fly:hover 
      {
       background: #3a93d2 url(../../images/menuitems/arrow_over.gif) 80px 7px no-repeat; 
       color: #fff;
      }

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li:hover ul li:hover > a.fly 
      {
       background: #3a93d2 url(../../images/menuitems/arrow_over.gif) 80px 7px no-repeat; 
       color: #fff;
      } 

/* ====================================================================================================================== */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* ====================================================================================================================== */
   #nav li:hover ul li:hover ul,
   #nav li:hover ul li:hover ul li:hover ul,
   #nav li:hover ul li:hover ul li:hover ul li:hover ul,
   #nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul 
      {
       left:90px; top:-4px; 
       background: #fff; 
       padding: 3px; 
       border: 1px solid #3a93d2; 
       white-space: nowrap; 
       width: 90px; 
       z-index: 400; 
       height: auto;
      }