/* Single-level CSS dropdown menu, based on Patrick Griffiths's "SuckerFish"
(see http://htmldog.com/articles/suckerfish/dropdowns/example/).
*/

/*
!KLUDGE ALERT!
20120425 jtb: PG's Suckerfish code relies on a single CSS id (here, #toolMenu), which
makes it hard (impossible?) to put multiple instances of these nifty dropdowns on a single page.
To accommodate a Tipitaka dropdown in the crumbtrail, I'm using the cheap kludge of "cloning" this
suckerfish code with a second id (#toolMenu2). It works ok now, but I will heartily regret this later,
when I decide to put dropdowns on ALL the breadcrumb links (#toolMenu3, #toolMenu376, ...).
*/
#tools {
	padding-left:10px;
}
.ddTitle:hover {
	color:red;
}

#toolMenu, #toolMenu2, #toolMenu3 {
	background-color:inherit;
	font: 9pt Verdana, sans-serif;
	list-style-type: none;
	list-style-image: none;
	text-align:left;
	margin:0 0 0 0;
}

#toolMenu3 li,
#toolMenu3 a,
#toolMenu2 li,
#toolMenu2 a,
#toolMenu li,
#toolMenu a {
	padding: 0 0 0 0;
	margin:0 0 0 0;
}

#toolMenu3 ul,
#toolMenu2 ul,
#toolMenu ul {
	margin:0;
	padding:0;
	background-color:#F9F9F6;
	border-top: 2px solid #ccc;
	border-left: 2px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-radius:0.7em;
}

#toolMenu3 a,
#toolMenu2 a,
#toolMenu a {
	text-decoration: none;
	border:none;
}

#toolMenu3 li ul,
#toolMenu2 li ul,
#toolMenu li ul 
{
	position: absolute;
	left: -999em;
	height: auto;
	width: 110px; /* (A) width of pop-up menu */
	margin: 0;
}

#toolMenu3 li li,
#toolMenu2 li li,
#toolMenu li li 
{
	margin: 0 0 0 0;
	padding: 3px 10px 3px 10px;
	width: 88px;
	height:20px;
	white-space:pre; /*don't let text wrap*/
	overflow:hidden; /*long text gets truncated*/
	display:block; /* (overrides inline from crumblist) */
}

#toolMenu3 li li a,
#toolMenu2 li li a,
#toolMenu li li a 
{
	padding: 2px 10px 2px 10px;
	margin: 0 0 0 -15px;
	width: 150px;
	height:20px;
	display:block; /*entire box is hot*/
}

#toolMenu3 li:before,
#toolMenu3 li li:before,
#toolMenu2 li:before,
#toolMenu2 li li:before,
#toolMenu li:before,
#toolMenu li li:before
{
	content:''; /*jtb hack: needed for Safari (Safari doesn't know 'none') */
	content:none;
}

#toolMenu3 li:hover ul,
#toolMenu3 li.sfhover ul,
#toolMenu2 li:hover ul,
#toolMenu2 li.sfhover ul,
#toolMenu li:hover ul,
#toolMenu li.sfhover ul
{
	left: auto;
}

#toolMenu3 li li:hover,
#toolMenu3 li li.sfhover,
#toolMenu2 li li:hover,
#toolMenu2 li li.sfhover,
#toolMenu li li:hover,
#toolMenu li li.sfhover
{
	background: #ddd;
	border-top:1px solid #aaa;
	border-bottom:0.5px solid #ccc;
	border-left:1px solid #aaa;
	border-right:0.5px solid #ccc;
	border-radius:0.5em;
	padding: 2px 10px; /*to make room for the borders*/
}

#toolMenu3 .ddTitle ul,
#toolMenu2 .ddTitle ul,
#toolMenu .ddTitle ul
{
	margin:18px 0 0 -35px;
}