/* CSS VERTICLE POPUP MENU :: Thanks to TANFA http://www.tanfa.co.uk/ */

	/* Remove Padding, Margins, Bullets, set menu width, and styles, and heading to suit */
#menu {
	width: 450px; /* horizontal set size 12em; set width of menu */
	color: inherit;
	float: left; /* remove float for vertical */
} 

#menu ul { /* remove bullets and list indents */
	list-style: none;
	margin: 0;
	padding: 0;
	float: left; /* remove float and width for vertical */
}

#menu ul li{ /* remove bullets and list indents */
	margin: 0;
	padding: 0;
	padding-right:25px;
	float: left; /* remove float and width for vertical */
}
#menu ul ul {
	background-color:#ffffff;
	border-right:1px #cbcbcb solid;
	border-bottom:1px #cbcbcb solid;
	width:120px;
}
	
#menu ul ul ul{
	background-color:#e1e1e1;
	border-right:1px #cbcbcb solid;
	border-bottom:1px #cbcbcb solid;
}

/* style, color and size links and headings to suit */
#menu a {
	display: block;
	margin: 0px 0px 0px 3px; /* add margin-right to put spacing between them */
	padding-bottom:3px;
	text-decoration: none;
}

#menu ul ul a {
	display: block;
	margin: 0px 0px 0px 3px; /* add margin-right to put spacing between them */
	padding-bottom:3px;
	text-decoration: none;
	font-size:12px;
}

	/* End padding, margins, bullets, menu width, styles, headings */

        /* STYLING FOR EXPAND */

a.x, a.x:visited {
        font-weight: inherit;
        border: inherit;
        color: inherit;
        background-color: inherit;
        background-image: url("images/expand3.gif");
        background-repeat: no-repeat;
        background-position: 100% 100%;
}

a.x:hover {
        font-weight: bold;
        border: none;
        color: #a00;
	background-color: inherit;
}

a.x:active {
        color: #060;
        border: none;
        background-color: #ccc;
}
        /* END STYLING FOR EXPAND */




	/* POSITIONING */

#menu li {
	/* make the list elements a containing block for the nested lists */
	position: relative;
} 

#menu ul ul {
	position: absolute;
	z-index: 500;
	top: auto;
	display: none;
}

#menu ul ul ul {
	position: absolute;
	top: 0;
	left: 70px; /* to position them to the right of their containing block */
	width: auto; /* width is based on the containing block */
	display: none;
}

	/* END POSITIONING */

	/* HIDING AND REVEALING USING HOVER */

div#menu h2:hover {
	color: inherit;
	background: #000 no-repeat -999px -9999px;
}

div#menu li:hover {
	cursor: pointer;
	z-index: 100;
}

div#menu ul ul, div#menu li:hover ul ul, div#menu ul ul ul, div#menu li:hover ul ul ul {
	display: none;
}

div#menu ul ul ul {
	background-position: 0 0;
}

div#menu li:hover ul, div#menu li li:hover ul {
	display: block;
}


	/* END HIDING AND REVEALING */

/* END POPUP MENU */