/* page styling, unimportant for the menu. only makes the page looks nicer */
body {
      color: rgb(0, 0, 0);
      background-color: rgb(240, 255, 240);
      font-family:Comic Sans MS;
      letter-spacing: .5px;
      font-size: 90%;
      background-image: url("gimpel4.jpg");
}
   a:link {color: #000000;text-decoration: none;border-style: none;}
   a:visited {color: #000000;text-decoration: none;border-style: none;}
   a:hover {color: #EA0000;text-decoration: underline;border-style: none;}
   a:active {color: #000000;text-decoration: none;border-style: none;}

h1 {font-size: 2em;}
h2 {font-size: 1.5em;}

.example {
        background: rgb(204,255,204);
        padding: 50px;
}

/* - - - ADxMenu: BASIC styles - - - */

.menu {
        color: #000;
        background: rgb(204,255,204); /* Hintergrundfarbe Menu (#ddddcc)*/
        width: 14em;  /* VERY IMPORTANT! Set this to appropriate value, either here on down in the design section */
        margin: 0;
        padding: 0;
        border: 0;
        min-height: 0;      /* IE7 float clear: */
}

.menu ul {
        background-image: url("gimpel4.jpg");
        width: 13em;
        margin: 0;
        border: 0;
        list-style: none;
        display: block;
        visibility: hidden;        /* initially hide all submenus. */
        position: absolute;
        z-index: 10;
        left: 0;        /* while hidden, always keep them at the top left corner, */
/*        top: 0;    */            /*                 to avoid scrollbars as much as possible */
        min-height: 0;    /* IE7 float clear: */
        padding: 1px;
        margin: 0px 0 0 -10px;
/*        background: #f00;   */     /* uncomment this if you want to see the "safe" area.
                                    you can also use to adjust the safe area to your requirement */
}

.menu li {
        background-image: url("gimpel4.jpg");
        margin: 0;
        border: 0;
        list-style: none;
        display: block;
        position: relative;        /* position each LI, thus creating potential IE.win overlap problem */
        z-index: 5;                /* thus we need to apply explicit z-index here... */
        border: 1px solid rgb(0,102,0);        /* Rahmenfarbe */
        padding: .5em; /*.4em 1em;   */
        text-align: center;
}

.menu li:hover {
        background: rgb(204,255,204);  /*  Hintergrundfarbe SubMenu Mouse over #eeee99*/
        z-index: 10000;        /* ...and here. this makes sure active item is always above anything else in the menu */
        white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
                see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu ul[class].visible {
        visibility: visible;        /* initially hide all submenus. */
        position: relative;        /* position each LI, thus creating potential IE.win overlap problem */
        left: 2em;
        top: 0em;         /*2em*/
}

.menu li:hover>ul {
        visibility: visible;        /* display submenu them on hover */
        left: 2em;        /* and move them to the right of the item */
        background: rgb(204,255,204);  /*  Hintergrundfarbe SubMenu Mouse over #eeee99*/
        top: 2em;         /*2em*/
}

/* -- float.clear --
        force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
        content: ".";
        height: 0;
        display: block;
        visibility: hidden;
        overflow: hidden;
        clear: both;
}
/* -- float.clear.END --  */

.menu ul li {
        color: #000;
        background: rgb(153,204,51);  /* Hintergrundfarbe SubMenu (#ddddcc)*/
        background-image: url("gimpel4.jpg");
        text-align: center;
        padding: 1px;
}

.menu a {
        text-decoration: none;
        color: #000;
        padding: .0em; /*.4em 1em;   */
        display: block;
        text-align: center;
}

.menu a:hover {
        color: #ff0;      /* Schriftfarbe Menu Mouse over*/
        background: rgb(51,204,51);  /* Hintergrundfarbe  */
        font-weight:normal;
}

.menu ul li:hover {
        color: #a00;      /* Schriftfarbe SubMenu Mouse over*/
        background: rgb(51,204,51);   /* Hintergrundfarbe ff9900 */
        font-weight:normal;     /*  */
}


.menu>li + li, .menu ul>li + li {        /* and remove the top border on all but first item in the list */
        border-top: 0;
}


/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
        placed here to clarify the terminology I use when referencing submenus in posts
.menu>li:first-child>a, .menu li + li + li li:first-child>a {
        color: #567;
}
                           */
.menu ul ul  {
    margin-top: -3px;
    width: 12em;
    color:#000;
    left: 2em;
}

.menu ul ul ul {
    width: 10em;
}

.special {
        color: #fee;
        background: rgb(204,255,204); /* Hintergrundfarbe Menu (#ddddcc)*/
}
.leer {
        background-image: url("gimpel4.jpg");
}

.markiert {
   font-weight: bold;
}