#p7PMnav {
margin: 25px auto 15px auto;
padding: 0;
border-top: 1px solid #D9D9D9;
background-color: #FFF;
text-align: left;
}

#p7PMnav ul {
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
border-bottom: 0 solid #FFF;
border-left: 1px solid #FFF;
background-color: #FFF;
}

/*the normal background for any list item */
#p7PMnav li {
list-style-type: none;
margin: 0;
padding: 0;
}

#p7PMnav ul { z-index: 10000; }

/*the normal background for any item that is a SUBMENU link, not a trigger to another submenu */
/*doesn't display on first level nor do you get arrows with this because you don't need them */
#p7PMnav a {
display: block;
text-decoration: none;
background-color: transparent;
padding: 6px 0 6px 5px;
color: #000000;
line-height: 1.0;
border-bottom: 1px solid #D9D9D9;
}

#p7PMnav ul a {
background-color: #51B948;
color: #FFF;
border-bottom: 1px solid #FFF;
line-height: 1.0;
}


/*the hover state for ALL menu links...when hovered over, the bkgrd image swap conceals the arrow but */
/*that is okay because if it has no further submenu, it doesn't have an arrow */
/*if it IS a submenu, the arrow would get covered over anyway by the flyout submenu */
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {
background-color: #6620AC;
color: #FFF;
letter-spacing: .01px;
}

/* ------ the current page marker style ------ */
#p7PMnav .p7PMmark {
color: #CC0099;
font-weight: bold;
}

/* ------ the trigger link styles ------- */
/*this is the ARROW that appears on any link that has a submenu */
/*the normal trigger link */
#p7PMnav .p7PMtrg, #p7PMnav .p7PMon {
background-image:  url(http://www.morrishabitat.org/images/p7t_plus.gif);
background-repeat: no-repeat;
background-position: 126px 50%;
}

/* the active trigger link style */
/*purple background when mousing over and through another submenu */
#p7PMnav .p7PMon {
background-color: #0088CC;
color: #FFFFFF;
}

/*the submenu classes */

#p7PMnav .p7PMhide {
left: -9000px;
border: 0;
}

#p7PMnav .p7PMshow {
left: auto;
z-index: 20000 !important;
}

/* Top level menu width */
#p7PMnav { width: 140px; }

/* 2nd and subsequent Submenu widths */
#p7PMnav ul { width: 170px; }


/* ------ the ARROW on submenus can be different by adding the ul */

#p7PMnav ul .p7PMtrg, #p7PMnav ul .p7PMon {
background-image:  url(http://www.morrishabitat.org/images/p7t_plus2.gif);
background-repeat: no-repeat;
background-position: 156px 50%;
}


/* ------ the current page marker style for submenus with dark color backgrounds ------ */
#p7PMnav ul .p7PMmark {
color: #FFF;
font-weight: bold;
}