Different classes for book levels?

Question: Can you help me out with telling me how to define the elements to style each level individually?

Example: I have three levels in my book structure. The code generated by the booktree module shows:

-----------------------------------------------------------------------------------------

• Test Book Page 1
• Test Book Page 1 Child Page 1
• Test Book Page 1 Child Page 1 Grandchild Page 1

-----------------------------------------------------------------------------------------

I have tried adding the following to the booktree.css style sheet file:

-----------------------------------------------------------------------------------------

li.booktree tree-level-1 {
background:url(images/button-bg-level-1.png);
border:1px solid white;
margin-top:100px;
}

li.booktree tree-level-2 {
background:url(images/button-bg-level-2.png);
border:1px solid yellow;
margin-top:20px;
}

li.booktree tree-level-3 {
background:url(images/button-bg-level-3.png);
border:1px solid green;
margin-top:20px;
}

-----------------------------------------------------------------------------------------

That didn't work, so I tried again using:

-----------------------------------------------------------------------------------------

.booktree tree-level-1 {
background:url(images/button-bg-level-1.png);
border:1px solid white;
margin-top:100px;
}

.booktree tree-level-2 {
background:url(images/button-bg-level-2.png);
border:1px solid yellow;
margin-top:20px;
}

.booktree tree-level-3 {
background:url(images/button-bg-level-3.png);
border:1px solid green;
margin-top:20px;
}

-----------------------------------------------------------------------------------------

That didn't work either. Can you tell what I am doing wrong? I'm sure it's something with the syntax of how I'm defining the element in the stylesheet as it relates to how the class is defined by the module. I'm not that experienced with working with stylesheets on things like this.

Thanks if you can help me get each level to style differently. That would be a huge help with what I'm trying to do with this section of the site I'm working on.

That worked! Thanks a bunch!

One more question though. I'm also trying to change the image used with li tags with this. Instead of it showing a little dot in front of each entry as the default li setting for this theme has, I'm trying to have it have tree-like lines leading from the parent pages to the child pages and the child pages to the grandchild pages to give the hierarchy a more visual component. I tried:

------------------------------------------------------------------------------------

.booktree .tree-level-1 li {
list-style-image:url(images/li.png)
}

.booktree .tree-level-2 li {
list-style-image:url(images/li-level-2.png)
}

.booktree .tree-level-3 li {
list-style-image:url(images/li-level-3.png)
}

------------------------------------------------------------------------------------

I also tried:

------------------------------------------------------------------------------------

.booktree .tree-level-1 .li {
list-style-image:url(images/li.png)
}

.booktree .tree-level-2 .li {
list-style-image:url(images/li-level-2.png)
}

.booktree .tree-level-3 .li {
list-style-image:url(images/li-level-3.png)
}

------------------------------------------------------------------------------------

and

------------------------------------------------------------------------------------

.booktree li.tree-level-1 {
list-style-image:url(images/li.png)
}

.booktree li.tree-level-2 {
list-style-image:url(images/li-level-2.png)
}

.booktree li.tree-level-3 {
list-style-image:url(images/li-level-3.png)
}

------------------------------------------------------------------------------------

and

------------------------------------------------------------------------------------

.booktree .tree-level-1 ul li {
list-style-image:url(images/li.png)
}

.booktree .tree-level-2 ul li {
list-style-image:url(images/li-level-2.png)
}

.booktree .tree-level-3 ul li {
list-style-image:url(images/li-level-3.png)
}

------------------------------------------------------------------------------------

But none of those worked. I don't know the correct syntax here, so I just try different things until something works. I try to exhaust all options I can think of trying before I hit the boards with questions.

The li-level-2.png and li-level-3.png files have different lines leading to the entry that I will hopefully be able to extend from just below the entry above to the left side of the current entry in an L shaped line. The li.png file is the default single dot. I want the dot for all the parent pages and lines leading to the child and grandchild pages.

Sorry for the stupid Style Sheet 101 kind of questions, but I'm gradually learning as I go and I've had a lot of trouble understanding the syntax for more advanced levels of styling like this. I'm fine with basic class and id styling, but when it gets into multiple levels like this, I get lost. I figure someone else might benefit from seeing this thread down the road as well as helping me now.