/*	Mac-style styles
	================  */

/*	Mac-style menus
	---------------  */

.menubar
{
	width: 100%;  /* Fit the screen horizontally */
	
	height: 19px;  /* 20px once you add the bottom border */
	
	/* defined here to avoid warnings elsewhere */
	color: black;
	background-color: white;
}

.visual.menubar
{
	z-index: 4;
	
	outline: 1px solid black;
}

.behavioral.menubar
{
	z-index: 4;
	
	padding: 0px 9px;
	
	background-color: transparent;  /* override white */
	
	font-size: 12px;
	font-weight: normal;
	font-family: Chicago, Charcoal, Silom, ChicagoFLF, sans-serif;
}

div.menulist
{
	display: table;
	border-spacing: 0px;
	
	position: relative;
}

div.menulist > ul
{
	display: table-row;
	padding: 0px;
}

.menu-slot
{
	display: table-cell;
	
	background-color: transparent;
}

.selected.menu-slot .title
{
	/* Selected menu's title is white on black*/
	color: white;
	background-color: black;
}

.menu-slot .title
{
	display: block;
	
	/* Needed to override h5 style from metamage.css */
	font-size: 12px;
	font-weight: normal;
	font-family: Chicago, Charcoal, Silom, ChicagoFLF, sans-serif;
	cursor: default;
	
	margin-top: 1px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: -5px;
	
	padding-left: 9px;
	padding-right: 9px;
	padding-top: 1px;
	padding-bottom: 2px;
	
	height: 15px;
}

.menu-slot .title img
{
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: -1px;
	margin-right: 0px;
	
	padding-left: 0px;
	padding-right: 1px;
	padding-bottom: 2px;
	padding-top: 0px;
	
	
	vertical-align: text-bottom;
	/**/
}

.menu-slot div.menu
{
	border: 1px solid black;
	z-index: 1;
	cursor: default;
	position: absolute;
	padding: 0px;
	color: black;
	background-color: white;
	
	visibility: hidden;
}

.selected.menu-slot > .menu,
.selected.menu-slot .menu-item:hover       > .submenu > div > .menu,
.selected.menu-slot .highlighted.menu-item > .submenu > div > .menu
{
	visibility: visible;
}

.selected.menu-slot > .empty.menu,
.highlighted.menu-item > .submenu > div > .empty.menu
{
	visibility: hidden;
}

.menu-table
{
	border-spacing: 0px;
	
	color: black;
	background-color: white;
}

.menu-item
{
	/*
	display: table-row;
	/**/
	position: relative;
	
	padding-right: 8px;
}

/* Invert a menu item's colors when highlighted */
.highlighted.menu-item
{
	color: white;
	background-color: black;
}

.separator
{
	height: 7px;
}

.separator > div
{
	height: 1px;
	background-color: gray;
	color: black;  /* silence warning */
	
	margin-top:    7px;
	margin-bottom: 6px;
	margin-left:  0px;
	margin-right: 0px;
}

/* But don't invert */
.highlighted.menu-item .separator,             /* disabled menu items (JS) */
.highlighted.menu-item .submenu > div > .menu  /* submenus (JS) */
{
	color: black;
	background-color: white;
}

.menu a
{
	color: black;
	background-color: white;
	text-decoration: none;
}

.menu-item:hover a,
.highlighted.menu-item a
{
	color: white;
	background-color: black;
}

.menu-item > .mark,
.menu-item > .text,
.menu-item > .fake-key,
.menu-item > .keymods,
.menu-item > .key,
.menu-item > .submenu
{
	display: table-cell;
	white-space: nowrap;
}

.menu-item > .mark
{
	min-width: 12px;
	padding-left: 2px;
}

.menu-item > .text
{
	margin-bottom: 1px;
	
	padding-right: 2px;
	
	white-space: nowrap;
}

.menu-item > .fake-key
{
	visibility: hidden;
	padding-left: 1px;
}

.menu-item > .keymods
{
	position: absolute;
	top: 0px;
	right: 13px;
	
	text-align: right;
}

.menu-item > .key
{
	position: absolute;
	top: 0px;
	right: 1px;
	width: 12px;
}

.menu-item > .submenu
{
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 6px;
	
	position: relative;
}

.menu-item > .submenu > div.submenu-container
{
	position: relative;
	left: 95%;
}

.menu-item > .submenu > img
{
	margin: 0px 8px;
	vertical-align: middle;
}

.menu-item > .submenu > img.selected
{
	display: none;
}

.menu-item:hover       > .menu-item > .submenu > img,
.highlighted.menu-item > .menu-item > .submenu > img
{
	display: none;
}

.menu-item:hover       > .menu-item > .submenu > img.selected,
.highlighted.menu-item > .menu-item > .submenu > img.selected
{
	display: inline;
}

.submenu > span
{
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
}

.menu-item > .submenu > span:after
{
	content: url(http://www.metamage.com/images/submenu-triangle-black.gif);
	vertical-align: middle;
	margin-right: 6px;
}

.menu-item:hover       > .submenu > span:after,
.highlighted.menu-item > .submenu > span:after
{
	content: url(http://www.metamage.com/images/submenu-triangle-white.gif);
}