@import "ui.all.css";
@import "banner.css";
@import "controls.css";
@import "scrollbar.css";
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::
:::  (c) 2011-2012 Lumesse Rights AG
:::
:::  Filename:   style.css
:::  Author:     CHe
:::  Created:    07-Feb-2003
:::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::
:::  Purpose:
:::    Default stylesheet for formatting system and form pages.
:::
:::  Notes:
:::    The classes PageBodyForm, PageBodyList and PageBody may
:::    not contain styles for padding and margin. If they do the
:::    ScrollScript will start to behave incorrectly.
:::    Generally, margin is to be avoided.
:::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::
:::  Updates (Author, Date:dd/mm/yy, Purpose):
:::   CHe   11-Aug-2003 removed oversize (20px) on bottom and top
:::                     of ListForm.
:::   RV1   18-Aug-2003 removed "white-space: nowrap;" of
:::                     ControlLabel
:::   RV2   28-Aug-2003 Set height of all "[...]Title"-classes
:::                     from 21 to 20px
:::   RV3   12-Sep-2003 Added "FormLayoutTable"
:::                     Added "table-layout: fixed;" to "embeddedList"
:::   RV4   16-Sep-2003 Added "white-space: nowrap;" to "button.FormButton"
:::                     Removed padding-style from "PageBodyForm"
:::                     Added "ListLayoutTable"
:::   CHe1  24-Sep-2003 Fix defect #242 (at least a part of it):
:::                     Removed the height style from class "PageStatus"
:::   CHe2  25-Sep-2003 Fix defect #418 (part of the fix):
:::                     cleaned up class "HelpBannerTitle" so the ScrollScript
:::                     hanldes it smoothly
:::   RV5   29-Sep-2003 Added class "EmTreeEntry" for tree entry's on employee role
:::   KE1   07-Oct-2003 Fix defect #557: Added a body class with
:::                     margin-right to ensure that controller
:::                     and pages have the same margin to the
:::                     border of the browser window.
:::   KE2   07-Oct-2003 Fix defect #509: Added a huge padding
:::                     to the PageBodyForm class to make the
:::                     form look more "cleaner".
:::   CHe3  07-Oct-2003 Added class tr.SelectedNoForm
:::   CHe4  08-Oct-2003 Added class button.FindButton
:::   CHe5  09-Oct-2003 Removed padding from PageBodyForm again.
:::                     Added borders and background color to FormLayoutTable -
:::                     they think invisible borders create a clean look on the
:::                     pages and do not confuse ScrollScript.
:::   KE3   05-Feb-2004 Replaced pagestatus icons
:::   RV6   25-Feb-2004 Fix defect #1211: Add padding to ".ListLayoutTable th" and
:::                     ".ListLayoutTable td"
:::   CHe6  09-Mar-2004 Added div.WarningMessage
:::   RV7   01-Apr-2004 Fix defect #1339: Add style "overflow: visible" to "button.FormButton"
:::   CHe7  28-Jul-2004 Added style for <hr> tag
:::   RV8   07-Okt-2004 Changed "a"-color from #293863 to #273D89
:::   CHe8  19-Oct-2004 Added class PageStatus_LastModified
:::   CHe9  26-Oct-2004 Fix defect #2120:
:::                     Added background color to PageStatus_ErrorLabel
:::                     so errors stand out more clearly.
:::   RV9   05-Nov-2004 "FormTitle" Changes: background-color -> gray
:::                                          font color       -> black
:::                                          background image -> gray
:::   KE4   09-Mar-2005 Change the urls of all images so that they
:::                     are relative links of the skins folder.
:::                     This is done to ensure that localized
:::                     stylesheets link to the images in the
:::                     default/img folder.
:::   CHe10 19-Apr-2005 Add class readonlyControl
:::   RV10  31-May-2005 Add classes OverviewLink & OverviewTitle
:::   CHe11 16-Jun-2005 Added class WorkflowSidebar
:::   CHe12 20-Jun-2005 Add class OppositeAlign to support "right-aligned"
:::                     page elements in righht-to-left languages. This class
:::                     is used by EWAL.
:::   CHe13 22-Jun-2005 Add class "List"
:::   RV11  23-Jun-2005 Add "Overview[...]"-classes, change
:::                     OverviewFormTitle and OverviewLink
:::   RV12  30-Jun-2005 Add "OverviewFormTitleBig"
:::   RV13  30-Jun-2005 Changed readonlyControl
:::                     -> gray background color
:::                     -> lighter border color
:::                     -> gray font color
:::   CHe14 07-Jul-2005 Slightly modified FormSubTitle
:::   CHe15 22-Jul-2005 Fix defect #3414:
:::                     Added style for tag fieldset legend
:::   RV14  03-Aug-2005 Added "VersionLabel"
:::   KE5   21-Oct-2005 Added class "TrainingFormTitle"
:::   CHe16 02-Nov-2005 Added class "ConvertedCurrency"
:::   SP1   12-Jan-2006 Changed "TrainingFormTitle" to Orange background
:::                     Added appropriate GIF
:::   HER1  12-Jan-2006 Added classes "ThumbDown" and "ThumbUp"
:::   SP2   24-Jan-2006 Changed "TrainingFormTitle" to green
':::  CHe17 24-Feb-2006 Added top margin to page body
:::   SP3   13-Mar-2006 Changed "TrainingFormTitle" to blue
:::   CHe18 24-Apr-2006 Added class button.WorkflowActionButton
:::   KE6   07-Jul-2006 Added class "SurveyPositionFormTitle"
:::   SH1   17-Aug-2006 Fix defect #1697:
:::                     Added "ListTableLayout"
:::   SH2   04-Oct-2006 Fix defect #1752: Changed FormButton width to 72px
:::   SH3   08-Nov-2006 Fix defect #1698: Removed unneccessary attributes
:::                      of class "a"
:::   SH4   09-Nov-2006 Fix defect #1699: Centralized style definition of
:::                     info boxes on overview pages
:::   RN    10-Nov-2006 Added ListButtonEMailLink
:::   RV15  26-Jan-2007 Update: Fresh Design
:::   FSp1  29-Jan-2007 Added: YellowPageFormTitle.
:::   SP4   31-Jan-2007 Fix defect #2849: set additional styles for
:::                      workflowactionbuttons to look identical independant
:::                      of whether they ARE workflowbuttons or should look
:::                      like them
:::    SP5   09-Feb-2007 Fix defect #2874: removed border from LastModified.
:::    SP6   23-Feb-2007 Fogbugz #3262: All form titles looked top-aligned
:::                      if they had images. lowered height from 22px to 18px
:::                      and inserted 2px top/bottom padding.
:::   FSp2  16-Jul-2007 Added class "FeedbackAssessmentFormTitle"
:::   CHe19 29-Aug-2007 Changed button.FormButton to .FormButton so it also supprts
:::                     ASP.NET buttons that are rendered using an input tag
:::   CHe20 27-Sep-2007 Excluded hyperlinks ("a" tags) that are contained in a
:::                     table cell with the class name "dxtc". These link belong
:::                     to the DevExpress tab control, and we do not want to
:::                     have hyperlink behaviour on tab text.
:::   TIG1  17-Sep-2008 DT1715 - Added classes for selected and not selected links
:::   AW1   13-Oct-2008 DT334 - Added class for vertical grid border
:::   RN2   31-Oct-2008 Added RegularAlign to be able to specify alignment RTL conform
:::   RN3   22-Jan-2009 Added three diffreent box styles for cascading goals
:::                     BoxRegular, BoxDisabled, BoxHighligthed
:::   RN4   09-Mar-2009 Fix issue 4015: Added TextLabel
:::   PHL1  06-May-2009 Added class button.ListButtonEMailLink:disabled
:::                     and class button.ListButtonEMailLink:disabled:hover
:::   CNg1  18-Dec-2009 DT#7948: Fix right border missing in IE8
:::   KE7   17-Aug-2011 Removed top margin from body.
:::   KE8   23-Nov-2011 DT#15570: Left align descriptions on login provider page
:::   CK1   05-Mar-2012 DT#16392: WorkflowActionButton should have overflow: hidden 
:::   KE9   08-May-2012 Added support for FormAutocompleteControl
:::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of each page. So if you want to
::: change the general design here is a good point to start your work.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
body, td, a, li, div, button
{
  color: black;
  font-family: "Trebuchet MS" , Tahoma, Arial, Verdana, Helvetica;
  font-size: 11px;
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Apply some margin to the top and right so the page content
::: does not stick directly to the borders -- CHe17
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
body
{
  padding: 0px;
  margin: : 0px;
  margin-right: 4px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of each standard link. Especially
::: important is the specification for color,
::: because in the standard version the remaining details are the same
::: like in the body-definition.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.a 
{
  color: #2C2A29;
}

a
{
  color: #2C2A29;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of each standard hovered link.
::: Links changed their look if you move your mouse over them.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.a:hover
{
  color: #a81b4b !important;
  text-decoration: none;
}

a:hover
{
  color: #a81b4b !important;
  text-decoration: none;
}

a > img
{
  border: 0px none transparent;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of each alternative link.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.AlternativeLink
{
  text-decoration: none;
  color: #910048;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of each alternative hovered link.
::: Links changed their look if you move your mouse over them.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.AlternativeLink:hover
{
  text-decoration: none;
  color: #a81b4b !important;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: CHe20: Exclude links inside DevExpress tabcontrols from
::: hyperlink formatting.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
td.dxtc a
{
  color: black;
}

td.dxtc a:hover
{
  text-decoration: none;
  color: black;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of table headers like the description
::: of list cells. Especially important is the "bold"-setting
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
th
{
  font-size: 11px;
  font-weight: bold;
  min-height: 15px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: CNg1: Add 1px padding right to td tag to prevent right 
::: border missing in IE8
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
td
{
  padding-right: 0px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of text fields and dropdown-boxes
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
input, textarea, select
{
  font-family: "Trebuchet MS" , Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

textarea
{
  resize: none;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Read-only controls:
::: Read-only text controls are displayed with a gray
::: background. A dark gray thin border is drawn around the
::: control.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.readonlyControl
{
  -moz-box-shadow: inset 0 0 10px #F2F2F2;
  -webkit-box-shadow: inset 0 0 10px #F2F2F2;
  box-shadow: inset 0 0 10px #F2F2F2;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: #2c2a29;  
  background-color: #F2F2F2;
  cursor: default !important;  
}


/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: FormButton: Defines the look of buttons which are displayed on forms,
::: like "Save" or "Delete". Here we set the width directly
::: and the overflow-property to visible. As the result
::: the button has minimum 60px width and grows if the
::: text is longer than that.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.FormGroup
{  
  box-shadow: inset 0 0 10px #dadbd9;
  border-right: none;
  -moz-border-radius: 8px 8px 8px 8px;
  -webkit-border-radius: 8px 8px 8px 8px;
  border-radius: 8px 8px 8px 8px;
  border: 1px #c8c9c7 solid;
  padding: 10px;
  margin: 3px;
 }

.FormButton
{
  -moz-border: radius:4px;
  -webkit-border-radius: 4px;
  background: url("../default/img/sprites.png") 0 -1870px repeat-x;
  border: 1px #c8c9c7 solid;
  border-radius: 4px;
  color: #a81b4b;
  display: inline-block;
  font-weight: 700;
  padding: 4px;
  white-space: nowrap;
  margin-left: 5px;
  min-width: 72px;
  overflow: visible;
  cursor: pointer;
}

/*
If a page uses devxpress controls, the FormButton:hover is killed by whatever.
Quick Workaround: Add Hover effect with JQuery in etweb.form.js. :)
*/
.FormButtonHover
{
  background: #a81b4b;
  border: 1px #FFFFFF solid;
  color: #FFFFFF;
}
.FormButton:hover
{
  background: #a81b4b;
  border: 1px #FFFFFF solid;
  color: #FFFFFF;
}

.FormButton:disabled
{
  background: url("../default/img/sprites.png") 0 -1870px repeat-x;
  border: 1px #c8c9c7 solid;
  color: #97999B;
}

.FormButton:active
{
  -moz-box-shadow: inset 0 0 15px #000;
  -webkit-box-shadow: inset 0 0 15px #000;
  box-shadow: inset 0 0 15px #000;
}

button.FormButton img
{
  vertical-align: middle;
}

button::-moz-focus-inner
{
  border: none; /* overrides extra padding in Firefox */
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: FormCancelButton: Defines the look of buttons which are displayed on forms,
::: like "Cancel". Here we set the width directly
::: and the overflow-property to visible. As the result
::: the button has minimum 60px width and grows if the
::: text is longer than that.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.FormCancelButton
{
  -moz-border: radius:4px;
  -webkit-border-radius: 4px;
  background: #fff;
  border: none;
  border-radius: 4px;
  color: #a81b4b;
  display: inline-block;
  font-weight: 700;
  padding: 6px;
  white-space: nowrap;
  margin-left: 5px;
  min-width: 42px;
  overflow: visible;
  text-decoration: underline;
}

.FormCancelButton:hover
{
  background: #fff;
  border: none;
  color: #818284;
  text-decoration: none;
}

.FormCancelButton:disabled
{
  background: #fff;
  border: none;
  color: #C8C9C7;
  text-decoration: none;
}

.SpellLegalButtonGap
{
  margin-right: 20px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the look of buttons which are displayed in the right-hand
::: workflow sidebar. These buttons are normally used to trigger a
::: workflow action.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
button.WorkflowActionButton
{
  -moz-border: radius:4px;
  -webkit-border-radius: 4px;
  background: url("../default/img/sprites.png") 0 -1870px repeat-x;
  border: 1px #c8c9c7 solid;
  border-radius: 4px;
  color: #a81b4b;
  display: inline-block;
  font-weight: 700;
  padding: 6px;
  white-space: nowrap;
  margin-left: 5px;
  width: 72px;
  overflow: visible;
  width: 97%;
  margin-top: 5px;    
  overflow: hidden; /*CK1*/
}

button.WorkflowActionButton:hover
{
  background: #a81b4b;
  border: 1px #51284f solid;
  color: #FFFFFF;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of image-buttons which are
::: transparent and have no border, i.e. the advanced
::: search icon.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
button.ImageOnlyButton
{
  border: none;
  background-color: transparent;
  height: 30px;
  margin: 0px;
  padding: 0px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of list buttons like
::: "edit" and "add". They are displayed transparent
::: and without a border.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.ListButtonCell
{
  text-overflow: clip !important;  
  overflow: Visible !important;
}

button.ListButton
{
  border-style: none;
  background-color: Transparent;
  cursor: pointer;
  margin: 0px;
  padding: 0px;
  margin-left: 3px;
  min-height: 28px;
}

button.ListButtonEdit
{
   background: url("../default/img/ListButtonEdit.gif");
   background-repeat: no-repeat;
   width:  11px;
   height: 28px; 
   
}
button.ListButtonEdit:hover
{
   background: url("../default/img/ListButtonEditHover.gif");
   background-repeat: no-repeat;
   width:  11px;
   height: 28px;   
}

button.ListButtonSelected
{
   background: url("../default/img/ListButtonSelected.gif");   
   background-repeat: no-repeat;
   width:  11px;
   height: 28px;   
}

button.ListButtonSelected:hover
{
   background: url("../default/img/ListButtonSelected.gif");  
   background-repeat: no-repeat;
   width:  11px;
   height: 28px;  
}

button.ListButtonAdd
{
   background: url("../default/img/ListButtonAdd.gif");   
   background-repeat: no-repeat;
   width:  11px;
   height: 28px; 
   min-height: 28px; 
   vertical-align:middle !important;
}

button.ListButtonAdd:hover
{
   background: url("../default/img/ListButtonAddHover.gif");  
   background-repeat: no-repeat;
   width:  11px;
   height: 28px;
   min-height: 28px;   
}

button.ListButtonDelete
{
   background: url("../default/img/ListButtonDelete.gif");   
   background-repeat: no-repeat;
   width:  11px;
   height: 28px;   
}

button.ListButtonDelete:hover
{
   background: url("../default/img/ListButtonDeleteHover.gif");  
   background-repeat: no-repeat;
   width:  11px;
   height: 28px;  
}

/* Bulk Forms use links with theese id's to select / deselect employees */
#SelectAllLink
{
  background-color: transparent;
  border-style: none;
  cursor: pointer;
  height: 15px;
  margin: 0px;
  padding: 0px;
  font-family: "Trebuchet MS" , Tahoma, Arial, Verdana, Helvetica;
  font-size: 11px;
  color: #910048;
  text-decoration: none;
  vertical-align: middle;  
}

#SelectAllLink:hover
{
  color: #a81b4b !important;
}

#SelectNoneLink
{
  background-color: transparent;
  border-style: none;
  cursor: pointer;
  height: 15px;
  margin: 0px;
  padding: 0px;
  font-family: "Trebuchet MS" , Tahoma, Arial, Verdana, Helvetica;
  font-size: 11px;
  color: #910048;
  text-decoration: none;
  vertical-align: middle;  
}

#SelectNoneLink:hover
{
  color: #a81b4b !important;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of email buttons
::: They are displayed transparent and without a border.
::: The text is displayed like links (with hover), the button has
::: to slightly higher to disply the text properly and to align
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

button.ListButtonEMailLink
{
  background-color: transparent;
  border-style: none;
  cursor: pointer;
  height: 15px;
  margin: 0px;
  padding: 0px;
  font-family: "Trebuchet MS" , Tahoma, Arial, Verdana, Helvetica;
  font-size: 11px;
  color: #910048;
  text-decoration: none;
  vertical-align: middle;
}

button.ListButtonEMailLink:hover
{
  text-decoration: none;
  color: #a81b4b;
}

button.ListButtonEMailLink:disabled
{
  color: #000000;
}

button.ListButtonEMailLink:disabled:hover
{
  text-decoration: none;
  color: #000000;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of the form money control image
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

/* we make the button look transparent */
.moneycontrolimage
{
  background: url("../default/img/FormButtonCurrExchange.gif");
  width: 21px;
  height: 24px;
  border-style: none;
  cursor: pointer;
  margin: 0px;
  padding: 0px;
  position: relative;
  opacity: 1.0;
}

.moneycontrolimage:hover:not([disabled])
{
  background: url("../default/img/FormButtonCurrExchangeHover.gif");
  opacity: 1.0;
}

.moneycontrolimagewrapper
{
  background-color: Transparent;
  border: none;
  cursor: pointer;
  text-indent: -9999px;
  padding-right: 5px;
  margin: 0px;
  position: relative;
  top: 0px;
  left: 0px;
  display: inline;
}

.moneycontrolcurrencycontainer
{
  padding-left: 4px;
  width: 55px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of the form email control image
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

/* we make the button look transparent */
.emailcontrolimage
{
  background: url("../default/img/FormButtonEMailControl.png");
  width: 21px;
  height: 22px;
  border-style: none;
  cursor: pointer;
  margin: 0px;
  padding: 0px;
  position: relative;
  opacity: 1.0;
}

.emailcontrolimage:hover:not([disabled])
{
  background: url("../default/img/FormButtonEMailControlHover.png");
  opacity: 1.0;
}

.emailcontrolimagewrapper
{
  background-color: Transparent;
  border: none;
  cursor: pointer;
  text-indent: -9999px;
  padding: 0px;
  margin: 0px;
  position: relative;
  top: 0px;
  left: 0px;
  display: inline;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of the form salary control image
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

/* we make the button look transparent */
.salarycontrolimage
{
  background: url("../default/img/FormButtonSalaryGradeRange.gif");
  width: 21px;
  height: 24px;
  border-style: none;
  cursor: pointer;
  margin: 0px;
  padding: 0px;
  position: relative;
  opacity: 1.0;
}

.salarycontrolimage:hover:not([disabled])
{
  background: url("../default/img/FormButtonSalaryGradeRangeHover.gif");
  opacity: 1.0;
}

.salarycontrolimagewrapper
{
  background-color: Transparent;
  border: none;
  cursor: pointer;
  text-indent: -9999px;
  padding: 0px;
  margin: 0px;
  position: relative;
  top: 0px;
  left: 0px;
  display: inline;
}
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of the datepicker image
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.hasDatepicker
{
  text-align: left;
  padding-right: -20px;
  width: 100% !important;
}
.datepickerimage
{
  opacity: 1 !important;
  mozopacity: 1 !important;
  filter: alpha(opacity=100) !important;
  background-color: White !important;
  background: url("../default/img/sprites.png ") 0 -1909px no-repeat;
  border: none;
  cursor: pointer;
  display: block;
  height: 24px;
  text-indent: -9999px;
  width: 21px;
  padding: 0px;
  margin: 0px;
  position: absolute;
  top:  -12px;
  left: -20px;
}

.datepickerimage:hover:not([disabled])
{
  background: url("../default/img/sprites.png") 0 -1945px no-repeat;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of find buttons which are
::: transparent and have no border, i.e. the find
::: and clear icon on forms.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.findcontainer 
{
  position: relative;
}
.findcontainer .FormButton
{
  min-height: 24px;
}
.textconrolcontainer
{
  position: relative;
  width: 98%;
  right: 0px;
  left: 0px;
  
}

.imagecontainer
{
  position: absolute;
  right: 0px;  
  z-index: 1000;
}
.freetextcontainer
{
  width: 100%;
  position: relative;
  left: 0px;
  top: 0px;
  padding-bottom: 3px;
}

.findcontainer .textconrolcontainer
{
  margin-right: 50px;
}

.textconrolcontainersingleimage
{
  margin-right: 18px;
}

.textconrolcontainernoimage
{
  margin-right: 0px;
}

.findcontainer .textconrolcontainer .genericcontrolwrapper
{
  box-shadow: inset 0 0 10px #dadbd9;
  border-right: none;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}

/* If find displays the search and the clear button... */
.findcontainer .imagecontainer
{
  float: right;
  width: 42px;
}

/* If find displays only the search button... */
.imagecontainersingleimage
{
  position: absolute;
  float: right;
  top: 0px;
  right: 6px; 
  
}

/* If only the search button is visible and the text control is hidden */
.imagecontainersingleimagenotextcontrol
{
  float: right;
  top: -12px;
  right: 6px;
  position: absolute;
}

.noimagecontainer
{
  float: right;
  width: 0px;
}

.findimagewrapper
{
  float: right;
}
.findimage
{
  border: none;
  cursor: pointer;
  display: block;
  height: 24px;
  text-indent: -9999px;
  width: 21px;
  filter: no filter !important; /* DT#15412 IE8 */
}

.noclearbutton
{
  position: relative;
  top: 0px;  
  right: -6px;
  z-index: 10000;
}

.noclearbutton .findimage
{
  background: url("../default/img/sprites.png") 0 -2059px no-repeat;
}

.clearbutton .findimage
{
  background: url("../default/img/sprites.png") 0 -2211px no-repeat;
}


.noclearbutton .findimage:hover:not([disabled])
{
  background: url("../default/img/sprites.png") 0 -2097px no-repeat;
}

.clearbutton .findimage:hover:not([disabled])
{
  background: url("../default/img/sprites.png") 0 -2249px no-repeat;
}

.clearimagewrapper
{
  float: right;
}
.clearimage
{
  background: url("../default/img/sprites.png") 0 -2135px no-repeat;
  border: none;
  cursor: pointer;
  display: block;
  height: 24px;
  text-indent: -9999px;
  width: 21px;
  filter: no filter !important; /* DT#15412 IE8 */  
}
.clearimage:hover:not([disabled])
{
  background: url("../default/img/sprites.png") 0 -2173px no-repeat;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of standard titles of
::: forms which have no specific record types.
::: In this style we set a specific background
::: color which should match the base color
::: of the background image. If the user has set
::: the browser property to hide all images, the
::: look and feel is not so much different. Also
::: the white-space is set here to avoid linebreaks
::: in form titles.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.FormTitle
{
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-radius: 4px 4px 0 0;
  border: 1px #c8c9c7 solid;
  border-radius: 4px 4px 0 0;
  background: #f8f8f8 url("../default/img/sprite-hrz.png") 0 -67px repeat-x;
  text-align: left;
  font-weight: 700;
  padding: 3px 3px;
  white-space: nowrap;
}

.FormTitleTextLight
{
  color: #97999B;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of standard subtitles
::: which can separate two different topics on
::: one form.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.FormSubTitle
{
  font-weight: bold;
  padding: 0px;
  padding-top: 3px;
  padding-bottom: 2px;
  white-space: nowrap;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of titles which are displayed
::: on forms which have specified "employee" as record type.
::: If the user has set the browser property to hide all
::: images, the look and feel is not so much different because of
::: setting background-color equal to the background-image. Also
::: the white-space is set here to avoid linebreaks
::: in form titles.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.EmployeeFormTitle, .PositionFormTitle, .JobFamFormTitle, .TrainingFormTitle, .SurveyPositionFormTitle, .TalentConferenceFormTitle
{
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-radius: 4px 4px 0 0;
  border: 1px #c8c9c7 solid;
  border-radius: 4px 4px 0 0;
  background: #f8f8f8 url("../default/img/sprite-hrz.png") 0 -67px repeat-x;
  text-align: left;
  font-weight: 700;
  padding: 8px 10px;
  white-space: nowrap;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of titles which are displayed
::: If the user has set the browser property to hide all
::: images, the look and feel is not so much different because of
::: setting background-color equal to the background-image. Also
::: the white-space is set here to avoid linebreaks
::: in form titles.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.FeedbackAssessmentFormTitle
{
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-radius: 4px 4px 0 0;
  border: 1px #c8c9c7 solid;
  border-radius: 4px 4px 0 0;
  background: #f8f8f8 url("../default/img/sprite-hrz.png") 0 -67px repeat-x;
  text-align: left;
  font-weight: 700;
  padding: 4px 5px;
  white-space: nowrap;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of text on titles on pages like
::: the candidate tree.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.TitleText
{
  /* title of navigation element */
  color: #000000;
  font-size: 11px;
  font-weight: bold;
  line-height: 17px;
  margin-left: 2px;
  text-indent: 2px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of the related information
::: link such as "> Notes on this page" and "Edit".
::: The white-space is set here to avoid linebreaks
::: in form titles. Padding is also set to get a little
::: space to surrounding elements.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.HelpBannerTitle
{
  font-size: 11px;
  font-weight: bold;
  padding-left: 4px;
  white-space: nowrap;
  padding-top: 6px;
  padding-bottom: 6px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of the related information text.
::: The left padding property guaranteed that the text begins
::: closely below the "notes on this page"-link and not below
::: the image before.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.HelpBanner
{
  font-size: 11px;
  text-align: left;
  padding-left: 26px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of all standard forms. The
::: table layout is set to fixed so the elements arranged
::: themselves to be displayed exactly. Also the
::: background is set to light gray to get a little difference
::: between the form and the page body.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.FormLayoutTable
{
  table-layout: fixed;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 6px;
  padding-right: 10px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of all standard list forms. The
::: table layout is set to fixed so the elements arranged
::: themselves to be displayed exactly.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.ListLayoutTable
{
  table-layout: fixed;
  width: 100%;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of all standard banners. Draw
::: a 1px border and set the background to be lightgray.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.Form
{
  background-color: Transparent;
  border: 1px #C8C9C7 solid;
  border-top: 0px;
  font-size: 11px;
  padding: 2px;
  text-align: left;
  margin-bottom: 2px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of all embedded list forms.
::: Here we set a nice 1px dotted border and some space
::: to seperate the form from the list.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.ListForm
{
  background-color: Transparent;
  border-bottom: 1px #C8C9C7 solid;
  border-top: 1px #C8C9C7 solid;
  font-size: 11px;
  text-align: left;
  padding: 10px;
}


/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of table rows in the req prof section
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


*/

.ReqProfCritical
{
  background-color: #af91a4;
  margin: 0px;
  padding: 0px;
}

.ReqProfIgnore
{
  background-color: #D4D4D4;
  margin: 0px;
  padding: 0px;
}

.ReqProfDefault
{
  background-color: #cebec9;
  margin: 0px;
  padding: 0px;
}


/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of - guess what. input and 
::: select controls. yes.
::: To manifest ou design, each control is surrounded by a <div> tag.
::: The control borders, lines and images are set to invisible
::: and the styling is done by the surrounding <div> tag.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.datepickerimagecontainer
{
  margin: 0;
  padding: 0px;
  right: 0px;
  top: 0px;
  position: relative;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the basic look of all control labels.
::: Control labels are these texts which stands
::: in front of any text control, dropdown-box, etc.
::: Especially importent is the text-align property
::: where you can control whether they are left-
::: middle- or right-aligned.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.ControlLabel
{
  text-align: right;
  vertical-align: middle;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: PageStatus-Styles define the design of
::: status- and error messages. This first class
::: is used in both cases. Here is set a
::: background-image and the background-color
::: with the same basecolor.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.PageStatus
{
  background-color: #FFFFFF; /*background-image  : url(../default/img/TitleBackgroundStatus.gif);*/
  text-align: left;
  vertical-align: middle;
  margin: 0px;
  padding: 0px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: If any error occoured this style shows to advantage.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.PageStatus_ErrorLabel
{
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-radius: 4px 4px 0 0;
  background-color: #ffeb99;
  border: 1px #f2b87f solid;
  border-radius: 4px 4px 0 0;
  text-align: left;
  font-weight: 700;
  padding: 4px;
  white-space: nowrap;
}

.PageStatus_ErrorText
{
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -webkit-border-radius: 0 0 4px 4px;
  background-color: #fffbd9;
  border: 1px #f2b87f solid;
  border-radius: 0 0 4px 4px;
  border-top: 0px;
  padding: 4px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: If no error occours on a page this style allways shows
::: to advantage. We set the OK-icon as a non-repeat background, so
::: we don't need to configure this icon on each page.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.PageStatus_InfoLabel
{
  background-image: url(../default/img/FormIconStatusOk.gif);
  background-position: 3px 2px;
  background-repeat: no-repeat;
  border: none;
  font-weight: bold;
  line-height: 19px;
  height: 19px;
  padding-left: 21px;
}
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: CHe8: When information about the last data modification is displayed,
::: a table cell with this class is added to the right corner
::: of the page status label.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.PageStatus_LastModified
{
  border: none; /* SP5 */
  line-height: 19px;
  height: 19px;
  font-size: 7pt;
  text-align: right;
  padding-right: 2px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the font-size and the margin of each
::: possible standard header.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
H1
{
  font-size: 14pt;
  font-weight: normal;
  margin: 0px;
  margin-left: 3px;
}
H2
{
  font-size: 13pt;
  font-weight: normal;
  margin: 0px;
  margin-left: 3px;
}
H3
{
  font-size: 10pt;
  font-weight: bold;
  margin-bottom: 0px;
  margin-left: 3px;
  margin-top: 0px;
}

H4
{
  font-size: 10pt;
  font-weight: bold;
  margin-bottom: 0px;
  margin-left: 1px;
  margin-top: 5px;
}
H5
{
  font-size: 10pt;
  font-style: italic;
  font-weight: normal;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-top: 0px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Here we define standard lists. There are four
::: styles: The first two are used for the zebra-effect
::: (two different background-colors).
::: The third and fourth one is the line of the actual selected
::: record. Here is also set the top- and right-border.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

tr.NormalNoHover
{
  background: #f8f8f8;
  min-height: 28px;
}

tr.AlternateNoHover
{
  background: #fff;
  min-height: 28px;  
}

tr.NormalNoHover > td, tr.AlternateNoHover > td
{
  vertical-align: middle !important;
  font-family: Arial, Verdana, sans-serif;
  font-size: 100%;
}

tr.ListFormHover > td
{
  background: #D4D4D4;
}
tr.Normal > td, tr.Alternate > td
{
  vertical-align: middle !important;
  font-family: Arial, Verdana, sans-serif;
  font-size: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

tr.Normal
{
  background: #f8f8f8;
  min-height: 28px;
}

tr.Alternate
{
  background: #fff;
  min-height: 28px;
}

tr.NormalBase > td, tr.AlternateBase > td
{
  font-family: Arial, Verdana, sans-serif;
  font-size: 100%;
}

tr.NormalBase
{
  background: #f8f8f8;
}

tr.AlternateBase
{
  background: #fff;
}

tr.Selected td, tr.SelectedNoForm td
{
  background: #a81b4b !important;
  border-top: 1px #C8C9C7 solid;
  color: #FFFFFF;
  min-height: 28px;
  vertical-align: middle !important;
  font-family: Arial, Verdana, sans-serif;
  font-size: 100%;
  text-overflow: ellipsis;
  overflow: hidden;

}

tr.Selected a, tr.SelectedNoForm  a
{
  color: #D9D9D8;
  min-height: 28px;
}

tr.Selected a:hover, tr.SelectedNoForm a
{

  color: #FFCD00 !important;
  min-height: 28px;
  text-decoration: underline;
  
}


/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: The next 8 items describe important parts
::: of the whole form. As you can see the z-index
::: property sets the stack order of an element.
::: The overflow-property specifies how (and whether)
::: a box is clipped. All other elements should be clear,
::: just some color- and padding-properties.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.PageHeader
{
  margin: 0px;
  padding: 0px;
}

.PageBody
{
  overflow: auto;
  position: relative;
  z-index: 0;
}
/*CZJ1{ */
.PageBodyBGImage
{
  overflow: auto;
  position: absolute;
  z-index: 0;
  background-image:url('img/LoginBackground.jpg');
  background-repeat:no-repeat;
  background-color:black;
}
/*}CZJ1 */

.PageBody form
{
  position: relative;
  z-index: 999;
}

.PageBodyForm
{
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -webkit-border-radius: 0 0 4px 4px;
  border: 1px #c8c9c7 solid;
  border-radius: 0 0 4px 4px;
  border-top: none;
  margin: 0;
  padding: 10px 0;
  overflow: auto;
  text-align: left;
  z-index: 0;
}

.PageBodyForm form
{
  position: relative;
  z-index: 999;
}

.PageBodyList
{
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -webkit-border-radius: 0 0 4px 4px;
  border: 1px #c8c9c7 solid;
  border-radius: 0 0 4px 4px;
  border-top: none;
  margin: 0;
  padding: 10px 0;
  overflow: auto;
  text-align: left;
  z-index: 0; 
}

.PageBodyList form
{
  position: relative;
  z-index: 999;
}

.PageFooter
{
  padding-top: 4px;
}

.LeftBorder
{
  border-left: 1px #c8c9c7 solid;
}
.RightBorder
{
  border-right: 1px #c8c9c7 solid;
}
.TopBorder
{
  border-top: 1px #c8c9c7 solid;
}
.BottomBorder
{
  border-bottom: 1px #c8c9c7 solid;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: WarningMessage is for warning mesages displayed inside the
::: form area. Here we just set the background color, the border
::: and small padding.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.WarningMessage
{
  -moz-box-shadow: inset 0 0 5px #f2b87f;
  -webkit-box-shadow: inset 0 0 5px #f2b87f;
  box-shadow: inset 0 0 5px #f2b87f;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border: 1px #f2b87f solid;
  border-radius: 4px;
  color: black;
  background-color: #ffeb99;
  padding: 3px;
  margin: 5px;
}
.TransparentWarningMessage
{
  -moz-box-shadow: inset 0 0 5px transparent;
  -webkit-box-shadow: inset 0 0 5px transparent;
  box-shadow: inset 0 0 5px transparent;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border: 1px transparent solid;
  border-radius: 4px;
  padding: 3px;
  margin: 5px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Redefines the appearance of the horizontal-line "hr" tag.
::: It's rendered as a 1px high black line.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
hr
{
  height: 1px;
  color: #C8C9C7;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the position/size of content on overview forms.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.OverviewPosition
{
  width: 720px;
  margin-top: 80px;
}

/*CZJ1{*/
.OverviewPosition1
{
  width: 720px;
  margin-top: 215px;
  margin-left: 245px;
}
/*}CZJ1*/
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the look of the buttons on overview forms.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.OverviewButton
{
  text-align: left;
  width: 320px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the look of the hyperlinks on overview forms.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

a.OverviewLink:link, a.OverviewLink:visited
{
  color: #415284;
  font-size: 17px;
  font-weight: bold;
  padding: 1px;
  text-decoration: none;
  padding-top: 10px;
}

a.OverviewLink:active, a.OverviewLink:hover
{
  color: #FF0000;
  font-size: 17px;
  font-weight: bold;
  padding: 1px;
  text-decoration: none;
  padding-top: 10px;
}

.OverviewCaption
{
  color: #888888;
  font-size: 17px;
  font-weight: bold;
  border-bottom: 1px solid #888888;
  padding-top: 10px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the look of the title on overview forms.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.OverviewFormTitle
{
  background-image: url(../default/img/TitleBackgroundOverview.jpg);
  height: 100px;
  padding-left: 20px;
  font-size: 50px;
  color: #C8C9C7;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the look of the title on overview forms.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.OverviewFormTitleBig
{
  background-image: url(../default/img/TitleBackgroundOverviewBig.jpg);
  height: 264px;
  padding-left: 20px;
  font-size: 50px;
  color: #C8C9C7;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the look of the content area on overview forms.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.OverviewContent
{
  background-color: #FFFFFF;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  padding: 15px 15px 0px 15px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the look of the description area on overview forms.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.OverviewDescText
{
  padding-left: 30px;
  padding-right: 30px;
  background-color: #FFFFFF;
  border: none;
  text-align: center;
  color: #910048;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the look of the different 1px high lines to ensure
::: the small 3D effect on overview forms.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.OverviewLineTopLight, .OverviewLineTopDark , .OverviewLineBottomLight, .OverviewLineBottomDark
{
  height: 1px;
  width: 100%;
  line-height: 1px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the look and feel of the info boxes on overview
::: pages
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.OverviewInfoText
{
  overflow: auto;
  color: #415284;
}

.OverviewInfoTextLight
{
  overflow: auto;
  color: #97999B;
  /*KE8*/
  padding: 5px 25px 15px 25px; 
  vertical-align: middle; 
  text-align: left;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Workflow related controls are grouped in a table cell located
::: on the right side of the screen to optically separate them from the
::: data entry part of a form. This style draws a border around
::: this section and gives it a defined background color.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.WorkflowSidebar
{
  vertical-align: top;
  padding: 3px;
  border: none;
  background-color: white;
}
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Align page elements on the opposite side, depending on the
::: language. E.g. buttons are normally right-aligned; but in
::: right-to-left languages, they have to be left-aligned.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.OppositeAlignContainer
{
  width: 100%;
  height: 35px;
}

.OppositeAlignCurrencyControl
{
  display: inline-block;
  text-align: right;
  width: 250px;
  right: 1px;
  position: absolute;
}

.OppositeAlign
{
  text-align: right;
}
/* RN2
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Align page elements on the regular side, depending on the
::: language. E.g. texts are normally left-aligned; but in
::: right-to-left languages, they have to be left-aligned.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.RegularAlign
{
  text-align: left;
}

.CenterAlign
{
  text-align: center;
}
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines an container for lists when ListPageBody cannot be used.
::: Draws a border with the top open so that a header can be set
::: on top of it.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.List
{
  border: 1px #C8C9C7 solid;
  border-top: none;
  padding: 0px;
  text-align: center;
}
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the look of fieldset legends. These are the texts
::: displayed on top of the frames drawn around groups of
::: radiobuttons. When no color is defined, WinXP displays
::: them in blue which makes them look like links.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
fieldset legend
{
  color: black;
  margin-left: 10px;
}

/* Safari need this.... or it looks weird. */
fieldset 
{
  border: 1px solid #C8C9C7;
  -moz-border-radius-bottomleft: 7px;
  -moz-border-radius-bottomright: 7px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 7px;
  -webkit-border-radius: 7px;
  border-radius: 3px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: indicates that a value is OK
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.ThumbUp
{
  color: black;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: indicates that a value is not OK
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.ThumbDown
{
  color: #FF3300;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the look and feel of the tables of
::: list layouts
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.ListTableLayout
{
  border: none;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the look and feel of selected and not selected
::: links
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.SelectedLink
{
  font-weight: bold;
  color: black;
}

.SelectedLink:hover
{
  color: black;
  text-decoration: none;
}

.NotSelectedLink
{
  font-weight: normal;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: AW1   Defines vertical border for Classic-ASP grids
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.VerticalGridBorder
{
  border-right: 1px solid black;
  border-left: none;
}
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: RN3:   Defines box styles used in Cascading gaols
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
/*
  Regular (Not Highlighted) Box
  */
.RegularBox
{
  border: 1px #C8C9C7 solid;
  background-color: white;
}
/*
  Disabled Box
  Same color as readonlyControl
*/
.DisabledBox
{
  border: 1px #C8C9C7 solid;
  background-color: #F0F0F0;
}

/*
  Highlighted Box
  Same color as WarningMessage
*/
.HighlightedBox
{
  border: 1px #C8C9C7 solid;
  background-color: #FCF9E0;
}
/* RN4
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Defines the look of labels in front of a text.
::: Text labels are used for labels in front of texts,
::: their layout should match the ControlLabel beside the
::: top padding done in ControlLabel to get the labels aligned
::: with the controls.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.TextLabel
{
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
}

/* TGS1 { */
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::
::: Defines an overlay effect for most common browsers
:::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.Overlay
{
  height: 100%;
  width: 100%;
  background-image: -webkit-radial-gradient(center, circle cover, #FFFFFF 0%, #F7F7F7 50%, #C8C8C8 100%);
}

#Overlay
{
  height: 100%;
  width: 100%;
  background-image: -webkit-radial-gradient(center, circle cover, #FFFFFF 0%, #F7F7F7 50%, #C8C8C8 100%);
}

.OverlayLinealGradient
{
  height: 100%;
  width: 100%;
  background-image: -webkit-linear-gradient(top right, #eaeaea 0%, #C8C9C7 100%);
}

#OverlayLinealGradient
{
  height: 100%;
  width: 100%;
  background-image: -webkit-linear-gradient(top right, #eaeaea 0%, #C8C9C7 100%);
}

/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::
::: Dash Charts: Alignment of Info Popup
:::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.dxpcContent
{
  background-color: Transparent;
  text-align: left;
  padding: 0px;
  font: 8pt Arial,Verdana,sans-serif;
}

.dxpcContentPaddings
{
  padding: 3px;
}
/* } TGS1 */


/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::
::: Defines the look and feel of a warning sign in a banner
:::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.BannerWarningSign
{
  padding: 5px;
  color: darkorange;
  font-weight: bolder;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::
::: Loading Panel
:::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.LoadingPanel
{
  text-align: center;
  position: absolute;
}

.LoadingPanel > table
{
  width: 100%;
  height: 100%;
}

.LoadingPanel > table td.LoadingAnimation
{
  text-align: center;
  vertical-align: bottom;
}

.LoadingPanel > table td.LoadingText
{
  text-align: center;
  vertical-align: top;
  padding: 10px;
}


.traingingcenterCalenderLabelCaption
{

white-space:nowrap;
text-align:right;  
width: 50px;
padding-right: 3px;
vertical-align: middle;

  
}
/*

Uniform Theme: Uniform Default
Version: 1.6
By: Josh Pyles
License: MIT License
---
For use with the Uniform plugin:
http://pixelmatrixdesign.com/uniform/
---
Generated by Uniform Theme Generator:
http://pixelmatrixdesign.com/uniform/themer.html

*/

/* Global Declaration */

div.selector, 
div.selector span, 
div.checker span,
div.radio span, 
div.uploader, 
div.uploader span.action,
div.button,
div.button span {
  background-image: url(../default/img/sprite.png);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

.selector, 
.radio, 
.checker, 
.uploader,
.button, 
.selector *, 
.radio *, 
.checker *, 
.uploader *,
.button *{
  margin: 0;
  padding: 0;
}

/* INPUT & TEXTAREA */

.inputControlWrapper
{
  padding-right: 9px;  
  padding-left: 1px;
}

.textareaControlWrapper
{
  padding-right: 9px;    
  padding-left: 1px;
}
textarea,
input[type=text],
input[type=password]
{
  font : 11px/16px Arial,Verdana,sans-serif;
  padding: 0px;
  margin: 0px;
  color: #2c2a29;
  outline: 0;  
  padding-top: 3px;
  min-height: 16px;
  padding-bottom: 3px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px #B9B9B9 solid;
  border-radius: 5px;
  -moz-box-shadow: inset 0 0 10px #dadbd9;
  -webkit-box-shadow: inset 0 0 10px #dadbd9;
  box-shadow: inset 0 0 10px #dadbd9;
  padding-left: 3px;
  padding-right: 3px;
}

input:focus[type=text],
input:focus[type=password],
textarea:focus {
  -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  border-color: #B9B9B9;
}

input:hover[type=text],
input:hover[type=password],
textarea:hover {
  -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  border-color: #B9B9B9;
}

input[readonly],
textarea[readonly]
 {
  -moz-box-shadow: inset 0 0 10px #F2F2F2;
  -webkit-box-shadow: inset 0 0 10px #F2F2F2;
  box-shadow: inset 0 0 10px #F2F2F2;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: #2c2a29;  
  background-color: #F2F2F2;
  cursor: default !important;  
  opacity: 0.8;
  
}
/* SPRITES */

/* Select */
  
div.selector {
  background-position: -1993px -131px;
  line-height: 26px;
  height: 25px;
  background-color: Transparent; /* [IE8 Fix DT#15584] */
}

div.selector span {
  background-position: right -1px;
  height: 26px;
  line-height: 26px;
  left: -3px;
}

div.selector select {
  /* change these to adjust positioning of select element */
  top: 0px;
  left: 0px;
}

div.selector:active, 
div.selector.active {
  background-position: -1993px -157px;
}

div.selector:active span, 
div.selector.active span {
  background-position: right -27px;
}

div.selector.focus, div.selector.hover, div.selector:hover {
  background-position: -1993px -183px;
}

div.selector.focus span, div.selector.hover span, div.selector:hover span {
  background-position: right -53px;
}

div.selector.focus:active,
div.selector.focus.active,
div.selector:hover:active,
div.selector.active:hover {
  background-position: -1993px -209px;
}

div.selector.focus:active span,
div.selector:hover:active span,
div.selector.active:hover span,
div.selector.focus.active span {
  background-position: right -79px;
}

div.selector.disabled {
  background-position: -1993px -235px;
}

div.selector.disabled span {
  background-position: right -105px;
}

/* Checkbox */

div.checker {
  width: 19px;
  height: 19px;
}

div.checker input {
  width: 19px;
  height: 19px;
}

div.checker span {
  background-position: 0px -260px;
  height: 19px;
  width: 19px;
}

div.checker:active span, 
div.checker.active span {
  background-position: -19px -260px;
}

div.checker.focus span,
div.checker:hover span {
  background-position: -38px -260px;
}

div.checker.focus:active span,
div.checker:active:hover span,
div.checker.active:hover span,
div.checker.focus.active span {
  background-position: -57px -260px;
}

div.checker span.checked {
  background-position: -76px -260px;
}

div.checker:active span.checked, 
div.checker.active span.checked {
  background-position: -95px -260px;
}

div.checker.focus span.checked,
div.checker:hover span.checked {
  background-position: -114px -260px;
}

div.checker.focus:active span.checked,
div.checker:hover:active span.checked,
div.checker.active:hover span.checked,
div.checker.active.focus span.checked {
  background-position: -133px -260px;
}

div.checker.disabled span,
div.checker.disabled:active span,
div.checker.disabled.active span {
  background-position: -152px -260px;
}

div.checker.disabled span.checked,
div.checker.disabled:active span.checked,
div.checker.disabled.active span.checked {
  background-position: -171px -260px;
}

/* Radio */

div.radio {
  width: 18px;
  height: 18px;
}

div.radio input {
  width: 18px;
  height: 18px;
}

div.radio span {
  height: 18px;
  width: 18px;
  background-position: 0px -279px;
}

div.radio:active span, 
div.radio.active span {
  background-position: -18px -279px;
}

div.radio.focus span, 
div.radio:hover span {
  background-position: -36px -279px;
}

div.radio.focus:active span,
div.radio:active:hover span,
div.radio.active:hover span,
div.radio.active.focus span {
  background-position: -54px -279px;
}

div.radio span.checked {
  background-position: -72px -279px;
}

div.radio:active span.checked,
div.radio.active span.checked {
  background-position: -90px -279px;
}

div.radio.focus span.checked, div.radio:hover span.checked {
  background-position: -108px -279px;
}

div.radio.focus:active span.checked, 
div.radio:hover:active span.checked,
div.radio.focus.active span.checked,
div.radio.active:hover span.checked {
  background-position: -126px -279px;
}

div.radio.disabled span,
div.radio.disabled:active span,
div.radio.disabled.active span {
  background-position: -144px -279px;
}

div.radio.disabled span.checked,
div.radio.disabled:active span.checked,
div.radio.disabled.active span.checked {
  background-position: -162px -279px;
}

/* Uploader */

div.uploader {
  background-position: 0px -297px;
  height: 28px;
}

/* DT#15501 IE8*/
div.uploader > input 
{
 padding-top: 5px;  
}

div.uploader span.action {
  background-position: right -409px;
  height: 24px;
  line-height: 24px;
}

div.uploader span.filename {
  height: 24px;
  /* change this line to adjust positioning of filename area */
  margin: 2px 0px 2px -2px;
  line-height: 24px;
}

div.uploader.focus,
div.uploader.hover,
div.uploader:hover {
  background-position: 0px -353px;
}

div.uploader.focus span.action,
div.uploader.hover span.action,
div.uploader:hover span.action {
  background-position: right -437px;
}

div.uploader.active span.action,
div.uploader:active span.action {
  background-position: right -465px;
}

div.uploader.focus.active span.action,
div.uploader:focus.active span.action,
div.uploader.focus:active span.action,
div.uploader:focus:active span.action {
  background-position: right -493px;
}

div.uploader.disabled {
  background-position: 0px -325px;
}

div.uploader.disabled span.action {
  background-position: right -381px;
}

div.button {
  background-position: 0px -523px;
}

div.button span {
  background-position: right -643px;
}

div.button.focus,
div.button:focus,
div.button:hover,
div.button.hover {
  background-position: 0px -553px;
}

div.button.focus span,
div.button:focus span,
div.button:hover span,
div.button.hover span {
  background-position: right -673px; 
}

div.button.active,
div.button:active {
  background-position: 0px -583px;
}

div.button.active span,
div.button:active span {
  background-position: right -703px;
  color: #555;
}

div.button.disabled,
div.button:disabled {
  background-position: 0px -613px;
}

div.button.disabled span,
div.button:disabled span {
  background-position: right -733px;
  color: #bbb;
  cursor: default;
}

/* PRESENTATION */

/* Button */

div.button {
  height: 30px;
}

div.button span {
  margin-left: 13px;
  height: 22px;
  padding-top: 8px;
  font-weight: bold;
  font : 11px/16px Arial,Verdana,sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-left: 2px;
  padding-right: 15px;
}

/* Select */
div.selector {
  width: 100%;
  font-size: 11px;
}

div.selector select {
  width: 100%;
  font : 11px/16px Arial,Verdana,sans-serif;
  border: solid 1px #fff;
  padding-right: 10px;  /* DT#15813 Firefox 6 Bug */
}

div.selector span {
  padding: 0px;
  cursor: pointer;
  text-align: left;
  color: #666;
  width: 100%;
  text-shadow: 0 1px 0 #fff;  
}

div.selector.disabled span {
  color: #bbb;
}

/* Checker */
div.checker {
  margin-right: 5px;
}

/* Radio */
div.radio {
  margin-right: 3px;
}

/* Uploader */
div.uploader {
  width: 500px;
  cursor: pointer;
}

div.uploader span.action {
  width: 85px;
  text-align: center;
  text-shadow: #fff 0px 1px 0px;
  background-color: #fff;
  font-size: 11px;
  font-weight: bold;
}

div.uploader span.filename {
  color: #777;
  width: 396px;
  border-right: solid 1px #bbb;
  font-size: 11px;
}

div.uploader input {
  width: 290px;
}

div.uploader.disabled span.action {
  color: #aaa;
}

div.uploader.disabled span.filename {
  border-color: #ddd;
  color: #aaa;
}
/*

CORE FUNCTIONALITY 

Not advised to edit stuff below this line
-----------------------------------------------------
*/

.selector, 
.checker, 
.button, 
.radio, 
.uploader {
  display: -moz-inline-box;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}

.selector select:focus, .radio input:focus, .checker input:focus, .uploader input:focus {
  outline: 0;
}

/* Button */

div.button a,
div.button button,
div.button input {
  position: absolute;
}

div.button {
  cursor: pointer;
  position: relative;
}

div.button span {
  display: -moz-inline-box;
  display: inline-block;
  line-height: 1;
  text-align: center;
}

/* Select */

div.selector {
  position: relative;
  padding-left: 6px;
  overflow: hidden;
}

div.selector span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div.selector select {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity:0);
  height: 25px;
  border: none;
  background: none;
}

/* Checker */

div.checker {
  position: relative;
}

div.checker span {
  display: -moz-inline-box;
  display: inline-block;
  text-align: center;
}

div.checker input {
  opacity: 0;
  filter: alpha(opacity:0);
  display: inline-block;
  background: none;
}

/* Radio */

div.radio {
  position: relative;
}

div.radio span {
  display: -moz-inline-box;
  display: inline-block;
  text-align: center;
}

div.radio input {
  opacity: 0;
  filter: alpha(opacity:0);
  text-align: center;
  display: inline-block;
  background: none;
}

/* Uploader */

div.uploader {
  position: relative;
  overflow: hidden;
  cursor: default;
}

div.uploader span.action {
  float: left;
  display: inline;
  padding: 2px 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

div.uploader span.filename {
  padding: 0px 10px;
  float: left;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

div.uploader input {
  opacity: 0;
  filter: alpha(opacity:0);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  float: right;
  height: 22px;
  border: none;
  cursor: pointer;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Apply (empty) class for some first child elements
::: to colorize the ellipsis dots of the parent,
::: since they use the color of the first child element in IE9
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.EllipsisColor {
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: FailedText, InactiveText and PassedText are for text parts
::: displayed inside the form area.
::: Here we just set the text color.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.FailedText
{
  color: red;
}
.InactiveText
{
  color: silver;
}
.PassedText
{
  color: green;
}

.FailedBackground
{
  background-color: #FFEEE8;
}
.PassedBackground
{
  background-color: #D4FFC6;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Nice looking fieldset (resolving IE problems)
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.FieldsetContainer
{
  border: 1px #c8c9c7 solid;
  box-shadow: inset 0 0 10px #dadbd9;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
}

.FieldsetLegend
{
  background-color: #ffffff;
  position: relative;
  top: -7px;
  left: 15px;
  display: inline-block;
  padding: 0px 4px 0px 4px;
  font-weight: 700;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: High Potential
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

.highPotentialImage
{
  background: url("../default/img/OrgChartSpriteMap.png") 3px -20px no-repeat;
  width: 20px;
  height: 20px;
}

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::: Cursor
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
.CursorNoAction
{
  cursor: default;
}
.CursorClickable
{
  cursor: pointer;
}
.CursorDraggable
{
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  cursor: url("../skins/default/img/grab.cur"), /* Internet Explorer  */
          url("../default/img/grab.cur"),       /* Other browsers     */
          default !important;
}
.CursorDragging
{
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  cursor: url("../skins/default/img/grabbing.cur"), /* Internet Explorer  */
          url("../default/img/grabbing.cur"),       /* Other browsers     */
          default !important;
}

.FieldsetContainer:hover 
{
  border: 1px #910048 solid !important;
}

.dxgvTitlePanel 
{
  color: #910048 !important;
}