/* Objective Development HowTo package: Horizontal Menues with WebYep */
/* A quick and simple horizontal navigation menu, including submenues */

div.MyMenu { /* <div> container to distinguish the <ul>/<li> for the menu from other lists you might want to use */
  clear:                both;
  margin:               0 0 0 3px;
  padding:              5px 0 0;
  z-index:              30;
}
div.MyMenu ul { /* clear all margins and paddings for the actual menu and it's descendants */
  margin:               0;
  padding:              0;
}
div.MyMenu ul li { /* this rule does the magic: display a list horizontally instead of vertically */
  float:                left;
  list-style-image:     none;
  list-style-position:  outside;
  list-style-type:      none;
  margin:               0;
  padding:              0;
}
div.MyMenu ul li a,
div.MyMenu ul li a:visited {
  /*  background-color:		#D9D9D9;  background of main menu entry, normal */
  background-image:     url(image/10x10.png); /* ISS - HINTERGRUNDBILD HAUPTMENÜ NORMAL */
  color:                #000000; /* text color of main menu entry, normal */
  display:              block;   /* links will be displayed as blocks, giving the look and feel of a button */
  font-size:            12px;
  font-weight:          bold;
  height:               20px; /* height of the main menu entries, part 1 (add padding to this value, see below) */
  line-height:          15px;
  margin:               0 3px 0 0; /* distance between main menu entries */
  padding:              7px 10px 3px 10px; /* ISS / oben, links, unten, rechts */
  text-align:           center;
  text-decoration:      none;
  white-space:          nowrap; /* dont wrap long entries (also see below) */
}
div.MyMenu ul li a:hover {
  background-image:     url(image/10x10-bl.png); /* ISS - HINTERGRUNDBILD HAUPTMENÜ HOVER*/
  color:                #707070; /* text color of main menu, hover */
  font-weight:          bold; /* ISS */
}

/* ISS / AKTIVER MENÜPUNKT */
div.MyMenu a:link.WebYepMenuCurrentItem,
div.MyMenu a:visited.WebYepMenuCurrentItem {
  background-image:     url(image/10x10-bl.png); /* ISS - HINTERGRUNDBILD HAUPTMENÜ ACTIVE*/
  color:                #707070; /* text color of main menu, hover */
  font-weight:          bold; /* ISS */

}

div.MyMenu ul li ul {
  border:               0px solid #3A3A3A; /* ISS border color of submenu panels */
  left:                 -999em; /* default position of submenues: way off screen (to the left, so we don't get scrollbars) */
  padding:              0;
  position:             absolute;
  width:                150px; /* width of submenues */
  z-index:              100;
}
div.MyMenu ul li ul li {
  width:                100%;
}
div.MyMenu ul li ul li a,
div.MyMenu ul li ul li a:visited {
  background-image:     url(image/10x10.png); /* ISS - HINTERGRUNDBILD UNTERMENÜ*/
  background-color:     #EEEEEE; /* background of submenues */
  color:                #000000; /* text color of submenues */
  font-size:            11px; /* font size of submenu entries (related to height, see below) */
  height:               20px; /* height of the inline block */
  padding:              10px 0 0 10px; /* ISS / Abstand oben und zum linken Rand */
  text-align:           left;
  width:                145px; /* width of inline block (width of submenues minus 5 <- from padding-left) */
  overflow: 			   hidden; /* since we have fixed width submenues, hide oversized entries (cut them off, also see white-space rule above) */
}
div.MyMenu ul li ul li.WebYepMenuTitle a,
div.MyMenu ul li ul li.WebYepMenuTitle a:visited,
div.MyMenu ul li ul li.WebYepMenuTitle ul li.WebYepMenuTitle > a,
div.MyMenu ul li ul li.WebYepMenuTitle ul li.WebYepMenuTitle > a:visited {
/*  background-image:     url(image/10x10.png);  ISS - BILD UNTERMENÜTITEL HOVER*/
  background:           #00FF00 url(submenu_arrow.gif) no-repeat scroll 139px 10px;  /*ISS / Hintergrund von Untermenüs, die selbst Untermenüs besitzen / Abstand von Links und Oben */

}
div.MyMenu ul li ul li a:hover,
div.MyMenu ul li ul li.WebYepMenuTitle a:hover,
div.MyMenu ul li ul li.WebYepMenuTitle ul li a:hover,
div.MyMenu ul li ul li.WebYepMenuTitle ul li.WebYepMenuTitle ul li a:hover {
  background-image:     url(image/10x10.png); /* ISS - BILD UUNTERMENÜTITEL HOVER*/
  background-color:     #FF0000; /* background of submenues, hover */
  color:                #383838; /* text color of submenues, hover */
}
div.MyMenu ul li ul ul {
  margin-left:          150px; /* horizontal offset of submenues = width of submenues (make this smaller, to let them overlap) */
  margin-top:           -18px; /* vertical offset of submenues = height of submenues */
  padding:              0;
  width:                150px; /* width of subsequent submenues */
}
div.MyMenu ul li ul ul li {
  width:                100%;
}
div.MyMenu ul li ul li.WebYepMenuTitle ul a,
div.MyMenu ul li ul li.WebYepMenuTitle ul a:visited,
div.MyMenu ul li ul li.WebYepMenuTitle ul li.WebYepMenuTitle ul a,
div.MyMenu ul li ul li.WebYepMenuTitle ul li.WebYepMenuTitle ul a:visited {
  background-image:     url(image/10x10.png); /* ISS - HINTERGRUNDBILD UNTERMENÜTITEL */
  background:           #EEEEEE none repeat scroll 0 0; /* ISS / HINTERGRUND 3TE EBENE */
}
div.MyMenu ul li:hover ul ul,
div.MyMenu ul li:hover ul ul ul {
  left:                 -999em; /* hide submenues of active submenu, by moving them off screen */
}
div.MyMenu ul li:hover ul,
div.MyMenu ul li li:hover ul {
  left:                 auto; /* show submenues, when mousing over parent (only first child <ul>) */
}