]>
Commit | Line | Data |
---|---|---|
08137ae6 CP |
1 | /*\r |
2 | \r | |
3 | CSS for Mocha UI\r | |
4 | \r | |
5 | Copyright:\r | |
6 | Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>.\r | |
7 | \r | |
8 | License:\r | |
9 | MIT-style license.\r | |
10 | \r | |
11 | */\r | |
12 | \r | |
13 | /* Layout\r | |
14 | ---------------------------------------------------------------- */\r | |
15 | \r | |
16 | html, body {\r | |
17 | overflow: hidden;\r | |
18 | }\r | |
19 | \r | |
20 | body {\r | |
21 | margin: 0; /* Required */\r | |
22 | background: #fff; /* #6989b3 url(../../images/mochaui/splash.gif) center center no-repeat; */\r | |
23 | }\r | |
24 | \r | |
25 | #desktop {\r | |
26 | visibility: hidden; \r | |
27 | position: relative;\r | |
28 | min-width: 750px; /* Helps keep header content from wrapping */\r | |
29 | height: 100%;\r | |
30 | overflow: hidden;\r | |
31 | cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */\r | |
32 | }\r | |
33 | \r | |
34 | #desktopHeader {\r | |
35 | background: #f1f1f1;\r | |
36 | }\r | |
37 | \r | |
38 | #desktopTitlebarWrapper {\r | |
39 | position: relative; \r | |
40 | height: 45px;\r | |
41 | overflow: hidden;\r | |
42 | background: #333 url(../../images/mochaui/bg-header.gif) repeat-x;\r | |
43 | }\r | |
44 | \r | |
45 | #desktopTitlebar {\r | |
46 | padding: 7px 8px 6px 8px;\r | |
47 | height: 32px;\r | |
48 | background: url(../../images/mochaui/logo.gif) no-repeat;\r | |
49 | background-position: left 0;\r | |
50 | }\r | |
51 | \r | |
52 | #desktopTitlebar h1.applicationTitle {\r | |
53 | display: none;\r | |
54 | margin: 0;\r | |
55 | padding: 0 5px 0 0;\r | |
56 | font-size: 20px;\r | |
57 | line-height: 25px;\r | |
58 | font-weight: bold;\r | |
59 | color: #fff;\r | |
60 | }\r | |
61 | \r | |
62 | #desktopTitlebar h2.tagline {\r | |
63 | font-size: 12px;\r | |
64 | color: #b2b2b2;\r | |
65 | font-weight: bold;\r | |
66 | padding: 5px 0 0 0;\r | |
67 | text-align: center;\r | |
68 | }\r | |
69 | \r | |
70 | #desktopTitlebar h2.tagline .taglineEm {\r | |
71 | color: #fff;\r | |
72 | font-weight: bold;\r | |
73 | }\r | |
74 | \r | |
75 | #topNav {\r | |
76 | font-family: Verdana, Arial, Helvetica, sans-serif;\r | |
77 | font-size: 10px;\r | |
78 | position: absolute;\r | |
79 | right: 0;\r | |
80 | top: 0;\r | |
81 | color: #b2b2b2;\r | |
82 | text-align: right;\r | |
83 | padding: 13px 10px 0 0;\r | |
84 | }\r | |
85 | \r | |
86 | #topNav a {\r | |
87 | color: #7DD0FA;\r | |
88 | font-weight: normal;\r | |
89 | }\r | |
90 | \r | |
91 | #topNav a:hover {\r | |
92 | text-decoration: none;\r | |
93 | }\r | |
94 | \r | |
95 | /* Toolboxes */\r | |
96 | \r | |
97 | .toolbox {\r | |
98 | float: right;\r | |
99 | padding: 6px 3px 0 5px;\r | |
100 | height: 23px;\r | |
101 | overflow: hidden;\r | |
102 | }\r | |
103 | \r | |
104 | div.toolbox.divider { /* Have to specify div here for IE6's sake */\r | |
105 | background: url(../../images/mochaui/toolbox-divider.gif) left center no-repeat;\r | |
106 | padding: 6px 3px 0 12px;\r | |
107 | }\r | |
108 | \r | |
109 | div.toolbox.divider2 { /* Have to specify div here for IE6's sake */\r | |
110 | background: url(../../images/mochaui/toolbox-divider2.gif) left center no-repeat;\r | |
111 | padding: 6px 4px 0 12px;\r | |
112 | }\r | |
113 | \r | |
114 | .toolbox img {\r | |
115 | cursor: pointer;\r | |
116 | margin-right: 6px;\r | |
117 | padding: 0;\r | |
118 | float: left;\r | |
119 | }\r | |
120 | \r | |
121 | .toolbox img.disabled {\r | |
122 | cursor: default;\r | |
123 | }\r | |
124 | \r | |
125 | #spinnerWrapper {\r | |
126 | width: 16px;\r | |
127 | height: 16px;\r | |
128 | background: url(../../images/mochaui/spinner-placeholder.gif) no-repeat;\r | |
129 | margin-right: 5px;\r | |
130 | }\r | |
131 | \r | |
132 | #spinner {\r | |
133 | visibility: hidden;\r | |
134 | background: url(../../images/mochaui/spinner.gif) no-repeat;\r | |
135 | width: 16px;\r | |
136 | height: 16px;\r | |
137 | }\r | |
138 | \r | |
139 | /* Navbar */\r | |
140 | \r | |
141 | #desktopNavbar {\r | |
142 | background: #4C4C4C;\r | |
143 | height: 30px;\r | |
144 | margin: 0 0px; \r | |
145 | }\r | |
146 | \r | |
147 | #desktopNavbar ul { \r | |
148 | padding: 0;\r | |
149 | margin: 0;\r | |
150 | list-style: none;\r | |
151 | font-size: 12px;\r | |
152 | }\r | |
153 | \r | |
154 | #desktopNavbar li {\r | |
155 | float: left;\r | |
156 | }\r | |
157 | \r | |
158 | #desktopNavbar a {\r | |
159 | display: block;\r | |
160 | } \r | |
161 | \r | |
162 | #desktopNavbar ul li a {\r | |
163 | padding: 6px 10px 6px 10px; \r | |
164 | color: #b2b2b2;\r | |
165 | font-weight: normal;\r | |
166 | }\r | |
167 | \r | |
168 | #desktopNavbar ul li a:hover {\r | |
169 | color: #fff;\r | |
170 | }\r | |
171 | \r | |
172 | #desktopNavbar ul li a.arrow-right, #desktopNavbar ul li a:hover.arrow-right {\r | |
173 | background-image: url(../../images/mochaui/arrow-right.gif);\r | |
174 | background-repeat: no-repeat;\r | |
175 | background-position: right 7px; \r | |
176 | } \r | |
177 | \r | |
178 | #desktopNavbar li ul {\r | |
179 | padding: 2px;\r | |
180 | border: 1px solid #3f3f3f;\r | |
181 | background: #fff url(../../images/mochaui/bg-dropdown.gif) repeat-y;\r | |
182 | position: absolute;\r | |
183 | width: 164px;\r | |
184 | left: -999em;\r | |
185 | z-index: 8000;\r | |
186 | }\r | |
187 | \r | |
188 | #desktopNavbar li:hover ul ul,\r | |
189 | #desktopNavbar li.ieHover ul ul,\r | |
190 | #desktopNavbar li:hover ul ul ul,\r | |
191 | #desktopNavbar li.ieHover ul ul ul {\r | |
192 | left: -999em;\r | |
193 | }\r | |
194 | \r | |
195 | #desktopNavbar li ul ul { /* third-and-above-level lists */\r | |
196 | margin: -22px 0 0 164px;\r | |
197 | }\r | |
198 | \r | |
199 | #desktopNavbar li ul li .check {\r | |
200 | position: absolute;\r | |
201 | top: 8px;\r | |
202 | left: 6px;\r | |
203 | width: 5px;\r | |
204 | height: 5px;\r | |
205 | background: #555;\r | |
206 | overflow: hidden;\r | |
207 | line-height: 1px;\r | |
208 | font-size: 1px;\r | |
209 | }\r | |
210 | \r | |
211 | #desktopNavbar li ul li a {\r | |
212 | position: relative;\r | |
213 | padding: 1px 9px 1px 25px;\r | |
214 | width: 130px;\r | |
215 | color: #3f3f3f;\r | |
216 | font-weight: normal;\r | |
217 | }\r | |
218 | \r | |
219 | #desktopNavbar li ul li a:hover {\r | |
220 | background: #6C98D9;\r | |
221 | color: #fff;\r | |
222 | }\r | |
223 | \r | |
224 | #desktopNavbar li ul li a:hover .check {\r | |
225 | background: #fff;\r | |
226 | }\r | |
227 | \r | |
228 | #desktopNavbar li:hover ul,\r | |
229 | #desktopNavbar li.ieHover ul,\r | |
230 | #desktopNavbar li li.ieHover ul,\r | |
231 | #desktopNavbar li li li.ieHover ul,\r | |
232 | #desktopNavbar li li:hover ul,\r | |
233 | #desktopNavbar li li li:hover ul { /* lists nested under hovered list items */\r | |
234 | left: auto;\r | |
235 | }\r | |
236 | \r | |
237 | #desktopNavbar li:hover { /* For IE7 */\r | |
238 | position: static;\r | |
239 | }\r | |
240 | \r | |
241 | li.divider {\r | |
242 | margin-top: 2px;\r | |
243 | padding-top: 3px; \r | |
244 | border-top: 1px solid #ebebeb;\r | |
245 | } \r | |
246 | \r | |
247 | #pageWrapper {\r | |
248 | position: relative;\r | |
249 | overflow: hidden; /* This can be set to hidden or auto */\r | |
250 | border-top: 1px solid #222;\r | |
251 | }\r | |
252 | \r | |
253 | /* Footer */\r | |
254 | #desktopFooterWrapper {\r | |
255 | position: absolute;\r | |
256 | left: 0;\r | |
257 | bottom: 0;\r | |
258 | width: 100%;\r | |
259 | height: 30px;\r | |
260 | overflow: hidden;\r | |
261 | border-top: 1px solid #222;\r | |
262 | }\r | |
263 | \r | |
264 | #desktopFooter {\r | |
265 | font-family: Verdana, Arial, Helvetica, sans-serif;\r | |
266 | font-size: 10px;\r | |
267 | height: 24px;\r | |
268 | padding: 6px 8px 0 8px;\r | |
269 | background: #333;\r | |
270 | color: #b2b2b2;\r | |
271 | }\r | |
272 | \r | |
273 | #desktopFooter a {\r | |
274 | color: #7DD0FA;\r | |
275 | font-weight: normal;\r | |
276 | }\r | |
277 | \r | |
278 | #desktopFooter a:hover {\r | |
279 | text-decoration: none;\r | |
280 | }\r | |
281 | \r | |
282 | /* Dock/Taskbar */\r | |
283 | \r | |
284 | #dockWrapper {\r | |
285 | display: none;\r | |
286 | width: 100%;\r | |
287 | border-top: 1px solid #222;\r | |
288 | }\r | |
289 | \r | |
290 | #dockWrapper.top {\r | |
291 | border: 0;\r | |
292 | }\r | |
293 | \r | |
294 | #dock {\r | |
295 | position: relative;\r | |
296 | padding: 3px 16px 0 6px;\r | |
297 | bottom: 0;\r | |
298 | left: 0;\r | |
299 | background: #4c4c4c;\r | |
300 | min-height: 27px;\r | |
301 | height: auto;\r | |
302 | }\r | |
303 | \r | |
304 | *html #dock {\r | |
305 | height: 30px; /* Used for IE 6.0 since it does not support min-height */\r | |
306 | }\r | |
307 | \r | |
308 | .dockTab {\r | |
309 | float: left;\r | |
310 | position: relative; \r | |
311 | font-size: 11px;\r | |
312 | width: 150px;\r | |
313 | height: 24px;\r | |
314 | margin: 0 3px 2px 0;\r | |
315 | overflow: hidden; \r | |
316 | cursor: pointer;\r | |
317 | background: url(../../images/mochaui/dock-tabs.gif) left top no-repeat;\r | |
318 | }\r | |
319 | \r | |
320 | .dockTab.activeDockTab { \r | |
321 | background-position: left -24px;\r | |
322 | }\r | |
323 | \r | |
324 | .dockText {\r | |
325 | position: absolute;\r | |
326 | top: 0;\r | |
327 | left: 0;\r | |
328 | display: block;\r | |
329 | font-weight: normal;\r | |
330 | color: #bbb; \r | |
331 | text-align: left;\r | |
332 | padding: 4px 10px 2px 10px;\r | |
333 | width: 130px;\r | |
334 | height: 19px;\r | |
335 | overflow: hidden;\r | |
336 | }\r | |
337 | \r | |
338 | .dockText:hover {\r | |
339 | color: #fff;\r | |
340 | }\r | |
341 | \r | |
342 | .dockTab.activeDockTab .dockText {\r | |
343 | color: #fff;\r | |
344 | }\r | |
345 | \r | |
346 | #dockCanvas {\r | |
347 | position: absolute;\r | |
348 | top: 5px;\r | |
349 | right: 3px;\r | |
350 | z-index: 2;\r | |
351 | }\r | |
352 | \r | |
353 | #dockPlacement {\r | |
354 | position: absolute;\r | |
355 | top: 4px;\r | |
356 | right: 8px;\r | |
357 | width: 10px;\r | |
358 | height: 9px;\r | |
359 | opacity: 0;\r | |
360 | filter: alpha(opacity=0);\r | |
361 | -moz-opacity: 0;\r | |
362 | background: #f00; /* for troubleshooting */\r | |
363 | cursor: pointer;\r | |
364 | z-index: 3; /* for IE */\r | |
365 | text-align: right;\r | |
366 | }\r | |
367 | \r | |
368 | #dockAutoHide {\r | |
369 | position: absolute;\r | |
370 | top: 14px;\r | |
371 | right: 8px;\r | |
372 | width: 10px;\r | |
373 | height: 9px;\r | |
374 | opacity: 0;\r | |
375 | filter: alpha(opacity=0);\r | |
376 | -moz-opacity: 0;\r | |
377 | background: #f00; /* for troubleshooting */\r | |
378 | cursor: pointer;\r | |
379 | z-index: 3; /* for IE */\r | |
380 | }\r | |
381 | \r | |
382 | /* Panel Layout\r | |
383 | ---------------------------------------------------------------- */\r | |
384 | \r | |
385 | /* Columns */\r | |
386 | \r | |
387 | .column {\r | |
388 | position: relative; \r | |
389 | float: left;\r | |
390 | overflow: hidden;\r | |
391 | background: #f1f1f1;\r | |
392 | }\r | |
393 | \r | |
394 | /* Panels */\r | |
395 | \r | |
396 | .panel {\r | |
397 | position: relative; \r | |
398 | overflow: auto;\r | |
399 | border-bottom: 1px solid #b9b9b9;\r | |
400 | border-top: 0;\r | |
401 | }\r | |
402 | \r | |
403 | .pad {\r | |
404 | position: absolute;\r | |
405 | top: 0;\r | |
406 | left: 0;\r | |
407 | padding: 8px;\r | |
408 | overflow: hidden;\r | |
409 | }\r | |
410 | \r | |
411 | #mainPanel {\r | |
412 | background: #fff; \r | |
413 | } \r | |
414 | \r | |
415 | .panel-header {\r | |
416 | position: relative; \r | |
417 | background: #f1f1f1 url(../../images/mochaui/bg-panel-header.gif) repeat-x;\r | |
418 | height: 30px;\r | |
419 | overflow: hidden;\r | |
420 | border-bottom: 1px solid #d3d3d3; \r | |
421 | }\r | |
422 | \r | |
423 | .panel-headerContent {\r | |
424 | padding-top: 2px;\r | |
425 | } \r | |
426 | \r | |
427 | .panel-headerContent.tabs {\r | |
428 | background: url(../../images/mochaui/tabs.gif) repeat-x;\r | |
429 | background-position: left -68px; \r | |
430 | }\r | |
431 | \r | |
432 | .panel-header h2 {\r | |
433 | display: inline-block;\r | |
434 | font-size: 12px;\r | |
435 | margin: 0;\r | |
436 | padding: 3px 8px 0 8px;\r | |
437 | height: 22px;\r | |
438 | overflow: hidden;\r | |
439 | color: #3f3f3f;\r | |
440 | }\r | |
441 | \r | |
442 | .panel-header-toolbox {\r | |
443 | float: right;\r | |
444 | height: 26px;\r | |
445 | margin: 2px 5px 5px 0;\r | |
446 | text-align: right;\r | |
447 | }\r | |
448 | \r | |
449 | .panel-collapse {\r | |
450 | background: url(../../images/mochaui/collapse-expand.gif) left top no-repeat;\r | |
451 | }\r | |
452 | \r | |
453 | .panel-expand {\r | |
454 | background: url(../../images/mochaui/collapse-expand.gif) left -16px no-repeat;\r | |
455 | }\r | |
456 | \r | |
457 | .icon16 {\r | |
458 | margin: 5px 0 0 2px;\r | |
459 | cursor: pointer;\r | |
460 | }\r | |
461 | \r | |
462 | .panel-footerWrapper {\r | |
463 | position: absolute;\r | |
464 | left: 0;\r | |
465 | bottom: 0;\r | |
466 | width: 100%;\r | |
467 | background: #f9f9f9;\r | |
468 | height: 30px;\r | |
469 | overflow: hidden;\r | |
470 | border-top: 1px solid #b9b9b9;\r | |
471 | }\r | |
472 | \r | |
473 | .panel-footer {\r | |
474 | padding: 1px 0 0 8px; \r | |
475 | }\r | |
476 | \r | |
477 | .panel-footerContent {\r | |
478 | margin-top: 5px;\r | |
479 | }\r | |
480 | \r | |
481 | /* Handles */ \r | |
482 | \r | |
483 | .horizontalHandle {\r | |
484 | height: 4px;\r | |
485 | line-height: 1px;\r | |
486 | font-size: 1px;\r | |
487 | overflow: hidden;\r | |
488 | background: #d1d1d1 url(../../images/mochaui/bg-handle-horizontal.gif) repeat-x;\r | |
489 | }\r | |
490 | \r | |
491 | .horizontalHandle.detached .handleIcon {\r | |
492 | background: transparent; \r | |
493 | }\r | |
494 | \r | |
495 | .horizontalHandle .handleIcon { \r | |
496 | margin: 0 auto;\r | |
497 | height: 4px;\r | |
498 | line-height: 1px;\r | |
499 | font-size: 1px;\r | |
500 | overflow: hidden;\r | |
501 | background: url(../../images/mochaui/handle-icon-horizontal.gif) center center no-repeat;\r | |
502 | }\r | |
503 | \r | |
504 | .columnHandle {\r | |
505 | min-height: 10px; \r | |
506 | float: left;\r | |
507 | width: 4px;\r | |
508 | overflow: hidden;\r | |
509 | background: #bbb url(../../images/mochaui/handle-icon.gif) center center no-repeat;\r | |
510 | border: 1px solid #9a9a9a;\r | |
511 | border-top: 0;\r | |
512 | }\r | |
513 | \r | |
514 | /* Viewport overlays\r | |
515 | ---------------------------------------------------------------- */\r | |
516 | \r | |
517 | #modalOverlay {\r | |
518 | display: none;\r | |
519 | position: fixed;\r | |
520 | top: 0;\r | |
521 | left: 0;\r | |
522 | width: 100%;\r | |
523 | background: #000;\r | |
524 | opacity: 0;\r | |
525 | filter: alpha(opacity=0);\r | |
526 | -moz-opacity: 0;\r | |
527 | z-index: 10000;\r | |
528 | }\r | |
529 | \r | |
530 | * html #modalOverlay {\r | |
531 | position: absolute;\r | |
532 | }\r | |
533 | \r | |
534 | /* Fix for IE6 select z-index issue */\r | |
535 | #modalFix {\r | |
536 | display: none;\r | |
537 | position: absolute;\r | |
538 | top: 0;\r | |
539 | left: 0;\r | |
540 | width: 100%;\r | |
541 | opacity: 0;\r | |
542 | filter: alpha(opacity=0);\r | |
543 | -moz-opacity: 0;\r | |
544 | z-index: 9999;\r | |
545 | }\r | |
546 | \r | |
547 | /* Underlay */\r | |
548 | \r | |
549 | #windowUnderlay { \r | |
550 | position: fixed;\r | |
551 | top: 0;\r | |
552 | left: 0;\r | |
553 | width: 100%;\r | |
554 | background: #fff; \r | |
555 | }\r | |
556 | \r | |
557 | * html #windowUnderlay { \r | |
558 | position: absolute;\r | |
559 | }\r | |
560 | \r | |
561 | /* Windows\r | |
562 | ---------------------------------------------------------------- */\r | |
563 | \r | |
564 | .mocha {\r | |
565 | position: absolute;\r | |
566 | top: 0;\r | |
567 | left: 0;\r | |
568 | display: none;\r | |
569 | overflow: hidden; \r | |
570 | }\r | |
571 | \r | |
572 | .mocha.isFocused { \r | |
573 | } \r | |
574 | \r | |
575 | .mochaOverlay {\r | |
576 | position: absolute;\r | |
577 | top: 0;\r | |
578 | left: 0; \r | |
579 | }\r | |
580 | \r | |
581 | .mochaTitlebar {\r | |
582 | width: 100%;\r | |
583 | overflow: hidden; \r | |
584 | }\r | |
585 | \r | |
586 | .mochaTitlebar h3 {\r | |
587 | font-size: 12px;\r | |
588 | line-height: 15px; \r | |
589 | font-weight: bold;\r | |
590 | margin: 5px 10px 4px 12px;\r | |
591 | padding: 0;\r | |
592 | color: #888;\r | |
593 | }\r | |
594 | \r | |
595 | .mocha.isFocused .mochaTitlebar h3 {\r | |
596 | color: #141414;\r | |
597 | }\r | |
598 | \r | |
599 | .mochaToolbarWrapper {\r | |
600 | width: 100%; /* For IE */\r | |
601 | position: relative;\r | |
602 | height: 29px;\r | |
603 | background: #f1f1f1; \r | |
604 | overflow: hidden;\r | |
605 | border-top: 1px solid #d9d9d9;\r | |
606 | }\r | |
607 | \r | |
608 | div.mochaToolbarWrapper.bottom {\r | |
609 | border: 0;\r | |
610 | border-bottom: 1px solid #d9d9d9;\r | |
611 | }\r | |
612 | \r | |
613 | .mochaToolbar {\r | |
614 | width: 100%; /* For IE */\r | |
615 | border-top: 1px solid #fff;\r | |
616 | }\r | |
617 | \r | |
618 | .mochaContentBorder {\r | |
619 | border-top: 1px solid #dadada;\r | |
620 | border-bottom: 1px solid #dadada;\r | |
621 | }\r | |
622 | \r | |
623 | .mochaContentWrapper { /* Has a fixed height and scrollbars if required. */\r | |
624 | font-size: 12px;\r | |
625 | overflow: auto;\r | |
626 | }\r | |
627 | \r | |
628 | .mochaContent {\r | |
629 | padding: 10px 12px;\r | |
630 | }\r | |
631 | \r | |
632 | .mocha .handle {\r | |
633 | position: absolute;\r | |
634 | background: #0f0;\r | |
635 | width: 3px;\r | |
636 | height: 3px;\r | |
637 | z-index: 2;\r | |
638 | opacity: .0;\r | |
639 | filter: alpha(opacity=0);\r | |
640 | -moz-opacity: .0;\r | |
641 | overflow: hidden;\r | |
642 | font-size: 1px; /* For IE6 */\r | |
643 | }\r | |
644 | \r | |
645 | .mocha .corner { /* Corner resize handles */\r | |
646 | background: #f00;\r | |
647 | width: 10px;\r | |
648 | height: 10px;\r | |
649 | }\r | |
650 | \r | |
651 | .mocha .cornerSE { /* Bottom right resize handle */\r | |
652 | background: #f00;\r | |
653 | width: 20px;\r | |
654 | height: 20px;\r | |
655 | }\r | |
656 | \r | |
657 | .mochaCanvasHeader {\r | |
658 | position: absolute;\r | |
659 | top: 0;\r | |
660 | left: 0;\r | |
661 | background: transparent;\r | |
662 | z-index: -1;\r | |
663 | display: none;\r | |
664 | overflow: hidden;\r | |
665 | }\r | |
666 | \r | |
667 | .mochaControls {\r | |
668 | position: absolute;\r | |
669 | width: 52px;\r | |
670 | top: 8px;\r | |
671 | right: 8px;\r | |
672 | height: 14px;\r | |
673 | z-index: 4;\r | |
674 | background: transparent;\r | |
675 | }\r | |
676 | \r | |
677 | .mochaCanvasControls {\r | |
678 | position: absolute; \r | |
679 | top: 8px;\r | |
680 | right: 8px; \r | |
681 | z-index: 3;\r | |
682 | background: transparent;\r | |
683 | }\r | |
684 | \r | |
685 | /*\r | |
686 | To use images for these buttons:\r | |
687 | 1. Set the useCanvasControls window option to false.\r | |
688 | 2. If you use a different button size you may need to reposition the controls.\r | |
689 | Modify the controlsOffset window option. \r | |
690 | 2. Add background images to each button.\r | |
691 | \r | |
692 | */\r | |
693 | .mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton {\r | |
694 | float: right;\r | |
695 | width: 14px;\r | |
696 | height: 14px;\r | |
697 | font-size: 1px; \r | |
698 | cursor: pointer;\r | |
699 | z-index: 4;\r | |
700 | background: #f00;\r | |
701 | margin-left: 5px;\r | |
702 | }\r | |
703 | \r | |
704 | .mochaMinimizeButton {\r | |
705 | margin-left: 0;\r | |
706 | }\r | |
707 | \r | |
708 | .mochaMaximizeButton {\r | |
709 | }\r | |
710 | \r | |
711 | .mochaCloseButton {\r | |
712 | }\r | |
713 | \r | |
714 | .mochaSpinner{\r | |
715 | visibility: hidden; \r | |
716 | position: absolute;\r | |
717 | bottom: 7px;\r | |
718 | left: 6px;\r | |
719 | width: 16px;\r | |
720 | height: 16px;\r | |
721 | background: url(../../images/mochaui/spinner.gif) no-repeat;\r | |
722 | }\r | |
723 | \r | |
724 | .mochaIframe {\r | |
725 | width: 100%;\r | |
726 | } \r | |
727 | \r | |
728 | /* Fix for IE6 select z-index issue */\r | |
729 | .zIndexFix {\r | |
730 | display: block;\r | |
731 | position: absolute;\r | |
732 | top: 0;\r | |
733 | left: 0;\r | |
734 | z-index: -1;\r | |
735 | filter: mask();\r | |
736 | width: 100px;\r | |
737 | height: 100px;\r | |
738 | border: 1px solid transparent;\r | |
739 | }\r | |
740 | \r | |
741 | /* Modals */\r | |
742 | \r | |
743 | .modal2 {\r | |
744 | border: 8px solid #fff; \r | |
745 | }\r | |
746 | \r | |
747 | .modal2 .mochaContentBorder {\r | |
748 | border-width: 0px;\r | |
749 | }\r | |
750 | \r | |
751 | /* Window Themes */\r | |
752 | \r | |
753 | .mocha.no-canvas {\r | |
754 | background: #f1f1f1;\r | |
755 | border: 2px solid #555; \r | |
756 | }\r | |
757 | \r | |
758 | .mocha.no-canvas .mochaTitlebar {\r | |
759 | background: #f1f1f1; \r | |
760 | }\r | |
761 | \r | |
762 | .mocha.transparent .mochaTitlebar h3 {\r | |
763 | color: #fff;\r | |
764 | display: none;\r | |
765 | }\r | |
766 | \r | |
767 | .mocha.notification .mochaTitlebar {\r | |
768 | opacity: .0;\r | |
769 | filter: alpha(opacity=0);\r | |
770 | -moz-opacity: 0;\r | |
771 | }\r | |
772 | \r | |
773 | .mocha.notification .mochaContentBorder {\r | |
774 | border-width: 0px;\r | |
775 | }\r | |
776 | \r | |
777 | .mocha.notification .mochaContentWrapper {\r | |
778 | text-align: center;\r | |
779 | font-size: 12px;\r | |
780 | font-weight: bold;\r | |
781 | }\r | |
782 | \r | |
783 | /* Compontents\r | |
784 | ---------------------------------------------------------------- */\r | |
785 | \r | |
786 | /* Toolbar Tabs */\r | |
787 | \r | |
788 | .toolbarTabs { \r | |
789 | padding: 0 5px 2px 2px;\r | |
790 | background: url(../../images/mochaui/tabs.gif) repeat-x;\r | |
791 | background-position: left -70px;\r | |
792 | overflow: visible;\r | |
793 | }\r | |
794 | \r | |
795 | .tab-menu { \r | |
796 | padding-top: 1px;\r | |
797 | list-style: none;\r | |
798 | margin: 0;\r | |
799 | padding: 0;\r | |
800 | line-height: 16px;\r | |
801 | font-size: 11px;\r | |
802 | }\r | |
803 | \r | |
804 | .tab-menu li {\r | |
805 | display: block;\r | |
806 | float: left;\r | |
807 | margin: 0 0 5px 0;\r | |
808 | cursor: pointer; \r | |
809 | background: url(../../images/mochaui/tabs.gif) repeat-x;\r | |
810 | background-position: left -35px;\r | |
811 | }\r | |
812 | \r | |
813 | .tab-menu li.selected {\r | |
814 | background: url(../../images/mochaui/tabs.gif) repeat-x;\r | |
815 | background-position: left 0;\r | |
816 | }\r | |
817 | \r | |
818 | .tab-menu li a {\r | |
819 | display: block;\r | |
820 | margin-left: 8px;\r | |
821 | padding: 6px 16px 5px 10px;\r | |
822 | text-align: center;\r | |
823 | font-weight: normal;\r | |
824 | color: #141414;\r | |
825 | background: url(../../images/mochaui/tabs.gif) repeat-x;\r | |
826 | background-position: right -35px; \r | |
827 | }\r | |
828 | \r | |
829 | .tab-menu li.selected a {\r | |
830 | color: #141414;\r | |
831 | font-weight: bold; \r | |
832 | background: url(../../images/mochaui/tabs.gif) repeat-x;\r | |
833 | background-position: right 0;\r | |
834 | }\r | |
835 | \r | |
836 | /* Accordian */\r | |
837 | \r | |
838 | .accordianWrapper {\r | |
839 | padding: 0;\r | |
840 | background: #fff;\r | |
841 | }\r | |
842 | \r | |
843 | .accordianToggler {\r | |
844 | margin: 0;\r | |
845 | padding: 6px 10px;\r | |
846 | background: #f1f1f1 url(../../images/mochaui/bg-panel-header.gif) repeat-x;\r | |
847 | font-size: 12px;\r | |
848 | cursor: pointer;\r | |
849 | border-top: 1px solid #e3e3e3; \r | |
850 | }\r | |
851 | \r | |
852 | .topToggler {\r | |
853 | border-top: none;\r | |
854 | }\r | |
855 | \r | |
856 | .accordianToggler.open {\r | |
857 | background: #fff url(../../images/mochaui/bg-panel-header.gif) repeat-x; \r | |
858 | }\r | |
859 | \r | |
860 | .accordianContent {\r | |
861 | padding: 10px 10px 5px 10px;\r | |
862 | }\r | |
863 | \r | |
864 | /* Sliders */\r | |
865 | \r | |
866 | .slider {\r | |
867 | clear: both;\r | |
868 | position: relative;\r | |
869 | font-size: 12px;\r | |
870 | font-weight: bold;\r | |
871 | width: 200px;\r | |
872 | margin-bottom: 15px; \r | |
873 | }\r | |
874 | \r | |
875 | .sliderWrapper {\r | |
876 | position: relative;\r | |
877 | font-size: 1px;\r | |
878 | line-height: 1px;\r | |
879 | height: 9px;\r | |
880 | width: 222px;\r | |
881 | }\r | |
882 | \r | |
883 | .sliderarea {\r | |
884 | position: absolute;\r | |
885 | top: 0;\r | |
886 | left: 0;\r | |
887 | height: 7px;\r | |
888 | width: 220px;\r | |
889 | font-size: 1px;\r | |
890 | line-height: 1px;\r | |
891 | background: url(../../images/mochaui/slider-area.gif) repeat-x;\r | |
892 | border: 1px solid #a3a3a3;\r | |
893 | border-bottom: 1px solid #ccc;\r | |
894 | border-left: 1px solid #ccc;\r | |
895 | margin: 0;\r | |
896 | padding: 0;\r | |
897 | overflow: hidden;\r | |
898 | }\r | |
899 | \r | |
900 | .sliderknob {\r | |
901 | position: absolute;\r | |
902 | top: 0;\r | |
903 | left: 0;\r | |
904 | height: 9px;\r | |
905 | width: 19px;\r | |
906 | font-size: 1px;\r | |
907 | line-height: 1px; \r | |
908 | background: url(../../images/mochaui/knob.gif) no-repeat;\r | |
909 | cursor: pointer;\r | |
910 | overflow: hidden;\r | |
911 | z-index: 2;\r | |
912 | }\r | |
913 | \r | |
914 | .update {\r | |
915 | padding-bottom: 5px; \r | |
916 | }\r | |
917 | \r | |
918 | /* Folder Tree */\r | |
919 | \r | |
920 | .tree {\r | |
921 | font-size: 11px;\r | |
922 | line-height: 15px;\r | |
923 | margin: 0;\r | |
924 | }\r | |
925 | \r | |
926 | .tree ul {\r | |
927 | margin: 0;\r | |
928 | }\r | |
929 | \r | |
930 | .tree li {\r | |
931 | list-style-type: none;\r | |
932 | white-space: nowrap;\r | |
933 | }\r | |
934 | \r | |
935 | .tree li a {\r | |
936 | color: #3f3f3f; \r | |
937 | } \r | |
938 | \r | |
939 | .tree li img {\r | |
940 | vertical-align: middle;\r | |
941 | width: 18px;\r | |
942 | height: 18px;\r | |
943 | overflow: hidden;\r | |
944 | }\r | |
945 | \r | |
946 | .tree li span {\r | |
947 | padding-left: 2px;\r | |
948 | }\r | |
949 | \r | |
950 | /* View Toggle */\r | |
951 | \r | |
952 | .viewToggle {\r | |
953 | position: absolute;\r | |
954 | top: 4px;\r | |
955 | right: 5px;\r | |
956 | width: 60px;\r | |
957 | text-align: right;\r | |
958 | }\r | |
959 | \r | |
960 | .viewToggle img.viewToggleList, .viewToggle img.viewToggleGrid {\r | |
961 | width: 28px;\r | |
962 | height: 22px;\r | |
963 | } \r | |
964 | \r | |
965 | .viewToggle img.viewToggleList {\r | |
966 | background: url(../../images/mochaui/view-toggle.gif) no-repeat;\r | |
967 | background-position: 0 -66px;\r | |
968 | }\r | |
969 | \r | |
970 | .viewToggle img.viewToggleGrid {\r | |
971 | background: url(../../images/mochaui/view-toggle.gif) no-repeat;\r | |
972 | background-position: 0 0;\r | |
973 | }\r | |
974 | \r | |
975 | /* Miscellaneous\r | |
976 | ---------------------------------------------------------------- */\r | |
977 | \r | |
978 | /* Window Builder Form Elements */\r | |
979 | \r | |
980 | #desktop form {\r | |
981 | margin: 0 0 0 0;\r | |
982 | padding: 5px 0 0 0;\r | |
983 | }\r | |
984 | \r | |
985 | #newWindowForm {\r | |
986 | width: 320px;\r | |
987 | }\r | |
988 | \r | |
989 | #desktop .input {\r | |
990 | width: 225px;\r | |
991 | padding: 1px 0 1px 3px;\r | |
992 | border: 1px solid #bbb; \r | |
993 | }\r | |
994 | \r | |
995 | #desktop textarea {\r | |
996 | width: 225px;\r | |
997 | height: 100px;\r | |
998 | padding: 1px 0 1px 3px;\r | |
999 | border: 1px solid #bbb;\r | |
1000 | }\r | |
1001 | \r | |
1002 | #desktop .formLabel {\r | |
1003 | float: left; \r | |
1004 | text-align: right;\r | |
1005 | width: 80px;\r | |
1006 | margin: 0 0 5px 0;\r | |
1007 | }\r | |
1008 | \r | |
1009 | #desktop .formField {\r | |
1010 | float: right;\r | |
1011 | margin: 0 0 5px 0;\r | |
1012 | padding: 0 0 0 0;\r | |
1013 | width: 230px;\r | |
1014 | }\r | |
1015 | \r | |
1016 | #desktop form .number {\r | |
1017 | width: 40px;\r | |
1018 | }\r | |
1019 | \r | |
1020 | /* Menus */\r | |
1021 | \r | |
1022 | .menu-right li {\r | |
1023 | list-style-type: none;\r | |
1024 | display: inline; \r | |
1025 | margin: 0 0 0 15px;\r | |
1026 | }\r | |
1027 | \r | |
1028 | /* Notifications */\r | |
1029 | \r | |
1030 | /* Success, error & notice boxes for messages and errors. */\r | |
1031 | .error,\r | |
1032 | .notice, \r | |
1033 | .success { padding: 8px; margin-bottom: 10px; border: 2px solid #ddd; }\r | |
1034 | .error { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; }\r | |
1035 | .notice { background: #FFF6BF; color: #817134; border-color: #FFD324; }\r | |
1036 | .success { background: #E6EFC2; color: #529214; border-color: #C6D880; }\r | |
1037 | .error a { color: #D12F19; }\r | |
1038 | .notice a { color: #817134; }\r | |
1039 | .success a { color: #529214; }\r | |
1040 | \r | |
1041 | \r | |
1042 | /* Clears */\r | |
1043 | \r | |
1044 | .clear {\r | |
1045 | clear: both;\r | |
1046 | height: 0;\r | |
1047 | }\r | |
1048 | \r | |
1049 | *html .clear {\r | |
1050 | height: 1%;\r | |
1051 | font-size: 1px;\r | |
1052 | line-height: 1px;\r | |
1053 | overflow: hidden;\r | |
1054 | visibility: hidden;\r | |
1055 | } |