source: Dev/branches/rest-dojo-ui/client/dijit/themes/claro/Menu.less @ 256

/* Menu 

There are three areas of styling for the Menu:  
 
 1. The menu 
        There are three types of menus:
        i)Context Menu
        ii)Drop down Menu
        iii) Navigation Menu
        All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
        .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
  .dijitMenuTable - for padding - also affects Select widget    
        
 2. The menu bar
        .dijitMenuBar - for border, margins, padding, background-color of the menu bar
        .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) 
        
 3. Menu items - items in the menu.  
        .dijitMenuItem - for color
        .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected   
        .dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item
        td.dijitMenuItemIconCell - for padding around a  menu item's icon
        td.dijitMenuItemLabel - for padding around a menu item's label  
        .dijitMenuSeparatorTop - for border, top border, of the separator
        .dijitMenuSeparatorBottom - for bottom margin of the separator
        
        Styles specific to ComboBox and FilteringSelect widgets: 
        .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
        .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu

*/

@import "variables";

.claro .dijitMenuBar {
        border: 1px solid @border-color;
        margin: 0;
        padding: 0;
        background-color: @bar-background-color;
        background-image: url(@image-common-highlight);
        background-position:0 0;
        background-repeat:repeat-x;
}
.dj_ie6 .claro .dijitMenuBar {
        background-image:none;
}
.claro .dijitMenu {
        background-repeat:repeat-y;
        background-color:@menu-background-color;
        border: 1px solid @popup-border-color;

        /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */
        margin: -1px 0;
}
.dj_ie6 .claro .dijitMenu {
        margin: 0;      /* above -1px makes top/bottom borders disappear on IE6 */
}
.claro .dijitMenuBar .dijitMenuItem {  
        padding: 6px 10px 7px;
        background-position:0 100px;
        margin:-1px;
}       
.claro .dijitMenuItem {
        background-image: url(@image-menu-highlight);
        background-position:0 -40px;
        background-repeat:repeat-x;
        color: @text-color;
}

/* this prevents jiggling upon hover of a menu item */
.claro .dijitMenuTable {
        border-collapse:separate;
        border-spacing:0 0;
        padding:0;
}
.claro .dijitMenuItem td{
        padding:1px;
}
/* hover over a MenuBarItem */
.claro .dijitMenuPassive .dijitMenuItemHover,
.claro .dijitMenuPassive .dijitMenuItemSelected {
        background-color: @hovered-background-color;
        border:solid 1px @hovered-border-color;
        background-position:0 0;
        color:@text-color;
        padding: 5px 9px 6px;
}
.claro .dijitMenuPassive .dijitMenuItemActive{
        background-position:0 -177px;
}
.dj_ie6 .claro .dijitMenuItem,
.dj_ie6 .claro .dijitMenuPassive .dijitMenuItem {
        background-image: none;
}

/* MenuBarItem that has been selected and menu drops down from it */
.claro .dijitMenuActive .dijitMenuItemHover,
.claro .dijitMenuActive .dijitMenuItemSelected {
        border:solid 1px @hovered-border-color;
        padding: 5px 9px 6px;
        background-color: @hovered-background-color;
        background-position:0 0;
        color:@hovered-text-color;
}
.dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
        padding-top: 6px;
        padding-bottom: 5px;
        margin-top: -3px;
}
.claro .dijitMenuActive .dijitMenuItemActive{
        background-color: @pressed-background-color;
        background-position:0 -177px;
}
.claro .dijitMenuItemActive {
        background-position:0 -177px;
}
.claro td.dijitMenuItemIconCell {
 padding: 2px;
 margin: 0 0 0 4px;
}
.claro td.dijitMenuItemLabel {
        padding-top: 5px;
        padding-bottom: 5px;
}
.claro .dijitMenuExpand {
        width: 7px;
        height: 7px;
        background-image: url(@image-arrow-sprite);
        background-position: -14px 0;
        margin-right:3px;
}
.claro .dijitMenuItemDisabled .dijitMenuItemIconCell {
        opacity:1;
}
.claro .dijitMenuSeparatorTop {
        height: auto;
        margin-top:1px; /* prevents spacing above/below separator */
        border-bottom: 1px solid @border-color
}
.claro .dijitMenuSeparatorBottom{
        height: auto;
        margin-bottom:1px;
}
/* the checked menu item */
.claro .dijitCheckedMenuItemIconChar {
        display: none;
}
.claro .dijitCheckedMenuItemIcon {
        background-image: url(@image-form-checkbox-and-radios);
        background-repeat:no-repeat;
        background-position: -15px 50%;
        width:15px;
        height:16px;
}
.dj_ie6 .claro .dijitCheckedMenuItemIcon {
        background-image: url(@image-form-checkbox-and-radios-ie6);
}
.claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
        background-position: 0 50%;
}

/*ComboBox Menu*/
.claro .dijitComboBoxMenu {
        margin-left:0;
        background-image: none;
}

.claro .dijitComboBoxMenu .dijitMenuItem {
        padding: @textbox-padding;      // Make drop down menu text line up with text in <input>.
        border-width:1px 0 1px 0;
        border-style:solid;
        border-color: @select-dropdownitem-background-color;
}
.claro .dijitComboBoxMenu .dijitMenuItemSelected {
        color:@selected-text-color;
        border-color:@hovered-border-color;
        background-color:@hovered-background-color;
}
.claro .dijitComboBoxMenu .dijitMenuItemHover {
        color: #000000;
        border-color: #769dc0;
        background-color: #abd6ff;
        background-position: 0 0;
}
.claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
        background-position:0 -177px;
        background-color: @select-dropdownitem-hovered-background-color;        /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
}
.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
        font-style: italic;
}