/*
*  VALID
*/

/*
* DOWN-arrow from the top menubar
* Arrow is found in webdings font which is expected to be available.
*/
.arrow {
 font-family:	Webdings;   	/* downarrow is a special character */
 font-size:	125%;		/* make arrow larger */
 line-height:90%;		/* make smaller to center arrow */
 color: #999999;		/* styleguide color */
}

/**
* BREADCRUMB
*/
.breadcrumb{
    color:		#000000;
    font-family:	Arial;
    font-size:		11px;
    font-weight:	bold;
}


/**
* Style for a menu object
* Each meta menu will be displayed in a popup and will use css names starting with '.meta'.
* So we can safely define the substyles by spanning a namespace
* beginning with this identifier '.meta'.
**/
.meta_menubody {
  	background-color:   	#666666;
  	color:		#ffffff;
  	margin:		0;
  	padding:		0;
  	overflow:		hidden;
  	border: 1px solid white; /* surrounding menu border instead of gap */
}

/**
* All td tags within the meta menu will be painted with
* the font defined in the styleguide
*/
.meta_menubody td {
   	font: 11px Arial;
}

/**
* The mouseover effect for each entry colors the selected item
* Note that the border effect defined in the styleguide is done
* in javascript since it has to be turned on/off
*/
.meta_menubody .hover {
    	background-color: #ffffff;
    	color:  	       #666666;
}

/**
* A menu entry is made up of different cells for
* the label and the arrow to open a submenu
* This style specifies the drawing for the label cell.
* Note that the border-bottom is also set dynamically in javascript
* when selection is moved away.
*/
.meta_menubody td.itemcell {
    	width:		100%;
    	padding:	2px 0px 2px 6px;
    	font-family:	Arial;
    	font-size:	11px;
	border-bottom: 1px solid #666666;
	border-top:    1px solid #666666;
	border-left:   1px solid #666666;
	cursor:		default;
}

/**
* A menu entry is made up of different cells for
* the label and the arrow to open a submenu
* This style specifies the drawing for the arrow cell.
*/
.meta_menubody td.arrow {
    	width:		20px;
    	padding:	2px 0px 2px 0px;
    	font-family:	Webdings;
    	font-size:	77%;
    	line-height:	80%;  /* reduced cause arrow has lot of space around*/
	color: 		#999999;
	cursor:		default;
	border-bottom: 1px solid white;
	border-top: 1px solid white;
}


/******************* DISABLED ENTRIES *********************
* gray color for disabled entries. Note that there is NO specification
* in the styleguide for that feature.
*/
.meta_menubody.disabled.disabledarea {
	color:	#999999;
}
.meta_menubody .disabled-hover td {
	background-color:	#666666;
	color:			#666666;
}
.meta_menubody .hidden-hover td {
	background-color:	green;
	color:			green;
}

/******************* SEPARATOR *********************
* Note: No specification in styleguide for that.
* Currently, visualization is not that nice - waiting for
* a concrete definition from WUI team
*/
.meta_menubody td.separator {
	font-size:	0.001mm;
	padding:	0px 0px 0px 0px;
}
.meta_menubody .separator-line {
	overflow:	hidden;
	height:		1px;
}


/******************* SCROLLBUTTONS **********************
* Scrollbuttons for up/down are visualized by the webdings font.
* weigthed as important since other font assignments make no sense
*/
.meta_menubody #scrollup td, .menu-body #scroll-down-item td {
    font-family:	Webdings !important;
    text-align:		center;
    padding:		10px;
}

.meta_menubody #scrollup,
.meta_menubody #scrolldown {
	width:		100%;
}

.meta_menubody #scrollup td,
.meta_menubody #scrolldown td {
	font-family:	Webdings;
	text-align:		center;
	padding:		0px 5px 0px 5px;
	font-size:		11px;
}


/******************* MENUBAR **********************/

.meta_menubar {
	background:	#666666;
	cursor:		default;
	padding:	0px 0px 0px 0px;
        white-space:	nowrap;  /* no linebreak in menubar when browsersize small */
}

/**
* Note: A menubutton is painted with one more pixel than defined in
* styleguide because it already contains the right border.
* Sizing is done in javascript.
*/
.meta_menubar .menbutton {
 	color:		#ffffff;
	font: 		11px arial;
	padding:	0px 7px 0px 7px;
	border:		0;
	margin:		0;
	border-right:	1px solid white;
	border-top:	1px solid #666666;
	border-bottom:	1px solid #666666;
	line-height: 16px;
}

.meta_menubar .menbutton.active {
	padding:	0px 7px 0px 7px;
	border:		1px solid;
}

.meta_menubar .menbutton.hover {
	background-color: #ffffff;
	color:		  #666666;
	padding:	  0px 7px 0px 7px;
	border-top:	1px solid #666666;
	border-bottom:	1px solid #666666;
	line-height: 16px;
}

/** No special visualization for hovering over a disabled item. */
.meta_menubar .menbutton.disabled,
.meta_menubar .menbutton.disabled-hover {
	color:		#999999;
	border-right:	1px solid white;
	padding:	0px 7px 0px 7px;
}