css/dhtmlsuite/menu-item.css

   1 /* CSS FOR MENU ITEM OF TYPE "top" */\r
   2 \r
   3 .DHTMLSuite_menuItem_top_regular,.DHTMLSuite_menuItem_top_over,.DHTMLSuite_menuItem_top_click,.DHTMLSuite_menuItem_top_disabled,.DHTMLSuite_menuItem_top_active{\r
   4         height:19px;\r
   5 }\r
   6 .DHTMLSuite_menuItem_top_regular div,.DHTMLSuite_menuItem_top_over div,.DHTMLSuite_menuItem_top_click div,.DHTMLSuite_menuItem_top_disabled div,.DHTMLSuite_menuItem_top_active div{\r
   7         padding-top:2px;\r
   8         padding-bottom:2px;\r
   9 }\r
  10 .DHTMLSuite_menuItem_top_regular{       /* Top level menu item - Regular state */\r
  11         padding-left:4px;\r
  12         padding-right:4px;\r
  13         margin-right:2px;\r
  14         padding-top:1px;\r
  15         padding-bottom:1px;     \r
  16         cursor:pointer;\r
  17         line-height:16px;\r
  18         margin-top:2px;\r
  19 }\r
  20 \r
  21 .DHTMLSuite_menuItem_top_over{ /* Top level menu item - Mouse over state */\r
  22         padding-left:3px;\r
  23         padding-right:3px;\r
  24         margin-right:2px;\r
  25         border:1px solid #000;\r
  26         color:#000;\r
  27         background-color:#FFEEC2;\r
  28         cursor:pointer;\r
  29         line-height:16px;\r
  30         margin-top:2px;\r
  31 }\r
  32 \r
  33 .DHTMLSuite_menuItem_top_active{        /* Top level menu item - Active state - this is typical the state for menu item 1 when a sub group is expanded and the mouse is located over one of the sub menu items */\r
  34         padding-left:3px;\r
  35         padding-right:3px;\r
  36         margin-right:2px;\r
  37         border:1px solid #000;\r
  38         border-bottom:1px solid #FFF;\r
  39         cursor:pointer;\r
  40         line-height:16px;\r
  41         margin-top:2px;\r
  42 }\r
  43 \r
  44 .DHTMLSuite_menuItem_top_click{ /* Top level menu item - Mouse click state */\r
  45         padding-left:3px;\r
  46         padding-right:3px;\r
  47         margin-right:2px;\r
  48         border:1px solid #000;\r
  49         background-color:#FFB25C;\r
  50         cursor:pointer;\r
  51         line-height:16px;\r
  52         margin-top:2px;\r
  53         z-index:20000;\r
  54 }\r
  55 \r
  56 .DHTMLSuite_menuItem_top_disabled{      /* Disabled menu item */\r
  57         padding-left:4px;\r
  58         padding-right:4px;\r
  59         margin-right:2px;\r
  60         padding-top:1px;\r
  61         padding-bottom:1px;\r
  62         cursor:default;\r
  63         line-height:16px;\r
  64         margin-top:2px; \r
  65 }\r
  66 \r
  67 .DHTMLSuite_menuItem_top_disabled img,.DHTMLSuite_menuItem_top_disabled div{    /* Sub divs of disabled top level items. A menu item is a div with some subdivs(one for the icon, one for text etc.). this is the css for these sub divs */\r
  68         filter:alpha(opacity=40);       /* Transparency */\r
  69         opacity:0.4;    /* Transparency */\r
  70         -moz-opacity:0.4;       /* Transparency */\r
  71         -khtml-opacity:.4;      /* Transparency */\r
  72 }\r
  73 \r
  74 .DHTMLSuite_menuItem_top_disabled div,.DHTMLSuite_menuItem_top_active div, .DHTMLSuite_menuItem_top_click div, .DHTMLSuite_menuItem_top_regular div,.DHTMLSuite_menuItem_top_over div{  /* divs for the text,icon and arrow of a menu item */\r
  75         float:left;\r
  76         padding-left:1px;\r
  77         padding-right:1px;\r
  78 }\r
  79 \r
  80 /* CSS FOR THE SMALL ARROW DIV - WHEN YOU CLICK ON THIS DIV, SUB ELEMENTS WILL SHOW */\r
  81 .DHTMLSuite_menuItem_top_arrowShowSub{  /* This is the arrow for top level elements */\r
  82         width:12px;     /* Width of item */\r
  83         background-repeat:no-repeat;    /* No background repeat for the arrow */\r
  84         background-position:center center;      /* Position of the arrow. at the center of this div */\r
  85         background-image: url('../../image/dhtmlsuite/menu_strip_down_arrow.png');      /* Relative path to the arrow */\r
  86         margin:0px;     \r
  87         margin-right:-1px;      /* -1 pixel is added to get the arrow a little bit more to the right. this is because of the right padding of top level items */\r
  88         padding:0px;\r
  89         height:16px;\r
  90         margin-left:2px;\r
  91         float:right;\r
  92 }\r
  93 \r
  94 .DHTMLSuite_menuItem_top_over .DHTMLSuite_menuItem_top_arrowShowSub,\r
  95 .DHTMLSuite_menuItem_top_click .DHTMLSuite_menuItem_top_arrowShowSub\r
  96 {       /* Sub menu arrows */\r
  97         margin-left:1px;\r
  98         border-left:1px solid #000;\r
  99 }\r
 100 \r
 101 /* CSS FOR SEPARATOR */\r
 102 \r
 103 .DHTMLSuite_menuItem_separator_top{     /* Separator of type "top" */\r
 104         height:20px;\r
 105         margin-top:3px;\r
 106         margin-bottom:3px;\r
 107         width:4px;\r
 108         padding-left:3px;\r
 109         padding-right:3px;\r
 110         background-repeat:repeat-y;\r
 111         background-image:url('../../image/dhtmlsuite/menu_strip_separator.gif');\r
 112         \r
 113 }\r
 114 \r
 115 \r
 116 /* CSS FOR MENU ITEM OF TYPE "sub" */\r
 117 \r
 118 .DHTMLSuite_menuItem_sub_regular, .DHTMLSuite_menuItem_sub_over,.DHTMLSuite_menuItem_sub_click,.DHTMLSuite_menuItem_sub_disabled,.DHTMLSuite_menuItem_sub_active{       /* Commom css for regular, mouse over and mouse click items */\r
 119         clear:both;                     \r
 120         line-height:18px;       /* Height of menu item */\r
 121         height:18px;            /* Height of menu item */\r
 122         padding-left:25px;      /* Space inside the menu item - the 25 pixels are used in order to avoid text overlapping menu item icon */\r
 123         padding-right:4px;      /* Space inside the menu item */\r
 124         padding-top:2px;        /* Space inside the menu item */\r
 125         padding-bottom:2px;      /* Space inside the menu item */\r
 126         cursor:pointer;         /* Mouse cursor set to a "hand" */\r
 127         margin:1px;     /* A little space around the item */\r
 128         background-repeat:no-repeat;    /* No background repeat */\r
 129 }\r
 130 .DHTMLSuite_menuItem_sub_disabled{      /* Disabled sub menu item */\r
 131         cursor:default; /* Arrow as cursor instead of hand */\r
 132 }\r
 133 .DHTMLSuite_menuItem_sub_disabled div,.DHTMLSuite_menuItem_sub_disabled{        /* Disabled sub menu item - Here, we apply the rules on the divs inside the element, i.e. the div for the icon, text and arrow */\r
 134         filter:alpha(opacity=40);       /* Transparency */\r
 135         opacity:0.4;    /* Transparency */\r
 136         -moz-opacity:0.4;       /* Transparency */\r
 137         -khtml-opacity:.4;      /* Transparency */\r
 138 }\r
 139 .DHTMLSuite_menuItem_sub_regular,.DHTMLSuite_menuItem_sub_disabled{     /* Regular menu item */\r
 140         margin-left:2px;        /* size of margin above + 1 pixel */\r
 141         padding-top:3px;        /* Size of padding-top above + 1 pixel */\r
 142         padding-bottom:3px;     /* Size of padding-bottom above + 1 pixel */\r
 143 }\r
 144 \r
 145 .DHTMLSuite_menuItem_sub_over,.DHTMLSuite_menuItem_sub_click,.DHTMLSuite_menuItem_sub_active{\r
 146         border:1px solid #006;  /* Border around mouse over items, click items and active items */\r
 147 }\r
 148 \r
 149 .DHTMLSuite_menuItem_sub_over,.DHTMLSuite_menuItem_sub_active{  /* Mouse over effect */ \r
 150         background-color:#FFEEC2;               /* Background color of mouse over items and active items(Active item = parent elements of the menu item the mouse is currently over */\r
 151 }\r
 152 \r
 153 .DHTMLSuite_menuItem_sub_click{ /* Mouse click effect */\r
 154         background-color:#FFB25C;       /* Background color when the mouse button is pressed down on a menu item */\r
 155 }\r
 156 \r
 157 .DHTMLSuite_menuItem_sub_click div, .DHTMLSuite_menuItem_sub_regular div,.DHTMLSuite_menuItem_sub_over div,.DHTMLSuite_menuItem_sub_active div,.DHTMLSuite_menuItem_sub_disabled div{   /* divs for the text,icon and arrow of a menu item */\r
 158         float:left;             /* To get the icons and text of sub elements side by side */\r
 159         padding-left:1px;\r
 160         padding-right:1px;\r
 161         \r
 162 }\r
 163 .DHTMLSuite_menuItem_sub_arrowShowSub{  /* Arrow div for sub elements (Right pointing arrow ) */\r
 164         position:absolute;      /* Never change this one */\r
 165         background-image:url('../../image/dhtmlsuite/menu-bar-right-arrow.png');        /* Path relative to the css file */\r
 166         width:18px;\r
 167         height:18px;\r
 168         text-align:right;       \r
 169         right:0px;\r
 170         background-repeat:no-repeat;    /* No background repeat */\r
 171         background-position: center right;      /* Position of arrow */\r
 172 }\r
 173 \r
 174 \r
 175 .DHTMLSuite_menuItem_separator_sub{     /* Separator of type "sub" */\r
 176         height:1px;     /* Height of separator */\r
 177         margin-top:1px; /* Space above the separator */\r
 178         margin-bottom:1px;      /* Space below the separator */\r
 179         margin-left:24px;       /* left margin because we don't want the separator to cover the gradient */\r
 180         padding-right:3px;      /* space at the right of the separator */\r
 181         background-color:#6A8CCB;       /* background color for the separator - blue */\r
 182 }\r
 183 \r
 184 \r