diff --git a/docs/toolbars/bars-themes.html b/docs/toolbars/bars-themes.html
index 97a4e346..e4fe6afa 100755
--- a/docs/toolbars/bars-themes.html
+++ b/docs/toolbars/bars-themes.html
@@ -12,7 +12,7 @@
 
 <div data-role="page">
 	
-	<div data-role="header" data-position="inline">
+	<div data-role="header">
 		<h1>Bar theming </h1>
 	</div>
 	
@@ -49,7 +49,7 @@
 		<h2>Theme variations</h2>
 		<p>This is a demo of the variation that can be achieved by tweaking the theme swatches and buttons inside the headers and footers.</p>
 		<h3>Headers</h3>
-	</div>
+
 		
 		<div data-role="header" data-position="inline">
 			<h1>Bar theme "a"</h1>
@@ -95,25 +95,46 @@
 			<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
 		</div>
 
-		<div data-role="content" class="ui-body">
-			<h3>Footers</h3>
-		</div>   
+    <h3>Footers</h3>
+	<p>These are examples of a footer with link buttons inside.</p>
 		
 
 	
-	<div data-role="footer" data-position="inline">
-		<div>
-		<a href="index.html" data-icon="arrow-l" data-iconpos="right">left</a>
-		<a href="index.html" data-icon="arrow-r" data-iconpos="right">right</a>
-		<a href="index.html" data-icon="arrow-u" data-iconpos="right">up</a>
-		<a href="index.html" data-icon="arrow-d" data-iconpos="right">down</a>
-		<a href="index.html" data-icon="plus" data-iconpos="right">plus</a>
-		<a href="index.html" data-icon="minus" data-iconpos="right">minus</a>
-		<a href="index.html" data-icon="delete" data-iconpos="right">delete</a>
-		</div>
+	<div data-role="footer" data-theme="a">
+            <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
+            <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
+            <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
+            <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
 	</div>
+    
+	<div data-role="footer" data-theme="b">
+            <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
+            <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
+            <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
+            <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
+	</div>
+    
+    <div data-role="footer" data-theme="c">
+            <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
+            <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
+            <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
+	</div>
+    
+    	<div data-role="footer" data-theme="d">
+            <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
+            <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
+            <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
+            <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
+		</div>
+    
+    	<div data-role="footer" data-theme="e">
+            <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
+            <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
+            <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
+            <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
+		</div>
+
 
-	<p></p>
 </div>
 
 </body>