.CMSListMenuUL
{
	font-size: 14px;
	line-height:17px; /* prevent gaps in IE 7, make known height in FF */
	text-align:right;
	border-bottom:solid 1px black;
}

#menuElem
{
width: auto;
text-align:center;
}

.CMSListMenuUL li
{
    display:inline; /* make list horizontal */
}

.CMSListMenuUL .CMSListMenuLI,
.CMSListMenuUL .CMSListMenuLIlast,
.CMSListMenuUL .CMSListMenuLIFirst,
.CMSListMenuUL .CMSListMenuHighlightedLI
{ /* needed for proper vertical alignment of popup menu - might trigger IE bugs */
	position: relative;
}

/* hack for space in ul */
.CMSListMenuUL, .zoneTopMenu
{
    font-size:0;
}

.CMSListMenuUL, 
.CMSListMenuUL li
{
    margin:0;
    padding:0;
    list-style-type:none; /* hide li decoration... too flaky to use, use our own img tag */
    list-style-position:outside; /* for IE even with no list style it still leaves gap for one */
}

/* Within each menu item is a link. By setting a transparent background image here you can effectively layer two images in each menu item.  One comes from the CSS rule (above) governing the li tag that each menu item has. The second image comes from the rule (below). */
.CMSListMenuUL .CMSListMenuLink,
.CMSListMenuUL .CMSListMenuLinkHighlighted
{
	display: inline-block;
    width:auto;  /* top level auto width */
	position: relative;	/* so icon span can position absolute */
    color: White; /* override site styles for links */
	text-decoration: none;
	text-align:left;
	padding: 4px 8px 4px 8px;
 	border: 1px solid #648ABD; 
 	border-bottom: solid 1px black;  
 	border-right: solid 1px black;   
	/* in case text does not fit inside, clip it */
	/*  overflow:hidden;   overflow mucks up size? */
}

.CMSListMenuUL .CMSListMenuLinkHighlighted
{
color:red;
}

.CMSListMenuUL .CMSListMenuUL .CMSListMenuLink,
.CMSListMenuUL .CMSListMenuUL .CMSListMenuLinkHighlighted
{
    width: 150px; /* popup menu width */
}

.CMSListMenuUL .CMSListMenuLink:hover,
.CMSListMenuUL .CMSListMenuLinkHighlighted:hover
{ 
    /* font-weight: bold; */
	color:yellow; 
}

.CMSListMenuUL .CMSListMenuUL	/* move first submenu to display in same horizontal line as rootnode, otherwise root node will be only thing on first level */
{
	display:inline;	
}
	
.CMSListMenuUL .CMSListMenuUL
{   /* for popup menu child of horizontal item */
	/* use visibility:hidden; instead of block:none so menus will be laid out 	 in proper spot to start with */
	visibility: hidden;
	position: absolute;
	top: 7px;
	left: 0px; /*  */
	border-left: solid 1px #888888;
	border-bottom: solid 1px #555555;
}
.IE7 .CMSListMenuUL .CMSListMenuUL
{
    top: 27px;  /* adjust top for IE7 */
}

.CMSListMenuUL .CMSListMenuUL .CMSListMenuUL li
{
    display:list-item; /* make list vertical again */
}
.CMSListMenuUL .CMSListMenuUL .CMSListMenuUL
{ /* for popup menu child of vertical item */
    top: 0px;
    left: 131px;
}

.CMSListMenuUL li:hover .CMSListMenuUL 
{
    visibility: visible;
}
.CMSListMenuUL li:hover .CMSListMenuUL .CMSListMenuUL 
{
    visibility: hidden;
}
.CMSListMenuUL li:hover .CMSListMenuUL li:hover .CMSListMenuUL 
{
    visibility: visible;
}

.CMSListMenuUL li:hover 
{ /* z-index for popup menu to overlap */
	z-index: 604;
}

/* set background color/image, both normal and hover --------------------------------------- */
.CMSListMenuUL .CMSListMenuUL li .CMSListMenuLink,
.CMSListMenuUL .CMSListMenuUL li .CMSListMenuLinkHighlighted
{
	background: transparent url(/OPC/Images/blue-bg-dark_r.aspx) no-repeat;
    /* y value must stay at 0 or all parents will not have the same color. If image positioning does not start at the top then due to each parent being a different height then the portion of image displayed will be different */
    /* percentage equals NEGATIVE pixel, 1% = -4px */
    background-position: -190px 90%;
}
.CMSListMenuUL li:hover>.CMSListMenuLink,
.CMSListMenuUL li:hover>.CMSListMenuLinkHighlighted
{ 	/* instead of setting a new image, just move to different location in it */
	background-position: 0px 100%;
}