/*
	These are *common* styles, required to make basic menus work, with a default (neutral) color scheme.
	Styles specific to an app (e360, etc.) should be declared in one of that app's stylesheets.
*/


/* color scheme & other "preference" styles that can easily change */
.Menu_Group, .Menu_Bar
{
	background-color: #dddddd;
	color: #111111;
	font-weight: normal;
	font-style: normal;
	text-align: left;
}

.Menu_Item_Selected
{
	background-color: #aaaaaa;
	color: black;
}

.Menu_Item_Disabled
{
	color: #888888;
}

.Menu_Item_HasChildren
{
	padding-right: 18px;
	background-image: url(menu_right.gif);
	background-repeat: no-repeat;
	background-position: right;
}

.Menu_Item_HasChildren_Selected
{
	background-image: url(menu_right_selected.gif);
}

.Menu_Bar_Item_HasChildren
{
	background-image: url(menu_down.gif);
}
.Menu_Bar_Item_HasChildren_Selected
{
	background-image: url(menu_down_selected.gif);
}




/* required styles, override sparingly */
.Menu_Group
{
	margin: 0;
	padding: 0;
	border: 1px outset;
	overflow: visible;
	cursor: default;
}

.Menu_Subgroup
{
}

.Menu_Iframe_Mask
{
	border: none;
}

.Menu_Item
{
	position: relative;
	left: 0;
	top: 0;
	padding-left: 0.65em;
	padding-right: 0.75em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	vertical-align: middle;
	border: none;
	overflow: visible;
}

.Menu_Item_First { padding-top: 0.3em; }
.Menu_Item_Last { padding-bottom: 0.3em; }





/* Menu Bar is a subset of Menu Group. */
.Menu_Bar
{
	margin: 0;
	padding: 0;
	border: none;
}

.Menu_Bar_Item
{
	position: relative;
	left: 0;
	top: 0;
	float: left;
	padding-top: 0.3em;
	padding-right: 18px;
	border-width: 1px;
	border-style: outset;
	white-space: nowrap;
}


.Menu_Item_Above_Separator
{
	padding-bottom: 0.4em;
}

.Menu_Item_Below_Separator
{
	border-top: 1px groove;
	border-bottom: none;
	border-left: none;
	border-right: none;
	padding-top: 0.35em;
}



/*  LINKS  */
/*  Let the Menu_Item_Selected elements control background and color, since not all items will have anchor tags. */
a.Menu_Item_Link,
a.Menu_Bar_Item_Link
{
	display: inline;
	margin: auto;
	padding: auto;
	font-family: inherit;
	font-size: inherit;
}

a.Menu_Item_Link,
a.Menu_Item_Link:link,
a.Menu_Item_Link:visited,
a.Menu_Bar_Item_Link,
a.Menu_Bar_Item_Link:link,
a.Menu_Bar_Item_Link:visited
{
	text-decoration: none;
	cursor: pointer;
	color: #111111;
	font-weight: normal;
	font-style: normal;
}
a.Menu_Item_Link:hover,
a.Menu_Item_Link:active,
a.Menu_Item_Link:focus,
a.Menu_Bar_Item_Link:hover,
a.Menu_Bar_Item_Link:active,
a.Menu_Bar_Item_Link:focus
{
	text-decoration: underline;
	cursor: pointer;
	color: #000000;
	font-weight: normal;
	font-style: normal;
}






/*	These classes in all caps are not real elements -- they will be read by the menu script 
	to determine layout calculations.  These are defined this way so branded stylesheets can
	override them.  The CSS properties here are not really used as CSS.  */

/*	Currently, the e360 menu bar position gives us 234px of space before the right edge.
	In order to fit 2 tiles at max width on the right side:  117px each, minus 2px for borders,
	so a max width of 115px will work.
  */


/*	MENU_WINDOW_LAYOUT defines the boundaries of where menus can be rendered.  Margins are from 
	the app's window edge, as a rectangle -- this does not include special background clipping,
	so take that into account here.  */
.MENU_WINDOW_LAYOUT
{
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 3px;
	margin-bottom: 10px;
}

/*	How a child group of a menu bar item is positioned, relative to the bottom-left corner of the parent item.  */
.MENU_BAR_CHILD_OFFSET
{
	left: -7px;  /* gives us 252px room before right edge of window ... 126px for 2 tiles, so 124px max width */
	top: -1px;
}

/*	How a child group of a menu group item is positioned, relative to the bottom-right corner of the parent item.  */
.MENU_GROUP_CHILD_OFFSET
{
	left: -2px;
	top: 3px;
}

.MENU_GROUP_MAX_DIMENSIONS
{
	width: 200px;
}