css не работает в системе вкладок jquery

Я работаю над своим сайтом, и сейчас я использую вкладки, проблема связана с ним.

это мой код jquery:

$(function() {
$( "#tabs" ).tabs();

// fix the classes
$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
  .removeClass( "ui-corner-all ui-corner-top" )
  .addClass( "ui-corner-bottom" );

// move the nav to the bottom
$( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" );
});

это файл css:

    #box1 {
    margin-bottom: 25px;
    background: #FFFFFF url(images/homepage13.jpg) no-repeat left top;
}
#box1-ing {
    margin-bottom: 25px;
}
#box1-ing .content {
    padding: 17px;
    color: #4D5E5F;
}
#box1 .content {
    min-height: 110px;
    padding: 17px;
    background: url(images/homepage14.jpg) no-repeat right bottom;
    color: #4D5E5F;
}

#box1 h1 { color: #275157; }
#box1-ing h1 { color: #275157; }

#box1 a { color: #56773D; }
#box1-ing a { color: #56773D; }

#box1 .link1 { color: #FFFFFF; }
#box1-ing .link1 { color: #FFFFFF; }

#box1 .tabs {
    clear: both;
    height: 40px;
    background: url(images/homepage17.jpg) no-repeat right top;
}
#box1-ing .tabs {
    clear: both;
    height: 40px;
    background: url(images/homepage17.jpg) no-repeat;
}

#box1 .tabs ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: normal;
}
#box1-ing .tabs ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: normal;
}

#box1 .tabs li { float: left; }
#box1-ing .tabs li { float: left; }

#box1 .tabs a {
    display: block;
    float: left;
    width: 132px;
    height: 32px;
    padding: 111px 0px 0px 28px;
    background: url(images/homepage16.jpg) no-repeat left top;
    text-decoration: none;
    font-weight: bold;
    color: red;
}
#box1-ing .tabs a {
    display: block;
    float: left;
    width: 132px;
    height: 32px;
    padding: 8px 0px 0px 28px;
    background: url(images/homepage16.jpg) no-repeat left top;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
}

и thats my html:

 <div id="box1">
  <div id="tabs" class="tabs-bottom">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div class="content"><img src="images/homepage12.jpg" alt="" width="117"  height="117" class="left" />
    <div id="tabs-1">
      <p></p>
    </div>
    <div id="tabs-2">
      <p></p>
    </div>
    <div id="tabs-3">
      <p></p>
      <p>/p>
    </div>
    <p style="margin-left: 142px; margin-top :10px;"><a href="#" class="link1">Read Full Story</a></p>
        </div>
      </div>                    
    </div>

теперь проблема в том, что css не работает над тегами "a", а весь остальной файл html получает файл css, а не имена вкладок в вкладке div.

вкладки box1-ing находятся на другой странице, а вкладки работают так, как мне нужно.

код box1-ing html:

<div id="box1-ing">
                    <?php if(in_array($include_file, $home) ){ ?> 
                        <div class="tabs">
                            <ul>
                                <li <?php if($include_file == '') { echo "class='active'";}?>><a href="">User Info</a></li>
                                <li <?php if($include_file == '') { echo "class='active'";}?>><a href="">Inventory</a></li>
                                <li <?php if($include_file == '') { echo "class='active'";}?>><a href="">Company</a></li>
                                <li <?php if($include_file == '') { echo "class='active'";}?>><a href="">Newsletter</a></li>
                                <li <?php if($include_file == '') { echo "class='active'";}?>><a href="">My Account</a></li>
                            </ul>
                        </div>
                    <?php };?>
                    <div class="content">
                        <?php include_once($include_file);?>
                    </div>
                </div>