/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * MegaMenu/Panel with Columns selection list CSS definitions for the IBIS-PH 
 * web site.  The panel's selections list is NOT based on any existing CSS 
 * definitions but does relies on the standard UL/LI mechanism.
 *
 * Structure:
 * ---------------------------------------
 *	div class="ColumnsPanelList" 
 *		[* class="Header"]
 *		table
 *			[thead, tr, td]
 *			[tfoot, tr, td]
			tbody
 *			tr
 * 				td - first column
 * 					ul
 *						li
 *							a -or- div
 *							ul
 *								li
 * 									a
 *				td - second column
 * 					ul . . .
 *		[* class="Footer"]
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.ColumnsPanel > label,
.ColumnsPanel > input
{
	display: 			none;
}

.ColumnsPanelList
{
	/* #F2EDE8 nice light: F7F2ED, light brown CEC2B3, #8B8378 gray brown, yellow - looks okay FFD85B, light blue okay D1E8FF 
	background:			#336699 url('../image/columnspanel-background.png') no-repeat right bottom;
*/
	position: 			relative;
	background-color:	#003366;
	width: 				99%;
	padding: 			5px 0px 25px 0;
	margin:				0;
	min-height:			50px;
	overflow: 			visible;

	z-index: 			110;

	-moz-box-shadow: 	3px 3px 5px 0px #464135;
	-webkit-box-shadow: 3px 3px 5px 0px #464135;
	box-shadow: 		3px 3px 5px 0px #464135;
}

.ColumnsPanelList a
{
	text-decoration:	none;
}

.ColumnsPanelList li
{
	list-style:			none;
}

.ColumnsPanelList .Description
{
	display: 			none;	/* turned off by default - makes things messy */
	color:				#dddddd;
	padding:			0 10px 0 6px;
}

.ColumnsPanelList table tr td
{
	width: 				5%;
	vertical-align:		top !important;
	border-right:		1px dotted #6699cc;
}
.ColumnsPanelList table tr td:last-child
{
	border-right:		none;
}

.ColumnsPanelList table tr td h3,
.ColumnsPanelList table tr td ul li > div:first-child
{
    margin: 			0 5px 0 2px;
	padding:			3px 0 2px 5px;
	color:				white;
	font-size:			0.9em;
	font-weight:		normal;
	background-color:	#225588;
	border: 			1px solid #336699;
}
.ColumnsPanelList table tr td h3
{
	padding:			5px 0 4px 5px;
	font-size:			1em;
	border: 			none;
}

.ColumnsPanelList table tr td ul
{
	padding:			0px 3px 5px 5px;
}
/*
.ColumnsPanelList table tr td ul li > div:first-child
{
	width:				90%;
	padding:			6px 3px 5px 6px;
	color: 				#eee;
	font-weight:		normal;
	border-bottom:		1px solid #6699aa;
}
*/
.ColumnsPanelList table tr td ul li > a
{
	display:			block;
	width:				90%;
	padding:			6px 3px 5px 6px;
	color: 				white;
	font-size:			0.8em;
	font-weight:		normal;
}
.ColumnsPanelList table tr td ul li a:hover, 
.ColumnsPanelList table tr td ul li a:active, 
.ColumnsPanelList table tr td ul li a:focus
{
	background-color:	#114477;

	-moz-border-radius:	5px 5px 5px 5px;  
	-webkit-border-radius: 5px 5px 5px 5px;  
	border-radius:		5px 5px 5px 5px;  

	-moz-box-shadow: 	inset 1px 1px 2px 0px #F2E4D5;
	-webkit-box-shadow: inset 1px 1px 2px 0px #F2E4D5;
	box-shadow:			inset 1px 1px 2px 0px #F2E4D5;
}

/* clear the previous li's that are floated - otherwise the link hover overlaps 
	see: http://css-tricks.com/all-about-floats/
 */
.ColumnsPanelList table tr td ul li ul:after 
{ 
	content: 			"."; 
	visibility: 		hidden; 
	height: 			0; 
	clear: 				both;
}

/* float the li's left to get the stacked inline effect */
.ColumnsPanelList table tr td ul li ul li
{
	display: 			inline-block;
	padding-left:		0px;
	margin-right:		0.5em;
	color:				white;
}

.ColumnsPanelList table tr td ul li ul li > a
{
	font-size: 			0.9em;
}
.ColumnsPanelList table tr td ul li ul li > a,
.ColumnsPanelList table tr td ul li ul li > div:first-child
{
	position:			relative;
	width:				auto;
	padding:			2px 8px 2px 1em; 	/* have to have left padding so large text justifies */
	font-size:			0.7em;
	font-weight:		normal;
}
.ColumnsPanelList table tr td ul li ul li > a:before,
.ColumnsPanelList table tr td ul li ul li > div:first-child:before
{
	position:			absolute;
	left:				7px;		/* can do margin-left but left justify is error prone */
	font-size: 			0.9em;
	content:			"\2022"; 	/* small dot: 2022  box: ffed checkbox: 2713 star: \22C6\A0   triangle: 25BA diamond: \2666 open circle: \00ba */
}

.ColumnsPanelList table tr td ul li ul li a:hover,
.ColumnsPanelList table tr td ul li ul li a:active,
.ColumnsPanelList table tr td ul li ul li a:focus
{
/*
	-moz-border-radius:	3px 3px 3px 3px;  
	-webkit-border-radius: 3px 3px 3px 3px;  
	border-radius:		3px 3px 3px 3px;  
*/
}
/*============================ End of Style Sheet ============================*/