css/mochaui/ui.css

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