/*

CSS for Mocha UI

Copyright:
    Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>.
    
License:
    MIT-style license.
   
*/   

/* Mocha UI */
/*
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: #bebebe; /* Will be the margin color between toolbars */
    padding: 0 0 1px 0;
}

#desktopTitlebarWrapper {
    position: relative;
    height: 35px;
    background: #eeeeef url(../images/bg-desktopTitlebar.gif) repeat-x;         
}
    
#desktopTitlebar {
    padding: 4px 8px 6px 8px;
    height: 23px;
}   
    
#desktopTitlebar h1 {
    margin: 0;
    padding: 4px 0 0 0;
    font-size: 18px;
    font-weight: bold;
    color: #ce1717;
}
    
#desktopTitlebar h1 .version {
    font-size: 12px;
    color: #555;
}       

/* Navbar */

#desktopNavbar {
    margin: 1px 0 0 0;
    background: #eeeeee;
    border: 1px solid #fff;
    height: 22px;
}

#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: 2px 11px 2px 9px;  
    color: #141414;
}

#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 div.check {
    position: absolute;
    top: 7px;
    left: 6px;
    width: 5px;
    height: 5px;
    background: #00CC33;
    overflow: none;
    line-height: 1px;
    font-size: 1px;
}

#desktopNavbar li ul li a {
    position: relative;
    padding: 1px 9px 1px 19px;
    width: 130px;
    color: #333;
}

#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;
    width: auto;
    height: 100%;
    overflow: auto; /* This can be set to hidden or auto */
}

#page {
    padding: 20px 20px;
}

.aside {
    width: 500px;
}

#sidebarWrapper {
    display: none;
    float: left;
    background: #bebebe;            
}

#sidebar {
    width: 230px;
    float: left;
    overflow: hidden;   
}

#sidebarContentWrapper {
    margin-right: 1px;
    background: #fff;
    border: 1px solid #fff;
    color: #141414;     
}

#sidebarContent {
    padding: 15px;
}

#sidebarHandle {
    float: left;
    position: relative;
    background: #eeeeef;
    border: 1px solid #fff;
    width: 4px;
    margin: 0 1px 0 0;
    cursor: e-resize; /* This is for Opera which does not support the col-resize cursor */
    cursor: col-resize;
}

* html #sidebarWrapper {
    margin-right: -4px; /* Fix for IE6 3px jox bug */
}

* html #sidebarHandle {
    margin-right: 1px; /* Fix for IE6 3px jox bug */
}

.columnControlWrapper {
    position: absolute;
    left: -1px;
    top: 150px;
    border-top: 1px solid #bebebe;
    border-bottom: 1px solid #bebebe;       
}

.columnControl {
    background: #ddd;
    border: 1px solid #fff;
    width: 4px;
    height: 8px;
    cursor: pointer;
    font-size: 1px; /* For IE6 */   
}
    
/* Windows */
    
div.mocha {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    overflow: hidden;   
}

div.mochaOverlay {
    position: absolute;
    top: 0;
    left: 0;    
}
    
div.mocha .mochaTitlebar {
    width: 100%;
    overflow: hidden;
}       
    
div.mocha .mochaTitlebar h3 {
    /*font-size: 12px;*/
    font-size: 11px;
    line-height: 15px;  
    font-weight: bold;
    margin: 5px 10px 4px 12px;
    padding: 0;
}
    
div.mocha .mochaTitlebar a {
    color: #333;
}

div.mocha .mochaToolbarWrapper {
    width: 100%; /* For IE */
    position: relative;
    height: 29px;
    background: #fff;   
    overflow: hidden;
    border-top: 1px solid #d9d9d9;
}

div.mocha .mochaToolbar {
    width: 100%; /* For IE */
    border-top: 1px solid #fff;
}

.toolbarTabs {  
    padding: 0 10px 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;
    background-color: #ebebeb;
    cursor: pointer;    
    background: url(../images/tabs.gif) repeat-x;
    background-position: left -30px;    
}

.tab-menu li.selected {
    background-color: #8caac7;
    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: bold;
    color: #141414;
    background: url(../images/tabs.gif) repeat-x;
    background-position: right -30px;   
}

.tab-menu li.selected a {
    color: #141414;
    background: url(../images/tabs.gif) repeat-x;
    background-position: right 0;   
}   

div.mocha .mochaContentBorder {
    border-top: 1px solid #d9d9d9;  
    border-bottom: 1px solid #d9d9d9;
}
    
div.mocha .mochaContentWrapper { /* Has a fixed height and scrollbars if required. */
    font-size: 11px;
    overflow: auto; 
}
    
div.mocha .mochaContent {
    padding: 10px 12px;
    /* ajout jl*/
    text-align: left;
}       

div.mocha .handle {
    position: absolute;
    background: #0f0;
    width: 3px;
    height: 3px;
    z-index: 2;
    opacity: .0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: .0;
    overflow: hidden;
    font-size: 1px; /* For IE6 */   
}

div.mocha .corner { /* Corner resize handles */
    background: #f00;
    width: 10px;
    height: 10px;
}

div.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 {
    background-image: url(../images/close-win.png);
}

.mochaLoadingIcon {
    position: absolute;
    bottom: 7px;
    left: 6px;  
}

.mochaIframe {
    width: 100%;
}  

/* Window Themes */

.mocha.no-canvas {
    /*background: #f1f1f1;*/
    background: #cccccc;
    border: 2px solid #555; 
}

.mocha.no-canvas .mochaTitlebar {
    /*background: #f1f1f1;*/
    background: #cccccc;
}
    
/* 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: #ce1717;
    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 textarea, #desktop input {
    color: #555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;        
}
    
#desktop .input {
    background: #fbfbfb;
    width: 225px;
    padding: 1px 0 1px 3px;
    border: 1px solid #ccc; 
}

#desktop textarea {
    background: #fbfbfb;
    width: 225px;
    height: 100px;
    padding: 1px 0 1px 3px;
    border: 1px solid #ccc; 
}       

#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;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(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;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    z-index: 9500;
}
    
/* 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: #bebebe;
    padding: 1px 0 0 0;
    width: 100%;    
}

#dock {
    position: relative;
    padding: 3px 15px 1px 15px;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #eeeeef;
    border: 1px solid #fff;
    min-height: 22px;
    height: auto;
   _height: 22px; /* IE 6.0 hack, for not supporting min-height */
}

#dockWrapper.top {
    padding: 0 0 1px 0; 
}

.dockTab {
    float: left;
    font-size: 11px;
    position: relative;
    width: 120px;
    height: 20px;
    margin: 0 2px 2px 0;
    overflow: hidden;   
    cursor: pointer;         
}

.dockText {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    text-align: left;
    padding: 1px 0 0 8px;
    width: 115px;
    height: 19px;
    overflow: hidden;
}           

#dockCanvas {
    position: absolute;
    top: 4px;
    left: 2px;
    z-index: 2;
}

#dockPlacement {
    position: absolute;
    top: 3px;
    left: 2px;
    width: 10px;
    height: 9px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(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;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    background: #f00; /* for troubleshooting */
    cursor: pointer;
    z-index: 3; /* for IE */        
}

/* Accordian */

.accordianWrapper {
    padding: 5px;
}

.accordianToggler {
    margin: 0;
    padding: 4px 10px;
    background: #f3f3f3;
    border-top: 1px solid #fff;
    font-size: 11px;
    cursor: pointer;
}

.topToggler {
    border-top: none;
}

.accordianToggler.open {
    background: #f3f3f3;    
}

.accordianContent {
    padding: 10px 10px 5px 10px;
}

/* Window Themes */

div.mocha.transparent .mochaTitlebar h3 {
    color: #fff;
    display: none;  
}

div.mocha.notification .mochaTitlebar {
    opacity: .0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}

div.mocha.notification .mochaContentBorder {
    border-width: 0px;
}

div.mocha.notification .mochaContentWrapper {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}