/* CSS Document */
/* SJHSMenuBar.css */
/* These spry menu css redefinitions were taken from the spry articles on auto width menu bars.
   unfortunately, IE creates some problems...
	 */

/* Horizontal menu redefinitions */
ul.MenuBarHorizontal li {
	width: auto;
	white-space:nowrap;
}

/* Remove any widths on sub menus. */
ul.MenuBarHorizontal ul {
	width: auto; /* Note:  for IE 7 this property:value forces the submenu to be horizontal, instead of vertical!!! */
}

/* We want the menu items in our sub menus to
 * fill up the entire width of the sub menu, so
 * make sure it is display:block and not floated.
 * Also remove any specified width from the default
 * style sheet and turn on "nowrap".
 */

ul.MenuBarHorizontal ul li {
	display: block;
	float: none;
	width: auto;
	white-space: nowrap;
	border-bottom: solid 1px #eee;
}

/* Now that our menus auto size horizontally, we need to
 * make sure that we have some space for any sub menu indicators
 * so they don't overlap with the text in the menu item.
 */

ul.MenuBarHorizontal a.MenuBarItemSubmenu {
	padding: 0.5em 2em 0.5em 0.75em;
}

/* Customize colors and borders */
	ul.MenuBarHorizontal a
	{
		color: #663333;
		background-color:#caae84;
		border-right: 1px solid #663333;
		border-bottom: 1px solid #663333;
	}
	ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
	{
		background-color: #663333;
		color: #caae84;
	}
	ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
	{
		background-color: #663333;
		color: #caae84;
	}


/* Vertical menu redefinitions */
/* Remove the fixed width off the menu bar itself. We float
 * the menu bar so that the browser sizes its width just enough
 * to fit its content. Another option, would be not to float the
 * menu bar, which will allow it to expand horizontally to fill
 * what ever container it is in.
 */


ul.MenuBarVertical {
	width: auto;			/* For IE 7 this forces the menu to be HORIZONTAL instead of VERTICAL !!! */
	float: left; 
}


/* We want our menu items to expand to fill up its container,
 * so make sure it is a non-floated block element.
 *
 * The bottom border property is used here as a hack around
 * an IE6 bug that causes white gaps to appear between positioned
 * elements when a class is programatically placed on one of them,
 * even if that class is not defined, or contains no CSS properties
 * that have any visual impact.
 */

ul.MenuBarVertical li {
		width: auto; 
		display: block;
		float: none;
		border-bottom: solid 1px #eee;
}

/* Remove any widths on sub menus. */

ul.MenuBarVertical ul {
	width: auto; 
}

/* We don't want the text in any of our sub menus to
 * wrap, so we need to turn on "nowrap".
 */

ul.MenuBarVertical ul li {
	width: auto; 
	white-space: nowrap; 
}

/* Now that our menus auto size horizontally, we need to
 * make sure that we have some space for any sub menu indicators
 * so they don't overlap with the text in the menu item.
 */

ul.MenuBarVertical a.MenuBarItemSubmenu {
	padding: 0.5em 2em 0.5em 0.75em;
}

	ul.MenuBarVertical a
	{
		color: #663333;
		background-color:#caae84;
		border-right: 1px solid #663333;
		border-bottom: 1px solid #663333;
	}
	ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
	{
		background-color: #663333;
		color: #caae84;
	}
	ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
	{
		background-color: #663333;
		color: #caae84;
	}