/*******************************************************************************
 AccessibilityOz [October 2012]              http://www.accessibilityoz.com.au/
 ------------------------------------------------------------------------------
 JS_C_A9: Insert dynamic content into the DOM immediately following its trigger element
 ------------------------------------------------------------------------------
*******************************************************************************/



/* apply relative positioning to the demo span, so it can act
   as a relative context for positioned elements inside it */
#demo
{
	position:relative;
}

/* apply absolute positioning to the popup layer, to align it 
   to the right-hand edge of the demo span, and sit above it */
#demo > span.layer
{
	position:absolute;
	bottom:1.7em;
	right:0;
}



/* then style the popup layer like a tooltip */
#demo > span.layer
{
	width:18em;
	padding:6px 8px;
	white-space:normal;
	
	border:1px solid #555;
	
	font:normal normal normal 0.85em/1.4 arial,sans-serif;
	text-align:right;
	
	background:#ffd;
	
	box-shadow:1px 2px 3px -1px rgba(0,0,0,0.5);
}
#demo > span.layer > em
{
	display:block;
	padding:4px 4px 8px 4px;
	
	text-align:left;
	font-style:normal;
}