/*******************************************************************************
 AccessibilityOz [October 2012]              http://www.accessibilityoz.com.au/
 ------------------------------------------------------------------------------
 JS_G_A1: Visually-dynamic information (such as a progress meter) should have a text equivalent
 ------------------------------------------------------------------------------
*******************************************************************************/



/* style the demo paragraph to look like a progress-meter 
   using dynamic width on the inner SPAN as visual indication 
   and a dynamic percentage value in the EM as text indication 
   nb. white-space:nowrap on the EM makes the text overlap instead of 
   wrapping, when the value is small and so it's wider than the SPAN  */
#demo
{
	width:202px;
	padding:1px;
	
	border:1px inset #999;
	border-radius:3px;
	
	background:#999;
}
#demo > span
{
	overflow:visible;
	
	display:block;
	width:100px;
	
	border:1px outset #696;
	border-radius:2px;
	
	background:#2b2;
}
#demo > span > em
{
	white-space:nowrap;
	
	display:inline-block;
	padding:0 6px;
	
	font-style:normal;
	
	color:#fff;
	text-shadow:0 -1px 1px rgba(0,0,0,0.25);
}