/*

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: transparent;
}

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

#desktopTitlebarWrapper {
        position: relative;
        height: 35px;
        background: transparent;
}

#desktopTitlebar {
        padding: 4px 8px 6px 8px;
        height: 5px;
}

#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: transparent;
        border: 0px solid #fff;
        height: 5px;
}

#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: transparent;
}

#desktopNavbar ul li a.arrow-right, #desktopNavbar ul li a:hover.arrow-right {
        background: transparent;
}

#desktopNavbar li ul {
        padding: 2px;
        border: 1px solid #333;
        background: transparent;
        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: transparent;
        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: transparent;
}

#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: transparent;
}

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

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

#sidebarContent {
        padding: 15px;
}

#sidebarHandle {
        float: left;
        position: relative;
        background: transparent;
        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;
        z-index:1;
}

div.mocha .mochaTitlebar {
        width: 100%;
        overflow: hidden;
}

div.mocha .mochaTitlebar h3 {
        font-size: 12px;
        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: transparent;
        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;
}

div.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 */
}

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

.mochaMaximizeButton {
       background-image: url(../images/window_maximize.png);
}

.mochaCloseButton {
        background-image: url(../images/window_close.png);
}

.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: #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;
        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: 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: 0px 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;
        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: 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;
        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;
}