/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * ExpandableInputList provides a visible radio/checkbox input expansion control
 * of sub content blocks.  These definitions are used for builder type pages
 * where seeing the input control is desired.  Compared to the very similarly 
 * structured ExpandableList which has definitions that hide the input control 
 * and styles the control as a hoverable block with some type of graphic or char
 * that represents if the content is exposed or hidden.
 *
 * 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.ExpandableInputList 
 *		li
 *			input type="checkbox" id="xyz" class="Control"
 *			label for="xyz"
 *				a -  with title as text (if href then link to, else jump to).
 *			ul.Container
 *				li
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.ExpandableInputList
{
	margin: 			0px;
	padding: 			0px;
}

.ExpandableInputList .Control ~ .Container 
{
	padding: 			0px 0px 0px 25px;
}
 
.ExpandableInputList li 
{
	margin:				3px 0 2px 0;
	padding:			1px 0px 0px 0px;
	position:			relative;
	list-style:			none;
	clear:				both;				/* needed so line clears any floated helps */
}

.ExpandableInputList input
{
	margin: 			0px 10px 3px 1px;	/* lower margin blocks large label text wrapping - if 3 lines of wrapping all bets are off!!! */
	float:				left;				/* do this so following large text label doesn't wrap underneath */
}

.ExpandableInputList input[type="text"] 
{
	padding:			2px 1px 1px 1px;
	margin:				0 0.5em 0 0;
	float:				none;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S U B   S E L E C T I O N S  */
/* not needed if ExpandableContent container used... */
:not(#foo) .ExpandableInputList li ul.Container,
:not(#foo) .ExpandableInputList li ol.Container
{ 
	display: 			none;  
}

:not(#foo) .ExpandableInputList li input.Control:checked ~ .Container 
{ 
	display: 			block;
}

.ExpandableInputList select
{
	width:				100%;
	padding-left: 		1px;
	margin-bottom:		5px;
} 
.ExpandableInputList select option
{
	padding-left:		0.25em;
}

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