CSS Guide for PeopleSoft Fluid User Interface

May 2015

Oracle PeopleSoft PeopleTools 8.54 Product Documentation Update: PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved.

Trademark Notice

Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.

Intel and Intel Xeon are trademarks or registered trademarks of Intel Corporation. All SPARC trademarks are used under license and are trademarks or registered trademarks of SPARC International, Inc. AMD, Opteron, the AMD logo, and the AMD Opteron logo are trademarks or registered trademarks of Advanced Micro Devices. UNIX is a registered trademark of The Open Group.

License Restrictions Warranty/Consequential Damages Disclaimer

This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited.

Warranty Disclaimer

The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report them to us in writing.

Restricted Rights Notice

If this is software or related documentation that is delivered to the U.S. Government or anyone licensing it on behalf of the U.S. Government, the following notice is applicable:

U.S. GOVERNMENT RIGHTS

Programs, software, databases, and related documentation and technical data delivered to U.S. Government customers are "commercial computer software" or "commercial technical data" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, the use, duplication, disclosure, modification, and adaptation shall be subject to the restrictions and license terms set forth in the applicable Government contract, and, to the extent applicable by the terms of the Government contract, the additional rights set forth in FAR 52.227-19, Commercial Computer Software License (December 2007). Oracle America, Inc., 500 Oracle Parkway, Redwood City, CA 94065.

Hazardous Applications Notice

This software or hardware is developed for general use in a variety of information management applications. It is not developed or intended for use in any inherently dangerous applications, including applications that may create a risk of personal injury. If you use this software or hardware in dangerous applications, then you shall be responsible to take all appropriate fail-safe, backup, redundancy, and other measures to ensure its safe use.

Oracle Corporation and its affiliates disclaim any liability for any damages caused by use of this software or hardware in dangerous applications.

Third Party Content, Products, and Services Disclaimer

This software or hardware and documentation may provide access to or information on content, products, and services from third parties. Oracle Corporation and its affiliates are not responsible for and expressly disclaim all warranties of any kind with respect to third-party content, products, and services. Oracle Corporation and its affiliates will not be responsible for any loss, costs, or damages incurred due to your access to or use of third-party content, products, or services.

Alpha and Beta Draft Documentation Notice

This documentation is in preproduction status and is intended for demonstration and preliminary use only. It may not be specific to the hardware on which you are using the software. Oracle Corporation and its affiliates are not responsible for and expressly disclaim all warranties of any kind with respect to this documentation and will not be responsible for any loss, costs, or damages incurred due to the use of this documentation.

Contents

Introduction................................................................................................................ 4

PeopleTools System Default CSS Styles.................................................................. 5

Fluid Application Content CSS Styles..................................................................... 41

Introduction

As described in the PeopleSoft PeopleTools 8.54: Fluid User Interface Developer’s Guide, creating fluid applications relies heavily on CSS 3.0 for the look, feel, and layout of the runtime application. If you intend to customize or create any fluid application, expert knowledge of CSS is required.

Prior to working with any fluid style development work, make sure you are familiar with the documentation provided in PeopleSoft PeopleTools 8.54: Fluid User Interface Developer’s Guide, “Adding Page Controls,” Applying Styles.

http://docs.oracle.com/cd/E58500_01/pt854pbh1/eng/pt/tflu/concept_ApplyingStyles.html#topofpage

This document provides descriptions of nearly a thousand CSS styles delivered with PeopleTools 8.54. The styles are divided in these categories:

· PeopleTools System Default CSS Styles: These styles are used to control basic elements of the fluid infrastructure provided by PeopleTools, such as the NavBar, the fluid banner, homepages, tiles and so on.

· Application Content CSS Styles: These styles are used to control application content deployed in fluid mode.

To better understand the columns in the tables of this guide, refer to the following list for a brief description of each column:

· Style: Lists the style name, as it appears in the delivered style sheet.

· Used With: If a style is to be used in conjunction with another specific style, it will be listed here.

· Category: If a style is designed to be used with a specific construct, like a grid, the name of that construct will be listed here.

· Sub Category: If a style is designed to be used with a specific type of construct it is listed here. For example, if the category is Grid, the sub category may be Flex, indicating this style applies to grids of the type flex grid.

· Description: Includes information on the purpose of the style, how it is intended to be used, and, if needed, any implications or guidelines pertaining to that style.

PeopleTools System Default CSS Styles

The following table describes the CSS styles applied automatically by PeopleTools as default styles for fluid elements. These styles are applied to:

· Delivered fluid elements such as the NavBar, fluid banner, search pages, and so on.

· Page controls added to fluid pages. Styles are applied automatically as default styles.

Style	Used With	Context Category	Sub Category	Description
android		OS		Style Applied on HTML tag indicating that the device's OS is Android.
chrome		Browser		Style Applied on HTML tag indicating that the browser has been identified as Chrome.
debugtext		Debugging		Text within the Ajax Debugging Console.
expand		Groupbox	Accordion	May not be used.
firefox		Browser		Style Applied on HTML tag indicating that the browser has been identified as Firefox.
frame-pt_attachmentpage		Modal	Attachment	Styling for Attachment Dialog Frame.
frame-pt_promptpage		Modal	Prompt	Styling for Prompt Page Frame.
frame-pt_viewattach		Modal	Attachment	Styling for View Attachment Frame for iOS.
ie		Browser		Style Applied on HTML tag indicating that the browser has been identified as Internet Explorer.
imagePreview		Modal	Attachment	May not be used.
ios		OS		Style Applied on HTML tag indicating that the device's OS is iOS.
loader		Modal	Attachment	May not be used.
loadingIndicator		Modal	Attachment	May not be used.
mac		OS		Style Applied on HTML tag indicating that the device's OS is general

Style	Used With	Context Category	Sub Category	Description
				MAC.
nbar		NavBar		Used to set up NavBar scrolling.
nuidflt		HomePage	Tile	Setting up defaults for grouplets in Homepage.
nuilp		HomePage	Tile	Tile styling for Homepage.
nuinb		HomePage	Tile	Tile Image Styling for Homepage.
nuitile		HomePage	Tile	Homepage style to indicate content is within Tile.
nuitilegrid		HomePage	Tile	Homepage Tile Grid styling.
page-pt_promptpage		Modal	Prompt	Page styling for Prompt page.
pc		Device Type		Style Applied on HTML tag indicating that the device's TYPE is PC (versus tablet/phone are typically not used).
persmode		HomePage	Tile	Used by Homepage when in personalization mode.
ps_accordion		Groupbox	Accordion	Vertical Accordion outermost container.
ps_accordion_content		Groupbox	Accordion	Individual accordion group box container.
ps_accordion_content0		Groupbox	Accordion	Individual accordion group box container (inner).
ps_accordion_content0Expand		Groupbox	Accordion	Horizontal accordion expanded state (not used).
ps_accordionH		Groupbox	Accordion	Horizontal version of the accordion (not used).
ps_actions_cont		Banner		Outer container for the right area of the banner, which contains action controls (i.e.,

Style	Used With	Context Category	Sub Category	Description
				homepage button, global search button, notifications button, actions list button, and navbar button).
ps_ajax_console		Tools		PeopleTools debugging tool for monitoring Ajax.
ps_arrow		Modal	Page	Tail Style for ANCHORED Modal (point to the triggering element).
ps_arrow_bottom		Modal	Page	Tail Style for ANCHORED Modal (point to the triggering element).
ps_arrow_left		Modal	Page	Tail Style for ANCHORED Modal (point to the triggering element).
ps_arrow_left_disable		Modal	Page	Tail Style for ANCHORED Modal (point to the triggering element).
ps_arrow_right		Modal	Page	Tail Style for ANCHORED Modal (point to the triggering element).
ps_arrow_right_disable		Modal	Page	Tail Style for ANCHORED Modal (point to the triggering element).
ps_arrow_top		Modal	Page	Tail Style for ANCHORED Modal (point to the triggering element).
ps_attach-completetext		Modal	Attachment	Completion text in the attachment dialog.
ps_attach-img		Modal	Attachment	Preview image found in the attachment dialog file list.
ps_attach-indicator		Modal	Attachment	Progress Bar indicator for the attachments

Style	Used With	Context Category	Sub Category	Description
				dialog.
ps_attach-instruct		Modal	Attachment	Static Instruction Text found on multi-file selection attachment dialog.
ps_attach-loader		Modal	Attachment	Container for the overall upload progress area (progress bar and status text).
ps_attach-loadertext		Modal	Attachment	Container for the Uploading/Completio n status text.
ps_attach-uploadtext		Modal	Attachment	Uploading status text in the attachment dialog.
ps_back_cont		Banner		Outer container for the left area of the banner, which contains the back control (or the Company Logo on Homepage).
ps_box_grid-col		Grids	Flex,Div	Interior wrapper for a grid's column header entry.
ps_box-button		Pushbutton		Outermost container of a button page element.
ps_box-checkbox		Checkbox		Outermost container of a checkbox page element.
ps_box-control	Many Places	Controls		Inner containe, which wraps the actual input type page element (sibling to ps_box- label typically).
ps_box-dropdown		Dropdown		Outermost container of a drop-down page element.
ps_box-edit		Edit Box		Outermost container of an edit page element.

Style	Used With	Context Category	Sub Category	Description
ps_box-editlbl		UNKNOWN
ps_box-grid		Grids	All	Generic inner container for a grid.
ps_box-gridc		Grids	All	Container for all grids (sibling to ps_box- grid-header).
ps_box-grid-div		Grids	Div	Outermost container for a DIV GRID.
ps_box-grid-flex		Grids	Flex	Outermost container of a FLEX GRID.
ps_box-grid-head		Grids	All	Secondary table for FLEX GRIDS used to fix the header in a scrollable grid.
ps_box-grid-header		Grids	All	Container for the grid header, which includes all elements (title, number of rows, header bar, tabs).
ps_box-grid-header_bar		Grids	All	Wrapper for the grid header bar containing PeopleTools (sort) and application customer buttons for a grid (if any).
ps_box-grid-list		Grids	List	Outermost container of a LIST GRID.
ps_box-grid-tabs		Grids	Flex	Container for the tabs for a TABBED FLEX GRID.
ps_box-grid-title		Grids	All	Container for the Grid Title.
ps_box-group		Groupbox		Generic style applied to all group box page elements.
ps_box-grouplet		Grouplet		Outermost container of a grouplet.
ps_box-hr		Layout		Outermost container for a Horizontal Rule page element.
ps_box-htmlarea		HTML		Outermost container for an HTML Area page element.

Style	Used With	Context Category	Sub Category	Description
ps_box-img		Image		Outermost container for an Image page element.
ps_box-label		Label		Inner container which wraps the label of an input page element (sibling to ps_box- control typically).
ps_box-link		Hyperlink		Outermost container for a Hyperlink page element.
ps_box-longedit		Long Edit		Outermost container for a LongEdit page element.
ps_box-menu		Related Content
ps_box-more		Grids	Accessibility	Lazy scroll button to fetch more rows in accessibility mode.
ps_box-msgactions		Modal	Message	Container for the action buttons in a Message Popup.
ps_box-msgalert		Modal	Message	Inner container for a Message Popup containing the message text (sibling to ps_box- msgactions).
ps_box-msgcontainer		Modal	Message	Outermost container for all Message Popup content.
ps_box-msglong		Modal	Message	Explanation text container for a Message Popup.
ps_box-msgnum		Modal	Message	Message Set/Number container for a Message Popup.
ps_box-msgother		Modal	Message	Supplimental information for certain types of Message Popups (like stack back trace for PeopleCode error

Style	Used With	Context Category	Sub Category	Description
				messages).
ps_box-msgshort		Modal	Message	Short text for a Message Popup.
ps_box-pagetabs		Tabs	Page	Outermost container for page tabs.
ps_box-promptpage		Modal	Prompt	Outermost container for the prompt page actual content.
ps_box-radio		Radio Button		Outermost container for a radio button page element.
ps_box-rowaction		Scroll Area		Container for row- level add/delete operations for scroll area page elements.
ps_box-scrollarea		Scroll Area		Outermost container for a scroll area page element.
ps_box-scrollarea-row		Scroll Area		Container for a row of a scroll area page element.
ps_box-searchop		Modal	Prompt	Special wrapper to a secondary ps_box- control containing the drop-down for the search operators. Only found on a prompt page.
ps_box-searchto		Modal	Prompt	Special wrapper to a tertiary ps_box- control containing a "TO" field on a prompt page when performing a BETWEEN search operation.
ps_box-sort		Grids	All	Style applied to the special grid sort button found in a grid's header bar (if sorting is enabled and column sorting is not available).

Style	Used With	Context Category	Sub Category	Description
ps_box-staticimg		Static Image		Outermost container for a static image page element.
ps_box-text		Static Text		Outermost container for a static text page element (or other static text like the row count in a grid header).
ps_box-typeahead		Page	Typeahead	Outer container for the typeahead results.
ps_box-value		Controls	Disabled	Read only text VALUE (as opposed to the label) of a disabled input type of control, which is displayed as TEXT rather than a disabled control (valid for Edit box, Long Edit box, Drop-downs, and Checkboxes).
ps_box-valueemail		Controls	Disabled	Wrapper containing the tag for rendering an email as a hyperlink (when disabled as hyperlink is set on an EMAIL HTML input type).
ps_box-valuelink		Controls	Disabled	Wrapper containing the tag for rendering a URL as a hyperlink (when disabled as hyperlink is set on a URL HTML input type).
ps_calendar_modal		Calendar		Modal container style applied for the PeopleTool's version of a Calendar picker for a Text-based Date field.
ps_content		Page		Page container rendered to contain an application's

Style	Used With	Context Category	Sub Category	Description
				content.
ps_content-group		Groupbox		Container in a group box (non-collapsible), found if a header exists, which contains the actual application's content (sibling to ps_header- group).
ps_custom_action		Banner	Actions List	Special target section of the Actions List where a specific transaction's actions are placed.
ps_custom_cont		Banner,Modal		Container in banner/modal header where application's custom items are placed (left [back/canel], center [title], and right [actions/Done]).
ps_detail-group		Groupbox	Collapsible	Similar to ps_content- group but used on collapsible group boxes to contain the actual application's content of a group box (versus the header of the group box).
ps_footer		Page		Outermost container for the footer section of the page (contains the FOOTER page content).
ps_grid-body		Grids	All	Outermost container of the actual grid's body (content).
ps_grid-cell		Grids	All	Identifies what is considered to be a CELL of a grid page element. Most

Style	Used With	Context Category	Sub Category	Description
				important for FLEX grids but are applied GENERICALLY so that "groupings" within the grid using group boxes can be maintained.
ps_grid-col		Grids	Flex	Outer wrapper for a grid column header.
ps_grid-col-label		Grids	Flex	Style applied to a column's heading LINK when the column sorting is enabled (and can be based on grid usage).
ps_grid-div		Grids	Div	Qualifier to ps_grid- body to indicate this is a DIV GRID.
ps_grid-flex		Grids	Flex	Qualifier to the TABLE HTML tag to indicate this is a FLEX GRID.
ps_grid-flex-head		Grids	Flex	Qualifier to the TABLE HTML tag of the SHADOW TABLE used to control the fixed header in a scrollable FLEX grid.
ps_grid-head		Grids	Flex,Div	Outermost wrapper for grid column headers.
ps_grid-head-row		Grids	Flex,Div	Row of a grid containing the grid's column headers.
ps_grid-list		Grids	List	Wrapper which contains as a child the actual list itself (child is ps_grid-body, which is a UL/OL tag).
ps_grid-row		Grids	All	Identifies what is considered to be a ROW of a grid page element (different grids will use different HTML tags).

Style	Used With	Context Category	Sub Category	Description
ps_grid-title		Grids	All	Header tag used as the header of a grid.
ps_groupleth		Grouplet		Grouplet header text.
ps_header		Page		Outermost container for the header section of the page (contains the Header Page content).
ps_header_bar		Banner		Overall container of the BANNER area, which contains the back navigation, page title, and action button area.
ps_header_bar_custom		Banner		Area below the banner area used to populate an application's custom header information.
ps_header_modal		Modal		Container for the entire modal header. Similar in nature to the ps_header_bar for main pages.
ps_header-grid-custom		Grids	All	Container of the application's custom buttons in a grid header bar.
ps_header-grid-end		Grids	All	Special markup for terminating any floating elements within a grid header bar.
ps_header-grid-system		Grids	All	Container of the system controls in a grid header bar. For example, the grid sort button.
ps_header-group		Headings		Container of the group box's header.
ps_header-groupExpand		Groupbox	Accordion	Horizontal accordion expanded header (not used).

Style	Used With	Context Category	Sub Category	Description
ps_header-gsearch		Banner		Global Search functionality in the header bar (as a button or item under the Actions List).
ps_header-navbar		Banner		NavBar functionality in the header bar (as a button or item under the Actions List).
ps_header-next		Banner	Actions List	Next In List functionality in the header bar (as an item under the Actions List).
ps_header-previous		Banner	Actions List	Previous In List functionality in the header bar (as an item under the Actions List).
ps_hidden		Layout		Internal style used to hide an element from display and screen readers.
ps_icon-date		Edit Box		Actionable image to trigger the PeopleTools calendar picker.
ps_icon-prompt		Edit Box		Actionable image to trigger the prompt page.
ps_icon-rc		Edit Box		Actionable image to trigger related actions functionality on a field.
ps_indicator		Checkbox	Switch	Container for the checked and unchecked text values for a checkbox displayed in SWITCH (advanced) mode.
ps_main		Page		Page container for the content section of the page.

Style	Used With	Context Category	Sub Category	Description
ps_main_trf		Page	Transition	Page Transfer animation style when animation is enabled.
ps_main_trf2		Page	Transition	Secondary page style when page animation is enabled.
ps_masktrans		Modal		Transparent page mask when a modal is popped up to prohibit work with the main page elements.
ps_menucontainer		Menu	Actions List	Outermost style for items, which appear menu-like.
ps_menuitem		Menu	Actions List	Individual wrappers around menuitem-like elements.
ps_menusection		Menu	Actions List	Divisions of menu items into groups. For example, application section, search section, system section of the Actions List).
ps_menutype-act		Banner	Actions List	Outermost style applied to the modal popup for the Actions List.
ps_mheader-bar		Modal		Modal header container.
ps_mheader-section1		Modal	Header	Left section container of the modal header containing the CANCEL operation (if Cancel/Done is configured for the modal).
ps_mheader-section2		Modal	Header	Center section container of the modal header containing the modal title.
ps_mheader-section3		Modal	Header	Right section

Style	Used With	Context Category	Sub Category	Description
				container of the modal header containing the DONE (or CLOSE) operation.
ps_mid_section		Page		Page container as a sibling between the header and footer sections, which contains the primary application content.
ps_mod_wrap		Modal		Modal page structure container.
ps_mod_wrapc		Modal		Modal page structure container (child of ps_mod_wrap).
ps_modal_body		Modal		Special style of INNER HTML DOCUMENT with the iframe of the BODY tag (normal body tag has no class specified).
ps_modal_bottom		Modal		Bottom section of a modal typically containing modal controls (not typically used).
ps_modal_close		Modal		Wrapper container for the Modal Close button (the "X" button typically seen on the left side of the modal header).
ps_modal_container		Modal		Generic wrapper for modal content.
ps_modal_content		Modal		Specific wrapper for modal content. For example, a secondary page would have an iframe as a child.
ps_modal_header		Modal		Container style for the modal header area.
ps_modal_title		Modal		Special style used on the modal tile for

Style	Used With	Context Category	Sub Category	Description
				internally rendered modals (like the Grid Sort modal).
ps_modal-gridsort		Grids	Sort	Container style for the Grid sort Popup Modal.
ps_modalmask		Modal		Overlay masking the transaction beneath a modal when a modal appears.
ps_modalmasktran		Modal		Overlay masking the transaction beneath when a modal appears.
ps_more		Grids		Related Content item indicator of folder (chevron).
ps_pagecontainer		Page		Page structure used by PeopleTools in rendering a page.
ps_pagetitle		Headings		Style applied to the HEADER element within a group box of type "Page Title".
ps_pagetitle_cont		Banner		Section style of the center area of the main page banner containing the title (or HomePage Selector).
ps_popup-attach		Modal	Attachment	Page styling attachment dialog.
ps_popup-back		Groupbox	Popup	Back button for special PeopleTools generated modals.
ps_popup-horizontal		Groupbox	Popup	Style used when rendering Popup group boxes with TAIL pointer on the left or right.
ps_popup-menu		Groupbox	Popup	Style to be applied when the internal content of a Popup Group box is a list of

Style	Used With	Context Category	Sub Category	Description
				items (menu-like).
ps_popup-msg		Modal	Message	Outermost style applied to a MessageBox / WinMessage popup.
ps_popup-vertical		Groupbox	Popup	Style used when rendering Popup group boxes with TAIL pointer on the top or bottom.
ps_process		HomePage	Tile	Style when rendering static image on a tile in the Homepage.
ps_prompt-criteria		Modal	Prompt	Collapsible group box containing a prompt page's criteria fields.
ps_prompt-done		Modal	Prompt	Prompt Page Done button.
ps_prompt-inmode		Modal	Prompt	Style applied when the prompt page opened from an IN OPERATION prompt. Enables the Done button and the multi- row selections on the grid.
ps_prompt-intemp		Modal	Prompt	Special hidden field on the prompt page for IN OPERATION prompting.
ps_prompt-resultsgrid		Modal	Prompt	Grid page element containing the prompt page's results grid.
ps_prompt-resultswrapper		Modal	Prompt	Collapsible group box containing a prompt page's results grid.
ps_prompt-searchoptions		Modal	Prompt	Hyperlink on prompt page to toggle display of the criteria fields showing the search operator as a drop- down.
ps_prompt-sourcelabel		Modal	Prompt	Field displaying the

Style	Used With	Context Category	Sub Category	Description
				label of the field from which the Prompt page was triggered.
ps_pspagecontainer		Page		Page structure used by PeopleTools in rendering a page.
ps_pspagecontainer_srch		Page		Page structure used by PeopleTools in rendering a page.
ps_saved_text		Page		Text style for displaying the save confirmation text (hidden in 8.54/8.55).
ps_scrollable		Grids,Groupbo xes	All	Indicates that PeopleTools scrolling has been enabled for a grid or group box.
ps_scrollable_both		Grids,Groupbo xes	All	Indicates that both horizontal and vertical PeopleTools scrolling is enabled.
ps_scrollable_h		Grids,Groupbo xes	All	Indicates that horizontal-only PeopleTools scrolling is enabled.
ps_scrollable_v		Grids,Groupbo xes	All	Indicates that vertical- only Tools scrolling is enabled.
ps_search		Page	Component Search	Special area of a page containing the search criteria and fields for Component Level (Realtime) searching.
ps_search-custom		Banner		Search button displayed when a component search has been involved (visually replaces the standard Global Search).
ps_switch	ps_box- checkbo x	Checkbox	Switch	Styling applied to the container of a checkbox in advanced mode (default), which

Style	Used With	Context Category	Sub Category	Description
				display a checkbox as a SWITCH.
ps_system_cont		Banner, Modal		Container in banner/modal header where system-specific items are placed. There are left [back/canel], center [title], and right [actions/Done].
ps_tab	ps_tabs	Tabs		Style for an individual tab as part of a list of tabs (page tab or grid tab).
ps_tab-link	ps_tab	Tabs		Actual hyperlink control for the tab itself.
ps_tabs		Tabs		Actual list container for a collection of tabs (ps_tab).
ps_test_level_1		Debug		Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_10		Debug		Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_2		Debug		Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_3		Debug		Simple internal layout debugging when the Layout Only checkbox is enabled in a component's

Style	Used With	Context Category	Sub Category	Description
				properties.
ps_test_level_4		Debug		Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_5		Debug		Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_6		Debug		Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_7		Debug		Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_8		Debug		Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_9		Debug		Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_toolbar_mod		Page		Potential target for tools actions at the bottom of the document (not used).
ps_typeahead		Modal	Typeahead	Type ahead container.
ps_typeahead_modal		Modal	Typeahead	Type ahead modal

Style	Used With	Context Category	Sub Category	Description
				wrapper styling.
ps_viewattach-doc		Modal	Attachment	Styling attachment viewer styling (for iOS).
ps_wrapper		Page		Page structure used by PeopleTools in rendering a page (locations where PAGE STYLES using Page properties or PeopleCode are located).
psaccesshidden		Layout	Accessibility	Renders content offscreen but readable by screen reader.
ps-attach-loadcontainer		Modal	Attachment	Container of the load indicator for attachment dialog.
ps-box_groupExpand		Groupbox	Accordion	Expanded state indicator for accordion group box.
ps-box-gridc-right		Grids	All	Inner container for all grids directly under ps_box-gridc container.
ps-button		Pushbutton		Actual HTML button control (Anchor Tag).
ps-button-wrapper		Pushbutton		Button internal wrapper where title attribute is applied.
psc_animate-fadeinout8s		Banner	Confirmation	Confirmation area animation for automatic dismissal. Stays open for a number of seconds and then automatically disappears.
psc_attach-clear		Modal	Attachment	Class applied to the attachment "Clear" button.
psc_attach-completed		Modal	Attachment	State applied to the attachment page

Style	Used With	Context Category	Sub Category	Description
				indicating that upload is completed.
psc_attach-multiple		Modal	Attachment	Attribute class applied to attachment page indicating multiple files can be uploaded.
psc_attach-selected		Modal	Attachment	State applied to the attachment page indicating that at least one file has been selected to be uploaded.
psc_attach-selecting		Modal	Attachment	State applied to the attachment page indicating that a file selection is pending.
psc_attach-upload		Modal	Attachment	Class applied to the attachment "Upload" button.
psc_attach-uploading		Modal	Attachment	State applied to the attachment page indicating that uploading is in progress.
psc_button		Grids	All	Style on grid column/cells to identify that a button is contained in the column.
psc_cancel		Modal	Message	Cancel button on Messagebox Popup.
psc_carousel		Groupbox	Carousel	Styling applied when Carousel scrolling is enabled for a group box.
psc_checkbox		Grids	All	Style on grid column/cells to identify that a checkbox is contained in the column.
psc_close		Groupbox	Accordion, Collapsible	Closed state class applied for collapsible group boxes and

Style	Used With	Context Category	Sub Category	Description
				accordions.
psc_closed		Banner		Used in several constructs to indicate that a structure is closed (like the Global Search tray).
psc_collapsible		Groupbox	Collapsible	Indicator that a group box is a collapsible group box.
psc_confirmation-area		Banner	Confirmation	Container for the confirmation area under the banner.
psc_confirmation-close		Banner	Confirmation	Confirmation area Close button.
psc_confirmation-msg		Banner	Confirmation	Confirmation text message styling.
psc_date		Grids,Edit Box		Style on grid column/cells to identify that a date is contained in the column/Field.
psc_datetime		Grids,Edit Box		Style on grid column/cells to identify that a date/time is contained in the column/field.
psc_disabled		Controls		Used on many page elemeents and on row actions to indicate that the control is DISABLED.
psc_easeb		Page	Transition	Page animation styling.
psc_easel		Page	Transition	Page animation styling.
psc_easer		Page	Transition	Page animation styling.
psc_easet		Page	Transition	Page animation styling.
psc_empty		Controls		A few structures have a psc_empty style to indicate that the structure has no value

Style	Used With	Context Category	Sub Category	Description
				(while the inner structure exists the container is not empty).
psc_error		Controls		Style applied to the wrapper of a page field when an error is raised on the field. For example, Field Validation or format issue.
psc_focus		Controls		Style applied to the wrapper of specific controls to indicate that input focus has been applied within the structure for special styling. For example radio buttons and checkboxes.
psc_form-larger		Form Factor		Special style applied to the HTML tag to indicate that the system has detected the DEVICE fits in the large form factor range.
psc_form-medium		Form Factor		Special style applied to the HTML tag to indicate that the system has detected the DEVICE fits in the medium form factor range.
psc_form-small		Form Factor		Special style applied to the HTML tag to indicate that the system has detected the DEVICE fits in the small form factor range.
psc_form-xlarge		Form Factor		Special style applied to the HTML tag to

Style	Used With	Context Category	Sub Category	Description
				indicate that the system has detected the DEVICE fits in the extra large form factor range.
psc_grid-nohbar		Grids	All	Style to indicate that no grid header bar has rendered. This allows proper formatting of other elements in the overall grid header.
psc_has_selected		Grid		Special style applied when a user has selected one of more rows using the row selection checkox. Applied to that outermost level of the grid for styling items in the grid header bar when a row is selected.
psc_hidden		Layout		Style which hides a structure or page element (CSS display of none).
psc_hide-BP1		Banner		Used to hide a control at a given break point to hide banner buttons when the width of the window gets too small. This breakpoint is for apps custom buttons put in the banner (hide below 900px).
psc_hide-BP2		Banner		Used to hide a control at a given break point to hide banner buttons when the width of the window gets too small. This breakpoint is for the

Style	Used With	Context Category	Sub Category	Description
				Home button (hide below 800px).
psc_hide-BP3		Banner		Used to hide a control at a given break point to hide banner buttons when the width of the window gets too small. This breakpoint is for the Global Search button (hide below 680px).
psc_hide-BP4		Banner		Used to hide a control at a given break point to hide banner buttons when the width of the window gets too small. This break point is for the Navbar button (hide below 580px).
psc_icon		Edit Box		Indicates that an icon exists as part of the rendering of the field (date control or prompt control).
psc_icon-disable		Pushbutton		Indicates that a disabled version of the icon is available so the system doesn't apply the default disabled icon style for a button.
psc_image_only		Pushbutton		Style applied to a button when only an image is specified (no text).
psc_label-suppressed		Grids	All	Indicates that the label is not located in the structure for a given page field within a grid.
psc_layout		Groupbox		Special style applied to indicate that a group box is of type

Style	Used With	Context Category	Sub Category	Description
				Layout.
psc_link		Grids	Flex	Indicates that a hyperlink control is contained within the column of a normal Flex grid.
psc_maxdocheight		Modal	Attachment	Styling of attachment viewer for iOS.
psc_modal-button		Modal		Style indicating that a button should be styled like a modal header button, which is a slightly smaller than a conventional button.
psc_modal-cancel		Modal		Identifies the CANCEL button of a modal.
psc_modal-close		Modal		Identifies the CLOSE button of a modal (the "X" button). Note that the image is not supplied in the style.
psc_modal-done		Modal		Identifies the DONE button for a modal.
psc_modal-fullscreen		Modal		Style applied when a modal is programmatically set to be a full page modal.
psc_modal-pagetitle		Modal		Style applied to the header title found in a modal (similar to ps_pagetitle but on a modal).
psc_mode-access		Page	Accessibility	Class applied to an HTML tag to allow special styling in accessibility mode.
psc_mode-hc		Page	Accessibility	Class applied to an HTML tag to allow special styling when running in OS high contrast mode.

Style	Used With	Context Category	Sub Category	Description
psc_more		Grids		Grid row indicator of tapability.
psc_norowstext		Modal	Prompt	Style applied to a prompt page group box, which appears when no rows exist. Text is rendered as a header of a group box but displays as normal text. Only used for prompt page.
psc_num		Grids, Edit	All	Style applied to indicate that data type for the field (or column) is a numeric type.
psc_off		Checkbox	Switch	State indicator that the checkbox SWITCH is off.
psc_off_container		Checkbox	Switch	Container of the OFF section of a checkbox SWITCH.
psc_ok		Modal	Message	OK button on a Message Box Popup.
psc_on		Checkbox	Switch	State indicator that the checkbox SWITCH is on.
psc_on_container		Checkbox	Switch	Container of the ON section of a checkbox SWITCH.
psc_op-between		Modal	Prompt	Style indicating that a special prompt control operator has been set to BETWEEN.
psc_open		Banner	Confirmation	Used to display/animate the confirmation area found in the header.
psc_open-alt		Banner	Confirmation	Used to display/animate the confirmation area found in the header.
psc_primary		Pushbutton		Visually indicates that

Style	Used With	Context Category	Sub Category	Description
				a button is primary.
psc_processing		Page		Structure to display the processing image during server trips.
psc_rowact		Grids, Groupboxes	Trigger	Style applied to a Grid row or groupbox when the developer has enabled the "Execute PC on Group/Row Click" for a hyperlink/button to enable actions on the entire row/group box.
psc_rowcount		Grids	All	Text type of rendered control which displays the number of rows in a grid.
psc_rownum		Grids	All	Style applied to the grid row number rendered by PeopleTools in a grid.
psc_saved		Page		Structure containing the save confirmation text (not currently displayed in Fluid).
psc_selected		Controls		Style applied when a "row" or a control displayed as an item is selected. For example, set by PeopleTools on a grid row when the user has selected a grid row checkbox to select the row.
psc_show-BP1		Banner		Opposite of psc_hide- BP1. Shows banner items in Actions List when below breakpoint - 900px.
psc_show-BP2		Banner		Opposite of psc_hide- BP2. Shows banner items in Actions List when below

Style	Used With	Context Category	Sub Category	Description
				breakpoint - 800px.
psc_show-BP3		Banner		Opposite of psc_hide- BP3. Shows banner items in Actions List when below breakpoint - 680px.
psc_show-BP4		Banner		Opposite of psc_hide- BP4. Shows items in Actions List when below breakpoint - 580px.
psc_sort		Grids	Sort	Style applied to the interior of the Grid Sort popup content (the list of columns).
psc_sort-ascend		Grids	Sort	Indicates that the user has selected to sort a grid by this column (ascending).
psc_sort-descend		Grids	Sort	Indicates that the user has selected to sort a grid by this column (descending).
psc_sort-enabled		Grids	Sort	Indicates that a column is available to be used for sorting but the user has not selected that column yet.
psc_tab_always		Grids	Flex	Style applied which indicates a column is FROZEN. Always shown regardless of the tab selected.
psc_tab_column		Grids	Flex	Associated at the CELL level identifying a cell as a column assigned to a tab.
psc_time		Grids	All	Style on grid column/cells to identify that a time is contained in the column/Field.

Style	Used With	Context Category	Sub Category	Description
psc_trigger		Grids, Groupboxes	Trigger	Trigger field when psc_rowact is applied to show which column/field is to be used as the trigger field for the row/group box action to be executed when the row/groupbox is activated.
psc_wrappable		Controls	Disabled	Style added by PeopleTools when the wrapping flag is set for disabled long edit and edit fields (displayed as text).
ps-checkbox		Checkbox		Actual HTML checkbox control (input[type="checkbo x"]).
ps-dropdown		Dropdown		Actual HTML select control. Select with option children.
ps-edit		Edit Box		Actual HTML input[type=?] control for Edit boxes. The actual type may vary based on the HMTL type selected in IDE.
ps-fileList		Modal	Attachment	Attachment dialog list of files.
ps-filesList		Modal	Attachment	Container for the attachment dialog list of files.
ps-hr		Layout		Actual HTML HR control (horizontal rule).
ps-htmlarea		HTML		Actual container for an HTML Area control.
ps-icon-wrapper		Edit Box		Container applied to icons found within edit boxes, such as date and prompt

Style	Used With	Context Category	Sub Category	Description
				icons, for example.
ps-img	Many Places** *	Image		Actual HTML Image tag used in pushbuttons, hyperlinks, and image controls.
ps-inputfile		Modal	Attachment	Container for the input file and buttons in the attachment dialog.
ps-label		Label		Actual label for most controls.
ps-link		Hyperlink		Actual hyperlink HTML control.
ps-link-wrapper		Hyperlink		Parent wrapper around the actual hyperlink HTML control.
ps-longedit		Long Edit		Actual long edit or textarea HTML control.
ps-mheader-section1		Modal	Page	Modal header left section where the Negative dismissal (CANCEL button) is found.
ps-radio		Radio Button		Actual radio button HTML control.
ps-searchcurrentop		Modal	Prompt	Current Search operator read only text found only in special prompt page criteria fields. Not available outside prompt page.
ps-searchjoin		Modal	Prompt	Special text found between the prompt input fields when BETWEEN is used. Not available outside prompt page.
ps-searchop-show		Modal	Prompt	Qualifier style on the Hide/Show Operators

Style	Used With	Context Category	Sub Category	Description
				links on the prompt page which indicates that we are in SHOW MODE to display the search operators.
ps-staticimg		Static Image		Actual image HTML for a static image. This differs from other types of image tags, which are typically styled as ps-img.
ps-text	Many Places** *	Text		Used in many constructs to contain text to be displayed. For example, headers, buttons [image+text], hyperlinks [image+text], static text.
PTCALHEAD		Calendar		PeopleTools Calendar Picker Header.
ptgrid-multiselect		Grids	All	Identifies the column/cell containing the PeopleTool's checkbox allowing multi-row selections.
ptgrid-rowadd		Grids	All	Identifies the column/cell containing the PeopleTool's row-level add button .
ptgrid-rowdelete		Grids	All	Identifies the column/cell containing the PeopleTool's row-level delete button .
ptgrid-rownumber		Grids	All	Identifies the column/cell containing the PeopleTool's row number.
ptgrid-singleselect		Grids	All	Identifies the

Style	Used With	Context Category	Sub Category	Description
				column/cell containing the PeopleTool's checkbox allowing single-row selections.
pts_addbtn		Search		Search Styling.
pts_addmode		Search		Search Styling.
pts_bulkramode		Search		Search Styling.
pts_bulkrelactions		Search		Search Styling.
pts_facet		Search		Search Styling.
pts_facet_checkbox		Search		Search Styling.
pts_fltr		Search		Search Styling.
pts_fltr_no_fltr		Search		Search Styling.
pts_fltr_no_noop		Search		Search Styling.
pts_fltr_noop		Search		Search Styling.
pts_gblsearchmode		Search		Search Styling.
pts_gsearch_cont		Search		Search Styling.
pts_gsearch_go		Search		Search Styling.
pts_gsearch_tray		Search		Search Styling.
pts_gsearch_tray_item		Search		Search Styling.
pts_include_hist		Search		Search Styling.
pts_keyvalues		Search		Search Styling.
pts_keyword		Search		Search Styling.
pts_listbulkramode		Search		Search Styling.
pts_listnobulkramode		Search		Search Styling.
pts_listnoramode		Search		Search Styling.
pts_listramode		Search		Search Styling.
pts_nobulkramode		Search		Search Styling.
pts_noramode		Search		Search Styling.
pts_noxlat		Search		Search Styling.
pts_ramode		Search		Search Styling.
pts_searchbtn		Search		Search Styling.
pts_searchmode		Search		Search Styling.
pts_srchcriteria		Search		Search Styling.
pts_srchcriteriafilters_nodtpromp t		Search		Search Styling.
pts_srchcriteriafilters_nononpro mpt		Search		Search Styling.
pts_srchcriteriafilters_noprompt		Search		Search Styling.

Style	Used With	Context Category	Sub Category	Description
pts_srchcriteriafilters_nopromptn oedit		Search		Search Styling.
pts_srchcriteriafilters_noxlat		Search		Search Styling.
pts_srchcriteriafilters_noyesno		Search		Search Styling.
pts_srchfltrdtpmt		Search		Search Styling.
pts_srchfltrnopmt		Search		Search Styling.
pts_srchfltrpmt		Search		Search Styling.
pts_srchfltrpmtnoedit		Search		Search Styling.
pts_srchfltrxlat		Search		Search Styling.
pts_srchfltryesno		Search		Search Styling.
pts_srchrslts_gridmixedtypes		Search		Search Styling.
pts_srchrslts_list		Search		Search Styling.
pts_srchtype		Search		Search Styling.
pts_transparent_label		Search		Search Styling.
pts_xlat		Search		Search Styling.
rsz_h1		HomePage	Tile	Tile Styling (height) for Tiles on a homepage.
rsz_h2		HomePage	Tile	Tile Styling (height) for Tiles on a homepage.
rsz_w1		HomePage	Tile	Tile Styling (width) for Tiles on a homepage.
rsz_w2		HomePage	Tile	Tile Styling (width) for Tiles on a homepage.
safari		Browser		Style Applied on HTML tag indicating that the browser has been identified as Safari.
sbar		Scrollbar		Generic style for PeopleTools- implemented scroll bar.
sbar_h		Scrollbar		Style used for PeopleTools- implemented horizontal scroll bar.
sbar_v		Scrollbar		Style used for PeopleTools- implemented vertical scroll bar.
side		N/A		Side styling for the search page.

Style	Used With	Context Category	Sub Category	Description
tab_0		Grids	Flex	State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_1		Grids	Flex	State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_2		Grids	Flex	State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_3		Grids	Flex	State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_4		Grids	Flex	State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_5		Grids	Flex	State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_6		Grids	Flex	State style applied on

Style	Used With	Context Category	Sub Category	Description
				a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_7		Grids	Flex	State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_8		Grids	Flex	State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_9		Grids	Flex	State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_a		Grids	Flex	State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
win		OS		Style applied on HTML tag indicating that the device's OS is Windows.

Fluid Application Content CSS Styles

The styles in this table can be used to style content provided by PeopleSoft fluid applications and custom applications.

Style	Used With	Context Category	Sub Category	Description
ps_apps_content		Layout	Page	Style applied to the outermost groupbox of a primary or secondary page. Uses the CSS FLEX model for sizing and has scrolling and padding automatically applied.
ps_apps_pageheader		Apps Banner		Outermost style for a group box to be used as an application header (persistent area). This is typically reparented to the Customer Header Bottom section except on small form factor where it would be used directly within the body (suppress the reparenting groupbox ONLY on small form factor).
ps_button_backnav		Pushbutton	Banner	Style applied to render the back button in the banner. Only use if you are creating a custom button in the banner to REPLACE the system's back button.
ps_button_bar	ps_collecti on	Button Bar		Group box style which contains radio buttons to be displayed as a mutually exclusive selector (not as standard radio buttons).
ps_button_stdheader		Pushbutton	Banner	Text button found in the header (as opposed to image buttons which are styled as ps_header_button). Use only when creating custom buttons in the banner.
ps_collection		Layout	Collections	A collection of buttons, radio buttons, or links that have

Style	Used With	Context Category	Sub Category	Description
				simplistic layout. Additional qualifiers can be added for additional styling.
ps_grid-norowborder		Grid	Flex	Prohibits rendering the border between rows of a FLEX grid.
ps_header_button		Pushbutton	Banner	Pushbutton style for image only banner buttons.
ps_label-hide		Label		Marks all label structures found within the container as invisible. Space is still reserved.
ps_label-show		Label		Marks all label structures found within the container as visible (actually the default).
ps_menucontainer		Menu	Action Menu	Outermost List containing all the individual menu sections.
ps_menitem		Menu	Action Menu + Actionsheet	List Item style applied in the Actions List or actionsheet styles containing a single hyperlink trigger.
ps_menusection		Menu	Action Menu	Collection of ps_menuitem entries (sublist typically with role="presentation") for the different sections of the Actions List (application custom, search, and system sections).
ps_menutype-grid		Menu	??	Rarely used style to display a SIMPLE grid of links similar to a menu style. See see psc_list-linkmenu for a more complete styling.
ps_proc_pageheader		Apps Banner		Similar to ps_apps_pageheader but is used to display a PROCESS fixed header at the top of a page. It is recommended to use ps_apps_pageheader instead.
psc_align-center		Layout		Centers content. Special

Style	Used With	Context Category	Sub Category	Description
				usage when you have block buttons so that the text and image portions of the button are centered.
psc_auto_size		Layout		Used to impose no size limit. If applied to an image hyperlink or button, the image within is rendered with its default size.
psc_background- transparent		Visual		Disables any background image and sets the background color to transparent.
psc_badge-hide	psc_badge- image OR psc_badge- text	Pushbutton	Badge	Used to hide the BADGE portion of a button enabled for badge display.
psc_badge-image		Pushbutton	Badge	Used on a pushbutton to display a badge when the badge is the IMAGE of a Text+Image button (like a warning icon badge).
psc_badge-text		Pushbutton	Badge	Used on a pushbutton to display a badge when the badge is the TEXT of a Text+image Button (like a badge count).
psc_baritem-first	ps_collecti on.ps_butt on_bar	Layout	Collections	Used to identify the first visible item of a button bar collection for styling when some elements are being hidden.
psc_baritem-last	ps_collecti on.ps_butt on_bar	Layout	Collections	Used to identify the last visible item of a button bar collection for styling when some elements are being hidden.
psc_block		Layout		On a simple container, it sets the display to BLOCK and centers the items. On a button or hyperlink control, it sets all elements of the

Style	Used With	Context Category	Sub Category	Description
				button/link structure to block. In this case, links are left justified and buttons are centered. If there is text and an image involved, the image and the text are on different "lines," each being block on their own. This allows a button with an image on top (the label comes after the image) and the text underneath.
psc_body_backgroun d		Visual		Sets the background and foreground color to the same as the body's background color and the default font color.
psc_bold		Visual		Sets the font weight to bold. This may not have an effect depending on the control used and styling as it may be overriden by other styles.
psc_border		Visual	ScrollArea Row	Sets the border of a container, simplistically. The psc_border-standard is more recommended. When used in the context of a scroll area, each row will have a border around it.
psc_bordert		Visual		Sets the top border. It is recommended to use psc_border-standard and psc_border-toponly.
psc_border- bottomonly	psc_border -standard	Visual	Any	Disables all other borders other than the bottom and sets the bottom border to 1px.
psc_border-content		Visual	Groupbox	On a simple group box, it disables the bottom border and margin of the group box header and places a border around the CONTENT.

Style	Used With	Context Category	Sub Category	Description
psc_border-header		Visual	Groupbox	On a simple group box, it places a bottom border under the header (the default).
psc_border- headernone		Visual	Groupbox	On a simple group box, it turns off the bottom border under the header.
psc_border-leftonly	psc_border -standard	Visual	Any	Disables all borders except the left and sets the left border to 1px.
psc_border-none		Visual	Any	Disables all borders on a container (direct container only -- does not propagate to children).
psc_border-rightonly	psc_border -standard	Visual	Any	Disables all borders except the right and sets the right border to 1px.
psc_border-standard		Visual	Any	Sets a default border on a container.
psc_border-thicker	psc_border -standard	Visual	Any	Sets the border width to 2px instead of 1px.
psc_border-toponly	psc_border -standard	Visual	Any	Disables all other borders other than the top and sets the top border to 1px.
psc_border- transparent	psc_border -standard	Visual	Any	Sets the border to be transparent but still consumes space. The border is still 1px in size.
psc_button- minwidth20em		Pushbutton		Unique style to set a minimum width of a button to be 20em. Alignment will be the default so you may need to use psc_align-center or psc_halign-center.
psc_button-next		Pushbutton	Directional	Style to be applied to a button, which will be a NEXT button. Image included in styling.
psc_button-previous		Pushbutton	Directional	Style to be applied to a button, which will be a PREVIOUS button. Image included in styling.

Style	Used With	Context Category	Sub Category	Description
psc_button-simple		Pushbutton		Used to make a TEXT based button to display like an image only button. Typical usage are for buttons within a grid, buttons in the header bar of a grid, and buttons in the BODY of a modal.
psc_clip-content		Layout	Groupbox	On a simple group box, disables scrolling on the content area (the default).
psc_clip-overflow		Layout		Sets overflow attribute to hidden (no scrolling).
psc_colon		Label		Used on a page field element, which has a ps_box-label structure to add a COLON (:) after the label.
psc_column-2		Layout		Sets up basic container for a two-column container, having psc_columnitems* as children.
psc_column-3		Layout		Sets up basic container for a three-column container, having psc_columnitems* as children.
psc_columnitem-1of2		Layout		Sets up an item that floats left of size 1 of 2 (or 50%). Converts to block mode (no float/auto width) when window falls below 767px.
psc_columnitem- 1of2-fixed		Layout		Sets up an item that floats left of size 1 of 2 (or 50%). Never converts - always 50%.
psc_columnitem-1of3		Layout		Sets up an item that floats left of size 1 of 3 (or 33%). Converts to block mode (no float/auto width) when window falls below 767px.
psc_columnitem-2of2		Layout		Sets up an item that floats left of size 2 of 2 (or 100%). Converts to block mode (no float/auto width) when window falls below 767px.

Style	Used With	Context Category	Sub Category	Description
psc_columnitem-2of3		Layout		Sets up an item that float's left of size 2 of 3 (or 66%). Converts to block mode (no float/auto width) when window falls below 767px.
psc_columnitem- 3of10		Layout		Sets up an item that floats left of size 3 of 10 (or 30%). Never converts - always 30%.
psc_columnitem-3of3		Layout		Sets up an item that floats left of size 3 of 3 (or 100%). Converts to block mode (no float/auto width) when window falls below 767px.
psc_columnitem- 7of10		Layout		Sets up an item that floats left of size 7 of 10 (or 30%). Never converts - always 70%.
psc_columnitem-auto		Layout		Sets up an item that floats left with no specific width requirement. Width is whatever size is necessary to render.
psc_confirmation- area		Confirmation	Groupbox	Used to create an INLINE confirmation message, where the conformation area is part of the page. This style is set on the Layout Group box container of the area.
psc_confirmation- msg		Confirmation	LongEdit/Edit (disabled as text)	Set on the long edit or edit box (disabled are rendered as text and wrappable) within a confirmation area to display a confirmation message.
psc_container-small		Layout	Groupbox	Style applied on a container to allow the elements styled within having psc_fld* to act as if they are being rendered on the small form factor.
psc_control-fullwidth		Layout	Edit/LongEdit/Dr opdown	Changes the behavior/sizing of the page fields, which are input based (either disabled as text or having actual input type HTML tags) to consume

Style	Used With	Context Category	Sub Category	Description
				the entire width of the container. Changes the display to block and width of 100%. This style does not have any impact on the associated label (use label styling to adjust the label -- typically psc_label-top).
psc_control-height{1- 20}em		Layout		Sets the height of the actual HTML control for Edit, LongEdit, and drop-down as well as the read-only (text [any control] and hyperlink) versions of these controls. Values range from 1em to 20em in increments of 1em.
psc_control-height{1- 100}pct		Layout		Sets the height of the actual HTML control for Edit, LongEdit, and drop-down as well as the read-only (text [any control] and hyperlink) versions of these controls. Values range from 1em to 20em in increments of 1em.
psc_control-height{1- 100}px		Layout		Sets the height of the actual HTML control for Edit, LongEdit, and drop-down as well as the read-only (text [any control] and hyperlink) versions of these controls. Values range from 1em to 20em in increments of 1em.
psc_control- heightauto		Layout	Edit/LongEdit/Dr opdown	Sets the height of a page field to have an automatic height. Used to remove any DEFAULT heights applied in simplistic styling.
psc_control-width{1- 100}em		Layout		Sets the width of the actual HTML control for Edit, LongEdit, and drop-down as well as the read-only (text [any control] and hyperlink)

Style	Used With	Context Category	Sub Category	Description
				versions of these controls. Values range from 1em to 20em in increments of 1em.
psc_control-width{1- 100}pct		Layout		Sets the width of the actual HTML control for Edit,LongEdit, and drop-down as well as the read-only (text [any control] and hyperlink) versions of these controls. Values range from 1em to 20em in increments of 1em.
psc_control-width{1- 100}px		Layout		Sets the width of the actual HTML control for Edit, LongEdit, and drop-down as well as the read-only (text [any control] and hyperlink) versions of these controls. Values range from 1em to 20em in increments of 1em.
psc_control- widthauto		Layout	Edit/LongEdit/Dr opdown	Set the width of a page field to have an automatic width. Used to remove any DEFAULT widths applied in simplistic styling.
psc_data-image		Apps Banner		Image to be displayed in persistent apps header. It should be the first displayable item as it will be floated left so that other elements can float around it. Because this element is floated, it is recommended that the image, primary data, and secondary data be contained in a layout group box with a style psc_float- clearoverflow so that the application header will contain all of the FLOATED elements . Has no effect if not found within ps_apps_pageheader or

Style	Used With	Context Category	Sub Category	Description
				ps_proc_pageheader at some level.
psc_data-primary		Apps Banner		Primary text data element found in the application persistent header. Has no effect if not found within ps_apps_pageheader or ps_proc_pageheader at some level.
psc_data-secondary		Apps Banner		Non-primary text data element found in the application persistent header. Has no effect if not found within ps_apps_pageheader or ps_proc_pageheader at some level.
psc_direction-row	psc_page- container or other FLEX styled containers	Layout		Used on a FLEX-based container to indicate that the flex direction is HORIZONTAL (column is vertical).
psc_disabled- normaltext		Visual	Hyperlinks	Style applied on hyperlinks for disabled hyperlinks to be rendered as NORMAL TEXT, not as a disabled link.
psc_display-block		Layout	Any	Applies display of BLOCK.
psc_display-inline		Layout	Any	Applies display of INLINE.
psc_display- inlineblock		Layout	Any	Applies display of INLINE- BLOCK.
psc_displayonlyastext _adjust		Visual	Edit/LongEdit/Dr opdown	Style applied when you have display-only information (as text) in a two-column layout beside an editable field. This style adjusts the height so that it more closely matches the height of an editable page field element.
psc_distribute	ps_collecti on	Layout	Collections/Butto n Bar	Uses CSS Flex to distribute the items in as equal a fashion as possible within the

Style	Used With	Context Category	Sub Category	Description
				collection.
psc_edit-adjustforlink		Layout	Edit disabled rendering a hyperlink	This is a special adjustment style to adjust a disabled edit field rendering a hyperlink (like an email or URL type of edit box) to align better with other links found in a collection. It also has display of inline-block like conventional hyperlinks.
psc_embedded_tabs		Do Not Use		Outer container for embedded tabs to be rendered by applications. While the styling will work to create a tab LOOK, keyboard navigation is not available for proper tabs outside of the the page/grid tabs supplied by PeopleTools Therefore, it is not recommended to use this style.
psc_fieldset- hidereadable		Layout	Accessibility	Styles a fieldset as a basic container with no displayable text, but the legend is displayed off screen so that it is always available to the screen reader.
psc_fld-aligned	psc_label_f iller	Layout		Style applied to a group box styled with psc_label_filler which causes the visuals to change only on a small form factor (or within a psc_container-small container). Removes all horizontal padding for the label filler since labels will be appearing on top. Consumes the entire width of the container.
psc_fld-autolabel		Layout		Style applied to a page field element (not

Style	Used With	Context Category	Sub Category	Description
				hyperlinks/buttons) causing the visuals to change only on a small form factor (or within a psc_container-small container). Does not reserve space for the label (typically 33%), but instead allows the field to be displayed immediately after the label string.
psc_fld-standard		Layout		Style applied to a page field element (not hyperlinks/buttons) causing the visuals to change only on a small form factor (or within a psc_container-small container). This typically puts the label on top of the field and the control is placed below the label. If the control is a text area (long edit), the field will span the entire width of the container. Otherwise, the width of the control is not changed. You cannot use psc_control- fullwidth in conjunction with this style. If you need this type of behavior, you would need to use psc_label- top/psc_control-fullwidth but remove psc_fld-standard.
psc_flex-equal	Children of psc_page- container, psc_distrib ute	Layout		Used on a child of a FLEX container where the flex property is set to "flex: 1 1 auto". Same as psc_flex-least.
psc_flex-least	Children of psc_page- container, psc_distrib ute	Layout		Used on a child of a FLEX container where the flex property is set to "flex: 1 1 auto". Same as psc_flex- equal.

Style	Used With	Context Category	Sub Category	Description
psc_flex-less	Children of psc_page- container, psc_distrib ute	Layout		Used on a child of a FLEX container where the flex property is set to "flex: 2 2 auto".
psc_flex-more	Children of psc_page- container, psc_distrib ute	Layout		Used on a child of a FLEX container where the flex property is set to "flex: 4 4 auto".
psc_flex-most	Children of psc_page- container, psc_distrib ute	Layout		Used on a child of a FLEX container where the flex property is set to "flex: 5 5 auto".
psc_flex-none	Children of psc_page- container, psc_distrib ute	Layout		Used on a child of a FLEX container where the flex property is set to "flex: 0 0 auto", meaning that this child is NOT FLEXIBLE (flex will not adjust its size).
psc_flex-same	Children of psc_page- container, psc_distrib ute	Layout		Used on a child of a FLEX container where the flex property is set to "flex: 3 3 auto".
psc_float-clear		Layout		Used to clear float on both left/right.
psc_float-clearleft		Layout		Used to clear float on the left only.
psc_float- clearoverflow		Layout		Used on a container of floats to clear the floating behavior by setting the overflow as hidden on the container.
psc_float-left		Layout		Sets item to float left.
psc_float-none		Layout		Sets item to have no float.
psc_font- size{025,033,05,06,0 7,075,08,09,095,1,11, 12,13,14,15,16,17,18, 19,2}em		Visual		Sets the font-size (025em = 0.25em and 11em is actually 1.1em as examples of the abbreviations within the style names).
psc_font-sizeinitial		Visual		Sets the font size to be

Style	Used With	Context Category	Sub Category	Description
				INITIAL.
psc_fontsize-inherit		Visual		Sets the font size to be INHERITED.
psc_force-floatclear		Layout		Forces the float to be cleared on both left/right. Uses !important to override "normal" float styles.
psc_force-floatnone		Layout		Forces the item to have no float. Uses !important to override "normal" float styles.
psc_force-hidden		Layout		Forces an item to be not displayed (or readable by screen readers) by using !important to override other display styles.
psc_force- marginnone		Layout		Forces no margin. Uses !important to override other margin styles.
psc_force-nomargin		Layout		Same as psc_force- marginnone.
psc_force-nopadding		Layout		Same as psc_force- paddingnone.
psc_force- paddingnone		Layout		Forces no padding. Uses !important to override other padding styles.
psc_fullsize_button		PushButton	Image	Modifies an image button to remove the height restrictions on the image and to turn off all borders/backgrounds (transparent).
psc_grid-allowscroll		Grid	Flex	Can be used when not using PeopleTools-implemented scrolling. Max width for grid is no longer set, allowing it to grow beyond the container width. Width is set by content (no specific width set) and overflow is globally enabled on the overall grid (including the header), both

Style	Used With	Context Category	Sub Category	Description
				horizontally and vertically.
psc_grid-allowscrollv		Grid	Flex	Can be used when not using PeopleTools-implemented scrolling to perform vertical scrolling only. Max width to full width of the container and sets overflow to scroll if necessary on the entire grid (including grid header).
psc_grid-border		Grid	Flex	Puts a border around the TABLE element of the FLEX grid.
psc_grid-borderall		Grid		Puts a border around the ps_box-gridc container, which contains the entire grid. For a flex grid there are TWO Tables to support FIXED header support, so both grids are included when using this border mechanism.
psc_grid- borderbottom		Grid		Puts a border at the bottom only of the grid.
psc_grid-bordernone		Grid		Turns off borders on the outer part of the grid (gridc container).
psc_grid-bordersides		Grid		Puts borders on the left and right of the grid.
psc_grid-bordertop		Grid		Puts a border on the top of the grid.
psc_grid- bordertopbottom		Grid		Puts borders on the top and bottom of grid.
psc_grid-cellborders		Grid	Flex	Sets borders on the TABLE, TH, and TD tags for a flex grid only.
psc_grid-collection		Grid	List	Used to style a grid similar to a ps_collection. Horizontal rendering allowing separators between the rows. Typical usage is a single element per row of the same type, such as a list of links, list of buttons, and so on.

Style	Used With	Context Category	Sub Category	Description
psc_grid- countabovebody		Grid		Moves the row count of a grid to be directly above the grid itself rather than on the same line as the Grid Title. Typically used when you don't want a border around the grid header bar (psc_grid- headernoborder) but still have content in the header bar. For example, a prompt page.
psc_grid- countabovebodyflex		Grid	Flex	Same as psc_grid- countabovebody but only applies to FLEX version of a grid.
psc_grid- headernoborder		Grid		Used to turn off the border surrounding a grid's header bar.
psc_grid- headertopborder		Grid		Used to turn off the left/right borders on a grid's header bar.
psc_grid-hideinlist		Grid		Used on a page field within a grid when you toggle between grid types. This style hides the page field when in a LIST grid.
psc_grid- hidereadableallhead		Grid	Accessibility	Renders the grid column header structure (THEAD structure of a TABLE of a Flex grid) off screen so that it is available to the screen reader. This happens in all modes not just accessibility mode.
psc_grid- hidereadablecolhead		Grid	Accessibility	Renders the individual column headers off screen with the exception of the select/deselect all checkbox within a Flex grid's column header structure.
psc_grid-nobody		Grid		Hides the ps_grid-body (the content not the headers) of a

Style	Used With	Context Category	Sub Category	Description
				grid.
psc_grid- nocolheaders		Grid	Flex	Hides the grid column header structure, except in accessibility mode where it will be rendered off screen like psc_grid- hidereadableallhead.
psc_grid- nocustomheader		Grid		Hides the custom section of a grid's header bar.
psc_grid- nocustompad		Grid		Removes the default padding of the custom section of a grid's header bar.
psc_grid- noheaderbar		Grid		Hides a grid's header bar.
psc_grid- noinnergroup		Grid		Hides all GROUPBOX HEADERS contained within a grid cell, regardless of grid display type.
psc_grid-norowcount		Grid		Hides the total row count typically displayed above the grid.
psc_grid-norows		Groupbox	Empty Grid Pattern	Style applied to a group box, which will display the empty grid pattern. Group box title is the same as the grid's header and no rows text with optional add button.
psc_grid-norowstext		Grid	Empty Grid Pattern	Style applied to a disabled (as text) edit or long edit page control OR static text control. Used to display the NO ROWS FOUND text for a grid. Typically used within psc_grid-norows styled container.
psc_grid- nosideborder		Grid		Same as psc_grid- headernoborder.
psc_grid- nosystemheader		Grid		Hides the system (PeopleTools-owned) section of a grid's header bar.
psc_grid-notitle		Grid		Hides the grid's header (actually a H# tag) but is

Style	Used With	Context Category	Sub Category	Description
				rendered offscreen when running in accessibility mode.
psc_grid-notitlearea		Grid		Simlar to psc_grid-notitle, but it hides the entire title area. This includes not only the HEADER for the grid but also the row count. This is rendered off screen in accessibility mode so it will be readable.
psc_grid-widthauto		Grid	Flex	Removes the minimum width for a Flex grid. The default for a Flex grid is a minimum width of 100% of its container.
psc_gridlist-autolabel		Grid	List	Style applied to a LIST grid (not to individual fields) where the field labels do not have reserved space (default is 33%). Typically used for display only as text page elements.
psc_gridlist-borderall		Grid	List	Similar to psc_grid-borderall but only applies to LIST grids.
psc_gridlist- borderbottom		Grid	List	Similar to psc_grid- borderbottom but only applies to LIST grids.
psc_gridlist- bordernone		Grid	List	Similar to psc_grid- bordernone but only applies to LIST grids.
psc_gridlist- bordersides		Grid	List	Similar to psc_grid- bordersides but only applies to LIST grids.
psc_gridlist- bordertop		Grid	List	Similar to psc_grid-bordertop but only applies to LIST grids.
psc_gridlist- bordertopbottom		Grid	List	Similar to psc_grid- bordertopbottom but only applies to LIST grids.
psc_gridlist-standard		Grid	List	Style applied to a LIST grid (not to individual fields), where the field labels have the standard reserved space

Style	Used With	Context Category	Sub Category	Description
				(default is 33%). Typically used for display-only as text page elements.
psc_gridrow-sep- breadcrumb	psc_grid- collection	Grid	List	In a list grid style as a collection, separates each row with a ">" for breadcrumb rendering.
psc_gridrow-sep-pipe	psc_grid- collection	Grid	List	In list grid style as a collection, separates each row with a PIPE SYMBOL (or "|") for simple link separation.
psc_gridview-grid		Button Bar	View Selector	Child of psc_gridview-toggle container used to toggle to GRID view of a grid. This should be a radio button page field.
psc_gridview-item		Button Bar	View Selector	Child of psc_gridview-toggle container used to add another possible view mode other than List/Grid views. This should be a radio button page field.
psc_gridview-list		Button Bar	View Selector	Child of psc_gridview-toggle container used to toggle to LIST view of a grid. This should be a radio button page field.
psc_gridview-toggle	ps_collecti on.ps_butt on_bar	Button Bar	View Selector	Special Button Bar collection usually added to a grid in its header bar to toggle between GRID and LIST views. Typically you would also add psc_display- inlineblock as well since there are typically other controls also found in the grid header. See an example on the Prompt Page.
psc_group-special		Two Panel	Selector Groupbox	Special style designed for placement in the Navigation Panel of a two-panel layout

Style	Used With	Context Category	Sub Category	Description
				containing a special control field (like a drop-down) that drives the content of the left panel interior. This area has the same color as the SELECTED item in a panel, as in the label color is darkened and a border is added around the container. Can be applied on a field or a group box containing a field. This style is rarely used.
psc_groupbox- noheader		Visual		Hides a group box's header structure, but renders it off screen in accessibility mode.
psc_groupbox-notitle		Visual		Same as psc_groupbox- noheader.
psc_grouped	ps_collecti on.ps_butt on_bar (and typically psc_distrib ute)	Button Bar	Collections	Turns off the rounded borders of the button bar. Usually used in conjunction with psc_distributed to consume the full width of the container.
psc_grouped_fitted	ps_collecti on.ps_butt on_bar (and typically psc_distrib ute)	Button Bar	Collections	Similar to psc_grouped-fitted but the top and side borders are disabled. This style of bar is typically used at the top of a container that already has some type of border or where a border at the top and sides would not be needed, like at the top of a page or panel content.
psc_groupheader- adjust		Visual		Adjust elements within this container to have the same font-size as found in a grid header bar or application header.
psc_halign-center		Layout		Align the content as centered.
psc_halign-left		Layout		Align the content as left-

Style	Used With	Context Category	Sub Category	Description
				justified.
psc_halign-right		Layout		Align the content as right- justified.
psc_has-count	psc_list- linkmenu	ListView		Used to indicate that a field on the LISTVIEW row is used as a badge count. The field is styled with a style of psc_list_count.
psc_has-link	psc_list- linkmenu	ListView		Shows an actionable indicator on the row (CHEVRON), except if the row also has a count (as in, psc_has-count style is applied).
psc_haslivedata		Tile		Style to indicate that the group box contains/shows a live data section.
psc_haslivedata-1		Tile		Style to indicate that live data exists.
psc_haslivedata- count		Tile		Style to indicate that the group box contains/shows a tile count.
psc_haslivedata- count-none		Tile		Style to indicate that the group box does not contain/show a tile count.
psc_haslivedata-none		Tile		Style to indicate that the group box does not contain/show a live data section.
psc_header- hidereadable		Visual	Accessibility	Renders the header of a group box offscreen so it is not visible (and does not consume space) but is readable by a screen reader (in any mode).
psc_header- innerfloat		Do Not Use		For a group box header, turns off the border (psc_border- headernone) with no background image and a transparent background.
psc_header-none		Visual		Do not display the group box header. It is NOT readable in

Style	Used With	Context Category	Sub Category	Description
				accessibility mode.
psc_header- nospacing		Visual		On a group box, removes any text indention or margin from the header.
psc_height- {1,100}em		Layout	Any	Sets the height of a container/entity. Values range from 1em to 100em in increments of 1em.
psc_height- {1,100}pct		Layout	Any	Sets the height of a container/entity. Values range from 1% to 100% in increments of 1%.
psc_height-{1,100}px		Layout	Any	Sets the height of a container/entity. Values range from 1px to 100px in increments of 1px.
psc_height-auto		Layout	Any	Sets the height of a container/entity to "auto," which allows the content (or some other styling) to drive the height of the item.
psc_hidden		Visual		Hides something from being displayed. Sets CSS display to none. Content will not be available in accessibility mode.
psc_hide-image		Pushbutton/Hyp erlink		Typically used on an Image+Text button or hyperlink to hide the IMAGE.
psc_hide-pagetabs		Visual		Used on a page which is rendering page tabs to hide them. This style must be applied at the page level only.
psc_hide-reldispunits	psc_reldisp -container	Related Display		Used to hide the related display UNITS text when the value is empty. Style would have to be set based on the contents of psc_reldisp- value. This style is not automatically applied and must be conditionally applied

Style	Used With	Context Category	Sub Category	Description
				using PeopleCode.
psc_hide-reldispvalue	psc_reldisp -container	Related Display		Used to hide the related display VALUE when the value is empty. Style would have to be set based on the contents of psc_reldisp- value. This style is not automatically applied and must be conditionally applied using PeopleCode.
psc_hide-text		Pushbutton/Hyp erlink		Typically used on an Image+Text button or hyperlink to hide the TEXT. Be aware that this could cause accessibility issues as the text will not be readable by screen readers.
psc_image-{1-15}em				Sets width and height of an image to a specific em size, ranging from 1em to 15em incrementing by 1em.
psc_image-height{1- 15}em		Layout	Image	Sets the height of an image. Values range from 1em to 15em incremented by 1em.
psc_image- heightauto		Layout	Image	Sets the height of an image to be automatic. Use the size of the image assuming no other styling affects sizing.
psc_image- maxheight{1-15}em		Layout	Image	Sets the MAXIMUM height of an image. Values range from 1em to 15em incremented by 1em.
psc_image- maxheightauto		Layout	Image	Sets the MAXIMUM height of an image to be automatic (no maximum height).
psc_image- maxwidth{1-15}em		Layout	Image	Sets the MAXIMUM width of an image. Values range from 1em to 15em incremented by 1em.
psc_image- maxwidthauto		Layout	Image	Sets the MAXIMUM width of an image to be automatic (no

Style	Used With	Context Category	Sub Category	Description
				maximum width).
psc_image- nomaxheight		Layout	Button with Image	Removes the maximum height specification for an image used within a button.
psc_image- standardbutton		Layout	Button with Image	Increases the maximum height slightly to the image within a button. This setting is actually NOT the max height of a standard button but slightly larger than the standard size. Rarely used as it also affects the basic footprint of a button.
psc_image-width{1- 15}em		Layout	Image	Sets the width of an image. Values range from 1em to 15em incremented by 1em.
psc_image-widthauto		Layout	Image	Sets the width of an image to be automatic. Use the size of the image assuming no other styling affects sizing.
psc_invisible		Visual		Sets the CSS visibility property to hidden.
psc_justify-center	Simple CSS Flex container	Layout		Used to set the justify- content CSS property on a FLEX container. This setting justifies the items collected together in the center of the container.
psc_justify-end	Simple CSS Flex container	Layout		Used to set the justify- content CSS property on a FLEX container. This setting justifies the items collected together in the "END" of the container.
psc_justify-inherit	Simple CSS Flex container	Layout		Used to set the justify- content CSS property on a FLEX container. This setting justifies the items based on an ancestor's justification setting.
psc_justify-initial	Simple CSS Flex	Layout		Used to set the justify- content CSS property on a

Style	Used With	Context Category	Sub Category	Description
	container			FLEX container. This setting justifies the items as initially provided by default.
psc_justify- spacearound	Simple CSS Flex container	Layout		Used to set the justify- content CSS property on a FLEX container. This setting justifies the items trying to distribute spaces between and around elements equally.
psc_justify- spacebetween	Simple CSS Flex container	Layout		Used to set the justify- content CSS property on a FLEX container. This setting justifies the items so that the space between the items is used to distribute the items. The first and last items are at the ENDs of the container.
psc_justify-start	Simple CSS Flex container	Layout		Used to set the justify- content CSS property on a FLEX container. This setting justifies the items collected together in the "START" of the container.
psc_label		Do Not Use		Sets the value of the ps_box- label structure to be inline- block (the default). Style is no longer needed.
psc_label- haligncenter		Layout	Label	Changes the alignment of label to be centered within the reserved area.
psc_label-halignleft		Layout	Label	Changes the alignment of label to be left within the reserved area.
psc_label-halignright		Layout	Label	Changes the alignment of label to be right within the reserved area, which is the default if the label is not on top.
psc_label-hide		Layout	Label	Same as psc_label-none. It completely makes the label not visible and does not consume space. This affects

Style	Used With	Context Category	Sub Category	Description
				layout.
psc_label- hidereadable		Layout	Accessibility	Renders the label offscreen so that it is not visible, but it is always available for screen reader. Visually, it acts like psc_label-none in that the layout is affected. The label structure is not displayed visually so there is no space reserved for the label.
psc_label-invisible		Visual	Label	Accomplishes the same as psc_label-none, EXCEPT that the label space is RESERVED. The label text is just invisible. Warning: in accessibility mode, the label is NOT AVAILABLE for the screen reader.
psc_label-none		Layout	Label	Hides the entire label structure so that the label is not shown, which affects the LAYOUT. In accessibility mode, the label will be rendered offscreen so that it is available for the screen reader.
psc_label-normaltext		Visual	Label	Displays the label as part of a page field as normal text, rather than a label.
psc_label-opacity0		Visual	Label	Effectively the same as psc_label-invisible, but it uses the opacity CSS to hide versus visibility. Warning: the label will not be available for the screen reader with this style.
psc_label-opacity1		Visual	Label	Sets opacity of the label back to the typical default value (1). This displays the label.
psc_label-top		Layout	Label	Style to set the label of a page field on TOP of the control. This does not include

Style	Used With	Context Category	Sub Category	Description
				buttons or hyperlinks. This style does not affect the CONTROL area, only the label.
psc_label- valignbaseline		Layout	Label	Sets the vertical alignment of the label to be baseline. In some cases, this may not have an affect if there are other styles overriding labeling as part of the construct.
psc_label- valignbottom		Layout	Label	Sets the vertical alignment of the label to be bottom. This may not have an affect if there are other styles overriding labeling as part of the construct.
psc_label- valignmiddle		Layout	Label	Sets the vertical alignment of the label to be top. This may not have an affect if there are other styles overriding labeling as part of the construct.
psc_label-valigntop		Layout	Label	Sets the vertical alignment of the label to be middle. This may not have an affect if there are other styles overriding labeling as part of the construct.
psc_label-visible		Visual	Label	Sets the label visibility to be visible. Opposite of psc_label-invisible.
psc_label-width{1- 50}em		Layout	Label	Sets the label width to a specific width. Value ranges from 1em to 50em incremented by 1em.
psc_label-width{1- 100}pct		Layout	Label	Sets the label width to a specific width. Value ranges from 1% to 100% incremented by 1%.
psc_label-widthauto		Layout	Label	Sets the label width to be computed automatically

Style	Used With	Context Category	Sub Category	Description
				based on content.
psc_label_filler		Layout		Style applied to a group box (or a page field element having a label rendered to consume space) to allocate the same spacing as is made for labels so that the content will align with the other fields on the page, reserving space AS IF it had a label. On a small form factor, if psc_fld- standard is also applied, the label space will not be reserved, which is the same as for other psc_fld-standard where the labels will be placed on top in the small form factor as well as within a psc_container-small styled container.
psc_legend- hidereadable		Layout	Accessibility	Renders the legend of a Field Set (a Related Field Group group box type) offscreen so that it does not consume any visual space but is available for screen readers.
psc_lineheight-full		Layout		Sets the line height for a container to 100%.
psc_link-drilldown		Hyperlink		Used to make a hyperlink look like the DRILLDOWN construct, which has a border and a chevron to indicate it is actionable (max width is automatically imposed).
psc_link-normaltext		Hyperlink		Displays a hyperlink as normal text.
psc_link-textsize		Visual		Same as psc_fontsize-1em, which is the normal text size.
psc_link_normalsize		Visual		Same as psc_fontsize-inherit.
psc_list-1col	psc_list- linkmenu	ListView		Indicates that the ListView will show/contain one column/field.

Style	Used With	Context Category	Sub Category	Description
psc_list-2col	psc_list- linkmenu	ListView		Indicates that the ListView will show/contain two columns/fields, equally distributed.
psc_list-3col	psc_list- linkmenu	ListView		Indicates that the ListView will show/contain two columns/fields, but the layout is such that the first column consumes more than the last column.
psc_list-col-1		ListView		Identifies a group box or field within a LISTVIEW grid row as "column 1" data.
psc_list-col-2		ListView		Identifies a group box or field within a LISTVIEW grid row as "column 2" data.
psc_list- commonmenu	psc_list- linkmenu	ListView		Identifies a LISTVIEW implementation as a simple COMMON MENU, as if displaying a standard menu like the Actions List Menu. Font will be slightly larger than that used on the Actions List, but the font weight will be similar.
psc_list-detail		Grid	Summary / Detail	Used on a LIST grid (grid-level or row-level) to indicate additional details should be shown on one or more rows, as in items marked as psc_show-detail will be displayed).
psc_list-expanded		Grid	Summary / Detail	Functionally the same as psc_list-detail but uses different settings at the FIELD level. Used on a LIST grid (grid-level or row-level) to indicate additional details should be shown on one or more rows, as in items marked as psc_show- expanded will be displayed.

Style	Used With	Context Category	Sub Category	Description
psc_list-has-icon	psc_list- linkmenu	ListView		Indicates that the LISTVIEW items have an icon on the row. This icon can be a stand alone image OR a link with Image+text configured.
psc_list-icon-medium	psc_list- linkmenu	ListView		Styles the images found within a LISTVIEW row to be a larger image than a conventional LISTVIEW implementation.
psc_list-icon-top	psc_list- linkmenu	ListView		Used with LISTIVEW grid having an image (when psc_list-has-icon is used) indicating that the image should be aligned vertically with the TOP of the row instead of middle (the default).
psc_list-linkmenu		ListView		PRIMARY STYLE used to set up a LIST Grid to be used as a basic navigational mechanism. There are different modes for different use cases. The default displays a LISTVIEW that would typically be used for left panel navigation. Using psc_list-commonmenu can be used on a list grid brought up within a popup group box to be displayed like a simple menu item. Using psc_list- settingmenu is a specialized two-column list showing a Setting (name) and a Setting Value (value) display. These are the high-level variations of the LISTVIEW styling.
psc_list- secondarydata		ListView		This style identifies a field within a multi-field LISTVIEW implementation as SECONDARY data. The

Style	Used With	Context Category	Sub Category	Description
				default is to display as primary. Typically the link that triggers the row.
psc_list-settingmenu	psc_list- linkmenu	ListView		Used on a two-column LISTVIEW to display a Setting Name and Value on the same row. It is expected that that the first column (group box with psc_list-col-1) would be used for the Setting and would contain a LINK with the setting name as the label. The second column (group box with psc_list-col-2) would contain an edit box (display-only as text) for the value of the setting.
psc_list-tertiary		ListView		This style identifies a field within a multi-field LISTVIEW implementation as TERTIARY data (having the least importance).
psc_list-vtab	psc_list- linkmenu	ListView		Used on a LISTVIEW implementation to reduce the vertical spacing between fields in a List grid row. Typically used when you have multiple pieces of data to show in a row at a time (not a common menu or settings menu).
psc_list_count		ListView		Used on a field to identify itself as the badge count field when using LISTVIEW and the psc_has-count.
psc_livedata-metrics		Tile		Styling for metrics DATA found in the live data area.
psc_livedata-metrics- label		Tile		Styling for the metrics LABEL found in the live data area.
psc_livedata-strong		Tile		Adjusts the font size of data (only on small form factor).

Style	Used With	Context Category	Sub Category	Description
psc_margin-{1- 30em}em psc_margin-{0_1- 10_1}em		Layout		Sets all margins (top, right, bottom, left) to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_margin-{1- 50}pct, psc_margin-{0_5- 49_5}pct		Layout		Sets all margins (top, right, bottom, left) to the specified value. Ranges for the first set are between 1% to 50%, increment of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_margin-{1- 100}px		Layout		Sets all margins (top, right, bottom, left) to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_margin-auto		Layout		Sets the top/bottom margins to 0 and sets the side margins to auto, which should effectively center an item within its container. Same as psc_margin-center.
psc_margin- bottom{1-30em}em psc_margin-		Layout		Sets bottom margin to the specified value. Ranges for the first set are between 1em

Style	Used With	Context Category	Sub Category	Description
bottom{0_1-10_1}em				to 30em, increment of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_margin- bottom{1-50}pct, psc_margin- bottom{0_5-49_5}pct		Layout		Sets bottom margin to the specified value. Ranges for the first set are between 1% to 50%, increments of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_margin- bottom{1-100}px		Layout		Sets bottom margin to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_margin- bottomnone		Layout		Removes the bottom margin.
psc_margin-center		Layout		Same as psc_margin-auto (attempt to center using side margins to auto).
psc_margin-header		Layout		Applies the standard margin to a ps_header-group style (not typically used).
psc_margin- headernone		Layout		Removes the margin from beneath a group box's header.
psc_margin-left{1- 30}em,		Layout		Sets left margin to the specified value. Ranges for

Style	Used With	Context Category	Sub Category	Description
psc_margin-left{0_1- 10_1}em				the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_margin-left{1- 50}pct, psc_margin-left{0_5- 49_5}pct		Layout		Sets left margin to the specified value. Ranges for the first set are between 1% to 50%, increments of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_margin-left{1- 100}px		Layout		Sets left margin to the specified value. Ranges for the first set are between 1px to 100px, increments of 1px.
psc_margin-leftnone		Layout		Removes the left margin.
psc_margin-none		Layout		Removes all margins from all sides.
psc_margin-right{1- 30}em, psc_margin- right{0_1-10_1}em		Layout		Sets right margin to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the

Style	Used With	Context Category	Sub Category	Description
				_0 is dropped for non- decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_margin-right{1- 50}pct, psc_margin- right{0_5-49_5}pct		Layout		Sets right margin to the specified value. Ranges for the first set are between 1% to 50%, increment of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_margin-right{1- 100}px		Layout		Sets right margin to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_margin- rightnone		Layout		Removes the right margin.
psc_margin-sides{1- 30}em, psc_margin-side{0_1- 10_1}em		Layout		Sets side margins (right and left) to the specified value. Ranges for the first set are between 1em to 30em, increment of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_margin-sides{1- 50}pct, psc_margin-		Layout		Sets side margins (right and left) to the specified value. Ranges for the first set are

Style	Used With	Context Category	Sub Category	Description
sides{0_5-49_5}pct				between 1% to 50%, increment of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_margin-sides{1- 100}px		Layout		Sets side margins (right and left) to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_margin-standard		Layout		Sets the margin as it would be for a "normal" field on a page (specifies bottom margin only).
psc_margin-top{1- 30}em, psc_margin-top{0_1- 10_1}em		Layout		Sets top margin to the specified value. Ranges for the first set are between 1em to 30em, increment of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_margin-top{1- 50}pct, psc_margin-top{0_5- 49_5}pct		Layout		Sets top margin to the specified value. Ranges for the first set are between 1% to 50%, increments of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In

Style	Used With	Context Category	Sub Category	Description
				the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_margin-top{1- 100}px		Layout		Sets top margin to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_margin-topnone		Layout		Removes the top margin.
psc_maxwidth-40em		Layout		Set maximum width for a container to be 40em.
psc_maxwidth-60em		Layout		Set maximum width for a container to be 60em.
psc_menu- actionsheet		ActionSheet		Style used as a popup option style for a Popup group box type where the popup will contain list items styled as ps_menuitems (containing buttons). This style is applied as an argument to DoModalPopup only.
psc_minwidth-20em		Layout		Set minimum width for a container to be 20em.
psc_modal-button		Pushbutton		Style applied to a button that would typically be found in a modal header. This is typically only used OUTSIDE of the modal header. If you put a button in the modal header, it will automatically get styled in this fashion. So this style (while not the standard) would allow you to create the same styled button within the BODY of a modal (smaller than the standard button size).
psc_modal-close		Pushbutton		Style to be applied to a custom CLOSE button (with X image) that would be placed

Style	Used With	Context Category	Sub Category	Description
				in a modal header.
psc_modal-done		Pushbutton		Style which could be applied to a custom modal button which would be the positive action button (not required). However, the positive action button in the modal header should also have the psc_primary style applied as well.
psc_modal-noheader		Layout		Page-Level style to not display the modal header. This should not be used in accessiblity mode since all modals should have a header.
psc_more		Grid	Flex	Used on a display only (as text) field on a flex grid row when the row action has been enabled in order to show an actionable indicator at the end of the row. This style should not be used on any flex grid with the Add/Delete (PeopleTools- provided) action buttons enabled. This display only field must be the last field on the grid.
psc_multiselect-hide		Grid		Applied to a grid, indicating that the single selection mechanism rendered by Peopletools will be hidden.
psc_nolabel		Do Not Use		Used to hide the label. More recommended to use psc_label-hide or psc_label- none.
psc_noscroll		Layout		Sets overflow as hidden (no scrolling) on a container. It is forced with the !important setting.
psc_nospace	ps_collecti	Layout		Turns off spacing between

Style	Used With	Context Category	Sub Category	Description
	on			the items in the list within a collection. Only used when the ps_collection is also a UL or OL tag.
psc_notext		Switch		Special type of switch that does not display any text for either the on/off values of the checkbox. Typically used if there is no space available to render text values for the on/off state.
psc_nowrap		Layout		By itself, it turns off wrapping for the specific container. This is an inherited setting so it can affect the children. It is also used by list-linkmenu to turn off text wrapping of links.
psc_on	psc_image _only or psc_button -simple	Toggle Button		Style applied to indicate visually that a value underneath has been set (a button with a state). The default state is off. Note, for accessibility, when using this style you must also make sure you set the aria-pressed attribute to true using PeopleCode at the same time that you are applying the psc_on state style.
psc_opacity-085		Visual		Sets the opacity to 85%.
psc_overflow-auto		Layout		Sets overflow of a container to auto. Add scrollbars if necessary.
psc_overflow-hidden		Layout		Sets overflow of a container to hidden (no scrolling and clip content if it does not fit).
psc_overflow-xauto		Layout		Sets overflow of a container to scroll horizontally if necessary.
psc_overflow- xhidden		Layout		Sets overflow of a container to not scroll (and possibly

Style	Used With	Context Category	Sub Category	Description
				truncate) horizontally only.
psc_overflow-yauto		Layout		Sets overflow of a container to scroll vertically if necessary.
psc_overflow- yhidden		Layout		Sets overflow of a container to not scroll (and possibly truncate) vertically only.
psc_override		Two Panel	Single Page container two panels	Special panel styling to allow the application to override (by custom styling) the breakponts when the panel converts from COLLAPSIBLE or FIXED mode into a overlay. The application is completely responsible for the media query styling as found in the default system. As a typical rule, the custom styling would copy the media query for the two-panel section and merely change the break point, replacing the :not(.psc_override) with .psc_override.
psc_padding-{1- 30em}em psc_padding-{0_1- 10_1}em		Layout		Sets all padding (top, right, bottom, left) to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0em, but instead you would merely use -1em.
psc_padding-{1- 50}pct, psc_padding-{0_5- 49_5}pct		Layout		Sets all padding (top, right, bottom, left) to the specified value. Ranges for the first set are between 1% to 50%,

Style	Used With	Context Category	Sub Category	Description
				increments of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_padding-{1- 100}px		Layout		Sets all padding (top, right, bottom, left) to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_padding- bottom{1-30em}em psc_padding- bottom{0_1-10_1}em		Layout		Sets bottom padding to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_padding- bottom{1-50}pct, psc_padding- bottom{0_5-49_5}pct		Layout		Sets bottom padding to the specified value. Ranges for the first set are between 1% to 50%, increments of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0pct but instead you would merely

Style	Used With	Context Category	Sub Category	Description
				use -1pct.
psc_padding- bottom{1-100}px		Layout		Sets bottom padding to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_padding- bottomnone		Layout		Removes the bottom padding.
psc_padding-content		Layout		Adds the standard padding to the content area of a group box (non collapsible).
psc_padding- contentnone		Layout		Sets padding to content area of a group box to have no padding (default).
psc_padding-left{1- 30}em, psc_padding- left{0_1-10_1}em		Layout		Sets left padding to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_padding-left{1- 50}pct, psc_padding- left{0_5-49_5}pct		Layout		Sets left padding to the specified value. Ranges for the first set are between 1% to 50%, increment of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0pct but instead you would merely

Style	Used With	Context Category	Sub Category	Description
				use -1pct.
psc_padding-left{1- 100}px		Layout		Sets left padding to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_padding-leftnone		Layout		Removes the left padding.
psc_padding-none		Layout		Removes all padding from all sides.
psc_padding-right{1- 30}em, psc_padding- right{0_1-10_1}em		Layout		Sets right padding to the specified value. Ranges for the first set are between 1em to 30em, increment of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_padding-right{1- 50}pct, psc_padding- right{0_5-49_5}pct		Layout		Sets right padding to the specified value. Ranges for the first set are between 1% to 50%, increment of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_padding-right{1- 100}px		Layout		Sets right padding to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_padding-		Layout		Removes the right padding.

Style	Used With	Context Category	Sub Category	Description
rightnone
psc_padding-sides{1- 30}em, psc_padding- side{0_1-10_1}em		Layout		Sets side padding (right and left) to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_padding-sides{1- 50}pct, psc_padding- sides{0_5-49_5}pct		Layout		Sets side padding (right and left) to the specified value. Ranges for the first set are between 1% to 50%, increments of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_padding-sides{1- 100}px		Layout		Sets side padding (right and left) to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_padding- standard		Layout		Sets the padding as it would be for a "normal" field on a page (specifies bottom margin only).
psc_padding-top{1- 30}em, psc_padding- top{0_1-10_1}em		Layout		Sets top padding to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em.

Style	Used With	Context Category	Sub Category	Description
				Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_padding-top{1- 50}pct, psc_padding- top{0_5-49_5}pct		Layout		Sets top padding to the specified value. Ranges for the first set are between 1% to 50%, increment of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non- decimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_padding-top{1- 100}px		Layout		Sets top padding to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_padding-topnone		Layout		Removes the top padding.
psc_page-container		Layout		Used if you need an intermediate container between ps_apps_content and the PeopleTools rendered page structures. This allows the same the CSS Flex model to be continued (chain not broken) so you can use flex styling on other containers being sibilings to ps_apps_content. For example, you could create a fixed area above or below

Style	Used With	Context Category	Sub Category	Description
				ps_apps_content which would have a middle area scrolling. This is similar to how the banner and the footer are created, but you could also create a similar item within your "content" area.
psc_pageheader- darkborder	ps_apps_p ageheader, ps_proc_pa geheader	Apps Banner		Places a darker border below the application page header for better visibility of the separation.
psc_pageheader- fixed	ps_apps_p ageheader, ps_proc_pa geheader	Apps Banner		Applies the same background as if the ps_apps_pageheader were actually contained within the banner section (used the reparenting to the Custom Header Bottom target). This is only needed if you are NOT using this reparenting but you are fixing this header not to scroll with the page and want to have a "fixed" look.
psc_pagepadding- content		Layout		Applies the standard page padding to the content area of a group box (not a collapsible groupbox).
psc_pagepadding- margin		Layout		Applies the same dimensions for padding found in ps_apps_content but is applied as a MARGIN instead of padding (outside the container rather than inside the container).
psc_pagepadding- sidemargin		Layout		Sets the side dimensions for the standard padding only but implemented as MARGIN instead of padding.

Style	Used With	Context Category	Sub Category	Description
psc_panel-action		Two Panel	Single Page container two panels	Second level layout group box containing the action panel (or left panel).
psc_panel- actioninterior		Two Panel	Single Page container two panels	Child of the psc_panel-action. This is a SECTION (or region) that will be assigned a label if you use the Two-Panel API provided by SetNavigationPanelInfo() or SetActionPanelInfo() if the left panel is not used for navigation. Under this container, the ps_apps_content layout group box is typically used as the outermost container of a page to be found. Scrolling behavior for ps_apps_content will perform as normal. Since you typically don't use padding for navigation lists, you may also need to add psc_padding-none to the ps_app_content found under this container.
psc_panel-button		Two Panel	Single Page container two panels	Actual tab or button that opens/closes the left panel (if the control is available).
psc_panel-container		Two Panel	Single Page container two panels	Outermost container for the panel structure (part of CSS FLEX page structure). This structure is used to create a horizontal FLEX between the LEFT PANEL, which is typically used for navigation (psc_panel-action) and the RIGHT or content panel, which is used for the main content (psc_panel-content). To see the proper layout for a SINGLE PAGE containing two-

Style	Used With	Context Category	Sub Category	Description
				panel implementation, review the PSL_TWOPANEL layout page in Application Designer.
psc_panel-content		Two Panel	Single Page container two panels	Second level layout group box containing the content panel.
psc_panel- contentinterior		Two Panel	Single Page container two panels	Child of the psc_panel- content. This is a SECTION (or region) that will be assigned a label if you use the Two Panel API provided by SetContentPanelInfo(). Under this container, the ps_apps_content layout group box is typically used as the outermost container of a page to be found. Scrolling behavior for ps_apps_content will perform as normal.
psc_panel-fixed		Two Panel	Single Page container two panels	This is a MODE style that changes the default behavior of the left panel. Default behavior is for the panel TAB to be always available to allow the user to open/close the panel (default state of panel is closed). FIXED mode means that if space permits, the tab is hidden and the left panel is always displayed (no user control if space allows). If space is not sufficient (or if you are in PORTRAIT mode on a device), the panel is in OVERLAY mode, meaning that the panel does not affect the width of the content. In this situation, the left panel merely overlays the content rather than making the

Style	Used With	Context Category	Sub Category	Description
				content size smaller to see the left panel.
psc_panel-fullsize		Two Panel	Single Page container two panels	This style adjusts the size of the left panel when it is OPENED to consume the entire width of the window. There will be no tab to close the panel so the user is forced to make a selection. This style is used when you want to use the left panel in a LANDING PAGE form of panel construct. Typically, this would only be seen in a small form factor device.
psc_panel-overlay		Two Panel	Single Page container two panels	This is a MODE style that changes the default behavior of the left panel. See the description for psc_panel- fixed for the default behavior. In OVERLAY mode, the panel does not affect the width of the content. In this situation, the left panel merely overlays (hides part of) the content rather than making the content size smaller to see the left panel.
psc_panel- tabcontainer		Two Panel	Single Page container two panels	Container for the "tab" to be available under certain circumstances to allow the user to open/close the left panel.
psc_pos-absolute		Layout		Applies the CSS position property to absolute for explicit movement of an element within another positioned container.
psc_pos-bottomleft		Layout		Performs absolute positioning relative to the bottom left corner of the

Style	Used With	Context Category	Sub Category	Description
				nearest positioned ancestor.
psc_pos-bottomright		Layout		Performs absolute positioning relative to the bottom right corner of the nearest positioned ancestor.
psc_pos-fixed		Layout		Applies the CSS position property to fixed, relative to the browser window (will not scroll).
psc_pos-relative		Layout		Applies the CSS position property to relative for relative movements or to identify a container for positioning using other positioning means (such as absolute).
psc_pos-static		Layout		Applies the CSS position property to static (the default).
psc_pos-topleft		Layout		Performs absolute positioning relative to the top left corner of the nearest positioned ancestor.
psc_pos-topright		Layout		Performs absolute positioning relative to the top right corner of the nearest positioned ancestor.
psc_primary		Pushbutton	Primary	Important style used to make a standard button (not in the banner nor an image button nor a SIMPLE button) to be displayed as the "important" button (primary action). There should be only a single primary button on the display at a time because you are trying to draw attention to the primary action to be completed on the overall page.
psc_radius-{1,2)em, psc_radius-{01-02}em		Visual		Sets the border radius to a container to the specified

Style	Used With	Context Category	Sub Category	Description
				value. Values range from 0.1em to 1em incrementing by 0.1em. There is also a 2em as well. If this container is a group box with a header, the header's TOP (left/right) radius are also adjusted to the same value as well.
psc_radius-{1-10}px		Visual		Sets the border radius to a container to the specified value. Values range from 1px to 10px incrementing by 1px. If this container is a group box with a header, the header's TOP (left/right) radius are also adjusted to the same value as well.
psc_radius-none		Visual		Sets the border radius to be none (the default).
psc_radius- top{1,2)em, psc_radius-top{01- 02}em		Visual		Sets the TOP (left/right) border radius to a container to the specified value. Values range from 0.1em to 1em incrementing by 0.1em. There is a 2em as well. If this container is a group box with a header, the header's TOP (left/right) radius are also adjusted to the same value as well.
psc_radius-top{1- 10}px		Visual		Sets the TOP (left/right) border radius to a container to the specified value. Values range from 1px to 10px incrementing by 1px. If this container is a group box with a header, the header's TOP (left/right) radius are also adjusted to the same value as well.
psc_radius-topnone		Visual		Sets the TOP (left/right) border radius to be none (the

Style	Used With	Context Category	Sub Category	Description
				default).
psc_reldisp-container		Related Display		Applied to a layout group box to contain two fields (typically): the related display control and the related display value/units. Within this styled container, you typically have two to three elements in this order: an editable field (psc_reldisp- field), an optional image button (psc_reldisp-prompt), and a display only as text field (psc_reldisp-value OR psc_reldisp-units).
psc_reldisp-field		Related Display		Within a psc_reldisp- container, this style is applied to an editable field which is used to derive the value to be displayed as the related display value. If the contents of this field is example, you can use psc_hide- reldispvalue which will hide the associated display only value (or unit) so that no additional space is consumed. On a small form factor, if this field is also has psc_fld-standard it will control not only the label position on this field but also the placement of the psc_reldisp-value field as well.
psc_reldisp-prompt		Related Display		Styling on an image-only button within a psc_reldisp- container, which typically looks like a prompt. Creates a special "prompt" button that appears inside the psc_reldisp-field editable

Style	Used With	Context Category	Sub Category	Description
				field (like a prompt button).
psc_reldisp-units		Related Display		Similar to psc_reldisp-value but is used to display FIXED TEXT, rather than related display which QUALIFIES the value found in psc_reldisp- field. Like units of measure. When on a small form factor, unlike psc_reldisp-value, this display-only value will continue to be positioned BYSIDE the field as it is a qualification of the field.
psc_reldisp-value		Related Display		Within a psc_reldisp- container, this style is applied to a DISPLAY-ONLY (as Text) field to display the associated value to the field psc_reldisp- field. On a small form factor, if the psc_reldisp-field also has psc_fld-standard, this value will move BELOW the editable field.
psc_rowadd-hide		Grid		Hides the column that contains the PeopleTools- generated row Add action.
psc_rowdelete-hide		Grid		Hides the column that contains the PeopleTools- generated row Delete action.
psc_rowinsert-hidden		Layout		Applied to a row to hide it while you are performing INSERTS. Remove from the row after you've added the information successfully in a modal.
psc_rowlabels-hide		Grid		Same as psc_rowlabels-none.
psc_rowlabels-none		Grid		Applied at a grid level, this style is used to not display the label structure (does not consume space) in FLEX grid rows. In accessibility mode, these labels will be rendered

Style	Used With	Context Category	Sub Category	Description
				offscreen so they will be available to the screen reader.
psc_rownumber-hide		Grid		Hides the column containing the PeopleTools-generated row number.
psc_scroll		Layout		Sets overflow as auto (scrolling enabled if necessary) on a container. It is forced with the !important setting.
psc_scroll-content		Layout		Enables the content area of a standard group box, not a collapsible group box, to scroll if necessary.
psc_scroll-overflow		Layout		Same as psc_overflow-auto. Sets overflow as auto (scrolling enabled if necessary) on a container but is NOT forced.
psc_scrollarea-notitle		Layout	ScrollArea	Applied at the scroll area level. This style turns off the row headers for each row of the scroll area. They are hidden and not available in accessibility mode.
psc_selected		State	Tabs, Button Bar, Listview, Grids	Used to indicate that an item (typically a row or an item in a list) is selected.
psc_selection-none	psc_list- linkmenu	ListView		Use this style to hide the checkbox/radio button for the PeopleTools row selection mechanism on a LISTVIEW implementation. Used to hide the selection mechanism for a row.
psc_separator- breadcrumb	ps_collecti on	Layout	Collections	Sets the separator for a non- grid collection to be a breadcrumb character (or the greater than sign ">").

Style	Used With	Context Category	Sub Category	Description
psc_separator-pipe	ps_collecti on	Layout	Collections	Sets the separator for elements in a non-grid collection to be a pipe character, "|".
psc_shadow- standard		Visual		Applies the simple outer shadow to a container.
psc_show-actionable		Actionable	Grid/Groupboxes	There are several usages for this styling. Some are standalone and others are used in conjunction with the psc_more style. This style is used to display a CHEVRON which indicates that the entity (a group box or a grid row) is ACTIONABLE. It requires that within Application Designer that a field has the setting "Execute PC on Row/Group Click" enabled, which will cause PeopleTools to render a style of psc_rowact at the appropriate level. If the trigger field (identified with the style psc_trigger) has been disabled, the row action will also be disabled and the CHEVRON (or actionable indicator) will not be displayed. If this style is applied on an actionable GROUP BOX, the chevron will merely appear in the group box in the appropriate location. If applied on a LIST or DIV grid (at the grid level), the indicator will appear at the end of every row that is actionable. If this is used on a FLEX grid, it is expected that a display-only (as text) field will be used as the last field

Style	Used With	Context Category	Sub Category	Description
				on the grid having the style psc_more applied to it. This field may or may not have content.
psc_show- baronselect		Grid	Header Bar	Displays a grid's header bar (where the actions are locationed) only when a row is selected, using single or multi-row PeopleTools selection mechanism. Applied at the grid level.
psc_show-detail		Grid	Summary / Detail	Used on a field within a LIST grid indicating that this item should only be displayed when the list grid is in detail mode (psc_list-detail applied at the grid or row level).
psc_show-expanded		Grid	Summary / Detail	Used on a field within a LIST grid indicating that this item should only be displayed when the list grid is in expanded mode (psc_list- expanded applied at the grid or row level).
psc_show-gridonly		Grid		Indicates that the field should only be displayed in a FLEX grid. The field would be hidden in a LIST or DIV grid rendering.
psc_show-listonly		Grid		Indicates that the field should only be displayed in a LIST grid. The field would be hidden in a FLEX or DIV grid rendering.
psc_show- rowselected		Grid	Button Area	On a button appearing within a header bar of a grid, this style will cause a page field element to be displayed only when a row has been selected within the grid (using the PeoplTools single or multiple selection

Style	Used With	Context Category	Sub Category	Description
				mechanism on a row.
psc_simple_label		Layout	Label	Apply on page field to display a simple label where there is no reserved space for the label. The width is the size of the label itself rather than the typical 33% resevered space of the container.
psc_singleselect-hide		Grid		Applied to a grid, it indicates that the single selection mechanism rendered by PeopleTools will be hidden.
psc_size-large		Switch		Because the size of the SWITCH form of the checkbox is fixed, use this style on a checkbox to get a largest width for the label.
psc_size-medium		Switch		Because the size of the SWITCH form of the checkbox is fixed, use this style on a checkbox to get a larger width for the label (default is an IMPLIED SMALL).
psc_size-xsmall		Switch		Because the size of the SWITCH form of the checkbox is fixed, use this style on a checkbox to get a smaller width for the label (default is an IMPLIED SMALL). If you want a no text version, see the style psc_notext.
psc_standard		Switch		Used if an application wanted to toggle between SWITCH display of a checkbox and the STANDARD display of a checkbox. If you apply psc_standard to a SWITCH form, it will appear as a normal checkbox.

Style	Used With	Context Category	Sub Category	Description
psc_strong		Visual		Sets font weight to bold (same as psc_bold).
psc_subtitle		Visual	Grid/Groupboxes	This style applies changes to a grid title or a group box title to appear not as a standard heading but more like a subtitle, expecting that a container would have a higher level heading. The font size of the actual heading level being used in the grid title/group box header rendering is not modified, but the color is (uses inherited color rather than normal header colors), border (removed) and padding.
psc_tablelayout-auto		Grid		Sets the table layout for a FLEX grid to auto.
psc_tablelayout-fixed		Grid		Sets the table layout for a FLEX grid to fixed.
psc_tablelayout- inherit		Grid		Sets the table layout for a FLEX grid to inherit.
psc_text-disclaimer		Visual		Similar to psc_text-important but does not include an image, and this type of text is used to display disclaimer information at the bottom of content.
psc_text-example		Visual		Not used by Peoplesoft Applications but it is a style to provide an example in text form of a value to be entered. This typically displayed beneath (or possibly beside) an entry field to give an example. Typical usage might be to describe formatting. If placed below an entry field, the spacing below the entry field should

Style	Used With	Context Category	Sub Category	Description
				be removed (psc_margin- bottomnone) so that the example is close to the field. Also, in accessibility mode, applications should use aria- describedby and point to the text field that describes the format so that accessible users have the same context information available for the field. If you want the example text to be beside the entry field, look at the psc_reldisp- * styles to style this similar to psc_reldisp-units.
psc_text-important		Visual		Simple style to text in such a way to bring importance to this area. Within this layout groupbox, you would typically have a display only (as text) editbox or longeditbox and an optional image (which should come first as a child). The editbox/longedit controls will have their label's hidden and will wrap around the image (if present).
psc_text_center		Layout		Same as psc_halign-center. Performs text alignment as centered.
psc_tile-box-data		Tile		Sets padding on a group box to contain tile data.
psc_tile-box-img		Tile		Style used on a container which has a image to be used as the tile's main image.
psc_tile-img		Tile		Style applied to the tile image.
psc_tile_content		Tile		Basic style for tile content interior. There are two sections of a grouplet displayed in a tile. This

Style	Used With	Context Category	Sub Category	Description
				section (psc_tile_content), which contains the main content of the tile, and then there is the psc_tile_livedata section.
psc_tile_content- center		Tile		Used to center the content within a tile (can be used at various levels) using the FLEX CSS model. Commonly used on psc_tile_content.
psc_tile_content-kpi- image		Tile		Styling for Container of a KPI image within the content area.
psc_tile_content- metrics		Tile		Styling for metrics container found within the tile content area (as opposed to the live data area).
psc_tile_content- metricsdata		Tile		Styling livedata when it is located within the content area.
psc_tile_kpi		Tile		Styling for KPI data.
psc_tile_kpi-1		Tile		Styling for KPI data.
psc_tile_kpi-box-1		Tile		Style for group box containing Key Performance Indicator (KPI) data.
psc_tile_kpi-box-2		Tile		Style for group box containing Key Performance Indicator (KPI) data.
psc_tile_kpi-label		Tile		Style for label for KPI data.
psc_tile_livedata		Tile		Style applied to a group box that would be a sibling to psc_tile_content when a parent group box is used to house both the psc_tile_content and psc_tile_livedata.
psc_tile_livedata- count		Tile		Style applied to an edit box (typically) containing a count to be displayed in the low corner of the tile (typically use psc_label-none).

Style	Used With	Context Category	Sub Category	Description
psc_tile_livedata- descr		Tile		Outer container used for live data description (child of psc_tile_livedata).
psc_tile_livedata- descr-box		Tile		Child of psc_tile_livedata- descr containing actual information.
psc_tile_livedata-img		Tile		Image style within live data area.
psc_tile_livedata- trendimage		Tile		Image used to show trend direction within livedata section.
psc_tile_livedata_des cr1		Tile		Live data item (child of psc_tile_livedata-descr-box). Typically also has style psc_tile_livedata_item.
psc_tile_livedata_ite m		Tile		Style indicating a page field is part of livedata.
psc_title-h1		Visual		Uses the same styling of text as the H1. Warning if you use this on a regular field and it visually is a header, you need to deal with accessibility to add attributes to make it a header to a screen reader as well. Simply styling something to look like a header is not sufficient.
psc_title-h2		Visual		Uses the same styling of text as the H2. Warning if you use this on a regular field and it visually is a header, you need to deal with accessibility to add attributes to make it a header to a screen reader as well. Simply styling something to look like a header is not sufficient.
psc_title-h3		Visual		Uses the same styling of text as the H3. Warning if you use this on a regular field and it visually is a header, you need to deal with accessibility to

Style	Used With	Context Category	Sub Category	Description
				add attributes to make it a header to a screen reader as well. Simply styling something to look like a header is not sufficient.
psc_title-h4		Visual		Uses the same styling of text as the H4. Warning if you use this on a regular field and it visually is a header, you need to deal with accessibility to add attributes to make it a header to a screen reader as well. Simply styling something to look like a header is not sufficient.
psc_title-h5		Visual		Uses the same styling of text as the H5. Warning if you use this on a regular field and it visually is a header, you need to deal with accessibility to add attributes to make it a header to a screen reader as well. Simply styling something to look like a header is not sufficient.
psc_title-h6		Visual		Uses the same styling of text as the H6. Warning if you use this on a regular field and it visually is a header, you need to deal with accessibility to add attributes to make it a header to a screen reader as well. Simply styling something to look like a header is not sufficient.
psc_title-page		Visual		Same styling as psc_title-h1.
psc_title-sub		Visual		Same styling as psc_title-h2.
psc_toggle- imagecontainer	ps_collecti on.ps_butt on_bar	Button Bar	View Selector	Similar to psc_gridview- toggle but a more generic construct for general purpose radio buttons styled with images via custom CSS. This

Style	Used With	Context Category	Sub Category	Description
				is a container for psc_toggle- imageitem.
psc_toggle- imageitem		Button Bar	View Selector	Similar to .psc_gridview-item but used as a child of psc_toggle-imagecontainer. Each item is sized similarly to the psc_gridview-item as far as the image size. It is up to the developer to add the definitions for the actual images to use. You cannot specify images in Application Designer for radio buttons.
psc_transparent		Visual	Button	Used to make a button's background and border completely transparent.
psc_trigger-hidden	psc_list- linkmenu	ListView		Style used on ListView styling to hide the trigger column/field EXCEPT in accessibility mode.
psc_valign-baseline		Layout		Sets vertical alignment property to baseline.
psc_valign-bottom		Layout		Sets vertical alignment property to bottom.
psc_valign-middle		Layout		Sets vertical alignment property to middle.
psc_valign-top		Layout		Sets vertical alignment property to top.
psc_value-alignauto		Layout		Applies style to page field elements to align the text (whether in editable control or simple text [with size]) based on type. Most types are aligned left but numeric types are aligned right. The only time that auto- alignment occurs is within a flex grid, where numerics are right, buttons are centered, and text is left.
psc_value-ellipsis		Layout		Applies text overflow to be an ellipsis for the value if

Style	Used With	Context Category	Sub Category	Description
				there is a specific size designated for the value structure. This is only applicable for controls rendered as display only as text.
psc_value-fullwidth		Layout		Sets the size of display only as text or hyperlink value as the full width of the container (also changes to display style of block).
psc_value- haligncenter		Layout		Horizontally centers the text within editable control or a sized display only text.
psc_value-halignleft		Layout		Horizontally left justifies the text within editable controls or a sized display-only text.
psc_value-halignright		Layout		Horizontally right justifies the text within editable controls or a sized display-only text.
psc_value-height{1- 20}em		Layout		Set the height of display-only text or display-only as hyperlink (email/url) to the specified value. Value ranges from 1 to 20em incremented by 1em.
psc_value-height{1- 100}pct		Layout		Set the height of display-only text or display-only as hyperlink (email/url) to the specified value. Value ranges from 1 to 100% incremented by 1%.
psc_value-height{1- 100}px		Layout		Set the height of display-only text or display-only as hyperlink (email/url) to the specified value. Value ranges from 1 to 100px incremented by 1px.
psc_value-heightauto		Layout		Set the height of display-only text or display-only as hyperlink (email/url) to be automatic, based on content.

Style	Used With	Context Category	Sub Category	Description
psc_value- valignbaseline		Layout		Sets the vertical alignment of display-only text (with height specified) to be baseline.
psc_value- valignbottom		Layout		Sets the vertical alignment of display-only text (with height specified) to be bottom.
psc_value- valignmiddle		Layout		Sets the vertical alignment of display-only text (with height specified) to be middle.
psc_value-valigntop		Layout		Sets the vertical alignment of display-only text (with height specified) to be top.
psc_value-width{1- 100}em		Layout		Sets the width of display-only text or display-only as hyperlink (email/url) to the specified value. Value ranges from 1 to 100em incremented by 1em.
psc_value-width{1- 100}pct		Layout		Sets the width of display-only text or display-only as hyperlink (email/url) to the specified value. Value ranges from 1 to 100% incremented by 1%.
psc_value-width{1- 100}px		Layout		Sets the width of display-only text or display-only as hyperlink (email/url) to the specified value. Value ranges from 1 to 100px incremented by 1px.
psc_value-widthauto		Layout		Sets the width of display-only text or display-only as hyperlink (email/url) to be automatic, based on content, which is the default if wrapping has not been enabled in Application Designer.
psc_width-{1-100}em		Layout	Any	Sets the width of a container/entity. Values range from 1em to 100em in increments of 1em.

Style	Used With	Context Category	Sub Category	Description
psc_width-{1-100}pct		Layout	Any	Sets the width of a container/entity. Values range from 1% to 100% in increments of 1%.
psc_width-{1-100}px		Layout	Any	Sets the width of a container/entity. Values range from 1px to 100px in increments of 1px.
psc_width-auto		Layout	Any	Sets the width of a container/entity to "auto," which allows the content (or some other styling) to drive the width of the item.
psc_wrap		Layout		By itself, turns on wrapping for the specific container. This is an inherited setting so it can affect the children. It is also used by list-linkmenu to turn off text wrapping of links contained within the LISTVIEW. The default is no wrapping, or truncation.
psc_wrap-link		Hyperlink		Used on a hyperlink (standard hyperlink) to allow wrapping of text.
psc_wrap-linktext		Hyperlink		Used on an Image+Text hyperlink to allow wrapping of the hyperlink text.