#desktop {
    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: #f1f1f1;
}

#desktopTitlebarWrapper {
    position: relative; 
    height: 45px;
    overflow: hidden;
    background: #333 url(/images/waterlu-ui/bg-header.gif) repeat-x;
}

#desktopTitlebar {
    padding: 7px 8px 6px 8px;
    height: 32px;
    background-position: left 0;
}

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

#desktopTitlebar h2.tagline {
    font-size: 12px;
    color: #b2b2b2;
    font-weight: bold;
    padding: 5px 0 0 0;
    text-align: center;
}

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

#topNav {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    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/waterlu-ui/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/waterlu-ui/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 {
    width: 16px;
    height: 16px;
    background: url(/images/waterlu-ui/spinner-placeholder.gif) no-repeat;
    margin-right: 5px;
}

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

/* Navbar */

#desktopNavbar {
    background: #4C4C4C;
    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/waterlu-ui/arrow-right.gif);
    background-repeat: no-repeat;
    background-position: right 7px; 
} 

#desktopNavbar li ul {
    padding: 2px;
    border: 1px solid #3f3f3f;
    background: #fff url(/images/waterlu-ui/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: #555;
    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: #6C98D9;
    color: #fff;
}

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

#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: hidden; /* 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: #333;
    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: #4c4c4c;
    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;
    background: url(/images/waterlu-ui/dock-tabs.gif) left top no-repeat;
}

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

/* Panels */

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

.pad {
    position: absolute;
    top: 0;
    left: 0;
    padding: 8px;
    overflow: hidden;
}

#mainPanel {
    background: #fff;   
}   

.panel-header {
    position: relative; 
    background: #f1f1f1 url(/images/waterlu-ui/bg-panel-header.gif) repeat-x;
    height: 30px;
    overflow: hidden;
    border-bottom: 1px solid #d3d3d3;       
}

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

.panel-headerContent.tabs {
    background: url(/images/waterlu-ui/tabs.gif) repeat-x;
    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-collapse {
    background: url(/images/waterlu-ui/collapse-expand.gif) left top no-repeat;
}

.panel-expand {
    background: url(/images/waterlu-ui/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: #f9f9f9;
    height: 30px;
    overflow: hidden;
    border-top: 1px solid #b9b9b9;
}

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

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

/* Handles */   

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

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

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

.columnHandle {
    min-height: 10px;   
    float: left;
    width: 4px;
    overflow: hidden;
    background: #bbb url(/images/waterlu-ui/handle-icon.gif) center center no-repeat;
    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: #f1f1f1;    
    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;*/
    padding: 0;
}

.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 {
    background: transparent url(/images/waterlu-front/close.png) no-repeat 0 0;
    width: 42px;
    height: 42px;
}

.mochaSpinner{
    visibility: hidden; 
    position: absolute;
    bottom: 7px;
    left: 6px;
    width: 16px;
    height: 16px;
    background: url(/images/waterlu-ui/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;
}
    
.modal3 {
    border: none;
}

.modal3 .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/waterlu-ui/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/waterlu-ui/tabs.gif) repeat-x;
    background-position: left -35px;
}

.tab-menu li.selected {
    background: url(/images/waterlu-ui/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/waterlu-ui/tabs.gif) repeat-x;
    background-position: right -35px;   
}

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

/* Accordian */

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

.accordianToggler {
    margin: 0;
    padding: 6px 10px;
    background: #f1f1f1 url(/images/waterlu-ui/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/waterlu-ui/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/waterlu-ui/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/waterlu-ui/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: #3f3f3f; 
}   

.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/waterlu-ui/view-toggle.gif) no-repeat;
    background-position: 0 -66px;
}

.viewToggle img.viewToggleGrid {
    background: url(/images/waterlu-ui/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; }


/* Clears */

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

*html .clear {
    height: 1%;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    visibility: hidden;
}
/* Banner Section ----------*/
.banner-image{
  float:left;
}

.banner-box{
  background-color: #ccc;
  padding: 4px 4px -2px 4px;
}

.banner-info{
  float:left;
  width: 275px;
  padding: 10px 5px 5px 10px;
}
.banner-title{
  font-size: 20px;
  font-weight: bold;
}
.banner-url{
  margin: 8px 0 0 0;
  font-size: 13px;
}
.banner-desc{
  margin: 14px 0 0 0;
}
.banner-front-image{
  width:275px;height: 300px;overflow:hidden;
}
.banner-front-info{
  width: 275px;
  padding: 5px;
  background-color: #ccc;

}
/* End Banner Section ----------*/