wrap. They fit the main basic admin and power-ui page profiles. This allows us to sub-class any style from the root pages ... with conficence it won't affect any of the other ui pages if necessary to roll out a quick patch or fix a very specific issue. App Main Power Uis: Doc Viewers, Bundling, etc .xpAppUiPgx: First root class usually on the main body or outer wrapp div. Admin Pages: All get the initial .xpAdmBase class, then the class closest to its page model. .xpAdmBase: First root class for all admin pages (editors, search grids, config settings, etc). .xpAdmUtil: Admin Utils, Test Utils, and Misc .xpAdmCfgSet: Admin Settings / Option Bag Set Editors .xpAdmObjGrid: Admin Object Search Grids. .xpAdmObjEdit: Admin Object Data editors. Launched from the search grids. */ /* Focus: Inputs and Common Widgets */ .xsFocusArea input.xsDataField:not([readonly]):focus, .xsFocusArea input.xsDataValue:not([readonly]):focus, .xsFocusArea textarea:not([readonly]):focus, .xsFocusArea select:not([readonly]):focus, .xsFocusArea .xsDataFieldPanel input:not([readonly]):focus, .xsFocusArea .xsDataFieldPanel select:not([readonly]):focus, .xsFocusArea .xsDataFieldPanel textarea:not([readonly]):focus { border: solid 1px #ff9900; box-shadow: 0 0 4px 1px #969696; } .xsFocusArea input[type="checkbox"]:focus, .xsFocusArea input[type="radio"]:focus, .xsFocusArea input[type="button"]:focus, .xsFocusArea button.xbText:not([readonly]):focus { border: solid 1px #ff9900; box-shadow: 0 0 4px 1px #ff9900; } /* Mainly for Object Editors that often have an initial read-only field (id, key, etc) that we still want to focus on and have decorators. */ .xsFocusArea #xcXuiObjectBaseData input.xsDataField[readonly]:focus, .xsFocusArea textarea[readonly]:focus, .xsFocusArea select[readonly]:focus { border: solid 1px #ff9900; box-shadow: 0 0 4px 1px #969696; } /* Pick List Nub, Toolbars, simple widgets */ .xsFocusArea .xsHeader.xsToolbar button.xbIcon:focus, .xsFocusArea button.xq-pickListToggle:focus { border: dotted 1px #ff9900; box-shadow: 0 0 1px 1px #969696; } /* Small group action icon sets not in toolbars that may want more visual cues and other features. Eg: JsTree widget in FaxAgent Folder and Type Filter mainnt. */ .xsFocusArea .xsDataActions button.xbIcon:focus { border: solid 1px #ff9900; box-shadow: 0 0 3px 1px #969696; } .xsFocusArea.xsAppDashPad button.xbText:focus { border: dotted 1px #ff9900; box-shadow: 0 0 0px 1px #969696; } /* ------------------------------------ FocusArea: JS-Tree Specific Focus ----------------------------------- */ /* JsTree: Outer Menu Wrap Panel */ .xsFocusArea .xsMenuTree:focus-within { border: solid 1px #ff9900; box-shadow: 0 0 4px 1px #969696; } /* JsTree: root fixed node */ .xsFocusArea .xsMenuTree .xsRootLabelContainer { border-bottom: dotted 1px #9ea2a2; } .xsFocusArea .xsMenuTree .xsRootLabelContainer:focus-within { border: dashed 1px #ff9900; box-shadow: 0 0 2px 1px #969696; } /* Cancel focus cue for icons in root node since it is decorated */ .xsFocusArea .xsMenuTree .xsRootLabelContainer button.xbIcon:focus { border: initial; box-shadow: initial; } /* JsTree: Child Lead Nodes */ .xsFocusArea .xsMenuTree .jstree-leaf:focus { border: dashed 1px #333f48; box-shadow: 0 0 2px 1px #969696; } /* -------------------------------- XL: Layout Control / Components ------------------------------- */ .xlTableFixed { table-layout: fixed; } .xlFill { height: 100%; } .xlFillWidth { width: 100%; } .xlFillBoth { width: 100%; height: 100%; } td > .xlFillBoth { position: relative; } td > .xlFillBoth > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .xlWrapRelFill { position: relative; height: 100%; min-height: 100%; } .xlWrapRelFill > table { height: 100%; } .xlFillBoth > .xlWrapRelFill > .xsDataTable > table > tbody { height: 100%; } .xlContainer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .xlScroller, .xlFitWidthScroller { overflow-y: scroll; overflow-x: auto; } .xlXScroller, .xlBestFitScroller { overflow-y: auto; overflow-x: scroll; white-space: nowrap; } .xlAutoScroller { overflow: auto; } .xlForcedScroller { overflow: scroll; } .xlFitWidthScroller > * { width: 100%; display: block; } .xlBestFitScroller > * { height: 100%; } /* -------------------------------- ----------------------------------- -- AXCM WIDGETS: ----------------------------------- ------------------------------- */ /* -------------------------------- XC: Component regions ------------------------------- */ .xcrBody { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* -------------------------------- XWP: Panel parent containers ------------------------------- */ .xwpContainer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .xwpPanel.xwp-hidden { display: none; } /* -------------------------------- XWPD: Panel directional containers ------------------------------- */ .xwpdTop { position: absolute; top: 0; right: 0; left: 0; } .xwpdRight { position: absolute; top: 0; right: 0; bottom: 0; left: auto; } .xwpdRight, .xwpdRight > .xwpDock { border-left: 1px solid #9ea2a2; } .xwpdBottom { position: absolute; right: 0; bottom: 0; left: 0; } .xwpdBottom, .xwpdBottom .xwpDock { border-top: 1px solid #9ea2a2; } .xwpdLeft { position: absolute; top: 0; bottom: 0; left: 0; } .xwpdLeft, .xwpdLeft > .xwpDock { border-right: 1px solid #9ea2a2; } .xwpdCenter { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } /* -------------------------------- XWPR: Panel region containers ------------------------------- */ .xwprBody { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .xwprFooter { position: absolute; right: 0; bottom: 0; left: 0; border-top: 1px solid #9ea2a2; } /* -------------------------------- XWP: Panel dock ------------------------------- */ .xwpDock { display: none; position: absolute; margin: 0; z-index: 2; } .xwpdTop > .xwpDock { width: 100%; height: auto; top: 0; right: 0; left: 0; text-align: left; } .xwpdRight > .xwpDock { height: 100%; top: 0; bottom: 0; left: 0; } /* left: 0 fix for docking in IE */ .xwpdBottom > .xwpDock { width: 100%; height: auto; top: 0; right: 0; left: 0; text-align: left; } .xwpdLeft > .xwpDock { height: 100%; top: 0; right: 0; bottom: 0; } .xwpdLeft > .xwpDock .xsLabel, .xwpdRight > .xwpDock .xsLabel { position: absolute; top: 12px; right: 0; left: 0; display: inline-block; white-space: nowrap; font-weight: bold; letter-spacing: 1px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } .xwpdRight .xwpDock .xfi { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } /* NOTEX: figure out how to vertically center this in the button, but keep to the left */ .xwpdTop > .xwpDock .xsLabel, .xwpdBottom > .xwpDock .xsLabel { white-space: nowrap; } .xwpdTop > .xwpDock .xfi-dock, .xwpdBottom > .xwpDock .xfi-dock { position: relative; left: 50%; } .xwpAction.xi-toggle { cursor: pointer; } /* -------------------------------- XS: Non panel regions ------------------------------- */ .xsRegionBody { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .xsRegionFooter { position: absolute; right: 0; bottom: 0; left: 0; } /* -------------------------------- XS: Nav ------------------------------- */ .xsNavPanel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .xsNavFrame { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* -------------------------------- XS: Header ------------------------------- */ .xsHeader { background-color: #f6f6f6; border-bottom: 1px solid #9ea2a2; vertical-align: middle; white-space: nowrap; padding-left: 6px; padding-right: 6px; } .xsHeaderLabel { font-family: "cal-ws-bold"; white-space: nowrap; } .xsHeader .xsHeaderLabel { font-size: 15px; } .xsHeader input[type="text"], .xsHeader input[type="password"], .xsHeader select { width: auto; } .xsHeader > button, .xsHeader > input, .xsHeader > select, .xsHeader > span, .xsHeader > div, .xsHeader > div > button, .xsHeader > div > input, .xsHeader > div > select, .xsHeader > div > span { vertical-align: middle; } .xsSectionHeader .xsInputCheckPanel { float: left; } .xsHeader .xsObjIdLabel { padding-right: 6px; white-space: nowrap; } .xsDataLabelPanel .xsObjIdLabel.xsLabel, .xsHeader .xsObjIdLabel.xsLabel { font-size: smaller; } /* -------------------------------- XS: Item ------------------------------- */ .xsItemHeader { padding: 0; } .xsItemDetail.xu-drag { background-color: #bc8f8f; } .xsItemHeader .xsBadge { border: 1px solid transparent; font-size: 11px; } .xsItemHeader .xbIcon { padding: 2px 4px; } .xsItemBody .xsSectionHeader { color: #ffffff; } .xsItemBody .xsSectionHeader td { } .xsItemDetail { background: #ffffff; border-bottom: 1px solid #9ea2a2; } .xsItemDetail.xu-dropactive.xu-drophover, .xsItemDetail .xu-dropactive { border-left: 4px solid #d8af00; } .xsItemDetail.ui-sortable-helper { background-color: #f5e4e4; } .xsItemDetail .xsRadioHolder { background: #ffffff; margin-top: 4px; } .xsItemDetailGroup .xsMenuItem { border-bottom: 1px solid #9ea2a2; } .xsItemDetailGroup .xsSectionHeader td { } /* -------------------------------- XS: ObjList ------------------------------- */ .xsObjList { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .xsObjList.xsListBox .xsItemDetail { padding-top: 3px; padding-bottom: 3px; } .xsObjList.xsVersionDrag { white-space: nowrap; } .xsObjList .xsItemHeader { border-top: 1px solid #777777; /*margin-top: 1px;*/ } /*.xsObjList .xbText.xsItemHeader*/ .xsObjList .xsItemHeader { /*padding: 0;*/ } .xsObjList .xsItemDetail { position: relative; border-left: 4px solid transparent; padding: 6px; cursor: pointer; } .xsObjList .xsItemDetail:hover, .xsObjList .xsItemDetail.xi-selected { background-color: #e6f2f6; border-left-color: #4298b5; } .xsObjList .xsItemDetail.xi-active { background-color: #f0c1bf; border-left-color: #b7312c; } .xsObjList .xsItemDetail.xi-changed { background: #fff8d8; border-left: 4px solid #d8af00; } .xsObjList .xsBucket .xsItemDetail { padding-left: 0; } .xsObjList .xsBucket:first-child .xsItemHeader { margin-top: 0px; } .xsObjList .xsItemDetail .xsIndicators { width: 18px; /*text-align: center;*/ vertical-align: top; padding: 0 7px 0 4px; } .xsObjList .xsItemDetail .xsIndicators .xfi { font-size: 10px; } .xsObjList .xsItemDetail .xsInfo1 .xsLabel { font-family: "cal-ws-bold"; font-size: 12px; } .xsObjList .xsDetails .xsDataTable > table { border-collapse: collapse; border-spacing: 0; } .xsObjList .xsItemDetail .xsInfo2 .xsLabel, .xsObjList .xsItemDetail .xsInfo3 .xsLabel, .xsObjList .xsItemDetail .xsInfo4 .xsLabel { font-size: 10px; } .xsObjList .xsItemDetail .xsInfo3 .xsDataLabelPanel { padding: 0; } .xsObjList .xsItemDetail .xsInfo4 .xq-radio .xfi { font-size: 12px; } .xsObjList .xsItemDetail .xsInfo4 .xsXmitType .xfi { font-size: 10px; } .xsObjList .xsItemDetail .xsDetails { vertical-align: top; } .xsObjList .xsItemDetail .xsDetails .xsMenu { position: absolute; right: 6px; } .xsObjList .xsItemDetail .xsDetails .xsInfo1 { padding-right: 42px; } .xsObjList .xsItemDetail .xsDetails .xsVersionList .xsMenu { position: absolute; right: 12px; } .xsObjList .xsVersionItem { border-left: 4px solid transparent; } .xsObjList .xsVersionItem:hover { border-left-color: #1d252d; } .xsObjList .xsVersionItem.xi-selected { background-color: #e6f2f6; border-left-color: #4298b5; } .xsObjList .xsVersionItem.xi-active { background-color: #f0c1bf; border-left-color: #b7312c; } .xsObjList .xsVersionItem.xi-changed { background: #fff8d8; border-left: 4px solid #d8af00; } .xsObjList .xsVersionItem .xsMenu .xq-radio .xfi { font-size: 12px; } .xsObjList .xsVersionItem .xsIndicators .xfi { font-size: 10px; } .xsObjList .xsVersionItem .xsLabel { font-size: 10px; } .xsObjList .xsVersionItem .xsInfo1 .xsLabel { font-family: "cal-ws-bold"; } .xsObjList .xsVersionItem .xsXmitType .xfi { font-size: 10px; } .xsObjDataLabel { font-family: "cal-ws-bold"; } .xsObjList .xsMenuItem { border-left: 4px solid transparent; padding: 4px 6px; } .xsObjList .xsMenuItem.xi-selected, .xsObjList .xsMenuItem:hover { background-color: #e6f2f6; border-left-color: #4298b5; } .xsObjList .xsMenuItem.xi-active { background-color: #f0c1bf; border-left-color: #b7312c; } .xsObjList .xsGroupCtlHeader .xsSectionHeader > td:nth-child(2) { padding-left: 0; } .xsObjList .xsGroupCtlItems .xbText.xsGroupCtlHeader .xsLabel { text-transform: capitalize; margin-right: 3px; } .xsObjList .xsGroupCtlItems > a { font-family: "cal-ws-regular"; display: block; color: #1d252d; } /*.xsObjList .xbText.xsGroupCtlHeader*/ .xsObjList .xsGroupCtlHeader { /*-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; width: 100%; text-align: left; color: #ffffff;*/ } .xsObjList .xbText.xsGroupCtlHeader > .xfi { margin-right: 4px; } .xsObjList .xbText.xsGroupCtlHeader .xsLabel { text-transform: capitalize; } .xsGroupCtlHeader .xsSectionHeader td { background: #333f48; color: #ffffff; padding: 6px 6px; } .xsItemDetailGroup .xsGroupCtlHeader .xsSectionHeader td { background: #5b6770; padding: 2px 6px; } .xsObjList .xsInfo5.xsTags { display: none; } .xsObjList .xsBadge { background: #ffffff; color: #1d252d; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; margin-right: 3px; } .xsObjList .xsDocumentCount { } /* -------------------------------- XS: DataTable ------------------------------- */ table { font-family: "cal-ws-regular"; font-style: normal; font-size: 12px; } .xsDataTable > table { border-collapse: separate; border-spacing: 6px; } .xsDataTable > table td, .xsDataTable > table tr.xsGroupCtlHeader > td, .xsDataTable > table tr.xsGroupCtlHeader.xsSectionHeader > td, .xsDataTable > table .xsDataIndAtt, .xsDataTable > table .xsDataLabelPanel, .xsDataTable > table .xsDataFieldPanel, .xsDataTable > table .xsDataLabel, .xsDataActions .xbText { white-space: nowrap; } .xsDataTable > table tr.xsSectionHeader td { white-space: normal; } .xsDataTable > table .xsWrapAuto { white-space: normal; line-height: normal; } .xsDataTable > table .xsDataLabelPanel { /*padding-top: 4px; padding-bottom: 4px;*/ } .xsDataTable > table .xsDataLabel { position: relative; } .xsHelpPanel .xsDataLabel.xi-emphasis, .xsDataTable > table .xsDataLabel.xi-emphasis { font-family: "cal-ws-bold"; } input[type="text"].xsDataDisplay { background: none; border: 1px solid transparent; text-overflow: ellipsis; } .xsDataTable.xi-lmodelthin > table { border-spacing: 0; } .xsDataTable.xi-lmodelthin > table td.xsDataLabelPanel { padding: 6px 6px 3px; } .xsDataTable.xi-lmodelthin > table td.xsDataFieldPanel { padding: 0px 6px 12px; padding: 0px 6px 6px; } .xsDataTable.xi-lmodelthin > table .xsDataActions { padding: 0px 6px 6px; } .xsHeader .xsDataTable input[type="text"], .xsHeader .xsDataTable select { width: 100%; } tr.xsSpacer td { background: none; border: 0; font-size: 0; } .xsDataLog .xsDivH, .xsDataLog .xsSpacer { margin-top: 4px; margin-bottom: 4px; } .xsCenterCell { text-align: center; } .xsCenterCell select { width: auto; } table .xsVertRow > td.xsCenterCell { vertical-align: middle; } .xsVertRow > td, table .xsVertRow > td input[type="checkbox"], table .xsVertRow > td input[type="radio"] { vertical-align: top; } .xsVertRow > td span, .xsVertRow > td input { vertical-align: middle; } .xsSplitRow td { padding-right: 6px; } .xsSplitRow td:last-child { padding-right: 0; } /* Data Header */ .xsDataTable > table thead .xsDataHeader td { background: none; color: #1d252d; } .xsDataTable > table .xsDataHeader td { padding: 3px 0; } .xsDataTable > table tbody > .xsDataHeader:first-child td { } .xsDataTable > table .xsDataHeader .xsHeaderLabel { font-family: "cal-ws-bold"; font-size: 13px; border-bottom: 1px solid #9ea2a2; padding: 2px 0 2px; } .xsDataTable.xi-lmodelthin > table .xsDataHeader td { padding: 3px 6px; } /* -------------------------------- XS: DataTable ReportTable ------------------------------- */ .xsDataTable.xsReportTable > table { border-collapse: collapse; border-spacing: 0; } .xsDataTable.xsReportTable > table .xsDataCellHeader .xsDataLabel { font-family: "cal-ws-bold"; } .xsDataTable.xsReportTable > table thead .xbIcon { padding: 2px 4px; } .xsDataTable.xsReportTable > table thead th, .xsDataTable.xsReportTable > table thead td { border-right: 1px solid #777777; font-size: 12px; } .xsDataTable.xsReportTable > table tbody .xsSectionHeader td, .xsDataTable.xsReportTable > table tbody .xsDataCellHeader td { border-right: 1px solid #777777; } .xsDataTable.xsReportTable > table th:last-child, .xsDataTable.xsReportTable > table td:last-child { border-right: 0; } .xsDataTable.xsReportTable > table tr:nth-child(even) td { background: #f6f6f6; color: #1d252d; } .xsDataTable.xsReportTable > table tr.xsSectionHeader:nth-child(even) td { background: #333f48; color: #ffffff; } .xsDataTable.xsReportTable > table tr.xsSpacer td { background: none; border: 0; font-size: 0; } .xsDataTable.xsReportTable > table .xsDataHeader .xsHeaderLabel { font-size: 12px; border: 0; padding: 0; display: inline-block; text-decoration: underline; } /* -------------------------------- XS: DataTable EditTable ------------------------------- */ .xsDataTable.xsEditTable > table { border-collapse: collapse; border-spacing: 0; } .xsDataTable.xsEditTable > table thead th, .xsDataTable.xsEditTable > table thead td, .xsDataTable.xsEditTable > table tbody .xsSectionHeader td, .xsDataTable.xsEditTable > table tbody .xsDataCellHeader td { border-right: 1px solid #777777; } .xsDataTable.xsEditTable > table th:last-child, .xsDataTable.xsEditTable > table td:last-child { border-right: 0; } .xsDataTable.xsEditTable > table .xsSectionHeader td { padding: 6px; } .xsDataTable.xsEditTable > table .xsSectionHeader .xsHeaderLabel, .xsDataTable.xsEditTable > table .xsDataCellHeader .xsDataLabel { font-family: "cal-ws-bold"; } .xsDataTable.xsEditTable > table .xsDataHeader th, .xsDataTable.xsEditTable > table .xsDataHeader td { background: #f6f6f6; border-right: 1px solid #ffffff; color: #1d252d; padding: 6px; } .xsDataTable.xsEditTable > table .xsDataHeader th:last-child, .xsDataTable.xsEditTable > table .xsDataHeader td:last-child { border-right: 0; } .xsDataTable.xsEditTable > table .xsDataHeader .xsHeaderLabel { font-size: 12px; border: 0; padding: 0; display: inline-block; text-decoration: underline; } .xsDataTable.xsEditTable > table thead + tbody > tr:first-child > td, .xsDataTable.xsEditTable > table .xsSectionHeader + tr > td, .xsDataTable.xsEditTable > table .xsDataHeader + tr > td { padding-top: 6px; } .xsDataTable.xsEditTable > table tbody > tr > td { padding: 0 6px 6px; } .xsDataTable.xsEditTable > table .xsSpacer td { padding: 0 6px 6px; } /* -------------------------------- XS: DataTable OpenEditTable ------------------------------- */ /* TXDO: CXJH: Review */ /* -------------------------------- XS: Admin Settings: OptionPanel ------------------------------- */ .xsOptionEditData .xsTabPanel { margin: 6px; } .xsOptionEditData .xsHeaderLabel, .xsOptionEditData .xsDataLabel { text-transform: capitalize; } .xsDataTable.xsOptionPanel > table { border-collapse: collapse; border-spacing: 0; } .xsOptionPanel .xsOptionSetHead { display: none; } .xsOptionPanel .xsOptionSetHead, .xsOptionPanel .xsOptionGroupHead { cursor: pointer; } .xsOptionSetBody tr.xsOptionGroupHead { border-collapse: separate; border-spacing: 1px; } .xsOptionPanel td { padding: 6px; } .xsOptionPanel .xsSectionHeader td { background: #333f48; color: #ffffff; border-top: 1px solid #777777; border-left: 1px solid #777777; } .xsOptionPanel .xsSectionHeader td:first-child, .xsOptionPanel .xsSectionHeader td:last-child { border-left: 0; } .xsOptionPanel .xsSectionHeader .xsHeaderLabel { font-size: 12px; } .xsDataTable.xsOptionPanel textarea { min-height: 60px; overflow-y: scroll; overflow-x: auto; } /* NOTE: .xsOptionHintData .xfi hidden until decision to use */ .xsOptionHintData .xfi { margin-right: 4px; display: none; } .xsOptionHintData td { background: #ffffdf; white-space: normal; } /* -------------------------------- XS: HelpPanel ------------------------------- */ .xsHelpPanel, .xsDataTable td.xsHelpPanel { white-space: normal; } .xsHelpPanel .xsDataTable { padding-left: 20px; } .xsHelpPanel ol { padding-left: 40px; } .xsHelpPanel .xsDataTable thead th, .xsHelpPanel .xsDataTable thead td { background: none; color: #1d252d; } .xsHelpPanel table thead th, .xsHelpPanel table thead td { text-decoration: underline; } .xsHelpPanel pre { padding: 6px 6px 6px 40px; } .xsHelpPanel .xsHelpTerm { font-family: cal-ws-italic; margin-left: 12px; margin-right: 12px; } /* -------------------------------- XS: Grid ------------------------------- */ .xsGrid { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .xsGrid tr { cursor: pointer; } /* -------------------------------- XS: Tab ------------------------------- */ .xsTabbar { vertical-align: bottom; } .xsTabbar > button { /*vertical-align: super;*/ } .xsTabNav { display: inline-block; list-style: none; white-space: nowrap; /*vertical-align: bottom;*/ margin-bottom: -1px; padding: 0; } .xsTabNavItem { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor: pointer; margin: 0; float: left; text-align: center; border: 1px solid transparent; border-bottom: 0; } .xsTabPanel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* -------------------------------- XS: Page ------------------------------- */ .xsPage { position: relative; line-height: 0; display: inline-block; background: #ffffff; vertical-align: top; } .xsPage { -moz-box-shadow: 0px 1px 2px 0px #5b6770; -webkit-box-shadow: 0px 1px 2px 0px #5b6770; box-shadow: 0px 1px 2px 0px #5b6770; } .xsPage:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid transparent; } .xsPage:hover:before, .xsPage.xi-selected:before { border-color: #4298b5; } .xsPage.xi-active:before { border-color: #b7312c; } /* -------------------------------- Logon ------------------------------- */ .xsAppLogon { width: 960px; } #xpAppLogonBody { background: #f5f5f5; } .xsAppLogonBody { color: #666666; } .xsAppLogonBox { background: #ffffff; padding: 24px; } .xsAppLogonForm { background: #f5f5f5; display: table-cell; margin: 0 40px 25px 0; min-width: 254px; padding: 25px; width: 300px; } /*.xsAppLogonValidate td { vertical-align: top; padding-bottom: 2px; }*/ .xsAppLogonForm button { background: #b7312c; border: 1px solid #b7312c; color: #ffffff; vertical-align: top; } .xsAppLogonForm label { font-size: 1.1em; } .xsAppLogonTerms label { display: block; padding-left: 16px; margin-top: -14px; line-height: 1.3; } .xsAppLogonTermsLink { font-family: "cal-ws-bold"; color: #e74c3c; cursor: pointer; } .xsLogonAccordTermsLinkContainer .xsHeaderLabel { font-family: "cal-ws-bold"; font-size: 15px; margin-bottom: 15px; } .xsAppLogonBox input { /*margin: 2px 0 16px;*/ margin: 0 0 16px; } .xsAppLogonBox input.xi-dataerror { border: 1px solid #e74c3c; } .xsAppLogonPwd { position: relative; } .xsAppLogonPwd .xq-pwd { position: absolute; top: 5px; right: 5px; cursor: pointer; } .xsAppLogonPwd .xq-pwd + input { padding-right: 22px; } .xsAppLogonBox input[type="checkbox"] { margin: 0; padding: 0; width: auto; } .xsAppLogonCaptchaLabel { margin-bottom: 2px; } /*.xsAppLogonCaptcha td { vertical-align: top; padding-bottom: 2px; }*/ /* .xsAppLogonCaptcha { display: inline-block; margin-bottom: 16px; white-space: nowrap; width: 100%; } .xsAppLogonCaptcha.xi-nocaptcha { margin-top: 6px; } .xsAppLogonCaptcha.xi-nocaptcha > div { float: left; } .xsAppLogonCaptcha.xi-nocaptcha > div.xsSubmitPanel { float: right; }*/ .xsAppLogonCaptcha span { text-align: center; padding: 0 4px; vertical-align: top; margin-top: 5px; } .xsAppLogonCaptcha input { width: 45px; /*63px; /*45px;*/ /*margin-bottom: 0;*/ display: inline-block; text-align: center; } .xsAppLogonSubmitPanel { vertical-align: top; padding-top: 15px; } /*.xsAppLogonCaptcha .xbText.xsSubmit { float: right; margin: 0; padding: 4px 8px; }*/ .xsCheckbox { margin-bottom: 8px; } .xsCheckbox label { font-family: "cal-ws-regular"; vertical-align: middle; text-transform: none; margin-left: 2px; } .xsPasswordRecovery { margin-left: 2px; } .xsPasswordRecovery .xfi { vertical-align: middle; } .xsPasswordRecovery .xsLabel { font-family: "cal-ws-bold"; color: #e74c3c; margin-left: 5px; position: relative; white-space: nowrap; cursor: pointer; vertical-align: middle; } .xsClearLogin { margin-top: 5px; } .xsClearLogin .xfi { font-size: 13px; margin-left: 1px; } .xsClearLogin .xsLabel { font-size: 1.1em; margin-left: 4px; cursor: pointer; } .xsAppLogonNotice { display: table-cell; min-width: 150px; padding-left: 24px; vertical-align: top; } .xsAppLogonContact { font-family: "cal-ws-bold"; margin-top: 10px; white-space: nowrap; line-height: 2; } .xsAppLogonContactInfo span { font-family: "cal-ws-bold"; line-height: 2; } .xsAppLogonContactInfo a { color: #e74c3c; margin-left: 4px; } /* .xsAppLogonProductInfo { font-size: x-small; border-top: 1px solid #9ea2a2; margin-top: 10px; margin-bottom: 0; padding-bottom: 0; } .xsAppLogonMsgPanel { margin: 8px 0 24px; } .xsAppLogonMsgLabel { color: #e74c3c; } */ .xsAppLogonInfoPanel { font-size: x-small; border-top: 1px solid #9ea2a2; margin-top: 10px; margin-bottom: 0; padding-bottom: 0; } .xsAppLogonInfoPanel .xsMeta { vertical-align: middle; } .xsAppLogonInfoPanel .xsAppProductInfo { display: table-cell; float: left; } .xsAppLogonInfoPanel .xsAppPageTime { display: table-cell; float: right; } .xsAppLogonPolicy { padding: 24px 0 0; } .xsAppLogonNotice p, .xsAppLogonPolicy p { font-family: "cal-ws-bold"; font-size: 13px; text-align: justify; color: #999999; margin-bottom: 16px; line-height: normal; } .xsAppLogon .xsTracePanel tr.xsCtlPanel { vertical-align: top; } .xsAppLogon .xsTracePanel textarea { overflow: auto; width: 100%; height: 50px; min-height: 300px; } /* -------------------------------- XB: Buttons ------------------------------- */ .xbIcon { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor: pointer; border: 1px solid transparent; background: none; font-style: normal; text-align: center; } .xbIcon:hover:not([disabled]) { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; } .xwpDock:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); -moz-opacity: 0.9; -khtml-opacity: 0.9; opacity: 0.9; } .xbText { cursor: pointer; } input.xbText, button.xbText { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-family: "cal-ws-bold"; font-size: 12px; background: transparent; padding: 4px 8px; color: #1d252d; } .xbText:hover:not([disabled]) { } .xbText.xsPrimary, .xbText.xsBrowse, .xbText.xsSubmit { background: #b7312c; border: 1px solid #b7312c; color: #ffffff; } .xbText:disabled, .xbText:disabled:hover, .xsPrimaryMenu .xsPrimary:disabled, .xsPrimaryMenu .xsPrimary:disabled:hover { background: none; border: 1px solid #dddddd; color: #dddddd; } .xsToolbar .xbText, .xbText.xbSmall { padding: 4px 6px; } input[type="button"].xbText { font-family: "cal-ws-bold"; font-size: 12px; cursor: pointer; width: auto; } a.xbText { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 0; cursor: pointer; width: auto; } .xbText .xfi { margin-right: 3px; } .xsPrimaryMenu .xbText .xfi { margin-right: 0; } .xsBtnGrpVert { display: inline-block; } .xsBtnGrpVert > div, .xsBtnGrpVert > div [type="button"].xbText { width: 100%; } .xsBtnGrpVert > div [type="button"].xbText { margin-bottom: 6px; } .xsBtnGrpVert .xsDivH.xsSpacer { margin-top: 8px; margin-bottom: 8px; } thead td .xsDivV.xsSpacer, .xsHeader.xsToolbar .xsDivV.xsSpacer { margin-left:8px; margin-right:8px; } .xsMenu > .xbText { margin-left: 2px; } /* -------------------------------- XS: SwapPanel ------------------------------- */ .xsSwapPanel { display: inline-block; } /* -------------------------------- XDOC: Admin ------------------------------- */ .xpAdmObjEdit .xsObjEditPanel .xsDataLabel { text-transform: capitalize; } .xsAdminMenuDataPanel .xsMenuItem .xsLabel { text-transform: capitalize; } .xsDataSearch .xsDataLabel { text-transform: capitalize; } .xsProcExe .xsDataLabel { text-transform: capitalize; } .xsProcExe .xsSectionHeader .xsProcTask span.xsLabel { text-transform: uppercase; } .xsPickListPanel .xsContextListSelect { vertical-align: middle; } /* -------------------------------- XS: Helpers ------------------------------- */ .xsFrameBorder { border: 1px solid #9ea2a2; } .xsMenu { white-space: nowrap; text-align: right; } hr, .xsDivH { border: 0; border-top: 1px solid #9ea2a2; } .xsDivH { width: 100%; } .xsDivV { border: 0; border-left: 1px solid #9ea2a2; height: 14px; } .xsHeaderDash .xsDivV { margin: 0 4px; background: #ffffff; } .xsLink, .xsLinkText { cursor: pointer; } .xsLinkText { text-decoration: underline; white-space: nowrap; } .xsMeta { font-family: cal-ws-italic; font-size: smaller; text-overflow: ellipsis; vertical-align: text-bottom; overflow: hidden; display: inline-block; line-height: normal; } .xsMetaHint { font-size: smaller; text-transform: none; } .xsWrapAuto { white-space: normal; } .xsWrapOff { white-space: nowrap; } .xsWrapForce { word-wrap: break-word; } /* Uppercase first letter */ .xsCapFirst { text-transform: capitalize; } /* -------------------------------- XI: xi-selected, xi-active, xi-required, xi-invalid, xi-valid, xi-readonly ------------------------------- */ input:-moz-read-only { color: #777777; } input[readonly="readonly"] { background: #f5f5f5; border: 1px solid #e5e5e5; color: #777777; cursor: default; } textarea[readonly="readonly"] { background: #f5f5f5; border: 1px solid #e5e5e5; color: #777777; cursor: default; } :disabled, button:disabled, button[disabled], input[disabled], select[disabled], .xi-disabled { background: #f5f5f5; border: 1px solid #e5e5e5; color: #777777; cursor: default; } .xsDataValue.xi-readonly { background: #f5f5f5; border: 1px solid #e5e5e5; color: #777777; cursor: default; } .xi-valid, .xi-success, .xsLabel.xi-valid, .xsHeaderLabel.xi-valid, .xsDataLabel.xi-valid, .xsDataValue.xi-valid, .xsDataMsg.xi-valid, .xsLabel.xi-success, .xsHeaderLabel.xi-success, .xsDataLabel.xi-success, .xsDataValue.xi-success, .xsDataMsg.xi-success { color: #658d1b; } .xi-invalid { border: 1px solid #b7312c; } .xi-alert, .xi-error, .xsLabel.xi-invalid, .xsHeaderLabel.xi-invalid, .xsDataLabel.xi-invalid, .xsDataMsg.xi-invalid, .xsLabel.xi-error, .xsHeaderLabel.xi-error, .xsDataLabel.xi-error { color: #b7312c; border: 0; } .xsDataValue.xi-error, .xsDataMsg.xi-error, .xsDataField.xi-error, .xsReportTable .xi-required { color: #b7312c; } .xsDataMsg.xi-warn { color: #9f6000; } .xi-invalid, .xi-required { /*color: #b7312c;*/ } .xsDataIndAtt { position: relative; } /* NOTE: alternate xi-required stlye (asterisk) */ /* .xi-required:before { content: "*"; position: absolute; top: 8px; bottom: 0; left: -6px; color: #b7312c; }*/ .xsDataIndAtt.xi-required:before, .xsDataTable:not(.xsReportTable) .xsDataFieldPanel .xi-required:before, .xsDataTable .xsDataFieldPanel .xi-required:before { content: ''; border-top: 6px solid #b7312c; border-right: 6px solid transparent; position: absolute; top: 0; left: 0; z-index: 1; } /* NOTE: alternate xi-requiredgroup stlye (upper left triangle) */ .xsDataIndAtt.xi-requiredgroup:before, .xsDataTable:not(.xsReportTable) .xsDataFieldPanel .xi-requiredgroup:before, .xsDataTable .xsDataFieldPanel .xi-requiredgroup:before { content: ''; border-top: 6px solid #4298b5; border-right: 6px solid transparent; position: absolute; top: 0; left: 0; z-index: 1; } /* -------------------------------- Visibility ------------------------------- */ .xsVisibleOff { visibility: hidden; } .xsDisplayOff { display: none; } /* -------------------------------- Firefox Overrides ------------------------------- */ @-moz-document url-prefix() { select { padding: 0 4px; } .xbIcon { margin-left: 0px; } .xsDropdown.xbIcon { margin-left: -4px; } .xsSwapBtn { margin-right: 0px; } } /* -------------------------------- Clearfix ------------------------------- */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } /* -------------------------------- ----------------------------------- -- States: ----------------------------------- ------------------------------- */ /* no mouse highlight */ /* { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } */