@charset "utf-8";
/* CSS Document */

/* top level categories or "menu bar" */
/* the next 3 rules clears the "float" after the menu bar */
.navbar:after,
#bottomNav:after {	/* clear the "float" - works on everything except IE */
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
* html .navbar,
* html #bottomNav {	/* clear the float - IE 5, 5.5 and 6 */
	height:1%;
}
*:first-child+html .navbar { /* clear the float - IE 7 */
	min-height:1px;
}

.navbar ul {
	list-style:none; /* turn off markers in list */
}

.navbar ul li {
	background-color:#fff;
	float:left;		/* this creates a horizontal list */
	width:99px;		/* this plus 1 pixel border makes 100 pixels, perfect for our 800 pixel wide contents divided by 8 categories */
	padding:5px 0;	/* 5 pixels on top and bottom for padding */
	border-bottom:#8fbc49 2pt solid; /* green line under menu */
	border-left:#8fbc49 1px solid;	/* line dividing categories */
}
.navbar ul li#homeNav {
	border-left:none;	/* turn off left border for Home category, since it's on the far left side */
}
.navbar ul li:hover,
.navbar ul li.sfhover {
	background:#fff url(images/navBackground.jpg) center bottom repeat-x; /* color wash for hovering over category */
}
.navbar ul li a {
	width:auto; /* turn on automatic line wrapping - we forced it to 99 pixels in .navbar ul li rule */
	display:block;	/* allows clicking on the whole tab, not just on the words themselves */
	color:#8fbc49;	/* greenish color for text */
	text-align:center;	/* center the categories on menu bar */
	text-decoration:none;	/* don't underline categories - default for links */
}
/* this rule highlights the category when the overview page is selected */
#homePage .navbar a#homeCategory,
.getHelpClass .navbar a#getHelpNowCategory,
.aboutUsClass .navbar a#aboutUsCategory,
.ourProgramsClass .navbar a#ourProgramsCategory,
.giveClass .navbar a#giveCategory,
.volunteerClass .navbar a#volunteerCategory,
.newsClass .navbar a#newsCategory,
#contactUsPage .navbar a#contactUsCategory {
	color:#e17000;	/* home category is orangish color */
}
/* this defines the drop down menu rectangle */
.navbar ul li ul {
	padding:10px 10px; /* 10 pixel padding */
	position:absolute; /* menu doesn't belong "on" the page */
	left:-1000em;	/* we draw this off to the side of the page and bring it back on the hover */
	width:240px;	/* menu width */
	background: #fff;	/* white background */
	z-index: 199;	/* this must be drawn "on top of" other parts of the page */
	border: 1px solid #8fbc49; /* greenish border */
}
/* when mouse hovers over the menu bar, we should display the menu */
.navbar ul li:hover ul,
.navbar ul li.sfhover ul {
	left:auto;	/* show menu on screen */
}
/* these describe top level menu items */
.navbar ul li ul li {
	width:auto;	/* reset widths to automatic since categories set them to 99px */
	float:none;	/* turn off float so lists are vertical again */
	border:none;	/* reset borders since categories set them to green */
	padding:0;	/* reset padding since categories set them to 5px */
}

/* following is a hack to ensure IE/Win displays menus correctly */
/* Hide this hack from IE5/Mac \*/
* html .navbar ul li ul li {
	height:1%;
}
/* end hiding of hack from IE5/Mac */

.navbar ul li ul li a {
	text-align:left;	/* text on menus must be left aligned */
	display:block;	/* allows clicking on the whole tab, not just on the words themselves */
	color:#6c6f70;
}
.navbar ul li ul li:hover,
.navbar ul li ul li.sfhover {
	background-image:none;	/* turn off background image used for menu bar "categories" */
}
.navbar ul li ul li:hover a,
.navbar ul li ul li.sfhover a {
	color:#e17000;	/* highlighted text is orange */
}
/* these describe second level lists on the menu */
.navbar ul li ul li.navLevel3 {
	position:relative;	/* reset back to relative */
	border:none;	/* remove borders that we set up for menu borders */
	color: #8fbc49;	/* greenish text */
}
.navbar ul li ul li.navLevel3 a {
	padding:0 0 0 24px;	/* we indent 20 pixels */
	background:#fff url(images/bullets/grayDisc.gif) 10px .1em no-repeat;
	display:block;	/* allows clicking on the whole tab, not just on the words themselves */
}
.navbar ul li ul li.navLevel3 a:hover,
.navbar ul li ul li.navLevel3 a.sfhover {
	background:#fff url(images/bullets/orangeDisc.gif) 10px .1em no-repeat;
	display:block;	/* allows clicking on the whole tab, not just on the words themselves */
}
/* these describe third level lists on the menu */
.navbar ul li ul li.navLevel4{
	position:relative;	/* reset back to relative */
}
.navbar ul li ul li.navLevel4 a {
	padding:0 0 0 40px;	/* we indent 30 pixels */
	background:#fff url(images/bullets/grayDash.gif) 26px .15em no-repeat;
}
.navbar ul li ul li.navLevel4 a:hover,
.navbar ul li ul li.navLevel4 a.sfhover {
	background:#fff url(images/bullets/orangeDash.gif) 26px .15em no-repeat;
}
#bottomNavbar {
	padding:0 10px;
/*	margin:0 auto; */
	text-align:center;
}
#bottomNavbar ul {
	list-style:none;
	font-size:70%;
}
#bottomNavbar ul li {
	display:inline;
	padding:0 10px;
	border-left:#666666 1px solid;
}
#bottomNavbar ul li a {
	color:#666666;
	text-decoration:none;
}
#bottomNavbar ul li a:hover {
	text-decoration:underline;
}