<%--****************************************************************************--%>
<%-- Styles for special portlets --%>
<%-- These styles are reserved for IBM administrative portlets. --%>
<%-- General portlets should not use these styles as they are subject to change.--%>
<%--****************************************************************************--%>
<%-- ADMINISTRATION PORTLETS --%>
<%-- Header bar and task manager selected tab--%>
.wpsTableAdminHead {
color: #333333;
background-color: #CCCCCC;
}
<%-- Color for separator lines - matches icon background --%>
.wpsAdminHeadSeparator {
background-color: #999999;
height: 1px;
}
<%-- Status Message display - New in v5 --%>
.wpsStatusMsg {
color: #000000;
background-color: #E7EFF7; <%--#E2E7F0;--%>
margin: 0px;
border: solid 2px #ABCACA; <%-- #88A4D7; --%>
-moz-border-radius: 8px;
}
<%-- WELCOME/INSTRUCTION PORTLET --%>
<%-- Text for the welcome/instruction portlet - New in v5 --%>
<%-- General portlets should not use this style since it may be deleted in a future release. --%>
.wpsInstructionText {
color: #6B6B6B;
margin: 0.6em 0px 0px 0px;
}
<%-- Text that is emphasized in the welcome/instruction portlet - New in v5 --%>
<%-- General portlets should not use this style since it may be deleted in a future release. --%>
.wpsInstructionText em {
font-weight: bold;
font-style: normal;
color: #8A59A6;
}
<%-- Reduces space between paragraphs in the welcome/instruction portlet - New in v5 --%>
<%-- General portlets should not use this style since it may be deleted in a future release. --%>
.wpsInstructionHeadText {
font-weight: bold;
font-size: ${requestScope.cssRules.fontSize.normal};
color: #405380;
}
<%--****************************************************************************--%>
<%-- Styles used in IBM portlets --%>
<%-- --%>
<%--****************************************************************************--%>
<%-- INDENT STYLES - New in v5 --%>
<%-- Padding left of 4px - New in v5 --%>
.wpsIndentXSmall {
padding-${requestScope.cssRules.bidiLeft}: 4px;
}
<%-- Padding left of about 8px - half the width of small size icon - New in v5 --%>
.wpsIndentSmall {
padding-${requestScope.cssRules.bidiLeft}: 8px;
}
<%-- Padding left of 16px - width of small size icon - New in v5 --%>
.wpsIndentMedium {
padding-${requestScope.cssRules.bidiLeft}: 16px;
}
<%-- Padding left of 32px - width of normal size icon - New in v5 --%>
.wpsIndentLarge {
padding-${requestScope.cssRules.bidiLeft}: 32px;
}
<%-- Padding left of about 48px - New in v5 --%>
.wpsIndentXLarge {
padding-${requestScope.cssRules.bidiLeft}: 48px;
}
<%-- PORLTET ACTION BUTTONS --%>
<%-- Text for tasks on header bar. Note that the text color is hidden from
legacy browsers for consistency, not because it can't handle the attribute.
New in v5 --%>
.wpsTaskIconText {
font-weight: bold;
color: #000000;
white-space: nowrap;
}
<%-- Text for disabled tasks on header bar. Note that the text color is hidden from
legacy browsers for consistency, not because it can't handle the attribute.
New in v5 --%>
.wpsTaskDisabledIconText {
font-weight: bold;
white-space: nowrap;
color: #888888;
}
<%--
Table surrounding the task on header bar. This style is present to disable the border="1" in
the markup which was necessary to support legacy browsers.
New in v5 --%>
.wpsTaskIconBorderTable, .wpsTaskDisabledIconBorderTable {
border: 0px;
}
<%-- Background behind the task icon text. Note that the background color is hidden from
legacy browsers for consistency, not because it can't handle the attribute.
New in v5 --%>
.wpsTaskIconTextBackground {
background-color: #DDDDDD;
background-image: url("./colors/default/ButtonBackground.gif");
background-repeat: repeat-x;
background-position: ${requestScope.cssRules.bidiLeft} center;
border: 1px solid #919191;
padding: 2px 4px;
margin: 0px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
<%-- Background behind the disabled task icon text. Note that the background color is hidden from
legacy browsers for consistency, not because it can't handle the attribute.
New in v5 --%>
.wpsTaskDisabledIconTextBackground {
background-color: #DDDDDD;
background-image: url("./colors/default/ButtonBackground.gif");
background-repeat: repeat-x;
background-position: ${requestScope.cssRules.bidiLeft} center;
border: 1px solid #919191;
padding: 2px 4px;
margin: 0px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
<%-- Text labels for icons in portlet body - New in v5 --%>
.wpsDialogIconText {
color: #000000;
}
<%-- Text labels for disabled icons in portlet body --%>
.wpsDialogDisabledIconText {
color: #888888;
}
<%-- Background for dialog icon - New in v5 --%>
.wpsDialogIconBackground {
text-align: center;
vertical-align: middle;
background-color: #DDDDDD;
background-image: url("./colors/default/DialogIconBackground.gif");
background-repeat: repeat-x;
background-position: ${requestScope.cssRules.bidiLeft} center;
border-top: 1px solid #919191;
border-${requestScope.cssRules.bidiRight}: 0px none #919191;
border-bottom: 1px solid #919191;
border-${requestScope.cssRules.bidiLeft}: 1px solid #919191;
padding: 0px 0px;
margin: 0px;
}
<%-- Background for dialog icon text - New in v5 --%>
.wpsDialogIconTextBackground {
text-align: center;
vertical-align: middle;
background-color: #DDDDDD;
background-image: url("./colors/default/DialogIconTextBackground.gif");
background-repeat: repeat-x;
background-position: ${requestScope.cssRules.bidiLeft} center;
border-top: 1px solid #919191;
border-${requestScope.cssRules.bidiRight}: 1px solid #919191;
border-bottom: 1px solid #919191;
border-${requestScope.cssRules.bidiLeft}: 0px none #919191;
padding: 2px 4px;
margin: 0px;
white-space: nowrap;
}
<%-- Background for disabled dialog icon - New in v5 --%>
.wpsDialogDisabledIconBackground {
text-align: center;
vertical-align: middle;
background-color: #DDDDDD;
background-image: url("./colors/default/DialogIconBackground.gif");
background-repeat: repeat-x;
background-position: ${requestScope.cssRules.bidiLeft} center;
border-top: 1px solid #919191;
border-${requestScope.cssRules.bidiRight}: 0px none #919191;
border-bottom: 1px solid #919191;
border-${requestScope.cssRules.bidiLeft}: 1px solid #919191;
padding: 0px 0px;
margin: 0px;
}
<%-- Background for dialog icon text - New in v5 --%>
.wpsDialogDisabledIconTextBackground {
text-align: center;
vertical-align: middle;
background-color: #DDDDDD;
background-image: url("./colors/default/DialogIconTextBackground.gif");
background-repeat: repeat-x;
background-position: ${requestScope.cssRules.bidiLeft} center;
border-top: 1px solid #919191;
border-${requestScope.cssRules.bidiRight}: 1px solid #919191;
border-bottom: 1px solid #919191;
border-${requestScope.cssRules.bidiLeft}: 0px none #919191;
padding: 2px 4px;
margin: 0px;
white-space: nowrap;
}
<%-- Size of icon on a dialog button - New in v5 --%>
.wpsDialogIcon {
width: 16px;
height: 16px;
}
<%-- Button bar area at top and bottom of portlet - New in v5 --%>
.wpsButtonBarTop, .wpsButtonBarBottom {
background-color: #DFDFDF;
}
<%-- PORTLET BACKGROUNDS AND TEXT STYLES --%>
<%-- Standard background for portlet --%>
.wpsPortletBack {
background-color: #FFFFFF;
}
<%-- Background for portlet in edit and configure mode --%>
.wpsEditBack, .wpsConfigureBack {
background-color: #FFFFFF;
}
<%-- Panel background for portion of advanced options - New in v5 --%>
.wpsAdvancedOptions {
background-color: #e4e4e4;
border: solid 1px #4A4A4A;
margin-${requestScope.cssRules.bidiLeft}: 10px;
}
<%-- Background with emphasis color for portlet --%>
.wpsPortletColorBack {
background-color: #CCCCCC;
}
<%-- Text for header in standard portlet and portlet in edit mode --%>
.wpsPortletHead, .wpsEditHead {
font-weight: bold;
color: #333333;
}
<%-- Text in body of standard portlet and portlet in edit mode - New in v5 --%>
.wpsPortletText, .wpsEditText, .wpsPortletSmText, .wpsEditSmText, .wpsPortletTinyText {
font-family: ${requestScope.cssRules.fontFamilySansSerif};
font-size: ${requestScope.cssRules.fontSize.normal};
color: #333333;
}
<%-- Text for copyright information - New in v5 --%>
.wpsCopyrightText {
font-size: ${requestScope.cssRules.fontSize.small};
color: #999999;
}
<%-- Main portlet body style --%>
.wpsPortletBody {
}
<%-- Text in row of table header --%>
.wpsTableHead {
font-weight: bold;
color: #989898;
text-align: ${requestScope.cssRules.bidiLeft};
}
<%-- Spacing around table header text --%>
.wpsTableHead th {
padding: 3px;
}
<%-- Standard text within table - New in v5 --%>
.wpsTableText {
}
<%-- Standard table row --%>
.wpsTableRow, .wpsTableNrmRow {
color: #333333;
background-color: #ffffff;
}
<%-- Text in a selected cell range - New in v5 --%>
.wpsTableSelectedRow {
color: #333333;
background-color: #c5d1de;
}
<%-- Shaded table row - used to alternate row colors with standard row - New in v5 --%>
<%-- For the v5 look, we have intentionally disabled alternating shaded table rows because
we have lines between the rows. However, Netscape 4.x cannot display borders
properly so we still use the alternating shaded rows on legacy browsers. --%>
.wpsTableShdRow {
color: #333333;
}
<%-- Backward compatibility style to get lines between rows for WPS 4.x portlet tables - New in v5 --%>
<%-- Do not specify anything in these styles that you don't have to specify. Because of CSS priorities,
these styles will override any CSS on the actual <td> tag that isn't marked ! important. --%>
.wpsTableRow td, .wpsTableNrmRow td, .wpsTableShdRow td {
border-width: 1px 0px 0px 0px;
border-style: solid;
border-color: #aaaaaa;
padding: 3px;
}
<%-- Text links in table header row --%>
.wpsTableHeadLink, .wpsTableHeadLink:visited, .wpsTableHeadLink:hover, .wpsTableHeadLink:active {
font-weight: normal;
color: #000000;
}
<%-- Top-level table tag of table - New in v5 --%>
.wpsTable {
border-width: 1px;
border-style: solid;
border-color: #aaaaaa;
}
.wpsTable td {
vertical-align:top;
}
<%-- Styles for left, middle and right cells of the header row - New in v5 --%>
.wpsTableHeadStart, .wpsTableHeadMiddle, .wpsTableHeadEnd {
font-weight: normal;
color: #000000;
text-align: ${requestScope.cssRules.bidiLeft};
background-color: #ffffff;
border-width: 0px 0px 0px 0px;
border-style: none;
border-color: #aaaaaa;
}
<%-- Styles for left, middle and right cells of the header row where the text is center aligned. - New in v5 --%>
.wpsTableHeadStartAlignCenter, .wpsTableHeadMiddleAlignCenter, .wpsTableHeadEndAlignCenter {
font-weight: normal;
color: #000000;
text-align: center;
background-color: #ffffff;
border-width: 0px 0px 0px 0px;
border-style: none;
border-color: #aaaaaa;
}
<%-- Styles for the left, middle and right cells of the header row where the column contains numeric data. - New in v5 --%>
.wpsTableHeadStartNumeric, .wpsTableHeadMiddleNumeric, .wpsTableHeadEndNumeric {
font-weight: normal;
color: #000000;
text-align: ${requestScope.cssRules.bidiRight};
background-color: #ffffff;
border-width: 0px 0px 0px 0px;
border-style: none;
border-color: #aaaaaa;
}
<%-- Styles for the left, middle, and right cells of a data row. - New in v5 --%>
<%-- ! important is on some of these attributes to override the backward compatibility styles
.wpsTableRow td, .wpsTableNrmRow td, .wpsTableShdRow td --%>
.wpsTableDataStart, .wpsTableDataMiddle, .wpsTableDataEnd {
text-align: ${requestScope.cssRules.bidiLeft};
border-width: 1px 0px 0px 0px ! important;
border-style: solid ! important;
border-color: #aaaaaa ! important;
}
<%-- Styles for the left, middle and right cells of a data row where the text is center aligned. - New in v5 --%>
<%-- ! important is on some of these attributes to override the backward compatibility styles
.wpsTableRow td, .wpsTableNrmRow td, .wpsTableShdRow td --%>
.wpsTableDataStartAlignCenter, .wpsTableDataMiddleAlignCenter, .wpsTableDataEndAlignCenter {
text-align: center;
border-width: 1px 0px 0px 0px ! important;
border-style: solid ! important;
border-color: #aaaaaa ! important;
}
<%-- Styles for the left, middle and right cells of a data row where the data in the column is numeric. - New in v5 --%>
<%-- ! important is on some of these attributes to override the backward compatibility styles
.wpsTableRow td, .wpsTableNrmRow td, .wpsTableShdRow td --%>
.wpsTableDataStartNumeric, .wpsTableDataMiddleNumeric, .wpsTableDataEndNumeric {
text-align: ${requestScope.cssRules.bidiRight};
border-width: 1px 0px 0px 0px ! important;
border-style: solid ! important;
border-color: #aaaaaa ! important;
}
<%-- Styles for the top-level table tag and the cells containing the header, footer, and table body. - New in v5 --%>
.wpsPagingTable, .wpsPagingTableHeader, .wpsPagingTableFooter, .wpsPagingTableBody {
border: 0px;
}
<%-- The size of icons in the paging header or footer - New in v5 --%>
.wpsPagingTableHeaderIcon, .wpsPagingTableFooterIcon {
width: 16px;
height: 16px;
}
<%-- The leftmost cell of the paging table header - New in v5 --%>
.wpsPagingTableHeaderStart {
background-color: #F0F0F0;
border-top: 1px solid #aaaaaa;
border-${requestScope.cssRules.bidiRight}: 0px none #aaaaaa;
border-bottom: 0px none #aaaaaa;
border-${requestScope.cssRules.bidiLeft}: 1px solid #aaaaaa;
}
<%-- All cells in the middle of the paging table header - New in v5 --%>
.wpsPagingTableHeaderMiddle {
background-color: #F0F0F0;
border-top: 1px solid #aaaaaa;
border-${requestScope.cssRules.bidiRight}: 0px none #aaaaaa;
border-bottom: 0px none #aaaaaa;
border-${requestScope.cssRules.bidiLeft}: 0px none #aaaaaa;
}
<%-- The rightmost cell of the paging table header - New in v5 --%>
.wpsPagingTableHeaderEnd {
background-image: url("./colors/default/PagingTableTopRight${requestScope.cssRules.bidiImageRTL}.gif");
background-repeat: no-repeat;
background-position: ${requestScope.cssRules.bidiRight} top;
background-color: transparent;
}
<%-- The leftmost cell of the paging footer - New in v5 --%>
.wpsPagingTableFooterStart {
background-color: #F0F0F0;
border-top: 0px none #aaaaaa;
border-${requestScope.cssRules.bidiRight}: 0px none #aaaaaa;
border-bottom: 1px solid #aaaaaa;
border-${requestScope.cssRules.bidiLeft}: 1px solid #aaaaaa;
}
<%-- All cells in the middle of the paging table footer - New in v5 --%>
.wpsPagingTableFooterMiddle {
background-color: #F0F0F0;
border-top: 0px none #aaaaaa;
border-${requestScope.cssRules.bidiRight}: 0px none #aaaaaa;
border-bottom: 1px solid #aaaaaa;
border-${requestScope.cssRules.bidiLeft}: 0px none #aaaaaa;
}
<%-- The rightmost cell of the paging table footer - New in v5 --%>
.wpsPagingTableFooterEnd {
background-image: url("./colors/default/PagingTableBottomRight${requestScope.cssRules.bidiImageRTL}.gif");
background-repeat: no-repeat;
background-position: ${requestScope.cssRules.bidiRight} bottom;
background-color: transparent;
}
<%-- Added to the rightmost cell of the paging table header (only if no data in paging header) - New is v5.1 --%>
.wpsPagingTableHeaderEmpty {
height:7px;
width:7px;
line-height:1px;
}
<%-- new style to allow for a second detail line in a row - New in v5.1 --%>
.wpsTableRowDetail td {
border-width:0px;
text-align: ${requestScope.cssRules.bidiLeft};
border-width: 0px ! important;
padding:2px 3px 5px 3px;
}
<%-- new style for a section header row - New in v5.1 --%>
.wpsTableSectionHead {
font-weight: bold;
color: #000000;
text-align: ${requestScope.cssRules.bidiLeft};
}
<%-- new style for a section header row - New in v5.1 --%>
.wpsTableSectionHead th {
border-width: 1px 0px 0px 0px;
border-style: solid;
border-color: #aaaaaa;
padding: 3px 0 3px 5px;
}
<%-- new style to make the border of the top row stronger - New in v5.1 --%>
.wpsTableTopRow td {
border-color: #aaaaaa ! important;
}
<%-- Added to the rightmost cell of the paging table header (only if no data in paging header) - New is v5.1 --%>
.wpsPagingTableHeaderEmpty {
height: 7px;
width: 7px;
line-height: 1px;
}
<%-- new style to allow for a second detail line in a row - New in v5.1 --%>
.wpsTableRowDetail td {
border-width: 0px;
text-align: ${requestScope.cssRules.bidiLeft};
border-width: 0px ! important;
padding: 2px 3px 5px 3px;
}
<%-- PORTLET FORM-RELATED TEXT STYLES --%>
<%-- Size of Radio buttons and Checkboxes - New in v5.1 --%>
.wpsCompactCheckBox, .wpsCompactRadioButton {
height: 16px;
margin-top: 0px;
margin-bottom: 0px;
}
<%-- Text for form entryfields - New in v5 --%>
.wpsEditField{
border: 1px solid #999999;
}
<%-- Text for form buttons - New in v5 --%>
.wpsButtonText{
font-weight: bold;
color: #000000;
background-color: #DDDDDD;
background-image: url("./colors/default/ButtonBackground.gif");
background-repeat: repeat-x;
background-position: ${requestScope.cssRules.bidiLeft} center;
border: 1px solid #919191;
padding: 2px 4px;
margin: 0px;
text-align: center;
}
<%-- Text for disabled form buttons - New in v5 --%>
.wpsButtonDisabledText {
font-weight: bold;
color: #888888;
background-color: #DDDDDD;
background-image: url("./colors/default/ButtonBackground.gif");
background-repeat: repeat-x;
background-position: ${requestScope.cssRules.bidiLeft} center;
border: 1px solid #919191;
padding: 2px 4px;
margin: 0px;
text-align: center;
}
<%-- Text for form browse button <input type="file" ...> - New in v5 --%>
.wpsBrowseButton {
}
<%-- Text for form element labels - New in v5 --%>
<%-- The wpsRequiredLabelText style should also used on the text explaining that the field is required even if it is in a footnote. --%>
.wpsLabelText, wpsRequiredLabelText {
color: #333333;
}
<%-- Strong text in form element labels where a value is required - New in v5 --%>
.wpsRequiredLabelText strong {
color: #ff0000;
}
<%-- Text for form element descriptions - New in v5 --%>
.wpsDescriptionText {
color: #808080;
}
<%-- PORTLET MESSAGE AND INLINE HELP TEXT STYLES --%>
<%-- Text for error messages - New in v5 --%>
.wpsFieldErrorText {
color: #000000;
}
<%-- Text for warning messages - New in v5 --%>
.wpsFieldWarningText {
color: #000000;
}
<%-- Text for success messages - New in v5 --%>
.wpsFieldSuccessText {
color: #000000;
}
<%-- Text for information messages -New in v5 --%>
.wpsFieldInfoText {
color: #000000;
}
<%-- Text for inline help information - New in v5 --%>
.wpsInlineHelpText {
color: #666666;
}
<%-- Monospaced text for listboxes and other fields where columns need to line up - New in v5 --%>
.wpsFieldMonospaced {
font-family: ${requestScope.cssRules.fontFamilyMonospace};
font-size: ${requestScope.cssRules.fontSize.normal};
}
<%-- Text to flag a line item such as with the text "new" - New in v5.1 --%>
.wpsFlagText {
font-size: ${requestScope.cssRules.fontSize.small};
color: #FF0000;
}
<%-- PORTLET TABS --%>
<%-- Bar area on which tabs are displayed - New in v5 --%>
.wpsPortletTabBar {
}
<%-- Area separating the tabs from the items below the tabs - New in v5 --%>
.wpsPortletTabBarSeparator {
background: url("./colors/default/portletTabSeparator.gif");
background-repeat: repeat-x;
background-color: #95a5b9;
margin: 0px;
padding: 0px;
height: 3px;
}
<%-- The table displaying all of the tabs - New in v5 --%>
.wpsPortletTabSet {
border: 0px;
background-color: transparent;
}
<%-- The area of the tab set where the unselected tabs are displayed - New in v5 --%>
.wpsPortletTab {
border: 0px;
background-color: transparent;
}
<%-- The area of the tab set where the selected tab is displayed - New in v5 --%>
.wpsPortletSelectedTab {
border: 0px;
background-color: transparent;
}
<%-- The top left cell of a 9 x 9 table displaying the unselected tab - New in v5 --%>
.wpsPortletTabTopStart {
background-image: url("./colors/default/PortletTabTopLeft${requestScope.cssRules.bidiImageRTL}.jpg");
background-repeat: no-repeat;
background-position: bottom ${requestScope.cssRules.bidiLeft};
padding: 0px 2px 0px 2px;
width: 5px;
height: 5px;
}
<%-- The top center cell of a 9 x 9 table displaying the unselected tab - New in v5 --%>
.wpsPortletTabTopCenter {
background-image: url("./colors/default/PortletTabTopMiddle.jpg");
background-repeat: repeat-x;
background-position: bottom;
}
<%-- The top right cell of a 9 x 9 table displaying the unselected tab - New in v5 --%>
.wpsPortletTabTopEnd {
background-image: url("./colors/default/PortletTabTopRight${requestScope.cssRules.bidiImageRTL}.jpg");
background-repeat: no-repeat;
background-position: bottom ${requestScope.cssRules.bidiRight};
border-style: none;
background-color: transparent;
padding: 0px 2px 0px 2px;
width: 5px;
height: 5px;
}
<%-- The middle left cell of a 9 x 9 table displaying the unselected tab - New in v5 --%>
.wpsPortletTabMiddleStart {
background-image: url("./colors/default/PortletTabCenter.jpg");
background-repeat: repeat-x;
background-color: #FFFFFF;
border-top: 0px none #C0C0C0;
border-${requestScope.cssRules.bidiRight}: 0px none #C0C0C0;
border-bottom: 0px none #C0C0C0;
border-${requestScope.cssRules.bidiLeft}: 1px solid #C0C0C0;
}
<%-- The center cell of a 9 x 9 table displaying the unselected tab. The tab text is displayed in this cell. - New in v5 --%>
.wpsPortletTabMiddleCenter {
background-image: url("./colors/default/PortletTabCenter.jpg");
background-repeat: repeat-x;
background-color: #FFFFFF;
white-space: nowrap;
border-style: none;
}
<%-- The middle right cell of a 9 x 9 table displaying the unselected tab - New in v5 --%>
.wpsPortletTabMiddleEnd {
background-image: url("./colors/default/PortletTabCenter.jpg");
background-repeat: repeat-x;
background-color: #FFFFFF;
border-top: 0px none #C0C0C0;
border-${requestScope.cssRules.bidiRight}: 1px solid #C0C0C0;
border-bottom: 0px none #C0C0C0;
border-${requestScope.cssRules.bidiLeft}: 0px none #C0C0C0;
}
<%-- The bottom left cell of a 9 x 9 table displaying the unselected tab - New in v5 --%>
.wpsPortletTabBottomStart {
background-color: #FFFFFF;
border-top: 0px none #C0C0C0;
border-${requestScope.cssRules.bidiRight}: 0px none #C0C0C0;
border-bottom: 0px none #C0C0C0;
border-${requestScope.cssRules.bidiLeft}: 1px solid #C0C0C0;
width: 5px;
height: 5px;
}
<%-- The bottom center cell of a 9 x 9 table displaying the unselected tab - New in v5 --%>
.wpsPortletTabBottomCenter {
background-color: #FFFFFF;
border-style: none;
}
<%-- The bottom right cell of a 9 x 9 table displaying the unselected tab - New in v5 --%>
.wpsPortletTabBottomEnd {
background-color: #FFFFFF;
border-top: 0px none #C0C0C0;
border-${requestScope.cssRules.bidiRight}: 1px solid #C0C0C0;
border-bottom: 0px none #C0C0C0;
border-${requestScope.cssRules.bidiLeft}: 0px none #C0C0C0;
width: 5px;
height: 5px;
}
<%-- The top left cell of a 9 x 9 table displaying the selected tab - New in v5 --%>
.wpsPortletSelectedTabTopStart {
background-image: url("./colors/default/PortletSelectedTabTopLeft${requestScope.cssRules.bidiImageRTL}.jpg");
background-repeat: no-repeat;
background-position: bottom ${requestScope.cssRules.bidiLeft};
padding: 0px 2px 0px 2px;
width: 5px;
height: 5px;
}
<%-- The top center cell of a 9 x 9 table displaying the selected tab - New in v5 --%>
.wpsPortletSelectedTabTopCenter {
background-image: url("./colors/default/PortletSelectedTabTopMiddle.jpg");
background-repeat: repeat-x;
background-position: bottom;
border-top: 0px solid #AAC2E6;
border-${requestScope.cssRules.bidiRight}: 0px none #AAC2E6;
border-bottom: 0px none #AAC2E6;
border-${requestScope.cssRules.bidiLeft}: 0px none #AAC2E6;
}
<%-- The top right cell of a 9 x 9 table displaying the selected tab - New in v5 --%>
.wpsPortletSelectedTabTopEnd {
background-image: url("./colors/default/PortletSelectedTabTopRight${requestScope.cssRules.bidiImageRTL}.jpg");
background-repeat: no-repeat;
background-position: bottom ${requestScope.cssRules.bidiRight};
border-style: none;
background-color: transparent;
padding: 0px 2px 0px 2px;
width: 5px;
height: 5px;
}
<%-- The middle left cell of a 9 x 9 table displaying the selected tab - New in v5 --%>
.wpsPortletSelectedTabMiddleStart {
background-image: url("./colors/default/portletSelectedTabCenterMid.jpg");
background-repeat: repeat-x;
border-top: 0px none #AAC2E6;
border-${requestScope.cssRules.bidiRight}: 0px none #AAC2E6;
border-bottom: 0px none #AAC2E6;
border-${requestScope.cssRules.bidiLeft}: 1px solid #AAC2E6;
}
<%-- The center cell of a 9 x 9 table displaying the selected tab. The tab text is displayed in this cell. - New in v5 --%>
.wpsPortletSelectedTabMiddleCenter {
background-image: url("./colors/default/portletSelectedTabCenterMid.jpg");
background-repeat: repeat-x;
border-style: none;
white-space: nowrap;
}
<%-- The middle right cell of a 9 x 9 table displaying the selected tab - New in v5 --%>
.wpsPortletSelectedTabMiddleEnd {
background-image: url("./colors/default/portletSelectedTabCenterMid.jpg");
background-repeat: repeat-x;
border-top: 0px none #AAC2E6;
border-${requestScope.cssRules.bidiRight}: 1px solid #AAC2E6;
border-bottom: 0px none #AAC2E6;
border-${requestScope.cssRules.bidiLeft}: 0px solid #AAC2E6;
}
<%-- The bottom left cell of a 9 x 9 table displaying the selected tab - New in v5 --%>
.wpsPortletSelectedTabBottomStart {
background-color: #FFFFFF;
border-top: 0px none #AAC2E6;
border-${requestScope.cssRules.bidiRight}: 0px none #AAC2E6;
border-bottom: 0px none #AAC2E6;
border-${requestScope.cssRules.bidiLeft}: 1px solid #AAC2E6;
width: 5px;
height: 5px;
}
<%-- The bottom center cell of a 9 x 9 table displaying the selected tab - New in v5 --%>
.wpsPortletSelectedTabBottomCenter {
background-color: #FFFFFF;
border-style: none;
}
<%-- The bottom right cell of a 9 x 9 table displaying the selected tab - New in v5 --%>
.wpsPortletSelectedTabBottomEnd {
background-color: #FFFFFF;
border-top: 0px none #AAC2E6;
border-${requestScope.cssRules.bidiRight}: 1px solid #AAC2E6;
border-bottom: 0px none #AAC2E6;
border-${requestScope.cssRules.bidiLeft}: 0px none #AAC2E6;
width: 5px;
height: 5px;
}
<%-- Link for tab text - New in v5 --%>
.wpsPortletTabLink, .wpsPortletTabLink:visited, .wpsPortletTabLink:active, .wpsPortletTabLink:hover {
color: #333333;
}
<%-- Link for selected tab text - New in v5 --%>
.wpsPortletSelectedTabLink, .wpsPortletSelectedTabLink:hover, .wpsPortletSelectedTabLink:visited, .wpsPortletSelectedTabLink:active {
color: #2056A0;
font-weight: bold;
}
<%-- PORTLET TOOLBARS --%>
<%-- Bar area on which tools are displayed - New in v5 --%>
.wpsPortletToolbar {
background-color: #c5d1de;
border-top: 1px solid #e4edf5;
border-${requestScope.cssRules.bidiRight}: 1px solid #95a5b9;
border-bottom: 1px solid #95a5b9;
border-${requestScope.cssRules.bidiLeft}: 1px solid #e4edf5;
}
<%--
Section of the toolbar. Usually there is only one.
For the most part, this style is present to disable the border="1" in
the markup which was necessary to support legacy browsers.
New in v5 --%>
.wpsPortletToolbarSection {
border-width: 0px;
}
<%-- Table displaying the tools in this section --%>
.wpsPortletToolbarSet {
}
<%-- A normal toolbar button --%>
.wpsPortletToolbarButton {
background-color: #c5d1de;
padding: 3px;
border-width: 1px;
border-style: solid;
border-color: #c5d1de;
}
<%-- A toolbar button with the mouse hovering over it --%>
.wpsPortletToolbarButtonRollover {
background-color: #c5d1de;
padding: 3px;
border-top: 1px solid #e4edf5;
border-${requestScope.cssRules.bidiRight}: 1px solid #95a5b9;
border-bottom: 1px solid #95a5b9;
border-${requestScope.cssRules.bidiLeft}: 1px solid #e4edf5;
}
<%-- A toolbar button with the mouse button pressed or selected --%>
.wpsPortletToolbarButtonPressed {
background-color: #dadfe5;
padding: 3px;
border-top: 1px solid #95a5b9;
border-${requestScope.cssRules.bidiRight}: 1px solid #e4edf5;
border-bottom: 1px solid #e4edf5;
border-${requestScope.cssRules.bidiLeft}: 1px solid #95a5b9;
}
<%-- A selected toolbar button --%>
.wpsPortletToolbarButtonSelected {
background-color: #aeb8c4;
padding: 3px;
border-top: 1px solid #95a5b9;
border-${requestScope.cssRules.bidiRight}: 1px solid #e4edf5;
border-bottom: 1px solid #e4edf5;
border-${requestScope.cssRules.bidiLeft}: 1px solid #95a5b9;
}
<%-- A toolbar button with the mouse hovering over it --%>
.wpsPortletToolbarButtonSelectedRollover {
background-color: #aeb8c4;
padding: 3px;
border-top: 1px solid #e4edf5;
border-${requestScope.cssRules.bidiRight}: 1px solid #95a5b9;
border-bottom: 1px solid #95a5b9;
border-${requestScope.cssRules.bidiLeft}: 1px solid #e4edf5;
}
<%-- An icon displayed on a toolbar button --%>
.wpsPortletToolbarButtonIcon {
width: 16px;
height: 16px;
}
<%-- A toolbar area displaying non-button controls such as text, or a dropdown --%>
.wpsPortletToolbarControl {
padding: 3px;
}
<%-- Text on the toolbar --%>
.wpsPortletToolbarText {
color: #333333;
}
<%-- Disabled text on the toolbar --%>
.wpsPortletToolbarDisabledText {
color: #999999;
}
<%-- A link on the toolbar --%>
.wpsPortletToolbarLink, .wpsPortletToolbarLink:hover, .wpsPortletToolbarLink:visited, .wpsPortletToolbarLink:active {
color: #333333;
}
<%-- A separator between groups of toolbar items --%>
.wpsPortletToolbarSeparator {
background-color: #95a5b9;
width: 1px;
margin: 0px;
padding: 0px;
border-top: 0px none #95a5b9;
border-${requestScope.cssRules.bidiRight}: 1px solid #e4edf5;
border-bottom: 0px none #e4edf5;
border-${requestScope.cssRules.bidiLeft}: 0px none #95a5b9;
}
<%-- A spacer between groups of toolbar items --%>
.wpsPortletToolbarSpacer {
padding: 0px 2px 0px 2px;
}
<%-- A separator between groups of toolbar items --%>
.wpsPortletToolbarHandle {
background-color: #c5d1de;
padding: 0px;
margin: 0px;
width: 1px;
border-top: 1px solid #e4edf5;
border-${requestScope.cssRules.bidiRight}: 1px solid #95a5b9;
border-bottom: 1px solid #95a5b9;
border-${requestScope.cssRules.bidiLeft}: 1px solid #e4edf5;
}
<%-- BREADCRUMB TRAILS --%>
<%-- Area on which breadcrumb trails are displayed. Also text that is not clickable. - New in v5 --%>
.wpsBreadcrumbTrail {
font-weight: bold;
}
<%-- Clickable breadcrumb trail text - New in v5 --%>
.wpsBreadcrumbTrailLink, .wpsBreadcrumbTrailLink:hover, .wpsBreadcrumbTrailLink:visited, .wpsBreadcrumbTrailLink:active {
font-weight: bold;
color: #3366CC;
text-decoration: underline;
}
<%-- GENERIC ACCENT AND 3-D COLORS --%>
<%-- These styles are provided so portlets can build UI areas with theme --%>
<%-- color-coordinated accent colors and 3D effects other than gray. Only --%>
<%-- use these classes when no other classes are available for the particular --%>
<%-- UI you need to build. --%>
<%-- Surface area in a portlet requiring an accent color. Use this style --%>
<%-- on the main "surface" which needs the color. This style may also be used --%>
<%-- without the corresponding highlight and shadow colors if desired. - New in v5 --%>
.wpsPortletAccentArea {
background-color: #c5d1de;
color: #333333;
}
<%-- 3D highlight color for use with the accent area - New in v5 --%>
.wpsPortletAccentArea3DHighlight {
background-color: #e4edf5;
color: #333333;
}
<%-- 3D shadow color for use with the accent area - New in v5 --%>
.wpsPortletAccentArea3DShadow {
background-color: #95a5b9;
color: #333333;
}
<%-- WIZARDS --%>
<%-- Wizard Title Text- New in v5 --%>
.wpsWizardTitle {
font-weight: bold;
background-color: #c1c1c1;
color: black;
padding-${requestScope.cssRules.bidiLeft}: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
<%-- Wizard Step Notification Text - New in v5 --%>
.wpsWizardStepNotification {
background-color: #dfdfdf;
color: black;
padding-${requestScope.cssRules.bidiLeft}: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
<%-- Wizard Bottom Submit Bar - New in v5 --%>
.wpsWizardBottomSubmit {
background-color: #c1c1c1;
color: black;
padding-${requestScope.cssRules.bidiLeft}: 5px;
padding-top: 5px;
padding-bottom: 25px;
}
<%-- Style for the pointer "hand" cursor. - New in v5.1 --%>
<%-- A style is needed for this because IE 4.x and 5.x do not support cursor:pointer and need cursor:hand instead. --%>
<%-- Use this style in place of inline styles in the markup. --%>
.wpsCursorPointer {
cursor: pointer;
}
<%--****************************************************************************--%>
<%-- Lotus Notes Portlet classes --%>
<%-- General portlets should not use styles in this section. --%>
<%--****************************************************************************--%>
<%-- Background color and font settings for table cell that holds a weekday abbreviation (i.e. Fri)
in the Lotus Notes Calendar Portlet --%>
.weekday_header {
font-size: ${requestScope.cssRules.fontSize.normal};
background-color: #999999;
color: #333333;
}
<%-- Background color and font settings for table cell that holds a day number (i.e 17) for months
other than the current month in the Lotus Notes Calendar Portlet --%>
.other_month_header {
background-color: #E4E3E3;
color: #7E7001;
height: 20px;
}
<%-- Background color and font settings for table cell that holds a day number (i.e 17) for the current month
in the Lotus Notes Calendar Portlet --%>
.current_month_header {
background-color: #CBDBF3;
color: #333333;
height: 20px;
}
<%-- Background color and font settings for empty table cells for months other than the current month
in the Lotus Notes Calendar Portlet --%>
.other_month_cell {
background-color: #F0F0F0;
}
<%-- Background color and font settings for empty table cells for the current month in the Lotus Notes Calendar Portlet --%>
.current_month_cell {
background-color: #FFFFFF;
color: Black;
}
<%-- Background color and font settings for table cell that holds the current day number and name (i.e 17 Wednesday)
in the Lotus Notes Calendar Portlet --%>
.current_day_header {
font-size: ${requestScope.cssRules.fontSize.normal};
background-color: #92B5E6;
color: #333333;
height: 20px;
}
<%-- Background color and font settings for the current day number and name (i.e 17 Wednesday) text in the Lotus Notes Calendar Portlet --%>
a.current_day_header:link {
background-color: transparent;
color: #333333;
}
<%-- Background color and font settings for a day number (i.e 17) in a month other than the current month
in the Lotus Notes Calendar Portlet --%>
a.other_month_header:link {
background-color: transparent;
color: #0000ff;
}
<%-- Background color and font settings for a day number (i.e 17) in the current month in the Lotus Notes Calendar Portlet --%>
a.current_month_header:link {
background-color: transparent;
color: #0050C9;
}
<%-- End of Lotus Notes Calendar Portlet classes --%>
<%--****************************************************************************--%>
<%-- Lotus WP Portlet classes --%>
<%-- General portlets should not use styles in this section. --%>
<%--****************************************************************************--%>
a.wpsPersonName {
text-decoration: none;
white-space: nowrap;
color: #3366CC;
}
a.wpsPersonName:visited {
text-decoration: none;
white-space: nowrap;
color: #666699;
}
a.wpsPersonName:hover {
text-decoration: underline;
white-space: nowrap;
color: #666699;
}
<%-- End Lotus WP classes --%>
<%--*******************************************--%>
<%-- Start styles for Getting Started portlet --%>
<%--*******************************************--%>
.wpsGettingStartedTitle
{
font-size: ${requestScope.cssRules.fontSize.large};
font-weight: normal;
color: #2055A3;
}
.wpsGettingStartedHeader
{
font-size: ${requestScope.cssRules.fontSize.normal};
font-weight: normal;
color: #2055A3;
}
.wpsGettingStartedBody
{
font-size: ${requestScope.cssRules.fontSize.small};
color: #616161;
padding-top: 10px;
}
.gsTableOutside
{
background-color: #E0EDFC;
vertical-align : top;
}
.gsTableInside
{
background-color: #E0EDFC;
padding-top: 5px;
padding-${requestScope.cssRules.bidiLeft}: 5px;
padding-${requestScope.cssRules.bidiRight}: 5px;
vertical-align : top;
}
.gsTableEnd
{
background-image: url("./colors/default/gs_end.gif");
background-repeat: repeat-x;
}
<%--*****************************************--%>
<%-- End styles for Getting Started portlet --%>
<%--*****************************************--%>
<%--*******************************************--%>
<%-- Start styles for Search portlets --%>
<%--*******************************************--%>
.wpsSearchInfoBar{
font-family: ${requestScope.cssRules.fontFamilySansSerif};
font-size: ${requestScope.cssRules.fontSize.normal};
color: #333333;
background-color: #c7d9f1;
}
.wpsSearchUrl, a.wpsSearchUrl {
font-weight: bold;
}
.wpsSearchUrlAddressText{
color: #008000;
font-style: italic;
}
.wpsSearchAttributeText{
color: #c1c1c1;
font-style: italic;
}
<%--*****************************************--%>
<%-- End styles for Search portlets --%>
<%--*****************************************--%>
<%--------------------------------------------------------%>
<%-- LWP styles ----------------------------------------%>
<%-- General styles --%>
<%-- Text for Team Space and Web Conference titles --%>
.lwp-teamSpace-title, .lwp-webConference-title {
font-weight: bold;
background-color: #5C5C5C;
color: #FFFFFF;
}
<%-- Background color for popup windows (ex: spellcheck, lookup) --%>
.popup-background {
background-color: #eeeeee;
}
<%-- Style for area between right and left toolbar text --%>
.lwp-middleToolbar {
font-size: ${requestScope.cssRules.fontSize.normal};
color: #737373;
background-color: #FFFFFF;
border-bottom: 0px solid #D8D8E0;
padding: 4px 4px;
margin: 0px;
}
<%-- Style for administration buttons --%>
.lwpAdminButton {
font-size: ${requestScope.cssRules.fontSize.normal};
color: #FFFFFF;
background-color: #A0A0A0;
text-decoration: none;
padding: 0px 5px;
margin: 0px;
}
<%-- Style for administration buttons --%>
.lwpAdminButtonLink, .lwpAdminButtonLink:hover, .lwpAdminButtonLink:active, .lwpAdminButtonLink:visited {
font-size: ${requestScope.cssRules.fontSize.normal};
font-weight: normal;
color: #FFFFFF;
background-color: #A0A0A0;
margin: 0px;
text-decoration: none;
}
<%-- Style for navigation buttons --%>
.lwpNavButton {
color: #FFFFFF;
background-color: #70A8F0;
margin: 0px;
text-decoration: none;
padding: 0px 5px;
}
<%-- Style for navigation buttons --%>
.lwpNavButtonLink, .lwpNavButtonLink:hover, .lwpNavButtonLink:active, .lwpNavButtonLink:visited {
font-weight: normal;
color: #FFFFFF;
background-color: #70A8F0;
margin: 0px;
text-decoration: none;
}
<%-- Additional button styles --%>
.button-link, a.button-link, a.button-link:hover, a.button-link:visited {
text-decoration: none;
color: #000000;
}
<%-- Class to provide proper indentation for buttons --%>
.lwpButtonGroup{
margin: .25em 4px;
}
<%-- Style for Workplace icon buttons --%>
.lwpIconOnly, .lwpIconOnlyDisabled {
border:0px;
background-color:white;
}
<%-- Additional style for Dialog Buttons in Workplace --%>
.lwpDialogIconBackground {
text-decoration: none;
text-align: center;
vertical-align: top;
background-color: #DDDDDD;
background-image: url("./colors/default/DialogIconTextBackground.gif");
background-repeat: repeat-x;
border: 1px solid #919191;
padding: 0px 2px;
margin: 0px;
overflow: visible;
font-weight: normal;
color: #000000;
cursor: pointer;
}
<%-- Additional style for Dialog Buttons in Workplace --%>
.lwpDialogDisabledIconBackground, .lwpDialogIconBackgroundDisabled {
text-decoration: none;
text-align: center;
vertical-align: top;
background-color: #DDDDDD;
background-image: url("./colors/default/DialogIconTextBackground.gif");
background-repeat: repeat-x;
background-position: ${requestScope.cssRules.bidiLeft} center;
border: 1px solid #919191;
padding: 0px 2px;
margin: 0px;
overflow: visible;
font-weight: normal;
color: #888888;
}
<%-- Additional style for Form Buttons in Workplace --%>
.lwpButtonText {
font-weight: bold;
text-decoration: none;
color: #000000;
vertical-align: middle;
background-color: #DDDDDD;
background-image: url("./colors/default/ButtonBackground.gif");
background-repeat: repeat-x;
background-position: ${requestScope.cssRules.bidiLeft} center;
border-top: 1px solid #919191;
border-bottom: 1px solid #919191;
border-${requestScope.cssRules.bidiRight}: 1px solid #919191;
border-${requestScope.cssRules.bidiLeft}: 1px solid #919191;
padding: 0px 2px;
overflow: visible;
margin: 0px;
text-align: center;
}
<%-- Style for disabled Form buttons --%>
<%-- New in Workplace 2.0 --%>
.lwpButtonTextDisabled {
text-decoration: none;
text-align: center;
vertical-align: middle;
background-color: #DDDDDD;
background-image: url("./colors/default/ButtonBackground.gif");
background-repeat: repeat-x;
background-position: ${requestScope.cssRules.bidiLeft} center;
border-top: 1px solid #919191;
border-bottom: 1px solid #919191;
border-${requestScope.cssRules.bidiRight}: 1px solid #919191;
border-${requestScope.cssRules.bidiLeft}: 1px solid #919191;
padding: 0px 2px;
margin: 0px;
overflow: visible;
font-weight: bold;
color: #888888;
}
<%-- Spacer class to separate buttons --%>
.lwpButtonSpacer {
margin-${requestScope.cssRules.bidiRight}: 2px;
}
<%-- End General styles --%>
<%--****************************************************************************--%>
<%-- Portlet styles --%>
<%--****************************************************************************--%>
<%-- Color for separator lines within portlets --%>
.lwpSeparatorBg {
background-color: #999999;
height: 1px;
}
div.lwpSeparatorBg {
background-color: #999999;
margin: 2px 0 2px 0;
}
<%-- To create an undecorated table row --%>
.borderNone {
border-width: 0 ! important;
}
<%-- Extra portlet border style --%>
.lwpPortletTitleBorder {
background-image: url("./colors/default/skin_border.gif");
background-position: bottom;
background-repeat: repeat-x;
}
<%-- Style for right alignment --%>
.lwpAlignRight {
text-align: ${requestScope.cssRules.bidiRight};
}
<%-- Style for 4 borders --%>
.lwpBorderAll {
border-${requestScope.cssRules.bidiRight}: 1px solid #DCDCDC;
border-${requestScope.cssRules.bidiLeft}: 1px solid #DCDCDC;
border-top: 1px solid #DCDCDC;
border-bottom: 1px solid #DCDCDC;
}
<%-- 3D shadow for container --%>
.lwpShadowBorder {
border-${requestScope.cssRules.bidiRight}: 1px solid #888888;
border-bottom: 1px solid #888888;
}
<%-- Styles for Search in Workplace Portlets --%>
.lwpSearchBar{
margin: 5px 0;
background-color: #ECECEC;
text-align: ${requestScope.cssRules.bidiRight};
}
.lwpSearchBar table{
margin-${requestScope.cssRules.bidiRight}: 0;
margin-${requestScope.cssRules.bidiLeft}: auto;
}
.lwpSearchBar td{
padding: 5px 3px 5px 2px;
}
.lwpSearchBar .portlet-form-field-label{
padding-${requestScope.cssRules.bidiLeft}: 10px;
}
.lwpInlineHelp td{
padding: 5px 10px 5px 1px;
vertical-align: top;
}
<%-- Style for Workplace menu header --%>
.lwpMenuHeader, a.lwpMenuHeader, a.lwpMenuHeader:visited, a.lwpMenuHeader:hover {
background-color: #F0F0F0;
color: #000000;
text-decoration: none;
font-weight: normal;
cursor: pointer;
}
<%-- Style for Workplace menu background --%>
.lwpMenuBackground {
background-color: #ffffff;
}
<%-- Style for Workplace menu items --%>
.lwpMenuItem, a.lwpMenuItem, a.lwpMenuItem:visited, a.lwpMenuItem:hover a.lwpMenuItem:active {
color: #000000;
text-decoration: none;
background-color: #ffffff;
}
<%-- Style for selected and hover state of menu items --%>
.lwpSelectedMenuItem, a.lwpSelectedMenuItem:visited, a.lwpSelectedMenuItem:hover, a.lwpSelectedMenuItem:active{
background-color: #284888;
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
<%-- Style for Disabled Workplace menu items --%>
.lwpMenuItemDisabled, a.lwpMenuItemDisabled, a.lwpMenuItemDisabled:visited, a.lwpMenuItemDisabled:hover, a.lwpMenuItemDisabled:active {
color: #888888;
text-decoration: none;
background-color: #ffffff;
}
<%-- Style for unread Mail in Lotus mail portlet --%>
.unreadMailText, a.unreadMailText {
font-weight: bold;
text-decoration: underline;
color: #3366CC;
}
<%-- Style for last read highlight banner --%>
.lwpLastReadMark {
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
text-align: center;
padding: 3px 0;
}
<%-- Style for date stamp highlight banner --%>
.lwpDateStampMark {
font-weight: bold;
color: #666666;
background-color: #999999;
text-align: center;
padding: 3px 0px;
}
<%--***********************--%>
<%-- Calendar styles --%>
<%--***********************--%>
.lwpCalFsizeX {
font-size: ${requestScope.cssRules.fontSize.large};
}
.lwpCalViewMenuPosition {
padding-${requestScope.cssRules.bidiLeft}: 2px;
padding-top: 8px;
padding-bottom: 8px;
}
a.lwpCalLinkText {
text-decoration: none;
}
a.lwpCalLinkText:hover {
text-decoration: underline;
}
a.lwpCalDateLinkText, a.lwpCalDateLinkText:visited {
text-decoration: none;
color: #000000;
}
a.lwpCalDateLinkText:hover {
text-decoration: underline;
color: #666699;
}
a.lwpCalInactiveDateLinkText, a.lwpCalInactiveDateLinkText:visited {
text-decoration: none;
color: #a0a0a0;
}
a.lwpCalInactiveDateLinkText:hover {
text-decoration: underline;
color: #666699;
}
.lwpCal1WeekCellRow {
height: 6em;
font-weight: normal;
}
.lwpCalCellRow {
height: 2.2em;
font-weight: normal;
}
.lwpCalLDivider {
border-${requestScope.cssRules.bidiLeft}: solid 1px #aaaaaa;
}
.lwpCalTDivider {
border-top: solid 1px #aaaaaa;
}
.lwpCalNoBottom {
border-bottom: none;
}
.lwpCalHeader {
color: #3366CC;
font-weight: bold;
vertical-align: top;
}
.lwpCalHeaderImage {
padding: 12px 3px 2px 0px;
margin-bottom: 5px;
}
.lwpCalAttendeeHeading {
color: #898989;
}
.lwpCalSectionHeader {
font-weight: bold;
color: black;
padding-top: 12px;
padding-bottom: 2px;
margin-bottom: 5px;
display: block;
}
.lwpCalInviteeSection {
padding-${requestScope.cssRules.bidiLeft}:2px;
}
.lwpCalWeekNumber {
color: #808080;
}
.lwpCalEntryHoverDetail {
border : solid 1px #000000;
position: absolute;
visibility: hidden;
width: 400px;
overflow: hidden;
}
.lwpCalEventField {
padding:5px 0px 3px 0px;
}
.lwpCalEntryHoverPosition {
padding-${requestScope.cssRules.bidiLeft}: 5px;
}
.lwpCalBgMeeting, .lwpCalBgWebConf {
background-color: #C3D3E6;
}
.lwpCalBgAppointment{
background-color: #D8F8D8;
}
.lwpCalBgAnniversary{
background-color: #F8E8D0;
}
.lwpCalBgReminder{
background-color: #F8F8D0;
}
.lwpCalBgAllDayEvent{
background-color: #F8E0E0;
}
.lwpCalTodayCell {
border: solid 1px #000000;
}
.lwpCalMonthDayCell {
border-top: solid 1px #AAAAAA;
height: 6.4em;
width: 14%;
}
.lwpCalInactiveDayCell {
background-color: #efefef;
}
.lwpCalInactiveDay {
color: #a0a0a0;
}
.lwpCalSeperator {
border-bottom: solid 1px #ffffff;
}
.lwpCalConflict {
border-${requestScope.cssRules.bidiLeft}: solid 2px #000000;
}
.lwpCalTimeText {
text-align: ${requestScope.cssRules.bidiRight};
}
.lwpCalEntryPosition {
padding-top: 2px;
}
.lwpCalBDivider {
border-bottom: solid 1px #aaaaaa;
}
<%-- End Calendar styles --%>
<%--************************************************--%>
<%-- Start People Picker styles for Lotus Workplace --%>
<%--************************************************--%>
.lwpPpkList {
width: 250px;
height: 200px;
padding-${requestScope.cssRules.bidiLeft}: 2px;
border-${requestScope.cssRules.bidiRight}: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
border-${requestScope.cssRules.bidiLeft}: 1px solid black;
border-top: 1px solid black;
overflow: auto;
}
.lwpPpkListBorder {
width: 250px;
height: 200px;
border-${requestScope.cssRules.bidiLeft}: 1px solid #a0a0a0;
border-top: 1px solid #a0a0a0;
}
.lwpPpkNormalText {
background-color: white;
color: black;
}
.lwpPpkSelectedText {
background-color: #284888;
color: white;
}
<%-- End People Picker styles for Lotus Workplace --%>
<%--******************************************--%>
<%-- Start Mailbox styles for Lotus Workplace --%>
<%--******************************************--%>
.lwpMailboxRecipientAnchor, a.lwpMailboxRecipientAnchor {
color: black;
text-decoration: underline;
cursor: pointer;
}
.lwpMailboxRecipientAnchor:hover, a.lwpMailboxRecipientAnchor:hover {
color: black;
text-decoration: underline;
cursor: pointer;
}
.lwpMailboxRecipientAnchor:visited, a.lwpMailboxRecipientAnchor:visited {
color:black;
}
<%-- End Mailbox styles --%>
<%--****************************************************************************--%>
<%-- Chat Specific Styles -- New in Workplace 2.0 --%>
<%--****************************************************************************--%>
.chat_background {
background-color: #FFFFFF;
}
.chat_partner_presence {
border-top : 1px solid #AAAAAA;
border-${requestScope.cssRules.bidiLeft} : 1px solid #AAAAAA;
border-color : #AAAAAA;
padding: 3px;
background-color: #EEEEEE;
}
.chat_partner_presence_corner {
background-image: url("./colors/default/chat_presence_corner.gif");
background-repeat: no-repeat;
background-position: top;
background-color: transparent;
background-color: #FFFFFF;
}
.chat_partner_alert {
border-top : 1px solid #AAAAAA;
border-${requestScope.cssRules.bidiLeft} : 1px solid #AAAAAA;
border-${requestScope.cssRules.bidiRight} : 1px solid #AAAAAA;
border-color : #AAAAAA;
padding: 3px;
background-color: #FFFFFF;
color: #666666;
}
.chat_transcript {
border-${requestScope.cssRules.bidiLeft} : 1px solid #AAAAAA;
border-${requestScope.cssRules.bidiRight} : 1px solid #AAAAAA;
border-bottom : 1px solid #AAAAAA;
border-top : 1px solid #AAAAAA;
border-color : #AAAAAA;
}
.chat_transcript_nway {
border-top : 1px solid #456A8B;
border-${requestScope.cssRules.bidiLeft} : 1px solid #456A8B;
border-${requestScope.cssRules.bidiRight} : 1px solid #456A8B;
border-bottom : 1px solid #456A8B;
border-color : #456A8B;
}
.chat_message_input {
border-top : 1px solid #AAAAAA;
border-${requestScope.cssRules.bidiLeft} : 1px solid #AAAAAA;
border-${requestScope.cssRules.bidiRight} : 1px solid #AAAAAA;
border-bottom : 1px solid #AAAAAA;
border-color : #AAAAAA;
background-color: #FFFFFF;
}
.chat_statusbar {
border-top : 1px solid #AAAAAA;
border-color : #AAAAAA;
background-color: #EEEEEE;
color: #AAAAAA;
}
.chat_participants {
border-bottom : 1px solid #D8D8D8;
border-color : #D8D8D8;
}
<%-- End of Chat Styles --%>
<%--*****************************--%>
<%-- End Portlet styles --%>
<%--*****************************--%>
<%--****************************************************************************--%>
<%-- Start Web conferencing styles --%>
<%--****************************************************************************--%>
<%-- Style for Web conference agenda item document --%>
.lwp-agendaItemDocument {
color: #585858;
padding-top: 3px;
padding-bottom: 3px;
}
<%-- Style for Web conference agenda item navigation tree --%>
.lwp-agendaItem-ul {
padding-top: 3px;
list-style-type: none;
margin-${requestScope.cssRules.bidiLeft}: 0px;
margin-${requestScope.cssRules.bidiRight}: 20px;
padding-bottom: 0px;
}
<%-- Style for Web conference agenda item navigation tree --%>
.lwp-agendaItem-li {
padding-top: 0px;
padding-bottom: 0px;
}
<%-- Style for Web conference agenda link item --%>
.lwp-agendaItem, .lwp-agendaItem:visited, a.lwp-agendaItem, a.lwp-agendaItem:active, a.lwp-agendaItem:visited, .lwp-agendaItemPage, a.lwp-agendaItemPage, .lwp-agendaItemSlide, .lwp-agendaItemPage:visited, .lwp-agendaItemSlide:visited {
background-color: rgb(246,246,246);
text-decoration: none;
color: #7080A8;
font-weight: normal;
padding-top: 1px;
padding-bottom: 1px;
}
<%-- Hover behavior for Web conference agenda link item --%>
a.lwp-agendaItem:hover, .lwp-agendaItemPage:hover, .lwp-agendaItemSlide:hover {
text-decoration: underline;
color: #639ACE;
font-weight: normal;
}
<%-- Style for Web conference selected agenda item --%>
.lwp-selectedAgendaItem, a.lwp-selectedAgendaItem {
background-color: rgb(49, 106, 197);
padding-top: 1px;
padding-bottom: 1px;
color:#FFFFFF;
line-height: 150%;
text-decoration: none;
font-weight: bold;
}
.lwp-selectedAgendaItem:visited, a.lwp-selectedAgendaItem:visited {
color: #FFFFFF;
}
a.lwp-selectedAgendaItem:hover {
background-color: rgb(49, 106, 197);
padding-top: 1px;
padding-bottom: 1px;
color:#FFFFFF;
line-height: 150%;
text-decoration: underline;
font-weight: bold;
}
<%-- Style for Web conference projector table header start --%>
.lwpProjectorHeaderStart {
background-color: #70A8F0;
border-top: 1px solid #777777;
border-${requestScope.cssRules.bidiRight}: 0px none #777777;
border-bottom: 0px none #777777;
border-${requestScope.cssRules.bidiLeft}: 1px solid #777777;
}
<%-- Style for Web conference projector table header middle --%>
.lwpProjectorHeaderMiddle {
background-color: #70A8F0;
border-top: 1px solid #777777;
border-${requestScope.cssRules.bidiRight}: 0px none #777777;
border-bottom: 0px none #777777;
border-${requestScope.cssRules.bidiLeft}: 0px none #777777;
color: #343434;
font-weight: bold;
}
<%-- Style for Web conference projector table header end --%>
.lwpProjectorHeaderEnd {
background-image: url("./colors/default/projectorTableTopRight.gif");
background-repeat: no-repeat;
background-position: ${requestScope.cssRules.bidiRight} top;
background-color: transparent;
}
<%-- Style for Web conference slide table based on wpsTable --%>
.lwpSlideTable {
border-width: 1px;
border-style: solid;
border-color: #000000;
}
<%-- Style for Web conference slide table head start, middle, and end --%>
<%-- based on wpsTableHeadStart, wpsTableHeadMiddle, wpsTableHeadEnd --%>
.lwpSlideTableHeadStart, .lwpSlideTableHeadMiddle, .lwpSlideTableHeadEnd {
font-weight: bold;
color: #989898;
text-align: ${requestScope.cssRules.bidiLeft};
background-color: #ffffff;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #000000;
}
<%-- Style for Web conference slide border --%>
.lwpSlideBorder
{
border-color: #b0b0c0;
border-style: solid;
border-width: 1px 1px 1px 1px;
}
<%-- Style for Web Conference projector controls section--%>
.lwpAgendaFrameDiv
{
position:absolute;
width:100%;
visibility:hidden;
bottom:0;
border:1px solid rgb(233, 233, 233);
background-color: rgb(246, 246, 246);
top:80px;
}
<%-- Style for Web Conference attendees section--%>
.lwpAttendeesFrameDiv
{
width:100%;
position:absolute;
bottom:0;
border:1px solid rgb(233, 233, 233);
background-color: rgb(246, 246, 246);
visibility:hidden;
overflow:auto;
top:26px;
}
<%-- Style for Web Conference downloads and links section--%>
.lwpDownloadsFrameDiv
{
width:100%;
position:absolute;
bottom:2px;
visibility:hidden;
top:26px;
}
.lwpHostingStarted {
font-size: ${requestScope.cssRules.fontSize.large};
font-weight: bold;
color: #FFFFFF;
}
.lwpHostingStartedLarge {
font-size: ${requestScope.cssRules.fontSize.large};
font-weight: bold;
color: #FFFFFF;
}
<%--*****************************--%>
<%-- End Web conferencing styles --%>
<%--*****************************--%>
<%--**************************************************--%>
<%-- Start Navigation Tree styles for Lotus Workplace --%>
<%--**************************************************--%>
<%-- Style for tree normal node text label --%>
.lwp_labelNormalStyle, a.lwp_labelNormalStyle, a.lwp_labelNormalStyle:visited, a.lwp_labelNormalStyle:active {
color: #000000;
text-decoration: none;
}
.lwp_tdStyle {
white-space:nowrap;
padding:0px;
}
.lwp_linkTextStyle {
text-decoration:none;
}
.lwp_nodeStyle {
border-collapse: collapse;
border-spacing:0px;
}
<%-- Style for tree node image --%>
.lwp_nodeImageStyle {
border-top: 0px;
border-${requestScope.cssRules.bidiRight}: 0px;
border-${requestScope.cssRules.bidiLeft}: 0px;
border-bottom: 0px;
}
<%-- Style for highlighted node text label --%>
.lwp_labelHighlightStyle, a.lwp_labelHighlightStyle, a.lwp_labelHighlightStyle:active, a.lwp_labelHighlightStyle:visited {
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
background-color: #A0A0A0;
padding-${requestScope.cssRules.bidiRight}: 5px;
}
<%-- Mouseover style for node text label --%>
.lwp_labelMouseoverStyle, a.lwp_labelMouseoverStyle:hover, a.lwp_labelMouseoverStyle:active {
font-weight: normal;
text-decoration: underline;
color: #000000;
}
<%-- Use for node text label style when item is dragged over it. --%>
.lwp_labelDragoverStyle{
font-weight: normal;
text-decoration: underline;
color: #000000;
}
<%-- Style for space between node label and node attribute --%>
.lwpFldNodeLableSpacing, .lwpFldNodeLabelSpacing {
padding-${requestScope.cssRules.bidiLeft}: 5px;
}
<%-- Style for Panel around tree --%>
.lwpTreePanel {
overflow: auto;
height: 100%;
width: 18em;
}
<%-- Style for Panel around tree --%>
.lwpTreePanelBody {
border-${requestScope.cssRules.bidiLeft}: 1px solid #aaaaaa;
border-${requestScope.cssRules.bidiRight}: 0px;
border-top: 0px;
border-bottom: 0px;
}
<%-- Style for Panel around tree --%>
.lwpTreePanelHeader {
background-color: #F0F0F0;
border-${requestScope.cssRules.bidiLeft}: 1px solid #aaaaaa;
border-${requestScope.cssRules.bidiRight}: 0px;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}
<%-- Style for Panel around tree --%>
.lwpTreePanelFooter {
background-color: #F0F0F0;
border-${requestScope.cssRules.bidiLeft}: 1px solid #aaaaaa;
border-${requestScope.cssRules.bidiRight}: 0px;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}
<%--****************************--%>
<%-- End Navigation Tree styles --%>
<%--****************************--%>
<%--*******************************************--%>
<%-- Start People palette styles for Workplace --%>
<%--*******************************************--%>
<%-- Style for People Flyout expanded image cell --%>
.lwpPeopleFlyoutExpanded {
background-color: #DEDEDE;
border-${requestScope.cssRules.bidiLeft}: 1px solid #9A9A9A;
border-${requestScope.cssRules.bidiRight}: 0px;
border-top: 0px;
border-bottom: 1px solid #DEDEDE;
}
<%-- Style for People Flyout collapsed image cell --%>
.lwpPeopleFlyoutCollapsed {
background-color: #DEDEDE;
border-${requestScope.cssRules.bidiLeft}: 1px solid #686868;
border-${requestScope.cssRules.bidiRight}: 0px;
border-top: 0px;
border-bottom: 1px solid #DEDEDE;
}
<%-- Style for People Flyout frame --%>
.lwpPeopleFlyoutFrame {
background-color: #DEDEDE;
border-${requestScope.cssRules.bidiLeft}: 1px solid #686868;
border-${requestScope.cssRules.bidiRight}: 1px solid #686868;
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
}
<%--***************************--%>
<%-- End People palette styles --%>
<%--***************************--%>
<%--***********************************--%>
<%-- Start Lotus Time/Date Tag styles --%>
<%--***********************************--%>
.lwpTimeDateBorder {
border:0px;
}
.lwpTimeDateCalBorder {
background-color: white;
border-top: 1px none #aaaaaa;
border-${requestScope.cssRules.bidiRight}: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
border-${requestScope.cssRules.bidiLeft}: 1px solid #aaaaaa;
}
.lwpTimeDateCalText {
font-weight: bold;
}
.lwpTimeDateDayName {
text-align: center;
font-weight: normal;
vertical-align: middle;
background-color: white;
border-top: 1px none #aaaaaa;
border-${requestScope.cssRules.bidiRight}: 1px none #aaaaaa;
border-bottom: 1px solid #aaaaaa;
border-${requestScope.cssRules.bidiLeft}: 1px none #aaaaaa;
}
.lwpTimeDateDay {
text-align: center;
vertical-align: middle;
background-color: white;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #aaaaaa;
}
.lwpTimeDateWeekendDay {
text-align: center;
vertical-align: middle;
background-color: white;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #aaaaaa;
}
.lwpTimeDateDayLink {
text-decoration:none;
}
.lwpTimeDateCalTop {
border: 1px solid #aaaaaa;
background-color: #eeeeee;
}
.lwpTimeDateSelectedCalTop {
border: 1px solid #606098;
background-color: #d0d0d0;
}
.lwpTimeDateSelectedDay {
text-align: center;
vertical-align: middle;
background-color: #ffffff;
}
.lwpTimeDateSelectedDayLink {
text-decoration:none;
text-align: center;
vertical-align: middle;
background-color: #d0d0d0;
}
.lwpTimeDateSelectedWeek {
text-decoration:none;
text-align: center;
vertical-align: middle;
background-color: #d0d0d0;
}
.lwpTimeDateSelectedAllWeeks {
text-decoration:none;
text-align: center;
vertical-align: middle;
background-color: #e8e8e8;
}
.lwpTimeDateWeek {
text-decoration:none;
text-align: center;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #aaaaaa;
}
.lwpTimeDateMonthRadio {
text-decoration:none;
text-align: center;
vertical-align: middle;
width:15px;
border-${requestScope.cssRules.bidiRight}: 1px solid #aaaaaa;
}
.lwpTimeDateWeekRadioOn {
text-decoration:none;
text-align: center;
vertical-align: middle;
background-color: #d0d0d0;
width:15px;
border-color: #aaaaaa;
border-${requestScope.cssRules.bidiRight}: 1px solid #aaaaaa;
border-${requestScope.cssRules.bidiLeft}: 1px solid #aaaaaa;
}
.lwpTimeDateWeekRadioOff {
text-decoration:none;
text-align: center;
vertical-align: middle;
background-color: #ffffff;
width:15px;
border-color: #aaaaaa;
border-${requestScope.cssRules.bidiRight}: 1px solid #aaaaaa;
border-${requestScope.cssRules.bidiLeft}: 1px solid #aaaaaa;
}
.lwpTimeDateEmptyDayName {
font-weight: normal;
text-align: center;
vertical-align: middle;
background-color: #ffffff;
width:15px;
border-${requestScope.cssRules.bidiRight}: 1px solid #aaaaaa;
border-${requestScope.cssRules.bidiLeft}: 1px none #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}
<%--*********************************--%>
<%-- End Lotus Time/Date Tag styles --%>
<%--*********************************--%>
<%--*********************************--%>
<%-- Start JWL tree widget Tag styles--%>
<%--*********************************--%>
<%-- these styles are used by PDM for the tree widget, and are extracted from the JWL tree.css--%>
<%--****default style in case user didn't set the style class********--%>
<%--Use to set style of the parent node div containing all the
children node tables/divs (child element type dependant on
whether scrolling is enabled)--%>
.outerTreeStyle{
color: WindowText;
border-width: 0px;
border-style: none;
padding:0px;
font-weight: 400;
}
<%--Use to set styles for the table representing each node--%>
.nodeStyle{
padding: 0px;
letter-spacing: 0;
border-collapse: collapse;
}
<%--Use to set width of div if scrolling is enabled--%>
.scrollStyle{
overflow: auto;
width: 200px;
}
<%--Use to set width of the main node cell within the table representing the tree.
In the situation where using a TreeTable this governs the actual tree node rather than
the adjoining tabular nodes--%>
.tdStyle{
padding: 0px;
width: 200px;
}
<%-- Use for node text label style when item is dragged over it. Default is same as mouseover style--%>
.labelDragoverStyle{
font-size: 11px;
color: #000000;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-style: italic;
}
<%--So that the text will have no underline--%>
.linkTextStyle{
text-decoration: none
}
<%--Use for getting all the system image icons--%>
.classForTreeSysIcons {
<%--Sample style, please uncomment the following line and modify the icons path if you want use your own customized system icons--%>
<%--list-style-image:url("|plustop=jsl/tree/icons/plustop.gif|plus=jsl/tree/icons/plus.gif|plusbottom=jsl/tree/icons/plusbottom.gif|minustop=jsl/tree/icons/minustop.gif|minus=jsl/tree/icons/minus.gif|minusbottom=jsl/tree/icons/minusbottom.gif|jointtop=jsl/tree/icons/jointop.gif|joint=jsl/tree/icons/join.gif|jointbottom=jsl/tree/icons/joinbottom.gif|empty=jsl/tree/icons/empty.gif|line=jsl/tree/icons/line.gif|nodeopen=jsl/tree/icons/open_folder.gif|nodeclose=jsl/tree/icons/folder.gif|leaf=jsl/tree/icons/page.gif|baseopen=jsl/tree/icons/root.gif|");--%>
}
<%--When using a tree table use to set width of the main node cell within the
table representing the tree.--%>
.tdTreeTabStyle{
padding: 0px;
width: 200px;
margin:0px
}
<%--Use to set style of the adjoining tabular cells when using a TreeTable--%>
.tdTableStyle{
width: 200px;
padding:0px;
margin:0px
}
<%--Use to set style of the column headers when using a TreeTable--%>
.headerStyle{
width: 200px;
background-color: ThreeDFace;
color: WindowText;
border-width: 1px;
border-style: solid;
border-color: ThreeDShadow;
margin:0px;
padding:0px;
}
<%--*******STYLE FOR TREE ******--%>
.tree{
}
<%--Use to set style of the parent node div containing all the
children node tables/divs (child element type dependant on
whether scrolling is enabled)--%>
.tree_outerTreeStyle
{
color: WindowText;
border-width: 0px;
border-style: none;
padding: 0px;
font-weight: 400;
}
<%--Use to set styles for the table representing each node--%>
.tree_nodeStyle {
padding: 0px;
letter-spacing: 0;
border-collapse: collapse;
margin: 0px;
}
<%--Use to set width of div if scrolling is enabled--%>
.tree_scrollStyle{
overflow: auto;
width: 200px;
}
<%--Use to set width of the main node cell within the table representing the tree.
In the situation where using a TreeTable this governs the actual tree node rather than
the adjoining tabular nodes--%>
.tree_tdStyle{
padding: 0px;
width: 200px;
}
<%--Use for tree normal node text label style--%>
.tree_labelNormalStyle {
font-size: 11px;
color: #000000;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
<%--Use for tree node image style--%>
.tree_nodeImageStyle {
border-right: 0px;
border-top: 0px;
border-left: 0px;
width: 19px;
border-bottom: 0px;
height: 16px
}
<%--Use for highlighted node text label style--%>
.tree_labelHighlightStyle{
font-size: 11px;
color: #000000;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
}
<%--Use for node text label style when mouse over the label--%>
.tree_labelMouseoverStyle{
font-size: 11px;
color: #000000;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-style: italic;
}
<%-- Use for node text label style when item is dragged over it. Default is same as mouseover--%>
.tree_labelDragoverStyle{
font-size: 11px;
color: #000000;
background-color: #bbbbbb;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-style: italic;
}
<%--So that the text will have no underline--%>
.tree_linkTextStyle{
text-decoration: none
}
<%--Use for getting all the system image icons--%>
.tree_classForTreeSysIcons {
<%--Sample style, please uncomment the following line and modify the icons path if you want use your own customized system icons--%>
<%--list-style-image:url("|plustop=jsl/tree/icons/plustop.gif|plus=jsl/tree/icons/plus.gif|plusbottom=jsl/tree/icons/plusbottom.gif|minustop=jsl/tree/icons/minustop.gif|minus=jsl/tree/icons/minus.gif|minusbottom=jsl/tree/icons/minusbottom.gif|jointtop=jsl/tree/icons/jointop.gif|joint=jsl/tree/icons/join.gif|jointbottom=jsl/tree/icons/joinbottom.gif|empty=jsl/tree/icons/empty.gif|line=jsl/tree/icons/line.gif|nodeopen=jsl/tree/icons/open_folder.gif|nodeclose=jsl/tree/icons/folder.gif|leaf=jsl/tree/icons/page.gif|baseopen=jsl/tree/icons/root.gif|");--%>
}
<%--When using a tree table use to set width of the main node cell within the
table representing the tree.--%>
.tree_tdTreeTabStyle{
padding: 0px;
width: 200px;
margin:0px
}
<%--Use to set style of the adjoining tabular cells when using a TreeTable--%>
.tree_tdTableStyle{
width: 200px;
padding:0px;
margin:0px
}
<%--Use to set style of the column headers when using a TreeTable--%>
.tree_headerStyle{
width: 200px;
background-color: ThreeDFace;
color: WindowText;
border-width: 1px;
border-style: solid;
border-color: ThreeDShadow;
margin:0px;
padding:0px;
}