RadPanelBar Third Level Indent

[MIS]

We are using radPanelBar as a menu for our customer facing site. It seems to be doing a good job so far. I have couple of issues though.
I need to be able to indent items beyond the second level it supports by default. How do I go about doing that?
Any pointers/help will be appriciated.
Thanks
Sid

Heres an example:

This is how the menu is organized:
Home
+ Section 1
    + Sub-Section 1
        - Sub-Sub - Section 1
        - Sub-Sub - Section 2
        + Sub-Sub Section 3
            - Item 1
            - item 2
            - item 3

I have my CSS style defined and working fine for upto Sub-Section 1, there after the indenting for Sub-Sub Section 3 is same as Sub-Section1. Can someone give me an idea of what I should be doing to achieve the new level of indent.

Heres my CSS code for your reference:

------------------- Start CSS code -------------------

/* telerik r.a.d.panelbar 4 eNora2 skin */

/* panelbar wrapper */
.RadPanelbar_eNora2
{
 /*background-color: #3767A5;*/
 white-space: nowrap;
 width: 200px !important; /* this skin requires fixed width */
}

.RadPanelbar_eNora2 ul,
.RadPanelbar_eNora2 li
{ 
 text-align:left;
    font-size: 8pt;
    line-height: 19px;
} 

.RadPanelbar_eNora2 .rootGroup
{
 border: solid 1px #8EA95C;
}

/* global text class declaration */
.RadPanelbar_eNora2 .text
{
 padding: 0px 15px; /* vertical - horizontal */
 font: bold 8pt Arial, Verdana, Sans-serif;
 
}

/* panelbar icon [if any] */
.RadPanelbar_eNora2 .image
{
 margin: 0px 0px;
}

 

.RadPanelbar_eNora2 .rootGroup .text
{
 /*background: url('Img/horzarrow.png') no-repeat 1px center;*/
 line-height: 19px;
 
 
}

/* main item link */
.RadPanelbar_eNora2 .rootGroup a.link
{
 background: url('Img/MainItemNormal.gif') repeat-x;
 color: #FFFFFF;
 line-height: 19px;
 border-bottom: solid 1px #3767A5;
}

/* main item link:hover */
.RadPanelbar_eNora2 .rootGroup a.link:hover
{
 background: url('Img/MainItemSelected.gif') repeat-x;
 color: #3767a5;
}

 

/* child items enclosing parent element */
.RadPanelbar_eNora2  .group
{
 /*background: url('Img/ChildItemNormal.gif') repeat-y;*/
 /*background: #f6d101 url('Img/level1_bg.jpg') no-repeat;*/
}
/* child item link */
.RadPanelbar_eNora2 .rootGroup .group a.link
{
 /*background: url('Img/ChildItemSeparator.gif') no-repeat left bottom;*/
 background: #f6d101 url('Img/level1_bg.png') no-repeat;
 color: black;
 border-bottom: 0px;
}

/* child item link:hover */
.RadPanelbar_eNora2 .group a.link:hover
{
 /*background: url('Img/ChildItemSeparator.gif') no-repeat left bottom;*/
 color: white;
}

/* child item .text declaration */
.RadPanelbar_eNora2 .group .text
{
 padding: 0px 20px;
 line-height: 19px;
 font-weight: normal;
}

.RadPanelbar_eNora2 .level1 .first a.link,
.RadPanelbar_eNora2 .level1 .first a.link:hover
{
 background: #f6d101 url('Img/level1top_bg.png') no-repeat;
 
}

.RadPanelbar_eNora2 .group .level1 a.link,
.RadPanelbar_eNora2 .group .level1 a.link:hover
{
 background: #f6d101 url('Img/level1_bg.png') no-repeat;
 
 
}

.RadPanelbar_eNora2 .level1 .text
{
 padding-left: 25px;
 line-height: 19px;
 /*background: url('Img/Bullet.gif') no-repeat 36px center;*/
}

 

.RadPanelbar_eNora2 .group .level2 a.link
{
 background: #f6d101 url('Img/level2_bg.png') no-repeat;
 color: Black;
}

.RadPanelbar_eNora2 .group .level2 a.link:hover
{
 background: #f6d101 url('Img/level2_bg.png') no-repeat;
 color: White;
 
}

/*.RadPanelbar_eNora2 .group .level2 .last a.link,
.RadPanelbar_eNora2 .group .level2 .last a.link:hover
{
 background: url('Img/ChildItemNormal.gif') repeat-y;
}*/

 

.RadPanelbar_eNora2 .level2 .text
{
 padding-left: 38px;
 line-height: 19px;
 /*background: url('Img/Bullet.gif') no-repeat 36px center;*/
}

.RadPanelbar_eNora2 .rootGroup .expandable .text
{
 background: url('Img/horzarrow.png') no-repeat left center;
 line-height: 19px;
}
.RadPanelbar_eNora2 .level1 .expandable .text
{
 background: url('Img/horzarrow2.png') no-repeat left center;
}

/* selected main panelbar item */
.RadPanelbar_eNora2 .rootGroup .expanded .text
{
 background: url('Img/vertarrow.png') no-repeat left center;
 line-height: 19px;
}

.RadPanelbar_eNora2 .level1 .expanded .text
{
 background: url('Img/vertarrow2.png') no-repeat left center;
}

.RadPanelbar_eNora2 .group .level1 .selected .text
{
 padding-left: 45px;
 background: url('Img/vertarrow.png') no-repeat left center;
 line-height: 19px;
}

/* selected child panelbar item */
/*.RadPanelbar_eNora2 .group .selected .text
{
 background: transparent;
 
}*/

.RadPanelbar_eNora2 .rootGroup .disabled:hover,
.RadPanelbar_eNora2 .disabled .text
{
 display:none;
 background: url('Img/MainItemNormal.gif') no-repeat;
 color: #ccc;
 cursor: default;
}

.RadPanelbar_eNora2 .rootGroup .group .disabled:hover,
.RadPanelbar_eNora2 .rootGroup .group .disabled .text
{
 text-decoration: none;
 background: #f6d101 url('Img/Level2Bg.gif') repeat-y;
 color: #ccc;
 cursor: default;
}

.RadPanelbar_eNora2 .group .level2 .disabled,
.RadPanelbar_eNora2 .group .level2 .disabled:hover
{
 background: #f6d101 url('Img/Level2Bg.gif') repeat-y;
}

.RadPanelbar_eNora2 .group .level2 .disabled .text,
.RadPanelbar_eNora2 .group .level2 .disabled:hover .text
{
 background: url('Img/Bullet.gif') no-repeat 36px center;
}

.RadPanelbar_eNora2 .haschildren
{
 background: url('Img/horzarrow.png') no-repeat 4px center;
}

---------------- End CSS Code -------------

[nbushnell]

you should just be copy the styles for level2 and rename them to level3 and edit as necessary.

for example:

.RadPanelBar_xxx .rpLevel3 .rpText
{
    cursor:default;
}

.RadPanelBar_xxx_rtl .rpLevel3 .rpLink
{
    /*margin-right: 21px;
    margin-left: 0;*/
}

good luck