/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Horizontal tabbed Menu with a pull down columns panel (mega menu).  The tabs 
 * are based on the HorizontalTabList with the ColumnsPanel being 
 * based on the VerticalPopoutList css definitions.
 * 
 * This file contains the specific top tab and sub menu css definition overrides
 * and supplements.  The main css definitions are based on/contained within:
 * HorizontalTabList.css and VerticalPopoutList.css.  See 
 * the XSLT code that creates the approp HTML menu structure.   Tab menu item 
 * IDs are set via the menu XML NAME element and the XSLT code.
 *
 * Structure:
 * ---------------------------------------
 * ul class="HorizontalMenu HorizontalTabList"
 *	 li id="xxxxMenu" 
 *		a
 *		div class="ColumnsPanelList" - sub dropdown menu container
 *			table
 *				tr
 * 					td - first column
 * 						ul
 *							li -  
 *								a -or- div  
 *								ul
 *									li
 * 										a -or- div
 *					td - second column
 * 						ul . . .
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

ul.HorizontalMenu.HorizontalTabList
{
}

ul.HorizontalMenu.HorizontalTabList > li
{
	min-width:			100px;
}

ul.HorizontalMenu.HorizontalTabList > li > input[type='checkbox'],
ul.HorizontalMenu.HorizontalTabList > li > input[type='radio']
{
	position:          absolute;
	width:             0px;
	height:            0px;
	opacity:           0;
	z-index:           1;
}
ul.HorizontalMenu.HorizontalTabList > li > input + label
{
	padding-right:		25px;
	background-image: 	url('../image/icon/16/cross_3d-circle-red.png');
	background-position: right 4px center;
	background-repeat: no-repeat;
}
ul.HorizontalMenu.HorizontalTabList > li > input[type='checkbox']:not(:checked) + label,
ul.HorizontalMenu.HorizontalTabList > li > input[type='radio']:not(:checked) + label
{
	background-image: 	url('../image/icon/16/plus_circle-blue.png');
}

ul.HorizontalMenu.HorizontalTabList > li.On > input + label
{
	padding-left:		7px;
}


/*

.ExpandableList.TriangleControl li > input + label
{
	padding-left:		25px;
	padding-right: 		5px;
	background-image:	url('../image/icon/16/triangle_down-gray.png');
	background-position: left 4px center;
}
.ExpandableList.TriangleControl li > input:not(:checked) + label
{
	background-image:	url('../image/icon/16/triangle_right-gray.png');
}


.ExpandableList.RightControl li > input + label
{
	padding-left:		5px;
	padding-right: 		25px;
	background-image: 	url('../image/icon/16/box_minus-gray.png');
	background-position: right 9px;
}
.ExpandableList.RightControl li > input:not(:checked) + label
{
	background-image: 	url('../image/icon/16/box_plus-gray_padded.png');
}

*/




ul.HorizontalMenu.HorizontalTabList > li > input + label
{
	border-bottom: 			1px solid transparent;
}
ul.HorizontalMenu.HorizontalTabList > li > input:checked + label
{
	background-color: 		#003366;
	border-bottom: 			1px solid transparent;
	color: 					white;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S U B   M E N U */
/*
	Change behavior to use abs left because some Apple i* Safari couldn't handle
	visibility properly.  display:block works but can't do any exit transitions 
	on it - so hovers close immediately where a left can at least give a slide
	up/down/out	transition that allows a mouse over to reactivate.
*/
ul.HorizontalMenu.HorizontalTabList li > .ColumnsPanelList,
ul.HorizontalMenu.HorizontalTabList li > input:not(checked) ~ .ColumnsPanelList 
{
	position:			absolute;
	top:				33px;
	left:				-20000px;
	opacity: 			0;
	z-index: 			-1;

	/* 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.  When most ipad users are on an updated OS then
	   can look at using visibility again and use the transitions below:
	transition:         all 0.2s linear;
	-moz-transition:    all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition:      all 0.2s linear;

	slow then fast - rocket take off.
	-webkit-transition: all 3s cubic-bezier(.98,0,1,.28);
	-moz-transition: all 3s cubic-bezier(.98,0,1,.28);
	-o-transition: all 3s cubic-bezier(.98,0,1,.28);
	transition: all 3s cubic-bezier(.98,0,1,.28);

	fast then slow - allows abs far neg left position to have fade in effect:
	-webkit-transition: opacity 1.0s cubic-bezier(0, 0.5,  0.0, 1);
	-moz-transition:	opacity 1.0s cubic-bezier(0, 0.5,  0.0, 1);
	-o-transition: 		opacity 1.0s cubic-bezier(0, 0.5,  0.0, 1);
	-ms-transition: 	opacity 1.0s cubic-bezier(0, 0.5,  0.0, 1);
	transition:			opacity 1.0s cubic-bezier(0, 0.5,  0.0, 1);

	transition-delay:         0.1s;
	-moz-transition-delay:    0.1s;
	-webkit-transition-delay: 0.1s;
	-o-transition-delay:      0.1s;

	transition:         left 0.2s ease-out 0.1s;
	-moz-transition:    left 0.2s ease-out 0.1s;
	-webkit-transition: left 0.2s ease-out 0.1s;
	-o-transition:      left 0.2s ease-out 0.1s;
	*/
	transition:         opacity 0.2s linear;
	-moz-transition:    opacity 0.2s linear;
	-webkit-transition: opacity 0.2s linear;
	-o-transition:      opacity 0.2s linear;
}


/* if non hover 
ul.HorizontalMenu.HorizontalTabList > li:hover > input:checked ~ .ColumnsPanelList  
*/
ul.HorizontalMenu.HorizontalTabList > li:not(.Sticky):hover > .ColumnsPanelList,
ul.HorizontalMenu.HorizontalTabList > li > input:checked ~ .ColumnsPanelList  
{
	left: 				0;
	opacity: 			0.95;
	z-index: 			100;
}

ul.HorizontalMenu.HorizontalTabList > li:first-child > .ColumnsPanelList
{
}
/*
float: left;
width: 0;
height: 0;
overflow: hidden;
float: left;
width: 100%;
height: auto;
overflow: visible;
*/

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