/*	Section II:
	Menu holder DIV and FIRST LEVEL menu definitions
--------------------------------------------------------------------------------- */
/*	Definition of menu div: background, clearing, border, etc */
.menu 
{
	_margin-left: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-color: #FFFFFF;
}
/*	Override list item html predefinitions
---------------------------------------------------------------------------------
	Help: With vertical menu, this is the right place to define borders, background
	color, positioning and internal padding. For horizontal menus, class '.menu' will
	probably be the right one for margins and borders for menu, if you need the sub
	menus to go over the top menu border. */
.menu ul {
	background: #EEE url('ImgMenu/menu_back_dark.gif') repeat-x left top;
	margin:0;
	padding: 0;
	z-index:99;
	overflow:visible;
	height: 23px;
	_height: 22px;
	background-position-x:left; background-position-y:top; list-style-type:none; background-image:url('ImgMenu/menu_back_dark.gif'); background-repeat:repeat-x
}
/*	Redefine main menu items: height, cursor, margins, etc
---------------------------------------------------------------------------------
	Help: Some hacks need to be included here if you want the menu to look exactly in
	IE and FF, because margins and paddings somehow appear in IE even if they are not
	declared. Height hack is also A MUST in IE for vertical menu. */
.menu ul li {
	position: relative;
	cursor: pointer;
	display:block;
	margin:0;
	padding: 0;
	float: left;
	
}
/*	Menu item link: defines background image (left), position, color, decoration, weight
---------------------------------------------------------------------------------
	Help: The right place to define the look and feel of the link. You should define
	only the padding for the link, and not the height, except if you are about to use
	horizontal menu. For vertical, padding should be used, not height. */
.menu ul li a {
	color: #FFF;
	text-decoration:none;
	display:block;
	border-right: 1px dotted #fff;
	padding-top: 4px;
	padding-right: 14px;
	padding-bottom: 6px;
	padding-left: 6px;

	background-image:url('ImgMenu/menu_back_dark.gif');
	background-position: left top;
	background-repeat: repeat-x

}
/*	Menu item link: defines background image (right), padding of the text, cursor 
---------------------------------------------------------------------------------
	Help: This 'span' element is a sub element of 'li'. For rounded tabs it can
	include background images in the right corner and can often include padding
	and pointer. Padding is recommended to be held in this class and not in the
	'a' element defined above, ONLY for horizontal menus. */
.menu ul li a span {
}
/*	Hover states for links in the first level
---------------------------------------------------------------------------------
	Help: You can change the background pictures, background colors and the color
	of the text for the both 'a' and 'a span' elements. This is nice to have when
	you have rounded tabs, and need to change the background pictures only by
	shifting background image positions. If there are no backgorund pictures, you
	can only change color and background color. */
.menu ul li a:hover {
	color: #FFFFFF;
}
.menu ul li a:hover span {
}
/*	Hover states for links in the first level
---------------------------------------------------------------------------------
	Help: This is where you define any default icon you want to have in the menu.
	It can be a bullet, a star or something else, but it will apply on all top
	level menu elements. Later in the document you can override this with special
	classes if you need each element to have it's icon. There is also a class for
	a hover state on the link. */
.menu ul li a span span, .menu ul li a:hover span span {
}
.menu ul li a:hover span span {
}
/*	Menu hover and show options for Firefox ans Opera
---------------------------------------------------------------------------------
	Help: This is not to be touched :) The classes define hovering and hiding
	options for four menu sub levels. You can expand the elements (ul and li) if
	you need more than 4 sub levels. */
.menu ul li:hover ul ul, .menu ul li:hover ul ul ul, .menu ul li:hover ul ul ul ul, .menu ul li:hover ul ul ul ul ul {
	display:none;  
}
.menu ul li:hover ul, .menu ul ul li:hover ul, .menu ul ul ul li:hover ul, .menu ul ul ul ul li:hover ul, .menu ul ul ul ul ul li:hover ul {
	display:block;
}

/*	Section III:
	SECOND LEVEL menu list item definitions
---------------------------------------------------------------------------------
	Help: You can define borders, background color, positioning and internal
	padding for submenu. Either, you will inherit the top level definitions or you
	will redefine the new look here. */
.menu ul ul {
	display: none;
	position: absolute;
	margin: 0;
	padding: 1px 0 1px 0;
	left: 0;
	top: 23px;
	height: auto;
	font-size: 10px;
	background-color: #FFF;
	width: 115px;
}
.menu ul ul li {
	display: block;
	width: 115px !important;
	border-bottom: solid 1px #2C98CF;
}

/*	Redefine submenu links
---------------------------------------------------------------------------------
	Help: You can also inherit some of the look and feel from the parent classes,
	or you can redefine them here. */
.menu ul li ul li a {
	border: 0 none !important;

	background-image:url('ImgMenu/menu_back.gif');
	background-position: left top;
	background-repeat: repeat-x; padding-left:19px; padding-right:5px; padding-top:3px; padding-bottom:3px
}
.menu ul li ul li a:hover {
	background: #AA0000;
}
/*	Redefine submenu bullets
---------------------------------------------------------------------------------
	Help: Redefine the submenu bullet look and feel. If you have the span to be
	shown everywhere, ie like a bullet, define it here. */
.menu ul li ul li a span {
}

/*	Section IV:
	THIRD, FOURTH and FIFTH level menu list item definitions
---------------------------------------------------------------------------------
	Help: Descriptions for the third, fourth and fifth, or any other menu level
	are exact like fot the second level. So, this we will only give the titles
	to give you instructions where to look for help above. */
.menu ul ul ul, .menu ul ul ul ul, .menu ul ul ul ul ul ul {
	display: none;
	position: absolute;
	margin: 0;
	padding: 0;
	top: 0px;
	left: 116px;
}
/*	Redefine submenu links
---------------------------------------------------------------------------------*/
.menu ul li ul li ul li a, .menu ul li ul li ul li ul li a, .menu ul li ul li ul li ul li ul li a{
	background-image:url('ImgMenu/menu_back.gif');
	background-position: left top;
	background-repeat: repeat-x;
	padding-left:19px; padding-right:5px; padding-top:3px; padding-bottom:3px
		
}
.menu ul li ul li ul li a:hover, .menu ul li ul li ul li ul li a:hover, .menu ul li ul li ul li ul li ul li a:hover {
	background: #AA0000;
}
/*	Redefine submenu bullets
---------------------------------------------------------------------------------*/
.menu ul li ul li ul li a span, .menu ul li ul li ul li ul li a span, .menu ul li ul li ul li ul li ul li a span {
}

/*	Section IV:
	Outstanding issues - special widths, heights
---------------------------------------------------------------------------------
	Help: When creating a horizontal menu, this will be the place to define any
	special tab width, because browsers can't properly stretch the tab and fit
	the text inside. So, in order not to have the tab text break or to have it
	100% wide (as the browsers render the 'block' by default, you need to override
	any default tab widths here.*/

/*	Redefine main menu item widths when needed
---------------------------------------------------------------------------------*/

/*	Redefine main menu sub item holder
---------------------------------------------------------------------------------
	Help: You can apply and redefine the submenu widths and heights for a submenu
	if there is aneed for it, which is probably going to happen in the horizontal
	menu */

/*	Redefine main menu sub item holder, applies border, height and width 
---------------------------------------------------------------------------------*/

/*	Section V:
	Special tabs definitions
---------------------------------------------------------------------------------
	Help: If there is a need for a special tab, such as 'Help' or similar, define
	it in this section. These tabs are often done with same image but shifted and
	with different either bullet, or background color or text color. */

/*	Section VI:
	Icons in navigation
---------------------------------------------------------------------------------
	Help: If there is a need for an icon in the navigation, this is the place you
	should define it. There are classes for any icon you need, and in order to
	be exactly viewd by all browser, you need to make a subclass for each icon that
	goes nested in the 'a span' element. Note that icon is also a span element and
	needs to override any default span images defined above with '!mportant'
	attribute. */

/*	Section VII:
	Arrow icon for submenus
---------------------------------------------------------------------------------
	Help: This is the link definition for the arrow image that shows if there is
	a submenu in the link you are pointing at. '!important' attribute is A MUST
	to override every other global 'span' attributes. */
.menu ul li a .icon {
	width: 10px;
	height: 18px;
	float: left;
	cursor: pointer;
	margin-right: 5px;
	_margin-right: 2px;
	background-image: url('ImgMenu/menu_ball_off.gif');
	background-repeat: no-repeat;
	background-position: right 2px
}
.menu ul li a:hover .icon {
	background: url('ImgMenu/menu_ball_on.gif') no-repeat right 2px;
}

a .arrow {
	display: block !important;
	height: 9px !important;
	width: 5px !important;
	background: url('ImgMenu/menu_arrow.gif') no-repeat left 4px !important;
	float: right !important;
	margin: 0 !important
}
a:hover .arrow {
	background: url('ImgMenu/menu_arrow.gif') no-repeat -5px 4px !important;
}