/*******************************************************************************
 AccessibilityOz [October 2012]              http://www.accessibilityoz.com.au/
 ------------------------------------------------------------------------------
 JS_F_AA1: Where form fields require a specific format or range of values, contextual help-text can be programmatically inserted directly after the field it relates to, using functions of the DOM 
 ------------------------------------------------------------------------------
*******************************************************************************/



/* apply relative positioning to each label/field pair wrapper 
   so that we can use it as a context for absolute positioning 
   and float/clear so it's only as wide as its content */
#demo > fieldset > p
{
	position:relative;
	
	float:left;
	clear:both;
}

/* then apply absolute positioning to the help message labels 
   to align them against the top-right of each field wrapper */
#demo > fieldset > p > label.help
{
	position:absolute;
	top:0;
	left:100%;
}



/* style the help message labels like little message tooltips */
#demo > fieldset > p > label.help
{
	width:19em;
	margin:-5px 0 0 10px;
	padding:6px 12px 7px 12px;
	
	border:2px solid #888;
	border-radius:10px;

	font:normal normal normal 0.9em/1.35 verdana,sans-serif;

	background:#ffc;
	
	box-shadow:inset 0 1px 1px 1px rgba(255,255,255,0.25), inset 0 -1px 1px 1px rgba(0,0,0,0.05), 0 1px 5px -1px rgba(0,0,0,0.75);
}
#demo > fieldset > p > label.help > em
{
	font-style:normal;

	color:#606060;
	text-shadow:0 1px 0 rgba(255,255,255,0.35);
}