/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Vertical Selections List/Menu with fly out sub menus.  These definitions 
 * provide the generic base for all vert popout selection lists/menus.
 *
 * Structure:
 * ---------------------------------------
 * ul.VerticalPopoutList 
 *	 li - first level menu item (control)
 *		a -or- div - optional link selection
 *		ul - sub popout menu (container)
 *			li -  menu item (control)
 *				a -or- div  -  link
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

ul.VerticalPopoutList, 
ul.VerticalPopoutList ul
{
	width:				150px;
	margin:				0;
	padding:			0;

	font-family:		Arial,Sans-Serif;
	font-weight:		normal;
	font-size:			11px;

	-moz-box-shadow: 	2px 2px 5px 2px #334455;
	-webkit-box-shadow: 2px 2px 5px 2px #334455;
	box-shadow:			2px 2px 5px 2px #334455;

	/* Keeps the menu open for a split second in case user losses focus/moused off 
	   inadvertently.  Tried visibility and opacity but all seems to work the best
	   and gives a nice visual.
	 */
	transition:         all 0.33s linear;
	-moz-transition:    all 0.33s linear;
	-webkit-transition: all 0.33s linear;
	-o-transition:      all 0.33s linear;
}

ul.VerticalPopoutList li
{
	position:			relative;	/* allows sub menus absolute work relative to the menu item */

	margin:				0;
	padding:			0;
	background-color:	#6699cc;
	list-style:			none;

	-moz-box-shadow: 	inset 2px 0px 2px 0px #99ccff;
	-webkit-box-shadow: inset 2px 0px 2px 0px #99ccff;
	box-shadow:			inset 2px 0px 2px 0px #99ccff;
}
ul.VerticalPopoutList li:hover,
ul.VerticalPopoutList li:active, 
ul.VerticalPopoutList li:focus
{
	background-color: 	#336699;

	-moz-box-shadow: 	none;
	-webkit-box-shadow: none;
	box-shadow:			none;
}

ul.VerticalPopoutList li > a,
ul.VerticalPopoutList li > a:visited,
ul.VerticalPopoutList li > div:first-child
{
	display:			inline-block;
	padding:			5px 3px 5px 8px;
	color:				white;
	font-weight:		normal;
	text-decoration:	none;
	background-color:	transparent;
}
ul.VerticalPopoutList li a:hover, 
ul.VerticalPopoutList li a:active, 
ul.VerticalPopoutList li a:focus
{
	color:				#ffcc66;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S U B   M E N U */
/* NOTE ON HIDING/POSITIONING:
	Old way was to position the container way off the screen.  The problem with 
	this strategy or using display: block/none is that you can't transition the 
	popup.  So as soon as mouse off the menu disappears due to fact that display 
	block or left -5000 is immediate.  width and height can also be used but have
	the block's padding and margins to contend with so visibility seems to work
	the best.  Also set opacity to have ability to transition on that attribute.

	left:				-5000px;
	display:			none;
*/

ul.VerticalPopoutList li ul
{
	position: 			absolute;
	top:				-15px;
	left:				150px;
	width:				155px;

	visibility:			hidden;
	opacity:			0;
	z-index: 			1;
}
ul.VerticalPopoutList li:hover  ul,
ul.VerticalPopoutList li:active ul,
ul.VerticalPopoutList li:focus  ul
{
	visibility:			visible;
	opacity: 			1;
	z-index:			120;
}

ul.VerticalPopoutList li ul li
{
	background-color: 	#336699;
	-moz-box-shadow: 	inset 2px 0px 2px 0px #6699cc;
	-webkit-box-shadow: inset 2px 0px 2px 0px #6699cc;
	box-shadow:			inset 2px 0px 2px 0px #6699cc;
}
ul.VerticalPopoutList li ul li:hover,
ul.VerticalPopoutList li ul li:active, 
ul.VerticalPopoutList li ul li:focus
{
	background-color:	#225588;
	border-right:		1px solid #003366;
}

ul.VerticalPopoutList li ul li a,
ul.VerticalPopoutList li ul li a:visited,
ul.VerticalPopoutList li ul li div:first-child
{
	padding:			7px 3px 7px 10px;
	border:				none;
}

/*============================ End of Style Sheet ============================*/