Bizarre nifty corners behaviour

[dartanian]

Hi, I'm trying to implement the traditional CSS-only nifty corners on two panes that are floating within the same DIV. With one pane, it works great. But with 2 panes, the border (and rounded corners) for the bottom of the first pain adopts the second pane's color. This happens on Win XP FF 2, Opera 9, and IE 7. Firebug shows that the bottom part of the first pane is using style tags for the second pane! I can't figure it out. I've tried changing from IDs to classes and back again. No luck. Please help.

CSS:

#right {        /* right pane within container */
    float: left;
    min-width: 15%;
    width: 25%;
    color: white;
    padding-left: 2%;
    font-size: 0.8em;
    }        
    #top_pane, #bot_pane{
        float: left;
        min-width: 50%;
        margin:0 2em 1em 2em;
        }
    #top_pane {
        background-color: #a08e64;
        }
    #bot_pane{    
        background-color: #083a08;
        }
 
        /* nifty corners  */
        #right  b.rtop, b.rbottom{display:block;background: #384f7f;}
 
        #top_pane  b.rtop b, b.rbottom b{display:block;height: 1px;
            overflow: hidden; background: #a08e64;}    
 
        #bot_pane b.rtop b, b.rbottom b{display:block;height: 1px;
            overflow: hidden; background: #083a08;}
 
        #right  b.r1{margin: 0 5px;}  
        #right  b.r2{margin: 0 3px;}
        #right  b.r3{margin: 0 2px;}
        #right  b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}    
 
 

HTML:

        <div id="right">
 
            <div id="top_pane">
                <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
                    <div id="top"> 
                        &nbsp
                    </div>    
                <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
            </div>
 
            <div id="bot_pane">
                <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
                    <div id="bottom"> 
                        &nbsp
                    </div>    
                <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
            </div>
 
        </div>