/*

CSS for Mocha UI

Copyright:
    Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>.

License:
    MIT-style license.

*/

/* Layout
---------------------------------------------------------------- */

html, body {
    overflow: hidden;
    padding: 0;
}

body {
    margin: 0; /* Required */
    background: #FF0000; /* #6989b3 url(../images/splash.gif) center center no-repeat; */
    font-size: .8em;
  	font-family: Arial,Verdana,Helvetica,Sans-serif;
  	color: #b2b2b2;
	line-height: 12px;
}

#desktop {
    visibility: hidden;
    position: relative;
    min-width: 750px; /* Helps keep header content from wrapping */
    height: 100%;
    overflow: hidden;
    cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */
}

#desktopHeader {
    background: #FF0000;
}

#desktopTitlebarWrapper {
    position: relative;
    height: 55px;
    overflow: visible;
    background: #FF0000 url(../images/bg-header.gif) repeat-x;
}

#desktopTitlebar {
    padding: 7px 8px 6px 8px;
    height: 55px;
    background: url(../images/CSCred1.png) no-repeat;
    background-position: 5px 2px;
}

#desktopTitlebar h1.applicationTitle {
    display: none;
    margin: 0;
    padding: 0 5px 0 0;
    font-size: 20px;
    line-height: 25px;
    font-weight: bold;
    color: #FF0000;
}

#tagline {
	height:55px;
	left: 35%;
	padding: 5px 0 0;
	position:absolute;
	text-align:center;
	top: 3px;
	z-index: 400;
	width: 290px;
	/*background: url(../images/) no-repeat;*/
}
#tagline h2 {
	color:#FFFFFF;
	font-size: 3em;
	font-weight: bold;
	letter-spacing: 3px;
	position:relative;
	top: 7px;
}
#logoright {
	height:55px;
	right: 20%;
	padding: 5px 0 0;
	position:absolute;
	text-align:center;
	top: 3px;
	z-index: 400;
	width: 75px;
	background: url(../images/) no-repeat;
}
#tagline span.copyright {
    color:#FFFFFF;
	font-size: 1em;
	font-weight: normal;
	height: 10px;
}

#desktopTitlebar h2.tagline .taglineEm {
    color: #FF0000;
    font-weight: bold;
}

#topNav {
    font-size: 10px;
    position: absolute;
    right: 0;
    top: 0;
    color: #b2b2b2;
    text-align: right;
    padding: 13px 10px 0 0;
}

#topNav a {
    color: #7DD0FA;
    font-weight: normal;
}

#topNav a:hover {
    text-decoration: none;
}

/* Toolboxes */

.toolbox {
    float: right;
    padding: 6px 3px 0 5px;
    height: 23px;
    overflow: hidden;
}

div.toolbox.divider { /* Have to specify div here for IE6's sake */
    background: url(../images/toolbox-divider.gif) left center no-repeat;
    padding: 6px 3px 0 12px;
}

div.toolbox.divider2 { /* Have to specify div here for IE6's sake */
    background: url(../images/toolbox-divider2.gif) left center no-repeat;
    padding: 6px 4px 0 12px;
}

.toolbox img {
    cursor: pointer;
    margin-right: 6px;
    padding: 0;
    float: left;
}

.toolbox img.disabled {
    cursor: default;
}

#spinnerWrapper {
    float: right;
    width: 16px;
    height: 16px;
    background: url(../images/spinner-placeholder.gif) no-repeat;
    margin-right: 5px;
}

#spinner {
    visibility: hidden;
    background: url(../images/spinner.gif) no-repeat;
    width: 16px;
    height: 16px;
}

#spinnerWrapper2 {
    float: float;
    width: 16px;
    height: 16px;
    background: url(../images/spinner-placeholder.gif) no-repeat;
    margin-right: 5px;
}

#spinner2 {
    visibility: hidden;
    background: url(../images/spinner.gif) no-repeat;
    width: 16px;
    height: 16px;
}

/* Navbar */

#desktopNavbar {
    background: #FF0000;
    height: 30px;
    margin: 0 0px;
}

#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: #b2b2b2;
    font-weight: normal;
}

#desktopNavbar ul li a:hover {
    color: #fff;
}

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

#desktopNavbar li ul {
    padding: 2px;
    border: 1px solid #FF0000;
    background: #FF0000 url(../images/bg-dropdown.gif) repeat-y;
    position: absolute;
    width: 164px;
    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 164px;
}

#desktopNavbar li ul li .check {
    position: absolute;
    top: 8px;
    left: 6px;
    width: 5px;
    height: 5px;
    background: #FF0000;
    overflow: hidden;
    line-height: 1px;
    font-size: 1px;
}

#desktopNavbar li ul li a {
    position: relative;
    padding: 1px 9px 1px 25px;
    width: 130px;
    color: #3f3f3f;
    font-weight: normal;
}

#desktopNavbar li ul li a:hover {
    background: #FF0000;
    color: #fff;
}

#desktopNavbar li ul li a:hover .check {
    background: #FF0000;
}

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

li.divider {
    margin-top: 2px;
    padding-top: 3px;
    border-top: 1px solid #ebebeb;
}

#pageWrapper {
    position: relative;
    overflow: auto; /* This can be set to hidden or auto */
    border-top: 1px solid #222;
}

/* Footer */
#desktopFooterWrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    overflow: hidden;
    border-top: 1px solid #222;
}

#desktopFooter {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    height: 24px;
    padding: 6px 8px 0 8px;
    background: #FF0000;
    color: #b2b2b2;
}

#desktopFooter a {
    color: #7DD0FA;
    font-weight: normal;
}

#desktopFooter a:hover {
    text-decoration: none;
}

/* Dock/Taskbar */

#dockWrapper {
    display: none;
    width: 100%;
    border-top: 1px solid #222;
}

#dockWrapper.top {
    border: 0;
}

#dock {
    position: relative;
    padding: 3px 16px 0 6px;
    bottom: 0;
    left: 0;
    background: #FF0000;
    min-height: 27px;
    height: auto;
}

*html #dock {
    height: 30px; /* Used for IE 6.0 since it does not support min-height */
}

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

.dockTab.activeDockTab {
    background-position: left -24px;
}

.dockText {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    font-weight: normal;
    color: #bbb;
    text-align: left;
    padding: 4px 10px 2px 10px;
    width: 130px;
    height: 19px;
    overflow: hidden;
}

.dockText:hover {
    color: #fff;
}

.dockTab.activeDockTab .dockText {
    color: #fff;
}

#dockCanvas {
    position: absolute;
    top: 5px;
    right: 3px;
    z-index: 2;
}

#dockPlacement {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 10px;
    height: 9px;
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    background: #f00; /* for troubleshooting */
    cursor: pointer;
    z-index: 3; /* for IE */
    text-align: right;
}

#dockAutoHide {
    position: absolute;
    top: 14px;
    right: 8px;
    width: 10px;
    height: 9px;
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    background: #f00; /* for troubleshooting */
    cursor: pointer;
    z-index: 3; /* for IE */
}

/* Panel Layout
---------------------------------------------------------------- */

/* Columns */

.column {
    position: relative;
    float: left;
    overflow: hidden;
    background: #FF0000;
}

/* Panels */

.panel {
    position: relative;
    overflow: auto;
    border-bottom: 1px solid #b9b9b9;
    border-top: 0;
    overflow: hidden;
}

.pad {
    position: absolute;
    width: 100%;
    /*top: 0;
    left: 0;
    padding: 8px;
    overflow: hidden;*/
}

#mainPanel {
    background: #FF0000;
}

.panel-header {
    position: relative;
    background: #FF0000;
    height: 30px;
    overflow: hidden;
    /*border-bottom: 1px solid #d3d3d3;*/
}

.panel-headerContent {
    padding-top: 2px;
}

.panel-headerContent.tabs {
    background: transparent;
    background-position: left -68px;
}

.panel-header h2 {
    display: inline-block;
    font-size: 12px;
    margin: 0;
    padding: 3px 8px 0 8px;
    height: 22px;
    overflow: hidden;
    color: #3f3f3f;
}

.panel-header-toolbox {
    float: right;
    height: 26px;
    margin: 2px 5px 5px 0;
    text-align: right;
}

.panel-header.titlebar {
    height: 20px;
}

.panel-collapse {
    background: url(../images/collapse-expand.gif) left top no-repeat;
}

.panel-expand {
    background: url(../images/collapse-expand.gif) left -16px no-repeat;
}

.icon16 {
    margin: 5px 0 0 2px;
    cursor: pointer;
}

.panel-footerWrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #FF0000;
    height: 30px;
    overflow: hidden;
    border-top: 1px solid #b9b9b9;
}

.panel-footer {
    padding: 1px 0 0 8px;
}

.panel-footerContent {
    margin-top: 5px;
}

/* Handles */

.horizontalHandle {
    height: 1px;
    line-height: 1px;
    font-size: 1px;
    overflow: hidden;
    background: #d1d1d1 url(../images/bg-handle-horizontal.gif) repeat-x;
}

.horizontalHandle.detached .handleIcon {
    background: transparent;
}

.horizontalHandle .handleIcon {
    margin: 0 auto;
    height: 0px;
    line-height: 1px;
    font-size: 1px;
    overflow: hidden;
    /*background: url(../images/handle-icon-horizontal.gif) center center no-repeat;*/
}

.columnHandle {
    min-height: 10px;
    float: left;
    width: 0px;
    overflow: hidden;
    /*background: #bbb url(../images/handle-icon.gif) center center no-repeat;*/
	background: #bbbbb;
    border: 1px solid #9a9a9a;
    border-top: 0;
}

/* Viewport overlays
---------------------------------------------------------------- */

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

/* Underlay */

#windowUnderlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
}

* html #windowUnderlay {
    position: absolute;
}

/* 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: #6C98D9;
    overflow: hidden;
    border-top: 1px solid #d9d9d9;
}

div.mochaToolbarWrapper.bottom {
    border: 0;
    border-bottom: 1px solid #d9d9d9;
}

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

.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 {
}

.mochaSpinner{
    visibility: hidden;
    position: absolute;
    bottom: 7px;
    left: 6px;
    width: 16px;
    height: 16px;
    background: url(../images/spinner.gif) no-repeat;
}

.mochaIframe {
    width: 100%;
}

/* Fix for IE6 select z-index issue */
.zIndexFix {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    filter: mask();
    width: 100px;
    height: 100px;
    border: 1px solid transparent;
}

/* Modals */

.modal2 {
    border: 8px solid #fff;
}

.modal2 .mochaContentBorder {
    border-width: 0px;
}

/* Window Themes */

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

.mocha.no-canvas .mochaTitlebar {
    background: #f1f1f1;
}

.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;
}

/* Compontents
---------------------------------------------------------------- */

/* Toolbar Tabs */

.toolbarTabs {
    padding: 0 5px 2px 2px;
    background: url(../images/tabs.gif) repeat-x;
    background-position: left -70px;
    overflow: visible;
}

.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 0 5px 0;
    cursor: pointer;
    background: url(../images/tabs.gif) repeat-x;
    background-position: left -35px;
}

.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 -35px;
}

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

/* Accordian */

.accordianWrapper {
    padding: 0;
    background: #fff;
}

.accordianToggler {
    margin: 0;
    padding: 6px 10px;
    background: #f1f1f1 url(../images/bg-panel-header.gif) repeat-x;
    font-size: 12px;
    cursor: pointer;
    border-top: 1px solid #e3e3e3;
}

.topToggler {
    border-top: none;
}

.accordianToggler.open {
    background: #fff url(../images/bg-panel-header.gif) repeat-x;
}

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

/* Sliders */

.slider {
    clear: both;
    position: relative;
    font-size: 12px;
    font-weight: bold;
    width: 200px;
    margin-bottom: 15px;
}

.sliderWrapper {
    position: relative;
    font-size: 1px;
    line-height: 1px;
    height: 9px;
    width: 222px;
}

.sliderarea {
    position: absolute;
    top: 0;
    left: 0;
    height: 7px;
    width: 220px;
    font-size: 1px;
    line-height: 1px;
    background: url(../images/slider-area.gif) repeat-x;
    border: 1px solid #a3a3a3;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.sliderknob {
    position: absolute;
    top: 0;
    left: 0;
    height: 9px;
    width: 19px;
    font-size: 1px;
    line-height: 1px;
    background: url(../images/knob.gif) no-repeat;
    cursor: pointer;
    overflow: hidden;
    z-index: 2;
}

.update {
    padding-bottom: 5px;
}

/* 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 a {
    color: #b2b2b2;
    height: 20px;
}

.tree li img {
    vertical-align: middle;
    width: 18px;
    height: 18px;
    overflow: hidden;
}

.tree li span {
    padding-left: 2px;
}

/* View Toggle */

.viewToggle {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 60px;
    text-align: right;
}

.viewToggle img.viewToggleList, .viewToggle img.viewToggleGrid {
    width: 28px;
    height: 22px;
}

.viewToggle img.viewToggleList {
    background: url(../images/view-toggle.gif) no-repeat;
    background-position: 0 -66px;
}

.viewToggle img.viewToggleGrid {
    background: url(../images/view-toggle.gif) no-repeat;
    background-position: 0 0;
}

/* Miscellaneous
---------------------------------------------------------------- */

/* Window Builder Form Elements */

#desktop form {
    margin: 0 0 0 0;
    padding: 5px 0 0 0;
}

#newWindowForm {
    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;
}

/* Menus */

.menu-right li {
    list-style-type: none;
    display: inline;
    margin: 0 0 0 15px;
}

/* Notifications */

/* Success, error & notice boxes for messages and errors. */
.error,
.notice,
.success    { padding: 8px; margin-bottom: 10px; border: 2px solid #ddd; }
.error      { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #817134; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #529214; border-color: #C6D880; }
.error a    { color: #D12F19; }
.notice a   { color: #817134; }
.success a  { color: #529214; }
.oltext {color: #000000;
	padding: 3px;
	margin: 3px;
	font-size: 10px;
	line-height: 12px;
}
.oltext a:hover {
    text-decoration: underline;
    color: blue;
}


/* Clears */

.clear {
    clear: both;
    height: 0;
}

*html .clear {
    height: 1%;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    visibility: hidden;
}

div.error1 {
    font-family: Verdana, arial, sans-serif;
    font-size: 11px;
    color: #aa0000;
    font-weight: bold;
}