/* 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;
	z-index:              30;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 3px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
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:		#FFFFFF; /* background of main menu entry, normal */
	color:                #FFFFFF; /* 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:            18px;
	font-weight:          100;
	height:               20px; /* height of the main menu entries, part 1 (add padding to this value, see below) */
	line-height:          normal; /* adds some flesh to the links in the main menu */
	text-align:           center;
	text-decoration:      none;
	white-space:          nowrap; /* dont wrap long entries (also see below) */
	font-family: Arial, Helvetica, sans-serif;
	background-image: url(bg-nvi.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	text-transform: capitalize;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 3px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border-right-style: solid;
	border-right-color: #E3EDF2;
	border-top-width: 5px;
	border-right-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 5px;
	letter-spacing: 0em;
	border-left-style: solid;
	border-left-color: #E3EDF2;
}
div.MyMenu ul li a:hover {
	color:                #990000; /* text color of main menu, hover */
	background-image: url(bg-menue-over.gif);
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #FFCC00;
}
div.MyMenu ul li ul {
	border:               0px solid #87753F; /* 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 {
	color:                #990000; /* text color of submenues */
	font-size:            10px; /* font size of submenu entries (related to height, see below) */
	height:               22px; /* distance of text to left border */
	text-align:           center;
	width:                150px; /* 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) */
	background-image: none;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 5px;
	border: 2px solid #FFFFFF;
	vertical-align: baseline;
	font-variant: normal;
	background-repeat: no-repeat;
	font-weight: bold;
	background-position: left bottom;
	text-transform: uppercase;
}
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:           #EEEEEE url(submenu_arrow.gif) no-repeat scroll 139px 4px; /* background of submenues, which have submenues themselves */
}
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 {
	color:                #FFFFFF; /* text color of submenues, hover */
	background-color: #990000;
	background-image: none;
}
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:           #EEEEEE none repeat scroll 0 0; /* background of submenues, normal */
}
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>) */
}