/*
 Copyright (c) 2006, 2024, Oracle and/or its affiliates. 

  richcomponents-simple-desktop.css defines the styles used by the desktop implementation of the
  Simple skin for the rich components, and is identified by skin ids "simple.desktop",
  "simple.portlet", and "simple.pda". This file is merged into the Simple skin.
  When the skin-family is richcomponents-simple, then your component should
  look decent. If it doesn't, then MOVE the skin definitions from medium and/or rich
  skins into this file.
  (base-desktop.xss/simple-desktop.xss/richcomponents-simple-desktop.css).
*/
/* TODO: work out what we should do about the PagePage styles. Do they go in simple or blafplus?
They will need to work in portal, so I suppose they should go in both */


/* Use Aliases whenever possible! They are defined originally in Trinidad's base-desktop.xss
or richcomponents-simple-desktop.css

For every component key:  Instead of color:#000000;, use
-tr-rule-ref: selector(".AFTextForeground:alias");

Instead of font-family: Tahoma use
-tr-rule-ref: selector(".AFDefaultFontFamily:alias");

OR -- if you need
font-family: Tahoma;
font-size: 11px;
font-weight: normal;
use
-tr-rule-ref: selector(".AFDefaultFont:alias");
// You shouldn't need both AFDefaultFontFamily:alias and AFDefaultFont:alias
// since AFDefaultFont:alias includes AFDefaultFontFamily:alias.

Instead of background-color: #FFFFFF; use
-tr-rule-ref: selector(".AFTextBackground:alias");
or, if it meant to be an accent color, like table background,
use
-tr-rule-ref: selector(".AFLightAccentBackground:alias");
(this difference is sort of fuzzy. use your best judgement)

Instead of background-color: #CCCCCC, use
-tr-rule-ref: selector(".AFDarkAccentBackground:alias");

If you are using the BLAF+ standard borders, see
.AFButtonBorderHover:alias and
.AFButtonBorder:alias.
ETC.
If you are using border on form components, use:
-tr-rule-ref: selector(".AFFormControlContentBorder:alias");
It includes:

  border-style: solid;
  border-width: 1px;
  border-color: #B9B9B4;

ETC (Make yourself familiar with our aliases below to see where you can use them.)
font-size: 9px, use
  -tr-rule-ref: selector(".AFVerySmallFont:alias");

*/

.AFFieldTextDisabled:alias {
  -tr-rule-ref: selector(".AFDarkAccentForeground:alias");
}

/* private - HC mode disabled text. Note that native controls should adjust to high contrst mode
   natively, so in many cases no special styling is needed. */
.AFHighContrastTextDisabled:alias {
  opacity: 0.35;
}

.AFTwinkleBackground:alias {
  background-color: #FCF0BC;
}

.AFTwinkleForeground:alias {
  color: #333333;
}

.AFActiveLinkBorder:alias {
}

/* New alias, introduced for an easy way to change all the visited links' borders. */
.AFVisitedLinkBorder:alias {
}

/* data links and global links */
.AFLinkForeground:alias,
.AFGlobalLink:alias {
  color: #364696;
}

/* visited and active data links */
.AFVisitedLinkForeground:alias,
.AFActiveLinkForeground:alias {
  color: #72007C;
}

/* disabled data links and global links*/
.AFLinkDisabled:alias,
.AFGlobalLinkDisabled:alias {
  text-decoration: none;
  cursor: default;
  -tr-rule-ref: selector(".AFTextForeground:alias");
}
/*  Anchor, hsl(0, 0%, 0%), #000000 */
.AFShadowColor:alias {
  color: #000000;
}
/* Alias for styles when hovered over links */
.AFLinkHover:alias
{
  text-decoration: underline;
}

/* background visited link (new alias) */
.AFVisitedLinkBackground:alias {
  background-color: #72007C;
}

.AFVeryDarkBackground:alias {
  background-color: #336699;
}
.AFVeryDarkForeground:alias {
  color: #336699;
}

.AFDarkBackground:alias {
  background-color: #9CACC9;
}
.AFDarkForeground:alias {
  color: #9CACC9;
}

.AFMediumBackground:alias {
  background-color: #C4CEE0;
}
.AFMediumForeground:alias {
  color: #C4CEE0;
}

.AFLightBackground:alias {
  background-color: #EDFFFF;
}
.AFLightForeground:alias {
  color: #EDFFFF;
}

.AFVeryDarkAccentBackground:alias {
  background-color: #9297A6;
}
.AFVeryDarkAccentForeground:alias {
  color: #9297A6;
}

.AFDarkAccentBackground:alias {
  background-color: #C5C5C0;
}
.AFDarkAccentForeground:alias {
  color: #7E807A;
}
.AFMediumAccentBackground:alias {
  background-color: #EAEAEA;
}
.AFMediumAccentForeground:alias {
  color: #EAEAEA;
}
.AFLightAccentBackground:alias {
  background-color: #FDFDFA;
}
.AFLightAccentForeground:alias {
  color: #FDFDFA;
}

.AFTextBackground:alias{
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
}

/* Alias for toolbar and query separators */
.AFBarSeparator:alias {
  width: 2px;
  height: 21px;
  padding: 0px 5px;
  background-image: url('/afr/toolbar_separator.gif');
  background-repeat: no-repeat;
  background-position: center;
}

/* Panel Box Aliases */

/* Alias for the start of the panelBox headers - overriden in medium skin
   Includes padding to support 6px space. All center items have l/r padding 2px, so we have 8px
   before center content start */
.AFPanelBoxHeaderStart:alias {
  padding: 0px 0px 0px 6px;
  border-style: solid;
  border-width: 1px 0px 0px 1px;
}

/* Alias for the end of the panelBox headers - overriden in medium skin
   Includes padding to support 6px space. All center items have l/r padding 2px, so we have 8px
   after center content ends */
.AFPanelBoxHeaderEnd:alias {
  padding: 0px 6px 0px 0px;
  border-style: solid;
  border-width: 1px 1px 0px 0px;
}

.AFPanelBoxHeaderCenter:alias {
  padding: 0px;
  width: 100%;
  height: 19px;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px 0px 0px 0px;
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
}

/* private since it is positioning only.
   Alias for the start of the panelBox footers - overridden in child skins
   Includes padding to support 6px space. All center items have l/r padding 2px, so we have 8px
   before center content start */
.AFPanelBoxFooterStart:alias {
  padding: 0px 0px 0px 6px;
  border-style: solid;
  border-width: 1px 0px 0px 1px;
}

/* private since it is positioning only.
   Alias for the end of the panelBox footers - overriden in child skins
   Includes padding to support 6px space. All center items have l/r padding 2px, so we have 8px
   after center content ends */
.AFPanelBoxFooterEnd:alias {
  padding: 0px 6px 0px 0px;
  border-style: solid;
  border-width: 1px 1px 0px 0px;
}

/* private since it is positioning only. */
.AFPanelBoxFooterCenter:alias {
  padding: 0px;
  width: 100%;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px 0px 0px 0px;
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  background-repeat: repeat-x;
  background-position: bottom left;
}

.AFPanelBoxHeaderCoreDefault:alias,
.AFPanelBoxContentCoreDefault:alias {
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
  border-color: #BFC6C9;
}

.AFPanelBoxHeaderCoreLight:alias,
.AFPanelBoxContentCoreLight:alias
{
  background-color: #E7F2FF;
  border-color: #BFC6C9;
}

.AFPanelBoxHeaderCoreMedium:alias,
.AFPanelBoxContentCoreMedium:alias {
  background-color: #D8E3EA;
  border-color: #BFC6C9;
}

.AFPanelBoxHeaderCoreDark:alias,
.AFPanelBoxContentCoreDark:alias {
  background-color: #336699;
  border-color: #BFC6C9;
}

.AFPanelBoxHeaderHighlightDefault:alias,
.AFPanelBoxContentHighlightDefault:alias {
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
  border-color: #BFC6C9;
}

.AFPanelBoxHeaderHighlightLight:alias,
.AFPanelBoxContentHighlightLight:alias {
  background-color: #FFFCBA;
  border-color: #D7D9B6;
}

.AFPanelBoxHeaderHighlightMedium:alias,
.AFPanelBoxContentHighlightMedium:alias {
  background-color: #FFF0B9;
  border-color: #CCC5A5;
}

.AFPanelBoxHeaderHighlightDark:alias,
.AFPanelBoxContentHighlightDark:alias {
  background-color: #B6D9D1;
  border-color: #8FA6A0;
}

/* Private - base alias for <div> based buttons (new alias) */
.AFButton:alias {
  display: inline-block;
  padding: 0px;
  cursor: default;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Private - base alias for <div> based button content (link anchor) (new alias) */
.AFButtonLink:alias {
  text-decoration: none;
  cursor: default;
  display: block;
  white-space: nowrap;
  padding: 1px 3px;
}

/* Private - base alias for <div> based button text (new alias) */
.AFButtonText:alias,
.AFButtonLeadingText:alias:rtl {
  white-space: nowrap;
  text-decoration: none;
  padding-left: 3px;
  padding-right: 0px;
}

/* in ie with the button image vertical-align: middle, we have to make the text also middle
   so that the image and text are aligned nicely*/
@agent ie {
  .AFButtonText:alias,
  .AFButtonLeadingText:alias,
  .AFButtonText:alias:rtl,
  .AFButtonLeadingText:alias:rtl {
    vertical-align: bottom;
  }
}

/* Private - base alias for <div> based button leading text RTL (new alias) */
.AFButtonLeadingText:alias,
.AFButtonText:alias:rtl {
  white-space: nowrap;
  text-decoration: none;
  padding-left: 0px;
  padding-right: 3px;
}

/* Private - base alias for <div> based buttons with text and no icon (new alias) */
.AFButtonTextOnlyText:alias {
  padding-left: 0px;
  padding-right: 0px;
}

/* Private - base alias applied to HTML <button> based buttons.
   Previously, padding type information was incorrectly kept in public AFButtonBackground, which,
   besides just being wrong, also caused problems allowing that style to be used by both <div> and
   <button> based buttons. In order to have the <div> based buttons use this style, the padding
   and other 'bad' data needed to be moved out. So as not to break the skinning of any existing
   element assigned to AFButtonBackground, all old elements that were defined to use
   AFButtonBackground were updated to also have this new AFButtonNative alias, and the padding and
   margin 'bad' data was moved to this alias as well. Ideally, the elements that are using this
   alias can be refactored and this alias can eventually be removed. */
.AFButtonNative:alias {
}

/* Background on buttons (new alias). Because this alias is used for both <div> and
   <button> based buttons, it's definition should not contain any padding definitions. */
.AFButtonBackground:alias {
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
}

/* background on buttons in hover mode. (new alias). Because this alias is used for both <div> and
   <button> based buttons, it's definition should not contain any padding definitions. */
.AFButtonBackgroundHover:alias {
  -tr-rule-ref: selector(".AFMediumBackground:alias");
}

/* background on buttons in active mode. (new alias). Because this alias is used for both <div> and
   <button> based buttons, it's definition should not contain any padding definitions. */
.AFButtonBackgroundActive:alias {
  -tr-rule-ref: selector(".AFDarkBackground:alias");
}

/* background on buttons in focus mode. (new alias). Because this alias is used for both <div> and
   <button> based buttons, it's definition should not contain any padding definitions.
   NOTE: No visible focus effects seen in skins, looks like this has not yet been fully implemented. */
.AFButtonBackgroundFocus:alias {
}

/* background on buttons in disabled mode. (new alias). Because this alias is used for both <div> and
   <button> based buttons, it's definition should not contain any padding definitions. */
.AFButtonBackgroundDisabled:alias {
  -tr-rule-ref: selector(".AFMediumAccentBackground:alias");
  background-image: none;
}

/* Text on buttons. NOTE: AFButtonForegroundDepressed would have been better named as
   'AFButtonForegroundActive', but we're stuck with name for now. */
.AFButtonForeground:alias,
.AFButtonForegroundHover:alias,
.AFButtonForegroundDepressed:alias {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
}

/* foreground color on disabled buttons.  */
.AFButtonForegroundDisabled:alias {
  color: gray;
}

/* borders on buttons (new aliases). For simple, we allow div buttons to have no borders
   while our <button> buttons have natural HTML borders. */
.AFButtonBorder:alias,
.AFButtonBorderHover:alias,
.AFButtonBorderActive {
}

.AFButtonBorderDisabled:alias {
  border-style: solid;
  border-width: 1px;
  border-color: #9297A6;
}

@agent email {
  .AFButtonBorderDisabled:alias {
    -tr-inhibit: border-style;
    -tr-inhibit: border-color;
    -tr-inhibit: border-width;
  }
}

/* Use to style anchor tags with a clickable image.
Requirements:
 - Image is 16px by 16px (common to blafplus icons)
 - Display mode is inline
 - The anchor tag is empty - peer code handles the action when user clicks
   on the image. For example layout and handling, see inputDate.jspx and the
   inputDate peer which opens a chooseDate popup when clicked.
 - Individual peers use this alias, and add the image to be displayed using
   background-image attribute. For example, see "af|inputDate::launch-icon-style".

 Notes:
 - The font-size and padding-right are used to control the height and width
   respectively in FireFox. Using font-size 14px (rather than 16px) avoids the
   image floating, but can be overriden.
 - The display:inline-block is used to cause the image to show up in IE.
 - To display the image correctly in IE 9 in bi-di modes the special condition is added
   and padding-left is modified for ie9.IE 9 adds an extra space in margin-right
   (as padding-left and margin dont work together),
   so overriding margin-right to auto in case of IE9 RTL.

If your image is not 16px by 16px, you can use this alias but override
the font-size and padding-right to the appropriate height/width */
.AFClickableImageAnchor:alias {
  font-size: 14px;
  padding-right: 16px;
  margin-left: 1px;
  margin-right: 1px;
  background-repeat: no-repeat;
  background-position: bottom left;
}

@agent ie and (version: 9.0) {
  .AFClickableImageAnchor:alias:rtl {
     margin-right: auto;
  }
}

@agent webkit {
  .AFClickableImageAnchor:alias {
    display: inline-block;
    height: 16px;
    vertical-align: text-bottom;
  }
}

/* Used to make table-based components display inline and this shouldn't be
   exposed to skinners.  We should change to display="inline-table" as it's
   supported by browsers.
*/
.AFFormComponentContentInline:alias {
  display: inline;
  vertical-align: middle;
}
@agent gecko {
  .AFFormComponentContentInline:alias {
    display: -moz-inline-box;
  }
}
@agent gecko and (min-version: 64) {
  .AFFormComponentContentInline:alias {
    display: inline-block;
  }
}
@agent webkit {
  .AFFormComponentContentInline:alias {
    display: inline-block;
  }
}

/* new alias */
.AFLightestNeutralBackground:alias {
  background-color: #FFFFFF;
}

/* new alias */
.AFLightestNeutralForeground:alias {
  color: #FFFFFF;
}

/* af:messages Styles */
.AFFormComponentOutlineError:alias {
  border: 2px #C70000 solid;
  margin: 0px;
}

.AFFormComponentOutlineFatal:alias {
  -tr-rule-ref: selector(".AFFormComponentOutlineError:alias");
}

.AFFormComponentOutlineWarning:alias {
  border: 2px #FFAA2B solid;
  margin: 0px;
}
/* new alias */
.AFErrorBackground:alias,
.AFFatalBackground:alias {
  background-color:#C70000;
}

.AFErrorTextForeground:alias {
  color: #C70000;
}
/* new alias */
.AFWarningBackground:alias {
  background-color:#FFAA2B;
}

/* Underline the access key on form components, e.g. output label */
/* Underline the access key for buttons */
/* New alias */
.AFLinkAccessKeyStyle:alias,
.AFFormAccessKeyStyle:alias,
.AFButtonAccessKeyStyle:alias {
  text-decoration:underline;
}

/* AFFormControlContent:alias is defined in base-desktop.xss. It includes AFFieldText
/* Background gradient on form content. (new alias) */
.AFFormControlContentBackground:alias {
}

/* All the form controls have the same background-color for disabled, so use an alias */
.AFFormControlContentBackgroundDisabled:alias {
}

.AFFormControlContentForegroundDisabled:alias {
  -tr-rule-ref: selector(".AFDarkAccentForeground:alias");
}

.AFFormControlItemForegroundDisabled:alias {
  -tr-rule-ref: selector(".AFFormControlContentForegroundDisabled:alias");
}
/* Background for disabled items in select lists */
.AFFormControlItemBackgroundDisabled:alias {
  -tr-rule-ref: selector(".AFFormControlContentBackgroundDisabled:alias");
}

/* Borders on form content. (new alias) */
.AFFormControlContentBorder:alias {
  border-style: solid;
  border-width: 1px;
  border-color: #9297A6;
}
.AFHighContrastTwinkleBackground:alias {
  background-image: url('/afr/changed.png');
  background-repeat:no-repeat;
  background-color: transparent;
  background-position: top right;
}

@agent email {
  .AFFormControlContentBorder:alias {
    -tr-inhibit: border-style;
    -tr-inhibit: border-color;
    -tr-inhibit: border-width;
  }
}

/* Border for disabled items in select lists */
.AFFormControlItemBorderDisabled:alias {
}

.AFFormControlSeparatorBackground:alias {
  background-color:#979993;
}


/* private - Border around a popup that contains menus (menu type popup). */
.AFPopupMenuBorder:alias, .AFPopupMenuBorderInHighContrast:alias {
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}

/* Private - Alias for the horizontal padding inside panelFormLayout */
.AFPanelFormLayoutHorizontalPadding:alias{
  padding-left: 8px;
  padding-right: 0px;
}

/* Private - Alias for the rtl horizontal padding inside panelFormLayout */
.AFPanelFormLayoutHorizontalPadding:alias:rtl{
  padding-left: 0px;
  padding-right: 8px;
}

/* overflow indicator at the start (left) side of a horizontal list */
.AFOverflowImageHorizontalStart:alias {
  background-image: url("/afr/overflow_start.png");
  left: 0px;
}

.AFOverflowImageHorizontalStartHover:alias {
  background-image: url("/afr/overflow_start_mo.png");
}

.AFOverflowImageHorizontalStartDepressed:alias {
  background-image: url("/afr/overflow_start_md.png");
}

/* overflow indicator at the end (right) side of a horizontal list */
.AFOverflowImageHorizontalEnd:alias {
  background-image: url("/afr/overflow_end.png");
  right: 0px;
}

.AFOverflowImageHorizontalEndHover:alias {
  background-image: url("/afr/overflow_end_mo.png");
}

.AFOverflowImageHorizontalEndDepressed:alias {
  background-image: url("/afr/overflow_end_md.png");
}

/* overflow indicator at the start (top) side of a vertical list */
.AFOverflowImageVerticalStart:alias {
  background-image: url('/afr/overflow_top.png');
}

/* in simple, use same image for hover and depressed */
.AFOverflowImageVerticalStartHover:alias {
  background-image: url('/afr/overflow_top.png');
}

/* in simple, use same image for hover and depressed */
.AFOverflowImageVerticalStartDepressed:alias {
  background-image: url('/afr/overflow_top.png');
}

/* overflow indicator at the end (right) side of a Vertical list */
.AFOverflowImageVerticalEnd:alias {
  background-image: url("/afr/overflow_bottom.png");
}

/* in simple, use same image for hover and depressed */
.AFOverflowImageVerticalEndHover:alias {
  background-image: url("/afr/overflow_bottom.png");
}

/* in simple, use same image for hover and depressed */
.AFOverflowImageVerticalEndDepressed:alias {
  background-image: url("/afr/overflow_bottom.png");
}

/* conveyor belt aliases */

/* ConveyorBelt indicator at the start (left) side of a horizontal list */
.AFConveyorBeltImageHorizontalStart:alias {
  background-image: url("/afr/conv_l_ena.png");
}

.AFConveyorBeltImageHorizontalStartHover:alias {
  background-image: url("/afr/conv_l_ovr.png");
}

.AFConveyorBeltImageHorizontalStartDepressed:alias {
  background-image: url("/afr/conv_l_dwn.png");
}

.AFConveyorBeltImageHorizontalStartDisabled:alias {
  background-image: url("/afr/conv_l_dis.png");
}

/* ConveyorBelt indicator at the end (right) side of a horizontal list */
.AFConveyorBeltImageHorizontalEnd:alias {
  background-image: url("/afr/conv_r_ena.png");
}

.AFConveyorBeltImageHorizontalEndHover:alias {
  background-image: url("/afr/conv_r_ovr.png");
}

.AFConveyorBeltImageHorizontalEndDepressed:alias {
  background-image: url("/afr/conv_r_dwn.png");
}

.AFConveyorBeltImageHorizontalEndDisabled:alias {
  background-image: url("/afr/conv_r_dis.png");
}

/* ConveyorBelt indicator at the top of a vertical list */
.AFConveyorBeltImageVerticalTop:alias {
  background-image: url("/afr/conv_u_ena.png");
}

.AFConveyorBeltImageVerticalTopHover:alias {
  background-image: url("/afr/conv_u_ovr.png");
}

.AFConveyorBeltImageVerticalTopDepressed:alias {
  background-image: url("/afr/conv_u_dwn.png");
}

.AFConveyorBeltImageVerticalTopDisabled:alias {
  background-image: url("/afr/conv_u_dis.png");
}

/* ConveyorBelt indicator at the bottom of a vertical list */
.AFConveyorBeltImageVerticalBottom:alias {
  background-image: url("/afr/conv_d_ena.png");
}

.AFConveyorBeltImageVerticalBottomHover:alias {
  background-image: url("/afr/conv_d_ovr.png");
}

.AFConveyorBeltImageVerticalBottomDepressed:alias {
  background-image: url("/afr/conv_d_dwn.png");
}

.AFConveyorBeltImageVerticalBottomDisabled:alias {
  background-image: url("/afr/conv_d_dis.png");
}

/* droplist button */
.AFDroplistImage:alias {
  background-image: url("/afr/dropdown_n.png");
}

/* droplist button doesn't vary on hover/depressed in simple skin. */
.AFDroplistImageHover:alias {
  background-image: url("/afr/dropdown_n.png");
}

.AFDroplistImageDepressed:alias {
  background-image: url("/afr/dropdown_n.png");
}

/* TODO: remove AFStartPadding when we pick up the latest Trinidad which has this in
         base-desktop.xss */
.AFStartPadding:alias{
  padding: 0px 0px 0px 8px;
}

.AFStartPadding:alias:rtl{
  padding: 0px 8px 0px 0px;
}

/* overrides Trinidad AfEndPadding to match BLAF+ */
.AFEndPadding:alias{
  padding: 0px 6px 0px 0px;
}

.AFEndPadding:alias:rtl{
  padding: 0px 0px 0px 6px;
}

af|train::overflow-container .AFOverflowElement,
af|train-vertical::overflow-container .AFOverflowElement {
  display: block;
  white-space: nowrap;
  clear: both;
  overflow: auto;
}

/* Private - Alias for popup-create-icon in LOV */
.AFListOfValuesCreateIconStyle:alias {
  background-image: url("/afr/new_ena.png");
  background-repeat: no-repeat;
}

/* borders on drop-down buttons. (new alias)*/
.AFDropDownIconBorder:alias {
}

/* borders on drop-down buttons in active mode. (new alias)*/
.AFDropDownIconBorderActive:alias {
}

/* Need an extra pixel in the data cell padding when there is no vertical
line. Otherwise it won't line up with the header cell which has a vertical line
by default. */
.AFTableCellData:alias {
  /* !important - total must match the total of skin property
    -tr-border-left-width, -tr-border-right-width, -tr-padding-right,
    -tr-padding-left*/
  /* extra pixel in padding compensates for no border */
  border-right: none;
  border-bottom: none;
  padding-right: 3px;
}

.AFTableCellData:alias:rtl {
  padding-left: 3px;
  padding-right: 2px;
}

.AFTableCellDataHGrid:alias {
   border-bottom: 1px solid #979991;
}

/* Vertical border. Also, reset the padding-right to match that which is on
the header since we now have a border to match the header's border.
This will override the padding set on .AFTableCellDataPadding:alias */
.AFTableCellDataVGrid:alias {
   border-right: 1px solid #979991;
   padding-right: 2px;
}

.AFTableCellDataVGrid:alias:rtl {
   border-left: 1px solid #979991;
   border-right: none;
   padding-left: 2px;
}

.AFTableCellDataVHGrid:alias {
   -tr-rule-ref: selector(".AFTableCellDataVGrid:alias");
   -tr-rule-ref: selector(".AFTableCellDataHGrid:alias");
}

.AFTableCellDataDropTargetColor:alias, .AFTableHeaderCellDataDropTargetColor:alias {
  -tr-rule-ref: selector(".AFVeryDarkBackground:alias");
  -tr-rule-ref: selector(".AFLightestNeutralForeground:alias");
}

.AFHighContrastTableCellDataSelected:alias,
.AFHighContrastTableCellDataSelectedFocused:alias {
  font-weight: bold;
}
.AFTableCellDataSelected:alias,
.AFTableCellDataSelectedFocused:alias {
  -tr-rule-ref: selector(".AFMediumBackground:alias");
}

.AFTableCellDataSelectedBanded:alias,
.AFTableCellDataSelectedBandedFocused:alias {
  -tr-rule-ref: selector(".AFDarkBackground:alias");
}

.AFTableCellDataSelectedInactive:alias {
  -tr-rule-ref: selector(".AFMediumAccentBackground:alias");
}

.AFTableCellDataSelectedBandedInactive:alias {
  -tr-rule-ref: selector(".AFDarkAccentBackground:alias");
}

.AFTableCellDataBandedBackgroundColor:alias{
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
}

/* The disclosed tab remove image */
.AFTabRemoveImageDisclosed:alias {
  background-image: url('/afr/removeTab_ena.png');
}

/* The undisclosed tab remove image */
.AFTabRemoveImageUndisclosed:alias {
  background-image: url('/afr/removeTab_ena.png');
}

/* The hover remove image (mouseover on an enabled remove image).
   (No styling in simple.) */
.AFTabRemoveImageHover:alias {
}

/* The active remove image (mousedown on an enabled remove image). */
.AFTabRemoveImageActive:alias {
  background-image: url('/afr/removeTab_ena.png');
}

/* The disabled tab remove image. */
.AFTabDisabledRemoveImage:alias {
  background-image: url('/afr/removeTab_dis.png');
}

/* Disclosed tabs with remove='disabled' remove image. */
.AFTabRemoveImageDisabledDisclosed:alias {
  background-image: url('/afr/removeTab_dis.png');
}

/* Undisclosed tabs with remove='disabled' remove image. */
.AFTabRemoveImageDisabledUndisclosed:alias {
  background-image: url('/afr/removeTab_dis.png');
}

/* Global alias for show/hide icon */
.AFVerticalTabLabelHideStyle:alias {
  background-image: url("/afr/VertTabLabel_hide_ena.png");
}

.AFVerticalTabLabelHideStyleHover:alias {
  background-image: url("/afr/VertTabLabel_hide_hov.png");
}

.AFVerticalTabLabelHideStyleActive:alias {
  background-image: url("/afr/VertTabLabel_hide_dwn.png");
}

.AFVerticalTabLabelHideStyleDisabled:alias {
  background-image: url("/afr/VertTabLabel_hide_dis.png");
}

.AFVerticalTabLabelShowStyle:alias {
  background-image: url("/afr/VertTabLabel_show_ena.png");
}

.AFVerticalTabLabelShowStyleHover:alias {
  background-image: url("/afr/VertTabLabel_show_hov.png");
}

.AFVerticalTabLabelShowStyleActive:alias {
  background-image: url("/afr/VertTabLabel_show_dwn.png");
}

.AFVerticalTabLabelShowStyleDisabled:alias {
  background-image: url("/afr/VertTabLabel_show_dis.png");
}

/* TODO: Icons ending in Icon are not picked up (see Trinidad issue 277). For
the time being used :alias for the icon to work. */
.AFLogoIcon:alias {
  content: url(/afr/logo-oracle-dark.png);
}

/* TODO: Icons ending in Icon are not picked up (see Trinidad issue 277). For
the time being used :alias for the icon to work. */
/* This is used by the query component. It is likely to be skinned for different locales.
We use this separator between the 2 components that get rendered when the 'Between ..." operator
is chosen for the search field. See QueryUtils.java, "betweenSeparator".  */
.AFBetweenSeparatorIcon:alias {
  content:"-";
  padding-left: 5px;
  padding-right: 5px;
}

.AFIndexedIcon:alias {
  content:"**";
}

/* RTL image flipping aliases */
/* There is no current browser that supports the css3 version, so only
   supplying the browser specific versions */
@agent ie
{
  .AFFlipImageHorizontal:alias {
    filter: FlipH;
  }
}
@agent gecko
{
  .AFFlipImageHorizontal:alias {
    -moz-transform: scaleX(-1);
  }
}
@agent webkit
{
  .AFFlipImageHorizontal:alias {
    -webkit-transform: scaleX(-1);
  }
}

/* For some reason a labelled input component with simple="true" uses this but with styles that make
   it visbile at only 999px above the component.  It is not safe to assume that pages cannot be more
   than 999 pixels (go to a W3C page for examples of how hugely long they can be).  Temporarily,ok.
   let's set it to a larger value.
   TODO consider better ways to handle this in Trinidad */
.p_OraHiddenLabel {
  top: -99999px;
}

/*
 * Dynamic help icon styles.
 */
/*
 * This key is an alias for the dynamic help icon style.
 * This key uses background-image to set the dynamic help image.
 * If you want to use text instead of a background-image, you can
 * use .AFDynamicHelpIcon:alias {content:"Text"}.
 */
.AFDynamicHelpIconStyle:alias {
  background-image: url('/afr/helptopics_ena.png');
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  /* Bug 7497524 - The icon was too close to the label.
   * added extra pixel to the right of the icon
   */
  margin-right: 4px;
}

/*
 * Define the global style classes for the autoSuggest dropdown for the editable input components.
 * Limit the height to 300px because not everyone will have a large display nor have their browser
 * maximized so that user will not see both a scroll bar on the browser plus a scroll bar on the
 * popup.
 */
.AFAutoSuggestItemsContainer {
  border:0px;
  -tr-rule-ref: selector(".AFTextBackground:alias");
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0px;
  padding: 0 0 1px 0;
  max-height: 300px;
  overflow: auto;
}

.AFAutoSuggestItem {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  height:14px;
  padding:1px;
  border:1px transparent solid;
  background-color: transparent;
  -tr-rule-ref: selector(".AFTextForeground:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  vertical-align:baseline;
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
  white-space: pre;
  cursor: default;
}

/* We need a transparent border here because AFAutoSuggestMoreLink:selected adds a dotted non-transparent border.
   Without this transparent border, this link would grow when the dotted non-transparent border gets added.
   We also need to disable the native focus ring by setting outline-width to zero to prevent double outlines. */
.AFAutoSuggestMoreLink {
  -tr-rule-ref: selector(".AFLinkForeground:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  text-decoration: none;
  border: 1px solid transparent;
  outline-width: 0px;
}
/* Selection state for the suggested item when hovered or navigated through keyboard */
.AFAutoSuggestItem:selected {
  -tr-rule-ref: selector(".AFActiveLinkBorder:alias");
  -tr-rule-ref: selector(".AFMediumBackground:alias");
}
.AFAutoSuggestItem:hover,
.AFAutoSuggestItem:selected:hover {
  -tr-rule-ref: selector(".AFAutoSuggestItem:selected");
}

.AFAutoSuggestMoreLink:selected,
.AFAutoSuggestMoreLink:hover {
  -tr-rule-ref: selector(".AFActiveLinkBorder:alias");
}

.AFAutoSuggestBusyStyle {
  -tr-rule-ref: selector(".AFBackgroundImageStatus:alias");
  height: 60px;
  min-width: 60px;
}

/* we need to add some padding, as we are no longer rendering the
   silly non-breaking space as padding */
.AFRequiredIconStyle {
  margin-right: 3px;
}
.AFRequiredIconStyle:rtl {
  margin-right: 0px;
  margin-left: 3px;
}


.AFInlineSelected:alias {
  border:solid 2px blue}

/*Images of Arrows for SelectOrderShuttle & SelectManyShuttle in High Contrast Mode*/
.AFSelectShuttleRightEnabledIcon:alias {
  background-image: url("/afr/shuttleright_ena.png");
}
.AFSelectShuttleRightDisabledIcon:alias {
  background-image: url("/afr/shuttleright_dis.png");
}

.AFSelectShuttleRightAllEnabledIcon:alias {
  background-image: url("/afr/shuttlerightall_ena.png");
}

.AFSelectShuttleRightAllDisabledIcon:alias {
  background-image: url("/afr/shuttlerightall_dis.png");
}

.AFSelectShuttleLeftEnabledIcon:alias {
  background-image: url("/afr/shuttleleft_ena.png");
}

.AFSelectShuttleLeftDisabledIcon:alias {
  background-image: url("/afr/shuttleleft_dis.png");
 }

.AFSelectShuttleLeftAllEnabledIcon:alias {
  background-image: url("/afr/shuttleleftall_ena.png");
}

.AFSelectShuttleLeftAllDisabledIcon:alias {
  background-image: url("/afr/shuttleleftall_dis.png");;
}

.AFSelectShuttleUpEndDisabledIcon:alias {
  background-image: url("/afr/shuttlereordertop_dis.png");
}

.AFSelectShuttleUpEndEnabledIcon:alias {
  background-image: url("/afr/shuttlereordertop_ena.png");
}

.AFSelectShuttleUpEnabledIcon:alias {
  background-image: url("/afr/shuttlereorderup_ena.png");
}

.AFSelectShuttleUpDisabledIcon:alias {
  background-image: url("/afr/shuttlereorderup_dis.png");
}

.AFSelectShuttleDownEnabledIcon:alias {
  background-image: url("/afr/skyros-v1/shuttlereorderdown_ena.png");
}

.AFSelectShuttleDownDisabledIcon:alias {
  background-image: url("/afr/shuttlereorderdown_dis.png");
}

.AFSelectShuttleDownEndEnabledIcon:alias {
  background-image: url("/afr/shuttlereorderbottom_ena.png");
}

.AFSelectShuttleDownEndDisabledIcon:alias {
  background-image: url("/afr/shuttlereorderbottom_dis.png");
}

/* default inline editing pseudo-class definitions */

/* style placed on inline selectable components.  Since the browsers ship with cursor style
   rules for some elements, we specify those as well so that our higher specificity wins.
   Note that editable components are also selectable components, so these components will
   also have inline-editable added to them
*/
*:inline-selectable, *:inline-selectable INPUT,  *:inline-selectable BUTTON,
*:inline-selectable TEXTAREA, *:inline-selectable SELECT, *:inline-selectable A,
*:inline-selectable LABEL {
  cursor:pointer}

*:active-inline-editable-container {
  background-color:PowderBlue; opacity:0.75}

/* use border on platforms that don't support outline for showing selection indication */
*:inline-selected {
 -tr-rule-ref: selector(".AFInlineSelected:alias"); }

@agent gecko {
*:inline-selected {
  -tr-inhibit: border;
  outline:solid 2px blue;
  }
}

/* style placed on inline editable components.  Since the browsers ship with cursor style
   rules for some elements, we specify those as well so that our higher specificity wins.
   Note that editable components are also selectable components, so these components will
   also have inline-selectable added to them
*/
*:inline-editable, *:inline-editable INPUT, *:inline-editable BUTTON, *:inline-editable TEXTAREA,
*:inline-editable SELECT, *:inline-editable A, *:inline-editable LABEL {
  cursor:text}

/* pseudo-class that is applied to component that are updated by af:poll,
   when the poll component timed out. */
*:no-update {
  background-color: #999999;
  opacity: 0.5}

@agent ie {
  *:no-update
  {
    filter: alpha(opacity:50);
  }
}

*:no-update-badge {
  background: transparent url("/afr/warning_status.png") center no-repeat;
}

@agent (touchScreen:none) {
  *:active-inline-editable-container *:hover-target{
        border:solid 2px #3399ff}
}

@agent gecko and (touchScreen:none) {
  *:active-inline-editable-container *:hover-target {
    -tr-inhibit: border;
    outline:solid 2px #3399ff;
    }
  }


/* Default styles for drag/drop */
*:drop-target {
  background-color:PowderBlue;
  opacity:0.75;
}

*:drag-ghost {
  opacity:0.75;
}

@agent ie {
  *:drag-ghost,
  *:drop-target
  {
    filter:alpha(opacity:75);
  }
}

/* Style for dynamic help icon */
af|column::dynamic-help-icon-style,
af|inputColor::dynamic-help-icon-style,
af|inputComboboxListOfValues::dynamic-help-icon-style,
af|inputDate::dynamic-help-icon-style,
af|inputFile::dynamic-help-icon-style,
af|inputListOfValues::dynamic-help-icon-style,
af|inputNumberSlider::dynamic-help-icon-style,
af|inputNumberSpinbox::dynamic-help-icon-style,
af|inputRangeSlider::dynamic-help-icon-style,
af|inputSearch::dynamic-help-icon-style,
af|inputText::dynamic-help-icon-style,
af|panelHeader::dynamic-help-icon-style,
af|panelLabelAndMessage::dynamic-help-icon-style,
af|query::dynamic-help-icon-style,
af|quickQuery::dynamic-help-icon-style,
af|richTextEditor::dynamic-help-icon-style,
af|codeEditor::dynamic-help-icon-style,
af|selectBooleanCheckbox::dynamic-help-icon-style,
af|selectBooleanRadio::dynamic-help-icon-style,
af|selectManyCheckbox::dynamic-help-icon-style,
af|selectManyChoice::dynamic-help-icon-style,
af|selectManyListbox::dynamic-help-icon-style,
af|selectManyShuttle::dynamic-help-icon-style,
af|selectOneChoice::dynamic-help-icon-style,
af|selectOneListbox::dynamic-help-icon-style,
af|selectOneRadio::dynamic-help-icon-style,
af|selectOrderShuttle::dynamic-help-icon-style,
af|showDetailHeader::dynamic-help-icon-style,
af|dialog::dynamic-help-icon-style,
af|panelWindow::dynamic-help-icon-style,
af|panelBox::dynamic-help-icon-style,
af|region::dynamic-help-icon-style {
 -tr-rule-ref: selector(".AFDynamicHelpIconStyle:alias");
}

af|body:high-contrast af|column::dynamic-help-icon-style:after,
af|body:high-contrast af|inputColor::dynamic-help-icon-style:after,
af|body:high-contrast af|inputComboboxListOfValues::dynamic-help-icon-style:after,
af|body:high-contrast af|inputDate::dynamic-help-icon-style:after,
af|body:high-contrast af|inputFile::dynamic-help-icon-style:after,
af|body:high-contrast af|inputListOfValues::dynamic-help-icon-style:after,
af|body:high-contrast af|inputNumberSlider::dynamic-help-icon-style:after,
af|body:high-contrast af|inputNumberSpinbox::dynamic-help-icon-style:after,
af|body:high-contrast af|inputRangeSlider::dynamic-help-icon-style:after,
af|body:high-contrast af|inputText::dynamic-help-icon-style:after,
af|body:high-contrast af|panelHeader::dynamic-help-icon-style:after,
af|body:high-contrast af|panelLabelAndMessage::dynamic-help-icon-style:after,
af|body:high-contrast af|query::dynamic-help-icon-style:after,
af|body:high-contrast af|quickQuery::dynamic-help-icon-style:after,
af|body:high-contrast af|richTextEditor::dynamic-help-icon-style:after,
af|body:high-contrast af|codeEditor::dynamic-help-icon-style:after,
af|body:high-contrast af|selectBooleanCheckbox::dynamic-help-icon-style:after,
af|body:high-contrast af|selectBooleanRadio::dynamic-help-icon-style:after,
af|body:high-contrast af|selectManyCheckbox::dynamic-help-icon-style:after,
af|body:high-contrast af|selectManyChoice::dynamic-help-icon-style:after,
af|body:high-contrast af|selectManyListbox::dynamic-help-icon-style:after,
af|body:high-contrast af|selectManyShuttle::dynamic-help-icon-style:after,
af|body:high-contrast af|selectOneChoice::dynamic-help-icon-style:after,
af|body:high-contrast af|selectOneListbox::dynamic-help-icon-style:after,
af|body:high-contrast af|selectOneRadio::dynamic-help-icon-style:after,
af|body:high-contrast af|selectOrderShuttle::dynamic-help-icon-style:after,
af|body:high-contrast af|showDetailHeader::dynamic-help-icon-style:after,
af|body:high-contrast af|dialog::dynamic-help-icon-style:after,
af|body:high-contrast af|panelWindow::dynamic-help-icon-style:after,
af|body:high-contrast af|panelBox::dynamic-help-icon-style:after,
af|body:high-contrast af|region::dynamic-help-icon-style:after {
  content: url('/afr/helptopics_ena.png');
}

af|outputText{
  -tr-inhibit: all;
}

/* outputText only needs styling in email mode*/
@agent email {
  af|outputText {
    -tr-rule-ref: selector(".AFDefaultFont:alias");
  }
}

af|outputFormatted{
  -tr-inhibit: all;
}

af|contextInfo {
  position: relative;
  vertical-align:top;
}

@agent webkit {
  af|contextInfo {
    display: inline-block;
  }
}

af|outputText af|contextInfo,
af|outputFormatted af|contextInfo,
af|link::context af|contextInfo,
af|commandLink::context af|contextInfo,
af|inputText:read-only  af|contextInfo,
af|inputComboboxListOfValues:read-only  af|contextInfo,
af|inputListOfValues:read-only  af|contextInfo,
af|selectOneChoice:read-only af|contextInfo{
  padding-right: 5px;
}

/* the context-content style goes around both the context facet and the content */
af|inputText::context-content af|inputText::content,
af|inputComboboxListOfValues::context-content af|inputComboboxListOfValues::content,
af|inputListOfValues::context-content af|inputListOfValues::content {
  padding-left:5px;
}

af|selectOneChoice::context-content af|selectOneChoice::content{
  padding-left:2px;
}

af|inputText::context-content af|inputText::content:rtl,
af|inputComboboxListOfValues::context-content af|inputComboboxListOfValues::content:rtl,
af|inputListOfValues::context-content af|inputListOfValues::content:rtl {
  padding-right:5px;
  -tr-inhibit: padding-left;
}

af|selectOneChoice::context-content af|selectOneChoice::content:rtl{
  padding-right:2px;
  -tr-inhibit: padding-left;
}

af|query::personalized-saved-search af|selectOneChoice,
af|query::personalized-saved-search af|selectOneChoice::content,
af|query::personalized-saved-search af|panelGroupLayout {
  width: 100%;
}

af|query::saved-search af|selectOneChoice,
af|query::saved-search af|selectOneChoice::content,
af|query::saved-search af|panelGroupLayout {
  width: 100%;
}

@agent ie and (version: 7.0) {
  af|contextInfo:rtl {
    display: inline-block;
  }
}

af|outputText af|contextInfo:rtl,
af|outputFormatted af|contextInfo:rtl,
af|link::context af|contextInfo:rtl,
af|commandLink::context af|contextInfo:rtl,
af|inputText:read-only af|contextInfo:rtl,
af|inputComboboxListOfValues:read-only  af|contextInfo:rtl,
af|inputListOfValues:read-only  af|contextInfo:rtl,
af|selectOneChoice:read-only af|contextInfo:rtl{
  padding-right: 0px;
  padding-left: 5px;
}

af|inputListOfValues af|contextInfo::launch-icon-style,
af|inputText af|contextInfo::launch-icon-style,
af|selectOneChoice af|contextInfo::launch-icon-style {
 margin-top:1px;
 margin-left:1px;
}


af|inputListOfValues af|contextInfo::launch-icon-style:rtl,
af|inputText af|contextInfo::launch-icon-style:rtl,
af|selectOneChoice af|contextInfo::launch-icon-style:rtl {
 margin-top:1px;
 margin-right:1px;
 margin-left:0px;
}

@agent ie {
  af|inputText af|contextInfo::launch-icon-style {
    margin-top:2px;
  }

  af|selectOneChoice af|contextInfo::launch-icon-style {
   margin-top:1px;
  }

  af|inputListOfvalues af|contextInfo::launch-icon-style{
    -tr-inhibit: margin-top;
  }

  af|inputComboboxListOfValues af|contextInfo::launch-icon-style{
   margin-top:2px;
  }
}

@agent ie and (version: 7.0) {
  af|inputListOfvalues af|contextInfo::launch-icon-style{
    margin-top: 2px;
  }

  af|inputComboboxListOfValues af|contextInfo::launch-icon-style{
   margin-top:3px;
  }
}

@agent webkit {
  af|inputText af|contextInfo::launch-icon-style,
  af|selectOneChoice af|contextInfo::launch-icon-style {
   margin-top:3px;
   margin-left:3px;
  }

  af|inputListOfValues af|contextInfo::launch-icon-style {
   margin-top:2px;
   margin-left:3px;
  }
}

af|selectOneChoice:read-only af|contextInfo::launch-icon-style,
af|inputText:read-only af|contextInfo::launch-icon-style,
af|inputComboboxListOfValues:read-only af|contextInfo::launch-icon-style,
af|inputListOfValues:read-only af|contextInfo::launch-icon-style {
 margin:0px;
}

af|column::context af|contextInfo {
  left: -2px;
  top: -1px;
  padding-right: 3px;
}


af|column::context af|contextInfo:rtl {
  -tr-inhibit: left;
  -tr-inhibit: padding-right;
  right: -2px;
  padding-left: 3px;
}


af|contextInfo::launch-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  font-size: 4px;
  padding-right: 4px;
  -tr-inhibit: margin-left;
  -tr-inhibit: margin-right;
  background-image:url("/afr/ci.png");
  background-repeat:no-repeat;
  position: absolute;
  top: 0px;
  left: 0px;
  width:4px;
  height:4px;
}



af|contextInfo::launch-icon-style:rtl {
  right:0px;
  -tr-inhibit: left;
  -tr-inhibit: padding-right;
}

@agent (touchScreen:none) {
  af|contextInfo::launch-icon-style:hover {
    background-image:url("/afr/ci_ovr.png");
    width:16px;
    height:16px;
  }


  af|contextInfo::launch-icon-style:hover:rtl {
    background-image:url("/afr/ci_ovr_rtl.png");
  }
}

af|contextInfo::launch-icon-style:active {
  background-image:url("/afr/ci_dwn.png");
  width:16px;
  height:16px;
}

af|contextInfo::launch-icon-style:active:rtl {
  background-image:url("/afr/ci_dwn_rtl.png");
}
@agent ie and (version: 7.0) {
  /* in ie7 we're seeing the active icon when you have focus on the component,
     so inhibit the active styles on IE7 */
     af|contextInfo::launch-icon-style:active {
        -tr-inhibit: all;
     }

     af|contextInfo::launch-icon-style:active:rtl {
        -tr-inhibit: all;
     }
}

af|body:high-contrast af|contextInfo::launch-icon {
  content: url("/afr/ci.png");
  width: 4px;
  height: 4px;
}

@agent (touchScreen:none) {
  af|body:high-contrast af|contextInfo::launch-icon-style:hover {
    width:auto;
    height:auto;
  }
}

af|body:high-contrast af|contextInfo::launch-icon-style:active {
  width:auto;
  height:auto;
}

/* Global alias for the maximize icon used in panelBox */
.AFMaximizedIconStyle:alias{
  background-image: url('/afr/restore_ena.png');
}

.AFMaximizedIconStyleHover:alias{
  background-image: url('/afr/restore_ovr.png');
}

.AFMaximizedIconStyleActive:alias{
  background-image: url('/afr/restore_dwn.png');
}

/* Global alias for the unmaximize icon used in panelBox */
.AFUnmaximizedIconStyle:alias{
  background-image: url('/afr/max_ena.png');
}

.AFUnmaximizedIconStyleHover:alias{
  background-image: url('/afr/max_ovr.png');
}

.AFUnmaximizedIconStyleActive:alias{
  background-image: url("/afr/max_dwn.png");
}

/* Versions of Maximize icons for Dark Backgrounds */

.AFMaximizedIconStyleDarkBackground:alias{
  background-image: url('/afr/restore_ena_dbg.png');
}

.AFUnmaximizedIconStyleDarkBackground:alias{
  background-image: url('/afr/max_ena_dbg.png');
}

/* TODO: Icons ending in Icon are not picked up (see Trinidad issue 371). For
the time being used :alias for the icon to work. */
.AFChangedIcon:alias {
  content: url(/afr/changed.png);
  vertical-align: text-bottom;
  padding-right: 3px;
}


af|inputColor::changed-icon,
af|inputComboboxListOfValues::changed-icon,
af|inputDate::changed-icon,
af|inputFile::changed-icon,
af|inputListOfValues::changed-icon,
af|inputNumberSlider::changed-icon,
af|inputNumberSpinbox::changed-icon,
af|inputRangeSlider::changed-icon,
af|inputSearch::changed-icon,
af|inputText::changed-icon,
af|panelLabelAndMessage::changed-icon,
af|richTextEditor::changed-icon,
af|codeEditor::changed-icon,
af|selectBooleanCheckbox::changed-icon,
af|selectBooleanRadio::changed-icon,
af|selectManyCheckbox::changed-icon,
af|selectManyChoice::changed-icon,
af|selectManyListbox::changed-icon,
af|selectManyShuttle::changed-icon,
af|selectOneChoice::changed-icon,
af|selectOneListbox::changed-icon,
af|selectOneRadio::changed-icon,
af|selectOrderShuttle::changed-icon {

  -tr-rule-ref: selector(".AFChangedIcon:alias");
}

/* Start of button styling
   af:button and and commandToolbarButton are handled first, as their skinning
   is basically the same. */

/* Default, enabled state for buttons. Buttons do not receive different
   on-the-toolbar/off-the-toolbar styling in the simple skin.  */
af|commandToolbarButton,
af|button {
  -tr-rule-ref: selector(".AFButton:alias");
  -tr-rule-ref: selector(".AFButtonBorder:alias");
  -tr-rule-ref: selector(".AFButtonBackground:alias");
  -tr-rule-ref: selector(".AFButtonForeground:alias");
}

/* IE 7 does not support inline-block on divs, but we can trick it into doing the same thing by
   setting zoom 1 to have it enter its 'hasLayout' mode and use display inline. */
@agent ie and (version: 7.0) {
  af|commandToolbarButton,
  af|button {
    zoom: 1;
    display: inline;
  }
}

/* style on the link (anchor) section */
af|commandToolbarButton::link,
af|button::link {
  -tr-rule-ref: selector(".AFButtonLink:alias");
  color: inherit;
}

/* Style for icon on buttons, if specified. */
af|commandToolbarButton::image,
af|commandToolbarButton::image-hover,
af|commandToolbarButton::image-depressed,
af|button::image,
af|button::image-hover,
af|button::image-depressed {
  vertical-align: bottom;
  border: 0px transparent;
}

/* in ie images with vertical-align middle sit lower, and also cause text to sit lower as well,
   set to top for better and consistent display */
@agent ie {
  af|commandToolbarButton::image,
  af|commandToolbarButton::image-hover,
  af|commandToolbarButton::image-depressed {
    vertical-align: top;
  }
}

/* In 'normal' state the default image is visible and other state images are not. */
af|commandToolbarButton::image,
af|button::image {
  display:inline;
}

af|commandToolbarButton::image-hover,
af|commandToolbarButton::image-depressed,
af|button::image-hover,
af|button::image-depressed {
  display:none;
}

/* Text inside the button. Responsible for padding between icon and text. */
af|commandToolbarButton::text,
af|button::text {
  -tr-rule-ref: selector(".AFButtonText:alias");
  color: inherit;
}

/* Text for button that has text leading before icon. */
af|button::leading-text,
af|button:trailing::text {
  -tr-rule-ref: selector(".AFButtonLeadingText:alias");
}

/* IE 7 treats "inherit" as transparent so in this case we need we assign color directly to the
   span text */
@agent ie and (version: 7.0) {
  af|commandToolbarButton::text,
  af|button::text,
  af|button::leading-text,
  af|button:trailing::text {
    -tr-rule-ref: selector(".AFButtonForeground:alias");
  }
}

af|commandToolbarButton::access-key,
af|button::access-key {
  -tr-rule-ref: selector(".AFButtonAccessKeyStyle:alias");
}

/* Don't need special padding if no icon present. */
af|commandToolbarButton:text-only::text,
af|button:text-only::text {
  -tr-rule-ref: selector(".AFButtonTextOnlyText:alias");
}

/* Private - The cell containing the button link, used for popup buttons. */
af|commandToolbarButton::link-cell,
af|button::link-cell {
  display: inline-block;
  vertical-align: bottom;
}

/* The cell containing the dropdown icon used for popup buttons. */
af|commandToolbarButton::dropdown-cell,
af|button::dropdown-cell {
  padding: 0px 3px;
  border-color: black;
  border-left: solid 1px;
}

/* IE 7 does not support inline-block on divs, but we can trick it into doing the same thing by
   setting zoom 1 to have it enter its 'hasLayout' mode and use display inline. This only needs
   to be applied to button, as CTB uses a layout table instead of nested divs. */
@agent ie and (version: 7.0) {
  af|commandToolbarButton::link-cell,
  af|commandToolbarButton::dropdown-cell,
  af|button::link-cell,
  af|button::dropdown-cell {
    zoom: 1;
    display: inline;
  }
}

af|commandToolbarButton::dropdown-cell:rtl,
af|button::dropdown-cell:rtl {
  border-left: none;
  border-right: solid 1px;
}

/* For an actionDelivery none button, we don't show borders on a dropwdown-cell */
af|commandToolbarButton:action-disabled::dropdown-cell,
af|button:action-disabled::dropdown-cell {
  border-style: none;
}

/* The dropdown arrow used for popup buttons */
af|commandToolbarButton::dropdown-icon-style,
af|button::dropdown-icon-style {
  background-image: url('/afr/dropdown_n.png');
  width: 7px;
  min-height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  display: block;
}

/* Icon hook for users to replace dropdown-icon-style with another img or text */
af|commandToolbarButton::dropdown-icon,
af|button::dropdown-icon {
  content: inhibit;
}

af|body:high-contrast af|button::dropdown-icon-style:after,
af|body:high-contrast af|commandToolbarButton::dropdown-icon-style:after {
  content: url("/afr/dropdown_n_hc.png");
}

/* Hover on button */
@agent (touchScreen:none) {
  af|commandToolbarButton:hover,
  af|button:hover {
    -tr-rule-ref: selector(".AFButtonForegroundHover:alias");
    -tr-rule-ref: selector(".AFButtonBorderHover:alias");
    -tr-rule-ref: selector(".AFButtonBackgroundHover:alias");
  }
}

/* Selected and Depressed button text */
af|commandToolbarButton:depressed,
af|commandToolbarButton:selected,
af|commandToolbarButton:selected:active,
af|button:depressed,
af|button:selected,
af|button:selected:active {
  -tr-rule-ref: selector(".AFButtonForegroundDepressed:alias");
  -tr-rule-ref: selector(".AFButtonBorderActive:alias");
  -tr-rule-ref: selector(".AFButtonBackgroundActive:alias");
}

@agent (touchScreen:none) {
  af|commandToolbarButton:depressed:hover,
  af|commandToolbarButton:selected:hover,
  af|commandToolbarButton:selected:active:hover,
  af|button:depressed:hover,
  af|button:selected:hover,
  af|button:selected:active:hover {
    -tr-rule-ref: selector(".AFButtonForegroundDepressed:alias");
    -tr-rule-ref: selector(".AFButtonBorderActive:alias");
    -tr-rule-ref: selector(".AFButtonBackgroundActive:alias");
  }
}

/* Disabled buttons */
af|commandToolbarButton:disabled,
af|commandToolbarButton:active:disabled,
af|button:disabled,
af|button:active:disabled {
  -tr-rule-ref: selector(".AFButtonForegroundDisabled:alias");
  -tr-rule-ref: selector(".AFButtonBorderDisabled:alias");
  -tr-rule-ref: selector(".AFButtonBackgroundDisabled:alias");
}

af|body:high-contrast af|commandToolbarButton:disabled,
af|body:high-contrast af|commandToolbarButton:active:disabled,
af|body:high-contrast af|button:disabled,
af|body:high-contrast af|button:active:disabled {
  -tr-rule-ref: selector(".AFHighContrastTextDisabled:alias");
}

@agent (touchScreen:none) {
  af|commandToolbarButton:hover:disabled,
  af|commandToolbarButton:active:hover:disabled,
  af|button:hover:disabled,
  af|button:active:hover:disabled {
    -tr-rule-ref: selector(".AFButtonForegroundDisabled:alias");
    -tr-rule-ref: selector(".AFButtonBorderDisabled:alias");
    -tr-rule-ref: selector(".AFButtonBackgroundDisabled:alias");
  }
}

/* Style for focus (css focus pseudo-class) on buttons */
af|commandToolbarButton:focus,
af|button:focus {
  -tr-rule-ref: selector(".AFButtonBackgroundFocus:alias");
}

/* Buttons display inline-block off the toolbar, but display block when on the toolbar. */
af|toolbar af|goButton,
af|toolbar af|commandButton,
af|toolbar af|commandToolbarButton {
  display: block;
}

/* Below we now have our 'old' button styling. These are the styles applied to our <button>
   based buttons. These have not been mixed in with the new af:button skinning because they are
   deprecated and will go away soon and there are a few subtle differences based on the <div> vs.
   <button> rendering difference. CommandToolbarButton has been mixed in with the new af:button
   styles as this was easily done as CTB is also <div> based.

/* Default, enabled state for buttons. */
af|resetButton,
af|query::button,
.AFNoteWindowAllButton {
  -tr-rule-ref: selector(".AFButtonForeground:alias");
  -tr-rule-ref: selector(".AFButtonBorder:alias");
  -tr-rule-ref: selector(".AFButtonBackground:alias");
  -tr-rule-ref: selector(".AFButtonNative:alias");
}

.AFNoteWindowAllButton {
  padding: 3px 9px;
}

/* For iconic buttons we need different paddings. */
af|dialog::footer-button,
af|commandButton,
af|goButton {
  -tr-rule-ref: selector(".AFButtonForeground:alias");
  -tr-rule-ref: selector(".AFButtonBorder:alias");
  -tr-rule-ref: selector(".AFButtonBackground:alias");
  -tr-rule-ref: selector(".AFButtonNative:alias");
  padding: 1px 1px 0px 2px;
}

af|commandButton:text-only,
af|goButton:text-only {
  -tr-rule-ref: selector(".AFButtonNative:alias");
}

@agent ie {
  af|dialog::footer-button,
  af|commandButton,
  af|goButton {
    padding-top: 0px;
  }
}

@agent webkit {
  af|dialog::footer-button,
  af|commandButton,
  af|goButton {
    padding-right: 4px;
    padding-left: 5px;
  }

  af|commandButton::icon-style,
  af|dialog::footer-button-icon-style,
  af|goButton::icon-style {
    padding-bottom:1px;
    padding-top:1px;
    vertical-align:-30%;
  }
}

/* Google Chrome is based on webkit 525.19, so changing padding-top,
   padding-bottom for this webkit version as go/commandButtons are 23px
   high in Chrome. */
@agent webkit and (version: 525.19) {
  af|commandButton::icon-style,
  af|dialog::footer-button-icon-style,
  af|goButton::icon-style {
    padding-bottom:0px;
    padding-top:0px;
    vertical-align: middle;
  }
}

/* Style for icon on buttons, if specified. */
af|commandButton::icon-style,
af|dialog::footer-button-icon-style,
af|goButton::icon-style {
  vertical-align: middle;
  border-width:0px;
  padding-right: 2px;
}

af|commandButton::icon-style:rtl,
af|dialog::footer-button-icon-style:rtl,
af|goButton::icon-style:rtl {
  padding-left: 2px;
  padding-right: 0px;
}

/* private style for text on buttons that have icon and text */
af|commandButton::text-by-icon-style,
af|goButton::text-by-icon-style {
  padding-left: 3px;
}

af|commandButton::text-by-icon-style:rtl,
af|goButton::text-by-icon-style:rtl {
  padding-left: 0px;
  padding-right: 3px;
}

/* Style for mouse over (css hover pseudo-class) on buttons. */
@agent (touchScreen:none) {
  af|commandButton:hover,
  af|resetButton:hover,
  af|goButton:hover,
  af|dialog::footer-button:hover,
  af|query::button:hover,
  .AFNoteWindowAllButton:hover {
    -tr-rule-ref: selector(".AFButtonBorderHover:alias");
    -tr-rule-ref: selector(".AFButtonBackgroundHover:alias");
    -tr-rule-ref: selector(".AFButtonForegroundHover:alias");
    -tr-inhibit: background-image;
  }
}

/* Style for BLAF+ active (css focus pseudo-class) on buttons */
af|commandButton:focus,
af|resetButton:focus,
af|goButton:focus,
af|dialog::footer-button:focus,
af|query::button:focus,
.AFNoteWindowAllButton:focus {
  -tr-rule-ref: selector(".AFButtonBackgroundFocus:alias");
}

@agent (touchScreen:none) {
  af|commandButton:focus:hover,
  af|resetButton:focus:hover,
  af|goButton:focus:hover,
  af|dialog::footer-button:focus:hover,
  af|query::button:focus:hover,
  .AFNoteWindowAllButton:focus:hover {
    -tr-rule-ref: selector("af|commandButton:hover");
  }
}

/* Style for mouse down (css active pseudo-class) on buttons */
af|commandButton:active,
af|resetButton:active,
af|goButton:active,
af|dialog::footer-button:active,
af|query::button:active,
.AFNoteWindowAllButton:active {
  -tr-rule-ref: selector(".AFButtonBorderActive:alias");
  -tr-rule-ref: selector(".AFButtonBackgroundActive:alias");
  -tr-rule-ref: selector(".AFButtonForegroundDepressed:alias");
}

@agent (touchScreen:none) {
  af|commandButton:active:hover,
  af|resetButton:active:hover,
  af|goButton:active:hover,
  af|dialog::footer-button:active:hover,
  af|query::button:active:hover,
  .AFNoteWindowAllButton:active:hover,
  af|commandButton:active:hover:focus,
  af|resetButton:active:hover:focus,
  af|goButton:active:hover:focus,
  af|dialog::footer-button:active:hover:focus,
  af|query::button:active:hover:focus,
  .AFNoteWindowAllButton:active:hover:focus {
    -tr-rule-ref: selector(".AFButtonBorderActive:alias");
    -tr-rule-ref: selector(".AFButtonBackgroundActive:alias");
    -tr-rule-ref: selector(".AFButtonForegroundDepressed:alias");
    -tr-inhibit: background-image;
  }
}

/* Style for disabled (css disabled) on buttons */
af|commandButton:disabled,
af|commandButton:active:disabled,
af|commandButton:text-only:disabled,
af|resetButton:disabled,
af|resetButton:active:disabled,
af|dialog::footer-button:disabled,
af|dialog::footer-button:active:disabled,
af|query::button:disabled,
af|query::button:active:disabled,
af|goButton:disabled,
af|goButton:active:disabled,
af|goButton:text-only:disabled {
  -tr-rule-ref: selector(".AFButtonForegroundDisabled:alias");
  -tr-rule-ref: selector(".AFButtonBorderDisabled:alias");
  -tr-rule-ref: selector(".AFButtonBackgroundDisabled:alias");
}

@agent (touchScreen:none) {
  af|commandButton:disabled:hover,
  af|commandButton:active:disabled:hover,
  af|commandButton:text-only:disabled:hover,
  af|resetButton:disabled:hover,
  af|resetButton:active:disabled:hover,
  af|dialog::footer-button:disabled:hover,
  af|dialog::footer-button:active:disabled:hover,
  af|query::button:disabled:hover,
  af|query::button:active:disabled:hover,
  af|goButton:disabled:hover,
  af|goButton:active:disabled:hover,
  af|goButton:text-only:disabled:hover {
    -tr-rule-ref: selector(".AFButtonForegroundDisabled:alias");
    -tr-rule-ref: selector(".AFButtonBorderDisabled:alias");
    -tr-rule-ref: selector(".AFButtonBackgroundDisabled:alias");
  }
}

af|commandButton::access-key,
af|goButton::access-key,
af|dialog::footer-button-access-key,
af|resetButton::access-key,
af|query::button-access-key {
  -tr-rule-ref: selector(".AFButtonAccessKeyStyle:alias");
}

af|button:top,
af|button:bottom,
af|button:top::link,
af|button:bottom::link,
af|button:top::text,
af|button:bottom::text {
  white-space: normal;
}

/* end of buttons */

/* Style for busy state on navigation and command components to display progress cursor*/
af|breadCrumbs::step:busy,
af|button:busy a,
af|commandButton:busy,
af|commandImageLink:busy,
af|commandLink:busy,
af|commandNavigationItem:busy,
af|commandToolbarButton:busy a,
af|link:busy,
af|navigationPane-bar::link:busy,
af|navigationPane-buttons::link:busy,
af|navigationPane-choice::link:busy,
af|navigationPane-list::link:busy,
af|navigationPane-tabs::tab:busy a,
af|navigationPane-tabs::tab:busy div,
af|panelTabbed::tab:busy a,
af|panelTabbed::tab:busy div,
af|quickQuery:busy a,
af|query:busy button,
af|resetButton:busy,
af|train::stop:busy a,
af|train::stop:busy div,
af|trainButtonBar:busy {
  cursor : progress;
}

/* start links */

af|commandLink,
af|goLink,
af|messages::component-link,
af|calendar::list-day-of-month-link,
af|calendar::list-title-link,
af|calendar::month-grid-cell-header-day-link,
af|calendar::month-overflow-link,
af|calendar::week-header-day-link {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFLinkForeground:alias");
}

af|calendar::month-grid-cell:today af|calendar::month-grid-cell-header-day-link,
af|calendar::month-grid-cell:today:active-day af|calendar::month-grid-cell-header-day-link,
af|calendar::month-grid-cell:active-day af|calendar::month-grid-cell-header-day-link,
af|calendar::week-header-cell:today af|calendar::week-header-day-link,
af|calendar::week-header-cell:active-day af|calendar::week-header-day-link {
  -tr-rule-ref: selector(".AFLightestNeutralForeground:alias");
}


af|commandLink::access-key,
af|goLink::access-key{
  -tr-rule-ref: selector(".AFLinkAccessKeyStyle:alias");
}

af|goLink:visited {
  -tr-rule-ref: selector(".AFVisitedLinkForeground:alias");
}

af|messages::component-link:focus {
  -tr-rule-ref: selector(".AFActiveLinkBorder:alias");
}

@agent (touchScreen:none) {
  af|commandLink:hover,
  af|goLink:hover {
    -tr-rule-ref: selector(".AFLinkHover:alias");
  }
}
@agent ie and (version:9.0), ie and (version: 10){
  af|commandLink:focus,
  af|link:focus,
  af|commandImageLink:focus{
    outline: thin dotted -tr-property-ref(".AFShadowColor:alias","color");
  }
}
af|commandLink:active,
af|goLink:active,
af|messages::component-link:active,
af|calendar::list-day-of-month-link:active,
af|calendar::list-title-link:active,
af|calendar::month-grid-cell-header-day-link:active,
af|calendar::month-overflow-link:active,
af|calendar::week-header-day-link:active {
  -tr-rule-ref: selector(".AFActiveLinkForeground:alias");
}
af|commandLink:link:active,
af|goLink:link:active,
af|messages::component-link:link:active,
af|calendar::list-day-of-month-link:link:active,
af|calendar::list-title-link:link:active,
af|calendar::month-grid-cell-header-day-link:link:active,
af|calendar::month-overflow-link:link:active,
af|calendar::week-header-day-link:link:active {
  -tr-rule-ref: selector(".AFActiveLinkForeground:alias");
}

af|calendar:printable af|calendar::week-header-day-link:hover,
af|calendar:printable af|calendar::month-grid-cell-header-day-link:hover {
    cursor: default;
}

af|commandLink:disabled,
af|goLink:disabled {
  -tr-rule-ref: selector(".AFLinkDisabled:alias");
}

/* end links */


/* Simple Form Components */
/* ---------------------- */
/* inputText */
/* Underline the access key for inputText labels */
af|inputText::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* marker class to force nowrap on large labels*/
/* todo we should do this for all input components, but we are spot fixing right now to limit
the impact of the fix. the ideal solution is to add a labelStyle attribute on the components*/
af|inputText.AFNoWrapMarker::label,
af|inputSearch.AFNoWrapMarker::label,
af|inputListOfValues.AFNoWrapMarker::label,
af|inputComboboxListOfValues.AFNoWrapMarker::label,
af|selectOneChoice.AFNoWrapMarker::label {
  white-space: nowrap;
}

/* inputFile */
/* Underline the access key for inputFile labels */
af|inputFile::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* Private - style class for the name of the uploaded file, to ensure there is a padding between text and button */
af|inputFile::text:update
{
  cursor: default;
  padding-right: 8px;
}
/* we need to remove this, and add a margin to the button, as that's the only
   thing that works with both IE and FF in RTL. */
af|inputFile::text:update:rtl
{
  cursor: default;
  padding-right: 0px;
}
af|inputFile af|commandButton:rtl {
  margin-right: 8px;
}

af|inputFile::multiple-content{
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  float: left;
}

af|inputFile::multiple-upload-cancel-button {
  background-image: url('/afr/cancel_ena.png');
  background-color: transparent;
  border: none;
  width: 13px;
  height: 13px;
}

af|inputFile::multiple-upload-cancel-button:disabled {
  background-image: url('/afr/cancel_dis.png');
  background-color: transparent;
  border: none;
  width: 13px;
  height: 13px;
}

af|inputFile::multiple-upload-cancel-button:hover {
  background-image: url('/afr/cancel_ovr.png');
  background-color: transparent;
  border: none;
  width: 13px;
  height: 13px;
}

af|inputFile::multiple-upload-cancel-button:active {
  background-image: url('/afr/cancel_dwn.png');
  background-color: transparent;
  border: none;
  width: 13px;
  height: 13px;
}

af|inputFile::multiple-upload-retry-button {
  background-image: url('/afr/reload_ena.png');
  background-color: transparent;
  border: none;
  width: 13px;
  height: 13px;
}

af|inputFile::multiple-upload-retry-button:disabled {
  background-image: url('/afr/reload_dis.png');
  background-color: transparent;
  border: none;
  width: 13px;
  height: 13px;
}

af|inputFile::multiple-upload-retry-button:hover {
  background-image: url('/afr/reload_ovr.png');
  background-color: transparent;
  border: none;
  width: 13px;
  height: 13px;
}

af|inputFile::multiple-upload-retry-button:active {
  background-image: url('/afr/reload_dwn.png');
  background-color: transparent;
  border: none;
  width: 13px;
  height: 13px;
}

af|inputFile::multiple-upload-delete-button {
  background-image: url('/afr/cancel_ena.png');
  background-color: transparent;
  border: none;
  width: 13px;
  height: 13px;
}

af|inputFile::multiple-upload-delete-button:hover {
  background-image: url('/afr/cancel_ovr.png');
  background-color: transparent;
  border: none;
  width: 13px;
  height: 13px;
}

af|inputFile::multiple-upload-delete-button:disabled {
  background-image: url('/afr/cancel_dis.png');
  background-color: transparent;
  border: none;
  width: 13px;
  height: 13px;
}

af|inputFile::multiple-upload-delete-button:active {
  background-image: url('/afr/cancel_dwn.png');
  background-color: transparent;
  border: none;
  width: 13px;
  height: 13px;
}

@agent ie {

  af|inputFile::multiple-upload-cancel-button {
    padding: 6px;
  }

  af|inputFile::multiple-upload-retry-button {
    padding: 6px;
  }

  af|inputFile::multiple-upload-delete-button {
    padding: 6px;
  }

}

af|inputFile::multiple-upload-droparea-icon {
  content: url(/afr/dropArea_arrow_ena.png);
  width: 58px;
  height: 58px;
}

af|inputFile::multiple-upload-droparea-icon:hover {
  content: url(/afr/dropArea_arrow_ovr.png);
  width: 58px;
  height: 58px;
}

af|inputFile::multiple-upload-content-container {
  box-sizing: border-box;
  float: left;
}
@agent gecko {
  af|inputFile::multiple-upload-content-container {
   -tr-inhibit: box-sizing;
   -moz-box-sizing: border-box;
  }
}
af|inputFile::multiple-upload-content {
  background-color: #F3F7FA;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 0px;
  padding-right: 0px;
}

af|inputFile::multiple-upload-pane {
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
}

af|inputFile::multiple-upload-filelist {
  overflow-x:hidden;
  position:relative;
  top:0px;
  left:0px;
  padding-bottom: 3px;
}

@agent ie {

  af|inputFile::multiple-upload-filelist {
    -tr-inhibit: padding-bottom;
  }

}

af|inputFile::multiple-upload-dropzone {
  border-style: dashed;
  border-color: #CFD2D5;
  border-width: 1px;
  background-color: #F3F7FA;
}

af|inputFile::multiple-upload-drag {
  border:1px solid #A9DFF5;
  background-color: #CCF6FF;
  opacity: 0.8;
}

@agent ie {
  af|inputFile::multiple-upload-drag {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity:80);
  }
}

af|inputFile::multiple-upload-filename {
  color: #333333;
  width:8em;
  font-size: 11px;
  padding-bottom: 9px;
  vertical-align: middle;
  text-align: left;
}

af|inputFile::multiple-upload-filesize {
  color: #333333;
  width:4em;
  font-size: 11px;
  padding-bottom: 9px;
  padding-left:17px;
  padding-right:17px;
  vertical-align: middle;
  text-align: left;
}

af|inputFile::multiple-upload-progress {
  width:90px;
  height:18px;
  position:relative;
  left:0px;
  top:0px
}

af|inputFile::multiple-upload-progress-done {
  color: #333333;
  font-size: 11px;
  padding-bottom: 9px;
  vertical-align: middle;
  text-align: center;
  position:absolute;
  top:0px;
  left:40px;
}

af|inputFile::multiple-upload-progress-failed {
  -tr-rule-ref: selector(".AFErrorTextForeground:alias");
  font-size: 11px;
  padding-bottom: 9px;
  vertical-align: middle;
  text-align: center;
  position:absolute;
  top:0px;
  left:40px;
}

af|inputFile::multiple-upload-action {
  width:15px;
  height:18px;
  padding-left:6px;
}

af|inputFile::multiple-upload-progressbar-determinate {
  width:85px;
  height:18px;
  float:left;
}

af|inputFile::multiple-upload-progressbar-indeterminate-icon {
  content: url(/afr/indeterminate_progress_bar.gif);
  width: 85px;
  height: 5px;
}

af|inputFile::multiple-upload-progressbar-determinate-start-label {
  display: none;
}

af|inputFile::multiple-upload-progressbar-determinate-end-label {
  display: none;
}

af|inputFile::multiple-upload-toolbar
{
  text-align: right;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #E0E3E8;
}

/* richTextEditor */
/* Underline the access key for richTextEditor labels */
af|richTextEditor::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* This SHOULD be in base-desktop.xss, but it is not */
af|inputFile:disabled::label {
  -tr-rule-ref: selector(".AFLabelDisabled:alias");
}


/* the base skin has line-height. I don't want line-height, so inhibit it. */
af|inputDate
{
  -tr-layout: compactNavigator date compactTime timeZone;
  -tr-compatibility-layout: compactNavigator date compactTime timeZone;
  -tr-months: 1;
  -tr-inhibit: line-height;
  white-space: nowrap;
}

/* Underline the access key for inputDate labels */
af|inputDate::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}
/* For BLAF+'s inputText, we set the border color and padding. */
af|inputText::content,
af|inputDate::content,
af|inputListOfValues::content{
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFFormControlContentBackground:alias");
}

/* We want the multi-row version of inputText to stretch if its parent is a stretching container */
af|inputText:stretched::content {
  box-sizing: border-box;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
@agent gecko {
  af|inputText:stretched::content {
    -tr-inhibit: box-sizing;
    -moz-box-sizing: border-box;
  }
}
af|inputText:multi-row:stretched::content {
  height: 100%;
  margin: 0;
}

af|inputText::content {
  box-sizing: border-box;
}

@agent webkit and (touchScreen:none) {
  af|inputText:multi-row::content:ltr {
    padding-right: 8px;
  }

  af|inputText:multi-row::content:rtl {
    padding-left: 8px;
  }
}

@agent webkit and (touchScreen) and (version: 537.*) {
  af|inputText:multi-row::content:ltr {
    padding-right: 2px;
  }

  af|inputText:multi-row::content:rtl {
    padding-left: 2px;
  }
}

@agent gecko {
  af|inputText:multi-row::content:ltr {
    padding-right: 9px;
  }

  af|inputText:multi-row::content:rtl {
    padding-left: 9px;
  }
}

@agent gecko and (max-version: 28) {
  af|inputText::content {
    -tr-inhibit: box-sizing;
    -moz-box-sizing: border-box;
  }
}

@agent webkit {
  af|inputText:stretched::content {
    -webkit-box-sizing: border-box;
  }
}
@agent ie and (version: 7.0) {
  af|inputText:stretched::content {
    -tr-inhibit: box-sizing;
  }
  af|inputText:multi-row:stretched::content {
    margin-top: -1px;
    margin-bottom: 1px;
  }
}

@agent ie and (min-version: 11){
  af|inputText:multi-row::content {
      white-space: pre-wrap;
  }
}

/* we only want to style the border for FF, it messes up the button in IE */
@agent gecko {
  af|inputFile::content{
    -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  }
}
af|inputFile::content{
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFFormControlContentBackground:alias");
}

/**
 * override the line height inherited from trinidad
 */
@agent gecko {
  af|inputDate::content {
    -tr-inhibit: line-height;
  }
}

/** styles the clickable launch icon **/
/* af|inputDate::launch-icon can be used instead, but instead we.
use ::launch-icon-style with background-image */
/* stupid panelList::link is mapped to "panelList A" in trinidad making its
specificity (11) higher than af|inputDate::launch-icon-style (10) so I added
af|panelList to bump the specificity to 20 so it would get the correct font
size when inside a panelList. */
af|inputDate::launch-icon-style,
af|panelList af|inputDate::launch-icon-style {
 -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/timedate_ena.png");
  vertical-align: text-bottom;
  width: 16px;
  height: 16px;
  display: inline-block;
}

af|body:high-contrast af|inputDate::launch-icon-style:after,
af|body:high-contrast af|panelList af|inputDate::launch-icon-style:after {
  content: url("/afr/timedate_ena.png");
}

@agent ie {
  .AFNoteWindowHintText:rtl {
    white-space: pre;
  }
}

/* Use the above icon for the richcomponents-simple skin, therefore we need to null
   out Trinidad's simple icon */
af|inputDate::launch-icon {
  content: inhibit;
}

/** styles the mousedown launch icon **/
af|inputDate::launch-icon-style:active {
  background-image:url("/afr/timedate_dwn.png");
}
af|body:high-contrast af|inputDate::launch-icon-style:active:after {
  content: url("/afr/timedate_dwn.png");
}
/** styles the mouseover launch icon **/
@agent (touchScreen:none) {
  af|inputDate::launch-icon-style:hover {
    background-image:url("/afr/timedate_ovr.png");
  }
  af|body:high-contrast af|inputDate::launch-icon-style:hover:after {
    content: url("/afr/timedate_ovr.png");
  }
}

/** styles the disabled clickable launch icon **/
af|inputDate::launch-icon-style:disabled,
af|inputDate::launch-icon-style:disabled:active {
  background-image:url("/afr/timedate_dis.png");
}
af|body:high-contrast af|inputDate::launch-icon-style:disabled:after,
af|body:high-contrast af|inputDate::launch-icon-style:disabled:active:after {
  content: url("/afr/timedate_dis.png");
}

@agent (touchScreen:none) {
  af|inputDate::launch-icon-style:disabled:hover {
    background-image:url("/afr/timedate_dis.png");
  }
  af|body:high-contrast af|inputDate::launch-icon-style:disabled:hover:after {
    content: url("/afr/timedate_dis.png");
  }
}

/* Styles the timezone string displayed besides the inputDate field. To hide
  the timezone from users, use display:none */
af|inputDate::timezone {
  padding: 4px;
}

/** placeholder styles **/
/* html 5 only, and currently only supported in Firefox, Safari and Chrome */
@agent gecko and (max-version: 18) {
  af|inputColor::content:-moz-placeholder,
  af|inputComboboxListOfValues::content:-moz-placeholder,
  af|inputDate::content:-moz-placeholder,
  af|inputListOfValues::content:-moz-placeholder,
  af|inputNumberSpinbox::content:-moz-placeholder,
  af|inputText::content:-moz-placeholder {
    color: #737373;
  }
}
@agent gecko and (min-version: 19) {
  af|inputColor::content::-moz-placeholder,
  af|inputComboboxListOfValues::content::-moz-placeholder,
  af|inputDate::content::-moz-placeholder,
  af|inputListOfValues::content::-moz-placeholder,
  af|inputNumberSpinbox::content::-moz-placeholder,
  af|inputText::content::-moz-placeholder {
    color: #737373;
  }
}
@agent webkit {
  af|inputColor::content::-webkit-input-placeholder,
  af|inputComboboxListOfValues::content::-webkit-input-placeholder,
  af|inputDate::content::-webkit-input-placeholder,
  af|inputListOfValues::content::-webkit-input-placeholder,
  af|inputNumberSpinbox::content::-webkit-input-placeholder,
  af|inputText::content::-webkit-input-placeholder {
    color: #737373;
  }
}
@agent ie {
  af|inputColor::content:-ms-input-placeholder,
  af|inputComboboxListOfValues:content:-ms-input-placeholder,
  af|inputDate::content:-ms-input-placeholder,
  af|inputListOfValues::content:-ms-input-placeholder,
  af|inputNumberSpinbox::content:-ms-input-placeholder,
  af|inputText::content:-ms-input-placeholder {
    color: #737373;
  }
}


/** richTextEditor styles **/

/*
 * PRIVATE skinning key:
 * The "-tr-field-inline-style" property contains the styles that will be added to the body of the
 * IFRAME of the content field since the IFRAME has no skinning style sheets available.
 * This skinning key is private because ideally we would like to have a mechanism that would let us
 * assemble this style from the fonts defined in the -tr-rule-ref since the property approach
 * requires us to hard-code the font-family and the font-size separately from the -tr-rule-ref
 * definitions.
 * Explicit height and border-box sizing is needed in Gecko 1.8 to allow the user to start selecting
 * text by dragging from below the text in the editor up into where the text lives.  This works by
 * default in Internet Explorer 7.
 */
@agent gecko
{
  af|richTextEditor {
    -tr-field-inline-style: margin_0px padding_1px font-size_small font-family_Tahoma,Verdana,Arial,Helvetica,FreeSans,sans-serif -moz-box-sizing_border-box;
  }
}
@agent webkit
{
  af|richTextEditor {
    -tr-field-inline-style: margin_0px padding_1px font-size_small font-family_Tahoma,Verdana,Arial,Helvetica,FreeSans,sans-serif;
  }
}
@agent ie and (min-version: 9.1) {
  af|richTextEditor {
    -tr-field-inline-style: margin_0px padding_1px font-size_small font-family_Tahoma,Verdana,Arial,Helvetica,FreeSans,sans-serif;
  }
}
af|richTextEditor {
  -tr-field-inline-style: margin_0px padding_1px font-size_x-small font-family_Tahoma,Verdana,Arial,Helvetica,FreeSans,sans-serif;
}


/* PRIVATE skinning key:
 * These are TEMPORARY until the color picker supports overlay icons of its own.
 */
af|richTextEditor::foreground-color-overlay,
af|richTextEditor::background-color-overlay {
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  background-image: url("/afr/colorpickertxt_ena.png");
}
af|body:high-contrast af|richTextEditor::foreground-color-overlay:after,
af|body:high-contrast af|richTextEditor::background-color-overlay:after {
  content: url("/afr/colorpickertxt_ena.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 26px;
  height: 26px;
}
af|body:high-contrast af|richTextEditor::background-color-overlay:after {
  content: url("/afr/colorpicker_ena.png");
}
af|richTextEditor::background-color-overlay {
  background-image: url("/afr/colorpicker_ena.png");
}

/* Public */
af|richTextEditor::label {
  -tr-rule-ref: selector(".AFLabel:alias");
}

af|richTextEditor::toolbar-popup-input-container {
  display: block;
  padding: 3px;
}

af|richTextEditor::toolbar-popup-input {
  width: 100%;
}

af|richTextEditor::toolbar-popup-input af|inputText::label {
  text-align: left;
  width: 90px;
}

af|richTextEditor::toolbar-popup-input af|inputText::content {
  width: 100%;
}

af|richTextEditor:stretched {
  width: 100%;
  height: 100%;
}

af|richTextEditor:disabled::label {
  -tr-rule-ref: selector(".AFLabelDisabled:alias");
}

/* the content area including the toolbox */
af|richTextEditor::content {
  width: 440px;
  position: relative;
}

/* when toolbar is in popup mode it should be the same width as the editing area */
af|richTextEditor::toolbar-popup-container {
  width: 440px;
}

/* adjust the toolbar separator so that the toolbar icons fit without overflow */
af|richTextEditor::content af|toolbar::separator {
  padding: 0px 3px;
}

/* We should give the div a scrollbar if needed.  For RTE, it was decided that
 * for now we won't have a default height in read only mode.
 */
/* We also need to set the default font size to match the iframe body */
af|richTextEditor:read-only::content {
  overflow: auto;
  font-size: small;
}

/* The top and bottom margin of all the p tags present in rte is set to auto to fix the bug 17602550 */
af|column::data-cell af|richTextEditor:read-only::content  p,
af|column::banded-data-cell af|richTextEditor:read-only::content  p,
af|column::row-header-cell af|richTextEditor:read-only::content  p {
  margin-top: auto;
  margin-bottom: auto;
}

/* the parent container of the content-input node, used to put a border around the content */
af|richTextEditor::content-input-container {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  border-top-width: 0px;
}

/* the content input area excluding the toolbox, child of content-input-container
   Using font-size: inherit so the em height will be consistent between the iframe and textarea in
   Firefox. */
af|richTextEditor::content-input {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  font-size: inherit;
  margin: 0px;
  border-width: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
  resize: none;
}
af|richTextEditor::content-input-ck {
  visibility: hidden;
}
af|richTextEditor:disabled::content-input {
  background-color: transparent;
}

/* This is a PRIVATE skinning key that will need to be exposed as public if and when the toolbox
   is allowed to be customized to the point where there is no toolbox */
af|richTextEditor::missing-toolbox-border {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 0px;
}

/* commandToolbarButton icons used by the Rich Text Editor */
/* These icons must be URIIcons, not contextIcons to work.
   It's because in the RTE renderer, we pass the url to the commandToolbarButton.
   (This corresponds to what is done for PanelCollection.)
   */

af|richTextEditor::add-link-icon {
  content: url(/afr/link.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::remove-link-icon {
  content: url(/afr/unlink_ena.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::clear-styling-icon {
  content: url(/afr/clear.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::undo-icon {
  content: url(/afr/undo.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::undo-icon:rtl {
  content: url(/afr/undo_rtl.png);
}

af|richTextEditor::redo-icon {
  content: url(/afr/redo.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::redo-icon:rtl {
  content: url(/afr/redo_rtl.png);
}

af|richTextEditor::bold-icon {
  content: url(/afr/bold.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::italic-icon {
  content: url(/afr/italic.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::underline-icon {
  content: url(/afr/underline.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::subscript-icon {
  content: url(/afr/subscript.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::superscript-icon {
  content: url(/afr/superscript.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::strikethrough-icon {
  content: url(/afr/strikethrough.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::justify-left-icon {
  content: url(/afr/leftalign.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::justify-center-icon {
  content: url(/afr/centeralign.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::justify-right-icon {
  content: url(/afr/rightalign.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::justify-full-icon {
  content: url(/afr/fullalign.png);
  width: 16px;
  height: 16px;
}

af|richTextEditor::list-unordered-icon {
  content: url(/afr/bullist.png);
  width: 16px;
  height: 16px;
}


af|richTextEditor::list-unordered-icon:rtl {
  content: url(/afr/bullist_rtl.png);
}

af|richTextEditor::list-ordered-icon {
  content: url(/afr/numlist.png);
  width: 16px;
  height: 16px;
}


af|richTextEditor::list-ordered-icon:rtl {
  content: url(/afr/numlist_rtl.png);
}

af|richTextEditor::unindent-icon {
  content: url(/afr/unindent.png);
  width: 16px;
  height: 16px;
}

/* use opposite icon in cse of rtl */
af|richTextEditor::unindent-icon:rtl {
  content: url(/afr/unindent_rtl.png);
}

af|richTextEditor::indent-icon {
  content: url(/afr/indent.png);
  width: 16px;
  height: 16px;
}

/* use opposite icon in cse of rtl */
af|richTextEditor::indent-icon:rtl {
  content: url(/afr/indent_rtl.png);
}

/* rich text design mode icon */
af|richTextEditor::mode-rich-text-icon {
  content: url(/afr/designmode_ena.png);
}

/* rich text source code mode icon */
af|richTextEditor::mode-code-icon {
  content: url(/afr/codemode_ena.png);
}

af|richTextEditor::footer-facet {
  min-height: 20px;
  padding: 1px 5px;
}

af|richTextEditor::content-input-container-addendum-with-footer {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

/* end of commandToolbarButton icons used by the Rich Text Editor */

/** codeEditor styles **/
af|codeEditor::editor-fold-marker{
  font-family: arial;
}
af|codeEditor::editor-fold-gutter{
  width: 10px;
}
af|codeEditor::editor-fold-gutter-open,
af|codeEditor::editor-fold-gutter-folded {
  color: #555;
  cursor: pointer;
}
af|codeEditor::editor-fold-gutter-open-after {
  content: "\25BE";
}
af|codeEditor::editor-fold-gutter-folded-after {
  content: "\25B8";
}

af|codeEditor {
  -tr-markers-max-height : 20%;
}

/* Public */
af|codeEditor:stretched {
  width: 100%;
  height: 100%;
}

af|codeEditor::label {
  -tr-rule-ref: selector(".AFLabel:alias");
  padding: 0px;
}

af|codeEditor:disabled::label {
  -tr-rule-ref: selector(".AFLabelDisabled:alias");
}

af|codeEditor::content {
  font-size: inherit;
  box-sizing: border-box;
  position: relative;
}

@agent gecko {
  af|codeEditor::content {
    -tr-inhibit: box-sizing;
    -moz-box-sizing: border-box;
  }
}
@agent webkit {
  af|codeEditor::content {
    -tr-inhibit: box-sizing;
    -webkit-box-sizing: border-box;
  }
}

af|codeEditor::content:disabled {
  border-style: -tr-property-ref(".AFFormControlContentBorder:alias","border-style");
  border-width: -tr-property-ref(".AFFormControlContentBorder:alias","border-width");
  border-color: #B9BABC;
}

af|codeEditor::content-input {
  font-size: inherit;
  position: relative;
  min-height: 5em;
  width: 100%;
}

af|codeEditor::content-input-container {
  border-style: -tr-property-ref(".AFFormControlContentBorder:alias","border-style");
  border-width: -tr-property-ref(".AFFormControlContentBorder:alias","border-width");
  border-bottom-color: #E0E3E8;
  border-left-color: #BFBFBF;
  border-right-color: #E0E3E8;
  border-top: none;
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0px;
  box-sizing: border-box;
}

@agent gecko {
  af|codeEditor::content-input-container {
    -tr-inhibit: box-sizing;
    -moz-box-sizing: border-box;
  }
}

@agent webkit {
  af|codeEditor::content-input-container {
    -tr-inhibit: box-sizing;
    -webkit-box-sizing: border-box;
  }
}

af|codeEditor:disabled::content-input-container {
  background-color: #E2E5EC;
  border: none;
}

af|codeEditor:read-only::content-input-container {
  background-color: #EBEBEB;
}

af|codeEditor::editor-lines {
  text-align: left;
}

af|codeEditor::editor-text {
  unicode-bidi: bidi-override;
  direction: ltr;
  text-align: inherit;
}

af|codeEditor::editor-disabled-text {
  color: #6E7587;
}

af|codeEditor::editor-scroll {
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0px;
}
af|codeEditor::editor-code-completions {
  position: absolute;
  z-index: 10;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 2px;
  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  border-radius: 3px;
  border: 1px solid silver;
  background: white;
  font-size: 90%;
  font-family: monospace;
  max-height: 20em;
  overflow-y: auto;
}
af|codeEditor::editor-code-hint {
  margin: 0;
  padding: 0 4px;
  border-radius: 2px;
  max-width: 19em;
  overflow: hidden;
  white-space: pre;
  color: black;
  cursor: pointer;
}
af|codeEditor::editor-code-hint-active {
  background: #08f;
  color: white;
}
af|codeEditor::editor-gutter {
  background-color: #F7F7F7;
}

af|codeEditor::editor-gutter-linenumbers {
  color: #878787;
  width : 10px;
}

/* 1px solid transparent border is visible only in high contrast */
af|codeEditor::editor-search-highlight {
  background-color: #FFFFB5;
  border: 1px solid transparent;
}


af|codeEditor::editor-jump-highlight {
  background-color: #C1E6FF;
  border: 1px solid transparent;
}

af|codeEditor::editor-marker-error {
  border-bottom: 1px dotted #D3000D;
  background-color: #FFFFB5;
}

af|codeEditor::editor-marker-fatal {
  border-bottom: 1px dotted #D3000D;
  background-color: #FFFFB5;
}

af|codeEditor::editor-marker-warning {
  border-bottom: 1px dotted #FFAA2B;
  background-color: #FFFFB5;
}

af|codeEditor::editor-marker-info {
  border-bottom: 1px dotted #FFAA2B;
  background-color: #FFFFB5;
}

af|codeEditor::markers-label {
  -tr-rule-ref: selector(".AFLabel:alias");
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
  white-space: nowrap;
  color: #003D5B;
  padding-right: 10px;
}
af|codeEditor::editor-breakpoints {
  width: 8px;
}
af|codeEditor::editor-codemirror {
  height : 100%;
}
af|codeEditor::markers-content-container {
  border-style: -tr-property-ref(".AFFormControlContentBorder:alias","border-style");
  border-width: -tr-property-ref(".AFFormControlContentBorder:alias","border-width");
  border-top-color: #BFBFBF;
  border-bottom-color: #E0E3E8;
  border-left-color: #BFBFBF;
  border-right-color: #E0E3E8;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0px;
  overflow: auto;
  box-sizing: border-box;
}
af|codeEditor::small-fatal-icon {
  content: url("/afr/small-error.png");
}
af|codeEditor::small-error-icon {
  content: url("/afr/small-error.png");
}
af|codeEditor::small-warning-icon {
  content: url("/afr/small-warning.png");
}
af|codeEditor::small-info-icon {
  content: url("/afr/small-info.png");
}
af|codeEditor::message-summary-text {
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  font-size: 14px;
  padding-left: 10px;
  padding-right:10px;
}
af|codeEditor::message-icon-style {
  padding : 2px 4px 5px 5px;
}

@agent gecko {
  af|codeEditor::markers-content-container {
    -tr-inhibit: box-sizing;
    -moz-box-sizing: border-box;
  }
}

@agent webkit {
  af|codeEditor::markers-content-container {
    -tr-inhibit: box-sizing;
    -webkit-box-sizing: border-box;
  }
}

af|codeEditor::markers-content {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  font-size: inherit;
}

af|codeEditor::markers-text {
  text-decoration: none;
  color: #0D4988;
}

af|codeEditor::markers-text:hover {
  text-decoration: underline;
  color: #0D4988;
}

af|codeEditor::find-replace-dialog af|panelFormLayout::label-cell {
  white-space: nowrap;
}

af|toolbox.AFCodeEditorToolbox {
  border-style: -tr-property-ref(".AFFormControlContentBorder:alias","border-style");
  border-width: -tr-property-ref(".AFFormControlContentBorder:alias","border-width");
  border-top-color: #BFBFBF;
  border-bottom-color: #D9D9D9;
  border-left-color: #BFBFBF;
  border-right-color: #E0E3E8;
}

af|toolbox.AFCodeEditorToolboxDisabled {
  background-color: #F7F7F7;
  border-bottom: 1px solid #B9BABC;
}

/* Styles the toolbar search field */
af|inputText.AFCodeEditorSearchToolbar af|inputText::content {
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  font-size:8pt;
  width: 112px;
}

/* Styles the search field */
af|inputText.AFCodeEditorSearch af|inputText::content {
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  font-size:8pt;
  width: 10em;
}

/* Styles the replace field */
af|inputText.AFCodeEditorReplace af|inputText::content {
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  font-size:8pt;
  width: 10em;
}

/* Styles the jump to field */
af|inputText.AFCodeEditorJump af|inputText::content {
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  font-size:8pt;
  width: 40px;
}

af|codeEditor::jump-icon {
  content: url("/afr/fusion/quickQuery_ena.png");
}
af|codeEditor::jump-icon:disabled {
  content: url("/afr/fusion/quickQuery_dis.png");
}
af|codeEditor::jump-icon:active {
  content: url("/afr/fusion/quickQuery_dwn.png");
}
af|codeEditor::jump-icon:hover {
  content: url("/afr/fusion/quickQuery_ovr.png");
}

af|codeEditor::search-icon {
  content: url("/afr/find_ena.png");
}
af|codeEditor::search-icon:disabled {
  content: url("/afr/find_dis.png");
}
af|codeEditor::search-icon:active {
  content: url("/afr/find_dwn.png");
}
af|codeEditor::search-icon:hover {
  content: url("/afr/find_ovr.png");
}

af|codeEditor::search-next-icon {
  content: url("/afr/nextitem_ena.png");
}
af|codeEditor::search-next-icon:disabled {
  content: url("/afr/nextitem_dis.png");
}
af|codeEditor::search-next-icon:active {
  content: url("/afr/nextitem_dwn.png");
}
af|codeEditor::search-next-icon:hover {
  content: url("/afr/nextitem_ovr.png");
}

af|codeEditor::search-previous-icon {
  content: url("/afr/previousitem_ena.png");
}
af|codeEditor::search-previous-icon:disabled {
  content: url("/afr/previousitem_dis.png");
}
af|codeEditor::search-previous-icon:active {
  content: url("/afr/previousitem_dwn.png");
}
af|codeEditor::search-previous-icon:hover {
  content: url("/afr/previousitem_ovr.png");
}
af|codeEditor::search-next-icon:rtl {
  content: url("/afr/previousitem_ena.png");
}
af|codeEditor::search-next-icon:disabled:rtl {
  content: url("/afr/previousitem_dis.png");
}
af|codeEditor::search-next-icon:active:rtl {
  content: url("/afr/previousitem_dwn.png");
}
af|codeEditor::search-next-icon:hover:rtl {
  content: url("/afr/previousitem_ovr.png");
}

af|codeEditor::search-previous-icon:rtl {
  content: url("/afr/nextitem_ena.png");
}
af|codeEditor::search-previous-icon:disabled:rtl {
  content: url("/afr/nextitem_dis.png");
}
af|codeEditor::search-previous-icon:active:rtl {
  content: url("/afr/nextitem_dwn.png");
}
af|codeEditor::search-previous-icon:hover:rtl {
  content: url("/afr/nextitem_ovr.png");
}
af|codeEditor::undo-icon {
  content: url(/afr/undo.png);
  width: 16px;
  height: 16px;
}

af|codeEditor::undo-icon:disabled {
  content: url(/afr/undo_dis.png);
  width: 16px;
  height: 16px;
}

af|codeEditor::undo-icon:active {
  content: url(/afr/undo_dwn.png);
  width: 16px;
  height: 16px;
}

af|codeEditor::undo-icon:hover {
  content: url(/afr/undo_ovr.png);
  width: 16px;
  height: 16px;
}

af|codeEditor::undo-icon:rtl {
  content: url(/afr/undo_rtl.png);
}

af|codeEditor::undo-icon:disabled:rtl {
  content: url(/afr/undo_dis_rtl.png);
  width: 16px;
  height: 16px;
}

af|codeEditor::undo-icon:active:rtl {
  content: url(/afr/undo_dwn_rtl.png);
  width: 16px;
  height: 16px;
}

af|codeEditor::undo-icon:hover:rtl {
  content: url(/afr/undo_ovr_rtl.png);
  width: 16px;
  height: 16px;
}

af|codeEditor::redo-icon {
  content: url(/afr/redo.png);
  width: 16px;
  height: 16px;
}

af|codeEditor::redo-icon:disabled {
  content: url(/afr/redo_dis.png);
  width: 16px;
  height: 16px;
}

af|codeEditor::redo-icon:active {
  content: url(/afr/redo_dwn.png);
  width: 16px;
  height: 16px;
}

af|codeEditor::redo-icon:hover {
  content: url(/afr/redo_ovr.png);
  width: 16px;
  height: 16px;
}

af|codeEditor::redo-icon:rtl {
  content: url(/afr/redo_rtl.png);
}

af|codeEditor::redo-icon:disabled:rtl {
  content: url(/afr/redo_dis_rtl.png);
  width: 16px;
  height: 16px;
}

af|codeEditor::redo-icon:active:rtl {
  content: url(/afr/redo_dwn_rtl.png);
  width: 16px;
  height: 16px;
}

af|codeEditor::redo-icon:hover:rtl {
  content: url(/afr/redo_ovr_rtl.png);
  width: 16px;
  height: 16px;
}

/* end of codeEditor styles */

af|inputColor::input-chooser-wrapper
{
  -tr-rule-ref:selector(".AFFormComponentContentInline:alias");
}
/* Used for when there's an error or fatal message on components with input
text fields */
af|inputColor:fatal::input-chooser-wrapper,
af|richTextEditor:fatal::content,
af|codeEditor:fatal::content,
af|inputText:fatal::content,
af|inputListOfValues:fatal::content,
af|inputComboboxListOfValues:fatal::container,
af|inputNumberSpinbox:fatal::content,
af|inputDate:fatal::content,
af|inputFile:fatal::content,
af|inputFile:update:fatal::content,
af|inputFile:fatal::multiple-content,
af|chooseDate::spinbox-content:fatal,
af|selectOneListbox:fatal::content,
af|selectManyListbox:fatal::content,
af|selectManyShuttle:fatal::content,
af|selectOrderShuttle:fatal::content {
  -tr-rule-ref:selector(".AFFormComponentOutlineFatal:alias");
}
af|inputColor:error::input-chooser-wrapper,
af|richTextEditor:error::content,
af|codeEditor:error::content,
af|inputText:error::content,
af|inputListOfValues:error::content,
af|inputComboboxListOfValues:error::container,
af|inputNumberSpinbox:error::content,
af|inputDate:error::content,
af|inputFile:error::content,
af|inputFile:update:error::content,
af|inputFile:error::multiple-content,
af|chooseDate::spinbox-content:error,
af|selectOneListbox:error::content,
af|selectManyListbox:error::content,
af|selectManyShuttle:error::content,
af|selectOrderShuttle:error::content {
    -tr-rule-ref:selector(".AFFormComponentOutlineError:alias");
}
/* selectManyChoice is a composite component so needs two elements with styles for fatal/error. */
af|selectManyChoice:fatal::control {
    -tr-rule-ref:selector(".AFFormComponentOutlineFatal:alias");
}
af|selectManyChoice:error::control {
    -tr-rule-ref:selector(".AFFormComponentOutlineError:alias");
}

af|selectOneChoice:fatal::content,
af|selectOneChoice:fatal::content-border,
af|selectOneChoice:fatal::compact-content {
  -tr-rule-ref:selector(".AFFormComponentOutlineFatal:alias");
  margin: 1px;
}
af|selectOneChoice:error::content,
af|selectOneChoice:error::compact-content,
af|selectOneChoice:error::content-border {
  -tr-rule-ref:selector(".AFFormComponentOutlineError:alias");
  margin: 1px;
}

/* This is here to make space for the error border */
af|selectOneChoice:fatal,
af|selectOneChoice:error,
af|selectOneChoice:warning {
  font-size: 13px;
}

af|selectOneChoice:busy {
  pointer-events: none;
}

/* Used for when there's an error or fatal message on checkboxes and radios */
af|selectBooleanCheckbox:error::content-input,
af|selectBooleanRadio:error::content-input,
af|selectManyCheckbox:error::content-input,
af|selectOneRadio:error::content-input {
 -tr-rule-ref:selector(".AFErrorBackground:alias");
}
af|selectBooleanCheckbox:fatal::content-input,
af|selectBooleanRadio:fatal::content-input,
af|selectManyCheckbox:fatal::content-input,
af|selectOneRadio:fatal::content-input {
  -tr-rule-ref:selector(".AFFatalBackground:alias");
}

/* Used for when there's a warning on components with input text fields */
af|inputColor:warning::input-chooser-wrapper,
af|richTextEditor:warning::content,
af|codeEditor:warning::content,
af|inputText:warning::content,
af|inputListOfValues:warning::content,
af|inputComboboxListOfValues:warning::container,
af|inputNumberSpinbox:warning::content,
af|inputDate:warning::content,
af|inputFile:warning::content,
af|inputFile:update:warning::content,
af|inputFile:warning::multiple-content,
af|selectOneListbox:warning::content,
af|selectManyListbox:warning::content,
af|selectManyShuttle:warning::content,
af|selectOrderShuttle:warning::content {
  -tr-rule-ref:selector(".AFFormComponentOutlineWarning:alias");
}
/* selectManyChoice is a composite component so needs two elements with styles for warning. */
af|selectManyChoice:warning::control {
  -tr-rule-ref:selector(".AFFormComponentOutlineWarning:alias");
}
af|selectOneChoice:warning::content,
af|selectOneChoice:warning::compact-content,
af|selectOneChoice:warning::content-border {
  -tr-rule-ref:selector(".AFFormComponentOutlineWarning:alias");
  margin: 1px;
}

/* Used for when there's a warning on checkboxes and radios */
af|selectBooleanCheckbox:warning::content-input,
af|selectBooleanRadio:warning::content-input,
af|selectManyCheckbox:warning::content-input,
af|selectOneRadio:warning::content-input {
  -tr-rule-ref:selector(".AFWarningBackground:alias");
}


/* Used for when there is info and confirmations */
af|inputColor:info::input-chooser-wrapper,
af|richTextEditor:info::content,
af|codeEditor:info::content,
af|inputText:info::content,
af|inputListOfValues:info::content,
af|inputComboboxListOfValues:info::container,
af|inputNumberSpinbox:info::content,
af|inputDate:info::content,
af|inputFile:info::content,
af|inputFile:info::multiple-content,
af|selectOneListbox:info::content,
af|selectManyChoice:info::content,
af|selectManyListbox:info::content,
af|selectOneChoice:info::content,
af|inputColor:confirmation::input-chooser-wrapper,
af|richTextEditor:confirmation::content,
af|codeEditor:confirmation::content,
af|inputText:confirmation::content,
af|inputDate:confirmation::content,
af|inputFile:confirmation::content,
af|inputListOfValues:confirmation::content,
af|inputComboboxListOfValues:confirmation::container,
af|inputNumberSpinbox:confirmation::content,
af|selectOneListbox:confirmation::content,
af|selectManyChoice:confirmation::content,
af|selectManyListbox:confirmation::content,
af|selectOneChoice:confirmation::content {
}

/* used for inputText when disabled.  */
af|richTextEditor:disabled::content,
af|codeEditor:disabled::content,
af|inputText:disabled::content,
af|inputNumberSpinbox:disabled::content,
af|inputDate:disabled::content,
af|inputColor:disabled::content,
af|inputComboboxListOfValues:disabled::container,
af|inputListOfValues:disabled::content {
  -tr-rule-ref: selector(".AFDarkAccentForeground:alias");
  -tr-rule-ref: selector(".AFFormControlContentBackgroundDisabled:alias");
}

/* webkit messes with the disabled color so we will use -webkit-text-fill-color when disabled */
@agent webkit {
  af|inputText:disabled::content,
  af|inputNumberSpinbox:disabled::content,
  af|inputDate:disabled::content,
  af|inputColor:disabled::content,
  af|inputComboboxListOfValues:disabled::container,
  af|inputListOfValues:disabled::content {
    -webkit-text-fill-color: -tr-property-ref(".AFDarkAccentForeground:alias","color");
  }
}
/* navigationPane */
/* root style class for all hints in the navigationPane component */
af|navigationPane {
  -tr-layout-type: conveyor;
}

/* navigationPane - override IE-specific height from Trinidad that causes problems in rich client */
@agent ie {
  af|navigationPane {
    height: 25px;
  }
}

/* inner-most wrapper element for each nav item */
af|navigationPane-buttons,
af|navigationPane-list,
af|navigationPane-choice {
  display: inline;
}

af|navigationPane-bar {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  display: block;
  position: relative;
  min-height: 22px;
  min-width: 50px;
}

@agent gecko {
  af|navigationPane-buttons,
  af|navigationPane-list,
  af|navigationPane-choice {
    display: block;
  }
}

af|navigationPane-bar::body {
  -tr-rule-ref: selector(".AFFloatStart:alias");
}

/* private - can be made public
 * styles the content of the navigationPane hint=choice
 */
af|navigationPane-choice::dropdown-panel-content {
  display: block;
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFTextBackground:alias");
  border: none;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

@agent ie {
  af|navigationPane-choice::dropdown-panel-content {
    display: inline-block;
  }
}

af|navigationPane-bar::access-key,
af|navigationPane-buttons::access-key,
af|navigationPane-choice::access-key,
af|navigationPane-list::access-key,
af|navigationPane-tabs::access-key{
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}
af|navigationPane-bar::icon-style,
af|navigationPane-buttons::icon-style,
af|navigationPane-choice::icon-style,
af|navigationPane-list::icon-style,
af|navigationPane-tabs::icon-style{
  padding-right: 5px;
  vertical-align: middle;
  border: 0px;
}

/* style for navItem's icon when going rtl*/
af|navigationPane-bar::icon-style:rtl,
af|navigationPane-buttons::icon-style:rtl,
af|navigationPane-choice::icon-style:rtl,
af|navigationPane-list::icon-style:rtl,
af|navigationPane-tabs::icon-style:rtl{
  padding-left: 5px;
  vertical-align: middle;
  border: 0px;
}

/* cell for a background image separator icon */
af|navigationPane-buttons::separator-icon-style,
af|navigationPane-bar::separator-icon-style {
  width: 2px;
  height: 17px;
  margin-left: 6px;
  margin-right: 6px;
}

/* Use a text icon for the separator icon in the simple skin */
af|navigationPane-buttons::separator-icon,
af|navigationPane-bar::separator-icon {
  content: "|";
}

/* nav pane links are considered 'global links' */
af|navigationPane-buttons::link,
af|navigationPane-bar::link {
  -tr-rule-ref: selector(".AFGlobalLink:alias");
  text-decoration: none;
  white-space: nowrap;
}

af|navigationPane-list::link {
  -tr-rule-ref: selector(".AFGlobalLink:alias");
  text-decoration: none;
  padding-top: 3px;
  padding-bottom: 3px;
  display: block;
  white-space: nowrap;
}

af|navigationPane-choice::link {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  padding: 2px;
  -tr-rule-ref: selector(".AFGlobalLink:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  vertical-align:baseline;
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
  text-decoration: none;
  white-space: nowrap;
  display: block;
}

af|navigationPane-bar::link:selected,
af|navigationPane-buttons::link:selected,
af|navigationPane-list::link:selected {
  font-weight: bold;
}

af|body:high-contrast af|navigationPane-buttons::link:selected {
  border-width: 2px;
}

af|navigationPane-choice::link:selected {
  font-weight: bold;
  padding: 2px;
}

@agent (touchScreen:none) {
  af|navigationPane-bar::link:hover,
  af|navigationPane-buttons::link:hover,
  af|navigationPane-list::link:hover {
    -tr-rule-ref: selector(".AFLinkHover:alias");
  }
}

af|navigationPane-bar::link:disabled,
af|navigationPane-buttons::link:disabled,
af|navigationPane-list::link:disabled {
  -tr-rule-ref: selector(".AFGlobalLinkDisabled:alias");
}

af|navigationPane-choice::link:disabled {
  -tr-rule-ref: selector(".AFGlobalLinkDisabled:alias");
  padding: 2px;
}

@agent (touchScreen:none) {
  af|navigationPane-bar::link:disabled:hover,
  af|navigationPane-buttons::link:disabled:hover,
  af|navigationPane-list::link:disabled:hover {
    text-decoration: none;
  }
}

af|body:high-contrast af|navigationPane-bar::link:disabled,
af|body:high-contrast af|navigationPane-buttons::link:disabled,
af|body:high-contrast af|navigationPane-list::link:disabled,
af|body:high-contrast af|navigationPane-choice::link:disabled {
  -tr-rule-ref: selector(".AFHighContrastTextDisabled:alias");
}

af|navigationPane-list::bullet {
  width: 17px;
  vertical-align: middle;
  background-image: url('/afr/status_bullet.png');
  background-position: center center;
  background-repeat: no-repeat
}

af|navigationPane-choice::label {
  -tr-rule-ref: selector(".AFLabelTextForeground:alias");
  margin-right: 5px;
}

af|navigationPane-choice:disabled::label {
  -tr-rule-ref: selector(".AFLabelTextForegroundDisabled:alias");
}

af|navigationPane-choice::label:rtl {
  margin-left: 5px;
}

af|navigationPane-choice::dropdown-cell {
  border: 1px solid #000000;
  font-size: 5px;
}

@agent ie {
  af|navigationPane-choice::dropdown-cell {
    font-size: 8px;
  }
}
@agent webkit {
  af|navigationPane-choice::dropdown-cell {
    display: inline-block;
  }
}

/* Dropdown button style for the anchor - includes image and sizing
   Image width is 7px, +1px for left border, +1px for right border */
af|navigationPane-choice::dropdown-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image: url('/afr/spinbox_arrow_dn.png');
  background-position: center;
  font-size: 5px;
  padding: 0px 9px 0px 0px;
  cursor: default;
}
@agent ie {
  af|navigationPane-choice::dropdown-icon-style {
    padding-right: 11px;
  }
}
@agent webkit {
  af|navigationPane-choice::dropdown-icon-style {
    display: inline-block;
    height: 5px;
  }
}

af|body:high-contrast af|navigationPane-choice::dropdown-icon-style:after {
  content: url('/afr/dropdown_n_hc.png');
}

/* Dropdown button style for the anchor - image changes on hover */
af|navigationPane-choice::dropdown-icon-style:active {
  cursor: default;
}

@agent (touchScreen:none) {
  af|navigationPane-choice::dropdown-icon-style:hover {
    cursor: default;
  }
}

/* Icon hook for users to replace dropdown-icon-style with another img or text */
af|navigationPane-choice::dropdown-icon {
  content: inhibit;
}

/* Private-can be public
 * Styles the popup list
 */
af|navigationPane-choice::dropdown-panel {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  padding:1px;
}
/* Private-can be public
 * Styles the popup in scrollable mode. the item
 * number threshold specifies how many items
 * should cause the scroll bar to appear. The height
 * should roughly allow 15 items in the current style
 */
af|navigationPane-choice::dropdown-panel-scroll {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  height:265px;
  overflow:auto;
  padding:1px;
  -tr-item-number-threshold:15;
}

/* style for navigationPane when hint="tabs"
   -tr-tab-bar-height can be used in page layouts, consumed by managed-beans through EL so you don't
   need to hard-code dimensions in your pages which may vary depending on the skin being used. */
af|navigationPane-tabs {
  -tr-tab-bar-height: 2em; /* height of tab bars (used in page template managed-beans) */
  /*
   We tack on a "font-size:small" onto af|navigationPane-tabs.  This way, "em" units
   on dimensions will always resolve to a consistent number of pixels by the browser no matter
   what the font-size is set to on the parent element of the navigationPane.
  */
  font-size: small;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* style for navigationPane when hint="tabs" */
af|navigationPane-tabs::header {
  overflow: hidden;
}

af|navigationPane-bar::start-overflow-icon,
af|navigationPane-bar::end-overflow-icon  {
  content: inhibit;
}

/* end navigationPane */

/* breadcrumb styles */
/* root style class for breadCrumbs component */
af|breadCrumbs {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  -tr-show-last-item: true;
  display: block;
  position: relative;
  min-width: 50px;
  min-height: 22px;
}

/* The foll. browser specific styles override styles
 defined in base-desktop.xss */

@agent gecko,webkit {
  af|breadCrumbs {
    display:block;
  }
  af|breadCrumbs af|breadCrumbs::body {
    display:block;
  }
}

af|breadCrumbs::access-key{
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

af|breadCrumbs::icon-style{
  padding-right: 5px;
  vertical-align: middle;
  border: 0px;
}

af|breadCrumbs::icon-style:rtl{
  padding-left: 5px;
  vertical-align: middle;
  border: 0px;
}

/* the > separator */
af|breadCrumbs::separator {
  cursor: default;
  -tr-rule-ref: selector(".AFLinkForeground:alias");
}

af|breadCrumbs::separator-icon {
  content: ' > ';
}

/* each step is a link, no diferentiation for selected */
af|breadCrumbs::step {
  cursor: pointer;
  -tr-rule-ref: selector(".AFLinkForeground:alias");
  text-decoration: none;
  white-space: nowrap;
}

@agent (touchScreen:none) {
  af|breadCrumbs::step:hover {
    text-decoration:underline;
  }
}

af|breadCrumbs::body {
  -tr-rule-ref: selector(".AFFloatStart:alias");
}

af|breadCrumbs::step:disabled {
  -tr-rule-ref: selector(".AFTextForeground:alias");
  cursor: default;
  text-decoration: none;
}

af|body:high-contrast af|breadCrumbs::step:disabled {
  -tr-rule-ref: selector(".AFHighContrastTextDisabled:alias");
}

af|body:high-contrast af|breadCrumbs::step:selected {
  opacity: 1.0;
}

af|breadCrumbs::overflow-indicator {
  display:none;

  position:absolute;
  left:0px;
  top:0px;
  z-index:2;

  width: 16px;
  min-height: 16px;
  /*height: 100%;*/
  background-image: url("/afr/breadcrumb_of_n.png");
  background-repeat: no-repeat;
  background-position: center center;
}

af|breadCrumbs::overflow-indicator:rtl {
  left: auto;
  right: 0px;
}

/* Icon hook for users to replace overflow-indicator with another img or text */
af|breadCrumbs::overflow-icon {
   content: url("/afr/breadcrumb_of_n_hc.png");
}

af|breadCrumbs::overflow-indicator > img {
  display:none;
}

af|body:high-contrast af|breadCrumbs::overflow-indicator,
af|body:high-contrast af|breadCrumbs::overflow-indicator:disabled {
   background-image: none;
}

@agent (touchScreen:none) {
af|body:high-contrast af|breadCrumbs::overflow-indicator:hover {
   background-image: none;
  }
}

af|body:high-contrast af|breadCrumbs::overflow-indicator > img {
  display:inline;
}

/* padding for the breadCrumbs overflow panel */
af|breadCrumbs::overflow-container {
  padding:5px;
}

@agent (touchScreen:none) {
  af|breadCrumbs::overflow-indicator:hover {
    background-image: url("/afr/breadcrumb_overflow_mo.png");
  }
}

af|breadCrumbs::overflow-indicator:depressed {
  background-image: url("/afr/breadcrumb_overflow_md.png");
}

/*
 * image styles
 */
af|image {
  border: 0px;
}

@agent gecko
{
   /* The Alt text should not be displayed while loading the image */
   af|image:-moz-loading {
    visibility: hidden;
   }
}

/* media styles */
af|media {
  display: inline-block;
}

/*****  Start: New Train Styles *****/
/* Train Alias-es */
.AFTrainDefault:alias
{
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-visible-stop-count: 6;
}

/* top level style class for the train component. The property to set the number
   of visible stops in a train is -tr-visible-stop-count. */
af|train {
  -tr-rule-ref: selector(".AFTrainDefault:alias");
  margin-left:  auto;
  margin-right: auto;
  -tr-visible-stop-count:6;
  overflow-x:   hidden;
  overflow-y:   auto;
  min-width:    100px;
  min-height:   16px;
  position: relative;
}
/* styles the body of the train including the start and end overflow indicators */
af|train::body, af|train-vertical::body {
  float:left;
  position: relative;
}

af|train::body:rtl, af|train-vertical::body:rtl {
  float:right;
}

/*
  private - For overflow, everything except the little overflow arrow images are private

  When there is overflow the overflow-body (e.g. tab-boundary) should have a padding
  to make room for the overflow icons
*/
af|breadCrumbs:start-overflow::body:ltr,
af|navigationPane-tabs::header:start-overflow af|navigationPane-tabs::body:ltr,
af|navigationPane-tabs::header:end-overflow af|navigationPane-tabs::body:rtl,
af|navigationPane-bar:start-overflow af|navigationPane-bar::body:ltr,
af|navigationPane-bar:end-overflow af|navigationPane-bar::body:rtl,
af|panelTabbed::header:start-overflow af|panelTabbed::tab-boundary:ltr,
af|panelTabbed::header:end-overflow af|panelTabbed::tab-boundary:rtl,
af|panelTabbed::footer:start-overflow af|panelTabbed::tab-boundary:ltr,
af|panelTabbed::footer:end-overflow af|panelTabbed::tab-boundary:rtl,
af|train:start-overflow::body:ltr,
af|train:end-overflow::body:rtl {
  padding-left: 16px;
}

af|navigationPane-tabs::header:overflow-droplist af|navigationPane-tabs::body:rtl,
af|panelTabbed::header:overflow-droplist af|panelTabbed::tab-boundary:rtl,
af|panelTabbed::footer:overflow-droplist af|panelTabbed::tab-boundary:rtl {
  padding-left: 21px;
}

af|breadCrumbs:start-overflow::body:rtl,
af|navigationPane-tabs::header:end-overflow af|navigationPane-tabs::body:ltr,
af|navigationPane-tabs::header:start-overflow af|navigationPane-tabs::body:rtl,
af|navigationPane-bar:end-overflow af|navigationPane-bar::body:ltr,
af|navigationPane-bar:start-overflow af|navigationPane-bar::body:rtl,
af|panelTabbed::header:end-overflow af|panelTabbed::tab-boundary:ltr,
af|panelTabbed::header:start-overflow af|panelTabbed::tab-boundary:rtl,
af|panelTabbed::footer:end-overflow af|panelTabbed::tab-boundary:ltr,
af|panelTabbed::footer:start-overflow af|panelTabbed::tab-boundary:rtl,
af|train:end-overflow::body:ltr,
af|train:start-overflow::body:rtl {
  padding-right: 16px;
}

af|navigationPane-tabs::header:overflow-droplist af|navigationPane-tabs::body:ltr,
af|panelTabbed::header:overflow-droplist af|panelTabbed::tab-boundary:ltr,
af|panelTabbed::footer:overflow-droplist af|panelTabbed::tab-boundary:ltr {
  padding-right: 21px;
}

af|train-vertical:start-overflow af|train-vertical::body {
  padding-top: 22px;
}

af|train-vertical:end-overflow af|train-vertical::body {
  padding-bottom: 22px;
}

/* private
   NOTE: Toolbar/menuBar ::content only renders when overflow is on. This means styling, especially
   padding or margins, should not be done here as it will not show up for non-overflow toolbars! */
af|breadCrumbs::content,
af|navigationPane-tabs::content,
af|navigationPane-bar::content,
af|toolbar::content,
af|train::content {
}

/* private - the element that identifies and contains the content that fits within the compressed
             layout. This is the content shown to the user. */
af|panelTabbed::viewable-tabs {
}

/* The div containing the overflow indicator button (if needed) to pull up the overflow items popup
   for the component. */
af|navigationPane-tabs::start-overflow-indicator,
af|panelTabbed::start-overflow-indicator,
af|train::start-overflow-indicator,
af|train-vertical::top-overflow-indicator,
af|navigationPane-tabs::end-overflow-indicator,
af|panelTabbed::end-overflow-indicator,
af|train::end-overflow-indicator,
af|train-vertical::bottom-overflow-indicator,
af|toolbar::overflow-indicator,
af|menuBar::overflow-indicator {
  display: none;
  position: absolute;
  width: 15px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center center;
}

af|panelTabbed::start-overflow-indicator,
af|panelTabbed::end-overflow-indicator {
  top: 50%;
  margin-top: -9px;
}

af|navigationPane-tabs::start-overflow-indicator,
af|navigationPane-tabs::end-overflow-indicator {
  top: 0;
  margin-top: 4px;
}

af|panelTabbed::header af|panelTabbed::start-overflow-indicator,
af|panelTabbed::header af|panelTabbed::end-overflow-indicator {
  top: auto;
  bottom: 50%;
  margin-top: 0px;
  margin-bottom: -9px;
}

af|navigationPane-bar::start-overflow-indicator,
af|navigationPane-bar::end-overflow-indicator {
  display: none;
  position: absolute;
  width: 13px;
  height: 13px;
  top: 0;
  margin-top: 3px;
  background-repeat: no-repeat;
  background-position: center center;
}

af|navigationPane-bar::start-overflow-indicator img,
af|navigationPane-bar::end-overflow-indicator img{
  display: none;
}

af|body:high-contrast af|navigationPane-bar::start-overflow-indicator img,
af|body:high-contrast af|navigationPane-bar::end-overflow-indicator img {
  display: block;
}

@agent ie
{
  af|navigationPane-bar::end-overflow-indicator,
  af|navigationPane-bar::start-overflow-indicator {
    margin-top: 1px;
  }
}

/* public - For overflow, everything except the little overflow arrow images are private */
af|navigationPane-tabs::start-overflow-indicator:ltr,
af|navigationPane-tabs::end-overflow-indicator:rtl,
af|navigationPane-bar::start-overflow-indicator:ltr,
af|navigationPane-bar::end-overflow-indicator:rtl,
af|panelTabbed::start-overflow-indicator:ltr,
af|panelTabbed::end-overflow-indicator:rtl,
af|train::start-overflow-indicator:ltr,
af|train::end-overflow-indicator:rtl,
af|toolbar::overflow-indicator:rtl,
af|menuBar::overflow-indicator:rtl {
  -tr-rule-ref: selector(".AFOverflowImageHorizontalStart:alias");
}

af|navigationPane-tabs::end-overflow-indicator:ltr,
af|navigationPane-tabs::start-overflow-indicator:rtl,
af|navigationPane-bar::end-overflow-indicator:ltr,
af|navigationPane-bar::start-overflow-indicator:rtl,
af|panelTabbed::end-overflow-indicator:ltr,
af|panelTabbed::start-overflow-indicator:rtl,
af|train::end-overflow-indicator:ltr,
af|train::start-overflow-indicator:rtl,
af|toolbar::overflow-indicator:ltr,
af|menuBar::overflow-indicator:ltr {
  -tr-rule-ref: selector(".AFOverflowImageHorizontalEnd:alias");
}

@agent (touchScreen:none) {
  af|navigationPane-tabs::start-overflow-indicator:hover:ltr,
  af|navigationPane-tabs::end-overflow-indicator:hover:rtl,
  af|navigationPane-bar::start-overflow-indicator:hover:ltr,
  af|navigationPane-bar::end-overflow-indicator:hover:rtl,
  af|panelTabbed::start-overflow-indicator:hover:ltr,
  af|panelTabbed::end-overflow-indicator:hover:rtl,
  af|train::start-overflow-indicator:hover:ltr,
  af|train::end-overflow-indicator:hover:rtl,
  af|toolbar::overflow-indicator:hover:rtl,
  af|menuBar::overflow-indicator:hover:rtl {
    -tr-rule-ref: selector(".AFOverflowImageHorizontalStartHover:alias");
  }
}

af|navigationPane-tabs::start-overflow-indicator:depressed:ltr,
af|navigationPane-tabs::end-overflow-indicator:depressed:rtl,
af|navigationPane-bar::start-overflow-indicator:depressed:ltr,
af|navigationPane-bar::end-overflow-indicator:depressed:rtl,
af|panelTabbed::start-overflow-indicator:depressed:ltr,
af|panelTabbed::end-overflow-indicator:depressed:rtl,
af|train::start-overflow-indicator:depressed:ltr,
af|train::end-overflow-indicator:depressed:rtl,
af|toolbar::overflow-indicator:depressed:rtl,
af|menuBar::overflow-indicator:depressed:rtl {
  -tr-rule-ref: selector(".AFOverflowImageHorizontalStartDepressed:alias");
}

@agent (touchScreen:none) {
  af|navigationPane-tabs::start-overflow-indicator:hover:depressed:ltr,
  af|navigationPane-tabs::end-overflow-indicator:hover:depressed:rtl,
  af|navigationPane-bar::start-overflow-indicator:hover:depressed:ltr,
  af|navigationPane-bar::end-overflow-indicator:hover:depressed:rtl,
  af|panelTabbed::start-overflow-indicator:hover:depressed:ltr,
  af|panelTabbed::end-overflow-indicator:hover:depressed:rtl,
  af|train::start-overflow-indicator:hover:depressed:ltr,
  af|train::end-overflow-indicator:hover:depressed:rtl,
  af|toolbar::overflow-indicator:hover:depressed:rtl,
  af|menuBar::overflow-indicator:hover:depressed:rtl {
    -tr-rule-ref: selector(".AFOverflowImageHorizontalStartDepressed:alias");
  }
}

@agent (touchScreen:none) {
  af|navigationPane-tabs::end-overflow-indicator:hover:ltr,
  af|navigationPane-tabs::start-overflow-indicator:hover:rtl,
  af|navigationPane-bar::end-overflow-indicator:hover:ltr,
  af|navigationPane-bar::start-overflow-indicator:hover:rtl,
  af|panelTabbed::end-overflow-indicator:hover:ltr,
  af|panelTabbed::start-overflow-indicator:hover:rtl,
  af|train::end-overflow-indicator:hover:ltr,
  af|train::start-overflow-indicator:hover:rtl,
  af|toolbar::overflow-indicator:hover,
  af|menuBar::overflow-indicator:hover {
    -tr-rule-ref: selector(".AFOverflowImageHorizontalEndHover:alias");
  }
}

af|navigationPane-tabs::end-overflow-indicator:depressed:ltr,
af|navigationPane-tabs::start-overflow-indicator:depressed:rtl,
af|navigationPane-bar::end-overflow-indicator:depressed:ltr,
af|navigationPane-bar::start-overflow-indicator:depressed:rtl,
af|panelTabbed::end-overflow-indicator:depressed:ltr,
af|panelTabbed::start-overflow-indicator:depressed:rtl,
af|train::end-overflow-indicator:depressed:ltr,
af|train::start-overflow-indicator:depressed:rtl,
af|toolbar::overflow-indicator:depressed,
af|menuBar::overflow-indicator:depressed {
  -tr-rule-ref: selector(".AFOverflowImageHorizontalEndDepressed:alias");
}

@agent (touchScreen:none) {
  af|navigationPane-tabs::end-overflow-indicator:hover:depressed:ltr,
  af|navigationPane-tabs::start-overflow-indicator:hover:depressed:rtl,
  af|navigationPane-bar::end-overflow-indicator:hover:depressed:ltr,
  af|navigationPane-bar::start-overflow-indicator:hover:depressed:rtl,
  af|panelTabbed::end-overflow-indicator:hover:depressed:ltr,
  af|panelTabbed::start-overflow-indicator:hover:depressed:rtl,
  af|train::end-overflow-indicator:hover:depressed:ltr,
  af|train::start-overflow-indicator:hover:depressed:rtl,
  af|toolbar::overflow-indicator:hover:depressed,
  af|menuBar::overflow-indicator:hover:depressed {
    -tr-rule-ref: selector(".AFOverflowImageHorizontalEndDepressed:alias");
  }
}

af|train-vertical::top-overflow-indicator {
  -tr-rule-ref: selector(".AFOverflowImageVerticalStart:alias");
  top: 0px;
  bottom: auto;
}
@agent (touchScreen:none) {
  af|train-vertical::top-overflow-indicator:hover {
    -tr-rule-ref: selector(".AFOverflowImageVerticalStartHover:alias");
  }
  af|train-vertical::top-overflow-indicator:hover:depressed {
    -tr-rule-ref: selector(".AFOverflowImageVerticalStartDepressed:alias");
  }
}
af|train-vertical::top-overflow-indicator:depressed {
  -tr-rule-ref: selector(".AFOverflowImageVerticalStartDepressed:alias");
}

af|train-vertical::bottom-overflow-indicator {
  -tr-rule-ref: selector(".AFOverflowImageVerticalEnd:alias");
  bottom: 0px;
  top: auto;
}
@agent (touchScreen:none) {
  af|train-vertical::bottom-overflow-indicator:hover {
    -tr-rule-ref: selector(".AFOverflowImageVerticalEndHover:alias");
  }
  af|train-vertical::bottom-overflow-indicator:hover:depressed {
    -tr-rule-ref: selector(".AFOverflowImageVerticalEndDepressed:alias");
  }
}
af|train-vertical::bottom-overflow-indicator:depressed {
  -tr-rule-ref: selector(".AFOverflowImageVerticalEndDepressed:alias");
}

af|train-vertical::top-overflow-indicator:ltr,
af|train-vertical::bottom-overflow-indicator:ltr {
  left: 0;
  right: auto;
}
af|train-vertical::top-overflow-indicator:rtl,
af|train-vertical::bottom-overflow-indicator:rtl {
  right: 0;
  left: auto;
}
/* private - For overflow, everything except the little overflow arrow images are private
   start-overflow and end-overflow pseudo-classes indicate that there is overflow on the start or
   end side of the component (start side is the left side in ltr and the right side in rtl) when
   there is overflow on a side the indicator should become visible. */
af|breadCrumbs:start-overflow::overflow-indicator,
af|menuBar:end-overflow::overflow-indicator,
af|navigationPane-tabs::header:start-overflow af|navigationPane-tabs::start-overflow-indicator,
af|navigationPane-tabs::header:end-overflow af|navigationPane-tabs::end-overflow-indicator,
af|navigationPane-tabs::header:overflow-droplist af|navigationPane-tabs::droplist-indicator,
af|navigationPane-bar:start-overflow af|navigationPane-bar::start-overflow-indicator,
af|navigationPane-bar:end-overflow af|navigationPane-bar::end-overflow-indicator,
af|panelTabbed::header:start-overflow af|panelTabbed::start-overflow-indicator,
af|panelTabbed::header:end-overflow af|panelTabbed::end-overflow-indicator,
af|panelTabbed::header:overflow-droplist af|panelTabbed::droplist-indicator,
af|panelTabbed::footer:start-overflow af|panelTabbed::start-overflow-indicator,
af|panelTabbed::footer:end-overflow af|panelTabbed::end-overflow-indicator,
af|panelTabbed::footer:overflow-droplist af|panelTabbed::droplist-indicator,
af|toolbar:end-overflow::overflow-indicator,
af|train:start-overflow::start-overflow-indicator,
af|train:end-overflow::end-overflow-indicator,
af|train-vertical:start-overflow::top-overflow-indicator,
af|train-vertical:end-overflow::bottom-overflow-indicator {
  display: block;
}

/*
  private - For overflow, everything except the little overflow arrow images are private

  overflow containers should not be visible when they are inside the component
  they will get placed inside a popup which is outside of the component
  so when the container is popped up these style rules don't apply anymore
*/
af|breadCrumbs af|breadCrumbs::overflow-container,
af|navigationPane-tabs af|navigationPane-tabs::overflow-container,
af|navigationPane-bar af|navigationPane-bar::overflow-container,
af|panelTabbed af|panelTabbed::overflow-container,
af|toolbar af|toolbar::overflow-container,
af|menuBar af|menuBar::overflow-container,
af|train af|train::overflow-container,
af|train-vertical af|train-vertical::overflow-container {
  display: none;
}

/* When popped up (e.g. when not a direct child of the normal root element, the tab overflow
   containers are visible and are supposed to have padding. */
af|navigationPane-tabs::overflow-container,
af|panelTabbed::overflow-container {
  padding: 8px;
}

af|navigationPane-tabs::conveyor-belt-container .AFConveyorBeltElement,
af|panelTabbed::conveyor-belt-container .AFConveyorBeltElement,
af|navigationPane-tabs::overflow-container .AFOverflowElement,
af|panelTabbed::overflow-container .AFOverflowElement {
  display: block;
  padding: 2px;
  text-decoration: none;
}

@agent (touchScreen:none) {
  af|panelTabbed::conveyor-belt-container .AFConveyorBeltElement:hover,
  af|navigationPane-tabs::conveyor-belt-container .AFConveyorBeltElement:hover,
  af|panelTabbed::overflow-container .AFOverflowElement:hover,
  af|navigationPane-tabs::overflow-container .AFOverflowElement:hover {
    -tr-rule-ref: selector(".AFLinkHover:alias");
  }
}

/* Disabled conveyor belt and overflow item looks the same, but no underline on hover */
af|panelTabbed::conveyor-belt-container .AFConveyorBeltElementDisabled,
af|navigationPane-tabs::conveyor-belt-container .AFConveyorBeltElementDisabled,
af|panelTabbed::overflow-container .AFOverflowElementDisabled,
af|navigationPane-tabs::overflow-container .AFOverflowElementDisabled {
  display: block;
  padding: 2px;
  text-decoration: none;
}

@agent (touchScreen:none) {
  af|navigationPane-tabs::conveyor-belt-container .AFConveyorBeltElement af|navigationPane-tabs::tab-link:active:hover,
  af|panelTabbed::conveyor-belt-container .AFConveyorBeltElement:active:hover,
  af|navigationPane-tabs::overflow-container .AFOverflowElement af|navigationPane-tabs::tab-link:active:hover,
  af|panelTabbed::overflow-container .AFOverflowElement:active:hover {
    -tr-rule-ref: selector(".AFActiveLinkForeground:alias");
  }

  af|navigationPane-tabs::conveyor-belt-container .AFConveyorBeltElement af|navigationPane-tabs::tab-link:disabled:active:hover,
  af|navigationPane-tabs::overflow-container .AFOverflowElement af|navigationPane-tabs::tab-link:disabled:active:hover {
    -tr-rule-ref: selector(".AFLinkDisabled:alias");
  }
}

/* private - For overflow, everything except the little overflow arrow images are private */
af|menuBar::overflow-container,
af|toolbar::overflow-container {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  padding:4px;
}

/* conveyor belt skinning */

/* By default overflow is visible to allow negative margin alignments. But when layout is compressed,
   change overflow to hidden so we don't overlap the conveyor belt buttons. */
af|navigationPane-tabs::header:conveyor-belt af|navigationPane-tabs::body,
af|panelTabbed::header:conveyor-belt af|panelTabbed::tab-boundary,
af|panelTabbed::footer:conveyor-belt af|panelTabbed::tab-boundary {
  overflow: hidden;
}

/* private - container for converyor belt content. This is the element scrolled by the conveyor
   belt - as such it requires white-space nowrap so contents do not wrap. It is also needs to have
   display block (which it inherits) as some browsers cannot scroll inline-block correctly. Overflow
   visible allows content that overflows due to negative margin to still be visible. */
af|navigationPane-tabs::header af|navigationPane-tabs::conveyor-belt-content,
af|panelTabbed::header af|panelTabbed::conveyor-belt-content,
af|panelTabbed::footer af|panelTabbed::conveyor-belt-content {
  overflow: visible;
  white-space: nowrap;
}

/* Increase padding for presence of conveyor belt buttons. 16px for the cb left button, 32px for
   the cb right button (16px) and droplist button (16px). */
af|panelTabbed::header:conveyor-belt:ltr,
af|panelTabbed::footer:conveyor-belt:ltr,
af|navigationPane-tabs::header:conveyor-belt:ltr {
  padding-left: 16px;
  padding-right: 32px;
}

af|panelTabbed::header:conveyor-belt:rtl,
af|panelTabbed::footer:conveyor-belt:rtl,
af|navigationPane-tabs::header:conveyor-belt:rtl {
  padding-left: 32px;
  padding-right: 16px;
}

/* Always have top 20px padding, up conveyor belt button appears in this space. */
af|panelTabbed::tabs {
  padding-top: 20px;
}

af|panelTabbed::tabs:conveyor-belt {
  padding-top: 0px;
}

/* By default overflow is visible to allow negative margin alignments. But when layout is compressed,
   change overflow to hidden so we don't overlap the conveyor belt buttons.  */
af|navigationPane-tabs::header:conveyor-belt af|navigationPane-tabs::conveyor-belt-content,
af|panelTabbed::header:conveyor-belt af|panelTabbed::conveyor-belt-content,
af|panelTabbed::footer:conveyor-belt af|panelTabbed::conveyor-belt-content {
  overflow: hidden;
}

/* For vertical, just have overflow hidden all the time. */
af|panelTabbed::conveyor-belt-content {
  position: relative;
  overflow: hidden;
}

/* private - Conveyor belt content are position relative (like overflow). They are inline-block
  and float none so they can overflow off to the right in a partial state. */
af|navigationPane-tabs::conveyor-belt-content af|navigationPane-tabs::tab,
af|panelTabbed::header af|panelTabbed::conveyor-belt-content af|panelTabbed::tab,
af|panelTabbed::footer af|panelTabbed::conveyor-belt-content af|panelTabbed::tab {
  position: relative;
  overflow: hidden;
  display: inline-block;
  float: none;
}

/* private - An extra item present as an end item on the conveyor belt. This item is needed for
   IE 8 to display properly with conveyor belt support. */
af|navigationPane-tabs::conveyor-belt-spacer,
af|panelTabbed::conveyor-belt-spacer {
    display: none;
    position: relative;
}

@agent ie and (version: 8.0) {
  af|navigationPane-tabs::conveyor-belt-spacer,
  af|panelTabbed::conveyor-belt-spacer {
    display: inline-block;
    width: 100%;
    height: 0px;
  }
}

/* conveyor belt buttons */

af|navigationPane-tabs::start-conveyor-belt-indicator,
af|panelTabbed::start-conveyor-belt-indicator,
af|navigationPane-tabs::end-conveyor-belt-indicator,
af|panelTabbed::end-conveyor-belt-indicator,
af|panelTabbed::droplist-indicator,
af|navigationPane-tabs::droplist-indicator {
  display: none;
  position: absolute;
  width: 16px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center center;
}

af|panelTabbed::start-conveyor-belt-indicator,
af|panelTabbed::end-conveyor-belt-indicator,
af|panelTabbed::droplist-indicator {
  top: 50%;
  margin-top: -9px;
}

af|navigationPane-tabs::start-conveyor-belt-indicator,
af|navigationPane-tabs::end-conveyor-belt-indicator,
af|navigationPane-tabs::droplist-indicator {
  top: 0;
  margin-top: 4px;
}

af|panelTabbed::header af|panelTabbed::start-conveyor-belt-indicator,
af|panelTabbed::header af|panelTabbed::end-conveyor-belt-indicator,
af|panelTabbed::header af|panelTabbed::droplist-indicator {
  top: auto;
  bottom: 50%;
  margin-top: 0px;
  margin-bottom: -9px;
}

/* LTR: we want start conveyor at left: 0px, end conveyor at right: 16px, droplist at right: 0px
   RTL: we want droplist at left: 0px, end conveyor at left: 16px, start conveyor at right: 0px  */
af|panelTabbed::start-conveyor-belt-indicator:ltr,
af|navigationPane-tabs::start-conveyor-belt-indicator:ltr,
af|panelTabbed::droplist-indicator:rtl,
af|navigationPane-tabs::droplist-indicator:rtl {
  left: 0px;
}

af|panelTabbed::end-conveyor-belt-indicator:ltr,
af|navigationPane-tabs::end-conveyor-belt-indicator:ltr {
  right: 16px;
}

af|panelTabbed::end-conveyor-belt-indicator:rtl,
af|navigationPane-tabs::end-conveyor-belt-indicator:rtl  {
  left: 16px;
}

af|panelTabbed::droplist-indicator:ltr,
af|navigationPane-tabs::droplist-indicator:ltr,
af|panelTabbed::start-conveyor-belt-indicator:rtl,
af|navigationPane-tabs::start-conveyor-belt-indicator:rtl {
  right: 0px;
}

/* vertical conveyor belt buttons */

/* For simple skin, giving this a height of 20px, which matches the 20px padding-top on
   af|panelTabbed_tabs */
af|panelTabbed::top-conveyor-belt-indicator,
af|panelTabbed::bottom-conveyor-belt-indicator {
  display: none;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center center;
}

af|panelTabbed::top-conveyor-belt-indicator {
  -tr-rule-ref: selector(".AFConveyorBeltImageVerticalTop:alias");
}

af|panelTabbed::bottom-conveyor-belt-indicator {
  -tr-rule-ref: selector(".AFConveyorBeltImageVerticalBottom:alias");
}

@agent (touchScreen:none) {
  af|panelTabbed::top-conveyor-belt-indicator:hover {
    -tr-rule-ref: selector(".AFConveyorBeltImageVerticalTopHover:alias");
  }

  af|panelTabbed::bottom-conveyor-belt-indicator:hover {
    -tr-rule-ref: selector(".AFConveyorBeltImageVerticalBottomHover:alias");
  }
}

af|panelTabbed::top-conveyor-belt-indicator:depressed {
  -tr-rule-ref: selector(".AFConveyorBeltImageVerticalTopDepressed:alias");
}

af|panelTabbed::bottom-conveyor-belt-indicator:depressed {
  -tr-rule-ref: selector(".AFConveyorBeltImageVerticalBottomDepressed:alias");
}

@agent (touchScreen:none) {
  af|panelTabbed::top-conveyor-belt-indicator:depressed:hover {
    -tr-rule-ref: selector(".AFConveyorBeltImageVerticalTopDepressed:alias");
  }
  af|panelTabbed::bottom-conveyor-belt-indicator:depressed:hover {
    -tr-rule-ref: selector(".AFConveyorBeltImageVerticalBottomDepressed:alias");
  }
}

af|panelTabbed::top-conveyor-belt-indicator:disabled {
  -tr-rule-ref: selector(".AFConveyorBeltImageVerticalTopDisabled:alias");
}

af|panelTabbed::bottom-conveyor-belt-indicator:disabled {
  -tr-rule-ref: selector(".AFConveyorBeltImageVerticalBottomDisabled:alias");
}

@agent (touchScreen:none) {
  af|panelTabbed::top-conveyor-belt-indicator:disabled:hover {
    -tr-rule-ref: selector(".AFConveyorBeltImageVerticalTopDisabled:alias");
  }
  af|panelTabbed::bottom-conveyor-belt-indicator:disabled:hover {
    -tr-rule-ref: selector(".AFConveyorBeltImageVerticalBottomDisabled:alias");
  }
}

af|navigationPane-tabs::start-conveyor-belt-indicator:ltr,
af|navigationPane-tabs::end-conveyor-belt-indicator:rtl,
af|panelTabbed::start-conveyor-belt-indicator:ltr,
af|panelTabbed::end-conveyor-belt-indicator:rtl {
  -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalStart:alias");
}

af|navigationPane-tabs::end-conveyor-belt-indicator:ltr,
af|navigationPane-tabs::start-conveyor-belt-indicator:rtl,
af|panelTabbed::end-conveyor-belt-indicator:ltr,
af|panelTabbed::start-conveyor-belt-indicator:rtl {
  -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalEnd:alias");
}

@agent (touchScreen:none) {
  af|navigationPane-tabs::start-conveyor-belt-indicator:hover:ltr,
  af|navigationPane-tabs::end-conveyor-belt-indicator:hover:rtl,
  af|panelTabbed::start-conveyor-belt-indicator:hover:ltr,
  af|panelTabbed::end-conveyor-belt-indicator:hover:rtl {
    -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalStartHover:alias");
  }

  af|navigationPane-tabs::end-conveyor-belt-indicator:hover:ltr,
  af|navigationPane-tabs::start-conveyor-belt-indicator:hover:rtl,
  af|panelTabbed::end-conveyor-belt-indicator:hover:ltr,
  af|panelTabbed::start-conveyor-belt-indicator:hover:rtl {
    -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalEndHover:alias");
  }
}

af|navigationPane-tabs::start-conveyor-belt-indicator:depressed:ltr,
af|navigationPane-tabs::end-conveyor-belt-indicator:depressed:rtl,
af|panelTabbed::start-conveyor-belt-indicator:depressed:ltr,
af|panelTabbed::end-conveyor-belt-indicator:depressed:rtl {
  -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalStartDepressed:alias");
}

@agent (touchScreen:none) {
  af|navigationPane-tabs::start-conveyor-belt-indicator:depressed:hover:ltr,
  af|navigationPane-tabs::end-conveyor-belt-indicator:depressed:hover:rtl,
  af|panelTabbed::start-conveyor-belt-indicator:depressed:hover:ltr,
  af|panelTabbed::end-conveyor-belt-indicator:depressed:hover:rtl {
    -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalStartDepressed:alias");
  }
}

af|navigationPane-tabs::end-conveyor-belt-indicator:depressed:ltr,
af|navigationPane-tabs::start-conveyor-belt-indicator:depressed:rtl,
af|panelTabbed::end-conveyor-belt-indicator:depressed:ltr,
af|panelTabbed::start-conveyor-belt-indicator:depressed:rtl {
  -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalEndDepressed:alias");
}

@agent (touchScreen:none) {
  af|navigationPane-tabs::end-conveyor-belt-indicator:depressed:hover:ltr,
  af|navigationPane-tabs::start-conveyor-belt-indicator:depressed:hover:rtl,
  af|panelTabbed::end-conveyor-belt-indicator:depressed:hover:ltr,
  af|panelTabbed::start-conveyor-belt-indicator:depressed:hover:rtl {
    -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalEndDepressed:alias");
  }
}

af|navigationPane-tabs::start-conveyor-belt-indicator:disabled:ltr,
af|navigationPane-tabs::end-conveyor-belt-indicator:disabled:rtl,
af|panelTabbed::start-conveyor-belt-indicator:disabled:ltr,
af|panelTabbed::end-conveyor-belt-indicator:disabled:rtl,
af|navigationPane-tabs::start-conveyor-belt-indicator:disabled:hover:ltr,
af|navigationPane-tabs::end-conveyor-belt-indicator:disabled:hover:rtl,
af|panelTabbed::start-conveyor-belt-indicator:disabled:hover:ltr,
af|panelTabbed::end-conveyor-belt-indicator:disabled:hover:rtl {
  -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalStartDisabled:alias");
}


af|navigationPane-tabs::end-conveyor-belt-indicator:disabled:ltr,
af|navigationPane-tabs::start-conveyor-belt-indicator:disabled:rtl,
af|panelTabbed::end-conveyor-belt-indicator:disabled:ltr,
af|panelTabbed::start-conveyor-belt-indicator:disabled:rtl,
af|navigationPane-tabs::end-conveyor-belt-indicator:disabled:hover:ltr,
af|navigationPane-tabs::start-conveyor-belt-indicator:disabled:hover:rtl,
af|panelTabbed::end-conveyor-belt-indicator:disabled:hover:ltr,
af|panelTabbed::start-conveyor-belt-indicator:disabled:hover:rtl {
  -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalEndDisabled:alias");
}

af|panelTabbed::droplist-indicator,
af|navigationPane-tabs::droplist-indicator {
  -tr-rule-ref: selector(".AFDroplistImage:alias");
}

@agent (touchScreen:none) {
  af|navigationPane-tabs::droplist-indicator:hover,
  af|panelTabbed::droplist-indicator:hover {
    -tr-rule-ref: selector(".AFDroplistImageHover:alias");
    -tr-rule-ref: selector(".AFMediumBackground:alias");
  }
}

af|navigationPane-tabs::droplist-indicator:depressed,
af|panelTabbed::droplist-indicator:depressed {
  -tr-rule-ref: selector(".AFDroplistImageDepressed:alias");
  -tr-rule-ref: selector(".AFMediumBackground:alias");
}

/* conveyor-belt pseudo-class indicates that the conveyor belt icons should show on the start
   and end side of the component. When layout is compressed, make these icons visible. */
af|navigationPane-tabs::header:conveyor-belt af|navigationPane-tabs::start-conveyor-belt-indicator,
af|navigationPane-tabs::header:conveyor-belt af|navigationPane-tabs::end-conveyor-belt-indicator,
af|navigationPane-tabs::header:conveyor-belt af|navigationPane-tabs::droplist-indicator,
af|panelTabbed::header:conveyor-belt af|panelTabbed::start-conveyor-belt-indicator,
af|panelTabbed::header:conveyor-belt af|panelTabbed::end-conveyor-belt-indicator,
af|panelTabbed::header:conveyor-belt af|panelTabbed::droplist-indicator,
af|panelTabbed::footer:conveyor-belt af|panelTabbed::start-conveyor-belt-indicator,
af|panelTabbed::footer:conveyor-belt af|panelTabbed::end-conveyor-belt-indicator,
af|panelTabbed::footer:conveyor-belt af|panelTabbed::droplist-indicator {
  display: block;
}

/* using flex for compatibility with hc mode. */
af|panelTabbed::tabs:conveyor-belt af|panelTabbed::top-conveyor-belt-indicator,
af|panelTabbed::tabs:conveyor-belt af|panelTabbed::bottom-conveyor-belt-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* private - Conveyor belt droplist container contents are not visible when they are inside the
   component. They will get placed inside a popup which is outside of teh component so when the
   container is popped up these style rules won't apply anymore. */
af|navigationPane-tabs af|navigationPane-tabs::conveyor-belt-container,
af|panelTabbed af|panelTabbed::conveyor-belt-container {
display: none;
}

/* When popped up (e.g. when not a direct child of the normal root element, the tab conveyor belt
   containers are visible and are supposed to have padding. */
af|navigationPane-tabs::conveyor-belt-container,
af|panelTabbed::conveyor-belt-container {
  padding: 8px;
}

/* Styles the container which encloses the train content (excluding the overflow indicators)
but includes the parent train elements.*/
af|train::content, af|train-vertical::content {
  padding-top:2px;
  padding-bottom:2px;
  padding-left:1px;
  padding-right:1px;
  text-align:center;
}

/*
 *  parent train Styles
 */
/* block that encloses all parent-start and parent-end elements */
af|train::parent-start,
af|train::parent-end {
  vertical-align:top;
}
/* private style */
af|train::parent-start-cell,
af|train::parent-start-cell {
  width:100%;
  height:100%;
}
/* cell that displays the parent start icon*/
af|train::parent-start-icon-cell {
  -tr-rule-ref: selector(".AFEndTextAlign:alias");
}
/* cell that displays the parent end icon*/
af|train::parent-end-icon-cell {
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
}
/* content cell in the beginning of the train, to display the parent process
  name */
af|train::parent-start-content {
  -tr-rule-ref: selector(".AFEndTextAlign:alias");
  padding-left:1px;
  padding-right:1px;
}
/* content block in the end of the train, to display the parent process name */
af|train::parent-end-content {
  vertical-align:top;
  padding-left:1px;
  padding-right:1px;
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
}

/*
 *  join styles
 */
/* for joins between stops */
af|train::join {
  min-width:20px;
  width:100%;
  height: 1px;
}
/* cell that displays the join */
af|train::join-cell {
  width:50%;
}
/* join in disabled state. */
af|train::join:disabled {
  -tr-rule-ref: selector(".AFDarkBackground:alias");
}
/* Join in unvisited enabled state. */
af|train::join:unvisited {
  -tr-rule-ref: selector(".AFVeryDarkBackground:alias");

}
/* Join in visited enabled state. Should be af|train::join:visited.
    Workaround for a skinning bug - 5558004. */
af|train::join:train-visited {
  -tr-rule-ref: selector(".AFVisitedLinkBackground:alias");
}

/* Train join high contrast styles */
af|body:high-contrast af|train::join {
  height: 0px;
}
af|body:high-contrast af|train::join:disabled {
  border: 1px dotted;
}
af|body:high-contrast af|train::join:unvisited {
  border: 1px dashed;
}
af|body:high-contrast af|train::join:train-visited {
  border: 1px solid;
}
/*  Styles the start and end overflow indicators. The indicators are specified using a
    background-image. */
af|train::start-overflow-indicator,
af|train::end-overflow-indicator{
  top: 0;
  margin-top: 0;
}

af|train::start-overflow-indicator > img,
af|train::end-overflow-indicator > img,
af|train-vertical::bottom-overflow-indicator > img,
af|train-vertical::top-overflow-indicator > img {
  display:none;
}

af|body:high-contrast af|train::start-overflow-indicator > img,
af|body:high-contrast af|train::end-overflow-indicator > img,
af|body:high-contrast af|train-vertical::bottom-overflow-indicator > img,
af|body:high-contrast af|train-vertical::top-overflow-indicator > img {
  display:inline;
}

af|train::start-overflow-icon,
af|train::end-overflow-icon:rtl {
  content: url(/afr/overflow_start.png);
}

af|train::end-overflow-icon,
af|train::start-overflow-icon:rtl {
  content: url(/afr/overflow_end.png);
}
/*
 * stop - cell, content, icon styles
 */
/* Container for all the stop elements */
af|train::stop {
  vertical-align:top;
}
/* private */
af|train::stop-cell {
  width:100%;
  height:100%;
}
af|train::stop-icon-cell {
  width:13px;
  height:13px;
  position: relative;
}
af|train::stop-icon-selected {
  background-image: url('/afr/mTrain_active.png');
  background-repeat: no-repeat;
  display: block;
  width:13px;
  height:13px;
  text-decoration:none;
  cursor: default;
}
af|train::stop-icon-disabled {
  background-image: url('/afr/mTrain_disabled.png');
  background-repeat: no-repeat;
  display: block;
  width:13px;
  height:13px;
  text-decoration:none;
  cursor: default;
}
af|train::stop-icon-unvisited {
  background-image: url('/afr/mTrain_unvisited_n.png');
  background-repeat: no-repeat;
  cursor:pointer;
  display: block;
  width:13px;
  height:13px;
  text-decoration:none;
}

@agent (touchScreen:none) {
  af|train::stop-icon-unvisited:hover {
    background-image: url('/afr/mTrain_unvisited_mo.png');
  }
}

af|train::stop-icon-unvisited:active {
  background-image: url('/afr/mTrain_unvisited_md.png');
  background-repeat: no-repeat;
  display: block;
  width:13px;
  height:13px;
  text-decoration:none;
}
af|train::stop-icon-visited {
  background-image: url('/afr/mTrain_visited_n.png');
  background-repeat: no-repeat;
  cursor:pointer;
  display: block;
  width:13px;
  height:13px;
  text-decoration:none;
}

@agent (touchScreen:none) {
  af|train::stop-icon-visited:hover {
    background-image: url('/afr/mTrain_visited_mo.png');
  }
}

af|train::stop-icon-visited:active {
  background-image: url('/afr/mTrain_visited_md.png');
}
/* content block that displays the stop name */
af|train::stop-content {
  padding-top:2px;
  padding-left:5px;
  padding-right:5px;
  padding-bottom:2px;
  text-align:center;
}
/* content block that displays the selected stop name */

af|train::stop-content:selected {
  font-weight:bold;
  -tr-rule-ref: selector(".AFTextForeground:alias");
  text-align:center;
  cursor:default;
}
af|train::stop-content:required {
  -tr-rule-ref: selector(".AFRequiredIconStyle");
}
/* link for a stop */
af|train::stop-link {
  cursor:pointer;
  text-decoration:none;
}
/* link for the selected stop */
af|train::stop-link:selected {
  -tr-rule-ref: selector(".AFTextForeground:alias");
  cursor:default;
}
/* link for a disabled stop. Should be af|train::stop-link:disabled. */
af|train::stop-link:disabled {
  -tr-rule-ref: selector(".AFButtonForegroundDisabled:alias");
  cursor:default;
}
/* link for an unvisited enabled stop */
af|train::stop-link:unvisited {
  -tr-rule-ref: selector(".AFLinkForeground:alias");
}

af|train::stop-link:unvisited .AFRequiredIconStyle{
  text-decoration: none;
  display: inline-block;
}
/* link for a visited enabled stop. Should be af|train::stop-link:visited.
    Workaround for a skinning bug - 5558004. */
af|train::stop-link:train-visited {
  -tr-rule-ref: selector(".AFVisitedLinkForeground:alias");
}

/*
 *  stop alert icons
 */
af|train::stop-icon-error{
  background-image:url('/afr/alertModifier_error.png');
  background-repeat:no-repeat;
  cursor:pointer;
  display: block;
  width:7px;
  height:7px;
  position: absolute;
  bottom:0;
  text-decoration:none;
}
af|train::stop-icon-warning{
  background-image:url('/afr/alertModifier_warning.png');
  background-repeat:no-repeat;
  cursor:pointer;
  display: block;
  width:7px;
  height:7px;
  position: absolute;
  bottom:0;
  text-decoration:none;
}
af|train::stop-icon-confirmation{
  background-image:url('/afr/alertModifier_complete.png');
  background-repeat:no-repeat;
  cursor:pointer;
  display: block;
  width:7px;
  height:7px;
  position: absolute;
  bottom:0;
  text-decoration:none;
}
af|train::stop-icon-information{
  background-image:url('/afr/alertModifier_information.png');
  background-repeat:no-repeat;
  cursor:pointer;
  display: block;
  width:7px;
  height:7px;
  position: absolute;
  bottom:0;
  text-decoration:none;
}

af|body:high-contrast af|train::stop-icon-error:after,
af|body:high-contrast af|train-vertical::stop-icon-error:after,
af|body:high-contrast af|train::stop-icon-warning:after,
af|body:high-contrast af|train-vertical::stop-icon-warning:after,
af|body:high-contrast af|train::stop-icon-confirmation:after,
af|body:high-contrast af|train-vertical::stop-icon-confirmation:after,
af|body:high-contrast af|train::stop-icon-information:after,
af|body:high-contrast af|train-vertical::stop-icon-information:after {
  background-repeat:no-repeat;
  cursor:pointer;
  display: block;
  width:7px;
  height:7px;
  position: absolute;
  bottom:2px;
  text-decoration:none;
}

af|body:high-contrast af|train::stop-icon-error:after,
af|body:high-contrast af|train-vertical::stop-icon-error:after {
  content:url('/afr/alertModifier_error.png');
}

af|body:high-contrast af|train::stop-icon-warning:after,
af|body:high-contrast af|train-vertical::stop-icon-warning:after {
  content:url('/afr/alertModifier_warning.png');
}

af|body:high-contrast af|train::stop-icon-confirmation:after,
af|body:high-contrast af|train-vertical::stop-icon-confirmation:after {
  content:url('/afr/alertModifier_complete.png');
}

af|body:high-contrast af|train::stop-icon-information:after,
af|body:high-contrast af|train-vertical::stop-icon-information:after {
  content:url('/afr/alertModifier_information.png');
}

af|train::stop-icon-error:ltr,
af|train::stop-icon-warning:ltr,
af|train::stop-icon-confirmation:ltr,
af|train::stop-icon-information:ltr {
  right:0;
}
af|train::stop-icon-error:rtl,
af|train::stop-icon-warning:rtl,
af|train::stop-icon-confirmation:rtl,
af|train::stop-icon-information:rtl {
  left:0;
}


/* vertical train styles */
/* vertical is used as a hint on the train rather than a pseudo-class. This is
  so that we can reuse the skin selectors for af|train, defined in Trinidad.
  Also using a pseudo-class :vertical for the af|train causes myriad issues
  with styles bleeding into one another. */
af|train-vertical {
  -tr-rule-ref: selector(".AFTrainDefault:alias");
  overflow: hidden;
  position: relative;
}

/*
 *  parent train icons
 */
/* for cell that displays the parent-start-icon and the parent-end-icon
    respectively */
af|train-vertical::parent-start-icon-cell,
af|train-vertical::parent-end-icon-cell {
  text-align:center;
}
/* for the cell that displays the label of the parent train at the
   beginning of the train. */
af|train-vertical::parent-start-content {
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
  padding-left:1px;
  padding-right:1px;
}
/* for the cell that displays the label of the parent train at the end of the
    vertical train.*/
af|train-vertical::parent-end-content {
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
  padding-left:1px;
  padding-right:1px;
}
/*
 *  join styles
 */
/* for joins between stops in vertical train */
af|train-vertical::join {
  width:1px;
  height:10px;
  max-width:1px;
  min-height:10px;
  background-color:inherit;
  background-repeat:repeat;
}
/* for a join in disabled state, in vertical train. */
af|train-vertical::join:disabled {
  -tr-rule-ref: selector(".AFMediumBackground:alias");
  background-repeat:repeat;
}
/* for a join in unvisited enabled state, in the vertical train */
af|train-vertical::join:unvisited {
  -tr-rule-ref: selector(".AFVeryDarkBackground:alias");
  background-repeat:repeat;
}
/* for a join in visited enabled state, in the vertical train. Should be
    af|train-vertical::join:visited. Workaround for a skinning bug - 5558004. */
af|train-vertical::join:train-visited {
  -tr-rule-ref: selector(".AFVisitedLinkBackground:alias");
  background-repeat:repeat;
}
/* for setting the width of train join to 1px and
   avoiding vertical train joins from getting displaced on overflow
   in IE7, IE8 and Safari */
@agent ie and (version: 7.0), gecko {
  af|train-vertical::join-spacer {
    width: 100%;
  }
}
@agent ie and (version: 8.0) {
  af|train-vertical::stop-cell {
    table-layout: fixed;
    width:13px;
  }
}

/*Vertical train join for high contrast*/
af|body:high-contrast af|train-vertical::join {
  width: 0px;
}
af|body:high-contrast af|train-vertical::join:disabled {
  border: 1px dotted;
}
af|body:high-contrast af|train-vertical::join:unvisited {
  border: 1px dashed;
}
af|body:high-contrast af|train-vertical::join:train-visited {
  border: 1px solid;
}

af|train-vertical::top-overflow-icon {
  content: url(/afr/overflow_top.png);
}
af|train-vertical::bottom-overflow-icon {
  content: url(/afr/overflow_bottom.png);
}

/*
 *  stop - cell, icon, content styles
 */
/* Styles the row displays the entire stop info. Only used in the vertical layout. */
af|train-vertical::stop {
}
/* private */
af|train-vertical::stop-cell {
  height:100%;
}
/* for the cell that displays the stop icon. */
af|train-vertical::stop-icon-cell {
  height: 13px;
  width: 13px;
  position: relative;
}
af|train-vertical::stop-icon-selected {
  height:13px;
  width:13px;
  background-image:url('/afr/mTrain_active.png');
  background-repeat:no-repeat;
  display: block;
  text-decoration:none;
  cursor: default;
}
af|train-vertical::stop-icon-disabled {
  height:13px;
  width:13px;
  background-image:url('/afr/mTrain_disabled.png');
  background-repeat:no-repeat;
  display: block;
  text-decoration:none;
  cursor: default;
}
af|train-vertical::stop-icon-visited {
  height:13px;
  width:13px;
  background-image:url('/afr/mTrain_visited_n.png');
  background-repeat:no-repeat;
  cursor:pointer;
  display: block;
  text-decoration:none;
}

@agent (touchScreen:none) {
  af|train-vertical::stop-icon-visited:hover {
    background-image:url('/afr/mTrain_visited_mo.png');
  }
}

af|train-vertical::stop-icon-visited:active {
  background-image:url('/afr/mTrain_visited_md.png');
}
af|train-vertical::stop-icon-unvisited {
  height:13px;
  width:13px;
  background-image:url('/afr/mTrain_unvisited_n.png');
  background-repeat:no-repeat;
  cursor:pointer;
  display: block;
  text-decoration:none;
}

@agent (touchScreen:none) {
  af|train-vertical::stop-icon-unvisited:hover {
    background-image:url('/afr/mTrain_unvisited_mo.png');
  }
}

af|train-vertical::stop-icon-unvisited:active {
  background-image:url('/afr/mTrain_unvisited_md.png');
}

/* for the cell that displays the label of the stop, in a vertical train. */
af|train-vertical::stop-content{
  max-width: 100px;
  padding: 2px 2px 2px 2px;
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
}
/* for the cell that displays the label of the stop, when the stop is selected &
    in a vertical train. */
af|train-vertical::stop-content:selected{
  font-weight: bold;
  -tr-rule-ref: selector(".AFTextForeground:alias");
  text-decoration: none;
}
af|train-vertical::stop-content:required{
  -tr-rule-ref: selector(".AFRequiredIconStyle");
}
/* for the link that displays the label of the stop, in a vertical train. */
af|train-vertical::stop-link {
  cursor:pointer;
  text-decoration:none;
}
/* for the link that displays the stop label when the stop is selected.*/
af|train-vertical::stop-link:selected{
  cursor:default;
  -tr-rule-ref: selector(".AFTextForeground:alias");
}
/* for the link that displays the stop label when the stop is disabled.*/
af|train-vertical::stop-link:disabled{
  cursor:default;
  -tr-rule-ref: selector(".AFButtonForegroundDisabled:alias");
}
/* for the link that displays the stop label when the stop is unvisited &
    enabled.*/
af|train-vertical::stop-link:unvisited{
  -tr-rule-ref: selector(".AFLinkForeground:alias");
}
af|train-vertical::stop-link:unvisited .AFRequiredIconStyle{
  text-decoration: none;
  display: inline-block;
}
/* for the link that displays the stop label when the stop is visited.*/
af|train-vertical::stop-link:train-visited{
  -tr-rule-ref: selector(".AFVisitedLinkForeground:alias");
}
af|train-vertical::stop-icon-error {
  background-image:url('/afr/alertModifier_error.png');
  background-repeat:no-repeat;
  cursor:pointer;
  height:7px;
  width:7px;
  display: block;
  text-decoration:none;
  position: absolute;
  bottom:0;
}
af|train-vertical::stop-icon-warning {
  background-image:url('/afr/alertModifier_warning.png');
  background-repeat:no-repeat;
  cursor:pointer;
  height:7px;
  width:7px;
  display: block;
  text-decoration:none;
  position: absolute;
  bottom:0;
}
af|train-vertical::stop-icon-confirmation {
  background-image:url('/afr/alertModifier_complete.png');
  background-repeat:no-repeat;
  cursor:pointer;
  height:7px;
  width:7px;
  display: block;
  text-decoration:none;
  position: absolute;
  bottom:0;
}
af|train-vertical::stop-icon-information {
  background-image:url('/afr/alertModifier_information.png');
  background-repeat:no-repeat;
  cursor:pointer;
  height:7px;
  width:7px;
  display: block;
  text-decoration:none;
  position: absolute;
  bottom:0;
}
af|train-vertical::stop-icon-error:ltr,
af|train-vertical::stop-icon-warning:ltr,
af|train-vertical::stop-icon-confirmation:ltr,
af|train-vertical::stop-icon-information:ltr,
af|train:sub-train af|train-vertical::stop-icon-error:ltr,
af|train:sub-train af|train-vertical::stop-icon-warning:ltr,
af|train:sub-train af|train-vertical::stop-icon-confirmation:ltr,
af|train:sub-train af|train-vertical::stop-icon-information:ltr {
  right:0;
}
af|train-vertical::stop-icon-error:rtl,
af|train-vertical::stop-icon-warning:rtl,
af|train-vertical::stop-icon-confirmation:rtl,
af|train-vertical::stop-icon-information:rtl,
af|train:sub-train af|train-vertical::stop-icon-error:rtl,
af|train:sub-train af|train-vertical::stop-icon-warning:rtl,
af|train:sub-train af|train-vertical::stop-icon-confirmation:rtl,
af|train:sub-train af|train-vertical::stop-icon-information:rtl {
  left:0;
}

af|body:high-contrast af|train::end-overflow-indicator:depressed:ltr,
af|body:high-contrast af|train::end-overflow-indicator:depressed:rtl,
af|body:high-contrast af|train::end-overflow-indicator:ltr,
af|body:high-contrast af|train::end-overflow-indicator:rtl,
af|body:high-contrast af|train::start-overflow-indicator:depressed:ltr,
af|body:high-contrast af|train::start-overflow-indicator:depressed:rtl,
af|body:high-contrast af|train::start-overflow-indicator:ltr,
af|body:high-contrast af|train::start-overflow-indicator:rtl,
af|body:high-contrast af|train-vertical::bottom-overflow-indicator,
af|body:high-contrast af|train-vertical::top-overflow-indicator,
af|body:high-contrast af|train::stop-icon-confirmation,
af|body:high-contrast af|train::stop-icon-disabled,
af|body:high-contrast af|train::stop-icon-error,
af|body:high-contrast af|train::stop-icon-information,
af|body:high-contrast af|train::stop-icon-selected,
af|body:high-contrast af|train::stop-icon-unvisited,
af|body:high-contrast af|train::stop-icon-unvisited:active,
af|body:high-contrast af|train::stop-icon-visited,
af|body:high-contrast af|train::stop-icon-visited:active,
af|body:high-contrast af|train::stop-icon-visited:rtl,
af|body:high-contrast af|train::stop-icon-warning,
af|body:high-contrast af|train-vertical::stop-icon-confirmation,
af|body:high-contrast af|train-vertical::stop-icon-disabled,
af|body:high-contrast af|train-vertical::stop-icon-error,
af|body:high-contrast af|train-vertical::stop-icon-information,
af|body:high-contrast af|train-vertical::stop-icon-selected,
af|body:high-contrast af|train-vertical::stop-icon-unvisited,
af|body:high-contrast af|train-vertical::stop-icon-unvisited:active,
af|body:high-contrast af|train-vertical::stop-icon-visited,
af|body:high-contrast af|train-vertical::stop-icon-visited:active,
af|body:high-contrast af|train-vertical::stop-icon-warning {
  background-image: none;
}

@agent (touchScreen:none) {
  af|body:high-contrast af|train::end-overflow-indicator:hover:ltr,
  af|body:high-contrast af|train::end-overflow-indicator:hover:rtl,
  af|body:high-contrast af|train::start-overflow-indicator:hover:ltr,
  af|body:high-contrast af|train::start-overflow-indicator:hover:rtl,
  af|body:high-contrast af|train::stop-icon-unvisited:hover,
  af|body:high-contrast af|train::stop-icon-visited:hover,
  af|body:high-contrast af|train-vertical::stop-icon-unvisited:hover,
  af|body:high-contrast af|train-vertical::stop-icon-visited:hover {
    background-image: none;
  }
}

af|body:high-contrast af|train::stop-icon-selected,
af|body:high-contrast af|train-vertical::stop-icon-selected {
  border: 1px solid;
}

af|body:high-contrast af|train-vertical::stop-icon-disabled,
af|body:high-contrast af|train::stop-icon-disabled {
  border: 1px dotted;
}

af|body:high-contrast af|train::stop-icon-unvisited,
af|body:high-contrast af|train::stop-icon-unvisited:active,
af|body:high-contrast af|train-vertical::stop-icon-unvisited,
af|body:high-contrast af|train-vertical::stop-icon-unvisited:active {
  border: 1px dashed;
}

af|body:high-contrast af|train::stop-icon-visited,
af|body:high-contrast af|train::stop-icon-visited:active,
af|body:high-contrast af|train::stop-icon-visited:rtl,
af|body:high-contrast af|train-vertical::stop-icon-visited,
af|body:high-contrast af|train-vertical::stop-icon-visited:active {
  border: 1px solid;
}
/*****  End: New Train Styles *****/

/** trainButtonBar styles **/
af|trainButtonBar {
  -tr-button-type: unified;
}

af|trainButtonBar::button-cell {
  padding-left: 3px;
  padding-right: 3px;
}
af|trainButtonBar::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}
/* These should match other button components, like commandButton, so
that a person can use the button aliases to change all buttons at once */
af|trainButtonBar::back-button,
af|trainButtonBar::next-button {
  -tr-rule-ref: selector(".AFButtonForeground:alias");
  -tr-rule-ref: selector(".AFButtonBorder:alias");
  -tr-rule-ref: selector(".AFButtonBackground:alias");
  -tr-rule-ref: selector(".AFButtonNative:alias");
  min-height: 28px;
  min-width: 28px;
}

@agent (touchScreen:none) {
  af|trainButtonBar::back-button:hover,
  af|trainButtonBar::next-button:hover {
    -tr-rule-ref: selector(".AFButtonBorderHover:alias");
    -tr-rule-ref: selector(".AFButtonBackgroundHover:alias");
    -tr-rule-ref: selector(".AFButtonForegroundHover:alias");
  }

  /* purposely put disabled after hover so hover doesn't show up on disabled
  and get rid of background-image */
  af|trainButtonBar::back-button:disabled,
  af|trainButtonBar::next-button:disabled,
  af|trainButtonBar::back-button:active:disabled,
  af|trainButtonBar::next-button:active:disabled,
  af|trainButtonBar::back-button:hover:disabled,
  af|trainButtonBar::next-button:hover:disabled {
    -tr-rule-ref: selector(".AFButtonForegroundDisabled:alias");
    -tr-rule-ref: selector(".AFButtonBorderDisabled:alias");
    -tr-rule-ref: selector(".AFButtonBackgroundDisabled:alias");
  }
}
af|trainButtonBar::next-icon
{
  content: url('/afr/rightNavArrow_ena.png');
  vertical-align: middle;
}
af|trainButtonBar::prev-icon
{
  content: url('/afr/leftNavArrow_ena.png');
  vertical-align: middle;
}
af|trainButtonBar::next-icon:disabled
{
  content: url('/afr/rightNavArrow_dis.png');
  vertical-align: middle;
}
af|trainButtonBar::prev-icon:disabled
{
  content: url('/afr/leftNavArrow_dis.png');
  vertical-align: middle;
}
af|trainButtonBar::next-icon:hover
{
  content: url('/afr/rightNavArrow_ovr.png');
  vertical-align: middle;
}
af|trainButtonBar::prev-icon:hover
{
  content: url('/afr/leftNavArrow_ovr.png');
  vertical-align: middle;
}
af|trainButtonBar::next-icon:depressed
{
  content: url('/afr/rightNavArrow_dwn.png');
  vertical-align: middle;
}
af|trainButtonBar::prev-icon:depressed
{
  content: url('/afr/leftNavArrow_dwn.png');
  vertical-align: middle;
}
af|trainButtonBar
{
 -tr-display-mode: text;
}

af|trainButtonBar::range-text{
  padding-left: 4px;
  padding-right: 4px;
}

/** end of trainButtonBar styles **/

/* private - overflow spacer is needed for minimum width of overflowing components in IE */
af|breadCrumbs::overflow-spacer,
af|panelTabbed::overflow-spacer,
af|menuBar::overflow-spacer,
af|toolbar::overflow-spacer,
af|navigationPane-bar::overflow-spacer,
af|train::overflow-spacer,
af|train-vertical::overflow-spacer {
  display: none;
}

@agent ie {
  af|breadCrumbs::overflow-spacer,
  af|menuBar::overflow-spacer,
  af|navigationPane-tabs::overflow-spacer,
  af|navigationPane-bar::overflow-spacer,
  af|panelTabbed::overflow-spacer,
  af|toolbar::overflow-spacer,
  af|train::overflow-spacer,
  af|train-vertical::overflow-spacer {
    width: 120px;
    height: 0px;
    overflow: hidden;
    clear: both;
  }
}
/* end breadcrumb styles */
/*
 * chooseColor styles
 */
/* Public */

/** Public
  * Styles the color swatch on standard color palette buttons
  */
af|chooseColor::button-swatch {
  width:10px;
  height:10px;
  margin-top:1px;
  margin-right:5px;
  margin-left:0;
  -tr-rule-ref: selector(".AFButtonBorderDisabled:alias");
}
/** Public
  * Styles the color swatch on standard color palette buttons in right-to-left mode.
  */
af|chooseColor::button-swatch:rtl {
  margin-right:0;
  margin-left:5px;
}

/** Public
  * Styles the empty color swatch on standard color palette buttons
  */
af|chooseColor::button-swatch:transparent {
  background-image:url('/afr/empty-swatch.png');
}

/** Public
  * Styles the standard color palette buttons.
  * Can use this to style background-image on the buttons and font.
  * Available pseudo-classes are the css-2 pseudo-classes available
  * to a button, like :hover.
  */
af|chooseColor::button {
  -tr-rule-ref: selector(".AFButtonForeground:alias");
  -tr-rule-ref: selector(".AFButtonBorder:alias");
  -tr-rule-ref: selector(".AFButtonBackground:alias");
  -tr-rule-ref: selector(".AFButtonNative:alias");
  padding-top: 2px;
  padding-bottom: 1px;
}

/* Private, should be no need to skin this */
af|chooseColor::space-above-button {
    height:2px;
}
/* Private, should be no need to skin this  */
af|chooseColor::space-above-swatch-table {
    height:5px;
}
/* Private, should be no need to skin this  */
af|chooseColor::space-above-custom-swatch-table {
    height:7px;
}
/* Private, TODO make color an alias */
af|chooseColor::lower-swatch-row-wrapper {
  -tr-rule-ref: selector(".AFButtonBorder:alias");
}
/* Public - can change the margin and width/height of color swatch */
af|chooseColor::swatch {
  width:10px;
  height:10px;
  -tr-rule-ref: selector(".AFButtonBorder:alias");
  margin:2px;
  display:block;
}
/* Public - can change the empty swatch's background-image */
af|chooseColor::swatch:transparent {
  background-image:url('/afr/empty-swatch.png');
}
/* Public - Can change swatch cells border */
af|chooseColor::swatch-cell {
  border-width:1px;
  border-style:solid;
  border-color: -tr-property-ref(".AFLightestNeutralBackground:alias","background-color");
  background-color:transparent;
}
/* Public */
af|chooseColor::swatch-cell:selected {
  -tr-rule-ref: selector(".AFMediumAccentBackground:alias");
  padding:0px;
}
/** Private  -  Demensions heavily depend on implementation */
af|chooseColor::custom-image-wrapper {
  border-width: 1px;
  -tr-rule-ref: selector(".AFMediumAccentBackground:alias");
  border-style:solid;
  background-image:url('/afr/customcolorpalette.png');
  position:relative;
  /** Must be explicitly specified to make custom dialog work **/
  height:156px;
  /** Must be explicitly specified to make custom dialog work **/
  width:186px;
  overflow:hidden;
}
/* Private, no need to skin */
af|chooseColor::custom-lower-block {
  margin-top:10px;
  width:100%;
}
/** Private (can use .AFLabel:alias to style font )
  * Styles the input label in the custom color picker dialog.
  */
af|chooseColor::custom-label {
  -tr-rule-ref: selector(".AFLabel:alias");
  padding: 3px 8px 0px 0px;
}
/** Private, no need to skin
  * Styles the input label in the custom color picker dialog in right-to-left mode.
  */
af|chooseColor::custom-label:rtl {
  padding: 3px 0px 0px 8px;
}
/** Private  - TODO pull out border color into an alias
  * Styles the edit fields in the popup custom color picker dialog.
  * Size change may impact the overall layout of the dialog.
  */
af|chooseColor::custom-input-content {
  -tr-rule-ref: selector(".AFFormControlContent:alias");
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  padding: 1px 2px 1px 3px;
  width:50px;
  margin-left:5px;
}
/** Private
  * Styles the edit fields in the popup custom color picker dialog in right-to-left mode.
  * Size change may impact the overall layout of the dialog.
  */
af|chooseColor::custom-input-content:rtl {
  margin-right:5px;
}
/** Private  -  Heavily coupled with rendering implemenation */
af|chooseColor::custom-slider-wrapper {
  position:relative;
  /** Must be explicitly specified to make custom dialog work **/
  height:156px;
  /** Must be explicitly specified to make custom dialog work **/
  width:15px;
}
/** Private  -  Heavily coupled with rendering implemenation */
af|chooseColor::custom-slider {
  border-width: 1px;
  -tr-rule-ref: selector(".AFVeryDarkAccentBackground:alias");
  border-style:solid;
  /** Must be explicitly specified to make custom dialog work **/
  width: 9px;
  /** Must be explicitly specified to make custom dialog work **/
  height: 156px;
  background-image:url('/afr/brightnessslider.png');
}
/** Private  -  can be public */
af|chooseColor::custom-space-before-slider {
  font-size:1px;
  width:5px;
}
/** Private  -  Heavily coupled with rendering implemenation */
af|chooseColor::custom-crosshair {
  position:absolute;
  background-image:url('/afr/crosshairs.png');

  top:0px;
  left:0px;
  z-index:1;
  /** Must be explicitly specified to make custom dialog work **/
  width:22px;
  /** Must be explicitly specified to make custom dialog work **/
  height:18px;
}
/** Private  -  demensions have impact on overall layout */
af|chooseColor::custom-double-swatch-wrapper {
  margin-left:38px;
  margin-right:38px;
  -tr-rule-ref: selector(".AFLightAccentBorder:alias");
  border-width:2px;
  border-style:solid;
  display:block;
}
/** Private  -  demension have impact on overall layout */
af|chooseColor::custom-swatch {
  border:1px solid gray;
  height:25px;
  width:30px;
}
/** Private  - Heavily coupled with rendering implemenation **/
af|chooseColor::custom-slider-thumb {
  position:absolute;
  background-image:url('/afr/slider_thumb_m_n.png');
  font-size:1px;
  left:-2px;
  /** Must be explicitly specified to make custom dialog work **/
  height:9px;
  /** Must be explicitly specified to make custom dialog work **/
  width:14px;
}
af|chooseColor::custom-slider-thumb:rtl {
  background-image:url('/afr/slider_thumb_m_n_rtl.png');
  left: auto;
  right:-2px;
}

/* chooseDate */
/* root style */
af|chooseDate {
  -tr-layout: compactNavigator date;
  -tr-compatibility-layout: compactNavigator date;
  -tr-months: 1;
  margin :0px 2px;
  padding: 0px 2px;
  -tr-rule-ref: selector(".AFTextBackground:alias");
  border-width: 1px;
  border-style: solid;
  border-color: #B2BEDD;
  cursor: default;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

af|chooseDate::today {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
}

/* Styles for the month, year selector row padding.
  Also see where chooseDate shares styles with selectOneChoice and
  selectOneSpinbox for the month and year selectors
  8515499: blaf+ actually requires: 7px 0 7px 0, for all browsers
  but this preserves behavior*/
af|chooseDate::month-year-row {
  padding: 8px 0 3px 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}
@agent ie{
  af|chooseDate::month-year-row {
    padding: 8px 0 7px 0;
  }
}
af|chooseDate::month-year-header {
  flex-grow: 1;
  display: inline-flex;
}
af|chooseDate::prev-month-arrow-cell,
af|chooseDate::prev-month-arrow-stub-cell,
af|chooseDate::next-month-arrow-cell:rtl,
af|chooseDate::next-month-arrow-stub-cell:rtl{
  padding: 0px 5px 0px 0px;
}
af|chooseDate::prev-month-arrow-stub-cell,
af|chooseDate::next-month-arrow-stub-cell{
  width: 28px;
  height: 28px;
}
af|chooseDate::next-month-arrow-cell,
af|chooseDate::next-month-arrow-stub-cell,
af|chooseDate::prev-month-arrow-cell:rtl,
af|chooseDate::prev-month-arrow-stub-cell:rtl{
  padding: 0px 0px 0px 5px;
}
af|chooseDate::month-year-label-cell{
  min-width: 172px;
  text-align: center;
  font-size: 1.16em;
  height: 28px;
  padding-top: 5px;
}
af|chooseDate::month-label-text,
af|chooseDate::year-label-text {
  display: inline-block;
  padding: 0 5px 0 5px;
  font-weight: bold;
}
af|chooseDate::year-selector-cell{
  padding-left: 2px;
  padding-right: 0px;
}
af|chooseDate::year-selector-cell:rtl{
  padding-right: 2px;
  padding-left: 0px;
}
af|chooseDate::calendar-grid-wrapper{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}
af|chooseDate::calendar-grid{
  flex-grow: 1;
  position: relative;
  display: inline-flex;
}
af|chooseDate::calendar-grid:show-month {
}
af|chooseDate::calendar-grid:show-month af|chooseDate::days-row,
af|chooseDate::calendar-grid:show-month af|chooseDate::navigator-row,
af|chooseDate::calendar-grid:show-month af|chooseDate::week-header-row {
  background-color: transparent;
}

af|chooseDate::grid-spacer {
  height:5px;
}

/* Styles for previous/next month arrows */
af|chooseDate::prev-month-arrow,
af|chooseDate::next-month-arrow:rtl {
  width: 8px;
  height: 11px;
  background-image: url('/afr/previous_n.png');
  background-repeat: no-repeat;
  display:block;
}
/* Icon hook for users to replace prev-month-arrow with another img or text */
af|chooseDate::prev-month-arrow-icon,
af|chooseDate::next-month-arrow-icon:rtl {
  content: inhibit;
}

af|chooseDate::next-month-arrow,
af|chooseDate::prev-month-arrow:rtl {
  width: 8px;
  height: 11px;
  background-image: url('/afr/next_n.png');
  background-repeat: no-repeat;
  display:block;
}
/* Icon hook for users to replace next-month-arrow with another img or text */
af|chooseDate::next-month-arrow-icon,
af|chooseDate::prev-month-arrow-icon:rtl {
  content: inhibit;
}
/* chooseDate: Week Header styles */
af|chooseDate::week-header-row {
  -tr-rule-ref: selector(".AFMediumBackground:alias");
  text-align: center;
}
/* Specify spacing for each cell in the week header */
/*8515499: blaf+ actually requires padding: 2px 4px; but this preserves
  appearance */
af|chooseDate::week-header-cell{
  width: 20px;
  padding: 4px 4px;
}
/* Styles for days in the grid : supply default size, font, background
    Individual day types override for border, font color below
    8515499: blaf+ actually requires height: 16px for all browsers
    but this preserves  appearance*/
af|chooseDate::days-row,
af|chooseDate::navigator-row {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFVerySmallFont:alias");
  text-align:center;
}
af|chooseDate::days-row {
  height: 16px;
  font-weight: bold;
}
af|chooseDate::navigator-row {
  height: 24px;
  font-size: 1.2em;
  background-color: transparent;
}

@agent ie{
  af|chooseDate::days-row {
    height: 18px;
  }
}

@agent gecko {
  af|chooseDate::days-row:last {
    height: 19px;
  }
}

/* Styles for grid days in current month, default is to reuse styles from days-row */
af|chooseDate::regular-day{
}
af|chooseDate::navigator-cell {
  width: 26px;
}

@agent ie and (version: 10) {
  af|chooseDate::prev-month-day:focus,
  af|chooseDate::next-month-day:focus,
  af|chooseDate::regular-day:focus {
    outline: thin dotted;
  }
}

@agent (touchScreen:none) {
  af|chooseDate::regular-day:hover {
   -tr-rule-ref: selector(".AFLinkHover:alias");
  }
}

af|chooseDate::regular-day:disabled,
af|chooseDate::navigator-cell:disabled div {
  -tr-rule-ref: selector(".AFVeryDarkAccentForeground:alias");
  text-decoration: none;
}

af|chooseDate::prev-month-day:selected,
af|chooseDate::next-month-day:selected,
af|chooseDate::regular-day:selected,
af|chooseDate::navigator-cell:selected div,
af|chooseDate::today:selected {
  -tr-rule-ref: selector(".AFDarkBackground:alias");
  -tr-rule-ref: selector(".AFLightestNeutralForeground:alias");
}

af|body:high-contrast af|chooseDate::regular-day:selected,
af|body:high-contrast af|chooseDate::today:selected {
  border: double;
}

@agent (touchScreen:none) {
  af|chooseDate::regular-day:selected:hover,
  af|chooseDate::navigator-cell:selected:hover div {
    -tr-rule-ref: selector(".AFDarkBackground:alias");
    -tr-rule-ref: selector(".AFLightestNeutralForeground:alias");
    -tr-rule-ref: selector(".AFLinkHover:alias");
  }

  af|chooseDate::today:selected:hover {
    border-style: none ;
  }
}

af|chooseDate::regular-day:selected:disabled,
af|chooseDate::navigator-cell:selected:disabled div  {
  -tr-rule-ref: selector(".AFVeryDarkAccentBackground:alias");
  -tr-rule-ref: selector(".AFLightestNeutralForeground:alias");
  text-decoration: none;
}

/* Previous/Next Month Dates */
af|chooseDate::prev-month-day,
af|chooseDate::next-month-day {
 -tr-rule-ref: selector(".AFDarkForeground:alias");
}

@agent (touchScreen:none) {
  af|chooseDate::prev-month-day:hover,
  af|chooseDate::next-month-day:hover {
    -tr-rule-ref: selector(".AFLinkHover:alias");
   -tr-rule-ref: selector(".AFDarkForeground:alias");
  }
}

af|chooseDate::prev-month-day:disabled,
af|chooseDate::next-month-day:disabled {
 -tr-rule-ref: selector(".AFVeryDarkAccentForeground:alias");
 text-decoration: none;
}

af|chooseDate::prev-month-day:selected,
af|chooseDate::next-month-day:selected{
 -tr-rule-ref: selector(".AFVeryDarkAccentForeground:alias");
 text-decoration: none;
}

@agent (touchScreen:none) {
  af|chooseDate::prev-month-day:selected:hover,
  af|chooseDate::next-month-day:selected:hover{
    -tr-rule-ref: selector(".AFDarkBackground:alias");
    -tr-rule-ref: selector(".AFLightestNeutralForeground:alias");
  }
}

af|chooseDate::prev-month-day:selected:disabled,
af|chooseDate::next-month-day:selected:disabled{
  -tr-rule-ref: selector(".AFVeryDarkAccentBackground:alias");
  -tr-rule-ref: selector(".AFLightestNeutralForeground:alias");
  text-decoration: none;
}

af|chooseDate::empty-day-stub{
  outline: none;
  visibility: hidden;
}

/* Today */
af|chooseDate::today {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFFormContentBorder:alias");
}
af|chooseDate::now-row {
  padding: 6px 0px 6px 0px;
}
@agent (touchScreen:none) {
  af|chooseDate::today:hover {
    padding: 1px;
    -tr-rule-ref: selector(".AFLinkHover:alias");
  }
}

af|chooseDate::today:disabled {
  -tr-rule-ref: selector(".AFDarkAccentForeground:alias");
}
af|chooseDate::time-selectors-table{
  margin: auto;
}
/* Padding for time and timezone selectors in chooseDate
 8515499: blaf+ actually requires padding: 0px 5px 5px 5px
  for both browsers but this preserves previous appearance*/
af|chooseDate::time-selectors-row{
  padding: 0px 5px 2px 5px;
  white-space: nowrap;
}
af|chooseDate::spinwheel-time-selectors-row{
  display: flex;
}
af|chooseDate::empty-day-stub{
  outline: none;
  visibility: hidden;
}
@agent ie{
  af|chooseDate::time-selectors-row{
    padding: 2px 5px 7px 5px;
  }
}
/*  8515499: blaf+ actually requires padding: 0px 5px 5px 5px
  for all browsers but this preserves previous appearance*/
af|chooseDate::timezone-selectors-row{
  padding: 2px 5px 2px 5px;
  white-space: nowrap;
}
af|chooseDate::spinwheel-time-selectors-row{
  display: flex;
}

@agent ie{
  af|chooseDate::timezone-selectors-row{
    padding: 2px 5px 7px 5px;
  }
}

af|chooseDate::time-separator {
  padding-left: 5px;
  padding-right: 5px;
}
/* Root style for spinboxes in chooseDate. For styling the spinbox arrows, the
chooseDate styles are grouped near the inputNumberSpinbox*/
af|chooseDate::spinbox {
}
af|chooseDate::spinbox-content{
  -tr-rule-ref: selector("af|inputNumberSpinbox::content");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-inhibit: text-align;
  -tr-inhibit: margin;
}
af|chooseDate::spinbox-content:rtl{
  border-right: 1px solid -tr-property-ref(".AFFormControlContentBorderColor:alias","color");
  border-left: none;
}
af|chooseDate::spinbox:error af|chooseDate::spinbox-content{
  -tr-rule-ref: selector("af|inputNumberSpinbox:error::content");
}
af|chooseDate::increment-cell,
af|chooseDate::decrement-cell {
  -tr-rule-ref: selector("af|chooseDate::spinbox-cell");
}
/* -tr-rule-ref is not yet supported for icons in the css file, so this is doing nothing.
The workaround is to define the relationship in a Skin Java file using ReferenceIcon
af|chooseDate::spinbox-incrementor-icon {
  -tr-rule-ref: selector("af|inputNumberSpinbox::incrementor-icon");
}
*/
af|chooseDate::spinbox-incrementor-icon-style{
  -tr-rule-ref: selector("af|inputNumberSpinbox::incrementor-icon-style");
}
af|body:high-contrast af|chooseDate::spinbox-incrementor-icon-style {
  border: 1px solid;
}
af|body:high-contrast af|chooseDate::spinbox-incrementor-icon-style:after{
  content: url("/afr/spinbox_arrow_up_hc.png");
  position: relative;
  left: 3px;
  top: -5px;
}
/* -tr-rule-ref is not yet supported for icons in the css file, so this is doing nothing.
The workaround is to define the relationship in a Skin Java file using ReferenceIcon.
af|chooseDate::spinbox-decrementor-icon{
  -tr-rule-ref: selector("af|inputNumberSpinbox::decrementor-icon");
}
*/
af|chooseDate::spinbox-decrementor-icon-style{
  -tr-rule-ref: selector("af|inputNumberSpinbox::decrementor-icon-style");
}
af|body:high-contrast af|chooseDate::spinbox-decrementor-icon-style {
  border: 1px solid;
}
af|body:high-contrast af|chooseDate::spinbox-decrementor-icon-style:after{
  content: url("/afr/spinbox_arrow_dn_hc.png");
  position: relative;
  left: 3px;
  top: -5px;
}
af|body:high-contrast af|chooseDate::spinbox-incrementor-icon-style:active:after:rtl,
af|body:high-contrast af|chooseDate::spinbox-incrementor-icon-style:disabled:after:rtl,
af|body:high-contrast af|chooseDate::spinbox-incrementor-icon-style:after:rtl,
af|body:high-contrast af|chooseDate::spinbox-decrementor-icon-style:active:after:rtl,
af|body:high-contrast af|chooseDate::spinbox-decrementor-icon-style:after:rtl{
  right: 3px;
  left: 0px;
}

af|chooseDate::spinbox-incrementor-icon-style:disabled{
  -tr-rule-ref: selector("af|inputNumberSpinbox::incrementor-icon-style:disabled");
}
af|body:high-contrast af|chooseDate::spinbox-incrementor-icon-style:disabled:hover:after,
af|body:high-contrast af|chooseDate::spinbox-incrementor-icon-style:disabled:after{
  content: url("/afr/spinbox_arrow_up_d.png");
  position: relative;
  left: 3px;
  top: -5px;
}

@agent (touchScreen:none) {
  af|chooseDate::spinbox-incrementor-icon-style:hover{
    -tr-rule-ref: selector("af|inputNumberSpinbox::incrementor-icon-style:hover");
  }
  af|body:high-contrast af|chooseDate::spinbox-incrementor-icon-style:hover:after{
    content: url("/afr/spinbox_arrow_up_hc.png");
    position: relative;
    left: 3px;
    top: -5px;
  }
  af|body:high-contrast af|chooseDate::spinbox-incrementor-icon-style:hover:after:rtl{
    left: 0px;
    left: 3px;
  }
}

af|chooseDate::spinbox-incrementor-icon-style:active{
  -tr-rule-ref: selector("af|inputNumberSpinbox::incrementor-icon-style:active");
}
af|body:high-contrast af|chooseDate::spinbox-incrementor-icon-style:active:after{
    content: url("/afr/spinbox_arrow_up_hc.png");
    position: relative;
    left: 3px;
    top: -5px;
}
af|chooseDate::spinbox-decrementor-icon-style:disabled{
  -tr-rule-ref: selector("af|inputNumberSpinbox::decrementor-icon-style:disabled");
}
af|body:high-contrast af|chooseDate::spinbox-decrementor-icon-style:disabled:after{
  content: url("/afr/skyros-v1/spinboxdown_dis.png");
  position: relative;
  left: 3px;
  top: -5px;
}

@agent (touchScreen:none) {
  af|chooseDate::spinbox-decrementor-icon-style:hover{
    -tr-rule-ref: selector("af|inputNumberSpinbox::decrementor-icon-style:hover");
  }
  af|body:high-contrast af|chooseDate::spinbox-decrementor-icon-style:hover:after{
    content: url("/afr/spinbox_arrow_dn_hc.png");
    position: relative;
    left: 3px;
    top: -5px;
  }
  af|body:high-contrast af|chooseDate::spinbox-decrementor-icon-style:hover:after:rtl{
    left: 0px;
    right: 3px;
  }
}

af|chooseDate::spinbox-decrementor-icon-style:active{
  -tr-rule-ref: selector("af|inputNumberSpinbox::decrementor-icon-style:active");
}
af|body:high-contrast af|chooseDate::spinbox-decrementor-icon-style:active:after{
  content: url("/afr/spinbox_arrow_dn_hc.png");
  position: relative;
  left: 3px;
  top: -5px;
}

/* Root style for AM/PM radio buttons in chooseDate */
af|chooseDate::ampm {
}
af|chooseDate::ampm-content {
  -tr-rule-ref: selector("af|selectOneRadio::content-input");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-inhibit: vertical-align;
  -tr-inhibit: padding;
  padding-top: 4px;
  white-space: nowrap;
}
af|chooseDate::ampm-content-input {
  margin-left: 8px;
}
af|chooseDate::ampm-content-input:rtl {
  margin-right: 8px;
}

/* chooseDate: month and timezone select dropdowns are styled with the
 af|chooseDate::choice-list-* keys, defined with the selectOneChoice
 equivalents that they override */
 af|chooseDate::choice-list{
  height: 16px;
}
af|chooseDate::choice-list-content {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFFormControlContentBackground:alias");
  -tr-inhibit: vertical-align;
}
/* ChooseDate: allow default width override for timezone. Private key */
af|chooseDate::timezone-list-content{
  -tr-rule-ref: selector("af|chooseDate::choice-list-content");
}


/* These selectors are needed by the peer. Instead of sending down the uncompressed -> compressed
   map to the client in each request, mark it as no-compress. */
@no-compress {
  .AFChooseDateToggleButtonFacet {
    float: left;
    display: inline-block;
    margin-left: -13px;
    margin-right: 0px;
  }
  .AFChooseDateToggleButtonFacet:rtl {
    float: right;
    display: inline-block;
    margin-right: -13px;
    margin-left: 0px;
  }
}

af|chooseDate::footer-button-date,
af|chooseDate::footer-button-date:active,
af|chooseDate::footer-button-date:active:hover,
af|chooseDate::footer-button-date:hover {
  background: url('/afr/select-date.svg') 4px no-repeat;
  padding-left: 26px;
  padding-right: 4px;
}
af|chooseDate::footer-button-time,
af|chooseDate::footer-button-time:active,
af|chooseDate::footer-button-time:active:hover,
af|chooseDate::footer-button-time:hover {
  background: url('/afr/timepicker-icon.png') 4px no-repeat;
  background-size: 16px 16px;
  padding-left: 26px;
  padding-right: 4px;
}
af|chooseDate::footer-button-date:rtl {
  padding-right: 26px;
  padding-left: 4px;
}
af|chooseDate::footer-button-time:rtl {
  padding-right: 26px;
  padding-left: 4px;
}



/* calendar */

/* yellowish background */
.AFCalendarTodayBackground:alias {
  background-color: #FFFCD8;
}

.AFCalendarTodayHeaderBackground:alias {
  background-color: #C4CEE0;
}

.AFCalendarActiveDayHeaderBackground:alias {
  background-color: #A2ADBF;
}

/* end calendar alias section */

/* root style This is the default width/height.
This gets automatically overwritten by the style attribute by a stretch component like
panelStretchLayout if the calendar is within a stretch component
(i.e., a component that stretches its children) This can be overwritten by using
inlineStyle */
af|calendar {
  width: 750px;
  height: 450px;
  position: relative;
  border-top: #C3CAD5 1px solid;
  border-left: #B0B9C8 1px solid;
  border-bottom: #B0B9C8 1px solid;
  border-right: #B0B9C8 1px solid;
  overflow: hidden;
  -tr-time-slots-per-hour: 2;

  -tr-flexList-size-sm: 868;
  -tr-provider-grouping-size-sm: 868;
  /*-tr-flexList-size-md: ;
  -tr-flexList-size-lg: ;
   anything greater than this is xl */
}

af|calendar:printable{
  position:static;
  width:auto;
  height: auto;
  overflow: visible;
}

/* turn off borders for toolbox when they are in calendar, except for the bottom in the row */
af|calendar af|toolbox::body {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
}
af|calendar af|toolbox::row,
af|calendar af|toolbox::last-row {
  border-bottom: 1px #ACBACF solid;
  border-right: none;
}
/* All Day activity styles shared by day, week and month */
af|calendar::all-day-activity {
  -tr-rule-ref: selector(".AFMediumAccentBackground:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  overflow:hidden;
  white-space: nowrap;
  cursor: pointer;
}

af|calendar:printable af|calendar::all-day-activity {
  cursor: default;
}

/* Used when an activity is being dragged*/
af|calendar::all-day-activity:drag-source{
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
  opacity: .4;
}

@agent ie {
  af|calendar::all-day-activity:drag-source {
    filter: alpha(opacity:40);
  }

  /*IE bug: Does not draw a focus outline*/
  af|calendar::provider-grouped-time-activity-outer-container:focus,
  af|calendar::time-activity-outer-container:focus,
  af|calendar::all-day-activity:focus,
  af|calendar::month-time-activity:focus,
  af|calendar::month-overflow-link-wrapper:focus,
  af|calendar::list-title-link:focus {
    outline: thin dotted;
  }
}


af|calendar::all-day-activity:drag-end{
  border-right: 1px -tr-property-ref(".AFLightestNeutralBackground:alias","background-color") solid;
}


af|calendar::all-day-activity:drag-end:rtl{
  -tr-inhibit: border-right;
  border-left: 1px -tr-property-ref(".AFLightestNeutralBackground:alias","background-color") solid;
}

/* margin-top is to center the icon */
/* private since this is positioning only */
.AFCalendarPrevIconStyle:alias {
  padding-left: 2px;
  position: absolute;
  left: 0px;
  margin-top: .22em;
}
/* margin-top is to center the icon */
/* private since this is positioning only */
.AFCalendarNextIconStyle:alias {
  position:absolute;
  right:0px;
  padding-right: 2px;
  margin-top: .22em;
}

/* Icon style for the previous arrow in calendar. Inhibit right/padding-right we
may otherwise inherit, e.g. in RTL the keys are merged so we end up with
both left:0px and right:0px */
af|calendar::all-day-activity-prev,
af|calendar::all-day-activity-next:rtl {
  -tr-rule-ref: selector(".AFCalendarPrevIconStyle:alias");
  -tr-inhibit : right;
  -tr-inhibit : padding-right;
}
/* Icon style for the next arrow in calendar. Inhibit right/padding-right we
may otherwise inherit, e.g. in RTL the keys are merged so we end up with
both left:0px and right:0px */
af|calendar::all-day-activity-next,
af|calendar::all-day-activity-prev:rtl {
  -tr-rule-ref: selector(".AFCalendarNextIconStyle:alias");
  -tr-inhibit : left;
  -tr-inhibit : padding-left;
}
af|calendar::all-day-activity-prev-icon,
af|calendar::all-day-activity-next-icon:rtl {
  content: "<";
}
af|calendar::all-day-activity-next-icon,
af|calendar::all-day-activity-prev-icon:rtl{
  content: ">";
}


af|calendar::all-day-activity-time {
  padding-bottom: 3px;
  padding-top: 3px;
  padding-left: 3px;
  padding-right: 3px;
}

/* without inline-block in rtl mode, the right/left padding doesn't work correctly. There is
still a little gap above the time, but this is the best I can get so far.
It is also needed in IE when the text size is increased. It screws things up in Firefox, however.*/
@agent ie {
  af|calendar::all-day-activity-time {
    padding-bottom: 2px;
    padding-top: 0px;
    display: inline-block;
  }
}


af|calendar::all-day-activity-text,
af|calendar::duration-activity-text {
  padding-left: 3px;
  padding-right: 0px;
  padding-top: 3px;
  padding-bottom: 3px;
}

@agent ie {
  /* without inline-block, the right/left padding doesn't work correctly
  in rtl mode and when the text size is increased it doesn't work correctly in IE.
  It screws things up in Firefox, however. */
  af|calendar::all-day-activity-text,
  af|calendar::duration-activity-text {
    padding-top: 0px;
    padding-bottom: 2px;
    display: inline-block;
  }
}
af|calendar::all-day-activity-text:rtl,
af|calendar::duration-activity-text:rtl{
  padding-right: 3px;
  padding-left: 0px;
}

af|calendar::all-day-activity-duration,
af|calendar::duration-activity-duration {
  padding: 3px;
}

af|calendar::all-day-activity.AFShortDuration {
  background: none;
}

/* week */

af|calendar::week-vgrid {
  border-left: 2px solid #cfdceb;
  cursor: default;
  position: absolute;
  top: 0px;
  height: 100%;
  z-index: 2;
}

af|calendar::day-of-week {
  cursor: default;
  position: absolute;
  top: 0px;
  height: 100%;
}

af|calendar::activity-grid-column af|calendar::day-of-week  {
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
}

af|calendar af|calendar::day-of-week:today {
  -tr-rule-ref: selector(".AFCalendarTodayBackground:alias");
}

/* private style - this holds the activities in a day in the day & week view */
af|calendar::time-activities-cell {
  position: absolute;
  top: 0px;
  height: 100%;
  z-index: 2;
}


@agent ie {
  /* Needed in IE so that the grid  shows on top of the drop target day cell in week view.
     The issue is that the filter based opacities in IE are applied at the drawing screen level
     instead of CSS cascading like FF*/

  af|calendar:drop-target af|calendar::week-vgrid{
    filter: alpha(opacity:100);
  }

  af|calendar:drop-target af|calendar::day-of-week{
    filter: alpha(opacity:100);
  }

  af|calendar:drop-target af|calendar::all-day-activity{
    filter: alpha(opacity:100);
  }

  af|calendar:drop-target af|calendar::all-day-container{
    filter: alpha(opacity:100);
  }

  /* This is needed for bothe week view and month view */
  af|calendar:drop-target af|calendar::hgrid-minor,
  af|calendar:drop-target af|calendar::hgrid-major{
    filter: alpha(opacity:100);
  }

}

/* Drop target styles for week view*/
af|calendar::day-of-week:drop-target{
  background-color: #F7FDFE;
}


/* Drop target color for today */
af|calendar::day-of-week:today:drop-target {
  background-color: #FFFEEF;
}

/* We want the drop target state for calendar to have no alternate appearance; override the
   default styles that come from generic drop-target elements. */
af|calendar:drop-target {
  background-color: transparent;
  opacity: 1;
}
@agent ie {
  af|calendar:drop-target {
    filter: alpha(opacity:100);
  }
}

/* root dom element of the day part of the calendar */

af|calendar::view {
  position:absolute;
  left:0px;
  right:0px;
  bottom:0px;
}

af|calendar:printable af|calendar::view {
  position:static;
}

/* Header styles for day, week, and month */
/* dom node that surounds the day-header/week-header-row and all-day-container */
af|calendar::header-all-day-container {
}

/* This is where the header for the day is -- that's it the date we are viewing */
/* It is recommended that you do not skin the height property */
af|calendar::day-header-row {
  text-align:center;
  height: 1.8em;
  box-sizing: border-box;
  padding-top: 2px;
}

af|calendar::day-header-row-wrapper {

}

af|calendar::day-provider-header {
  display: inline-block;
  box-sizing: border-box;
}

af|calendar::day-header-row-wrapper af|calendar::day-header-row
{
  display: inline-block;
  box-sizing: border-box;
}

af|calendar:printable af|calendar::day-header-row {
 margin-bottom: -1em;
}

@agent gecko {
  af|calendar::day-header-row {
    -tr-inhibit: box-sizing;
    -moz-box-sizing: border-box;
  }
}

af|calendar::day-header-row:customDayHeader {
  height: 36px;
}

/* It is recommended that you do not skin the height property */
af|calendar::week-header-row {
  position: relative;
  -tr-rule-ref: selector(".AFCalendarWeekMonthHeaderHeight:alias");
  margin-right:16px;
}
af|calendar::week-header-row:rtl {
  margin-right:0px;
  margin-left:16px;
}
af|calendar::week-header-row:customWeekHeader {
  height: 36px;
}

af|calendar::week-header-row-wrapper {

}
af|calendar::week-provider-header
{
  display: inline-block;
  box-sizing: border-box;
}

af|calendar::week-header-row-wrapper af|calendar::week-header-row
{
  display: inline-block;
  box-sizing: border-box;
}


af|calendar::week-header-row-offset {
  margin-right:16px;
  margin-left:5em;
}

af|calendar:printable af|calendar::week-header-row-offset {
 margin-right:0px;
 margin-bottom: -1em;
}

af|calendar::week-header-row-offset:rtl {
  margin-right:5em;
  margin-left:16px;
}

af|calendar::week-header-cell {
  text-align: center;
  position: absolute;
  height:100%;
  padding-top:3px;
}

/* get the top border from the toolbox */
af|calendar::all-day-container {
  position: absolute;
  cursor: pointer;
  border:1px solid;
  border-color:#BFC6C9;
  -tr-rule-ref: selector(".AFLightBackground:alias");
  overflow-x: hidden;
  overflow-y: scroll;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: -moz-scrollbars-vertical;
}

af|calendar:printable af|calendar::all-day-container {
  position: relative;
  overflow-x: visible;
  overflow-y: visible;
  cursor: default;
}

/* Workaround an old Firefox bug (Bugzilla@Mozilla bugid 292284) that causes FF not to draw a vertical scrollbar when the height falls below 34px */
@agent gecko {
  af|calendar::all-day-container {
    min-height: 34px;
  }
}


/* used in both day and week view when all-day container requires a margin to match the time grid width */
af|calendar::all-day-container-offset {
  margin-right:0px;
  margin-left:5em;
}
af|calendar::all-day-container-offset:rtl {
  margin-right:5em;
  margin-left:0px;
}

/* week view should not have margin-right in IE only so the day vgrids line up.
IE counts the scrollbar in its width calculation and Firefox does not (which is probably a bug)* /
@agent ie {
/*  used in both day and week view when all-day container requires a margin to match the time grid width * /
  af|calendar::week af|calendar::all-day-container-offset {
    margin-right:0px;
    margin-left:5em;
  }
  af|calendar::week af|calendar::all-day-container-offset:rtl {
    margin-left:0px;
    margin-right:5em;
  }
}*/

af|calendar::header-all-day-container-text {
  display: none; /* Apps to opt in by overriding display to block*/
  max-width: 5em; /* match the offset above*/
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  position: absolute;
  bottom: 0;
  text-align: right;
  font-size: -1;
}

af|calendar::header-all-day-container-text:rtl {
  text-align: left;
}

af|calendar::day af|calendar::all-day-container:drop-target{
  background-color: #E5F6FA;
}

af|calendar::day af|calendar::all-day-activity {
  margin-top:1px;
  padding: 1px 0px 1px 0px;
  margin-left: 8px;
  margin-right: 8px;
  position: relative;
  height: 1.5em;
}

af|calendar::day af|calendar::all-day-activity:has-prev,
af|calendar::day af|calendar::all-day-activity:has-next:rtl {
  margin-left: 0px;
  margin-right: 8px;
}
af|calendar::day af|calendar::all-day-activity:has-next,
af|calendar::day af|calendar::all-day-activity:has-prev:rtl {
  margin-left: 8px;
  margin-right: 0px;
}
af|calendar::day af|calendar::all-day-activity:has-prev:has-next{
  margin-left: 0px;
  margin-right: 0px;
}

/* reset the calendar splitter dimensions and position*/
af|calendar::day af|panelSplitter,
af|calendar::week af|panelSplitter {
  position: absolute;
  top: 1.8em;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  height: auto;
  width: auto;
  background: none;
}

af|calendar:printable af|calendar::day af|panelSplitter,
af|calendar:printable af|calendar::week af|panelSplitter {
  position: static;
}

af|calendar::day af|panelSplitter::vertical-icon-container,
af|calendar::week af|panelSplitter::vertical-icon-container {
  padding: 0px;
  left: 50%;
  right: 50%;
  margin: 0 -11px;
}

af|calendar::duration-activity-grid-column {
  position: absolute;
  height: auto;
  width: auto;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
}

af|calendar::activity-grid-column:today {
  -tr-rule-ref: selector(".AFCalendarTodayBackground:alias");
}

/* The grid that holds the timeslots for each hour of a day and the activities for the day/week */
af|calendar::time-activity-grid-container {
  position:absolute;
  left:0px;
  right:0px;
  bottom:0px;
  overflow-x:hidden;
  overflow-y:scroll;
  height:auto;
  border-top:1px solid #B4CAD7;
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
}

af|calendar:printable af|calendar::time-activity-grid-container {
  position:static;
  overflow-x:visible;
  overflow-y:visible;
}

/* no need to skin this, most likely, so we can leave as private. */
af|calendar::time-activity-grid-table{
  table-layout: fixed;
  width: 100%;
}

/* no need to skin this, most likely, so we can leave as private. */
af|calendar::provider-activity-grid-table{
  width: 100%;
}

/* width here should match the margin in day-header and the all-day-container */
af|calendar::time-column {
  width: 5em;
  text-align: left;
  border-right: #C4CEE0 1px solid;
  -tr-rule-ref: selector(".AFLightBackground:alias");
}

af|calendar::time-cell {
  position:absolute;
  width:100%;
  left:0;
  border-top:1px solid #C4CEE0;
  height: 3em;
}
/* no wrap is needed for Chinese characters */
af|calendar::time-text {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  text-align:right;
  padding-right:4px;
  white-space: nowrap;
}
/* private, used as an include */
.AFCalendarDayGrid:alias {
  position:absolute;
  width:100%;
  left:0;
}
/* even and odd lines in the day and week views */
af|calendar::hgrid-minor {
  -tr-rule-ref: selector(".AFCalendarDayGrid:alias");
  border-top:1px dotted #C4CEE0;
}
af|calendar::hgrid-major {
  -tr-rule-ref: selector(".AFCalendarDayGrid:alias");
  border-top:1px solid #C4CEE0;
}

af|calendar::hgrid-major:drop-target, af|calendar::hgrid-minor:drop-target {
  background-color: #EDF9FB;
  opacity: 1;
}

@agent ie {
  af|calendar::hgrid-major:drop-target, af|calendar::hgrid-minor:drop-target {
    filter: alpha(opacity:100);
  }
}

/* do not document. This is private and used for positioning */
af|calendar::provider-grouped-time-activity-outer-container {
  z-index:2;
  position:relative;
  left: 3px;
  right: 8px;
  cursor: pointer;
  margin: 5px 5px 10px 0px;
}


af|calendar::time-activity-outer-container {
  z-index:2;
  position:absolute;
  left: 3px;
  right: 8px;
  cursor: pointer;
}

af|calendar:printable af|calendar::provider-grouped-time-activity-outer-container,
af|calendar:printable af|calendar::time-activity-outer-container {
 cursor: default;
}

af|calendar::provider-grouped-time-activity-outer-container:rtl,
af|calendar::time-activity-outer-container:rtl {
  left: 8px;
  right: 3px;
}
/* work around gecko bug where left takes precedence in RTL language, when we want right to
take precedence. We inhibit left, and instead write it on the dom in code if the width is 0 and
we need it to add width to the activity */
@agent gecko {
  af|calendar::provider-grouped-time-activity-outer-container:rtl,
  af|calendar::time-activity-outer-container:rtl {
    -tr-inhibit: left;
  }
}

af|calendar::time-activity-container {
  -tr-rule-ref: selector(".AFMediumAccentBackground:alias");
  overflow:hidden;
  margin:0;
  position:relative;
}

/* Used when an activity is being dragged. Hide the original activity*/
af|calendar::provider-grouped-time-activity-outer-container:drag-source,
af|calendar::time-activity-outer-container:drag-source{
  display: none;
}

@agent ie {
  /* Needed in IE so that the activity shows on top of the drop target grid cell*/
  af|calendar:drop-target af|calendar::provider-grouped-time-activity-outer-container,
  af|calendar:drop-target af|calendar::time-activity-outer-container{
    filter: alpha(opacity:100);
  }
}

af|calendar::time-activity-header {
  -tr-rule-ref: selector(".AFDarkBackground:alias");
  padding-left: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
  white-space: nowrap;
}

/*
  If the activity is moveable display move cursor on the header
 */
af|calendar::provider-grouped-time-activity-outer-container:moveable af|calendar::time-activity-header,
af|calendar::time-activity-outer-container:moveable af|calendar::time-activity-header{
  cursor: move;
}

af|calendar::time-activity-header:rtl {
  padding-right:3px;
}
af|calendar::time-activity-content {
  margin: 0px;
  padding-left: 3px;
}
af|calendar::time-activity-content:rtl {
  padding-right: 3px;
}

af|calendar::time-activity-resize-grip{
  height: 3px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  background-image: url('/afr/activity_resize.png');
  background-position: center bottom;
  background-repeat: no-repeat;
  text-align: center;
  cursor: s-resize;
  margin: 0px;
}

af|calendar::provider-item {
  min-height: 50px;
  border-top: solid 1px lightgray;
  padding: 10px 0px 5px 0px;
}

af|calendar::provider-details {
  border-bottom: 1px solid #D6DFE6;
  box-sizing: border-box;
  padding: 10px;
}

af|calendar::provider-details:last {
  border-bottom: none;
}

af|calendar::provider-activity-list {
  display: inline-block;
  width: calc(100% - 270px);
}

af|calendar::provider-activity-grouping {
  padding: 5px 0 5px 0;
  border-bottom: 1px solid #D6DFE6;
  box-sizing: border-box;
}

af|calendar::provider-activity-grid-table af|calendar::time-column {
  border-right: none;
}

af|calendar::provider-activity-grid-table af|calendar::time-activity-container {
  border-radius: 3px;
}

af|calendar::provider-activity-grid-table af|calendar::time-activity-content {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

af|calendar::provider-activity-grid-table af|calendar::time-activity-header {
  padding-top: 10px;
}

af|calendar::provider-activity-grid-table af|calendar::provider-grouped-time-activity-outer-container {
  margin: 5px 2.5px 5px 2.5px;
}

af|calendar::provider-activity-grid-table af|calendar::provider-activity-grouping {
  padding: 4px 0px 5px 0px;
}

.p_AFCalendarSizeSm af|calendar::week af|calendar::provider-activity-grid-table af|calendar::time-activity-header {
  padding-top: 5px;
  white-space: normal;
}

af|calendar::provider-activity-grouping:last {
  padding: 5px 0 5px 0;
  border-bottom: none;
}

af|calendar::provider-activity {
  height: 30px;
  margin: 0px 0px 5px 5px;
  background-color: #87cdef;
  padding: 5px;
  border-radius: 3px;
}

af|calendar::provider-header-employee {
  display: inline-block;
  width: 250px;
}

af|calendar::provider-employee {
  margin: 0px 5px 5px 5px;
  padding: 5px;
}

af|calendar::provider-header-day {
  display: inline-block;
  width: calc(100% - 250px);
}

af|calendar::all-day-activity-resize-grip {
  height: 100%;
  width: 3px;
  position: absolute;
  right: 0px;
  cursor: e-resize;
}
af|calendar::all-day-activity-resize-grip:rtl {
  cursor: w-resize;
  -tr-inhibit: right;
  left: 0px;
}

/* Activity icons */
af|calendar::reminder-light-icon {
  content: url(/afr/cal_reminder.png);
  width: 12px;
  height: 12px;
}
af|calendar::recurring-light-icon {
  content: url(/afr/cal_repeat.png);
  width: 12px;
  height: 12px;
}
af|calendar::recurring-change-light-icon {
  content: url(/afr/cal_repeat_chg.png);
  width: 12px;
  height: 12px;
}


af|calendar::reminder-dark-icon {
  content: url(/afr/cal_reminder_blk.png);
  width: 12px;
  height: 12px;
}

af|body:high-contrast af|calendar::reminder-dark-icon {
  content: url(/afr/cal_reminder_blk_hc.png);
}

af|calendar::recurring-dark-icon {
  content: url(/afr/cal_repeat_blk.png);
  width: 12px;
  height: 12px;
}

af|body:high-contrast af|calendar::recurring-dark-icon {
  content: url(/afr/cal_repeat_blk_hc.png);
}

af|calendar::recurring-change-dark-icon {
  content: url(/afr/cal_repeat_chg_blk.png);
  width: 12px;
  height: 12px;
}

af|body:high-contrast af|calendar::recurring-change-dark-icon {
  content: url(/afr/cal_repeat_chg_blk_hc.png);
}

af|calendar::activity-icon-container {
  padding-left: 3px;
  padding-right: 3px;
}
/* without inline-block when the text size is increased
it doesn't work correctly in IE*/
af|calendar::all-day-container af|calendar::activity-icon-container {
  padding-top: 3px;
  padding-bottom: 3px;
}
/* calendar toolbar icons */

af|calendar::toolbar-day-icon {
  content: url(/afr/cal_day.png);
  width: 16px;
  height: 16px;
}

af|calendar::toolbar-day-icon:rtl {
  content: url(/afr/cal_day_rtl.png);
}

af|calendar::toolbar-week-icon{
  content: url(/afr/cal_week.png);
  width: 16px;
  height: 16px;
}

af|calendar::toolbar-week-icon:rtl{
  content: url(/afr/cal_week_rtl.png);
}

af|calendar::toolbar-month-icon {
  content: url(/afr/cal_month.png);
  width: 16px;
  height: 16px;
}

af|calendar::toolbar-list-icon {
  content: url(/afr/cal_list.png);
  width: 16px;
  height: 16px;
}
af|calendar::toolbar-list-icon:rtl {
  content: url(/afr/cal_list_rtl.png);
}

af|calendar::toolbar-prev-icon {
  content: "<";
}

af|calendar::toolbar-next-icon {
  content: ">";
}


/* toolbar styles */

af|calendar::toolbar-display-range {
  margin:0em .5em;
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  white-space:nowrap;
}

af|calendar:printable af|calendar::toolbar-display-range {
  margin:auto;
  display:table;
}

af|calendar:printable af|toolbar::body,
af|calendar:printable af|toolbar::items {
  width:100%;
}

/* start calendar list styles */

af|calendar::list{
  overflow-x:auto;
  overflow-y:auto;
  height:auto;
}

af|calendar:printable af|calendar::list{
  position:static;
  overflow-x:visible;
  overflow-y:visible;
  height: auto;
  border-top:0px;
  left:auto;
  right:auto;
  bottom:auto;
}

af|calendar::list-container {
  width:100%;
}

af|calendar::list-empty {
  padding:.25em .5em;
  border-top:0px
}

/* start calendar list row styles */

af|calendar::list-row {
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
}

af|calendar::list-row:today {
  -tr-rule-ref: selector(".AFCalendarTodayBackground:alias");
}

af|calendar::list-cell {
  white-space:nowrap;
  padding:1px 0.5em;
  vertical-align: top;
}

af|calendar::list-activity-icons-cell {
  display: inline-block;
  margin-bottom: -3px;
  margin-top: 3px;
}

af|calendar::list-activity-provider-name-cell {
  display: block;
  margin-top: 4px;
}

af|calendar::flexList-date-header{
  padding: 10px 0px 9px 0px;
  border-bottom: 1px solid #E2E2E2;
}

af|calendar::list-day-of-week-column {
  vertical-align:top;
  -tr-rule-ref: selector(".AFLightBackground:alias");
  padding-top: 3px;
}

af|calendar::flexList-activity {
  padding-bottom: 10px;
  padding-left: 25px;
}

@agent (touchScreen) {
  .p_AFCalendarSizeSm af|calendar::flexList-activity {
    padding-left: 5px;
  }
}

af|calendar::flexList-activity-title{
  text-decoration: none;
  color: #707070;
  padding-left: 23px;
  display: inline-block;
  line-height: 18px;
  width: unset;
}

.p_AFCalendarSizeSm af|calendar::flexList-activity-title {
  width: calc(100% - 23px);
}

af|calendar::flexList-activity-icons {
  margin-left: 10px;
  display: inline;
}

af|calendar::flexList-day-of-month-link {
  white-space: nowrap;
  color: #252525;
  margin: 0 7px;
  text-decoration: none;
  -tr-rule-ref: selector(".AFDefaultFontSize:alias");
  font-size: +2;
}

af|calendar::flexList-weekday,
af|calendar::flexList-activity-provider-name {

}

af|calendar::flexList-title-link{
  color: #145c9e;
  text-decoration: none;
  margin-left: 10px;
  padding-right: 5px;
}

af|calendar::flexList-time{
  display: inline-flex;
  width: 40%;
  min-width: 200px;
}

af|calendar::flexList-activity-provider{
  display: none;
}

af|calendar::flexList-activities{
  list-style-type: none;
  -webkit-padding-start: 0px;
  border-bottom: 1px solid #E2E2E2;
  margin: 0px;
  padding: 14px 0px 4px 0px;
}

af|calendar::flexList-swatch{
  display: inline;
}

af|calendar::flexList-activities af|calendar::flexList-swatch af|calendar::list-swatch-container{
  border: none;
  margin-top: 3px;
  border-radius: unset;
  width: 15px;
  height: 15px;
}

af|calendar::flexList-time > img {
  margin-top: 8px;
}

af|calendar::list-day-of-month-column {
  vertical-align:top;
  padding-top: 3px;
}

af|calendar::list-time-column {
  text-align:right;
}

af|calendar::list-time-column:rtl {
  text-align:left;
}

af|calendar::list-cell:stretched {
  width:95%;
  white-space: normal;
}

af|calendar::list-cell:first {
  padding-top: 3px;
}


/* end calendar list cell styles */

/* see the link section for calendar link styles*/

af|calendar::list-swatch-container {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  margin-right:1px;
  margin-left:1px;
  margin-top: 4px;
  width: 15px;
  height: 15px;
  vertical-align: top;
}

/* end calendar list styles */

/* start calendar month styles */
/* private since this is positioning only */
.AFCalendarWeekMonthHeaderHeight:alias {
  height:1.8em;
}
/* we add the z-index so the bottom border isn't hiden behind the month-grid */
af|calendar::month-header-row {
  position: relative;
  -tr-rule-ref: selector(".AFCalendarWeekMonthHeaderHeight:alias");
  border-bottom: 1px solid #B4CAD7;
  -tr-rule-ref: selector(".AFMediumBackground:alias");
  z-index: 1;
}

af|calendar::month-header-cell {
  text-align: center;
  position: absolute;
  height:100%;
  padding-top:3px;
}

/* month grid container - contains table of day cells*/
af|calendar::month-grid{
  position:absolute;
  left:0px;
  right:0px;
  bottom:0px;
  overflow: hidden;
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
}

af|calendar:printable af|calendar::month-grid {
 position: relative;
 overflow: visible;
}

af|calendar::month-grid-row {
  position: absolute;
  left: 0px;
  right: 0px;
  opacity: 1.0;
}

@agent ie {
  af|calendar::month-grid-row {
    filter: alpha(opacity:100);
  }
}

af|calendar::month-grid-cell {
  position: absolute;
  top: 0px;
  bottom: 0px;
  z-index: 1;
  border-bottom: 1px solid #CFDCEB;
  border-left: 1px solid #CFDCEB;
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
}
af|calendar::month-grid-cell:rtl {
  border-left: 0px solid #CFDCEB;
  border-right: 1px solid #CFDCEB;
}
af|calendar::month-grid-cell:prev-month,
af|calendar::month-grid-cell:next-month {
  -tr-rule-ref: selector(".AFMediumBackground:alias");
}
af|calendar::month-grid-cell:prev-month:today,
af|calendar::month-grid-cell:next-month:today,
af|calendar::month-grid-cell:today{
  -tr-rule-ref: selector(".AFCalendarTodayBackground:alias");
}
af|calendar::month-header-cell:today,
af|calendar::list-row:today af|calendar::list-day-of-week-column,
af|calendar::week-header-cell:today,
af|calendar::week-header-cell:today:active-day {
  -tr-rule-ref: selector(".AFLightestNeutralForeground:alias");
  -tr-rule-ref: selector(".AFCalendarTodayHeaderBackground:alias");
}

af|calendar::month-grid-cell:today af|calendar::month-grid-cell-header,
af|calendar::month-grid-cell:today:active-day af|calendar::month-grid-cell-header,
af|calendar::list-row:today:active-day af|calendar::list-day-of-week-column {
  -tr-rule-ref: selector(".AFLightestNeutralForeground:alias");
  -tr-rule-ref: selector(".AFCalendarTodayHeaderBackground:alias");
}
af|calendar::month-grid-cell:active-day af|calendar::month-grid-cell-header,
af|calendar::list-row:active-day af|calendar::list-day-of-week-column,
af|calendar::week-header-cell:active-day {
  -tr-rule-ref: selector(".AFLightestNeutralForeground:alias");
  -tr-rule-ref: selector(".AFCalendarActiveDayHeaderBackground:alias");
}

/*drop target styles during drag and drop*/
af|calendar::month-grid-cell:drop-target,
af|calendar::month-grid-cell:today:drop-target,
af|calendar::month-grid-cell:active-day:drop-target{
  background-color: #EDF9FB;
  opacity: 1;
}

@agent ie {
  af|calendar::month-grid-cell:drop-target,
  af|calendar::month-grid-cell:today:drop-target,
  af|calendar::month-grid-cell:active-day:drop-target {
    filter: alpha(opacity:100);
  }

  /* Needed in IE so that the activity shows on top of the drop target grid cell*/
  af|calendar:drop-target af|calendar::all-day-activity,
  af|calendar:drop-target af|calendar::month-time-activity{
    filter: alpha(opacity:100);
  }

  af|calendar:drop-target af|calendar::month-grid-cell{
    filter: alpha(opacity:100);
  }
}

af|calendar::month-grid-cell:drop-target af|calendar::month-grid-cell-header,
af|calendar::month-grid-cell:today:drop-target af|calendar::month-grid-cell-header,
af|calendar::month-grid-cell:active-day:drop-target af|calendar::month-grid-cell-header,
af|calendar::month-grid-cell:prev-month:drop-target af|calendar::month-grid-cell-header,
af|calendar::month-grid-cell:next-month:drop-target af|calendar::month-grid-cell-header
{
  background-color: #E5F6FA;
}

af|calendar::month-grid-cell:today:drop-target af|calendar::month-grid-cell-header-day-link,
af|calendar::month-grid-cell:active-day:drop-target af|calendar::month-grid-cell-header-day-link,
af|calendar::month-grid-cell:today:active-day:drop-target af|calendar::month-grid-cell-header-day-link
{
  -tr-rule-ref: selector(".AFLinkForeground:alias");
}

af|calendar::month-grid-cell-header-misc {
  white-space:nowrap;
  font-style:italic;
  position:absolute;
  float:left;
  left:2px;
}


af|calendar::month-grid-cell-header {
  -tr-rule-ref: selector(".AFLightBackground:alias");
  border-bottom: 1px solid #CFDCEB;
  padding-bottom: 3px;
  padding-top: 3px;
  width: 100%;
  text-align: right;
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  height: 1.9em;
}
/* day view's all-day-activities are not positioned and the week/month activites are. */
/* the week/month all-day-activities need a little left/right padding so they don't blend into
one another */
af|calendar::month af|calendar::all-day-activity,
af|calendar::week af|calendar::all-day-activity {
  padding-left: 1px;
  padding-right: 1px;
  position:absolute;
  z-index: 5;
  border-top:1px solid white;
}

/* The height of the selectors below need to match
     - af|calendar::month af|calendar::all-day-activity
     - af|calendar::month-time-activity
*/
af|calendar::month af|calendar::all-day-activity {
  height:1.5em;
}
af|calendar::week af|calendar::all-day-activity {
  height:1.5em;
}

af|calendar::all-day-activity-text-wrapper {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  overflow:hidden;
  white-space: nowrap;
  padding-top: 2px;
}
/* private. used to position only */
af|calendar::month-time-activity-wrapper {
  position:absolute;
  white-space:nowrap;
  overflow:hidden;
  z-index:5;
  padding-top: 3px;
}

@agent ie and (version: 9), ie and (version: 10) {
  af|calendar::month-time-activity-wrapper {
    padding-top: 4px;
  }
}

/* The activity text is absolutely positioned to appear to the right of the Previous Arrow (if ltr, NextArrow for rtl).
The left is set to: the icon length + its padding-left + spacing between the icon and the text (12 + 2 + 3) */
af|calendar::day af|calendar::all-day-activity:has-prev af|calendar::all-day-activity-text-wrapper,
af|calendar::day af|calendar::all-day-activity:has-next af|calendar::all-day-activity-text-wrapper:rtl,
af|calendar::week af|calendar::all-day-activity:has-prev af|calendar::all-day-activity-text-wrapper,
af|calendar::week af|calendar::all-day-activity:has-next af|calendar::all-day-activity-text-wrapper:rtl,
af|calendar::month af|calendar::all-day-activity:has-prev af|calendar::all-day-activity-text-wrapper,
af|calendar::month af|calendar::all-day-activity:has-next af|calendar::all-day-activity-text-wrapper:rtl{
  left: 17px;
  right: 0px;
}

/* The activity text is absolutely positioned to appear to the left of the Next Arrow (if ltr, PreviousArrow for rtl).
The right is set to: the icon length + its padding-left + spacing between the icon and the text (12 + 2 + 3) */
af|calendar::day af|calendar::all-day-activity:has-next af|calendar::all-day-activity-text-wrapper,
af|calendar::day af|calendar::all-day-activity:has-prev af|calendar::all-day-activity-text-wrapper:rtl,
af|calendar::week af|calendar::all-day-activity:has-next af|calendar::all-day-activity-text-wrapper,
af|calendar::week af|calendar::all-day-activity:has-prev af|calendar::all-day-activity-text-wrapper:rtl,
af|calendar::month af|calendar::all-day-activity:has-next af|calendar::all-day-activity-text-wrapper,
af|calendar::month af|calendar::all-day-activity:has-prev af|calendar::all-day-activity-text-wrapper:rtl {
  left: 0px;
  right: 17px;
}

/* The activity text is absolutely positioned to appear between the Previous Arrow and Next Arrow.
The left/right are set to: the icon length + its padding-left + spacing between the icon and the text (12 + 2 + 3) */
af|calendar::day af|calendar::all-day-activity:has-prev:has-next  af|calendar::all-day-activity-text-wrapper,
af|calendar::week af|calendar::all-day-activity:has-prev:has-next  af|calendar::all-day-activity-text-wrapper,
af|calendar::month af|calendar::all-day-activity:has-prev:has-next  af|calendar::all-day-activity-text-wrapper{
  left: 17px;
  right: 17px;
}


/* The height of the selectors below need to match
     - af|calendar::month af|calendar::all-day-activity
     - af|calendar::month-time-activity
*/
af|calendar::month-time-activity {
  white-space:nowrap;
  margin-right: 5px;
  margin-left: 5px;
  height:1.5em;
  overflow:hidden;
  cursor: pointer;
  -tr-rule-ref: selector(".AFDefaultFont:alias");
}

af|calendar:printable af|calendar::month-time-activity {
 cursor: default;
}

/* Used when an activity is being dragged*/
af|calendar::month-time-activity:drag-source{
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
  opacity: .4;
}

@agent ie {
  af|calendar::month-time-activity:drag-source {
    filter: alpha(opacity:40);
  }
}

af|calendar::month-overflow-link-wrapper {
  position: absolute;
  z-index: 5;
  text-align: center;
}

/* end calendar month styles */

/* Alta Calendar uses more skinning keys to control the calendar appearance than prior implementations. The
following are fallbacks if the Alta calendar code is run with pre-Alta skin. These are ignored by pre-Alta implementations.

    RCUX supplied Alta->Skyros fallback, if Alta colors not available use these Skyros colors
    1. Blue -> Steel Blue
    2. Orange -> Seaweed
    3. Green -> Green
    4. Purple -> Lavender
    5. Citrine -> Brick Red
    6. Red -> Lime
    7. Yellow -> Gold
    8. Cornflower -> Indigo
    9. Turquoise -> Midnight Blue
    10. Peach -> Orange
    11. Magenta -> Plum
    12. Moss -> Teal
*/
/* all day activities have a border but not for short duration tasks */
.AFCalendarAllDayActivityShortDuration:alias {
  border: none;
  background: none;
}
/* Category1 : Alta Blue -> Steel Blue*/
.AFCalendarCategory1DarkColor:alias {
  color: #3d69a2;
}
.AFCalendarCategory1VeryDarkColor:alias {
 color: #5887c5;
}
.AFCalendarCategory1MediumColor:alias {
  color: #6b9aca;
}
/* Activity background color and text selectors */
af|calendar::all-day-activity.AFCalendarCategory1 {
  background-color: -tr-property-ref(".AFCalendarCategory1MediumColor:alias", "color");
}
.AFCalendarCategory1 af|calendar::time-activity-container {
  background-color: -tr-property-ref(".AFCalendarCategory1MediumColor:alias", "color");
  border: 1px solid -tr-property-ref("AFCalendarCategory1VeryDarkColor:alias", "color");
}
af|calendar::month-time-activity.AFCalendarCategory1,
.AFCalendarCategory1 af|calendar::duration-activity-text,
.AFCalendarCategory1 af|calendar::duration-activity-duration {
  -tr-rule-ref: selector(".AFCalendarCategory1MediumColor:alias");
}
af|calendar::all-day-activity.AFCalendarCategory1.AFShortDuration {
  -tr-rule-ref: selector(".AFCalendarAllDayActivityShortDuration:alias");
  -tr-rule-ref: selector(".AFCalendarCategory1MediumColor:alias");
}
.AFCalendarCategory1 af|calendar::all-day-activity-time,
.AFCalendarCategory1 af|calendar::time-activity-header {
  background-color: -tr-property-ref(".AFCalendarCategory1DarkColor:alias", "color");
}
/* Activity icons and swatches */
.AFCalendarCategory1 af|calendar::list-swatch-container {
  background-color: -tr-property-ref(".AFCalendarCategory1MediumColor:alias", "color");
  border: 1px solid -tr-property-ref("AFCalendarCategory1VeryDarkColor:alias", "color");
  display: inline-block;
}
/* Category2 : Alta Orange -> seaweed */
.AFCalendarCategory2DarkColor:alias {
  color: #858325;
}
.AFCalendarCategory2VeryDarkColor:alias {
 color: #9c9a42;
}
.AFCalendarCategory2MediumColor:alias {
  color: #c3bf54;
}
/* Activity background color and text selectors */
af|calendar::all-day-activity.AFCalendarCategory2 {
  background-color: -tr-property-ref(".AFCalendarCategory2MediumColor:alias", "color");
}
.AFCalendarCategory2 af|calendar::time-activity-container {
  background-color: -tr-property-ref(".AFCalendarCategory2MediumColor:alias", "color");
  border: 1px solid -tr-property-ref("AFCalendarCategory2VeryDarkColor:alias", "color");
}
af|calendar::month-time-activity.AFCalendarCategory2,
.AFCalendarCategory2 af|calendar::duration-activity-text,
.AFCalendarCategory2 af|calendar::duration-activity-duration {
  -tr-rule-ref: selector(".AFCalendarCategory2MediumColor:alias");
}
af|calendar::all-day-activity.AFCalendarCategory2.AFShortDuration {
  -tr-rule-ref: selector(".AFCalendarAllDayActivityShortDuration:alias");
  -tr-rule-ref: selector(".AFCalendarCategory2MediumColor:alias");
}
.AFCalendarCategory2 af|calendar::all-day-activity-time,
.AFCalendarCategory2 af|calendar::time-activity-header {
  background-color: -tr-property-ref(".AFCalendarCategory2DarkColor:alias", "color");
}
/* Activity icons and swatches */
.AFCalendarCategory2 af|calendar::list-swatch-container {
  background-color: -tr-property-ref(".AFCalendarCategory2MediumColor:alias", "color");
  border: 1px solid -tr-property-ref(".AFCalendarCategory2VeryDarkColor:alias", "color");
  display: inline-block;
}
/* Category3 : Alta Green -> Green*/
.AFCalendarCategory3DarkColor:alias {
  color: #345c3a;
}
.AFCalendarCategory3VeryDarkColor:alias {
 color: #0d721b;
}
.AFCalendarCategory3MediumColor:alias {
  color: #50925a;
}
/* Activity background color and text selectors */
af|calendar::all-day-activity.AFCalendarCategory3 {
  background-color: -tr-property-ref(".AFCalendarCategory3MediumColor:alias", "color");
}
.AFCalendarCategory3 af|calendar::time-activity-container {
  background-color: -tr-property-ref(".AFCalendarCategory3MediumColor:alias", "color");
  border: 1px solid -tr-property-ref("AFCalendarCategory3VeryDarkColor:alias", "color");
}
af|calendar::month-time-activity.AFCalendarCategory3,
.AFCalendarCategory3 af|calendar::duration-activity-text,
.AFCalendarCategory3 af|calendar::duration-activity-duration {
  -tr-rule-ref: selector(".AFCalendarCategory3MediumColor:alias");
}
af|calendar::all-day-activity.AFCalendarCategory3.AFShortDuration {
  -tr-rule-ref: selector(".AFCalendarAllDayActivityShortDuration:alias");
  -tr-rule-ref: selector(".AFCalendarCategory3MediumColor:alias");
}
.AFCalendarCategory3 af|calendar::all-day-activity-time,
.AFCalendarCategory3 af|calendar::time-activity-header {
  background-color: -tr-property-ref(".AFCalendarCategory3DarkColor:alias", "color");
}
/* Activity icons and swatches */
.AFCalendarCategory3 af|calendar::list-swatch-container {
  background-color: -tr-property-ref(".AFCalendarCategory3MediumColor:alias", "color");
  border: 1px solid -tr-property-ref(".AFCalendarCategory3VeryDarkColor:alias", "color");
  display: inline-block;
}
/* Category4 : Alta Purple -> Lavender */
.AFCalendarCategory4DarkColor:alias {
  color: #66669a;
}
.AFCalendarCategory4VeryDarkColor:alias {
 color: #7e7eb5;
}
.AFCalendarCategory4MediumColor:alias {
  color: #8c8ccf;
}
/* Activity background color and text selectors */
af|calendar::all-day-activity.AFCalendarCategory4 {
  background-color: -tr-property-ref(".AFCalendarCategory4MediumColor:alias", "color");
}
.AFCalendarCategory4 af|calendar::time-activity-container {
  background-color: -tr-property-ref(".AFCalendarCategory4MediumColor:alias", "color");
  border: 1px solid -tr-property-ref("AFCalendarCategory4VeryDarkColor:alias", "color");
}
af|calendar::month-time-activity.AFCalendarCategory4,
.AFCalendarCategory4 af|calendar::duration-activity-text,
.AFCalendarCategory4 af|calendar::duration-activity-duration {
  -tr-rule-ref: selector(".AFCalendarCategory4MediumColor:alias");
}
af|calendar::all-day-activity.AFCalendarCategory4.AFShortDuration {
  -tr-rule-ref: selector(".AFCalendarAllDayActivityShortDuration:alias");
  -tr-rule-ref: selector(".AFCalendarCategory4MediumColor:alias");
}
.AFCalendarCategory4 af|calendar::all-day-activity-time,
.AFCalendarCategory4 af|calendar::time-activity-header {
  background-color: -tr-property-ref(".AFCalendarCategory4DarkColor:alias", "color");
}
/* Activity icons and swatches */
.AFCalendarCategory4 af|calendar::list-swatch-container {
  background-color: -tr-property-ref(".AFCalendarCategory4MediumColor:alias", "color");
  border: 1px solid -tr-property-ref(".AFCalendarCategory4VeryDarkColor:alias", "color");
  display: inline-block;
}

/* Category5 : Alta Citrine -> Brick Red */
/* Light background */
.AFCalendarCategory5DarkColor:alias {
  color: #bb2f00;
}
.AFCalendarCategory5VeryDarkColor:alias {
 color: #9e1700;
}
.AFCalendarCategory5MediumColor:alias {
  color: #d65845;
}
/* Activity background color and text selectors */
af|calendar::all-day-activity.AFCalendarCategory5 {
  background-color: -tr-property-ref(".AFCalendarCategory5MediumColor:alias", "color");
}
.AFCalendarCategory5 af|calendar::time-activity-container {
  background-color: -tr-property-ref(".AFCalendarCategory5MediumColor:alias", "color");
  border: 1px solid -tr-property-ref("AFCalendarCategory5VeryDarkColor:alias", "color");
}
af|calendar::month-time-activity.AFCalendarCategory5,
.AFCalendarCategory5 af|calendar::duration-activity-text,
.AFCalendarCategory5 af|calendar::duration-activity-duration {
  -tr-rule-ref: selector(".AFCalendarCategory5MediumColor:alias");
}
af|calendar::all-day-activity.AFCalendarCategory5.AFShortDuration {
  -tr-rule-ref: selector(".AFCalendarAllDayActivityShortDuration:alias");
  -tr-rule-ref: selector(".AFCalendarCategory5MediumColor:alias");
}
.AFCalendarCategory5 af|calendar::all-day-activity-time,
.AFCalendarCategory5 af|calendar::time-activity-header {
  background-color: -tr-property-ref(".AFCalendarCategory5DarkColor:alias", "color");
}
/* Activity icons and swatches */
.AFCalendarCategory5 af|calendar::list-swatch-container {
  background-color: -tr-property-ref(".AFCalendarCategory5MediumColor:alias", "color");
  border: 1px solid -tr-property-ref(".AFCalendarCategory5VeryDarkColor:alias", "color");
  display: inline-block;
}
/* Category6 : Alta Red -> Lime */
.AFCalendarCategory6DarkColor:alias {
  color: #53831c;
}
.AFCalendarCategory6VeryDarkColor:alias {
 color: #549b04;
}
.AFCalendarCategory6MediumColor:alias {
  color: #84c632;
}
/* Activity background color and text selectors */
af|calendar::all-day-activity.AFCalendarCategory6 {
  background-color: -tr-property-ref(".AFCalendarCategory6MediumColor:alias", "color");
}
.AFCalendarCategory6 af|calendar::time-activity-container {
  background-color: -tr-property-ref(".AFCalendarCategory6MediumColor:alias", "color");
  border: 1px solid -tr-property-ref("AFCalendarCategory6VeryDarkColor:alias", "color");
}
af|calendar::month-time-activity.AFCalendarCategory6,
.AFCalendarCategory6 af|calendar::duration-activity-text,
.AFCalendarCategory6 af|calendar::duration-activity-duration {
  -tr-rule-ref: selector(".AFCalendarCategory6MediumColor:alias");
}
af|calendar::all-day-activity.AFCalendarCategory6.AFShortDuration {
  -tr-rule-ref: selector(".AFCalendarAllDayActivityShortDuration:alias");
  -tr-rule-ref: selector(".AFCalendarCategory6MediumColor:alias");
}
.AFCalendarCategory6 af|calendar::all-day-activity-time,
.AFCalendarCategory6 af|calendar::time-activity-header {
  background-color: -tr-property-ref(".AFCalendarCategory6DarkColor:alias", "color");
}
/* Activity icons and swatches */
.AFCalendarCategory6 af|calendar::list-swatch-container {
  background-color: -tr-property-ref(".AFCalendarCategory6MediumColor:alias", "color");
  border: 1px solid -tr-property-ref(".AFCalendarCategory6VeryDarkColor:alias", "color");
  display: inline-block;
}
/* Category7 : Alta Yellow -> Gold */
.AFCalendarCategory7DarkColor:alias {
  color: #ac8000;
}
.AFCalendarCategory7VeryDarkColor:alias {
 color: #836100;
}
.AFCalendarCategory7MediumColor:alias {
  color: #cfa607;
}
/* Activity background color and text selectors */
af|calendar::all-day-activity.AFCalendarCategory7 {
  background-color: -tr-property-ref(".AFCalendarCategory7MediumColor:alias", "color");
}
.AFCalendarCategory7 af|calendar::time-activity-container {
  background-color: -tr-property-ref(".AFCalendarCategory7MediumColor:alias", "color");
  border: 1px solid -tr-property-ref("AFCalendarCategory7VeryDarkColor:alias", "color");
}
af|calendar::month-time-activity.AFCalendarCategory7,
.AFCalendarCategory7 af|calendar::duration-activity-text,
.AFCalendarCategory7 af|calendar::duration-activity-duration {
  -tr-rule-ref: selector(".AFCalendarCategory7MediumColor:alias");
}
af|calendar::all-day-activity.AFCalendarCategory7.AFShortDuration {
  -tr-rule-ref: selector(".AFCalendarAllDayActivityShortDuration:alias");
  -tr-rule-ref: selector(".AFCalendarCategory7MediumColor:alias");
}
.AFCalendarCategory7 af|calendar::all-day-activity-time,
.AFCalendarCategory7 af|calendar::time-activity-header {
  background-color: -tr-property-ref(".AFCalendarCategory7DarkColor:alias", "color");
}
/* Activity icons and swatches */
.AFCalendarCategory7 af|calendar::list-swatch-container {
  background-color: -tr-property-ref(".AFCalendarCategory7MediumColor:alias", "color");
  border: 1px solid -tr-property-ref(".AFCalendarCategory7VeryDarkColor:alias", "color");
  display: inline-block;
}
/* Category8 : Alta Cornflower -> Indigo */
.AFCalendarCategory8DarkColor:alias {
  color: #634291;
}
.AFCalendarCategory8VeryDarkColor:alias {
 color: #7957ab;
}
.AFCalendarCategory8MediumColor:alias {
  color: #986dd0;
}
/* Activity background color and text selectors */
af|calendar::all-day-activity.AFCalendarCategory8 {
  background-color: -tr-property-ref(".AFCalendarCategory8MediumColor:alias", "color");
}
.AFCalendarCategory8 af|calendar::time-activity-container {
  background-color: -tr-property-ref(".AFCalendarCategory8MediumColor:alias", "color");
  border: 1px solid -tr-property-ref("AFCalendarCategory8VeryDarkColor:alias", "color");
}
af|calendar::month-time-activity.AFCalendarCategory8,
.AFCalendarCategory8 af|calendar::duration-activity-text,
.AFCalendarCategory8 af|calendar::duration-activity-duration {
  -tr-rule-ref: selector(".AFCalendarCategory8MediumColor:alias");
}
af|calendar::all-day-activity.AFCalendarCategory8.AFShortDuration {
  -tr-rule-ref: selector(".AFCalendarAllDayActivityShortDuration:alias");
  -tr-rule-ref: selector(".AFCalendarCategory8MediumColor:alias");
}
.AFCalendarCategory8 af|calendar::all-day-activity-time,
.AFCalendarCategory8 af|calendar::time-activity-header {
  background-color: -tr-property-ref(".AFCalendarCategory8DarkColor:alias", "color");
}
/* Activity icons and swatches */
.AFCalendarCategory8 af|calendar::list-swatch-container {
  background-color: -tr-property-ref(".AFCalendarCategory8MediumColor:alias", "color");
  border: 1px solid -tr-property-ref(".AFCalendarCategory8VeryDarkColor:alias", "color");
  display: inline-block;
}

/* Category9 : Alta Turquoise ->  Midnight Blue */
.AFCalendarCategory9DarkColor:alias {
  color: #2d5276;
}
.AFCalendarCategory9VeryDarkColor:alias {
 color: #426c94;
}
.AFCalendarCategory9MediumColor:alias {
  color: #3d98c9;
}
/* Activity background color and text selectors */
af|calendar::all-day-activity.AFCalendarCategory9 {
  background-color: -tr-property-ref(".AFCalendarCategory9MediumColor:alias", "color");
}
.AFCalendarCategory9 af|calendar::time-activity-container {
  background-color: -tr-property-ref(".AFCalendarCategory9MediumColor:alias", "color");
  border: 1px solid -tr-property-ref("AFCalendarCategory9VeryDarkColor:alias", "color");
}
af|calendar::month-time-activity.AFCalendarCategory9,
.AFCalendarCategory9 af|calendar::duration-activity-text,
.AFCalendarCategory9 af|calendar::duration-activity-duration {
  -tr-rule-ref: selector(".AFCalendarCategory9MediumColor:alias");
}
af|calendar::all-day-activity.AFCalendarCategory9.AFShortDuration {
  -tr-rule-ref: selector(".AFCalendarAllDayActivityShortDuration:alias");
  -tr-rule-ref: selector(".AFCalendarCategory9MediumColor:alias");
}
.AFCalendarCategory9 af|calendar::all-day-activity-time,
.AFCalendarCategory9 af|calendar::time-activity-header {
  background-color: -tr-property-ref(".AFCalendarCategory9DarkColor:alias", "color");
}
/* Activity icons and swatches */
.AFCalendarCategory9 af|calendar::list-swatch-container {
  background-color: -tr-property-ref(".AFCalendarCategory9MediumColor:alias", "color");
  border: 1px solid -tr-property-ref(".AFCalendarCategory9VeryDarkColor:alias", "color");
  display: inline-block;
}

/* Category10 : Alta Peach -> Orange */
.AFCalendarCategory10DarkColor:alias {
  color: #c86a00;
}
.AFCalendarCategory10VeryDarkColor:alias {
 color: #915300;
}
.AFCalendarCategory10MediumColor:alias {
  color: #fe9900;
}
/* Activity background color and text selectors */
af|calendar::all-day-activity.AFCalendarCategory10 {
  background-color: -tr-property-ref(".AFCalendarCategory10MediumColor:alias", "color");
}
.AFCalendarCategory10 af|calendar::time-activity-container {
  background-color: -tr-property-ref(".AFCalendarCategory10MediumColor:alias", "color");
  border: 1px solid -tr-property-ref("AFCalendarCategory10VeryDarkColor:alias", "color");
}
af|calendar::month-time-activity.AFCalendarCategory10,
.AFCalendarCategory10 af|calendar::duration-activity-text,
.AFCalendarCategory10 af|calendar::duration-activity-duration {
  -tr-rule-ref: selector(".AFCalendarCategory10MediumColor:alias");
}
af|calendar::all-day-activity.AFCalendarCategory10.AFShortDuration {
  -tr-rule-ref: selector(".AFCalendarAllDayActivityShortDuration:alias");
  -tr-rule-ref: selector(".AFCalendarCategory10MediumColor:alias");
}
.AFCalendarCategory10 af|calendar::all-day-activity-time,
.AFCalendarCategory10 af|calendar::time-activity-header {
  background-color: -tr-property-ref(".AFCalendarCategory10DarkColor:alias", "color");
}
/* Activity icons and swatches */
.AFCalendarCategory10 af|calendar::list-swatch-container {
  background-color: -tr-property-ref(".AFCalendarCategory10MediumColor:alias", "color");
  border: 1px solid -tr-property-ref(".AFCalendarCategory10VeryDarkColor:alias", "color");
  display: inline-block;
}
/* Category11 : Alta Magenta -> Plum */
.AFCalendarCategory11DarkColor:alias {
  color: #993365;
}
.AFCalendarCategory11VeryDarkColor:alias {
 color: #79003b;
}
.AFCalendarCategory11MediumColor:alias {
  color: #b95d8a;
}
/* Activity background color and text selectors */
af|calendar::all-day-activity.AFCalendarCategory11 {
  background-color: -tr-property-ref(".AFCalendarCategory11MediumColor:alias", "color");
}
.AFCalendarCategory11 af|calendar::time-activity-container {
  background-color: -tr-property-ref(".AFCalendarCategory11MediumColor:alias", "color");
  border: 1px solid -tr-property-ref("AFCalendarCategory11VeryDarkColor:alias", "color");
}
af|calendar::month-time-activity.AFCalendarCategory11,
.AFCalendarCategory11 af|calendar::duration-activity-text,
.AFCalendarCategory11 af|calendar::duration-activity-duration {
  -tr-rule-ref: selector(".AFCalendarCategory11MediumColor:alias");
}
af|calendar::all-day-activity.AFCalendarCategory11.AFShortDuration {
  -tr-rule-ref: selector(".AFCalendarAllDayActivityShortDuration:alias");
  -tr-rule-ref: selector(".AFCalendarCategory11MediumColor:alias");
}
.AFCalendarCategory11 af|calendar::all-day-activity-time,
.AFCalendarCategory11 af|calendar::time-activity-header {
  background-color: -tr-property-ref(".AFCalendarCategory11DarkColor:alias", "color");
}
/* Activity icons and swatches */
.AFCalendarCategory11 af|calendar::list-swatch-container {
  background-color: -tr-property-ref(".AFCalendarCategory11MediumColor:alias", "color");
  border: 1px solid -tr-property-ref(".AFCalendarCategory11VeryDarkColor:alias", "color");
  display: inline-block;
}
/* Category12 : Alta Moss -> Teal */
.AFCalendarCategory12DarkColor:alias {
  color: #006766;
}
.AFCalendarCategory12VeryDarkColor:alias {
 color: #0b7f7d;
}
.AFCalendarCategory12MediumColor:alias {
  color: #51adab;
}
/* Activity background color and text selectors */
af|calendar::all-day-activity.AFCalendarCategory12 {
  background-color: -tr-property-ref(".AFCalendarCategory12MediumColor:alias", "color");
}
.AFCalendarCategory12 af|calendar::time-activity-container {
  background-color: -tr-property-ref(".AFCalendarCategory12MediumColor:alias", "color");
  border: 1px solid -tr-property-ref("AFCalendarCategory12VeryDarkColor:alias", "color");
}
af|calendar::month-time-activity.AFCalendarCategory12,
.AFCalendarCategory12 af|calendar::duration-activity-text,
.AFCalendarCategory12 af|calendar::duration-activity-duration {
  -tr-rule-ref: selector(".AFCalendarCategory12MediumColor:alias");
}
af|calendar::all-day-activity.AFCalendarCategory12.AFShortDuration {
  -tr-rule-ref: selector(".AFCalendarAllDayActivityShortDuration:alias");
  -tr-rule-ref: selector(".AFCalendarCategory12MediumColor:alias");
}
.AFCalendarCategory12 af|calendar::all-day-activity-time,
.AFCalendarCategory12 af|calendar::time-activity-header {
  background-color: -tr-property-ref(".AFCalendarCategory12DarkColor:alias", "color");
}
/* Activity icons and swatches */
.AFCalendarCategory12 af|calendar::list-swatch-container {
  background-color: -tr-property-ref(".AFCalendarCategory12MediumColor:alias", "color");
  border: 1px solid -tr-property-ref(".AFCalendarCategory12VeryDarkColor:alias", "color");
  display: inline-block;
}

/* end calendar styles */

/*
 * inputColor styles
 */

/* Underline the access key for form labels */
af|inputColor::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}
/** public, styles the edit field of the inputColor */
af|inputColor::content {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFFormControlContentBackground:alias");
}

/** Private
 * The style of the container element that holds both the swatch and the glyph.
 * The glyph will be supported later.
 */
af|inputColor::swatch-container {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  margin-right:1px;
  margin-left:1px;
  width: 15px;
  height: 15px;
  vertical-align: top;
}
af|inputColor::launch-icon-style {
  border-style: solid;
  border-width: 1px;
  border-top-color: #656565;
  border-left-color: #768092;
  border-right-color: #768092;
  border-bottom-color: #ACBACF;
  display: block;
  overflow:hidden;
  background-image:url("/afr/arrow_md.png");
  width: 9px;
  height: 15px;
  background-repeat:no-repeat;
}

af|inputColor::launch-icon-style:disabled {
  display: none;
}

/* Use the above icon for the richcomponents-simple skin, therefore we need to null
   out Trinidad's simple icon */
af|inputColor::launch-icon {
  content: inhibit;
}

af|inputNumberSpinbox {
}

af|inputNumberSpinbox::content {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFFormControlContentBackground:alias");
  margin-right: 1px;
}

af|inputNumberSpinbox::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}
af|inputNumberSpinbox::increment-cell,
af|inputNumberSpinbox::decrement-cell {
  -tr-rule-ref: selector("af|inputNumberSpinbox::spinbox-cell");
}
/**
 * This key uses background-image to set the increment/decrement image.
If you want to use text instead of a background-image, you can
use af|inputNumberSpinbox::incrementor-icon {content:"Text"} or
af|inputNumberSpinbox::decrementor-icon {content:"Text"}  */

af|inputNumberSpinbox::incrementor-icon-style,
af|inputNumberSpinbox::decrementor-icon-style
{
  display: block;
  width: 11px;
  height: 6px;
  background-repeat: no-repeat;
  background-position: center center;
  padding:0px;
}
/* tweak this up one pixel so it matches the look of the decrementor button better */
af|inputNumberSpinbox::incrementor-icon-style {
  height: 5px;
}

af|inputNumberSpinbox::incrementor-icon-style
{
  background-image: url("/afr/spinbox_arrow_up.png");
}
af|body:high-contrast af|inputNumberSpinbox::incrementor-icon-style:after
{
  content: url("/afr/spinbox_arrow_up.png");
  position: relative;
  left: 3px;
  top: -6px;
}
af|body:high-contrast af|inputNumberSpinbox::incrementor-icon-style:after:rtl
{
  left: 0px;
  right: 3px;
}
af|inputNumberSpinbox::decrementor-icon-style
{
  background-image: url("/afr/spinbox_arrow_dn.png");
}
af|body:high-contrast af|inputNumberSpinbox::decrementor-icon-style:after {
  content: url("/afr/spinbox_arrow_dn.png");
  position: relative;
  left: 3px;
  top: -4px;
}
af|body:high-contrast af|inputNumberSpinbox::decrementor-icon-style:after:rtl {
  left: 0px;
  right: 3px;
}
af|inputNumberSpinbox::incrementor-icon-style:disabled
{
  background-image: url("/afr/spinbox_arrow_up_d.png");
}
af|body:high-contrast af|inputNumberSpinbox::incrementor-icon-style:disabled:after
{
  content: url("/afr/spinbox_arrow_up_d.png");
  position: relative;
  left: 3px;
  top: -6px;
}
af|body:high-contrast af|inputNumberSpinbox::incrementor-icon-style:disabled:after:rtl
{
  left: 0px;
  right: 3px;
}
af|inputNumberSpinbox::decrementor-icon-style:disabled
{
  background-image:url("/afr/spinbox_arrow_dn_d.png");
}
af|body:high-contrast af|inputNumberSpinbox::decrementor-icon-style:disabled:after {
  content:url("/afr/spinbox_arrow_dn_d.png");
  position: relative;
  left: 3px;
  top: -4px;
}
af|body:high-contrast af|inputNumberSpinbox::decrementor-icon-style:disabled:after:rtl {
  left: 0px;
  right: 3px;
}
/* Spinbox icons */
af|inputNumberSpinbox::incrementor-icon,
af|inputNumberSpinbox::decrementor-icon,
af|inputNumberSpinbox::incrementor-disabled-icon,
af|inputNumberSpinbox::decrementor-disabled-icon,
af|chooseDate::spinbox-incrementor-disabled-icon,
af|chooseDate::spinbox-decrementor-disabled-icon
{
  content: inhibit;
}

@agent ie {
  HTML:maximized {
    overflow: auto;
  }
}

/* Start panelSplitter */
af|panelSplitter {
  -tr-collapse-animation-duration: 400;
  -tr-first-border: all;
  -tr-second-border: all;
}
/* If this instance is supposed to get its dimensions from the children then we must prepend
   the inline style with an automatic width and make overflow visible.  The height will be
   forced to be automatic by appending it via the getInlineStyle() call since we need to
   disable any height assignments via inlineStyle as well whereas a width assignment via
   inlineStyle is acceptable. */
af|panelSplitter:flow {
  width: auto;
  height: auto;
  overflow: visible;
}
/* IE7 will return zero for clientWidth and clientHeight unless we add "min-height:0" */
@agent ie and (version: 7.0) {
  af|panelSplitter:flow {
    min-height: 0;
  }
}

/* The collapse icon in horizontal splitters */
af|panelSplitter::horizontal-collapse-icon {
  width: 7px;
  height: 23px;
  content: url("/afr/splitterhc.png");
  cursor: default;
}
/* The restore icon in horizontal splitters */
af|panelSplitter::horizontal-restore-icon {
  width: 7px;
  height: 23px;
  content: url("/afr/splitterhr.png");
  cursor: default;
}
/* The collapse icon in vertial splitters */
af|panelSplitter::vertical-collapse-icon {
  width: 23px;
  height: 7px;
  content: url("/afr/splittervc.png");
  cursor: default;

  /* Need to force vertical-align:top on the image, otherwise
     image is offset several pixels from the top of the containing
     anchor on Firefox (and as a result image is clipped). */
  vertical-align:top;
}
/* The restore icon in vertical splitter */
af|panelSplitter::vertical-restore-icon {
  width: 23px;
  height: 7px;
  content: url("/afr/splittervr.png");
  cursor: default;

  /* Need to force vertical-align:top on the image, otherwise
     image is offset several pixels from the top of the containing
     anchor on Firefox (and as a result image is clipped). */
  vertical-align:top;
}

/* When in HC mode add an image after the existing icon and hide the existing icon. This works, but
   would make for nicer css if skinning framework icon attribute override supported notation like:
   af|body:high-contrast af|panelSplitter::horizontal-collapse-icon (bug 21057423) */
af|body:high-contrast af|panelSplitter::horizontal-icon-style:before,
af|body:high-contrast af|panelSplitter::horizontal-divider:disclosed:positioned-from-end af|panelSplitter::horizontal-icon-style:before {
  content: url("/afr/splitterhr_hc.png");
}

af|body:high-contrast af|panelSplitter::horizontal-divider:disclosed af|panelSplitter::horizontal-icon-style:before,
af|body:high-contrast af|panelSplitter::horizontal-divider:positioned-from-end af|panelSplitter::horizontal-icon-style:before {
  content: url("/afr/splitterhc_hc.png");
}

af|body:high-contrast af|panelSplitter::vertical-icon-style:before,
af|body:high-contrast af|panelSplitter::vertical-divider:disclosed:positioned-from-end af|panelSplitter::vertical-icon-style:before {
  content: url("/afr/splittervr_hc.png");
}

af|body:high-contrast af|panelSplitter::vertical-divider:disclosed af|panelSplitter::vertical-icon-style:before,
af|body:high-contrast af|panelSplitter::vertical-divider:positioned-from-end af|panelSplitter::vertical-icon-style:before {
  content: url("/afr/splittervc_hc.png");
}

af|body:high-contrast af|panelSplitter::horizontal-icon-style img,
af|body:high-contrast af|panelSplitter::vertical-icon-style img {
  display: none;
}

af|body:high-contrast af|panelSplitter::vertical-icon-style {
  position: relative;
  top: -7px;
}

/*
  Styles collapse/restore icons in vertical splitters.
  Can be used to set gradient images.
*/
af|panelSplitter::vertical-icon-style {
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
  cursor: default;
  display: inline-block;
}

/*
  Styles collapse/restore icons in horizontal splitters.
  Can be used to set gradient images.
*/

af|panelSplitter::horizontal-icon-style {
    /* If we do not set this display property then the anchor will not consume the space used by the
       child IMG element in IE8 and Safari. */
    display: inline-block;
    background-repeat:  no-repeat;
}

/*
  Note: we do not currently support setting padding/border on
  af|panelSplitter.
*/
af|panelSplitter {
  -tr-divider-size: 7; /* the number of pixels between the two splitter panes for the divider */
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

/*
  Styles both panes in the splitter.
  Note: we do not currently support setting padding on
  af|panelSplitter::pane.  Also, border-width is fixed at 1px.
*/
af|panelSplitter::pane {
  position: absolute;
  overflow: hidden;
  border: 1px #888888 solid;

  /* Tweak pane z-index so that the divider appears above panes.  This
     is necessary for proper drag feedback (since we drag the divider
     itself) */
  z-index:0;
}

/*
 * Printable panel splitter: turn off width, height and overflow.  This
 * should perhaps be an @media selector, but then it would
 * not show up as expected during viewing of the printable page,
 * and skinning doesn't yet support @media!
 */
af|panelSplitter:printable {
  width: auto;
  height: auto;
  overflow: visible;
}
@agent email
{
  af|panelSplitter {
    width: auto;
    height: auto;
    overflow: visible;
  }
}

/*
 Styles the divider in horizontal splitters
 Note: We do not currently support setting border or padding on divider
 */
af|panelSplitter::horizontal-divider {
  position: absolute;
  overflow: hidden;

  /* Tweak divider z-index so that it appears above panes.  This
     is necessary for proper drag feedback (since we drag the divider
     itself) */
  z-index:5;
}
@agent gecko {
  af|panelSplitter::horizontal-divider {
    /* This is needed or else FF2 and FF3 will let highlight pane contents during the drag. */
    -moz-user-select: none;
  }
}
af|panelSplitter::horizontal-divider:disclosed {
  cursor: e-resize;
}
af|panelSplitter::horizontal-divider:flow {
  position: static;
}

/*
 Styles the divider in vertical splitters
 Note: We do not currently support setting border or padding on divider
 */
af|panelSplitter::vertical-divider {
  position: absolute;
  overflow: hidden;

  /* Tweak divider z-index so that it appears above panes.  This
     is necessary for proper drag feedback (since we drag the divider
     itself) */
  z-index:5;
}
@agent gecko {
  af|panelSplitter::vertical-divider {
    /* This is needed or else FF2 and FF3 will let highlight pane contents during the drag. */
    -moz-user-select: none;
  }
}
af|panelSplitter::vertical-divider:disclosed {
  cursor: n-resize;
}
af|panelSplitter::vertical-divider:flow {
  position: relative;
}

/* Styles the container for the collapse/restore button in horizontal (side-by-side) splitters.
   Generally defines a vertical-align and padding-top or padding-bottom. */
af|panelSplitter::horizontal-icon-container {
  vertical-align: bottom;
  padding-bottom: 10px;
}
@agent gecko {
  af|panelSplitter::horizontal-icon-container {
    /* This is needed or else FF2 and FF3 will let you drag the container element instead of
       invoking mouse events to move the splitter position. */
    -moz-user-select: none;
  }
}

/* Styles the container for the collapse/restore button in vertical (one above the other) splitters.
   Generally defines a text-align and padding-left or padding-right. */
af|panelSplitter::vertical-icon-container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
af|panelSplitter::vertical-icon-container:ltr {
  text-align: right;
  padding-right: 10px;
}
af|panelSplitter::vertical-icon-container:rtl {
  text-align: left;
  padding-left: 10px;
}
@agent gecko {
  af|panelSplitter::vertical-icon-container {
    /* This is needed or else FF2 and FF3 will let you drag the container element instead of
       invoking mouse events to move the splitter position. */
    -moz-user-select: none;
  }
}

/* Use default cursor if in print mode */
af|panelSplitter:printable af|panelSplitter::horizontal-divider,
af|panelSplitter:printable af|panelSplitter::vertical-divider {
  cursor: default;
}

/* Internet Explorer hack for how it ignores event targets for mouse over events when the element
   doesn't contain anything interactive.  By having a background-image, the divider is then treated
   as a first class citizen and can be an event target. */
@agent ie {
  af|panelSplitter::horizontal-divider,
  af|panelSplitter::vertical-divider {
    background-image: url('/afr/t.gif');
    background-repeat: no-repeat;
  }
}

/* Styles the hilighter that appears in the horizontal divider when the divider is hovered. */
af|panelSplitter::horizontal-highlighter {
  position: absolute;
  overflow: hidden;
  -tr-rule-ref: selector(".AFDarkAccentBackground:alias");
  height:100%;
  width:1px;
  top:0px;
  left:3px;
}
af|panelSplitter::horizontal-highlighter:flow {
  left: auto;
  margin-left: 3px;
}

/* Styles the hilighter that appears in the vertial divider when the divider is hovered. */
af|panelSplitter::vertical-highlighter {
  position: absolute;
  overflow: hidden;
  -tr-rule-ref: selector(".AFDarkAccentBackground:alias");
  width:100%;
  height:1px;
  top:3px;
  left:0px;
}

/* End panelSplitter */

/* Deck */
/* Must use a min-width and min-height of 1px or else it cannot always participate in resize notifications. */
af|deck {
  min-width: 1px;
  min-height: 1px;
  position: relative;
}
af|deck::swipe-loading-panel {
  /* stretch to the deck container */
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  /* Hide it off the panel via left: 100% or right: 100% and use transform: translateX()
     to move it into screen in response to gesture */
  position: absolute;
  top: 0;
  z-index: 1;
  display: none;
  border: 1px solid #636661;

  touch-action: none; /* To prevent browser back/forward history navigation */
  -tr-rule-ref: selector(".AFBackgroundImageStatus:alias"); /* Loading indicator */

  transition: opacity 0.25s ease-out; /* To disclose the new panel, also see .AFPrivateSlideTransition */
}
.AFPrivateSlideTransition {
  /* also see af|deck::swipe-loading-panel */
  transition: transform .4s ease-out, opacity 0.25s ease-out;
}
/* End deck */

af|panelBorderLayout {
}

af|panelGroupLayout {
}

/* Must use a min-width and min-height of 1px or else it cannot always participate in resize notifications. */
af|panelGridLayout {
  min-width: 1px;
  min-height: 1px;
  position: relative;
}

/* Must use a  min-height of 2px or else it cannot always participate in resize notifications in chrome zoom level 90%. */
@agent webkit {
  af|panelGridLayout {
    min-height: 2px;
  }
}

/* Must use a min-width and min-height of 1px or else it cannot always participate in resize notifications. */
af|conveyorBelt {
  min-width: 1px;
  min-height: 1px;
  position: relative;
}

af|conveyorBelt::start-overflow-indicator,
af|conveyorBelt::end-overflow-indicator,
af|conveyorBelt::top-overflow-indicator,
af|conveyorBelt::bottom-overflow-indicator {
  background-repeat: no-repeat;
  background-position: center center;
  width: 14px;
  height: 14px;
  padding: 0px;
  -tr-rule-ref: selector(".AFButtonBackground:alias");
  -tr-rule-ref: selector(".AFButtonBorder:alias");
}

af|conveyorBelt::start-overflow-indicator:hover,
af|conveyorBelt::end-overflow-indicator:hover,
af|conveyorBelt::top-overflow-indicator:hover,
af|conveyorBelt::bottom-overflow-indicator:hover {
  -tr-rule-ref: selector(".AFButtonBackgroundHover:alias");
  -tr-rule-ref: selector(".AFButtonBorderHover:alias");
}

af|conveyorBelt::start-overflow-indicator:active,
af|conveyorBelt::end-overflow-indicator:active,
af|conveyorBelt::top-overflow-indicator:active,
af|conveyorBelt::bottom-overflow-indicator:active {
  -tr-rule-ref: selector(".AFButtonBackgroundActive:alias");
  -tr-rule-ref: selector(".AFButtonBorderActive:alias");
}

af|conveyorBelt::start-overflow-indicator:ltr,
af|conveyorBelt::end-overflow-indicator:rtl {
  -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalStart:alias");
}

af|conveyorBelt::start-overflow-indicator:hover:ltr,
af|conveyorBelt::end-overflow-indicator:hover:rtl {
  -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalStartHover:alias");
}

af|conveyorBelt::start-overflow-indicator:active:ltr,
af|conveyorBelt::end-overflow-indicator:active:rtl {
  -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalStartDepressed:alias");
}

af|conveyorBelt::start-overflow-indicator:rtl,
af|conveyorBelt::end-overflow-indicator:ltr {
  -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalEnd:alias");
}

af|conveyorBelt::start-overflow-indicator:hover:rtl,
af|conveyorBelt::end-overflow-indicator:hover:ltr {
  -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalEndHover:alias");
}

af|conveyorBelt::start-overflow-indicator:active:rtl,
af|conveyorBelt::end-overflow-indicator:active:ltr {
  -tr-rule-ref: selector(".AFConveyorBeltImageHorizontalEndDepressed:alias");
}

af|conveyorBelt::top-overflow-indicator {
  -tr-rule-ref: selector(".AFConveyorBeltImageVerticalTop:alias");
}

af|conveyorBelt::top-overflow-indicator:hover {
  -tr-rule-ref: selector(".AFConveyorBeltImageVerticalTopHover:alias");
}

af|conveyorBelt::top-overflow-indicator:active {
  -tr-rule-ref: selector(".AFConveyorBeltImageVerticalTopDepressed:alias");
}

af|conveyorBelt::bottom-overflow-indicator {
  -tr-rule-ref: selector(".AFConveyorBeltImageVerticalBottom:alias");
}

af|conveyorBelt::bottom-overflow-indicator:hover {
  -tr-rule-ref: selector(".AFConveyorBeltImageVerticalBottomHover:alias");
}

af|conveyorBelt::bottom-overflow-indicator:active {
  -tr-rule-ref: selector(".AFConveyorBeltImageVerticalBottomDepressed:alias");
}

af|conveyorBelt::start-overflow-icon:ltr,
af|conveyorBelt::end-overflow-icon:rtl {
  content: url("/afr/conv_l_hc.png");
}

af|conveyorBelt::start-overflow-icon:rtl,
af|conveyorBelt::end-overflow-icon:ltr {
  content: url("/afr/conv_r_hc.png");
}

af|conveyorBelt::top-overflow-icon {
  content: url("/afr/conv_u_hc.png");
}

af|conveyorBelt::bottom-overflow-icon {
  content: url("/afr/conv_d_hc.png");
}

af|conveyorBelt::start-overflow-indicator img,
af|conveyorBelt::end-overflow-indicator img,
af|conveyorBelt::top-overflow-indicator img,
af|conveyorBelt::bottom-overflow-indicator img {
  display: none;
}

af|body:high-contrast af|conveyorBelt::start-overflow-indicator img,
af|body:high-contrast af|conveyorBelt::end-overflow-indicator img,
af|body:high-contrast af|conveyorBelt::top-overflow-indicator img,
af|body:high-contrast af|conveyorBelt::bottom-overflow-indicator img {
  display: block;
}

/* Must use a min-width and min-height of 1px or else it cannot always participate in resize notifications. */
af|masonryLayout {
  min-width: 1px;
  min-height: 1px;
  position: relative;
}

/* We want the drop target state for masonryLayout to have no alternate appearance;
   override the default styles that come from generic drop-target elements. */
af|masonryLayout:drop-target {
  background-color: transparent;
  opacity: 1;
}

/* drop target state for insert */
af|masonryLayout::drop-target {
  display: block;
  position: absolute;
}
af|masonryLayout::drop-target:drop-target {
  display: block;
}

.AFMasonryLayoutTransitionResizeTo {
  transition: width .5s, height .5s;
  transition-timing-function: ease-in-out;
}
/* WebKit browsers support "-webkit-" prefix for transitions */
@agent webkit {
  .AFMasonryLayoutTransitionResizeTo {
    -webkit-transition: width .5s, height .5s;
    -webkit-transition-timing-function: ease-in-out;
  }
}

/* Selectors ending in "*Fast" are used when a transition is running while
   the user is still interacting with the component, for example when the
   masonryLayout is being resized due to layout changes while the user is
   reordering child tiles. */
.AFMasonryLayoutTransitionResizeToFast {
  transition: width .25s, height .25s;
  transition-timing-function: ease-in-out;
}
/* WebKit browsers support "-webkit-" prefix for transitions */
@agent webkit {
  .AFMasonryLayoutTransitionResizeToFast {
    -webkit-transition: width .25s, height .25s;
    -webkit-transition-timing-function: ease-in-out;
  }
}

.AFMasonryTileTransitionMoveTo {
  transition: top .5s, left .5s, right .5s;
  transition-timing-function: ease-in-out;
}
/* WebKit browsers support "-webkit-" prefix for transitions */
@agent webkit {
  .AFMasonryTileTransitionMoveTo {
    -webkit-transition: top .5s, left .5s, right .5s;
    -webkit-transition-timing-function: ease-in-out;
  }
}

/* Selectors ending in "*Fast" are used when a transition is running while
   the user is still interacting with the component, for example when the
   layout is changing while the user is reordering child tiles. */
.AFMasonryTileTransitionMoveToFast {
  transition: top .25s, left .25s, right .25s;
  transition-timing-function: ease-in-out;
}
/* WebKit browsers support "-webkit-" prefix for transitions */
@agent webkit {
  .AFMasonryTileTransitionMoveToFast {
    -webkit-transition: top .25s, left .25s, right .25s;
    -webkit-transition-timing-function: ease-in-out;
  }
}

/* include 'top' and 'left' attrs here because if both resize and move are
   applied together, only one will win, which will be resize because
   it occurs later in the css file, so the move wouldn't otherwise
   get animated */
.AFMasonryTileTransitionResizeTo {
  transition: width .5s, height .5s, top .5s, left .5s, right .5s;
  transition-timing-function: ease-in-out;
}
/* WebKit browsers support "-webkit-" prefix for transitions */
@agent webkit {
  .AFMasonryTileTransitionResizeTo {
    -webkit-transition: width .5s, height .5s, top .5s, left .5s, right .5s;
    -webkit-transition-timing-function: ease-in-out;
  }
}

.AFMasonryTileTransitionHideFrom {
  opacity: 1;
}

.AFMasonryTileTransitionHideTo {
  transition: opacity .5s;
  transition-timing-function: ease-in-out;
  opacity: 0;
}
/* WebKit browsers support "-webkit-" prefix for transitions */
@agent webkit {
  .AFMasonryTileTransitionHideTo {
    -webkit-transition: opacity .5s;
    -webkit-transition-timing-function: ease-in-out;
  }
}

.AFMasonryTileTransitionShowFrom {
  opacity: 0;
}

.AFMasonryTileTransitionShowTo {
  transition: opacity .5s;
  transition-timing-function: ease-in-out;
  opacity: 1;
}
/* WebKit browsers support "-webkit-" prefix for transitions */
@agent webkit {
  .AFMasonryTileTransitionShowTo {
    -webkit-transition: opacity .5s;
    -webkit-transition-timing-function: ease-in-out;
  }
}

.AFMasonryTileSizeBase:alias {
  box-sizing: border-box;
  margin: 8px;
  position: absolute;
}

.AFMasonryTileSize1x1 {
  -tr-rule-ref: selector(".AFMasonryTileSizeBase:alias");
  width: 170px;
  height: 170px;
}

.AFMasonryTileSize1x2 {
  -tr-rule-ref: selector(".AFMasonryTileSizeBase:alias");
  width: 170px;
  height: 356px;
}

.AFMasonryTileSize1x3 {
  -tr-rule-ref: selector(".AFMasonryTileSizeBase:alias");
  width: 170px;
  height: 542px;
}

.AFMasonryTileSize2x1 {
  -tr-rule-ref: selector(".AFMasonryTileSizeBase:alias");
  width: 356px;
  height: 170px;
}

.AFMasonryTileSize2x2 {
  -tr-rule-ref: selector(".AFMasonryTileSizeBase:alias");
  width: 356px;
  height: 356px;
}

.AFMasonryTileSize2x3 {
  -tr-rule-ref: selector(".AFMasonryTileSizeBase:alias");
  width: 356px;
  height: 542px;
}

.AFMasonryTileSize3x1 {
  -tr-rule-ref: selector(".AFMasonryTileSizeBase:alias");
  width: 542px;
  height: 170px;
}

.AFMasonryTileSize3x2 {
  -tr-rule-ref: selector(".AFMasonryTileSizeBase:alias");
  width: 542px;
  height: 356px;
}

/* Responsive PanelFormLayout */
.AFTopAlignLabelCell:alias {
  width: 100%;
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
  -tr-rule-ref: selector("af|panelFormLayout::label-stacked-cell");
}
.AFTopAlignLabelContentCell:alias {
  width: 100%;
}
.AFStartAlignLabelCell:alias {
  -tr-rule-ref: selector(".AFEndTextAlign:alias");
  -tr-rule-ref: selector("af|panelFormLayout::label-cell");
}

.AFStartAlignLabelReadOnlyCell:alias {
  -tr-rule-ref: selector(".AFStartAlignLabelCell:alias");
}

.AFTopAlignLabelReadOnlyCell:alias {
  -tr-rule-ref: selector(".AFTopAlignLabelCell:alias");
}

af|panelFormLayout {
  -tr-panel-size-sm: 768;
  -tr-panel-size-md: 1024;
  -tr-panel-size-lg: 1281; /* anything greater than this is xl */
}
af|panelFormLayout::container {
  /* Minimum column width below which the number of columns reduces */
  -moz-column-width: 22rem;
  column-width: 22rem;
  position: relative; /* To determine position of children using offsetTop in JS */
}
af|panelFormLayout::group {
  break-inside: avoid; /* To have entire group in a single column */
  page-break-inside: avoid;
}
af|panelFormLayout::member {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap; /* For allow top aligned labels */
  break-inside: avoid; /* To avoid label and form field being in separate columns */
  page-break-inside: avoid;
}
af|panelFormLayout::responsive-label-cell,
af|panelFormLayout:panel-size-xl .AFPanelFormLayoutContentCell,
af|panelFormLayout:panel-size-lg .AFPanelFormLayoutContentCell,
af|panelFormLayout:panel-size-md .AFPanelFormLayoutContentCell,
af|panelFormLayout:panel-size-sm .AFPanelFormLayoutContentCell {
  box-sizing: border-box;

  /* If white-space: nowrap is set using labelStyle, contentStyle or AFNoWrapMarker,
     then truncate the content and show ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
}
af|panelFormLayout:panel-size-xl::responsive-label-cell,
af|panelFormLayout:panel-size-lg::responsive-label-cell,
af|panelFormLayout:panel-size-md::responsive-label-cell {
  -tr-rule-ref: selector(".AFStartAlignLabelCell:alias");
  width: 33.33333%;
}
af|panelFormLayout:panel-size-xl .AFPanelFormLayoutContentCell,
af|panelFormLayout:panel-size-lg .AFPanelFormLayoutContentCell,
af|panelFormLayout:panel-size-md .AFPanelFormLayoutContentCell {
  width: 66.66667%;
  align-self: center;
}
af|panelFormLayout:panel-size-sm::responsive-label-cell {
  -tr-rule-ref: selector(".AFTopAlignLabelCell:alias");
}
af|panelFormLayout:panel-size-sm .AFPanelFormLayoutContentCell {
  -tr-rule-ref: selector(".AFTopAlignLabelContentCell:alias");
  align-self: center;
}
af|panelFormLayout::member af|panelLabelAndMessage::label {
  align-self: center;
}
.AFHideGroupSeparator {
  display: none;
}

/* explicitly set labelAlignment = "top" or "start" */
af|panelFormLayout:top-aligned-label:panel-size-xl::responsive-label-cell,
af|panelFormLayout:top-aligned-label:panel-size-lg::responsive-label-cell,
af|panelFormLayout:top-aligned-label:panel-size-md::responsive-label-cell {
  -tr-rule-ref: selector(".AFTopAlignLabelCell:alias");
}
af|panelFormLayout:top-aligned-label:panel-size-xl .AFPanelFormLayoutContentCell,
af|panelFormLayout:top-aligned-label:panel-size-lg .AFPanelFormLayoutContentCell,
af|panelFormLayout:top-aligned-label:panel-size-md .AFPanelFormLayoutContentCell {
  -tr-rule-ref: selector(".AFTopAlignLabelContentCell:alias");
}
af|panelFormLayout:start-aligned-label:panel-size-sm::responsive-label-cell {
  -tr-rule-ref: selector(".AFStartAlignLabelCell:alias");
  width: 33.33333%;
}
af|panelFormLayout:start-aligned-label:panel-size-sm .AFPanelFormLayoutContentCell {
  width: 66.66667%;
  align-self: center;
}
af|panelFormLayout::group-title-wrapper {
  display: flex;
}
af|panelFormLayout::group-title-wrapper.AFHideGroupSeparator {
  display: none;
}
af|panelFormLayout::group-title-separator {
  flex: 1;
}

/* ChooseNumberSpinwheel */
af|chooseNumberSpinwheel {
  display: inline-block;
  outline: 0;
  height: 17.9166em; /* 215px; */
  width: 6.5833em; /* 80px; */
  overflow: hidden;
  position: relative;
  -tr-rule-ref: selector(".AFTextForeground:alias");
  padding-top: 15px;
  padding-bottom: 15px;
}
@platform iphone {
  af|chooseNumberSpinwheel {
    height: 18.75em;
  }
}
af|chooseNumberSpinwheel[title]::after {
  -tr-rule-ref: selector(".AFDataCollectionStatusMessage:alias");
  position: absolute;
  top: 30%;
  z-index: 1;
  content: attr(title);
}
af|chooseNumberSpinwheel::item {
  text-align: center;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out, background-color 0.15s ease-out;
  opacity: 0;
}
af|chooseNumberSpinwheel::item.AFWheelItemPos0 {
  opacity: 1;
}
af|chooseNumberSpinwheel:focus .AFWheelItemPos0,
af|chooseNumberSpinwheel:hover .AFWheelItemPos0 {
  background-color: -tr-property-ref(".AFMediumBackground:alias","color");
}
af|chooseNumberSpinwheel:focus .AFWheelItemPos-2,
af|chooseNumberSpinwheel:hover .AFWheelItemPos-2,
af|chooseNumberSpinwheel:focus .AFWheelItemPos-1,
af|chooseNumberSpinwheel:hover .AFWheelItemPos-1,
af|chooseNumberSpinwheel:focus .AFWheelItemPos1,
af|chooseNumberSpinwheel:hover .AFWheelItemPos1,
af|chooseNumberSpinwheel:focus .AFWheelItemPos2,
af|chooseNumberSpinwheel:hover .AFWheelItemPos2 {
  opacity: 1;
}

/* These selectors are needed by the peer. Instead of sending down the uncompressed -> compressed
   map to the client in each request, mark it as no-compress. */
@no-compress {
  /* Because of scaling, setting translateY in pixel doesn't provide fine grain control */
  .AFWheelItemPos0 {
    transform: scale(3.8333) translateY(190%);
  }
  .AFWheelItemPos-1 {
    transform: scale(2.8333) translateY(125%);
  }
  .AFWheelItemPos1 {
    transform: scale(2.8333) translateY(385%);
  }
  .AFWheelItemPos-2 {
    transform: scale(2) translateY(30%);
  }
  .AFWheelItemPos2 {
    transform: scale(2) translateY(682%);
  }

  .AFWheelItemPos3,
  .AFWheelItemPos4,
  .AFWheelItemPos5,
  .AFWheelItemPos6,
  .AFWheelItemPos7 {
    transform: translateY(1520%);
  }

  .AFWheelItemPos-3,
  .AFWheelItemPos-4,
  .AFWheelItemPos-5,
  .AFWheelItemPos-6,
  .AFWheelItemPos-7 {
    transform: translateY(-100%);
  }
}

/* Begin global private style classes for internal framework use; do not use.
   Do not use - These private classes will change without notice.
   Do not use - These private classes will disappear without notice. */

/* private */
.AFPrivateBlock {
  display: block;
}

/* private */
.AFPrivateInlineBlock {
  display: inline-block;
}

/* private */
.AFPrivateFixedTableLayout {
  table-layout: fixed;
}

/* private */
.AFPrivateOverflowHidden {
  overflow: hidden;
}

/* private */
.AFPrivateOverflowXHiddenPositionRelativeHeight10px {
  overflow-x: hidden;
  position: relative;
  height: 10px;
}

/* private */
.AFPrivatePositionAbsoluteHeightFull {
  position: absolute;
  height: 100%;
}

/* private */
.AFPrivatePositionAbsoluteZeroBottomLeftOverflowHidden {
  position: absolute;
  bottom: 0px;
  left: 0px;
  overflow: hidden;
}

/* private */
.AFPrivatePositionAbsoluteZeroBottomLeftOverflowVisible {
  position: absolute;
  bottom: 0px;
  left: 0px;
  overflow: visible;
}

/* private */
.AFPrivatePositionAbsoluteZeroBottomLeftRightOverflowHidden {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: hidden;
}

/* private */
.AFPrivatePositionAbsoluteZeroBottomLeftRightOverflowVisible {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: visible;
}

/* private */
.AFPrivatePositionAbsoluteZeroBottomOverflowHidden {
  position: absolute;
  bottom: 0px;
  overflow: hidden;
}

/* private */
.AFPrivatePositionAbsoluteZeroBottomOverflowVisible {
  position: absolute;
  bottom: 0px;
  overflow: visible;
}

/* private */
.AFPrivatePositionAbsoluteZeroSides {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}
/* private */
.AFPrivatePositionAbsoluteZeroSidesOverflowAuto {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  overflow: auto;
}

/* private */
.AFPrivatePositionAbsoluteZeroTopLeftOverflowHidden {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

/* private */
.AFPrivatePositionAbsoluteZeroTopLeftOverflowVisible {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: visible;
}

/* private */
.AFPrivatePositionAbsoluteZeroTopLeftRightOverflowHidden {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  overflow: hidden;
}

/* private */
.AFPrivatePositionAbsoluteZeroTopLeftRightOverflowVisible {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  overflow: visible;
}

/* private */
.AFPrivatePositionAbsoluteZeroTopOverflowHidden {
  position: absolute;
  top: 0px;
  overflow: hidden;
}

/* private */
.AFPrivatePositionAbsoluteZeroTopOverflowVisible {
  position: absolute;
  top: 0px;
  overflow: visible;
}

/* private */
.AFPrivatePositionAbsoluteZeroTopRightOverflowHidden {
  position: absolute;
  top: 0px;
  right: 0px;
}

/* private */
.AFPrivatePositionAbsoluteOverflowHidden {
  position: absolute;
  overflow: hidden;
}

/* private */
.AFPrivatePositionAbsoluteOverflowVisible {
  position: absolute;
  overflow: visible;
}

/* private */
.AFPrivatePositionRelative,
af|panelSplitter::pane.AFPrivatePositionRelative {
  position: relative;
}

/* private */
.AFPrivatePositionRelativeWidthFullOverflowHidden {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* private */
.AFPrivatePositionStatic,
af|panelSplitter::pane.AFPrivatePositionStatic {
  position: static;
}

/* private */
.AFPrivateWidthFull {
  width: 100%;
}

/* private */
.AFPrivateWidthZero {
  width: 0px;
}

/* private */
.AFPrivateWidthZeroNowrap {
  width: 0px;
  white-space: nowrap;
}

/* Used by AdfSwipeSupport */
.AFPrivateUserSelectNone {
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.AFPrivateTouchActionPanY {
  touch-action: pan-y;
}
.AFPrivateTouchActionPanX {
  touch-action: pan-x;
}

/* End global private style classes. */

/* TEMPLATE */

/* Workaround for bug in IE 7.0.5730.11 which incorrectly calculates the need for
   horizontal scrolling. Bug still exists in IE8 when using IE7 rendering modes but is fixed in the
   pure IE8 rendering mode. */
@agent ie and (version: 7.0) {
  .AFIEOverflowWorkaround {
    width: 90%;
  }
}

/* A marker style class that will declaratively stretch a component horizontally in a flowing
   container. This style class should be used instead of attempting to use a percentage width as an
   inlineStyle width.
   Features:
    * Automatically applies stretching to just the components that can be stretched horizontally.
    * Provides a work around for a bug in Internet Explorer 7. In this browser, a
      horizontally-stretched component can cause a horizontal scroll bar to appear. This scroll bar
      lets you scroll the distance equal to the width of the vertical scroll bar. This scroll bar
      should not appear at all. To work around this issue, this style class will use a smaller
      stretched width in order to reduce the chance of encountering this bug.
  If your component is already being stretched both horizontally and vertically by its parent
  component then this style class will not be needed (it would be redundant). */
/* Disabling of the left and right borders may become obsolete in the future once browsers implement
   the proposed CSS3 box-sizing:border-box; style.  Note that to support the old browsers, we need
   to have several agent blocks that can use the old work around and then in the common definition,
   use the proposed CSS3 standard, box-sizing.  Note that there is no "margin-box" so we still need
   to disable margins in the common definition. */
HTML BODY .AFStretchWidth,
HTML BODY .AFStretchWidth:active,
HTML BODY .AFStretchWidth:focus,
HTML BODY .AFStretchWidth:focus:active,
HTML BODY .AFAuxiliaryStretchWidth,
HTML BODY .AFAuxiliaryStretchWidth:active,
HTML BODY .AFAuxiliaryStretchWidth:focus,
HTML BODY .AFAuxiliaryStretchWidth:focus:active {
  box-sizing: border-box;
  margin-left: 0px;
  margin-right: 0px;
}

@agent (touchScreen:none) {
  HTML BODY .AFStretchWidth:hover,
  HTML BODY .AFStretchWidth:active:hover,
  HTML BODY .AFStretchWidth:focus:hover,
  HTML BODY .AFStretchWidth:focus:active:hover,
  HTML BODY .AFAuxiliaryStretchWidth:hover,
  HTML BODY .AFAuxiliaryStretchWidth:active:hover,
  HTML BODY .AFAuxiliaryStretchWidth:focus:hover,
  HTML BODY .AFAuxiliaryStretchWidth:focus:active:hover {
    box-sizing: border-box;
    margin-left: 0px;
    margin-right: 0px;
  }
}
/* Gecko browsers support "-moz-box-sizing" (and complain about "box-sizing" so inhibit it) */
@agent gecko {
  HTML BODY .AFStretchWidth,
  HTML BODY .AFStretchWidth:active,
  HTML BODY .AFStretchWidth:focus,
  HTML BODY .AFStretchWidth:focus:active,
  HTML BODY .AFAuxiliaryStretchWidth,
  HTML BODY .AFAuxiliaryStretchWidth:active,
  HTML BODY .AFAuxiliaryStretchWidth:focus,
  HTML BODY .AFAuxiliaryStretchWidth:focus:active {
    -moz-box-sizing: border-box;
    -tr-inhibit: box-sizing;
  }
}

@agent gecko and (touchScreen:none) {
  HTML BODY .AFStretchWidth:hover,
  HTML BODY .AFStretchWidth:active:hover,
  HTML BODY .AFStretchWidth:focus:hover,
  HTML BODY .AFStretchWidth:focus:active:hover,
  HTML BODY .AFAuxiliaryStretchWidth:hover,
  HTML BODY .AFAuxiliaryStretchWidth:active:hover,
  HTML BODY .AFAuxiliaryStretchWidth:focus:hover,
  HTML BODY .AFAuxiliaryStretchWidth:focus:active:hover {
    -moz-box-sizing: border-box;
    -tr-inhibit: box-sizing;
  }
}

/* WebKit browsers support "-webkit-box-sizing" */
@agent webkit {
  HTML BODY .AFStretchWidth,
  HTML BODY .AFStretchWidth:active,
  HTML BODY .AFStretchWidth:focus,
  HTML BODY .AFStretchWidth:focus:active,
  HTML BODY .AFAuxiliaryStretchWidth,
  HTML BODY .AFAuxiliaryStretchWidth:active,
  HTML BODY .AFAuxiliaryStretchWidth:focus,
  HTML BODY .AFAuxiliaryStretchWidth:focus:active {
    -webkit-box-sizing: border-box;
  }
}

@agent webkit and (touchScreen:none) {
  HTML BODY .AFStretchWidth:hover,
  HTML BODY .AFStretchWidth:active:hover,
  HTML BODY .AFStretchWidth:focus:hover,
  HTML BODY .AFStretchWidth:focus:active:hover,
  HTML BODY .AFAuxiliaryStretchWidth:hover,
  HTML BODY .AFAuxiliaryStretchWidth:active:hover,
  HTML BODY .AFAuxiliaryStretchWidth:focus:hover,
  HTML BODY .AFAuxiliaryStretchWidth:focus:active:hover {
    -webkit-box-sizing: border-box;
  }
}

/* IE8 and later support "-ms-box-sizing" */
@agent ie {
  HTML BODY .AFStretchWidth,
  HTML BODY .AFStretchWidth:active,
  HTML BODY .AFStretchWidth:focus,
  HTML BODY .AFStretchWidth:focus:active,
  HTML BODY .AFAuxiliaryStretchWidth,
  HTML BODY .AFAuxiliaryStretchWidth:active,
  HTML BODY .AFAuxiliaryStretchWidth:focus,
  HTML BODY .AFAuxiliaryStretchWidth:focus:active {
    -ms-box-sizing: border-box;
  }
}

@agent ie and (touchScreen:none) {
  HTML BODY .AFStretchWidth:hover,
  HTML BODY .AFStretchWidth:active:hover,
  HTML BODY .AFStretchWidth:focus:hover,
  HTML BODY .AFStretchWidth:focus:active:hover,
  HTML BODY .AFAuxiliaryStretchWidth:hover,
  HTML BODY .AFAuxiliaryStretchWidth:active:hover,
  HTML BODY .AFAuxiliaryStretchWidth:focus:hover,
  HTML BODY .AFAuxiliaryStretchWidth:focus:active:hover {
    -ms-box-sizing: border-box;
  }
}

/* IE7 has no "box-sizing" support so we must disable the borders */
@agent ie and (version: 7.0) {
  HTML BODY .AFStretchWidth,
  HTML BODY .AFStretchWidth:hover,
  HTML BODY .AFStretchWidth:active,
  HTML BODY .AFStretchWidth:active:hover,
  HTML BODY .AFStretchWidth:focus,
  HTML BODY .AFStretchWidth:focus:active,
  HTML BODY .AFStretchWidth:focus:hover,
  HTML BODY .AFStretchWidth:focus:active:hover,
  HTML BODY .AFAuxiliaryStretchWidth,
  HTML BODY .AFAuxiliaryStretchWidth:hover,
  HTML BODY .AFAuxiliaryStretchWidth:active,
  HTML BODY .AFAuxiliaryStretchWidth:active:hover,
  HTML BODY .AFAuxiliaryStretchWidth:focus,
  HTML BODY .AFAuxiliaryStretchWidth:focus:active,
  HTML BODY .AFAuxiliaryStretchWidth:focus:hover,
  HTML BODY .AFAuxiliaryStretchWidth:focus:active:hover {
    border-left-width: 0px;
    border-right-width: 0px;
    border-left-style: none;
    border-right-style: none;
  }
}
HTML BODY af|activeImage.AFStretchWidth,
HTML BODY af|calendar.AFStretchWidth,
HTML BODY af|carousel.AFStretchWidth,
HTML BODY af|chooseDate.AFStretchWidth,
HTML BODY af|commandButton.AFStretchWidth,
HTML BODY af|conveyorBelt.AFStretchWidth,
HTML BODY af|decorativeBox.AFStretchWidth,
HTML BODY af|deck.AFStretchWidth,
HTML BODY af|goButton.AFStretchWidth,
HTML BODY af|image.AFStretchWidth,
HTML BODY af|inlineFrame.AFStretchWidth,
HTML BODY af|inputComboboxListOfValues.AFStretchWidth,
HTML BODY af|inputDate.AFStretchWidth,
HTML BODY af|inputFile.AFStretchWidth,
HTML BODY af|inputListOfValues.AFStretchWidth,
HTML BODY af|inputNumberSlider.AFStretchWidth,
HTML BODY af|inputRangeSlider.AFStretchWidth,
HTML BODY af|inputText.AFStretchWidth,
HTML BODY af|panelAccordion.AFStretchWidth,
HTML BODY af|panelBox.AFStretchWidth,
HTML BODY af|panelCollection.AFStretchWidth,
HTML BODY af|panelDashboard.AFStretchWidth,
HTML BODY af|panelGridLayout.AFStretchWidth,
HTML BODY af|panelGroupLayout.AFStretchWidth,
HTML BODY af|panelFormLayout.AFStretchWidth,
HTML BODY af|panelHeader.AFStretchWidth,
HTML BODY af|panelLabelAndMessage.AFStretchWidth,
HTML BODY af|panelSplitter.AFStretchWidth,
HTML BODY af|panelStretchLayout.AFStretchWidth,
HTML BODY af|panelTabbed.AFStretchWidth,
HTML BODY af|query.AFStretchWidth,
HTML BODY af|resetButton.AFStretchWidth,
HTML BODY af|richTextEditor.AFStretchWidth,
HTML BODY af|selectManyChoice.AFStretchWidth,
HTML BODY af|selectOneChoice.AFStretchWidth,
HTML BODY af|showDetailHeader.AFStretchWidth,
HTML BODY af|table.AFStretchWidth,
HTML BODY af|tree.AFStretchWidth,
HTML BODY af|treeTable.AFStretchWidth,
HTML BODY af|accTable.AFStretchWidth,
HTML BODY af|accTree.AFStretchWidth,
HTML BODY af|activeImage.AFAuxiliaryStretchWidth,
HTML BODY af|calendar.AFAuxiliaryStretchWidth,
HTML BODY af|carousel.AFAuxiliaryStretchWidth,
HTML BODY af|chooseDate.AFAuxiliaryStretchWidth,
HTML BODY af|commandButton.AFAuxiliaryStretchWidth,
HTML BODY af|conveyorBelt.AFAuxiliaryStretchWidth,
HTML BODY af|decorativeBox.AFAuxiliaryStretchWidth,
HTML BODY af|deck.AFAuxiliaryStretchWidth,
HTML BODY af|goButton.AFAuxiliaryStretchWidth,
HTML BODY af|image.AFAuxiliaryStretchWidth,
HTML BODY af|inlineFrame.AFAuxiliaryStretchWidth,
HTML BODY af|inputComboboxListOfValues.AFAuxiliaryStretchWidth,
HTML BODY af|inputDate.AFAuxiliaryStretchWidth,
HTML BODY af|inputFile.AFAuxiliaryStretchWidth,
HTML BODY af|inputListOfValues.AFAuxiliaryStretchWidth,
HTML BODY af|inputNumberSlider.AFAuxiliaryStretchWidth,
HTML BODY af|inputRangeSlider.AFAuxiliaryStretchWidth,
HTML BODY af|inputText.AFAuxiliaryStretchWidth,
HTML BODY af|panelAccordion.AFAuxiliaryStretchWidth,
HTML BODY af|panelBox.AFAuxiliaryStretchWidth,
HTML BODY af|panelCollection.AFAuxiliaryStretchWidth,
HTML BODY af|panelDashboard.AFAuxiliaryStretchWidth,
HTML BODY af|panelGridLayout.AFAuxiliaryStretchWidth,
HTML BODY af|panelGroupLayout.AFAuxiliaryStretchWidth,
HTML BODY af|panelFormLayout.AFAuxiliaryStretchWidth,
HTML BODY af|panelHeader.AFAuxiliaryStretchWidth,
HTML BODY af|panelLabelAndMessage.AFAuxiliaryStretchWidth,
HTML BODY af|panelSplitter.AFAuxiliaryStretchWidth,
HTML BODY af|panelStretchLayout.AFAuxiliaryStretchWidth,
HTML BODY af|panelTabbed.AFAuxiliaryStretchWidth,
HTML BODY af|query.AFAuxiliaryStretchWidth,
HTML BODY af|resetButton.AFAuxiliaryStretchWidth,
HTML BODY af|richTextEditor.AFAuxiliaryStretchWidth,
HTML BODY af|selectManyChoice.AFAuxiliaryStretchWidth,
HTML BODY af|selectOneChoice.AFAuxiliaryStretchWidth,
HTML BODY af|showDetailHeader.AFAuxiliaryStretchWidth,
HTML BODY af|table.AFAuxiliaryStretchWidth,
HTML BODY af|tree.AFAuxiliaryStretchWidth,
HTML BODY af|treeTable.AFAuxiliaryStretchWidth,
HTML BODY af|accTable.AFAuxiliaryStretchWidth,
HTML BODY af|accTree.AFAuxiliaryStretchWidth,
HTML BODY af|richTextEditor:read-only.AFStretchWidth .AFContentCell,
HTML BODY af|richTextEditor:read-only.AFStretchWidth af|richTextEditor::content,
HTML BODY af|inputNumberSpinbox.AFStretchWidth,
HTML BODY af|inputNumberSpinbox.AFStretchWidth af|inputNumberSpinbox::content
{
  width: 100%;
}
@agent ie and (version: 7.0) {
  HTML BODY af|activeImage.AFStretchWidth,
  HTML BODY af|calendar.AFStretchWidth,
  HTML BODY af|carousel.AFStretchWidth,
  HTML BODY af|chooseDate.AFStretchWidth,
  HTML BODY af|commandButton.AFStretchWidth,
  HTML BODY af|conveyorBelt.AFStretchWidth,
  HTML BODY af|decorativeBox.AFStretchWidth,
  HTML BODY af|deck.AFStretchWidth,
  HTML BODY af|goButton.AFStretchWidth,
  HTML BODY af|image.AFStretchWidth,
  HTML BODY af|inlineFrame.AFStretchWidth,
  HTML BODY af|inputComboboxListOfValues.AFStretchWidth,
  HTML BODY af|inputDate.AFStretchWidth,
  HTML BODY af|inputFile.AFStretchWidth,
  HTML BODY af|inputListOfValues.AFStretchWidth,
  HTML BODY af|inputNumberSlider.AFStretchWidth,
  HTML BODY af|inputRangeSlider.AFStretchWidth,
  HTML BODY af|inputText.AFStretchWidth,
  HTML BODY af|panelAccordion.AFStretchWidth,
  HTML BODY af|panelBox.AFStretchWidth,
  HTML BODY af|panelCollection.AFStretchWidth,
  HTML BODY af|panelDashboard.AFStretchWidth,
  HTML BODY af|panelGridLayout.AFStretchWidth,
  HTML BODY af|panelGroupLayout.AFStretchWidth,
  HTML BODY af|panelFormLayout.AFStretchWidth,
  HTML BODY af|panelHeader.AFStretchWidth,
  HTML BODY af|panelLabelAndMessage.AFStretchWidth,
  HTML BODY af|panelSplitter.AFStretchWidth,
  HTML BODY af|panelStretchLayout.AFStretchWidth,
  HTML BODY af|panelTabbed.AFStretchWidth,
  HTML BODY af|query.AFStretchWidth,
  HTML BODY af|resetButton.AFStretchWidth,
  HTML BODY af|richTextEditor.AFStretchWidth,
  HTML BODY af|selectManyChoice.AFStretchWidth,
  HTML BODY af|selectOneChoice.AFStretchWidth,
  HTML BODY af|showDetailHeader.AFStretchWidth,
  HTML BODY af|table.AFStretchWidth,
  HTML BODY af|tree.AFStretchWidth,
  HTML BODY af|treeTable.AFStretchWidth,
  HTML BODY af|accTable.AFStretchWidth,
  HTML BODY af|accTree.AFStretchWidth
  {
    width: 98%;
  }
  HTML BODY af|panelCollection af|table.AFStretchWidth,
  HTML BODY af|panelCollection af|tree.AFStretchWidth,
  HTML BODY af|panelCollection af|treeTable.AFStretchWidth {
    width: 100%;
    margin: 0 -2px;
  }
  HTML BODY af|activeImage.AFAuxiliaryStretchWidth,
  HTML BODY af|calendar.AFAuxiliaryStretchWidth,
  HTML BODY af|carousel.AFAuxiliaryStretchWidth,
  HTML BODY af|chooseDate.AFAuxiliaryStretchWidth,
  HTML BODY af|commandButton.AFAuxiliaryStretchWidth,
  HTML BODY af|conveyorBelt.AFAuxiliaryStretchWidth,
  HTML BODY af|decorativeBox.AFAuxiliaryStretchWidth,
  HTML BODY af|deck.AFAuxiliaryStretchWidth,
  HTML BODY af|goButton.AFAuxiliaryStretchWidth,
  HTML BODY af|image.AFAuxiliaryStretchWidth,
  HTML BODY af|inlineFrame.AFAuxiliaryStretchWidth,
  HTML BODY af|inputComboboxListOfValues.AFAuxiliaryStretchWidth,
  HTML BODY af|inputDate.AFAuxiliaryStretchWidth,
  HTML BODY af|inputFile.AFAuxiliaryStretchWidth,
  HTML BODY af|inputListOfValues.AFAuxiliaryStretchWidth,
  HTML BODY af|inputNumberSlider.AFAuxiliaryStretchWidth,
  HTML BODY af|inputRangeSlider.AFAuxiliaryStretchWidth,
  HTML BODY af|inputText.AFAuxiliaryStretchWidth,
  HTML BODY af|panelAccordion.AFAuxiliaryStretchWidth,
  HTML BODY af|panelBox.AFAuxiliaryStretchWidth,
  HTML BODY af|panelCollection.AFAuxiliaryStretchWidth,
  HTML BODY af|panelDashboard.AFAuxiliaryStretchWidth,
  HTML BODY af|panelGridLayout.AFAuxiliaryStretchWidth,
  HTML BODY af|panelGroupLayout.AFAuxiliaryStretchWidth,
  HTML BODY af|panelFormLayout.AFAuxiliaryStretchWidth,
  HTML BODY af|panelHeader.AFAuxiliaryStretchWidth,
  HTML BODY af|panelLabelAndMessage.AFAuxiliaryStretchWidth,
  HTML BODY af|panelSplitter.AFAuxiliaryStretchWidth,
  HTML BODY af|panelStretchLayout.AFAuxiliaryStretchWidth,
  HTML BODY af|panelTabbed.AFAuxiliaryStretchWidth,
  HTML BODY af|query.AFAuxiliaryStretchWidth,
  HTML BODY af|resetButton.AFAuxiliaryStretchWidth,
  HTML BODY af|richTextEditor.AFAuxiliaryStretchWidth,
  HTML BODY af|selectManyChoice.AFAuxiliaryStretchWidth,
  HTML BODY af|selectOneChoice.AFAuxiliaryStretchWidth,
  HTML BODY af|showDetailHeader.AFAuxiliaryStretchWidth,
  HTML BODY af|table.AFAuxiliaryStretchWidth,
  HTML BODY af|tree.AFAuxiliaryStretchWidth,
  HTML BODY af|treeTable.AFAuxiliaryStretchWidth,
  HTML BODY af|accTable.AFAuxiliaryStretchWidth,
  HTML BODY af|accTree.AFAuxiliaryStretchWidth
  {
    width: 90%;
  }
}

/* Content stretching for labelled components.
   NOTE: If these components had a style class marker for simple, we might be able to use 100%
         instead of just a thinner % for all cases. */
HTML BODY af|inputComboboxListOfValues.AFStretchWidth .AFContentCell,
HTML BODY af|inputComboboxListOfValues.AFStretchWidth af|inputComboboxListOfValues::container,
HTML BODY af|selectManyChoice.AFStretchWidth .AFContentCell,
HTML BODY af|selectManyChoice.AFStretchWidth af|selectManyChoice::control,
HTML BODY af|inputDate.AFStretchWidth .AFContentCell,
HTML BODY af|inputDate.AFStretchWidth af|inputDate::content,
HTML BODY af|inputFile.AFStretchWidth .AFContentCell,
HTML BODY af|inputFile.AFStretchWidth af|inputFile::content,
HTML BODY af|inputListOfValues.AFStretchWidth .AFContentCell,
HTML BODY af|inputListOfValues.AFStretchWidth af|inputListOfValues::content,
HTML BODY af|inputNumberSlider.AFStretchWidth .AFContentCell,
HTML BODY af|inputNumberSlider.AFStretchWidth af|inputNumberSlider::content,
HTML BODY af|inputRangeSlider.AFStretchWidth .AFContentCell,
HTML BODY af|inputRangeSlider.AFStretchWidth af|inputRangeSlider::content,
HTML BODY af|inputText.AFStretchWidth .AFContentCell,
HTML BODY af|inputText.AFStretchWidth af|inputText::content,
HTML BODY af|panelLabelAndMessage.AFStretchWidth .AFContentCell,
HTML BODY af|panelLabelAndMessage.AFStretchWidth af|panelLabelAndMessage::content-cell,
HTML BODY af|richTextEditor.AFStretchWidth .AFContentCell,
HTML BODY af|richTextEditor.AFStretchWidth af|richTextEditor::content,
HTML BODY af|selectOneChoice.AFStretchWidth .AFContentCell,
HTML BODY af|selectOneChoice.AFStretchWidth af|selectOneChoice::content,
HTML BODY af|inputNumberSpinbox.AFStretchWidth .AFContentCell,
HTML BODY af|inputNumberSpinbox.AFStretchWidth af|inputNumberSpinbox::content-table {
  width: 90%;
}

HTML BODY af|inputNumberSpinbox:read-only.AFStretchWidth af|inputNumberSpinbox::content {
    display:inline;
}

HTML BODY af|inputNumberSpinbox.AFStretchWidth af|inputNumberSpinbox::content-icons {
    width:48px;
}

/* A marker style class that can be used to turn off borders that components have assigned to their
   root elements.  This cannot and will not affect borders that are applied to internal elements of
   components nor for components whose borders are applied via inline styles or from skin
   definitions with high specificity weights. */
HTML BODY .AFHideBorder,
HTML BODY .AFHideBorder:active,
HTML BODY .AFHideBorder:focus,
HTML BODY .AFHideBorder:focus:active {
  border-width: 0px;
  border-style: none;
}

@agent (touchScreen:none) {
  HTML BODY .AFHideBorder:hover,
  HTML BODY .AFHideBorder:active:hover,
  HTML BODY .AFHideBorder:focus:hover,
  HTML BODY .AFHideBorder:focus:active:hover {
    border-width: 0px;
    border-style: none;
  }
}

/* Deprecated - style for legacy branding text (non-branding bar use cases) */
.AFBranding {
  font-weight: bold;
  font-size: 18px;
}

/* style for a branding bar container (e.g. on an af:panelBorderLayout or horizontal
   af:panelGroupLayout) */
.AFBrandingBar {
  height: 26px;
}

/* style for a container (e.g. an af:panelGroupLayout) for items inside of the branding bar
   container */
.AFBrandingBarItem {
  display: block;
  white-space: nowrap;
  height: 2em;
}

/* Deprecated - style for the background of a container (e.g. an af:panelGroupLayout) for items inside of
  the branding bar container */
.AFBrandingBarItemBackground {
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
}

/* Style for a decorative branding logo (e.g. on an af:spacer) placed inside a branding bar item wrapper.
   The style uses background image which will not render under high contrast mode in some browsers. */
.AFBrandingBarLogo {
  display: block;
  width: 119px;
  height: 2.5em;
  background-image: url('/afr/logo-simple.png');
  background-position: center;
  background-repeat: no-repeat;
}

/* Similar to AFBrandingBarLogo. But shows a larger logo. This is used when the branding bar is taller. */
.AFBrandingBarLogoLarge {
  display: block;
  width: 158px;
  height: 2.5em;
  background-image: url('/afr/logo-simple.png');
  background-position: center;
  background-repeat: no-repeat;
}

/* style for branding page title text (e.g. on an af:outputText) placed inside of a branding bar
   item wrapper */
.AFBrandingBarTitle {
  display: block;
  font-weight: bold;
  font-size: 18px;
  padding-top: 0.2em;
}

/* style for supporting padding of navigationPane buttons when in a branding bar so that it can line
   up vertically */
.AFBrandingBar af|navigationPane-buttons {
  display: block;
  padding-top: 0.5em;
}

/* style for supporting padding of the status indicator when in a branding bar so that it can line
   up vertically */
.AFBrandingBar af|statusIndicator {
  display: block;
  padding: 0.5em 0.5em 0px 0.5em;
}

/* Start of deprecated decorative box styles: */
/* Decorative box top-start corner */
.AFDecorativeBoxTopStart {
  display: block;
  background-image: url('/afr/tab_l3_above_bar.png');
  background-repeat: no-repeat;
  background-position: bottom right;
}
.AFDecorativeBoxTopStart:rtl {
  background-position: bottom left;
}
/* Decorative box top */
.AFDecorativeBoxTop {
  display: block;
  background-image: url('/afr/tab_l3_above_bar.png');
  background-repeat: repeat-x;
  background-position: bottom;
}
/* Decorative box top-end corner */
.AFDecorativeBoxTopEnd {
  display: block;
  background-image: url('/afr/tab_l3_above_bar.png');
  background-repeat: no-repeat;
  background-position: bottom left;
}
.AFDecorativeBoxTopEnd:rtl {
  background-position: bottom right;
}
/* Decorative box center-start side */
.AFDecorativeBoxCenterStart {
  display: block;
  background-position: top right;
  background-repeat: no-repeat;
  -tr-rule-ref: selector(".AFTextBackground:alias");
}
.AFDecorativeBoxCenterStart:rtl {
  background-position: top left;
}
/* Decorative box center */
.AFDecorativeBoxCenter {
  display: block;
  background-position: top left;
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
}
.AFDecorativeBoxCenter:rtl {
  background-position: top right;
}
/* Decorative box center-end side */
.AFDecorativeBoxCenterEnd {
  display: block;
  background-repeat: repeat-x;
  background-position: top left;
  -tr-rule-ref: selector(".AFTextBackground:alias");
}
.AFDecorativeBoxCenterEnd:rtl {
  background-position: top right;
}
/* Decorative box bottom-start corner */
.AFDecorativeBoxBottomStart {
  display: block;
  background-image: url('/afr/tab_l3_below_bar.png');
  background-repeat: repeat-x;
  background-position: top right;
}
.AFDecorativeBoxBottomStart:rtl {
  background-position: top left;
}
/* Decorative box bottom */
.AFDecorativeBoxBottom {
  display: block;
  background-image: url('/afr/tab_l3_below_bar.png');
  background-repeat: repeat-x;
  background-position: top;
}
/* Decorative box bottom-end corner */
.AFDecorativeBoxBottomEnd {
  display: block;
  background-image: url('/afr/tab_l3_below_bar.png');
  background-repeat: repeat-x;
  background-position: top left;
}
.AFDecorativeBoxBottomEnd:rtl {
  background-position: top right;
}
/* End of deprecated decorative box styles */
/* END TEMPLATE */



/* copy over from blafplus-medium */


/* start form components blafplus-medium definitions
   these extend the simple skin definitions (see richcomponents-simple-desktop.css &
   base-desktop.xss) */
af|selectBooleanRadio::native-input,
af|selectOneRadio::native-input,
af|selectBooleanCheckbox::native-input,
af|selectManyCheckbox::native-input {
}
af|selectBooleanRadio::virtual-radio,
af|selectBooleanCheckbox::virtual-checkbox,
af|selectOneRadio::virtual-radio,
af|selectManyCheckbox::virtual-checkbox,
af|selectManyListbox::virtual-checkbox,
af|selectManyChoice::virtual-checkbox {
  display: none;
}
af|selectBooleanRadio:disabled::item-text,
af|selectBooleanCheckbox:disabled::item-text,
af|selectOneRadio:disabled:item-text,
af|selectManyCheckbox:disabled::item-text,
af|selectOneRadio::item-text:disabled, /* individual select items can also be disabled */
af|selectManyCheckbox::item-text:disabled {
  pointer-events: none;
  cursor: default;
}

@agent gecko {
  /*
    start private
  */
  /* on FF, I am setting the margin to 0px on the input element so that the span can adjust the padding
     for the proper look for warnings and errors. This is a private key that shouldn't need to be skinned.
     ChooseDate uses the selectOneRadio so these keys also appear in it DOM
  */
  af|selectBooleanRadio::native-input,
  af|selectOneRadio::native-input {
    margin: 0px;
  }
  af|selectBooleanCheckbox::native-input,
  af|selectManyCheckbox::native-input {
    margin: 2px 0px 1px;
  }
  af|chooseDate::ampm-content-input af|selectOneRadio::native-input{
    margin: 0px 2px 2px 1px;
  }
  /*
    end private
  */
  af|selectBooleanCheckbox::content-input,
  af|selectManyCheckbox::content-input {
    padding: 3px 2px 1px;
    vertical-align: -10%;
  }

  /* adjust the item-text so that it lines up with the label*/
  af|selectBooleanRadio::item-text,
  af|chooseDate::ampm-item-text{
    vertical-align:25%;
  }

  /* adjust the padding of the span to give a balanced error and warning background */
  af|selectBooleanRadio::content-input,
  af|selectOneRadio::content-input {
    padding: 4px 3px 0px 2px;
    vertical-align:10%;
  }
  af|selectBooleanCheckbox:read-only::content-input,
  af|selectManyCheckbox:read-only::content-input {
    font-size: 13px;
    vertical-align: -13%;
  }
}
@agent ie {
  /* alignment on IE is different than FF */
  af|selectBooleanRadio::content-input,
  af|selectOneRadio::content-input {
   vertical-align: middle;
  }
  af|selectBooleanRadio::native-input,
  af|selectOneRadio::native-input {
    overflow: hidden;
    margin : 2px;
    padding : 1px;
  }

  af|selectOneRadio::item-text {
    padding-left: 2px;
  }
  af|selectBooleanCheckbox::content-input,
  af|selectManyCheckbox::content-input {
    vertical-align: middle;
  }
  af|selectBooleanCheckbox::content-input,
  af|selectManyCheckbox::content-input,
  af|selectBooleanCheckbox::native-input,
  af|selectManyCheckbox::native-input {
    padding: 0px;
  }
  af|selectBooleanCheckbox::item-text,
  af|selectManyCheckbox::item-text {
    margin: 0px 3px;
  }
  af|selectBooleanCheckbox::native-input,
  af|selectManyCheckbox::native-input {
    overflow: hidden;
  }
}

@agent ie and (version: 7.0) {
  af|selectBooleanCheckbox::content-input,
  af|selectManyCheckbox::content-input {
    vertical-align: top;
  }
  af|selectBooleanRadio::content-input,
  af|selectBooleanCheckbox::content-input,
  af|selectManyCheckbox::content-input,
  af|selectOneRadio::content-input {
    padding: 2px;
  }

  af|selectBooleanCheckbox::native-input,
  af|selectManyCheckbox::native-input {
    margin: 1px 1px 2px;
  }

  af|selectBooleanRadio::native-input,
  af|selectOneRadio::native-input {
   margin: 0px 2px 2px 1px;
  }
}

@agent ie and (version: 9.0) {
  /* bug 16420825, ie9 has some sort of weird bug that causes the dialog buttons to get pushed off the screen.
     This hack fixes this issue.  Doesn't occur in any other version of ie. */
  af|dialog af|selectOneRadio {
    position: relative;
  }
}

@agent webkit {
    /* adjust the item-text so that it lines up with the label*/
  af|selectBooleanRadio::item-text,
  af|selectOneRadio::item-text,
  af|selectBooleanCheckbox::item-text,
  af|selectManyCheckbox::item-text {
    vertical-align:30%;
  }
}

/* adjust the padding of the span to give a balanced error and warning background */
af|selectBooleanCheckbox::content-input,
af|selectManyCheckbox::content-input {
  margin: 0px;
}

af|selectBooleanCheckbox::item-text,
af|selectManyCheckbox::item-text {
  margin: 0px 1px;
}
/* disabled styles. Show the item as disabled in selectOneRadio/selectoneRadio */
af|selectBooleanRadio:disabled::content,
af|selectBooleanCheckbox:disabled::content,
af|selectManyCheckbox:disabled::item-text,
af|selectManyCheckbox::item-text:disabled,
af|selectOneRadio:disabled::content,
af|selectOneRadio::item-text:disabled,
af|chooseDate::ampm-item-text:disabled {
  -tr-rule-ref: selector(".AFFormControlContentForegroundDisabled:alias");
}

/* Underline the access key for SelectBoolean choices */
af|selectBooleanCheckbox::access-key,
af|selectBooleanRadio::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* Underline the access key for SelectMany choices */
af|selectManyCheckbox::access-key,
af|selectManyShuttle::access-key,
af|selectManyChoice::access-key,
af|selectManyListbox::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* Private styleclass - do not document.
  This style should not be necessary, but without
  it the IE override is getting dropped!  Looks like
  a bug in the skinning code */
af|selectManyCheckbox::icon-style,
af|selectBooleanCheckbox::icon-style {
  margin: 0px;
}

@agent ie {
  af|selectManyCheckbox::icon-style,
  af|selectBooleanCheckbox::icon-style {
    margin: 2px;
  }
}

af|selectManyCheckbox::selected-icon,
af|selectBooleanCheckbox::selected-icon {
  content: url(/afr/checkMark_readonly.png);
  width: 13px;
  height: 13px;
}

af|selectManyCheckbox::unselected-icon,
af|selectBooleanCheckbox::unselected-icon {
  content: url(/afr/checkMark_NS_readonly.png);
  width: 13px;
  height: 13px;
}

af|selectBooleanCheckbox::mixed-readonly-icon {
  content: url(/afr/checkMark_tri_readonly.png);
  width: 13px;
  height: 13px;
}

/* icon styles for tri-state checkbox */
af|selectBooleanCheckbox::tri-icon-style {
  background-image: url('/afr/checkbox_unselected_ena.png');
  display: inline-block;
  margin: 2px 0 1px;
  width: 13px;
  height: 13px;
}
@agent webkit {
  af|selectBooleanCheckbox::tri-icon-style {
    margin: 2px 3px 2px 2px;
    vertical-align: -15%;
  }
}
af|selectBooleanCheckbox::tri-icon-style:hover {
  background-image: url('/afr/checkbox_unselected_ovr.png');
}
af|selectBooleanCheckbox::tri-icon-style:active,
af|selectBooleanCheckbox::tri-icon-style:active:hover {
  background-image: url('/afr/checkbox_unselected_dwn.png');
}
af|selectBooleanCheckbox::tri-icon-style:disabled,
af|selectBooleanCheckbox::tri-icon-style:disabled:hover {
  background-image: url('/afr/checkbox_unselected_dis.png');
}
af|selectBooleanCheckbox::tri-icon-style:selected {
  background-image: url('/afr/checkbox_selected_ena.png');
}
af|selectBooleanCheckbox::tri-icon-style:selected:hover {
  background-image: url('/afr/checkbox_selected_ovr.png');
}
af|selectBooleanCheckbox::tri-icon-style:selected:active,
af|selectBooleanCheckbox::tri-icon-style:selected:active:hover {
  background-image: url('/afr/checkbox_selected_dwn.png');
}
af|selectBooleanCheckbox::tri-icon-style:selected:disabled,
af|selectBooleanCheckbox::tri-icon-style:selected:disabled:hover {
  background-image: url('/afr/checkbox_selected_dis.png');
}
af|selectBooleanCheckbox::tri-icon-style:mixed {
  background-image: url('/afr/checkMark_tri_ena.png');
}
af|selectBooleanCheckbox::tri-icon-style:mixed:hover {
  background-image: url('/afr/checkMark_tri_ovr.png');
}
af|selectBooleanCheckbox::tri-icon-style:mixed:active,
af|selectBooleanCheckbox::tri-icon-style:mixed:active:hover {
  background-image: url('/afr/checkMark_tri_dwn.png');
}
af|selectBooleanCheckbox::tri-icon-style:mixed:disabled,
af|selectBooleanCheckbox::tri-icon-style:mixed:disabled:hover {
  background-image: url('/afr/checkMark_tri_dis.png');
}

/* these icons are private */
af|selectBooleanCheckbox::true-icon {
  content: inhibit;
}
af|selectBooleanCheckbox::false-icon {
  content: inhibit;
}
af|selectBooleanCheckbox::mixed-icon {
  content: inhibit;
}

/* commandNavigationItem */

/* style for navItem's icon */
af|commandNavigationItem::icon-style {
  padding-right: 5px;
  vertical-align: middle;
  border: 0px;
}

/* style for navItem's icon when going rtl*/
af|commandNavigationItem::icon-style:rtl {
  padding-left: 5px;
  vertical-align: middle;
  border: 0px;
}

/* private - deprecated (use header-start, header-center, header-end) - Make the border color
override the border color from the table entry.  While, in theory, we could have entries for each
possible border color, in practive, this is overkill, this single color is good enough for all cases
*/
af|region af|region::table,
af|panelBox af|panelBox::table {
  -tr-rule-ref: selector(".AFPanelBoxHighlightDefaultBorder:alias");
}

/* af:panelBox styles */
af|panelBox {
  -tr-animation-duration: 200;
  -tr-header-height: 25px;
}

/* Prevent unexpected and inconsistent text alignment of a panelBox. */
af|panelBox:ltr {
  text-align: left;
}
af|panelBox:rtl {
  text-align: right;
}

/* private */
af|panelBox:stretched,
af|panelHeader:stretched,
af|showDetailHeader:stretched,
af|query:stretched {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

af|query:stretched af|query::content0,
af|query:stretched af|query::content1,
af|query:stretched af|query::content2,
af|query:stretched af|query::content3,
af|query:stretched af|query::content4,
af|query:stretched af|query::content5 {
  overflow: auto;
}

/* panelBox - deprecated (use header-start, header-center, header-end) - table contains the header
   bottom border */
af|region::table,
af|panelBox::table {
  width: 100%;
  border-bottom: solid 1px #BFC6C9;
}
/* IE7 will stretch the table via the 100% width on header-center.
   We remove the 100% from the table element here for the same reason why AFStretchWidth is needed. */
@agent ie and (version: 7.0) {
  af|region::table,
  af|panelBox::table {
    -tr-inhibit: width;
  }
}

/* Icon hook for users to replace the undisclosed icon with another img or text */
af|region::undisclosed-icon,
af|panelBox::undisclosed-icon {
  content:url('/afr/disclosure_collapsed.png');
}

af|query::undisclosed-icon{
  content:url('/afr/disclosure_collapsed.png');
  height: 9px;
  width:9px;
}

/* Icon hook for users to replace the disclosed icon with another img or text */
af|region::disclosed-icon,
af|panelBox::disclosed-icon {
  content: url('/afr/disclosure_expanded.png');
}

af|query::disclosed-icon {
  content: url('/afr/disclosure_expanded.png');
  height: 9px;
  width:9px;
}

af|showDetailHeader::disclosed-icon {
  content: url('/afr/disclexp.png');
}

af|showDetailHeader::undisclosed-icon {
  content: url('/afr/disclcol.png');
}

af|panelBox::maximized-icon {
  content: url('/afr/restore_ena.png');
}
af|panelBox::maximized-icon:rtl {
  content: url('/afr/restore_ena_rtl.png');
}

af|panelBox::unmaximized-icon {
  content: url('/afr/max_ena.png');
}
af|panelBox::unmaximized-icon:rtl {
  content: url('/afr/max_ena_rtl.png');
}

af|panelBox::maximized-icon-style img,
af|panelBox::unmaximized-icon-style img {
  display: none;
}

af|body:high-contrast af|panelBox::maximized-icon-style img,
af|body:high-contrast af|panelBox::unmaximized-icon-style img {
  display: block;
}

/* All panelbox (and region) center content items support l/r 2px padding */
af|region::icon-style,
af|region::disclosure-icon-container,
af|region::maximize-icon-container,
af|region::header-text,
af|panelBox::icon-style,
af|panelBox::disclosure-icon-container,
af|panelBox::maximize-icon-container,
af|panelBox::header-text {
  padding: 0px 2px 0px 2px;
  vertical-align: middle;
  white-space:nowrap;
}

/* font styling for the header text */
af|region::header-element,
af|panelBox::header-element {
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  margin: 0px;
}

/* ::menu is private */
af|panelBox::toolbar,
af|panelBox::menu,
af|region::toolbar,
af|region::menu {
  padding: 0px;
  vertical-align: middle;
}

af|panelBox af|panelBox::menu af|menuBar,
af|region af|region::menu af|menuBar{
  border-right: 0px solid #DEADBE;
  background-color:transparent;
  padding: 0px;
}

/* In simple, panelBox uses these various aliases to assign background color and border color.
   In medium, the header aliases are inhibited, and png background images are used instead
     while the content section still uses background color and borders. */
af|panelBox::header-start,
af|panelBox::header-end:rtl,
af|region::header-start,
af|region::header-end:rtl {
  -tr-rule-ref: selector(".AFPanelBoxHeaderStart:alias");
}
af|panelBox::footer-start,
af|panelBox::footer-end:rtl,
af|region::footer-start,
af|region::footer-end:rtl {
  -tr-rule-ref: selector(".AFPanelBoxFooterStart:alias");
}

af|panelBox::header-center,
af|region::header-center {
  -tr-rule-ref: selector(".AFPanelBoxHeaderCenter:alias");
}
af|panelBox::footer-center,
af|region::footer-center {
  -tr-rule-ref: selector(".AFPanelBoxFooterCenter:alias");
}

@agent ie, webkit {
  af|panelBox::header-center {
    text-overflow: ellipsis;
  }
  af|panelBox::footer-center {
    text-overflow: ellipsis;
  }
}

af|panelBox::header-end,
af|panelBox::header-start:rtl,
af|region::header-end,
af|region::header-start:rtl {
  -tr-rule-ref: selector(".AFPanelBoxHeaderEnd:alias");
}
af|panelBox::footer-end,
af|panelBox::footer-start:rtl,
af|region::footer-end,
af|region::footer-start:rtl {
  -tr-rule-ref: selector(".AFPanelBoxFooterEnd:alias");
}

/* panelBox content includes the left, right and bottom borders for the content area */
af|region::content,
af|panelBox::content {
  padding: 2px 5px;
  border: solid 1px #BFC6C9;
  border-top-style: none;
}

af|body:high-contrast af|region::center,
af|body:high-contrast af|region::center:core:default,
af|body:high-contrast af|panelBox::center,
af|body:high-contrast af|panelBox::center:core:default,
af|body:high-contrast af|panelBox::center:core:light,
af|body:high-contrast af|panelBox::center:core:medium,
af|body:high-contrast af|panelBox::center:core:dark,
af|body:high-contrast af|panelBox::center:highlight:default,
af|body:high-contrast af|panelBox::center:highlight:light,
af|body:high-contrast af|panelBox::center:highlight:medium,
af|body:high-contrast af|panelBox::center:highlight:dark {
  border: 1px solid black;
}

/* panelBox Core Default
   The pseudo-class states appear after the pseudo-element because otherwise they will only apply to
   the root element which we do not want because you can nest panelBox or region components which
   would create a containment definition where inner boxes would appear with a coloring different
   than what is assigned on that component's tag. */
/* region's only state right now is :core and :default */
af|panelBox::header-start:core:default,
af|panelBox::header-center:core:default,
af|panelBox::header-end:core:default,
af|region::header-start:core:default,
af|region::header-center:core:default,
af|region::header-end:core:default {
  -tr-rule-ref: selector(".AFPanelBoxHeaderCoreDefault:alias");
}
af|panelBox::content:core:default,
af|region::content:core:default {
  -tr-rule-ref: selector(".AFPanelBoxContentCoreDefault:alias");
}

/* panelBox Core Light */
af|panelBox::header-start:core:light,
af|panelBox::header-center:core:light,
af|panelBox::header-end:core:light {
  -tr-rule-ref: selector(".AFPanelBoxHeaderCoreLight:alias");
}

af|panelBox::content:core:light {
  -tr-rule-ref: selector(".AFPanelBoxContentCoreLight:alias");
}

/* panelBox Core Medium */
af|panelBox::header-start:core:medium,
af|panelBox::header-center:core:medium,
af|panelBox::header-end:core:medium {
  -tr-rule-ref: selector(".AFPanelBoxHeaderCoreMedium:alias");
}

af|panelBox::content:core:medium {
  -tr-rule-ref: selector(".AFPanelBoxContentCoreMedium:alias");
}

/* panelBox Core Dark */
af|panelBox::header-start:core:dark,
af|panelBox::header-center:core:dark,
af|panelBox::header-end:core:dark {
  -tr-rule-ref: selector(".AFPanelBoxHeaderCoreDark:alias");
}

af|panelBox::content:core:dark {
  -tr-rule-ref: selector(".AFPanelBoxContentCoreDark:alias");
}

/* panelBox highlight default */
af|panelBox::header-start:highlight:default,
af|panelBox::header-center:highlight:default,
af|panelBox::header-end:highlight:default {
  -tr-rule-ref: selector(".AFPanelBoxHeaderHighlightDefault:alias");
}

af|panelBox::content:highlight:default {
  -tr-rule-ref: selector(".AFPanelBoxContentHighlightDefault:alias");
}

/* panelBox highlight light */
af|panelBox::header-start:highlight:light,
af|panelBox::header-center:highlight:light,
af|panelBox::header-end:highlight:light {
  -tr-rule-ref: selector(".AFPanelBoxHeaderHighlightLight:alias");
}

af|panelBox::content:highlight:light {
  -tr-rule-ref: selector(".AFPanelBoxContentHighlightLight:alias");
}

/* private - deprecated (use header-start, header-center, header-end) - the border between content
   and header */
af|panelBox::table:highlight:light {
  border-bottom-color: #D7D9B6;
}

/* panelBox Highlight Medium */
af|panelBox::header-start:highlight:medium,
af|panelBox::header-center:highlight:medium,
af|panelBox::header-end:highlight:medium {
  -tr-rule-ref: selector(".AFPanelBoxHeaderHighlightMedium:alias");
}

af|panelBox::content:highlight:medium {
  -tr-rule-ref: selector(".AFPanelBoxContentHighlightMedium:alias");
}

/* private - deprecated (use header-start, header-center, header-end) - the border between content
   and header */
af|panelBox::table:highlight:medium {
  border-bottom-color: #CCC5A5;
}

/* panelBox Highlight Dark */
af|panelBox::header-start:highlight:dark,
af|panelBox::header-center:highlight:dark,
af|panelBox::header-end:highlight:dark {
  -tr-rule-ref: selector(".AFPanelBoxHeaderHighlightDark:alias");
}

af|panelBox::content:highlight:dark {
  -tr-rule-ref: selector(".AFPanelBoxContentHighlightDark:alias");
}

/* private - deprecated (use header-start, header-center, header-end) - the border between content
   and header */
af|panelBox::table:highlight:dark {
  border-bottom-color: #8FA6A0;
}

/* end panelBox in simple */

/* start of panelFormLayout styles */

af|panelFormLayout {
}

.AFPanelFormLayoutFixedLayout {
  table-layout: fixed;
}

.AFPanelFormLayoutTruncatedCell {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Provides additional nesting to forms in addition to the padding from
   .AFPanelFormLayoutContentCell */
af|panelFormLayout af|panelFormLayout {
  -tr-rule-ref: selector(".AFPanelFormLayoutHorizontalPadding:alias");
}

af|panelFormLayout::column {
  vertical-align: top;
}

af|panelFormLayout::separator {
  background-position: top left;
  background-image: url('/afr/form-group-divider.gif');
  background-repeat: repeat-x;
  background-color: transparent;
  height: 2px;
  padding: 0px;
  margin-top: 4px;
  margin-bottom: 3px;
}

af|panelFormLayout::group-title-text {
  font-weight: bold;
  margin-top: 6px;
  margin-bottom: 6px;
}

af|panelFormLayout::group-title-separator {
  background-image: url('/afr/form-group-divider.gif');
  background-position: top left;
  background-repeat: repeat-x;
  background-color: transparent;
  height: 2px;
  margin: 13px 0 10px 3px;
}

af|panelFormLayout::group-title-separator:rtl {
  margin-left: 0;
  margin-right: 3px;
}

af|body:high-contrast af|panelFormLayout::separator,
af|body:high-contrast af|panelFormLayout::group-title-separator {
  -tr-inhibit: background-image;
  -tr-inhibit: background-position;
  -tr-inhibit: background-repeat;
  -tr-inhibit: background-color;
  border-bottom-style: dashed;
  border-bottom-width: 1px;
}

af|panelFormLayout::label-cell {
  -tr-rule-ref: selector(".AFPanelFormLayoutHorizontalPadding:alias");
  -tr-rule-ref: selector(".AFEndTextAlign:alias");
  -tr-inhibit: color;
  -tr-inhibit: font-size;
  -tr-inhibit: font-family;
  -tr-inhibit: font-weight;
  vertical-align: top;
  padding-top: 3px;
  padding-bottom: 1px;
}

/* padding 0px 6px 0px 0px is inherited, but it comes after the padding-top/
padding-bottom in email, otherwise it comes first and is properly overwritten.
To workaround, inhibit the padding. TODO investigate why email agent swaps
the order. Also, panelLabelAndMessage is here because the order of selectors
in email is different than what we write to the css file. */
@agent email {
    af|panelFormLayout::label-cell,
    af|panelFormLayout::column af|panelLabelAndMessage::label {
      -tr-inhibit: padding;
      -tr-rule-ref: selector(".AFPanelFormLayoutHorizontalPadding:alias");
      -tr-rule-ref: selector(".AFEndTextAlign:alias");
      vertical-align: top;
      padding-top: 3px;
      padding-bottom: 1px;
    }
    af|panelFormLayout::column af|inputComboboxListOfValues::label,
    af|panelFormLayout::column af|inputDate::label,
    af|panelFormLayout::column af|inputNumberSpinbox::label,
    af|panelFormLayout::column af|inputListOfValues::label,
    af|panelFormLayout::column af|selectOneChoice::label,
    af|panelFormLayout::column af|inputText::label,
    af|panelFormLayout::column af|inputNumberSlider::label,
    af|panelFormLayout::column af|inputRangeSlider::label {
      padding-top: 3px;
    }
}

af|panelFormLayout::label-cell af|outputLabel {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

af|panelFormLayout::label-stacked-cell {
  -tr-rule-ref: selector(".AFPanelFormLayoutHorizontalPadding:alias");
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
  padding-top: 2px;
  padding-bottom: 0px;
  -tr-rule-ref: selector(".AFLabelTextForeground:alias");
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
}

/* The styles for a form item when the form item is being rendered in a panelFormLayout (as opposed
   to being rendered stand-alone or in some other kind of form layout component).
   The panelLabelAndMessage component is an example of one component whose padding needs to be
   adjusted when placed in a panelFormLayout vs. being stand-alone on the page. The
   af|panelFormLayout::content-cell was added for cases when */
af|panelFormLayout::content-cell,
.AFPanelFormLayoutContentCell {
  -tr-rule-ref: selector(".AFPanelFormLayoutHorizontalPadding:alias");
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
  vertical-align: top;
  padding-top: 2px;
  padding-bottom: 0px;
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
}
/* The panelLabelAndMessage content-cell element needs to have an extra special style definition
   when it is being rendered as a form item in a panelFormLayout container. */
af|panelLabelAndMessage::content-cell.AFPanelFormLayoutContentCell {
  padding-top: 3px;
}
@agent email {
    af|panelFormLayout::column .AFPanelFormLayoutContentCell {
      -tr-rule-ref: selector(".AFDefaultFont:alias");
    }

    af|panelLabelAndMessage .AFPanelFormLayoutContentCell {
      -tr-rule-ref: selector(".AFPanelFormLayoutHorizontalPadding:alias");
      -tr-rule-ref: selector(".AFStartTextAlign:alias");
      vertical-align: top;
      padding-top: 3px;
      padding-bottom: 0px;
      -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
    }
}
/* end of panelFormLayout styles */


/* start of panelLabelAndMessage styles */

af|panelLabelAndMessage {
}

/* Underline the access key for panelLabelAndMessage labels */
af|panelLabelAndMessage::access-key{
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* Inherit from trinidad */
af|panelLabelAndMessage::label {
}

/* The main content cell, contains child components and the end facet */
af|panelLabelAndMessage::content-cell {
}

af|panelLabelAndMessage::end-facet {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFStartPadding:alias");
}

/* start private */

/* private - help facet is private until we have a resolution on how we are handling help facets */
af|panelLabelAndMessage::help-facet {
  -tr-rule-ref: selector(".AFSmallFont:alias");
  -tr-rule-ref: selector(".AFLabelTextForeground:alias");
}

/* end private */

/* end of panelLabelAndMessage styles */

/* start of decorativeBox styles */
af|decorativeBox {
  /*
   We tack on a "font-size:small" onto af|decorativeBox.  This way, "em" units on topHeight, etc.
   will always resolve to a consistent number of pixels by the browser no matter what the font-size
   is set to on the parent element of the decorativeBox.  A very common use case might be to specify
   a topHeight value equal af|navigationPane-tabs-tr-tab-bar-height which might be an "em" value.
  */
  font-size: small;
  position: relative;
  width: 500px;
  height: 300px;
  /*
  min-width is required for IE7 compatibility in displaying the center facet contents in flow mode
  */
  min-width: 10px;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
}
af|decorativeBox:ltr {
  text-align: left;
}
af|decorativeBox:rtl {
  text-align: right;
}
af|decorativeBox:printable {
  position:static;
  overflow:visible;
  height: auto;
  width: auto;
}
/* If this instance is supposed to get its dimensions from the children then we must prepend
   the inline style with an automatic width and make overflow visible.  The height will be
   forced to be automatic by appending it via the getInlineStyle() call since we need to
   disable any height assignments via inlineStyle as well whereas a width assignment via
   inlineStyle is acceptable. */
af|decorativeBox:flow {
  width: auto;
  height: auto;
  overflow: visible;
}
af|decorativeBox::top-start {
  -tr-width: 4px;
  display: block;
  position: absolute;
  overflow: hidden;
  top: 0px;
  background-position: bottom right;
  background-repeat: no-repeat;
}
af|decorativeBox::top-start:ltr {
  left: 0px;
}
af|decorativeBox::top-start:rtl {
  right: 0px;
  background-position: bottom left;
}
af|decorativeBox::top {
  -tr-height: 4px;
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background-repeat: repeat-x;
  background-color: transparent;
  background-position: bottom;
  /* We use AFDefaultFont:alias here to reset the font-size from af|decorativeBox since the facet
     content needs to display text using the default size, not the size requried for consistent "em"
     unit positioning.  For more details, see the comment in af|decorativeBox explaining the use of
     font-size. */
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
}
af|decorativeBox::top-content {
  /* top content needs to be above overlapping top-start and top-end */
  z-index: 5;
}
af|decorativeBox::top-end {
  -tr-width: 4px;
  display: block;
  position: absolute;
  overflow: hidden;
  top: 0px;
  background-repeat: no-repeat;
  background-position: bottom left;
}
af|decorativeBox::top-end:ltr {
  right: 0px;
}
af|decorativeBox::top-end:rtl {
  left: 0px;
  background-position: bottom right;
}
af|decorativeBox::start {
  -tr-width: 4px;
  display: block;
  position: absolute;
  overflow: hidden;
  background-position: right;
  background-repeat: repeat-y;
}
af|decorativeBox::start:ltr {
  left: 0px;
}
af|decorativeBox::start:rtl {
  right: 0px;
  background-position: left;
}
af|decorativeBox::start:flow {
  display: table-cell;
  position: static;
  left: auto;
  right: auto;
  overflow: visible;
}
af|decorativeBox::center {
  display: block;
  background-position: top;
  background-repeat: repeat-x;
  /* We use AFDefaultFont:alias here to reset the font-size from af|decorativeBox since the facet
     content needs to display text using the default size, not the size requried for consistent "em"
     unit positioning.  For more details, see the comment in af|decorativeBox explaining the use of
     font-size. */
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
}
af|decorativeBox::center:stretched {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
af|decorativeBox::center:flow {
  position: relative;
}
/* Wrapper around the decorativeBox's center icons so that you can specify sizes on the icons and
   have them not affect the geometry of the center content.  By default this is not displayed but
   can be displayed if your skin needs it. */
af|decorativeBox::center-icons {
  display: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  overflow: hidden;
}
af|decorativeBox::end {
  -tr-width: 4px;
  display: block;
  position: absolute;
  overflow: hidden;
  background-repeat: repeat-y;
  background-position: left;
}
af|decorativeBox::end:ltr {
  right: 0px;
}
af|decorativeBox::end:rtl {
  left: 0px;
  background-position: right;
}
af|decorativeBox::end:flow {
  display: table-cell;
  position: static;
  left: auto;
  right: auto;
  overflow: visible;
}
af|decorativeBox::bottom-start {
  -tr-width: 4px;
  display: block;
  position: absolute;
  overflow: hidden;
  bottom: 0px;
  background-repeat: no-repeat;
  background-position: top right;
}
af|decorativeBox::bottom-start:ltr {
  left: 0px;
}
af|decorativeBox::bottom-start:rtl {
  right: 0px;
  background-position: top left;
}
af|decorativeBox::bottom {
  -tr-height: 4px;
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background-repeat: repeat-x;
  background-position: top;
  vertical-align: bottom;
  /* We use AFDefaultFont:alias here to reset the font-size from af|decorativeBox since the facet
     content needs to display text using the default size, not the size requried for consistent "em"
     unit positioning.  For more details, see the comment in af|decorativeBox explaining the use of
     font-size. */
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
}
af|decorativeBox::bottom-end {
  -tr-width: 4px;
  display: block;
  position: absolute;
  overflow: hidden;
  bottom: 0px;
  background-repeat: no-repeat;
  background-position: top left;
}
af|decorativeBox::bottom-end:ltr {
  right: 0px;
}
af|decorativeBox::bottom-end:rtl {
  left: 0px;
  background-position: top right;
}
/* Provide a contentBody theme for the decorative box that allows for skinning outside of
   the normal dark, medium, light and default styling. This is meant to be used in page
   templates to surround the main body content. */
af|decorativeBox[theme="contentBody"],
af|decorativeBox::center[theme="contentBody"] {
  background-color: transparent;
  background-image: none;
  color: inherit;
}
af|decorativeBox::top-start[theme="contentBody"],
af|decorativeBox::top-end[theme="contentBody"],
af|decorativeBox::bottom-start[theme="contentBody"],
af|decorativeBox::bottom-end[theme="contentBody"],
af|decorativeBox::start[theme="contentBody"],
af|decorativeBox::end[theme="contentBody"] {
  -tr-width: 0px;
  background-color: transparent;
  background-image: none;
}
af|decorativeBox::top[theme="contentBody"],
af|decorativeBox::bottom[theme="contentBody"] {
  -tr-height: 0px;
  background-color: transparent;
  background-image: none;
}

/* Override and force borders in high contrast mode, so that any skins that inherit from simple
   and choose to use image borders will still have css borders when in HC mode. */
af|body:high-contrast af|decorativeBox::center {
  border: 1px solid black;
}

/* end of decorativeBox styles */

af|panelDashboard {
  -tr-insert-delete-animation-duration: 800;
  -tr-reorder-animation-duration: 400;
  position: relative;
  width: 500px;
  height: 300px;
  min-width: 100px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* We want the drop target state for panelDashboard to have no alternate appearance; override the
   default styles that come from generic drop-target elements. */
af|panelDashboard:drop-target {
  background-color: transparent;
  opacity: 1;
}
@agent ie {
  af|panelDashboard:drop-target {
    filter: alpha(opacity:100);
  }
}

/* The panelDashboard has a drop-target element. */
af|panelDashboard::drop-target {
  display: none;
  position: absolute;
}
af|panelDashboard::drop-target:drop-target {
  display: block;
}

af|panelStretchLayout {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}
/* If this instance is supposed to get its dimensions from the children then we must prepend
   the inline style with an automatic width and make overflow visible.  The height will be
   forced to be automatic by appending it via the getInlineStyle() call since we need to
   disable any height assignments via inlineStyle as well whereas a width assignment via
   inlineStyle is acceptable. */
af|panelStretchLayout:flow {
  width: auto;
  height: auto;
  overflow: visible;
}
/* IE7 will return zero for clientWidth and clientHeight unless we add "min-height:0" */
@agent ie and (version: 7.0) {
  af|panelStretchLayout:flow {
    min-height: 0;
  }
}

/* This icon gives a graphical representation that content is loading (e.g. carousel, inlineFrame).
   If you are editing this alias, you should also edit .AFStatusIconStyle:alias and
   .AFBackgroundImageStatus:alias since components will choose among these icons automatically
   under the necessary circumstances.
   This typically defines a content URL for an animated image, the width of this image, and the
   height of this image. */
.AFStatusIcon:alias {
  content: url(/afr/ring_60.gif);
  width: 60px;
  height: 60px;
}

/* This style is for the element that contains a .AFStatusIcon:alias icon (e.g. carousel,
   inlineFrame).
   If you are editing this alias, you should also edit .AFStatusIcon:alias and
   .AFBackgroundImageStatus:alias since components will choose among these icons automatically
   under the necessary circumstances.
   This typically defines a background-image to an alpha-transparent image that lets
   a binary-transparent animated status-icon image blend well on any background when these 2 images
   are stacked.  It also typically defines a width and height are for the dimensions of this
   element. */
.AFStatusIconStyle:alias {
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('/afr/cloud_60.png');
  width: 60px;
  height: 60px;
}

/* This style is for an element that displays a loading status icon when
    the other loading status icon selectors (.AFStatusIcon:alias and
   .AFStatusIconStyle:alias) cannot be used (like an inlineFrame
   that isn't being stretched by its parent component).
   If you are editing this alias, you should also edit .AFStatusIcon:alias and
   .AFStatusIconStyle:alias since components will choose among these icons automatically
   under the necessary circumstances.
   This typically defines a background-image that references a single image
   file that is animated and binary-transparent.  However, in browsers that
   support it, you can use this to define multiple concurrent background
   images where one image is animated and binary-transparent and the
   other image is non-animated and alpha-transparent so that the
   overall combined icon will blend smoothly with whatever coloring is
   behind the icon. */
.AFBackgroundImageStatus:alias {
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-image: url('/afr/ring_60.gif'), url('/afr/cloud_60.png');
}
/* No version of Internet Explorer supports multiple background images and instead use a version of
   the ring that will be more legible without the cloud behind it. */
@agent ie {
  .AFBackgroundImageStatus:alias {
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('/afr/ring_primordial_60.gif');
  }
}
/* Firefox versions earlier than 3.6 (Gecko 1.9.2.0) do no support multiple background images and
   instead use a version of the ring that will be more legible without the cloud behind it. */
@agent gecko and (version: 1.7) {
  .AFBackgroundImageStatus:alias {
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('/afr/ring_primordial_60.gif');
  }
}
@agent gecko and (version: 1.8) {
  .AFBackgroundImageStatus:alias {
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('/afr/ring_primordial_60.gif');
  }
}
@agent gecko and (version: 1.9.0) {
  .AFBackgroundImageStatus:alias {
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('/afr/ring_primordial_60.gif');
  }
}
@agent gecko and (version: 1.9.1) {
  .AFBackgroundImageStatus:alias {
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('/afr/ring_primordial_60.gif');
  }
}

/* Style for the root DOM element of the inlineFrame component.
   Typically no styles would be defined with this selector but for backward-compatibility purposes,
   this can be used for defining a background-image that will be displayed as a loading indicator
   when the iframe is not being stretched by an ancestor using af|inlineFrame:busy:flow.
   See af|inlineFrame::status-icon and af|inlineFrame::status-icon-style for the case when it is
   being stretched by an ancestor.
   It is suggested to use the .AFBackgroundImageStatus:alias rule ref in this selector when the
   busy pseudo-class is used. */
af|inlineFrame {
  /* intentionally empty:
     - see child skins (fusion, skyros, etc) for where these icons are actually used
     - this goes for af|inlineFrame::status-icon and af|inlineFrame::status-icon-style too */
}

/* This style is for the element that contains the status-icon.  This typically defines a
   background-image to an alpha-transparent image that lets a binary-transparent animated
   status-icon image blend well on any background when these 2 images are stacked.  Also typically a
   width and height are defined for the dimensions of this container.  It is suggested to use the
   .AFStatusIconStyle:alias rule ref in this selector.
   For backward-compatibility purposes, this selector is only used on inlineFrames that are
   stretched by their ancestor. */
af|inlineFrame::status-icon-style {
  display: none; /* hidden by default */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -30px;
  margin-top: -30px;
}
af|inlineFrame:busy af|inlineFrame::status-icon-style {
  display: block; /* only shown when the inlineFrame is currently busy */
}

/* Make the top border of selectable iframe's big enough for user's to click on */
af|inlineFrame:inline-selectable {
  border-top: 10px solid blue;
}

/* Gecko outline doesn't seem to work on iframes, so use normal selection style */
@agent gecko {
  af|inlineFrame:inline-selected {
    -tr-rule-ref: selector(".AFInlineSelected:alias");
  }
}

af|carousel,
af|carouselItem {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}
af|carousel {
  -tr-spin-animation-duration: 500;
  -tr-pop-out-animation-duration: 200;
  -tr-status-type: text;
}
/* IE performs animations very poorly when elements have opacity set, disable them for IE but IE
   won't block events unless we also add a transparent background-image to the overlay element. */
@agent ie {
  af|carousel {
    -tr-overlay-opacity: none;
  }
  af|carousel::item-overlay {
    background-image: url('/afr/t.gif');
  }
}
/* Prior to Gecko 1.9.1, Gecko performs animations very poorly when elements have opacity set,
   disable them for these versions of Gecko. */
@agent gecko and (max-version: 1.9.0) {
  af|carousel {
    -tr-overlay-opacity: none;
  }
}

/*
 * Printable panel stretch layout: turn off width, height and overflow.  This
 * should perhaps be a @media selector, but then it would
 * not show up as expected during viewing of the printable page,
 * and skinning doesn't yet support @media!
 * TODO AdamWiner: it is not obvious to me why position:static actually
 *  fixes it.  A CSS master needs to figure out the right thing.
 */
af|carousel:printable,
af|carouselItem:printable,
af|panelDashboard:printable,
af|panelStretchLayout:printable {
  position:static;
  overflow:visible;
}
@agent email
{
  af|panelDashboard,
  af|panelStretchLayout {
    position:static;
    overflow:visible;
  }
}
af|carousel:printable {
  height: auto;
}
af|carouselItem:printable {
  overflow: visible;
  width: auto;
  height: auto;
}

/* alias for the decoration around the af|carousel::item and af:carousel::view to provide its border or shadows */
.AFCarouselItemBorder:alias {
  border: 1px solid gray;
}

/* The is the databody viewport.
   The typical styles that one would apply to this pseudo element would be possibly a border or shadow but only if
   displayItems="oneByOne", never any styles for displayItems="circular". */
af|carousel::view {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
af|carousel::view:one-by-one {
  -tr-rule-ref: selector(".AFCarouselItemBorder:alias");
}

af|carousel::item {
  display: none;
  background-color: white;
  color: black;
  -tr-children-theme: default;
  overflow: hidden;
  position: absolute;
}
af|carousel::item:circular {
  -tr-rule-ref: selector(".AFCarouselItemBorder:alias");
}

/* The overlay provides a visual indication that a given item is not selected, e.g. sits in the
   background. */
af|carousel::item-overlay {
  background-color: white;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  position: absolute;
  display: none;
}

/* Container for the control area.
   Use this for defining a background color or border if desired. */
af|carousel::control-area {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: hidden;
}
af|carousel::control-area:small,
af|carousel::control-area:compact {
  top: auto;
}

/* Container for displaying the spun-to item's text attribute. */
af|carousel::item-text {
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  position: absolute;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
@agent ie, webkit {
  af|carousel::item-text {
    text-overflow: ellipsis;
  }
}
af|carousel::item-text:vertical,
af|carousel::control-area:small:vertical,
af|carousel::control-area:compact:vertical {
  z-index: 301;
  background-color: white;
  color: black;
  border: 1px solid gray;
  padding: 2px;
}
af|carousel::item-text:small,
af|carousel::item-text:compact {
  padding: 0px 2px;
}
af|carousel::item-text:vertical:small,
af|carousel::item-text:vertical:compact {
  border: 0px solid transparent;
}

/* Container for displaying the currently selected item number, e.g. "4" or "4 of 11". */
af|carousel::spin-info {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  white-space: nowrap;
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  overflow: hidden;
  text-align: center;
}
af|carousel::spin-info:vertical:ltr {
  left: auto;
  top: 0px;
  text-align: left;
  white-space: normal;
}
af|carousel::spin-info:vertical:rtl {
  right: auto;
  top: 0px;
  text-align: right;
  white-space: normal;
}
af|carousel::spin-info:small:vertical,
af|carousel::spin-info:compact:vertical {
  top: auto;
  bottom: 0px;
  left: 0px;
  right: 0px;
  text-align: center;
}

af|carousel::spin-bar {
  background-repeat: repeat-x;
  background-image: url('/afr/carousel-spin-bar-h.png');
  background-position: center center;
  overflow: hidden;
  position: absolute;
  left: 15%;
  right: 15%;
  height: 24px;
}
af|carousel::spin-bar:disabled {
  background-image: url('/afr/carousel-spin-bar-h-d.png');
}

af|carousel::spin-bar:vertical {
  background-repeat: repeat-y;
  background-image: url('/afr/carousel-spin-bar-v.png');
  top: 10%;
  bottom: 10%;
  width: 24px;
  left: auto;
  right: auto;
  height: auto;
}
af|carousel::spin-bar:vertical:disabled {
  background-image: url('/afr/carousel-spin-bar-v-d.png');
}

af|carousel::spin-h-previous-icon,
af|carousel::spin-h-thumb-icon,
af|carousel::spin-h-next-icon,
af|carousel::spin-v-previous-icon,
af|carousel::spin-v-thumb-icon,
af|carousel::spin-v-next-icon {
  content: inhibit;
}

/* Disabled buttons should not give the appearance of being clickable. */
af|carousel::spin-h-previous-icon-style:disabled,
af|carousel::spin-h-next-icon-style:disabled,
af|carousel::spin-v-previous-icon-style:disabled,
af|carousel::spin-v-next-icon-style:disabled {
  cursor: default;
}

af|carousel::spin-h-previous-icon-style,
af|carousel::spin-h-thumb-icon-style,
af|carousel::spin-h-next-icon-style {
  background-repeat: no-repeat;
  position: absolute;
  height: 24px;
  width: 11px;
}

af|carousel::spin-v-previous-icon-style,
af|carousel::spin-v-thumb-icon-style,
af|carousel::spin-v-next-icon-style {
  background-repeat: no-repeat;
  position: absolute;
  height: 11px;
  width: 24px;
}

af|carousel::spin-h-previous-icon-style:ltr,
af|carousel::spin-h-next-icon-style:rtl {
  background-image: url('/afr/carousel-spin-left.png');
  right: 85%;
}
af|carousel::spin-h-previous-icon-style:disabled:ltr,
af|carousel::spin-h-next-icon-style:disabled:rtl {
  background-image: url('/afr/carousel-spin-left-d.png');
}

af|carousel::spin-h-next-icon-style:ltr,
af|carousel::spin-h-previous-icon-style:rtl {
  background-image: url('/afr/carousel-spin-right.png');
  left: 85%;
}
af|carousel::spin-h-next-icon-style:disabled:ltr,
af|carousel::spin-h-previous-icon-style:disabled:rtl {
  background-image: url('/afr/carousel-spin-right-d.png');
}

af|carousel::spin-v-previous-icon-style {
  background-image: url('/afr/carousel-spin-up.png');
  bottom: 90%;
}
af|carousel::spin-v-previous-icon-style:disabled {
  background-image: url('/afr/carousel-spin-up-d.png');
}

af|carousel::spin-v-next-icon-style {
  background-image: url('/afr/carousel-spin-down.png');
  top: 90%;
}
af|carousel::spin-v-next-icon-style:disabled {
  background-image: url('/afr/carousel-spin-down-d.png');
}

af|carousel::spin-h-thumb-icon-style {
  background-image: url('/afr/carousel-spin-marker-h.png');
}
af|carousel::spin-h-thumb-icon-style:disabled {
  background-image: url('/afr/carousel-spin-marker-h-d.png');
}

af|carousel::spin-v-thumb-icon-style:ltr {
  background-image: url('/afr/carousel-spin-marker-v.png');
}
af|carousel::spin-v-thumb-icon-style:disabled:ltr {
  background-image: url('/afr/carousel-spin-marker-v-d.png');
}
af|carousel::spin-v-thumb-icon-style:rtl {
  background-image: url('/afr/carousel-spin-marker-v-rtl.png');
}
af|carousel::spin-v-thumb-icon-style:disabled:rtl {
  background-image: url('/afr/carousel-spin-marker-v-rtl-d.png');
}

af|carousel::spin-h-previous-icon-style:compact,
af|carousel::spin-h-previous-icon-style:small,
af|carousel::spin-v-previous-icon-style:compact,
af|carousel::spin-v-previous-icon-style:small {
  width: 18px;
  height: 17px;
  top: 0px;
  bottom: auto;
}
af|carousel::spin-h-next-icon-style:compact,
af|carousel::spin-h-next-icon-style:small,
af|carousel::spin-v-next-icon-style:compact,
af|carousel::spin-v-next-icon-style:small {
  width: 18px;
  height: 17px;
  top: 0px;
  bottom: auto;
}
af|carousel::spin-h-previous-icon-style:compact:ltr,
af|carousel::spin-h-previous-icon-style:small:ltr,
af|carousel::spin-v-previous-icon-style:compact:ltr,
af|carousel::spin-v-previous-icon-style:small:ltr,
af|carousel::spin-h-next-icon-style:compact:rtl,
af|carousel::spin-h-next-icon-style:small:rtl,
af|carousel::spin-v-next-icon-style:compact:rtl,
af|carousel::spin-v-next-icon-style:small:rtl {
  left: 0px;
  right: auto;
}
af|carousel::spin-h-previous-icon-style:compact:rtl,
af|carousel::spin-h-previous-icon-style:small:rtl,
af|carousel::spin-v-previous-icon-style:compact:rtl,
af|carousel::spin-v-previous-icon-style:small:rtl,
af|carousel::spin-h-next-icon-style:compact:ltr,
af|carousel::spin-h-next-icon-style:small:ltr,
af|carousel::spin-v-next-icon-style:compact:ltr,
af|carousel::spin-v-next-icon-style:small:ltr {
  left: auto;
  right: 0px;
}

af|carousel::spin-h-previous-icon-style:compact:ltr,
af|carousel::spin-h-previous-icon-style:small:ltr {
  background-image: url('/afr/singleCard_left_ena.png');
}
@agent (touchScreen:none) {
  af|carousel::spin-h-previous-icon-style:compact:hover:ltr,
  af|carousel::spin-h-previous-icon-style:small:hover:ltr {
    background-image: url('/afr/singleCard_left_ovr.png');
  }

  af|carousel::spin-h-previous-icon-style:compact:active:hover:ltr,
  af|carousel::spin-h-previous-icon-style:small:active:hover:ltr {
    background-image: url('/afr/singleCard_left_dwn.png');
  }
}

af|carousel::spin-h-previous-icon-style:compact:disabled:ltr,
af|carousel::spin-h-previous-icon-style:small:disabled:ltr {
  background-image: url('/afr/singleCard_left_dis.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-h-previous-icon-style:compact:disabled:hover:ltr,
  af|carousel::spin-h-previous-icon-style:compact:disabled:active:hover:ltr,
  af|carousel::spin-h-previous-icon-style:small:disabled:hover:ltr,
  af|carousel::spin-h-previous-icon-style:small:disabled:active:hover:ltr {
    background-image: url('/afr/singleCard_left_dis.png');
  }
}

af|carousel::spin-h-next-icon-style:compact:ltr,
af|carousel::spin-h-next-icon-style:small:ltr {
  background-image: url('/afr/singleCard_right_ena.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-h-next-icon-style:compact:hover:ltr,
  af|carousel::spin-h-next-icon-style:small:hover:ltr {
    background-image: url('/afr/singleCard_right_ovr.png');
  }

  af|carousel::spin-h-next-icon-style:compact:active:hover:ltr,
  af|carousel::spin-h-next-icon-style:small:active:hover:ltr {
    background-image: url('/afr/singleCard_right_dwn.png');
  }
}

af|carousel::spin-h-next-icon-style:compact:disabled:ltr,
af|carousel::spin-h-next-icon-style:small:disabled:ltr {
  background-image: url('/afr/singleCard_right_dis.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-h-next-icon-style:compact:disabled:hover:ltr,
  af|carousel::spin-h-next-icon-style:compact:disabled:active:hover:ltr,
  af|carousel::spin-h-next-icon-style:small:disabled:hover:ltr,
  af|carousel::spin-h-next-icon-style:small:disabled:active:hover:ltr {
    background-image: url('/afr/singleCard_right_dis.png');
  }
}

af|carousel::spin-v-previous-icon-style:compact:ltr,
af|carousel::spin-v-previous-icon-style:small:ltr {
  background-image: url('/afr/singleCard_up_ena.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-v-previous-icon-style:compact:hover:ltr,
  af|carousel::spin-v-previous-icon-style:small:hover:ltr {
    background-image: url('/afr/singleCard_up_ovr.png');
  }

  af|carousel::spin-v-previous-icon-style:compact:active:hover:ltr,
  af|carousel::spin-v-previous-icon-style:small:active:hover:ltr {
    background-image: url('/afr/singleCard_up_dwn.png');
  }
}

af|carousel::spin-v-previous-icon-style:compact:disabled:ltr,
af|carousel::spin-v-previous-icon-style:small:disabled:ltr {
  background-image: url('/afr/singleCard_up_dis.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-v-previous-icon-style:compact:disabled:hover:ltr,
  af|carousel::spin-v-previous-icon-style:compact:disabled:active:hover:ltr,
  af|carousel::spin-v-previous-icon-style:small:disabled:hover:ltr,
  af|carousel::spin-v-previous-icon-style:small:disabled:active:hover:ltr {
    background-image: url('/afr/singleCard_up_dis.png');
  }
}

af|carousel::spin-v-next-icon-style:compact:ltr,
af|carousel::spin-v-next-icon-style:small:ltr {
  background-image: url('/afr/singleCard_down_ena.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-v-next-icon-style:compact:hover:ltr,
  af|carousel::spin-v-next-icon-style:small:hover:ltr {
    background-image: url('/afr/singleCard_down_ovr.png');
  }

  af|carousel::spin-v-next-icon-style:compact:active:hover:ltr,
  af|carousel::spin-v-next-icon-style:small:active:hover:ltr {
    background-image: url('/afr/singleCard_down_dwn.png');
  }
}

af|carousel::spin-v-next-icon-style:compact:disabled:ltr,
af|carousel::spin-v-next-icon-style:small:disabled:ltr {
  background-image: url('/afr/singleCard_down_dis.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-v-next-icon-style:compact:disabled:hover:ltr,
  af|carousel::spin-v-next-icon-style:compact:disabled:active:hover:ltr,
  af|carousel::spin-v-next-icon-style:small:disabled:hover:ltr,
  af|carousel::spin-v-next-icon-style:small:disabled:active:hover:ltr {
    background-image: url('/afr/singleCard_down_dis.png');
  }
}

af|carousel::spin-h-previous-icon-style:compact:rtl,
af|carousel::spin-h-previous-icon-style:small:rtl {
  background-image: url('/afr/singleCard_right_ena_rtl.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-h-previous-icon-style:compact:hover:rtl,
  af|carousel::spin-h-previous-icon-style:small:hover:rtl {
    background-image: url('/afr/singleCard_right_ovr_rtl.png');
  }

  af|carousel::spin-h-previous-icon-style:compact:active:hover:rtl,
  af|carousel::spin-h-previous-icon-style:small:active:hover:rtl {
    background-image: url('/afr/singleCard_right_dwn_rtl.png');
  }
}

af|carousel::spin-h-previous-icon-style:compact:disabled:rtl,
af|carousel::spin-h-previous-icon-style:small:disabled:rtl {
  background-image: url('/afr/singleCard_right_dis_rtl.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-h-previous-icon-style:compact:hover:disabled:rtl,
  af|carousel::spin-h-previous-icon-style:compact:active:hover:disabled:rtl,
  af|carousel::spin-h-previous-icon-style:small:disabled:hover:rtl,
  af|carousel::spin-h-previous-icon-style:small:disabled:active:hover:rtl {
    background-image: url('/afr/singleCard_right_dis_rtl.png');
  }
}

af|carousel::spin-h-next-icon-style:compact:rtl,
af|carousel::spin-h-next-icon-style:small:rtl {
  background-image: url('/afr/singleCard_left_ena_rtl.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-h-next-icon-style:compact:hover:rtl,
  af|carousel::spin-h-next-icon-style:small:hover:rtl {
    background-image: url('/afr/singleCard_left_ovr_rtl.png');
  }

  af|carousel::spin-h-next-icon-style:compact:active:hover:rtl,
  af|carousel::spin-h-next-icon-style:small:active:hover:rtl {
    background-image: url('/afr/singleCard_left_dwn_rtl.png');
  }
}

af|carousel::spin-h-next-icon-style:compact:disabled:rtl,
af|carousel::spin-h-next-icon-style:small:disabled:rtl {
  background-image: url('/afr/singleCard_left_dis_rtl.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-h-next-icon-style:compact:disabled:hover:rtl,
  af|carousel::spin-h-next-icon-style:compact:disabled:active:hover:rtl,
  af|carousel::spin-h-next-icon-style:small:disabled:hover:rtl,
  af|carousel::spin-h-next-icon-style:small:disabled:active:hover:rtl {
    background-image: url('/afr/singleCard_left_dis_rtl.png');
  }
}

af|carousel::spin-v-previous-icon-style:compact:rtl,
af|carousel::spin-v-previous-icon-style:small:rtl {
  background-image: url('/afr/singleCard_up_ena_rtl.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-v-previous-icon-style:compact:hover:rtl,
  af|carousel::spin-v-previous-icon-style:small:hover:rtl {
    background-image: url('/afr/singleCard_up_ovr_rtl.png');
  }
  af|carousel::spin-v-previous-icon-style:compact:active:hover:rtl,
  af|carousel::spin-v-previous-icon-style:small:active:hover:rtl {
    background-image: url('/afr/singleCard_up_dwn_rtl.png');
  }
}

af|carousel::spin-v-previous-icon-style:compact:disabled:rtl,
af|carousel::spin-v-previous-icon-style:small:disabled:rtl {
  background-image: url('/afr/singleCard_up_dis_rtl.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-v-previous-icon-style:compact:disabled:hover:rtl,
  af|carousel::spin-v-previous-icon-style:compact:disabled:active:hover:rtl,
  af|carousel::spin-v-previous-icon-style:small:disabled:hover:rtl,
  af|carousel::spin-v-previous-icon-style:small:disabled:active:hover:rtl {
    background-image: url('/afr/singleCard_up_dis_rtl.png');
  }
}

af|carousel::spin-v-next-icon-style:compact:rtl,
af|carousel::spin-v-next-icon-style:small:rtl {
  background-image: url('/afr/singleCard_down_ena_rtl.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-v-next-icon-style:compact:hover:rtl,
  af|carousel::spin-v-next-icon-style:small:hover:rtl {
    background-image: url('/afr/singleCard_down_ovr_rtl.png');
  }
  af|carousel::spin-v-next-icon-style:compact:active:hover:rtl,
  af|carousel::spin-v-next-icon-style:small:active:hover:rtl {
    background-image: url('/afr/singleCard_down_dwn_rtl.png');
  }
}

af|carousel::spin-v-next-icon-style:compact:disabled:rtl,
af|carousel::spin-v-next-icon-style:small:disabled:rtl {
  background-image: url('/afr/singleCard_down_dis_rtl.png');
}

@agent (touchScreen:none) {
  af|carousel::spin-v-next-icon-style:compact:disabled:hover:rtl,
  af|carousel::spin-v-next-icon-style:compact:disabled:active:hover:rtl,
  af|carousel::spin-v-next-icon-style:small:disabled:hover:rtl,
  af|carousel::spin-v-next-icon-style:small:disabled:active:hover:rtl {
    background-image: url('/afr/singleCard_down_dis_rtl.png');
  }
}

af|carousel::status-message {
  -tr-rule-ref: selector(".AFDataCollectionStatusMessage:alias");
}

/* This icon (that is an alternative to the af|carousel::status-message) gives a graphical
   representation that the carousel content is loading if the af|carousel skin property
   -tr-status-type is set to icon. This typically defines a content URL for an animated image, the
   width of this image, and the height of this image.
   It is suggested to use the .AFStatusIcon:alias rule ref in this selector. */
af|carousel::status-icon,
af|listView::status-icon{
  content: url(/afr/ring_60.gif); /* remove this content style after bug 9836923 is fixed */
  -tr-rule-ref: selector(".AFStatusIcon:alias");
}

/* This style is for the element that contains the status-icon (if used).  This typically defines a
   background-image to an alpha-transparent image that lets a binary-transparent animated
   status-icon image blend well on any background when these 2 images are stacked.  Also typically a
   width and height are defined for the dimensions of this container.  It is suggested to use the
   .AFStatusIconStyle:alias rule ref in this selector. */
af|carousel::status-icon-style,
af|listView::status-icon-style{
  -tr-rule-ref: selector(".AFStatusIconStyle:alias");
}

/* region styles */
af|region {
  -tr-animation-duration: 200;
  -tr-header-height: 25px;
}

/*
  tree Styles
*/

/* Icon hook for users to replace icons with alternate img or text */
af|tree::expanded-icon,
af|tree::collapsed-icon,
af|tree::selector-icon,
af|tree::leaf-icon,
af|tree::node-anim-icon {
  content: inhibit;
}

af|tree::expanded-icon-style:rtl,
af|tree::collapsed-icon-style:rtl,
af|tree::leaf-icon-style:rtl {
  padding-left: 9px;
  padding-right: 0px;
}

/* in attachment mode (Bug 13699618), genericDesktop agent is used for all browsers */
@agent genericDesktop {
  af|tree::expanded-icon-style,
  af|tree::collapsed-icon-style,
  af|treeTable::expanded-icon-style,
  af|treeTable::collapsed-icon-style {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: text-bottom;
  }
}

/* IE does not handle background-image positioning correctly in rtl.
   We need to use display: inline-block to get around this problem. */
@agent ie {
  af|tree::expanded-icon-style:rtl,
  af|tree::collapsed-icon-style:rtl,
  af|treeTable::expanded-icon-style:rtl,
  af|treeTable::collapsed-icon-style:rtl {
    display: inline-block;
  }
}

/* Note that in IE8, anchors that don't have hrefs or onclick attribute are treated as if they are
   non-interactive and thus the edit cursor would be used.  We always want these to be the pointer
   cursors instead since the clicks are handled via a component event. */
af|tree::expanded-icon-style,
af|tree::collapsed-icon-style,
af|treeTable::expanded-icon-style,
af|treeTable::collapsed-icon-style {
  cursor: pointer;
}

af|tree::expanded-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image: url("/afr/disclosure_expanded.png");
  padding-right: 9px;
  background-position: center center;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 9px;
  height: 9px;
}

af|tree::collapsed-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/disclosure_collapsed.png");
  padding-right: 9px;
  background-position: center center;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 9px;
  height: 9px;
}

/* This is a 'blank' image to keep things lined up when we are viewing a leaf node */
af|tree::leaf-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/leaf.png");
  padding-right: 9px;
  background-position: center center;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 9px;
  height: 9px;
}

af|tree::expanded-icon-style,
af|tree::collapsed-icon-style,
af|tree::node-anim-icon-style,
af|tree::leaf-icon-style{
  vertical-align: middle;
}

af|tree::selector-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/hierchselector_ena.png");
  background-position: top;
  margin: 0px;
}

/* This is an animated icon rendered during data fetch when a node is expanded */
af|tree::node-anim-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/node_anim.gif");
  padding-right: 9px;
  background-position: center center;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 9px;
  height: 9px;
}

@agent (touchScreen:none) {
  af|tree::selector-icon-style:hover {
    -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
    background-image:url("/afr/hierchselector_ovr.png");
    background-position: top;
    margin: 0px;
  }
}

af|tree::selector-icon-style:active {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/hierchselector_dwn.png");
  background-position: top;
  margin: 0px;
}

af|tree::selector-icon-style:rtl {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/hierchselector_ena_rtl.png");
  background-position: top;
  margin: 0px;
}

@agent (touchScreen:none) {
  af|tree::selector-icon-style:hover:rtl {
    -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
    background-image:url("/afr/hierchselector_ovr_rtl.png");
    background-position: top;
    margin: 0px;
  }
}

af|tree::selector-icon-style:active:rtl {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/hierchselector_dwn_rtl.png");
  background-position: top;
  margin: 0px;
}

af|tree::collapsed-icon-style img,
af|tree::expanded-icon-style img,
af|tree::leaf-icon-style img,
af|tree::node-anim-icon-style img,
af|tree::selector-icon-style img,
af|treeTable::collapsed-icon-style img,
af|treeTable::expanded-icon-style img,
af|treeTable::leaf-icon-style img,
af|treeTable::node-anim-icon-style img,
af|treeTable::selector-icon-style img {
  display: none;
}

/* These images align better with inline-block instead of block display */
af|body:high-contrast af|tree::collapsed-icon-style img,
af|body:high-contrast af|tree::expanded-icon-style img,
af|body:high-contrast af|tree::leaf-icon-style img,
af|body:high-contrast af|tree::node-anim-icon-style img,
af|body:high-contrast af|tree::selector-icon-style img,
af|body:high-contrast af|treeTable::collapsed-icon-style img,
af|body:high-contrast af|treeTable::expanded-icon-style img,
af|body:high-contrast af|treeTable::leaf-icon-style img,
af|body:high-contrast af|treeTable::node-anim-icon-style img,
af|body:high-contrast af|treeTable::selector-icon-style img {
  display: inline-block;
}

af|tree {
  -tr-node-indentation: 16;
  -tr-node-disclosure-animation-duration: 400;
  overflow:hidden;
  position:relative;
  /*27.27em equals 300px for 11px font size*/
  width: 27.27em;
  height: 27.27em;
}

/**
 * Do not show any color feedback on the tree for drop. The feedback is shown based on rowKey
 */
af|tree:drop-target
{
  background-color:transparent;
}

/*
 * Printable tree: turn off width, height and overflow.  This
 * should perhaps be an @media selector, but then it would
 * not show up as expected during viewing of the printable page,
 * and skinning doesn't yet support @media!
 */
af|tree:printable {
  width: auto;
  height: auto;
}
@agent email
{
  af|tree {
    width: auto;
    height: auto;
  }

  af|tree af|column::data-cell,
  af|tree af|column::banded-data-cell,
  af|table::data-table-VH-lines af|column::data-cell,
  af|table::data-table-VH-lines af|column::banded-data-cell {
    -tr-rule-ref: selector(".AFTableCellDataVHGrid:alias");
  }
}
/* default node-stamp-text styles when there are no states like :selected involved */
af|tree::node-stamp-text {
  cursor:default;
  vertical-align: middle;
  padding-left: 1px;
  -tr-rule-ref: selector(".AFLinkForeground:alias");
  border-width: 1px;
  border-style: solid;
  border-color: -tr-property-ref(".AFLightestNeutralBackground:alias","background-color");
  padding-right: 3px;
}

af|tree::node-stamp-text:rtl {
  padding-left: 3px;
  padding-right: 1px;
}

af|tree::data-row:drop-target{
  background-color: transparent;
}

af|tree::data-row:selected af|tree::node-stamp-text,
af|tree::data-row:selected af|selectBooleanCheckbox::item-text{
  -tr-rule-ref: selector(".AFLinkForeground:alias");
  font-weight:bold;
  -tr-rule-ref: selector(".AFTableCellDataSelected:alias");
  border-width: 1px;
  border-style: solid;
  border-color: #979991;
}
af|body:high-contrast af|tree::data-row:selected af|tree::node-stamp-text,
af|body:high-contrast af|tree::data-row:selected af|selectBooleanCheckbox::item-text{
  -tr-rule-ref: selector(".AFHighContrastTableCellDataSelected:alias");
}

af|tree::data-row:selected:inactive af|tree::node-stamp-text,
af|tree::data-row:selected:inactive af|selectBooleanCheckbox::item-text{
  -tr-rule-ref: selector(".AFTableCellDataSelectedBandedInactive:alias");
  border: 1px solid #E5E5E0;
  font-weight:bold;
}

af|tree::data-row:focused af|tree::node-stamp-text {
  border: 1px dotted #002A90;
}

af|tree::data-row:selected:focused af|tree::node-stamp-text{
  -tr-rule-ref: selector(".AFTableCellDataSelectedFocused:alias");
}
af|body:high-contrast af|tree::data-row:selected:focused af|tree::node-stamp-text{
  -tr-rule-ref: selector(".AFHighContrastTableCellDataSelectedFocused:alias");
}

af|tree::data-row:drop-target af|tree::node-stamp-text,
af|tree::data-row:drop-target af|selectBooleanCheckbox::item-text {
  -tr-rule-ref: selector(".AFTableCellDataDropTargetColor:alias");
  border: 1px solid #979991;
}

af|tree::status-message {
  -tr-rule-ref: selector(".AFDataCollectionStatusMessage:alias");
}

/*
  Tree Hierarchical Selector Styles.>
To see  af|tree::h-selector-connector you should right click on a node that is more than one
level deep (not a child node, but a grandchild node) and say Show as Top. Then you click on
the selector icon.
*/
/* private */
af|tree::h-selector-spacer {
    background-image: url('/afr/blank.gif');
    width:16px;
    height:16px;
}
/* private */
af|tree::h-selector-connector {
    background-image: url('/afr/connector.png');
    background-repeat:no-repeat;
    padding:0px;
    width:16px;
    height:16px;
}
/* private */
af|tree::h-selector-link {
  text-decoration: none;
  cursor : pointer;
  min-height:1.3em;
}

/* private */
af|tree::h-selector-row:selected af|tree::node-stamp-text {
  -tr-rule-ref: selector(".AFLinkForeground:alias");
  -tr-rule-ref: selector(".AFDarkBackground:alias");
  cursor : pointer;
}

af|tree::h-selector-row af|tree::node-stamp-text{
  cursor : pointer;
}

/*
  treeTable Styles
*/

af|treeTable
{
  border: 1px solid #636661;
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
  overflow:hidden;
  position:relative;
  /*27.27em equals 300px for 11px font size*/
  width: 27.27em;
  height: 27.27em;
  -tr-border-left-width: 0;
  -tr-border-right-width: 1;
  -tr-padding-left-width: 2;
  -tr-padding-right-width: 2;

  -tr-node-indentation: 16;
  -tr-node-disclosure-animation-duration: 400;
}

/**
 * Do not show any color feedback on the treeTable for drop. The feedback is shown based on rowKey
 */
af|treeTable:drop-target
{
  background-color:transparent;
}

/**
 * Make sure column styles are included in the inline style in email mode for treeTable
 */
@agent email
{
  af|treeTable {
    width: auto;
    height: auto;
  }

  af|treeTable af|column::data-cell,
  af|treeTable af|column::banded-data-cell,
  af|table::data-table-VH-lines af|column::data-cell,
  af|table::data-table-VH-lines af|column::banded-data-cell {
    -tr-rule-ref: selector(".AFTableCellDataVHGrid:alias");
  }
}

/* Icon hook for users to replace icons with alternate img or text */
af|treeTable::expanded-icon,
af|treeTable::collapsed-icon,
af|treeTable::selector-icon,
af|treeTable::leaf-icon,
af|treeTable::node-anim-icon,
af|table::disclosed-icon,
af|table::undisclosed-icon{
  content: inhibit;
}

af|treeTable::expanded-icon-style:rtl,
af|treeTable::collapsed-icon-style:rtl,
af|treeTable::leaf-icon-style:rtl {
  padding-left: 9px;
  padding-right: 0px;
}

af|treeTable::expanded-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image: url("/afr/disclosure_expanded.png");
  padding-right: 9px;
  background-position: center center;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 9px;
  height: 9px;
}

af|treeTable::collapsed-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/disclosure_collapsed.png");
  padding-right: 9px;
  background-position: center center;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 9px;
  height: 9px;
}

/* This is a 'blank' image to keep things lined up when we are viewing a leaf node */
af|treeTable::leaf-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/leaf.png");
  padding-right: 9px;
  background-position: center center;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 9px;
  height: 9px;
}

af|treeTable::expanded-icon-style,
af|treeTable::collapsed-icon-style,
af|treeTable::node-anim-icon-style,
af|treeTable::leaf-icon-style{
  vertical-align: middle;
}

af|treeTable::selector-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/hierchselector_ena.png");
  background-position: top;
  margin: 0px;
}

/* This is an animated icon rendered during data fetch when a node is expanded */
af|treeTable::node-anim-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/node_anim.gif");
  padding-right: 9px;
  background-position: center center;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 9px;
  height: 9px;
}

@agent (touchScreen:none) {
  af|treeTable::selector-icon-style:hover {
    -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
    background-image:url("/afr/hierchselector_ovr.png");
    background-position: top;
    margin: 0px;
  }
}

af|treeTable::selector-icon-style:active {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/hierchselector_dwn.png");
  background-position: top;
  margin: 0px;
}

af|treeTable::selector-icon-style:rtl {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/hierchselector_ena_rtl.png");
  background-position: top;
  margin: 0px;
}

@agent (touchScreen:none) {
  af|treeTable::selector-icon-style:hover:rtl {
    -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
    background-image:url("/afr/hierchselector_ovr_rtl.png");
    background-position: top;
    margin: 0px;
  }
}

af|treeTable::selector-icon-style:active:rtl {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/hierchselector_dwn_rtl.png");
  background-position: top;
  margin: 0px;
}


/* private */
af|treeTable::icon-container {
  margin-left:0px;
  margin-right:5px;
}

af|treeTable::icon-container:rtl {
  margin-left:5px;
  margin-right:0px;
}

af|treeTable::node-container {
  position:relative;
  overflow:hidden;
}

@agent ie and (max-version: 10) {
  af|treeTable::node-container {
    text-overflow:ellipsis;
  }
}

/* ListView Styles */

af|listView,
af|listItem {
  position: relative;
  -tr-rule-ref: selector(".AFStretchWidth:alias");
}

af|listView{
  border-top: 1px solid #636661;
  border-bottom: 1px solid #636661;
  border-left-width: 0px;
  border-right-width: 0px;
  overflow: auto;
}

af|listItem{
  -tr-rule-ref: selector(".AFTableCellDataHGrid:alias");
  overflow: hidden;
  padding-left: 10px;
}

af|listItem:swipe {
  touch-action: pan-y;
}

af|listItem:ltr{
  padding-left: 10px;
}

af|listItem:rtl{
  padding-right: 10px;
}

af|listItem{
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Use flex in group header as list items should stretch horizontally.
     icon-container child is flex initial size, doesn't grow
     group-header-item-container is flex auto size, grows in available space
*/
af|listItem:group-header{
  display: flex;
  padding-top: 1px;
  padding-bottom: 1px;
}

/* older syntax for ie10 */
@agent ie and (version: 10) {
  af|listItem:group-header{
    display: -ms-flexbox;
  }
  af|listItem::icon-container {
    -ms-flex: initial;
  }
  af|listItem::group-header-item-container {
    -ms-flex: auto;
  }
}

/* alternative to flex for ie9 */
@agent ie and (version: 9) {
  af|listItem::icon-container {
    float: left;
  }
  af|listItem::icon-container:rtl {
    float: right;
  }
  af|listItem::group-header-item-container {
    display: inline;
  }
}

@agent gecko, ie {
  af|listItem:focus{
    outline: none;
    border: 1px dotted #002A90;
    padding-top: 4px;
    padding-left: 9px;
    padding-right: 9px;
  }
  af|listItem:group-header:focus{
    padding-top: 0px;
  }
}

af|listItem::group-header-item-container {
  flex: auto;
  display: inline-block;
  vertical-align: middle;
}

af|listItem:selected {
  -tr-rule-ref: selector(".AFTableCellDataSelected:alias");
}
af|body:high-contrast af|listItem:selected {
  -tr-rule-ref: selector(".AFHighContrastTableCellDataSelected:alias");
}

af|listView::data-container {
  position: relative;
}

/* Icon hook for users to replace icons with alternate img or text */
af|listItem::expanded-icon,
af|listItem::collapsed-icon,
af|listItem::leaf-icon{
  content: inhibit;
}

af|listItem::expanded-icon-style:rtl,
af|listItem::collapsed-icon-style:rtl,
af|listItem::leaf-icon-style:rtl{
  padding-left: 9px;
  padding-right: 0px;
}

/* Note that in IE8, anchors that don't have hrefs or onclick attribute are treated as if they are
   non-interactive and thus the edit cursor would be used.  We always want these to be the pointer
   cursors instead since the clicks are handled via a component event. */
af|listItem::expanded-icon-style,
af|listItem::collapsed-icon-style,
af|listItem::leaf-icon-style{
  cursor: pointer;
  vertical-align: baseline;
  padding-right: 9px;
  background-position: center center;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 9px;
  height: 9px;
  /* Needed for IE7 and RTL*/
  display: inline-block;
}

af|listItem::expanded-icon-style {
  background-image: url("/afr/disclosure_expanded.png");
}

af|listItem::collapsed-icon-style {
  background-image:url("/afr/disclosure_collapsed.png");
}

af|listItem::leaf-icon-style {
  background-image: url("/afr/leaf.png");
}

af|listItem::expanded-icon-style img,
af|listItem::collapsed-icon-style img,
af|listItem::leaf-icon-style img{
  display: none;
}

af|body:high-contrast af|listItem::expanded-icon-style img,
af|body:high-contrast af|listItem::collapsed-icon-style img,
af|body:high-contrast af|listItem::leaf-icon-style img {
  display: block;
}

af|listItem::icon-container {
  flex: initial;
  margin-left:0px;
  margin-right:5px;
}

af|listItem::icon-container:rtl {
  margin-left:5px;
  margin-right:0px;
}

af|listView::navbar{
  -tr-rule-ref: selector(".AFStretchWidth:alias");
  position: relative;
  vertical-align: middle;
  overflow:hidden;
  padding-top: 5px;
  padding-bottom: 5px;
}

af|listView::navbar:ltr{
  text-align: right;
}

af|listView::navbar:rtl{
  text-align: left;
}

af|listView::navbar-item-range-text{
  -tr-rule-ref: selector(".AFLabelTextForeground:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  vertical-align: middle;
  white-space: nowrap;
  padding-left: 5px;
  padding-right: 5px;
}

af|listView::navbar-load-more-link{
  -tr-rule-ref: selector(".AFLinkForeground:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  /* Needed for IE7 and RTL*/
  display: inline-block;
}

@agent webkit {
  af|listView{
    -webkit-overflow-scrolling: touch;
  }
}

af|listView::empty-text:ltr{
  padding-left: 5px;
}

af|listView::empty-text:rtl{
  padding-right: 5px;
}
/**
 * Do not show any color feedback on the listView for drop. The feedback is shown based on listItem
 */
af|listView:drop-target
{
  background-color:transparent;
}

/* ListItem Swipe to reveal styles*/

af|listItem::start-facet {
  display: none;
  height: 100%;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  top: 0;
}

af|listItem::start-facet:ltr {
  left: 0;
  transform: translate3d(-100%, 0, 0);
}

af|listItem::start-facet:rtl {
  right: 0;
  transform: translate3d(100%, 0, 0);
}

af|listItem::end-facet {
  display: none;
  height: 100%;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  top: 0;
}

af|listItem::end-facet:ltr {
  right: 0;
  transform: translate3d(100%, 0, 0);
}

af|listItem::end-facet:rtl {
  left: 0;
  transform: translate3d(-100%, 0, 0);
}

af|listItem::outer-wrapper {
  position: relative;
  box-sizing: border-box;
  backface-visibility: hidden;
  /* negative margin is set to offset the padding on af|listItem*/
  margin: -5px -10px;
}

.AFDropAnimation {
  transition: transform 0.4s ease-in-out;
}

.AFDropActionsWidthAnimation {
  transition: width 0.4s ease-in-out;
}

af|listItem::content-wrapper {
  padding: 10px;
}

af|listItem::actions-wrapper {
  display: flex;
  height: 100%;
  position: relative;
  width: 100%;
}

af|listItem::actions-outer {
  flex: 1;
  max-width: 100%;
  width: 75px;
  overflow: hidden;
  height: 100%;
  transition: max-width 0.4s;
  transition-timing-function: ease-in-out;
}

af|listItem::actions-outer-border {
  border-right: inset 0.3px -tr-property-ref(".AFTextAltColor:alias","color");
}

af|listItem::actions-inner-absolute {
  display: flex;
  position: absolute;
  height: 100%;
  left: 50%;
  justify-content: center;
  align-items: center;
  transform: translateX(-50%);
}

af|listItem::action {
  flex: auto;
  box-sizing: border-box;
  flex-direction: column;
}

af|listItem::actions-flex-div {
  display:flex;
  position: relative;
  height: 100%;
}

/* ShowDetail Styles */
af|showDetail {
}

/*
  private
*/
af|showDetail::table{
  border-width: 0px;
  padding: 0px;
  width: 100%;
}

af|query::disclosure-icon-container,
af|showDetailHeader::disclosure-icon-container,
af|showDetail::icon-container {
  padding-left: 5px;
  padding-right: 2px;
  width: 10px;
  vertical-align: middle;
}

af|query::disclosure-icon-container:rtl,
af|showDetailHeader::disclosure-icon-container:rtl,
af|showDetail::icon-container:rtl {
  padding-left: 2px;
  padding-right: 5px;
}

af|region::disclosure-link,
af|region::maximize-link,
af|query::disclosure-link,
af|showDetail::disclosure-link,
af|panelBox::disclosure-link,
af|panelBox::maximize-link,
af|showDetailHeader::disclosure-link {
  cursor: default;
}

af|showDetail::header-text{
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  vertical-align: middle;
}

af|showDetail::child-container{
  vertical-align: top;
}

/*
 * PanelHeader/ShowDetailHeader Styles
 */

/* Main component style
   Note: Do not set width 100% on panelHeader, showDetailHeader or query or you will break header title stretching */
af|showDetailHeader,
af|query {
}

af|panelHeader,
af|showDetailHeader,
af|query {
  -tr-header-height : 25px;
}
af|query {
  -tr-visible-items: 10;
  -tr-button-type: unified;
}

/* Placing relatively-positioned components inside of a flowing header may void initial resize
   notifications because IE7 (and IE8) report the panelHeader's clientWidth and clientHeight as 0
   under these circumstances. By assigning a minimum height value, this will allow the initial
   resize notifications to occur and things like a lazy carousel data fetch will invoke. */
@agent ie {
  af|panelHeader,
  af|showDetailHeader {
    min-height: 1px;
  }
}

/* If a panelHeader or showDetailHeader contains relatively-positioned descendants, IE7 (not IE7 emulated in newer
   browsers) will display those descendants in scrambled locations as you scroll them into view.  Clicking on the
   page will sometimes cause them to come back to their proper locations but not always.  By adding
   position:relative to these selectors, IE7 will display those descendants properly. */
@agent ie and (version: 7.0) {
  af|panelHeader,
  af|showDetailHeader {
    position: relative;
  }
}

/* private */
af|panelHeader::title-table,
af|showDetailHeader::title-table,
af|query::title-table {
  padding: 0px;
  width: 100%;
}

/* We want styling on both regular icons and message type icons, so styling any image inside the icon-cell */
af|panelHeader::icon-cell > img,
af|showDetailHeader::icon-cell > img {
  margin-right: 2px;
  vertical-align: middle;
}

af|panelHeader::icon-cell:rtl > img,
af|showDetailHeader::icon-cell:rtl > img {
  margin-left: 2px;
  margin-right: 0px;
}

/* private
   - DIV containing the title text, manipulated by client to handle truncation and stretching. */
af|panelHeader::title-text-cell,
af|showDetailHeader::title-text-cell,
af|query::title-text-cell {
  white-space: nowrap;
  overflow: hidden;
}

/* private - Firefox 2 (revision 1.8), gives a width of 0 to a td with overflow hidden when another td has
   a width of 100%. So for ff2 we give it an initial overflow of visible, so that print mode and
   emailable mode will work, and then in initial call to panelHeader resizeNotify the overflow is
   set to hidden for header truncation support. */
@agent gecko and (version: 1.8) {
  af|panelHeader::title-text-cell,
  af|showDetailHeader::title-text-cell,
  af|query::title-text-cell {
    overflow: visible;
  }
}
@agent email {
  af|panelHeader::title-text-cell,
  af|showDetailHeader::title-text-cell,
  af|query::title-text-cell {
    -tr-inhibit: overflow;
  }
  /* private style class that renders in email mode ONLY.
  This keeps the title from wrapping in Outlook 2007. */
  af|panelHeader::title-text-td {
    width:100%;
  }
}

af|panelHeader::context-container,
af|panelHeader::dynamic-help-icon-container,
af|panelBox::context-container,
af|panelBox::dynamic-help-icon-container,
af|region::dynamic-help-icon-container,
af|showDetailHeader::context-container,
af|showDetailHeader::dynamic-help-icon-container,
af|query::dynamic-help-icon-container {
  padding-left: 2px;
  vertical-align: middle;
  white-space: nowrap;
}

af|panelBox::context-container,
af|panelBox::dynamic-help-icon-container,
af|region::context-container,
af|region::dynamic-help-icon-container {
  padding-bottom : 2px;
}


af|panelHeader::context-container:rtl,
af|panelHeader::dynamic-help-icon-container:rtl,
af|panelBox::context-container:rtl,
af|panelBox::dynamic-help-icon-container:rtl,
af|region::context-container:rtl,
af|region::dynamic-help-icon-container:rtl,
af|showDetailHeader::context-container:rtl,
af|showDetailHeader::dynamic-help-icon-container:rtl,
af|query::dynamic-help-icon-container:rtl {
  padding-left: 0px;
  padding-right: 2px;
}

af|panelBox::unmaximized-icon-style,
af|panelBox::maximized-icon-style {
  width: 13px;
  height: 20px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: default;
}

af|panelBox::maximized-icon-style {
  -tr-rule-ref: selector(".AFMaximizedIconStyle:alias");
}

af|panelBox::unmaximized-icon-style {
  -tr-rule-ref: selector(".AFUnmaximizedIconStyle:alias");
}

/* Maximized icons on dark backgrounds */
af|panelBox::header-center:core:dark af|panelBox::maximized-icon-style {
  -tr-rule-ref: selector(".AFMaximizedIconStyleDarkBackground:alias");
}

af|panelBox::header-center:core:dark af|panelBox::unmaximized-icon-style {
  -tr-rule-ref: selector(".AFUnmaximizedIconStyleDarkBackground:alias");
}



af|panelBox::maximized-icon-style:hover,
af|panelBox::header-center:core:dark af|panelBox::maximized-icon-style:hover {
  -tr-rule-ref: selector(".AFMaximizedIconStyleHover:alias");
}

af|panelBox::maximized-icon-style:active,
af|panelBox::header-center:core:dark af|panelBox::maximized-icon-style:active {
  -tr-rule-ref: selector(".AFMaximizedIconStyleActive:alias");
}

af|panelBox::unmaximized-icon-style:hover,
af|panelBox::header-center:core:dark af|panelBox::unmaximized-icon-style:hover {
  -tr-rule-ref: selector(".AFUnmaximizedIconStyleHover:alias");
}

af|panelBox::unmaximized-icon-style:active,
af|panelBox::header-center:core:dark af|panelBox::unmaximized-icon-style:active {
  -tr-rule-ref: selector(".AFUnmaximizedIconStyleActive:alias");
}

af|panelHeader::title-start0,
af|panelHeader::title-start2,
af|panelHeader::title-start3,
af|panelHeader::title-start4,
af|panelHeader::title-start5,
af|panelHeader::title-end0:rtl,
af|panelHeader::title-end2:rtl,
af|panelHeader::title-end3:rtl,
af|panelHeader::title-end4:rtl,
af|panelHeader::title-end5:rtl,
af|showDetailHeader::title-start0,
af|showDetailHeader::title-start2,
af|showDetailHeader::title-start3,
af|showDetailHeader::title-start4,
af|showDetailHeader::title-start5,
af|showDetailHeader::title-end0:rtl,
af|showDetailHeader::title-end2:rtl,
af|showDetailHeader::title-end3:rtl,
af|showDetailHeader::title-end4:rtl,
af|showDetailHeader::title-end5:rtl,
af|query::title-start0,
af|query::title-start2,
af|query::title-start3,
af|query::title-start4,
af|query::title-start5,
af|query::title-end0:rtl,
af|query::title-end2:rtl,
af|query::title-end3:rtl,
af|query::title-end4:rtl,
af|query::title-end5:rtl {
  width: 1px;
  min-width: 1px;
  padding: 0px;
  font-size: 0px;
}

af|panelHeader::title-start1,
af|panelHeader::title-end1:rtl,
af|showDetailHeader::title-start1,
af|showDetailHeader::title-end1:rtl,
af|query::title-start1,
af|query::title-end1:rtl {
  width: 3px;
  min-width: 3px;
  padding: 0px;
  font-size: 0px;
}

af|panelHeader::title-end0,
af|panelHeader::title-end2,
af|panelHeader::title-end3,
af|panelHeader::title-end4,
af|panelHeader::title-end5,
af|panelHeader::title-start0:rtl,
af|panelHeader::title-start2:rtl,
af|panelHeader::title-start3:rtl,
af|panelHeader::title-start4:rtl,
af|panelHeader::title-start5:rtl,
af|showDetailHeader::title-end0,
af|showDetailHeader::title-end2,
af|showDetailHeader::title-end3,
af|showDetailHeader::title-end4,
af|showDetailHeader::title-end5,
af|showDetailHeader::title-start0:rtl,
af|showDetailHeader::title-start2:rtl,
af|showDetailHeader::title-start3:rtl,
af|showDetailHeader::title-start4:rtl,
af|showDetailHeader::title-start5:rtl,
af|query::title-start0:rtl,
af|query::title-start2:rtl,
af|query::title-start3:rtl,
af|query::title-start4:rtl,
af|query::title-start5:rtl,
af|query::title-end0,
af|query::title-end2,
af|query::title-end3,
af|query::title-end4,
af|query::title-end5 {
  font-size: 0px;
  width: 1px;
  min-width: 1px;
  padding: 0px;
}

af|panelHeader::title-end1,
af|panelHeader::title-start1:rtl,
af|showDetailHeader::title-end1,
af|showDetailHeader::title-start1:rtl,
af|query::title-start1:rtl,
af|query::title-end1 {
  font-size: 0px;
  width: 3px;
  min-width: 3px;
  padding: 0px;
}

af|panelHeader::title0,
af|showDetailHeader::title0,
af|query::title0 {
  padding: 0px;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  display: block;
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  font-weight: bold;
  font-size: 14px;
}

af|panelHeader::title1,
af|showDetailHeader::title1,
af|query::title1 {
  padding: 1px 2px 1px 2px;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  display: block;
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  font-weight: bold;
  font-size: 12px;
}

af|panelHeader::title2,
af|panelHeader::title3,
af|panelHeader::title4,
af|panelHeader::title5,
af|showDetailHeader::title2,
af|showDetailHeader::title3,
af|showDetailHeader::title4,
af|showDetailHeader::title5,
af|query::title2,
af|query::title3,
af|query::title4,
af|query::title5{
  padding: 0px;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  display: block;
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
}

af|panelHeader::title-text0,
af|showDetailHeader::title-text0,
af|query::title-text0 {
  display: inline;
  margin: 0px;
  -tr-rule-ref: selector(".AFVeryDarkForeground:alias");
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  font-size: 14px;
  white-space: nowrap;
}

af|panelHeader::title-text1,
af|showDetailHeader::title-text1,
af|query::title-text1{
  display: inline;
  margin: 0px;
  -tr-rule-ref: selector(".AFVeryDarkForeground:alias");
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  font-size: 12px;
  white-space: nowrap;
}

af|panelHeader::title-text2,
af|panelHeader::title-text3,
af|panelHeader::title-text4,
af|panelHeader::title-text5,
af|showDetailHeader::title-text2,
af|showDetailHeader::title-text3,
af|showDetailHeader::title-text4,
af|showDetailHeader::title-text5,
af|query::title-text2,
af|query::title-text3,
af|query::title-text4,
af|query::title-text5 {
  display: inline;
  margin: 0px;
  -tr-rule-ref: selector(".AFVeryDarkForeground:alias");
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  white-space: nowrap;
}

/*This change made for bug 27160997 but due to requiremnt change
kept the default option as nowrap for touch devices as well. */
/* @agent (touchScreen) {
  af|panelHeader::title-text0,
  af|panelHeader::title-text1,
  af|panelHeader::title-text2,
  af|panelHeader::title-text3,
  af|panelHeader::title-text4,
  af|panelHeader::title-text5 {
    white-space: normal;
  }
} */

af|panelHeader::title-text0,
af|panelHeader::title-text1,
af|panelHeader::title-text2,
af|panelHeader::title-text3,
af|panelHeader::title-text4,
af|panelHeader::title-text5 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

af|panelHeader::title-text0:error,
af|panelHeader::title-text1:error,
af|panelHeader::title-text2:error,
af|panelHeader::title-text3:error,
af|panelHeader::title-text4:error,
af|panelHeader::title-text5:error,
af|showDetailHeader::title-text0:error,
af|showDetailHeader::title-text1:error,
af|showDetailHeader::title-text2:error,
af|showDetailHeader::title-text3:error,
af|showDetailHeader::title-text4:error,
af|showDetailHeader::title-text5:error,
af|query::title-text0:error,
af|query::title-text1:error,
af|query::title-text2:error,
af|query::title-text3:error,
af|query::title-text4:error,
af|query::title-text5:error {
  -tr-rule-ref: selector(".AFErrorTextForeground:alias");
}

/* private - add a 2px margin between title text and truncation ellipsis */
af|panelHeader::title-text-ellipsis,
af|showDetailHeader::title-text-ellipsis,
af|query::title-text-ellipsis,
af|panelTabbed::ellipsis-style,
af|navigationPane-tabs::ellipsis-style {
  margin-left: 2px;
}

/* private - add a 2px margin between title text and truncation ellipsis */
af|panelHeader::title-text-ellipsis:rtl,
af|showDetailHeader::title-text-ellipsis:rtl,
af|query::title-text-ellipsis:rtl,
af|panelTabbed::ellipsis-style:rtl,
af|navigationPane-tabs::ellipsis-style:rtl {
  margin-left: 0px;
  margin-right: 2px;
}

af|panelHeader::content0,
af|panelHeader::content2,
af|panelHeader::content3,
af|panelHeader::content4,
af|panelHeader::content5,
af|showDetailHeader::content0,
af|showDetailHeader::content2,
af|showDetailHeader::content3,
af|showDetailHeader::content4,
af|showDetailHeader::content5,
af|query::content0,
af|query::content2,
af|query::content3,
af|query::content4,
af|query::content5 {
  padding: 0px 5px 0px 5px;
  vertical-align: top;
}

af|panelHeader::content1,
af|showDetailHeader::content1,
af|query::content1 {
  padding: 2px 5px 2px 5px;
}

af|panelHeader::content1:rtl,
af|showDetailHeader::content1:rtl,
af|query::content1:rtl{
  vertical-align: top;
  padding: 2px 5px 2px 5px;
}

af|panelHeader::info,
af|showDetailHeader::info,
af|query::info {
  white-space: nowrap;
  text-align: right;
  vertical-align: top;
}

af|panelHeader::info:rtl,
af|showDetailHeader::info:rtl,
af|query::info:rtl {
  text-align: left;
}

.AFHeaderText:alias {
  -tr-rule-ref: selector(".AFDarkForeground:alias");
  font-weight: bold;
  padding: 0px;
  margin: 0px;
}

/* private - spacer cell to push the toobar in the header to be end aligned*/
af|panelHeader::title-spacer-cell,
af|showDetailHeader::title-spacer-cell,
af|query::title-spacer-cell{
  width: 100%;
}

/**
 * Specifies the size and position of a standard icon.  This alias can be
 * applies to any standard sized icon that is used as a background image.
 */
.AFStandardIconStyle:alias {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
}

.AFInfoIcon:alias {
  content: url(/afr/info.png);
  width: 16px;
  height: 16px;
}

/* Confirmation icon alias */
.AFConfirmationIcon:alias {
  content: url(/afr/confirmation.png);
  width: 16px;
  height: 16px;
}

.AFFatalIcon:alias,
.AFErrorIcon:alias {
  content: url(/afr/error.png);
  width: 16px;
  height: 16px;
}

.AFWarningIcon:alias {
  content: url(/afr/warning.png);
  width: 16px;
  height: 16px;
}

/* root style class for progressIndicator component */
af|progressIndicator {
  -tr-percent-block-increment: 5;
}

af|progressIndicator::content {
  text-align:center;
}

/* style class for indeterminate progress indicator */
af|progressIndicator::indeterminate {
  height: 32px;
  width: 32px;
  background-repeat: no-repeat;
}

/* add on style class for indeterminate running progress indicator */
af|progressIndicator::indeterminate:running {
  background-image: url('/afr/process_animation.gif');
}

/* add on style class for indeterminate finished progress indicator */
af|progressIndicator::indeterminate:finished {
  background-image: url('/afr/process_finished.gif');
}

af|body:high-contrast af|progressIndicator::indeterminate:running,
af|body:high-contrast af|progressIndicator::indeterminate:finished {
  background-image: none;
}

af|progressIndicator::indeterminate-running-icon {
  content: url('/afr/process_animation.gif');
}
af|progressIndicator::indeterminate-finished-icon {
  content: url('/afr/process_finished.gif');
}

af|progressIndicator::indeterminate:running > img,
af|progressIndicator::indeterminate:finished > img {
  display: none;
}

af|body:high-contrast af|progressIndicator::indeterminate:running > img,
af|body:high-contrast af|progressIndicator::indeterminate:finished > img {
  display: inline-block;
}

/* style class for determinate progress indicator */
af|progressIndicator::determinate {
  width:220px;
  height:18px;
  float:left;
}

af|progressIndicator::determinate-end-label{
  -tr-rule-ref: selector(".AFTextForeground:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFEndTextAlign:alias");
  font-weight:bold;
}
af|progressIndicator::determinate-start-label{
  -tr-rule-ref: selector(".AFTextForeground:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
  font-weight:bold;
}

/* style class for determinate progress indicator */
af|progressIndicator::determinate-filled-icon-style{
  background-image: url('/afr/progressbar_filled.png');
  text-decoration:none;
  height:18px;
  width:11px;
  background-repeat:repeat-x;
  float:left;
}
/* style class for determinate progress indicator */
af|progressIndicator::determinate-empty-icon-style {
  background-image: url('/afr/progressbar_empty.png');
  text-decoration:none;
  height:18px;
  width:11px;
  background-repeat:repeat-x;
  float:left;
}

/* for high contrast, give the filled area a border to make it visible */

af|body:high-contrast af|progressIndicator::determinate-filled-icon-style {
  border: 2px solid black;
}

/* shuttle Styles */
/* :hover/:active are blafplus styles, so those are in blafplus*.css */
/*
 * selectXXXShuttle styles
 */
af|selectOrderShuttle,
af|selectManyShuttle {
}

/* We only want to set the background of the containers, not the entire component. */
af|selectOrderShuttle::container,
af|selectManyShuttle::container {
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
}

/* style for shuttle label */
af|selectManyShuttle::label,
af|selectOrderShuttle::label {
  -tr-rule-ref:selector(".AFLabel:alias");
}

/* style for shuttle disabled label */
af|selectManyShuttle:disabled::label,
af|selectOrderShuttle:disabled::label {
  -tr-rule-ref:selector(".AFLabelDisabled:alias");
}

/* Private - style class for a hidden item, in the shuttle, to ensure widths of both side are ok */
af|selectManyShuttle::hidden-item,
af|selectOrderShuttle::hidden-item {
  visibility: hidden;
  height: 0px;
}

af|selectManyShuttle::content,
af|selectOrderShuttle::content {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  cursor: default;
}

af|selectOrderShuttle:read-only::content,
af|selectManyShuttle:read-only::content {
 /* border-width: 0px;*/
}

af|selectOrderShuttle:disabled::content,
af|selectManyShuttle:disabled::content {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFFormControlContentBackgroundDisabled:alias");
  border: 0px;

}

/* empty declarations so they will compress */
af|selectManyShuttle::content-input,
af|selectOrderShuttle::content-input {
}

af|selectOrderShuttle::fieldset,
af|selectManyShuttle::fieldset {
  border: none;
  padding: 0px;
  margin: 0px;

}

/* Style for the source and destination options boxes */
af|selectManyShuttle::options,
af|selectOrderShuttle::options {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  overflow: auto;
  overflow-x: hidden;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
/* Style for the header text about the options boxes */
af|selectManyShuttle::header,
af|selectOrderShuttle::header {
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  text-align: left;
  white-space: nowrap;
  margin-bottom: 4px;
  margin-top: 0px;
}
@agent ie, webkit {
  af|selectManyShuttle::header,
  af|selectOrderShuttle::header {
    text-overflow: ellipsis;
  }
}

/* TODO =-=jmw: the color should probably match form control's label, and it doesn't.
It is close .  background-color is a light blue.
I can't find the visual spec for shuttle
*/
/* Style for the description label */
af|selectOrderShuttle::description,
af|selectManyShuttle::description {
  padding-left: 3px;
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFLabelTextForeground:alias");
  -tr-rule-ref: selector(".AFLightBackground:alias");
}
/* style of the parent container of the description text */
af|selectOrderShuttle::desc-cell,
af|selectManyShuttle::desc-cell {
}
/* style of the description text */
af|selectOrderShuttle::desc-area,
af|selectManyShuttle::desc-area {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
}
/* style of parent container of the move icons and their text */
af|selectOrderShuttle::icon-container,
af|selectManyShuttle::icon-container {
  text-align: center;
  padding: 4px 0px;
}
/* private style of the parent container of the vertical move icons
 * This centers the move icons and provides some vertical padding
 */
af|selectOrderShuttle::vertical-icon-container,
af|selectManyShuttle::vertical-icon-container {
  margin: 5px auto;
}
/* style of the label text for the icon buttons */
af|selectOrderShuttle::icon-label,
af|selectManyShuttle::icon-label {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
}

/* label of each item in the shuttle */
af|selectOrderShuttle::item-label,
af|selectManyShuttle::item-label {
  white-space: nowrap;
}

@agent ie, webkit {
  af|selectManyShuttle::item-label,
  af|selectOrderShuttle::item-label {
    text-overflow: ellipsis;
  }
}

af|selectOrderShuttle::item-label:disabled,
af|selectManyShuttle::item-label:disabled {
  -tr-rule-ref: selector(".AFDarkAccentForeground:alias");
}

/* select*Shuttle move/remove buttons have background gradients in BLAF Fusion
 so we need skinning keys for the button gradient and border */
af|selectManyShuttle::move-horizontal,
af|selectManyShuttle::move-vertical,
af|selectOrderShuttle::move-horizontal,
af|selectOrderShuttle::move-vertical,
af|selectManyShuttle::moveall-horizontal,
af|selectManyShuttle::moveall-vertical,
af|selectOrderShuttle::moveall-horizontal,
af|selectOrderShuttle::moveall-vertical,
af|selectManyShuttle::remove-horizontal,
af|selectManyShuttle::remove-vertical,
af|selectOrderShuttle::remove-horizontal,
af|selectOrderShuttle::remove-vertical,
af|selectManyShuttle::removeall-horizontal,
af|selectManyShuttle::removeall-vertical,
af|selectOrderShuttle::removeall-horizontal,
af|selectOrderShuttle::removeall-vertical {
}

@agent (touchScreen:none) {
  af|selectManyShuttle::move-horizontal:hover,
  af|selectManyShuttle::move-vertical:hover,
  af|selectOrderShuttle::move-horizontal:hover,
  af|selectOrderShuttle::move-vertical:hover,
  af|selectManyShuttle::moveall-horizontal:hover,
  af|selectManyShuttle::moveall-vertical:hover,
  af|selectOrderShuttle::moveall-horizontal:hover,
  af|selectOrderShuttle::moveall-vertical:hover,
  af|selectManyShuttle::remove-horizontal:hover,
  af|selectManyShuttle::remove-vertical:hover,
  af|selectOrderShuttle::remove-horizontal:hover,
  af|selectOrderShuttle::remove-vertical:hover,
  af|selectManyShuttle::removeall-horizontal:hover,
  af|selectManyShuttle::removeall-vertical:hover,
  af|selectOrderShuttle::removeall-horizontal:hover,
  af|selectOrderShuttle::removeall-vertical:hover {
  }
}

af|selectManyShuttle::move-horizontal:active,
af|selectManyShuttle::move-vertical:active,
af|selectOrderShuttle::move-horizontal:active,
af|selectOrderShuttle::move-vertical:active,
af|selectManyShuttle::moveall-horizontal:active,
af|selectManyShuttle::moveall-vertical:active,
af|selectOrderShuttle::moveall-horizontal:active,
af|selectOrderShuttle::moveall-vertical:active,
af|selectManyShuttle::remove-horizontal:active,
af|selectManyShuttle::remove-vertical:active,
af|selectOrderShuttle::remove-horizontal:active,
af|selectOrderShuttle::remove-vertical:active,
af|selectManyShuttle::removeall-horizontal:active,
af|selectManyShuttle::removeall-vertical:active,
af|selectOrderShuttle::removeall-horizontal:active,
af|selectOrderShuttle::removeall-vertical:active {
}

/* selectManyShuttle and selectOrderShuttle icon images */
/* These images need to be in simple so that simple can have disabled icons, and have :hover and
:active still be overridden by :disabled */

af|selectManyShuttle::move-horizontal-icon-style,
af|selectOrderShuttle::move-horizontal-icon-style {
  background-image: url("/afr/shuttleright_ena.png");
}
af|body:high-contrast af|selectManyShuttle::move-horizontal-icon-style:after,
af|body:high-contrast af|selectOrderShuttle::move-horizontal-icon-style:after {
  content: -tr-property-ref(".AFSelectShuttleRightEnabledIcon:alias","background-image");
}

af|selectManyShuttle::move-horizontal-icon-style:disabled,
af|selectOrderShuttle::move-horizontal-icon-style:disabled {
  background-image: url("/afr/shuttleright_dis.png");
}

af|body:high-contrast af|selectManyShuttle::move-horizontal-icon-style:disabled:after,
af|body:high-contrast af|selectOrderShuttle::move-horizontal-icon-style:disabled:after {
  content: -tr-property-ref(".AFSelectShuttleRightDisabledIcon:alias","background-image");
}
af|selectManyShuttle::move-horizontal-icon-style:rtl,
af|selectOrderShuttle::move-horizontal-icon-style:rtl {
  background-image: url("/afr/shuttlerightbidi_ena.png");
}
af|selectManyShuttle::move-horizontal-icon-style:disabled:rtl,
af|selectOrderShuttle::move-horizontal-icon-style:disabled:rtl {
  background-image: url("/afr/shuttlerightbidi_dis.png");
}
af|selectManyShuttle::move-vertical-icon-style,
af|selectOrderShuttle::move-vertical-icon-style {
  background-image: url("/afr/shuttledown_ena.png");
}
af|selectManyShuttle::move-vertical-icon-style:disabled,
af|selectOrderShuttle::move-vertical-icon-style:disabled {
  background-image: url("/afr/shuttledown_dis.png");
}
af|selectManyShuttle::moveall-horizontal-icon-style,
af|selectOrderShuttle::moveall-horizontal-icon-style {
  background-image: url("/afr/shuttlerightall_ena.png");
}
af|body:high-contrast af|selectManyShuttle::moveall-horizontal-icon-style:after,
af|body:high-contrast af|selectOrderShuttle::moveall-horizontal-icon-style:after {
  content: -tr-property-ref(".AFSelectShuttleRightAllEnabledIcon:alias","background-image");
}
af|selectManyShuttle::moveall-horizontal-icon-style:disabled,
af|selectOrderShuttle::moveall-horizontal-icon-style:disabled {
  background-image: url("/afr/shuttlerightall_dis.png");
}
af|body:high-contrast af|selectManyShuttle::moveall-horizontal-icon-style:disabled:after,
af|body:high-contrast af|selectOrderShuttle::moveall-horizontal-icon-style:disabled:after {
  content: -tr-property-ref(".AFSelectShuttleRightAllDisabledIcon:alias","background-image");
}
af|selectManyShuttle::moveall-horizontal-icon-style:rtl,
af|selectOrderShuttle::moveall-horizontal-icon-style:rtl {
  background-image: url("/afr/shuttleleftall_ena.png");
}
af|selectManyShuttle::moveall-horizontal-icon-style:disabled:rtl,
af|selectOrderShuttle::moveall-horizontal-icon-style:disabled:rtl {
  background-image: url("/afr/shuttleleftall_dis.png");
}
af|body:high-contrast af|selectManyShuttle::moveall-horizontal-icon-style:disabled:after:rtl,
af|body:high-contrast af|selectOrderShuttle::moveall-horizontal-icon-style:disabled:after:rtl {
  content: -tr-property-ref(".AFSelectShuttleLeftAllDisabledIcon:alias","background-image");
}
af|selectManyShuttle::moveall-vertical-icon-style,
af|selectOrderShuttle::moveall-vertical-icon-style {
  background-image: url("/afr/shuttledownall_ena.png");
}
af|selectManyShuttle::moveall-vertical-icon-style:disabled,
af|selectOrderShuttle::moveall-vertical-icon-style:disabled {
  background-image: url("/afr/shuttledownall_dis.png");
}
af|selectManyShuttle::remove-horizontal-icon-style,
af|selectOrderShuttle::remove-horizontal-icon-style {
  background-image: url("/afr/shuttleleft_ena.png");
}
af|body:high-contrast af|selectManyShuttle::remove-horizontal-icon-style:after,
af|body:high-contrast af|selectOrderShuttle::remove-horizontal-icon-style:after {
  content: -tr-property-ref(".AFSelectShuttleLeftEnabledIcon:alias","background-image");
}
af|selectManyShuttle::remove-horizontal-icon-style:disabled,
af|selectOrderShuttle::remove-horizontal-icon-style:disabled {
  background-image: url("/afr/shuttleleft_dis.png");
}
af|body:high-contrast af|selectManyShuttle::remove-horizontal-icon-style:disabled:after,
af|body:high-contrast af|selectOrderShuttle::remove-horizontal-icon-style:disabled:after {
  content: -tr-property-ref(".AFSelectShuttleLeftDisabledIcon:alias","background-image");
}
af|selectManyShuttle::remove-horizontal-icon-style:rtl,
af|selectOrderShuttle::remove-horizontal-icon-style:rtl {
  background-image: url("/afr/shuttleleftbidi_ena.png");
}
af|selectManyShuttle::remove-horizontal-icon-style:disabled:rtl,
af|selectOrderShuttle::remove-horizontal-icon-style:disabled:rtl {
  background-image: url("/afr/shuttleleftbidi_dis.png");
}
af|selectManyShuttle::remove-vertical-icon-style,
af|selectOrderShuttle::remove-vertical-icon-style {
  background-image: url("/afr/shuttleup_ena.png");
}
af|selectManyShuttle::remove-vertical-icon-style:disabled,
af|selectOrderShuttle::remove-vertical-icon-style:disabled {
  background-image: url("/afr/shuttleup_dis.png");
}
af|selectManyShuttle::remove-vertical-icon-style:rtl,
af|selectOrderShuttle::remove-vertical-icon-style:rtl {
  background-image: url("/afr/shuttleupbidi_ena.png");
}
af|selectManyShuttle::remove-vertical-icon-style:disabled:rtl,
af|selectOrderShuttle::remove-vertical-icon-style:disabled:rtl {
  background-image: url("/afr/shuttleupbidi_dis.png");
}
af|selectManyShuttle::removeall-horizontal-icon-style,
af|selectOrderShuttle::removeall-horizontal-icon-style {
  background-image: url("/afr/shuttleleftall_ena.png");
}
af|body:high-contrast af|selectManyShuttle::removeall-horizontal-icon-style:after,
af|body:high-contrast af|selectOrderShuttle::removeall-horizontal-icon-style:after {
  content: -tr-property-ref(".AFSelectShuttleLeftAllEnabledIcon:alias","background-image");
}
af|selectManyShuttle::removeall-horizontal-icon-style:disabled,
af|selectOrderShuttle::removeall-horizontal-icon-style:disabled {

  background-image: url("/afr/shuttleleftall_dis.png");
}
af|body:high-contrast af|selectManyShuttle::removeall-horizontal-icon-style:disabled:after,
af|body:high-contrast af|selectOrderShuttle::removeall-horizontal-icon-style:disabled:after {
  content: -tr-property-ref(".AFSelectShuttleLeftAllDisabledIcon:alias","background-image");
}
af|selectManyShuttle::removeall-horizontal-icon-style:rtl,
af|selectOrderShuttle::removeall-horizontal-icon-style:rtl {
  background-image: url("/afr/shuttleleftallbidi_ena.png");
}
af|selectManyShuttle::removeall-horizontal-icon-style:disabled:rtl,
af|selectOrderShuttle::removeall-horizontal-icon-style:disabled:rtl {
  background-image: url("/afr/shuttleleftallbidi_dis.png");
}
af|selectManyShuttle::removeall-vertical-icon-style,
af|selectOrderShuttle::removeall-vertical-icon-style {
  background-image: url("/afr/shuttleupall_ena.png");
}
af|selectManyShuttle::removeall-vertical-icon-style:disabled,
af|selectOrderShuttle::removeall-vertical-icon-style:disabled {
  background-image: url("/afr/shuttleupall_dis.png");
}
af|selectManyShuttle::removeall-vertical-icon-style:rtl,
af|selectOrderShuttle::removeall-vertical-icon-style:rtl {
  background-image: url("/afr/shuttleupallbidi_ena.png");
}
af|selectManyShuttle::removeall-vertical-icon-style:disabled:rtl,
af|selectOrderShuttle::removeall-vertical-icon-style:disabled:rtl {
  background-image: url("/afr/shuttleupallbidi_dis.png");
}
/* selectOrderShuttle specific icon images */
af|selectOrderShuttle::move-top-icon-style {
  background-image: url("/afr/shuttlereordertop_ena.png");
}
af|body:high-contrast af|selectOrderShuttle::move-top-icon-style:after {
  content: -tr-property-ref(".AFSelectShuttleUpEndEnabledIcon:alias","background-image");
}
af|selectOrderShuttle::move-top-icon-style:disabled {
  background-image: url("/afr/shuttlereordertop_dis.png");
}
af|body:high-contrast af|selectOrderShuttle::move-top-icon-style:disabled:after {
  content: -tr-property-ref(".AFSelectShuttleUpEndDisabledIcon:alias","background-image");
}

af|selectOrderShuttle::move-up-icon-style {
  background-image: url("/afr/shuttlereorderup_ena.png");
}
af|body:high-contrast af|selectOrderShuttle::move-up-icon-style:after {
  content: -tr-property-ref(".AFSelectShuttleUpEnabledIcon:alias","background-image");
}
af|selectOrderShuttle::move-up-icon-style:disabled {
  background-image: url("/afr/shuttlereorderup_dis.png");
}
af|body:high-contrast af|selectOrderShuttle::move-up-icon-style:disabled:after {
  content: -tr-property-ref(".AFSelectShuttleUpDisabledIcon:alias","background-image");
}

af|selectOrderShuttle::move-down-icon-style {
  background-image: url("/afr/shuttlereorderdown_ena.png");
}
af|body:high-contrast af|selectOrderShuttle::move-down-icon-style:after {
  content: -tr-property-ref(".AFSelectShuttleDownEnabledIcon:alias","background-image");
}
af|selectOrderShuttle::move-down-icon-style:disabled {
  background-image: url("/afr/shuttlereorderdown_dis.png");
}
af|body:high-contrast af|selectOrderShuttle::move-down-icon-style:disabled:after {
  content: -tr-property-ref(".AFSelectShuttleDownDisabledIcon:alias","background-image");
}

af|selectOrderShuttle::move-bottom-icon-style {
  background-image: url("/afr/shuttlereorderbottom_ena.png");
}
af|body:high-contrast af|selectOrderShuttle::move-bottom-icon-style:after {
  content: -tr-property-ref(".AFSelectShuttleDownEndEnabledIcon:alias","background-image");
}
af|selectOrderShuttle::move-bottom-icon-style:disabled {
  background-image: url("/afr/shuttlereorderbottom_dis.png");
}
af|body:high-contrast af|selectOrderShuttle::move-bottom-icon-style:disabled:after {
  content: -tr-property-ref(".AFSelectShuttleDownEndDisabledIcon:alias","background-image");
}

af|selectManyShuttle::move-horizontal-icon-style,
af|selectManyShuttle::moveall-horizontal-icon-style,
af|selectManyShuttle::copy-horizontal-icon-style,
af|selectManyShuttle::copyall-horizontal-icon-style,
af|selectManyShuttle::remove-horizontal-icon-style,
af|selectManyShuttle::removeall-horizontal-icon-style,
af|selectManyShuttle::move-horizontal-icon-style:rtl,
af|selectManyShuttle::moveall-horizontal-icon-style:rtl,
af|selectManyShuttle::copy-horizontal-icon-style:rtl,
af|selectManyShuttle::copyall-horizontal-icon-style:rtl,
af|selectManyShuttle::remove-horizontal-icon-style:rtl,
af|selectManyShuttle::removeall-horizontal-icon-style:rtl,
af|selectOrderShuttle::move-horizontal-icon-style,
af|selectOrderShuttle::moveall-horizontal-icon-style,
af|selectOrderShuttle::copy-horizontal-icon-style,
af|selectOrderShuttle::copyall-horizontal-icon-style,
af|selectOrderShuttle::remove-horizontal-icon-style,
af|selectOrderShuttle::removeall-horizontal-icon-style,
af|selectOrderShuttle::move-horizontal-icon-style:rtl,
af|selectOrderShuttle::moveall-horizontal-icon-style:rtl,
af|selectOrderShuttle::copy-horizontal-icon-style:rtl,
af|selectOrderShuttle::copyall-horizontal-icon-style:rtl,
af|selectOrderShuttle::remove-horizontal-icon-style:rtl,
af|selectOrderShuttle::removeall-horizontal-icon-style:rtl {
  display: block;
  width: 84px;
  height: 14px;
  cursor:default;
  background-repeat: no-repeat;
  background-position: center center;
  padding:0px;
}
af|selectManyShuttle::move-vertical-icon-style,
af|selectManyShuttle::moveall-vertical-icon-style,
af|selectManyShuttle::copy-vertical-icon-style,
af|selectManyShuttle::copyall-vertical-icon-style,
af|selectManyShuttle::remove-vertical-icon-style,
af|selectManyShuttle::removeall-vertical-icon-style,
af|selectManyShuttle::move-vertical-icon-style:rtl,
af|selectManyShuttle::moveall-vertical-icon-style:rtl,
af|selectManyShuttle::copy-vertical-icon-style:rtl,
af|selectManyShuttle::copyall-vertical-icon-style:rtl,
af|selectManyShuttle::remove-vertical-icon-style:rtl,
af|selectManyShuttle::removeall-vertical-icon-style:rtl,
af|selectOrderShuttle::move-vertical-icon-style,
af|selectOrderShuttle::moveall-vertical-icon-style,
af|selectOrderShuttle::copy-vertical-icon-style,
af|selectOrderShuttle::copyall-vertical-icon-style,
af|selectOrderShuttle::remove-vertical-icon-style,
af|selectOrderShuttle::removeall-vertical-icon-style,
af|selectOrderShuttle::move-vertical-icon-style:rtl,
af|selectOrderShuttle::moveall-vertical-icon-style:rtl,
af|selectOrderShuttle::copy-vertical-icon-style:rtl,
af|selectOrderShuttle::copyall-vertical-icon-style:rtl,
af|selectOrderShuttle::remove-vertical-icon-style:rtl,
af|selectOrderShuttle::removeall-vertical-icon-style:rtl {
  display: block;
  width: 20px;
  height: 16px;
  cursor:default;
  background-repeat: no-repeat;
  background-position: center center;
  padding:0px;
}

/* Shuttle Icons */
af|selectManyShuttle::move-horizontal-icon,
af|selectOrderShuttle::move-horizontal-icon,
af|selectManyShuttle::move-vertical-icon,
af|selectOrderShuttle::move-vertical-icon,
af|selectManyShuttle::moveall-horizontal-icon,
af|selectOrderShuttle::moveall-horizontal-icon,
af|selectManyShuttle::moveall-vertical-icon,
af|selectOrderShuttle::moveall-vertical-icon,
af|selectManyShuttle::remove-horizontal-icon,
af|selectOrderShuttle::remove-horizontal-icon,
af|selectManyShuttle::remove-vertical-icon,
af|selectOrderShuttle::remove-vertical-icon,
af|selectManyShuttle::removeall-horizontal-icon,
af|selectOrderShuttle::removeall-horizontal-icon,
af|selectManyShuttle::removeall-vertical-icon,
af|selectOrderShuttle::removeall-vertical-icon,
af|selectOrderShuttle::move-top-icon,
af|selectOrderShuttle::move-up-icon,
af|selectOrderShuttle::move-down-icon,
af|selectOrderShuttle::move-bottom-icon,
af|selectManyShuttle::move-horizontal-disabled-icon,
af|selectOrderShuttle::move-horizontal-disabled-icon,
af|selectManyShuttle::move-vertical-disabled-icon,
af|selectOrderShuttle::move-vertical-disabled-icon,
af|selectManyShuttle::moveall-horizontal-disabled-icon,
af|selectOrderShuttle::moveall-horizontal-disabled-icon,
af|selectManyShuttle::moveall-vertical-disabled-icon,
af|selectOrderShuttle::moveall-vertical-disabled-icon,
af|selectManyShuttle::remove-horizontal-disabled-icon,
af|selectOrderShuttle::remove-horizontal-disabled-icon,
af|selectManyShuttle::remove-vertical-disabled-icon,
af|selectOrderShuttle::remove-vertical-disabled-icon,
af|selectManyShuttle::removeall-horizontal-disabled-icon,
af|selectOrderShuttle::removeall-horizontal-disabled-icon,
af|selectManyShuttle::removeall-vertical-disabled-icon,
af|selectOrderShuttle::removeall-vertical-disabled-icon,
af|selectOrderShuttle::move-top-disabled-icon,
af|selectOrderShuttle::move-up-disabled-icon,
af|selectOrderShuttle::move-down-disabled-icon,
af|selectOrderShuttle::move-bottom-disabled-icon {
  content: inhibit
}

af|selectOrderShuttle::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

af|selectOrderShuttle::move-top-icon-style,
af|selectOrderShuttle::move-up-icon-style,
af|selectOrderShuttle::move-down-icon-style,
af|selectOrderShuttle::move-bottom-icon-style {
  display: block;
  width: 16px;
  height: 16px;
  cursor:default;
  background-repeat: no-repeat;
}

/* af|separator */
af|separator {
}

/* IE7 adds margin above and below the HR element */
@agent ie and (version: 7.0) {
  af|separator {
    margin-top: 0px;
    margin-bottom: 0px;
  }
}

/* af|statusIndicator */
af|statusIndicator {
}

/* This icon represents the idle state. This icon is generally a non-animated icon
 * that indicates communication is NOT occuring with the server.
 */
af|statusIndicator::idle-icon {
  content: "O";
}

/* This icon represents the processing state. This icon is generally an animated icon
 * that indicates communication IS occuring with the server.
 */
af|statusIndicator::processing-icon {
  width: 21px;
  height: 18px;
  content: "(//)";
}

/* This icon is displayed when Active Data Service is in the process of connecting.
 * This icon is generally an animated icon.
 */
af|statusIndicator::connecting-icon {
  width: 21px;
  height: 18px;
  content: "(~)";
}

/* This icon is displayed when Active Data Service is in the connected state. This
 * icon is generally a non-animated icon and may be the same as the idle state icon.
 */
af|statusIndicator::connected-icon {
  width: 21px;
  height: 18px;
  content: "O";
  font-weight: bold;
}

/* This icon is displayed when the Active Data Service has lost connection and is
 * attempting to reconnect. This icon is generally an animated icon.
 */
af|statusIndicator::reconnecting-icon {
  width: 21px;
  height: 18px;
  content: "(~)";
  color: red;
}

/* This is displayed when the Active Data Service is in the disconnected state.
 * This icon is generally a non-animated icon used to indicate that no further
 * reconnection atempts will be made without user interaction.
 */
af|statusIndicator::disconnected-icon {
  width: 21px;
  height: 18px;
  content: "(x)";
}
/* end af|statusIndicator */

af|form
{
  margin: 0px;
}

/* start of panelTabbed (and navigationPane-tabs) styles */

/* The root element for the panelTabbed component. */
af|panelTabbed {
  -tr-layout-type: conveyor;
  -tr-tab-bar-height: 2em; /* height of tab bars that do have tabs */
  -tr-empty-bar-height: 9; /* height of tab bars that don't have tabs */
  /*
   We tack on a "font-size:small" onto af|panelTabbed.  This way, "em" units
   on dimensions will always resolve to a consistent number of pixels by the browser no matter
   what the font-size is set to on the parent element of the panelTabbed.
   It is also needed when we:
   a.) give an "em" value for the top tab bar's height,
   b.) give an "em" value for the bottom tab bar's height,
   c.) give an "em" value for the body's top position, and
   d.) give an "em" value for the body's bottom position
   since these elements must match up pixel-for pixel or else there will be unexpected gaps or
   unexpected overlap of these elements.
   Also, any text that a page developer wants to place inside the tab body needs to show up
   using the default font size from the skin--not the "font-size:small" that is needed for
   consistent "em" resolution.
   Thus, we have conflicting requirements to specify a different font sizes.
   To account for this, we need to use two DIVs for the tab body:
   a.) an outer DIV around the body inheriting the "font-size:small" so the top and bottom
       positions will resolve properly, and
   b.) an inner DIV that fits snugly in the outer DIV but has a font-size set to the default.
  */
  font-size: small;
  position: relative;
  overflow: hidden;
  /* default width and height */
  width: 300px;
  height: 300px;
  min-width: 100px;
}

/* required or else a center-aligned panelTabbed will fail */
af|panelTabbed {
  text-align: left;
}
af|panelTabbed:rtl {
  text-align: right;
}

/* Icon hook for users to replace start-overflow-indicator with another img or text */
/* Icon hook for users to replace end-overflow-indicator with another img or text */
af|navigationPane-tabs::start-overflow-icon,
af|navigationPane-tabs::start-overflow-icon,
af|panelTabbed::start-overflow-icon,
af|panelTabbed::end-overflow-icon {
  content: inhibit;
}

/* the style for tab access key text */
af|panelTabbed::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* The bar containers for "above" and "below" tabs
   NOTE: The header bottom border needed to be a repeated background image (and not a regular
         border) as -tr-tab-bar-height is looking for a non-border height value */
af|panelTabbed::header,
af|panelTabbed::footer {
  background-image: url('/afr/dot_black.png');
  background-repeat: repeat-x;
  background-position: bottom;
  overflow: hidden;
  left: 0px;
  right: 0px;
  position: absolute;
}

/* The bar container for "below" tabs */
af|panelTabbed::footer {
  background-position: top;
  bottom: 0px;
}

/* This is used for the area between the start and end areas of the header or footer.  Typically,
   this defines a background image between the start and end corner images, particularly useful if
   -tr-tab-bar-layout is set to "full". */
af|panelTabbed::header-center,
af|panelTabbed::footer-center {
  background-repeat: repeat-x;
  background-position: bottom;
  overflow: hidden;
  left: 0px;
  right: 0px;
  position: absolute;
}
af|panelTabbed::footer-center {
  background-position: top;
  bottom: 0px;
}

/*wrapper element for the center part of the panel tabbed (between the "above" and "below" tab bars)*/
af|panelTabbed::content {
  vertical-align: top;
}

/* The center part; between the "above" and "below" tab bars */
af|panelTabbed::body {
  /* We use AFDefaultFont:alias here to reset the font-size from af|panelTabbed since the tab body
     needs to display text using the default size, not the size requried for consistent "em" unit
     positioning.  For more details, see the comment in af|panelTabbed explaining the use of
     font-size. */
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
  overflow: hidden;
}

/* In print mode turn off overflow:hidden so that all the content cab be printed without truncation*/
af|document:printable af|panelTabbed::body {
  overflow: visible;
}

/* before skyros the body is completely different if tabs are vertical, add
   support for the vertical state*/
af|panelTabbed::body:vertical {
  -tr-inhibit: background-image;
  position: relative;
  z-index: 1;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  padding:5px;
}

af|panelTabbed::tabs:start-tabs:iconified,
af|panelTabbed::tabs:end-tabs:iconified,
af|panelTabbed::tabs:left-tabs:iconified,
af|panelTabbed::tabs:right-tabs:iconified,
af|panelDrawer:start:iconified af|panelDrawer::tabs,
af|panelDrawer:end:iconified af|panelDrawer::tabs,
af|panelDrawer:left:iconified af|panelDrawer::tabs,
af|panelDrawer:right:iconified af|panelDrawer::tabs {
  width: 42px;
}

af|panelTabbed::tabs:start-tabs,
af|panelTabbed::tabs:end-tabs,
af|panelTabbed::tabs:left-tabs,
af|panelTabbed::tabs:right-tabs {
  width: 150px;
}

af|panelTabbed::tabs af|panelTabbed::toggle {
  height: 42px;
  position:relative;
  width:150px;
  border:none;
}

af|panelTabbed::tabs:iconified af|panelTabbed::toggle {
 width:42px;
}

af|panelTabbed::tabs af|panelTabbed::toggle-icon-style {
  -tr-rule-ref: selector(".AFVerticalTabLabelHideStyle:alias");
  display:block;
  height:24px;
  width:24px;
  padding:8px;
  margin: 0px;
  position:relative;
  background-repeat:no-repeat;
  background-position:center center;
  border:none;
}

af|panelTabbed::tabs af|panelTabbed::toggle-icon-style:hover {
  -tr-rule-ref: selector(".AFVerticalTabLabelHideStyleHover:alias");
}

af|panelTabbed::tabs af|panelTabbed::toggle-icon-style:active {
  -tr-rule-ref: selector(".AFVerticalTabLabelHideStyleActive:alias");
}

af|panelTabbed::tabs:iconified af|panelTabbed::toggle-icon-style {
  -tr-rule-ref: selector(".AFVerticalTabLabelShowStyle:alias");
}

af|panelTabbed::tabs:iconified af|panelTabbed::toggle-icon-style:hover {
  -tr-rule-ref: selector(".AFVerticalTabLabelShowStyleHover:alias");
}

af|panelTabbed::tabs:iconified af|panelTabbed::toggle-icon-style:active {
  -tr-rule-ref: selector(".AFVerticalTabLabelShowStyleActive:alias");
}

af|panelTabbed::tabs:end-tabs af|panelTabbed::toggle-icon-style,
af|panelTabbed::tabs:right-tabs af|panelTabbed::toggle-icon-style,
af|panelTabbed::tabs:start-tabs af|panelTabbed::toggle-icon-style:rtl {
  -tr-rule-ref: selector(".AFFlipImageHorizontal:alias");
}

af|panelTabbed::tabs af|panelTabbed::tab-text-link
{
   display:inline-block;
   overflow:hidden;
   text-overflow: ellipsis;
   width: 100px;
   height: 19px;
   vertical-align: middle;
   padding: 13px 8px 8px 0px;
}

af|panelTabbed::tabs:iconified af|panelTabbed::tab-text-link
{
   display:none;
}

/* We apply styles only to the panelTabbed positioned vertically
   so that these styles will not be cascaded to nested panelTabbed */
af|panelTabbed::tabs:end-tabs ~ af|panelTabbed::content > af|panelTabbed::body:vertical,
af|panelTabbed::tabs:right-tabs ~ af|panelTabbed::content > af|panelTabbed::body:vertical,
af|panelTabbed::tabs:start-tabs ~ af|panelTabbed::content > af|panelTabbed::body:vertical:rtl,
af|panelDrawer:start:iconified af|panelDrawer::body,
af|panelDrawer:left:iconified af|panelDrawer::body,
af|panelDrawer:end:iconified af|panelDrawer::body:rtl
{
  margin-right: -1px;
}

af|panelTabbed::tabs:start-tabs ~ af|panelTabbed::content > af|panelTabbed::body:vertical,
af|panelTabbed::tabs:left-tabs ~ af|panelTabbed::content > af|panelTabbed::body:vertical,
af|panelTabbed::tabs:end-tabs ~ af|panelTabbed::content > af|panelTabbed::body:vertical:rtl,
af|panelDrawer:end:iconified af|panelDrawer::body,
af|panelDrawer:right:iconified af|panelDrawer::body,
af|panelDrawer:start:iconified af|panelDrawer::body:rtl
{
  margin-left: -1px;
}

af|panelDrawer {
  position: relative;
  overflow: hidden;
  -tr-open-animation-duration: 500;
  -tr-close-animation-duration: 500;
  -tr-auto-dismiss: true;
  z-index: 1;
}

af|panelDrawer::body {
  position: relative;
  z-index: 1;
  overflow: auto;
  border-style: solid;
  border-color: #000000;
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
  padding:5px;
}

af|panelDrawer:end:iconified af|panelDrawer::body,
af|panelDrawer:right:iconified af|panelDrawer::body,
af|panelDrawer:start:iconified af|panelDrawer::body:rtl {
  border-width: 0px 0px 1px 1px;
  border-radius: 0px 0px 0px 3px;
}

af|panelDrawer:end:iconified:max af|panelDrawer::body,
af|panelDrawer:right:iconified:max af|panelDrawer::body,
af|panelDrawer:start:iconified:max af|panelDrawer::body:rtl {
  border-width: 0px 0px 0px 1px;
  border-radius: 0px 0px 0px 0px;
}

af|panelDrawer:start:iconified af|panelDrawer::body,
af|panelDrawer:left:iconified af|panelDrawer::body,
af|panelDrawer:end:iconified af|panelDrawer::body:rtl {
  border-width: 0px 1px 1px 0px;
  border-radius: 0px 0px 3px 0px;
}

af|panelDrawer:start:iconified:max af|panelDrawer::body,
af|panelDrawer:left:iconified:max af|panelDrawer::body,
af|panelDrawer:end:iconified:max af|panelDrawer::body:rtl {
  border-width: 0px 1px 0px 0px;
  border-radius: 0px 0px 0px 0px;
}

af|panelDrawer:end:iconified:float af|panelDrawer::body,
af|panelDrawer:right:iconified:float af|panelDrawer::body,
af|panelDrawer:start:iconified:float af|panelDrawer::body:rtl  {
  box-shadow: -2px 2px 4px 1px rgba(0, 0, 0, 0.15);
}

af|panelDrawer:end:iconified:max:float af|panelDrawer::body,
af|panelDrawer:right:iconified:max:float af|panelDrawer::body,
af|panelDrawer:start:iconified:max:float af|panelDrawer::body:rtl  {
  box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.15);
}

af|panelDrawer:start:iconified:float af|panelDrawer::body,
af|panelDrawer:left:iconified:float af|panelDrawer::body,
af|panelDrawer:end:iconified:float af|panelDrawer::body:rtl {
  box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.15);
}

af|panelDrawer:start:iconified:max:float af|panelDrawer::body,
af|panelDrawer:left:iconified:max:float af|panelDrawer::body,
af|panelDrawer:end:iconified:max:float af|panelDrawer::body:rtl {
  box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.15);
}

af|panelDrawer:end:iconified:float af|panelDrawer::tab-content,
af|panelDrawer:right:iconified:float af|panelDrawer::tab-content,
af|panelDrawer:start:iconified:float af|panelDrawer::tab-content:rtl {
  box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.15);
}

af|panelDrawer:start:iconified:float af|panelDrawer::tab-content,
af|panelDrawer:left:iconified:float af|panelDrawer::tab-content,
af|panelDrawer:end:iconified:float af|panelDrawer::tab-content:rtl {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
}

af|panelDrawer:end:iconified af|panelDrawer::tabs,
af|panelDrawer:start:iconified af|panelDrawer::tabs:rtl,
af|panelDrawer:right:iconified af|panelDrawer::tabs {
  padding-left:5px;
  padding-right:0px;
}

af|panelDrawer:start:iconified af|panelDrawer::tabs,
af|panelDrawer:end:iconified af|panelDrawer::tabs:rtl,
af|panelDrawer:left:iconified af|panelDrawer::tabs {
  padding-right:5px;
  padding-left:0px;
}

af|panelDrawer:end:iconified af|panelDrawer::tabs,
af|panelDrawer:start:iconified af|panelDrawer::tabs,
af|panelDrawer:right:iconified af|panelDrawer::tabs,
af|panelDrawer:left:iconified af|panelDrawer::tabs {
  padding-top:20px;
  padding-bottom:5px;
}

af|panelDrawer:iconified af|panelDrawer::tab-content {
  background-repeat:no-repeat;
  background-position:center center;
  background-color: #D3D3D3;
  position:relative;
  border-color: #000000;
  border-style: solid;
}

af|panelTabbed::tabs:start-tabs af|panelTabbed::tab-content,
af|panelTabbed::tabs:end-tabs af|panelTabbed::tab-content,
af|panelTabbed::tabs:left-tabs af|panelTabbed::tab-content,
af|panelTabbed::tabs:right-tabs af|panelTabbed::tab-content {
  -tr-inhibit: all;
  border-color: #000000;
  border-style: solid;
  background-color: #D3D3D3;
  background-repeat:no-repeat;
  background-position:center center;
  position:relative;


  /* override panelTabbed::tab-content default styles */
  padding: 0px;
  float: none;
  line-height: normal;
}


af|panelDrawer:iconified:open af|panelDrawer::tab:selected af|panelDrawer::tab-content,
af|panelTabbed::tabs:start-tabs af|panelTabbed::tab:selected af|panelTabbed::tab-content,
af|panelTabbed::tabs:end-tabs af|panelTabbed::tab:selected af|panelTabbed::tab-content,
af|panelTabbed::tabs:left-tabs af|panelTabbed::tab:selected af|panelTabbed::tab-content,
af|panelTabbed::tabs:right-tabs af|panelTabbed::tab:selected af|panelTabbed::tab-content {
  background-color: #ffffff;
}

/* override panelTabbed::tab default styles */
af|panelTabbed::tabs:start-tabs af|panelTabbed::tab,
af|panelTabbed::tabs:end-tabs af|panelTabbed::tab,
af|panelTabbed::tabs:left-tabs af|panelTabbed::tab,
af|panelTabbed::tabs:right-tabs af|panelTabbed::tab {
  float: none;
  margin-right: 0px;
}

/* override panelTabbed::tab:rtl styles */
af|panelTabbed::tabs:start-tabs af|panelTabbed::tab:rtl,
af|panelTabbed::tabs:end-tabs af|panelTabbed::tab:rtl,
af|panelTabbed::tabs:left-tabs af|panelTabbed::tab:rtl,
af|panelTabbed::tabs:right-tabs af|panelTabbed::tab:rtl {
  float: none;
  margin-right: 0px;
  margin-left: 0px;
}

af|panelDrawer:end:iconified af|panelDrawer::tab:first af|panelDrawer::tab-content,
af|panelDrawer:right:iconified af|panelDrawer::tab:first af|panelDrawer::tab-content,
af|panelDrawer:start:iconified af|panelDrawer::tab:first af|panelDrawer::tab-content:rtl,
af|panelTabbed::tabs:start-tabs af|panelTabbed::tab:first af|panelTabbed::tab-content,
af|panelTabbed::tabs:left-tabs af|panelTabbed::tab:first af|panelTabbed::tab-content,
af|panelTabbed::tabs:end-tabs af|panelTabbed::tab:first af|panelTabbed::tab-content:rtl {
  border-width: 1px 0px 1px 1px;
}

af|panelDrawer:start:iconified af|panelDrawer::tab:first af|panelDrawer::tab-content,
af|panelDrawer:left:iconified af|panelDrawer::tab:first af|panelDrawer::tab-content,
af|panelDrawer:end:iconified af|panelDrawer::tab:first af|panelDrawer::tab-content:rtl,
af|panelTabbed::tabs:end-tabs af|panelTabbed::tab:first af|panelTabbed::tab-content,
af|panelTabbed::tabs:right-tabs af|panelTabbed::tab:first af|panelTabbed::tab-content,
af|panelTabbed::tabs:start-tabs af|panelTabbed::tab:first af|panelTabbed::tab-content:rtl {
  border-width: 1px 1px 1px 0px;
}

af|panelDrawer:end:iconified af|panelDrawer::tab af|panelDrawer::tab-content,
af|panelDrawer:right:iconified af|panelDrawer::tab af|panelDrawer::tab-content,
af|panelDrawer:start:iconified af|panelDrawer::tab af|panelDrawer::tab-content:rtl,
af|panelTabbed::tabs:start-tabs af|panelTabbed::tab af|panelTabbed::tab-content,
af|panelTabbed::tabs:left-tabs af|panelTabbed::tab af|panelTabbed::tab-content,
af|panelTabbed::tabs:end-tabs af|panelTabbed::tab af|panelTabbed::tab-content:rtl {
  border-top-right-radius:0px;
  border-top-left-radius:3px;
  border-bottom-left-radius:3px;
  border-bottom-right-radius:0px;
  border-width: 0px 0px 1px 1px;
}

af|panelDrawer:start:iconified af|panelDrawer::tab af|panelDrawer::tab-content,
af|panelDrawer:left:iconified af|panelDrawer::tab af|panelDrawer::tab-content,
af|panelDrawer:end:iconified af|panelDrawer::tab af|panelDrawer::tab-content:rtl,
af|panelTabbed::tabs:end-tabs af|panelTabbed::tab af|panelTabbed::tab-content,
af|panelTabbed::tabs:right-tabs af|panelTabbed::tab af|panelTabbed::tab-content,
af|panelTabbed::tabs:start-tabs af|panelTabbed::tab af|panelTabbed::tab-content:rtl {
  border-top-right-radius:3px;
  border-top-left-radius:0px;
  border-bottom-left-radius:0px;
  border-bottom-right-radius:3px;
  border-width: 0px 1px 1px 0px;
}

af|panelTabbed::tabs:start-tabs af|panelTabbed::tab:selected,
af|panelTabbed::tabs:end-tabs af|panelTabbed::tab:selected,
af|panelTabbed::tabs:left-tabs af|panelTabbed::tab:selected,
af|panelTabbed::tabs:right-tabs af|panelTabbed::tab:selected,
af|panelTabbed::tabs:start-tabs af|panelTabbed::tab:selected af|panelTabbed::tab-content,
af|panelTabbed::tabs:end-tabs af|panelTabbed::tab:selected af|panelTabbed::tab-content,
af|panelTabbed::tabs:left-tabs af|panelTabbed::tab:selected af|panelTabbed::tab-content,
af|panelTabbed::tabs:right-tabs af|panelTabbed::tab:selected af|panelTabbed::tab-content,
af|panelDrawer:iconified af|panelDrawer::tab:selected af|panelDrawer::tab-content {
    z-index:2;
}

af|panelDrawer:iconified af|panelDrawer::icon-style,
af|panelTabbed::tabs:start-tabs af|panelTabbed::icon-style,
af|panelTabbed::tabs:end-tabs af|panelTabbed::icon-style,
af|panelTabbed::tabs:left-tabs af|panelTabbed::icon-style,
af|panelTabbed::tabs:right-tabs af|panelTabbed::icon-style {
  height:24px;
  width:24px;
  padding: 8px;
  background-repeat:no-repeat;
  background-position:center center;
  border:none;
}

af|panelTabbed::tabs:start-tabs af|panelTabbed::icon-style,
af|panelTabbed::tabs:end-tabs af|panelTabbed::icon-style,
af|panelTabbed::tabs:left-tabs af|panelTabbed::icon-style,
af|panelTabbed::tabs:right-tabs af|panelTabbed::icon-style {
  /* override icon-style settings set elsewhere in the skin*/
  -tr-inhibit: vertical-align;
  max-height: none;
}

/* Root element of a tab */
af|panelTabbed::tab {
  -tr-inhibit: all;
  padding: 0px;
  position: relative;
  float: left;
  cursor: default;
  margin-right: 4px;
}

af|navigationPane-tabs::tab {
  padding: 0px;
  position: relative;
  float: left;
  cursor: pointer;
  margin-right: 4px;
}

/* Browsers don't handle rtl float correctly, so no margin implemented in rtl */
af|navigationPane-tabs::tab:rtl,
af|panelTabbed::tab:rtl {
  float: right;
  margin-right: 0px;
  margin-left: 10px;
}

/* Root element of a panelTabbed tab when in a selected state */
af|navigationPane-tabs::tab:selected,
af|navigationPane-tabs::tab:selected:disabled,
af|panelTabbed::tab:selected,
af|panelTabbed::tab:selected:disabled {
  z-index: 1;
}

@agent (touchScreen:none) {
  af|navigationPane-tabs::tab:selected:disabled:hover,
  af|panelTabbed::tab:selected:disabled:hover {
    z-index: 1;
  }
}

/* The elements that make up each tab */
af|navigationPane-tabs::tab-start,
af|navigationPane-tabs::tab-end,
af|navigationPane-tabs::tab-content,
af|navigationPane-tabs::tab-content-inner,
af|panelTabbed::tab-start,
af|panelTabbed::tab-end,
af|panelTabbed::tab-content,
af|panelTabbed::tab-content-inner {
  float: left;
  line-height: 1.75em;
  background-position: top;
}

/* prevent focus ring on disabled tab item */
af|panelTabbed::tab:disabled af|panelTabbed::tab-content a:focus {
  outline: none;
}

af|panelTabbed::tab-content-inner:rtl,
af|navigationPane-tabs::tab-content-inner:rtl {
  float: right;
}

af|panelTabbed::footer af|panelTabbed::tab-content {
    margin-top: 0px;
}

af|navigationPane-tabs::tab-start,
af|navigationPane-tabs::tab-end,
af|navigationPane-tabs::tab-content,
af|navigationPane-tabs::tab-content-inner,
af|panelTabbed::tab-start,
af|panelTabbed::tab-end,
af|panelTabbed::tab-content,
af|panelTabbed::tab-content-inner {
  box-sizing: border-box;
}

@agent gecko {
  af|navigationPane-tabs::tab-start,
  af|navigationPane-tabs::tab-end,
  af|navigationPane-tabs::tab-content,
  af|navigationPane-tabs::tab-content-inner,
  af|panelTabbed::tab-start,
  af|panelTabbed::tab-end,
  af|panelTabbed::tab-content,
  af|panelTabbed::tab-content-inner {
    -moz-box-sizing: border-box;
    -tr-inhibit: box-sizing;
  }
}

/* The icon inside the tab content */
af|navigationPane-tabs::icon-style,
af|panelTabbed::icon-style {
  vertical-align: middle;
  max-height: 16px;
  padding-bottom: 1px;
}
af|panelTabbed::footer af|panelTabbed::icon-style {
  padding-top: 1px;
  padding-bottom: 0px;
}

/* in simple, we use a background color. We don't want to skin a border here, as that would throw
   the peer em height setting off in some browsers (ie). */
af|panelTabbed::tab-content,
af|navigationPane-tabs::tab-content {
  background-color: #D3D3D3;
  white-space: nowrap;
}

/* The start and end sides of the tab */
af|navigationPane-tabs::tab-start,
af|navigationPane-tabs::tab-end,
af|panelTabbed::tab-start,
af|panelTabbed::tab-end {
  background-color: #D3D3D3;
  width: 4px;
}

/* Styles for text and links within the middle of each tab */
af|navigationPane-tabs::tab-link,
af|panelTabbed::tab-text-link {
  /* We use AFDefaultFont:alias here to reset the font-size from af|panelTabbed and
     af|navigationPane-tabs since the tab content needs to display text using the default size, not
     the size requried for consistent "em" unit sizing.  For more details, see the comment in
     af|panelTabbed and af|navigationPane-tabs explaining the use of font-size. */
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  text-decoration: none;
}

/* Extra leading "af|foo" here to guarantee specificity over the generic "A" definitions. */
af|navigationPane-tabs::tab af|navigationPane-tabs::tab-link,
af|panelTabbed::tab af|panelTabbed::tab-text-link {
  -tr-rule-ref: selector(".AFTextForeground:alias");
}

/* Styles for text and links within the middle of each tab when contained in a disabled tab */
af|panelTabbed::tab:disabled af|panelTabbed::tab-start,
af|panelTabbed::tab:disabled af|panelTabbed::tab-content,
af|panelTabbed::tab:disabled af|panelTabbed::tab-end,
af|navigationPane-tabs::tab:disabled af|navigationPane-tabs::tab-start,
af|navigationPane-tabs::tab:disabled af|navigationPane-tabs::tab-content,
af|navigationPane-tabs::tab:disabled af|navigationPane-tabs::tab-end,
af|navigationPane-tabs::tab:disabled af|navigationPane-tabs::tab-link {
  -tr-rule-ref: selector(".AFVeryDarkAccentForeground:alias");
  cursor: default;
}

/* Styles for text and links within the middle of each tab when contained in a selected tab */
af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-link,
af|panelTabbed::tab-text-link:selected,
af|panelSpringboard:strip af|panelSpringboard::item-text:selected {
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  list-style-image: none; /* hack for order preservation purposes*/
}

/* Styles for the link portion of the tab when in a mouse over state */
@agent (touchScreen:none) {
  af|navigationPane-tabs::tab-link:hover,
  af|panelTabbed::tab-text-link:hover {
    -tr-rule-ref: selector(".AFLinkHover:alias");
  }
}
af|panelTabbed af|panelTabbed::tab-text-link:disabled,
af|panelSpringboard af|panelSpringboard::item-text:disabled {
  color: #808080;
}

af|body:high-contrast af|panelTabbed::tab-text-link:disabled,
af|body:high-contrast af|navigationPane-tabs::tab-link:disabled,
af|body:high-contrast af|panelSpringboard::item-text:disabled {
  -tr-rule-ref: selector(".AFHighContrastTextDisabled:alias");
}

@agent (touchScreen:none) {
  /* Styles for the disabled link portion of the tab when in a mouse over state */
  af|navigationPane-tabs::tab-link:disabled:hover,
  af|panelTabbed::tab-text-link:disabled:hover {
    text-decoration: none;
  }

  /* Styles for the link portion of the tab when contained in a selected tab */
  af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-link:hover,
  af|panelTabbed::tab-text-link:selected:hover {
    text-decoration: none;
  }
}

af|navigationPane-tabs::tab:disabled af|navigationPane-tabs::tab-start,
af|navigationPane-tabs::tab:disabled af|navigationPane-tabs::tab-end {
  cursor: default;
}

/* Special styling for selected tab */
af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-start,
af|navigationPane-tabs::tab:selected:disabled af|navigationPane-tabs::tab-start,
af|panelTabbed::tab:selected af|panelTabbed::tab-start,
af|panelTabbed::tab:selected:disabled af|panelTabbed::tab-start,
af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-end,
af|navigationPane-tabs::tab:selected:disabled af|navigationPane-tabs::tab-end,
af|panelTabbed::tab:selected af|panelTabbed::tab-end,
af|panelTabbed::tab:selected:disabled af|panelTabbed::tab-end,
af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-content,
af|navigationPane-tabs::tab:selected:disabled af|navigationPane-tabs::tab-content,
af|panelTabbed::tab:selected af|panelTabbed::tab-content,
af|panelTabbed::tab:selected:disabled af|panelTabbed::tab-content {
  background-color: #C0C0C0;
}

/* The remove and remove disabled icon for all disclosed/undisclosed tabs */
af|panelTabbed::disclosed-remove-icon-style,
af|panelTabbed::undisclosed-remove-icon-style,
af|navigationPane-tabs::disclosed-remove-icon-style,
af|navigationPane-tabs::undisclosed-remove-icon-style,
af|panelTabbed::disclosed-remove-disabled-icon-style,
af|panelTabbed::undisclosed-remove-disabled-icon-style,
af|navigationPane-tabs::disclosed-remove-disabled-icon-style,
af|navigationPane-tabs::undisclosed-remove-disabled-icon-style {
  margin-left: 5px;
  padding-bottom: 1px;
  max-height: 16px;
  height: 16px;
  width: 12px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* Note: the margin/padding rtl discrepancy is because margin is not respected by ie in rtl mode */
af|panelTabbed::disclosed-remove-icon-style:rtl,
af|panelTabbed::undisclosed-remove-icon-style:rtl,
af|navigationPane-tabs::disclosed-remove-icon-style:rtl,
af|navigationPane-tabs::undisclosed-remove-icon-style:rtl,
af|panelTabbed::disclosed-remove-disabled-icon-style:rtl,
af|panelTabbed::undisclosed-remove-disabled-icon-style:rtl,
af|navigationPane-tabs::disclosed-remove-disabled-icon-style:rtl,
af|navigationPane-tabs::undisclosed-remove-disabled-icon-style:rtl {
  margin-left: 0px;
  margin-right: 2px;
}

af|panelTabbed::footer af|panelTabbed::disclosed-remove-icon-style,
af|panelTabbed::footer af|panelTabbed::undisclosed-remove-icon-style,
af|panelTabbed::footer af|panelTabbed::disclosed-remove-disabled-icon-style,
af|panelTabbed::footer af|panelTabbed::undisclosed-remove-disabled-icon-style {
  padding-top: 1px;
  padding-bottom: 0px;
}

af|panelTabbed::remove-icon-style,
af|navigationPane-tabs::remove-icon-style {
    display: inline-block;
    padding-top: 2px;
}

af|panelTabbed::footer af|panelTabbed::remove-icon-style {
  padding-top: 2px;
}

@agent webkit {
  af|panelTabbed::disclosed-remove-icon-style,
  af|panelTabbed::undisclosed-remove-icon-style,
  af|navigationPane-tabs::disclosed-remove-icon-style,
  af|navigationPane-tabs::undisclosed-remove-icon-style,
  af|panelTabbed::disclosed-remove-disabled-icon-style,
  af|panelTabbed::undisclosed-remove-disabled-icon-style,
  af|navigationPane-tabs::disclosed-remove-disabled-icon-style,
  af|navigationPane-tabs::undisclosed-remove-disabled-icon-style {
    display: inline-block;
  }
}

@agent gecko {
  af|panelTabbed::disclosed-remove-icon-style,
  af|panelTabbed::undisclosed-remove-icon-style,
  af|navigationPane-tabs::disclosed-remove-icon-style,
  af|navigationPane-tabs::undisclosed-remove-icon-style,
  af|panelTabbed::disclosed-remove-disabled-icon-style,
  af|panelTabbed::undisclosed-remove-disabled-icon-style,
  af|navigationPane-tabs::disclosed-remove-disabled-icon-style,
  af|navigationPane-tabs::undisclosed-remove-disabled-icon-style {
    display: -moz-inline-box;
  }
}

@agent gecko and (min-version: 64) {
  af|panelTabbed::disclosed-remove-icon-style,
  af|panelTabbed::undisclosed-remove-icon-style,
  af|navigationPane-tabs::disclosed-remove-icon-style,
  af|navigationPane-tabs::undisclosed-remove-icon-style,
  af|panelTabbed::disclosed-remove-disabled-icon-style,
  af|panelTabbed::undisclosed-remove-disabled-icon-style,
  af|navigationPane-tabs::disclosed-remove-disabled-icon-style,
  af|navigationPane-tabs::undisclosed-remove-disabled-icon-style {
    display: inline-block;
  }
}

@agent ie {
  af|panelTabbed::disclosed-remove-icon-style,
  af|panelTabbed::undisclosed-remove-icon-style,
  af|navigationPane-tabs::disclosed-remove-icon-style,
  af|navigationPane-tabs::undisclosed-remove-icon-style,
  af|panelTabbed::disclosed-remove-disabled-icon-style,
  af|panelTabbed::undisclosed-remove-disabled-icon-style,
  af|navigationPane-tabs::disclosed-remove-disabled-icon-style,
  af|navigationPane-tabs::undisclosed-remove-disabled-icon-style {
    display: inline-block;
  }
}

@agent edge {
  af|panelTabbed::disclosed-remove-icon-style,
  af|panelTabbed::undisclosed-remove-icon-style,
  af|navigationPane-tabs::disclosed-remove-icon-style,
  af|navigationPane-tabs::undisclosed-remove-icon-style,
  af|panelTabbed::disclosed-remove-disabled-icon-style,
  af|panelTabbed::undisclosed-remove-disabled-icon-style,
  af|navigationPane-tabs::disclosed-remove-disabled-icon-style,
  af|navigationPane-tabs::undisclosed-remove-disabled-icon-style {
    display: inline-block;
  }
}

af|panelTabbed::disclosed-remove-icon-style,
af|navigationPane-tabs::disclosed-remove-icon-style {
  -tr-rule-ref: selector(".AFTabRemoveImageDisclosed:alias");
}

af|panelTabbed::undisclosed-remove-icon-style,
af|navigationPane-tabs::undisclosed-remove-icon-style {
  -tr-rule-ref: selector(".AFTabRemoveImageUndisclosed:alias");
}

af|panelTabbed::disclosed-remove-icon-style:hover,
af|panelTabbed::undisclosed-remove-icon-style:hover,
af|navigationPane-tabs::disclosed-remove-icon-style:hover,
af|navigationPane-tabs::undisclosed-remove-icon-style:hover {
  -tr-rule-ref: selector(".AFTabRemoveImageHover:alias");
}

af|panelTabbed::disclosed-remove-icon-style:active,
af|panelTabbed::undisclosed-remove-icon-style:active,
af|navigationPane-tabs::disclosed-remove-icon-style:active,
af|navigationPane-tabs::undisclosed-remove-icon-style:active {
  -tr-rule-ref: selector(".AFTabRemoveImageActive:alias");
}

/* Nondisabled tabs with remove='disabled' show disabled remove icon and regular cursor, as they
   are selectable. */
af|panelTabbed::disclosed-remove-disabled-icon-style,
af|navigationPane-tabs::disclosed-remove-disabled-icon-style {
  -tr-rule-ref: selector(".AFTabRemoveImageDisabledDisclosed:alias");
}

af|panelTabbed::undisclosed-remove-disabled-icon-style,
af|navigationPane-tabs::undisclosed-remove-disabled-icon-style {
  -tr-rule-ref: selector(".AFTabRemoveImageDisabledUndisclosed:alias");
}

/* Disabled tabs show disabled remove icon and cursor default as not selectable. */
af|panelTabbed::disclosed-remove-icon-style:disabled,
af|panelTabbed::disclosed-remove-icon-style:active:disabled,
af|panelTabbed::undisclosed-remove-icon-style:disabled,
af|panelTabbed::undisclosed-remove-icon-style:active:disabled,
af|panelTabbed::disclosed-remove-disabled-icon-style:disabled,
af|panelTabbed::disclosed-remove-disabled-icon-style:active:disabled,
af|panelTabbed::undisclosed-remove-disabled-icon-style:disabled,
af|panelTabbed::undisclosed-remove-disabled-icon-style:active:disabled,
af|navigationPane-tabs::disclosed-remove-icon-style:disabled,
af|navigationPane-tabs::disclosed-remove-icon-style:active:disabled,
af|navigationPane-tabs::undisclosed-remove-icon-style:disabled,
af|navigationPane-tabs::undisclosed-remove-icon-style:active:disabled,
af|navigationPane-tabs::disclosed-remove-disabled-icon-style:disabled,
af|navigationPane-tabs::disclosed-remove-disabled-icon-style:active:disabled,
af|navigationPane-tabs::undisclosed-remove-disabled-icon-style:disabled,
af|navigationPane-tabs::undisclosed-remove-disabled-icon-style:active:disabled {
  -tr-rule-ref: selector(".AFTabDisabledRemoveImage:alias");
  cursor: default;
}

@agent (touchScreen:none) {
  af|panelTabbed::disclosed-remove-icon-style:hover:disabled,
  af|panelTabbed::undisclosed-remove-icon-style:hover:disabled,
  af|panelTabbed::disclosed-remove-disabled-icon-style:hover:disabled,
  af|panelTabbed::undisclosed-remove-disabled-icon-style:hover:disabled,
  af|navigationPane-tabs::disclosed-remove-icon-style:hover:disabled,
  af|navigationPane-tabs::undisclosed-remove-icon-style:hover:disabled,
  af|navigationPane-tabs::disclosed-remove-disabled-icon-style:hover:disabled,
  af|navigationPane-tabs::undisclosed-remove-disabled-icon-style:hover:disabled {
    -tr-rule-ref: selector(".AFTabDisabledRemoveImage:alias");
    cursor: default;
  }
}

/* Icon hooks for users to replace the remove icon styles with another img or text */
af|panelTabbed::disclosed-remove-icon,
af|panelTabbed::undisclosed-remove-icon,
af|navigationPane-tabs::disclosed-remove-icon,
af|navigationPane-tabs::undisclosed-remove-icon,
af|panelTabbed::remove-disabled-icon,
af|navigationPane-tabs::remove-disabled-icon {
  content: inhibit;
}

/* end of panelTabbed (and navigationPane-tabs) styles */

af|table {
  border: 1px solid #636661;
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
  overflow:hidden;
  position:relative;
  /*27.27em equals 300px for 11px font size*/
  width: 27.27em;
  height: 27.27em;
  -tr-border-left-width: 0;
  -tr-border-right-width: 1;
  -tr-padding-left-width: 2;
  -tr-padding-right-width: 2;
  -tr-detail-animation-duration: 400;
  -tr-column-scroll-animation-duration: 300;
  -tr-column-reorder-animation-duration: 600;
  -tr-hover-highlight-row: true;
}

/**
 * Bug 9825400 turn off 'tap highlighting' in webkit.
 */
@agent webkit
{
  af|table,
  af|tree,
  af|treeTable {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
}

af|table {
    -tr-navbar-max-page-links: 6;
  }

/* enable to add a div to empty table text string to apply style to it, default to false for now */
af|table {
  -tr-render-extra-div-for-empty-text: false;
}

af|table::navbar{
  /* This is so that it will show up on top of the scrollbars*/
  z-index: 1;
  background-color: #EDEEF0;
  overflow:hidden;
  position:relative
}

af|table::navbar:ltr{
  border-right: #CECECE 1px solid;
}

af|table::navbar:rtl{
  border-left: #CECECE 1px solid;
}

af|table::navbar-row-range-text{
  -tr-rule-ref: selector(".AFTableNavBarRowRangeText:alias");
}

af|table::navbar-page-container{
  -tr-rule-ref: selector(".AFTableNavBarPageContainer:alias");
}

af|table::navbar-current-page{
  -tr-rule-ref: selector(".AFTableNavBarCurrentPage:alias");
}

af|table::navbar-page-gap{
  -tr-rule-ref: selector(".AFTableNavBarPageGap:alias");
}

af|table::navbar-page-input{
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  text-decoration: none;
  text-align: left;
  width: 2em;
  padding: 1px 1px 1px 1px;
  margin: 0px 0px 0px 4px;
  text-align: center;
}

af|table::navbar-page-input-label{
  -tr-rule-ref: selector(".AFTableNavBarRowRangeText:alias");
}

af|table::navbar-page-link{
  -tr-rule-ref: selector(".AFTableNavBarPageLink:alias");
}

af|table::navbar-separator{
  -tr-rule-ref: selector(".AFTableNavBarSeparator:alias");
}

af|table::navbar-previous-page-icon-style{
  -tr-rule-ref: selector(".AFTableNavBarPreviousPageIconStyle:alias");
}

af|table::navbar-next-page-icon-style{
  -tr-rule-ref: selector(".AFTableNavBarNextPageIconStyle:alias");
}

af|table::navbar-first-page-icon-style{
  -tr-rule-ref: selector(".AFTableNavBarFirstPageIconStyle:alias");
}

af|table::navbar-last-page-icon-style{
  -tr-rule-ref: selector(".AFTableNavBarLastPageIconStyle:alias");
}

af|table::navbar-previous-page-icon-style:disabled{
  -tr-rule-ref: selector(".AFTableNavBarPreviousPageIconStyleDisabled:alias");
}

af|table::navbar-next-page-icon-style:disabled{
  -tr-rule-ref: selector(".AFTableNavBarNextPageIconStyleDisabled:alias");
}

af|table::navbar-first-page-icon-style:disabled{
  -tr-rule-ref: selector(".AFTableNavBarFirstPageIconStyleDisabled:alias");
}

af|table::navbar-last-page-icon-style:disabled{
  -tr-rule-ref: selector(".AFTableNavBarLastPageIconStyleDisabled:alias");
}

af|table::navbar-previous-page-icon-style img,
af|table::navbar-next-page-icon-style img,
af|table::navbar-first-page-icon-style img,
af|table::navbar-last-page-icon-style img {
  display: none;
}

af|body:high-contrast af|table::navbar-previous-page-icon-style img,
af|body:high-contrast af|table::navbar-next-page-icon-style img,
af|body:high-contrast af|table::navbar-first-page-icon-style img,
af|body:high-contrast af|table::navbar-last-page-icon-style img {
  display: block;
}

/* Icons for paging table navbar */
af|table::navbar-previous-page-icon,
af|table::navbar-next-page-icon:rtl {
  content: url('/afr/previouspage_ena.png');
}
af|table::navbar-next-page-icon,
af|table::navbar-previous-page-icon:rtl {
  content: url('/afr/nextpage_ena.png');
}
af|table::navbar-first-page-icon,
af|table::navbar-last-page-icon:rtl {
  content: url('/afr/firstpage_ena.png');
}
af|table::navbar-last-page-icon,
af|table::navbar-first-page-icon:rtl {
  content: url('/afr/lastpage_ena.png');
}
af|table::navbar-previous-page-disabled-icon,
af|table::navbar-next-page-disabled-icon:rtl {
  content: url('/afr/previouspage_dis.png');
}
af|table::navbar-next-page-disabled-icon,
af|table::navbar-previous-page-disabled-icon:rtl {
  content: url('/afr/nextpage_dis.png');
}
af|table::navbar-first-page-disabled-icon,
af|table::navbar-last-page-disabled-icon:rtl {
  content: url('/afr/firstpage_dis.png');
}
af|table::navbar-last-page-disabled-icon,
af|table::navbar-first-page-disabled-icon:rtl {
  content: url('/afr/lastpage_dis.png');
}

af|table::loadmore{
  -tr-rule-ref: selector(".AFStretchWidth:alias");
  border-top: 1px solid #D6DFE6;
  border-bottom: 1px solid #D6DFE6;
  height: 30px;
  background-color: #F9F9F9;
  position: relative;
  overflow: hidden;
}

af|table::loadmore-range-text{
  -tr-rule-ref: selector(".AFTextSecondaryColor:alias");
  font-size: 11px;
  font-family: Tahoma;
  font-weight: normal;
  color: #4F4F4F;
  padding-right: 10px;
}

af|table::loadmore-link{
  -tr-rule-ref: selector(".AFLinkColor:alias");
  height: 18px;
  font-size: 11px;
  font-family: Tahoma;
  font-weight: normal;
  color: #003286;
  text-decoration: none;
  white-space: nowrap;
  padding-right: 15px;
  padding-left: 8px;
}

/* add extra touch area for Android */
@agent (touchScreen:single) {
  af|table::loadmore-link {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
  }
}

af|table::data-body-wrapper-autohiding-scrollbar {
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
}

af|table::data-body-H-lines-autohiding-scrollbar {
  -tr-rule-ref: selector(".AFTableCellDataHGrid:alias");
}

/**
 * Do not show any color feedback on the treeTable for drop. The feedback is shown based on rowKey
 */
af|table:drop-target,
af|table::data-row:drop-target
{
  background-color:transparent;
  opacity: 1;
}

@agent ie {
  af|table:drop-target,
  af|table::data-row:drop-target{
    filter: alpha(opacity:100);
  }
}

/**
 * Set the focus ring of the table, tree, and treeTable to zero.  These component root elements are
 * focusable but this focus ring conflicts with stretching and can introduce extra dimension to the
 * element if used in a flowing layout in some browsers like Firefox 2.
 */
af|table,
af|tree,
af|treeTable,
af|listView{
  outline-width: 0px;
}

/**
 * Drop feedback shown when the entire table is drop target.
 * data-body psuedo element is private
 */
af|table::data-body:drop-target
{
  background-color:#dce3eb;
}

af|accTable {
  border: 1px solid #636661;
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
  overflow:auto;
  position:relative;
  /*27.27em equals 300px for 11px font size*/
  width: 27.27em;
  height: 27.27em;
  -tr-border-left-width: 0;
  -tr-border-right-width: 1;
  -tr-padding-left-width: 2;
  -tr-padding-right-width: 2;
}

af|accTree {
  border: 1px solid #636661;
  overflow:auto;
  position:relative;
  /*27.27em equals 300px for 11px font size*/
  width: 27.27em;
  height: 27.27em;
  margin: 0px;
  padding: 0px;
}

/*
 * Printable table: turn off width, height and overflow.  This
 * should perhaps be an @media selector, but then it would
 * not show up as expected during viewing of the printable page,
 * and skinning doesn't yet support @media!
 */
af|table:printable,
af|tree:printable,
af|treeTable:printable {
  width: auto;
  height: auto;
}
@agent email
{
  af|table {
    font-size: 11px;
    width: auto;
    height: auto;
    overflow: auto;
  }

  af|table af|column::column-header-cell-content {
    font-size: 11px;
  }
}
/* the table with the rows/columns of data. keep private for now */
af|table::data-table {
  /*cursor: default;*/
}

af|table::column-resize-indicator {
  width:0px;
  border-right: 2px dashed #979991;
}

/* Style used for empty text */
af|table::empty-text {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  color: #000000;
  background-color: #F8F9FC;
  font-size: 11px;
  font-weight: normal;
  padding: 2px 3px 2px 3px;
}

/* Style used for record range in printable pages */
af|table::record-range-footer {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTableCellHeaderBorder:alias");
  -tr-rule-ref: selector(".AFTableCellHeaderBackground:alias");
  width: 100%;
}
/*  This is where they change the padding-left/padding-right if they
change -tr-padding-left-width and -tr-padding-right-width in af|table. */
af|table::disclosed-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image: url("/afr/disclosure_expanded.png");
  background-position: top;
  display:block;
  height:9px;
  padding-right:0px;
  margin: 0px;
}

af|table::undisclosed-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/disclosure_collapsed.png");
  background-position: top;
  display:block;
  height:9px;
  padding-right:0px;
  margin: 0px;
}

af|table::disclosed-icon-style img,
af|table::undisclosed-icon-style img {
  display: none;
}

af|body:high-contrast af|table::disclosed-icon-style img,
af|body:high-contrast af|table::undisclosed-icon-style img {
  display: block;
}

af|table::detail-area-cell {
  -tr-rule-ref: selector(".AFTableCellDataHGrid:alias");
  background-image:url("/afr/detail_box_top.png");
  background-color:#DCE2EC;
  background-position: top;
  background-repeat: repeat-x;
  padding: 5px;
  padding-top: 12px;
}

.AFTableCellPadding:alias {
  /* !important - must match the skin properties defined in af|table:
    -tr-padding-left-width, -tr-padding-right-width */
  padding-top:1px;
  padding-bottom:1px;
  padding-left:2px;
  padding-right:2px;
}

.AFTableCellHeaderBorder:alias {
  /* !important - must match the skin properties defined in af|table:
    -tr-border-left-width, -tr-border-right-width */
  border-right: 1px solid #979991;
  border-bottom: 1px solid #979991;
}

.AFTableCellHeaderBorder:alias:rtl {
  /* !important - must match the skin properties defined in af|table:
    -tr-border-left-width, -tr-border-right-width */
  border-left: 1px solid #979991;
  border-right:none;
}

.AFTableCellFooterBorder:alias {
  /* !important - must match the skin properties defined in af|table:
    -tr-border-left-width, -tr-border-right-width */
  border-right: 1px solid #979991;
  border-bottom: 1px solid #979991;

  border-top: 1px solid #325087;
}

.AFTableCellFooterBorder:alias:rtl {
  /* !important - must match the skin properties defined in af|table:
    -tr-border-left-width, -tr-border-right-width */
  border-left: 1px solid #979991;
  border-right:none;

  border-top: 1px solid #325087;
}


.AFTableCellHeaderBackground:alias {
  background-color:#E2E3D7;
}

.AFTableCellFooterBackground:alias {
  background-color:#EBEAD5;
}

.AFTableNavBarRowRangeText:alias {
  color: #585955;
  vertical-align: middle;
  white-space: nowrap;
  padding-left: 4px;
}

.AFTableNavBarPageContainer:alias{
  padding: 0px 5px 0px 5px;
  vertical-align: middle;
}

.AFTableNavBarCurrentPage:alias {
  border: 1px solid #000000;
  margin: 0px 4px 0px 4px;
  text-align:center;
  -tr-rule-ref: selector(".AFDefaultFont:alias");
}

.AFTableNavBarPageGap:alias {
  padding: 0px 4px 0px 4px;
  text-align:center;
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  cursor: default;
}

.AFTableNavBarPageLink:alias {
  -tr-rule-ref: selector(".AFLinkForeground:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  text-decoration: none;
  text-align:center;
  padding: 0px 4px 0px 4px;
}

.AFTableNavBarSeparator:alias {
  -tr-rule-ref: selector(".AFBarSeparator:alias");
  vertical-align: middle;
  /* Increase the height of the navigation bar by increasing the height of the separator */
  height: 2.2em;
}


.AFTableNavBarPreviousPageIconStyle:alias,
.AFTableNavBarNextPageIconStyle:alias:rtl {
  width: 8px;
  height: 11px;
  background-image: url('/afr/previouspage_ena.png');
  background-repeat: no-repeat;
  background-position: center;
  display:block;
}

.AFTableNavBarNextPageIconStyle:alias,
.AFTableNavBarPreviousPageIconStyle:alias:rtl {
  width: 8px;
  height: 11px;
  background-image: url('/afr/nextpage_ena.png');
  background-repeat: no-repeat;
  background-position: center;
  display:block;
}

.AFTableNavBarFirstPageIconStyle:alias,
.AFTableNavBarLastPageIconStyle:alias:rtl {
  width: 8px;
  height: 11px;
  background-image: url('/afr/firstpage_ena.png');
  background-repeat: no-repeat;
  background-position: center;
  display:block;
}

.AFTableNavBarLastPageIconStyle:alias,
.AFTableNavBarFirstPageIconStyle:alias:rtl {
  width: 8px;
  height: 11px;
  background-image: url('/afr/lastpage_ena.png');
  background-repeat: no-repeat;
  background-position: center;
  display:block;
}

.AFTableNavBarPreviousPageIconStyleDisabled:alias,
.AFTableNavBarNextPageIconStyleDisabled:alias:rtl{
  background-image: url('/afr/previouspage_dis.png');
}

.AFTableNavBarNextPageIconStyleDisabled:alias,
.AFTableNavBarPreviousPageIconStyleDisabled:alias:rtl{
  background-image: url('/afr/nextpage_dis.png');
}

.AFTableNavBarFirstPageIconStyleDisabled:alias,
.AFTableNavBarLastPageIconStyleDisabled:alias:rtl{
  background-image: url('/afr/firstpage_dis.png');
}

.AFTableNavBarLastPageIconStyleDisabled:alias,
.AFTableNavBarFirstPageIconStyleDisabled:alias:rtl{
  background-image: url('/afr/lastpage_dis.png');
}

.AFTableNavBarCurrentPage:alias,
.AFTableNavBarPageLink:alias {
  min-width: 17px;
}

.AFTableNavBarPreviousPageIconStyle:alias,
.AFTableNavBarNextPageIconStyle:alias:rtl,
.AFTableNavBarNextPageIconStyle:alias,
.AFTableNavBarPreviousPageIconStyle:alias:rtl,
.AFTableNavBarFirstPageIconStyle:alias,
.AFTableNavBarLastPageIconStyle:alias:rtl,
.AFTableNavBarLastPageIconStyle:alias,
.AFTableNavBarFirstPageIconStyle:alias:rtl{
  width: 17px;
}

/* private - The column header and footer need to be in front of the table component */
af|column::column-header,
af|column::column-footer {
  z-index: 1;
}

/* the table(s) used for the column headers. */
af|column::column-header-table{

}

af|column::column-header:ltr {
  border-right:#CECECE 1px solid;
}

af|column::column-header:rtl {
  border-left:#CECECE 1px solid;
}

af|column::column-footer:ltr {
  border-right:#CECECE 1px solid;
}

af|column::column-footer:rtl {
  border-left:#CECECE 1px solid;
}

af|column::column-header-cell-content:sorted:ltr {
  padding-right: 35px;
}

af|column::column-header-cell-content:sorted:rtl {
  padding-left: 35px;
}

af|column::column-header-cell {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTableCellHeaderBorder:alias");
  -tr-rule-ref: selector(".AFTableCellHeaderBackground:alias");
  -tr-rule-ref: selector(".AFTableCellPadding:alias");
  cursor: url('/afr/column-select.cur'), default;
  overflow: hidden;
}

af|column::column-footer-cell {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTableCellFooterBorder:alias");
  -tr-rule-ref: selector(".AFTableCellFooterBackground:alias");
  -tr-rule-ref: selector(".AFTableCellPadding:alias");
  overflow: hidden;
}

af|column::detail-column-header-cell {
  -tr-rule-ref: selector(".AFTableCellHeaderText:alias");
  -tr-rule-ref: selector(".AFTableCellHeaderBorder:alias");
  -tr-rule-ref: selector(".AFTableCellHeaderBackground:alias");
  -tr-rule-ref: selector(".AFTableCellPadding:alias");
  overflow: hidden;
}

af|column::sort-ascending-icon-style,
af|column::sort-descending-icon-style,
af|column::sorted-ascending-icon-style,
af|column::sorted-descending-icon-style {
  width:14px;
  height:14px;
  text-decoration:none;
  display: block;
  cursor: default;
  background-repeat: no-repeat;
}

af|column::filter-clear-all-icon-style {
  width:12px;
  height:12px;
  text-decoration:none;
  display: block;
  cursor: default;
  background-repeat: no-repeat;
}

@agent ie {
  af|column::sort-ascending-icon-style,
  af|column::sort-descending-icon-style,
  af|column::sorted-ascending-icon-style,
  af|column::sorted-descending-icon-style,
  af|column::filter-clear-all-icon-style{
    display: inline-block;
  }
}

af|column::sort-ascending-icon-style {
  background-image: url("/afr/sort_asc_n.png");
}

@agent (touchScreen:none) {
  af|column::sort-ascending-icon-style:hover {
    background-image: url("/afr/sort_asc_mo.png");
  }
}

af|column::sort-ascending-icon-style:active {
  background-image: url("/afr/sort_asc_s.png");
}

af|column::sort-descending-icon-style {
  background-image: url("/afr/sort_des_n.png");
}

@agent (touchScreen:none) {
  af|column::sort-descending-icon-style:hover {
    background-image: url("/afr/sort_des_mo.png");
  }
}

af|column::sort-descending-icon-style:active {
  background-image: url("/afr/sort_des_s.png");
}

af|column::sorted-ascending-icon-style {
  background-image: url("/afr/sort_asc_s.png");
}

af|column::sorted-descending-icon-style {
  background-image: url("/afr/sort_des_s.png");
}

af|column::filter-clear-all-icon-style {
  background-image: url("/afr/clear_sm.png");
}

@agent (touchScreen:none) {
  af|column::filter-clear-all-icon-style:hover {
    background-image: url("/afr/clear_sm_ovr.png");
  }
}

af|column::filter-clear-all-icon-style:active {
  background-image: url("/afr/clear_sm_dwn.png");
}

/* Styles for overwritten sort icons
*/
af|column::sort-ascending-icon,
af|column::sorted-ascending-icon,
af|column::sort-descending-icon,
af|column::sorted-descending-icon,
af|column::filter-clear-all-icon{
  content: inhibit;
}

/* TODO We can't use :focus because the cell doesn't have true browser
focus, but the column has been selected. Can we use selected?  I think selected
is better anyway, because you can't keyboard focus to this field anyway.*/
af|column::column-header-cell:focused {
  -tr-rule-ref: selector(".AFVeryDarkAccentBackground:alias");
}

af|column::column-filter-cell {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTableCellHeaderBorder:alias");
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 1px;
  padding-bottom: 1px;
  cursor: default;
  overflow: hidden;
}

/* In safari the contents in the filter cells do not scale up to the row */
@agent webkit {
  af|column::column-filter-cell{
    height: 100%;
  }
}

af|column::column-filter-cell af|inputText::content {
  max-width: 100%;
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
}

@agent ie {
  af|column::column-filter-cell af|inputText::content {
    -ms-box-sizing: border-box;
    padding-left: 0px;
    padding-right: 2px;
    width: 90%;
  }
}

@agent webkit {
  af|column::column-filter-cell af|inputText::content {
    -webkit-box-sizing: border-box;
  }
}

@agent gecko {
  af|column::column-filter-cell af|inputText::content {
    -moz-box-sizing: border-box;
  }
}

@agent ie and (version: 7.0) {
  af|column::column-filter-cell af|inputText::content {
    -tr-inhibit: -ms-box-sizing;
    border-left-width: 0px;
    border-right-width: 0px;
    border-left-style: none;
    border-right-style: none;
    padding-left: 0px;
    padding-right: 2px;
  }
}

af|column::column-filter-cell af|inputDate::content {
  width: 75px;
}

/* The select all column header cell*/
af|column::select-all-header {
  cursor: url('/afr/select-all.cur'), default;
}

af|column::row-header-cell {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTableCellHeaderBorder:alias");
  -tr-rule-ref: selector(".AFTableCellHeaderBackground:alias");
  -tr-rule-ref: selector(".AFTableCellPadding:alias");
  cursor: url('/afr/rowselector.cur'), default;
  text-align:right;
  overflow: hidden;
}

@agent webkit {
  af|column::row-header-cell {
    cursor: url('/afr/wk-rowselector.cur'), default;
  }

  af|column::column-header-cell {
   cursor: url('/afr/wk-column-select.cur'), default;
  }
}

@agent opera {
  af|column::column-header-cell,
  af|column::row-header-cell,
  af|column::select-all-header {
    -tr-inhibit: cursor;
  }
}

af|column::row-header-cell:rtl {
  text-align:left;
  cursor: url('/afr/rowselector_rtl.cur'), default;
}
/* TODO We can't use :focus because the cell doesn't have true browser
focus, but the column has been selected. Can we use selected?  I think selected
is better anyway, because you can't keyboard focus to this field anyway.*/
af|column::row-header-cell:focused {
  -tr-rule-ref: selector(".AFVeryDarkAccentBackground :alias");
}

af|column::row-header-cell:error,
af|column::row-header-cell:fatal {
  background-image: url(/afr/error.png);
  background-position: left center;
  background-repeat: no-repeat;
  width:16px;
  height:16px;
}

af|column::row-header-cell:info {
  background-image: url(/afr/info.png);
  background-position: left center;
  background-repeat: no-repeat;
  width:16px;
  height:16px;
}


af|column::row-header-cell:confirmation {
  background-image: url(/afr/confirmation.png);;
  background-position: left center;
  background-repeat: no-repeat;
  width:16px;
  height:16px;
}

af|column::row-header-cell:warning {
  background-image: url(/afr/warning.png);
  background-position: left center;
  background-repeat: no-repeat;
  width:16px;
  height:16px;
}

af|column::detail-cell {
  -tr-rule-ref: selector(".AFTableCellHeaderBorder:alias");
  -tr-rule-ref: selector(".AFTableCellHeaderBackground:alias");
  -tr-rule-ref: selector(".AFTableCellPadding:alias");
  text-align:center;
}

af|column::data-cell {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTableCellPadding:alias");
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
  -tr-rule-ref: selector(".AFTableCellData:alias");
  overflow:hidden;
}

/* Defines what a column data cell looks like when it has a styleClass="AFSubtotal". */
af|column::data-cell.AFTableCellSubtotal {
  -tr-rule-ref: selector(".AFMediumAccentBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
}
/* for email agents we wrap outputTexts in a span with a styleclass,
so if the total is a outputText, it is losing its boldness. This
adds it back */
@agent email
{
  af|column::data-cell.AFTableCellSubtotal af|outputText {
    -tr-rule-ref: selector(".AFMediumAccentBackground:alias");
    -tr-rule-ref: selector(".AFTextForeground:alias");
    -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  }
}

af|column::banded-data-cell {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTableCellPadding:alias");
  -tr-rule-ref: selector(".AFMediumAccentBackground:alias");
  -tr-rule-ref: selector(".AFTableCellData:alias");
  overflow:hidden;
}

af|column::column-header-cell, af|column::row-header-cell,
af|column::data-cell, af|column::banded-data-cell {
  text-overflow: ellipsis;
}

af|table::data-row:selected af|column::data-cell,
af|column::data-cell:selected {
  -tr-rule-ref: selector(".AFTableCellDataSelected:alias");
}
af|body:high-contrast af|table::data-row:selected af|column::data-cell,
af|body:high-contrast af|column::data-cell:selected {
  -tr-rule-ref: selector(".AFHighContrastTableCellDataSelected:alias");
}

af|table::data-row:selected:focused af|column::data-cell{
  -tr-rule-ref: selector(".AFTableCellDataSelectedFocused:alias");
}
af|body:high-contrast af|table::data-row:selected:focused af|column::data-cell{
  -tr-rule-ref: selector(".AFHighContrastTableCellDataSelectedFocused:alias");
}

/* Row selection and column selection keys */
af|table::data-row:selected af|column::banded-data-cell,
af|column::banded-data-cell:selected {
  -tr-rule-ref: selector(".AFTableCellDataSelectedBanded:alias");
}

af|table::data-row:selected:focused af|column::banded-data-cell{
  -tr-rule-ref: selector(".AFTableCellDataSelectedBandedFocused:alias");
}

af|table::data-row:selected:inactive af|column::data-cell,
af|column::data-cell:selected:inactive {
  -tr-rule-ref: selector(".AFTableCellDataSelectedInactive:alias");
}

af|inputComboboxListOfValues::separator {
  border-top:1px solid #d4d6db;
  line-height:0px;
}

af|column::data-cell af|image,
af|column::banded-data-cell af|image,
af|column::row-header-cell af|image {
  vertical-align: middle;
}

af|column::data-cell af|inputText::content,
af|column::data-cell af|selectOneListbox::content,
af|column::data-cell af|selectManyListbox::content,
af|column::data-cell af|selectOneChoice::content,
af|column::data-cell af|chooseDate::choice-list-content,
af|column::banded-data-cell af|inputText::content,
af|column::banded-data-cell af|selectOneListbox::content,
af|column::banded-data-cell af|selectManyListbox::content,
af|column::banded-data-cell af|selectOneChoice::content,
af|column::banded-data-cell af|chooseDate::choice-list-content,
af|column::row-header-cell af|inputText::content,
af|column::row-header-cell af|selectOneListbox::content,
af|column::row-header-cell af|selectManyListbox::content,
af|column::row-header-cell af|selectOneChoice::content,
af|column::row-header-cell af|chooseDate::choice-list-content,
af|column::column-filter-cell af|selectOneChoice::content{
  margin: 0px;
  max-width: 90%;
  width: 90%;
}

af|column::data-cell af|inputText:changedIcon::content,
af|column::banded-data-cell af|inputText:changedIcon::content,
af|column::row-header-cell af|inputText:changedIcon::content{
  margin: 0px;
  max-width: 85%;
  width: 85%;
}

/* IE does something strange with the max-width for this case (per microsoft IE documentation), where if the parent
   container doesn't explicitely set a width and a percentage max-width is specified, it will actually act as if
   max-width is 0%, which is ridiculous! Setting max-width to 'none' when these components are in a panelLabelAndMessage
   fixes this issue */
@agent ie
{
 af|column::data-cell af|panelLabelAndMessage af|inputText::content,
 af|column::data-cell af|panelLabelAndMessage af|selectOneListbox::content,
 af|column::data-cell af|panelLabelAndMessage af|selectManyListbox::content,
 af|column::data-cell af|panelLabelAndMessage af|selectOneChoice::content,
 af|column::data-cell af|panelLabelAndMessage af|chooseDate::choice-list-content,
 af|column::banded-data-cell af|panelLabelAndMessage af|inputText::content,
 af|column::banded-data-cell af|panelLabelAndMessage af|selectOneListbox::content,
 af|column::banded-data-cell af|panelLabelAndMessage af|selectManyListbox::content,
 af|column::banded-data-cell af|panelLabelAndMessage af|selectOneChoice::content,
 af|column::banded-data-cell af|panelLabelAndMessage af|chooseDate::choice-list-content,
 af|column::row-header-cell af|panelLabelAndMessage af|inputText::content,
 af|column::row-header-cell af|panelLabelAndMessage af|selectOneListbox::content,
 af|column::row-header-cell af|panelLabelAndMessage af|selectManyListbox::content,
 af|column::row-header-cell af|panelLabelAndMessage af|selectOneChoice::content,
 af|column::row-header-cell af|panelLabelAndMessage af|chooseDate::choice-list-content {
  max-width: none;
 }
}
/* Override the above styles when in a panelGroupLayout because a percentage width would result in
   approximately zero effective width. */
af|column::data-cell af|panelGroupLayout af|inputText::content,
af|column::data-cell af|panelGroupLayout af|selectOneListbox::content,
af|column::data-cell af|panelGroupLayout af|selectManyListbox::content,
af|column::data-cell af|panelGroupLayout af|selectOneChoice::content,
af|column::data-cell af|panelGroupLayout af|chooseDate::choice-list-content,

af|column::banded-data-cell af|panelGroupLayout af|inputText::content,
af|column::banded-data-cell af|panelGroupLayout af|selectOneListbox::content,
af|column::banded-data-cell af|panelGroupLayout af|selectManyListbox::content,
af|column::banded-data-cell af|panelGroupLayout af|selectOneChoice::content,
af|column::banded-data-cell af|panelGroupLayout af|chooseDate::choice-list-content,

af|column::row-header-cell af|panelGroupLayout af|inputText::content,
af|column::row-header-cell af|panelGroupLayout af|selectOneListbox::content,
af|column::row-header-cell af|panelGroupLayout af|selectManyListbox::content,
af|column::row-header-cell af|panelGroupLayout af|selectOneChoice::content,
af|column::row-header-cell af|panelGroupLayout af|chooseDate::choice-list-content {
  max-width: none;
  width: auto;
}

/* selectManyChoice's content is the input element, which doesn't include the
 * width of the dropdown icon, so we need to set it a little narrower
 */
af|column::data-cell af|selectManyChoice::content,
af|column::data-cell af|inputListOfValues::content,
af|column::data-cell af|inputComboboxListOfValues::content,
af|column::banded-data-cell af|selectManyChoice::content,
af|column::banded-data-cell af|inputListOfValues::content,
af|column::banded-data-cell af|inputComboboxListOfValues::content,
af|column::row-header-cell af|selectManyChoice::content,
af|column::row-header-cell af|inputListOfValues::content,
af|column::row-header-cell af|inputComboboxListOfValues::content,
af|column::column-filter-cell af|inputListOfValues::content,
af|column::column-filter-cell af|inputComboboxListOfValues::content {
  margin: 0px;
  max-width: 77%;
  width: 77%;
}

/*
  The Webkit is added as part of the fix for Bug#35964240.
*/
@agent gecko, webkit
{
  af|column::data-cell af|inputListOfValues::content,
  af|column::banded-data-cell af|inputListOfValues::content,
  af|column::row-header-cell af|inputListOfValues::content,
  af|column::column-filter-cell af|inputListOfValues::content {
    max-width: 70%;
    width: 70%;
  }
}

af|inputNumberSpinbox:content {
  width: auto;
}

af|column::data-cell af|inputDate::content,
af|column::data-cell af|inputNumberSpinbox::content,
af|column::banded-data-cell af|inputDate::content,
af|column::banded-data-cell af|inputNumberSpinbox::content,
af|column::row-header-cell af|inputDate::content,
af|column::row-header-cell af|inputNumberSpinbox::content {
  margin: 0px;
  width: 75px;
}

/*
 * We do not want any paddings for readOnly content, the padding is provided by the cell
 */
af|column::data-cell af|inputText:read-only::content,
af|column::data-cell af|selectBooleanRadio:read-only::content,
af|column::data-cell af|selectOneListbox:read-only::content,
af|column::data-cell af|selectManyListbox:read-only::content,
af|column::data-cell af|selectOneChoice:read-only::content,
af|column::data-cell af|chooseDate:read-only::choice-list-content,
af|column::data-cell af|inputDate:read-only::content,
af|column::data-cell af|inputNumberSpinbox:read-only::content,
af|column::data-cell af|inputListOfValues:read-only::content,
af|column::data-cell af|inputComboboxListOfValues:read-only::content,
af|column::data-cell af|selectManyChoice:read-only::content,
af|column::banded-data-cell af|inputText:read-only::content,
af|column::banded-data-cell af|selectBooleanRadio:read-only::content,
af|column::banded-data-cell af|selectOneListbox:read-only::content,
af|column::banded-data-cell af|selectManyListbox:read-only::content,
af|column::banded-data-cell af|selectOneChoice:read-only::content,
af|column::banded-data-cell af|chooseDate:read-only::choice-list-content,
af|column::banded-data-cell af|inputDate:read-only::content,
af|column::banded-data-cell af|inputNumberSpinbox:read-only::content,
af|column::banded-data-cell af|inputListOfValues:read-only::content,
af|column::banded-data-cell af|inputComboboxListOfValues:read-only::content,
af|column::banded-data-cell af|selectManyChoice:read-only::content,
af|column::row-header-cell af|inputText:read-only::content,
af|column::row-header-cell af|selectBooleanRadio:read-only::content,
af|column::row-header-cell af|selectOneListbox:read-only::content,
af|column::row-header-cell af|selectManyListbox:read-only::content,
af|column::row-header-cell af|selectOneChoice:read-only::content,
af|column::row-header-cell af|chooseDate:read-only::choice-list-content,
af|column::row-header-cell af|inputDate:read-only::content,
af|column::row-header-cell af|inputNumberSpinbox:read-only::content,
af|column::row-header-cell af|inputListOfValues:read-only::content,
af|column::row-header-cell af|inputComboboxListOfValues:read-only::content,
af|column::row-header-cell af|selectManyChoice:read-only::content {
  padding: 0px;
}

/*
 * No extra padding needed between the start of table cell and the boolean checkbox.
 */
af|column::column-header af|selectBooleanCheckbox::content-input:ltr,
af|column::data-cell af|selectBooleanCheckbox::content-input:ltr,
af|column::data-cell af|selectBooleanCheckbox:read-only::content-input:ltr,
af|column::banded-data-cell af|selectBooleanCheckbox::content-input:ltr,
af|column::banded-data-cell af|selectBooleanCheckbox:read-only::content-input:ltr,
af|column::row-header-cell af|selectBooleanCheckbox::content-input:ltr,
af|column::row-header-cell af|selectBooleanCheckbox:read-only::content-input:ltr {
  padding-left: 0px;
}

af|column::column-header af|selectBooleanCheckbox::content-input:rtl,
af|column::data-cell af|selectBooleanCheckbox::content-input:rtl,
af|column::data-cell af|selectBooleanCheckbox:read-only::content-input:rtl
af|column::banded-data-cell af|selectBooleanCheckbox::content-input:rtl,
af|column::banded-data-cell af|selectBooleanCheckbox:read-only::content-input:rtl,
af|column::row-header-cell af|selectBooleanCheckbox::content-input:rtl,
af|column::row-header-cell af|selectBooleanCheckbox:read-only::content-input:rtl {
  padding-right: 0px;
}

af|column::data-cell af|selectBooleanCheckbox::icon-style,
af|column::banded-data-cell af|selectBooleanCheckbox::icon-style,
af|column::row-header-cell af|selectBooleanCheckbox::icon-style {
  margin: 0px;
  vertical-align:middle;
}

@agent gecko
{
  af|column::data-cell af|selectBooleanCheckbox::icon-style,
  af|column::banded-data-cell af|selectBooleanCheckbox::icon-style,
  af|column::row-header-cell af|selectBooleanCheckbox::icon-style {
    margin: 2px 0 1px;
  }
}
@agent webkit
{
  af|column::data-cell af|selectBooleanCheckbox::native-input,
  af|column::banded-data-cell af|selectBooleanCheckbox::native-input,
  af|column::row-header-cell af|selectBooleanCheckbox::native-input {
    margin: 1px;
  }
  af|column::data-cell af|selectBooleanCheckbox::icon-style,
  af|column::banded-data-cell af|selectBooleanCheckbox::icon-style,
  af|column::row-header-cell af|selectBooleanCheckbox::icon-style {
    margin: 1px;
  }
}

@agent ie
{
  af|column::data-cell af|selectBooleanCheckbox::icon-style,
  af|column::banded-data-cell af|selectBooleanCheckbox::icon-style,
  af|column::row-header-cell af|selectBooleanCheckbox::icon-style {
    vertical-align: baseline;
  }
  af|column::column-header af|selectBooleanCheckbox::native-input:ltr,
  af|column::data-cell af|selectBooleanCheckbox::native-input:ltr,
  af|column::banded-data-cell af|selectBooleanCheckbox::native-input:ltr,
  af|column::row-header-cell af|selectBooleanCheckbox::native-input:ltr {
    margin-left: 0px;
  }
  af|column::column-header af|selectBooleanCheckbox::native-input:rtl,
  af|column::data-cell af|selectBooleanCheckbox::native-input:rtl,
  af|column::banded-data-cell af|selectBooleanCheckbox::native-input:rtl,
  af|column::row-header-cell af|selectBooleanCheckbox::native-input:rtl {
    margin-right: 0px;
  }
}

af|table::data-row:selected:inactive af|column::banded-data-cell,
af|column::banded-data-cell:selected:inactive {
  -tr-rule-ref: selector(".AFTableCellDataSelectedBandedInactive:alias");
}
/* Keep these keys private. Instead use the aliases because they are easier to understand */
/* TODO consider taking out 'color' from the alias. */
af|table::data-row:drop-target af|column::data-cell,
af|table::data-row:drop-target af|column::banded-data-cell {
  -tr-rule-ref: selector(".AFTableCellDataDropTargetColor:alias");
}
/* Keep these keys private. Instead use the aliases because they are easier to understand */
af|table::data-table-V-lines af|column::data-cell,
af|table::data-table-V-lines af|column::banded-data-cell {
  -tr-rule-ref: selector(".AFTableCellDataVGrid:alias");
}
/* Keep these keys private. Instead use the aliases because they are easier to understand */
af|table::data-table-H-lines af|column::data-cell,
af|table::data-table-H-lines af|column::banded-data-cell {
  -tr-rule-ref: selector(".AFTableCellDataHGrid:alias");
}
/* Keep these keys private. Instead use the aliases because they are easier to understand */
af|table::data-table-VH-lines af|column::data-cell,
af|table::data-table-VH-lines af|column::banded-data-cell {
  -tr-rule-ref: selector(".AFTableCellDataVHGrid:alias");
}
/* outlook ignores all but the first selector on a dom node, and the
dom node with the VH-lines has another selector, so to get the grid we have
to do this: */
@agent email {
  af|column::data-cell,
  af|column::banded-data-cell {
    -tr-rule-ref: selector(".AFTableCellDataVHGrid:alias");
  }
}

.AFTableCellFrozenBorder:alias:ltr {
  border-right: 1px solid #9900FF;
}

.AFTableCellFrozenBorder:alias:rtl {
  border-left: 1px solid #9900FF;
}

.AFTableCellFrozenBorderToEnd:alias:ltr {
  border-left: 1px solid #9900FF;
}

.AFTableCellFrozenBorderToEnd:alias:rtl {
  border-right: 1px solid #9900FF;
}

/* keep this private, because the alias is easier */
af|column::frozen-border,
af|table::data-table af|column::frozen-border {
  -tr-rule-ref: selector(".AFTableCellFrozenBorder:alias");
}

/* for freeze column with direction to end  */
af|column::frozen-border-to-end,
af|table::data-table af|column::frozen-border-to-end {
  -tr-rule-ref: selector(".AFTableCellFrozenBorderToEnd:alias");
}

/* private - used for positioning and displaying the sort indicator*/
af|column::sort-indicator {
  position:absolute;
  right: 3px;
  top: 0px;
  vertical-align: middle;
  overflow:visible;
  cursor:default;
}

/* Since hover is not supported on the iPhone or iPod touch, we will show the indicator at all
   times.  Otherwise the user would not be able to change the sort order or tell how the data is
   being sorted.  We are altering the position from absolute to relative so that the sort buttons
   will not cover up the header text. */
@platform iphone {
  af|column::sort-indicator {
    position: relative;
  }
}

af|column::sort-indicator:rtl {
  right: auto;
  left: 3px;
}

af|table::status-message {
  -tr-rule-ref: selector(".AFDataCollectionStatusMessage:alias");
}

.AFDataCollectionStatusMessage:alias {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  background-color:InfoBackground;
  color:InfoText;
  border: 1px #333333 solid;
  padding:3px;
}

.AFColumnDropTarget {
  -tr-rule-ref: selector(".AFMediumBackground:alias");
  border: 1px solid #516790;
}

af|column::data-cell:drop-target,
af|table::data-table-V-lines af|column::data-cell:drop-target,
af|table::data-table-H-lines af|column::data-cell:drop-target,
af|table::data-table-VH-lines af|column::data-cell:drop-target,
af|column::banded-data-cell:drop-target,
af|table::data-table-V-lines af|column::banded-data-cell:drop-target,
af|table::data-table-H-lines af|column::banded-data-cell:drop-target,
af|table::data-table-VH-lines af|column::banded-data-cell:drop-target {
  -tr-rule-ref: selector(".AFTableCellDataDropTargetColor:alias");
  opacity: 1;
}

af|column::column-header-cell:drop-target{
  -tr-rule-ref: selector(".AFTableHeaderCellDataDropTargetColor:alias");
  opacity: 1;
}

@agent ie{
  af|column::data-cell:drop-target,
  af|column::banded-data-cell:drop-target,
  af|column::column-header-cell:drop-target{
    filter: alpha(opacity:100);
  }
}

/* Start of the panelCollection Style.
   The bottom border width is zeroed out because it will be provided by the internally-contained
   table, tree, treeTable, or toolbox row. */
af|panelCollection {
  position: relative;
  border: 1px solid #636661;
  border-bottom-width: 0px;
  width: 45.45em;
  height: 27.27em;
}

/* The tree doesn't normally have a border so when inside of a panelCollection, we must add one or
   else the combination would show up with a blatantly missing bottom border. */
af|panelCollection af|tree{
  border-bottom: 1px solid #636661;
}

/* Eliminate multiple borders along the edges of the panelCollection. */
af|panelCollection af|toolbox::row,
af|panelCollection af|toolbox::last-row,
af|panelCollection af|table,
af|panelCollection af|tree,
af|panelCollection af|treeTable {
  border-top: 0px solid #636661;
  border-left: 0px solid #636661;
  border-right: 0px solid #636661;
}

/* private - Since the panel collection statusbar has only text and separators, we need to size the
   separator and items so that they center */
af|panelCollection::statusbar af|toolbar::separator,
af|panelCollection::statusbar af|toolbar::item {
  height: 19px;
}

af|panelCollection::statusbar af|toolbar::body {
  min-height: 19px;
}

af|panelCollection::statusbar af|toolbox::body {
    min-height: 19px;
    background-color: aqua;
}

af|panelCollection::statusbar af|toolbox::row,
af|panelCollection::statusbar af|toolbox::last-row {
    min-height: 19px;
}

af|panelCollection::statusbar af|toolbar::item {
    height: 19px;
}

/* private */
af|panelCollection::statusbar-text-item {
  white-space: nowrap;
  color: #585955;
  overflow: hidden;
  display:block;
}

af|panelCollection::statusbar af|panelLabelAndMessage::label {
    white-space: nowrap;
    color: #585955;
    overflow: hidden;
}

/* private */
@agent ie, webkit {
  af|panelCollection::statusbar af|panelLabelAndMessage::label {
    text-overflow: ellipsis;
  }
}

/*private */
af|panelCollection::statusbar-text-item {
  text-overflow: ellipsis
}

/* private */
af|panelCollection::statusbar-count-item {
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  display:block;
}

af|panelCollection::statusbar af|messages::detail,
af|panelCollection::statusbar af|panelLabelAndMessage::content-cell,
af|panelCollection::statusbar af|outputText,
af|panelCollection::statusbar af|message::detail {
  white-space: nowrap;
  overflow: hidden;
}

/* icons */
/* The icons must be URIIcons, not contextIcons to work.
 It's because in PanelCollectionRenderer we pass the url to the commandToolbarButton.
 */
af|panelCollection::qbe-icon {
  content: url(/afr/qbe_ena.png);
  width: 16px;
  height: 16px;
}

af|panelCollection::freeze-icon {
  content: url(/afr/freeze_ena.png);
  width: 16px;
  height: 16px;
}

af|panelCollection::freeze-disabled-icon {
  content: url(/afr/freeze_dis.png);
  width: 16px;
  height: 16px;
}

af|panelCollection::maximize-icon {
  content: url(/afr/maximize_ena.png);
  width: 16px;
  height: 16px;
}

af|panelCollection::wrap-icon {
  content: url(/afr/wrap_ena.png);
  width: 16px;
  height: 16px;
}

af|panelCollection::wrap-icon:rtl {
  content: url(/afr/wrap_ena_rtl.png);
}

af|panelCollection::wrap-disabled-icon {
  content: url(/afr/wrap_dis.png);
  width: 16px;
  height: 16px;
}

af|panelCollection::wrap-disabled-icon:rtl {
  content: url(/afr/wrap_dis_rtl.png);
}

af|panelCollection::go-up-icon {
  content: url(/afr/goup_ena.png);
  width: 16px;
  height: 16px;
}

af|panelCollection::go-up-icon:rtl {
  content: url(/afr/goup_ena_rtl.png);
}

af|panelCollection::go-up-disabled-icon {
  content: url(/afr/goup_dis.png);
  width: 16px;
  height: 16px;
}

af|panelCollection::go-up-disabled-icon:rtl {
  content: url(/afr/goup_dis_rtl.png);
}

af|panelCollection::go-to-top-icon {
  content: url(/afr/gototop_ena.png);
  width: 16px;
  height: 16px;
}

af|panelCollection::go-to-top-icon:rtl {
  content: url(/afr/gototop_ena_rtl.png);
}

af|panelCollection::go-to-top-disabled-icon {
  content: url(/afr/gototop_dis.png);
  width: 16px;
  height: 16px;
}

af|panelCollection::go-to-top-disabled-icon:rtl {
  content: url(/afr/gototop_dis_rtl.png);
}

af|panelCollection::show-as-top-icon {
  content: url(/afr/showtop_ena.png);
  width: 16px;
  height: 16px;
}

af|panelCollection::show-as-top-icon:rtl {
  content: url(/afr/showtop_ena_rtl.png);
}

af|panelCollection::show-as-top-disabled-icon {
  content: url(/afr/showtop_dis.png);
  width: 16px;
  height: 16px;
}

af|panelCollection::show-as-top-disabled-icon:rtl {
  content: url(/afr/showtop_dis_rtl.png);
}

/**
 * The table/treeTable/tree layout gets messed up if placed in a align="right/center" div container.
 * So we need the appropriate text-align attribute.
 */
af|table:ltr,
af|treeTable:ltr,
af|tree:ltr{
  text-align: left;
}

af|table:rtl,
af|treeTable:rtl,
af|tree:rtl {
  text-align: right;
}

/* end of the panelCollection Style*/

/* start of menuBar styles */

af|menuBar {
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
  position: relative;
}
/* Microsoft has a bug in IE7 where relatively positioned elements need special styles to give the element "hasLayout"
   so that descendants won't periodically disappear as the user mouses around with the content. */
@agent ie and (version: 7.0) {
  af|menuBar {
    zoom: 1;
  }
}

/* The main body of the menuBar element. Contains the content, which contains all of the menuBar items that
   fit on the menuBar. To the right of the body appears the overflow-indicator, which is where the overflow
   indicator appears if needed. Note that menuBar body only renders when overflow is on. This means styling
   should not done here as it will not show up for no-overflow menuBars.
   NOTE: Toolbar/MenuBar ::body and ::content only renders when overflow is on. This means styling, especially
   padding or margins, should not be done here as it will not show up for non-overflow toolbars! */
af|menuBar::body {
  background-color: transparent;
  padding: 1px 5px;
  float: left;
  min-height: 20px;
}

.AFHideSidePadding af|menuBar::body {
  padding: 1px 0px;
}

af|menuBar::body:rtl {
  float: right;
}

/* Style on the body when the end overflow indicator is present (as indicated by the
   end-overflow pseudo-class). */
af|menuBar:end-overflow::body {
  padding-right: 16px;
}

af|menuBar:end-overflow::body:rtl {
  padding-left: 16px;
  padding-right: 5px;
}

/* Style on each item in the menuBar. */
af|menuBar::item {
  padding: 0px;
}

af|menuBar::separator {
  -tr-rule-ref: selector(".AFBarSeparator:alias");
}

/* private - menuBar item text cells are streteched when displayed in overflow */
af|menuBar::overflow-container af|menuBar::item-text-cell {
  width: 100%;
}

/* Undo assignment from trinidad base-desktop.xss. */
af|menuBar img {
  -tr-inhibit: vertical-align;
}

/*start - Style for menuBar item with menuModel implementation*/
af|menuBar::model-nav-item-text {
  color: black;
  padding-left: 5px;
  text-decoration: none;
  white-space: nowrap;
  width: auto;
}

af|menuBar::model-bar-nav-item:disabled af|menuBar::model-nav-item-text,
af|menuBar::model-inner-nav-item:disabled af|menuBar::model-nav-item-text {
  color: #8E98AF;
}

af|menuBar::model-nav-item-text:focus {
  -tr-rule-ref: selector(".AFGlobalLink:alias");
  /*outline: none;*/
  /*text-decoration: underline;*/
}

af|menuBar::model-inner-nav-item af|menuBar::model-nav-item-text {
  padding: 0px 10px 3px 7px;
}

af|menuBar::model-bar-nav-item,
af|menuBar::model-inner-nav-item {
  -tr-rule-ref: selector(".AFMenuItem:alias");
  padding: 3px 1px 1px;
  background-color: transparent;
}

af|menuBar::model-bar-nav-item {
  height: 17px;
}

af|menuBar::model-inner-nav-item {
  height: 21px;
}

af|menuBar::model-bar-nav-item:highlighted,
af|menuBar::model-bar-nav-item:depressed,
af|menuBar::model-inner-nav-item:highlighted,
af|menuBar::model-inner-nav-item:highlighted af|menu::submenu-open-indicator,
af|menuBar::model-inner-nav-item:highlighted af|commandMenuItem::menu-item-open-indicator {
  -tr-rule-ref: selector(".AFMediumBackground:alias");
  cursor: pointer;
  outline: none;
}

/*af|menuBar::model-bar-nav-item:highlighted af|menuBar::model-nav-item-text,*/
af|menuBar::model-inner-nav-item:highlighted af|menuBar::model-nav-item-text {
  -tr-rule-ref: selector(".AFGlobalLink:alias");
  text-decoration: underline;
}
/*end - Style for menuBar item with menuModel implementation*/

/* end of menuBar styles */

/* start of menu, commandMenuItem, and goMenuItem styles */

/* Base style for menu. Use -tr-visible-items to set the maximum allowed items on a pulldown.*/
af|menu {
  -tr-visible-items: 14;
  -tr-open-animation-duration: 100;
  -tr-animate: true;
}

/* Animation duration is set to zero for Firefox 2 (revision 1.8), as with large (scrolling) menus
   the popup size is sometimes miscalculated (bug 7537520). Work around problem as ff2 is sunsetting
   and problem is not present in any other supported browsers, including Firefox 3. */
@agent gecko and (version: 1.8) {
  af|menu {
    -tr-open-animation-duration: 0;
  }
}

/* Styling on a menu bar item - this could be a menu, commandMenuItem or a goMenuItem on a menu bar.
  The bar-item has 3 major sections, the 'bar-item-icon-style', the 'bar-item-text', and the
   'bar-item-open-icon-style'. Height is needed for proper size on highlight and mouse down. */
af|menu::bar-item,
af|commandMenuItem::bar-item,
af|goMenuItem::bar-item {
  height: 16px;
  padding: 2px 5px 1px 5px;
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  cursor: default;
  white-space: nowrap;
}

/* A highlighted menu bar item. The menu bar item is not only highlighted on mouseover, but also
   when its submenu is opened or when it's selected with the keyboard, so we can't just use the
   :hover state and need to use the :highlighted state instead. */
af|commandMenuItem::bar-item:highlighted,
af|goMenuItem::bar-item:highlighted,
af|menu::bar-item:highlighted {
  -tr-rule-ref: selector(".AFTextForeground:alias");
  -tr-rule-ref: selector(".AFMediumBackground:alias");
}

/* A depressed menu bar item. The menu bar item is not only depressed on mousedown, but also
   on mouseover after a menu has been opened, so we can't just use the :active state and need to
   use the :depressed state instead. */
af|commandMenuItem::bar-item:depressed,
af|goMenuItem::bar-item:depressed,
af|menu::bar-item:depressed {
  -tr-rule-ref: selector(".AFTextForeground:alias");
  -tr-rule-ref: selector(".AFMediumBackground:alias");
}

/* The part of the menu bar item where the optional user defined icon goes. */
af|menu::bar-item-icon-style,
af|commandMenuItem::bar-item-icon-style,
af|goMenuItem::bar-item-icon-style {
}

/* The text of the menu bar item. All types have the same look.
   NOTE: display block needed to prevent unwanted 'squishing' with the open icon when used in tables

         with TD width 100% (happens in toolbar with spacers) */
af|menu::bar-item-text,
af|commandMenuItem::bar-item-text,
af|goMenuItem::bar-item-text {
  -tr-rule-ref: selector(".AFMenuTextForeground:alias");
  min-height: 16px;
  display: block;
  padding: 0px 0px 0px 5px;
  white-space: nowrap;
  cursor: default;
  text-decoration: none;
}

af|menu::bar-item-text:rtl,
af|commandMenuItem::bar-item-text:rtl,
af|goMenuItem::bar-item-text:rtl {
  padding-right: 5px;
  padding-left: 0px;
}

af|menu:disabled::bar-item-text,
af|commandMenuItem:disabled::bar-item-text,
af|goMenuItem:disabled::bar-item-text {
  -tr-rule-ref: selector(".AFButtonForegroundDisabled:alias");
}

af|body:high-contrast af|menu:disabled::bar-item-text,
af|body:high-contrast af|commandMenuItem:disabled::bar-item-text,
af|body:high-contrast af|goMenuItem:disabled::bar-item-text {
  -tr-rule-ref: selector(".AFHighContrastTextDisabled:alias");
}

/* The access key for a menu bar item. */
af|menu::bar-item-access-key,
af|commandMenuItem::bar-item-access-key,
af|goMenuItem::bar-item-access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* The menu bar item's dropdown icon (down arrow). */
af|menu::bar-item-open-icon-style {
  background-position: right bottom;
  background-repeat: no-repeat;
  background-image: url("/afr/dropdown_n.png");
  width: 10px;
  height: 7px;
}

af|menu::bar-item-open-icon-style:rtl {
  background-position: left bottom;
}

af|menu:disabled::bar-item-open-icon-style {
  background-image: url("/afr/dropdown_d.png");
}

/* An icon hook for users to replace bar-item-open-icon-style with another img or text. */
af|menu::bar-item-open-icon {
  content: inhibit;
}

/* The container of the menu contents. It is placed in a popup when displayed */
af|menu::child-container {
  display: none;
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
}

/* The menu's scroll up icon. Displayed to allow scrolling up through menu items. */
af|menu::scroll-up-icon-style {
  height: 18px;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("/afr/scrollUp_n.png");
  text-align: center;
}

/* Icon hook for users to replace scroll-up-icon-style with another img or text */
af|menu::scroll-up-icon {
  content: inhibit;
}

/* The menu's scroll down icon. Displayed to allow scrolling down through menu items. */
af|menu::scroll-down-icon-style {
  height: 18px;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("/afr/scrollDown_n.png");
  text-align: center;
}

/* Icon hook for users to replace scroll-down-icon-style with another img or text */
af|menu::scroll-down-icon {
  content: inhibit;
}

/* The left icon area in the row with the scroll up/down icon */
af|menu::scroll-up-icon-style af|menu::submenu-icon-style,
af|menu::scroll-down-icon-style af|menu::submenu-icon-style {
  float: left;
  height: 16px;
}

af|menu::scroll-up-icon-style af|menu::submenu-icon-style:rtl,
af|menu::scroll-down-icon-style af|menu::submenu-icon-style:rtl {
  float: right;
}

/* CommandMenuItem, GoMenuItem, and Submenu
   Menus can contain either commandMenuItems, goMenuItems,  or child menus (called submenus). Menu
   items have 4 major sections, the icon-style (contains the optional icon attribute), the text, the
   accelerator (contains the commandMenuItem or goMenuItem's accelerator shortcut and is just an
   empty space for a submenu), and the open-indicator (contains the submenu open icon and is just an
   empty space for a commandMenuItem or goMenuItem). */
af|commandMenuItem::menu-item,
af|goMenuItem::menu-item,
af|menu::submenu {
  -tr-rule-ref: selector(".AFMenuItem:alias");
}

/* Disabled menu item */
af|commandMenuItem::menu-item:disabled,
af|goMenuItem::menu-item:disabled,
af|menu::submenu:disabled {
  -tr-rule-ref: selector(".AFMenuItemDisabled:alias");
}

/* Styling on menu items. Menu items are commandMenuItems and submenus (menus in menus). */
.AFMenuItem:alias {
  height: 18px;
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
  -tr-rule-ref: selector(".AFTextBackground:alias");
}

/* Menu text foreground color. By default menu test is same as AFTextForeground. */
.AFMenuTextForeground:alias {
  -tr-rule-ref: selector(".AFTextForeground:alias");
}

/* Disabled menu item */
.AFMenuItemDisabled:alias {
  -tr-rule-ref: selector(".AFVeryDarkAccentForeground:alias");
}

/* Menu items consist of four major parts - optional icon, text, accelerator, and the submenu open
   icon. */
af|commandMenuItem::menu-item-icon-style,
af|commandMenuItem::menu-item-text,
af|commandMenuItem::menu-item-accelerator,
af|commandMenuItem::menu-item-open-indicator,
af|goMenuItem::menu-item-icon-style,
af|goMenuItem::menu-item-text,
af|goMenuItem::menu-item-accelerator,
af|goMenuItem::menu-item-open-indicator,
af|menu::submenu-icon-style,
af|menu::submenu-text,
af|menu::submenu-accelerator,
af|menu::submenu-open-indicator {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  background-image: none;
  border-top: 1px solid -tr-property-ref(".AFLightestNeutralBackground:alias","background-color");
  border-bottom: 1px solid -tr-property-ref(".AFLightestNeutralBackground:alias","background-color");
  padding: 0px;
  cursor: default;
  text-decoration: none;
}

/* The colored left part of the menu item where the optional attribute icon goes. */
af|commandMenuItem::menu-item-icon-style,
af|goMenuItem::menu-item-icon-style,
af|menu::submenu-icon-style {
  -tr-rule-ref: selector(".AFMediumBackground:alias");
  text-align: center;
  width: 24px;
  border-top: 1px solid #C4CEE0;
  border-bottom: 1px solid #C4CEE0;
}

/* The text of the menu item */
af|commandMenuItem::menu-item-text,
af|goMenuItem::menu-item-text,
af|menu::submenu-text {
  -tr-rule-ref: selector(".AFMenuTextForeground:alias");
  padding: 0px 15px 0px 5px;
  white-space: nowrap;
}

/* Disabled menu item */
af|commandMenuItem:disabled::menu-item-text,
af|goMenuItem:disabled::menu-item-text,
af|menu:disabled::submenu-text {
  -tr-rule-ref: selector(".AFMenuItemDisabled:alias");
}

af|commandMenuItem::menu-item-text:rtl,
af|goMenuItem::menu-item-text:rtl,
af|menu::submenu-text:rtl {
  padding-right: 5px;
  padding-left: 15px;
}

/* The access key for the menu item */
af|commandMenuItem::menu-item-access-key,
af|goMenuItem::menu-item-access-key,
af|menu::submenu-access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* The accelerator for the menu item (like Ctrl+A). CommandMenuItems have accelerators, while for
   submenus this is just an empty spot. */
af|commandMenuItem::menu-item-accelerator,
af|goMenuItem::menu-item-accelerator,
af|menu::submenu-accelerator {
  padding-left: 0px;
  padding-right: 5px;
  white-space: nowrap;
}

af|commandMenuItem::menu-item-accelerator:rtl,
af|goMenuItem::menu-item-accelerator:rtl,
af|menu::submenu-accelerator:rtl {
  padding-left: 5px;
  padding-right: 0px;
}

/* The location on the menu item where a submenu open icon would go (the right arrow).
   Submenus have open icons, while for commandMenuItems this is just an empty spot. */
af|commandMenuItem::menu-item-open-indicator,
af|goMenuItem::menu-item-open-indicator,
af|menu::submenu-open-indicator {
  width: 6px;
  height: 10px;
}

/* The submenu icon that opens the nested menu (menuBar overflow is like submenu).*/
af|menu::submenu-open-icon-style,
af|menuBar::overflow-container af|menu::bar-item-open-icon-style {
  background-position: left center;
  background-repeat: no-repeat;
  background-image: url("/afr/openSubmenu_n.png");
  width: 6px;
  height: 10px;
}

af|menu::submenu-open-icon-style:rtl,
af|menuBar::overflow-container af|menu::bar-item-open-icon-style:rtl {
  background-position: right center;
  background-image: url("/afr/openSubmenu_n_rtl.png");
}

af|menu:disabled::submenu-open-icon-style,
af|menuBar::overflow-container af|menu:disabled::bar-item-open-icon-style {
  background-image: url("/afr/openSubmenu_d.png");
}

af|menu:disabled::submenu-open-icon-style:rtl,
af|menuBar::overflow-container af|menu:disabled::bar-item-open-icon-style:rtl {
  background-image: url("/afr/openSubmenu_d_rtl.png");
}

/* Icon hook for users to replace the default submenu open icon with another img or text */
af|menu::submenu-open-icon {
  content: inhibit;
}

/* When a menu item is highlighted the different parts of the item are styled. The menu item is not
   only highlighted on mouseover, but also when its submenu is opened or when it's selected with the
   keyboard, so we can't use the :hover state and use highlighted instead. */
af|commandMenuItem:highlighted::menu-item-text,
af|commandMenuItem:highlighted::menu-item-accelerator,
af|commandMenuItem:highlighted::menu-item-open-indicator,
af|goMenuItem:highlighted::menu-item-text,
af|goMenuItem:highlighted::menu-item-accelerator,
af|goMenuItem:highlighted::menu-item-open-indicator,
af|menu:highlighted::submenu-text,
af|menu:highlighted::submenu-accelerator,
af|menu:highlighted::submenu-open-indicator {
  -tr-rule-ref: selector(".AFMediumBackground:alias");
}

af|commandMenuItem:highlighted::menu-item-icon-style,
af|goMenuItem:highlighted::menu-item-icon-style,
af|menu:highlighted::submenu-icon-style {
  border-top: 1px solid -tr-property-ref(".AFLightestNeutralBackground:alias","background-color");
  border-bottom: 1px solid -tr-property-ref(".AFLightestNeutralBackground:alias","background-color");
}

/* Icon style for check type commandMenuItems (displayed in the icon part of the menu item) */
af|commandMenuItem::menu-item-check-icon-style {
  -tr-rule-ref: selector(".AFMediumBackground:alias");
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/afr/completeind_status.png");
  opacity: 0.1;
  width: 24px;
  height: 16px;
}

/* Icon style for radio type commandMenuItems (displayed in the icon part of the menu item) */
af|commandMenuItem::menu-item-radio-icon-style {
  -tr-rule-ref: selector(".AFMediumBackground:alias");
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/afr/status_bullet.png");
  width: 24px;
  height: 16px;
  opacity: 0.1;
}

/* Icon style for bar check type commandMenuItems */
af|commandMenuItem::bar-item-check-icon-style {
  background-image: url("/afr/completeind_status.png");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  opacity: 0.25;
}

/* Icon style for bar radio type commandMenuItems */
af|commandMenuItem::bar-item-radio-icon-style {
  background-image: url("/afr/status_bullet.png");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  opacity: 0.25;
}

/* Radio or check menu items have full opacity when they are checked. */
af|commandMenuItem:selected::menu-item-check-icon-style,
af|commandMenuItem:selected::menu-item-radio-icon-style,
af|commandMenuItem:selected::bar-item-check-icon-style,
af|commandMenuItem:selected::bar-item-radio-icon-style {
  opacity: 1;
}

@agent ie and (version: 8.0) {
  af|commandMenuItem::menu-item-radio-icon-style,
  af|commandMenuItem::menu-item-check-icon-style,
  af|commandMenuItem::bar-item-radio-icon-style,
  af|commandMenuItem::bar-item-check-icon-style {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  }

  af|commandMenuItem:selected::menu-item-radio-icon-style,
  af|commandMenuItem:selected::menu-item-check-icon-style {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

@agent ie and (version: 7.0) {
  af|commandMenuItem::menu-item-radio-icon-style,
  af|commandMenuItem::menu-item-check-icon-style {
    filter: alpha(opacity:10);
  }

  af|commandMenuItem:selected::menu-item-radio-icon-style,
  af|commandMenuItem:selected::menu-item-check-icon-style,
  af|commandMenuItem:selected::bar-item-radio-icon-style,
  af|commandMenuItem:selected::bar-item-check-icon-style {
    filter: alpha(opacity:100);
  }
}

/* Icon hook for users to replace the default check icon with another img or text */
af|commandMenuItem::menu-item-check-icon {
  content: inhibit;
}

/* Icon hook for users to replace the default radio icon with another img or text */
af|commandMenuItem::menu-item-radio-icon {
  content: inhibit;
}

/* Icon hook for users to replace the default bar check icon with another img or text */
af|commandMenuItem::bar-item-check-icon {
  content: inhibit;
}

/* Icon hook for users to replace the default bar radio icon with another img or text */
af|commandMenuItem::bar-item-radio-icon {
  content: inhibit;
}

/* Text for default antonym type commandMenuItems and selected antonym type commandMenuItems.
   Note that only non-selected menu-item-antonym-text-default and selected
   menu-item-antonym-text-selected are displayed. */
af|commandMenuItem::menu-item-antonym-text-default,
af|commandMenuItem:selected::menu-item-antonym-text-selected,
af|commandMenuItem::bar-item-antonym-text-default,
af|commandMenuItem:selected::bar-item-antonym-text-selected {
  display: inline;
}

/* Text for default antonym type commandMenuItems and selected antonym type commandMenuItems.
   Note that only non-selected menu-item-antonym-text-default and selected
   menu-item-antonym-text-selected are displayed. */
af|commandMenuItem::menu-item-antonym-text-selected,
af|commandMenuItem:selected::menu-item-antonym-text-default,
af|commandMenuItem::bar-item-antonym-text-selected,
af|commandMenuItem:selected::bar-item-antonym-text-default {
  display: none;
}

/* For high contrast compatibility, we include a 1px border on highlight to show selection. */
af|body:high-contrast af|commandMenuItem::menu-item-icon-style,
af|body:high-contrast af|commandMenuItem::menu-item-text,
af|body:high-contrast af|commandMenuItem::menu-item-accelerator,
af|body:high-contrast af|commandMenuItem::menu-item-open-indicator,
af|body:high-contrast af|goMenuItem::menu-item-icon-style,
af|body:high-contrast af|goMenuItem::menu-item-text,
af|body:high-contrast af|goMenuItem::menu-item-accelerator,
af|body:high-contrast af|goMenuItem::menu-item-open-indicator,
af|body:high-contrast af|menu::submenu-icon-style,
af|body:high-contrast af|menu::submenu-text,
af|body:high-contrast af|menu::submenu-accelerator,
af|body:high-contrast af|menu::submenu-open-indicator,
af|body:high-contrast af|commandMenuItem:disabled:highlighted::menu-item-icon-style,
af|body:high-contrast af|commandMenuItem:disabled:highlighted::menu-item-text,
af|body:high-contrast af|commandMenuItem:disabled:highlighted::menu-item-accelerator,
af|body:high-contrast af|commandMenuItem:disabled:highlighted::menu-item-open-indicator,
af|body:high-contrast af|goMenuItem:disabled:highlighted::menu-item-icon-style,
af|body:high-contrast af|goMenuItem:disabled:highlighted::menu-item-text,
af|body:high-contrast af|goMenuItem:disabled:highlighted::menu-item-accelerator,
af|body:high-contrast af|goMenuItem:disabled:highlighted::menu-item-open-indicator,
af|body:high-contrast af|menu:disabled:highlighted::submenu-icon-style,
af|body:high-contrast af|menu:disabled:highlighted::submenu-text,
af|body:high-contrast af|menu:disabled:highlighted::submenu-accelerator,
af|body:high-contrast af|menu:disabled:highlighted::submenu-open-indicator {
  padding-top: 1px;
  padding-bottom: 1px;
  border-top: 0px;
  border-bottom: 0px;
}

af|body:high-contrast af|commandMenuItem:highlighted::menu-item-icon-style,
af|body:high-contrast af|commandMenuItem:highlighted::menu-item-text,
af|body:high-contrast af|commandMenuItem:highlighted::menu-item-accelerator,
af|body:high-contrast af|commandMenuItem:highlighted::menu-item-open-indicator,
af|body:high-contrast af|goMenuItem:highlighted::menu-item-icon-style,
af|body:high-contrast af|goMenuItem:highlighted::menu-item-text,
af|body:high-contrast af|goMenuItem:highlighted::menu-item-accelerator,
af|body:high-contrast af|goMenuItem:highlighted::menu-item-open-indicator,
af|body:high-contrast af|menu:highlighted::submenu-icon-style,
af|body:high-contrast af|menu:highlighted::submenu-text,
af|body:high-contrast af|menu:highlighted::submenu-accelerator,
af|body:high-contrast af|menu:highlighted::submenu-open-indicator {
  padding-top: 0px;
  padding-bottom: 0px;
  border-top: 1px solid;
  border-bottom: 1px solid;
}

af|body:high-contrast af|commandMenuItem:disabled::menu-item-text,
af|body:high-contrast af|commandMenuItem:disabled::menu-item-accelerator,
af|body:high-contrast af|goMenuItem:disabled::menu-item-text,
af|body:high-contrast af|goMenuItem:disabled::menu-item-accelerator,
af|body:high-contrast af|menu:disabled::submenu-text,
af|body:high-contrast af|menu:disabled::submenu-accelerator {
  -tr-rule-ref: selector(".AFHighContrastTextDisabled:alias");
}

/* The row inside a menu that contains a separator. */
af|menu::separator-row {
  height: 7px;
}

af|menu::separator-row af|menu::item-empty-cell {
  height: 7px;
  overflow: hidden;
}

/* The seperator line. The separator stretches across most of the separator-row, but not the space
  on the left where optional icons go. */
af|menu::separator {
  height: 1px;
  -tr-rule-ref: selector(".AFDarkBackground:alias");
  margin: 2px 1px;
  overflow: hidden;
}

/* The detachable menu's header. The header will look different (contains different visible
   children) depending on it's current state, either 'detachable' (before it has been detached) or
   'detached' (after it has been detached). When 'detachable', the header shows a drag and drop grip
   handle. When 'detached', the header appears similar to a panel window header. */
af|menu::child-container af|menu::detachable-header {
  white-space: nowrap;
}

/* When detached, the header looks like a panel window header */
af|menu::child-container:detached af|menu::detachable-header {
  background-image: url("/afr/dialog-header-middle.png");
  background-position: 0px -1px;
  height: 18px;
}

/* The main (middle) section of the detachable header, used to make the title occupy 100%
   of the space between the icon and the close region. This section will contain either the
   detach-handle (when detachable) or the panelWindow title (when detached). */
af|menu::child-container af|menu::detachable-header-content-center {
  width: 100%;
}

/* On a detachable menu, this is the detach handle. */
af|menu::detach-handle {
   display: block;
   background-image: url("/afr/tearOff_bg_n.png");
   height: 8px;
   cursor: move;
}

@agent (touchScreen:none) {
  af|menu::detach-handle:hover {
     background-image: url("/afr/tearOff_bg_mo.png");
  }
}

/* Detachable menus use specialized depressed state on headers instead of active state */
af|menu::detachable-header-content-center:depressed af|menu::detach-handle {
   background-image: url("/afr/tearOff_bg_md.png");
}

/* When a detachable menu is detached the handle is not shown */
af|menu::child-container:detached af|menu::detach-handle {
  display: none;
}

/* On a detachable menu, this is the grip on the detach-handle (the three dots). */
af|menu::detach-grip {
   background-image: url("/afr/grip_n.png");
   background-repeat: no-repeat;
   background-position: center 2px;
   overflow: hidden;
   height: 8px;
}

@agent (touchScreen:none) {
  af|menu::detach-grip:hover {
     background-image: url("/afr/grip_mo.png");
  }
}

/* Detachable menus use specialized depressed state on headers instead of active state */
af|menu::detachable-header-content-center:depressed af|menu::detach-grip {
   background-image: url("/afr/grip_md.png");
}

/* When a floating menu is detached the grip is not shown */
af|menu::child-container:detached af|menu::detach-grip {
  display: none;
}

/* The title and close button on a detached menu's header. These aren't displayed until the menu
   is detached. */
af|menu::child-container af|panelWindow::close-icon-style,
af|menu::child-container af|panelWindow::pin-icon-style,
af|menu::child-container af|panelWindow::title {
  display: none;
}

/* The title that is displayed after the detachable menu is detached. */
af|menu::child-container:detached af|panelWindow::title {
  display: block;
  padding: 0px 4px 1px 4px;
  margin-bottom: 3px;
}

/* The close icon that is displayed after the detachable menu is detached. */
af|menu::child-container:detached af|panelWindow::close-icon-style,
af|menu::child-container:detached af|panelWindow::pin-icon-style {
  display: block;
  padding: 0px 2px 2px 2px;
}

/* private - Remove the dashed border from focused menu bar items and menu items. Use the
   :highlighted state for 'normal' styling customization. */
af|menu::bar-item-content:focus,
af|commandMenuItem::bar-item-content:focus,
af|goMenuItem::bar-item-content:focus,
af|menu::submenu:focus,
af|commandMenuItem::menu-item:focus,
af|goMenuItem::menu-item:focus {
  outline: none;
}

/* private - used to differentiate contents when scroll icons are present. */
af|menu::scroll-box {
  overflow: hidden;
  position: relative;
}

/* private - This is an empty content div needed to make sure the menu item parts get the right
   size. */
af|commandMenuItem::menu-item-empty-cell,
af|goMenuItem::menu-item-empty-cell,
af|menu::item-empty-cell {
  height: 18px;
}

/* private */
af|commandMenuItem::menu-item-icon-style af|commandMenuItem::menu-item-empty-cell,
af|goMenuItem::menu-item-icon-style af|goMenuItem::menu-item-empty-cell,
af|menu::submenu-icon-style af|menu::item-empty-cell {
  height: 18px;
  width: 24px;
}

/* menubar, menu, menuitem high contrast skinning */
af|body:high-contrast af|menuBar::overflow-indicator:after:ltr,
af|body:high-contrast af|toolbar::overflow-indicator:after:ltr {
  content: url("/afr/overflow_end_hc.png");
}
af|body:high-contrast af|menuBar::overflow-indicator:after:rtl,
af|body:high-contrast af|toolbar::overflow-indicator:after:rtl {
  content: url("/afr/overflow_start_hc.png");
}
af|body:high-contrast af|menu::bar-item-open-icon-style:after {
  padding: 0px 3px;
  position: relative;
  top: -5px;
  content: url("/afr/dropdown_n_hc.png");
}
af|body:high-contrast af|commandMenuItem::bar-item-radio-icon-style:after,
af|body:high-contrast af|commandMenuItem::menu-item-radio-icon-style:after {
  content: url("/afr/status_bullet.png");
}
af|body:high-contrast af|commandMenuItem::bar-item-check-icon-style:after,
af|body:high-contrast af|commandMenuItem::menu-item-check-icon-style:after {
  content: url("/afr/completeind_status.png");
}
af|body:high-contrast af|menu::scroll-up-icon-style:after {
  content: url("/afr/scrollUp_n.png");
}
af|body:high-contrast af|menu::scroll-down-icon-style:after {
  content: url("/afr/scrollDown_n.png");
}
af|body:high-contrast af|menu::submenu-open-icon-style:after:ltr {
  content: url("/afr/openSubmenu_n_hc.png");
}
af|body:high-contrast af|menu::submenu-open-icon-style:after:rtl {
  content: url("/afr/openSubmenu_n_hc_rtl.png");
}

/* end of menu and commandMenuItem styles */


/* start of popup styles */

/* Set the shadow pixel size here to control shadow size of all popups */
af|popup {
  -tr-shadow-pixel-size: 4;
  -tr-shadow-offset: 3;
  -tr-shadow-starting-black-percent: 100;
}

/* private - Popup used for menus and other menu type popups. */
.AFPopupMenuPopup {
  position: relative;
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFPopupMenuBorder:alias");
  z-index: 999;
  padding: 1px;
}

af|body:high-contrast .AFPopupMenuPopup {
   -tr-rule-ref: selector(".AFPopupMenuBorderInHighContrast:alias");
}

/* private - The content of the menu type popup. */
.AFPopupMenuContent {
  position: relative;
  z-index: 100;
}

/* end of popup styles */


/* Start of toolbox styles */

/* Base style of the toolbox. */
af|toolbox {
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* The main body of the toolbox, contains all toolbox rows. */
af|toolbox::body {
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-bottom: none;
  border-right: none;
  min-height: 20px;
}

/* A row inside the toolbox. */
af|toolbox::row,
af|toolbox::last-row {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  min-height: 20px;
  width: 100%;
}

/* A leading cell (a cell before the last cell) in a toolbox row */
af|toolbox::leading-cell {
  border-right: 1px solid black;
}

af|toolbox::leading-cell:rtl {
  border-right: none;
  border-left: 1px solid black;
}

/* The last cell in a toolbox row. When flex isn't used it stretches to use up available space */
af|toolbox::last-cell {
}

/* End of toolbox styles */


/* Start of toolbar styles (base component styles)*/

/* Base style for the toolbar. */
af|toolbar {
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
  position: relative;
}
/* Microsoft has a bug in IE7 where relatively positioned elements need special styles to give the element "hasLayout"
   so that descendants won't periodically disappear as the user mouses around with the content. */
@agent ie and (version: 7.0) {
  af|toolbar {
    zoom: 1;
  }
}

/* The main body of the toolbar element. Contains the content, which contains all of the toolbar
   items that fit on the toolbar. To the right of the body appears the overflow-indicator, which is
   where the overflow indicator appears if needed.
   NOTE: Toolbar/MenuBar ::body and ::content only renders when overflow is on. This means styling, especially
   padding or margins, should not be done here as it will not show up for non-overflow toolbars! */
af|toolbar::body {
  padding: 1px 5px;
  float: left;
  min-height: 20px;
}

af|toolbar::body:rtl {
  float: right;
}

/* Style on the body when the end overflow indicator is present (as indicated by the
   end-overflow pseudo-class). */
af|toolbar:end-overflow::body {
  padding-right: 16px;
}

af|toolbar:end-overflow::body:rtl {
  padding-left: 16px;
  padding-right: 5px;
}

/* Style on each item in the toolbar. */
af|toolbar::item {
  height: 21px;
  padding: 0px;
}

af|toolbar::overflow-indicator,
af|menuBar::overflow-indicator {
  top: 0;
  margin-top: 3px;
}

/* Style on the toolbar separator */
af|toolbar::separator {
  -tr-rule-ref: selector(".AFBarSeparator:alias");
}

/* Improve appearance of more components on the toolbar */
af|toolbar af|inputColor,
af|toolbar af|inputComboboxListOfValues,
af|toolbar af|inputDate,
af|toolbar af|inputFile,
af|toolbar af|inputListOfValues,
af|toolbar af|inputNumberSpinbox,
af|toolbar af|inputText,
af|toolbar af|selectBooleanCheckbox,
af|toolbar af|selectBooleanRadio,
af|toolbar af|selectManyChoice,
af|toolbar af|selectOneChoice,
af|toolbar af|commandImageLink,
af|toolbar af|commandLink,
af|toolbar af|goImageLink,
af|toolbar af|goLink,
af|toolbar af|link,
af|toolbar af|outputFormatted,
af|toolbar af|outputLabel,
af|toolbar af|outputText {
  margin: 0px 2px;
}

af|toolbar af|selectOneChoice::label{
  white-space: nowrap;
}
/* End of toolbar styles (base component styles) */


/* Start of nested toolbox and toolbar styles */

/* make toolbox background transparent when inside headers, panelBox */
af|panelHeader::title-table af|toolbox,
af|showDetailHeader::title-table af|toolbox,
af|query::title-table af|toolbox,
af|panelBox::toolbar af|toolbox {
  background-color: transparent;
  -tr-rule-ref: selector(".AFTextForeground:alias");
}

/* make toolbox borders transparent when inside headers, panelCollection, and panelBox.
   PanelCollection does require internal toolbox borders (dividers) so we keep original
   styling for toolbox::leading-cell and toolbox::row inside panelCollection. */
af|panelHeader::title-table af|toolbox::body,
af|panelHeader::title-table af|toolbox::row,
af|panelHeader::title-table af|toolbox::last-row,
af|panelHeader::title-table af|toolbox::leading-cell,
af|showDetailHeader::title-table af|toolbox::body,
af|showDetailHeader::title-table af|toolbox::row,
af|showDetailHeader::title-table af|toolbox::last-row,
af|showDetailHeader::title-table af|toolbox::leading-cell,
af|query::title-table af|toolbox::body,
af|query::title-table af|toolbox::row,
af|query::title-table af|toolbox::last-row,
af|query::title-table af|toolbox::leading-cell,
af|panelCollection af|toolbox::body,
af|panelBox::toolbar af|toolbox::body,
af|panelBox::toolbar af|toolbox::row,
af|panelBox::toolbar af|toolbox::last-row,
af|panelBox::toolbar af|toolbox::leading-cell {
  border: transparent;
}

af|panelHeader::title-table af|menuBar,
af|panelHeader::title-table af|toolbar,
af|showDetailHeader::title-table af|menuBar,
af|showDetailHeader::title-table af|toolbar,
af|query::title-table af|menuBar,
af|query::title-table af|toolbar,
af|panelBox::toolbar af|toolbar {
  background-color: transparent;
  -tr-rule-ref: selector(".AFTextForeground:alias");
}

/* Nested toolbars in panelAccordion and panelBox use float to get right alignment. They could
   later be updated to use a nested virtual toolbox containing a virtual group and a virtual
   leading toolbar with flex and stretchId to attain right alignment in the toolbar (like panelHeader). */
af|panelAccordion::header-toolbar af|toolbar::body {
  /* setting float to none fixes overflow for gecko */
  float: none;
}

@agent ie and (version: 7.0) {
  /* resetting float to beginning fixes it for ie */
  af|panelAccordion::header-toolbar af|toolbar::body,
  af|panelBox::toolbar af|toolbar::body {
    float: left;
  }

  /* resetting float to right fixes it for ie */
  af|panelAccordion::header-toolbar:rtl af|toolbar::body:rtl,
  af|panelBox::toolbar:rtl af|toolbar::body:rtl {
    float: right;
  }

  /* however, the overflow content still needs to be on the end */
  af|panelAccordion::header-toolbar af|toolbar::content,
  af|panelBox::toolbar af|toolbar::content {
    -tr-rule-ref: selector(".AFFloatEnd:alias");
  }
}

af|panelBox::toolbar af|toolbar,
af|panelBox::toolbar af|toolbar::body {
  -tr-rule-ref: selector(".AFFloatEnd:alias");
}

/* End of nested toolbox and toolbar styles */

/* Start of link, commandImageLink, goImageLink styles */

af|commandImageLink,
af|goImageLink,
af|link {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  white-space: nowrap;
  text-decoration: none;
  vertical-align: bottom;
}

/* Text inside the link. Expecting leading icon, so we have margin-left.*/
af|commandImageLink::text,
af|goImageLink::text,
af|link::text {
  -tr-rule-ref: selector(".AFLinkForeground:alias");
  margin-left: 3px;
}

/* Bug 14703159: anchor element doesn't take up any height resulting in shortDesc tooltip not being shown */
@agent ie and (version: 8), ie and (version: 9) {
  af|commandImageLink::text,
  af|goImageLink::text,
  af|link::text {
    display: inline-block;
  }
}

af|commandImageLink::text:rtl,
af|goImageLink::text:rtl,
af|link::text:rtl {
  margin-right: 3px;
  margin-left: 0px;
}

/* For a text-only link, no margin is desired */
af|commandImageLink:text-only::text,
af|goImageLink:text-only::text,
af|link:text-only::text {
  margin-left: 0px;
}

af|commandImageLink:text-only::text:rtl,
af|goImageLink:text-only::text:rtl,
af|link:text-only::text:rtl {
  margin-right: 0px;
}

/* For a trailing icon link, we want margin right on the text. */
af|commandImageLink:trailing::text,
af|goImageLink:trailing::text,
af|link:trailing::text {
  margin-right: 3px;
  margin-left: 0px;
}

af|commandImageLink:trailing::text:rtl,
af|goImageLink:trailing::text:rtl,
af|link:trailing::text:rtl {
  margin-right: 0px;
  margin-left: 3px;
}

af|link::context-facet,
.AFPrivateInlineBlock.af|link {
  display: inline-block;
}

@agent (touchScreen:none) {
  af|commandImageLink::text:hover,
  af|goImageLink::text:hover,
  af|link::text:hover {
    -tr-rule-ref: selector(".AFLinkHover:alias");
  }
}

af|commandImageLink::text:active,
af|goImageLink::text:active,
af|link::text:active {
  -tr-rule-ref: selector(".AFActiveLinkForeground:alias");
}

/* Visited state appears on root anchor element, but we want the text effect to be on the link's text. */
af|goImageLink:visited::text,
af|link:visited::text {
  -tr-rule-ref: selector(".AFVisitedLinkForeground:alias");
}

af|link:visited::text[href="#"] {
  -tr-rule-ref: selector(".AFLinkForeground:alias");
}

af|commandImageLink:disabled::text,
af|goImageLink:disabled::text,
af|link:disabled::text {
  -tr-rule-ref: selector(".AFLinkDisabled:alias");
}

af|body:high-contrast af|commandLink:disabled,
af|body:high-contrast af|goLink:disabled,
af|body:high-contrast af|commandImageLink:disabled,
af|body:high-contrast af|goImageLink:disabled,
af|body:high-contrast af|link:disabled {
  -tr-rule-ref: selector(".AFHighContrastTextDisabled:alias");
}

af|link:selected::text {
  font-weight: bold;
}

af|commandImageLink::access-key,
af|goImageLink::access-key,
af|link::access-key {
  -tr-rule-ref: selector(".AFLinkAccessKeyStyle:alias");
}

/* start private */
af|commandImageLink::image,
af|commandImageLink::image-hover,
af|commandImageLink::image-depressed,
af|goImageLink::image,
af|goImageLink::image-hover,
af|goImageLink::image-depressed,
af|link::image,
af|link::image-hover,
af|link::image-depressed {
  border: none;
  vertical-align: middle;
}

/* default state */
af|commandImageLink::image,
af|goImageLink::image,
af|link::image {
  display:inline;
}

/* A workaround for IE bug, in which bottom 1px of image is clipped in some use-cases.
   Users should set styleClass="AFLinkIEWorkaround" on the clipping commandImageLink*/
@agent ie {
  .AFLinkIEWorkaround af|commandImageLink::image,
  .AFLinkIEWorkaround af|commandImageLink::image-hover,
  .AFLinkIEWorkaround af|commandImageLink::image-depressed,
  .AFLinkIEWorkaround af|link::image,
  .AFLinkIEWorkaround af|link::image-hover,
  .AFLinkIEWorkaround af|link::image-depressed {
    padding-bottom: 1px;
  }
}

af|commandImageLink::image-hover,
af|commandImageLink::image-depressed,
af|goImageLink::image-hover,
af|goImageLink::image-depressed,
af|link::image-hover,
af|link::image-depressed {
  display:none;
}
/* end private */

/* End of link, commandImageLink, goImageLink styles */

/* Style Class for create Icon in LOV */
af|inputListOfValues::popup-create-icon,
af|inputComboboxListOfValues::popup-create-icon {
  content: url("/afr/new_ena.png");
}

af|inputListOfValues::popup-icon-container {
}

/* end of styles for create Icon in LOV */

/* IE > 9, context info span covers the input field and icon making it non clickable  */
af|inputComboboxListOfValues::container af|contextInfo
{
  display: inline-block;
}


/* Underline the access key for SelectOne choices */
af|selectOneChoice::access-key,
af|selectOneListbox::access-key,
af|selectOneRadio::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* Start selectOneListBox */

/* public styles the content of the selectOneListBox */
af|selectOneListbox::content {
  display:block;
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFTextBackground:alias");
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

@agent (touchScreen:none) {
  af|selectOneListbox::item {
    padding: 1px 18px 1px 1px;
  }

  af|selectOneListbox::item:rtl {
    padding: 1px 1px 1px 18px;
  }
}

@agent ie and (min-version: 8.0) {
  af|selectOneListbox::content {
    -tr-inhibit: background-color;
  }
}
/* Minimum height required in WebKit for a vertical scrollbar to appear. */
@agent webkit {
  af|selectOneListbox::content {
    min-height: 56px;
  }
}
/* Minimum width required in gecko and webkit for a vertical scrollbar to appear. */
@agent gecko, webkit {
  af|selectOneListbox::content {
    min-width: 30px;
  }
}
/* public styles the disabled content of the selectOneListBox */
af|selectOneListbox:disabled::content {
  display:block;
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFFormControlContentBackgroundDisabled:alias");
}
af|selectOneListbox:read-only::content {
  border: 0px;
  background-color: inherit;
}
/*public
  Style on the separators in the list box
  */
af|selectOneListbox::separator {
  overflow:hidden;
  margin-bottom:1px;
  cursor: default;
  height:1px;
  font-size:1px;
  line-height:1px;
  border-bottom:1px solid #979993;
}

/* Private - can be public
   Styles enabled select items in the popup
   list.
*/
af|selectOneListbox::item {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  border:1px transparent dotted;
  -tr-rule-ref: selector(".AFTextForeground:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  vertical-align:baseline;
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
  white-space:nowrap;
}
@agent ie, webkit {
  af|selectOneListbox::item {
    text-overflow: ellipsis;
  }
}
@agent ie and (version: 7.0) {
  af|selectOneListbox::item {
    cursor: default;
  }
}
/* Public
   Styles selected list items.
   If use selected state, it breaks chooseColor styles. This style is used
   when hover and selected. So it's not purly a "selected" state.
*/
af|selectOneListbox::item:active,
af|selectOneListbox::item:selected{
  -tr-rule-ref: selector(".AFMediumBackground:alias");
  -tr-rule-ref: selector(".AFActiveLinkBorder:alias");
}

@agent (touchScreen:none) {
  af|selectOneListbox::item:hover{
    -tr-rule-ref: selector(".AFMediumBackground:alias");
  }
}

/* Public
   Styles disabled select items in the
   list.
*/
af|selectOneListbox::item:disabled {
  -tr-rule-ref: selector(".AFFormControlItemBackgroundDisabled:alias");
  -tr-rule-ref: selector(".AFFormControlItemBorderDisabled:alias");
  -tr-rule-ref: selector(".AFFormControlItemForegroundDisabled:alias");
}
af|selectOneListbox::item:disabled:selected {
  -tr-rule-ref: selector(".AFMediumBackground:alias");
}

af|body:high-contrast af|selectOneListbox::item,
af|body:high-contrast af|selectOneListbox::item:disabled {
  padding:2px;
  border-width:0px;
}

@agent (touchScreen:none) {
  af|body:high-contrast af|selectOneListbox::item:disabled:hover{
    padding:2px;
    border-width:0px;
  }
}

af|body:high-contrast af|selectOneListbox::item:active,
af|body:high-contrast af|selectOneListbox::item:selected {
  border: 1px solid;
  padding:0px;
}

@agent (touchScreen:none) {
  af|body:high-contrast af|selectOneListbox::item:hover{
    border-width: 2px;
    padding:0px;
  }
}

af|body:high-contrast af|selectOneListbox::item:disabled {
  text-decoration:line-through;
}

/* End selectOneListBox */

/* Start selectManyChoice */
/** Public
  * the input field used to display the selected text
  */

@agent gecko {
  af|selectManyChoice .AFContentCell {
    padding: 3px 0px;
  }
  af|selectManyChoice .AFPanelFormLayoutContentCell {
    padding-top: 3px;
  }
}
@agent ie {
  af|selectManyChoice {
    padding-top: 2px;
  }
  af|panelFormLayout::column af|selectManyChoice {
    height: 16px;
  }
  af|selectManyChoice .AFPanelFormLayoutContentCell {
    padding-top: 5px;
  }
  af|column::data-cell af|selectManyChoice,
  af|column::banded-data-cell af|selectManyChoice,
  af|column::row-header-cell af|selectManyChoice {
    padding-top: 0px;
  }
  af|selectManyChoice:fatal .AFContentCell,
  af|selectManyChoice:error .AFContentCell,
  af|selectManyChoice:warning .AFContentCell {
    padding-top: 3px;
  }
  af|column::data-cell af|selectManyChoice::content,
  af|column::banded-data-cell af|selectManyChoice::content,
  af|column::row-header-cell af|selectManyChoice::content {
    max-width: 75%;
    width: 75%;
  }
  af|column::data-cell af|inputComboboxListOfValues::content,
  af|column::banded-data-cell af|inputComboboxListOfValues::content,
  af|column::row-header-cell af|inputComboboxListOfValues::content,
  af|column::column-filter-cell af|inputListOfValues::content,
  af|column::column-filter-cell af|inputComboboxListOfValues::content {
    width: 79%;
    -tr-inhibit: max-width;
  }
/* Solving the rendering issues for inputLOVs in a table-column in IE8 and later */
  af|column::data-cell af|inputListOfValues::content,
  af|column::banded-data-cell af|inputListOfValues::content,
  af|column::row-header-cell af|inputListOfValues::content {
    width: 70%;
  }
}
@agent ie and (version: 7.0) {
  af|column::data-cell af|inputListOfValues::content,
  af|column::data-cell af|inputListOfValues::content,
  af|column::data-cell af|inputListOfValues::content {
    max-width: 75%;
    width: 75%;
  }
}
af|selectManyChoice::content{
  border: 0px;
  -tr-rule-ref: selector(".AFFormControlContent:alias");
  width: 155px;
  padding: 0px 2px 0px 3px;
  margin: 0px;
}

af|selectOneChoice::content{
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
}

/* In Safari the select elements look disabled with BLAF+ color. So override it to safari default*/
@agent webkit {
  af|selectOneChoice::content{
    border-color: initial;
  }
}

af|selectOneChoice::compact-content{
}
/* This font-size is here so the error border looks correct in FF */
@agent gecko {
  af|selectOneChoice::compact-content {
    font-size: 8px;
  }
}
@agent ie {
  af|selectOneChoice::compact-content {
    font-size: 10px;
  }
}
/* IE hack
  IE won't change the border color on a select, so we need an extra
  border to accept the error border color
  */
@agent ie {
  af|selectOneChoice::content-border {
    border: 0px none;
    margin: 0px;
    padding: 0px;
  }
}
af|selectManyChoice:disabled::content,
af|selectOneChoice:disabled::content,
af|inputComboboxListOfValues:disabled::content {
  -tr-rule-ref: selector(".AFFormControlContentForegroundDisabled:alias");
  -tr-rule-ref: selector(".AFFormControlContentBackgroundDisabled:alias");
  cursor: default;
}
/* webkit messes with the disabled color so we will use -webkit-text-fill-color when disabled */
@agent webkit {
  af|selectManyChoice:disabled::content {
    -webkit-text-fill-color: -tr-property-ref(".AFFormControlContentForegroundDisabled:alias","color");
  }
}
af|selectManyChoice:read-only::content,
af|selectOneChoice:read-only::content {
  border: 0px none -tr-property-ref(".AFLightestNeutralBackground:alias","background-color");
  margin: 0px;
  padding: 0px;
}
af|selectManyChoice::content:focus {
  border-style: dotted;
  border-color: #003399;
  -tr-rule-ref: selector(".AFTextBackground:alias");
}
/** Private
  * This is a work around for IE not paying attention to :focus styles for 'input' elements.
  */
@agent ie {
  af|selectOneChoice::content:selected,
  af|chooseDate::choice-list-content:selected{
    border-style: dotted;
    border-color: #003399;
    padding-right: 0px;
  }
  af|selectManyChoice::content:selected{
    -tr-rule-ref: selector(".AFTextBackground:alias");
  }

  af|selectOneChoice::content:selected:rtl,
  af|chooseDate::choice-list-content:selected:rtl{
    padding-left: 0px;
  }
}
/** Public
  * Styles the selectManyChoice background of the dropdown icon
  */
af|selectManyChoice::dropdown {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  font-size: 11px;
  margin: 1px;
  vertical-align: 9.1%;
}
@agent webkit {
  af|selectManyChoice::dropdown {
    display: inline-block;
  }
}

af|selectOneChoice::dropdown,
af|chooseDate::choice-list-dropdown{
  border: 1px #000000 solid;
  font-size:13px;
  margin: 1px 1px 1px 0px;
}
af|selectOneChoice::dropdown:rtl,
af|chooseDate::choice-list-dropdown:rtl{
  margin: 1px 0px 1px 1px;
}

af|treeTable af|selectOneChoice::control,
af|table af|selectOneChoice::control {
  margin: 0px;
  max-width: 100%;
  width: 100%;
  display: inline-table;
  vertical-align: middle;
}

/** Public
  * Styles the selectManyChoice dropdown icon
  */
af|selectManyChoice::dropdown-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image: url('/afr/dropdown_n.png');
  background-position:center;
  font-size:11px;
  margin-left: 0px;
  margin-right: 0px;
  padding:1px 10px 3px 1px;
}
 af|body:high-contrast af|selectManyChoice::dropdown-icon-style:after,
 af|body:high-contrast af|inputComboboxListOfValues::dropdown-icon-style:after{
  content: url("/afr/dropdown_n.png");
}
@agent ie {
  af|selectManyChoice::dropdown-icon-style {
    display: inline-block;
  }
}
@agent webkit {
  af|selectManyChoice::dropdown-icon-style {
    display: inline-block;
    -webkit-box-sizing: border-box;
    height: 11px;
  }
}

af|chooseDate::choice-list-dropdown-icon-style{
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image: url('/afr/dropdown_n.png');
  background-position: center;
}

af|body:high-contrast af|chooseDate::choice-list-dropdown-icon-style:after{
  content: url('/afr/dropdown_n_hc.png');
}

af|selectManyChoice:disabled::dropdown-icon-style,
af|selectOneChoice:disabled::dropdown-icon-style,
af|chooseDate:disabled::choice-list-dropdown-icon-style{
  background-image: url('/afr/dropdown_d.png');
}

af|body:high-contrast af|chooseDate:disabled::choice-list-dropdown-icon-style:after{
  content: url('/afr/dropdown_d_hc.png');
}

af|selectOneChoice::dropdown-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image: url('/afr/dropdown_n.png');
  background-position:center;
  margin-left: 0px;
  margin-right: 0px;
  padding:1px 10px 3px 1px;
}

/** Public
  * Icon hook for users to replace dropdown-icon-style with another img or text
  */
af|selectManyChoice::dropdown-icon,
af|selectOneChoice::dropdown-icon,
af|chooseDate::choice-list-dropdown-icon{
  content: inhibit;
}
@agent gecko {
  af|selectOneChoice::dropdown,
  af|chooseDate::choice-list-dropdown{
    font-size: 12px;
    padding-top: 1px;
  }
  af|selectOneChoice::dropdown-icon-style,
  af|chooseDate::choice-list-dropdown-icon-style{
    font-size:12px;
    padding-right:14px;
  }
}
@agent ie {
  af|selectManyChoice::dropdown-icon-style {
    font-size: 6px;
  }
  af|selectOneChoice::control {
    vertical-align: 0%;
  }
  af|selectOneChoice::dropdown,
  af|chooseDate::choice-list-dropdown{
    vertical-align: 4%;
    margin: 1px 2px 1px 0px;
  }
  af|selectOneChoice::dropdown-icon-style,
  af|chooseDate::choice-list-dropdown-icon-style{
    font-size: 12px;
    padding-top: 1px;
    padding-right: 15px;
    margin: 0px;
  }
  af|selectOneChoice::dropdown-icon-style:rtl,
  af|chooseDate::dropdown-icon-style:rtl{
    background-position-x: 6px;
  }
}

/** Public
  * selectManyChoice label style
  */
af|selectManyChoice::label {
  -tr-rule-ref: selector(".AFLabel:alias");
}

af|selectManyChoice:disabled::label {
  -tr-rule-ref: selector(".AFLabelDisabled:alias");
}

/** Public
  * Styles the dropdown panel
  */
af|selectManyChoice::dropdown-panel,
af|selectOneChoice::dropdown-panel {
  border:0px;
  -tr-rule-ref: selector(".AFTextBackground:alias");
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  white-space: nowrap;
}

af|selectManyChoice::dropdown-busy {
  background-image:url('/afr/autosuggest_spinner.gif');
  width: 15px;
  height: 11px;
}

af|selectManyChoice::content-input {
  margin: 1px 3px 1px 1px;
}
af|selectManyChoice::content-input:rtl {
  margin: 1px 1px 1px 3px;
}

af|selectManyChoice::control {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  padding: 1px 0px 1px;
  margin: 1px 0 1px 0;
}

@agent ie {
  af|selectManyChoice::control {
    padding:0px;
  }
  af|column::data-cell af|selectManyChoice::control,
  af|column::banded-data-cell af|selectManyChoice::control,
  af|column::row-header-cell af|selectManyChoice::control {
    font-size: 14px;
  }
}
@agent webkit {
  af|selectManyChoice::control {
    display: inline-block;
  }
}

/** Private
  * style of the inline parent container
  */
af|selectOneChoice::control,
af|chooseDate::choice-list-control{
  -tr-rule-ref: selector(".AFFormControlContent:alias");
  cursor: default;
  font-size: 13px;
  padding: 0px;
  margin: 0px;
  white-space: nowrap;
}
/** Private
  * item space style
  * Used to set the width of the dropdown panel
  */
af|selectManyChoice::item-spacer,
af|selectOneChoice::item-spacer{
  visibility: hidden;
  height: 0px;
  line-height: 0px;
  padding: 0px;
  margin: 0px;
  font-size: 0px;
  overflow: hidden;
  cursor: default;
}
/** Private
  * this is the style for the container around all of the checkboxes
  * except the All checkbox, when no scrollbar is needed.
  */
af|selectManyChoice::options {
  overflow-x: hidden;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  border-width: 0px;
  margin: 0px;
  padding: 0px;
}

/** Private
  * this is the style for the container around all of the checkboxes
  * except the All checkbox, when the scrollbar IS needed.
  * -tr-item-number-threshold is the number if items when the scrollbar
  * should appear.
  */
af|selectManyChoice::options-scroll {
  overflow-y: auto;
  height: 265px;
  overflow-x: hidden;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  border-width: 0px;
  margin: 0px;
  padding: 0px;
  -tr-item-number-threshold:14;
}
/* End of selectManyChoice style classes */

af|selectOneChoice:compact-content {
}

/* Icon hook for users to replace dropdown-icon-style with another img or text */
af|selectOneChoice::dropdown-icon,
af|chooseDate::choice-list-dropdown-icon{
  content: inhibit;
}
af|selectOneChoice::compact-dropdown {
  border: 1px solid #000000;
  font-size: 5px;
}

@agent ie {
  af|selectOneChoice::compact-dropdown {
    font-size: 8px;
  }
}
@agent webkit {
  af|selectOneChoice::compact-dropdown {
    display: inline-block;
  }
}

/** public
  * Styles the selectOneChoice dropdown icon in compact mode
  */
af|selectOneChoice::compact-dropdown-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image: url('/afr/spinbox_arrow_dn.png');
  background-position: center;
  font-size: 5px;
  padding: 0px 7px 0px 0px;
}

@agent ie {
  af|selectOneChoice::compact-dropdown-icon-style {
    padding-right: 9px;
  }
}
@agent webkit {
  af|selectOneChoice::compact-dropdown-icon-style {
    display: inline-block;
    height: 5px;
  }
}

af|selectOneChoice::compact-dropdown-icon-style:disabled,
af|selectOneChoice::compact-dropdown-icon-style:disabled:active
{
  background-image:url("/afr/spinbox_arrow_dn_d.png");
}

@agent (touchScreen:none) {
  af|selectOneChoice::compact-dropdown-icon-style:disabled:hover {
    background-image:url("/afr/spinbox_arrow_dn_d.png");
  }
}

/* Icon hook for users to replace dropdown-icon-style with another img or text */
af|selectOneChoice::compact-dropdown-icon {
  content: inhibit;
}

/* Public
   Styles disabled select items in the popup
   list. Not compact specific
*/
af|selectOneChoice::item:disabled,
af|selectOneChoice::item:disabled:selected {
  -tr-rule-ref: selector(".AFFormControlContentBackgroundDisabled:alias");
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFFormControlContentForegroundDisabled:alias");
  vertical-align:baseline;
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
}

@agent (touchScreen:none) {
  af|selectOneChoice::item:disabled:hover {
    -tr-rule-ref: selector(".AFFormControlContentBackgroundDisabled:alias");
    -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
    -tr-rule-ref: selector(".AFFormControlContentForegroundDisabled:alias");
    vertical-align:baseline;
    -tr-rule-ref: selector(".AFStartTextAlign:alias");
  }
}
/* Public
   Styles enabled select items in the popup
   list. Not compact specific
*/
af|selectOneChoice::item {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  height:14px;
  padding:1px;
  border:1px transparent solid;
  background-color: transparent;
  -tr-rule-ref: selector(".AFTextForeground:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  vertical-align:baseline;
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
  white-space: nowrap;
  cursor: default;
  min-width: inherit;
}
/* Public
   Styles selected list items in the popup
   list. Compact specific for now.
   If use selected state, it breaks chooseColor styles. This style is used
   when hover and selected. So it's not purly a "selected" state.
   Using hilighted because of an IE :hover bug on mouse click.
*/
af|selectOneChoice::item:selected,
af|selectOneChoice::item:highlighted {
  height:14px;
  -tr-rule-ref: selector(".AFActiveLinkBorder:alias");
  -tr-rule-ref: selector(".AFMediumBackground:alias");
  padding:1px;
  -tr-rule-ref: selector(".AFTextForeground:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  vertical-align:baseline;
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
}

/* Public
   Styles the popup listdr
*/
af|selectOneChoice::dropdown-panel {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  padding:0px;
  margin:0px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
}
/* Public
   Styles the popup in scrollable mode. the item
   number threshold specifies how many items
   should cause the scroll bar to appear. The height
   should roughly allow 15 items in the current style
*/
af|selectOneChoice::dropdown-panel:scroll {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  padding:0px;
  margin:0px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  height:270px;
  overflow:auto;
  -tr-item-number-threshold:15;
}
@agent ie {
  af|selectOneChoice::dropdown-panel:scroll {
    height:272px;
  }
}
/*
af|selectOneChoice::text {
  border: 1px #B9B9B4 solid;
  margin: 0px;
  padding: 1px 0px 0px 2px;
  font-size: 11px;
  overflow: hidden;
}
*/
af|selectOneChoice::ptr,
af|selectOneChoice::ptd {
  margin: 0px;
  padding: 0px;
}
/* End of selectOneChoice style classes */

/* Start of popup selector styles */
/* The popup is a framework for displaying content as a popup. Other components can display popup
   using arbitrary conent as a popup selector and hence these are global skin selectors*/

/* PRIVATE: border cell without edges */
.AFPopupSelectorBorderCell:alias {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  border-top:none;
  border-bottom:none;
  border-right:none;
  border-left:none;
}

/* PRIVATE: border cell with one edge  */
.AFPopupSelectorBorderCellEdge:alias {
  -tr-rule-ref: selector(".AFPopupSelectorBorderCell:alias");
  border-width: 1px;
  font-size: 1px;
}

/* PRIVATE: corner border cell with two edges */
.AFPopupSelectorBorderCellCorner:alias {
  -tr-rule-ref: selector(".AFPopupSelectorBorderCellEdge:alias");
  width:4px;
  height:4px;
}

/* The root inline popup selector is only used to override the :focus dynamic pseudo-class.
The focus pseudo class is not supported on all browsers.  Mozilla draws an outline around block elements
that have focus.  This happens when there is nothing in the popup???s content to assign focus so the outer
div is given a tabIndex and forced focus.
*/
.AFPopupSelector {
  background-color: transparent;
  -tr-open-animation-duration: 200;
  -tr-animate: true;
}

/* PRIVATE: The inputComboboxListOfValues popup contains a table and this table should not have a
   visible border or else you'd get multiple borders shown.  The 100% width is so that the table
   fits snugly inside of the popup. */
af|inputComboboxListOfValues::dropdown-table {
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  outline-width: 0px;
}

af|inputComboboxListOfValues::commandLink {
  padding-left: 2px;
}

/* PRIVATE: root selector applied to the input combo list of values popup.  Gives the popup square corners */
af|inputComboboxListOfValues::dropdown-popup {
  position: absolute;
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFPopupMenuBorder:alias");
  padding: 0px;
}

af|body:high-contrast af|inputComboboxListOfValues::dropdown-popup {
  -tr-rule-ref: selector(".AFPopupMenuBorderInHighContrast:alias");
}

/* PRIVATE: applied to the content of the input combo list of values popup. */
af|inputComboboxListOfValues::dropdown-popup-content {
  position: relative;
}

/* top-center border */
.AFPopupSelectorHeader {
  -tr-rule-ref: selector(".AFPopupSelectorBorderCellEdge:alias");
  border-top:1px solid #336699;
}

/* top-start border */
.AFPopupSelectorHeaderStart {
  -tr-rule-ref: selector(".AFPopupSelectorBorderCellCorner:alias");
  border-top: 1px solid #336699;
}

/* top-start border LTR */
.AFPopupSelectorHeaderStart:ltr {
  border-left: 1px solid #336699;
}

/* top-start border RTL */
.AFPopupSelectorHeaderStart:rtl {
  border-right: 1px solid #336699;
}

/* top-end border */
.AFPopupSelectorHeaderEnd {
  -tr-rule-ref: selector(".AFPopupSelectorBorderCellCorner:alias");
  border-top: 1px solid #336699;
}

/* top-end border LTR */
.AFPopupSelectorHeaderEnd:ltr {
  border-right: 1px solid #336699;
}

/* top-end border RTL */
.AFPopupSelectorHeaderEnd:rtl {
  border-left:1px solid #336699;
}

/* middle-center */
.AFPopupSelectorContent {
  -tr-rule-ref: selector(".AFPopupSelectorBorderCell:alias");
  border-width: 0px;
}

/* middle-start border */
.AFPopupSelectorContentStart {
  -tr-rule-ref: selector(".AFPopupSelectorBorderCellEdge:alias");
}

/* middle-start border LTR */
.AFPopupSelectorContentStart:ltr {
  border-left: 1px solid #336699;
}

/* middle-start border RTL */
.AFPopupSelectorContentStart:rtl {
  border-right: 1px solid #336699;
}

/* middle-end border */
.AFPopupSelectorContentEnd {
  -tr-rule-ref: selector(".AFPopupSelectorBorderCellEdge:alias");
}

/* middle-end border LTR */
.AFPopupSelectorContentEnd:ltr {
  border-right: 1px solid #336699;
}

/* middle-end border RTL */
.AFPopupSelectorContentEnd:rtl {
  border-left:1px solid #336699;
}

/* bottom center border */
.AFPopupSelectorFooter {
  -tr-rule-ref: selector(".AFPopupSelectorBorderCellEdge:alias");
  border-bottom: 1px solid #336699;
}

/* bottom-start border */
.AFPopupSelectorFooterStart {
  -tr-rule-ref: selector(".AFPopupSelectorBorderCellCorner:alias");
  border-bottom: 1px solid #336699;
}

/* bottom-start border LTR */
.AFPopupSelectorFooterStart:ltr {
  border-left: 1px solid #336699;
}

/* bottom-start border RTL */
.AFPopupSelectorFooterStart:rtl {
  border-right: 1px solid #336699;
}

/* bottom-end border */
.AFPopupSelectorFooterEnd {
 -tr-rule-ref: selector(".AFPopupSelectorBorderCellCorner:alias");
  border-bottom: 1px solid #336699;
}

/* bottom-end border LTR */
.AFPopupSelectorFooterEnd:ltr {
  border-right: 1px solid #336699;
}

/* bottom-end border RTL */
.AFPopupSelectorFooterEnd:rtl {
  border-left: 1px solid #336699;
}

/* End popup Selector styles */


af|document {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
}

af|document:printable {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
  background-image: none;
}

/* This lists all the versions of IE we support, so dropping all the conditions
   and just say ie */
@agent ie {
  af|document:printable {
    padding-top: 1px;
  }
}

af|document:maximized {
  position: absolute;
  padding: 0px;
  margin: 0px;
  border-style: none;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

/* This lists all the versions of IE we support, so dropping all the conditions
   and just say ie */
@agent ie {
  af|document:maximized:printable {
    padding-top: 1px;
  }
}

/* IE9 prints only 1 page if the body is stretched and if the root container is
   stretched. So turning off position:absolute on these so that multiple pages
   can be printed in IE9.
   This lists all the versions of IE we support, so dropping all the conditions
   and just say ie, as fixing known issue for IE10 as well */
@agent ie {
  af|document:maximized:printable {
    position: static;
  }

  af|document:maximized:printable form > div {
    /* !important is not recommended but is fine since it is used to workaround IE9 issue*/
    position: static !important;
  }
}


af|document:maximized:rtl {
  left: auto;
  right: 0px;
}

af|document::messages {
  overflow: auto;
  width: auto;
  height: auto;
}


/* Style for the skip link content rendered by af:document when
   af:skipLinkTarget is present. */
af|document::skip-link {

  /* The skip link is positioned offscreen by default and
     is explicitly moved on screen by AdfDhtmlDocumentPeer
     when it receives the focus. */
  position:absolute;
  top:-999px;

  /* Kicking the z-index up to 1 seems to sufficient to raise
     the skip link over the rest of the document content */
  z-index:1;

  /* Add a touch of style */
  -tr-rule-ref: selector(".AFTextBackground:alias");
  border:1px solid black;
  padding:2px 5px;
}
/* on Outlook, the skip-link is shown, so we need to set display:none */
@agent email {
  af|document::skip-link {
    display:none;
  }
}

/* Start of popup global tail styles */
.AFPopupTail {
  position: absolute;
  pointer-events: none;
}

.AFDialogTailSimple > .AFPopupTailTopLeft,
.AFPopupTailSimple > .AFPopupTailTopLeft {
  background-image: url("/afr/cone_tl.png");
  height: 13px;
  width: 14px;
  left: -14px;
  top: 0px;
}

.AFDialogTailSimple > .AFPopupTailTopRight,
.AFPopupTailSimple > .AFPopupTailTopRight {
  background-image: url("/afr/cone_tr.png");
  height: 13px;
  width: 14px;
  right: -14px;
  top: 0px;
}

.AFDialogTailSimple > .AFPopupTailTopCenter,
.AFPopupTailSimple > .AFPopupTailTopCenter {
  background-image: url("/afr/cone_tc.png");
  height: 14px;
  width: 17px;
  top: -14px;
}

.AFDialogTailSimple > .AFPopupTailBottomLeft,
.AFPopupTailSimple > .AFPopupTailBottomLeft {
   background-image: url("/afr/cone_bl.png");
   height: 13px;
   width: 14px;
   left: -14px;
   bottom: 0px;
}

.AFDialogTailSimple > .AFPopupTailBottomRight,
.AFPopupTailSimple > .AFPopupTailBottomRight {
  background-image: url("/afr/cone_br.png");
  height: 13px;
  width: 14px;
  right: -14px;
  bottom: 0px;
}

.AFDialogTailSimple > .AFPopupTailBottomCenter,
.AFPopupTailSimple > .AFPopupTailBottomCenter {
  background-image: url("/afr/cone_bc.png");
  height: 14px;
  width: 17px;
  bottom: -14px;
}

.AFDialogTailSimple > .AFPopupTailMiddleLeft,
.AFPopupTailSimple > .AFPopupTailMiddleLeft {
  background-image: url("/afr/cone_ml.png");
  height: 17px;
  width: 14px;
  left: -14px;
}

.AFDialogTailSimple > .AFPopupTailMiddleRight,
.AFPopupTailSimple > .AFPopupTailMiddleRight {
  background-image: url("/afr/cone_mr.png");
  height: 17px;
  width: 14px;
  right: -14px;
}

.AFDialogTailSimple > .AFPopupTailTopLeft {
  left: -13px;
}

.AFDialogTailSimple > .AFPopupTailTopRight {
  right: -13px;
}

.AFDialogTailSimple > .AFPopupTailTopCenter {
  top: -13px;
}

.AFDialogTailSimple > .AFPopupTailBottomLeft {
  left: -13px;
}

.AFDialogTailSimple > .AFPopupTailBottomRight {
  right: -13px;
}

.AFDialogTailSimple > .AFPopupTailBottomCenter {
  bottom: -13px;
}

.AFDialogTailSimple > .AFPopupTailMiddleLeft {
  left: -13px;
}

.AFDialogTailSimple > .AFPopupTailMiddleRight {
  right: -13px;
}


af|body:high-contrast .AFDialogTailSimple > .AFPopupTailTopLeft:after,
af|body:high-contrast .AFPopupTailSimple > .AFPopupTailTopLeft:after {
  content: url("/afr/cone_tl.png");
}

af|body:high-contrast .AFDialogTailSimple > .AFPopupTailTopRight:after,
af|body:high-contrast .AFPopupTailSimple > .AFPopupTailTopRight:after {
  content: url("/afr/cone_tr.png");
}

af|body:high-contrast .AFDialogTailSimple > .AFPopupTailTopCenter:after,
af|body:high-contrast .AFPopupTailSimple > .AFPopupTailTopCenter:after {
  content: url("/afr/cone_tc.png");
}

af|body:high-contrast .AFDialogTailSimple > .AFPopupTailBottomLeft:after,
af|body:high-contrast .AFPopupTailSimple > .AFPopupTailBottomLeft:after {
   content: url("/afr/cone_bl.png");
}

af|body:high-contrast .AFDialogTailSimple > .AFPopupTailBottomRight:after,
af|body:high-contrast .AFPopupTailSimple > .AFPopupTailBottomRight:after {
  content: url("/afr/cone_br.png");
}

af|body:high-contrast .AFDialogTailSimple > .AFPopupTailBottomCenter:after,
af|body:high-contrast .AFPopupTailSimple > .AFPopupTailBottomCenter:after {
  content: url("/afr/cone_bc.png");
}

af|body:high-contrast .AFDialogTailSimple > .AFPopupTailMiddleLeft:after,
af|body:high-contrast .AFPopupTailSimple > .AFPopupTailMiddleLeft:after {
  content: url("/afr/cone_ml.png");
}

af|body:high-contrast .AFDialogTailSimple > .AFPopupTailMiddleRight:after,
af|body:high-contrast .AFPopupTailSimple > .AFPopupTailMiddleRight:after {
  content: url("/afr/cone_mr.png");
}

/* End of popup global tail styles */

af|noteWindow {
  /* placeholder for notewindow used with server-side component */
  padding: 3px 3px 3px 3px;
}

.AFNoteWindow {
  border-left: 0px solid #0D4988;
  border-right: 1px solid #0D4988;
  border-bottom: 1px solid #0D4988;
  border-top: 1px solid #0D4988;
  -tr-rule-ref: selector(".AFTextBackground:alias");
  padding: 3px 5px;
  z-index: 2;
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-open-animation-duration: 200;
  -tr-animate: true;
}

.AFNoteWindowRight {
  -tr-rule-ref: selector(".AFNoteWindow");
  border-left: 1px solid #0D4988;
  border-right: 0px solid #0D4988;
}

.AFNoteWindowSeparator {
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-style: dashed;
  height: 1px;
  margin: 0px;
  -tr-rule-ref: selector(".AFVeryDarkAccentForeground:alias");
}

/* IE7 adds 7 pixels of extra margin to whatever you specify via CSS so the following is required
   to work around it */
@agent ie and (version: 7.0) {
  .AFNoteWindowSeparator {
    display: block;
    margin: -7px 0px;
  }
}

.AFNoteWindowHintText {
  font-weight: bold;
}

.AFNoteWindowHintText,
.AFNoteWindowInstructions,
.AFNoteWindowShortDesc,
.AFNoteWindowFooter {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: break-word;
}

.AFNoteWindowConeBorder {
  background-image: url("/afr/cone_border.png");
  width:14px;
  background-repeat: repeat-y;
  background-position:center right;
  line-height: 0px;
}

.AFNoteWindowConeBorderRight {
  background-image: url("/afr/cone_border.png");
  width:14px;
  background-repeat: repeat-y;
  background-position:center left;
  line-height: 0px;
}
/* The note window needs to have a visible border in high contrast mode or else this will be
   difficult to visualize where the cone's edge is in Windows's high-contrast display mode for IE. */
af|body:high-contrast .AFNoteWindowConeBorder {
  border-right: 1px solid black;
}

af|body:high-contrast .AFNoteWindowConeBorderRight {
  border-left: 1px solid black;
}

af|body:high-contrast .AFNoteWindowCone,
af|body:high-contrast .AFNoteWindowConeBL {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

af|body:high-contrast .AFNoteWindowConeTR,
af|body:high-contrast .AFNoteWindowConeBR {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

.AFNoteWindowCone {
  background-image: url("/afr/cone_tl.png");
  width:14px;
  height:8px;
  background-position:top;
}

.AFNoteWindowConeTR{
  background-image: url("/afr/cone_tr.png");
  width:14px;
  height:8px;
  background-position:top;
}
.AFNoteWindowConeBL{
  background-image: url("/afr/cone_bl.png");
  width:14px;
  height:8px;
  background-position:bottom;
}

.AFNoteWindowConeBR{
  background-image: url("/afr/cone_br.png");
  width:14px;
  height:8px;
  background-position:bottom;
}

/* The top portion of the inline message */
.AFNoteWindowContent {
}

/* The bottom portion of the inline message */
.AFNoteWindowFooter {
  clear: both;
  padding: 4px;
  margin-top: 2px;
}

/* The start side of the bottom portion of the inline message */
.AFNoteWindowFooterStart {
  padding-right: 30px;
}
.AFNoteWindowFooterStart:rtl {
  padding-right: 0px;
  padding-left: 30px;
}

/* The end side of the bottom portion of the inline message */
.AFNoteWindowFooterEnd {
}

/* The message "all" button for the note window */
.AFNoteWindowAllButton {
  margin: 8px;
}

/* The message navigator for the of the inline message */
.AFNoteWindowNavigator {
  float: right;
}
.AFNoteWindowNavigator:rtl {
  float: left;
}
@agent opera {
  .AFNoteWindowNavigator {
    text-align: left;
  }
}

/* The message navigator chooser for the of the inline message */
.AFNoteWindowChooser {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
}

/* The links for navigating among component-level messages */
.AFNoteWindowPreviousLink,
.AFNoteWindowNextLink {
  display: block;
  width: 16px;
  height: 16px;
  padding: 4px;
  cursor: default;
  background-repeat: no-repeat;
  background-position: center;
}

.AFNoteWindowPreviousLink:disabled {
  background-image: url("/afr/previous_trvArr_dis.png");
}

.AFNoteWindowPreviousLink:disabled:rtl {
  background-image: url("/afr/next_trvArr_dis.png");
}

/* The link for navigating to the previous inline message's note window */
.AFNoteWindowPreviousLink {
  background-image: url("/afr/previous_trvArr_ena.png");
}
.AFNoteWindowPreviousLink:rtl {
  background-image: url("/afr/next_trvArr_ena.png");
}

.AFNoteWindowNextLink:disabled {
  background-image: url("/afr/next_trvArr_dis.png");
}

.AFNoteWindowNextLink:disabled:rtl {
  background-image: url("/afr/previous_trvArr_dis.png");
}

/* The link for navigating to the next inline message's note window */
.AFNoteWindowNextLink {
  background-image: url("/afr/next_trvArr_ena.png");
}

.AFNoteWindowNextLink:rtl {
  background-image: url("/afr/previous_trvArr_ena.png");
}

.AFTooltip {
  cursor: default;
  border: 1px #0D4988 solid;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
}

/* Root element for the messages component */
af|messages,
af|messages::body,
af|messages::header {
  -tr-inhibit: all;
}

/* unhide messages root element when it has messages to display */
af|messages:fatal,
af|messages:error,
af|messages:warning,
af|messages:confirmation,
af|messages:info {
}

/* The text serving as the header above the list of messages */
af|messages::header-text {
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  font-size: +2px;
}


/* The title for the combined messages */
af|messages::intro {
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  padding-top: 3px;
  word-wrap: break-word;
}

/* The title for groupings of messages */
af|messages::message-group-title {
  padding-top: 6px;
  vertical-align: top;
  word-wrap: break-word;
}

/* The separator between message group types (e.g. page-level and component-level) */
af|messages::message-group-type-separator {
  margin: 0px;
  border-width: 0px;
  border-top: 1px solid #AAAAAA;
  height: 1px;
}


/* Root element for message component */
af|message {
}
/* The help area of the message component */
af|message::help {
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
}

af|message::fatal-icon,
af|messages::fatal-icon {
  -tr-rule-ref: selector(".AFFatalIcon:alias");
}

af|message::error-icon,
af|messages::error-icon,
af|showDetailHeader::error-icon,
af|panelHeader::error-icon {
  -tr-rule-ref: selector(".AFErrorIcon:alias");
}

af|message::warning-icon,
af|messages::warning-icon,
af|showDetailHeader::warning-icon,
af|panelHeader::warning-icon {
  -tr-rule-ref: selector(".AFWarningIcon:alias");
}

/* Default and Info icons */
af|message::info-icon,
af|messages::info-icon,
af|showDetailHeader::info-icon,
af|panelHeader::info-icon {
  -tr-rule-ref: selector(".AFInfoIcon:alias");
}

/* Confirmation icons */
af|message::confirmation-icon,
af|messages::confirmation-icon,
af|showDetailHeader::confirmation-icon,
af|panelHeader::confirmation-icon {
  -tr-rule-ref: selector(".AFConfirmationIcon:alias");
}


/* TODO gcrawford
   open issue that both af|message::detail and af|messages::detail are being
   used on the summary. Message styles are still under discussion as of
   4-2-07, this will be fixed after the upcoming review of messaging with the
   blaf+ team.
 */
af|message::type,
af|message::summary,
af|message::detail,
af|message::intro,
af|messages::summary,
af|messages::detail{
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  word-wrap: break-word;
}


af|message::type,
af|message::summary,
af|message::intro {
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
}

af|message::header {
  -tr-rule-ref: selector(".AFDarkAccentBorder:alias");
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  vertical-align: bottom;
  margin-bottom: 3px;
  padding: 0px 3px;
}

/* Styling for the List of messages at component level*/
af|message::message-list-component {
}

/* Styling for the List of messages at page level*/
af|messages::message-list-page {
}

/* Styling for any high level table which contains messages. This is used such that the border collapses */
af|message::container {
  table-layout: auto;
  white-space: normal;
}

@agent webkit {
  af|message::container {
    table-layout: auto;
  }
}

/* Styling for the table wrapping components and their messages */
af|message::component-messages-list-container {
  white-space: nowrap;
}

/* Styles the icons cell */
af|message::icon-cell {
  width: 16px;
}

/* Styles the detail messages cell */
af|message::detail-cell {
}

/* Styles the list of messages across the message group */
af|messages::message-group-list {
}


.nowrap {
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

@agent ie, webkit {
  .nowrap {
    text-overflow: ellipsis;
  }
}

.nowrap * {
  white-space: nowrap;
}

/* Root style for selectManyListbox */
af|selectManyListbox::content {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFTextBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
  cursor: default;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

@agent gecko and (version: 1.9) {
  af|selectManyListbox::content {
    white-space: nowrap;
  }
}

af|selectManyListbox:read-only::content {
  border-style: none;
}

af|selectManyListbox:disabled::content {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFFormControlContentBackgroundDisabled:alias");
  -tr-rule-ref: selector(".AFVeryDarkAccentForeground:alias");
}
/* Adding extra px for row height for Android */
@agent (touchScreen:single) {
  af|selectManyListbox {
    -tr-item-row-height: 26;
  }
}
/* style used on the native checkbox */
af|selectManyListbox::content-input {
}
@agent ie {
  af|selectManyListbox::content-input {
    outline-width: 0px;
  }
}
/* this is the style for the scrolling container around all of the checkboxes except
   the All checkbox.  */
af|selectManyListbox::options {
  overflow: auto;
  overflow-x: hidden;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  border-width: 0px;
  margin: 0px;
  padding: 0px;
}

/* The style on the container around the checkbox and label */
af|selectManyChoice::item,
af|selectManyShuttle::item,
af|selectOrderShuttle::item,
af|selectManyListbox::item {
  border:1px transparent dotted;
}

af|selectManyChoice:disabled::item:selected,
af|selectManyChoice:disabled::item:active,
af|selectOrderShuttle:disabled::item:selected,
af|selectOrderShuttle:disabled::item:active,
af|selectManyShuttle:disabled::item:selected,
af|selectManyShuttle:disabled::item:active,
af|selectManyListbox:disabled::item:selected,
af|selectManyListbox:disabled::item:active {
  border-color: transparent;
  background-color: transparent;
  color: inherit;
}

@agent (touchScreen:none) {
  af|selectManyChoice:disabled::item:hover,
  af|selectOrderShuttle:disabled::item:hover,
  af|selectManyShuttle:disabled::item:hover,
  af|selectManyListbox:disabled::item:hover {
    border-color: transparent;
    background-color: transparent;
    color: inherit;
  }
}

af|selectManyChoice::item:highlighted,
af|selectManyShuttle::item:highlighted,
af|selectOrderShuttle::item:highlighted,
af|selectManyListbox::item:highlighted {
  -tr-rule-ref: selector(".AFActiveLinkBorder:alias");
}
af|selectManyChoice::item:disabled,
af|selectManyShuttle::item:disabled,
af|selectOrderShuttle::item:disabled,
af|selectManyListbox::item:disabled {
  -tr-rule-ref: selector(".AFVeryDarkAccentForeground:alias");
  -tr-rule-ref: selector(".AFFormControlContentBackgroundDisabled:alias");
}

af|body:high-contrast af|selectManyChoice::item:disabled,
af|body:high-contrast af|selectManyShuttle::item:disabled,
af|body:high-contrast af|selectOrderShuttle::item:disabled,
af|body:high-contrast af|selectManyListbox::item:disabled {
  -tr-rule-ref: selector(".AFHighContrastTextDisabled:alias");
}

/* Style on the item separator */
af|selectManyChoice::separator,
af|selectOneChoice::separator,
af|selectManyListbox::separator {
  height: 1px;
  line-height: 1px;
  font-size: 1px;
  overflow: hidden;
  margin-bottom:1px;
  cursor: default;
  border-bottom:1px solid #979993;
}

/* Underline the access key for form labels */
af|outputLabel::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

.RichPageProcessingIndicator {
  width: 77px;
  height: 14px;
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
  background-image: url('/afr/processing_page.gif');
}

/* private - used by AdfDhtmlPage when displaying blocking glass pane */
.AFBlockingGlassPane {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  position: absolute;
  z-index: 3200;
  cursor: wait;
  bottom: 0px;
  top: 0px;
  left: 0px;
  right: 0px;
}

/* private - used by AdfDhtmlPage when preventing user input during PPR */
.AFBlockingMaskingFrame {
  position: absolute;
  z-index: 3100;
}

/* panelAccordion Styles */

/* The root panelAccordion element */
af|panelAccordion {
  -tr-header-height: 24;
  -tr-overflow-height: 13;
  -tr-minimum-resizable-height: 5;
  -tr-reorder-animation-duration: 400;
  -tr-disclosure-animation-duration: 800;
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

/* If this instance is supposed to get its dimensions from the children then we must prepend
   the inline style with an automatic width and make overflow visible.  The height will be
   forced to be automatic by appending it via the getInlineStyle() call since we need to
   disable any height assignments via inlineStyle as well whereas a width assignment via
   inlineStyle is acceptable. */
af|panelAccordion:flow {
  width: auto;
  height: auto;
  overflow: visible;
}
/* IE7 will return zero for clientWidth and clientHeight unless we add "min-height:0" */
@agent ie and (version: 7.0) {
  af|panelAccordion:flow {
    min-height: 0;
  }
}

/* the top and bottom overflow links for panelAccordion */
af|panelAccordion::top-overflow-indicator,
af|panelAccordion::bottom-overflow-indicator {
  width: 11px;
  height: 13px;
  position: absolute;
  display: none;
  background-repeat: no-repeat;
  background-position: center center;
}

/* the top overflow link for panelAccordion */
af|panelAccordion::top-overflow-indicator {
  top: 0px;
  left: 3px;
  right: auto;
  cursor: default;
  -tr-rule-ref: selector(".AFOverflowImageVerticalStart:alias");
}

/* the top overflow link for panelAccordion in RTL */
af|panelAccordion::top-overflow-indicator:rtl {
  left: auto;
  right: 3px;
}

/* the top overflow link for panelAccordion in hover state */
@agent (touchScreen:none) {
  af|panelAccordion::top-overflow-indicator:hover {
    -tr-rule-ref: selector(".AFOverflowImageVerticalStartHover:alias");
  }
}

/* the top overflow link for panelAccordion in active state */
af|panelAccordion::top-overflow-indicator:depressed {
  -tr-rule-ref: selector(".AFOverflowImageVerticalStartDepressed:alias");
}

/* the bottom overflow link for panelAccordion */
af|panelAccordion::bottom-overflow-indicator {
  bottom: 0px;
  left: auto;
  right: 3px;
  cursor: default;
  -tr-rule-ref: selector(".AFOverflowImageVerticalEnd:alias");
}

/* the bottom overflow link for panelAccordion in RTL */
af|panelAccordion::bottom-overflow-indicator:rtl {
  left: 3px;
  right: auto;
}

/* the bottom overflow link for panelAccordion in hover state */
@agent (touchScreen:none) {
  af|panelAccordion::bottom-overflow-indicator:hover {
    -tr-rule-ref: selector(".AFOverflowImageVerticalEndHover:alias");
  }
}

/* the bottom overflow link for panelAccordion in active state */
af|panelAccordion::bottom-overflow-indicator:depressed {
  -tr-rule-ref: selector(".AFOverflowImageVerticalEndDepressed:alias");
}

/* Icon hook for users to replace the overflow top icon with another img or text */
af|panelAccordion::overflow-top-icon {
  content: inhibit;
}

/* Icon hook for users to replace the overflow bottom icon with another img or text */
af|panelAccordion::overflow-bottom-icon {
  content: inhibit;
}

af|panelAccordion::overflow-container {
  padding: 8px;
}

af|panelAccordion::overflow-container .AFOverflowElement {
  -tr-rule-ref: selector(".AFLinkForeground:alias");
  text-decoration: none;
  display: block;
  padding: 2px;
  white-space: nowrap;
}

@agent (touchScreen:none) {
  af|panelAccordion::overflow-container .AFOverflowElement:hover {
    -tr-rule-ref: selector(".AFLinkHover:alias");
  }

  af|panelAccordion::overflow-container .AFOverflowElement:active:hover {
    -tr-rule-ref: selector(".AFActiveLinkForeground:alias");
  }
}

/* Ensure disabled overflow items do not have the appearance of a link */
af|panelAccordion::overflow-container af|commandLink:disabled,
af|panelAccordion::overflow-container af|link:disabled {
  -tr-rule-ref: selector(".AFTextForeground:alias");
  text-decoration: none;
}

@agent (touchScreen:none) {
  af|panelAccordion::overflow-container af|commandLink:disabled:hover,
  af|panelAccordion::overflow-container af|commandLink:disabled:active:hover,
  af|panelAccordion::overflow-container af|link:disabled:hover,
  af|panelAccordion::overflow-container af|link:disabled:active:hover {
    -tr-rule-ref: selector(".AFTextForeground:alias");
    text-decoration: none;
  }
}

@agent gecko and (version: 1.9) {
  af|panelAccordion::overflow-container af|panelGroupLayout {
    display: inline-block;
  }
}

/* the style for panelAccordion access key text */
af|panelAccordion::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* the root header element for every panelAccordion's first panel */
af|panelAccordion::header,
af|panelAccordion::header-subsequent {
  overflow: hidden;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #979991;
}
af|panelAccordion::header:disclosed,
af|panelAccordion::header-subsequent:disclosed {
  border-bottom-width: 0px;
}

/* styles for disabled accordion disclosed buttons */
af|panelAccordion::header:disabled af|panelAccordion::header-disclose,
af|panelAccordion::header-subsequent:disabled af|panelAccordion::header-disclose {
  display: none;
}

/* styles for an af|toolbox inside of the accordion headers */
af|panelAccordion af|panelAccordion::header af|toolbox,
af|panelAccordion af|panelAccordion::header-subsequent af|toolbox {
  background-color: transparent;
}

/* styles for an af|toolbar inside of the accordion headers */
af|panelAccordion af|panelAccordion::header af|toolbar,
af|panelAccordion af|panelAccordion::header-subsequent af|toolbar,
af|panelAccordion af|panelAccordion::header af|toolbar::body,
af|panelAccordion af|panelAccordion::header-subsequent af|toolbar::body,
af|panelAccordion::ghost af|panelAccordion::header af|toolbar,
af|panelAccordion::ghost af|panelAccordion::header-subsequent af|toolbar,
af|panelAccordion::ghost af|panelAccordion::header af|toolbar::body,
af|panelAccordion::ghost af|panelAccordion::header-subsequent af|toolbar::body {
  background-color: transparent;
  -tr-rule-ref: selector(".AFTextForeground:alias");
  border-left-width: 0px;
  border-right-width: 0px;
}
af|panelAccordion af|panelAccordion::header af|toolbar::overflow-container,
af|panelAccordion af|panelAccordion::header-subsequent af|toolbar::overflow-container {
  background-color: transparent;
}

/* the root header element for every panelAccordion's first and subsequent panels */
af|panelAccordion::header,
af|panelAccordion::header-subsequent {
  margin: 0px;
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  position: absolute;
  left: 0px;
  right: 0px;
}
af|panelAccordion::header:flow,
af|panelAccordion::header-subsequent:flow {
  position: relative;
  left: auto;
  right: auto;
}

/* the image that corresponds to the showDetailItem icon in the header */
af|panelAccordion::icon-style {
  border: 0px;
  vertical-align: middle;
  padding-left: 0px;
  padding-right: 4px;
  float: left;
}

/* the image that corresponds to the showDetailItem icon in the header in RTL */
af|panelAccordion::icon-style:rtl {
  padding-left: 4px;
  padding-right: 0px;
  float: right;
}

/* the title element in each panel's header */
af|panelAccordion::header-title,
af|panelAccordion::header-title af|commandLink,
af|panelAccordion::header-title af|commandLink:active,
af|panelAccordion::header-title af|goLink,
af|panelAccordion::header-title af|goLink:active,
af|panelAccordion::header-title af|goLink:visited,
af|panelAccordion::header-title af|link,
af|panelAccordion::header-title af|link:active,
af|panelAccordion::header-title af|link:visited,
af|panelAccordion::header-title af|link:selected {
  -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
  border-width: 0px;
  -tr-rule-ref: selector(".AFTextForeground:alias");
  cursor: default;
  font-size: +1px;
  text-decoration: none;
  white-space: nowrap;
}

@agent (touchScreen:none) {
  af|panelAccordion::header-title af|commandLink:hover,
  af|panelAccordion::header-title af|goLink:hover,
  af|panelAccordion::header-title af|link:hover {
    -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
    border-width: 0px;
    -tr-rule-ref: selector(".AFTextForeground:alias");
    cursor: default;
    font-size: +1px;
    text-decoration: none;
    white-space: nowrap;
  }
}

af|panelAccordion::header-title {
  width: 100%;
}

af|panelAccordion::header-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: inline-block;
}

/*This change made for bug 27160997 but due to requiremnt change
kept the default option as nowrap for touch devices as well. */
/* @agent (touchScreen) {
  af|panelAccordion::header-title-text {
    white-space: normal;
  }
}*/

af|panelAccordion::header-title-text-table {
  table-layout: fixed;
}

/* general settings for the disclose and undisclose buttons */
af|panelAccordion::undisclosed-icon-style,
af|panelAccordion::disclosed-icon-style {
  width: 12px;
  height: 20px;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: default;
}

/* Icon shown when the panel is undisclosed (collapsed or closed). Pressing the icon opens
   (discloses) the panel. By default the undisclosed icon looks like a "+". */
af|panelAccordion::undisclosed-icon-style {
  background-image: url('/afr/disclosure_collapsed.png');
}

/* Icon shown when the panel is disclosed (expanded or open). Pressing the icon closes
   (undiscloses) the panel. By default the disclosed icon looks like a "-". */
af|panelAccordion::disclosed-icon-style {
  background-image: url('/afr/disclosure_expanded.png');
}

/* Icon hook for users to replace the undisclosed icon with another img or text */
af|panelAccordion::undisclosed-icon {
  content: inhibit;
}

/* Icon hook for users to replace the disclosed icon with another img or text */
af|panelAccordion::disclosed-icon {
  content: inhibit;
}

/* inside of the header root, this is the container for the disclosure button */
af|panelAccordion::header-disclose {
  padding-left: 1px;
  padding-right: 4px;
}

/* inside of the header root, this is the container for the disclosure button in RTL */
af|panelAccordion::header-disclose:rtl {
  padding-left: 4px;
  padding-right: 1px;
}

/* inside of the header root, this is the container for the toolbar */
af|panelAccordion::header-toolbar {
  width: 100%;
}

/* inside of the header root, these are the containers for the non-end caps */
af|panelAccordion::header-disclose,
af|panelAccordion::header-title,
af|panelAccordion::header-toolbar {
  -tr-rule-ref: selector(".AFMediumAccentBackground:alias");
  white-space: nowrap;
}

/* inside of the header root, these are the containers */
af|panelAccordion::header-start,
af|panelAccordion::header-disclose,
af|panelAccordion::header-title,
af|panelAccordion::header-toolbar,
af|panelAccordion::header-end {
  border-bottom: 1px solid #D7D7C5;
}

/* the body root element for each item in the panelAccordion */
af|panelAccordion::body-content {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  overflow: hidden;
  width: auto;
  border-left: 1px solid #979991;
  border-right: 1px solid #979991;
  border-bottom: 1px solid #979991;
  position: absolute;
  left: 0px;
  right: 0px;
}
af|panelAccordion::body-content:flow {
  width: auto;
  position: relative;
  left: auto;
  right: auto;
}

/* detail item resize divider alligned to the bottom  */
af|panelAccordion::resize-divider {
  position: absolute;
  overflow: hidden;
  cursor: n-resize;
  bottom: 0px;
  width: 100%;
  height: 4px;
  z-index: 1;
}

/* This is required in IE because without it the grab bar might not have any
   clickable area to react to. */
@agent ie {
  af|panelAccordion::resize-divider {
    background-color: white;
    filter: alpha(opacity:1);
  }
}

/* Pseudo style applied to the floating resize divider during drag */
af|panelAccordion::resize-divider:drag {
  border: 1px solid #003399;
}

/* Remove the IE hack on the drag state applied to the floating resize divider */
@agent ie {
  af|panelAccordion::resize-divider:drag {
    background-color: transparent;
    filter: none;
  }
}

/* Private */

/* Private - The root element for ghosts displayed during header drag and drop.
   This style is not (currently) used - mcooper */
af|panelAccordion::ghost {
  opacity: 0.9;
}
@agent ie {
  af|panelAccordion::ghost {
    filter:alpha(opacity:90);
  }
}

/* Private - used when print option is selected */
af|panelAccordion:printable {
  height: auto;
  position:static;
  overflow:visible;
}
af|panelAccordion:printable af|panelAccordion::header,
af|panelAccordion:printable af|panelAccordion::header-subsequent {
  position:static;
  margin: 0px;
}
af|panelAccordion:printable af|panelAccordion::body-content {
  position:static;
}
@agent email
{
    /* Private - used when print option is selected */
  af|panelAccordion {
    position:static;
    overflow:visible;
  }
  af|panelAccordion af|panelAccordion::header,
  af|panelAccordion af|panelAccordion::header-subsequent {
    position:static;
    margin: 0px;
  }
  af|panelAccordion af|panelAccordion::body-content {
    position:static;
  }
}

/* end private */

/* end of panelAccordion styles */

af|inputListOfValues {
white-space: noWrap;
}

/* Underline the access key for inputListOfValues labels */
af|inputListOfValues::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* style for inputListOfValues label */
af|inputListOfValues::label {
  -tr-rule-ref:selector(".AFLabel:alias");
}

/* style for inputListOfValues disabled label */
af|inputListOfValues:disabled::label {
  -tr-rule-ref:selector(".AFLabelDisabled:alias");
}

af|inputListOfValues::content {
    -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
}

af|inputListOfValues:edit-mode-select::content {
  background-color: #DDDDDD;
  cursor: default;
}

/* panelList::link is mapped to "panelList A" in trinidad making its
specificity (11) higher than af|inputDate::launch-icon-style (10) so I added
af|panelList to bump the specificity to 20 so it would get the correct font
size when inside a panelList. */
af|inputListOfValues::search-icon-style,
af|panelList af|inputListOfValues::search-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/lov_ena.png");
  vertical-align: text-bottom;
  width: 16px;
  height: 16px;
  display: inline-block;
}

af|body:high-contrast af|inputListOfValues::search-icon-style::after {
  content: url("/afr/lov_ena.png");
}

af|inputListOfValues::search-icon-style:disabled,
af|inputListOfValues::search-icon-style:disabled:active {
  background-image:url("/afr/lov_dis.png");
}
af|body:high-contrast af|inputListOfValues::search-icon-style:disabled:after,
af|body:high-contrast af|inputListOfValues::search-icon-style:disabled:active:after {
  content: url("/afr/lov_dis.png");
}

af|inputListOfValues::search-icon-style:active {
  background-image:url("/afr/lov_dwn.png");
}
af|body:high-contrast af|inputListOfValues::search-icon-style:active:after {
  content: url("/afr/lov_dwn.png");
}

@agent (touchScreen:none) {
  af|inputListOfValues::search-icon-style:disabled:hover {
    background-image:url("/afr/lov_dis.png");
  }
  af|body:high-contrast af|inputListOfValues::search-icon-style:disabled:after {
    content: url("/afr/lov_dis.png");
  }
  af|inputListOfValues::search-icon-style:hover {
    background-image:url("/afr/lov_ovr.png");
  }
  af|body:high-contrast af|inputListOfValues::search-icon-style:hover:after {
    content: url("/afr/lov_ovr.png");
  }
}
/* :hover/:active in blafplus, not simple */

/* inputComboboxListOfValues styles */

af|inputComboboxListOfValues {
white-space: nowrap;
}

/* Underline the access key for inputConboboxListOfValues labels */
af|inputComboboxListOfValues::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* style for inputComboboxListOfValues label */
af|inputComboboxListOfValues::label {
  -tr-rule-ref:selector(".AFLabel:alias");
}

/* style for inputComboboxListOfValues disabled label */
af|inputComboboxListOfValues:disabled::label {
  -tr-rule-ref:selector(".AFLabelDisabled:alias");
}

af|inputComboboxListOfValues::container {
  position:relative;
  border:1px solid #B9B9B4;
  -tr-rule-ref:selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTextBackground:alias");
  padding:1px 0px;
}

af|inputComboboxListOfValues:edit-mode-select::container {
  background-color: #DDDDDD;
}

af|inputComboboxListOfValues:edit-mode-select::dropdown-cell {
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
}

af|inputComboboxListOfValues:edit-mode-select::content {
  background-color: transparent;
  cursor: default;
}

@agent webkit {
  af|treeTable af|inputComboboxListOfValues::container-span,
  af|table af|inputComboboxListOfValues::container-span {
    width:16%;
  }
  af|inputComboboxListOfValues::container-span {
    text-align:right;
    display:inline-block;
    margin-bottom: 1px;
  }
}

@agent ie and (version: 7.0) {
  af|inputComboboxListOfValues::container {
    padding: 0px;
  }
  af|inputComboboxListOfValues::container:rtl {
    position:static;
  }
}

@agent ie {
  af|inputComboboxListOfValues:fatal .AFContentCell,
  af|inputComboboxListOfValues:error .AFContentCell {
    border-bottom: 1px #C70000 solid;
    border-top: 1px #C70000 solid;
  }

  af|column::column-filter-cell af|inputComboboxListOfValues::container,
  af|column::data-cell af|inputComboboxListOfValues::container,
  af|column::banded-data-cell af|inputComboboxListOfValues::container,
  af|column::row-header-cell af|inputComboboxListOfValues::container {
    display: inline-block;
  }
}
@agent webkit {
  af|inputComboboxListOfValues::container {
    display: inline-block;
    padding: 0px;
  }

  af|column::column-filter-cell af|inputComboboxListOfValues::container,
  af|column::data-cell af|selectManyChoice::control,
  af|column::data-cell af|inputComboboxListOfValues::container,
  af|column::banded-data-cell af|selectManyChoice::control,
  af|column::banded-data-cell af|inputComboboxListOfValues::container,
  af|column::row-header-cell af|selectManyChoice::control,
  af|column::row-header-cell af|inputComboboxListOfValues::container {
    max-width: 90%;
    width: 90%;
  }
}

/* style for inputComboboxListOfValues content */
af|inputComboboxListOfValues::content {
  border: 0px;
  -tr-rule-ref: selector(".AFFormControlContent:alias");
  -tr-rule-ref: selector(".AFFormControlContentBackground:alias");
}
af|inputComboboxListOfValues.AFStretchWidth af|inputComboboxListOfValues::content {
  width: calc(100% - 13px); /* 13px is the width of the dropdown icon */
  box-sizing: border-box;
}

@agent webkit {
  af|inputComboboxListOfValues::content {
    padding: 0px;
  }

  af|column::column-filter-cell af|inputComboboxListOfValues::content,
  af|column::data-cell af|inputComboboxListOfValues::content,
  af|column::banded-data-cell af|inputComboboxListOfValues::content,
  af|column::row-header-cell af|inputComboboxListOfValues::content {
    max-width: 84%;
    width: 84%;
  }
}

/* style for inputComboboxListOfValues dropdown icon */
af|inputComboboxListOfValues::dropdown-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/dropdown_n.png");
  background-position:center;
  font-size:10px;
  margin-left: 0px;
  margin-right: 0px;
  padding:1px 10px 3px 1px;
}
af|body:high-contrast af|inputComboboxListOfValues::dropdown-icon-style::after {
 content: url('/afr/dropdown_n_hc.png');
}

af|inputComboboxListOfValues::dropdown-icon-style:active {
  background-image:url("/afr/dropdown_md.png");
}
af|body:high-contrast af|inputComboboxListOfValues::dropdown-icon-style:active:after {
 content: url("/afr/dropdown_md.png");
}

@agent (touchScreen:none) {
  af|inputComboboxListOfValues::dropdown-icon-style:hover {
    background-image:url("/afr/dropdown_md.png");
  }
  af|body:high-contrast af|inputComboboxListOfValues::dropdown-icon-style:hover:after {
    content: url("/afr/dropdown_md.png");
  }
}

af|inputComboboxListOfValues::dropdown-icon-style:disabled {
  background-image:url("/afr/dropdown_d.png");
}
af|body:high-contrast af|inputComboboxListOfValues::dropdown-icon-style:disabled:after {
 content: url("/afr/dropdown_d_hc.png");
}

@agent (touchScreen:none) {
  af|inputComboboxListOfValues::dropdown-icon-style:disabled:hover{
    background-image:url("/afr/dropdown_d.png");
  }
}

@agent ie {
  af|inputComboboxListOfValues::dropdown-icon-style {
    font-size: 6px;
    background-position: 50% 20%;
  }
}
@agent ie and (version: 7.0) {
  af|inputComboboxListOfValues::dropdown-icon-style {
    background-position: center;
  }
}
@agent webkit {
  af|inputComboboxListOfValues::dropdown-icon-style {
    box-sizing: border-box;
    height: 11px;
  }
}

/*style for the dropdown background*/
af|inputComboboxListOfValues::dropdown-cell {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  font-size: 11px;
  margin: 1px;
  vertical-align: 9.1%;
}
@agent webkit {
  af|inputComboboxListOfValues::dropdown-cell {
    display: inline-block;
  }
}
/* style for the search link in the drop down panel*/
af|inputComboboxListOfValues::search{
  display: block;
  padding: 2px;
}
/* :hover/:active in blafplus, not simple */
/* End of inputComboboxListOfValues styles */

/* Common LOV styles*/
af|inputListOfValues::toolbox af|toolbox::last-cell,
af|inputComboboxListOfValues::toolbox af|toolbox::last-cell {
  max-width: 100px; /* We just have single icon in LOV dialog */
}

af|query {
  white-space: nowrap;
  overflow: auto;
  position: relative;
  -tr-visible-items: 15;
  /*Increasing Add Fileds Menu items height from 10 to 15,
  As CRM team put more entry and they had difficulty in navigating.*/
}

@agent (touchScreen) {
  af|query {
    -tr-visible-items: 10;
    /*Setting value to 10 for Touch Screen device that is the default value.*/
  }
}

/* The pseudo class for displayMode=simple */
af|query:simple {
}

/* The pseudo class for displayMode=compact */
af|query:compact {
}

/* priavte. style for the text container when there are no search fields added.*/
af|query::no-fields-container-style {
  font-size:11px;
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  color: #333333;
  font-weight: normal;
  text-align: center;
  padding: 25px 0px 20px 0px;
  width: 100%;
}

/* Style on the query separator */
af|query::separator-icon-style {
  -tr-rule-ref: selector(".AFBarSeparator:alias");
}

/* private. styles the cell that contains the buttons in the search panel */
af|query::button-cell {
  padding-left:2px;
  padding-right:2px;
}

/* Private - styles the table that contains the content of the query component.*/
af|query::title-table {
  border-width: 0px;
  padding: 0px;
  width: 100%;
}

/* styles the footer content that is displayed in the footer of the query panel */
af|query::content-footer {
  padding-top : 10px;
  padding-bottom: 3px;
  vertical-align: top;
}

/* Styles the cell that displays the content of the footer facet (or the default Add Fields
commandToolbarButton)*/
af|query::footer-facet-content-style {
  padding-left:2px;
  padding-right:2px;
}

/* style class for container enclosing conjunction and criterion fields */
af|query::criteria {
  padding-top: 4px;
  position:relative;
}

/* styles a column on criterion objects (search fields) */
af|query::criteria-column {
  vertical-align: top;
}
/* Styles the criterion or the search field */
af|query::criterion {
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  font-size:8pt;
}

/* Styles the index icon part of the criterion or the search field */
af|query::criterion-indexed-icon-style {
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  padding-right: 3px;
}

af|query::criterion-indexed-icon-style:rtl {
  padding-right: 0px;
  padding-left: 3px;
}

@agent ie {
  af|query::criterion-indexed-icon-style:rtl {
    display: inline-block;
  }
}
/* Styles the label part of the criterion or the search field */
af|query::criterion-label {
  -tr-rule-ref: selector(".AFLabel:alias");
  -tr-rule-ref: selector(".AFEndTextAlign:alias");
  white-space: nowrap;
}
/* Styles the label when it appears on top and is stacked above the remainder
of the search field parts */
af|query:label-top::criterion-label {
  /* to ensure backward compatibility in cases where criterion-label-top pseudo element is used add a tr-rule-ref*/
  -tr-rule-ref: selector("af|query::criterion-label-top");
  -tr-rule-ref: selector(".AFLabel:alias");
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
}
/* Styles the content of the search field */
af|query::criterion-content {
  text-align: left;
  vertical-align: top;
  padding:1px 8px 1px 0px;
}
/* Styles the content of the search field in rtl mode */
af|query::criterion-content:rtl {
  text-align: right;
  padding-left: 8px;
  padding-right: 0px;
}
/* Private -Styles the content operator of the search field */
af|query::criterion-content-operator {
  padding-right: 1px;
}
/* Private -Styles the content operator of the search field in rtl mode*/
af|query::criterion-content-operator:rtl {
  padding-left: 1px;
  padding-right: 0px;
}
/* Private -Styles the content value of the search field */
af|query::criterion-content-value {
}
/* Private -Styles the required attribute for the search field */
af|query::criterion-content-required {
  padding-left: 1px;
}
/* Private -Styles the required attribute for the search field */
af|query::criterion-content-required:rtl {
  padding-right: 1px;
}

/* Private -Styles the match case attribute for the search field */
af|query::criterion-content-match-case {
}

/* Styles the cell enclosing the delete icon of the search field
(used to remove criterion) */
af|query::criterion-delete-icon-cell {
  vertical-align:top;
  width:16px;
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
  -tr-rule-ref: selector(".AFEndPadding:alias");
}
/* Styles the delete icon of the search field */
af|query::criterion-delete-icon-style {
 -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image:url("/afr/delete_ena.png");
}
/* Styles the delete icon of the search field for rtl mode */
af|query::criterion-delete-icon-style:rtl {
  margin: 1px 1px 0px 8px;
}

@agent (touchScreen:none) {
  af|query::criterion-delete-icon-style:hover {
    background-image:url("/afr/delete_ovr.png");
  }
}

af|query::criterion-delete-icon-style:active {
  background-image:url("/afr/delete_dwn.png");
}

af|body:high-contrast af|query::criterion-delete-icon-cell {
  content:url("/afr/delete_ena.png");
}

af|body:high-contrast af|query::criterion-delete-icon-cell:active {
  content:url("/afr/delete_dwn.png");
}

/* Styles for the query group */
af|query::group-criterion-cell {
}

af|query::group-criterion-name-text {
 -tr-rule-ref: selector(".AFDefaultBoldFont:alias");
 -tr-rule-ref: selector(".AFVeryDarkForeground:alias");
}

af|query::group-criterion-name-cell {
}

af|query::group-criterion-delete-icon-cell {
}

/* Styles for query reorder dialog */
af|query::reorder-search-fields {
  display: inline-block;
  /*setting min width and height as width and height of container takes precedence */
  min-width: 100%;
  min-height: 100%;
}

af|query::move-top-icon-style,
af|query::move-up-icon-style,
af|query::move-down-icon-style,
af|query::move-bottom-icon-style {
  display: block;
  margin-right: 5px;
  margin-left: 5px;
  -tr-rule-ref: selector(".AFButtonBorder:alias");
  -tr-rule-ref: selector(".AFButtonBackground:alias");
  box-sizing: border-box; /* So to make it render with same height + width in every browser */
}

af|query::reorder-search-buttons {
  top: 10%;
  bottom: 0;
  right: 5%;
  display: inline-block;
  margin: auto;
  position:absolute;
  height:150px;
}

af|query::move-top-icon-style {
  margin: 0px 5px 2px;
}

af|query::move-up-icon-style {
  margin: 0 5px 8px;
}

af|query::move-down-icon-style {
  margin: 0 5px 2px;
}

af|query::move-bottom-icon-style {
  margin: 0 5px;
}

af|query::reorder-search-buttons:rtl {
  left: 5%;
  -tr-inhibit: right;
}

af|query::reorder-search-tree {
  width:96%;
  min-height: 150px;
  margin-bottom: 7px;
}
af|query::reorder-search-tree af|tree{
  width: auto;
}
/* Private - style to have the warning icon on delete/override warning dialog*/
af|query::delete-warning-icon,
af|query::override-warning-icon,
af|query::save-results-layout-warning-icon,
af|query::save-search-unsaved-warning-icon {
  content: url("/afr/title_warning.png");
  width: 16px;
  height: 16px;
}

af|query::override-error-icon {
  content: url("/afr/error.png");
  width: 16px;
  height: 16px;
}

af|query::move-top-icon,
af|query::move-up-icon,
af|query::move-down-icon,
af|query::move-bottom-icon {
  content: inhibit;
}

af|query::move-top-icon {
 content: url("/afr/shuttlereordertop_ena.png");
}

af|query::move-up-icon {
 content: url("/afr/shuttlereorderup_ena.png");
}

af|query::move-down-icon {
 content: url("/afr/shuttlereorderdown_ena.png");
}

af|query::move-bottom-icon {
 content: url("/afr/shuttlereorderbottom_ena.png");
}

af|query::move-top-icon-style {
  background-image: url("/afr/shuttlereordertop_ena.png");
}

af|query::move-up-icon-style {
  background-image: url("/afr/shuttlereorderup_ena.png");
}

af|query::move-down-icon-style {
  background-image: url("/afr/shuttlereorderdown_ena.png");
}

af|query::move-bottom-icon-style {
  background-image: url("/afr/shuttlereorderbottom_ena.png");
}

af|query::move-top-icon-style,
af|query::move-up-icon-style,
af|query::move-down-icon-style,
af|query::move-bottom-icon-style {
  display: block;
  width: 16px;
  height: 16px;
  cursor:default;
  background-repeat: no-repeat;
  margin-left: 10px;
}

af|quickQuery {
}

af|quickQuery::label {
  -tr-rule-ref: selector(".AFLabel:alias");
  -tr-rule-ref: selector(".AFEndTextAlign:alias");
}

af|quickQuery:vertical {
}

af|quickQuery:vertical::label {
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
}

af|quickQuery::criteria-items {
  padding-right: 1px;
}

af|quickQuery::criteria-items:rtl {
  padding-left: 1px;
}

af|quickQuery:vertical::criteria-items {
  padding-top: 1px;
  padding-bottom: 2px;
}

af|quickQuery::value {
  padding-right: 1px;
}

af|quickQuery::value:rtl {
  padding-left: 1px;
}

af|quickQuery::search-icon-cell {
  -tr-rule-ref: selector(".AFStartTextAlign:alias");
  width: 16px;
}

af|quickQuery::search-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image: url("/afr/go_ena.png");
}

af|quickQuery::search-icon-style:rtl {
  background-image: url("/afr/go_ena_rtl.png");
}

/* Private - style to have the disabled search icon */
af|quickQuery::disabled-search-icon-style {
  -tr-rule-ref: selector(".AFClickableImageAnchor:alias");
  background-image: url("/afr/go_dis.png");
}

af|quickQuery::disabled-search-icon-style:rtl {
  background-image: url("/afr/go_dis_rtl.png");
}

af|quickQuery::search-icon {
  content: inhibit;
}

af|quickQuery::end {
  -tr-rule-ref: selector(".AFStartPadding:alias");
}

/* hover/active in blafplus */

af|panelWindow,
af|dialog {
  border: solid 1px #8794A3;
  -tr-rule-ref: selector(".AFMediumBackground:alias");
  -tr-open-animation-duration: 300;
  -tr-animate: true;
  -tr-default-content-width: 250;
  -tr-default-content-height: 250;
}

af|dialog {
  -tr-button-type: unified;
}

af|dialog::footer-button-affirmative,
af|dialog::footer-button-cancel,
af|dialog::footer-button-no {
  /* empty by default */
}

/* The dialog/panelWindow needs to have a visible border in high contrast mode or else it will be
   difficult to visualize where they are located in Windows's high-contrast display mode for IE. */
af|body:high-contrast af|panelWindow,
af|body:high-contrast af|dialog {
  border: 2px solid black;
}
af|body:high-contrast af|panelWindow::header-start,
af|body:high-contrast af|dialog::header-start,
af|body:high-contrast af|panelWindow::header,
af|body:high-contrast af|dialog::header,
af|body:high-contrast af|panelWindow::header-end,
af|body:high-contrast af|dialog::header-end {
  border-bottom: 2px solid black;
}
af|body:high-contrast af|dialog::footer-start,
af|body:high-contrast af|dialog::footer,
af|body:high-contrast af|dialog::footer-end {
  border-top: 2px solid black;
}

af|panelWindow::resize-ghost,
af|dialog::resize-ghost {
  position: absolute;
  background-color: transparent;
  border: solid 1px #8794A3;
}

/* inline popup box shadow start */

/* Use CSS to provide the floating element shadow which would be provided via JavaScript and extra
   DOM in agents that can't support it via CSS. By default, use css3 box-shadow, as this works with
   ie 9+, ff 4+, chrome 10+, safari 5.1+. */
af|panelWindow:ltr,
af|dialog:ltr,
.AFPopupSelector:ltr,
.AFPopupMenuPopup:ltr,
.AFNoteWindow:ltr,
af|inputComboboxListOfValues::dropdown-popup-content:ltr {
  box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
}

af|panelWindow:rtl,
af|dialog:rtl,
.AFPopupSelector:rtl,
.AFPopupMenuPopup:rtl,
.AFNoteWindow:rtl,
af|inputComboboxListOfValues::dropdown-popup-content:rtl {
  box-shadow: -3px 3px 5px rgba(0,0,0,0.5);
}

/* chrome 9 and lower needs -webkit-box-shadow */
@agent webkit {
  af|panelWindow:ltr,
  af|dialog:ltr,
  .AFPopupSelector:ltr,
  .AFPopupMenuPopup:ltr,
  .AFNoteWindow:ltr,
  af|inputComboboxListOfValues::dropdown-popup-content:ltr {
    -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
  }
  af|panelWindow:rtl,
  af|dialog:rtl,
  .AFPopupSelector:rtl,
  .AFPopupMenuPopup:rtl,
  .AFNoteWindow:rtl,
  af|inputComboboxListOfValues::dropdown-popup-content:rtl {
    -webkit-box-shadow: -3px 3px 5px rgba(0,0,0,0.5);
  }
}

/* Inhibit box-shadow for non-supporting browsers versions: IE8 and lower, FF 3.6 (gecko 1.9.2) and lower. */
@agent ie and (version: 7), ie and (version: 8), gecko and (version: 1.*) {
  af|panelWindow:ltr,
  af|dialog:ltr,
  .AFPopupSelector:ltr,
  .AFPopupMenuPopup:ltr,
  .AFNoteWindow:ltr,
  af|inputComboboxListOfValues::dropdown-popup-content:ltr {
    -tr-inhibit: box-shadow;
  }
  af|panelWindow:rtl,
  af|dialog:rtl,
  .AFPopupSelector:rtl,
  .AFPopupMenuPopup:rtl,
  .AFNoteWindow:rtl,
  af|inputComboboxListOfValues::dropdown-popup-content:rtl {
    -tr-inhibit: box-shadow;
  }
}

/* firefox 3.5 (gecko 1.9.1) and 3.6 (1.9.2) use -moz-box-shadow. */
@agent gecko and (version: 1.9.1), gecko and (version: 1.9.2) {
  af|panelWindow:ltr,
  af|dialog:ltr,
  .AFPopupSelector:ltr,
  .AFPopupMenuPopup:ltr,
  .AFNoteWindow:ltr,
  af|inputComboboxListOfValues::dropdown-popup-content:ltr {
    -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
  }
  af|panelWindow:rtl,
  af|dialog:rtl,
  .AFPopupSelector:rtl,
  .AFPopupMenuPopup:rtl,
  .AFNoteWindow:rtl,
  af|inputComboboxListOfValues::dropdown-popup-content:rtl {
    -moz-box-shadow: -3px 3px 5px rgba(0,0,0,0.5);
  }
}

/* inline selector box shadow end */

af|panelWindow::main,
af|dialog::main {
  position:relative;
  width:100%;
  z-index:2;
}

af|panelWindow::header-start,
af|dialog::header-start {
  width:4px;
  height:20px;
  font-size:0px;
}

af|panelWindow::header-start:resizable,
af|dialog::header-start:resizable {
  cursor: nw-resize;
}

af|panelWindow::header-start:resizable:rtl,
af|dialog::header-start:resizable:rtl {
  cursor: ne-resize;
}

af|panelWindow::header,
af|dialog::header {
  white-space:nowrap;
  height: 20px;
}

af|panelWindow::header:resizable,
af|dialog::header:resizable {
  cursor:n-resize;
}

af|panelWindow::header-end,
af|dialog::header-end {
  width:4px;
  height:20px;
  font-size:0px;
}

af|panelWindow::header-end:resizable,
af|dialog::header-end:resizable {
  cursor:ne-resize;
}


af|panelWindow::header-end:resizable:rtl,
af|dialog::header-end:resizable:rtl {
  cursor:nw-resize;
}

/* This is a PRIVATE skinning key that is used to make the title occupy 100% the space
   between the icon and the close region*/
af|panelWindow::header-content-center,
af|dialog::header-content-center {
  width:100%;
  padding-left:2px;
  padding-right:2px;
  cursor:default;
}

af|panelWindow::content,
af|dialog::content {
  -tr-rule-ref: selector(".AFTextBackground:alias");
}

af|panelWindow::content-center,
af|dialog::content-center {
  width: auto;
  height: auto;
}

af|dialog::content:focus,
af|panelWindow::content:focus {
  outline: none;
}

af|panelWindow::content-start,
af|dialog::content-start {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  width:3px;
  font-size:0px;
}

af|panelWindow::content-start:resizable,
af|dialog::content-start:resizable {
  cursor:w-resize;
}

af|panelWindow::content-start:resizable:rtl,
af|dialog::content-start:resizable:rtl {
  border-left-width:0px;
  cursor:e-resize;
}

af|panelWindow::content-start:rtl,
af|dialog::content-start:rtl {
  border-left-width:0px;
}

af|panelWindow::content-end,
af|dialog::content-end {
  -tr-rule-ref: selector(".AFTextBackground:alias");
  width:3px;
  font-size:0px;
}

af|panelWindow::content-end:resizable,
af|dialog::content-end:resizable {
  cursor:e-resize;
}

af|panelWindow::content-end:resizable:rtl,
af|dialog::content-end:resizable:rtl {
  cursor:w-resize;
}

af|panelWindow::content-end:rtl,
af|dialog::content-end:rtl {
  border-right-width:0px;
}

af|panelWindow::footer-start:resizable,
af|dialog::footer-start:resizable {
  cursor:sw-resize;
}

af|panelWindow::footer-start:resizable:rtl,
af|dialog::footer-start:resizable:rtl {
  cursor:se-resize;
}

af|panelWindow::footer:resizable,
af|dialog::footer:resizable {
 cursor:s-resize;
}

af|panelWindow::footer-end:resizable,
af|dialog::footer-end:resizable {
  cursor:se-resize;
}

af|panelWindow::footer-end:resizable:rtl,
af|dialog::footer-end:resizable:rtl {
  cursor:sw-resize;
}

af|panelWindow::footer-start {
  height:4px;
  width:4px;
  font-size:0px;
}

af|panelWindow::footer {
  height:4px;
  font-size:0px;
}

af|panelWindow::footer-end {
  height:4px;
  width:4px;
  font-size:0px;
}

af|dialog::footer-start {
  width:4px;
  height:27px;
}

af|dialog::footer {
  height:27px;
}

af|dialog::footer-end {
  width:4px;
  height:27px;
}

af|dialog::footer-content,
af|panelWindow::footer-content
{
  width:100%
}

af|dialog::footer-content {
  padding-left:20px;
  padding-right:6px;
  padding-top:1px;
  padding-bottom:1px;
  white-space:nowrap;
  text-align:right;
}

af|dialog::footer-content:rtl {
  padding-right:20px;
  padding-left:6px;
  text-align:left;
}

af|panelWindow::close-icon-style,
af|dialog::close-icon-style {
  display: block;
  width: 14px;
  height: 14px;
  cursor: default;
  margin-top: 2px;
  /*background-image: url("/afr/closeDialog_n.png");*/
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAB/UlEQVQoUz2SvWtUQRTFz7w30SS7y26CiTaLNloYexPBkE5R2cpCm6RRt0hELBZhycbggoEUMeBHbwpFxDLEQvB/8J8IWLmp1p2P5znz1gxcZt68+d177pmxNzcPXwHoMVAUkVHAGJPmIhbwziNwHUNA5HcRoo72raDPnTv6SIP/EGKEj5oJcu0CZ4ZmxZOdLz2Bp0PJIrMLKCGUh7VOUJlESqwklZWKFKt737H7eBk2s5jIsgQ86H7E/ov7yLMcmckRnBMYx/JKSGN97widtRtoNhpYe/mJfTq0Nw/Qfd7CBe45PyQ4liWZu4+Wsb5/BMeD2+9/wI9GcCPH2WOldRXHfwaoTVZQsIdTUJIm8hyd1SVsfxDkEqRYvHUZ1TOTmK3UklxjLCwvgCYw2J/lRnNmBv5vCQiOrKaEl87N4Xy9DkMQMKxIjckx2c4EqacxFAhF/v/57RcWnjaTo5lMjAFWMv/b/ZDuOV64oOu3ryRXBWm8e3uIjY0W5lk1MJkVrWoC39Dy9tYBVu4tsKezuEh5qiRo8e41/D4ZoDo1rScmkNV8KVWNd5+1cDw4wex0FfONekqoSoIaNMey3yBXY+qNQTgjqHuqTVWQG112hmiAuXqDlSqEMia3fK8e1g1H/fbrrz0l0EV7N0wP2RBEYaB9vV1dtNRF72iq6f8DtQdmd4FNEAkAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
}

af|panelWindow::pin-icon-style,
af|dialog::pin-icon-style {
  display: block;
  width: 14px;
  height: 14px;
  cursor: default;
  margin-top: 2px;
  background-image: url("/afr/pin_ena.png");
  background-repeat: no-repeat;
}

/* Icon hook for users to replace close-icon-style with another img or text */
af|panelWindow::close-icon,
af|dialog::close-icon,
af|panelWindow::pin-icon,
af|dialog::pin-icon {
  -tr-inhibit: all;
  content: inhibit;
}

af|panelWindow::resize-icon-style,
af|dialog::resize-icon-style {
  display: none;
}

/* Icon hook for users to replace resize-icon-style with another img or text */
af|panelWindow::resize-icon,
af|dialog::resize-icon {
  content: inhibit;
}

af|panelWindow::resize-icon-region,
af|dialog::resize-icon-region {
  display:none;
}

af|panelWindow::title,
af|dialog::title {
  margin-top:2px;
  cursor:default;
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
  white-space:nowrap;
}

af|panelWindow::icon-region,
af|dialog::icon-region {
  margin-top:2px;
  margin-right:2px;
  margin-bottom:-1px;
  height: 16px;
  width: 16px;
  overflow: hidden;
}

af|panelWindow::icon-region:rtl,
af|dialog::icon-region:rtl{
  margin-left:2px;
  margin-right:0px;
}

/* container holding dialog title bar icons aligned to end  */
af|panelWindow::close-icon-region,
af|dialog::close-icon-region,
af|panelWindow::pin-icon-region,
af|dialog::pin-icon-region,
af|dialog::dynamic-help-icon-container,
af|panelWindow::dynamic-help-icon-container {
  margin-top: 0px;
  margin-left:2px;
  margin-bottom:-1px;
  height: 17px;
  width: 17px;
  overflow: hidden;
}

/* Firefox (only) has problems displaying a focus ring around elments inside an area that has
   overflow hidden. It doesn't look like overflow hidden is really needed on these elements, but
   only undoing the firefox case as 1) this appears to be a firefox bug, and 2) overflow hidden
   has been here since rvn 29069 in 2008. */
@agent gecko {
  af|panelWindow::close-icon-region,
  af|dialog::close-icon-region,
  af|panelWindow::pin-icon-region,
  af|dialog::pin-icon-region,
  af|dialog::dynamic-help-icon-container,
  af|panelWindow::dynamic-help-icon-container {
    -tr-inhibit: overflow;
  }
}

/* container holding dialog title bar icons aligned to end, RTL  */
af|panelWindow::close-icon-region:rtl,
af|dialog::close-icon-region:rtl,
af|panelWindow::pin-icon-region:rtl,
af|dialog::pin-icon-region:rtl,
af|dialog::dynamic-help-icon-container:rtl,
af|panelWindow::dynamic-help-icon-container:rtl {
  margin-left:0px;
  margin-right:2px;
}

af|panelWindow::inactive-background,
af|dialog::inactive-background{
  position:absolute;
  z-index:1;
  display:none;
 }

af|panelWindow:inactive af|panelWindow::inactive-background,
af|dialog:inactive af|dialog::inactive-background{
  display:block;
}

af|panelWindow:drag af|panelWindow::main,
af|dialog:drag af|dialog::main{
  /* opacity:0.5;    removed due to performance bug# 6953024 */
}

@agent ie {
  af|panelWindow:drag af|panelWindow::main,
  af|dialog:drag af|dialog::main{
    filter:alpha(opacity:50);
  }
}

af|panelWindow:inactive af|panelWindow::main,
af|dialog:inactive af|dialog::main{
  opacity:0.75;
}

@agent ie {
  af|panelWindow:inactive af|panelWindow::main,
  af|dialog:inactive af|dialog::main{
    filter:alpha(opacity:75);
  }
}


/* fixed is set by code for mozilla */
.AFZOrderLayerContainer {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:1px;
}
.AFZOrderLayerContainer:rtl {
  left: auto;
  right: 0px;
}
.AFZOrderLayer {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:1px;
}
.AFZOrderLayer:rtl {
  left: auto;
  right: 0px;
}

/* global style applied to dynamic iframes placed behind floating elements to
   prevent bleed-through. */
.AFMaskingFrame {
  position:absolute;
  background-color: transparent;
  border-style: none;
  /* opacity purposely removed for FF versus IE */
}

@agent gecko {
  .AFMaskingFrame
  {
    overflow:auto;
  }
}

@agent ie {
  .AFMaskingFrame
  {
    filter:alpha(opacity:01);
  }
}

/* global style used by inline modal dialog(s) and panelWindow(s) */
.AFModalGlassPane {
  position: fixed;
  background-color: #999999;
  opacity: 0.5;
}

@agent ie {
  .AFModalGlassPane
  {
    filter:alpha(opacity:50);
  }
}

/* start of panelList styles */

af|panelList {
  line-height: normal;
}

/* You can set top/bottom margin here to determine space between items. The line-height on
   af|panelList is used for spacing between rows of a wrapped listitem. */
af|panelList::item {
}

/* default font's aren't cascading in email mode */
@agent email {
  af|panelList {
    -tr-rule-ref: selector(".AFDefaultFont:alias");
  }
}

af|panelList::link {
  text-decoration:none;
}

@agent (touchScreen:none) {
  af|panelList::link:hover {
    text-decoration:underline;
  }
}

/* Extend the "::unordered-list" entry from Trinidad which maps to "UL" so that huge margins aren't
   used.  If you are using roman numerals for your bullet style, you may want to use a larger
   padding for this element.  However, all other bullet styles work best with this smaller
   padding. */
@agent gecko {
  af|panelList::unordered-list:ltr {
    padding-left: 2.5em;
  }
  af|panelList::unordered-list:rtl {
    padding-right: 2.5em;
  }
}
/* Pure IE8 follows Firefox model, IE7 needs margin instead */
@agent ie {
  af|panelList::unordered-list:ltr {
    margin-left: 0;
    padding-left: 2.5em;
  }
  af|panelList::unordered-list:rtl {
    margin-right: 0;
    padding-right: 2.5em;
  }
}
@agent ie and (version: 7.0) {
  af|panelList::unordered-list:ltr {
    margin-left: 2.5em;
    padding-left: 0;
  }
  af|panelList::unordered-list:rtl {
    margin-right: 2.5em;
    padding-right: 0;
  }
}

/* end of panelList styles */

/* Active data twinkle styles for table and treeTable data-cell elements.  There is also a
   twinkle-off state that the cell changes to after the twinkle timeout has elapsed.
   For further combinations, you may want to define different coloring for table or treeTable cells
   that are in their "selected" or "inactive" states. */
af|table af|table::data-row af|column::data-cell:twinkle-on,
af|table af|table::data-row af|column::banded-data-cell:twinkle-on,
af|treeTable af|table::data-row af|column::data-cell:twinkle-on,
af|treeTable af|table::data-row af|column::banded-data-cell:twinkle-on {
  -tr-rule-ref: selector(".AFTwinkleBackground:alias");
  -tr-rule-ref: selector(".AFTwinkleForeground:alias");
}
af|body:high-contrast af|table af|table::data-row af|column::data-cell:twinkle-on,
af|body:high-contrast af|table af|table::data-row af|column::banded-data-cell:twinkle-on,
af|body:high-contrast af|treeTable af|table::data-row af|column::data-cell:twinkle-on,
af|body:high-contrast af|treeTable af|table::data-row af|column::banded-data-cell:twinkle-on {
  -tr-rule-ref: selector(".AFHighContrastTwinkleBackground:alias");
}

/* Active data twinkle styles for tree's node-stamp elements. */
af|tree::data-cell:twinkle-on af|tree::node-stamp-text {
  -tr-rule-ref: selector(".AFTwinkleBackground:alias");
  -tr-rule-ref: selector(".AFLinkForeground:alias");
  border: 1px solid #003399;
}
af|body:high-contrast af|tree::data-cell:twinkle-on af|tree::node-stamp-text {
  -tr-rule-ref: selector(".AFHighContrastTwinkleBackground:alias");
}
/* Active data twinkle style for active outputtext, image, and commandToolbarButton */
af|activeOutputText:twinkle-on,
af|button:twinkle-on,
af|commandToolbarButton:twinkle-on,
af|image:twinkle-on {
  -tr-rule-ref: selector(".AFTwinkleBackground:alias");
  -tr-rule-ref: selector(".AFTwinkleForeground:alias");
}

af|inputNumberSlider,
af|inputRangeSlider {
}

/* due to a composite rendering structure when in
screen reader mode, we need the weird duel class keys  */
af|inputNumberSlider:read-only::content,
af|inputNumberSpinbox:read-only af|inputNumberSlider::content,
af|inputRangeSlider:read-only::content,
af|inputNumberSpinbox:read-only af|inputRangeSlider::content,
af|inputNumberSlider:read-only:vertical::content,
af|inputRangeSlider:read-only:vertical::content,
af|inputNumberSlider:printable::content,
af|inputRangeSlider:printable::content {
  height: auto;
  margin: 0px;
}
af|inputNumberSlider::content,
af|inputRangeSlider::content {
  width: 13.49em;
  height: 50px;
  position: relative;
}

/* need room for the play button */
af|inputNumberSlider:playable::content,
af|inputRangeSlider:playable::content {
  height: 67px;
}
/* in email mode, the height remains in read-only mode for some reason, so take it out */
@agent email {
  af|inputNumberSlider::content,
  af|inputRangeSlider::content {
    -tr-inhibit: width;
    -tr-inhibit: height;
    -tr-inhibit: position;
    -tr-rule-ref: selector(".AFDefaultFont:alias");
  }
}

af|inputNumberSlider::minus-icon-style,
af|inputRangeSlider::minus-icon-style {
  height: 14px;
  width: 14px;
  position: absolute;
  left: 0px;
  background-image: url('/afr/slider_decreasebutcon_m_n.png');
}
af|inputNumberSlider::minus-icon-style:rtl,
af|inputRangeSlider::minus-icon-style:rtl {
  left: auto;
  right: 0px;
}

af|inputNumberSlider::plus-icon-style,
af|inputRangeSlider::plus-icon-style {
  background-image: url('/afr/slider_increasebutcon_m_n.png');
  height: 14px;
  width: 14px;
  position: absolute;
  right: 0px;
}

af|inputNumberSlider::plus-icon-style:rtl,
af|inputRangeSlider::plus-icon-style:rtl {
  right: auto;
  left: 0px;
}

af|inputNumberSlider::play-icon-style,
af|inputRangeSlider::play-icon-style {
  background-image: url('/afr/play_ena.png');
  position: absolute;
  left: 50%;
  margin-left: -9px;
  bottom: 0px;
  height: 17px;
  width: 18px;
}
af|inputNumberSlider::pause-icon-style,
af|inputRangeSlider::pause-icon-style {
  background-image: url('/afr/pause_ena.png');
  position: absolute;
  left: 50%;
  margin-left: -9px;
  bottom: 0px;
  height: 17px;
  width: 18px;
  visibility: hidden;
}

af|inputNumberSlider:vertical::pause-icon-style,
af|inputRangeSlider:vertical::pause-icon-style {
  margin-left: 0px;
  bottom: -17px;
}

@agent (touchScreen:none) {
  af|inputNumberSlider::play-icon-style:hover,
  af|inputRangeSlider::play-icon-style:hover {
    background-image: url('/afr/play_ovr.png');
  }
  af|inputNumberSlider::play-icon-style:hover:active,
  af|inputRangeSlider::play-icon-style:hover:active {
    background-image: url('/afr/play_dwn.png');
  }
  af|inputNumberSlider:disabled::play-icon-style:hover,
  af|inputNumberSlider::play-icon-style:hover:disabled,
  af|inputRangeSlider:disabled::play-icon-style:hover,
  af|inputRangeSlider::play-icon-style:hover:disabled {
    background-image: url('/afr/play_dis.png');
  }
  af|inputNumberSlider::pause-icon-style:hover,
  af|inputRangeSlider::pause-icon-style:hover {
    background-image: url('/afr/pause_ovr.png');
  }
  af|inputNumberSlider::pause-icon-style:hover:active,
  af|inputRangeSlider::pause-icon-style:hover:active {
    background-image: url('/afr/pause_dwn.png');
  }
  af|inputNumberSlider:disabled::pause-icon-style:hover,
  af|inputNumberSlider::pause-icon-style:hover:disabled,
  af|inputRangeSlider:disabled::pause-icon-style:hover,
  af|inputRangeSlider::pause-icon-style:hover:disabled {
    background-image: url('/afr/pause_dis.png');
  }
}

af|inputNumberSlider::play-icon-style:active,
af|inputRangeSlider::play-icon-style:active {
  background-image: url('/afr/play_dwn.png');
}
af|inputNumberSlider:disabled::play-icon-style,
af|inputNumberSlider::play-icon-style:disabled,
af|inputRangeSlider:disabled::play-icon-style,
af|inputRangeSlider::play-icon-style:disabled {
  background-image: url('/afr/play_dis.png');
}
af|inputNumberSlider::pause-icon-style:active,
af|inputRangeSlider::pause-icon-style:active {
  background-image: url('/afr/pause_dwn.png');
}
af|inputNumberSlider:disabled::pause-icon-style,
af|inputNumberSlider::pause-icon-style:disabled,
af|inputRangeSlider:disabled::pause-icon-style,
af|inputRangeSlider::pause-icon-style:disabled {
  background-image: url('/afr/pause_dis.png');
}

af|inputNumberSlider::play-icon-style:rtl,
af|inputRangeSlider::play-icon-style:rtl {
  background-image: url('/afr/play_ena_rtl.png');
}
@agent (touchScreen:none) {
  af|inputNumberSlider::play-icon-style:hover:rtl,
  af|inputRangeSlider::play-icon-style:hover:rtl {
    background-image: url('/afr/play_ovr_rtl.png');
  }
  af|inputNumberSlider::play-icon-style:hover:active:rtl,
  af|inputRangeSlider::play-icon-style:hover:active:rtl {
    background-image: url('/afr/play_dwn_rtl.png');
  }
  af|inputNumberSlider:disabled::play-icon-style:hover:rtl,
  af|inputNumberSlider::play-icon-style:hover:disabled:rtl,
  af|inputRangeSlider:disabled::play-icon-style:hover:rtl,
  af|inputRangeSlider::play-icon-style:hover:disabled:rtl {
    background-image: url('/afr/play_dis_rtl.png');
  }
}
af|inputNumberSlider::play-icon-style:active:rtl,
af|inputRangeSlider::play-icon-style:active:rtl {
  background-image: url('/afr/play_dwn_rtl.png');
}
af|inputNumberSlider:disabled::play-icon-style:rtl,
af|inputNumberSlider::play-icon-style:disabled:rtl,
af|inputRangeSlider:disabled::play-icon-style:rtl,
af|inputRangeSlider::play-icon-style:disabled:rtl {
  background-image: url('/afr/play_dis_rtl.png');
}
af|inputNumberSlider:playing::play-icon-style,
af|inputRangeSlider:playing::play-icon-style {
  visibility: hidden;
}
af|inputNumberSlider:playing::pause-icon-style,
af|inputRangeSlider:playing::pause-icon-style {
  visibility: visible;
}
/* pause icon for play button when animation is playing */
/*
af|inputNumberSlider:playing::play-icon-style,
af|inputRangeSlider:playing::play-icon-style {
  background-image: url('/afr/pause_ena.png');
}
@agent (touchScreen:none) {
  af|inputNumberSlider:playing::play-icon-style:hover,
  af|inputRangeSlider:playing::play-icon-style:hover {
    background-image: url('/afr/pause_ovr.png');
  }
  af|inputNumberSlider:playing::play-icon-style:hover:active,
  af|inputRangeSlider:playing::play-icon-style:hover:active {
    background-image: url('/afr/pause_dwn.png');
  }
  af|inputNumberSlider:playing:disabled::play-icon-style:hover,
  af|inputNumberSlider:playing::play-icon-style:hover:disabled,
  af|inputRangeSlider:playing:disabled::play-icon-style:hover,
  af|inputRangeSlider:playing::play-icon-style:hover:disabled {
    background-image: url('/afr/pause_dis.png');
  }
}
af|inputNumberSlider:playing::play-icon-style:active,
af|inputRangeSlider:playing::play-icon-style:active {
  background-image: url('/afr/pause_dwn.png');
}
af|inputNumberSlider:playing:disabled::play-icon-style,
af|inputNumberSlider:playing::play-icon-style:disabled,
af|inputRangeSlider:playing:disabled::play-icon-style,
af|inputRangeSlider:playing::play-icon-style:disabled {
  background-image: url('/afr/pause_dis.png');
}

af|inputNumberSlider:playing::play-icon-style:rtl,
af|inputRangeSlider:playing::play-icon-style:rtl {
  background-image: url('/afr/pause_ena_rtl.png');
}
@agent (touchScreen:none) {
  af|inputNumberSlider:playing::play-icon-style:hover:rtl,
  af|inputRangeSlider:playing::play-icon-style:hover:rtl {
    background-image: url('/afr/pause_ovr_rtl.png');
  }
  af|inputNumberSlider:playing::play-icon-style:hover:active:rtl,
  af|inputRangeSlider:playing::play-icon-style:hover:active:rtl {
    background-image: url('/afr/pause_dwn_rtl.png');
  }
  af|inputNumberSlider:playing:disabled::play-icon-style:hover:rtl,
  af|inputNumberSlider:playing::play-icon-style:hover:disabled:rtl,
  af|inputRangeSlider:playing:disabled::play-icon-style:hover:rtl,
  af|inputRangeSlider:playing::play-icon-style:hover:disabled:rtl {
    background-image: url('/afr/pause_dis_rtl.png');
  }
}
af|inputNumberSlider:playing::play-icon-style:active:rtl,
af|inputRangeSlider:playing::play-icon-style:active:rtl {
  background-image: url('/afr/pause_dwn_rtl.png');
}
af|inputNumberSlider:playing:disabled::play-icon-style:rtl,
af|inputNumberSlider:playing::play-icon-style:disabled:rtl,
af|inputRangeSlider:playing:disabled::play-icon-style:rtl,
af|inputRangeSlider:playing::play-icon-style:disabled:rtl {
  background-image: url('/afr/pause_dis_rtl.png');
}
*/
af|inputNumberSlider::thumb-icon,
af|inputRangeSlider::thumb-icon,
af|inputNumberSlider::thumb-disabled-icon,
af|inputRangeSlider::thumb-disabled-icon,
af|inputNumberSlider::minus-icon,
af|inputRangeSlider::minus-icon,
af|inputNumberSlider::minus-disabled-icon,
af|inputRangeSlider::minus-disabled-icon,
af|inputNumberSlider::plus-icon,
af|inputRangeSlider::plus-icon,
af|inputNumberSlider::plus-disabled-icon,
af|inputRangeSlider::plus-disabled-icon,
af|inputNumberSlider::play-icon,
af|inputNumberSlider::play-disabled-icon,
af|inputRangeSlider::play-icon,
af|inputRangeSlider::play-disabled-icon {
  content: inhibit;
}

af|inputNumberSlider::bar-outer-border,
af|inputRangeSlider::bar-outer-border {
  position: absolute;
  margin: 3px 0px;
  font-size: 1px;
  line-height: 1px;
  left: 14px;
  right: 14px;
  border: 1px solid black;
  cursor: default;
-tr-rule-ref: selector(".AFTextBackground:alias");
}

af|inputNumberSlider::bar-inner-border,
af|inputRangeSlider::bar-inner-border {
  border: 1px solid black;
  border-bottom-width: 0px
}

af|inputNumberSlider::bar,
af|inputRangeSlider::bar {
  position: relative;
  height: 4px;
}

af|inputRangeSlider::range {
  height: 100%;
  -tr-rule-ref: selector(".AFDarkBackground:alias");
  position: absolute;
}
/* styles the thumb icon */
af|inputNumberSlider::thumb-icon-style,
af|inputRangeSlider::thumb-icon-style {
  background-image: url('/afr/slider_thumb_vert_m_n.png');
  height: 14px;
  width: 9px;
  top: -4px;
  cursor: default;
  position: absolute;
}

af|inputNumberSlider::ticks,
af|inputRangeSlider::ticks {
  position: absolute;
  top: 100%;
  left: 0%;
  border-collapse: collapse;
  width: 100%;
  height: 6px;
}

af|inputNumberSlider::ticks:rtl,
af|inputRangeSlider::ticks:rtl {
  position: absolute;
  top: 100%;
  left: auto;
  right: 0%;
  border-collapse: collapse;
  width: 100%;
  height: 6px;
}

af|inputNumberSlider::zero-tick,
af|inputRangeSlider::zero-tick,
af|inputNumberSlider::major-tick,
af|inputRangeSlider::major-tick,
af|inputNumberSlider::minor-tick,
af|inputRangeSlider::minor-tick {
  border-left: 1px solid black;
  height: 3px;
  position: absolute;
  top: 0px;
}

af|inputNumberSlider::zero-tick,
af|inputRangeSlider::zero-tick,
af|inputNumberSlider::major-tick,
af|inputRangeSlider::major-tick {
  height: 6px;
}

af|inputNumberSlider::tick-value-zero,
af|inputRangeSlider::tick-value-zero,
af|inputNumberSlider::tick-value,
af|inputRangeSlider::tick-value {
  font-size: 9px;
  -tr-rule-ref: selector(".AFDarkForeground:alias");
  line-height: 9px;
  top: 100%;
  position: absolute;
  padding-top: 2px;
}

af|inputNumberSlider::thumb-value-line,
af|inputRangeSlider::thumb-value-line {
  border-left: 1px solid black;
  height: 13px;
  position: absolute;
  left: 50%;
  top: 100%;
}

af|inputNumberSlider::thumb-value,
af|inputRangeSlider::thumb-value {
  position: relative;
  left: -50%;
  top: 100%;
  border-top: solid 1px black;
  padding-top: 2px;
  line-height: 9px;
  font-size: 9px;
  -tr-rule-ref: selector(".AFErrorTextForeground:alias");
}
@agent ie {
  af|inputNumberSlider::thumb-value,
  af|inputRangeSlider::thumb-value {
    zoom: 1;
  }
}

/* vertical styles */
af|inputNumberSlider:vertical,
af|inputRangeSlider:vertical{
}

af|inputNumberSlider:vertical::content,
af|inputRangeSlider:vertical::content {
  height: 13.49em;
  width: 75px;
}

/* need additional space for the play button */
af|inputNumberSlider:vertical:playable,
af|inputRangeSlider:vertical:playable {
  margin-bottom: 18px;
}
af|inputNumberSlider:vertical::play-icon-style,
af|inputRangeSlider:vertical::play-icon-style {
  margin-left: 0;
  bottom: -17px;
}

af|inputNumberSlider:vertical::minus-icon-style,
af|inputRangeSlider:vertical::minus-icon-style {
  left: auto;
  right: 0;
  bottom: 0;
}

af|inputNumberSlider:vertical::minus-icon-style:rtl,
af|inputRangeSlider:vertical::minus-icon-style:rtl {
  left: 0;
  right: auto;
}

af|inputNumberSlider:vertical::minus-icon,
af|inputRangeSlider:vertical::minus-icon {
content: inhibit;
}


af|inputNumberSlider:vertical::plus-icon-style,
af|inputRangeSlider:vertical::plus-icon-style {
  left: auto;
  right: 0;
  top: 0;
}

af|inputNumberSlider:vertical::plus-icon-style:rtl,
af|inputRangeSlider:vertical::plus-icon-style:rtl {
  left: 0;
  right: auto;
}

af|inputNumberSlider:vertical::plus-icon,
af|inputRangeSlider:vertical::plus-icon {
  content: inhibit;
}

af|inputNumberSlider:vertical::bar-outer-border,
af|inputRangeSlider:vertical::bar-outer-border {
  left: auto;
  margin: 1px 3px;
  right: 0;
  top: 12px;
  bottom: 14px;
  width: 5px;
}

af|inputNumberSlider:vertical::bar-outer-border:rtl,
af|inputRangeSlider:vertical::bar-outer-border:rtl {
  left: 0;
  right: auto;
}

af|inputNumberSlider:vertical::bar-inner-border,
af|inputRangeSlider:vertical::bar-inner-border {
  height: 100%;
  position: absolute;
  width: 4px;
  border-bottom-width: 1px;
  border-left-width: 0px;
}

af|inputNumberSlider:vertical::bar-inner-border:rtl,
af|inputRangeSlider:vertical::bar-inner-border:rtl {
  border-bottom-width: 1px;
  border-right-width: 0px;
  border-left-width: 1px;
}

af|inputNumberSlider:vertical::bar,
af|inputRangeSlider:vertical::bar {
  width: 4px;
  height: 100%;
}

af|inputRangeSlider:vertical::range {
  width: 100%;
  -tr-rule-ref: selector(".AFDarkAccentBackground:alias");
  height: auto;
}

af|inputNumberSlider:vertical::thumb-icon-style,
af|inputRangeSlider:vertical::thumb-icon-style {
  background-image: url('/afr/slider_thumb_m_n.png');
  top: auto;
  height: 9px;
  width: 14px;
  right: -4px;
}

af|inputNumberSlider:vertical::thumb-icon-style:rtl,
af|inputRangeSlider:vertical::thumb-icon-style:rtl {
  background-image: url('/afr/slider_thumb_m_n_rtl.png');
  right: auto;
  left: -4px;
}

af|inputNumberSlider:vertical::thumb-icon,
af|inputRangeSlider:vertical::thumb-icon {
  content: inhibit;
}

af|inputNumberSlider:vertical::ticks,
af|inputRangeSlider:vertical::ticks {
  top: 0%;
  left: -6px;
  right: 100%;
  width: 6px;
  height: 100%;
}

af|inputNumberSlider:vertical::ticks:rtl,
af|inputRangeSlider:vertical::ticks:rtl {
  right: -6px;
  left: 100%;
}


af|inputNumberSlider:vertical::zero-tick,
af|inputRangeSlider:vertical::zero-tick,
af|inputNumberSlider:vertical::major-tick,
af|inputRangeSlider:vertical::major-tick,
af|inputNumberSlider:vertical::minor-tick,
af|inputRangeSlider:vertical::minor-tick {
  border-top: 1px solid black;
  width: 3px;
  right: 0px;
  height: 0px;
}

af|inputNumberSlider:vertical::zero-tick:rtl,
af|inputRangeSlider:vertical::zero-tick:rtl,
af|inputNumberSlider:vertical::major-tick:rtl,
af|inputRangeSlider:vertical::major-tick:rtl,
af|inputNumberSlider:vertical::minor-tick:rtl,
af|inputRangeSlider:vertical::minor-tick:rtl {
  right: auto;
  left: 0px;
}


af|inputNumberSlider:vertical::zero-tick,
af|inputRangeSlider:vertical::zero-tick,
af|inputNumberSlider:vertical::major-tick,
af|inputRangeSlider:vertical::major-tick {
  width: 6px;
  height: auto;
}

af|inputNumberSlider:vertical::tick-value-zero,
af|inputRangeSlider:vertical::tick-value-zero,
af|inputNumberSlider:vertical::tick-value,
af|inputRangeSlider:vertical::tick-value {
  right: 6px;
  top: -0.55em;
  left: auto;
  padding-top: 0px;
  padding-right: 4px;
  text-align: right;
}

af|inputNumberSlider:vertical::tick-value-zero:rtl,
af|inputRangeSlider:vertical::tick-value-zero:rtl,
af|inputNumberSlider:vertical::tick-value:rtl,
af|inputRangeSlider:vertical::tick-value:rtl {
  right: auto;
  left: 6px;
  padding-right: 0px;
  padding-left: 4px;
  text-align: left;
}

af|inputNumberSlider:vertical::thumb-value,
af|inputRangeSlider:vertical::thumb-value {
  left: auto;
  top: auto;
  bottom: 0.55em;
  right: 100%;
  padding-top: 0px;
  padding-right: 4px;
  text-align: right;
  border-top-width: 0px;
  border-right: solid 1px black;
}

af|inputNumberSlider:vertical::thumb-value:rtl,
af|inputRangeSlider:vertical::thumb-value:rtl {
  left: 100%;
  right: auto;
  padding-right: 0;
  padding-left: 4px;
  text-align: left;
  border-right-width: 0px;
  border-left: solid 1px black;
}

af|inputNumberSlider:vertical::thumb-value-line,
af|inputRangeSlider:vertical::thumb-value-line {
  top: 50%;
  left: auto;
  right: 100%;
  width: 22px;
  height: 10px;

  border-left-width: 0px;
  border-top: solid 1px black;
}

af|inputNumberSlider:vertical::thumb-value-line:rtl,
af|inputRangeSlider:vertical::thumb-value-line:rtl {
  left: 100%;
  right: auto;
  border-right-width: 0px;
}


/* disabled styles */

af|inputNumberSlider:vertical:disabled::thumb-icon-style,
af|inputRangeSlider:vertical:disabled::thumb-icon-style {
  background-image: url('/afr/slider_thumb_m_d.png');
}

af|inputNumberSlider:vertical:disabled::thumb-icon-style:rtl,
af|inputRangeSlider:vertical:disabled::thumb-icon-style:rtl {
  background-image: url('/afr/slider_thumb_m_d_rtl.png');
}

af|inputNumberSlider:vertical:disabled::thumb-icon,
af|inputRangeSlider:vertical:disabled::thumb-icon {
  content: inhibit;
}


af|inputNumberSlider:disabled::minus-icon-style,
af|inputRangeSlider:disabled::minus-icon-style,
af|inputNumberSlider::minus-icon-style:disabled,
af|inputRangeSlider::minus-icon-style:disabled {
  background-image: url('/afr/slider_decreasebutcon_m_d.png');
}

af|inputNumberSlider:disabled::minus-icon,
af|inputRangeSlider:disabled::minus-icon {
  content: inhibit;
}

af|inputNumberSlider:disabled::plus-icon-style,
af|inputRangeSlider:disabled::plus-icon-style,
af|inputNumberSlider::plus-icon-style:disabled,
af|inputRangeSlider::plus-icon-style:disabled {
  background-image: url('/afr/slider_increasebutcon_m_d.png');
}

af|inputNumberSlider:disabled::plus-icon,
af|inputRangeSlider:disabled::plus-icon {
  content: inhibit;
}

af|inputNumberSlider:disabled::thumb-icon-style,
af|inputRangeSlider:disabled::thumb-icon-style {
  background-image: url('/afr/slider_thumb_vert_m_d.png');
}

af|inputNumberSlider:disabled::thumb-icon,
af|inputRangeSlider:disabled::thumb-icon {
  content: inhibit;
}

af|inputNumberSlider:disabled::ticks,
af|inputNumberSlider:disabled::bar-inner-border,
af|inputRangeSlider:disabled::ticks,
af|inputRangeSlider:disabled::bar-inner-border {
  border-color: #858585;
}

af|inputNumberSlider:vertical::tick-value-zero,
af|inputRangeSlider:vertical::tick-value-zero,
af|inputNumberSlider:disabled::tick-value,
af|inputRangeSlider:disabled::tick-value {
  -tr-rule-ref: selector(".AFVeryDarkAccentForeground:alias");
}

af|inputRangeSlider:disabled::range {
  -tr-rule-ref: selector(".AFVeryDarkAccentBackground:alias");
}

af|inputNumberSlider:disabled::thumb-value-line,
af|inputRangeSlider:disabled::thumb-value-line {
  border-color: #858585;
}

af|inputNumberSlider:disabled::thumb-value,
af|inputRangeSlider:disabled::thumb-value {
  -tr-rule-ref: selector(".AFVeryDarkAccentForeground:alias");
  border-color: #858585;
}

af|inputNumberSlider:vertical:disabled::thumb-value-line,
af|inputRangeSlider:vertical:disabled::thumb-value-line {
  border-color: #858585;
}

af|inputNumberSlider:vertical:disabled::thumb-value,
af|inputRangeSlider:vertical:disabled::thumb-value {
  border-color: #858585;
}

af|inputNumberSlider::label,
af|inputRangeSlider::label {
  -tr-rule-ref:selector(".AFLabel:alias");
}

af|inputNumberSlider:disabled::label,
af|inputRangeSlider:disabled::label {
  -tr-rule-ref:selector(".AFLabelDisabled:alias");
}



af|inputNumberSlider::access-key,
af|inputRangeSlider::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

/* Splash screen styles. */

/* Defines the background color for the page behind the loading content. */
af|document::splash-screen {
  display: table;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: white;
  color: black;
  z-index: 3201;
}
af|document::splash-screen:rtl {
  left: auto;
  right: 0px;
}

/* Private style class to allow for proper centering. */
af|document::splash-screen-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
@agent ie and (version: 7.0) {
  /* Extra styles required in IE7 becuase it doesn't allow perfect vertical centering. */
  af|document::splash-screen-cell {
    position: relative;
    top: 45%;
    padding-bottom: 1px;
  }
}

/* The centered box for the splash content.  Typically used to define padding, borders, background
   images, background colors, and other text or font styles. */
af|document::splash-screen-content {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

/* The splash screen message text.  Typically used to define direction-specific padding and
   optionally text or font styles. */
af|document::splash-screen-message {
  -tr-rule-ref: selector(".AFDefaultFontFamily:alias");
}

/* PRIVATE - marker for popup scoping container elements */
.AFPopupScopingContainer {
  /* No properties - this class is only used as a marker so we
     can locate popup scoping containers on the client. */
}

/* PRIVATE - Used by AdfPopupScopingUtils to hide scoping containers */
.AFPopupScopingContainerHidden {
  display:none;
}


/* Portlet styles. These are for when some portlet is within an ADF Faces page and we
want the portlet to match our styles as best as possible. We use the mapping that is in
Trinidad's base-desktop.xss when possible. This is an extension to that map for the rich
components */
/* .PortletBodyColor (ok)
   .PortletHeading1, .PortletHeading2, .PortletHeading3, .PortletHeading4
   */


.PortletHeading1 {
  -tr-inhibit: all;
  -tr-rule-ref: selector("af|panelHeader::title-text0");
  -tr-inhibit: white-space;
  /*The portlet styles can be place by portlets on
    elements such as <td/> where the "display: inline" causes undesired effects,
    interfering with the table layout.*/
  -tr-inhibit: display;
}

.PortletHeading2 {
  -tr-inhibit: all;
  -tr-rule-ref: selector("af|panelHeader::title-text1");
  -tr-inhibit: white-space;
  /*The portlet styles can be place by portlets on
    elements such as <td/> where the "display: inline" causes undesired effects,
    interfering with the table layout.*/
  -tr-inhibit: display;
}

.PortletHeading3 {
  -tr-inhibit: all;
  -tr-rule-ref: selector("af|panelHeader::title-text2");
  -tr-inhibit: white-space;
  /*The portlet styles can be place by portlets on
    elements such as <td/> where the "display: inline" causes undesired effects,
    interfering with the table layout.*/
  -tr-inhibit: display;
}

.PortletHeading4 {
  -tr-inhibit: all;
  -tr-rule-ref: selector("af|panelHeader::title-text3");
  -tr-inhibit: white-space;
  /*The portlet styles can be place by portlets on
    elements such as <td/> where the "display: inline" causes undesired effects,
    interfering with the table layout.*/
  -tr-inhibit: display;
}
/* .PortletHeaderColor, .PortletHeaderLink,
   .PortletHeaderStyle (base ok),
   .PortletHeaderText
   .PortletSubHeaderColor, .PortletSubHeaderLink, .PortetSubHeaderText
*/
.PortletHeaderColor {
  -tr-inhibit: all;
  -tr-rule-ref: selector(".AFMediumAccentBackground:alias");
}
.PortletSubHeaderColor {
  -tr-inhibit: all;
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
}
.PortletHeaderLink,
.PortletSubHeaderLink {
  -tr-inhibit: all;
  -tr-rule-ref: selector("af|goLink");
}
.PortletHeaderText {
  -tr-inhibit: all;
  -tr-rule-ref: selector(".AFDataText");
}
.PortletSubHeaderText {
  -tr-inhibit: all;
  -tr-rule-ref: selector(".AFFieldText");
  -tr-rule-ref: selector(".AFSmallFont");
}
/*
   .PortletText1, .PortletText2, .PortletText3, .PortletText4 (all in base ok)
   .portlet-font, .portlet-font-dim (0k)
   .portlet-msg-info, .portlet-msg-error
*/
.portlet-font,
.portlet-msg-info {
  -tr-inhibit: all;
  -tr-rule-ref: selector(".AFFieldText");
}

.portlet-msg-error {
  -tr-inhibit: all;
  -tr-rule-ref: selector(".AFErrorText");
}

/*
   .portlet-section-header, .portlet-section-body, .portlet-section-alternate,
   .portlet-section-subheader, .portlet-section-footer, .portlet-section-text
 */
.portlet-section-header {
  -tr-inhibit: all;
  -tr-rule-ref: selector("af|panelHeader::title-text0");
  -tr-inhibit: white-space;
  /*The portlet styles can be place by portlets on
  elements such as <td/> where the "display: inline" causes undesired effects,
  interfering with the table layout.*/
  -tr-inhibit: display;
}

.portlet-section-footer,
.portlet-section-text {
  -tr-inhibit: all;
  -tr-rule-ref: selector(".AFDefaultFont:alias");
}

.portlet-section-selected {
  -tr-rule-ref: selector(".AFTableCellDataSelectedBanded:alias");
}

.portlet-section-body {
  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
}

.portlet-section-alternate {
  -tr-rule-ref: selector(".AFMediumAccentBackground:alias");
}

.portlet-section-subheader {
  -tr-inhibit: all;
  -tr-rule-ref: selector("af|panelHeader::title-text1");
  -tr-inhibit: white-space;
  /*The portlet styles can be place by portlets on
    elements such as <td/> where the "display: inline" causes undesired effects,
    interfering with the table layout.*/
  -tr-inhibit: display;
}

 /*
   .portlet-table-header (override), .portlet-table-body (ok), .portlet-table-alternate (override),
   .portlet-table-selected (override),
   .portlet-table-subheader (override), .portlet-table-footer (override), .portlet-table-text (override),

   */
.portlet-table-header {
  -tr-inhibit: all;
  -tr-rule-ref: selector("af|column::column-header-cell");
}

.portlet-table-subheader {
  -tr-inhibit: all;
  -tr-rule-ref: selector("af|column::column-header-cell");
}

.portlet-table-alternate {
  -tr-inhibit: all;
  -tr-rule-ref: selector("af|column::banded-data-cell");
}

.portlet-table-selected,
.portlet-table-text,
.portlet-table-footer,
.portlet-table-body {
  -tr-inhibit: all;
  -tr-rule-ref: selector("af|column::data-cell");
}

/*
   .portlet-form-label (ok), .portlet-form-input-field (override),
   .portlet-form-button (should be af|commandButton),
   .portlet-icon-label (ok), .portlet-dlg-icon-label (ok), .portlet-form-field-label (ok),
   .portlet-form-field (ok).
*/
.portlet-form-button {
  -tr-inhibit: all;
  -tr-rule-ref: selector("af|commandButton");
}

.portlet-form-input-field {
  -tr-inhibit: all;
  -tr-rule-ref: selector(".AFFormControlContent:alias");
}

af|body:high-contrast af|dialog::close-icon-style:after,
af|body:high-contrast af|panelWindow::close-icon-style:after {
  content:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAB/UlEQVQoUz2SvWtUQRTFz7w30SS7y26CiTaLNloYexPBkE5R2cpCm6RRt0hELBZhycbggoEUMeBHbwpFxDLEQvB/8J8IWLmp1p2P5znz1gxcZt68+d177pmxNzcPXwHoMVAUkVHAGJPmIhbwziNwHUNA5HcRoo72raDPnTv6SIP/EGKEj5oJcu0CZ4ZmxZOdLz2Bp0PJIrMLKCGUh7VOUJlESqwklZWKFKt737H7eBk2s5jIsgQ86H7E/ov7yLMcmckRnBMYx/JKSGN97widtRtoNhpYe/mJfTq0Nw/Qfd7CBe45PyQ4liWZu4+Wsb5/BMeD2+9/wI9GcCPH2WOldRXHfwaoTVZQsIdTUJIm8hyd1SVsfxDkEqRYvHUZ1TOTmK3UklxjLCwvgCYw2J/lRnNmBv5vCQiOrKaEl87N4Xy9DkMQMKxIjckx2c4EqacxFAhF/v/57RcWnjaTo5lMjAFWMv/b/ZDuOV64oOu3ryRXBWm8e3uIjY0W5lk1MJkVrWoC39Dy9tYBVu4tsKezuEh5qiRo8e41/D4ZoDo1rScmkNV8KVWNd5+1cDw4wex0FfONekqoSoIaNMey3yBXY+qNQTgjqHuqTVWQG112hmiAuXqDlSqEMia3fK8e1g1H/fbrrz0l0EV7N0wP2RBEYaB9vV1dtNRF72iq6f8DtQdmd4FNEAkAAAAASUVORK5CYII=');
}

af|body:high-contrast af|dialog::pin-icon-style:after,
af|body:high-contrast af|panelWindow::pin-icon-style:after {
  content:  url("/afr/pin_ena.png");
}

af|body:high-contrast af|dialog::resize-icon-style:after,
af|body:high-contrast af|panelWindow::resize-icon-style:after {
  content:  url("/afr/dialog-resize-se.png");
}


af|body:high-contrast af|carousel::spin-h-previous-icon-style:before,
af|body:high-contrast af|carousel::spin-v-previous-icon-style:before {
  content: "-";
}
af|body:high-contrast af|carousel::spin-h-thumb-icon-style:before,
af|body:high-contrast af|carousel::spin-v-thumb-icon-style:before {
  content: "X";
}
af|body:high-contrast af|carousel::spin-h-next-icon-style:before,
af|body:high-contrast af|carousel::spin-v-next-icon-style:before {
  content: "+";
}

af|panelTabbed::disclosed-remove-icon,
af|navigationPane-tabs::disclosed-remove-icon {
  content: url('/afr/removeTab_ena.png');
}
af|panelTabbed::undisclosed-remove-icon,
af|navigationPane-tabs::undisclosed-remove-icon {
  content: url('/afr/removeTab_ena.png');
}
af|panelTabbed::remove-disabled-icon,
af|navigationPane-tabs::remove-disabled-icon {
  content: url('/afr/removeTab_dis.png');
}

af|navigationPane-tabs::start-overflow-icon:ltr,
af|navigationPane-tabs::end-overflow-icon:rtl,
af|navigationPane-bar::start-overflow-icon:ltr,
af|navigationPane-bar::end-overflow-icon:rtl,
af|panelTabbed::start-overflow-icon:ltr,
af|panelTabbed::end-overflow-icon:rtl {
  content: url("/afr/overflow_start.png");
}
af|navigationPane-tabs::end-overflow-icon:ltr,
af|navigationPane-tabs::start-overflow-icon:rtl,
af|navigationPane-bar::end-overflow-icon:ltr,
af|navigationPane-bar::start-overflow-icon:rtl,
af|panelTabbed::end-overflow-icon:ltr,
af|panelTabbed::start-overflow-icon:rtl {
  content: url("/afr/overflow_end.png");
}

af|panelTabbed::droplist-icon,
af|navigationPane-tabs::droplist-icon {
  content: url("/afr/dropdown_n.png");
}

af|navigationPane-tabs::start-conveyor-belt-icon:ltr,
af|navigationPane-tabs::end-conveyor-belt-icon:rtl,
af|panelTabbed::start-conveyor-belt-icon:ltr,
af|panelTabbed::end-conveyor-belt-icon:rtl,
af|panelSpringboard::start-conveyor-belt-icon:ltr,
af|panelSpringboard::end-conveyor-belt-icon:rtl {
  content: url("/afr/conv_l_ena.png");
}

af|navigationPane-tabs::end-conveyor-belt-icon:ltr,
af|navigationPane-tabs::start-conveyor-belt-icon:rtl,
af|panelTabbed::end-conveyor-belt-icon:ltr,
af|panelTabbed::start-conveyor-belt-icon:rtl,
af|panelSpringboard::end-conveyor-belt-icon:ltr,
af|panelSpringboard::start-conveyor-belt-icon:rtl {
  content: url("/afr/conv_r_ena.png");
}

af|navigationPane-tabs::start-conveyor-belt-indicator img,
af|navigationPane-tabs::end-conveyor-belt-indicator img,
af|panelTabbed::start-conveyor-belt-indicator img,
af|panelTabbed::end-conveyor-belt-indicator img,
af|navigationPane-tabs::droplist-indicator img,
af|panelTabbed::droplist-indicator img,
af|navigationPane-tabs::disclosed-remove-icon-style img,
af|panelTabbed::disclosed-remove-icon-style img,
af|navigationPane-tabs::undisclosed-remove-icon-style img,
af|panelTabbed::undisclosed-remove-icon-style img,
af|navigationPane-tabs::disclosed-remove-disabled-icon-style img,
af|navigationPane-tabs::undisclosed-remove-disabled-icon-style img,
af|panelTabbed::disclosed-remove-disabled-icon-style img,
af|panelTabbed::undisclosed-remove-disabled-icon-style img,
af|navigationPane-tabs::end-overflow-indicator img,
af|navigationPane-tabs::start-overflow-indicator img,
af|panelTabbed::end-overflow-indicator img,
af|panelTabbed::start-overflow-indicator img {
  display: none;
}

af|body:high-contrast af|navigationPane-tabs::start-conveyor-belt-indicator img,
af|body:high-contrast af|navigationPane-tabs::end-conveyor-belt-indicator img,
af|body:high-contrast af|panelTabbed::start-conveyor-belt-indicator img,
af|body:high-contrast af|panelTabbed::end-conveyor-belt-indicator img,
af|body:high-contrast af|navigationPane-tabs::droplist-indicator img,
af|body:high-contrast af|panelTabbed::droplist-indicator img,
af|body:high-contrast af|navigationPane-tabs::disclosed-remove-icon-style img,
af|body:high-contrast af|panelTabbed::disclosed-remove-icon-style img,
af|body:high-contrast af|navigationPane-tabs::undisclosed-remove-icon-style img,
af|body:high-contrast af|panelTabbed::undisclosed-remove-icon-style img,
af|body:high-contrast af|navigationPane-tabs::disclosed-remove-disabled-icon-style img,
af|body:high-contrast af|navigationPane-tabs::undisclosed-remove-disabled-icon-style img,
af|body:high-contrast af|panelTabbed::disclosed-remove-disabled-icon-style img,
af|body:high-contrast af|panelTabbed::undisclosed-remove-disabled-icon-style img,
af|body:high-contrast af|navigationPane-tabs::end-overflow-indicator img,
af|body:high-contrast af|navigationPane-tabs::start-overflow-indicator img,
af|body:high-contrast af|panelTabbed::end-overflow-indicator img,
af|body:high-contrast af|panelTabbed::start-overflow-indicator img {
  display: block;
}

af|body:high-contrast af|panelTabbed::top-conveyor-belt-indicator:after {
  content: url("/afr/conv_u_hc.png");
}
af|body:high-contrast af|panelTabbed::bottom-conveyor-belt-indicator:after {
  content: url("/afr/conv_d_hc.png");
}

af|body:high-contrast af|panelTabbed::top-conveyor-belt-indicator:disabled:after {
  content: url("/afr/conv_u_dis.png");
}
af|body:high-contrast af|panelTabbed::bottom-conveyor-belt-indicator:disabled:after {
  content: url("/afr/conv_d_dis.png");
}

af|body:high-contrast af|panelTabbed::tabs:start-tabs af|panelTabbed::toggle-icon-style:after,
af|body:high-contrast af|panelTabbed::tabs:left-tabs af|panelTabbed::toggle-icon-style:after,
af|body:high-contrast af|panelTabbed::tabs:end-tabs af|panelTabbed::toggle-icon-style:rtl:after {
  content: url("/afr/VertTabLabel_hide_hov.png");
}
af|body:high-contrast af|panelTabbed::tabs:start-tabs:iconified af|panelTabbed::toggle-icon-style:after,
af|body:high-contrast af|panelTabbed::tabs:left-tabs:iconified af|panelTabbed::toggle-icon-style:after,
af|body:high-contrast af|panelTabbed::tabs:end-tabs:iconified af|panelTabbed::toggle-icon-style:rtl:after {
  content: url("/afr/VertTabLabel_show_hov.png");
}

af|body:high-contrast af|panelTabbed::tabs:end-tabs af|panelTabbed::toggle-icon-style:after,
af|body:high-contrast af|panelTabbed::tabs:right-tabs af|panelTabbed::toggle-icon-style:after,
af|body:high-contrast af|panelTabbed::tabs:start-tabs af|panelTabbed::toggle-icon-style:rtl:after {
  content: url("/afr/VertTabLabel_hide_hov.png");
}
af|body:high-contrast af|panelTabbed::tabs:end-tabs:iconified af|panelTabbed::toggle-icon-style:after,
af|body:high-contrast af|panelTabbed::tabs:right-tabs:iconified af|panelTabbed::toggle-icon-style:after,
af|body:high-contrast af|panelTabbed::tabs:start-tabs:iconified af|panelTabbed::toggle-icon-style:rtl:after {
  content: url("/afr/VertTabLabel_show_hov.png");
}

af|panelAccordion::disclosed-icon {
  content: url('/afr/disclosure_expanded.png');
}
af|panelAccordion::undisclosed-icon {
  content: url('/afr/disclosure_collapsed.png');
}
af|panelAccordion::overflow-top-icon {
  content: url('/afr/overflow_top.png');
}
af|panelAccordion::overflow-bottom-icon {
  content: url('/afr/overflow_bottom.png');
}

af|panelAccordion::disclosed-icon-style img,
af|panelAccordion::undisclosed-icon-style img,
af|panelAccordion::top-overflow-indicator img,
af|panelAccordion::bottom-overflow-indicator img {
  display:none;
}

af|body:high-contrast af|panelAccordion::disclosed-icon-style img,
af|body:high-contrast af|panelAccordion::undisclosed-icon-style img,
af|body:high-contrast af|panelAccordion::top-overflow-indicator img,
af|body:high-contrast af|panelAccordion::bottom-overflow-indicator img {
  display:block;
}


/* Add a high-contrast icon */

af|body:high-contrast af|column::filter-clear-all-icon {
  content: url("/aft/clear_sm.png");
}

@agent (touchScreen:none) {
  af|body:high-contrast af|column::filter-clear-all-icon:hover {
    content: url("/afr/clear_sm_ovr.png");
  }
}

af|body:high-contrast af|column::filter-clear-all-icon:active {
  content: url("/afr/clear_sm_dwn.png");
}

af|body:high-contrast af|column::sort-ascending-icon {
  content: url("/afr/sort_asc_n.png");
}

@agent (touchScreen:none) {
  af|body:high-contrast af|column::sort-ascending-icon:hover {
    content: url("/afr/sort_asc_mo.png");
  }
}

af|body:high-contrast af|column::sort-ascending-icon:active {
  content: url("/afr/sort_asc_s.png");
}
af|body:high-contrast af|column::sort-descending-icon {
  content: url("/afr/sort_des_n.png");
}

@agent (touchScreen:none) {
  af|body:high-contrast af|column::sort-descending-icon:hover {
    content: url("/afr/sort_des_mo.png");
  }
}

af|body:high-contrast af|column::sort-descending-icon:active {
  content: url("/afr/sort_des_s.png");
}
af|body:high-contrast af|column::sorted-ascending-icon {
  content: url("/afr/sort_asc_s.png");
}
af|body:high-contrast af|column::sorted-descending-icon {
  content: url("/afr/sort_des_s.png");
}

af|body:high-contrast af|richTextEditor::list-unordered-icon {
  content: url(/afr/bullist_hc.png);
}

af|body:high-contrast af|navigationPane-bar::separator-icon,
af|body:high-contrast af|navigationPane-buttons::separator-icon {
  content: "|";
}
af|body:high-contrast af|navigationPane-choice::dropdown-icon {
  content: url('/afr/spinbox_arrow_dn_hc.png');
}
af|body:high-contrast af|panelAccordion::disclosed-icon {
  content: url('/afr/disclosure_expanded.png');
}
af|body:high-contrast af|panelAccordion::undisclosed-icon {
  content: url('/afr/disclosure_collapsed.png');
}
af|body:high-contrast af|panelAccordion::overflow-top-icon {
  content: url('/afr/overflow_top.png');
}
af|body:high-contrast af|panelAccordion::overflow-bottom-icon {
  content: url('/afr/overflow_bottom.png');
}

af|body:high-contrast af|query::criterion-delete-icon {
  content: url("/afr/delete_ena.png");
}

@agent (touchScreen:none) {
  af|body:high-contrast af|query::criterion-delete-icon:hover {
    content: url("/afr/delete_ovr.png");
  }
}

af|body:high-contrast af|query::criterion-delete-icon:active {
  content: url("/afr/delete_dwn.png");
}
af|body:high-contrast af|quickQuery::search-icon {
  content: url("/afr/go_ena.png");
}
af|body:high-contrast af|quickQuery::search-icon:rtl {
  content: url("/afr/go_ena_rtl.png");
}
/* Private - style to have the disabled search icon */
af|body:high-contrast af|quickQuery::disabled-search-icon {
  content: url("/afr/go_dis.png");
}
af|body:high-contrast af|quickQuery::disabled-search-icon:rtl {
  content: url("/afr/go_dis_rtl.png");
}

af|table::disclosed-icon {
  content: url("/afr/disclosure_expanded.png");
}
af|table::undisclosed-icon {
  content: url("/afr/disclosure_collapsed.png");
}

af|body:high-contrast af|navigationPane-list::bullet-icon {
  content: url('/afr/status_bullet.png');
}

af|listItem::expanded-icon {
  content: url("/afr/disclosure_expanded.png");
}

af|listItem::collapsed-icon {
  content: url("/afr/disclosure_collapsed.png");
}

af|listItem::leaf-icon {
  content: url("/afr/leaf.png");
}

af|body:high-contrast af|listItem::expanded-icon {
  content: url("/afr/disclosure_expanded.png");
}
af|body:high-contrast af|listItem::collapsed-icon {
  content: url("/afr/disclosure_collapsed.png");
}
af|body:high-contrast af|listItem::leaf-icon {
  content: url("/afr/leaf.png");
}

af|tree::expanded-icon,
af|treeTable::expanded-icon {
  content: url("/afr/disclosure_expanded.png");
}
af|tree::collapsed-icon,
af|treeTable::collapsed-icon {
  content: url("/afr/disclosure_collapsed.png");
}
af|tree::leaf-icon,
af|treeTable::leaf-icon {
  content: url("/afr/leaf.png");
}
af|tree::selector-icon,
af|treeTable::selector-icon {
  content: url("/afr/hierchselector_ena.png");
}
af|tree::selector-icon:rtl,
af|treeTable::selector-icon:rtl {
  content: url("/afr/hierchselector_ena_rtl.png");
}
af|tree::node-anim-icon,
af|treeTable::node-anim-icon {
  content: url("/afr/node_anim.gif");
}

@agent (touchScreen:none) {
  af|tree::selector-icon:hover,
  af|treeTable::selector-icon:hover {
    content: url("/afr/hierchselector_ovr.png");
  }
  af|tree::selector-icon:hover:rtl,
  af|treeTable::selector-icon:hover:rtl {
    content: url("/afr/hierchselector_ovr_rtl.png");
  }
}

af|tree::selector-icon:active,
af|treeTable::selector-icon:active {
  content: url("/afr/hierchselector_dwn.png");
}
af|tree::selector-icon:active:rtl,
af|treeTable::selector-icon:active:rtl {
  content: url("/afr/hierchselector_dwn_rtl.png");
}

af|body:high-contrast .AFRteTextFgColorIcon:alias {
  content: url("/afr/colorpickertxt_ena.png");
}
af|body:high-contrast .AFRteTextBgColorIcon:alias {
  content: url("/afr/colorpicker_ena.png");
}

/* end of high contrast */
/* Add a high-contrast icon  for input components*/
/* Style for dynamic help icon */

af|body:high-contrast af|chooseColor::button-swatch:transparent {
  content: url('/afr/empty-swatch.png');
}
af|body:high-contrast af|chooseColor::swatch:transparent {
  content: url('/afr/empty-swatch.png');
}
af|body:high-contrast af|richTextEditor::list-unordered-icon {
  content: url(/afr/bullist_hc.png);
}
af|body:high-contrast af|richTextEditor::justify-left-icon {
  content: url(/afr/leftalign_hc.png);
}
af|body:high-contrast af|richTextEditor::justify-center-icon {
  content: url(/afr/centeralign_hc.png);
}
af|body:high-contrast af|richTextEditor::justify-full-icon {
  content: url(/afr/fullalign_hc.png);
}
af|body:high-contrast af|richTextEditor::list-ordered-icon {
  content: url(/afr/numlist_hc.png);
}
af|body:high-contrast af|richTextEditor::list-ordered-icon:rtl {
  content: url(/afr/numlist_rtl_hc.png);
}
af|body:high-contrast af|inputColor::launch-icon {
  content: url("/afr/arrow_md.png");
}
af|body:high-contrast af|inputNumberSlider::minus-icon,
af|body:high-contrast af|inputRangeSlider::minus-icon {
  content: url('/afr/slider_decreasebutcon_m_n.png');
}
af|body:high-contrast af|inputNumberSlider::plus-icon,
af|body:high-contrast af|inputRangeSlider::plus-icon {
  content: url('/afr/slider_increasebutcon_m_n.png');
}
af|body:high-contrast af|inputNumberSlider::play-icon,
af|body:high-contrast af|inputRangeSlider::play-icon {
  content: url('/afr/play_ena.png');
}
af|body:high-contrast af|inputNumberSlider::pause-icon,
af|body:high-contrast af|inputRangeSlider::pause-icon {
  content: url('/afr/pause_ena.png');
}
af|body:high-contrast af|inputNumberSlider::thumb-icon,
af|body:high-contrast af|inputRangeSlider::thumb-icon {
  content: url('/afr/slider_thumb_vert_m_n.png');
}
af|body:high-contrast af|inputNumberSlider:vertical::thumb-icon,
af|body:high-contrast af|inputRangeSlider:vertical::thumb-icon {
  content: url('/afr/slider_thumb_m_n.png');
}
af|body:high-contrast af|inputNumberSlider:vertical::thumb-icon:rtl,
af|body:high-contrast af|inputRangeSlider:vertical::thumb-icon:rtl {
  content: url('/afr/slider_thumb_m_n_rtl.png');
}
af|body:high-contrast af|inputNumberSlider:vertical::thumb-disabled-icon,
af|inputRangeSlider:vertical::thumb-disabled-icon {
  content: url('/afr/slider_thumb_m_d.png');
}
af|body:high-contrast af|inputNumberSlider:vertical::thumb-disabled-icon:rtl,
af|body:high-contrast af|inputRangeSlider:vertical::thumb-disabled-icon:rtl {
  content: url('/afr/slider_thumb_m_d_rtl.png');
}
af|body:high-contrast af|inputNumberSlider::minus-disabled-icon,
af|body:high-contrast af|inputRangeSlider::minus-disabled-icon {
  content: url('/afr/slider_decreasebutcon_m_d.png');
}
af|body:high-contrast af|inputNumberSlider::plus-disabled-icon,
af|body:high-contrast af|inputRangeSlider::plus-disabled-icon {
  content: url('/afr/slider_increasebutcon_m_d.png');
}
af|body:high-contrast af|inputNumberSlider::thumb-disabled-icon,
af|body:high-contrast af|inputRangeSlider::thumb-disabled-icon {
  content: url('/afr/slider_thumb_vert_m_d.png');
}
af|body:high-contrast af|inputNumberSpinbox::decrementor-icon,
af|body:high-contrast af|chooseDate::spinbox-decrementor-icon {
  content: url("/afr/spinbox_arrow_dn_hc.png");
}
af|body:high-contrast af|inputNumberSpinbox::decrementor-disabled-icon,
af|body:high-contrast af|chooseDate::spinbox-decrementor-disabled-icon {
  content: url("/afr/spinbox_arrow_dn_d.png");
}
af|body:high-contrast af|inputNumberSpinbox::incrementor-icon,
af|body:high-contrast af|chooseDate::spinbox-incrementor-icon {
  content: url("/afr/spinbox_arrow_up_hc.png");
}
af|body:high-contrast af|inputNumberSpinbox::incrementor-disabled-icon {
  content: url("/afr/spinbox_arrow_up_d.png");
}
af|body:high-contrast af|selectManyChoice::dropdown-icon {
  content: url('/afr/dropdown_n_hc.png');
}
af|body:high-contrast af|selectManyChoice:disabled::dropdown-icon {
  content: url('/afr/dropdown_d_hc.png');
}
af|body:high-contrast af|selectOneChoice::compact-dropdown-icon {
  content: url('/afr/spinbox_arrow_dn_hc.png');
}
af|body:high-contrast af|selectOneChoice::dropdown-icon {
  content: url('/afr/dropdown_n_hc.png');
}
af|body:high-contrast af|selectOneChoice:disabled::dropdown-icon {
  content: url('/afr/dropdown_d_hc.png');
}
af|body:high-contrast af|selectManyShuttle::move-horizontal-icon,
af|body:high-contrast af|selectOrderShuttle::move-horizontal-icon {
  content: -tr-property-ref(".AFSelectShuttleRightEnabledIcon:alias","background-image");
}
af|body:high-contrast af|selectManyShuttle::move-horizontal-disabled-icon,
af|body:high-contrast af|selectOrderShuttle::move-horizontal-disabled-icon {
  content: -tr-property-ref(".AFSelectShuttleRightDisabledIcon:alias","background-image");
}
af|body:high-contrast af|selectManyShuttle::move-horizontal-icon:rtl,
af|body:high-contrast af|selectOrderShuttle::move-horizontal-icon:rtl {
  content: url("/afr/shuttlerightbidi_ena.png");
}
af|body:high-contrast af|selectManyShuttle::move-horizontal-disabled-icon:rtl,
af|body:high-contrast af|selectOrderShuttle::move-horizontal-disabled-icon:rtl {
  content: url("/afr/shuttlerightbidi_dis.png");
}
af|body:high-contrast af|selectManyShuttle::move-vertical-icon,
af|body:high-contrast af|selectOrderShuttle::move-vertical-icon {
  content: url("/afr/shuttledown_ena.png");
}
af|body:high-contrast af|selectManyShuttle::move-vertical-disabled-icon,
af|body:high-contrast af|selectOrderShuttle::move-vertical-disabled-icon {
  content: url("/afr/shuttledown_dis.png");
}
af|body:high-contrast af|selectManyShuttle::moveall-horizontal-icon,
af|body:high-contrast af|selectOrderShuttle::moveall-horizontal-icon {
  content: -tr-property-ref(".AFSelectShuttleRightAllEnabledIcon:alias","background-image");
}
af|body:high-contrast af|selectManyShuttle::moveall-horizontal-disabled-icon,
af|body:high-contrast af|selectOrderShuttle::moveall-horizontal-disabled-icon {
  content: -tr-property-ref(".AFSelectShuttleRightAllDisabledIcon:alias","background-image");
}
af|body:high-contrast af|selectManyShuttle::moveall-horizontal-icon:rtl,
af|body:high-contrast af|selectOrderShuttle::moveall-horizontal-icon:rtl {
  content: -tr-property-ref(".AFSelectShuttleLeftAllEnabledIcon:alias","background-image");
}
af|body:high-contrast af|selectManyShuttle::moveall-horizontal-disabled-icon:rtl,
af|body:high-contrast af|selectOrderShuttle::moveall-horizontal-disabled-icon:rtl {
  content: -tr-property-ref(".AFSelectShuttleLeftAllDisabledIcon:alias","background-image");
}
af|body:high-contrast af|selectManyShuttle::moveall-vertical-icon,
af|body:high-contrast af|selectOrderShuttle::moveall-vertical-icon {
  content: url("/afr/shuttledownall_ena.png");
}
af|body:high-contrast af|selectManyShuttle::moveall-vertical-disabled-icon,
af|body:high-contrast af|selectOrderShuttle::moveall-vertical-disabled-icon {
  content: url("/afr/shuttledownall_dis.png");
}
af|body:high-contrast af|selectManyShuttle::remove-horizontal-icon,
af|body:high-contrast af|selectOrderShuttle::remove-horizontal-icon {
  content: -tr-property-ref(".AFSelectShuttleLeftEnabledIcon:alias","background-image");
}
af|body:high-contrast af|selectManyShuttle::remove-horizontal-disabled-icon,
af|body:high-contrast af|selectOrderShuttle::remove-horizontal-disabled-icon {
  content: -tr-property-ref(".AFSelectShuttleLeftDisabledIcon:alias","background-image");
}
af|body:high-contrast af|selectManyShuttle::remove-horizontal-icon:rtl,
af|body:high-contrast af|selectOrderShuttle::remove-horizontal-icon:rtl {
  content: url("/afr/shuttleleftbidi_ena.png");
}
af|body:high-contrast af|selectManyShuttle::remove-horizontal-disabled-icon:rtl,
af|body:high-contrast af|selectOrderShuttle::remove-horizontal-disabled-icon:rtl {
  content: url("/afr/shuttleleftbidi_dis.png");
}
af|body:high-contrast af|selectManyShuttle::remove-vertical-icon,
af|body:high-contrast af|selectOrderShuttle::remove-vertical-icon {
  content: url("/afr/shuttleup_ena.png");
}
af|body:high-contrast af|selectManyShuttle::remove-vertical-disabled-icon,
af|body:high-contrast af|selectOrderShuttle::remove-vertical-disabled-icon {
  content: url("/afr/shuttleup_dis.png");
}
af|body:high-contrast af|selectManyShuttle::remove-vertical-icon:rtl,
af|body:high-contrast af|selectOrderShuttle::remove-vertical-icon:rtl {
  content: url("/afr/shuttleupbidi_ena.png");
}
af|body:high-contrast af|selectManyShuttle::remove-vertical-disabled-icon:rtl,
af|body:high-contrast af|selectOrderShuttle::remove-vertical-disabled-icon:rtl {
  content: url("/afr/shuttleupbidi_dis.png");
}
af|body:high-contrast af|selectManyShuttle::removeall-horizontal-icon,
af|body:high-contrast af|selectOrderShuttle::removeall-horizontal-icon {
  content: -tr-property-ref(".AFSelectShuttleLeftAllEnabledIcon:alias","background-image");
}
af|body:high-contrast af|selectManyShuttle::removeall-horizontal-disabled-icon,
af|body:high-contrast af|selectOrderShuttle::removeall-horizontal-disabled-icon {
  content: -tr-property-ref(".AFSelectShuttleLeftAllDisabledIcon:alias","background-image");
}
af|body:high-contrast af|selectManyShuttle::removeall-horizontal-icon:rtl,
af|body:high-contrast af|selectOrderShuttle::removeall-horizontal-icon:rtl {
  content: url("/afr/shuttleleftallbidi_ena.png");
}
af|body:high-contrast af|selectManyShuttle::removeall-horizontal-disabled-icon:rtl,
af|body:high-contrast af|selectOrderShuttle::removeall-horizontal-disabled-icon:rtl {
  content: url("/afr/shuttleleftallbidi_dis.png");
}
af|body:high-contrast af|selectManyShuttle::removeall-vertical-icon,
af|body:high-contrast af|selectOrderShuttle::removeall-vertical-icon {
  content: url("/afr/shuttleupall_ena.png");
}
af|body:high-contrast af|selectManyShuttle::removeall-vertical-disabled-icon,
af|body:high-contrast af|selectOrderShuttle::removeall-vertical-disabled-icon {
  content: url("/afr/shuttleupall_dis.png");
}
af|body:high-contrast af|selectManyShuttle::removeall-vertical-icon:rtl,
af|body:high-contrast af|selectOrderShuttle::removeall-vertical-icon:rtl {
  content: url("/afr/shuttleupallbidi_ena.png");
}
af|body:high-contrast af|selectManyShuttle::removeall-vertical-disabled-icon:rtl,
af|body:high-contrast af|selectOrderShuttle::removeall-vertical-disabled-icon:rtl {
  content: url("/afr/shuttleupallbidi_dis.png");
}
af|body:high-contrast af|selectOrderShuttle::move-top-icon {
  content: -tr-property-ref(".AFSelectShuttleUpEndEnabledIcon:alias","background-image");
}
af|body:high-contrast af|selectOrderShuttle::move-top-disabled-icon {
  content: -tr-property-ref(".AFSelectShuttleUpEndDisabledIcon:alias","background-image");
}
af|body:high-contrast af|selectOrderShuttle::move-up-icon {
  content: -tr-property-ref(".AFSelectShuttleUpEnabledIcon:alias","background-image");
}
af|body:high-contrast af|selectOrderShuttle::move-up-disabled-icon {
  content: -tr-property-ref(".AFSelectShuttleUpDisabledIcon:alias","background-image");
}
af|body:high-contrast af|selectOrderShuttle::move-down-icon {
  content: -tr-property-ref(".AFSelectShuttleDownEnabledIcon:alias","background-image");
}
af|body:high-contrast af|selectOrderShuttle::move-down-disabled-icon {
  content: -tr-property-ref(".AFSelectShuttleDownDisabledIcon:alias","background-image");
}
af|body:high-contrast af|selectOrderShuttle::move-bottom-icon {
  content: -tr-property-ref(".AFSelectShuttleDownEndEnabledIcon:alias","background-image");
}
af|body:high-contrast af|selectOrderShuttle::move-bottom-disabled-icon {
  content: -tr-property-ref(".AFSelectShuttleDownEndDisabledIcon:alias","background-image");
}

@agent (touchScreen:none) {

  af|body:high-contrast af|selectManyChoice::dropdown-icon-style:hover,
  af|body:high-contrast af|selectOneChoice::compact-dropdown-icon-style:disabled:hover {
    -tr-inhibit: background-image;
  }
}

af|body:high-contrast af|selectOneChoice::compact-dropdown-icon-style {
  padding: 1px;
}

 af|body:high-contrast af|selectOneChoice::compact-dropdown-icon-style:after {
  content: url("/afr/dropdown_n_hc.png");
}

/* This is a workaround until mozilla bug
https://bugzilla.mozilla.org/show_bug.cgi?id=779725
gets resolved */
@agent gecko and (min-version: 12) {
  af|body:high-contrast af|inputText::content,
  af|body:high-contrast af|selectOneChoice::content,
  af|body:high-contrast af|selectManyChoice::content,
  af|body:high-contrast af|inputNumberSpinbox::content {
    border-style: groove;
    border-width: 2px;
  }
}/*accessibility block ends*/

/* PRIVATE - This is a browser specific workaround for RTL locales.
   Exposing as public will lock-in support going forward. */
.AFDialog {
  /* This flag enables a workaround for Microsoft IE9+,  SR 111072584108293.
     When '-tr-enable-ie-rtl-toggle' has a value of 'true', we will toggle the
     dir of the html document in RTL mode to LTR for IE version 9 and greater.
  */
  -tr-enable-ie-rtl-toggle: false;
}

/** panelSpringboard **/
af|panelSpringboard {
  overflow: hidden;
  /* default width and height */
  position: relative;
  width: 1024px;
  height: 400px;
  min-width: 100px;
  /* need a min-height so that something renders in flow mode when showDetailItems is empty */
  min-height: 100px;
  -tr-body-slide-animation-duration: 500;
  -tr-selected-pointer-animation-duration: 500;
  -tr-grid-to-strip-animation-duration: 500;
  -tr-strip-to-grid-animation-duration: 500;
  -tr-conveyor-slide-animation-duration: 300;
}

af|panelSpringboard::items {
  position: absolute;
  display: inline-block;
  height: 100px;
  width: 100%;
  text-align: center;
}
/* We want the items div to take up the entire space when in grid mode */
/* until we have a proper overflow solution implemented in grid mode (prev/next arrows),
make the area scrollable if overflow. We decided for 12.1.2 to make it scroll, but
keep the items in the div width-wise, and make them scroll vertical. This may make
the grid less of an nxn grid and more of a long vertical list of items. We scroll only if we have to, so
we add style.overflow in the Peer. */
af|panelSpringboard:grid af|panelSpringboard::items {
  height: auto;
  top: 0px;
  bottom:0px;
  left:0px;
  right:0px;
  overflow: hidden;
}
af|panelSpringboard:grid af|panelSpringboard::items:scrollY {
  overflow-y: scroll;
}

@agent ie and (version: 7.0) {
  /*
   * IE 7 has a bug with the combination of overflow, position absolute, and
   * height of unspecified measurement. In nutshell it works with every other
   * browser and IE version higher than 7; however when using IE 7 then the
   * content is chopped off within the panelSpringboard. In case there exists
   * issues in the future, one can set the height to a specific measurement to
   * avoid this issue.
   */
  af|panelSpringboard:grid af|panelSpringboard::items {
    overflow: visible;
  }
}


/* We don't want the items to stretch outside of the panelSpringboard's boundaries when in flow mode.
So we need to make position relative, not absolute.*/
af|panelSpringboard:flow af|panelSpringboard::items {
  position: relative;
}
af|panelSpringboard:flow:grid af|panelSpringboard::items {
  height:100%;
}

af|panelSpringboard::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}

af|panelSpringboard:grid af|panelSpringboard::body-viewport {
  visibility: hidden;
}

af|panelSpringboard::body-viewport {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 110px;
  bottom: 10px;
}
/* in flow mode, this is a table element */
af|panelSpringboard:flow af|panelSpringboard::body-viewport {
  position: relative;
  top: auto;
  bottom: 0px;
}

af|panelSpringboard::canvas {
  position: absolute;
  height: 100%;
}
af|panelSpringboard::body {
  -tr-rule-ref: selector(".AFLightestNeutralBackground:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
  position: relative;
  height: 100%;
  padding: 5px;
}
/* don't have height:100% for flow mode */
af|panelSpringboard:flow af|panelSpringboard::body {
  height: auto;
}

/* the item is rendered as an 'a' tag. It needs display: block */
/* give it a margin so that the selected border shows up */
af|panelSpringboard::item {
  width:112px;
  height:100px;
  text-align:center;
  position:relative;
  text-decoration: none;
  display: block;
  z-index:10;
  margin: 1px;
  padding-bottom:10px;
  border: 1px dotted aqua;
}

af|panelSpringboard::badge {
  background-color: #CC0000;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  color: #FFFFFF;
  height: 20px;
  min-width: 10px;
  position: absolute;
  left: 62px;
  top: 2px;
  font-weight:bold;
  font-size: 11px;
  line-height: 19px;
  padding-left:5px;
  padding-right:5px;
  vertical-align: middle;
  margin-right: 2px;
  margin-top: 2px;
}

/* This is the img element */
af|panelSpringboard::item-icon-style {
  width: 48px;
  height: 48px;
  background-repeat:no-repeat;
  background-position:center center;
  border:none;
}

/* seems to need width when position is absolute */
af|panelSpringboard::item-text {
  position: absolute;
  text-align: center;
  overflow: hidden;
  word-wrap: break-word;
  margin: auto;
  width:90px;
  top: 70px;
  height:25px;
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  -tr-rule-ref: selector(".AFTextForeground:alias");
}
/* This is a positioned div that is a pointer that points to the selected item. */
af|panelSpringboard::selected-pointer {
  position: absolute;
  height: 16px;
  width: 112px;
  top: 95px;
  background-image: url("/afr/springboard_selected.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  bottom: -1px;
  z-index: 100;
}
/* Note that though the below CSS references conveyor, the implementation does not use the same code but is using the idiom for consistency to similar functionality */
af|panelSpringboard::conveyor-belt-container {
  height: 100%;
  overflow: visible;
  position: relative;
  width: 100%;
}

af|panelSpringboard::conveyor-belt-content {
  height: 100%;
  overflow: visible;
  position:relative;
}

af|panelSpringboard::start-conveyor-belt-indicator {
  -tr-rule-ref: selector("af|panelSpringboard::conveyor");
  background-image: url("/afr/overflow_lt_act.png");
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  top: 30%;
  height: 14px;
  width: 14px;
  padding: 15px;
}

af|panelSpringboard::start-conveyor-belt-indicator img,
af|panelSpringboard::end-conveyor-belt-indicator img {
  display: none;
}

af|body:high-contrast af|panelSpringboard::start-conveyor-belt-indicator img,
af|body:high-contrast af|panelSpringboard::end-conveyor-belt-indicator img {
  display: block;
}

af|panelSpringboard::start-conveyor-belt-indicator:hover {
  background-image: url("/afr/overflow_lt_act.png");
}

af|panelSpringboard::end-conveyor-belt-indicator {
  -tr-rule-ref: selector("af|panelSpringboard::conveyor");
  background-image: url("/afr/overflow_rt_act.png");
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 14px;
  width: 14px;
  padding: 16px;
  top: 30%;
}

af|panelSpringboard::end-conveyor-belt-indicator:hover {
  background-image: url("/afr/overflow_rt_act.png");
}

af|panelSpringboard::conveyor {
  display: inline-block;
  position: absolute;
  top: 0px;
  width: 40px;
}
/* display:none because we want this hidden if we don't need it. It is set to inline-block when it is needed. */
af|panelSpringboard::start-conveyor-belt-indicator-container {
  -tr-rule-ref: selector("af|panelSpringboard::conveyor");
  display: none;
  height: 100px;
  left: 0px;
}

af|panelSpringboard::end-conveyor-belt-indicator-container {
  -tr-rule-ref: selector("af|panelSpringboard::conveyor");
  display: none;
  height: 100px;
  right: 0px;
}
@agent webkit {
  af|panelSpringboard::item-text,
  af|panelSpringboard::badge {
    text-decoration: none;
  }
 }

/* Show help definition on help icon by default */
af|help {
  -tr-help-def-location: icon;
}

/* Border color for label text that has help definition */
.AFHelpBorderColor:alias {
  color: #525252;
}

/* Border style for label text that has help definition */
.AFHelpDefLabelStyle:alias {
  border-bottom: 1px dotted -tr-property-ref(".AFHelpBorderColor:alias","color");
}

/* Style for label text when -tr-help-def-location is set to "label" */
*:has-help-def {
  -tr-rule-ref: selector(".AFHelpDefLabelStyle:alias");
}

.p_AFHiddenAccessible {
    position: absolute;
    overflow: hidden;
    border: 0px;
    height: 1px;
    margin: -1px;
    padding: 0px;
    width: 1px;
    clip: rect(0 0 0 0);
}
/*
    This is a styling for a root element that will be added to the
    page dynamically to test to see if the browser is in HighContrast
    mode.
*/
#hiContrastTestEl {
    border: 1px solid;
    border-color:red green;
    position: absolute;
    height: 5px;
    top: -999px;
    background-image: url('/afr/blank.gif');
}

/*
  Moved width: auto inline style from the renderer to the css.
*/
af|inputComboboxListOfValues::content[size],
af|inputListOfValues::content[size]{
  width:auto
}

@platform iphone {
  @media (orientation: landscape) {
    af|table::scroll-container {
      -webkit-animation: scroll-landscape 1s;
    }

    @-webkit-keyframes scroll-landscape{
      0% {padding-bottom: 1px;}
      100% {padding-bottom: 0px;}
    }
  }
}

/*
  There is a button selector defined in base-desktop in Trinidad.
  In email mode, when it is clubbed with other selectors, it is
  causing styling issues in outlook, probably because outlook 2007
  does not support button tag. (See bug 20053761)
*/
@agent email {
  button {
    -tr-inhibit:all;
  }
}

af|inputSearch {
  -tr-row-count: 5;
}
af|inputSearch::access-key {
  -tr-rule-ref: selector(".AFFormAccessKeyStyle:alias");
}
af|inputSearch::label {
  -tr-rule-ref:selector(".AFLabel:alias");
}
af|inputSearch:disabled::label {
  -tr-rule-ref:selector(".AFLabelDisabled:alias");
}
af|inputSearch::input-container {
  -tr-rule-ref: selector(".AFFormControlContentBorder:alias");
  -tr-rule-ref: selector(".AFFormControlContentBackground:alias");
  display: inline-block;
  white-space: nowrap; /* To ensure that the icon doesn't render next line */
}
af|inputSearch::input-container:ltr {
  padding-right: 15px; /* additional space for icon */
}
af|table af|inputSearch::input-container:ltr,
af|treeTable af|inputSearch::input-container:ltr {
  margin-right: 12px; /* space for any icons within the column e.g. changed icon */
}
af|inputSearch::input-container:rtl {
  padding-left: 15px; /* additional space for icon */
}
af|table af|inputSearch::input-container:rtl,
af|treeTable af|inputSearch::input-container:rtl {
  margin-left: 12px; /* space for any icons within the column e.g. changed icon */
}
af|inputSearch:disabled::input-container {
  -tr-rule-ref: selector(".AFFormControlContentBackgroundDisabled:alias");
}
af|inputSearch::content {
  -tr-rule-ref: selector(".AFDefaultFont:alias");
  border: 0;
  background-color: inherit;
  width: calc(100% - 9px);
  box-sizing: border-box;
}
af|inputSearch::content:ltr {
  padding: 0 0 0 5px;
}
af|inputSearch::content:rtl {
  padding: 0 5px 0 0;
}
af|inputSearch:disabled::content {
  -tr-rule-ref: selector(".AFFormControlContentForegroundDisabled:alias");
}
af|inputSearch::button {
  position: relative;
}
af|inputSearch::button::before {
  display: none;
  content: url("/afr/autosuggest_spinner.gif");
  position: absolute;
  top: 0;
  bottom: 0;
  height: 12px;
  margin: auto;
}
af|inputSearch::button::before:ltr {
  right: 18px;
}
af|inputSearch::button::before:rtl {
  left: 18px;
}
af|inputSearch:value-updating::button::before {
  display: inline-block;
}
af|inputSearch::button::after {
  content: url("/afr/lov_ena.png");
  vertical-align: middle;
  display: inline-block;
}
af|inputSearch::button::after:ltr {
  padding-left: 4px;
}
af|inputSearch::button::after:rtl {
  padding-right: 4px;
}

af|inputSearch::suggestions-container {
  max-height: 300px;
  overflow: auto;
  -tr-rule-ref: selector(".AFPopupMenuBorder:alias");
  -tr-rule-ref: selector(".AFDefaultFont:alias");
}
@agent webkit and (touchScreen) {
  af|inputSearch::suggestions-container {
    -webkit-overflow-scrolling: touch; /* To enable inertial scrolling */
    overflow: auto;
  }
}
af|inputSearch::loading-indicator {
  -tr-rule-ref: selector(".AFBackgroundImageStatus:alias");
  height: 60px; /* also see AdfSuggestionsContainer.setHeight */
  min-width: 60px;
}
af|inputSearch::server-filtering-indicator {
  -tr-rule-ref: selector(".AFBackgroundImageStatus:alias");
  height: 60px;
  width: 60px;
  position: absolute;
  bottom: 0;
  right: 0;
}
af|inputSearch::no-suggestions-message {
  padding: 5px;
}

af|inputSearch::suggestions-scroller {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  overflow: auto;
}
af|inputSearch::suggestions-status-message {
  -tr-rule-ref: selector(".AFDataCollectionStatusMessage:alias");
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
  display: none;
  height: 14px;
  line-height: 14px;
}
af|inputSearch::suggestions-status-message:ltr {
  right: 25px;
}
af|inputSearch::suggestions-status-message:rtl {
  left: 25px;
}

af|inputSearch::list-items-container,
af|inputSearch::row-items-container {
  position: relative;
  z-index: 1;
}
af|inputSearch::list-items-container {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
af|inputSearch::row-items-container {
  border-collapse: collapse;
  table-layout: fixed;
  min-width: inherit;
}

af|inputSearch::suggestion-list-item,
af|inputSearch::suggestion-row-item {
  cursor: default;
}

af|body:high-contrast af|inputSearch::suggestion-list-item:selected,
af|body:high-contrast af|inputSearch::suggestion-row-item:selected,
af|body:high-contrast af|inputSearch::suggestion-list-item:hover,
af|body:high-contrast af|inputSearch::suggestion-row-item:hover {
  border: 1px solid;
}

af|inputSearch::suggestion-list-item:ltr,
af|suggestionsSection::list-header:ltr,
af|searchSection::list-header:ltr {
  padding-right: 20px; /* For vertical scrollbar */
  padding-left: 5px;
}
af|inputSearch::suggestion-list-item:rtl,
af|suggestionsSection::list-header:rtl,
af|searchSection::list-header:rtl {
  padding-left: 20px;
  padding-right: 5px;
}
af|inputSearch::suggestion-item-matching-text {
  font-weight: bold;
}

af|inputSearch::suggestion-row-item,
af|inputSearch::suggestion-row-header,
af|suggestionsSection::row-header,
af|searchSection::row-header {
  box-sizing: border-box;
}
af|suggestionsSection::row-header:ltr,
af|searchSection::row-header:ltr {
  text-align: left;
}
af|suggestionsSection::row-header:rtl,
af|searchSection::row-header:rtl {
  text-align: right;
}
af|inputSearch::suggestion-row-header {
  font-size: 13px;
  font-weight: bold;
}
af|inputSearch::suggestion-row-header:ltr {
  text-align: left;
}
af|inputSearch::suggestion-row-header:rtl {
  text-align: right;
}
af|inputSearch::suggestion-row-header th {
  position: sticky;
  top: 0;
  -tr-rule-ref: selector(".AFTableCellHeaderBackground:alias");
}
@agent edge {
  /* Edge has a bug - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17555420
     Disable this feature on edge until then */
  af|inputSearch::suggestion-row-header th {
    position: static;
  }
}
af|inputSearch::suggestion-row-item td,
af|inputSearch::suggestion-row-item th[scope=row],
af|inputSearch::suggestion-row-header th,
af|suggestionsSection::row-header th,
af|searchSection::row-header th {
  padding: 5px;
}
af|inputSearch::suggestion-row-item th[scope=row] {
  font-weight: normal;
  text-align: inherit;
}
@agent ie {
  af|inputSearch::suggestion-row-header th,
  af|suggestionsSection::row-header th,
  af|searchSection::row-header th {
    text-align: inherit;
  }
}
af|suggestionsSection::row-header th,
af|searchSection::row-header th {
  box-sizing: border-box;
}
/* Selections button related */
af|inputSearch::selections-button {
  display: inline-block;
  width: 33px;
}
af|inputSearch::selections-button:not([data-afr-sel]) {
  display: none;
}
af|inputSearch::selections-button::after {
  content: '(' attr(data-afr-sel) ')';
  color: -tr-property-ref(".AFLinkForeground:alias","color");
  padding-left: 9px;
  padding-right: 9px;
}
af|inputSearch:disabled::button::after,
af|inputSearch:disabled::selections-button::after {
  -tr-rule-ref: selector(".AFLinkDisabled:alias");
}
af|inputSearch:has-selections::content {
  width: calc(100% - 42px);
  text-overflow: ellipsis;
}
af|inputSearch:has-selections::button::before:ltr {
  right: 54px;
}
af|inputSearch:has-selections::button::before:rtl {
  left: 54px;
}

/* Style classess used in templates */
@no-compress {
  .AFTltWrapper {
    white-space: nowrap;
  }
  .AFTltSideAlign {
    vertical-align: middle;
    display: inline-block;
  }
  .AFTltCheckboxCntnr {
  }
  .AFTltCheckbox {
    vertical-align: middle;

    /* checkbox is only for presentation, click will be handled on suggest item */
    pointer-events: none;
  }
  .AFTltVirtualCheckbox {
    display: none;
  }
}


 @no-compress {

af|richTextEditor:error .cke_inner.cke_reset{
    border: 2px #C70000 solid;
}
af|richTextEditor .cke_bottom.cke_reset_all{
  background:#ffffff !important;

  border-top:1px solid #DADADA !important;

}
af|richTextEditor .cke_path_item, af|richTextEditor .cke_path_empty{
   color:#000000 !important;
  }
  af|richTextEditor .cke.cke_reset{
    box-shadow:none !important;
    border:1px solid #DADADA !important;
  }
  af|richTextEditor .cke_top{
    background:#FAFAFA !important;
    border-bottom : 1px solid #DADADA !important
  }
  af|richTextEditor .cke_button__source_label {
    display:none !important;
  }

  af|richTextEditor .cke_combo_text{
    font-size: 11px !important;
    color : #333333;
  }

  af|richTextEditor .cke_combo_button{
    margin-right:5px !important;
  }
  af|richTextEditor .cke_combo__fontsize .cke_combo_text {
      width: 10px !important;
      padding-left: 3px !important;;
      padding-right: 3px !important;;
  }

  af|richTextEditor .cke_combo_text{
    padding-left : 8px !important;
  }
  .cke_chrome {
    visibility:inherit !important;
  }
  af|richTextEditor .cke_button {
    margin-right : 2px !important;
  margin-top : 2px !important;
}
af|richTextEditor .cke_toolbar_separator{
  margin-left: 1px !important;
}
.AFTimeOutGlassPane .cke_dialog_background_cover, .AFTimeOutGlassPane .cke_dialog{
  display:none ;
  }
}
