/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * SlideOutContent 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:
 * ---------------------------------------
 *		div.SlideOutContent [.EnclosedContainer .HoverControl]
 *
 *			input type="checkbox/radio" id="xyz" (clickable content control)
 *			label.Control for="xyz"
 *			-or-
 *			.Control  (hover expandable content control)
 *
 *			div.Container 
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.SlideOutContent 
{
float: left;
width: 30px;
height: 			inherit;
overflow-x: auto;
	padding:			0; 
	margin:				0.7em 0 0 0;
	position: 			relative;
	background-color:	red;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ G E N E R A L   C O N T R O L */
.SlideOutContent > .Control
{
	display:			block;
	padding: 			5px 25px 3px 5px;

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

	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;  
}
.SlideOutContent:hover  > .Control,
.SlideOutContent:active > .Control,
.SlideOutContent:focus  > .Control
{
	background-color:	#003366;
	color:				white;
	cursor:				pointer;
}

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

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

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ C L I C K   C O N T R O L */
.SlideOutContent > 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;
}

.SlideOutContent > input:checked + .Control
{
	background-image:	url('../image/icon/16/minus_box-gray.png');
}
.SlideOutContent > input:not(:checked) + .Control 
{
	background-image:	url('../image/icon/16/plus_box-gray.png');
}
.SlideOutContent > input[type='radio']:checked + .Control 
{
	background-image:	url('../image/icon/16/radio_checked-gray.png');
}
.SlideOutContent > 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 */
.SlideOutContent.HoverControl > .Control
{
	background-image:	url('../image/icon/16/arrow_down_diag_box-gray.png');
}

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

.SlideOutContent.EnclosedContainer > input:checked + .Control,
.SlideOutContent.EnclosedContainer.HoverControl:hover  > .Control,
.SlideOutContent.EnclosedContainer.HoverControl:active > .Control,
.SlideOutContent.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 */
.SlideOutContent .Container
{
	padding:			5px 5px 5px 5px;
}
.SlideOutContent #sectionFinish ~ .Container /* query builder submit section */
{
	padding: 			8px 8px 10px 0;
}

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

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

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

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