/* This file contains the Master CSS Classes for the Alta Skin.
 * All UI Components should reference the classes in this file wherever possible - they should avoid creating their own styles.
 *
 * Contents:
 *    GENERIC STYLES: BODY, LINKS, HEADINGS
 *    BRANDING AREA
 *    GLOBAL LAYER
 *    PRIMARY LAYER
 *    SECONDARY LAYER
 *    TERTIARY LAYER
 *    DIALOGS
 *    TABLES
 *    PIVOT/TABLES
 *    TOOLBARS, MENUBARS, BUTTONS
 *    OVERFLOW BUTTONS
 *    TABS
 *    TABBED TOOLBARS
 *    BORDERS
 *    BACKGROUNDS
 *    FORM FIELDS: TEXT INPUTS, TEXT AREAS, SELECTS, PROMPTS
 *    HORIZONTAL RULES
 *    ACCORDIONS
 *    TREES
 *    DATE-TIME PICKERS / CALENDARS
 *    COLOR PICKERS
 *    IMAGE PICKERS
 *    BREAD CRUMBS
 *    SHUTTLES
 *    TOOLTIPS
 *    DRAG-DROP
 *    MESSAGES
 *    TREEMAP
 *    SLIDERS
 */

/* GENERIC STYLES: BODY, LINKS, HEADINGS ======================================================== */
/* This class applies to all pages and is inherited by all elements on the page. */
body
{
   font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
   font-size: 12px;
   color: #000000;
   border: 0px none;
   margin: 0px;
   padding: 0px;
}

/* This class applies to the body element for Japanese language pages.
(We use it to workaround an "unstable layout" bug in IE8 that occurs when rendering Japanese text in 11px font.)
*/
html[lang=ja] > body
{
   font-size: 11.1px;
}

/* This class applies to hypertext links. */
a:link
{
   color: #145c9e;
   text-decoration: none;
}

/* This class applies to visited hypertext links. */
a:visited
{
   color: #72007C;
   text-decoration: none;
}

/* This class applies to hypertext links when the mouse is hovering over them. */
a:hover
{
   color: #145c9e;
   text-decoration: underline;
}

/* This class applies to hypertext links while they are being clicked on. */
a:active
{
   color: #145c9e;
   text-decoration: underline;
}

/* This class applies to the largest heading used in the UI. */
.masterH1
{
   font-size: 16px;
   font-weight: bold;
}

/* This class applies to the second largest heading used in the UI. */
.masterH2
{
   font-size: 14px;
   font-weight: bold;
}

/* This class applies to the third largest heading used in the UI. */
.masterH3
{
   font-size: 12px;
   font-weight: bold;
}

.masterHeader
{
   font-size: 14px;
   font-weight: bold;
   color: #252525;
   text-align: left;
}

/* BRANDING AREA ================================================================================ */
/* This class applies to the branding area shown at the top of most pages. */
.masterBrandingArea
{
   width: 100%; 
   /* 
   background-color: #f5f5f5;
   box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
    */
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 2px;
   margin-bottom: 2px;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   min-height:43px;
}

/* This class applies to the brand name text shown at the top of most pages. */
.masterBrandingAreaBrandName
{
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 16px;
   font-weight: 400; 
   padding-left: 5px;
   padding-right: 30px; 
   vertical-align: middle;
   -webkit-font-smoothing: antialiased;
}

.masterBrandingAreaBrandName_bidi
{
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 16pt;
   font-weight: 300; 
   padding-left: 30px;
   padding-right: 8px; 
   vertical-align: middle;
}

/* This class applies to hypertext links. */
a.masterBrandingArea:link
{
   color: #FFFFFF;
}

/* This class applies to visited hypertext links. */
a.masterBrandingArea:visited
{
   color: #FFFFFF;
}

/* This class applies to hypertext links while they are being clicked on. */
a.masterBrandingArea:active
{
   color: #CD82D3;
}

/* GLOBAL LAYER ================================================================================= */
/* This class applies to the global layer. */
.masterGlobalLayer
{
   padding: 10px 20px 10px 20px;
   background-repeat: repeat;
   background-position: top left;
   color : #F7F8F9;
   border: 1px solid transparent;
   border-radius : 0px;
   text-decoration:none;
}

/* This class applies to hypertext links. */
a.masterGlobalLayer:link
{
   /* color: #C3EAF3; */
}

/* This class applies to visited hypertext links. */
a.masterGlobalLayer:visited
{
   /* color: #C3EAF3; */
}

/* This class applies to hypertext links while they are being clicked on. */
a.masterGlobalLayer:active
{
   /* color: #CD82D3; */
}

/* PRIMARY LAYER ================================================================================ */
/* This class applies to the primary layer. */
.masterPrimaryLayer
{
   /*padding: 10px;*/
   background-color: transparent;
   border-radius: 3px;
   color: #000000;
}

/* SECONDARY LAYER ============================================================================== */
/* This class applies to the secondary layer. */
.masterSecondaryLayer
{
   padding: 10px;
   background-color: #ffffff;
   border: 1px solid #cfd8e3;
   border-top-color: #BCC7D2;
}

/* TERTIARY LAYER =============================================================================== */
/* This class applies to the tertiary layer. */
.masterTertiaryLayer
{
   padding: 10px;
   background-color: #ffffff;
   border: 1px solid #cfd8e3;
   border-top-color: #BCC7D2;
   color: black;
}

/* This class applies to tertiary-level content containers. */
.masterTertiaryContainer
{
   border: 1px solid #D6DFE6;
   border-radius: 3px;
   box-shadow: 2px 2px 2px rgba(0,0,0,0.175);
   filter: progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d2',direction='145',strength='3'); /* IE8 */   
   padding: 10px;
   background-color: #ffffff;
}

/* DIALOGS ====================================================================================== */
/* This class applies to dialog. */
.masterDialog
{
   border: 1px solid  #c4ced7;
   border-radius: 1px;
   background: #f9f9f9;
   box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, .45);
   filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc',direction='145',strength='7'); /* IE8 */
}

/* This class applies to dialog body. */
.masterDialogBody
{
   padding: 10px 10px 10px 10px !important;
}

/* This class applies to dialog footer. */
.masterDialogFooter
{
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
   text-align: right;
}

/* TABLES ======================================================================================= */
/* This class applies to tables. */
.masterTable
{
   border-collapse: collapse;
}

/* This class applies to enabled column headings. */
table.masterTable > thead > tr > th, table.masterTable > tbody > tr > td.masterColumnHeading, th.masterColumnHeading
{
   border: 1px solid #D6DFE6;
   background-color: #F2F4F7;
   text-align: left;
   font-size: 13px;
   font-weight: bold;
   padding: 5px;
   line-height: 20px;
   vertical-align: middle;
}

/* This class applies to row headings. */
table.masterTable > tbody > tr > th, table.masterTable > tbody > tr > td.masterRowHeading
{
   border: 1px solid #D6DFE6;
   background-color: #F8F9FC;
   font-size: 12px;
   font-weight: bold;
   padding: 5px;
   vertical-align: middle;
}

/* This class applies to body cells. */
table.masterTable > tbody > tr > td
{
   border: 1px solid #EEEEEE;
   background-color: #FFFFFF;
   color: #333333;
   font-size: 12px;
   font-weight: normal;
   padding: 5px;
   vertical-align: middle;
}

/* This class applies to selected heading cells. */
table.masterTable > * > tr.masterTableSelected > th, table.masterTable > * > tr > th.masterTableSelected
{
   background-color: #b9dfff;
}

/* This class applies to selected body cells. */
table.masterTable > * > tr.masterTableSelected > td, table.masterTable > * > tr > td.masterTableSelected, table > * > tr.masterTableSelected > td
{
   background-color: #cfe8fc;
}

/* This class applies to heading cells when the mouse is hovering over them. */
th.masterTableHover
{
   background-color: #d6d7d8;
}

/* This class applies to body cells when the mouse is hovering over them. */
td.masterTableHover, table.masterTable > tbody > tr > td.masterTableHover
{
   background-color: #ebeced;
}

/* This class applies to the toolbar region immediately above tables. */
.masterTableToolbar
{
   border-top: 1px solid #d6dfe6;
   background-color: transparent;
}

/* PIVOT/TABLES =============================================================================== */

/* Header, HeaderTotal, DataCellTotal, HeaderTotalsAtBottom, TotalDataCellTotalsAtBottom, */
.mPTHC, .mPTHT, .mPTDT, .mPTHCT, .mPTDTT
{
   background-color: #F2F4F7;
   border-top: 1px solid #D6DFE6;
   border-left: 1px solid #D6DFE6;
}

/* RowHeader */
.mPTRowHdr
{
   background-color: #F7F9FC;
   border-left: 1px solid #D6DFE6;
   border-right: 1px solid #D6DFE6;
   border-bottom: 1px solid #D6DFE6;
   /*margin-top: 1px;*/
}

/* This class applies to alternate pivot/table header cell backgrounds.
 * It is only applied to pivots/tables that have the Alternate Styling property enabled.
 */
.masterTableHeaderCellBackgroundEven, .mTHCBE
{
   background-color: #E7F2E6;
}

/* This class applies to pivot/table top header cell borders. */
.masterTableHeaderCellBorderTop, .mTHCBT,
/* ColumnHeader */
.mPTColHdr
{
   background-color: #F0F4FA;
   border-right: 1px solid #D6DFE6;
   border-bottom: 1px solid #D6DFE6;
   border-top: 1px solid #D6DFE6;
}

/* DataCell */
.mPTDC
{
   background-color: #FFFFFF;
   border-top: 1px solid #EEEEEE;
   border-left: 1px solid #EEEEEE;
   color:#333333;
}

/* DataCellTotalsAtBottom */
.mPTDCT
{
   background-color: #FFFFFF;
   border-top: 1px solid #EEEEEE;
   border-right: 1px solid #EEEEEE;
}

/* HierEmptyEdgeCell */
.mPTHCEC
{
   background-color: #F2F4F7;
   border-top: 1px solid #D6DFE6;
}

/* Corner */
.mPTCorner
{
   border-right: 1px solid #D6DFE6;
   border-bottom: 1px solid #D6DFE6;
   /*margin-top: 1px;*/
}

/* BorderLeft, FirstColumn */
.mPTBL, .mPTFC
{
   border-left: 1px solid #D6DFE6;
}

/* BorderTop */
.mPTBT
{
   border-top: 1px solid #D6DFE6;
}

/* This class applies to alternate pivot/table data cell backgrounds.
 * It is only applied to pivots/tables that have the Alternate Styling property enabled.
 */
.masterTableDataCellBackgroundEven, .mTDCBE
{
   background-color: #E7F2E6;
}

/* This class applies to pivot/table top data cell borders. */
.masterTableDataCellBorderTop, .mTDCBT,
/* LastColumn */
.mPTLC
{
   border-right: 1px solid #D6DFE6;
}

/* LastRow */
.mPTLR
{
   border-bottom: 1px solid #D6DFE6;
}

/*Heatmatrix View: DataCell*/
.mHMDC
{
   background-color: #FFFFFF;
   border-left: solid 1px #edeff3;
   border-top: solid 1px #edeff3;
}

/* TOOLBARS, MENUBARS, BUTTONS ================================================================ */
/* This class applies to toolbars. */
.masterToolbar
{
   background-color: transparent;
   border: 0px none;
}

/* This class applies to text buttons. */
button, input[type=submit], input[type=button], .masterToolbarTextButton, .masterToolbarTextButton:visited, .masterToolbarTextButton:link
{
   font: inherit;
   font-weight: bold; 
   color: #000000;
   text-align: center; 
   text-shadow: 0px 1px 0px #FFFFFF;
   padding: 6px 5px 5px 5px;
   background-color: #e4e8ea;
   background: -webkit-linear-gradient(top, #FFFFFF 0%, #F1F3F4 3.64%, #E8EBED 50%, #E4E8EA 100%); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
   background:    -moz-linear-gradient(top, #FFFFFF 0%, #F1F3F4 3.64%, #E8EBED 50%, #E4E8EA 100%); /* For Firefox (3.6 to 15) */
   background:      -o-linear-gradient(top, #FFFFFF 0%, #F1F3F4 3.64%, #E8EBED 50%, #E4E8EA 100%); /* For old Opera (11.1 to 12.0) */ 
   background:        linear-gradient (to bottom, #FFFFFF 0%, #F1F3F4 3.64%, #E8EBED 50%, #E4E8EA 100%);/* Standard syntax; must be last */
   border: 1px solid #c4ced7;
   border-radius: 2px;
   vertical-align: baseline;
   display: inline-block;
   cursor: default;
}

/* This class applies to links within text buttons. */
.masterToolbarTextButton a, .masterToolbarTextButton a:visited, .masterToolbarTextButton a:hover
{
   color: #333333;
   text-decoration: none !important;
   cursor: default;
   padding: 2px 9px 1px 9px;
}

/* This class applies to imgs within text buttons, specially for dropdown icon */
.masterToolbarTextButton img
{
   vertical-align: middle;
   margin-top: -3px;
}

/* This class applies to disabled text buttons. */
.masterToolbarTextButtonDisabled, button.masterToolbarTextButtonDisabled, button.masterToolbarTextButtonDisabled:link, button.masterToolbarTextButtonDisabled:visited, button.masterToolbarTextButtonDisabled:active
{
   border: 1px solid transparent;
   border-radius: 2px;
}

/* This class applies to links within disabled text buttons. */
.masterToolbarTextButtonDisabled a, .masterToolbarTextButtonDisabled a:visited, .masterToolbarTextButtonDisabled a:hover
{
   color: #6e7587;
   text-decoration: none;
   cursor: default;
}

/* This class applies to enabled icon buttons. */
.masterToolbarIconButtonEnabled, .masterToolbarButton
{
   border: 1px solid transparent;
   border-radius: 3px;
   color: #333333;
   padding: 4px 5px 1px 5px;
   vertical-align: middle;
}

/* This class applies to disabled icon buttons. */
.masterToolbarIconButtonDisabled
{
   color: #6e7587;
}

/* This class applies to text/icon buttons when the mouse is hovering over them. */
button:hover, input[type=submit]:hover, input[type=button]:hover, .masterToolbarTextButton:hover, .masterMenuButton:hover, .toolbarButtonSpanHover
{
   color: #0572ce;
   background: #f7f8f9;
   border: 1px solid #c4ced7;
   border-radius: 2px;
}

 .masterToolbarIconButtonEnabled:hover, .masterToolbarButtonHover
 {
 }

/* This class applies to text/icon buttons when they are depressed. */
button:active, input[type=submit]:active, input[type=button]:active, .masterToolbarTextButton:active, .masterMenuButton:active
{
   color: #FFFFFF;
   background: #0572ce;
   border: 1px solid transparent;
   border-radius: 2px;
}

.masterToolbarIconButtonEnabled:active, .masterToolbarButtonDown, .masterToolbarButtonDown:hover
{
}

/* This class applies to disabled text/icon buttons when they are depressed. */
.masterToolbarButtonDisabledHover, .masterToolbarButtonDisabledDown, .masterToolbarTextButtonDisabled:hover, .masterToolbarTextButtonDisabled:active
{
   border-color: #d5d5d5;
   color: #6e7587;
   background: -moz-linear-gradient(#f4f4f4, #e5e5e5); /* FF 3.6+ */
   background: -webkit-linear-gradient(#f4f4f4, #e5e5e5); /* Safari 5.1+, Chrome 10+ */
   background: -o-linear-gradient(#f4f4f4, #e5e5e5); /* Opera 11.10 */
   filter: progid:DXImageTransform.Microsoft.DropShadow(Color='black', OffX=0, OffY=0) progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#e5e5e5'); /* IE8+ */
   background: linear-gradient(#f4f4f4, #e5e5e5); /* CSS3 */
}

/* This class applies to the separator placed between groups of buttons on the toolbars. */
.masterToolbarSeparator
{
   padding-top: 0px;
   padding-right: 6px; 
   padding-bottom: 0px;
   padding-left: 6px;
   height: 22px;
   width: 1px;
   background-image: url("toolbarseparator.png");
   background-repeat: repeat-y;
   background-position: center center;
   line-height: 0px;
   vertical-align: middle;   
}

/* This class applies to enabled \-down buttons. */
.masterDropDownButtonEnabled
{
   background-image: url('dropdown_ena.png');
   background-repeat: no-repeat;
   background-position: center center;
   vertical-align: middle;
   cursor: default;
   padding: 0px 4px 0px 4px;
   width: 14px;
   height: 14px;
   display: inline-block;
}

/* This class applies to disabled drop-down buttons. */
.masterDropDownButtonDisabled
{
   background-image: url('dropdown_dis.png');
   background-repeat: no-repeat;
   background-position: center center;
   vertical-align: middle;
   cursor: default;
   padding: 0px 4px 0px 4px;
   width: 14px;
   height: 14px;
   display: inline-block;
}

/* This class applies to enabled drop-down buttons when the mouse is hovering over them. */
.masterDropDownButtonHover
{
   background-image: url('dropdown_ovr.png');
   background-repeat: no-repeat;
   background-position: center center;
   vertical-align: middle;
   cursor: default;
   padding: 0px 4px 0px 4px;
   width: 14px;
   height: 14px;
   display: inline-block;
}

/* This class applies to enabled drop-down buttons when they are being pressed. */
.masterDropDownButtonDown
{
   background-image: url('dropdown_dwn.png');
   background-repeat: no-repeat;
   background-position: center center;
   vertical-align: middle;
   cursor: default;
   padding: 0px 4px 0px 4px;
   width: 14px;
   height: 14px;
   display: inline-block;
}

/* This class applies to drop-down menus. */
.masterMenu
{
   background-color: #ffffff;
   border: 1px solid #edf2f7;
   border-right: 0px;
   border-bottom: 0px;
   padding: 1px 0px 1px 0px;
   box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
   filter: progid:DXImageTransform.Microsoft.Shadow(Color='#D4D4D4', direction='145', strength='3' OffX=0, OffY=0) /* IE8 */
}

/* This class applies to menu buttons. */
.masterMenuButton
{
   border: 1px solid transparent;
   border-radius: 2px;
   color: #000000;
   margin: 2px 0px 0px 0px;
   padding: 2px 9px 1px 9px;
   vertical-align: baseline;
   display: inline-block;
   cursor: default;
}

/* This class applies to menu buttons in the global layer. */
.masterMenuButtonGlobal
{
   color: #F7F8F9;
}

.masterMenuButtonGlobal:hover {
	color : #027BC7;
	background-color:#F7F8F9;
}

/* This class applies to individual menu items in drop-down menus. */
.masterMenuItem
{
   vertical-align: middle;
   border-left: 0px;
   padding: 7px 0px 7px 7px;
   cursor: default;
   white-space: nowrap;
}

/* This class applies to disabled menu items in drop-down menus. */
.masterMenuItemDisabled
{
   color: #D4D6D7;
}

/* This class applies to menu items being hovered over or in focus in drop-down menus. */
.masterMenuItem:hover
{
   background-color: #ebeced;
}

/* This class applies when hovering the sub-menu arrow of menu items that also have a default action. */
.masterMenuItemActiveArrow:hover
{
    background-color: #D6D7D8;
}

/* This class applies to menu item separator. */
.masterMenuItemSeparator
{
   border-bottom: 1px solid #A0BBD9;
   margin: 1px 0px 1px 21px;
}

/* This class applies to menu item sub menus arrow indicator. */
.masterMenuItemSubMenuArrow
{
   border-left: 1px solid transparent;
}

.masterMenuItem:hover .masterMenuItemSubMenuArrow
{
   border-left: 1px solid #EEDDA8;
}

.masterMenuItemActiveArrow:hover .masterMenuItemSubMenuArrow
{
    background-color: #FFEEA8;
}

/* OVERFLOW BUTTONS ============================================================================= */
/* This class applies to the overflow button shown in toolbars and tab bars. */
.masterOverflowRightButton
{
   background-image: url('overflow_right_ena.png');
   background-repeat: no-repeat;
   background-position: center center;
}

/* This class applies to the overflow button shown in toolbars and tab bars when the mouse is hovering over them. */
.masterOverflowRightButtonHover
{
   background-image: url('overflow_right_ovr.png');
}

/* This class applies to the overflow button shown in toolbars and tab bars when they are depressed. */
.masterOverflowRightButtonDown
{
   background-image: url('overflow_right_dwn.png');
}

/* This class applies to the overflow button shown in toolbars and tab bars. */
.masterOverflowLeftButton
{
   background-image: url('overflow_left_ena.png');
   background-repeat: no-repeat;
   background-position: center center;
}

/* This class applies to the overflow button shown in toolbars and tab bars when the mouse is hovering over them. */
.masterOverflowLeftButtonHover
{
   background-image: url('overflow_left_ovr.png');
}

/* This class applies to the overflow button shown in toolbars and tab bars when they are depressed. */
.masterOverflowLeftButtonDown
{
   background-image: url('overflow_left_dwn.png');
}

/* TABS ========================================================================================= */
/* This class applies to Primary Level Selected Tabs. */
.masterTabBarTabPrimarySelected
{
   background-color: #edf2f7;
   border: 1px solid #E2E8EE;
   border-top: 1px solid #f7f7f8;
   border-bottom: 0px none;
   border-radius: 3px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
   margin-right: 3px;
   padding: 10px 8px 7px 8px;
   color: #145c9e;
   vertical-align: baseline;
   white-space: nowrap;
}

/* This class applies to Primary Level Enabled Tabs. */
.masterTabBarTabPrimaryEnabled
{
   background-color: #c3d0df;
   border: 1px solid #cfd8e3;
   border-bottom: 0px none;
   border-radius: 3px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
   color: #145c9e;
   margin-right: 3px;
   padding: 10px 8px 7px 8px;
   vertical-align: baseline;
   white-space: nowrap;
   cursor: pointer;
}

/* This class applies to Primary Level Enabled Tabs when the mouse is hovering over them. */
.masterTabBarTabPrimaryEnabled:hover
{
   text-decoration: none;
   color: #145c9e;
}

/* This class applies to Primary Level Disabled Tabs. */
.masterTabBarTabPrimaryDisabled
{
   background-color: #95b6d4;
   border: 1px solid #A0BBD9;
   border-bottom: 0px none;
   border-radius: 3px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
   margin-right: 3px;
   padding: 10px 8px 7px 8px;
   vertical-align: baseline;
   white-space: nowrap;
}

/* This class applies to Secondary Level Selected Tabs. */
.masterTabBarTabSecondarySelected
{
   font-weight: bold;
   color: #145c9e;
   border-top:3px solid #0572CE; 
   border-right:1px solid #c4ced7;
   border-left:1px solid #c4ced7;
   background-color: #FFFFFF;
   padding: 10px 8px 7px 8px;
   vertical-align: baseline;
   white-space: nowrap;
}

/* This class applies to Secondary Level Enabled Tabs. */
.masterTabBarTabSecondaryEnabled
{
   color: #145c9e;
   border-top: 3px solid transparent;
   padding: 10px 8px 7px 8px;
   font-weight: normal;
   vertical-align: baseline;
   white-space: nowrap;
   cursor: pointer;
}

/* This class applies to Secondary Level Enabled Tabs when the mouse is hovering over them. */
.masterTabBarTabSecondaryEnabled:hover
{
   text-decoration: underscore;
   color: #145c9e;
}

/* This class applies to Secondary Level Disabled Tabs. */
.masterTabBarTabSecondaryDisabled
{
   padding: 10px 8px 7px 8px;
   font-weight: normal;
   vertical-align: baseline;
   white-space: nowrap;
   vertical-align: middle;
   border-top: 3px solid transparent;
}

/* This class applies to Tertiary Level Selected Tabs. */
.masterTabBarTabTertiarySelected
{
   font-weight: bold;
   color: #145c9e;
   border-top:3px solid #0572CE; 
   border-right:1px solid #c4ced7;
   border-left:1px solid #c4ced7;
   border-bottom: 0 none;
   background-color: #FFFFFF;
   padding: 10px 8px 7px 8px;
   vertical-align: baseline;
   white-space: nowrap;
}

/* This class applies to Tertiary Level Enabled Tabs. */
.masterTabBarTabTertiaryEnabled
{
   color: #145c9e;
   border-top: 3px solid transparent;
   padding: 10px 8px 7px 8px;
   font-weight: normal;
   vertical-align: baseline;
   white-space: nowrap;
   cursor: pointer;
}

/* This class applies to Tertiary Level Enabled Tabs when the mouse is hovering over them. */
.masterTabBarTabTertiaryEnabled:hover
{
   text-decoration: underscore;
   color: #145c9e;
}

/* This class applies to Tertiary Level Disabled Tabs. */
.masterTabBarTabTertiaryDisabled
{
   padding: 10px 8px 7px 8px;
   font-weight: normal;
   vertical-align: baseline;
   white-space: nowrap;
   border-top: 3px solid transparent;
}

/* This class applies to Quaternary Level Selected Tabs. */
.masterTabBarTabQuaternarySelected
{
   background-color: #ffffff;
   margin-right: 3px;
   padding: 10px 8px 7px 8px;
   vertical-align: baseline;
   white-space: nowrap;
   color: #003286;
}

/* This class applies to Quaternary Level Enabled Tabs. */
.masterTabBarTabQuaternaryEnabled
{
   font-weight: bold;
   color: #145c9e;
   margin-right: 3px;
   padding: 10px 8px 7px 8px;
   font-weight: normal;
   vertical-align: baseline;
   white-space: nowrap;
   cursor: pointer;
}

/* This class applies to Quaternary Level Enabled Tabs when the mouse is hovering over them. */
.masterTabBarTabQuaternaryEnabled:hover
{
   padding: 10px 8px 7px 8px;
   font-weight: normal;
   vertical-align: baseline;
   white-space: nowrap;
   text-decoration: underscore;
   color: #145c9e;
}

/* This class applies to Quaternary Level Disabled Tabs. */
.masterTabBarTabQuaternaryDisabled
{
   padding: 10px 8px 7px 8px;
   font-weight: normal;
   vertical-align: baseline;
   white-space: nowrap;
}

/* This class is used to remove the bottom border from selected tabs.
   As the bottom border of the tab is really the top border of the layer nested within the tab body, this works by sitting in front of the border (masking it) rather than removing it.
*/
.masterTabBarTabBottomBorderBlocker
{
   position:absolute;
   border-bottom:3px solid #ffffff;
   margin-left:1px;
}

/* TABBED TOOLBARS ============================================================================== */
/* This class applies to tabbed toolbar enabled tab. */
.masterTabbedToolbarTabEnabled 
{   
   background-color: #c3d0df;
   color: #4f4f4f;
   text-align: center;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   border-left: 1px solid #c3d0df;
   border-right: 1px solid #c3d0df;
   border-top: 1px solid #c3d0df; 
}

/* This class applies to tabbed toolbar selected tab. */
.masterTabbedToolbarTabSelected 
{   
   background-color: #ffffff;
   color: #000000;
   font-weight: bold;
   border-left: 1px solid #cfd8e3;
   border-right: 1px solid #cfd8e3;
   border-top: 1px solid #bcc7d2;
}

/* This class applies to tabbed toolbar hovered tab. */
.masterTabbedToolbarTabEnabled:hover
{
	 color: #003286;
}

/* This class applies to tabbed toolbar group content area. */
.masterTabbedToolbarGroup 
{
   background-color: #ffffff;
   color: #000000;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   border-left: 1px solid #cfd8e3;
   border-right: 1px solid #cfd8e3;
   border-top: 1px solid #bcc7d2;
   border-bottom: solid 1px #cfd8e3;
}

/* This class applies to tabbed toolbar group header. */
.masterTabbedToolbarGroupHeader
{
  border-bottom: solid 1px #e5ebf0;
}

/* This class applies to tabbed toolbar separator. */
.masterTabbedToolbarSeparator 
{
   height: 81px;
   width: 2px;
   background-image: url("toolbarseparator.png");
   background-repeat: repeat-y;
}

/* BORDERS ====================================================================================== */
/* This class applies to borders. */
.masterBorder
{
   border: 1px solid lightgray;
}

/* This class applies to top borders. */
.masterBorderTop
{
   border-top: 1px solid lightgray;
}

/* This class applies to right borders. */
.masterBorderRight
{
   border-right: 1px solid lightgray;
}

/* This class applies to bottom borders. */
.masterBorderBottom
{
   border-bottom: 1px solid lightgray;
}

/* This class applies to left borders. */
.masterBorderLeft
{
   border-left: 1px solid lightgray;
}

/* BACKGROUNDS ================================================================================== */
/* This class applies to backgrounds. */
.masterBackground
{
   background-color: #ffffff;
}

/* This class applies to hovered elements' background. */
.masterBackgroundHover
{
   background-color: #ebeced;
}

/* This class applies to active/down elements' background. */
.masterBackgroundActive
{
   background-color: #bfd4e5;
}

/* FORM FIELDS: TEXT INPUTS, TEXT AREAS, SELECTS, PROMPTS ====================================== */
/* This class applies to text inputs, text areas, and selects. */
input[type=text], input[type=password], textarea, .masterTextArea
{
   font: inherit;
   color: #333333;
   text-align: left;
   border: 1px solid #dfe4e7;
   border-radius: 2px;
   padding: 6px 5px 5px 5px;
   vertical-align: baseline;
   background-color: #fcfdfe;
}

/* This class provides additional styles for selects. */
select 
{
   background-image: url('selectdropdown_ena.png');
   background-repeat: no-repeat;
   background-position: right;
   appearance: none;
   -moz-appearance: none;
   text-indent: 0.01px;
   text-overflow: "";
   -moz-padding-end: 17px;
   -webkit-appearance: none;
   -webkit-padding-end: 15px;
   -webkit-background-size: inherit;
   background-color: #fcfdfe;
   border: 1px solid #dfe4e7;
   height: 28px;
}

/* This class provides additional styles for single selects. */
select[size="1"]
{
   background-image: url('selectdropdown_ena.png');
   background-repeat: no-repeat;
   background-position: right;
   appearance: none;
   -moz-appearance: none;
   text-indent: 0.01px;
   text-overflow: "";
   -moz-padding-end: 17px;
   -webkit-appearance: none;
   -webkit-padding-end: 15px;
   -webkit-background-size: inherit;
   background-color: #fcfdfe;
   border: 1px solid #dfe4e7;
   /*padding: 5px 15px 4px 5px;*/
   height: 28px;
}

/* Work around for remove native dropdown for IE > 10 */
select::-ms-expand
{
    display: none;
}

/* The native dropdown is hided by above style, add padding here to move new dropdown icon over native one for IE > 10 */
_:-ms-lang(x), select[size="1"], select:not([size]) {
   padding-right: 15px;
}

/* This class applies to custom drop-down menus (i.e. those not implemented using HTML Select elements). */
.masterCustomDropDown
{
   font: inherit;
   text-align: left;
   border: 1px solid #dee4e7;
   border-radius: 2px;
   background-color: #fcfdfe;
   display:inline-block;
}

/* This class applies to hovered text inputs, text areas, and selects. */
input[type=text]:hover, input[type=password]:hover, textarea:hover, select:hover, .masterCustomDropDown:hover
{

}

/* This class applies to text inputs, text areas, and selects on focus. */
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus, .masterCustomDropDown:focus
{
}

/* This class applies to read-only text inputs and text areas. */
input[type=text][readonly], textarea[readonly], .masterTextAreaReadOnly
{
   border: 0px none transparent;
}

/* This class applies to input inside the custom dropdown. Since the border is rendered by the container, no need border here */
.masterCustomDropDown > input[type=text]
{
   border: 0px solid transparent;
   margin: 0 auto;
}

.masterCustomChoiceList > input[type=text]
{
   /*padding: 0px 2px 1px 2px;*/
}

/* This class applies to disabled text inputs, text areas, and selects. */
input[type=text]:disabled, input[type=password]:disabled, textarea:disabled, select:disabled
{
   color: #9e9e9e;
   padding: 6px 5px 5px 5px;
   background-color: #efeff1;
   border: 1px solid #efeff1;
}

/* This class applies to hovered selects. */
select:hover
{
   /*background-color: #fafdff;*/
}

/* This class provides additional styles for hovered single selects. */
select[size="1"]:hover
{
   background-image: url('selectdropdown_ovr.png');
   background-repeat: no-repeat;
   background-position: right;
   background-size: 0px 0px;
   -webkit-background-size: inherit;
}

/* This class provides additional styles to selects on focus. */
select:focus
{
   /*background-color: #fafdff;*/
}

/* This class provides additional styles for single selects on focus. */
select[size="1"]:focus
{
   background-image: url('selectdropdown_dwn.png');
   background-repeat: no-repeat;
   background-position: right;
   background-size: 0px 0px;
   -webkit-background-size: inherit;
}

/* This class provides additional styles to disabled selects. */
select:disabled
{
   background-size: 0px 0px;
}

/* This class provides additional styles to disabled single selects. */
select[size="1"]:disabled, select[size="1"][disabled]
{
   background-image: url('selectdropdown_dis.png');
   background-repeat: no-repeat;
   background-position: right;
   -webkit-background-size: inherit;
   background-color: #fafdff;
}

/* This class applies to prompts. */
.masterPrompt
{
   color: #4f4f4f;
   font-weight: bold;
}

/* HORIZONTAL RULES ============================================================================ */
/* This class applies to horizontal rules. */
hr
{
   border: 0;
   color: #d6dfe6;
   background-color: #d6dfe6;
   height: 1px;
}

/* ACCORDIONS ================================================================================== */
/* This class applies to accordion headers. */
.masterAccordionHeader
{
   color: #252525;
   font-size: 14px;
   font-weight: bold;
   text-decoration: none;
   white-space: nowrap;
   background: -webkit-linear-gradient(bottom, #F5F5F5, #F0F0F0); /* Safari, Chrome */
   background: -moz-linear-gradient(bottom, #F5F5F5, #F0F0F0); /* Firefox */
   background: -o-linear-gradient(bottom, #F5F5F5, #F0F0F0); /* Opera */
   background: -ms-linear-gradient(bottom, #F5F5F5, #F0F0F0); /* IE11 */
   background: linear-gradient(bottom, #F5F5F5 0%, #F0F0F0 100%); /* Standard CSS3 */
   filter: progid:DXImageTransform.Microsoft.DropShadow(Color='black', OffX=0, OffY=0) progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6ecf3', endColorstr='#d7dfe8'); /* IE8+ */
   border-top: 1px solid #D9DFE3;
   border-left: 1px solid #D9DFE3;
   border-right: 1px solid #D9DFE3;
   border-bottom: 1px solid #D9DFE3;
   min-height: 22px;
}

/* This class applies to accordion top headers. */
.masterAccordionTopHeader
{
   border-top: 1px solid #D9DFE3;
   border-top-left-radius: 1px;
   border-top-right-radius: 1px;
}
/* This class applies to accordion content area panels. */
.masterAccordionContentAreaPanel
{
   background-color: #FFFFFF;
   border-left: 1px solid #D9DFE3;
   border-right: 1px solid #D9DFE3;
}

/* This class applies to accordion bottom content area panel. */
.masterAccordionBottomContentAreaPanel
{
   border-bottom: 1px solid #D9DFE3;
}

/* This class applies to accordion panel spliters. */
.masterAccordionPanelSplitter
{
   height: 0px;
}

/* TREES ======================================================================================= */
/* This class applies to tree lines. */
.masterTreeLine
{
   color: #145c9e;
   line-height: 25px;
}

/* This class applies to selected tree lines. */
.masterTreeLineSelected
{
   font-weight: bold;
   background-color: #BFD4E5;
   border: 1px solid #145c9e; 
}

/* This class applies to active tree lines. */
.masterTreeLineActive
{
   background-color: #BFD4E5;
   border: 1px solid #145c9e;
}

/* DATE-TIME PICKERS / CALENDARS =========================================================================== */
/* This class applies to date-time pickers. */
.masterDateTimePicker
{
   margin: 5px 0px 5px 0px;
}

/* This class applies to date-time picker month-year table. */
.masterDateTimePickerMonthYearTable
{
   margin-bottom: 9px;
}

/* This class applies to date-time picker month-year table's previous month. */
.masterDateTimePickerMonthYearTablePreviousMonth
{
   padding-right: 5px;
}

/* This class applies to date-time picker month-year table's next month. */
.masterDateTimePickerMonthYearTableNextMonth
{
   padding-left: 5px;
}

/* This class applies to date-time picker day names. */
.masterDateTimePickerDayName
{
   color: #000000;
   background-color: #f0f4fa;
   font-size: 9px;
   font-weight: normal;
   text-transform: uppercase;
   padding: 4px;
}

/* This class applies to date-time picker dates. */
.masterDateTimePickerDate, a.masterDateTimePickerDate
{
   color: #333333;
   font-size: 9px;
   font-weight: bold;
   padding: 3px 0px 3px 0px;
}

/* This class applies to date-time picker selected date. */
.masterDateTimePickerSelectedDate, a.masterDateTimePickerSelectedDate
{
   background-color: #e6ecf3;
}

/* This class applies to date-time picker adjacent month date. */
.masterDateTimePickerAdjacentMonthDate, a.masterDateTimePickerAdjacentMonthDate
{
   color: #596a94;
}

/* This class applies to date-time picker today's date. */
.masterDateTimePickerTodaysDate, a.masterDateTimePickerTodaysDate
{
   border: solid 1px #b3c6db;
}

/* This class applies to date-time picker time table. */
.masterDateTimePickerTimeTable
{
   margin-top: 10px;
}

/* COLOR PICKERS =============================================================================== */
/* This class applies to color picker swatch inner box. */
.masterColorPickerSwatchInner
{
   border: 1px solid #737373;
}

/* This class applies to color picker swatch outer box. */
.masterColorPickerSwatchOuter:hover
{
   border: 1px solid #B3C6DB;
}

/* This class applies to color picker custom color sample cell. */
.masterColorPickerCustomColorSampleCell
{
   border: solid 2px #bcc7d2;
}

/* This class applies to the selected color box next to a color picker form field. */
.masterColorPickerSelectedColorBox
{
   border: 1px solid #DFE4E7;
   padding: 6px;
   font-size:13px; /* Added to ensure the box is the right hight when implemented using a <span>. */
   width:18px;
}

/* IMAGE PICKERS =============================================================================== */
/* This clss applies to image picker group cells. */
.masterImagePickerImageGroupCell
{
   background-color: #edf2f7;
   border: solid 1px #dee4e7;
}

/* This class applies to image picker sub-group cells. */
.masterImagePickerImageSubGroupCell
{
   background-color: #ffffff;
   border: solid 1px #dee4e7;
   word-wrap: normal;
}

/* This clss applies to image picker image hover. */
.masterImagePickerImageHover
{
   border: solid 1px #B3C6DB;
}

/* This clss applies to image picker image down or selected. */
.masterImagePickerImageDown, .masterImagePickerImageSelected
{
   background-color: #C9DEF2;
}

/* BREAD CRUMBS ================================================================================ */
/* This class applies to bread crumb containing div. */
.masterBreadCrumbDiv
{
   border: none;
   background-color: transparent;
}

/* This class applies to bread crumb items. */
.masterBreadCrumbItem
{
   color: #145c9e !important;
}

/* This class applies to bread crumb edit items. */
.masterBreadCrumbEditItem
{
   color: #145c9e !important;
}

/* This class applies to bread crumb current items. */
.masterBreadCrumbCurrentItem
{
   color: #333333;
}

/* This class applies to bread crumb current edit items. */
.masterBreadCrumbCurrentEditItem
{
   color: #333333;
}

/* This class applies to bread crumb image id. */
.masterBreadCrumbImageTd
{
   color: #145c9e;
}

/* This class applies to bread crumb overflow. */
.masterBreadCrumbOverflow, .masterBreadCrumbOverflowDown, .masterBreadCrumbOverflowImageStart
{
   background-color: #transparent;
   padding: 0px;
}

/* SHUTTLES ==================================================================================== */
/* This class applies to shuttle select boxes. */
.masterShuttleSelect
{
   background-color: #bfd4e5;
}

/* This class applies to items in shuttle select boxes. */
.masterShuttleSelectItem
{
   color: #333333;
}

/* TOOLTIPS ==================================================================================== */
/* This class applies to tooltip text. */
.masterTooltipText
{
   color: #333333;
}

/* This class applies to tooltip container. */
.masterTooltipContainer
{
   background-color: #fff;
   opacity: 0.9;
   border: 2px solid #666766;
   border-radius: 0px;
   box-shadow: 2px 2px 2px black;
   filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='145',strength='3'); /* IE8 */
}

/* DRAG-DROP =================================================================================== */
/* This class applies to drag and drop. */
.masterDragDropTarget
{
   border: solid 1px #C3EAF3;
   background-color: #D9F4FA;  
}

/* MESSAGES ==================================================================================== */
.masterMessageText
{
}

/** This class applies to the icon displayed next to each message. */
.masterMessageIcon
{
   padding-right: 4px;
   vertical-align: bottom;
}

/** This class applies to Message List Introduction Lines. */
.masterMessageIntroduction
{
   padding-top:5px;
   padding-bottom:5px;
   font-weight:bold;
}

/** This class applies to Inline Message List areas. */
.masterMessageInlineList
{
   padding-left:8px;
   padding-right:21px;
   padding-bottom:7px;
}

/** This class applies to Inline Message List Headings. */
.masterMessageInlineHeading
{
   font-weight:bold;
}


/** This class applies to Inline Message List Detail Areas. */
.masterMessageInlineListDetail
{
   padding-left:27px;
}

/* TREEMAP ==================================================================================== */
/** This class applies to the border of the treemap tiles. */
.masterTreemapTile
{
   background-color: #D6DFE6;
}

/** This class applies to the border of the treemap groups embedding the tiles . */
.masterTreemapGroup
{
   background-color: #D6DFE6;
}

/** This class applies to the background of the treemap title bar. */
.masterTreemapTitle
{
   background-color: #F0F4FA;
}

/** This class applies to the labels of the treemap legend values. */
.masterTreemapPrompt
{
   color: #666666;
}


/* SLIDERS ==================================================================================== */

/** This class applies to the horizontal slider tick labels. */
.masterSliderHorizontalLabel
{
    font-size:9px;
    font-family:inherit;
    color:#596a94;
    font-weight:inherit;
    outline:none;
    white-space:nowrap;
    text-align:center;
    padding:0px 0px 0px 0px;
    position:absolute;
    top:20px;
	
}

/** This class is used while calculating the size of horizontal slider labels in pixels */
.masterSliderHorizontalLabelSize
{
    font-size:9px;
    font-family:inherit;
    color:#596a94;
    font-weight:inherit;
    visibility:hidden;
    white-space:nowrap;
}

/** This class applies to the horizontal slider thumb. */
.masterSliderHorizontalThumb
{
   position:relative;
   top:-11px;
   z-index:1;
   outline:0;
   transition-property:left ;
   -moz-transition-property: left ; /* Firefox */
   -webkit-transition-property:left ; /* Safari and Chrome */
   transition-timing-function: linear;
   -moz-transition-timing-function: linear; /* Firefox  */
   -webkit-transition-timing-function: linear; /* Safari and Chrome */

}

/** This class applies to the horizontal slider bar. */
.masterSliderHorizontalBarDiv 
{
   position:relative;
   outline:0;
   background-image: url('sliderhorizontalbar.png');
   height:11px;
   display:block;
   margin:0px;
   
}

/** This class applies to the parent container of horizontal slider bar,ticks and thumb. */
.masterSliderHorizontalBarTicksandThumb
{
   padding: 2px 0px 0px 0px;	
}

/** This class applies to the horizontal slider tick marks. */
.masterSliderHorizontalTick
{
   position:absolute;
   top:10px;
   border-left:1px solid #b3c6db;
   height: 5px;
}

/** This class applies to the horizontal slider increase button. */
.masterSliderHorizontalIncreaseButton
{
   
   padding-left:0px;
   padding-right:0px;
   padding-top:2px;
   padding-bottom:0px;
   position:relative;
   vertical-align:top;
   outline:0;
}

/** This class applies to the horizontal slider decrease button. */
.masterSliderHorizontalDecreaseButton
{
   padding-left:0px;
   padding-right:0px;
   padding-top:2px;
   padding-bottom:0px;
   position:relative;
   vertical-align:top;
   outline:0;
}

/** This class applies to the horizontal slider play/pause button. */
.masterSliderHorizontalPlayPauseButton
{
   position:relative;
   padding-left:0px;
   padding-right:0px;
   padding-top:0px;
   padding-bottom:0px;
   vertical-align:top;
}

/** This class applies to the horizontal slider thumb image. */
.masterSliderHorizontalThumbImage
{
   display:block;
}

/** This class applies to the horizontal slider thumb value. */
.masterSliderHorizontalThumbValue
{
   background : #9dbbd8;
   border-radius: 3px;
   font-size:9px;
   font-family:inherit;
   color:white;
   font-weight:inherit;
   padding-right: 0px;
   padding-left: 0px;
   padding-bottom: 0px;
   outline:none;
   white-space:nowrap;
   text-align:center;
   display:block;
   position:relative;
   top:3px;
}