/* 
-----------------------------------
PopMenu Magic Style Sheet
by Project Seven Development
www.projectseven.com
Menu Type: Horizontal
Style Theme:0 -Basic Style

This version goes with manually inserted sub-menu arrows, so that
a hovered menu item or triggered menu item can use a background picture and be semi-transparent.
This requireds the arrow to be added to each item in the html like:
<li><a href="/sounds" class="p7PMtrg">KARMA Sound Sets</a><img class="arrow" src="/menubar/p7pm/img/p7PM_light_east.gif">                                      

-----------------------------------
*/

#p7PMnav {
	margin: 0;
	margin-left:52px;
	padding-left:0px;
	padding-right:0px;
	padding-top:6px;
	padding-bottom:19px;
	font-family:/*Tahoma, */Verdana, Arial, Helvetica;
	color:#000000;
}
#p7PMnav li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#p7PMnav ul li {
	background:url(img/menu_back.png) repeat top left;
}

#p7PMnav ul {
	margin: 0;
	/*margin-left:20px !important;*/
	padding: 0;
	border-style: solid;
	border-width:1px;
	border-top-color:#606069;
	border-left-color:#606069;
	border-bottom-color:#000000;
	border-right-color:#000000;
	position: absolute;
	left: -9000px;
	z-index: 10000;
}

#p7PMnav a {
	display: block;
	text-decoration: none;
	padding:0px;
	margin-left:20px;
	color: #ffffff;
	font-size:1em;
	line-height:1.4em;

}
/* sub-menus*/
#p7PMnav ul a {
	padding-top: 4px;
	padding-bottom: 6px;
	padding-left: 10px;
	padding-right: 10px;
	margin:0px;
	font-size:1em;
	line-height:1.4em;

		/* by putting the bg here, the on state replaces it, not draws on top of it, which matters for transparency */
		/* however, this causes the first item in the menu to do a weird flash when first selected,
		so not using this and the hover states are not transparent, but they still use an image background. */
	/*background:url(img/menu_back.png) repeat top left;*/
}
/* top level: hover state (background, font colors etc.) */
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {
	color: #ffffff;
	text-decoration:underline;
	letter-spacing: 0.01px;
}
/*sub-menus: hover state (background, font colors etc.) */
#p7PMnav ul a:hover/*, #p7PMnav a:active, #p7PMnav a:focus */{
	/*background-color:#858491;*/
	background:url(img/menu_back_over.png) repeat top left;
	color:#000000;
	text-decoration:none;
	letter-spacing: 0.01px;
}
/* Each background image contains 2 states - mouse-off and mouse-on
arranged vertically - so if the button is 13 pixels high, the picture is actually 26.*/

/*This is top-level only and is the rule that shifts the background image so that we now
see the bottom one. It is deployed via multiple selectors for hovering, tab key access,
and so it stays persistent when its associated sub-menu is open*/
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus,
#p7PMnav .p7PMon /*, #p7PMnav .p7PMmark */{
	background-position: left bottom;
}

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

/*the trigger link (sub-menu arrow) */
/* note: you cannot use a picture for the background of the hover state
and still have the trigger arrows work, since they get replaced
So I am manually inserting the arrow graphics so I can use a background.
This require a hack for IE in the browserfix.php CSS file.
*/
/*
#p7PMnav ul .p7PMtrg, #p7PMnav ul .p7PMon {
	background-image: url(img/p7PM_light_east.gif);
	background-repeat:	no-repeat;
	background-position: right center !important; 
}
*/
#p7PMnav ul .arrow {
	float:right; 
	position:relative;
	top:-17px;
}

/* top level: the active trigger link style */
#p7PMnav .p7PMon {
	color: #FFFFFF;

}
/* sub-menus: the active trigger link style */
#p7PMnav ul .p7PMon {
	/*background-color: #858491;*/
	background:url(img/menu_back_over.png) repeat top left;
	color: #000000;
}
/*the submenu classes */

#p7PMnav .p7PMhide {
	left: -9000px;
}
#p7PMnav .p7PMshow {
	left: auto;
	z-index: 20000 !important;
}
/* Top level menu width */
#p7PMnav li {
	float: left;
	width: 124px;
}
#p7PMnav ul li {
	float: none;
}
#p7PMnav ul, #p7PMnav ul li {
	width: 150px;	/* width of drop down menus that are not overridden down below */
}

#pmmcrumb {
	font-weight: bold;
	margin-bottom: 16px;
	color: #333333;
}
#pmmcrumb a, #pmmcrumb a:visited {
	font-weight: normal;
	color: #535FAC;
}
#pmmcrumb a:hover, #pmmcrumb a:active, #pmmcrumb a:focus {
	font-weight: normal;
	color: #333333;
}

/* hide from IE mac \*/
#p7PMnav li {width: auto;}
#p7PMnav a {overflow: hidden;}
#p7PMnav ul a {overflow: visible;}
/* end hiding from IE5 mac */

#b1, #b2, #b3, #b4, #b5, #b6, #b7, #fo7 {
  height: 17px; /*!important;*/
  background-repeat: no-repeat;
  background-position: left top;
  text-indent: -3000px;
}
#b1 {
	background-image:  url(img/home.gif);
	width:55px;
}
#b2 {
	background-image:  url(img/products.gif);
	width:78px;
}
#b3 {
	background-image:  url(img/store.gif);
	width:59px;
}
#b4 {
	background-image:  url(img/community.gif);
	width:87px;
}
#b5 {
	background-image:  url(img/support.gif);
	width:73px;
}
#b6 {
	background-image:  url(img/company.gif);
	width:76px;
}
#b7 {
	background-image:  url(img/contact.gif);
	width:48px;
}
#community, #community li {
	width:100px !important;
}
#support, #support li, #company, #company li {
	width:140px !important;
}
#forums, #forums li {
	width:230px !important;
}
.divider {
	background:none !important;
	/*background-color:#23262e !important;*/
	background-color:#595f75 !important;
	height:1px !important;
	line-height:1px !important;
}