@import "interface.css";

div#drive {
	float: right; 
	width: 8em;
	background: #FDD;
	margin-right:1px;
} 
div#drive ul {
	margin: 0;
	padding: 0;
	width: 8em;
	background: white;
	border: 1px solid #aaa;
}
div#drive li {
	position: relative;
	list-style: none;
	margin: 0;
	font-family:  Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #ccc;
}

div#drive li:hover {background: #FCF9B4;}  /*#FCF9B4 nice pale yellow*/

div#drive li.flyout{
	background:  url(../../img/menu_left.gif) 5% 50% no-repeat;
}

div#drive li.flyout:hover {background-color: #FCF9B4; }

div#drive li a{
	display: block;
	padding: 0.25em 0.3em 0.25em 0;/*.5em is left padding shove the link to right*/
	text-decoration: none;
	color: #666;
	border-right: 0.7em solid #999;
	width: 100%;
	voice-family: "\"}\" "; /*this is a hack for ie5*the rest  of the rule is skipped by ie5 because it doesn't like voice-family. modern browsers will keep reading*/
	voice-family: inherit; /*this is a hack for ie5*/
	width: 7em;/*7 plus the .5 above plus the .5 right border = 8em, this is just for ie6 and is disabled(drive>ul) in the next rule for firefox and others*/
	text-align: right;
}

div#drive li a:hover {
	border-right-color: #ff6600;
	color: #666;	
}

div#drive>ul a {width: auto;}/*ie doesn't understand this, so it undoes the width:6.5 rule above in all but ie*/

div#drive ul ul {
	position: absolute;
	top: 0;
	right: 8em;
	display: none;
}

div#drive ul.level1 li.flyout:hover ul.level2,
div#drive ul.level2 li.flyout:hover ul.level3 {display: block;}