/* NOTE: KEEP # SIGNS FOR COLOR VALUES */

/* Menu clipping region - width & height get set by script, depending on the size of the items table */
.ypMenu {
	position:			absolute;
	overflow:			hidden;
	left:				-1000px;
	top:				-1000px;
	}

/* Main container - width & height get set by script, depending on the size of the items table */
.ypMenu .content {
	position:			absolute;
	}

/* All menu items. Each TR is one item. 
   Relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.ypMenu .items {
	position:			relative;
	left:				0px;
	top:				0px;
	border:				1px solid #999999;
	z-index:			2;
	}

.ypMenu.top .items {
	border-top:			none;
	}

/* Each TR.item is one menu item */
.ypMenu .item {
    color:				#000000;
    font-size:			12px;
    font-weight: 		bold;
    font-family:		Arial,Helvetica,Verdana,Futura;
	line-height:		18px;
    text-decoration:	none;
	/* Mac/IE5 workaraound - incorrectly cascades the border properties of the parent table to each row */
	border:				none;
	cursor:				pointer;
	cursor:				hand;
	}

/* Semi-transparent white background of each menu. 
   The -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/Windows 5.0+.
   Background color set in script because IE Mac does not use it; 
   that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.ypMenu .background {
	position:			absolute;
	left:				0px;
	top:				0px;
	z-index:			1;
	-moz-opacity:		.9;
	filter:				alpha(opacity=95);
	}

/* Same concept as .background, but this is the sliver of shadow on the right of the menu. 
   It's left, height, and background are set by script. In IE5/Mac, it uses a PNG */
.ypMenu .shadowRight {
	position:			absolute;
	z-index:			3;
	top:				3px;
	width:				2px;
	-moz-opacity:		.4;
	filter:				alpha(opacity=40);
	}

/* Same concept as .background, but this is the sliver of shadow on the bottom of the menu. 
   It's top, width, and background are set by script. In IE5/Mac, it uses a PNG */
.ypMenu .shadowBottom {
	position:			absolute;
	z-index:			1;
	left:				3px;
	height:				2px;
	-moz-opacity:		.4;
	filter:				alpha(opacity=40);
	}

/* Mouse-over item. Script sets the row to this class when required. */
.ypMenu .item.hover {
	background:			#004a8f;
	color:				#ffffff;
	font-weight: 		bold;
	}

/* Either the dingbat that indicates there is a submenu, or a spacer gif in it's place. 
   Extra margin is given to create some space between the text and the dingbat */
.ypMenu .item img {
	margin-left:		5px;
	}