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

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

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

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

 *******************************************************************************/
#MenuBar1 a:visited
{
	text-decoration: none;
	color:#ffffff;
	font-weight: bold;
}
#MenuBar1 a:hover
{
	text-decoration: none;
	color:#101B62;
	font-weight: bold;
}

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
 ul.MenuBarVertical
{
	margin: 0px 0px 0px 0px ;  /* this moves  the button down */
	padding: 0; /* this moves the buttons to the right and leaves a gap between the border and background colour */
	list-style-type: none; /*switches off the normal bullet on the lists DOES NOT WORK */
	font-size: 100%; /* great little scaler DOES NOT WORK WITH CHROME */
	cursor: default; /* DOES NOT WORK  */
	width: 100%; /* UNPREDICTABLE RESULTS WITH ALL 3 BROWSERS*/
}
/* 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 */
ul.MenuBarVertical li
{
	margin: 0px 0px 5px 0px; 				/*button spacing*/
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: center; /* xxx will align the text */
	cursor: pointer;
	width: 90%;  /*THIS IS THE WIDTH OF THE BUTTONS INSIDE THE CONTAINER ABOVE*/
}
/* 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
{
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: absolute;
	z-index: 1020;
	cursor: default;
	width: 100%;
	left: -1000em;
	top: 0;
}
ul.MenuBarVertical ul.MenuBarVertical ul
{
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: absolute;
	z-index: 1020;
	cursor: default;
	width: 100%;
	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: auto;
    
    }
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
	width: 115%; 
}

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

 DESIGN INFORMATION: describes color scheme, borders, fonts

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

/* Outermost menu container  */
ul.MenuBarVertical
{
	 border: 0px; /* this places a single border around all the buttons*/
     
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
	border: 0px;   /* this places a single border around all the submenu buttons*/
	margin: 0 0 0 6em;
}

/* this is a bit of a hack as i really struggled to get te IE browser to give me well formed 
third level menus.  I found out that the IE browser ignors the % value in margin whereas FF dies not.
This was handy as I was having problems with FF showing the third level directly on top of the 2nd level.  
So explicitly positioing the 3rd level with the line below allowed me to talk to FF while IE7 ignored. 
Need to check in IE8 */

ul.MenuBarVertical ul ul
{
	border: 0px;
    margin: 0 0 0 6.2em;
}


/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a, ul.MenuBarVertical a:link
{
	display: block;
	cursor: pointer;
	background-color: #101B62;
	font-family: Verdana, Geneva, sans-serif;		/*font family*/ 
 	padding: 4px 0px 4px 0px; /*button padding*/
	
	font-size: 11px;									/*font size*/
	font-weight: bold;						/*bold text*/
	font-style: normal;								/*itallic text*/
	text-decoration: none;							/*underlined text*/
    
    
        border-top-width: medium;
        border-top-style: ridge;
        border-top-color: #D3D3DB;
    
        border-right-width: medium;
        border-right-style: ridge;
        border-right-color: #D3D3DB;
    
        border-bottom-width: medium;
        border-bottom-style: ridge;
        border-bottom-color: #D3D3DB;
    
        border-left-width: medium;
        border-left-style: ridge;
        border-left-color: #D3D3DB;
    
    	background-image: none;
      	
	color: #ffffff;


    
    
    
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:active
{
	background-color: #C0CFEB;
	color: #101B62;
   	text-decoration: none;							/*underlined text*/
   	font-weight: bold;								/*bold text*/
	font-style: italic;								/*itallic text*/
    
	
        border-top-width: medium;
        border-top-style: inset;
        border-top-color: #C0CFEB;
    
        border-right-width: medium;
        border-right-style: inset;
        border-right-color: #C0CFEB;
    
        border-bottom-width: medium;
        border-bottom-style: inset;
        border-bottom-color: #C0CFEB;
    
        border-left-width: medium;
        border-left-style: inset;
        border-left-color: #C0CFEB;
    

}
/* 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

{
/* I removed the styles here as they are susperseded by those above*/

}

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

 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%; 
}  

/* 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: #FFF;
	}
}