/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This menu bar is styled using the css style sheet provided with the Spry Menu bar widget, 
 * changing the colors to match the site, and changing the box model to allow for auto
 * width menu items following instructions given at 
 * http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthVerticalMenuBarSample.html
 */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
	margin:                0px;
	padding:               0px;
	list-style-type:       none;
	font-size:             100%;
	cursor:                default;
	width:                 auto;  /* Changed from 8 em to auto */
	float:                 left;  /* We float the menu bar so that the browser sizes its width just enough to fit its content.*/
}

/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE 
 * rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index:               1000;
}

/* Menu item containers, position children relative to this container and are same fixed width as parent
 * 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
{
	margin:                 0;
	padding:                0;
	list-style-type:        none;
	font-size:              100%;
	position:               relative;
	text-align:             left;
	cursor:                 pointer;
	width:                  auto;              /* Changed from 8 em to auto */
	display:                block;             /* We want our menu items to expand to fill up its container, */
	float:                  none;              /* so make sure it is a non-floated block element.            */
	color:                  #990000;           /* Changed color */
	border-bottom:          solid 1px #FFDEAD; /* See above comment */
	;
	background-color: #FFDEAD;
}

/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, 
 * but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
	margin:                 -5% 0 0 95%;
	padding:                0;
	list-style-type:        none;
	font-size:              100%;
	position:               absolute;
	z-index:                1020;
	cursor:                 default;
	width:                  auto;            /* Changed from 8.2 em to auto. */
	left:                   -1000em;
	top:                    0;
}

/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left:                   0;
}

/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
	width:                 auto;   /* Changed from 8.2 em to auto. */
	white-space:           nowrap; /* We don't want the text in any of our sub menus to wrap, so we need to turn on "nowrap". */
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
	border-top-style:      none;
	border-right-style:    none;
	border-bottom-style:   none;
	border-left-style:     none; /* changed to no borders */
}

/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
	border:                1px solid #990000; /* Changed color */
}

/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
	display:               block;
	cursor:                pointer;
	background-color:      #FFDEAD;
	color:                 #990000; /* Changed color */
	text-decoration:       none;
	padding-top:           0.2em;   /* Made padding smaller */
	padding-right:         0.75em;
	padding-bottom:        0.2em;   /* Made padding smaller */
	padding-left:          0.75em;
}

/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
	background-color:      #FFDEAD; /* Changed color */
	color:                 #990000; /* Changed color */
}

/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
	background-color:      #FFDEAD; /* Changed color */
	color:                 #990000; /* Changed color */
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are 
 * set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
	background-image:     url(SpryMenuBarRight.gif);
	background-repeat:    no-repeat;
	background-position:  95% 50%;
}

/* 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-top: .1em;
	padding-right: 2em;
	padding-bottom: .1em;
	padding-left: 0.75em;
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
	background-image:    url(SpryMenuBarRightHover.gif);
	background-repeat:   no-repeat;
	background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarVertical li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFDEAD; /* Changed color */
	}
}