remove background colour from jquery tabs

Question

I would like to remove the background grey colour of the container holding the 2 tabs. So only the tabs are coloured. Ive removed all the CSS but not joy. It must be coming from the the JQuery .tabs(), can anyone advise how I can remove this?

$(document).ready(function() {
  $(".shoptab").tabs();
});

#list ul {
     border-radius: 0;
     background: none;
     border: 0;
     border-bottom: 1px solid #cbcdcd;
   }
   #list ul li {
     border-radius: 0;
   }
   #list {
     border: 0;
   }
   .ui-state-default,
   .ui-widget-content .ui-state-default,
   .ui-widget-header .ui-state-default {
     border-color: #e4e4e4;
     background: #f2f2f2;
     color: #cbcbcb;
   }
   .ui-state-default {
     color: #e7e7e7;
   }
   .ui-state-active,
   .ui-widget-content .ui-state-active,
   .ui-widget-header .ui-state-active {
     border-color: #cbcdcd;
     background: #fff;
     color: #333333;
   }
   .ui-state-hover,
   .ui-widget-content .ui-state-hover,
   .ui-widget-header .ui-state-hover {
     border: 1px solid #cbcdcd;
   }
   .ui-state-selected ui-state-hover,
   #ui-state-active ui-state-hover {
     background: #fff:
   }
   .ui-state-default a,
   .ui-state-default a:link,
   .ui-state-default a:visited {
     color: #a9a9a9;
   }
   .ui-state-hover a,
   .ui-state-hover a:hover {
     color: #333333;
   }
   .ui-state-active a,
   .ui-state-active a:link,
   .ui-state-active a:visited {
     color: #333333;
   }
   #list li ul li {
     margin-left: 10px;
     font-size: 11px;
     font-weight: bold;
     font-family: Arial, Verdana, sans-serif;
   }
   #list li ul li a {
     padding: 4px 7px 4px 7px;
   }
   #list li ul {
     margin: 0;
   }

<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<div id="loc-list">
  <div class="shoptab">
    <h2>Shop 1</h2>

    <ul>
      <li><a href="#tabs-1">Address</a>

      </li>
      <li><a href="#tabs-2">Opening hours</a>

      </li>
    </ul>
    <div id="tabs-1">
      <p>Tab 1 content</p>
    </div>
    <div id="tabs-2">
      <p>Tab 2 content</p>
    </div>
  </div>
</div>

Answer 1

You need to remove style border and background for element .ui-widget-header

.ui-widget-header {
   border: 0px;
   background: none;
}

Working Demo

Answer 2

I think this is what you're looking for. I used white but you can add whatever color you like.

.ui-widegt-header a{
width: 100%
background-color: none;
}