<%--
Section index:
  General elements
  Banner
    Main Menu
    Bread crumb trail
    Toolbar
  Top Navigation
  Side Navigation
  Drag and Drop
  
--%>

<%--=================================================== 
  GENERAL 
===================================================--%>

body, html 
{
width: 100%;
margin: 0;
padding: 0;
} 

body 
{
  font-family: ${requestScope.cssRules.fontFamilySansSerif};
  font-size: ${requestScope.cssRules.fontSize.normal};
  background-color: ${colors.bodyBackground};
  color: ${colors.bodyText};
  margin: 0px;
  padding: 0px;
}

table, input, textarea, button, select 
{
  font-family: ${requestScope.cssRules.fontFamilySansSerif};
  font-size: ${requestScope.cssRules.fontSize.small}; 
}

<%-- select has a special font family to fix a problem in Simplified Chinese --%>

<c:if test="${!empty requestScope.cssRules.fontFamilySansSerifSelect}">
select 
{
  font-family: ${requestScope.cssRules.fontFamilySansSerifSelect};
}
</c:if>

div, span, p, ul, li, td, th { 
  font-family: ${requestScope.cssRules.fontFamilySansSerif};
}

pre {
  font-family: ${requestScope.cssRules.fontFamilyMonospace};
  font-size: ${requestScope.cssRules.fontSize.large};
}

img
{
  vertical-align:middle;
}
a, .wpsLink
{
  color: ${colors.bodyAnchor};
}
a:visited, .wpsLink:visited { 
  color: ${colors.bodyAnchorVisited};
}
<%-- this conflicts with main-menu-item selected
a:hover, .wpsLink:hover { 
  color: ${colors.bodyAnchorHover};
}--%>
a:active, .wpsLink:active {
  color: ${colors.bodyAnchorActive};
}
.generalErrorText {
  color: ${colors.errorText};
}
<%-- a block containing only floated elements will not expand to enclose them.
This is resolved by including a <div style="clear:both;"></div>.
Since it is not floated, the containing block expands to include it.
This class can be applied to the clearing div for cleaner markup than an inline style 
--%>
.clearing {
  clear: both;
}

.layoutRow {width: 100%; }
.layoutColumn {width: 100%; }

#FLYParent {min-width: 1000px;}

#mainContent {
  padding: 5px;
}
<%-- wraps banner and topnav --%>
.themeHeader {
  width:100%;
  margin: 0px;
  padding: 0px;
  clear: both;
  <c:if test="${!empty colors.themeHeaderBackgroundImage}">
  background: ${colors.themeHeaderBackgroundImage};
  background-color: ${colors.themeHeaderBackground};
  </c:if>
}
<%--=================================================== 
  BANNER 
===================================================--%>

.banner {
  color: ${colors.bannerText};
  background: ${colors.bannerBackgroundImage};
  background-color: ${colors.bannerBackground};
  border-bottom: 1px solid;
  border-bottom-color: ${colors.bannerBorder};
  margin: 0px;
  padding: 0px;
}

.bannerTitle{
  font-family: ${requestScope.cssRules.fontFamilySansSerifLarge};
  font-size: ${requestScope.cssRules.fontSize.xxlarge};
  color: ${colors.bannerTitleText};
  font-weight: bold;
  padding-left: 20px;
}
<%--=================================================== 
  MAIN MENU
===================================================--%>

.launch {
  float:${requestScope.cssRules.bidiLeft};
  border: 0px;
  color: ${colors.launchButtonText};
  font-family: ${requestScope.cssRules.fontFamilySansSerifLarge};
  font-size: ${requestScope.cssRules.fontSize.large};
  font-weight: bold;
  cursor: pointer;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  background: ${colors.launchButtonBackgroundImage};
  background-color: ${colors.launchButtonBackground};
}
.launch img {
  vertical-align: baseline;   
}
<%-- Launch button link properties --%>
.launch a, .launch a:visited, .launch a:hover, .launch a:active{
  text-decoration: none;
}
.launch:hover {
  background: ${colors.launchButtonHoverBackgroundImage};
  background-color: ${colors.launchButtonBackground};
}

.main-menu {
  color: ${colors.launchMenuText};
  background-color: ${colors.launchMenuBackground};
  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;
}

.main-menu-border {
  border: 0px;  
}

.main-menu-item, .main-menu-item:visited  {
  background-color: ${colors.launchMenuBackground};
  color: ${colors.launchMenuText} !important;
  text-decoration: none;  
  padding:3px;
  white-space:nowrap;
  font-size: ${requestScope.cssRules.fontSize.normal}
}

.main-menu-item-selected {
  background:${colors.launchMenuSelectedBackgroundImage};
  background-color: ${colors.launchMenuSelectedBackground};
  color: ${colors.launchMenuSelectedText} !important;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: ${colors.launchMenuSelectedBorder};
  cursor:pointer;
  white-space:nowrap;
  text-decoration: none;  
  padding:3px;
  font-size: ${requestScope.cssRules.fontSize.normal}
}

.main-menu-item-selected a{
  background: none;
  background-color: transparent;
}
/* prevent border on selected item from getting inherited by  menu icons */
.main-menu-item-selected img, .main-menu-item img{
  border: 0px;
  background: none;
  background-color: transparent;
  height: 16px;
  width: 16px;
}

.main-menu-item .portlet-separator { 
  margin:0px; 
  line-height:1px;
  background-color: #999999;
}
.portlet-separator { 
  margin:0px; 
  line-height:1px;
  background-color: #444444;
}


<%--=================================================== 
  BREAD CRUMB TRAIL 
===================================================--%>

.breadcrumbNav {
    float:${requestScope.cssRules.bidiLeft};
    padding: 7px 5px;

}    
<%-- breadcrumbNav link properties --%>
.breadcrumbNav a, .breadcrumbNav a:visited, .breadcrumbNav a:hover, .breadcrumbNav a:active{
    color: ${colors.bannerText};
    text-decoration: none; 
}

<%--=================================================== 
  Search Control 
===================================================--%>

.searchControl {
    float:${requestScope.cssRules.bidiRight};
    color: ${colors.bannerText};
    background-color: transparent;
    margin-${requestScope.cssRules.bidiRight}: 5px;
    margin-top: 3px;
}

<%-- visual focus is compliant with padding --%>
.searchControl input{
    margin-${requestScope.cssRules.bidiRight}: -2px;
    margin-top: 0px; 
  padding: 2px;
}

<%--=================================================== 
  TOOLBAR 
===================================================--%>

.toolbar {
    float:${requestScope.cssRules.bidiRight};
    color: ${colors.bannerText};
    background-color: transparent;
    margin-${requestScope.cssRules.bidiRight}: 5px;
}

.wpsToolBar p{
  font-family: ${requestScope.cssRules.fontFamilySansSerif};
  font-size: ${requestScope.cssRules.fontSize.normal};
  width:100%;
  color:white;
}

.toolbarLink {
    background-color: transparent;
    text-decoration: none;
}

.toolbarLink img {
    padding: 2px 2px;
    border: 0px;
    vertical-align: middle;
}
<%-- toolbar link properties --%>
a.toolbarLink, a.toolbarLink:visited, a.toolbarLink:hover, a.toolbarLink:active{
    color: ${colors.bannerText};
    text-decoration: none;
}



<%--=================================================== 
  TOP NAVIGATION
===================================================--%>
.wpsPageBarFirstRow, .wpsPageBar {
  margin:0px;    
  clear: both;
  white-space: nowrap;
  width: 100%;
  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.fontFamilySansSerifLarge};
  font-size: ${requestScope.cssRules.fontSize.large};
  <c:if test="${empty colors.themeHeaderBackgroundImage}">
  background: ${colors.topNavFirstRowBackgroundImage};
  background-color: ${colors.topNavFirstRowBackground};
  </c:if>
}
.wpsPageBar {
  font-family: ${requestScope.cssRules.fontFamilySansSerif};
  font-size: ${requestScope.cssRules.fontSize.normal};
  color: ${colors.topNavRowText};
  background: ${colors.topNavRowBackgroundImage} ;
  background-color: ${colors.topNavRowBackground};
  padding: 3px 0px;
  clear: both;
}
<%-- bottom of first row navigation tab. Not shown if a second row is visible --%>
.pageBarSeparator {
  background-color:${colors.topNavFirstRowSelectedBackground};
  width: 100%;
  height: 6px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-top-color: ${colors.topNavFirstRowSelectedBorder};
  border-bottom-color: ${colors.topNavFirstRowSelectedBorder};
  clear: both;
  padding: 0px;

}
<%-- one pixel separator between rows of top navigation --%>
.pageBarSeparator1 {
  background-color:${colors.topNavFirstRowSelectedBorder};
  width: 100%;
  height: 1px;
  clear: both;
  padding: 0px;
}
<%--  --%>
.wpsPageBarFirstRow li, .wpsPageBar li {
  font-family: ${requestScope.cssRules.fontFamilySansSerifLarge};
  margin-${requestScope.cssRules.bidiLeft}: 2px;
  float:${requestScope.cssRules.bidiLeft};
  list-style: none;  
}
.wpsPageBarFirstRow li {
  margin-top: 3px;
  margin-bottom: -1px; <%-- this makes tab appear connected to separator bar below--%>
  padding: 4px 8px; 
}
.wpsPageBar li {
  padding: 3px 8px;
}

<%-- Selected tab on Page bar --%>
.wpsSelectedPage{
  color: ${colors.topNavFirstRowSelectedText};
  background:${colors.topNavFirstRowSelectedBackgroundImage};
  background-color: ${colors.topNavFirstRowSelectedBackground};
  border: 1px solid;
  border-color: ${colors.topNavFirstRowSelectedBorder};       
  border-bottom-color:${colors.topNavFirstRowSelectedBackground};<%-- this makes tab appear connected to separator bar below --%>       
}
<%-- Selected tab on Page bar --%>
.wpsPageBar .wpsSelectedPage{
  color: ${colors.topNavRowSelectedText};
  background: ${colors.topNavRowSelectedBackgroundImage};
  background-color: ${colors.topNavRowSelectedBackground};
  border: 1px solid;
  border-color: ${colors.topNavRowSelectedBorder};
  <c:if test="${isMoz}">
  -moz-border-radius: 4px;
  margin-bottom: -1px;
  </c:if>
}
<%-- Link in Selected tab on Page bar --%>
.wpsSelectedPage a, .wpsSelectedPage a:visited, .wpsSelectedPage a:hover, .wpsSelectedPage a:active{
  color: ${colors.topNavFirstRowSelectedText};
  text-decoration: none;
}

<%-- Unselected tabs on Page bar --%>
.wpsPageBarFirstRow .wpsUnSelectedPage{
  color: ${colors.topNavFirstRowUnSelectedText};
  background: ${colors.topNavFirstRowUnSelectedBackgroundImage};
  background-color: ${colors.topNavFirstRowUnSelectedBackground};
  border: 1px solid;
  border-color: ${colors.topNavFirstRowUnSelectedBorder};       
}
<%--  --%>
.wpsUnSelectedPage{
  color: ${colors.topNavRowUnSelectedText};
}

<%-- Link in Unselected tabs on Page bar --%>
.wpsUnSelectedPage a, .wpsUnSelectedPage a:visited, .wpsUnSelectedPage a:hover, .wpsUnSelectedPage a:active{
  color: ${colors.topNavRowUnSelectedText};
  text-decoration: none;
}

<%-- page context menu link--%>
.menuLink {
  border: 0;
  margin-${requestScope.cssRules.bidiLeft}: 4px;
}

<%--=================================================== 
  SIDE NAVIGATION
===================================================--%>


.wpsSideNav{
    font-size: ${requestScope.cssRules.fontSize.normal};
    border: 1px solid;
    border-color: ${colors.sideNavBorder};
    text-decoration: none;
    white-space:nowrap;
    background-color:${colors.sideNavBackground};
    margin-top:0px;
    margin-bottom:0px;
    margin-${requestScope.cssRules.bidiLeft}: 0px;
    padding-${requestScope.cssRules.bidiLeft}: 0px;
    /* This is a fix for the IE peekaboo bug */
    <c:if test="${requestScope.isIE}"> {height: 1%;} </c:if>
}
/* first sublist is not indented */
.wpsSideNav ul{
    margin-${requestScope.cssRules.bidiLeft}: 1.5em;
    padding-${requestScope.cssRules.bidiLeft}: 0px;
}
/* indent sublists nested 2 levels or deeper  */
.wpsSideNav ul ul{
    margin-${requestScope.cssRules.bidiLeft}: 1.5em;
    padding-${requestScope.cssRules.bidiLeft}: 0px;
}


.wpsSideNav li{
    display:inline;
    list-style: none;
    margin-${requestScope.cssRules.bidiLeft}: 0px;
    padding-${requestScope.cssRules.bidiLeft}: 0px;

}

.wpsNavItem{
  text-decoration: none;
  padding: 3px 3px; 
  display:block;
  white-space:nowrap;
  color:${colors.sideNavText} !important;
}

.wpsNavItem a {
  display: inline;
}

.selected{
  color: ${colors.sideNavSelectedText} !important;
  background-color: ${colors.sideNavSelectedBackground};
  text-decoration: none;
  padding:3px 3px;
  display:block;
  cursor:default;
  white-space:nowrap;
}

.selected a {
  background-image:none;
  background-color:transparent;
  display: inline;
  cursor: pointer; 
  text-decoration: none;
}

.wpsNavIcon{
    height: 9px;
    width: 9px;
    border: 0px;
    padding: 0px;
    margin: 0px;
    vertical-align: baseline;
}


.menuLinkSideNav {
    border: 0px;
    margin-${requestScope.cssRules.bidiLeft}: -10px;
    padding: 0px 10px;
}

.wpsNavLevel1{
  color: ${colors.sideNavTopLevelText} !important;
  font-size: ${requestScope.cssRules.fontSize.large};
  padding-top: 3px;
  font-family: ${requestScope.cssRules.fontFamilySansSerifLarge};
}

.selected .wpsNavLevel1{
  color: ${colors.sideNavTopLevelSelectedText} !important;
    
}

.wpsNavLevel2 wpsNavLevel3 wpsNavLevel4 wpsNavLevel5 wpsNavLevel6 wpsNavLevel7 wpsNavLevel7{
  text-indent:36px;    
}

<%--=================================================== 
  FLYOUT
===================================================--%>
.portalFlyout{
  position: absolute; 
  left: -390px; 
  width: 382px;
  background-color: ${colors.bodyBackground};
}

.portalFlyoutExpanded{
  position: absolute;
  border-top: 1px solid;
  border-${requestScope.cssRules.bidiLeft}: 1px solid;
  border-bottom: 1px solid;
  border-top-color: ${colors.paletteHeaderBorder};
  border-${requestScope.cssRules.bidiLeft}-color: ${colors.paletteHeaderBorder};
  border-bottom-color: ${colors.paletteHeaderBorder};
  background-color: ${colors.bodyBackground}; 
}

.portalFlyoutCollapsed{
  position: absolute;
  background-color: ${colors.bodyBackground};
}  
  
.portalFlyoutIframe{
  border: 0px;
}

<%--=================================================== 
  FOOTER
===================================================--%>
.footer {
  clear:both;
  <%--position:fixed;--%>
  width:100%;
  height:26px;
  min-height:26px;
  bottom: 0;
  background-color: ${colors.footerBackground};
  color:${colors.footerText};
  background: ${colors.footerBackgroundImage};
  border-top: 1px solid;         
}

.quickLinks {
  font-size: ${requestScope.cssRules.fontSize.small};
  background:${colors.footerBackgroundImage};
  background-color: ${colors.footerBackground};
  color:${colors.footerText};
  margin:0px;    
  white-space: nowrap;
  float:${requestScope.cssRules.bidiLeft};
  border-spacing: 5px 0px;
  padding-${requestScope.cssRules.bidiLeft}: 2px; <%-- browsers default to either left margin or padding of 40px for li indention --%>
  
}


.quickLinks li {
  margin-${requestScope.cssRules.bidiRight}: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
  float:${requestScope.cssRules.bidiLeft};
  list-style: none;
  padding: 2px 4px 2px 4px;   
    
}


.quickLinkItem{
    color: ${colors.footerText};
}

.quickLinkItem a, .quickLinkItem a:visited, .quickLinkItem a:hover, .quickLinkItem a:active{
    color: ${colors.footerText};
    text-decoration: none;
}



.wpsFLYflyout{
  border: 10px solid;
  border-color: ${colors.flyoutBorder};
  text-decoration: none;
  white-space:nowrap;
  background-color: ${colors.bodyBackground};
  color:${colors.bodyText};
}


<%--=================================================== 
  DRAG AND DROP 
===================================================--%>
.dndDropAware{
  border: 0px; 
  background-color: ${colors.dndDropAwareBackground};
}
.dndDropActive{
  border: 0px; 
  background-color: ${colors.dndDropActiveBackground};
}
.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;
}

<%--=================================================== 
  CONTENT PALETTE 
===================================================--%>
.contentPaletteDragClass{
    width: 100%; 
    <c:if test="${requestScope.isMoz}">
    -moz-opacity: .4;
  </c:if>
  <c:if test="${requestScope.isIE}">
    filter: alpha(opacity=40);
  </c:if>
}
.contentPaletteDragClass div
{
    background-color: ${colors.palettePortletSelectedBackground}; 
    background: ${colors.palettePortletSelectedBackgroundImage};
    font-weight: normal;
    font-family: arial;
    font-size: ${requestScope.cssRules.fontSize.small};
}

<%-- SKINS PORTLET TITLE --%>

<%-- used on portlet titlebar --%>

.wpsPortlet{
  margin:5px;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-color: ${colors.skinBorder};
  background-image:none;
}
.wpsPortletBody{
  margin: 5px;
  background-image:none;
}

.wpsPortletTitleBar{
  font-size: ${requestScope.cssRules.fontSize.large};
  color: ${colors.skinTitleBarText};
  background: ${colors.skinTitleBarBackgroundImage};
  background-color: ${colors.skinTitleBarBackground};
  padding-${requestScope.cssRules.bidiLeft}: 5px;
  width:100%;
  white-space: nowrap;
}

.wpsPortletTitleBar img{
  vertical-align:middle;
}

.wpsPortletIcons{
  text-align: ${requestScope.cssRules.bidiRight};
  vertical-align: top;
  padding-${requestScope.cssRules.bidiRight}: 3px;
}

<%-- 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: 1px 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;
}