MenĂ¼ gefixt und richtig gestyled
[kivitendo-erp.git] / css / kivitendo / menu.css
1 /* kivitendo menu Colors:
2 Menu Background color #FE5F14
3 orangemenu color #FFFFFF
4 whiteMenu Hover background color #FFFFE0
5 DarkGreensubenu pointer
6 */
7 body.menuv4 {
8         behavior: url("css/csshover.htc");
9         /*font-size: 14pt;*/
10         line-height: 20pt;
11         font-family: Verdana, Geneva, Tahoma, sans-serif;
12         background-color: #FFFFFF;
13         color: #000000;
14 }
15 #menuv4 {
16         /*font-size: 85%;*/
17         width: 99.8%;
18         float: left;
19         /*border: 3px solid;*/
20         background-color: #FFFFFF;
21         color: #000000;
22         margin-top: 0.2em;
23 }
24 #menuv4 a, #menuv4 h2, #menuv4 div.x {
25         font-size: 80%;
26         line-height: 120%;
27         display: block;
28         border: 0;
29         white-space: nowrap;
30         margin: 0;
31         padding: 0.3em 1em;
32 }
33 #menuv4 h2:before {
34         content: " ";
35 }
36 #menuv4 h2:after {
37         content: " ";
38 }
39 #menuv4 h2 {
40         background-color: #ffffff;
41         color: #000000;
42         /*padding: 2px 15px;*/
43 /* Firefox */
44         -moz-border-radius: 0.4em 0.4em 0;
45 /* Safari, Chrome */
46         -webkit-border-radius: 0.4em 0.4em 0;
47 /* Konqueror */
48         -khtml-border-radius: 0.4em 0.4em 0;
49 /* CSS3 */
50         border-radius: 0.4em 0.4em 0 0;
51 /*      behavior: url(border-radius.htc); */
52 }
53 #menuv4 ul:hover h2 {
54         background-color:#DCDCDC;
55 }
56 #menuv4 a, #menuv4 a:visited, #menuv4 div.x, #menuv4 div.x:visited {
57         color: #000000;
58         text-decoration: none;
59         padding-right: 10px;
60 }
61 #menuv4 a {
62         background: #EBEBEB;
63 }
64 #menuv4 div.x, #menuv4 div.x:visited {
65         background-color: #EBEBEB;
66         border-right: 1em solid #FE5F14;
67 }
68 #menuv4 div.x:hover {
69         border-right: none;
70 }
71 #menuv4 a:hover, #menuv4 div.x:hover {
72         color: #FE5F14;
73         background-color: #EBEBEB;
74 }
75 #menuv4 a:active, #menuv4 div.x:active {
76         color: #FE5F14;
77         background-color: #EBEBEB;
78 }
79 #menuv4 ul {
80         list-style: none;
81         margin: 0;
82         padding: 0;
83         float: left;
84 }
85
86 #menuv4 li {
87         position: relative;
88         float: none;
89         border: 0;
90 }
91 li.sub {
92         position: relativ;
93         left: 0.2em;
94         top: 0px;
95         background-color: #FFFFFF;
96 }
97 /* IE6 spacing bug fix, <li>s without a bottom border get spaced to far  * correction:the bug will change the height of the parent element! this will also cause the whole menu to grow  * so the only method to get this pile of crap going is to add a bottom border to the <li>s, where the enclosing <ul> already has * a bottom border, which just looks ugly * the trick:color the bottom border with the same color as the bottom pixel of the background image - noone notices */
98 #menuv4 ul li {
99         /* border: solid;
100         border-color: #991900;
101         border-width: 0 0 1px 0;
102 */
103 }
104 #menuv4 ul ul {
105         padding: 0 2em 2em 2em;
106         margin: 0 -2em -2em -2em;
107 }
108 #menuv4 ul ul li {
109         /*padding-top: 0.01em;*/
110         background-color: #FFFFFF;
111 }
112 /* IE6 event bug fix, without a background there hovers will be occassionally lost between the li's to the layer below  * causing the menu to close. Opera 9 has the same bug btw. */
113 #menuv4 ul ul {
114         position: absolute;
115         z-index: 500;
116         top: auto;
117         display: none;
118 }
119 #menuv4 ul ul ul {
120         top: 0;
121         left: 99%;
122         padding: 2em;
123         margin: -2em;
124 }
125 #menuv4 ul ul ul li {
126         border-left: 0.2em solid #EBEBEB;
127 }
128 /* Begin non-anchor hover selectors */
129 /* Enter the more specific element (div) selectoron non-anchor hovers for IE5.x to comply with theolder version of csshover.htc - V1.21.041022. Itimproves IE's performance speed to use the olderfile and this method */
130 div#menuv4 h2:hover {
131         background: #EBEBEB;
132         color: #FE5F14;
133 }
134 div#menuv4 li:hover {
135         cursor: pointer;
136         z-index: 100;
137 }
138 div#menuv4 li:hover ul ul, div#menuv4 li li:hover ul ul, div#menuv4 li li li:hover ul ul, div#menuv4 li li li li:hover ul ul {
139         display: none;
140 }
141 div#menuv4 li:hover ul, div#menuv4 li li:hover ul, div#menuv4 li li li:hover ul, div#menuv4 li li li li:hover ul {
142         display: block;
143         position: relativ: left: 10px;
144 }
145 /* End of non-anchor hover selectors */
146
147 body.menuv3 {
148         behavior: url("css/csshover.htc");
149         /*font-size: 14pt;*/
150         line-height: 20pt;
151         font-family: Verdana, Geneva, Tahoma, sans-serif;
152         background-color: #FFFFFF;
153         color: #000000;
154 }
155 #menuv3 {
156         /*font-size: 85%;*/
157         width: 99.8%;
158         float: left;
159         /*border: 3px solid;*/
160         background-color: #FFFFFF;
161         color: #000000;
162         margin-top: 0.2em;
163 }
164 #menuv3 a, #menuv3 h2, #menuv3 div.x {
165         font-size: 80%;
166         line-height: 120%;
167         display: block;
168         border: 0;
169         white-space: nowrap;
170         margin: 0;
171         padding: 0.3em 1em;
172 }
173 #menuv3 h2:before {
174         content: " ";
175 }
176 #menuv3 h2:after {
177         content: " ";
178 }
179 #menuv3 h2 {
180         background-color: #ffffff;
181         color: #000000;
182         /*padding: 2px 15px;*/
183 /* Firefox */
184         -moz-border-radius: 0.4em 0.4em 0;
185 /* Safari, Chrome */
186         -webkit-border-radius: 0.4em 0.4em 0;
187 /* Konqueror */
188         -khtml-border-radius: 0.4em 0.4em 0;
189 /* CSS3 */
190         border-radius: 0.4em 0.4em 0 0;
191 /*      behavior: url(border-radius.htc); */
192 }
193 #menuv3 ul:hover h2 {
194         background-color:#DCDCDC;
195 }
196 #menuv3 a, #menuv3 a:visited, #menuv3 div.x, #menuv3 div.x:visited {
197         color: #000000;
198         text-decoration: none;
199         padding-right: 10px;
200 }
201 #menuv3 a {
202         background: #EBEBEB;
203 }
204 #menuv3 div.x, #menuv3 div.x:visited {
205         background-color: #EBEBEB;
206         border-right: 1em solid #FE5F14;
207 }
208 #menuv3 div.x:hover {
209         border-right: none;
210 }
211 #menuv3 a:hover, #menuv3 div.x:hover {
212         color: #FE5F14;
213         background-color: #EBEBEB;
214 }
215 #menuv3 a:active, #menuv3 div.x:active {
216         color: #FE5F14;
217         background-color: #EBEBEB;
218 }
219 #menuv3 ul {
220         list-style: none;
221         margin: 0;
222         padding: 0;
223         float: left;
224 }
225
226 #menuv3 li {
227         position: relative;
228         float: none;
229         border: 0;
230 }
231 li.sub {
232         position: relativ;
233         left: 0.2em;
234         top: 0px;
235         background-color: #FFFFFF;
236 }
237 /* IE6 spacing bug fix, <li>s without a bottom border get spaced to far  * correction:the bug will change the height of the parent element! this will also cause the whole menu to grow  * so the only method to get this pile of crap going is to add a bottom border to the <li>s, where the enclosing <ul> already has * a bottom border, which just looks ugly * the trick:color the bottom border with the same color as the bottom pixel of the background image - noone notices */
238 #menuv3 ul li {
239         /* border: solid;
240         border-color: #991900;
241         border-width: 0 0 1px 0;
242 */
243 }
244 #menuv3 ul ul {
245         padding: 0 2em 2em 2em;
246         margin: 0 -2em -2em -2em;
247 }
248 #menuv3 ul ul li {
249         /*padding-top: 0.01em;*/
250         background-color: #FFFFFF;
251 }
252 /* IE6 event bug fix, without a background there hovers will be occassionally lost between the li's to the layer below  * causing the menu to close. Opera 9 has the same bug btw. */
253 #menuv3 ul ul {
254         position: absolute;
255         z-index: 500;
256         top: auto;
257         display: none;
258 }
259 #menuv3 ul ul ul {
260         top: 0;
261         left: 99%;
262         padding: 2em;
263         margin: -2em;
264 }
265 #menuv3 ul ul ul li {
266         border-left: 0.2em solid #EBEBEB;
267 }
268 /* Begin non-anchor hover selectors */
269 /* Enter the more specific element (div) selectoron non-anchor hovers for IE5.x to comply with theolder version of csshover.htc - V1.21.041022. Itimproves IE's performance speed to use the olderfile and this method */
270 div#menuv3 h2:hover {
271         background: #EBEBEB;
272         color: #FE5F14;
273 }
274 div#menuv3 li:hover {
275         cursor: pointer;
276         z-index: 100;
277 }
278 div#menuv3 li:hover ul ul, div#menuv3 li li:hover ul ul, div#menuv3 li li li:hover ul ul, div#menuv3 li li li li:hover ul ul {
279         display: none;
280 }
281 div#menuv3 li:hover ul, div#menuv3 li li:hover ul, div#menuv3 li li li:hover ul, div#menuv3 li li li li:hover ul {
282         display: block;
283         position: relativ: left: 10px;
284 }
285 /* End of non-anchor hover selectors */
286
287 #html-menu { float:left; white-space: nowrap; }
288 #html-menu tr { vertical-align: top; }
289 #html-menu div.menuitem { padding: 2px 4px 1px 4px; }
290 #html-menu div.submenu { font-weight: bold }
291 #html-menu img { vertical-align: middle; visibility:hidden; border: 0; }
292 #html-menu div.menuitem:first-child img { visibility:visible }
293 #html-menu a { vertical-align: top }
294 #html-menu .item span.menu-spacer { display: inline-block; width: 24px }
295 #html-menu .menu span.menu-spacer { display: inline-block; width: 32px }
296