Text (CSS) Standards

Last Updated 03.28.03

General Description

Below are the specifications for the Cascading Style Sheet (CSS) standards used for specific UI components and application content. This list is only a reference for the master XSS file shipped with Cabo 2.0.12.

NOTE: The master XSS and Ocelot render relative CSS standard to ensure browser compatibility, and compliance with standards for accessibility and internationalization. Absolute CSS values are not used. The specifications in this document are used for the basis for determining the relative CSS figures for Ocelot.

Guideline Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Beier, Mervyn Dennehy
UI Models - all models
Example Products - all products
Related Guidelines - all components (see Table of Contents of Guidelines for complete component list.)

Interaction and Usage Specifications

Text and backgrounds vary by size, color, and style. These variants can visually provide feedback to the user communicating information like:

Visual Specifications

The table below contains standard CSS definitions for: Use this table to see all css text size, color, style variants as well as background definitions.

BACKGROUND COLOR CSS DEFINITIONS
.OraBGColorVeryDark {very dark core color as background}
color:#003366;
.OraBGColorDark {dark core color as background}
color:#336699;
.OraBGColorMedium {medium core color as background}
color:#6699cc;
.OraBGColorLight {light core color as background}
color:#99ccff;
.OraBGAccentVeryDark {very dark accent color as background}
color:#999966;
.OraBGAccentDark {dark accent color as background}
color:#cccc99;
.OraBGAccentMedium {medium accent color as background}
color:#ffffcc;
.OraBGAccentLight {light accent color as background}
color:#f7f7e7;
.OraBGGrayVeryDark {very dark gray color as background}
color:#333333;
.OraBGGrayDark {dark gray color as background}
color:#666666;
.OraBGGrayMedium {medium gray color as background}
color:#999999;
.OraBGGrayLight {light gray color as background}
color:#cccccc;
GENERAL COMPONENT CSS DEFINITIONS
.OraBody {used on the <body> element to define the default bgcolor/font family for the entire page}
font-family:Arial, Helvetica, Geneva, sans-serif;
background-color:#ffffff;
.OraApplicationSwitcherText {label of Application Switcher}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-size:8pt
.OraPromptText {Text Prompts (Labels)}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#000000;
font-size:10pt;
align:right
.OraDataText {Data text string anywhere in page except in tables - also often used for numeric values which don't need to be right-aligned}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#000000;
font-size:10pt;
text-align:left
.OraFieldText {Text and numeric data in standard Web widget (field, poplist)}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#000000;
font-size:10pt
.OraFieldTextDisabled {Renders gray text in disabled form controls such as text fields, radio buttons, check boxes - does not match current BLAF guidelines}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#999999;
font-size:10pt
.OraFieldNumber {Right-aligned numeric Data in Field}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#000000;
font-size:10pt;
text-align:right
.OraFieldNumberDisabled {Renders gray text for disabled Numeric Data fields - does not match current BLAF guidelines}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#999999;
font-size:10pt text-align:right
.OraInstructionText {Instruction Text}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#000000;
font-size:10pt
.OraInstructionTextStrong {Instruction Text with Emphasis}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#000000;
font-size:10pt
.OraPageStampText {Page stamp text}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#336699;
font-size:10pt
.OraPageStampLabel {Page stamp label}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#336699;
font-size:10pt
.OraButtonText {Action/Navigation Button Text}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#000000;
font-size:10pt
background-color:#f7f7e7
.OraButtonTextDisabled {Button Text - disabled}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#999966;
font-size:10pt
background-color:#f7f7e7
.OraLinkText {Link Text (would be underlined with href tag)}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#663300;
font-size:10pt
.OraVLinkText {visited link text (would be underlined with href tag)}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#996633;
font-size:10pt
.OraALinkText {active link text - color change on mouse button down (would be underlined with href tag)}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#ff6600;
font-size:10pt
.OraGlobalButtonText {Global Button Enabled} (This would be an "a href" link)
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#663300;
font-size:8pt
.OraGlobalButtonTextSelected {Global Button Active}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#336699;
font-size:8pt
.OraGlobalButtonTextDisabled {Global Button Disabled}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#999966;
font-size:8pt
.OraTipText {Tip Text for page or section of page}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#336699;
font-size:10pt
.OraTipLabel {Tip label (the word "Tip") in bold}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#336699;
font-weight:bold
font-size:10pt
.OraInlineErrorText {Inline Error Text embedded in page content (not in message box; not for other message types)}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#cc0000;
font-size:8pt
.OraInlineInfoText {Inline Info and Hint Text embedded in page content (not in message box; not for other message types)}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#336699;
font-size:8pt
.OraTextInline {Variant of OraInlineInfoText - not specified in current BLAF guidelines}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#6699cc;
font-size:8pt
.OraErrorHeader {Header for Error Message Only}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#cc0000;
font-size:16pt
.OraErrorText {Error messages within error message boxes}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#cc0000;
font-size:10pt
.OraErrorNameText {Error Name Text}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#cc0000;
font-weight:bold;
font-size:10pt
.OraMessageBoxList {numbered list within message box for list of informational or warning messages (not for error messages)}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
color:#336699;
margin-bottom:0px
.OraMessageBoxLink {blue links in message boxes - current BLAF guidelines specify brown links}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
font-weight:bold;
color:#336699
.OraMessageBoxParagraph {body text in non-error message boxes}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
color:#336699;
margin-top:15px
.OraMessageBoxErrorList {numbered list in red text within message box for list of error messages}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
color:#cc0000;
margin-bottom:0px
.OraMessageBoxErrorLink {blue links in message boxes - current BLAF guidelines specify brown links}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
font-weight:bold;
color:#cc0000
.OraMessageBoxErrorParagraph {red paragraph text in Error message boxes}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
color:#cc0000;
margin-top:15px
.OraPrivacy {Link in Footer to Privacy Statement}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#663300;
font-size:8pt;
text-align:right
.OraCopyright {Copyright Statement Text in Footer}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#000000;
font-size:8pt;
text-align:left
.OraCalendarTitle {Title of Date Picker - usually name of the month}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:13pt;
text-align:center;
background-color:#ffffff;
color:#336699
.OraCalendarHeader {Date Picker column headers - usually days of the week}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
font-weight:bold;
text-align:center;
background-color:#cccc99;
color:#336699;
padding:2px
.OraCalendarEnabled {Days in Date Picker that can be selected}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
text-align:center;
background-color:#f7f7e7;
color:#336699;
line-height:1.5;
padding:2px;
text-decoration:none
.OraCalendarDisabled {Days in Date Picker that are invalid for the current context}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
text-align:center;
background-color:#f7f7e7;
color:#999999;
line-height:1.5;
padding:2px
.OraCalendarSelected {Selected days(s) in the in Date Picker}
font-family:Arial,Helvetica,Geneva,sans-serif; font-size:10pt; text-align:center; background-color:#999966; color:#ffffff; line-height:1.5; padding:2px
.OraShuttleHeader {Heading for each side of shuttle component}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:11pt;
color:#336699;
font-weight:bold
.OraShuttleLinkText {Link text placed below each arrow button in the middle of the shuttle}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:9pt;
color:#663300
TAB/NAVIGATION/LOCATOR CSS DEFINITIONS
.OraNav1Selected {Tab [level 1] selected}
font-family:Arial, Helvetica, Geneva, sans-serif;
background-color:#336699;
color:#99ccff;
font-size:11pt;
font-weight:bold;
text-decoration:none
.OraNav1Enabled {Tab [level 1] enabled}
font-family:Arial, Helvetica, Geneva, sans-serif;
background-color:#cccc99;
color:#003366;
font-size:11pt;
text-decoration:none
.OraNav1Disabled {Tab [level 1] disabled}
font-family:Arial, Helvetica, Geneva, sans-serif;
background-color:#cccc99; color:#ffffcc;
font-size:11pt;
text-decoration:none
.OraNav2Selected {Horizontal Navigation [level 2] selected}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#ffffff;
font-size:10pt;
font-weight:bold;
text-decoration:none
.OraNav2Enabled {Horizontal Navigation [level 2] enabled}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#ffffff;
font-size:10pt;
text-decoration:none
.OraNav2Disabled {Horizontal Navigation [level 2] disabled}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#6699cc;
font-size:10pt;
text-decoration:none
.OraNav3Selected {Side Navigation [level 3] selected}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#ffffff;
font-size:10pt;
font-weight:bold;
background-color:#336699;
text-decoration:none
.OraNav3Enabled {Side Navigation [level 3] enabled}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#003366;
font-size:10pt;
background-color:#cccc99;
text-decoration:none
.OraNav3Disabled {Side Navigation [level 3] disabled}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#ffffcc;
font-size:10pt;
background-color:#cccc99;
text-decoration:none
.OraNavBarActiveLink {used for enabled NavigationBarBean links (a "next" link when there are more items to view.)}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
color:#663300
.OraNavBarInactiveLink {used for NavigationBarBean Next/Previous links when there are no more Next/Previous contents to be viewed}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
color:#999966
.OraNavBarViewOnly {used for the step text (such as "Step 1 of 5") in a single-item NavigationBarBean}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
color:#336699
.OraTrainActive {current page in step-by-step locator a.k.a. "train"}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:9pt;
text-align:center;
color:#336699;
font-weight:bold
.OraTrainVisited {visited page(s) in step by step locator a.k.a. "train"}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:9pt;
text-align:center;
color:#cccc99
.OraTrainUnvisited {page(s) not yet visited page in step-by-step locator a.k.a. "train"}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:9pt;
text-align:center;
color:#336699;
.OraCrumbsSelected {current page (without link) in breadcrumbs}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:9pt;
color:#000000;
text-decoration:none
.OraCrumbsEnabled {Pages higher in the hierarchy (with links enabled) in breadcrumbs}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:9pt;
color:#663300
HEADER CSS DEFINITIONS
.OraHeader {Standard dark blue header on white background}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#336699;
font-size:16pt
.OraHeaderSub {Standard dark blue subheader on white background}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#336699;
font-size:13pt
.OraHeaderSubSub {Standard dark blue subsubheader on white background}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#336699;
font-size:11pt
.OraDarkHeader {Dark Header on dark beige in Side Navigation of Home page - usually subheader and subsubheader are used instead}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#003366;
font-size:16pt
.OraDarkHeaderSub {Dark Subheader on dark beige in Side Navigation of Home page}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#003366;
font-size:13pt
.OraDarkHeaderSubSub {Dark Subsubheader on dark beige in Side Navigation of Home page}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#003366;
font-size:11pt
.OraLightHeader {Light blue header on light or medium beige background for content containers - usually subheader and subsubheader are used instead}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#6699cc;
font-size:16pt
.OraLightHeaderSub {Light blue subheader on light or medium beige background - typically in content containers}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#6699cc;
font-size:13pt
.OraLightHeaderSubSub {Light blue subsubheader on light background - typically in content containers}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#6699cc;
font-size:11pt
.OraColorHeader {Header on Blue for content containers - usually subheader and subsubheader are used instead}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#ffffcc;
font-size:16pt
.OraColorHeaderSub {Subheader on Blue - typically in content containers}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#ffffcc;
font-size:13pt
.OraColorHeaderSubSub {SubsubHeader on Blue - typically in content containers}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#ffffcc;
font-size:11pt
Portlet Header on Blue (Used for Portal Only. Not currently provided by Cabo)
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#ffffff;
font-size:10pt
.OraPortletHeader {Portlet Content Header on White - currently only used for a Portal demo}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#000000;
font-size:10pt
.OraDarkPortletHeader {Portlet Content Header on Beige - currently only used for a Portal demo}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#000000;
font-size:10pt
.OraGlobalPageTitle {Global header when there are no Tab links}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
color:#ffffff;
font-size:13pt
TABLE CSS DEFINITIONS
.OraTableTitle {Table Title - used instead of Subheader when other elements separate the subheader from the table AND no control bar is present}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:13pt;
background-color:#ffffff;
color:#336699
.OraTable {Background color for table gridlines}
background-color:#999966;
.OraTableControlBarText {text in table Control Bar (band appearing at top of some tables that contains controls)}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
background-color:#cccc99;
color:#336699;
font-size:11pt
.OraTableColumnHeader {Table Column Header}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
background-color:#cccc99;
color:#336699;
font-size:10pt
text-align:left
.OraTableColumnHeaderNumber {same as Table Column Header but with right aligned numeric header}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
background-color:#cccc99;
color:#336699;
font-size:10pt
vertical-align:bottom;
text-align:right
.OraTableColumnHeaderIconButton {Table Column Header with centered action button}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
background-color:#cccc99;
color:#336699;
font-size:10pt
vertical-align:bottom;
text-align:center
.OraTableSortableColumnHeader {Sortable Table Column Header -- cursor turns to hand over header cell}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
background-color:#cccc99;
color:#336699;
font-size:10pt
vertical-align:bottom;
text-align:left
cursor:hand
.OraTableSortableColumnHeaderNumber {sortable form of numeric Table Column Header}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
background-color:#cccc99;
color:#336699;
font-size:10pt
vertical-align:bottom;
text-align:right
cursor:hand
.OraTableSortableColumnHeaderIconButton {sortable form of Table Column Header with centered action button}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
background-color:#cccc99;
color:#336699;
font-size:10pt
vertical-align:bottom;
text-align:center
cursor:hand
.OraTableRowHeader {Table Row Header}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
background-color:#cccc99;
color:#336699;
font-size:10pt
text-align:right
.OraTableColumnFooter {for left-aligned text in table column footer, except for totals}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
background-color:#cccc99;
color:#336699;
font-size:10pt
text-align:left
.OraTableTotal {right-aligned "Total" label that appears in footer cell to left of numeric total}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
background-color:#cccc99;
color:#336699;
font-size:10pt
text-align:right
.OraTableAddTotal {left-aligned "Total" label that appears in column header cell}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
background-color:#cccc99;
color:#336699;
font-size:10pt
text-align:left
.OraTableTotalNumber {right-aligned total value that appears in footer cell below the totalled column}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
background-color:#cccc99;
color:#000000;
font-size:10pt
text-align:right
vertical-align:baseline
.OraTableTotalText {left-aligned total value -- useful in updateable tables with more than one totaled column}
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
background-color:#cccc99;
color:#000000;
font-size:10pt
text-align:left
vertical-align:baseline
.OraTableCellText {Table Cell Text}
font-family:Arial, Helvetica, Geneva, sans-serif;
color:#000000;
background-color:#f7f7e7;
font-size:10pt
vertical-align:baseline
.OraTableCellTextBand {Table Cell Text in row with band of color}
font-family:Arial, Helvetica, Geneva, sans-serif;
background-color:#ffffff;
color:#000000;
font-size:10pt
vertical-align:baseline
.OraTableCellNumber {numeric Table Cell Text - only required if column features calculations}
font-family:Arial, Helvetica, Geneva, sans-serif;
background-color:#f7f7e7;
color:#000000;
font-size:10pt
vertical-align:baseline;
text-align:right
.OraTableCellNumberBand {numeric Table Cell Text in row with band of color - only required if column features calculations}
font-family:Arial, Helvetica, Geneva, sans-serif;
background-color:#ffffff color:#000000;
font-size:10pt
text-align:right
.OraTableCellIconButton {Table Cell containing an action/navigation button}
font-family:Arial, Helvetica, Geneva, sans-serif;
background-color:#f7f7e7; color:#000000;
font-size:10pt;
text-align:center;
vertical-align:baseline
.OraTableCellIconButtonBand {numeric band color table cell containing an action/navigation button}
font-family:Arial, Helvetica, Geneva, sans-serif;
background-color:#ffffff color:#000000;
font-size:10pt
text-align:center; vertical-align:baseline
.OraTableCellSelect {select column with check box or radio button}
font-family:Arial, Helvetica, Geneva, sans-serif;
background-color:#f7f7e7; color:#000000;
font-size:10pt;
text-align:center;
vertical-align:baseline
.OraTableCellSelectBand {select column with check box or radio button in row with band of color}
font-family:Arial, Helvetica, Geneva, sans-serif;
background-color:#ffffff; color:#000000;
font-size:10pt;
text-align:center;
vertical-align:baseline
.OraTableVerticalGrid {Table Background Vertical Grid Color}
background-color:#cccc99; width:1px
.OraTableVerticalHeaderGrid {Table Background Vertical Grid Color in Column Header}
background-color:#f7f7e7; width:1px
.OraTableHorizontalGrid {Table Background Horizontal Grid Color}
background-color:#cccc99; width:1px
.OraTableHorizontalHeaderGrid {Table Background Horizontal Grid Color in Row Header}
background-color:#f7f7e7; width:1px
.OraTableShadowHeaderGrid {renders shadow for sortable table headers???}
background-color:#666633; width:1px
.OraTableHeaderLink {Used for column headers rendered by SortableHeaderBean for headers which aren't sortable}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
font-weight:bold;
background-color:#cccc99;
color:#336699;
text-decoration:none
.OraTableSortableHeaderLink {Link in Header of Sortable Column}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
font-weight:bold;
background-color:#cccc99;
color:#336699;
text-decoration:none
vertical-align:bottom
.OraTableDetail {Used for details child in conjunction with Hide/Show in a table row}
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size:10pt;
color:#000000;
background-color:#ffffff
SPACING AND LAYOUT CSS DEFINITIONS
.OraIndentHeader {Indents second and later occurrences of subheaders 20 pixels relative to page header}
margin:20
.OraSpacingHeader {Spacing for Page Title Header: 7 pixels above and 2 below}
margin:7 0 2 0
.OraSpacingHeaderSub {Spacing for first SubHeader on page: 10 pixels above and 2 below}
margin:10 0 2 0
.OraSpacingHeaderLarge {Spacing for second and later occurrences of subheaders: 20 pixels above and 2 below}
margin:20 0 2 0
Note: BLAF.CSS also contains styles for Cabo implementation, such as .OraTreeRow and .OraSearchBorderStart, which are not documented by BLAF.

Open/Closed Issues