<%--
THEME AND GENERAL PAGE STYLES
This file should contain only the CSS styles needed by the markup for the portal theme.
This file is included in both styles.jsp and stylesThemeOnly.jsp.
This file is used through stylesThemeOnly.jsp to inject the portal page look and
feel into other websites such as existing corporate sites or other IBM products.
Style classes output by this JSP must be uniquely named so they can be mixed
without conflict in the brower with styles created by other products or customers.
NOTE: See notes in Styles.jsp for information regarding editing theme JSP fragments.
--%>
<%--===================================================
GENERAL
WARNING: Any CSS declaration on standard HTML elements
has the potential to conflict with existing customer styles.
Define only as many of these as are absolutely necessary.
===================================================--%>
body, html {
margin: 0;
padding: 0;
}
<%--
This declaration is essential to getting the font family and size correct not only
on the main portal page, but in IFRAME portlets and popup windows for things like portlet help.
--%>
body {
font-family: ${requestScope.cssRules.portalSansSerif};
font-size: ${requestScope.cssRules.bodyFontSize};
}
<%-- This style is used on the body tag of Default.jsp. It is used to differentiate
between styles for the main page and styles for Plain.jsp which is usually a
popup and doesn't have all the border decoration and background imagery. --%>
body.wptheme-mainbody {
background-image: ${colors.tc_body_background_image};
background-repeat: ${colors.tc_body_background_repeat};
background-position: ${colors.tc_body_background_position};
background-color: ${colors.tc_body_background_color};
color: ${colors.tc_body_text_color};
margin: 0px auto;
}
<%-- Commented out to see if we really need this for modern browsers such as IE/NS > 5
Most modern browsers now properly inhert the CSS styles and since our base font
size is 1em, we shouldn't get cascade effects through the tables.
table, input, textarea, button, select {
font-family: ${requestScope.cssRules.portalSansSerif};
font-size: 1em;
}
div, span, p, ul, li, td, th {
font-family: ${requestScope.cssRules.portalSansSerif};
}
--%>
<%-- select has a special font family to fix a problem in Simplified Chinese in old browsers on Windows --%>
<%-- Commented out to see if we really need this on modern browsers such as IE/NS > 5
<c:if test="${!empty requestScope.cssRules.portalSansSerifSelect}">
select {
font-family: ${requestScope.cssRules.portalSansSerifSelect};
}
</c:if>
--%>
pre {
font-family: ${requestScope.cssRules.portalMonospace};
font-size: ${requestScope.cssRules.fontSize.portalMonospace};
}
img {
vertical-align: middle;
}
a, a:visited, a:active, .wpsLink, .wpsLink:visited, .wpsLink:active {
color: ${colors.tc_body_link_color};
}
a:hover, .wpsLink:hover {
color: ${colors.tc_body_link_color};
}
<%--===================================================
PAGE
===================================================--%>
.wptheme-FLYParent {
min-height: 600px; /* these three lines ensure a minimum height of the page so even an empty page will render as a 'full' page */
height:auto !important;
height: 600px;
min-width: 80%;
}
.wptheme-pageWrapper {
padding-left: 15px;
padding-right: 15px;
}
.wptheme-access {
<c:if test="${requestScope.isIE}"> ${requestScope.cssRules.bidiLeft}: -3000px; </c:if>
<c:if test="${requestScope.isMoz}">left: -3000px;</c:if>
position: absolute;
width: 500px;
}
.wptheme-pageArea {
background-color: ${colors.tc_pagearea_background_color};
background-image: ${colors.tc_pagearea_background_image};
background-position: ${colors.tc_pagearea_background_position};
background-repeat: ${colors.tc_pagearea_background_repeat};
border-color: ${colors.tc_pagearea_border_color};
border-style: solid;
border-width: ${colors.tc_pagearea_border_size};
border-top-width: 0px; <%-- turns off top border after border-width above --%>
padding: 0px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
margin-bottom: 10px;
width: 100%;
min-height: 400px; <%-- these three lines ensure a minimum height of the page so even an empty page will render as a 'full' page --%>
height:auto !important;
height: 400px;
}
.wptheme-clearing {
clear: both;
}
.wptheme-mainContent {
padding: 5px;
min-height: 400px;
}
<%--===================================================
HEADER / BANNER
===================================================--%>
<%-- wraps banner and status messages --%>
.wptheme-themeHeader {
margin: 0px;
clear: both;
}
.wptheme-banner {
color: ${colors.tc_banner_text_color};
background-color: ${colors.tc_banner_background_color};
background-image: ${colors.tc_banner_background_image};
background-position: ${colors.tc_banner_background_position};
background-repeat: ${colors.tc_banner_background_repeat};
margin: ${colors.tc_banner_margin_size};
padding: 7px 10px;
border-color: ${colors.tc_banner_border_color};
border-style: solid;
border-width: ${colors.tc_banner_border_size};
border-top-width: 0px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
}
.wptheme-banner a, .wptheme-banner a:visited, .wptheme-banner a:active {
color: ${colors.tc_banner_link_color};
}
.wptheme-banner a:hover {
color: ${colors.tc_banner_link_color};
}
.wptheme-bannerTitle{
<c:if test="${!empty colors.tc_bannertitle_text_fontfamily}">
font-family: <c:out value='${requestScope.cssRules[colors.tc_bannertitle_text_fontfamily]}' default="${colors.tc_bannertitle_text_fontfamily}"/>;
</c:if>
<c:if test="${!empty colors.tc_bannertitle_text_fontsize}">
font-size: <c:out value='${requestScope.cssRules.fontSize[colors.tc_bannertitle_text_fontsize]}' default="${colors.tc_bannertitle_text_fontsize}"/>;
</c:if>
color: ${colors.tc_bannertitle_text_color};
font-weight: bold;
float:${requestScope.cssRules.bidiLeft};
padding-${requestScope.cssRules.bidiRight}: 20px;
}
<%--===================================================
TOP LEVEL NAVIGATION
===================================================--%>
.wptheme-topLevelLinks {
float: ${requestScope.cssRules.bidiLeft};
background-color: ${colors.tc_toplevelnav_background_color};
color: ${colors.tc_toplevelnav_text_color};
}
.wptheme-topLevelLinks-list {
margin: 0;
padding: 0
}
.wptheme-topLevelLinks-list li {
display: inline;
margin: 0;
padding-top: 0px;
padding-left: 5px;
padding-bottom: 0px;
padding-right: 5px;
border-${requestScope.cssRules.bidiLeft}-width: 1px;
border-${requestScope.cssRules.bidiLeft}-style: solid;
border-${requestScope.cssRules.bidiLeft}-color: ${colors.tc_toplevelnav_selectedbackground_color};
}
.wptheme-topLevelLinks-list li a {
color: ${colors.tc_toplevelnav_text_color};
padding-top: 3px;
padding-left: 8px;
padding-bottom: 3px;
padding-right: 8px;
}
.wptheme-topLevelLinks-list li button {
border-width: 0px;
border-style: none;
background-color: transparent;
color: ${colors.tc_toplevelnav_text_color};
padding-top: 3px;
padding-left: 8px;
padding-bottom: 3px;
padding-right: 8px;
cursor: pointer;
text-decoration: none;
}
.wptheme-topLevelLinks-list li a:link, .wptheme-topLevelLinks-list li a:visited {
color: ${colors.tc_toplevelnav_text_color};
text-decoration: none;
}
.wptheme-topLevelLinks-list li a:hover, .wptheme-topLevelLinks-list li a:focus, .wptheme-topLevelLinks-list li a:active {
color: ${colors.tc_toplevelnav_text_color};
text-decoration: none;
}
.wptheme-topLevelLinks-list li.wptheme-firstTopLevelLink {
margin-${requestScope.cssRules.bidiLeft}: 0px;
padding-${requestScope.cssRules.bidiLeft}: 0px;
border-${requestScope.cssRules.bidiLeft}-width: 0px;
}
.wptheme-topLevelLinks-list li.wptheme-firstTopLevelLink {
padding-${requestScope.cssRules.bidiLeft}: 0px;
border-${requestScope.cssRules.bidiLeft}-width: 0px;
}
.wptheme-topLevelLinks-list li.wptheme-selectedTopLevelLink {
padding-top: 3px;
padding-left: 5px;
padding-bottom: 3px;
padding-right: 5px;
}
.wptheme-topLevelLinks-list li.wptheme-selectedTopLevelLink a {
color: ${colors.tc_toplevelnav_selectedtext_color};
background-color: ${colors.tc_toplevelnav_selectedbackground_color};
font-weight: bold;
}
.wptheme-topLevelLinks-list li.wptheme-selectedTopLevelLink span {
border-width: 0px;
border-style: none;
color: ${colors.tc_toplevelnav_selectedtext_color};
background-color: ${colors.tc_toplevelnav_selectedbackground_color};
font-weight: bold;
padding-top: 3px;
padding-left: 8px;
padding-bottom: 3px;
padding-right: 8px;
}
<%--===================================================
MORE... MENU BUTTON ON TOP LEVEL NAVIGATION
===================================================--%>
.wptheme-more-menu {
color: #78797A;
background-color: #ECF3FD;
border-width: 1px;
border-style: solid;
border-color: #508bc2;
}
.wptheme-more-menu-item {
color: #78797a;
padding: 3px;
white-space:nowrap;
font-size: ${requestScope.cssRules.fontSize.portalNormal};
}
.wptheme-more-menu-item a, .wptheme-more-menu-item a:hover, .wptheme-more-menu-item a:visited, .wptheme-more-menu-item a:active {
color: #78797a;
text-decoration: none;
}
.wptheme-more-menu-item-selected {
color: gray;
background-color: #DAE6f7;
cursor: pointer;
white-space: nowrap;
padding: 3px;
font-size: ${requestScope.cssRules.fontSize.portalNormal};
}
.wptheme-more-menu-item-selected a, .wptheme-more-menu-item-selected a:hover, .wptheme-more-menu-item-selected a:visited, .wptheme-more-menu-item-selected a:active {
color: #78797a;
text-decoration: none;
}
<%--===================================================
PAGE MENU
===================================================--%>
.wptheme-page-menu {
color: ${colors.tc_launcher_text_color};
background: ${colors.tc_launcher_background_color};
border: 1px solid;
border-color: ${colors.launchMenuBorder};
-moz-border-radius-top${requestScope.cssRules.bidiRight}: 2px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
}
.wptheme-page-menu-border {
border: 0px;
}
.wptheme-page-menu-item {
/* background-color: ${colors.tc_launcher_background_color}; */
color: ${colors.tc_launcher_text_color} !important;
text-decoration: none;
<c:if test="${requestScope.isRTL}">
padding:3px;
</c:if>
white-space:nowrap;
font-size: ${requestScope.cssRules.fontSize.portalNormal};
}
.wptheme-page-menu-item-selected {
/* background:${colors.launchMenuSelectedBackgroundImage}; */
background-color: ${colors.tc_launcher_selectedbackground_color};
color: ${colors.tc_launcher_selectedtext_color} !important;
/*
border-top: 1px solid;
border-bottom: 1px solid;
border-color: ${colors.launchMenuSelectedBorder};
*/
cursor:pointer;
white-space:nowrap;
text-decoration: none;
<c:if test="${requestScope.isRTL}">
padding:3px;
</c:if>
font-size: ${requestScope.cssRules.fontSize.portalNormal};
}
a.wptheme-page-menu-item-selected{
background: none;
background-color: transparent;
}
/* prevent border on selected item from getting inherited by menu icons */
.wptheme-page-menu-item-selected img, .wptheme-page-menu-item img{
border: 0px;
background: none;
background-color: transparent;
height: 16px;
width: 16px;
}
<%--
.wptheme-page-menu-item .portlet-separator {
margin:0px;
line-height:1px;
background-color: #999999;
}
.portlet-separator {
margin:0px;
line-height:1px;
background-color: #444444;
}
--%>
<%--===================================================
TOOLBAR / GLOBAL USER ACTIONS
===================================================--%>
.wptheme-toolbar {
float:${requestScope.cssRules.bidiRight};
padding-${requestScope.cssRules.bidiLeft}: 10px;
}
.wptheme-toolbar ul{
margin:0px;
border-spacing: 0px;
padding-left: 0px; <%-- browsers default to either left margin or padding of 40px for li indention --%>
padding-right: 0px; <%-- browsers default to either left margin or padding of 40px for li indention --%>
list-style: none;
}
.wptheme-toolbar li {
margin:0px;
display: inline;
list-style: none;
padding: 0px 10px;
border-${requestScope.cssRules.bidiRight}: 1px solid ${colors.tc_banner_link_color};
/* white-space: nowrap; */
}
.wptheme-toolbar li.wptheme-toolbar-last {
border: 0px;
padding-${requestScope.cssRules.bidiRight}: 0px;
<c:if test="${!requestScope.isRTL }">
padding-right: 0px;
padding-left: 10px;
</c:if>
}
.wptheme-toolbar a, .wptheme-toolbar a:visited, .wptheme-toolbar a:active {
text-decoration: none;
white-space: nowrap;
}
.wptheme-toolbar a:hover {
text-decoration: none;
white-space: nowrap;
}
<%--===================================================
BREADCRUMB TRAIL
===================================================--%>
.wptheme-breadcrumbNav {
float:${requestScope.cssRules.bidiLeft};
clear:${requestScope.cssRules.bidiLeft};
color:${colors.tc_breadcrumb_text_color};
padding: 0px 5px;
font-size: ${requestScope.cssRules.fontSize.portalSmall};
}
.wptheme-breadcrumbNav a, .wptheme-breadcrumbNav a:visited, .wptheme-breadcrumbNav a:hover, .wptheme-breadcrumbNav a:active{
color: ${colors.tc_breadcrumb_link_color};
text-decoration: none;
}
.wptheme-breadcrumbSeparator {
color: ${colors.tc_breadcrumb_link_color};
padding: 0px 5px;
}
<%--===================================================
PAGE AREA TOOLS / PAGE-SPECIFIC USER ACTIONS
===================================================--%>
.wptheme-pageAreaToolbar {
padding: 4px 5px 0px 5px;
}
.wptheme-pageAreaTools {
float:${requestScope.cssRules.bidiRight};
/* color: ${colors.tc_gutter_text_color}; */
font-size: ${requestScope.cssRules.fontSize.portalSmall};
}
.wptheme-pageAreaTools ul{
margin:0px;
border-spacing: 0px;
padding-left: 0px; <%-- browsers default to either left margin or padding of 40px for li indention --%>
padding-right: 0px; <%-- browsers default to either left margin or padding of 40px for li indention --%>
list-style: none;
}
.wptheme-pageAreaTools li {
margin:0px;
display: inline;
list-style: none;
padding: 0px 5px;
}
.wptheme-pageAreaTools a, .wptheme-pageAreaTools a:visited, .wptheme-pageAreaTools a:hover, .wptheme-pageAreaTools a:active{
text-decoration: none;
}
<%--===================================================
PAGE HEADER
===================================================--%>
.wptheme-pageHeader {
background-image: ${colors.tc_pageareaheader_background_image};
background-position:${colors.tc_pageareaheader_background_position};
background-repeat:${colors.tc_pageareaheader_background_repeat};
background-color: ${colors.tc_pageareaheader_background_color};
border-color: ${colors.tc_pageareaheader_border_color};
border-style: solid;
border-width: ${colors.tc_pageareaheader_border_size};
border-bottom-width: 0px;
color: ${colors.tc_pageareaheader_text_color};
width: 100%;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
.wptheme-pageHeaderRightCorner {
background-image: ${colors.tc_pageareaheaderright_background_image};
background-position:${colors.tc_pageareaheaderright_background_position};
background-repeat:${colors.tc_pageareaheaderright_background_repeat};
width: 100%;
}
.wptheme-pageHeaderLeftCorner {
background-image: ${colors.tc_pageareaheaderleft_background_image};
background-position:${colors.tc_pageareaheaderleft_background_position};
background-repeat:${colors.tc_pageareaheaderleft_background_repeat};
border-color: ${colors.tc_pageareaheader_border_color};
border-style: solid;
border-width: 0px;
border-bottom-width: 0px;
width: 100%;
}
.wptheme-pageHeaderNavigation {
/*float:${requestScope.cssRules.bidiLeft}; RES - fails with IE*/
padding-${requestScope.cssRules.bidiLeft}: 50px;
}
.wptheme-applicationName {
float:${requestScope.cssRules.bidiLeft};
display: inline;
font-size: 1.5em;
font-weight: normal;
padding: 5px 17px;
margin: 0px;
}
.wptheme-pageHeaderTools {
/*float:${requestScope.cssRules.bidiRight};*/
padding: 4px 10px;
}
.wptheme-searchBoxContainer {
float: ${requestScope.cssRules.bidiRight};
display: inline;
}
.wptheme-pageHeaderTools form {
margin: 0px;
}
<%--===================================================
HORIZONTAL NAVIGATION
===================================================--%>
.wptheme-fullHorizontalNav {
border-color: ${colors.tc_pagearea_border_color};
border-style: solid;
border-width: 0px 1px 1px 1px;
background-color: ${colors.tc_tabsrow2_background_color};
width: 100%;
}
.wpsPageBarFirstRow, .wpsPageBar {
margin:0px;
/* clear: right;*/
/* white-space: nowrap; */
/* width: 80%; */
display: inline;
/*float:${requestScope.cssRules.bidiLeft};*/
padding-${requestScope.cssRules.bidiLeft}: 0px; <%--browsers default to either left margin or padding of 40px for li indention --%>
}
.wpsPageBarFirstRow {
font-family: ${requestScope.cssRules.portalSansSerif};
font-size: ${requestScope.cssRules.fontSize.portalNormal};
font-weight: bold;
padding-top: 10px;
/* <c:if test="${empty colors.themeHeaderBackgroundImage}">
<c:if test="${!empty colors.tc_tabsrow1_background_image}">
background-image: ${colors.tc_tabsrow1_background_image};
background-repeat: repeat-x;
background-position: top center;
</c:if>
background-color: ${colors.tc_tabsrow1_background_color};
</c:if>
*/
}
.wpsPageBar {
font-family: ${requestScope.cssRules.portalSansSerif};
font-size: ${requestScope.cssRules.fontSize.portalNormal};
font-weight: bold;
clear: both;
/* width: 100%; */
background-color: ${colors.tc_tabsrow2_background_color};
}
.wpsPageBarFirstRow li, .wpsPageBar li {
font-family: ${requestScope.cssRules.portalSansSerif};
margin-${requestScope.cssRules.bidiLeft}: 2px;
float:${requestScope.cssRules.bidiLeft};
list-style: none;
display: inline;
}
.wpsPageBarFirstRow li {
margin-top: 3px;
margin-bottom: -1px; <%-- this makes tab appear connected to separator bar below--%>
padding: 6px 10px;
display: inline;
}
.wpsPageBar li {
padding: 2px 10px;
margin: 2px;
display: inline;
}
<%-- Selected tab on Page bar --%>
.wpsSelectedPage{
color: ${colors.tc_tabsrow2_selectedtext_color};
/* background:${colors.topNavFirstRowSelectedBackgroundImage}; */
background-color: ${colors.tc_tabsrow1_selectedbackground_color};
display: inline;
white-space:nowrap;
}
.wpsPageBarFirstRow .wpsSelectedPage{
color: ${colors.tc_tabsrow1_selectedtext_color};
background-color: ${colors.tc_tabsrow1_selectedbackground_color};
border: 1px solid;
border-color: ${colors.tc_pageareaheader_border_color};
border-bottom-color:${colors.tc_tabsrow1_selectedbackground_color};<%-- this makes tab appear connected to separator bar below --%>
-moz-border-radius-topright: 4px;
-moz-border-radius-topleft: 4px;
border-bottom-width: 2px;
display: inline;
}
<%-- Selected tab on Page bar --%>
.wpsPageBar .wpsSelectedPage, .wpsPageBar .wpsSelectedPage a, .wpsPageBar .wpsSelectedPage a:hover, .wpsPageBar .wpsSelectedPage a:visited, .wpsPageBar .wpsSelectedPage a:active {
color: ${colors.tc_tabsrow2_selectedtext_color};
background: ${colors.topNavRowSelectedBackgroundImage};
background-color: ${colors.tc_tabsrow2_selectedbackground_color};
}
.wpsPageBar .wpsSelectedPage {
/*
border: 1px solid #cfcfcf;
-moz-border-radius: 4px;
*/
}
<%-- Link in Selected tab on Page bar --%>
.wpsSelectedPage a, .wpsSelectedPage a:visited, .wpsSelectedPage a:hover, .wpsSelectedPage a:active{
color: ${colors.tc_tabsrow1_selectedtext_color};
text-decoration: none;
white-space: nowrap;
}
<%-- Unselected tabs on Page bar --%>
.wpsPageBarFirstRow .wpsUnSelectedPage{
color: ${colors.tc_tabsrow1_text_color};
background-position: top center;
background-color: ${colors.tc_tabsrow1_background_color};
border-color: ${colors.tc_tabsrow1_background_color};
border-style: solid;
border-width: 1px;
border-bottom-width: 1px;
/*
border-bottom: 0px solid; <%-- all tabs have -1px bottom margin to overlap the separator bar. for unselected tabs we need to redraw the line we overlapped --%>
border-color: ${colors.topNavFirstRowSelectedBorder};
border: 1px solid;
border-color: #4f85c5;
border-bottom-color:#6794cb;<%-- this makes tab appear connected to separator bar below --%>
*/
-moz-border-radius-topright: 4px;
-moz-border-radius-topleft: 4px;
}
.wpsPageBarFirstRow .wpsUnSelectedPage a, .wpsPageBarFirstRow .wpsUnSelectedPage a:visited, .wpsPageBarFirstRow .wpsUnSelectedPage a:hover, .wpsPageBarFirstRow .wpsUnSelectedPage a:active{
color: ${colors.tc_tabsrow1_text_color};
}
<%-- --%>
.wpsUnSelectedPage{
color: ${colors.topNavRowUnSelectedText};
display: inline;
}
<%-- Link in Unselected tabs on Page bar --%>
.wpsUnSelectedPage a, .wpsUnSelectedPage a:visited, .wpsUnSelectedPage a:hover, .wpsUnSelectedPage a:active{
color: ${colors.tc_tabsrow2_text_color};
text-decoration: none;
white-space: nowrap;
}
<%-- page context menu link--%>
.wptheme-tabMenuLink {
border: 0;
margin-${requestScope.cssRules.bidiLeft}: 4px;
}
<%--===================================================
SIDE NAVIGATION
===================================================--%>
.wptheme-sideNavArea {
border-width: 0px;
border-${requestScope.cssRules.bidiRight}-width: ${colors.tc_sidenav_border_size};
border-style: solid;
border-color: ${colors.tc_sidenav_border_color};
background-color:${colors.tc_sidenav_background_color};
}
.wptheme-sideNav{
font-size: ${requestScope.cssRules.fontSize.portalNormal};
text-decoration: none;
white-space:nowrap;
margin-top:0px;
margin-bottom:0px;
margin-${requestScope.cssRules.bidiLeft}: 0px;
padding-${requestScope.cssRules.bidiLeft}: 0px;
<c:if test="${requestScope.isIE}"> width: 150px; </c:if>
min-width: 150px;
}
/* first sublist is not indented */
.wptheme-sideNav ul{
margin-${requestScope.cssRules.bidiLeft}: 1.5em;
padding-${requestScope.cssRules.bidiLeft}: 0px;
}
/* indent sublists nested 2 levels or deeper */
.wptheme-sideNav ul ul{
margin-${requestScope.cssRules.bidiLeft}: 1.5em;
padding-${requestScope.cssRules.bidiLeft}: 0px;
}
.wptheme-sideNav li {
display:inline;
list-style: none;
margin-${requestScope.cssRules.bidiLeft}: 0px;
padding-${requestScope.cssRules.bidiLeft}: 0px;
}
<%-- top level elements get different colors --%>
ul.wptheme-sideNav li span.wptheme-sideNavItem{
background: transparent;
font-weight: bold;
/* background: ${colors.sideNavTopLevelBackground}; */
/* border: 1px solid ${colors.sideNavTopLevelBorder}; */
border: 0px;
}
<%-- override settings for top level elements for subsequent items.
This won't be necessary once IE supports child selectors --%>
ul.wptheme-sideNav li ul span.wptheme-sideNavItem{
background: transparent;
font-weight: normal !important;
border: 0px solid ${colors.sideNavTopLevelBorder};
}
.wptheme-sideNavItem{
text-decoration: none;
margin: 2px 2px 0px 2px;
padding: 2px;
display:block;
white-space:nowrap;
color:${colors.tc_sidenav_text_color} !important;
}
.wptheme-sideNavItem a {
display: inline;
}
.wptheme-sideNavLabel{
margin: 2px 2px 0px 2px;
padding: 2px;
}
.wptheme-sideNavSelected{
font-weight:bold;
color: ${colors.tc_sidenav_selectedtext_color} !important;
background-color: ${colors.tc_sidenav_selectedbackground_color} !important;
background-image: ${colors.tc_sidenav_selectedbackground_image} !important;
background-repeat: ${colors.tc_sidenav_selectedbackground_repeat} !important;
background-position: ${colors.tc_sidenav_selectedbackground_position} !important;
border-width: ${colors.tc_sidenav_selectedborder_size} !important;
border-style: solid !important;
border-color: ${colors.tc_sidenav_selectedborder_color} !important;
text-decoration: none;
padding:2px;
display:block;
cursor:default;
white-space:nowrap;
}
.wptheme-sideNavSelected a {
<%-- selected is applied to the anchor as well, so we need to override
the background assignment so the gradient shows through, rather than starting over
inside the anchor, which would be out of sync with the bg on the span --%>
color: ${colors.tc_sidenav_selectedtext_color} !important;
background-image:none !important;
background:transparent !important;
display: inline;
cursor: pointer;
text-decoration: none;
border: 0px !important;
}
.wptheme-sideNavIcon {
height: 9px;
width: 9px;
border: 0px;
padding: 0px;
margin: 0px;
vertical-align: baseline;
}
.wptheme-sideNavMenuLink {
border: 0px;
/* margin-${requestScope.cssRules.bidiLeft}: -10px; */
padding: 0px;
}
.wptheme-sideNavLevel1{
color: ${colors.tc_sidenav_text_color} !important;
/* font-size: ${requestScope.cssRules.fontSize.portalLarge}; */
padding-top: 2px;
font-family: ${requestScope.cssRules.portalSansSerif};
}
.wptheme-sideNavSelected .wptheme-sideNavLevel1{
color: ${colors.tc_sidenav_selectedtext_color} !important;
}
.wptheme-sideNavLevel2 wptheme-sideNavLevel3 wptheme-sideNavLevel4 wptheme-sideNavLevel5 wptheme-sideNavLevel6 wptheme-sideNavLevel7 wptheme-sideNavLevel7{
text-indent:36px;
}
<%--===================================================
FLYOUT PALETTE
===================================================--%>
.wptheme-flyout{
background-image: url(./colors/default/PaletteGradient.gif);
background-repeat: repeat-x;
background-position: top center;
height: 100%;
/*border-top: 1px solid; */
/*border-bottom-color: ${colors.paletteHeaderBorder};*/
height: 100%;
white-space: no-wrap;
}
.wptheme-flyoutIframe{
border: 0px;
}
.wptheme-flyoutLoading {
background-color: #3C3C3C;
color: #FFFFFF;
font-family: arial;
font-weight: bold;
font-size: 13;
opacity: 0.75;
filter: alpha(opacity = 75);
z-index: 100;
}
.wptheme-flyoutContainer {
border-${requestScope.cssRules.bidiLeft}: 1px solid;
border-${requestScope.cssRules.bidiLeft}-color: ${colors.paletteHeaderBorder};
}
.wptheme-flyoutToggle {
cursor: pointer;
background-image: url(./colors/default/PaletteGradient.gif);
background-repeat: repeat-x;
background-position: top center;
height: 100%;
}
.wptheme-flyoutCollapsed .expandedImage {
display: none;
}
.wptheme-flyoutCollapsed .collapsedImage {
display: block;
}
.wptheme-flyoutExpanded .collapsedImage {
display: none;
}
.wptheme-flyoutExpanded .expandedImage {
display: block;
}
.wptheme-flyoutToggle img {
border: 0px;
padding: 2px;
}
.wptheme-flyout ul{
margin:0px;
border-spacing: 0px;
padding-left: 0px; <%-- browsers default to either left margin or padding of 40px for li indention --%>
padding-right: 0px; <%-- browsers default to either left margin or padding of 40px for li indention --%>
list-style: none;
white-space: nowrap;
}
.wptheme-flyout li {
margin:0px;
display: inline;
list-style: none;
padding: 0px 5px;
}
.wptheme-flyout a, .wptheme-flyout a:visited, .wptheme-flyout a:hover, .wptheme-flyout a:active{
text-decoration: none;
}
<%--===================================================
INLINE SHELF
===================================================--%>
.wpsInlineShelf, .wpsInlineShelfIframeDocBody {
border: 1px solid #101d2d;
/* background-color: #101d2d;
color: #fff; */
}
.wpsInlineShelf_LoadingMsg {
padding: 10px;
text-align: center;
}
<%--===================================================
STATUS BAR
===================================================--%>
/* whole statusBar element */
#wptheme-statusBar {
}
#wptheme-statusBar.expanded{
background-color: #FAFAFA;
border: 1px solid #AAA;
color: #333;
padding: 2px 5px;
}
/* spacing between each status entry */
.wptheme-error, .wptheme-warning, .wptheme-info {
margin: 5px 0px 5px 20px ;
}
.wptheme-multiple{
margin: 5px 0px ;
}
/* all h3 elements in the status bar are the summary lines for each entry */
#wptheme-statusBar h3 {
font-size: ${requestScope.cssRules.fontSize.portalSmall};
padding: 2px 5px;
color: #333;
margin: 0;
}
/* status icon */
#wptheme-statusBar h3 img {
height: 16px;
width: 16px;
vertical-align: middle;
padding-right: 4px;
}
/* status details link */
#wptheme-statusBar h3 a {
padding: 2px 5px;
}
/* container for left side of status entry header */
#wptheme-statusBar .wptheme-statusHeaderLHS {
float: left;
clear:left;
margin: 0;
padding: 0px 0px;
}
/* container for right side of status entry header */
#wptheme-statusBar .wptheme-statusHeaderRHS {
float: right;
clear: right;
margin: 0;
padding: 0px 0px;
}
/* details section below each error. */
#wptheme-statusBar .wptheme-details {
background-color: #FFF;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #AAA;
margin: 0;
padding: 2px 5px;
}
/* styles for each status type */
#wptheme-statusBar .wptheme-info h3 {
background-color: #F2F9FD;
border: 1px solid #B3C9D5;
}
#wptheme-statusBar .wptheme-info .wptheme-details {
border-color: #B3C9D5;
}
#wptheme-statusBar .wptheme-warning h3 {
background-color: #FDF6DE;
border: 1px solid #E6CF99;
}
#wptheme-statusBar .wptheme-warning .wptheme-details {
border-color: #E6CF99;
}
#wptheme-statusBar .wptheme-error h3 {
background-color: #FEE4E4;
border: 1px solid #FFC4C4;
}
#wptheme-statusBar .wptheme-error .wptheme-details {
border-color: #FFC4C4;
}
#wptheme-statusBar .wptheme-multiple h3 {
background-color: #E9CAF9;
border: 1px solid #DEAAFA;
}
#wptheme-statusBar .wptheme-multiple .wptheme-details {
border-color: #DEAAFA;
}
<%--===================================================
THEME LINKS
The following CSS styles should be structural in nature
and the visuals (color and font) left to the individual elements in
which they are surfaced.
===================================================--%>
.wptheme-themeLinks {
margin:0px;
border-spacing: 0px;
padding-left: 0px; <%-- browsers default to either left margin or padding of 40px for li indention --%>
padding-right: 0px; <%-- browsers default to either left margin or padding of 40px for li indention --%>
list-style: none;
}
.wptheme-themeLinks li {
margin:0px;
display: inline;
list-style: none;
padding: 0px 6px;
}
/* Must turn off underline on links because it goes behind any icons that are present and looks funny. */
.wptheme-themeLinks a, .wptheme-themeLinks a:visited, .wptheme-themeLinks a:active {
text-decoration: none;
white-space: nowrap;
}
.wptheme-themeLinks a:hover {
text-decoration: none;
white-space: nowrap;
}
.wptheme-themeLinksCategorized {
margin:0px;
border-spacing: 0px;
float: ${requestScope.cssRules.bidiLeft};
/* padding-${requestScope.cssRules.bidiLeft}: 0px; */ /* browsers default to either left margin or padding of 40px for li indention */
padding: 0px;
}
.wptheme-themeLinks-label {
white-space: nowrap;
}
.wptheme-themeLinksCategorized li {
margin:0px;
list-style: none;
padding: 5px 0px 0px 0px;
}
/* Must turn off underline on links because it goes behind any icons that are present and looks funny. */
.wptheme-themeLinksCategorized a, .wptheme-themeLinksCategorized a:visited, .wptheme-themeLinksCategorized a:active {
text-decoration: none;
}
.wptheme-themeLinksCategorized a:hover {
text-decoration: none;
}
<%--===================================================
QUICK LINKS SHELF
===================================================--%>
.wptheme-quickLinksShelf {
<c:if test="${!empty colors.tc_qls_border_size && !empty colors.tc_qls_border_color}">
border: ${colors.tc_qls_border_size} solid ${colors.tc_qls_border_color};
</c:if>
padding: 10px;
-moz-border-radius: 4px;
color:${colors.tc_qls_text_color};
background-color: ${colors.tc_qls_background_color};
background-image: ${colors.tc_qls_background_image};
background-position: ${colors.tc_qls_background_position};
background-repeat: ${colors.tc_qls_background_repeat};
margin-bottom: 10px;
}
.wptheme-quickLinksShelf table {
float: ${requestScope.cssRules.bidiLeft};
}
.wptheme-quickLinksShelf table th {
font-weight: bold;
padding: 5px 50px 0px 25px;
text-align: ${requestScope.cssRules.bidiLeft};
vertical-align: top;
<c:if test="${!empty colors.tc_qls_border_size && !empty colors.tc_qls_border_color}">
border-${requestScope.cssRules.bidiLeft}: ${colors.tc_qls_border_size} solid ${colors.tc_qls_border_color};
</c:if>
}
.wptheme-quickLinksShelf table td {
padding: 0px 50px 5px 25px;
text-align: ${requestScope.cssRules.bidiLeft};
vertical-align: top;
font-size: ${requestScope.cssRules.fontSize.portalSmall};
<c:if test="${!empty colors.tc_qls_border_size && !empty colors.tc_qls_border_color}">
border-${requestScope.cssRules.bidiLeft}: ${colors.tc_qls_border_size} solid ${colors.tc_qls_border_color};
</c:if>
}
.wptheme-quickLinksShelf table th.wptheme-quickLinksShelf-first, .wptheme-quickLinksShelf table td.wptheme-quickLinksShelf-first {
border: 0px;
}
.wptheme-quickLinksShelf a, .wptheme-quickLinksShelf a:visited, .wptheme-quickLinksShelf a:active {
color: ${colors.tc_qls_link_color};
text-decoration: none;
}
.wptheme-quickLinksShelf a:hover {
color: ${colors.tc_qls_link_color};
text-decoration: none;
}
.wptheme-quickLinksShelf ul {
text-align: ${requestScope.cssRules.bidiLeft};
float: ${requestScope.cssRules.bidiLeft};
}
.wptheme-quickLinksShelfAction {
float: ${requestScope.cssRules.bidiRight};
white-space: nowrap;
}
<%--===================================================
FOOTER
===================================================--%>
.wptheme-footer {
clear:both;
width:100%;
color: ${colors.tc_footer_text_color};
text-align: center;
padding: 5px 0px;
font-size: ${requestScope.cssRules.fontSize.portalSmall};
margin-bottom: 10px;
}
.wptheme-footer a, .wptheme-footer a:visited, .wptheme-footer a:active {
color: ${colors.tc_footer_link_color};
text-decoration: none;
}
.wptheme-footer a:hover {
color: ${colors.tc_footer_link_color};
text-decoration: none;
}
<%--===================================================
DRAG AND DROP
===================================================--%>
.dndDropAware{
border: 0px;
background-color: ${colors.dndDropAwareBackground};
}
.dndDropActive{
border: 0px;
background-color: ${colors.dndDropActiveBackground};
}
.dndDropActiveCSA{
border: 2px dashed ${colors.dndDropActiveBackground};
}
.dndDropAwareVerticalCSA{
background-color: ${colors.dndDropAwareBackground};
height: 10px;
width: 100%;
min-width: 10px;
}
.dndDropAwareHorizontalCSA{
background-color: ${colors.dndDropAwareBackground};
height: 55px;
width: 10px;
}
.dndDragging{
width: 100%;
<c:if test="${requestScope.isMoz}">
-moz-opacity: .4;
</c:if>
<c:if test="${requestScope.isIE}">
filter: alpha(opacity=40);
</c:if>
}
.dndDragSelected{
border: 1px;
background-color: ${colors.dndDragSelectedBackground};
}
.dndMoveCursor{
cursor:move;
}
.dndDropCursor{
cursor: pointer;
}
.dndNoDropCursor{
cursor: not-allowed;
}
.dndStaticDropActiveVerticalCSA
{
background-color: ${colors.dndDropActiveBackground};
width: 100%;
height: 10px;
}
.dndStaticDropActiveHorizontalCSA
{
background-color: ${colors.dndDropActiveBackground};
width: 10px;
height: 55px;
}
<%--===================================================
CONTENT PALETTE
===================================================--%>
.wpsContentPaletteDragging {
width: 100%;
<c:if test="${requestScope.isMoz}">
-moz-opacity: .4;
</c:if>
<c:if test="${requestScope.isIE}">
filter: alpha(opacity=40);
</c:if>
}
.wpsContentPaletteDragging div {
background-color: ${colors.palettePortletSelectedBackground};
background: ${colors.palettePortletSelectedBackgroundImage};
font-weight: normal;
font-family: arial;
font-size: ${requestScope.cssRules.fontSize.portalSmall};
}
<%--===================================================
SKINS
===================================================--%>
.wpsPortlet{
margin: 5px;
<c:if test="${!empty colors.tc_skin_border_size && !empty colors.tc_skin_border_color}">
border: ${colors.tc_skin_border_size} solid;
border-color: ${colors.tc_skin_border_color};
</c:if>
background-color: #fff;
background-image:none;
}
.wpsPortletBody{
margin: 5px;
background-image:none;
}
.wpsPortletBodyInlineMode{
margin: 0px 5px 0px 5px;
vertical-align: top;
padding: 4px;
background-image:none;
<c:if test="${!empty colors.tc_skin_border_color}">
border-bottom: 1px dotted ${colors.tc_skin_border_color};
</c:if>
background-color: ${colors.skinInlineModeBackground};
}
.wpsPortletTitleBar{
font-family: ${requestScope.cssRules.portalSansSerif};
font-size: ${requestScope.cssRules.fontSize.portalLarge};
font-weight: bold;
color: ${colors.tc_skin_text_color};
<c:if test="${!empty colors.tc_skin_border_color}">
border-bottom: 1px dotted ${colors.tc_skin_border_color};
</c:if>
background: ${colors.skinTitleBarBackgroundImage};
background-color: ${colors.skinTitleBarBackground};
padding: 0px 5px 0px 5px;
width:100%;
white-space: nowrap;
/*margin: 2px 4px 2px 4px;*/
}
.wpsPortletTitleBar img {
vertical-align: middle;
}
.wpsPortletIcons {
text-align: ${requestScope.cssRules.bidiRight};
vertical-align: middle;
padding-${requestScope.cssRules.bidiRight}: 3px;
white-space: nowrap;
border: 0px;
}
.wpsPortletIcons a {
text-align: ${requestScope.cssRules.bidiRight};
vertical-align: middle;
padding-${requestScope.cssRules.bidiRight}: 3px;
white-space: nowrap;
border: 0px;
text-decoration: none;
}
.wpsPortletIcons a:hover {
text-align: ${requestScope.cssRules.bidiRight};
vertical-align: middle;
padding-${requestScope.cssRules.bidiRight}: 3px;
white-space: nowrap;
border: 0px;
text-decoration: none;
cursor: pointer;
color: ${colors.skinHoverAnchor};
}
.wpsPortletActions {
text-decoration: none;
font-size: ${requestScope.cssRules.fontSize.portalSmall};
color: ${colors.skinAnchor};
}
.wpsPortletActionsHover {
text-decoration: none;
font-size: ${requestScope.cssRules.fontSize.portalSmall};
background-color: ${colors.skinHoverAnchorBg};
color: ${colors.skinHoverAnchor};
}
.wpsPortletModes{
padding: 4px;
background-color: ${colors.skinModesBackground};
border-bottom: 1px dotted ${colors.tc_skin_border_color};;
font-weight: bold;
white-space: nowrap;
}
.wpsPortletModes a{
text-decoration: none;
color: ${colors.skinAnchor};
}
.wpsPortletModes a:active{
color: ${colors.skinActiveAnchor};
}
.wpsPortletModes a:visited{
color: ${colors.skinAnchor};
}
.wpsPortletModes a:hover{
background-color: ${colors.skinHoverAnchorBg};
color: ${colors.skinHoverAnchor};
}
.wpsPortletModesSpan{
padding-${requestScope.cssRules.bidiRight}: 15px;
}
.wpsActiveModeLink{
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
background-color: ${colors.skinActiveModeBackground};
color: ${colors.skinActiveModeAnchor};
text-decoration: none;
border: 1px solid ${colors.skinActiveModeBorder};
padding: 2px 5px 2px 5px;
}
.wpsActiveModeLinkHover{
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
background-color: ${colors.skinActiveModeHoverAnchorBg};
color: ${colors.skinActiveModeHoverAnchor};
text-decoration: none;
border: 1px solid ${colors.skinActiveModeBorder};
padding: 2px 5px 2px 5px;
}
<%-- Non-standard sized portlet titlebar icon - New in v5 --%>
<%-- Use this style if your skin icons aren't 12 x 12 px. This still enables resizing of the
icons via CSS for accessibility. When scaling non-standard sized icons, you don't know the
original size so it will look irregular. Use em units for scaling to make the size relative
to the font size. By default, this style has no definition. --%>
.wpsPortletTitleIconNonStandardSize, .wpsPortletTitleToolsIconNonStandardSize {
}
<%-- Thin Skin styles --%>
.wpsThinSkinContainerBar{
height: 12px;
border: 0px solid white;
margin-bottom: 2px;
}
.wpsThinSkinContainerBarBorder{
background: ${colors.skinTitleBarBackgroundImage};
background-position: bottom;
background-color: ${colors.skinTitleBarBackground};
}
.wpsThinSkinDragZoneContainer{
width: 75%;
display: inline;
float: ${requestScope.cssRules.bidiLeft};
}
.wpsThinSkinInvisible{
visibility: hidden;
}
.wpsThinSkinVisible{
visibility: visible;
}
.wpsThinSkinMenuContainer{
display: inline;
float: ${requestScope.cssRules.bidiRight};
padding-${requestScope.cssRules.bidiRight}: 3px;
}
.wptheme-skinWindowStates{
border: 0px;
cursor: pointer;
background-color: transparent;
}
<%-- Portlet Context menu link properties --%>
.wptheme-skinContextMenuTable {
background-color: ${colors.skinContextMenuBackground};
border: 1px solid ${colors.skinContextMenuBorder};
}
.wptheme-skinContextMenuItem {
color: ${colors.skinContextMenuAnchor};
text-decoration: none;
background-color: ${colors.skinContextMenuBackground};
}
.wptheme-skinContextMenuItemHover {
color: ${colors.skinContextMenuAnchorHover};
text-decoration: none;
background-color: ${colors.skinContextMenuBackground};
}
.wptheme-contextMenuIcon {
background: none;
border: 0px;
cursor: pointer;
padding: 0px;
margin: 0px;
}
<%-- Page Context menu link properties --%>
.wptheme-pageContextMenuTable {
background-color: ${colors.pageContextMenuBackground};
border: 1px solid ${colors.pageContextMenuBorder};
}
.wptheme-pageContextMenuTable a:hover, .pageContextMenuTable a:active {
color: ${colors.pageContextMenuAnchorHover};
text-decoration: none;
background-color: ${colors.pageContextMenuAnchorHoverBackground};
}
.wptheme-pageContextMenuItem {
color: ${colors.pageContextMenuAnchor};
text-decoration: none;
background-color: ${colors.pageContextMenuBackground};
}
.wptheme-pageContextMenuItemHover {
text-decoration: none;
background-color: ${colors.pageContextMenuAnchorHoverBackground};
}
.wptheme-pageContextMenuItemHover a{
color: ${colors.pageContextMenuAnchorHover};
}
.wptheme-lightboxDisabledBackground {
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
opacity: 0.7;
filter: alpha(opacity=70);
background-color: #000000;
}
.wptheme-lightboxBorderBox {
position: absolute;
z-index: 101;
background-color: #FFFFFF;
border: 2px solid #000000;
}
.wptheme-lightboxBorderBox iframe {
width: 100%;
height: 100%;
border: 0px;
}
.wptheme-lightboxCloseLink {
padding: 4px;
color: #FFFFFF;
z-index: 101;
}
.wptheme-lightboxCloseLink:hover {
color: #FFFFFF;
}
.wptheme-lightboxIcon {
border: 0px;
padding: 3px;
}
.wptheme-lightboxLinks {
float:${requestScope.cssRules.bidiLeft};
padding-${requestScope.cssRules.bidiLeft}: 5px;
}