﻿/***********************************************************************************
************************************************************************************
**                                                                                ** 
** The elements in this style sheet define a standard CSS-based menu system.      **
** It is not normally expected that the elements in this sheet should need        **
** to be changed between sites, since the definition here is for the behaviour,   **
** not the site-related styling.                                                  **
**                                                                                **
** Normally, this sheet will be @Imported from a separate stylesheet that         **
** provides site-specific sizing and colours.                                     **
**                                                                                **
** Copyright (C) D Biggins March 2008.                                            **
**                                                                                **
************************************************************************************
************************************************************************************/

/* 
	All items in a menu are to have only the margins and padding allocated by 
	this system.
*/
.Menu *, 
.leftMenu * 
{
	margin:0;
	padding:0;
	display:block;
	position:relative;
	float:left;
}


/*
	A horizontal menu on the page is to be 100% of its available width 
	as a block;  float it left, and make the position relative so that 
	its children can be positioned. 
*/
.Menu
{
	width:100%;
}

/* 	
	A left hand menu on the page is to be fixed width as a block, floted left 
*/
.leftMenu
{
	float:left;
	margin-right:1em;
}

/* 	
	or a vertical menu item in a horizontal menu
	is to have 
*/
.Menu ul, 
.Menu li,
.vMenu ul,
.vMenu li
{
	list-style:none;
}

/* 	
	The link in a menu item is to have no text decoration
	It must display as a block in order to fill its space properly
	It must have a background in order to to display as a block in IE 
*/
.Menu a, .vMenu a 
{
	text-decoration:none;
	position:relative;
	z-index:501;
}


/*	
	Where a menu contains a vMenu, use position:absolute to pull it out 
	of the flow of its parent. 
*/
.Menu .vMenu
{
	position:absolute;
	z-index:500;
}

/*	
	A vMenu in a vMenu in a horizontal menu should not behave as above 
*/
.vMenu .vMenu, 
.Menu .vMenu .vMenu 
{
	position:relative;
}


.Menu .vMenu:hover ul, 
.Menu .vMenu_hover ul,
.Menu .vMenu:hover .vMenu, 
.Menu .vMenu_hover .vMenu,
.vMenu:hover ul, 
.vMenu_hover ul
{
	display:block;
	position:relative; 
}

.Menu .vMenu .vMenu:hover ul,
.Menu .vMenu .vMenu_hover ul,
.vMenu .vMenu:hover ul,
.vMenu .vMenu_hover ul,
.vMenu .vMenu .vMenu:hover ul,
.vMenu .vMenu .vMenu_hover ul
{
	display:block;
	position:absolute;
	z-index:510;
}


/* 
	The contents of a vertical menu nested in a vertical menu in a 
	horizontal should be hidden 
*/
.Menu .vMenu ul, 
.vMenu .vMenu ul,
.Menu .vMenu .vMenu ul, 
.vMenu .vMenu .vMenu ul
{
	display:none;
}


