Listing 1
/** menuTabs **/
/** You can create borders, and have image-free tabs, or you can use the icon keys (e.g.,
 af|menuTabs::selected-start-icon)to create tabs with more elaborate borders. An example of this is provided at the end
  of the sample. */

/** This isn't needed when you use icons for the tabs */
.AFTabBarItem:alias
{
  border-style: solid; 
  border-width: 1px 0px 0px 1px;
  border-left-color: #FFFFFF;
  border-top-color: #FFFFFF;
  padding: 2px 6px;
  background-color: #DDDDDD; 
  line-height:100%;
}

/* Remove the text decoration from all tabBar links  */
.AFTabBarLink:alias
{
  text-decoration:none;
}
/* Make the selected tab bold */
af|navigationPane::tabs-active
{
  font-weight: bold;
  font-size: 11px;
  color: #900000;
}
af|navigationPane::tabs-inactive
{
  font-weight: bold;
  font-size: 11px;
  color: #900000;
}

.MyLinkHoverColor:alias { color: #003300; }

af|navigationPane::tabs-inactive:hover
{
  -ora-rule-ref:selector(".MyLinkHoverColor:alias");
}

/** This is not used in the Trinidad skin, but menuTabs that use icons are define like the following */
/* af|navigationPaneTabs::tabs-start
{
  content:url(/skins/trinidad/skin_images/menuTabsEnabledStart.png); 
}
af|navigationPane::tabs-start:rtl
{
  content:url(/skins/trinidad/skin_images/menuTabsEnabledEnd.png); 
} 


Listing 2

<?xml version="1.0" encoding="ISO-8859-1"?>

<skins xmlns="http://myfaces.apache.org/trinidad/skin ">
  <skin>
    <id>mycompany.desktop</id>
    <family>mycompany</family>
    <render-kit-id>
      org.apache.myfaces.trinidad.desktop
    </render-kit-id>
    <style-sheet-name>
      skins/mycompany/myCompanySkin.css
    </style-sheet-name>
  </skin>
  <skin>
    <id>trinidad.desktop</id>
    <family>trinidad</family>
    <render-kit-id>
      org.apache.myfaces.trinidad.desktop
    </render-kit-id>
    <style-sheet-name>
      skins/trinidad/trinidadSkin.css
    </style-sheet-name>
  </skin>
</skins>