@charset "utf-8";

/* CSS Document */



<style type="text/css">



/* ================================================================ 

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.

=================================================================== */

#nav_spacer{width:1px; height:46px;}

/* 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 {position:relative;height:44px;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; padding-left:20px; text-align:left; padding-top: 2px;}



/* Set up the link size, color and borders: not used in this site, graphic buttons not text 

#pmenu a, #pmenu a:visited {display:block;width:120px; font-size:11px; color:#fff; height:25px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #000; border-width:1px 0 1px 1px;}

*/

/* Set up the sub level borders : not used in this site, no borders on drop down

#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}

#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}

*/

/* Set up the list items */

#pmenu li {float:left;  padding-top:0px; list-style-type:none; list-style-image:none;}





/* For Non-IE browsers and IE7 */

#pmenu li:hover {position:relative;}





/* 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; margin-top:22px; padding:0px;}



/* 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; padding-top:0px; padding-bottom:0px; background-color:#333333; width:200px; list-style:none; list-style-image:none;}



/* Position the first sub level beneath the top level liinks */

#pmenu  li:hover  ul {left:12px; top:24px;}



/* Position the first sub level beneath the top level liinks */

#pmenu  li:hover  ul li{

	float:none;

	list-style:none;

	list-style-image:none;

	width:182px;

	padding:6px 8px 6px 10px;

	border-bottom:1px solid #444444; ;

}



/* format the hover for the first level drop down */

#pmenu  li:hover  ul li:hover{background-color:#111111; background-image:none;}



/* Format the text of the link */

#pmenu  li:hover  ul li a{ color:#FFFFFF; text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:11px;}

/* get rid of the table */

#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}



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



/* For accessibility of the top level menu when tabbing */

#pmenu li a:active, #pmenu li a:focus {color:#ffffff;}



/* Set up the pointers for the sub level indication */

#pmenu li.fly {background:#444444;}

#pmenu li.drop {

	background-image:url(../images/main_nav/drop_arrow.gif);

	background-position:right;

	background-repeat:no-repeat;

}



/* format 2nd tier drop down, third level of navigation */



#pmenu  li:hover  ul li:hover  ul{

	left:200px; top:-23px;background-color:#111111; padding:0px; border-top:1px solid #444444;}



/* Position 2nd tier drop down, third level of navigation  */

#pmenu  li:hover  ul li:hover  ul li {

	float:none;

	list-style:none;

	list-style-image:none;

	width:188px;

	padding:6px 2px 6px 10px;

}



/* format the hover for the 2nd tier drop down, third level of navigation  */

#pmenu  li:hover  ul li:hover  ul li:hover{

	background-color:#444444;

}



/* format the text link  of the 2nd tier drop down, third level of navigation  */

#pmenu  li:hover  ul li:hover  ul li a{ color:#FFFFFF; text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:11px;}





/* 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; margin-top:20px; margin-left:1px; padding:0px; padding-top:10px; padding-bottom:5px;}



/* keep the third level+ hidden when you hover on first level link */

#pmenu li 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:-0px;  top:20px; lef\t:-1px;  to\p:14px; width:188px; background-color:#333333; 

}



#pmenu li a:hover ul li{

		border-top: 1px solid #c1272d;

		margin:0px;

		padding:0px; /* Top & bottom 5px, left indent 10px, right-indent 15px for drop arrow area*/



}

#pmenu li a:hover ul li:hover{

		background-color:#111111;

}





#pmenu li a:hover ul li a{

		width:176px; padding:2px 5px 2px 6px;

}



#pmenu li a:hover ul li a:hover{

	background-image:none;

}





/* 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:-21px; left:186px;background-color:#111111; padding:0px;

}



#pmenu li a:hover ul li ul li a:hover{

		background-color:#000000;

}







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



</style>