body {
		font-family: "open_sansregular", "Open Sans", Helvetica, sans-serif;
        margin: 15px;
}

td {
        color: #000000;
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
        font-size: 14px;
        }

A:link {
    COLOR: #0000ff; TEXT-DECORATION: none
}


A:visited {
    COLOR: #660099; TEXT-DECORATION: none
}


A:active {
    COLOR: #990000
}


A:hover {
    COLOR: #990000; TEXT-DECORATION: underline
}


.smallText {
        color: #000000;
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
        font-size: 14px;
        }


.label {
        color: #000000;
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 14px;
        }


.webButton {
        color: #000000;
        background-color: #efefef;
        font-family: arial, helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        border-style: ridge;
        }

.searchButton {
        color: #000000;
        background-color: #efefef;
        font-family: arial, helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        border-style: ridge;
        }

.tableheader {
        background-color: #ADADC9;
        font-family: verdana;
        font-size: 11px;
        font-weight: bold;
        color: #000000;
        text-decoration: none;
        }


A.tableheader:link {
        color: #000000
        }

A.tableheader:visited {
        color: #000000
        }


.crumb, A.crumb:hover, A.crumb:link, A.crumb:visited, A.crumb:active {
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 10px;
        color: #00365C
        }

.headerTop {
        background-color: #4C7292
        }

.headerLevel1 {
    background-color: #00365C;
    }

.headerLevel1 #CAPTION {
    color: #ffffff;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    }


.headerLevel2 {
    background-color: #4C728C;
    }



A.headerLevel2:hover, A.headerLevel2:link, A.headerLevel2:visited, A.headerLevel2:active {
    color: #ffffff;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    }

.headerTitle {
    background-color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    font-family: verdana, arial, helvetica, sans-serif;
    color: #00365C;
    }

.navigationDivider {
    background-color: #B3C3CD;
}


.headerBottom {
        background-color: #666666
        }

A.headerText:link {
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 10px;
        color: #FFFFFF;
        text-decoration:none;
        }

A.headerText:visited {
        font-family: verdana, arial, helvetica, sans-serif;
        color: #FFFFFF;
        font-size: 10px;
        text-decoration:none;
        }


A.menuText:link {
        font-family: verdana, arial, helvetica, sans-serif;
        color: #0000FF;
        }

A.menuText:visited {
        font-family: verdana, arial, helvetica, sans-serif;
        color: #0000FF;
        }

.searchField {
        font-size: 11px;
        font-family: verdana
        }

.searchButton {
        color: #000000;
        background-color: #efefef;
        font-family: arial, helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        border-style: ridge;
        }


.inputField {
        font-size: 14px;
        font-family: verdana;
        margin-bottom: 5px;
        }

.inputFieldMargin {
        margin-top: 5px;
        }


.helpHeaderBG {
        background-color: #5353D1;
        }


.pageNavigation {
        font-size: 14px;
        font-family: verdana, arial, helvetica, sans-serif;
        font-weight: bold;
        }


A.pageNavigation:visited {
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
        }


A.pageNavigation:link {
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
        }


select.pageNavigation {
    font-size: 14px;
    font-family: verdana, arial, helvetica, sans-serif;
}


.worklistSmall {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
}



.worklistLarge {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
}



A.worklistLarge {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}



.gridBorder {background-color: white}


.switchcontent {
    display:none;
}

.panel {
    background-color: #FFFFFF;
    height: 250px;
    overflow: auto;
    border-style: none none none none;
}


A.workItemAction {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}


.workItemActionDisabled {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: gray;
}


table.progressBar {
    border: solid;
    border-color: black;
    border-width: 1px 1px 1px 1px
}


td.progressBar {
    background-color: #E1E1EC
}


.errorHeader {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: red;
}


.messageText {
    font-size: 12px;
}


.warningHeader {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: blue;
}

.messageHeader {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: black;
}


.outsideBorder {
    background-color: ;
}

.topLeftBorder {
    background-color: transparent;
}

.bottomRightBorder {
    background-color: transparent;
}

.sectionBody {
    background-color: #FFFFFF;
}

.sectionHeader {
    display: inline-block;
    background-color: transparent;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #444444;
    /*padding: 1.375rem 1.25rem 1.25rem 1.4375rem;*/
    /* margin: 0.625rem 0 0 0; */
    line-height: 1.1;
}



#tabs {
    position: relative;
    height: 21px;
    margin: 0px;
    padding: 0px 0px 0px 30px;
    left: 0px;
    bottom: -1px;
    }
html>body #tabs { bottom: 0px }

#tabs .tab {
    height: 14px;
    float: left;
    background-color: #4C728C;
    border: 1px solid #666;
    padding: 4px 5px 2px 5px;
    margin: 0px 2px 0px 2px;
    }

#tabs a {
    font-family: Arial, sans-serif;
    font-size: 11px;
    padding: 0px 20px 0px 20px;
    font-weight: bold;
    color: #4C728C;
    text-decoration: none;
    }

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

#tabs #tab-here {
    border-bottom-color: #FFF;
    background-color: #4C728C;
    }


.wid-tab, .wid-tab:hover, .wid-tab:visited, .wid-tab:active {
    border-collapse: collapse;
    border-style: solid solid none solid;
    border-color: #4C728C;
    border-width: 1px 1px 0px 1px;
    background-color: #4C728C;
    padding: 2px 0.5em 0px 0.5em;
    margin-top: 4px;
    color: #ffffff;
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

a.wid-tab, a.wid-tab:hover, a.wid-tab:visited, a.wid-tab:active {
    border-collapse: collapse;
    border-style: solid solid none solid;
    border-color: #4C728C;
    border-width: 1px 1px 0px 1px;
    background-color: #4C728C;
    padding: 2px 0.5em 0px 0.5em;
    margin-top: 4px;
    color: #ffffff;
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

.wid-tab-active, .wid-tab-active:hover, .wid-tab-active:visited, .wid-tab-active:active {
    border-collapse: collapse;
    border-style: solid solid none solid;
    border-color: #4C728C;
    border-width: 1px 1px 0px 1px;
    background-color: #ffffff;
    padding: 2px 0.5em 0px 0.5em;
    margin-top: 4px;
    color: #000000;
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

a.wid-tab-active, a.wid-tab-active:hover, a.wid-tab-active:visited, a.wid-tab-active:active {
    border-collapse: collapse;
    border-style: solid solid none solid;
    border-color: #4C728C;
    border-width: 1px 1px 0px 1px;
    background-color: #ffffff;
    padding: 2px 0.5em 0px 0.5em;
    margin-top: 4px;
    color: #000000;
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

#tabs .tab {
    height: 14px;
    float: left;
    background-color: #4C728C;
    border: 1px solid #666;
    padding: 4px 5px 2px 5px;
    margin: 0px 2px 0px 2px;
    }

#tabs a {
    font-family: Arial, sans-serif;
    font-size: 11px;
    padding: 0px 20px 0px 20px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    }

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

#tabs #tab-here {
    border-bottom-color: #FFF;
    background-color: #FFF;
    }

/*
#toptabsdiv {
    border-bottom: 1px solid #666;
    }

#toptabs-container {
    position: relative;
    }

#toptabs-arabic {
    position: relative;
    height: 21px;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    right: 0px;
    bottom: -1px;
    float:right;
    }

#toptabs {
    position: relative;
    height: 21px;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    right: 0px;
    bottom: -1px;
    }
html>body #toptabs { bottom: 0px }

#toptabs .tab {
    height: 16px;
    float: left;
    background-color: #4C728C;
    color: #ffffff;
    border: 1px solid #666;
    padding: 2px 5px 2px 5px;
    margin: 0px 2px 0px 2px;
    }

#toptabs-arabic .tab {
    height: 16px;
    float: right;
    background-color: #4C728C;
    color: #ffffff;
    border: 1px solid #666;
    padding: 2px 5px 2px 5px;
    margin: 0px 2px 0px 2px;
    direction:rtl;
    }
#toptabs-arabic a {
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
    padding: 0px 5px 0px 5px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    }
#toptabs a {
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
    padding: 0px 5px 0px 5px;
    font-weight: bold;
    color: #005FB3;
    text-decoration: none;
    }

#toptabs .active-tab {
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #005FB3;
    height: 16px;
    float: left;
    border: 1px solid #666;
    padding: 2px 5px 2px 5px;
    margin: 0px 2px 0px 2px;
    border-bottom-color: #ffffff;
    background-color: #ffffff;
    }

#toptabs-arabic .active-tab{
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
    font-color:white;
    font-weight: bold;
    color: #000000;
    height: 16px;
    float: right;
    border: 1px solid #666;
    padding: 2px 5px 2px 5px;
    margin: 0px 2px 0px 2px;
    border-bottom-color: #ffffff;
    background-color: #ffffff;
    }

#toptabs .active-tab a {
    color: #000000;
    }

#toptabs-arabic .active-tab a {
    color: #000000;
    }

#toptabs #invisibletab-here {
    border: 0px hidden #FFFFFF;
    border-right-color: #FFFFFF;
    border-left-color: #FFFFFF;
    border-top-color: #FFFFFF;
    border-bottom-color: #000000;
    background-color: #FFFFFF;
    color: #FFFFFF;
    }

#toptabs #toptab-here a {
    color: #000000;
    }
*/
A.statusImageAction {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 9.5px;
    font-weight: bold;
    text-decoration: none;
}

.activityStatusDecoration {
  z-index: 0;
  position: relative;
  display: none;
    }

.statusImagePopup {
  z-index: 1;
  position: relative;
  display: none;
  width: 350px;
    }

.statusPopupLabel {
    font-family: arial, helvetica;
    font-size: 12px;
    color: black; }

.statusPopupValue {
    font-family: arial, helvetica;
    font-size: 12px;
    color: black; }

.statusPopupLabelFloating {
padding: 5px;
    font-family: arial, helvetica;
    font-size: 11px;
    font-weight: 700;
    color: white; }

.statusPopupValueFloating {
    padding: 5px;
    font-family: arial, helvetica;
    font-size: 11px;
    color: white; }

/* The main calendar widget.  DIV containing a table. */

div.calendar { position: relative; }

.calendar, .calendar table {
  border: 1px solid #4C728C;
  font-size: 11px;
  color: Blue; /* todo: 01-24-06 where is this shown? */
  cursor: default;
  background: #FAF5F1;
  font-family: tahoma,verdana,sans-serif;
}

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

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  text-align: center;    /* They are the navigation buttons */
  padding: 2px;          /* Make the buttons seem like they're pressing */
  color: #ffffff;
  background: #4C728C;
}

.calendar .nav {
  background: #4C728C;
}

.calendar thead .title { /* This holds the current "month, year" */
  font-weight: bold;      /* Pressing it will take you to the current date */
  text-align: center;
  background: #4C728C;
  color: #ffffff;
  padding: 2px;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
  background: #4C728C;
  color: #ffffff;
}

.calendar thead .name { /* Cells <TD> containing the day names */
  border-bottom: 1px solid #4C728C;
  padding: 2px;
  text-align: center;
  color: #000000;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
  color: #000000;
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
  background-color: #faa; /* pink */
  color: #000; /* black */
  border: 1px solid #f40; /* red */
  padding: 1px;
}

.calendar thead .active { /* Active (pressed) buttons in header */
  background-color: #c77; /* darker pink */
  padding: 2px 0px 0px 2px;
}

.calendar thead .daynames { /* Row <TR> containing the day names */
  background: #fed;
}

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

.calendar tbody .day { /* Cells <TD> containing month days dates */
  width: 2em;
  text-align: right;
  padding: 2px 4px 2px 2px;
}
.calendar tbody .day.othermonth {
  font-size: 80%;
  color: #bbb; /* todo: seems current calendar does not display prev/next months' days */
}
.calendar tbody .day.othermonth.oweekend {
  color: #fbb; /* todo: seems current calendar does not display prev/next months' days */
}

.calendar table .wn {
  padding: 2px 3px 2px 2px;
  border-right: 1px solid #000;
  background: #fed; /* week #'s not used in current calendar */
}

.calendar tbody .rowhilite td {
  background: #ddf
}

.calendar tbody .rowhilite td.wn {
  background: #efe; /* week #'s not used in current calendar */
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
  background: #ffe;
  padding: 1px 3px 1px 1px;
  border: 1px solid #ddf;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
  background: #ddc;
  padding: 2px 2px 0px 2px;
}

.calendar tbody td.selected { /* Cell showing today date */
  font-weight: bold;
  border: 1px solid #000000;
  padding: 1px 3px 1px 1px;
  background: #fea;
}

.calendar tbody td.weekend { /* Cells showing weekend days */
  color: #000000;
}

.calendar tbody td.today { font-weight: bold; }

.calendar tbody .disabled { color: #999; } /* disabled days not used in current calendar */

.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 .footrow { /* The <TR> in footer (only one right now) */
  text-align: center;
  background: #988; /* todo: where used? */
  color: #000; /* todo: where used? */
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  border-top: 1px solid #4C728C;
  background: #4C728C;
  color: #ffffff;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
  background: #faa; /* todo: where used? */
  border: 1px solid #f40; /* todo: where used? */
  padding: 1px;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  background: #c77; /* todo: where used? */
  padding: 2px 0px 0px 2px;
}

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

.calendar .combo {
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  width: 4em;
  cursor: default;
  border: 1px solid #655; /* no direct select month/year menus used in current calendar */
  background: #ffe;
  color: #000;
  font-size: 90%;
  z-index: 100;
}

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

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

.calendar .combo .hilite {
  background: #fc8;
}

.calendar .combo .active {
  border-top: 1px solid #a64;
  border-bottom: 1px solid #a64;
  background: #fee;
  font-weight: bold;
}

.calendar td.time {
  border-top: 1px solid #4C728C;
  padding: 1px 0px;
  text-align: center;
  background-color: #fed;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .second,
.calendar td.time .ampm {
  padding: 0px 3px 0px 4px;
  border: 1px solid #988; /* dark grey */
  font-weight: bold;
  background-color: #ffffff;
}

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

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

.calendar td.time span.hilite {
  border-color: #000;
  background-color: #866;  /* todo: color of this important? */
  color: #fff;
}

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

.statusPopupNavigationButtonTable {
  /*background-color: #4C728C;*/
  border-spacing: 10px;
  border-collapse: separate;
}

.mutliLineCellClass {
    word-break: break-word;
    width: 30%;
    white-space: normal;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.advancedSearch {
     float: right;
     margin:3px;
}

.userManagementContent {
	overflow: hidden;
}