/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * ExpandableContent elements provide the visual control for expanding/collapsing 
 * blocks (via pushing sub content down) based on an html checkbox/radio input 
 * element or a hover.  
 *
 * For the clickable action a non visible radio/checkbox control is used along 
 * with an associated label which is the css class of ".Control" (which provides 
 * a clickable block).  Because the label follows the input the background label's 
 * image can be controlled via the input's ":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.  
 *
 * The non clickable hoverable behavior is achieved by omitting the input element
 * and adding a "HoverControl" class to the main block.
 *
 * NOTE: This structure is NOT a nested indentured structure like the expandable 
 * selections list or popup.  It is implemented to be flat - to keep things simple. 
 *
 * Structure:
 * ---------------------------------------
 * [.StackedSlider]
 *		div.ExpandableContent [.EnclosedContainer .HoverControl]
 *
 *			input type="checkbox/radio" id="xyz" (clickable content control)
 *			label.Control for="xyz"
 *			-or-
 *			.Control  (hover expandable content control)
 *
 *			div.Container 
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.ExpandableContent 
{
	margin:				0 0 0.7em 0;
	position: 			relative;
	background-color:	transparent;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ G E N E R A L   C O N T R O L */
.ExpandableContent > .Control
{
	display:			block;
	padding: 			0.3em 25px 0.3em 0.4em;

	background:			#225588 url('../image/icon/16/lt_circle-blue.png') no-repeat right 4px center;
	color:				#eee;

/*
	background:			#6699cc url('../image/icon/16/lt_circle-blue.png') no-repeat right 4px center;
	color:				#fff;
	font-size:			0.9em;
	if do this then query builder items selection color needs to be updated...
*/
	border-bottom: 		1px solid #666;
	border-right: 		1px solid #666;

	-moz-border-radius:	4px 4px 4px 4px;  
	-webkit-border-radius: 4px 4px 4px 4px;    
	border-radius:		4px 4px 4px 4px;  
}
.ExpandableContent:hover  > .Control,
.ExpandableContent:active > .Control,
.ExpandableContent:focus  > .Control
{
	background-color:	#114477;
	color:				#FFCC66;
	cursor:				pointer;
}

.ExpandableContent > .Control > .SelectedValues
{
	display:			block;
	color:				#eee;
	font-size:			0.9em;
	font-style:			italic;
	margin-left:		2px;
}
.ExpandableContent:hover  > .Control > .SelectedValues,
.ExpandableContent:active > .Control > .SelectedValues,
.ExpandableContent:focus  > .Control > .SelectedValues,
.ExpandableContent > .Control:hover  > .SelectedValues,
.ExpandableContent > .Control:active > .SelectedValues,
.ExpandableContent > .Control:focus  > .SelectedValues
{
	color:				#eee;
}

.ExpandableContent > .Control > h3
{
	font-weight:		normal;
}

.ExpandableContent > .Control > *
{
	background-color:	transparent;
	color:				inherit;
	margin-top:			0em;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ C L I C K   C O N T R O L */
.ExpandableContent > input
{
	/* 
		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: 				left;
	width:				0px;
	height:				0px;
	opacity:			0;
	z-index:			1;
}

.ExpandableContent > input:checked + .Control
{
	background-image:	url('../image/icon/16/minus_box-gray.png');
}
.ExpandableContent > input:not(:checked) + .Control 
{
	background-image:	url('../image/icon/16/plus_box-gray.png');
}
.ExpandableContent > input[type='radio']:checked + .Control 
{
	background-image:	url('../image/icon/16/radio_checked-gray.png');
}
.ExpandableContent > input[type='radio']:not(:checked) + .Control 
{
	background-image:	url('../image/icon/16/radio-gray.png');
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ H O V E R   C O N T R O L */
.ExpandableContent.HoverControl > .Control
{
	background-image:	url('../image/icon/16/arrow_down_diag_box-gray.png');
}

.ExpandableContent.HoverControl:hover  > .Control,
.ExpandableContent.HoverControl:active > .Control,
.ExpandableContent.HoverControl:focus  > .Control
{
	background-image:	none;
}

.ExpandableContent.EnclosedContainer > input:checked + .Control,
.ExpandableContent.EnclosedContainer.HoverControl:hover  > .Control,
.ExpandableContent.EnclosedContainer.HoverControl:active > .Control,
.ExpandableContent.EnclosedContainer.HoverControl:focus  > .Control
{
	-moz-border-radius:	4px 4px 0px 0px;  
	-webkit-border-radius: 4px 4px 0px 0px;    
	border-radius:		4px 4px 0px 0px;  
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ C O N T A I N E R */
.ExpandableContent .Container
{
	padding:			5px 5px 5px 5px;
}
.ExpandableContent #sectionFinish ~ .Container /* query builder submit section */
{
	padding: 			8px 8px 10px 0;
}

.ExpandableContent.HoverControl > .Container,
.ExpandableContent > input:not(:checked) ~ .Container
{ 
	padding: 			0;
	height: 			0;
	width: 				0;
	overflow: 			hidden;
	opacity: 			0;
}

.ExpandableContent > input:checked ~ .Container,
.ExpandableContent.HoverControl:hover  > .Container,
.ExpandableContent.HoverControl:active > .Container,
.ExpandableContent.HoverControl:focus  > .Container
{ 
	padding:			5px 5px 5px 5px;
	height: 			auto;
	width: 				auto;
	overflow: 			visible;
	opacity: 			1;
}

.ExpandableContent .Container h3
{
	margin-top:			0.5em;
	font-size:			1em;
}

.ExpandableContent .Container button
{ 
	margin-top:			5px;
}
.ExpandableContent .Container button:first-child
{ 
	margin-left:		-5px;
}


.ExpandableContent.EnclosedContainer .Container
{
	background-color:	#efefef;
	border:				1px solid #336699;

	-moz-border-radius:	0px 0px 4px 4px;  
	-webkit-border-radius: 0px 0px 4px 4px;    
	border-radius:		0px 0px 4px 4px;  

	-moz-box-shadow: 	0 8px 6px -6px #888;
	-webkit-box-shadow: 0 8px 6px -6px #888;
	box-shadow:			0 8px 6px -6px #888;
}



.StackedSlider
{
	border: 			1px solid grey;
	background-color:	#f8f8f8;
	-moz-border-radius:	4px 4px 4px 4px;  
	-webkit-border-radius: 4px 4px 4px 4px;    
	border-radius:		4px 4px 4px 4px;  
}
.StackedSlider .ExpandableContent
{
	margin-top:			0;
}
.StackedSlider .ExpandableContent > input + .Control
{
	background-position: left 4px center;
	padding:			5px 5px 5px 25px;
	margin:				0;

	-moz-border-radius:	0;  
	-webkit-border-radius: 0;    
	border-radius:		0;  
}
	
/*============================ End of Style Sheet ============================*/