]> jfr.im git - irc/quakenet/qwebirc.git/blobdiff - static/css/mochaui/ui.css
Update to MochaUI 0.9.5.
[irc/quakenet/qwebirc.git] / static / css / mochaui / ui.css
index 787ff3f8e42b2a9663d871d3f77eb89d8d2efc0d..b37f8a105a82ac33f90ab1ee55a59f7a697e1ccc 100644 (file)
-/*
-
-CSS for Mocha UI
-
-Copyright:
-       Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>.
-       
-License:
-       MIT-style license.
-   
-*/   
-
-html, body {
-       height: 100%;
-       overflow: auto; /* Removes empty vertical scrollbars in IE */
-}              
-
-body {
-       margin: 0; /* Required */
-       background: #fff;
-}
-
-#desktop {
-       position: relative;
-       top: 0;
-       left: 0;
-       width: 100%;
-       min-width: 750px; /* Helps keep header content from wrapping */         
-       height: 100%;
-       min-height: 100%;       
-       overflow: hidden;
-       cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */     
-}                                                      
-
-#desktopHeader {
-       background: #fff; /* Will be the margin color between toolbars */
-}
-
-#desktopTitlebarWrapper {
-       position: relative;
-       height: 40px;
-       overflow: hidden;
-       background: #333 url(../images/bg-desktopTitlebar-bk.gif) repeat-x;     
-}
-       
-#desktopTitlebar {
-       padding: 7px 8px 6px 125px;
-       height: 23px;
-       background: url(../images/logo.gif) no-repeat;
-       background-position: 10px 0;            
-}      
-       
-#desktopTitlebar h1.applicationTitle {
-       display: none;  
-       margin: 0;
-       padding: 5px 0 0 0;
-       font-size: 20px;
-       font-weight: bold;
-       color: #fff;
-}
-       
-#desktopTitlebar h1.tagline {
-       font-size: 12px;
-       color: #d9d9d9;
-       font-weight: normal;
-       padding: 5px 0 0 0;     
-}
-
-#desktopTitlebar h1.tagline .taglineEm {
-       color: #fff;
-       font-weight: bold;      
-}      
-
-#topNav {
-       float: right;
-       color: #d9d9d9;
-       text-align: right;
-       padding: 5px 5px 0 0;
-}
-
-#topNav a {
-       color: #fff;
-       font-weight: bold;
-}
-
-#topNav a:hover {
-       color: #fff;
-       text-decoration: underline;
-}
-
-/* Toolboxes */
-
-.toolbox {     
-       float: right;
-       margin-top: 3px;
-       padding: 4px 10px 0 10px;
-       border-left: 1px solid #ccc;
-       height: 20px;
-       overflow: hidden;       
-}                              
-
-/* Navbar */
-
-#desktopNavbar {
-       background: #f1f1f1;
-       height: 30px;
-}
-
-#desktopNavbar ul {    
-       padding: 0;
-       margin: 0;
-       list-style: none;
-       font-size: 12px;
-}
-
-#desktopNavbar li {
-       float: left;                    
-}
-
-#desktopNavbar a {
-       display: block;
-}      
-       
-#desktopNavbar ul li a {
-       padding: 6px 10px 6px 10px;     
-       color: #3f3f3f;
-}
-
-#desktopNavbar ul li a:hover {
-       background-color: #ddd;
-}
-
-#desktopNavbar ul li a.arrow-right, #desktopNavbar ul li a:hover.arrow-right {
-       background-image: url(../images/arrow-right.gif);
-       background-repeat: no-repeat;
-       background-position: right 6px; 
-} 
-       
-#desktopNavbar li ul {
-       padding: 2px;
-       border: 1px solid #333;
-       background: #fff;
-       position: absolute;
-       width: 158px;
-       left: -999em;
-       z-index: 8000;
-}
-
-#desktopNavbar li:hover ul ul,
-#desktopNavbar li.ieHover ul ul,
-#desktopNavbar li:hover ul ul ul,
-#desktopNavbar li.ieHover ul ul ul {
-       left: -999em;
-}
-
-#desktopNavbar li ul ul { /* third-and-above-level lists */
-       margin: -22px 0 0 158px;
-} 
-
-#desktopNavbar li ul li .check {
-       position: absolute;
-       top: 7px;
-       left: 6px;
-       width: 5px;
-       height: 5px;
-       background: #00CC33;
-       overflow: hidden;
-       line-height: 1px;
-       font-size: 1px;
-}
-
-#desktopNavbar li ul li a {
-       position: relative;
-       padding: 1px 9px 1px 19px;
-       width: 130px;
-       color: #333;
-       font-weight: normal;
-}
-
-#desktopNavbar li ul li a:hover {
-       background: #eee;
-}
-
-#desktopNavbar li:hover ul,
-#desktopNavbar li.ieHover ul,
-#desktopNavbar li li.ieHover ul,
-#desktopNavbar li li li.ieHover ul,
-#desktopNavbar li li:hover ul,
-#desktopNavbar li li li:hover ul { /* lists nested under hovered list items */
-      left: auto;
-}
-
-#desktopNavbar li:hover { /* For IE7 */
-    position: static;
-}
-
-.divider {
-       margin-top: 2px;
-       padding-top: 3px;       
-       border-top: 1px solid #ddd;
-}      
-
-#pageWrapper {
-       position: relative;
-       overflow: hidden; /* This can be set to hidden or auto */
-}
-
-/* Footer */
-#desktopFooterWrapper {
-       background: #888;
-       padding: 1px 0 0 0;
-}
-
-#desktopFooter {
-       font-size: 11px;
-       height: 21px;
-       padding: 4px 10px 0 10px;
-       background: #343E47;
-       color: #fff;
-       border: 1px solid #202A33;
-}
-
-#desktopFooter a {
-       color: #fff;
-       font-weight: bold;      
-}
-
-#desktopFooter a:hover {
-       text-decoration: underline;
-}              
-
-/* Menus */
-
-.menu-right li {
-       list-style-type: none;
-       display: inline;        
-       margin: 0 0 0 15px;
-}      
-       
-/* Windows */
-       
-.mocha {
-       position: absolute;
-       top: 0;
-       left: 0;
-       display: none;
-       overflow: hidden;       
-}
-
-.mocha.isFocused {     
-}      
-
-.mochaOverlay {
-       position: absolute;
-       top: 0;
-       left: 0;        
-}
-       
-.mochaTitlebar {
-       width: 100%;
-       overflow: hidden;       
-}
-
-.mochaTitlebar h3 {
-       font-size: 12px;
-       line-height: 15px;      
-       font-weight: bold;
-       margin: 5px 10px 4px 12px;
-       padding: 0;
-       color: #888;
-}
-
-.mocha.isFocused .mochaTitlebar h3 {
-       color: #141414; 
-}
-       
-.mochaToolbarWrapper {
-       width: 100%; /* For IE */
-       position: relative;
-       height: 29px;
-       background: #fff;       
-       overflow: hidden;
-       border-top: 1px solid #d9d9d9;
-}
-
-.mochaToolbar {
-       width: 100%; /* For IE */
-       border-top: 1px solid #fff;
-}
-
-.toolbarTabs { 
-       padding: 0 5px 2px 2px;
-       background: #e4e4e4 url(../images/tabs.gif) repeat-x;
-       background-position: left -60px;        
-}
-
-.tab-menu {
-       padding-top: 1px;
-       list-style:     none;
-       margin: 0;
-       padding: 0;
-       line-height: 16px;
-       font-size: 11px;        
-}
-
-.tab-menu li {
-       display: block;
-       float: left;
-       margin: 0;
-       cursor: pointer;        
-       background: url(../images/tabs.gif) repeat-x;
-       background-position: left -30px;        
-}
-
-.tab-menu li.selected {
-       background: url(../images/tabs.gif) repeat-x;
-       background-position: left 0;    
-}
-
-.tab-menu li a {
-       display: block;
-       margin-left: 8px;
-       padding: 6px 16px 5px 10px;
-       text-align: center;
-       font-weight: normal;
-       color: #141414;
-       background: url(../images/tabs.gif) repeat-x;
-       background-position: right -30px;       
-}
-
-.tab-menu li.selected a {
-       color: #141414;
-       font-weight: bold;      
-       background: url(../images/tabs.gif) repeat-x;
-       background-position: right 0;   
-}      
-
-.mochaContentBorder {
-       border-top: 1px solid #dadada;  
-       border-bottom: 1px solid #dadada;
-}
-       
-.mochaContentWrapper { /* Has a fixed height and scrollbars if required. */
-       font-size: 12px;
-       overflow: auto; 
-}
-       
-.mochaContent {
-       padding: 10px 12px;
-}              
-
-.mocha .handle {
-       position: absolute;
-       background: #0f0;
-       width: 3px;
-       height: 3px;
-       z-index: 2;
-       opacity: .0;
-       filter: alpha(opacity=0);
-       -moz-opacity: .0;
-       overflow: hidden;
-       font-size: 1px; /* For IE6 */   
-}
-
-.mocha .corner { /* Corner resize handles */
-       background: #f00;
-       width: 10px;
-       height: 10px;
-}
-
-.mocha .cornerSE { /* Bottom right resize handle */
-       background: #f00;
-       width: 20px;
-       height: 20px;
-}
-
-.mochaCanvasHeader {
-       position: absolute;
-       top: 0;
-       left: 0;
-       background: transparent;
-       z-index: -1;
-       display: none;          
-       overflow: hidden;                       
-}
-
-.mochaControls {
-       position: absolute;
-       width: 52px;
-       top: 8px;
-       right: 8px;
-       height: 14px;
-       z-index: 4;
-       background: transparent;                
-}
-
-.mochaCanvasControls {
-       position: absolute;     
-       top: 8px;
-       right: 8px;     
-       z-index: 3;
-       background: transparent;                
-}
-
-/*
-       To use images for these buttons:
-       1. Set the useCanvasControls window option to false.
-       2. If you use a different button size you may need to reposition the controls.
-          Modify the controlsOffset window option.             
-       2. Add background images to each button.
-
-*/
-.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton {
-       float: right;
-       width: 14px;
-       height: 14px;
-       font-size: 1px; 
-       cursor: pointer;
-       z-index: 4;
-       background: #f00;       
-       margin-left: 5px;               
-}
-
-.mochaMinimizeButton {
-       margin-left: 0;         
-}
-
-.mochaMaximizeButton { 
-}
-
-.mochaCloseButton {            
-}
-
-.mochaLoadingIcon {
-       position: absolute;
-       bottom: 7px;
-       left: 6px;      
-}
-
-.mochaIframe {
-       width: 100%;
-}  
-       
-/* Sliders */
-
-.slider {
-       clear: both;
-       position: relative;
-       font-size: 12px;
-       font-weight: bold;
-       width: 200px;
-       margin-bottom: 15px;    
-}
-
-.sliderarea {
-       position: relative;
-       height: 6px;
-       width: 200px;
-       font-size: 1px;
-       line-height: 1px;
-       background: #dfdfdf;
-       margin: 0;
-       padding: 0;
-}
-.sliderknob {
-       position: absolute;
-       top: 0px;
-       height: 6px;
-       width: 13px;
-       font-size: 1px;
-       line-height: 1px;       
-       background: #888;
-       border-right: 1px solid #eee;
-       border-left: 1px solid #eee;    
-       cursor: pointer;
-       overflow: hidden;
-}
-       
-.update {
-       padding-bottom: 5px;    
-}      
-       
-.clear {
-       clear: both;
-       height: 0;
-}
-
-*html .clear {
-       height: 1%;
-       font-size: 1px;
-       line-height: 1px;
-       overflow: hidden;
-       visibility: hidden;
-}
-       
-/* Window Builder Form Elements */
-       
-#desktop form {
-       margin: 0 0 0 0;
-       padding: 5px 0 0 0;
-       width: 320px;
-}
-
-#desktop .input {
-       width: 225px;
-       padding: 1px 0 1px 3px;
-       border: 1px solid #bbb; 
-}
-
-#desktop textarea {
-       width: 225px;
-       height: 100px;
-       padding: 1px 0 1px 3px;
-       border: 1px solid #bbb; 
-}              
-
-#desktop .formLabel {
-       float: left;    
-       text-align: right;
-       width: 80px;
-       margin: 0 0 5px 0;      
-}
-       
-#desktop .formField {
-       float: right;
-       margin: 0 0 5px 0;
-       padding: 0 0 0 0;
-       width: 230px;
-}
-       
-#desktop form .number {
-       width: 40px;
-}
-       
-/* Modal Windows */
-#modalOverlay {
-       display: none;
-       position: fixed;
-       top: 0;
-       left: 0;
-       width: 100%;
-       background: #000;
-       opacity: 0;
-       filter: alpha(opacity=0);
-       -moz-opacity: 0;
-       z-index: 10000;
-}
-
-* html         #modalOverlay {
-       position: absolute;
-}
-
-/* Fix for IE6 select z-index issue */
-#modalFix {
-       display: none;
-       position: absolute;
-       top: 0;
-       left: 0;
-       width: 100%;
-       opacity: 0;
-       filter: alpha(opacity=0);
-       -moz-opacity: 0;
-       z-index: 9999;
-}
-
-/* Overlay */
-
-#windowUnderlay { 
-       position: fixed;
-       top: 0;
-       left: 0;
-       width: 100%;
-       background: #fff;       
-}
-
-* html #windowUnderlay { 
-       position: absolute;
-}      
-
-/* Fix for IE6 select z-index issue */
-iframe.zIndexFix {
-       display: block;
-       position: absolute;
-       top: 0;
-       left: 0;
-       z-index: -1;
-       filter: mask();
-       width: 100px;
-       height: 100px;
-       border: 1px solid transparent;
-}
-       
-/* Window Minimize Dock */
-
-#dockWrapper {
-       display: none;
-       background: #f1f1f1;
-       width: 100%;    
-}
-
-#dockWrapper.top {
-       border-top: 1px solid #d0d0d0;
-}
-
-#dock {
-       position: relative;
-       padding: 3px 15px 1px 15px;
-       bottom: 0;
-       left: 0;
-       width: 100%;
-       background: #f1f1f1;
-       border: 1px solid #f1f1f1;
-       min-height: 26px;
-       height: auto;
-   _height: 26px; /* IE 6.0 hack, for not supporting min-height */
-}
-
-.dockTab {
-       float: left;
-       font-size: 11px;
-       position: relative;
-       width: 140px;
-       height: 22px;
-       margin: 0 2px 2px 0;
-       overflow: hidden;       
-       cursor: pointer;
-       background: transparent url(../images/bg-desktopTitlebar.gif)  repeat-x;
-       border: 1px solid #c0c0c0;
-}      
-
-.dockTab.activeDockTab {
-       background: #fff;
-}      
-
-.dockText {
-       position: absolute;
-       top: 0;
-       left: 0;
-       display: block;
-       text-align: left;
-       padding: 2px 0 0 23px;
-       width: 115px;
-       height: 19px;
-       overflow: hidden;
-       background: url(../images/icons/page.gif) 2px 3px no-repeat;            
-}                      
-
-#dockCanvas {
-       position: absolute;
-       top: 4px;
-       left: 2px;
-       z-index: 2;
-}
-
-#dockPlacement {
-       position: absolute;
-       top: 3px;
-       left: 2px;
-       width: 10px;
-       height: 9px;
-       opacity: 0;
-       filter: alpha(opacity=0);
-       -moz-opacity: 0;
-       background: #f00; /* for troubleshooting */
-       cursor: pointer;
-       z-index: 3; /* for IE */        
-}
-
-#dockAutoHide {
-       position: absolute;
-       top: 13px;
-       left: 2px;
-       width: 10px;
-       height: 9px;
-       opacity: 0;
-       filter: alpha(opacity=0);
-       -moz-opacity: 0;
-       background: #f00; /* for troubleshooting */
-       cursor: pointer;
-       z-index: 3; /* for IE */                
-}
-
-/* Accordian */
-
-.accordianWrapper {
-       padding: 0;
-       background: #fff;       
-}
-
-.accordianToggler {
-       margin: 0;
-       padding: 6px 10px;
-       background: #fff url(../images/bg-desktopTitlebar.gif) repeat-x;
-       font-size: 12px;
-       cursor: pointer;
-       border-top: 1px solid #e3e3e3;  
-}
-
-.topToggler {
-       border-top: none;
-}
-
-.accordianToggler.open {
-       background: #fff url(../images/bg-desktopTitlebar.gif) repeat-x;        
-}
-
-.accordianContent {
-       padding: 10px 10px 5px 10px;
-}
-
-/* Window Themes */
-
-.mocha.transparent .mochaTitlebar h3 {
-       color: #fff;
-       display: none;  
-}
-
-.mocha.notification .mochaTitlebar {
-       opacity: .0;
-       filter: alpha(opacity=0);
-       -moz-opacity: 0;
-}
-
-.mocha.notification .mochaContentBorder {
-       border-width: 0px;
-}
-
-.mocha.notification .mochaContentWrapper {
-       text-align: center;
-       font-size: 12px;
-       font-weight: bold;
-}
-
-/* Folder Tree */
-
-.tree {
-       font-size: 11px;
-       line-height: 15px;
-       margin: 0;
-}
-
-.tree ul {
-       margin: 0;      
-}
-
-.tree li {
-       list-style-type: none;
-       white-space: nowrap;    
-}
-
-.tree li img {
-       vertical-align: middle;
-       width: 18px;
-       height: 18px;
-       overflow: hidden;
-}
-
-.tree li span {
-       padding-left: 2px;
-}       
\ No newline at end of file
+/*\r
+\r
+CSS for Mocha UI\r
+\r
+Copyright:\r
+       Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>.\r
+       \r
+License:\r
+       MIT-style license.\r
+\r
+*/\r
+\r
+/* Layout\r
+---------------------------------------------------------------- */\r
+\r
+html, body {\r
+       overflow: hidden;\r
+}\r
+\r
+body {\r
+       margin: 0; /* Required */\r
+       background: #fff; /* #6989b3 url(../../images/mochaui/splash.gif) center center no-repeat; */\r
+}\r
+\r
+#desktop {\r
+       visibility: hidden; \r
+       position: relative;\r
+       min-width: 750px; /* Helps keep header content from wrapping */\r
+       height: 100%;\r
+       overflow: hidden;\r
+       cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */\r
+}\r
+\r
+#desktopHeader {\r
+       background: #f1f1f1;\r
+}\r
+\r
+#desktopTitlebarWrapper {\r
+       position: relative;     \r
+       height: 45px;\r
+       overflow: hidden;\r
+       background: #333 url(../../images/mochaui/bg-header.gif) repeat-x;\r
+}\r
+\r
+#desktopTitlebar {\r
+       padding: 7px 8px 6px 8px;\r
+       height: 32px;\r
+       background: url(../../images/mochaui/logo.gif) no-repeat;\r
+       background-position: left 0;\r
+}\r
+\r
+#desktopTitlebar h1.applicationTitle {\r
+       display: none;\r
+       margin: 0;\r
+       padding: 0 5px 0 0;\r
+       font-size: 20px;\r
+       line-height: 25px;\r
+       font-weight: bold;\r
+       color: #fff;\r
+}\r
+\r
+#desktopTitlebar h2.tagline {\r
+       font-size: 12px;\r
+       color: #b2b2b2;\r
+       font-weight: bold;\r
+       padding: 5px 0 0 0;\r
+       text-align: center;\r
+}\r
+\r
+#desktopTitlebar h2.tagline .taglineEm {\r
+       color: #fff;\r
+       font-weight: bold;\r
+}\r
+\r
+#topNav {\r
+       font-family: Verdana, Arial, Helvetica, sans-serif;\r
+       font-size: 10px;\r
+       position: absolute;\r
+       right: 0;\r
+       top: 0;\r
+       color: #b2b2b2;\r
+       text-align: right;\r
+       padding: 13px 10px 0 0;\r
+}\r
+\r
+#topNav a {\r
+       color: #7DD0FA;\r
+       font-weight: normal;\r
+}\r
+\r
+#topNav a:hover {\r
+       text-decoration: none;\r
+}\r
+\r
+/* Toolboxes */\r
+\r
+.toolbox {\r
+       float: right;\r
+       padding: 6px 3px 0 5px;\r
+       height: 23px;\r
+       overflow: hidden;\r
+}\r
+\r
+div.toolbox.divider { /* Have to specify div here for IE6's sake */\r
+       background: url(../../images/mochaui/toolbox-divider.gif) left center no-repeat;\r
+       padding: 6px 3px 0 12px;\r
+}\r
+\r
+div.toolbox.divider2 { /* Have to specify div here for IE6's sake */\r
+       background: url(../../images/mochaui/toolbox-divider2.gif) left center no-repeat;\r
+       padding: 6px 4px 0 12px;\r
+}\r
+\r
+.toolbox img {\r
+       cursor: pointer;\r
+       margin-right: 6px;\r
+       padding: 0;\r
+       float: left;\r
+}\r
+\r
+.toolbox img.disabled {\r
+       cursor: default;\r
+}\r
+\r
+#spinnerWrapper {\r
+       width: 16px;\r
+       height: 16px;\r
+       background: url(../../images/mochaui/spinner-placeholder.gif) no-repeat;\r
+       margin-right: 5px;\r
+}\r
+\r
+#spinner {\r
+       visibility: hidden;\r
+       background: url(../../images/mochaui/spinner.gif) no-repeat;\r
+       width: 16px;\r
+       height: 16px;\r
+}\r
+\r
+/* Navbar */\r
+\r
+#desktopNavbar {\r
+       background: #4C4C4C;\r
+       height: 30px;\r
+       margin: 0 0px;  \r
+}\r
+\r
+#desktopNavbar ul {    \r
+       padding: 0;\r
+       margin: 0;\r
+       list-style: none;\r
+       font-size: 12px;\r
+}\r
+\r
+#desktopNavbar li {\r
+       float: left;\r
+}\r
+\r
+#desktopNavbar a {\r
+       display: block;\r
+}      \r
+       \r
+#desktopNavbar ul li a {\r
+       padding: 6px 10px 6px 10px;     \r
+       color: #b2b2b2;\r
+       font-weight: normal;\r
+}\r
+\r
+#desktopNavbar ul li a:hover {\r
+       color: #fff;\r
+}\r
+\r
+#desktopNavbar ul li a.arrow-right, #desktopNavbar ul li a:hover.arrow-right {\r
+       background-image: url(../../images/mochaui/arrow-right.gif);\r
+       background-repeat: no-repeat;\r
+       background-position: right 7px; \r
+} \r
+\r
+#desktopNavbar li ul {\r
+       padding: 2px;\r
+       border: 1px solid #3f3f3f;\r
+       background: #fff url(../../images/mochaui/bg-dropdown.gif) repeat-y;\r
+       position: absolute;\r
+       width: 164px;\r
+       left: -999em;\r
+       z-index: 8000;\r
+}\r
+\r
+#desktopNavbar li:hover ul ul,\r
+#desktopNavbar li.ieHover ul ul,\r
+#desktopNavbar li:hover ul ul ul,\r
+#desktopNavbar li.ieHover ul ul ul {\r
+       left: -999em;\r
+}\r
+\r
+#desktopNavbar li ul ul { /* third-and-above-level lists */\r
+       margin: -22px 0 0 164px;\r
+}\r
+\r
+#desktopNavbar li ul li .check {\r
+       position: absolute;\r
+       top: 8px;\r
+       left: 6px;\r
+       width: 5px;\r
+       height: 5px;\r
+       background: #555;\r
+       overflow: hidden;\r
+       line-height: 1px;\r
+       font-size: 1px;\r
+}\r
+\r
+#desktopNavbar li ul li a {\r
+       position: relative;\r
+       padding: 1px 9px 1px 25px;\r
+       width: 130px;\r
+       color: #3f3f3f;\r
+       font-weight: normal;\r
+}\r
+\r
+#desktopNavbar li ul li a:hover {\r
+       background: #6C98D9;\r
+       color: #fff;\r
+}\r
+\r
+#desktopNavbar li ul li a:hover .check {\r
+       background: #fff;\r
+}\r
+\r
+#desktopNavbar li:hover ul,\r
+#desktopNavbar li.ieHover ul,\r
+#desktopNavbar li li.ieHover ul,\r
+#desktopNavbar li li li.ieHover ul,\r
+#desktopNavbar li li:hover ul,\r
+#desktopNavbar li li li:hover ul { /* lists nested under hovered list items */\r
+       left: auto;\r
+}\r
+\r
+#desktopNavbar li:hover { /* For IE7 */\r
+    position: static;\r
+}\r
+\r
+li.divider {\r
+       margin-top: 2px;\r
+       padding-top: 3px;       \r
+       border-top: 1px solid #ebebeb;\r
+}      \r
+\r
+#pageWrapper {\r
+       position: relative;\r
+       overflow: hidden; /* This can be set to hidden or auto */\r
+       border-top: 1px solid #222;\r
+}\r
+\r
+/* Footer */\r
+#desktopFooterWrapper {\r
+       position: absolute;\r
+       left: 0;\r
+       bottom: 0;\r
+       width: 100%;\r
+       height: 30px;\r
+       overflow: hidden;\r
+       border-top: 1px solid #222;\r
+}\r
+\r
+#desktopFooter {\r
+       font-family: Verdana, Arial, Helvetica, sans-serif;\r
+       font-size: 10px;\r
+       height: 24px;\r
+       padding: 6px 8px 0 8px;\r
+       background: #333;\r
+       color: #b2b2b2;\r
+}\r
+\r
+#desktopFooter a {\r
+       color: #7DD0FA;\r
+       font-weight: normal;\r
+}\r
+\r
+#desktopFooter a:hover {\r
+       text-decoration: none;\r
+}\r
+\r
+/* Dock/Taskbar */\r
+\r
+#dockWrapper {\r
+       display: none;\r
+       width: 100%;\r
+       border-top: 1px solid #222;\r
+}\r
+\r
+#dockWrapper.top {\r
+       border: 0;\r
+}\r
+\r
+#dock {\r
+       position: relative;\r
+       padding: 3px 16px 0 6px;\r
+       bottom: 0;\r
+       left: 0;\r
+       background: #4c4c4c;\r
+       min-height: 27px;\r
+       height: auto;\r
+}\r
+\r
+*html #dock {\r
+       height: 30px; /* Used for IE 6.0 since it does not support min-height */\r
+}\r
+\r
+.dockTab {\r
+       float: left;\r
+       position: relative;     \r
+       font-size: 11px;\r
+       width: 150px;\r
+       height: 24px;\r
+       margin: 0 3px 2px 0;\r
+       overflow: hidden;       \r
+       cursor: pointer;\r
+       background: url(../../images/mochaui/dock-tabs.gif) left top no-repeat;\r
+}\r
+\r
+.dockTab.activeDockTab {       \r
+       background-position: left -24px;\r
+}\r
+\r
+.dockText {\r
+       position: absolute;\r
+       top: 0;\r
+       left: 0;\r
+       display: block;\r
+       font-weight: normal;\r
+       color: #bbb;    \r
+       text-align: left;\r
+       padding: 4px 10px 2px 10px;\r
+       width: 130px;\r
+       height: 19px;\r
+       overflow: hidden;\r
+}\r
+\r
+.dockText:hover {\r
+       color: #fff;\r
+}\r
+\r
+.dockTab.activeDockTab .dockText {\r
+       color: #fff;\r
+}\r
+\r
+#dockCanvas {\r
+       position: absolute;\r
+       top: 5px;\r
+       right: 3px;\r
+       z-index: 2;\r
+}\r
+\r
+#dockPlacement {\r
+       position: absolute;\r
+       top: 4px;\r
+       right: 8px;\r
+       width: 10px;\r
+       height: 9px;\r
+       opacity: 0;\r
+       filter: alpha(opacity=0);\r
+       -moz-opacity: 0;\r
+       background: #f00; /* for troubleshooting */\r
+       cursor: pointer;\r
+       z-index: 3; /* for IE */\r
+       text-align: right;\r
+}\r
+\r
+#dockAutoHide {\r
+       position: absolute;\r
+       top: 14px;\r
+       right: 8px;\r
+       width: 10px;\r
+       height: 9px;\r
+       opacity: 0;\r
+       filter: alpha(opacity=0);\r
+       -moz-opacity: 0;\r
+       background: #f00; /* for troubleshooting */\r
+       cursor: pointer;\r
+       z-index: 3; /* for IE */\r
+}\r
+\r
+/* Panel Layout\r
+---------------------------------------------------------------- */\r
+\r
+/* Columns */\r
+\r
+.column {\r
+       position: relative;     \r
+       float: left;\r
+       overflow: hidden;\r
+       background: #f1f1f1;\r
+}\r
+\r
+/* Panels */\r
+\r
+.panel {\r
+       position: relative;     \r
+       overflow: auto;\r
+       border-bottom: 1px solid #b9b9b9;\r
+       border-top: 0;\r
+}\r
+\r
+.pad {\r
+       position: absolute;\r
+       top: 0;\r
+       left: 0;\r
+       padding: 8px;\r
+       overflow: hidden;\r
+}\r
+\r
+#mainPanel {\r
+       background: #fff;       \r
+}      \r
+\r
+.panel-header {\r
+       position: relative;     \r
+       background: #f1f1f1 url(../../images/mochaui/bg-panel-header.gif) repeat-x;\r
+       height: 30px;\r
+       overflow: hidden;\r
+       border-bottom: 1px solid #d3d3d3;               \r
+}\r
+\r
+.panel-headerContent {\r
+       padding-top: 2px;\r
+}      \r
+\r
+.panel-headerContent.tabs {\r
+       background: url(../../images/mochaui/tabs.gif) repeat-x;\r
+       background-position: left -68px;        \r
+}\r
+\r
+.panel-header h2 {\r
+       display: inline-block;\r
+       font-size: 12px;\r
+       margin: 0;\r
+       padding: 3px 8px 0 8px;\r
+       height: 22px;\r
+       overflow: hidden;\r
+       color: #3f3f3f;\r
+}\r
+\r
+.panel-header-toolbox {\r
+       float: right;\r
+       height: 26px;\r
+       margin: 2px 5px 5px 0;\r
+       text-align: right;\r
+}\r
+\r
+.panel-collapse {\r
+       background: url(../../images/mochaui/collapse-expand.gif) left top no-repeat;\r
+}\r
+\r
+.panel-expand {\r
+       background: url(../../images/mochaui/collapse-expand.gif) left -16px no-repeat;\r
+}\r
+\r
+.icon16 {\r
+       margin: 5px 0 0 2px;\r
+       cursor: pointer;\r
+}\r
+\r
+.panel-footerWrapper {\r
+       position: absolute;\r
+       left: 0;\r
+       bottom: 0;\r
+       width: 100%;\r
+       background: #f9f9f9;\r
+       height: 30px;\r
+       overflow: hidden;\r
+       border-top: 1px solid #b9b9b9;\r
+}\r
+\r
+.panel-footer {\r
+       padding: 1px 0 0 8px;   \r
+}\r
+\r
+.panel-footerContent {\r
+       margin-top: 5px;\r
+}\r
+\r
+/* Handles */  \r
+\r
+.horizontalHandle {\r
+       height: 4px;\r
+       line-height: 1px;\r
+       font-size: 1px;\r
+       overflow: hidden;\r
+       background: #d1d1d1 url(../../images/mochaui/bg-handle-horizontal.gif) repeat-x;\r
+}\r
+\r
+.horizontalHandle.detached .handleIcon {\r
+       background: transparent;        \r
+}\r
+\r
+.horizontalHandle .handleIcon {        \r
+       margin: 0 auto;\r
+       height: 4px;\r
+       line-height: 1px;\r
+       font-size: 1px;\r
+       overflow: hidden;\r
+       background: url(../../images/mochaui/handle-icon-horizontal.gif) center center no-repeat;\r
+}\r
+\r
+.columnHandle {\r
+       min-height: 10px;       \r
+       float: left;\r
+       width: 4px;\r
+       overflow: hidden;\r
+       background: #bbb url(../../images/mochaui/handle-icon.gif) center center no-repeat;\r
+       border: 1px solid #9a9a9a;\r
+       border-top: 0;\r
+}\r
+\r
+/* Viewport overlays\r
+---------------------------------------------------------------- */\r
+\r
+#modalOverlay {\r
+       display: none;\r
+       position: fixed;\r
+       top: 0;\r
+       left: 0;\r
+       width: 100%;\r
+       background: #000;\r
+       opacity: 0;\r
+       filter: alpha(opacity=0);\r
+       -moz-opacity: 0;\r
+       z-index: 10000;\r
+}\r
+\r
+* html         #modalOverlay {\r
+       position: absolute;\r
+}\r
+\r
+/* Fix for IE6 select z-index issue */\r
+#modalFix {\r
+       display: none;\r
+       position: absolute;\r
+       top: 0;\r
+       left: 0;\r
+       width: 100%;\r
+       opacity: 0;\r
+       filter: alpha(opacity=0);\r
+       -moz-opacity: 0;\r
+       z-index: 9999;\r
+}\r
+\r
+/* Underlay */\r
+\r
+#windowUnderlay { \r
+       position: fixed;\r
+       top: 0;\r
+       left: 0;\r
+       width: 100%;\r
+       background: #fff;       \r
+}\r
+\r
+* html #windowUnderlay { \r
+       position: absolute;\r
+}\r
+\r
+/* Windows\r
+---------------------------------------------------------------- */\r
+\r
+.mocha {\r
+       position: absolute;\r
+       top: 0;\r
+       left: 0;\r
+       display: none;\r
+       overflow: hidden;       \r
+}\r
+\r
+.mocha.isFocused {     \r
+}      \r
+\r
+.mochaOverlay {\r
+       position: absolute;\r
+       top: 0;\r
+       left: 0;        \r
+}\r
+       \r
+.mochaTitlebar {\r
+       width: 100%;\r
+       overflow: hidden;       \r
+}\r
+\r
+.mochaTitlebar h3 {\r
+       font-size: 12px;\r
+       line-height: 15px;      \r
+       font-weight: bold;\r
+       margin: 5px 10px 4px 12px;\r
+       padding: 0;\r
+       color: #888;\r
+}\r
+\r
+.mocha.isFocused .mochaTitlebar h3 {\r
+       color: #141414;\r
+}\r
+\r
+.mochaToolbarWrapper {\r
+       width: 100%; /* For IE */\r
+       position: relative;\r
+       height: 29px;\r
+       background: #f1f1f1;    \r
+       overflow: hidden;\r
+       border-top: 1px solid #d9d9d9;\r
+}\r
+\r
+div.mochaToolbarWrapper.bottom {\r
+       border: 0;\r
+       border-bottom: 1px solid #d9d9d9;\r
+}\r
+\r
+.mochaToolbar {\r
+       width: 100%; /* For IE */\r
+       border-top: 1px solid #fff;\r
+}\r
+\r
+.mochaContentBorder {\r
+       border-top: 1px solid #dadada;\r
+       border-bottom: 1px solid #dadada;\r
+}\r
+\r
+.mochaContentWrapper { /* Has a fixed height and scrollbars if required. */\r
+       font-size: 12px;\r
+       overflow: auto;\r
+}\r
+       \r
+.mochaContent {\r
+       padding: 10px 12px;\r
+}\r
+\r
+.mocha .handle {\r
+       position: absolute;\r
+       background: #0f0;\r
+       width: 3px;\r
+       height: 3px;\r
+       z-index: 2;\r
+       opacity: .0;\r
+       filter: alpha(opacity=0);\r
+       -moz-opacity: .0;\r
+       overflow: hidden;\r
+       font-size: 1px; /* For IE6 */\r
+}\r
+\r
+.mocha .corner { /* Corner resize handles */\r
+       background: #f00;\r
+       width: 10px;\r
+       height: 10px;\r
+}\r
+\r
+.mocha .cornerSE { /* Bottom right resize handle */\r
+       background: #f00;\r
+       width: 20px;\r
+       height: 20px;\r
+}\r
+\r
+.mochaCanvasHeader {\r
+       position: absolute;\r
+       top: 0;\r
+       left: 0;\r
+       background: transparent;\r
+       z-index: -1;\r
+       display: none;\r
+       overflow: hidden;\r
+}\r
+\r
+.mochaControls {\r
+       position: absolute;\r
+       width: 52px;\r
+       top: 8px;\r
+       right: 8px;\r
+       height: 14px;\r
+       z-index: 4;\r
+       background: transparent;\r
+}\r
+\r
+.mochaCanvasControls {\r
+       position: absolute;     \r
+       top: 8px;\r
+       right: 8px;     \r
+       z-index: 3;\r
+       background: transparent;\r
+}\r
+\r
+/*\r
+       To use images for these buttons:\r
+       1. Set the useCanvasControls window option to false.\r
+       2. If you use a different button size you may need to reposition the controls.\r
+          Modify the controlsOffset window option.             \r
+       2. Add background images to each button.\r
+\r
+*/\r
+.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton {\r
+       float: right;\r
+       width: 14px;\r
+       height: 14px;\r
+       font-size: 1px; \r
+       cursor: pointer;\r
+       z-index: 4;\r
+       background: #f00;\r
+       margin-left: 5px;\r
+}\r
+\r
+.mochaMinimizeButton {\r
+       margin-left: 0;\r
+}\r
+\r
+.mochaMaximizeButton {\r
+}\r
+\r
+.mochaCloseButton {\r
+}\r
+\r
+.mochaSpinner{\r
+       visibility: hidden;     \r
+       position: absolute;\r
+       bottom: 7px;\r
+       left: 6px;\r
+       width: 16px;\r
+       height: 16px;\r
+       background: url(../../images/mochaui/spinner.gif) no-repeat;\r
+}\r
+\r
+.mochaIframe {\r
+       width: 100%;\r
+}  \r
+               \r
+/* Fix for IE6 select z-index issue */\r
+.zIndexFix {\r
+       display: block;\r
+       position: absolute;\r
+       top: 0;\r
+       left: 0;\r
+       z-index: -1;\r
+       filter: mask();\r
+       width: 100px;\r
+       height: 100px;\r
+       border: 1px solid transparent;\r
+}\r
+\r
+/* Modals */\r
+\r
+.modal2 {\r
+       border: 8px solid #fff;         \r
+}\r
+\r
+.modal2 .mochaContentBorder {\r
+       border-width: 0px;\r
+}\r
+       \r
+/* Window Themes */\r
+\r
+.mocha.no-canvas {\r
+       background: #f1f1f1;\r
+       border: 2px solid #555; \r
+}\r
+\r
+.mocha.no-canvas .mochaTitlebar {\r
+       background: #f1f1f1;    \r
+}\r
+\r
+.mocha.transparent .mochaTitlebar h3 {\r
+       color: #fff;\r
+       display: none;\r
+}\r
+\r
+.mocha.notification .mochaTitlebar {\r
+       opacity: .0;\r
+       filter: alpha(opacity=0);\r
+       -moz-opacity: 0;\r
+}\r
+\r
+.mocha.notification .mochaContentBorder {\r
+       border-width: 0px;\r
+}\r
+\r
+.mocha.notification .mochaContentWrapper {\r
+       text-align: center;\r
+       font-size: 12px;\r
+       font-weight: bold;\r
+}\r
+\r
+/* Compontents\r
+---------------------------------------------------------------- */\r
+\r
+/* Toolbar Tabs */\r
+\r
+.toolbarTabs { \r
+       padding: 0 5px 2px 2px;\r
+       background: url(../../images/mochaui/tabs.gif) repeat-x;\r
+       background-position: left -70px;\r
+       overflow: visible;\r
+}\r
+\r
+.tab-menu {    \r
+       padding-top: 1px;\r
+       list-style:     none;\r
+       margin: 0;\r
+       padding: 0;\r
+       line-height: 16px;\r
+       font-size: 11px;\r
+}\r
+\r
+.tab-menu li {\r
+       display: block;\r
+       float: left;\r
+       margin: 0 0 5px 0;\r
+       cursor: pointer;        \r
+       background: url(../../images/mochaui/tabs.gif) repeat-x;\r
+       background-position: left -35px;\r
+}\r
+\r
+.tab-menu li.selected {\r
+       background: url(../../images/mochaui/tabs.gif) repeat-x;\r
+       background-position: left 0;\r
+}\r
+\r
+.tab-menu li a {\r
+       display: block;\r
+       margin-left: 8px;\r
+       padding: 6px 16px 5px 10px;\r
+       text-align: center;\r
+       font-weight: normal;\r
+       color: #141414;\r
+       background: url(../../images/mochaui/tabs.gif) repeat-x;\r
+       background-position: right -35px;       \r
+}\r
+\r
+.tab-menu li.selected a {\r
+       color: #141414;\r
+       font-weight: bold;      \r
+       background: url(../../images/mochaui/tabs.gif) repeat-x;\r
+       background-position: right 0;\r
+}\r
+\r
+/* Accordian */\r
+\r
+.accordianWrapper {\r
+       padding: 0;\r
+       background: #fff;\r
+}\r
+\r
+.accordianToggler {\r
+       margin: 0;\r
+       padding: 6px 10px;\r
+       background: #f1f1f1 url(../../images/mochaui/bg-panel-header.gif) repeat-x;\r
+       font-size: 12px;\r
+       cursor: pointer;\r
+       border-top: 1px solid #e3e3e3;  \r
+}\r
+\r
+.topToggler {\r
+       border-top: none;\r
+}\r
+\r
+.accordianToggler.open {\r
+       background: #fff url(../../images/mochaui/bg-panel-header.gif) repeat-x;        \r
+}\r
+\r
+.accordianContent {\r
+       padding: 10px 10px 5px 10px;\r
+}\r
+\r
+/* Sliders */\r
+\r
+.slider {\r
+       clear: both;\r
+       position: relative;\r
+       font-size: 12px;\r
+       font-weight: bold;\r
+       width: 200px;\r
+       margin-bottom: 15px;    \r
+}\r
+\r
+.sliderWrapper {\r
+       position: relative;\r
+       font-size: 1px;\r
+       line-height: 1px;\r
+       height: 9px;\r
+       width: 222px;\r
+}\r
+\r
+.sliderarea {\r
+       position: absolute;\r
+       top: 0;\r
+       left: 0;\r
+       height: 7px;\r
+       width: 220px;\r
+       font-size: 1px;\r
+       line-height: 1px;\r
+       background: url(../../images/mochaui/slider-area.gif) repeat-x;\r
+       border: 1px solid #a3a3a3;\r
+       border-bottom: 1px solid #ccc;\r
+       border-left: 1px solid #ccc;\r
+       margin: 0;\r
+       padding: 0;\r
+       overflow: hidden;\r
+}\r
\r
+.sliderknob {\r
+       position: absolute;\r
+       top: 0;\r
+       left: 0;\r
+       height: 9px;\r
+       width: 19px;\r
+       font-size: 1px;\r
+       line-height: 1px;       \r
+       background: url(../../images/mochaui/knob.gif) no-repeat;\r
+       cursor: pointer;\r
+       overflow: hidden;\r
+       z-index: 2;\r
+}\r
+       \r
+.update {\r
+       padding-bottom: 5px;    \r
+}\r
+\r
+/* Folder Tree */\r
+\r
+.tree {\r
+       font-size: 11px;\r
+       line-height: 15px;\r
+       margin: 0;\r
+}\r
+\r
+.tree ul {\r
+       margin: 0;\r
+}\r
+\r
+.tree li {\r
+       list-style-type: none;\r
+       white-space: nowrap;\r
+}\r
+\r
+.tree li a {\r
+       color: #3f3f3f; \r
+}      \r
+\r
+.tree li img {\r
+       vertical-align: middle;\r
+       width: 18px;\r
+       height: 18px;\r
+       overflow: hidden;\r
+}\r
+\r
+.tree li span {\r
+       padding-left: 2px;\r
+}\r
+\r
+/* View Toggle */\r
+\r
+.viewToggle {\r
+       position: absolute;\r
+       top: 4px;\r
+       right: 5px;\r
+       width: 60px;\r
+       text-align: right;\r
+}\r
+\r
+.viewToggle img.viewToggleList, .viewToggle img.viewToggleGrid {\r
+       width: 28px;\r
+       height: 22px;\r
+}      \r
+\r
+.viewToggle img.viewToggleList {\r
+       background: url(../../images/mochaui/view-toggle.gif) no-repeat;\r
+       background-position: 0 -66px;\r
+}\r
+\r
+.viewToggle img.viewToggleGrid {\r
+       background: url(../../images/mochaui/view-toggle.gif) no-repeat;\r
+       background-position: 0 0;\r
+}\r
+\r
+/* Miscellaneous\r
+---------------------------------------------------------------- */\r
+\r
+/* Window Builder Form Elements */\r
+       \r
+#desktop form {\r
+       margin: 0 0 0 0;\r
+       padding: 5px 0 0 0;\r
+}\r
+\r
+#newWindowForm {\r
+       width: 320px;\r
+}\r
+\r
+#desktop .input {\r
+       width: 225px;\r
+       padding: 1px 0 1px 3px;\r
+       border: 1px solid #bbb; \r
+}\r
+\r
+#desktop textarea {\r
+       width: 225px;\r
+       height: 100px;\r
+       padding: 1px 0 1px 3px;\r
+       border: 1px solid #bbb;\r
+}\r
+\r
+#desktop .formLabel {\r
+       float: left;    \r
+       text-align: right;\r
+       width: 80px;\r
+       margin: 0 0 5px 0;\r
+}\r
+\r
+#desktop .formField {\r
+       float: right;\r
+       margin: 0 0 5px 0;\r
+       padding: 0 0 0 0;\r
+       width: 230px;\r
+}\r
+\r
+#desktop form .number {\r
+       width: 40px;\r
+}\r
+\r
+/* Menus */\r
+\r
+.menu-right li {\r
+       list-style-type: none;\r
+       display: inline;        \r
+       margin: 0 0 0 15px;\r
+}\r
+\r
+/* Notifications */\r
+\r
+/* Success, error & notice boxes for messages and errors. */\r
+.error,\r
+.notice, \r
+.success    { padding: 8px; margin-bottom: 10px; border: 2px solid #ddd; }\r
+.error      { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; }\r
+.notice     { background: #FFF6BF; color: #817134; border-color: #FFD324; }\r
+.success    { background: #E6EFC2; color: #529214; border-color: #C6D880; }\r
+.error a    { color: #D12F19; }\r
+.notice a   { color: #817134; }\r
+.success a  { color: #529214; }\r
+\r
+\r
+/* Clears */\r
+\r
+.clear {\r
+       clear: both;\r
+       height: 0;\r
+}\r
+\r
+*html .clear {\r
+       height: 1%;\r
+       font-size: 1px;\r
+       line-height: 1px;\r
+       overflow: hidden;\r
+       visibility: hidden;\r
+}
\ No newline at end of file