#access {
	background-color : #000;
	height: 45px;
}
#access * {
	background : inherit;
	margin: 0;
	padding: 0;
}
#access ul {
	list-style: none;
}
#access ul ul { /* IT'S A SUB-MENU, SO HIDE IT (BARRING A HOVER EVENT) */
	display : none;
}
#access ul, #access a { /* IN EACH CASE, THESE NODES MUST FILL THEIR PARENT <li> NODES */
	width : 100%;
}
#access li {
	position: relative;
	width: 230px; /* SEE BELOW - TOP LEVEL <li> WIDTH CHANGED TO "auto" */
}
#access a {
	color : #aaa;
	display : inline-block;
	line-height : 39px;
	padding : 0 0 0 10px;
	text-decoration : none; /* NO UNDERLINING OF <a> TAG TEXT */
	overflow: hidden;
	white-space: nowrap;
}
#access ul.main >li > a > span { /* APPLIES TO CHARACTER ENTITY REFERENCES IN THE TOP-LEVEL <span> TAGS */
	line-height: 1em;
}
#access a > span:first-child { /* APPLIES TO CHARACTER ENTITY REFERENCES IN <span> TAGS, AS WELL AS CHEVRONS IN <span> TAGS */
	font-size: larger;
	color: green;
	padding: 0 1px;
}

/* + + + + + + + + + + + + + + + + + + + + + + + + +  */
/* SPECIAL TREATMENT FOR TOP LEVEL <li> AND <a> NODES */
/* + + + + + + + + + + + + + + + + + + + + + + + + +  */
#access > ul {
	/* white-space: nowrap;
	overflow-x: hidden; */ /* FAIL!!! */
}
#access ul.menu > li { /* ALL TOP LEVEL <li> NODES ARE DISPLAYED FROM LEFT TO RIGHT, W/OUT HAVING A FIXED WIDTH */
	float : left;
	width: auto;
}
#access ul.menu > li > a { /* WE PAD THE TOP LEVEL <a> TAGS BOTH LEFT AND RIGHT */
	padding: 0 15px;
}

/* + + + + + + + + + + + + + + + + + + + + + + + + +  */
/* WE ENFORCE SOME SPECIAL TREATMENT FOR SUB-MENUs(0) */
/* + + + + + + + + + + + + + + + + + + + + + + + + +  */
#access ul > li > ul.sub-menu { /* THE FIRST SUB-MENUS NESTED WITHIN THE MAIN FLOATING LINKS ARE POSITIONED **BELOW** NOT TO THE RIGHT!!! */
	box-shadow : 0 3px 3px rgba(255, 0, 0, 0.2); /* THIS SEEMS TO HAVE NO EFFECT, IN A <ul>, A <li>, OR AN <a> */
	position : absolute;
	z-index : 9999;
	top : 39px;
	left : 0;
}
#access .sub-menu a > span.offspring {
	color: red;
	display: none;
	float:right;
}
/* + + + + + + + + + + + + + + + + + + + + + + + + +  */
/*                      HOVER!!!                      */
/* + + + + + + + + + + + + + + + + + + + + + + + + +  */
#access ul li:hover > ul {
	display : block;
}
#access li:hover > a { /* HIGHLIGHT ME! */
	color : #fff;
}
#access ul.sub-menu li:hover > a > span:last-child { 	/* DISPLAY THE ">>" TO AID THE USER TO MOUSE ACROSS ON THE SAME LINE. */
														/* NB: AS SPECIFIED AND CODED IN: VPC_Page:recursivelyDisplayTreeNumberThree,
														/* THIS FEATURE APPLIES ONLY FOR <li> NODES THAT POSSESS A CHILD <ul> NODE */
	display : inline-block;
}
#access ul.sub-menu li:hover > ul { /* EACH AND EVERY SUB-SUB APPREARS IMMEDIATELY TO THE RIGHT OF ITS PARENT <li> NODE */
	display: block;
	position: absolute;
	left: 230px;
	top: 0;
}