Jquery ui theme overwriting datatables css - css

Question

I can't figure out why my jquery ui themeroller won't play nice with my datatables I'm trying to include in a dialog. The datatable uses the jquery-ui color and the columns are not readable. Am I missing something?
Here is my HTMl:
<div id="dvAdvanced" class="display" style="padding-top:40px;">
<table id="tblAdvSearch">
<thead>
<tr>
<th>Drawing #</th>
<th>Project</th>
<th>Customer</th>
<th>Created By</th>
<th>Date Created</th>
</tr>
</thead>
<tbody>
<tr>
<td>1#Html.DisplayFor(model => model.PartNumber)</td>
<td>2#Html.DisplayFor(model => model.RFQ)</td>
<td>3#Html.DisplayFor(model => model.customer_id)</td>
<td>#Html.DisplayFor(model => model.CreatedBy)</td>
<td>#Html.DisplayFor(model => model.DateCreated)</td>
</tr>
</tbody>
</table>
</div>
Here is my javascript:
$(document).ready(function () {
$("#btnAdvSearch").button();
$("#btnGenPart").button();
dlgAdvSearch = $("#dlgAdvSearch").dialog({
"jQueryUI": true,
title: "Advanced Search",
autoOpen: false,
height: 500,
width: 900,
modal: true,
buttons: {
Close: function () {
dlgAdvSearch.dialog("close");
}
}
});
$("#tabs").tabs();
$("#tblQuickSearch").dataTable();
$("#tblAdvSearch").dataTable();
$("#btnAdvSearch").button().on("click", function () {
dlgAdvSearch.dialog("open");
});;
});
And finally here is my bundleconfig:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/jquery-ui.min.css",
"~/Content/jquery-ui.structure.min.css",
"~/Content/jquery-ui.theme.min.css",
"~/Content//DataTables/css/jquery.dataTables.css",
"~/Content//DataTables/css/dataTables.jqueryui.css",
"~/Content/DataTables/css/jquery.dataTables_themeroller.css",
"~/Content/DataTables/css/dataTables.bootstrap.css"));