diff --git a/demo/example.css b/demo/demo.css
similarity index 100%
rename from demo/example.css
rename to demo/demo.css
diff --git a/demo/demo.html b/demo/demo.html
index e64374b..0fcf0b0 100644
--- a/demo/demo.html
+++ b/demo/demo.html
@@ -9,20 +9,22 @@
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   <script src="../responsiveslides.min.js"></script>
   <script>
-  jQuery(function() {
-    // Slideshow 1
-    $("#slides1").responsiveSlides({
-      maxwidth: 800
-    });
+    $(function () {
+
+      // Slideshow 1
+      $("#slides1").responsiveSlides({
+        maxwidth: 800
+      });
+
+      // Slideshow 4
+      $("#slides2").responsiveSlides({
+        auto: true,
+        pagination: true,
+        fade: 300,
+        maxwidth: 540
+      });
 
-    // Slideshow 4
-    $("#slides2").responsiveSlides({
-      auto: true,
-      pagination: true,
-      fade: 300,
-      maxwidth: 540
     });
-  });
   </script>
 </head>
 <body>
diff --git a/demo/themes/img/psd/arrows.psd b/demo/themes/img/psd/arrows.psd
deleted file mode 100644
index bd3a37f..0000000
Binary files a/demo/themes/img/psd/arrows.psd and /dev/null differ
diff --git a/demo/themes/css/styles.css b/demo/themes/themes.css
similarity index 91%
rename from demo/themes/css/styles.css
rename to demo/themes/themes.css
index 74a0f44..5e0fefd 100644
--- a/demo/themes/css/styles.css
+++ b/demo/themes/themes.css
@@ -25,10 +25,16 @@ body {
   }
 
 h1 {
-  font: 600 24px/32px sans-serif;
+  font: 600 28px/36px sans-serif;
   margin: 50px 0;
   }
 
+h3 {
+  font: 600 18px/24px sans-serif;
+  color: #999;
+  margin: 0 0 20px;
+  }
+
 .rslides {
   margin: 0 auto;
   }
@@ -51,7 +57,7 @@ h1 {
   text-decoration: none;
   height: 61px;
   width: 38px;
-  background: transparent url(../img/arrows.gif) no-repeat left top;
+  background: transparent url("themes.gif") no-repeat left top;
   margin-top: -45px;
   }
 
@@ -94,7 +100,7 @@ h1 {
   top: 0;
   bottom: 0;
   left: 0;
-  background: #000 url(../img/arrows.gif) no-repeat left 50%;
+  background: #000 url("themes.gif") no-repeat left 50%;
   width: 38px;
   }
 
diff --git a/demo/themes/img/arrows.gif b/demo/themes/themes.gif
similarity index 100%
rename from demo/themes/img/arrows.gif
rename to demo/themes/themes.gif
diff --git a/demo/themes/demo_themes.html b/demo/themes/themes.html
similarity index 55%
rename from demo/themes/demo_themes.html
rename to demo/themes/themes.html
index 3a71cd3..7387309 100644
--- a/demo/themes/demo_themes.html
+++ b/demo/themes/themes.html
@@ -2,48 +2,50 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title>Alternative pagination styles</title>
+  <title>ResponsiveSlides.js &middot; Alternative themes</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
   <link rel="stylesheet" href="../../responsiveslides.css" />
-  <link rel="stylesheet" href="css/styles.css" />
+  <link rel="stylesheet" href="themes.css" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   <script src="../../responsiveslides.js"></script>
   <script>
-  jQuery(function() {
-    // Slideshow 1
-    $("#slides1").responsiveSlides({
-      auto: false,
-      pagination: true,
-      nav: true,
-      fade: 300,
-      maxwidth: 800
-    });
+    $(function () {
+
+      // Slideshow 1
+      $("#slides1").responsiveSlides({
+        auto: false,
+        pagination: true,
+        nav: true,
+        fade: 300,
+        maxwidth: 800
+      });
+
+      // Slideshow 2
+      $("#slides2").responsiveSlides({
+        auto: false,
+        pagination: true,
+        nav: true,
+        fade: 300,
+        maxwidth: 800
+      });
+
+      // Slideshow 3
+      $("#slides3").responsiveSlides({
+        auto: false,
+        pagination: false,
+        nav: true,
+        fade: 300,
+        maxwidth: 800
+      });
 
-    // Slideshow 2
-    $("#slides2").responsiveSlides({
-      auto: false,
-      pagination: true,
-      nav: true,
-      fade: 300,
-      maxwidth: 800
-    });
-    
-    // Slideshow 3
-    $("#slides3").responsiveSlides({
-      auto: false,
-      pagination: false,
-      nav: true,
-      fade: 300,
-      maxwidth: 800
     });
-  });
   </script>
 </head>
 <body>
   <div id="wrapper">
-    <h1>Alternative pagination styles</h1>
+    <h1>Three different ways to use next/prev buttons</h1>
 
-    <!-- Slideshow 1 -->
+    <h3>Vertically centered on both sides</h3>
     <div class="rslides_container">
       <ul id="slides1">
         <li><img src="../1.jpg" alt="" /></li>
@@ -52,7 +54,7 @@
       </ul>
     </div>
 
-    <!-- Slideshow 2 -->
+    <h3>Transparent buttons over the left and right side</h3>
     <div class="rslides_container">
       <ul id="slides2">
         <li><img src="../1.jpg" alt="" /></li>
@@ -60,8 +62,8 @@
         <li><img src="../3.jpg" alt="" /></li>
       </ul>
     </div>
-    
-    <!-- Slideshow 3 -->
+
+    <h3>100% height with vertically centered icons</h3>
     <div class="rslides_container">
       <ul id="slides3">
         <li><img src="../1.jpg" alt="" /></li>
