1 Reply Latest reply on May 14, 2007 10:29 AM by françois LEFEVRE

    tab order with a customized theme

    françois LEFEVRE Newbie

      hi,

      I made my own theme but I've a little problem with my tabs :
      tab order is reversed

      If I try with another theme (default themes) : tab order is good

      so I think it's related to my css theme

      here is my theme :

      /*****************
       * MDP Theme CSS *
       ******************/
      
       #body {
       /*background-image: url( images/portal_background.gif );*/
       margin: 0px;
       padding: 0px;
       }
      
       /*****************
       * Portal Header *
       ******************/
      
       /* spacer to keep header at certain width regardless of display size
       done to avoid overlapping of tab navigation in header */
       #spacer {
       width: 770px;
       line-height: 0px;
       font-size: 0px;
       height: 0px;
       }
      
       /* Wrapper for Header */
       #header-container {
       background:url("images/banier_right.jpg") ;
       background-repeat: repeat-x;
       height: 100%;
       min-width: 770px;
       width: 100%;
       /* test to reposition header on page
       position: absolute;
       bottom: 5px;*/
       }
      
      
       /* Header background */
       #header {
       /*float:right;*/
       width:100%;
       background: url("images/bannier.gif") ;
       background-repeat: no-repeat;
       line-height:normal;
       }
      
       /*#header ul {
       margin:0;
       padding:56px 10px 0 0%;
       list-style:none;
       }*/
      
       #header_topbar {
       background-image:url("images/topbar.gif");
       background-repeat: repeat-x;
       width:100%;
       height: 100%;
       }
      
       /* *** Affichage du logo *** */
      
       #logoName {
       /* Original Logo...*/
       /*background-image: url( images/JBossLogo.gif );*/
      /*
      background-image: url( images/logologin.jpg);
       background-repeat: no-repeat;
       width: 89px;
       height: 80px;
       position: absolute;
       left: 5px;
       top: 5px;
      
       z-index: 2;
      */
       }
      
       #logoParis {
       /* Original Logo...*/
       background-image: url( images/logo_mdeparis.gif);
       background-repeat: repeat;
       width: 140px;
       height: 17px;
      
       }
       /************************
       * Portal Layout Regions *
       *************************/
      
       /* *** Menu Vertical *** */
       .leftnav{
       background-image:url(images/leftnav.jpg);
       background-repeat: no-repeat;
       margin-left:5px;
       padding-left:20px;
       padding-top:2px;
       padding-bottom: 2px;
       display:block;
       text-decoration: none;
       color: #000000;
       height: 20px;
       }
      
       .leftnavsub{
       background-image: url(images/submenu.gif);
       display: block;
       height: 19px;
       margin-left: 8px;
       padding-top: 2px;
       padding-left: 7px;
       color: #333333;
       }
      
       .hide{
       display: none;
       }
      
       .show{
       display: block;
       }
      
       /* wrapper for entire portal. starts/ends after/before body tag */
      #portal-container {
      /* part of below IE hack to preserve min-width for portlet regions */
      /*width: 100%;*/
      
      
       padding: 0 350px 0 350px;
      }
      
      /* min width for IE */
      #expander {
       position: relative;
       padding: 0 0 0 0;
      
       margin: 0 -350px 0 -350px;
       min-width: 770px;
       padding: 0 0 0 0;
      }
      
      /* min width hack for IE */
      #sizer {
       width: 100%;
      }
      
      /* IE Hack \*/
      * html #portal-container,
       * html #sizer,
       * html #expander {
       height: 0;
      }
      
      /* end IE min-width hack */
      
      /* table that contains all regions. does not include header */
      
      #content-container {
       height: 100%;
       text-align: left;
       width: 100%;
       min-width: 770px;
       /*
       position: absolute;
       top: 70px;
       left: 0px; / * z-index: 1; * /
       / * part of below IE hack
      padding: 0 350px 0 350px; * /
       padding: 0px 100px 0px 0px;
       */
      }
      
      /* Login JSP Selectors */
      #login-container {
       position: relative;
       left: 35%;
       top: 55px;
       right: 45%;
       width: 320px;
       height: 250px;
       margin: 0px;
      }
      
      #login-container label, #login-container input {
       display: block;
       float: left;
       width: auto;
       margin-top: 15px;
      }
      
      #login-container label {
       text-align: right;
       padding-right: 20px;
       width: 95px;
      }
      
      #login-container br {
       clear: left;
      }
      
      #loginButton {
      
      }
      
      #login-container legend {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 13px;
       font-weight: bold;
       color: #768591;
      }
      
      #loginForm {
       margin: 0px;
       padding: 0px;
      }
      
      /* end Login Page Selectors */
      
       /* portlet regions within content-container. this includes footer-container. */
      #regionA {
       /* test to swap columns...
       float: right; */
      
       width: 30%;
       float: left;
       margin: 0px;
       padding: 0px;
       min-width: 250px; /*height: 300px;*/
      }
      
      #regionB {
       /* test to swap columns..
      margin: 0 30% 0 0; */
      
       /*two column layout
      margin: 0 0 0 30%;*/
       padding: 0px; /* test to add 3rd region in layout...*/
       width: 67%;
       float: left; /*height: 300px;*/
      }
      
      #regionC {
      /* inclusion of 3rd region - comment out for 2 region testing */
       padding: 0px;
       margin: 0px;
       width: 28%;
       float: left; /*hide 3rd region*/
       display: none;
      }
      
       /* give a maximized portlet more space */
       #regionMaximized {
       width: 100%;
       float: left;
       margin: 0px;
       padding: 0px;
       min-width: 400px;
       }
      
       #footer-container {
       /* margin: 30px 25% 0 25%;*/
       text-align: center;
       width: 100%;
       }
      
      #navigation-container {
       margin: 0px;
       position: absolute;
       width: 100%;
       z-index: -1;
      }
      
      
       /* used to clear float in regionA,B,C divs so that
       footer spans bottom of page */
       hr.cleaner {
       clear: both;
       height: 1px;
       margin: -1px 0 0 0;
       padding: 0;
       border: none;
       visibility: hidden;
       }
      
       /****************************
       * Tab Navigation for Header *
       *****************************/
      
      UL#tabsHeader {
       margin: 0;
       padding-left: 0px;
       margin-top: 58px;
       margin-right: 9px;
       min-width: 550px;
       z-index: 100; /* added for submenu hover */
      /*position: relative; added for submenu hover */
       list-style:none;
      }
      
      UL#tabsHeader li {
       float:right;
       background:url("images/onglet_left.gif") no-repeat left top;
       margin:0;
       padding:0 0 0 9px;
       list-style:none;
      }
      
      /*UL#tabsHeader li:hover {
       background-image: url( images/highlightedTab.gif );
       background-repeat: repeat-x;
      }*/
      
      /* hover selectors for main header tabs done to deal
      with IE not liking hover pseudo class on li */
      
      /*UL#tabsHeader li.hoverOn {
       background-image: url( images/highlightedTab.gif );
       background-repeat: repeat-x;
      }*/
      
      /*UL#tabsHeader li.hoverOff {
       background-image: none;
      }*/
      
      
      UL#tabsHeader a {
       float:right;
       display:block;
       background:url("images/onglet_right.gif") no-repeat right top;
       padding:9px 15px 4px 6px;
       text-decoration:none;
       color:#596874;
       font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
       font-size: 12px;
      }
      
      UL#tabsHeader a:hover {
       color:#000;
       font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
       font-size: 12px;
      }
      
      UL#tabsHeader #current a {
       background-image:url("images/onglet_right_on.gif");
       color:#333;
       padding-bottom:3px;
       font-weight:bold;
      }
      
      UL#tabsHeader #current {
       background-image:url("images/onglet_left_on.gif");
      }
      
      
      /* Begin Submenu selectors */
      
      /* hide the sub levels and give them a positon absolute so that they take up no room */
      
      /* UL#tabsHeader ul {
       margin:0;
       padding:55px 10px 0;
       list-style:none;
      }
      
      UL#tabsHeader ul a {
       font: 12px;
       font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
       font-weight: normal;
       color: #5078aa;
      
      }
      
      UL#tabsHeader ul a:hover {
       font: 12px;
       font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
       font-weight: normal;
       color: #5078aa;
      } */
      
      /* UL#tabsHeader #current ul a {
       background-image:url("images/onglet_right_on.gif");
       color:#333;
       padding-bottom:3px;
       font-weight:bold;
      } */
      
      /* UL#tabsHeader li:hover ul {
       visibility: visible;
      }
      
      UL#tabsHeader ul li {
       background: #EDECEC;
       color: #5078aa;
       padding: 3px;
       width: 120px;
      
       border: 1px solid #FFFFFF;
       border-width: 1px 1px 0 0;
      
       margin-left: 0px;
       margin-top: 0px;
       margin-right: 0px;
      }
      
      UL#tabsHeader ul li:hover {
       background: #E2E2E2;
      } */
      
      /* End Submenu selectors */
      
      /* used for sub navigation if applicable
      UL#tabsHeader #currentSubNav, UL#tabsHeader #currentSubNav a {
       color: #000;
       line-height: 19px;
       padding-top: 0px;
       padding-bottom: 1px;
       margin-bottom: -1px;
       background: #eeeeef;
      }*/
      
      /* Tab background color for selected global nav item */
      li.currentTabBackground {
       background: #fff;
      }
      
      /* used for sub navigation if applicable
      li.currentTabBackgroundSubNav {
       background: #eeeeef;
      }*/
      
      /* backslash hack for IE5-Mac \*/
      UL#tabsHeader a {
       float: none;
      }
      
      /* End Mac Hack */
      html>body UL#tabsHeader a {
       width: auto;
      }
      
      /* fixes IE6 win hack */
      
      
      /***************************
      * Utility Navigation *
      *****************************/
      
      #dashboardnav {
       float: right;
       font-size: 10px;
       padding: 6px 12px 0px 0px;
       color: #000000;
       z-index: 20;
      }
      
      #dashboardnav a {
       color: #000000;
      }
      
      #dashboardnav .addcontent {
       background-image: url( images/ico_addcontent.gif );
       background-repeat: no-repeat;
       background-position: left;
       height: 20px;
       width: 20px;
       padding-left: 16px;
      }
      
       /****************************
       * Portlet Container Windows *
       *****************************/
      
       .portlet-container {
       /*margin: 10px;*/
       padding: 5px;
       }
      
       .portlet-titlebar-title {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 11px;
       font-weight: 500;
       color: #596874;
       white-space: nowrap;
       line-height: 100%;
       float: left;
       text-indent: 15px;
       }
      
       .portlet-titlebar-decoration {
       background-image: url( images/portlet-win-decoration.gif );
       background-repeat: no-repeat;
       height: 11px;
       width: 11px;
       float: left;
       position: relative;
       top: 6px;
       }
      
       /* wrapper for floating portlet window modes */
       .portlet-mode-container {
       float: right;
       }
      
       .portlet-titlebar-left {
       background-image: url( images/portlet-top-left.gif );
       background-repeat: no-repeat;
       width: 9px;
       height: 33px;
       background-position: right;
       min-width: 9px;
       }
      
       .portlet-titlebar-center {
       background-image: url( images/portlet-top-middle.gif );
       background-repeat: repeat-x;
       height: 33px;
       }
      
       .portlet-titlebar-right {
       background-image: url( images/portlet-top-right.gif );
       background-repeat: no-repeat;
       width: 10px;
       height: 33px;
       min-width: 10px;
       }
      
       .portlet-content-left {
       background-image: url( images/portlet-left-vertical.gif );
       height: 100%;
       background-repeat: repeat-y;
       background-position: right;
       width: 9px;
       min-width: 9px;
       }
      
       .portlet-content-center {
       background-color: #f7f7f7;
       background-repeat: repeat;
       vertical-align: top;
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       }
      
       .portlet-body {
       background-color: #f7f7f7;
       }
      
       .portlet-content-right {
       background-image: url( images/portlet-right-vertical.gif );
       height: 100%;
       background-repeat: repeat-y;
       background-position: left;
       width: 10px;
       min-width: 10px;
       }
      
       .portlet-footer-left {
       background-image: url( images/portlet-bottom-left.gif );
       width: 9px;
       height: 9px;
       background-repeat: no-repeat;
       background-position: top right;
       min-width: 9px;
       }
      
       .portlet-footer-center {
       background-image: url( images/portlet-bottom-middle.gif );
       height: 14px;
       background-repeat: repeat-x;
       }
      
       .portlet-footer-right {
       background-image: url( images/portlet-bottom-right.gif );
       width: 10px;
       height: 9px;
       background-repeat: no-repeat;
       min-width: 10px;
       }
      
       /***********************
       * Portlet Window Modes *
       ************************/
       .portlet-mode-maximized {
       background-image: url( images/maximize.gif );
       width: 16px;
       height: 23px;
       background-repeat: no-repeat;
       float: left;
       display: inline;
       cursor: pointer;
       }
      
       .portlet-mode-minimized {
       background-image: url( images/minimize.gif );
       width: 16px;
       height: 23px;
       background-repeat: no-repeat;
       float: left;
       display: inline;
       cursor: pointer;
       }
      
       .portlet-mode-normal {
       background-image: url( images/normal.gif );
       width: 16px;
       height: 23px;
       background-repeat: no-repeat;
       float: left;
       display: inline;
       cursor: pointer;
       }
      
       .portlet-mode-help {
       background-image: url( images/help.gif );
       width: 16px;
       height: 23px;
       background-repeat: no-repeat;
       float: left;
       display: inline;
       cursor: pointer;
       }
      
       .portlet-mode-edit {
       background-image: url( images/edit.gif );
       width: 16px;
       height: 23px;
       background-repeat: no-repeat;
       float: left;
       display: inline;
       cursor: pointer;
       }
      
       .portlet-mode-remove {
       background-image: url( images/remove.gif );
       width: 16px;
       height: 23px;
       background-repeat: no-repeat;
       float: left;
       display: inline;
       cursor: pointer;
       }
      
       .portlet-mode-view {
       background-image: url( images/view.gif );
       width: 16px;
       height: 23px;
       background-repeat: no-repeat;
       float: left;
       display: inline;
       cursor: pointer;
       }
      
       .portlet-mode-reload {
       background-image: url( images/reload.gif );
       width: 16px;
       height: 23px;
       background-repeat: no-repeat;
       float: left;
       display: inline;
       cursor: pointer;
       }
      
       /**********************
       * Copyright Selectors *
       ***********************/
       .portal-copyright {
       width:600px;
       height:25px;
       /* background-color:#94CFEF; */
       background-image: url( images/PageBottom.gif );
       background-repeat: repeat-x;
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 9px;
       color: #5E6D7A;
       }
      
       a.portal-copyright {
       color: #768591;
       text-decoration: none;
       }
      
       a.portal-copyright:hover {
       color: #96A5B1;
       text-decoration: none;
       }
      
       #ThemeBy:before {
       content: "Theme by Unisys";
       }
      
       /*************
       * Elements *
       **************/
       a {
       color: #768591;
       text-decoration: none;
       }
      
       a:hover {
       color: #96A5B1;
       text-decoration: none;
       }
      
       INPUT {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       }
      
       SELECT {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       }
      
       FONT {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       color: #768591;
       }
      
       FIELDSET {
       background-color: #f7f7f7;
       border: 1px solid #BABDB6;
       padding: 6px;
       }
      
       LEGEND {
       background-color: transparent;
       padding-left: 6px;
       padding-right: 6px;
       padding-bottom: 0px;
       font-size: 12px;
       }
      
      
       /*******************
       * Table Selectors *
       ********************/
       /* Table header */
       .portlet-table-header {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 12px;
       font-weight: bold;
       background-color: #768591;
       color: #fff;
       }
      
       /* Normal text in a table cell */
       .portlet-table-body {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       }
      
       /* Text in every other row in the table */
       .portlet-table-alternate {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       background-color: #ececec;
       }
      
       /* Text in a selected cell range */
       .portlet-table-selected {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       background-color: #768591;
       color: #fff;
       }
      
       /* Text of a subheading */
       .portlet-table-subheader {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       font-weight: bold;
       }
      
       /* Table footer */
       .portlet-table-footer {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 10px;
       }
      
       /* Text that belongs to the table but does not fall in one of the other categories (e.g. explanatory or help text that is associated with the table). */
       .portlet-table-text {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       font-style: italic;
       }
      
       /********
       * FONTS *
       *********/
      
       /* Font attributes for the normal fragment font.
      Used for the display of non-accentuated information */
       .portlet-font {
       color: #000;
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       /*margin-top: 7px;
       margin-bottom: 5px;*/
       }
      
       /* Font attributes similar to the portlet.font but the color is lighter */
       .portlet-font-dim {
       color: #888385;
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       }
      
       /********
       * FORMS *
       *********/
      
       /* Text used for the descriptive label of the whole form (not the label for fields)...why not call this portlet-form-title? */
       .portlet-form-label {
       color: #000;
       text-decoration: none;
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       font-weight: bold;
       }
      
       /* Text on a form button */
       .portlet-form-button {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       color: #000;
       }
      
       /* Text that appears beside a context dependent action icon */
       .portlet-icon-label {
      
       }
      
       /* Text that appears beside a "standard" icon (e.g Ok, or Cancel)
      not sure if we need this one?.. */
       .portlet-dlg-icon-label {
      
       }
      
       /* Text for form field labels */
       .portlet-form-field-label {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       color: #000;
       vertical-align: bottom;
       }
      
       /* Text for a form field */
       .portlet-form-field {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       color: #000;
       margin-top: 10px;
       }
      
       /* Text of the user-input in an input field. not sure if we need this guy? */
       .portlet-form-input-field {
       color: #000;
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       }
      
       /********
       * LINKS *
       *********/
      
       .portal-links:link {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       font-weight: bold;
       color: #242424;
       text-decoration: none;
       }
      
       .portal-links:hover {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       font-weight: bold;
       color: #5699B7;
       text-decoration: none;
       }
      
       .portal-links:active {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       font-weight: bold;
       color: #242424;
       text-decoration: none;
       }
      
       .portal-links:visited {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       font-weight: bold;
       color: #242424;
       text-decoration: none;
       }
      
       /***********
       * MESSAGES *
       ************/
      
       /* Status of the current operation. */
       .portlet-msg-status {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       font-style: normal;
       color: #788793;
       }
      
       /* Help messages, general additional information, etc. */
       .portlet-msg-info {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       font-style: italic;
       color: #000;
       }
      
       /* Error messages. */
       .portlet-msg-error {
       color: red;
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       font-weight: bold;
       }
      
       /* Warning messages. */
       .portlet-msg-alert {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       font-weight: bold;
       color: #821717;
       }
      
       /* Verification of the successful completion of a task. */
       .portlet-msg-success {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       font-weight: bold;
       color: #359630;
       }
      
       /***********
       * SECTIONS *
       ************/
      
       /* Table or section header */
       .portlet-section-header {
       font-weight: bold;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 12px;
       color: #768591;
       background-color: #f7f7f7; /*background-image: url(interf/head.jpg);*/
       }
      
       /* Normal text in a table cell */
       .portlet-section-body {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 11px;
       }
      
       /* Text in every other row in the cell */
       .portlet-section-alternate {
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       background-color: #ececec;
       }
      
       /* Text in a selected cell range */
       .portlet-section-selected {
       background-color: #768591;
       font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
       font-size: 11px;
       color: #fff;
       }
      
       /* Text of a subheading */
       .portlet-section-subheader {
       font-weight: bold;
       font-size: 11px;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       color: #000;
       /*margin: 3px;
       padding: 3px;*/
       }
      
       /* Table or section footnote */
       .portlet-section-footer {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       background-color: #f7f7f7;
       font-size: 10px;
       }
      
       /* Text that belongs to the table but does not fall in one of the other categories
      (e.g. explanatory or help text that is associated with the section. */
       .portlet-section-text {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 11px;
       font-style: italic;
       }
      
       /********
       * MENUS *
       *********/
      
       /*General menu settings such as background color, margins, etc. */
       .portlet-menu {
      
       }
      
       /* Normal, unselected menu item. */
       .portlet-menu-item {
       color: #242424;
       text-decoration: none;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 9px;
       }
      
       .portlet-menu-item:hover {
       color: #5699B7;
       text-decoration: none;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 9px;
       }
      
       /* Selected menu item. */
       .portlet-menu-item-selected {
      
       }
      
       /* Selected menu item when the mouse hovers over it. */
       .portlet-menu-item-selected:hover {
      
       }
      
       /* Normal, unselected menu item that has sub-menus. */
       .portlet-menu-cascade-item {
      
       }
      
       /* Selected sub-menu item that has sub-menus */
       .portlet-menu-cascade-item-selected {
      
       }
      
       /* Descriptive text for the menu (e.g. in a help context below the menu) */
       .portlet-menu-description {
      
       }
      
       /* Menu caption */
       .portlet-menu-caption {
      
       }
      
       /* A separator bar similar to a horizontal rule, but with styling matching the page */
       .portlet-horizontal-separator {
       }
      
       /* Allows portlets to mimic the title bar when nesting something */
       .portlet-nestedTitle-bar {
       }
      
       /* Allows portlets to match the textual character of the title on the title bar. */
       .portlet-nestedTitle {
       }
      
       /* Support portlets having tabs in the same style as the page or other portlets */
       .portlet-tab {
       }
      
       /* Highlight the tab currently being shown */
       .portlet-tab-active {
       }
      
       /* Highlight the selected tab (not yet active) */
       .portlet-tab-selected {
       }
      
       /* A tab which can not be currently activated */
       .portlet-tab-disabled {
       }
      
       /* Top level style for the content of a tab. */
       .portlet-tab-area {
       }
      
      
      
      
       /***************** Menu Vertical *****************/
       .leftbuttontype{
      background-image:url(images/leftbuttontype2.jpg);
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:14px;
      }
      
      
      /****************** Breadcorumb *******************/
       .breadcorumb {
       background-image:url(images/breadcrumb.gif);
       background-repeat: no-repeat;
       width: 250px;
       height: 100%;
       }
      



      thanks for your help! :)