Tabs inside accordion issue

Tabs inside accordion issue

Hello! I am trying to create an accordion with tabs inside each section and I am running into an issue. In the Jquery css I added an image that was intended for the accordion only. The following is this css (added images in red) jquery-ui-1.9.1.custom.css:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { height:150px; width:700px; border: 1px solid #dcd9de; background: #dcd9de url(images/SmiteBanner.jpg) 50% 50% repeat-x; font-weight: bold; color: #665874; }

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #665874; text-decoration: none; }

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { height:150px; width:700px; border: 1px solid #d1c5d8; background: #eae6ea url(images/SmiteBannerGlow.jpg) 50% 50% repeat-x; font-weight: bold; color: #734d99; }

.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited { color: #734d99; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #7e7783; background: #5f5964 url(images/SmiteBannerGlow.jpg) 50% 50% repeat-x; font-weight: bold; color: #ffffff; }

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; text-decoration: none; }

The following is the html and script:


<script>
        $(function () {
            $("#tabs").tabs();
            $("#tabs2").tabs();
            $("#accordion").accordion({
            active: false,
            collapsible: true
            });
        });
    </script>

<body>
    <form id="form1" runat="server">
    <div class="accordionwrap">
    <div id="accordion">
        <h3></h3>
        <div>
            <div id="tabs" class="tabbed_box">   
<div class="tabbed_area">  
<ul class="tabs">  
<li><a href="#playercontent_1">Topics</a></li>  
<li><a href="#playercontent_2">Archives</a></li>  
<li><a href="#playercontent_3">Pages</a></li>  
</ul>  
<div id="playercontent_1" class="content">
<div class="pane">
            <p class="gradient">
                Top Players Rating</p>
            <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a>
<table cellpadding="0px" cellspacing="0px">
                <tr>
                    <td style="border-style: solid none solid solid; border-color: #4B7B9F; border-width: 1px;">
                        <input type="text" name="zoom_query" style="width: 100px; border: 0px solid; height: 17px; padding: 0px 3px; position: relative;">
                    </td>
                    <td style="border-style: solid; border-color: #4B7B9F; border-width: 1px;">
                        <input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
                    </td>
                </tr>
            </table>
</div>
</div>  
<div id="playercontent_2" class="content">
<div class="pane">
<p class="gradient">
                Top Players W/L</p>
            <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a>
<table cellpadding="0px" cellspacing="0px">
                <tr>
                    <td style="border-style: solid none solid solid; border-color: #4B7B9F; border-width: 1px;">
                        <input type="text" name="zoom_query" style="width: 100px; border: 0px solid; height: 17px; padding: 0px 3px; position: relative;">
                    </td>
                    <td style="border-style: solid; border-color: #4B7B9F; border-width: 1px;">
                        <input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
                    </td>
                </tr>
            </table>
</div>
</div>  
        <div id="playercontent_3" class="content">
<div class="pane">
<p class="gradient">
                Top Players Games played</p>
            <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a> <a href="http://www.test.com">Temp</a>
<table cellpadding="0px" cellspacing="0px">
                <tr>
                    <td style="border-style: solid none solid solid; border-color: #4B7B9F; border-width: 1px;">
                        <input type="text" name="zoom_query" style="width: 100px; border: 0px solid; height: 17px; padding: 0px 3px; position: relative;">
                    </td>
                    <td style="border-style: solid; border-color: #4B7B9F; border-width: 1px;">
                        <input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
                    </td>
                </tr>
            </table>
</div>
</div>  
</div>  
</div> 
        </div>
        <h3></h3>
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec turpis neque.
            </p>
        </div>
        <h3></h3>
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec turpis neque.
            </p>
        </div>
        <h3></h3>
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec turpis neque.
            </p>
        </div>
        <h3></h3>
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec turpis neque.
            </p>
        </div>
    </div>
    </div>
    </form>
</body>


My issue is that the image is getting added to the tabs. Is there anything I can do to prevent this from happening? Thanks in advance!