/*******************************************************************************
 AccessibilityOz [October 2012]              http://www.accessibilityoz.com.au/
 ------------------------------------------------------------------------------
 JS_N_A1: Dynamic menus should be fully accessible to the keyboard, using Tab and Arrow Keys
 ------------------------------------------------------------------------------
*******************************************************************************/



/* reset all layout inside the demo container */
#demo, #demo *
{
	margin:0;
	padding:0;
	list-style-type:none;
	
	border:none;
	
	font:normal normal normal 100%/1.2 arial, sans-serif;
}

/* hide the menu's structural-label using off-left positioning
   so it's still read by screenreaders but not visually seen */
#demo > h3
{
	position:absolute;
	left:-100em;
}

/* style the demo container as a continuation strip */
#demo
{
	float:left;
	width:100%;
	margin:0 0 20px 0;
	
	background:#1964aa;

	box-shadow:2px 3px 6px 0 rgba(0,0,0,0.4);
}

/* style the top-level list as a horizontal navigation bar 
   floated to align it to the right-edge of the container */
#demo > ul
{
	float:right;
	display:block;
	margin:0 10px;
}
#demo > ul > li
{
	float:left;
	position:relative;
	
	display:block;
}
#demo > ul > li *
{
	cursor:pointer;
}
#demo > ul > li > a, 
#demo > ul > li > h4 > a
{
	display:block;
	margin:10px 0;
	padding:2px 8px 1px 8px;
	
	border-right:1px solid #000;
	
	font-size:0.75em;
	text-decoration:none;
	text-transform:uppercase;
	text-shadow:0 1px 0 rgba(0,0,0,0.3);
	
	color:#fff;
	
	cursor:pointer;
}
#demo > ul > li:last-child > h4 > a
{
	border-right:none;
}
#demo > ul > li:nth-child(1) > h4 > a,
#demo > ul > li:nth-child(10) > h4 > a,
#demo > ul > li:nth-child(11) > h4 > a
{
	border-right:1px dotted #fff;
}
#demo > ul > li a:hover,
#demo > ul > li a:focus, 
#demo > ul > li a:active 
{
	text-decoration:underline;
}
#demo > ul > li a:focus, 
#demo > ul > li a:active 
{
	outline:1px dotted #fff;
	outline-offset:-1px;
}

/* style the nested lists as child menus, dropping down then to the right 
   and hidden with display (rather than offleft positioning) so that 
   they're not in the natural tab-order when JavaScript is unavailable 
   (otherwise sighted keyboard users would be able to Tab to links they can't see)
   and so that tabbing backwards doesn't open menus from their deepest level
   it navigates backwards through the top-level list, which makes more sense
   nb. this makes it crucial that every page which is linked-to from the child 
   menus, is also linked-to from elsewhere, for example each top-level link
   would point to a page on which all its child menu links also appear */
#demo > ul ul 
{
	position:absolute;
	left:0;
	top:auto;

	display:none;
	width:13em;
	padding:12px;
	
	border:2px solid #c0cdda;
	border-radius:0 0 5px 5px;
	
	background:#eef1f5;
	
	box-shadow:2px 3px 6px 0 rgba(0,0,0,0.4);

	cursor:default;
}
#demo > ul ul ul
{
	top:0;
	
	margin:-4px 0 0 13em;

	border-radius:5px;
}
#demo > ul ul > li 
{
	position:relative;

	display:block;
}
#demo > ul ul > li a
{
	display:block;
	padding:7px 7px 6px 7px;
	
	border-bottom:1px solid #c0cdda;

	font-size:0.8em;
	text-decoration:none;
	text-shadow:0 1px 0 rgba(255,255,255,0.5);

	background:transparent none no-repeat 96% 52%;
	color:#1964aa;
	
	cursor:pointer;
}
#demo > ul ul > li:last-child a
{
	border-bottom:none;
}
#demo > ul ul > li a:hover, 
#demo > ul ul > li a:focus, 
#demo > ul ul > li a:active 
{
	font-weight:bold;
	text-decoration:none;
	
	background-color:#dae1e9;
	color:#036;
}
#demo > ul ul > li a:focus
{
	outline:0px solid rgba(0,0,0,0);
}

/* add menu-indicator arrows to items with the "hasmenu" class */
#demo > ul > li.hasmenu
{
}
#demo > ul ul > li.hasmenu > a
{
	background-image:url("../images/arrow-right-default.png");
}
#demo > ul ul > li.hasmenu > a:hover,
#demo > ul ul > li.hasmenu > a:focus,
#demo > ul ul > li.hasmenu > a:active
{
	background-image:url("../images/arrow-right-hover.png");
}