@charset "UTF-8";

/*
 * SVNID = '$Id: jx_corestyle.css 12607 2014-10-01 14:25:09Z planders $'
 *
 * jx_corestyle.css
 *
 * (C) COPYRIGHT Journyx, Inc 1997 - 2010
 *  All Rights Reserved
 *  Licensed Materials - Property of Journyx, Inc.
 *
 * This is the primary stylesheet file for Journyx.
 *
 * Developers should also read the rest of the comments here before
 * making new changes.
 * 
 *
 ************************************************************
 *                   FONT INFORMATION                       *
 ************************************************************
 *
 * The font-family line should only be set in one place.  Don't repeat
 * font faces all over this file.  ALWAYS use 'em' units for font size.
 * 
 * current standard font line  (Set in Oct 2004 by planders)
 * 
 * font-family: Verdana, Tahoma, Luxi Sans, Arial, Helvetica, Geneva, sans-serif; 
 *
 * or this for any monospaced areas: 
 *
 * font-family: MS Courier New, Courier New, Lucida Console, Monaco, Courier, monospace;
 *
 * ALWAYS ALWAYS ALWAYS USE em UNITS FOR FONT SIZE!!! 
 * 1.0 em is the 'standard' font size.
 * 0.8 em is about 80% standard size.
 * 
 * REMEMBER THAT FONT SIZES INHERIT FROM CONTAINERS and 80% of 80% can
 * be too small.  In general you do NOT want to use either a fixed
 * pixel (px) or percentage based font size.
 *
 * Verdana is the new Tahoma
 * Luxi Sans and Lucida Console are for certain Unix systems
 * Helvetica and Geneva and Monaco are for older Macs 
 * Most modern computers have Arial and usually Verdana & Tahoma and Courier New
 *
 * optional for smaller areas -- seems to be ignored by many browsers unfortunately
 * { font-stretch: semi-condensed; }
 *
 ************************************************************
 *            General Style Info & Comments                 *
 ************************************************************
 * 
 * Stay away from pixel (px) units.  You should be using relative
 * sizes (generally the 'em' unit) for everything: all padding and
 * spacing.  The toolbar width is specified in em units.
 *
 ************************************************************
 *                Layout of this file                       *
 ************************************************************
 *
 * This file is generally organized in a top-down fashion.  First you
 * have the most general stuff that applies to everything and then
 * later on more specific elements.
 *
 *   - Main/General body stuff
 *   - old main.css stuff  
 *   - old style.css stuff
 *   - old icons.css stuff
 *   - old preferences.css stuff
 *   - old timesheet.css stuff 
 *
 * If something only applies to a specific optional feature, such as
 * the toolbar, consider putting it in a separate file.  If it is
 * something that will be on most or all Timesheet pages then it
 * belongs here.
 *  
 */

/* 

Style note: please maintain a consistent style in this file.  Put all the
selectors on one line if possible.  Put the opening curly brace on that
same line.  Put each property setting on a SEPARATE LINE.  Put a blank
line between each style declaration.  Like this:

SELECTOR1, SELECTOR2  {
    property: value;
    property2: value2;
}

ANOTHERSELECTOR {
    property3: value3;
}

 */

HTML, BODY {
    margin: 0;
    padding: 0;
    border: none;
    height: 100%;
}

BODY {
    /* IMPORTANT: Use em units for font sizes in the rest of the document!!! */
    font-size: 65%; /* Allows better resizing of fonts in MSIE.  */
    font-family: Verdana, Tahoma, Luxi Sans, Arial, Helvetica, Geneva, sans-serif;

}

#idPageContainer {
    min-height: 100%;
    position: relative;
    _height: 100%;
}

#idPageHeader {
}

#idPrimaryContent {
    padding-bottom: 35px;
}

#idPageFooter {
    position: absolute;
    bottom: 0;
    height: 35px;
    width: 100%;
}

.clsMainPage {
    padding-bottom: .7em;
}

.clsStandardContent {
    margin: 0 1em;
}

.clsStandardContentFooter {
    padding: 10px 0 0;
    margin: 0 15px 0 10px;
    /*	color:#666;  */
    font-size: 10px;
    vertical-align: middle;
}

/* Layout for SIMPLE pages
*/

BODY.JXDocType_SIMPLE {
    height: auto;
    text-align: center;
}

BODY.JXDocType_SIMPLE #idPageContainer {
    width: 600px;
    margin: 60px auto 0 auto;
    min-height: 1%;
    height: auto;
    text-align: left;
    overflow: hidden;

    position: relative;
    /* This caused IE to kill our background color.
    behavior:url('../jtime/stylesheets/border-radius.htc');
    */
    border-bottom-left-radius: 1em;
    -moz-border-radius-bottomleft: 1em;
    -webkit-border-bottom-left-radius: 1em;
    -khtml-border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    -moz-border-radius-bottomright: 1em;
    -webkit-border-bottom-right-radius: 1em;
    -khtml-border-bottom-right-radius: 1em;

    box-shadow: 2px 4px 6px #999;
    -moz-box-shadow: 2px 4px 6px #999;
    -webkit-box-shadow: 2px 4px 6px #999;
    -khtml-box-shadow: 2px 4px 6px #999;
}

.boxShadow {
    box-shadow: 2px 4px 6px #999;
    -moz-box-shadow: 2px 4px 6px #999;
    -webkit-box-shadow: 2px 4px 6px #999;
    -khtml-box-shadow: 2px 4px 6px #999;
    margin: 4px 6px 4px 4px;
}

BODY.JXDocType_SIMPLE #idPrimaryContent {
    position: relative;
    /* This caused IE to kill our background color.
    behavior:url('../jtime/stylesheets/border-radius.htc');
    */
    border-bottom-left-radius: 1em;
    -moz-border-radius-bottomleft: 1em;
    -webkit-border-bottom-left-radius: 1em;
    -khtml-border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    -moz-border-radius-bottomright: 1em;
    -webkit-border-bottom-right-radius: 1em;
    -khtml-border-bottom-right-radius: 1em;
}

/*
 * by default most browsers give a considerable bottom margin to all
 * forms - reduce it a bit 
 */
FORM {
    margin-top: 0;
    margin-bottom: 4px;
    padding: 0;
}

IMG {
    border-width: 0;
}

TABLE, TD, TR {
    font-family: Verdana, Tahoma, Luxi Sans, Arial, Helvetica, Geneva, sans-serif;
    font-style: normal;
    font-size: 1em; /* the baseline font size (inherited from BODY) */
    border-width: 0;
    border-collapse: collapse;
    /* -moz-border-radius: 8px; */
    /* XXX TODO */

    color: inherit;
    background-color: inherit;
}

/* this is a class instead of ID so it won't take precedence over
 * other class padding rules. 
 */
.clsPrimaryContent TD {
    padding: 2px; /* XXX TODO: applies to ALL TABLES in the main content area !! */
}

/* We don't need the previous style's padding in time entry container tables. */
.entryTableContainer TD {
    padding: 0;
    margin: 0;
}

SELECT, INPUT, TEXTAREA {
    /* The font for these things is not inherited from the general font given above.
       If you didn't specify this it would default to monospaced in most browsers. */

    font-family: Verdana, Tahoma, Luxi Sans, Arial, Helvetica, Geneva, sans-serif;
    font-size: 1em;
}

/* XXX TODO -- is this needed? */
TEXTAREA {
    overflow: auto;
}

.errorDocSubtitle {
    font-size: 1.4em;
    font-weight: bold;
    padding: 0.2em;
}

.errorDocTBMessage {
    font-size: 1.0em;
    width: 100%;
}

PRE.errorDocTraceback {
    font-size: 13px;
    margin-left: 2.5em;
    font-family: monospace;
    white-space: pre;
}

.curvedBorder {
    border: 4px solid black;
}

.curved {
    position: relative;
    /* behavior:url('../jtime/stylesheets/border-radius.htc'); */
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    -khtml-border-radius: 1em;
}

.curved-small {
    position: relative;
    /* behavior:url('../jtime/stylesheets/border-radius.htc'); */
    border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    -khtml-border-radius: 0.5em;
}

.curvedBottomLeft {
    position: relative;
    /* Really hard to make this work in IE, and not worth it?
       Because IE, even with behavior, only support roundrect, which is all 4 corners.
    behavior:url('../jtime/stylesheets/border-radius.htc');
    */
    border-bottom-left-radius: 1em;
    -moz-border-radius-bottomleft: 1em;
    -webkit-border-bottom-left-radius: 1em;
    -khtml-border-bottom-left-radius: 1em;
}

H1, H2, H3, H4, H5, H6 {
    font-weight: bold;
}

H1, .size1 {
    font-size: 1.4em;
}

H2, .size2 {
    font-size: 1.25em;
}

H3, .size3 {
    font-size: 1.1em;
}

H4, .size4 {
    font-size: 1.05em;
}

H5, .size5 {
    font-size: 1em;
}

H6, .size6 {
    font-size: 0.9em;
}

/* ========================================================
 Properties of HEADER elements
======================================================== */

#idHeader {
    padding: 0;
    position: relative;
}

#idHeaderLinks {
    padding: 2px 8px 4px 16px;
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
}

#idHeaderLinks a, #idHeaderLinks a:visited {
    margin-top: 3px;
    padding-top: 3px !important;
    font-weight: 500;
    text-decoration: none;
    background: no-repeat 0 5px;
}

#idHeaderLinks a:hover {
    text-decoration: underline;
}

#idHeaderLinks .popupCalendarInput {
    font-size: .6em;
}

#idHeaderLinks .popupCalendarInput input {
    position: relative;
    top: -2px;
}

#idHeaderLinks input.clsButtonInner {
    font-size: .8em;
}

#idHeaderLinks input.clsCalInput {
    font-size: 1.2em;
}

/* ========================================================
 Properties of large BEVELED GRAY CONTAINER holding
   sidebar and primary content
======================================================== */

#idMainPageContainerTD {
    /*  position: relative; */
    height: 100%;
    padding: 0; /* XXX TODO */
    vertical-align: top;
}

.clsContainerBackground {
    background-color: #D5D5D5;
}

.clsContainerBevel {
    height: 4px;
    font-size: 1px;
    width: 100%;
}

.clsCornerBevel {
    width: 4px;
}

.clsContainerBevel TD {
    font-size: 1px;
    height: 4px;
}

.clsContainerTopBevel, .clsContainerBottomBevel {
    background: #D5D5D5 repeat-x;
    font-size: 1px;
    height: 2px;
}

.clsContainerTopBevel {
    background-image: url('../image/60/border_gray.gif');
}

.clsContainerBottomBevel {
    background: url('../image/60/border_gray.gif') 0 3px;
}

.clsContainerLeftBevel, .clsContainerRightBevel {
    background: #D5D5D5 repeat-y;
}

.clsContainerLeftBevel {
    background: url('../image/60/border_gray.gif') 0 0;
}

.clsContainerRightBevel {
    background: url('../image/60/border_gray.gif') 4px 0;
}

/* ========================================================
 Properties of PRIMARY CONTENT area
======================================================== */

TABLE.JXDocType_POPUP #idPrimaryContainer {
    padding-left: 2px;
}

#theBodyTable {
    height: 100%;
}

.clsStatusLineArea {
    font-weight: bold;
}

.clsStatusLineArea A {
    text-decoration: none; /* No underline on status line links */
}

CAPTION {
    text-align: left;
    font-weight: bold;
    font-size: 1.0em;
    border: 1px solid;

    /*  padding: 0.2em; */
    padding: 2px 2px 2px 0.4em;
    /*  margin-left: -1px; */
}

.reportContentTable CAPTION {
    padding: 0;
}

/* Apply this to tables when they shouldn't be 'visible' with colors
 * or borders 
 */
.invisibleTable {
    padding: 0;
    /* margin: 0px; */
    /* Needed?? */
    border-width: 0;
    border-collapse: collapse;
}

/* Prevent buttons inside of other tables from showing borders and backgrounds */
.contentTable tr .invisibleTable tr td {
    border: none;
    background: inherit;
}

/* Used in the password change screen to allow a vertical divider
 * between name and password change areas
 */
.invisibleTableVertLineLeft {
    padding: 0;
    border-width: 0;
    border-collapse: collapse;
    border-left: 2px solid black;
}

/* override the default padding for table cells. */
.invisibleTable TD {
    border-width: 0;
    padding: 0;
}

/* like invisibleTable, but doesn't affect padding. */
.invisible {
    padding: inherit;
    margin: inherit;
    border-width: 0;
    border-collapse: collapse;

}

BODY.innerFrame {
    background-color: #FFFFFF;
}

.contentTable {
    /*  border-width: 1px;  */
    border-style: solid;
    border-collapse: collapse;
    text-align: left;
}

.simpleContentTable {
    border-style: none;
    border-collapse: collapse;
    text-align: left;
}

.clsTableHeading {
    border-bottom: 1px solid;
    padding: 5px !important;
    font-weight: bold;
}

.contentTable TR, .contentTable TD, .contentTable TH {
    /*  border-style: dashed;
      border-width: 0px; */
    vertical-align: middle;
}

.contentTable TR.primary TD, .contentTable TR.secondary TD {
    border: 1px dashed;
    border-right-width: 0;
    border-left-width: 0;
}

.contentTable TR.primary TH {
    border: 1px dashed;
}

.contentTable TH, .contentTable TD, .simpleContentTable TH, .simpleContentTable TD, .headingCell {

    /* stuff should be vertically centered within these cells. */
    vertical-align: middle;
    padding: 3px 3px 3px 4px; /* Top Right Bottom Left */
}

.jtguiContentTable TH, .jtguiContentTable TD {
    padding: 2px 2px 2px 4px; /* Top Right Bottom Left */
}

.simpleContentTable TH.titleRow, .simpleContentTable TD.titleRow {
    font-weight: bold;
}


.contentTable TR.totals TD.invisible, .contentTable TR.totals TH.invisible {
    border-width: 0;
}


.contentTable TR.togglerow TD {
    border-width: 0;
}

.contentTable TR.heading TH, .contentTable TFOOT TR.totals TH, .undershadow {
    background: url('../image/undershadow.png') repeat-x;
    padding: 14px 5px;
    margin-top: 1px;
}

.mileage-input-div {
    display: none;
}

.mileage-info-div {
    display: none;
    padding-right: 8px;
    padding-left: 8px;
    /*font-size: 1em;*/
    border: 1px solid black;
    margin: 2px;
    width: 160px;
}

.jtguiBlankRowTemplate {
    display: none;
}

.elapsedtime {
    text-align: center;
    border: none;
    position: relative;
    top: -1.35em;
    font-size: 1.2em;
    font-weight: bold;
}

/* The little table inside the jtgui tooltips on the TOTALS columns (new in Mass Entry mode) */
TABLE.ttipEntryTotals TBODY TR TD {
    padding-right: 3px;
}

.jtguiContentTable TR.heading TH {
    padding: 5px;
}

.jtGuiContentTable TD {
    border-bottom: 1px dashed #C5C5C5;
}

/* removes border in the in/out times area at the top of allocation entry, which is set by above style. */
.allocTopNoBorder TD {
    border-width: 0;
}

.contentTable TR.totals TD {
    border-right-width: 1px;
}

TR.totals TD {
    white-space: nowrap;
}

.contentTable TD A, .simpleContentTable TD A {
    text-decoration: underline; /* This makes links inside contentTable have the underline. */
    /*  vertical-align: middle; */
}

.contentTable TD .clsHeading, .contentTable TD.clsHeading,
.simpleContentTable TD .clsHeading, .simpleContentTable TD.clsHeading {
    font-weight: bold;
    padding-bottom: 4px;
}

.contentTable TD .clsLabel, .contentTable TD.clsLabel,
.simpleContentTable TD .clsLabel, .simpleContentTable TD.clsLabel {
    font-weight: bold;
    float: left;
    white-space: nowrap;
    padding-right: 3px;
}

.simpleContentTable TD.section, .simpleContentTable TH.section {
    border-right: 1px solid;
}

.simpleContentTable .bottom-border {
    border-bottom: 1px solid;
}

/*
 * stdscreen.pyc stuff - standard object editor screen
 */

/* A class shared by ALL stdscreen buttons */
.clsStdScrnButton {
    padding: 0;
    margin: 0 0.5em 0 0;
    text-align: left;
}

/* A DIV container for the standard 'Create' button */
.clsStdScrnButton_i_show_create {
    padding-bottom: 0.4em;
    margin: 0;
    text-align: right;
}

.clsEmptySearchResultContainer {
    padding: 0.5em;
    *height: 1%;
}

/*
 *clsSearchableField is a 'search input' table cell (TD) on the search form.
 *
 */
.clsSearchableField {
    padding-left: 2px !important;
    padding-right: 2em !important;
}

/*
 * All clsSearchForm objects should also have the contentTable class.
 */

.clsSearchForm {
    border-width: 1px;
    /* border-style: solid; */
    /* padding: 1em; */
}

/*
.clsSearchForm TABLE TBODY TR TD {
  vertical-align: top;
  border-width: 0px;
  padding: 2px;
}
*/

.clsSearchForm SELECT, .clsSearchForm INPUT, .clsSearchForm TEXTAREA {
    font-weight: bold;
}

/* The "number selected" input */
.SSearchNumSelected {
    border-width: 0;
}

/* Pad the bottom of all search results tables - padding between the table and any buttons such as Delete */
.clsSearchResultsTable {
    margin-bottom: 5px;
    margin-top: 4px;
    border-width: 0;
}

.clsSearchResultsTable TBODY SELECT, .clsSearchResultsTable TBODY INPUT {
    vertical-align: middle;
}

/* Override some stuff from regular CAPTION when in search results */
.clsSearchResultsTable CAPTION {
    /*  font-size: 1em;  */
    font-weight: normal;
    /*  padding: 2px; */
    padding: 0;
    margin: 0;
}

/*
 * Make the headers and footers of search results tables expand to
 * fill available area.
 */

.clsSearchResultsTable CAPTION TABLE, .clsSearchResultsTable TFOOT TABLE {
    width: 100%;
    margin: 0;
    padding: 0;
}

.clsSearchResultsTable CAPTION TR TD, .clsSearchResultsTable CAPTION TR TH,
.clsSearchResultsTable TFOOT TR TH, .clsSearchResultsTable TFOOT TR TD {
    margin: 0;
    padding: 0;
}

.clsSearchResultsTable CAPTION INPUT, .clsSearchResultsTable TFOOT INPUT {
    margin: 1px;
    padding: 1px;
    text-align: right;
}

.clsSearchResultsTable CAPTION TBODY TD, .clsSearchResultsTable TFOOT TBODY TD, .clsSearchResultsTable TFOOT TBODY TH {
    vertical-align: middle; /* stuff should be vertically centered within these cells. */
    padding: 1px;
    margin: 0;
}

.clsSearchResultsTable CAPTION .clsButtonWrapper, .clsSearchResultsTable TFOOT .clsButtonWrapper {
    padding: 0;
    margin: 1px 0 2px;
    vertical-align: middle;
}

.clsSearchResultsTable CAPTION .clsButtonInner, .clsSearchResultsTable TFOOT .clsButtonInner {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    padding: 0.2em;
}

/* The text that says "Search Results" on most screens */
.clsSearchResultsTitle {
    font-size: 1.3em;
    margin: 0 0.5em;
}

/* Smaller stuff that can also appear in this search results title area. */
.clsSearchResultsTitleSub {
    font-size: 1.0em;
    /*  margin-right: 0.5em; */
    /*  margin-left: 0.5em; */
}

.clsSearchResultsHeaderLeft, .clsSearchResultsHeaderRight {
    margin: 0;
    padding: 0;
    font-size: 1.1em;
    width: 98%;
    vertical-align: middle;
}

/* There is a MSIE-only inline stylesheet in wtdoc that sets this to middle for MSIE */
.clsSearchResultsTable CAPTION SELECT, .clsSearchResultsTable CAPTION INPUT,
.clsSearchResultsTable TFOOT SELECT, .clsSearchResultsTable TFOOT INPUT,
.clsSearchResultsHeaderLeft INPUT, .clsSearchResultsHeaderLeft SELECT,
.clsSearchResultsHeaderRight INPUT, .clsSearchResultsHeaderRight SELECT {
    vertical-align: baseline;
}

.clsSearchResultsHeaderLeft {
    text-align: left;
    padding-left: 0.5em;
}

.clsSearchResultsHeaderRight {
    text-align: right;
    padding-right: 1em;
}

/* The << and >> page navigation links in search results */
.clsSearchResultsNavArrows {
    font-weight: bold;
    margin: 2px 0.5em;
}

/*
 * The main 'content' cells for Search Results tables 
 */

.clsSearchResultsTable TBODY TR TD {
    padding: 0.55em 0.75em;
}

/* Branding screen color swatches / previews */

.clsBrandingForm TBODY TR TD {
    white-space: nowrap;
}

.clsColorInputPreview {
    border: 1px solid black;
    width: 180px;
    height: 15px;
    vertical-align: middle;
}

.clsColorSuggestionCell {
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

.clsColorSuggestionText {
    display: relative;
    float: left;
}

.clsColorSuggestion {
    display: inline;
    position: relative;
    float: left;
    border: 1px solid black;
    vertical-align: middle;
    text-align: center;
    margin: 0 0.5em 0 0;
    padding: 3px 0.6em;

}

.clsColorSuggestion A {
    color: black;
    text-decoration: none;
}

.clsColorInputDesc {
    text-align: right;
}

.clsColorInputHeaderAffected {
    text-align: right;
    font-weight: bold;
}

/*
 * Used for DIV tags that submit a form when clicked 
 * Supposed to look like regular links
 */
.clsFormSubmit_Link {
    display: inline;
    text-decoration: underline;
    cursor: pointer;
}

.clsPopupRunBoxTitle {
    padding: 0.5em;
    font-size: 1.2em;
    font-weight: bold;
}

.clsPopupRunBoxBody {
    padding: 0.8em;
    font-size: 1.1em;
}

/*
 * This class should be applied to tables that enclose a general
 * purpose form for editing the attributes of any object.
 */

.clsAttributesForm {
    /* margin: 1em 0.2em 1em 0.2em; */
    margin: 0 0 1em;
    border: 2px solid;
    border-collapse: collapse;
}

.clsAttributesForm TD {
    padding: 4px 1.1em;
}


.add-remove-selector-table {
    padding: 0;
    /*spacing: 0px;*/
    /* cellpadding=0; */
    margin-top: 5px;
}

/* Overrides rule from above for '.clsAttributesForm TD' for role mgmt scrn */
.add-remove-selector-table TD {
    padding: 0;
}

.add-remove-selector-button-table {
    width: 100%;
    height: 100%;
    /*spacing: 0px;*/
}

.add-remove-selector-button-table TD {
    text-align: center;
    vertical-align: top;
    padding-left: 7px;
    padding-right: 7px;
}

/* ========================================================
 Properties of FOOTER elements
======================================================== */

#idFooter TD {
    padding: 0;
    color: #666666;
}

#idFooter TD A, #idFooter TD A:visited {
    color: #666666;
    text-decoration: underline;
}

#idFooter TD A:hover {
    color: #000000;
    text-decoration: underline;
}

/* entryTableContainer is only used in jtgui.py as far as I can tell. */
/* and only for the "inner scrollbars" version -- the "simple" version uses clsSimpleEntryScreen instead. */
.entryTableContainer {
    padding: 0 0 0 0;
    margin: 0;
}

.entryTableContainer TD {
    vertical-align: bottom;
}

.entryTableContainer TD DIV {
    padding-bottom: 1px;
}

.clsSimpleEntryScreen TD, .clsSimpleEntryScreen tr.heading TH {
    border-width: 0 !important;
}

/*
 * Used in jtgui (entry screens)
 *
 * All 'Field Value' cells (dropdowns & comment fields) have this
 * class name, as well as a class name specific to the type of cell,
 * such as clsEntry_h1 for Projects and clsEntry_tb1 for comments
 *
 */

/* This one covers ALL the additional sheet options */
.entryAdditionalOptionsDiv {
    font-size: 1.1em;
    padding-bottom: 0.2em;
}

.leaveReqsAccrualsTable THEAD TR TH {
    text-align: left;
    padding: 4px 1.1em;
    border: 0 solid black;
    border-bottom-width: 1px;
    white-space: nowrap;
}

/* Tooltip content for ACCRUALS on time entry screens */
.jtguiAccrualsTTIP {
    text-align: right;
}

TABLE.jtguiAccrualsTTIP THEAD TR TH {
    border: 0 solid black;
    border-bottom-width: 1px;
    white-space: nowrap;
    padding: 5px;
}

TABLE.jtguiAccrualsTTIP TBODY TR TD, TABLE.jtguiAccrualsTTIP THEAD TR TH {
    padding: 7px 5px 5px;
}

.tbankHours {
    color: #0000ff; /* move to colorstyle.py */
    text-align: right;
}

/* this only covers individual options */
.entryAdditionalOptionsItem {
    padding-right: 1em;
}

.clsFieldValueCell {
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell; /* provides correct vertical centering of cell contents. */
    padding-top: 1px;
}

/* The setting here and for the tree link img below are appropriate for non-MSIE browsers. */
/* The MSIE settings are given in wtdoc.py. */
.ruisearchlink IMG {
    margin: 0;
    vertical-align: middle;
}

/* Add a little padding below the popup TREE icon in entry screens */
/* #idMainTable .clsPopupTreeLink IMG, .clsSimpleEntryScreen .clsPopupTreeLink IMG {  */
.clsPopupTreeLink IMG {
    /* this is a percentage of the "line height" of the box - this seems to produce the most vertical centered icon in all browsers  */
    /* 0% being equivalent to 'baseline' */
    vertical-align: -10%;
}

/* Comments column - should word-wrap but with a minimum width */
.clsEntry_tb1 {
    white-space: normal;
}

/* ========================================================
 GENERIC/REUSABLE Properties 
======================================================== */

.clsNoWrap {
    white-space: nowrap;
}

.clsWrap {
    white-space: normal;
}

.clsLabel {
    font-weight: bold;
}

.clsSmallFont90 {
    font-size: 0.9em;
}

.clsWidth1 {
    width: 1px !important;
}

.clsWidth10 {
    width: 10px !important;
}

.clsWidth20 {
    width: 20px !important;
}

.clsWidth50 {
    width: 50px !important;
}

.clsWidth100 {
    width: 100px !important;
}

.clsWidth150 {
    width: 150px !important;
}

.clsWidth175 {
    width: 175px !important;
}

.clsWidth200 {
    width: 200px !important;
}

.clsWidth500 {
    width: 500px !important;
}

.clsWidth95Percent {
    width: 95% !important;
}

.clsWidth100Percent {
    width: 100% !important;
}

/*
 *  Usually appears on Login screens only but can appear in place of toolbar
 *  on any JXDocType_SIMPLE page. 
 */

.clsLoginPageLinks {
    float: left;

    padding: 0.5em;
    width: 11em; /* Approx same size as toolbar ... doesn't need to be exact but make it a bit less. */

    font-size: 1.2em;
    height: 100%;
}

.clsLoginPageLinksHeading {
    font-weight: bold;
    padding-top: 1em;
    padding-bottom: 1em;
}

/* An individual link */
.clsLoginPageLink {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.clsLoginPageLink A, .clsLoginPageLink A:active, .clsLoginPageLink A:hover, .clsLoginPageLink A:visited {
    text-decoration: underline;
}

.clsLoginForm {
    padding-left: 1.0em;
}

.clsLoginForm TD {
    padding: 1.1em 1.2em 0 0;
    color: #444;
}

/* The word 'Login' on the login page */
.clsLoginFormTitle {
    font-size: 2em; /* relative to container which already increases font size */
    font-weight: bold;
}

.clsLoginFormForgotPassword {
    display: inline; /* avoids sending to next line */
    padding-left: 1.5em;
    vertical-align: middle;
}

.clsLoginFormForgotPassword A, .clsLoginFormForgotPassword A:active, .clsLoginFormForgotPassword A:hover, .clsLoginFormForgotPassword A:visited {
    text-decoration: underline;
}

/*
 * XXX TODO- imported from main.css
 */

/* XXX TODO -- these are suspect for Anchors */

A {
    text-decoration: underline;
}

A:Active {
    text-decoration: underline;
}

A:Active.noLicenseLinks {
    text-decoration: underline;
}

A:Hover {
    text-decoration: underline;
}

A:Hover.noLicenseLinks {
    text-decoration: underline;
}

/* Allow external links to have underlines */
/* .clsExternalLink A, .clsExternalLink A:visited, .clsExternalLink A:active, .clsExternalLink A:hover { */
.clsExternalLink {
    text-decoration: underline;
}

/* Status Popup on time entry -- obsolete -- probably can be removed */
.divStatus {
    position: absolute;
    visibility: hidden;
    z-index: 200;
    font-size: 80%;
    padding: 3px;
}

.title {
    font-size: 125%;
    font-weight: bold;
}

/*
.copy { 
  font-size : 90%;
}
*/

.navSubLink {
    text-decoration: none;
}

.sysadmHeading {
    text-decoration: underline;
    font-weight: bold;
}

.status, .error {
    font-size: 1.2em;
    text-decoration: none;
    font-weight: bold;
    margin-top: 3px;
}

.status img, .error img {
    position: relative;
    top: 2px;
}

/*** start Calendar Table section ***/
/* any color spec in this section will get overwritten */

DIV.Bcalendarheader {
    width: 99%;
    border: 1px solid black;
    padding: 1px 0 2px 12px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Links in the header are only underlined when you hover over them. */
DIV.BCalendarheader A {
    text-decoration: none;
}

DIV.BCalendarheader A:hover {
    text-decoration: underline;
}

/* Make the images look better positioned in the header */
DIV.BCalendarheader IMG {
    position: relative;
    top: 2px;
}

DIV.BCalendarheader SPAN.todayactive {
    cursor: pointer;
}

DIV.BCalendarheader SPAN.todayactive:hover {
    text-decoration: underline;
}

/* These styles apply to the calendar table in all views (week, day, and month) */

TABLE.Bcalendar UL {
    padding: 2px;
    list-style-position: inside;
    margin: 0;
}

TABLE.Bcalendar TH {
    height: 2em;
}

TABLE.Bcalendar TD {
    vertical-align: top;
    padding: 0;
    border: 1px solid;
}

TABLE.Bcalendar TD DIV.cellcontent {
    margin: 2px;
    position: relative;
    left: 0;
}

/* This is because IE is retarded and I had to center a table in the day view. - AJR */
TABLE.Bcalendarday TD DIV.cellcontent {
    margin-top: 5px;
}

/* More IE retardation - this time, it's because IE renders the same div differently
   on first viewing than on subsequent views.  Content was bleeding too far left - so the
   solution was to push it far enough right to fix any overlapping, without making
   the "correct" view of it look too awkward.
*/
TABLE.Bcalendarday TD DIV.cellcontent TD {
    _padding-left: 6px; /* the underscore is an IE-only hack */
}

TABLE.Bcalendar TD DIV.cellcontent A.dateaction {
    float: right;
    font-size: .9em;
}

TABLE.Bcalendarday TD DIV.cellcontent A.dateaction {
    display: block;
    float: none;
    width: 100%;
    margin: 2px;
    text-align: right;
    position: relative;
    left: -2px;
}

TABLE.Bcalendar TD.weeklink {
    text-align: center;
    vertical-align: top;
    border: 0;
    padding: 0 2px 0 0;
}

TABLE.Bcalendarmonth TD.weeklink, TABLE.Bcalendarweek TH.daylink {
    text-decoration: underline;
}

TABLE.Bcalendaryeargrid {
    border: 0;
    height: 100%;
}

TABLE.Bcalendaryeargrid TD {
    border: 0;
    text-align: center;
}

TABLE.Bcalendaryeargrid DIV.calendar {
    margin: 20px auto 20px auto;
    width: 121px;
    cursor: pointer;
}

/*	These styles control the size of cells in the various views.
	The intention is that the calendar table remain the same size regardless of view.

	Day cells are 7 times as wide as month/week cells because there aren't 7 of them.
	Week/Day cells are 6 times as tall as month cells because there are usually 6
		weeks in a month.

	This is perhaps unnecessary because of the colwidth usage in jxcalendar.py

	We also do our best to avoid messing with any nested tables...
*/

TABLE.Bcalendar TH.weeklink, TABLE.Bcalendar TD.weeklink {
    width: 30px;
}

.Bcalendarmonth TH, .Bcalendarweek TH, .Bcalendarmonth TD, .Bcalendarweek TD {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}

.Bcalendarmonth TD {
    height: 60px;
}

.Bcalendaryeargrid, .Bcalendaryear TD, .Bcalendarweek TD, .Bcalendarday TD {
    height: 360px;
}

.Bcalendaryear TD TABLE TH, .Bcalendarmonth TD TABLE TH, .Bcalendarweek TD TABLE TH, .Bcalendarday TD TABLE TH,
.Bcalendaryear TD TABLE TD, .Bcalendarmonth TD TABLE TD, .Bcalendarweek TD TABLE TD, .Bcalendarday TD TABLE TD {
    height: auto;
    width: auto;
    min-width: auto;
    max-width: inherit;
}

/* The next two statements set up the little stripe with the day # in the month view */

.Bcalendarmonth TD.dayofmonth {
    padding-top: 0;
}

.Bcalendarmonth TD.dayofmonth A.dayheader {
    display: block;
    width: 100%;
    text-decoration: none;
    margin-top: 0;
    /* padding-right:  7px; */
    padding-top: 1px;
    padding-bottom: 1px;
    text-align: right;
}

/*** end Calendar Table section ***/

.navLinkHeading {
    font-size: 110%;
    font-weight: bold;
    /*  text-decoration : none;  */
    /* XXX TODO questionable planders */
}

/*** start sitemap section ***/

/* 
Four columns are displayed in the sitemap.
Each line (label or hyperlink) consists of one CSS block element.
Labels are in <div>s, links in <a>s.
Level 0 is the web page title, 
level 1 is the toplevel label/link in a column,
level 2 is the first indented level under that, etc.

sm-box      - the <div> containing the sitemap markup
sm-indentX  - controls indentation
sm-labelX   - controls label font stuff, space above label (margin-top)
sm-linkX    - controls link font stuff, space above link, make block elt
sm-colX     - controls column positioning and decoration
sm-col-end  - clears past all floated columns
sm-no-top-margin - codegen creates this to suppress space above 1st label1 in column
sm-not-impl - codegen creates this only if link has no mapping to file (so go fix it already!)
*/

.sm-indent0 {
    margin-left: 0;
}

.sm-indent1 {
    margin-left: 1em;
    margin-right: 1em;
}

.sm-indent2 {
    margin-left: 3em;
    margin-right: 1em;
}

.sm-indent3 {
    margin-left: 5em;
    margin-right: 1em;
}

.sm-col1 {
    border-left: 0 solid gray;
    float: left;
    width: 24%;
    padding: 0;
}

.sm-col2 {
    border-left: 1px solid gray;
    float: left;
    width: 24%;
    padding: 0;
}

.sm-col3 {
    border-left: 1px solid gray;
    float: left;
    width: 24%;
    padding: 0;
}

.sm-col4 {
    border-left: 1px solid gray;
    float: left;
    width: 24%;
    padding: 0;
}

.sm-colfaq a {
    margin-top: 1em;
}

/*.sm-col4 a    {margin-top: 1em;}*/
/*.sm-label0    {font-size: 1.35em; font-weight: bold; margin:     2em;}*/
/* web page title */
.sm-label0 {
    display: none;
}

.sm-label1 {
    font-size: 1.05em;
    font-weight: bold;
    margin-top: 1.5em;
}

.sm-label2 {
    font-size: 1em;
}

.sm-label3 {
    font-size: 1em;
}

.sm-link1 {
    padding: 2px;
    display: block;
    font-size: 1.05em;
    font-weight: bold;
    margin-top: 1.5em;
}

.sm-link2 {
    padding: 2px;
    display: block;
}

.sm-link3 {
    padding: 2px;
    display: block;
}

.sm-box {
    padding-bottom: 1.0em;
}

.sm-col-end {
    clear: left;
}

.sm-no-top-margin {
    margin-top: 0;
}

.sm-not-impl {
    background-color: red;
}

/* this class should never appear in production code */

.sitemapLink {
    text-decoration: none;
}

/*** end sitemap section ***/

/*********** END OF MAIN.CSS ***** CLEAN ME UP ***************/

/* ========================================================
 Properties of PRIMARY CONTENT elements
======================================================== */

.clsPrimaryContentTitle {
    font-weight: bold;
    white-space: nowrap;
}

.clsPrimaryContentSubTitle {
    white-space: nowrap;
}

#idPrimaryContentButtons DIV {
    background: no-repeat left top;
    height: 14px;
    white-space: nowrap;
    float: right;
    margin-left: 15px;
}

#idPrimaryContentButtons DIV A, #idPrimaryContentButtons DIV A:visited {
    padding-left: 15px;
    font-weight: bold;
    color: #156187; /* color 104a */
    text-decoration: none;
}

#idPrimaryContentButtons DIV A:hover {
    color: #000000; /* color 104b */
    text-decoration: underline;
}

#idPrimaryContentReqTimeoffButton {
    background-image: url('../image/60/icon-req_timeoff.gif');
    width: 115px;
}

#idPrimaryContentHelpButton {
    background-image: url('../image/60/icon-help.gif');
    width: 40px;
}

#idPrimaryContentPrintButton {
    background-image: url('../image/60/icon-print.gif');
    width: 150px;
}

/* ========================================================
 Properties of BUTTON elements
======================================================== */

.clsRUIButton {

}

.clsButtonWrapper {
    background: url('../image/Sliding_Blue_Left.png') no-repeat left top;
    padding: 0 0 0 18px;
    display: inline-block;
    *zoom: 1;
    *display: inline;
    margin: 6px 10px 5px 2px;
    height: 34px;
}

.clsButton, input.clsButton, a.clsButton {
    background: url('../image/Sliding_Blue_Right.png') no-repeat right top;

    /* override normal INPUT monospace font */
    font-family: Verdana, Tahoma, Luxi Sans, Arial, Helvetica, Geneva, sans-serif;
    color: white;
    font-size: 14px;

    margin: 0;
    padding: 0 18px 4px 0;
    cursor: pointer;
    text-decoration: none;
    border: none;
    height: 34px;

}

.clsButtonWrapperEnterKey {
    background: url('../image/Sliding_Green_Left.png') no-repeat left top;
}

.clsButtonWrapperEnterKey .clsButton, .clsButtonWrapperEnterKey input.clsButton, .clsButtonWrapperEnterKey a.clsButton {
    background: url('../image/Sliding_Green_Right.png') no-repeat right top !important;
}

.clsButtonWrapperStrange {
    background: url('../image/Sliding_Orange_Left.png') no-repeat left top;
    margin-right: 2px;
    margin-left: 10px; /* different because we're floated right */
}

.clsButtonWrapperStrange .clsButton, .clsButtonWrapperStrange input.clsButton, .clsButtonWrapperStrange a.clsButton {
    background: url('../image/Sliding_Orange_Right.png') no-repeat right top !important;
}

.clsButtonInner, input.clsButtonInner, a.clsButtonInner {
    font-weight: bold;
    font-size: 0.89em;

    padding: 1px 3px;
    margin: 2px 2px 0;
    height: auto;

    background-image: none;

    border: 1px solid;

    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
}

input.disabled {
    display: none;
}

/* 
 * Use these classes to add a Right/Left triangle-arrow to your button.
 *
 * These are meant to be used in ADDITION to clsButton.  So make your
 * INPUT's class something like:
 * 
 * <SELECT CLASS='clsButton clsButtonArrowLeft' NAME=...>
 *
 */
.clsButtonArrowLeft {
    margin: 0;
    padding: 0;
}

.clsButtonArrowRight {
    margin: 0;
    padding: 0;
}

/*
 * XXX TODO- imported from skins/01blue/icons.css
 *
 * Many of these are obsolete as far as I can tell.
 *
 */

.clsIconEdit {
    width: 10px;
    height: 10px;
    background: url('../image/60/icon-edit.gif') no-repeat;
    margin-right: 3px;
    cursor: pointer;
}

.clsIconSearch {
    width: 12px;
    height: 12px;
    background: url('../image/60/icon-search.gif') no-repeat;
    margin-right: 1px;
    cursor: pointer;
}

.clsIconListDefault {
    width: 15px;
    height: 11px;
    background: url('../image/60/icon-list_default.gif') no-repeat;
    margin-right: 1px;
    cursor: pointer;
}

.clsIconArrowDown {
    background: url('../image/60/icon-arrow-down.gif') no-repeat;
    width: 13px;
    height: 9px;
    margin-right: 2px;
}

.clsIconArrowRight {
    background: url('../image/60/icon-arrow-right.gif') no-repeat;
    width: 9px;
    height: 13px;
    margin-right: 6px;
}

.clsIconPrev {
    width: 13px;
    height: 12px;
    cursor: pointer;
    background: url('../image/60/icon-prev.gif') no-repeat;
}

.clsIconNext {
    width: 13px;
    height: 12px;
    cursor: pointer;
    background: url('../image/60/icon-next.gif') no-repeat;
}

.clsIconRowDel {
    width: 13px;
    height: 12px;
    background: url('../image/60/icon-row_delete.gif') no-repeat;
    margin-left: 6px;
    cursor: pointer;
}

.clsIconRowMemorize {
    width: 13px;
    height: 12px;
    background: url('../image/60/icon-row_memorize.gif') no-repeat;
    margin-left: 3px;
    cursor: pointer;
}

.clsIconMainTablePrev {
    background: url('../image/60/icon-table_prev.gif') no-repeat;
    width: 13px;
    height: 12px;
    margin-right: 2px;
}

.clsIconMainTableNext {
    background: url('../image/60/icon-table_next.gif') no-repeat;
    width: 13px;
    height: 12px;
    margin-right: 2px;
}

/*
 * XXX TODO- imported from skins/01blue/preferences.css
 */

/* ========================================================
   /skins/01blue/preferences.css
   Skin definitions for Preferences interfaces
   
   General style elements are defined in
   /styles/default.css
   Primary skin definitions are in
   /skins/01blue/style.css
======================================================== */

.clsPrefTable {
    border: 1px solid #AADE6D; /* color 201a */
    background-color: #EBF4E2; /* color 201b */
}

.clsPrefTable TD {
    padding: 15px;
    color: #33590E; /* color 202 */
}

.clsPrefTable TD .clsHeading, .clsPrefTable TD.clsHeading {
    font: bold 10pt verdana, sans-serif;
    color: #45A3D2; /* color 203 */
    padding-bottom: 4px;
}

.clsPrefTable TD .clsLabel, .clsPrefTable TD.clsLabel {
    font-weight: bold;
    float: left;
    white-space: nowrap;
    padding-right: 3px;
}

.clsPrefTableRowColor1 {
    background-color: #EBF4E2; /* color 204a */
    height: 23px;
}

.clsPrefTableRowColor2 {
    background-color: #F6F8F2; /* color 204b */
    height: 23px;
}

.clsPrefTable .clsPrefSelectTransferList {
    font: 10px verdana, sans-serif;
    overflow: auto;
}

.clsPrefTableBorder TD {
    font-size: 1px;
    border-bottom: 1px solid #AADE6D !important; /* color 201a */
    height: 1px;
    padding: 0;
}

.clsPrefTableHeading {
    border-bottom: 1px solid #AADE6D; /* color 201a */
    background-color: #CFE9B2; /* color 205a */
    padding: 5px !important;
    font: bold 8pt verdana, sans-serif;
    color: #33590E; /* color 202 */
}

.clsPrefTableNoPadding TD {
    padding: 0;
}

.clsPrefTableEntries TD {
    padding: 3px;
    border: 0 !important;
    color: #33590E; /* color 202 */
}

.clsPrefTableEntries TD .clsHeading, .clsPrefTableEntries TD.clsHeading {
    font: bold 10pt verdana, sans-serif;
    color: #45A3D2; /* color 203 */
    padding-bottom: 4px;
}

.clsPrefTableEntries TD .clsLabel, .clsPrefTableEntries TD.clsLabel {
    font-weight: bold;
    float: left;
    white-space: nowrap;
    padding-right: 3px;
}

.clsPrefTable INPUT.clsPrefInput, .clsPrefTableEntries TD INPUT.clsPrefInput, .clsPrefTable SELECT.clsPrefSelect, .clsPrefTableEntries TD SELECT.clsPrefSelect {
    font: 10px verdana, sans-serif;
}

.clsPrefTable INPUT.clsPrefInputShort, .clsPrefTableEntries TD INPUT.clsPrefInputShort {
    font: 10px verdana, sans-serif;
    width: 20px;
}

.clsPrefTableEntries TD TEXTAREA {
    font: 10px verdana, sans-serif;
    overflow: auto;
}

.clsPrefTableComplex {
    margin-top: 10px;
    border-right: 1px solid #AADE6D !important; /* color 201a */
    border-bottom: 1px solid #AADE6D !important; /* color 201a */
}

.clsPrefTableComplex TD {
    border-top: 1px solid #AADE6D !important; /* color 201a */
    border-left: 1px solid #AADE6D !important; /* color 201a */
    padding: 3px;
    color: #33590E; /* color 202 */
}

.clsPrefTableComplex .clsHeading TD {
    border-bottom: 1px solid #AADE6D; /* color 201a */
    font: bold 8pt verdana, sans-serif;
    background-color: #DEEFCB; /* color 205b */
    height: 25px;
}

/* ========================================================
 Properties of TAB SUBNAV elements
======================================================== */

#idTabSubNav.clsPreferences {
    background-color: #92D054; /* color 206a */

    /* XXX TODO
     * border-top: 0px;
     */
    /* color 206b XXX TODO color */

    border: solid #C9E8AA;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;

    z-index: 200;

    -moz-border-radius: 4px; /* XXX TODO rounded buttons on NS/Mozilla only */

}

#idTabSubNav.clsPreferences TABLE TD {
    border-top: 1px solid #C9E8AA; /* color 206b */
    white-space: nowrap;
}

#idTabSubNav.clsPreferences TABLE TD.clsTabSubNavSeparator {
    background: url('../image/60/tab_sub_nav_separator-prefs.gif') no-repeat;
}

#idTabSubNav.clsPreferences TABLE TD A, #idTabSubNav.clsPreferences TABLE TD A:visited {
    color: #FFFFFF; /* color 206c */
}

#idTabSubNav.clsPreferences TABLE TD A.clsTabSubNavSelected, #idTabSubNav.clsPreferences TABLE TD A.clsTabSubNavSelected:visited {
    color: #33590E; /* color 206d */
}

#idTabSubNav.clsPreferences TABLE TD A.clsTabSubNavSelected:hover, #idTabSubNav.clsPreferences TABLE TD A:hover {
    color: #33590E; /* color 206d */
}

/*
 * XXX TODO- imported from skins/01blue/timesheet.css
 */

/* ========================================================
   /skins/01blue/timesheet.css
   Skin definitions for Timesheet interfaces
   
   General style elements are defined in
   /styles/default.css
   Primary skin definitions are in
   /skins/01blue/style.css
======================================================== */

/* ========================================================
 Properties of COMMON MAIN and NOTES TABLE elements
======================================================== */

.clsMainTableRowColor1, .clsNotesTableRowColor1 {
    background-color: #EBF4E2; /* color 301a */
    height: 23px;
}

.clsMainTableRowColor2, .clsNotesTableRowColor2 {
    background-color: #F6F8F2; /* color 301b */
    height: 23px;
}

/* ========================================================
 Properties of MAIN TABLE elements
======================================================== */

.clsComplexTable TD {
    border-left: 1px solid #A0DA58; /* color 302 */
    border-bottom: 1px solid #A0DA58; /* color 302 */
}

.clsTableNoBorders TD {
    border: 0 !important;
}

.clsMainTableTitle, .clsMainTableTitleToggle {
    background-color: #CFE9B3; /* color 303 */
    border-top: 1px solid #A0DA58; /* color 302 */
    color: #668950; /* color 304a */
    font: bold 8pt verdana, sans-serif;
    height: 25px;
    padding-left: 3px;
    white-space: nowrap;
}

.clsMainTableTitleToggle {
    cursor: pointer;
}

.clsMainTableTitleWhite {
    border: 0 !important;
    height: 25px;
}

.clsMainTableHeader TD, .clsMainTableHeaderSmall TD, .clsMainTableFooter TD {
    background-color: #E0F0CD; /* color 305 */
    border-bottom: 2px solid #A0DA58; /* color 302 */
    color: #668950; /* color 304a */
    font: bold 10px verdana, sans-serif;
    white-space: nowrap;
}

.clsMainTableHeader TD {
    height: 33px;
    padding-left: 3px;
}

.clsMainTableHeaderSmall TD {
    height: 33px;
    text-align: center;
}

.clsMainTableHeaderSmallWhite {
    border: 0 !important;
    height: 33px;
}

.clsMainTableFooter TD {
    padding-left: 3px;
    padding-right: 2px;
    height: 28px;
}

TD.clsMainTableEmpty {
    background-color: #FFFFFF;
    border-bottom: 0 !important;
    white-space: nowrap;
}

.clsMainTableText {
    color: #000000; /* color 306 */
    font: 10px verdana, sans-serif;
    padding: 1px 2px 1px 3px;
    white-space: nowrap;
    height: 23px;
}

.clsMainTableTextSmall {
    color: #668950; /* color 304a */
    font: 10px verdana, sans-serif;
    padding: 1px;
    white-space: nowrap;
    height: 23px;
}

.clsMainTableInput {
    color: #000000; /* color 306 */
    font: 10px verdana, sans-serif;
    padding: 1px 2px 1px 1px;
    white-space: nowrap;
    height: 23px;
}

.clsMainTableInput INPUT, .clsMainTableInput SELECT {
    color: #000000; /* color 306 */
    font: 10px verdana, sans-serif;
}

.clsMainTableInput INPUT {
    color: #000000; /* color 306 */
    width: 98%;
    height: 14px;
}

.clsCommentIndicator {
    background: url('../image/60/icon-comment_indicator.gif') no-repeat top right;
}

.clsMainTableDayHourInput {
    color: #000000; /* color 306 */
    font: 10px verdana, sans-serif;
    padding: 1px;
    white-space: nowrap;
    height: 23px;
    width: 40px;
    text-align: right;
}

.clsMainTableInputSmall {
    color: #000000; /* color 306 */
    font: 10px verdana, sans-serif;
    padding: 1px;
    white-space: nowrap;
    height: 23px;
    text-align: right;
}

.clsMainTableDayHourInput INPUT, .clsMainTableInputSmall INPUT {
    color: #000000; /* color 306 */
    text-align: right;
    font: 10px verdana, sans-serif;
    width: 30px;
    height: 14px;
}

TD.clsMainTableWhite {
    border-bottom: 0 !important;
    background-color: #FFFFFF;
    color: #000000; /* color 306 */
    font: 10px verdana, sans-serif;
    padding: 0;
    white-space: nowrap;
}

/*
 * Turn off right-hand border on the 'totalsrow' under the 'maintableleft' (i.e, project/codes section)
 */

/* idMainTable is the jtgui entry screen container table */

#idMainTableLeft TFOOT .heading {
    border-width: 0;
}

#idMainTableRight TFOOT .heading {
    border: none;
}

/*
 * This the 'grid' area of Entry Screens 
 */
#idMainTableRight {
    white-space: nowrap; /* prevents icons next to grid cell from going to next line  */
}

/* Ensure there is no padding between the subsections of the jtgui MainTable
   Otherwise this rule was applying:
     .clsPrimaryContent TD { padding: 2px; }
*/
#idMainTable .MainTableCell {
    padding: 0;
    margin: 0;
}

/* 

for any styling on the configurable pre- and post-HTML on entry screens

The margins are needed because we're calling suppressMargins() to make the
main entry screen tables take up the whole window width.

*/
.jtguiprehtml {
    display: block;
    margin: 2px 5px;
}

.jtguiposthtml {
    display: block;
    margin: 2px 5px;
}

.columntotal, .rowtotal, .grandtotal, .readonlyinput {
    border: none;
    font-weight: bold;
    /*  padding-right: 2px;*/
    padding: 0;
}

TH.columntotal {
    padding-right: 2px;
}

.rowtotal {
    padding-right: 2px;
}

.rowtotal, .grandtotal {
    text-align: right;
}

.contentTable TR.togglerow TD, .togglerowCollapsed TD {
    /*  border-width: 1px;  */
    border-style: solid;
}

.togglerowSpan {
    cursor: pointer;
}

/* ========================================================
 Properties of NOTES TABLE elements
======================================================== */

.clsNotesTableTitleTabToggle {
    background-color: #CFE9B3; /* color 303 */
    border-bottom: 0 !important;
    border-top: 1px solid #A0DA58; /* color 302 */
    color: #668950; /* color 304a */
    font: bold 8pt verdana, sans-serif;
    height: 25px;
    padding: 0;
    white-space: nowrap;
}

.clsNotesTableTitleTabToggle TABLE TD {
    border-left-width: 0;
    border-right: 0;
}

.clsNotesTableTab, .clsNotesTableTabButton {
    padding-left: 3px;
    padding-right: 3px;
    height: 25px;
}

.clsNotesTableTabButton {
    cursor: pointer;
}

.clsNotesTableTabSelected {
    border-bottom: 0 !important;
}

.clsNotesTableTab DIV, .clsNotesTableTabSelected DIV {
    padding-top: 2px;
    padding-left: 3px;
    padding-right: 3px;
    height: 18px;
    font: bold 10px verdana, sans-serif;
    text-align: center;
    border: 1px solid #A0DA58; /* color 302 */
    border-bottom: 0;
}

.clsNotesTableTab DIV {
    cursor: pointer;
}

.clsNotesTableTabSelected DIV {
    background-color: #DEEFCB; /* color 307 */
}

.clsNotesTableTabContent {
    background-color: #DEEFCB; /* color 307 */
    border-top: 0;
    color: #668950; /* color 304a */
    font: 10px verdana, sans-serif;
    padding: 3px;
    white-space: nowrap;
}

.clsNotesTableContentDescriptor TD {
    border: 0;
    padding-top: 2px;
    padding-bottom: 5px;
    padding-right: 20px;
}

.clsNotesTableNoteText {
    color: #000000; /* color 306 */
    font: 10px verdana, sans-serif;
    padding: 5px 2px;
    white-space: nowrap;
}

.clsNotesTableFooter {
    background-color: #E0F0CD; /* color 305 */
    color: #668950; /* color 304a */
    font: 10px verdana, sans-serif;
    padding: 6px;
    white-space: nowrap;
}

.clsNotesTableFooter A, .clsNotesTableFooter A:visited {
    color: #668950; /* color 304a */
    font: 10px verdana, sans-serif;
}

.clsNotesTableFooter A:hover {
    color: #4E693E; /* color 304b */
}

.clsNotesTableNoteText TABLE TD, .clsNotesTableFooter TABLE TD, .clsNotesTableTabContent TABLE TD {
    border: 0 !important;
}

.clsNotesTableTextArea {
    font: 10px verdana, sans-serif;
    color: #000000; /* color 306 */
    margin: 1px;
    overflow: auto;
    width: 97%;
    height: 35px;
}

TD.clsNotesTableWhite {
    border-left: 1px solid #A0DA58; /* color 302 */
    border-bottom: 0 !important;
    background-color: #FFFFFF;
    color: #000000; /* color 306 */
    font: 10px verdana, sans-serif;
    padding: 0;
    white-space: nowrap;
}

.clsNotesTableInputSmall {
    font: 10px verdana, sans-serif;
    margin: 1px;
    color: #000000; /* color 306 */
}

/* ========================================================
	Styles for forms
======================================================== */
HR {
    clear: both;
}

.clearBoth {
    clear: both;
}

.formIndent0 {
    line-height: 200%;
    color: #000000;
}

.formIndent1 {
    padding-left: 30px;
}

.formRight {
    float: right;
}

.formLeft {
    float: left;
}

/* Give to anything you want vertical-align: top
   Give in addition to any other classes such as contentTable */
.clsTableCellsVerticalAlignTop TBODY TR TD {
    vertical-align: top;
}

.clsVerticalAlignMiddle {
    vertical-align: middle;
}

.clsVerticalAlignBottom, .clsVerticalAlignBottom TD, .clsVerticalAlignBottom INPUT {
    vertical-align: bottom;
}

/*
 * Aligns checkboxes and images (icons) in stdscreens better with their labels
 */
/*
.clsVerticalAlignMiddle INPUT, .clsVerticalAlignMiddle IMG { 
  vertical-align: -30%;
 }
*/

.report-view-custom-header {
    font-size: 1.2em;
    min-height: 35px;
    padding-top: 10px;
}

.report-view-custom-footer {
    padding-top: 1em;
    padding-bottom: 0.5em;
    font-size: 1.1em;
    text-align: center;
}

.reportContentTable CAPTION {
    padding-top: 1em;
    padding-bottom: 0.5em;
}

.report-view-header TBODY TR TD {
    padding: 0 10px 0 10px;
}

.report-date-nav-arrow {
    font-size: 1.2em;
    padding: 0 8px 0 10px;
}

/* When reports have no data, the title isn't in a CAPTION so we need to add this style. */
.report-view-fake-caption {
    font-weight: bold;
    font-size: 1em;
    padding-top: 1em;
    padding-bottom: 0.5em;
    border: 0;
}

.report-view-no-data-msg {
    font-size: 1.1em;
    padding-top: 1em;
}

.search-action-menu-td {
    width: 200px;
}

#report-view-action {
    position: absolute;
    float: left;
}

/* MenuWidget from wtlib/widgets/menu.py */

.menu-widget {
    width: 210px;
    position: absolute;
    text-align: left;
    font-size: 1.2em;
    display: none;
}

.menu-widget-container {
}


#tk-menu .menu-widget {
    width: 230px;
}

.menu-widget .menu-widget-icon {
    border: 0;
    height: 16px;
    width: 16px;
    position: relative;
    top: 2px;
    margin-right: 6px;
}

.menu-widget-button .ui-button-text {
    padding: 0.5em 1em;
}

.menu-widget-button .ui-button-text IMG {
    top: 3px;
    border: 0;
    position: relative;
    margin-right: 3px;

    /* Not sure if we should force this one? */
    /*height: 16px;*/
    /*width: 16px;*/
}

.menu-widget li.ui-menu-item {
    padding: 5px 10px;
}

.menu-widget li.ui-menu-item img {
    padding-right: 5px;
}

.menu-widget li.ui-menu-item a {
    text-decoration: none;
}

/*.report-date-nav-arrow {*/
    /*border: 0;*/
    /*height: 12px;*/
    /*width: 13px;*/
    /*font-size:0;   *//**//* hiding the main button text, relying on the image and alt text */
    /*display:block;*/
    /*line-height:0;  *//**//* for MSIE 6 */
/*}*/

.warnSaveDivLink IMG {
    position: relative;
    top: 4px;
}

.warnSaveDivLink {
    position: relative;
    top: -2px;
}

.warnSaveDivMsg {
    vertical-align: middle;
    padding-left: 1em;
    display: inline-block;
    white-space: nowrap;
}

.warnSaveDiv {
    display: none;
    text-align: center;
    border: 1px dashed gray;
    margin: 3px;
    padding: 8px;
    /*  background-color: white; */
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.9);
    -webkit-box-shadow: 5px 5px 5px 1px #888;
    -moz-box-shadow: 5px 5px 5px 1px #888;
    box-shadow: 5px 5px 5px 1px #888;
}

/* Generic busy wait indicator used in RUI and other areas */
.busyDivHolder {
    width: 100%;
    display: none;
    text-align: center;
    border-width: 0;

    /* wow, this actually makes fixed position work in MSIE */
    position: fixed;
    _position: absolute;
    top: 5px;
    _top: expression(eval(document.body.scrollTop)+5);

}

.busyDiv {
    display: inline-block;
    text-align: center;
    border: 2px dotted gray;
    margin: 0 auto;
    padding: 8px;
    background-color: white;
    /*  background: rgb(255, 255, 255); */
    /*  background: rgba(255, 255, 255, 0.8); */
    -webkit-box-shadow: 5px 5px 5px 1px #888;
    -moz-box-shadow: 5px 5px 5px 1px #888;
    box-shadow: 5px 5px 5px 1px #888;
}

/* optional little message inside the RUI busy indicator */
.busyDivMsg {
    padding-top: 4px;
    font-weight: bold;
    font-size: 100%;
}

/*
 * Appears only on Entry Screens (jtgui) 
 * and only when enableEntryScreenInnerScrollbars is set
 *
 */

#idLoadingWaitNotice {
    text-align: center;
    vertical-align: middle;

    position: absolute;
    top: 150px;
    left: 150px;

    color: white;
    background-color: red;

    border: 3px solid black;

    font-size: 1.75em;

    padding: 1em;
    margin: 1em;
}

/* This makes IE do the right thing when the contained table is width=100% */
.clsCollapsibleTable {
    *height: 1%;
}

.clsCollapsibleTable TABLE {
    border-width: 1px;
}

.collapsibleTableCaption {
    border-width: 1px;
}

/*
 * Report Styles
 */

.PRPReportPNLink:link {
    text-decoration: none;
}

.PRPReportPNLink:hover {
    text-decoration: underline;
}

/* PRP / Dashboard report tooltip */
.trepPRPtt {
    margin: 0;
    padding: 1px 0 0 4px;
}

.reportChart {
    margin-top: 20px;
}

span.DateAndNavCalendar {
    position: relative;
    background: url('../image/jx_calendar_popup_16h.png') no-repeat 0 0;
    padding-left: 23px;
}

span.DateAndNavCalendar .NavCalendarBox {
    position: absolute;
    top: 1.25em;
    left: 0;
    width: 100%;
    display: none;
    border: 1px solid;
}

span.DateAndNavCalendar:hover .NavCalendarBox {
    display: block;
}

/** jx_nav_tabs.css **/
/* some of these can probably be removed in light of new UI */

.clsPrimaryTabs {

    padding: 0;
    /* This makes sure the toolbar open/close button doesn't push into the tabs */
    /* This lets it merge the border with the sub-nav area below the main tabs. */
    position: relative;
    margin: 0.7em 0 -1px;

}

.clsPrimaryTabs TD {
    padding: 0;
    margin: 0;
}

#idTabSubNav .tabButton {
    /* This sets the space between the tabs */
    margin-left: 0;
    margin-right: 0;

    text-align: center;
}

/* 
 * No negative left margin for first button 
 * in case .tabButton margin-left is negative
 */
#idTab_0 {
    margin-left: 0;
}

.tabB_TC {
    background: transparent url('../image/GB-Tab-Top.gif') 0 0 repeat-x;

    white-space: nowrap;
    /* these border colors are overriden in wtdoc */
    border: 1px solid black;
    border-top-width: 0;
}

.tabB_TL {
    background: transparent url('../image/GB-Tab-Top-Left-Corner.gif') 0 0 no-repeat;

    margin-left: -1px;
}

.tabB_LeftSide {
    background: transparent url('../image/GB-Tab-Left-Side.gif') -1px 0 repeat-y;
}

.tabB_TR {

    font-size: 1.05em;
    font-weight: bold;

    background: transparent url('../image/GB-Tab-Right-Side.gif') top right no-repeat;

    margin-right: -1px;

    /* This controls the padding around the text of the link itself */
    padding: 0.3em 1.8em 0.3em 1.4em;

}

.clsTabSelected {
    /*
     * This has a border, but needs to be set in wtdoc as same color as
     * background so it looks as if no border. The "invisible" border is
     * required to sit on top of, and therefore hide, the top border of
     * the secondary nav area.
    */
    border-bottom-width: 1px;
}

#idPrimaryTabs A, #idPrimaryTabs A:visited {
    text-decoration: none;
}

#idPrimaryTabs A:hover {
    text-decoration: underline;
}

/* ----------------------------------------------------- */
/* Specific TAB properties */

.clsTabSelected DIV A, .clsTabSelected DIV A:visited, .clsTab DIV A, .clsTab DIV A:visited {
    text-decoration: none;
}

.clsTabSelected DIV A:hover, .clsTab DIV A:hover {
    text-decoration: none;
}

/* ========================================================
 Properties of TAB SUBNAV elements
======================================================== */

#idTabSubNav {
}

#idTabSubNav TABLE TD {
    font-weight: bold;
    white-space: nowrap;
}

#idTabSubNav TABLE TD A, #idTabSubNav TABLE TD A:visited {
    text-decoration: none;
}

A.clsTabSubNavSelected, A.clsTabSubNav {
    margin-right: 1em;
    margin-left: 1em;
}

#idTabSubNav TABLE TD A.clsTabSubNavSelected, #idTabSubNav TABLE TD A.clsTabSubNavSelected:visited {
}

#idTabSubNav TABLE TD A.clsTabSubNavSelected:hover, #idTabSubNav TABLE TD A:hover {
    text-decoration: underline;
}

.clsTabSubNavSeparator {
    background: url('../image/60/tab_sub_nav_separator.gif') no-repeat center center;
}

#idTabSubNav .secondaryNavRow, #idTabSubNav .tertiaryNavRow {
    padding: 0.1em;
    border: 1px solid;
}

#idTabSubNav .secondaryNavRow {
}

#idTabSubNav .tertiaryNavRow {
    /* tertiary doesn't need a top border, since secondaryNavRow has a bottom border */
    border-top-width: 0;
}

/* jx_calendar.css */

#calendar-container {
    width: 100%;
}

/* Make the calendar 100% of its container, but only for the Toolbar calendar.  
   Setting this on the popup calendar screws with its positioning. */
#idToolbarTable .calendar {
    width: 100%;
}

.calendar {
    text-align: center;
    display: none;
    border: none;
    cursor: default;
    border-collapse: separate;
}

#idToolbarContentTimeCalendar {
    padding: 0 5px 5px 5px;
    margin: 0;
    text-align: center;
}

.calendar table {
    text-align: center;

    /* width: 95%; */
    width: 98%;

    cursor: default;
    /* height: 168px; */
    border-collapse: separate;

    color: inherit;
    background-color: inherit;
    border-color: inherit;

}

.calendar td {
    color: inherit;
    background-color: inherit;
    font-size: 90%;
}

/* Header part -- contains navigation buttons and day names. */

.calendar .button {
    /* "<<", "<", ">", ">>" buttons have this class */
    padding: 1px;
    /*  font-size: 0.9em; */
    text-align: center;
    /*  border: none; */
}

.calendar .buttonPrevMonth {
    /* the Previous Month button */
    width: 13px;
    height: 12px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    background: url('../image/60/icon-prev.gif') no-repeat left;
}

.calendar .buttonNextMonth {
    /* the Next Month button */
    width: 13px;
    height: 12px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background: url('../image/60/icon-next.gif') no-repeat right;
}

.calendar .buttonPrevYear {
    /* the Previous Year button */
    width: 13px;
    height: 12px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background: url('../image/60/icon-table_prev.gif') no-repeat left;
}

.calendar .buttonNextYear {
    /* the Next Year button */
    width: 13px;
    height: 12px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background: url('../image/60/icon-table_next.gif') no-repeat right;
}

.calendar .buttonCalHelp {
    /* the Calendar Help ? button */
    /*  font-size: 1.2em; */
    font-weight: bold;
    text-align: center;
    border: none;
}

.calendar thead .title {
    /* This holds the current "month, year" */
    /*  font: bold 1.05em verdana, arial, sans-serif; */
    font-weight: bold;
    font-size: 100%;

    padding: 2px;
    border-width: 0;
    text-align: center;
    white-space: nowrap;
}

.calendar thead .headrow {
    /* Row <TR> containing navigation buttons */
}

.calendar thead .daynames {
    /* Row <TR> containing the day names */
}

.calendar thead .name {
    /* Cells <TD> containing the day names */
    font-weight: bold;

    /*  font-size: 0.95em; */
    /*  border-bottom-width: 1px; */
    border: 0 solid;
    border-bottom-width: 1px;

    text-align: center;
    margin-bottom: 4px;
    white-space: nowrap;
}

.calendar thead .weekend {
    /* How a weekend day name shows in header */
}

.calendar thead .hilite {
    /* How do the buttons in header appear when hover */
}

.calendar thead .active {
    /* Active (pressed) buttons in header */
}

/* The body part -- contains all the days in month. */

.calendar tbody .daysrow {
    /* XXX TODO */
    border-width: 0;
}

/* Cells <TD> containing month days dates */
.calendar tbody .day {
    cursor: pointer;
    font-size: 10px;
    /*  font-size: 95%; */
    /* 95% of 80% */

    /* padding: 2px;  */
    padding: 0;

    border: 0 solid;

    /*  text-align: center; vertical-align: center;  */
    /*  padding-right: 2px;
      padding-top: 2px; */
    text-align: center;
    vertical-align: middle;

    /* font-size: 0.75em; */

    background: url('../image/60/CalendarDay_3.gif') no-repeat center center;

    /* prevents resizing of column with active day on clicking in MSIE */
    width: 18px;
    height: 18px;

}

.calendar tbody .day.othermonth {
    font-size: 75%; /* percent of a percent */
}

.calendar tbody .day.othermonth.oweekend {
}

/* wn is week number - turned off in JX calendar */
.calendar table .wn {
    padding: 2px 3px 2px 2px;
    border-right: 1px solid #000;
}

.calendar tbody .rowhilite td {
}

.calendar tbody .rowhilite td.wn {
}

.calendar tbody td.hilite {
    /* Hovered cells <TD> */
    border: none;
}

.calendar tbody td.active {
    /* Active (pressed) cells <TD> */
    border: none;
}

.calendar tbody td.selected {
    /* Cell showing selected date */
    font-weight: bold;
    border: none;
}

.calendar tbody td.weekend {
    /* Cells showing weekend days */
}

.calendar tbody td.today {
    /* Cell showing today date */
    font-weight: bold;
}

/* XXX TODO */
.calendar tbody .disabled {
    color: #999;
}

.calendar tbody .emptycell {
    /* Empty cells (the best is to hide them) */
    visibility: hidden;
}

.calendar tbody .emptyrow {
    /* Empty row (some months need less than 6 rows) */
    display: none;
}

/* The footer part -- status bar and "Close" button */

.calendar tfoot {
    vertical-align: bottom;
    border-collapse: separate;
}

/* to create space between calendar body and footer/tooltip - planders */
.calendar tfoot .footrowspacer {
    height: 5px;
}

.calendar tfoot .footrow {
    /* The <TR> in footer (only one right now) */
    border-collapse: separate;
}

.calendar tfoot .ttip {
    /* Tooltip (status bar) cell <TD> */
    /*  font-size: 0.75em;*/
    text-align: center;
    font-size: 90%;

    /*  width: 130px; */
    /* established minimum width of calendar */

    border-collapse: separate;

    border: 1px outset;

    /* border-radius: 5px; */
    /* Rounded borders - requires Mozilla or CSS-3 support (not MSIE thru 6) */
    -moz-border-radius: 5px;
}

.calendar tfoot .hilite {
    /* Hover style for buttons in footer */
}

.calendar tfoot .active {
    /* Active (pressed) style for buttons in footer */
}

/* Combo boxes (menus that display months/years for direct selection) */

.calendar .combo {
    position: absolute;
    display: none;
    width: 3em;
    top: 0;
    left: 0;
    cursor: default;
    border: 1px solid #fff;
    border-right-color: #000;
    border-bottom-color: #000;
    /*  background: #d8e0e4; */
    /*  font-size: 1em;*/
    padding: 0 1px 1px;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
    text-align: center;
    padding: 1px;
}

.calendar .combo .label-IEfix {
    width: 3em;
}

.calendar .combo .active {
    background: #c8d0d4;
    padding: 0;
    border: 1px solid #000;
    border-right-color: #fff;
    border-bottom-color: #fff;
}

/*
.calendar .combo .hilite {
  background: #048;
  color: #aef;
}
*/

.calendar td.time {
    border: 0 solid;
    border-top-width: 1px;
    padding: 1px 0;
    text-align: center;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
    padding: 0 3px 0 4px;
    border: 1px solid;
    font-weight: bold;
}

.calendar td.time .ampm {
    text-align: center;
}

.calendar td.time .colon {
    padding: 0 2px 0 3px;
    font-weight: bold;
}

/*
.calendar td.time span.hilite {
  border-color: #000;
  background-color: #667;
  color: #fff;
}

.calendar td.time span.active {
  border-color: #f00;
  background-color: #000;
  color: #0f0;
}
*/

#PopupCalendar {
    z-index: 999; /* make popup calendar appear above everything else */
}

#PopupCalendar table {

    /*  background-color: #ffffff; */

    /*
      padding: 6px;
      margin: 6px;
     */

    border: 4px groove;
    width: 135px;
}

/* 
 * This helps position the clickable image which pops up a date selection calendar.
 */

.popupCalendarInput {
    white-space: nowrap;
}

.popupCalendarInput IMG {
    /*  vertical-align: bottom;  */
    vertical-align: middle;
    margin-left: 2px;
    *vertical-align: baseline;
    /*margin-bottom: 2px; */
    padding-bottom: 5px;
    *padding-bottom: 0;
}

/* ========================================================
 Properties of NAVIGATION elements
======================================================== */

.clsLogoBar {
    position: relative;
    min-height: 75px;
}

#pagesBar, #idHeaderLinks {
    font-size: 1.2em;
}

#pagesBar {
    padding: .5em 0;
    width: 100%;
    height: 1.2em;
}

.clsUnderMenu {
    padding: 0.7em 0;
    background: url('../image/undershadow.png') repeat-x;
    margin: 0;
    /*    margin-top: 3px; */
}

.clsUnderMenuContent {
    margin: 0 1em;
}

.clsUnderMenu .clsUnderMenuContent .ShortDescription {
    font-size: 0.95em;
}

.clsSubsubtitle {
    background: #DDD;
    color: #444;
    border-top: 1px dashed #999;
    border-bottom: 1px dashed #999;
    padding: 0.7em 0;
    margin-bottom: 4px;
}

.clsSubsubtitleAllBorder {
    border: 1px dashed #999;
}

.clsSubsubtitleContent {
    margin: 0 1em;
}

#activeView {
    font-weight: bold;
    position: relative;
    top: 1px;
}

.clsSearchFilters {
    color: #000;
}

.clsSearchFilter {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline; /* good old IE */
    white-space: nowrap;
    margin: 1em 2em 0 0;
    vertical-align: text-top;
}

/* dropdown.css */

/* @charset "UTF-8"; */

/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file		dropdown.css
 * @package		Dropdown
 * @version		0.7.1
 * @type		Transitional
 * @stacks		597-599
 * @browsers	Windows: IE6+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2006-2008 Live Web Institute. All Rights Reserved.
 *
 */

ul.dropdown, ul.dropdown li, ul.dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.dropdown {
    position: relative;
    z-index: 597;
    float: left;
}

ul.dropdown li {
    float: left;
    line-height: 1.3em;
    vertical-align: middle;
    zoom: 1;
    position: relative;
}

ul.dropdown li a {
    padding: 0 12px;
}

ul.dropdown ul li a {
    padding: 4px 12px;
}

ul.dropdown ul li .dir {
    margin-right: 20px;
}

ul.dropdown li.hover {
    z-index: 599;
    cursor: default;
}

ul.dropdown ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    z-index: 598;
    width: auto;
    /* IE hacks */
    width: 100% \9;
    /*noinspection CssOverwrittenProperties*/
    *width: 100%;
    _width: 100%;
    /* so you don't 'fall off' of menus, we pad the bottom */
    padding-bottom: 36px;
    padding-right: 36px;
}

ul.dropdown ul li {
    float: none;
    white-space: nowrap;
}

ul.dropdown ul ul {
    top: 1px;
    left: 99%;
}

/*  This is not something I'm particularly proud of.
    In fact, mortified might be a more apt description.
    That said, if you can get _this_ to work in IE:
    
        ul.dropdown li:hover > ul
        
    I will be even more mortified, because I couldn't.
*/

ul.dropdown li.hover ul {
    visibility: visible;
}

ul.dropdown li.hover ul li ul {
    visibility: hidden;
}

ul.dropdown li.hover ul li.hover ul {
    visibility: visible;
}

ul.dropdown li.hover ul li.hover ul li ul {
    visibility: hidden;
}

ul.dropdown li.hover ul li.hover ul li.hover ul {
    visibility: visible;
}

ul.dropdown li.hover ul li.hover ul li.hover ul li ul {
    visibility: hidden;
}

ul.dropdown li.hover ul li.hover ul li.hover ul li.hover ul {
    visibility: visible;
}

ul.dropdown li.hover ul li.hover ul li.hover ul li.hover ul li ul {
    visibility: hidden;
}

ul.dropdown li.hover ul li.hover ul li.hover ul li.hover ul li.hover ul {
    visibility: visible;
}

ul.dropdown li.hover ul li.hover ul li.hover ul li.hover ul li.hover ul li ul {
    visibility: hidden;
}

ul.dropdown li.hover ul li.hover ul li.hover ul li.hover ul li.hover ul li.hover ul {
    visibility: visible;
}

ul.dropdown li.hover ul li.hover ul li.hover ul li.hover ul li.hover ul li.hover ul li ul {
    visibility: hidden;
}

ul.dropdown li.hover ul li.hover ul li.hover ul li.hover ul li.hover ul li.hover ul li.hover ul {
    visibility: visible;
}

/* dropdowntheme.css */

/** 
 * Default Ultimate Linear CSS Drop-Down Menu Theme
 *
 * @file		default.ultimate.css
 * @name		Default
 * @version		0.1
 * @type		transitional
 * @browsers	Windows: IE5+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2008 Live Web Institute. All Rights Reserved.
 *
 */

/* @import "default.css"; */

/*-------------------------------------------------/
 * @section		Base Style Extension
 */

ul.dropdown a {
    display: block;
    padding: 2px 8px;
}

/*-------------------------------------------------/
 * @section		Base Style Override
 */

ul.dropdown li {
    padding: 0;
    border: none;
}

ul.dropdown a, ul.dropdown a:active, ul.dropdown span {
    text-decoration: none;
    white-space: nowrap;
}

/*-------------------------------------------------/
 * @section		Base Style Reinitiate: post-override activities
 */

/*-------------------------------------------------/
 *	@section	Custom Styles
 */

ul.dropdown li {
}

ul.dropdown li.hover, ul.dropdown li:hover {
    color: #000;
}

ul.dropdown li a:active {
}

/* Non-first level */

ul.dropdown ul {
    margin-top: 0;
    padding-top: 0;
}

ul.dropdown ul li.hover, ul.dropdown ul li:hover {
}

/* Mixed */
ul.dropdown li a, ul.dropdown *.dir {
}

/*-------------------------------------------------/
 * @section		Support Class `open` Usage
 * @source		js, artificial
 *
 */

ul.dropdown ul li.hover *.open,
ul.dropdown-vertical li.hover *.open {
}

ul.dropdown-vertical-rtl li.hover *.open {
}

ul.dropdown-upward li.hover *.open {
}

ul.dropdown-upward ul li.hover *.open {
}

/* CSS2 clone */

ul.dropdown ul li:hover > *.dir,
ul.dropdown-vertical li:hover > *.dir {
}

ul.dropdown-vertical-rtl li:hover > *.dir {
}

ul.dropdown-upward li:hover > *.dir {
}

ul.dropdown-upward ul li:hover > *.dir {
}

/* Python profiling */
.clsSystemProfile {
    margin: 5px 1px 1px;
    padding: 5px;
    font-family: Lucida Console, MS Courier New, Courier New, Monaco, Courier, monospace;
    font-size: 12px;
    /* width: 98%; */
    /* height: 400px; */
    border: 1px solid black;
    overflow-y: auto;
    overflow-x: scroll;
}

/*  RUIStyle.css  */

/* RUI Iframe for inline "Popups" - needed for MSIE when SELECT inputs
are inside the popup. */

.RUI-PU-IFrame {
    /*visibility: hidden; */
    display: none;
}

.RUI-InputField {
    padding: 2px;
    /*  margin: 0px; */
}

.RUI-InputField-Dropdown {
    /*
      background-image: url('../image/rui/Dropdown_3.gif');
      background-position: right center;
      background-repeat: no-repeat;
    */

    /* hardcoded to match DD button image */
    border: 1px solid #828177;
    border-right-width: 0;
}

/* This is the actual IMG of the dropdown activation button  
 * Absolute positioning of the button is done in javascript!!
 */
.RUI-Dropdown-Button {
    padding: 0;
    margin: 0;
    vertical-align: middle;

    cursor: pointer;
}

.RUI-PUS-CloseIcon {
    cursor: pointer;
}

.RUI-ACSearchResultsDiv {

    padding: 0;
    border: black 1px solid; /* XXX TODO color! */
    z-index: 99; /* Should be 'high' to be 'on top' of any other elements incl. popup calendar etc */

    background-color: white; /* XXX TODO color! */
    /*  color: black; */
    /* XXX TODO color! */
    color: #6F6F6F; /* This is a dark gray */

    /* word-wrap: break-word; */
    /* TODO: MSIE specific? */
}

/* a Div that contains one row of an autocomplete search result. */
.RUI-ACSearch-ResultRow {

    padding: 0 3px;

    overflow: hidden;

    font-size: 1.1em; /* relative to containers!!! */
    font-family: Verdana, Tahoma, Luxi Sans, Arial, Helvetica, Geneva, sans-serif;
    /*  font-family: arial,sans-serif;  */
    font-weight: bold;

    cursor: pointer;

    /* XXX TODO color (med gray) */
    border: 0 solid #CFCFCF;
    border-bottom-width: 1px;
}

.RUI-ACSearch-ResultRowMoreResults {
    float: right;
}

.RUI-ACSearch-ResultRowHilighted {

    /* XXX TODO Color! */
    background-color: #3366cc;
    color: white;
}

.RUI-ACSearch-ResultRowAlt {
    background-color: #EDF3FE; /* Color: light blue */
    /* background-color: #EFEFEF; */
    /* TODO color: light gray */
    color: #000000; /* black */
}

/* a Span for an individual column within RUI-ACSearch-ResultDiv */
.RUI-ACSearch-ResultColumn {
    /*  font-weight: bold; */
}

.RUI-ACSearch-SQHighlight {
    font-weight: bolder;
    /*  color: #AFAFAF; */
    /* XXX TODO Color! */
    color: #757575;
}

.RUI-ACSearch-ResultRowHilighted .RUI-ACSearch-SQHighlight {
    color: yellow;
}

.RUI-ACDropdownResultsDiv {
    /*overflow: auto; */
    border-color: #DFDFDF; /* XXX TODO color! */
    border-bottom-color: black;
    /* border-right-width: 0px; */
    border-right-color: black;

    color: black;

}

/* class RUI-PleaseWait-Div

   This is the little 'Please Wait, Loading' message that can appear
   above some RUI Controls.
 */
.RUI-PleaseWait-Div {

    /* move colors to colorstyle.pyc !! */
    background-color: #DF4729;
    color: white;

    font-weight: bold;
    font-size: 1.05em;
    border: 3px solid white;
    margin: 3px;
    padding: 3px 4px;
}

.RUIEventLoggerDiv {
    padding: 3px;
    /*  border: black 1px dashed; */
    /* XXX TODO color! */

    height: 80px; /* TODO */

    margin: 2em 0 0;
}

.RUIEvent {
    font-size: 1.1em;
}

.RUIEvent-status {
    color: #009933; /* Green hardcoded */
    /* XXX TODO color! */
}

.RUIEvent-error {
    color: #cc0000; /* RED hardcoded */
    /* XXX TODO color! */
    font-weight: bold;
    padding: 1px;
    border: black 1px solid; /* XXX TODO color! */
}

.RUIEvent-warn {
    color: #cc0000; /* RED hardcoded */
    /* XXX TODO color! */
}

/* NOTE: this is applied to the entire input field element! */
.RUI-ACSearch-AutoclearPrompt {
    color: #9F9F9F; /* dark GRAY hardcoded  XXX TODO COLOR ! */
    font-style: italic;
}

/* Style used in the RUI-SELECT control before the data has been loaded. */
.RUI-SELECT-unloaded SELECT {
    font-style: italic !important;
    font-weight: normal !important;
}

.RUI-SELECT SELECT {
    font-style: normal;
    font-weight: bold;
}

/* A container for the absolutely positioned search div.  

  Contains RUI-PUS-MainDiv and RUI-PU-IFrame as siblings. 
 
*/
.RUI-PUS-Container {
    display: none;
    top: 0;
    left: 0;
    /*  width: 0; */
}

/* This element only contains the RUI-PUS-SearchForm
   They can probably be merged together into one element.
 */

.RUI-PUS-MainDiv {
    /* overriden in colorstyle.pyc */
    border: 1px solid black;
    -moz-border-radius: 6px; /* XXX TODO */
    display: inline-block; /* seems to fix occasional rendering problems in MSIE along with setting width: 0 on RUI-PUS-Container in the JS  */
}

.RUI-PUS-SearchForm {

    /* Next 3 lines copied from jx_corestyle.css since the PUSearch
    elements are no longer contained within the "main table". */
    font-family: Verdana, Tahoma, Luxi Sans, Arial, Helvetica, Geneva, sans-serif;
    font-style: normal;
    font-size: 1em; /* the baseline font size (inherited from BODY) */

    padding: 3px;
    margin: 0;

    border: 5px solid;

    -moz-border-radius: 5px; /* XXX TODO */

    /* width: 100%; */
}

/* formWidgets search-style popup form */

.RUI-PopupForm-Search-Container {
    border-width: 4px;
    padding: 6px;
}

.RUI-PopupForm-Search-Content {
    font-size: 1.1em;
}

/* Style that is applied to the Magnifying Class icon which activates the popup search. 
   Trying to get it nicely aligned with the text in the following SELECT dropdown.
*/

.RUI-PUS-TitlePane {
    cursor: move; /* indicates to the user that this window is draggable */

    margin: 2px 2px 4px;
    padding: 1px;
    white-space: nowrap;

    border: 2px outset;

    vertical-align: middle;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
}

.RUI-PUS-MainInput {
    margin: 1px 1px 3px;
    white-space: nowrap;
}

.RUI-PUS-SearchPane {
    margin: 0;
    padding: 3px;
    height: 30px; /* overriden in JS  */
}


.RUI-PUS-ResetButton, .RUI-PUS-CloseButton, .RUI-PUS-PageNavButton, .RUI-PUS-SelectAllButton {
    vertical-align: bottom;
    font-size: 0.9em;
}

.RUI-PUS-PageNavButtonBack {
    margin-left: 1.2em;
}

.RUI-PUS-WaitPane {
    display: none;

    position: relative;
    float: right;

    text-align: center;

    /* background-image: url('../image/wait3.gif'); */
    background: no-repeat center;
    width: 16px;
    height: 16px;
    margin: 5px;

}

.RUI-PUS-BottomPane {
    margin: 0;
    padding: 1px 1px 1px 1px;
}

/*
 * Have to specify all of TABLE, TD, and TR to override the possibly
 * overreaching rule in jx_corestyle.css .  This fixes the status bar
 * border in MSIE.
 */
.RUI-PUS-BottomPane TABLE, .RUI-PUS-BottomPane TR, .RUI-PUS-BottomPane TD {
    border-collapse: separate;
    padding: 1px;
}

.RUI-PUS-StatusBar {
    /* overriden in colorstyle.py */
    border: 1px inset black;
    padding: 2px;
    text-align: center;
    white-space: normal; /* nowrap */
    margin: 2px;
    /*  min-width: 12em; */
    width: 20em;
}

.RUI-PUS-SearchPane .clsSearchableField {
    white-space: nowrap;
    vertical-align: top;
}

.RUI-PUS-StatusBar-Error {

}

.RUI-PUS-StatusBar-ErrorLabel {
    font-weight: bold;
}

.RUI-PUS-PageNavInput {
    font-weight: bold;
    text-align: right;
}

.RUI-PUS-PageNavBar {
    white-space: nowrap;
    /*  padding: 1px;
      margin: 1px; */
    vertical-align: middle;
    /*  display: inline; */
}

.RUI-PUS-ResultsPane {
    /* helps shadow look better /*/
    margin-right: 6px;
}

.RUI-PUS-ResultTable {
    /* width: 100%; */
    white-space: nowrap;
    margin: 2px;
    padding: 2px;
    border-width: 2px;
    box-shadow: 2px 4px 6px #999;
    -moz-box-shadow: 2px 4px 6px #999;
    -webkit-box-shadow: 2px 4px 6px #999;
    -khtml-box-shadow: 2px 4px 6px #999;
}

.RUI-PUS-ResultTableNameCell {

}

.RUI-PUS-ResultTableNameCell-HI {
    background-color: yellow !important;
    color: black !important;
    text-decoration: underline;
    cursor: pointer; /* Make it look like a link */
}

.RUIObjectEditorStatus {
    font-size: 1.1em;
    font-weight: bold;
}

#RUIObjectEditor_info_row {
    /* display: none; */
    /* set to 'display: block' as needed by Javascript code */
    visibility: hidden;
}

#RUIObjectEditor_error_row {
    /* display: none; */
    /* set to 'display: block' as needed by Javascript code */
    visibility: hidden;
}

/* RUI Form Manager related styles */

.formWidgetWaitPane {
    display: none;

    /* position: relative; */
    float: right;

    text-align: center;

    background: url('../image/wait3.gif') no-repeat center;
    width: 16px;
    height: 16px;
    margin: 5px;
}

.formWidgetButtonRow {
    text-align: center;
    margin-top: 4px;
}

/* bubble (tooltip) style RUI Forms can have a title */
.formWidgetBubbleTitle {
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
    color: #B27C00; /* sort of brown-ish */
    background-color: inherit;
}

.formWidgetSearchTitle {

}

/* tooltip related styles  */

/* This is the overall tooltip container. */
.ttipDiv {
    display: none; /* starts initially hidden */
    position: absolute;
    top: 0;
    left: 0;

    /* Background color is controlled via the ttip_*.gif images. */
    color: black;

    border-width: 0;

    padding: 0;
    margin: 3px;

    max-width: 600px;
}

.ttipDiv TABLE {
    border-collapse: collapse;
}

.ttipDiv .ttipTL {
    height: 6px;
    width: 6px;
    background: url('../image/ttip_tl.gif') no-repeat;
}

.ttipDiv .ttipTR {
    height: 6px;
    width: 6px;
    background: url('../image/ttip_tr.gif') no-repeat;
}

.ttipDiv .ttipBL {
    height: 6px;
    width: 6px;
    background: url('../image/ttip_bl.gif') no-repeat;
}

.ttipDiv .ttipBR {
    height: 6px;
    width: 6px;
    background: url('../image/ttip_br.gif') no-repeat;
}

.ttipDiv .ttipBTop {
    background: url('../image/ttip_top.gif') repeat-x;
    height: 6px;
}

.ttipDiv .ttipBBottom IMG {
    display: inline;
    margin: 0;
    /* position: relative; */
}

.ttipDiv .ttipBBottom {
    vertical-align: top;
    background: url('../image/ttip_bottom.gif') repeat-x;
    /* height: 6px; */
}

.ttipDiv .ttipBorLeft {
    background: url('../image/ttip_left.gif') repeat-y;
    width: 6px;
}

.ttipDiv .ttipBorRight {
    background: url('../image/ttip_right.gif') repeat-y;
    width: 6px;
}

.ttipDiv .ttipStrTab {
    width: auto;
}

.ttipStrTab TBODY TR, .ttipStrTab TBODY TR TD {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.ttipDiv .ttipR1 {
    height: 6px;
}

.ttipDiv .ttipR1 TD {
    vertical-align: bottom;
}

.ttipDiv .ttipR3 TD {
    height: 6px;
    vertical-align: top;
}

/* This holds the dynamic tooltip content loaded from the XHR/AJAX request. */
.ttipContent {
    font-family: Lucida Sans Unicode, Lucida Sans, Arial, Helvetica, Geneva, sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 2px;
    background: url('../image/ttip_bg.gif') repeat;
}

.ttipContent .ttObjDetails {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
}

.ttipContent .ttObjHeaderRow {
    font-weight: bold;
    /*  padding-bottom: 3px; */
    /*  margin: 3px; */
    /*  border-collapse: separate; */
    /*  display: block;  */
}

.ttipContent .ttObjHeaderRow TD {
    border: 0 solid gray;
    border-bottom-width: 1px;
    margin-bottom: 2px;
}

.ttipContent .ttObjBody {
    margin: 4px;
}

.ttipContent .ttLabelRow {
    font-variant: small-caps;
    font-size: 11px;
    border-right: 1px solid gray;
    padding-right: 3px;
    color: gray;
    text-align: center;
}

.ttipContent .ttObjColLabel {
    font-variant: small-caps;
    font-size: 11px;
    border-right: 1px solid gray;
    padding-right: 3px;
    color: gray;
    float: right;
}

.ttipContent .ttObjDetailRow {
    /*  margin: 2px; */
}

.ttipContent .ttObjLabel {
    /* margin: 4px; */
    text-align: left;
    padding-left: 4px;
}

.ttipContent .ttipTable td {
    padding-right: 2px;
    padding-left: 2px;
    border-style: none;
}

.ttipTdFloat, .ttipTdNumber {
    text-align: right;
    padding-right: 5px;
}

.ttipContent .ttSummaryLabel {
    font-weight: bold;
    text-align: center;
    padding-top: 5px;
}

.ttipContent .ttAccHeaderRow td {
    font-weight: bold;
    padding-bottom: 1px;
    padding-right: 1em;
}

.ttipContent .ttAccDetailRow td {
    padding-right: 1em;
}

.est-remain-saved {
    color: #009933;
}

.licenseSection {
    font-size: 1em;
    margin: 6px;
}

.licenseHeading {
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px 10px 5px 5px;
}

.licenseText {
    font-size: 12px;
    font-family: monospace;
    white-space: pre;
    padding: 3px;
    margin: 3px;
}

.licenseCopyright {
    font-size: 1.2em;
    font-weight: bold;
}

.multiUserSheetStatusHeader THEAD TR TH {
    padding: 5px;
}

.multiUserSheetStatusHeader TD {
    padding: 4px 1.1em 4px 4px;
}

.htmlhexcolors {
    font-family: MS Courier New, Courier New, Lucida Console, Monaco, Courier, monospace;
    font-size: 1.2em;
}

/* jx_print.css */
/* keep this at the BOTTOM of the file - insert new stuff above this. */

@media print {
    /*
     * jx_print.css
     *
     * This stylesheet is applied when a Timesheet table is printed out.
     *
     * The purpose is to make sure something reasonable happens when a
     * page is printed.  Generally we just strip out anything that's going
     * to clutter up the printed page without adding anything valuable to
     * the layout or information content.
     *
     *
     */
    /* Assign this to any element you would like not to print. */
    .noPrint {
        display: none;
    }

    /* Don't show navigation bar in print */
    #pagesBar {
        display: none;
    }

    /* Don't show the very top of the page with the logo and logout link */
    #idHeader, #idHeaderButtons {
        display: none;
    }

    /* Don't show the toolbar or any of its components */
    .clsToolbarToggleOpen, .clsToolbarToggleClose, #idToolbarContainer, #idToolbarTable {
        display: none;
    }

    /* Don't show Help link */
    .Help {
        display: none;
    }

    /* Get rid of the bevels (rounded corners) */
    .clsContainerBevel {
        display: none;
    }

    /* Don't print any Navigation tabs
       they tend to make MSIE print cut off the right side of the page */
    #idPrimaryTabs, #idTabSubNav {
        display: none;
    }

    /* Clean up search results */
    TABLE.clsSearchResultsTable TFOOT,
    TABLE.clsSearchResultsTable .clsSearchResultsHeaderRight,
    .clsStdScreenButton, .clsButton {
        display: none;
    }

    /* Cleanup for the leave request calendar */
    .Bcalendarheader .todaydisplay,
    .Bcalendarheader .todayactive,
    .Bcalendarheader IMG {
        display: none;
    }

}

/* end of print media */

/* keep print.css stuff  at the BOTTOM of the file - insert new stuff above the start of jx_print.css. */