/* 
  ----------------------------------
  Popup Menu Navigation CSS Document 
  ----------------------------------
*/

/* Font-size is set for all menu items here */
#PopupNav {
	margin: 0;
	margin-left: 0px;
	padding: 0;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
}

#PopupNav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*border top is set to zero to allow the top of the first dropdown to abut the bottom of our buttons*/
#PopupNav ul {
	margin: 0;
	padding: 0;
	position: absolute;
	left: -9000px;
	z-index: 10000;
	border-top: 0;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #666666;
}

/*top border is put back on for flyouts*/
#PopupNav ul li ul {
	border-top: 1px solid #666666;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #666666;
}

/*this is all we need for top-level links*/
#PopupNav a {
	display: block;
	text-decoration: none;
}

/*This rule styles the sub-menu links*/
#PopupNav ul a, #PopupNav ul a:visited {
	padding: 0px 10px 0px 16px;
	background-color: #DFDFFF;
	color: #990000;
}

	/*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*/
	#PopupNav a:hover, #PopupNav a:active, #PopupNav a:focus,
	#PopupNav .PopupNavOn, #PopupNav .PopupNavMark {
		background-position: left -35px;
	}


/*the sub-menu hovers*/
#PopupNav ul a:hover, #PopupNav ul a:active, #PopupNav ul a:focus {
	background-color: #FF0000;
	color: #FFFFFF;
	letter-spacing: 0.01px;
}

/* ------ the current page marker style ------ */
#PopupNav ul .p7PMmark {
	color: #333333;
	font-weight: bold;
}

/* ------ the trigger link styles ------- */

/*the normal trigger links */
#PopupNav ul .PopupNavTrigger {
	background-repeat: no-repeat;
	background-position: right center !important;
}

/* the active trigger link style 
We turn the background image off to ensure that our top-level images do not
inherit down.*/
#PopupNav ul .PopupNavOn {
	background-color: #666666;
	color: #CCCCCC;
	background-image: none;
}

/*the submenu classes */
/*The top property here and in the show class serves to fix a minor bug introduced
by the good folks at Apple in their Safari browser for Panther OS*/
#PopupNav .PopupNavHide {
	left: -9000px;
	border: 0;
	top: 0;
}

#PopupNav .PopupNavShow {
	top: auto;
	left: auto;
	z-index: 20000 !important;
}

/* Top level menu width
We set width to auto because we are using top-level bg images and the width is
assigned directly via the IDs assigned to the links.*/
#PopupNav li {
	float: left;
	width: auto;
}
#PopupNav ul li {
	float: none;
}

/* 2nd and subsequent Submenu widths */
#PopupNav ul, #PopupNav ul li {
	width: 188px;
}
	
	#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;
	}
	
/*The top-level common properties
Height matches the height of the background images. No repeating. Text indent
hides the text offscreen left.
If you need to add more links, place a comma after #button4 and add more selectors, 
incrementing from #button5*/
#button1, #button2, #button3, #button4, #button5, #button6, #button7,
#button8, #button9, #button10, #button11, #button12, #button13, #button14, 
#button15, #button16, #button17, #button18, #button19, #button20, #button21, #button22 {
	height: 34px!important;
	background-repeat: no-repeat;
	text-indent: -3000px;
	background-color: #HHHHHH;
	background-position:left -1px;
}

/*The individual top-level IDS. We simply set width to match the width of the
associated background image and then we set the background image.
If you need to add more links, add more selectors, incrementing from #b5*/
#button1 {
	width: 188px;
	background-image: url(../images/menu/home.gif);
}
#button2 {
	width: 188px;
	background-image: url(../images/menu/nc.gif);
}
#button3 {
	width: 188px;
	background-image: url(../images/menu/sc.gif);
}
#button4 {
	width: 188px;
	background-image: url(../images/menu/va.gif);
}
#button5 {
	width: 188px;
	background-image: url(../images/menu/wv.gif);
}
#button6 {
	width: 188px;
	background-image: url(../images/menu/services.gif);
}
#button7 {
	width: 188px;
	background-image: url(../images/menu/miller.gif);
}
#button8 {
	width: 188px;
	background-image: url(../images/menu/news.gif);
}
#button9 {
	width: 188px;
	background-image: url(../images/menu/donors.gif);
}
#button10 {
	width: 188px;
	background-image: url(../images/menu/tour.gif);
}
#button11 {
	width: 188px;
	background-image: url(../images/menu/testimonials.gif);
}
#button12 {
	width: 188px;
	background-image: url(../images/menu/board.gif);
}
#button13 {
	width: 188px;
	background-image: url(../images/menu/contact.gif);
}
#button14 {
	width: 188px;
	background-image: url(../images/menu/volunteer.gif);
}
#button15 {
	width: 188px;
	background-image: url(../images/menu/rfbd_home.gif);
}
#button16 {
	width: 188px;
	background-image: url(../images/menu/upcoming.gif);
}
#button17 {
	width: 188px;
	background-image: url(../images/menu/ltl.gif);
}
#button18 {
	width: 188px;
	background-image: url(../images/menu/national_home.gif);
}
#button19 {
	width: 188px;
	background-image: url(../images/menu/sponsors.gif);
}
#button20 {
	width: 188px;
	background-image: url(../images/menu/tn.gif);
}
#button21 {
	width: 188px;
	background-image: url(../images/menu/more_rfbd.gif);
}
#button22 {
	width: 188px;
	background-image: url(../images/menu/newsletter.gif);
}
a#button1:hover, a#button2:hover, a#button3:hover, a#button4:hover, a#button5:hover, a#button6:hover, a#button7:hover,
a#button8:hover, a#button9:hover, a#button10:hover, a#button11:hover, a#button12:hover, a#button13:hover, a#button14:hover, 
a#button15:hover, a#button16:hover, a#button17:hover, a#button18:hover, a#button19:hover, a#button20:hover, a#button21:hover, a#button22:hover{
	background-position:left -35px;
}

