/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * ExpandableList elements provide the visual control for expanding/collapsing 
 * sub container blocks based on an html checkbox/radio input control element.
 * This differs from the similarly structured ExpandableInputList which shows 
 * the input control and has different visual mouse over behavior.
 *
 * Hide the radio/checkbox control.  The label (which provides a clickable layer)
 * is then positioned to the left and has the background image.  Because the 
 * label follows the input the background label's image can be controlled via
 * the ":checked" psuedo.  The actual list item title is then wrapped within 
 * a link and is either a jumpto point (if no href), or a link.  Browsers that 
 * don't support newer selectors (like IE 7 & 8 (start with a rule like 
 * ":not(#foo)") see:
 * http://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/
 *
 * Structure:
 * ---------------------------------------
 * ul.ExpandableList
 *		li
 *			- if sub selections -
 *			input type="checkbox" id="xyz"
 *			label for="xyz"
 *				a - if href then link - title is TEXT.
 *				div - if no href
 *
 *			- if NO sub selections -
 *			a - if href then link - title is TEXT.
 *			div - if no href
 *
 *			a.JumpTo - if SELECTION/NAME
 *
 *			h# - if SELECTIONS/TITLE
 *			ul
 *				li
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.ExpandableList
{
	margin: 			0px;
	padding: 			0px;
	width: 				100%;
	list-style-type: 	none;
}

.ExpandableList li 
{
	margin:				0;
	padding:			1px 0px 0px 1px;
	position:			relative;	/* allows sub menus absolute work relative to the menu item */
}


.ExpandableList li > a,
.ExpandableList li > div,
.ExpandableList li > label
{
	background: 		transparent none no-repeat left 5px center;
	padding: 			9px 3px 7px 27px;
	margin-left:		2px;
}
.ExpandableList li > div
{
	color:				#777777 !important;
}
.ExpandableList li > .Help
{
	width:				24px;
	height:				24px;	/* image isn't as tall - just padding */
	padding: 			5px 0 0 0;
}
.ExpandableList li > div,
.ExpandableList li > a
{
	background-image:	url('../image/icon/16/list_box-gray.png');
	display: 			block;
	font-size: 			1em;
	color: 				#114477;
}
.ExpandableList li > a.JumpTo
{
	display:			none;
} 

/* Was using a:not(.Help) but ie 7&8 doesn't like it so removed */
.ExpandableList li > a:hover,
.ExpandableList li > a:active,
.ExpandableList li > a:focus,
.ExpandableList li label:hover
{
	color:				#FFCC66;
	background-color:	#336699;

	-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;
}


.ExpandableList li > label
{
	display:			block;
	cursor:				pointer;
}
.ExpandableList li label > *
{
	color:				#006699;
	overflow:			hidden;
}
.ExpandableList li label:hover > *
{
	color:				white;
}
.ExpandableList li label:hover > a:hover
{
	color:				#FFCC66;
}

.ExpandableList li > input[type='checkbox'],
.ExpandableList li > input[type='radio']
{
	/* 
		defs to make input keyboard navigatable.  Specifying a floated size also
		provides padding for the label/control image.  If no size specified then
		some browsers will not provide keyboard focus on the element.  If no 
		focus then the below can simply be handed via: display:none;
	*/
	float:				right;
	width:				1px;
	height:				1px;
	opacity:			0;
}
.ExpandableList li > input + label
{
	background-image: 	url('../image/icon/16/minus_box-gray.png');
}
.ExpandableList li > input[type='checkbox']:not(:checked) + label
{
	background-image:	url('../image/icon/16/plus_box-gray.png');
}
.ExpandableList li > input[type='radio']:not(:checked) + label
{
	background-image:	url('../image/icon/16/radio-gray.png');
}
.ExpandableList li > input[type='radio']:checked + label
{
	background-image:	url('../image/icon/16/radio_checked-gray.png');
}


.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 > a,
.ExpandableList.RightControl li > div,
.ExpandableList.RightControl li > label
{
	padding-left:		5px;
}
.ExpandableList.RightControl li > input + label
{
	padding-right: 		25px;
	background-image:	url('../image/icon/16/cross_3d-circle-red.png');
	background-position: right 4px center;
}
.ExpandableList.RightControl li > input:not(:checked) + label
{
	background-image: 	url('../image/icon/16/plus_circle-blue.png');
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S U B   S E L E C T I O N S  */
.ExpandableList ul
{
	padding-left: 		20px;
	list-style-type: 	none;
}

:not(#foo) .ExpandableList li input ~ ul,
:not(#foo) .ExpandableList li input ~ ol
{ 
	display: 			none; 
}

:not(#foo) .ExpandableList li input:checked ~ ul, 
:not(#foo) .ExpandableList li input:checked ~ ol 
{ 
	display: 			block; 
}




/*
.ExpandableList li > input:not(:checked) ~ ul li
{
opacitiy: 0;
height: 0;
display: block;
	-webkit-transition: all 0.8s ease;
	   -moz-transition: all 0.8s ease;
	     -o-transition: all 0.8s ease;
	    -ms-transition: all 0.8s ease;
	        transition: all 0.8s ease;
}
.ExpandableList li > input:checked ~ ul li
{
width: 100%;
height: 100%;
opacitiy: 1;
background-color: red;
}
*/

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