/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Popups are floating window/dialogs that show when the Popup's control/trigger
 * element is moused over.  This is a pure CSS solution without the need for any 
 * javascript.  The actual content container is a nested element - not a peer 
 * element like the DropDownContent and ExpandableContent.  The main container 
 * element for the popup is the trigger/control.  The content block is contained 
 * so that the actual popup is located with the trigger element which allows for 
 * easier relative positioning/placement.  
 *
 * Notes: 
 * - If a balloon Popup is the only purpose of an <a> trigger element then set 
 *   the href="javascript:void(0);" or href="javascript:return(false);" or href="#".   
 * - Using an <A> for the trigger element allows for keyboard navigation/focus.  
 *   However, an <A> triggering element can not handle nested sub <A> elements.
 * - If a user wants the popup to be sticky then a different css and html struct 
 *   is needed.  Use the expandable selections type <INPUT> css trick.
 *
 * Structure:
 *	<* class="Popup">    -    This is the control mechanism for the container.
 *		<span or div class="Container">    -    main content container - provides a border etc.
 *			[<h2>Title</h2>]    -    Optional Popup content window title
 *			[<span or div class="Content [SelectorInput]">]
 *                  Actual content container that allows for a title and border 
 *                  formatting with a content section being able to have it's own 
 *                  formatting.  The optional SelectorInput class is used for 
 *                  radio/checkbox input elements with indented text to the right.
 *				[<h3>sub section titles</h3>]    -    Optional text formatting.
 *				[<input/>]    -    Optional radio, checkbox, submit button
 *			[</span>]
 *		</span>
 *  </*>
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.Popup,
.Click
{
	position:			relative;
}
span.Popup, div.Popup, li.Popup
{
	text-decoration:	underline;
}
span.Popup:hover, div.Popup:hover, li.Popup:hover
{
	font-weight:		bold;
	text-decoration:	none;
/* help can have a help cursor but this implies it can be clicked so removed.
	cursor:				pointer;
*/
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ C O N T A I N E R */
.Popup .Container,
.Click .Container
{
	position:			absolute;
	left:				-1500px;
	visibility:			hidden;

	margin:				0px;
	padding:			6px;
	width: 				auto;

	color:				#eeeeee;
	background-color:	#336699;
	text-align:			left;
	opacity:			0;
	z-index:			0;

	cursor:				default;

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

	-moz-box-shadow: 	2px 2px 5px 0px #333;
	-webkit-box-shadow: 2px 2px 5px 0px #333;
	box-shadow:			2px 2px 5px 0px #333;

	transition:         opacity 0.5s linear;
	-moz-transition:    opacity 0.5s linear;
	-webkit-transition: opacity 0.5s linear;
	-o-transition:      opacity 0.5s linear;
}
.Popup:hover  .Container,
.Popup:active .Container,
.Popup:focus  .Container
{
	left:				-15px;
	visibility:			visible;

	opacity:			1;
	z-index:			200;

	/* positioning HAS to be abs to get it to float over the top.  This attribute 
		MUST be set in with the hover or IE can't deal with it. 

		Read article about using margin and not positioning.  Issue dealt with 
		position, left, top, and z-index.  Didn't make a diff for overlaying anchors.
		z-index needs position to be set.

		Can use position abs with margins and it works. However, positioning is not 
		correct between browsers AND since it doesn't resolve the abs positioned 
		blocks overlapping (like menus) there's not any advantage!
	*/
}

.Popup .Container h1,
.Popup .Container h2,
.Popup .Container h3,
.Popup .Container h4,
.Click .Container h1,
.Click .Container h2,
.Click .Container h3,
.Click .Container h4
{
	padding:			0 0 3px 0;
	color:				#003366 !important;
	background-color:	transparent !important;
}

.Popup .Container input.Button
{
}

.Popup .Container .Content,
.Click .Container .Content
{
	min-width:			300px;
	max-width:			450px;
	max-height: 		300px;

	overflow:			auto;

	margin: 			0px;
	padding:			5px 4px 4px 8px;
	font-size:			1em;
	font-weight:		normal;

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

	-moz-box-shadow: 	inset 2px 2px 5px 0px #333;
	-webkit-box-shadow: inset 2px 2px 5px 0px #333;
	box-shadow:			inset 2px 2px 5px 0px #333;
}

.Popup .Container .Content,
.Click .Container .Content,
.Popup .Container .Content div,
.Click .Container .Content div
{
	background-color:	#eeeeee;
	color:				#003366;
}

.Popup .Container .Content h2,
.Click .Container .Content h2
{
	padding:			0px;
	color:				#003366 !important;
	background-color:	transparent !important;
	border:				none;
	text-decoration:	none;
}
.Popup .Container .Content h4,
.Click .Container .Content h4
{
	font-weight: 		bold;
}

.Popup .Container .SelectorInput,
.Click .Container .SelectorInput
{
	padding-left:		30px;
}
.Popup .Container .SelectorInput h3,
.Click .Container .SelectorInput h3
{
	margin-left: 		-25px;
}
.Popup .Container .SelectorInput input,
.Click .Container .SelectorInput input
{
	margin-left:		-20px;
	margin-right:		5px;
}



.Click > input.Control
{
	/* 
		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;
}

.Click > input.Control + label
{
	background:			transparent none 0 0 no-repeat;
	color:				white;
	padding:			0px 5px 5px 25px;
}
.Click:hover > input.Control + label
{
	font-weight:		bold;
}

.Click > input.Control:checked + label
{
	background-image:	url('../image/icon/16/triangle_down-gray.png');
}
.Click > input.Control:not(:checked) + label 
{
	background-image:	url('../image/icon/16/triangle_right-gray.png');
}

.Click > input.Control + label > *
{
	background-color:	transparent;
	color:				inherit;
}


:not(#foo) .Click input.Control:checked ~ .Container
{
	left:				-215px;
	visibility:			visible;

	opacity:			1;
	z-index:			200;
/*

	height: auto;
	width: auto;
	overflow: auto;

	min-width:			300px;

	height: auto;
	width: auto;
	overflow: auto;
*/
}

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