/*================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/simple_vertical.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
===================================================================
Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below*/
#menu_container
{
	margin: 25px 0 100px 15px;
	position: relative;
	width: 735px;
	height: 25px;
	z-index: 100;
}
/*Get rid of the margin, padding and bullets in the unordered lists*/
#pmenu, #pmenu UL
{
	padding: 0;
	margin: 0;
	list-style-type: none;
}
/*Set up the link size, color and borders*/
#pmenu A, #pmenu A:visited
{
	display: block;
	width: 120px;
	font-size: small;
	color: #F8F3D7;
	height: 25px;
	line-height: 24px;
	text-decoration: none;
	text-indent: 5px;
	border-width: 1px 0 1px 1px;
}
/*Set up the sub level borders*/
#pmenu LI UL LI A, #pmenu LI UL LI A:visited
{
	border-width: 0 1px 1px;
}
#pmenu LI A.enclose, #pmenu LI A.enclose:visited
{
	border-width: 1px;
}
/*Set up the list items*/
#pmenu LI
{
	float: left;
	background-color: #B97540;
}
/*For Non-IE browsers and IE7*/
#pmenu LI:hover
{
	position: relative;
}
/*Make the hovered list color persist*/
#pmenu LI:hover>A
{
	background-color: #33170D;
	color: #F8F3D7;
}
/*Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work*/
#pmenu LI UL
{
	display: none;
}
/*For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs*/
#pmenu LI:hover>UL
{
	display: block;
	position: absolute;
	top: -11px;
	left: 90px;
	padding: 10px 30px 30px;
	background: transparent url(transparent.gif);
	width: 120px;
}
/*Position the first sub level beneath the top level liinks*/
#pmenu>LI:hover>UL
{
	left: -30px;
	top: 26px;
}
/*get rid of the table*/
#pmenu TABLE
{
	position: absolute;
	border-collapse: collapse;
	top: 0;
	left: 0;
	z-index: 100;
	font-size: small;
}
/*For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels*/
* HTML #pmenu LI A:hover
{
	position: relative;
	background-color: #33170D;
	color: #F8F3D7;
}
/*For accessibility of the top level menu when tabbing*/
#pmenu LI A:active, #pmenu LI A:focus
{
	background-color: #33170D;
	color: #F8F3D7;
}
/*Set up the pointers for the sub level indication*/
#pmenu LI.fly
{
	background: #B97540 url(http://www.omstudio.ca/images/fly.gif) no-repeat right center;
}
#pmenu LI.drop
{
	background: #B97540 url(http://www.omstudio.ca/images/drop.gif) no-repeat right center;
}
/*This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear
change the drop down levels from display:none; to visibility:hidden;*/
* HTML #pmenu LI UL
{
	visibility: hidden;
	display: block;
	position: absolute;
	top: -11px;
	left: 80px;
	padding: 10px 30px 30px;
	background: transparent url(transparent.gif);
}
/*keep the third level+ hidden when you hover on first level link*/
#pmenu LI A:hover UL UL
{
	visibility: hidden;
}
/*keep the fourth level+ hidden when you hover on second level link*/
#pmenu LI A:hover UL A:hover UL UL
{
	visibility: hidden;
}
/*keep the fifth level hidden when you hover on third level link*/
#pmenu LI A:hover UL A:hover UL A:hover UL UL
{
	visibility: hidden;
}
/*keep the sixth level hidden when you hover on fourth level link*/
#pmenu LI A:hover UL A:hover UL A:hover UL A:hover UL UL
{
	visibility: hidden;
}
/*make the second level visible when hover on first level link and position it*/
#pmenu LI A:hover UL
{
	visibility: visible;
	left: -30px;
	top: 14px;
	left: -31px;
	t\op: 15px;
}
/*make the third level visible when you hover over second level link and position it and all further levels*/
#pmenu LI A:hover UL A:hover UL
{
	visibility: visible;
	top: -11px;
	left: 80px;
}
/*make the fourth level visible when you hover over third level link*/
#pmenu LI A:hover UL A:hover UL A:hover UL
{
	visibility: visible;
}
/*make the fifth level visible when you hover over fourth level link*/
#pmenu LI A:hover UL A:hover UL A:hover UL A:hover UL
{
	visibility: visible;
}
/*make the sixth level visible when you hover over fifth level link*/
#pmenu LI A:hover UL A:hover UL A:hover UL A:hover UL A:hover UL
{
	visibility: visible;
}
/*If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like*/