/*******************************************************************************
 AccessibilityOz [October 2012]              http://www.accessibilityoz.com.au/
 ------------------------------------------------------------------------------
 JS_C_A6: Use scripting to scroll content and provide a mechanism to pause it; and
 JS_C_A7: Use scripting to create an alternative, static version of scrolling content
 ------------------------------------------------------------------------------
*******************************************************************************/



/* nb. most of these rules descend from the "script-enabled" class 
   so that when scripting is unavailable the rules will not apply, 
   and the items will appear as an ordinary list of links */



/* use relative positioning on the demo container and list
   so that the list can move inside the container */
.script-enabled #demo, 
.script-enabled #demo > ol
{
	position:relative;
}

/* flatten the list into a single row of items 
   using white-space to prevent any text-wrapping 
   and overflow to hide the visible excess */
.script-enabled #demo
{
	white-space:nowrap;
	overflow:hidden;

	margin:5px 0 0 0;
	padding:5px 10px;

	border:2px solid #555;
	
	background:#f2f2f2;
}
.script-enabled #demo > ol, 
.script-enabled #demo > ol > li
{
	margin:0;
	padding:0;
	list-style-type:none;
}
.script-enabled #demo > ol > li
{
	display:inline-block;
	margin-right:20px;
}



/* now define some overrides, triggered by the "expanded" class,
   which expand the scroller back into a vertical list of items */
.script-enabled #demo.expanded, 
.script-enabled #demo.expanded > ol
{
	position:static;
}
.script-enabled #demo.expanded
{
	white-space:normal;
	overflow:hidden;
}
.script-enabled #demo.expanded > ol > li:not(:last-child)
{
	margin-bottom:5px;
}



/* style the item timestamps so they're
   slightly smaller and lighter text */
#demo > ol > li > small
{
	font-size:0.95em;
	
	color:#666;
}

/* style the item links like normal text 
   but with a hover style to underline them */
.script-enabled #demo > ol > li > a
{
	text-decoration:none;

	color:#444;
}
.script-enabled #demo > ol > li > a:hover
{
	text-decoration:underline;
}