diff --git a/docs/index.html b/docs/index.html
index 1c7a32a0..0514eada 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -137,7 +137,7 @@
 	<a id="Demo"></a>
 	<h1>Demo</h1>
 
-	<table id="tablesorter-demo" class="tablesorter">
+	<table id="tablesorter-demo" class="tablesorter-blue">
 		<thead>
 			<tr>
 				<th>Account #</th>
@@ -548,7 +548,7 @@
 		<span class="label label-info">TIP!</span> Click on the link in the property column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
 	</div>
 
-	<table id="options" class="tablesorter options" data-sortlist="[[0,0]]">
+	<table id="options" class="tablesorter-blue options" data-sortlist="[[0,0]]">
 		<thead>
 			<tr>
 				<th class="property">Property</th>
@@ -2129,7 +2129,7 @@ $(function(){
 	<a id="Widget-options"></a>
 	<h1>Widget &amp; Pager Options</h1>
 
-	<table class="tablesorter compatibility" data-sortlist="[[0,0]]">
+	<table class="tablesorter-blue compatibility" data-sortlist="[[0,0]]">
 		<thead>
 			<tr><th>Widget Priority</th><th>Name</th><th>Requires jQuery</th><th>Limiting function</th></tr>
 		</thead>
@@ -2161,7 +2161,7 @@ $(function(){
 		<span class="label label-info">TIP!</span> Click on the link in the property column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
 	</div>
 
-	<table id="widget-options" class="tablesorter options" data-sortlist="[[0,0]]">
+	<table id="widget-options" class="tablesorter-blue options" data-sortlist="[[0,0]]">
 		<thead>
 			<tr>
 				<th class="property">Property</th>
@@ -4593,7 +4593,7 @@ $.extend($.tablesorter.themes.jui, {
 		<span class="label label-info">TIP!</span> Click on the link in the method column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
 	</div>
 
-	<table id="method" class="tablesorter options" data-sortlist="[[0,0]]">
+	<table id="method" class="tablesorter-blue options" data-sortlist="[[0,0]]">
 		<thead>
 			<tr>
 				<th>Method</th>
@@ -5227,7 +5227,7 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
 		<span class="label label-info">TIP!</span> Click on the link in the event column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
 	</div>
 
-	<table id="event" class="tablesorter options" data-sortlist="[[0,0]]">
+	<table id="event" class="tablesorter-blue options" data-sortlist="[[0,0]]">
 		<thead>
 			<tr>
 				<th>Event</th>
@@ -5617,7 +5617,7 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
 		<span class="label label-info">TIP!</span> Click on the link in the variable column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
 	</div>
 
-	<table class="api" data-sortlist="[[0,0]]">
+	<table class="api tablesorter-blue" data-sortlist="[[0,0]]">
 		<thead>
 			<tr>
 				<th class="setwidth">Variable</th>
@@ -6408,7 +6408,7 @@ $.each( p.cacheIndex, function(i, v) {
 		<h4>Functions</h4>
 		<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
 	</div>
-	<table id="functions" class="api" data-sortlist="[[0,0]]">
+	<table id="functions" class="api tablesorter-blue" data-sortlist="[[0,0]]">
 		<thead>
 			<tr>
 				<th class="setwidth">Function</th>