diff --git a/demo/demo.css b/demo/demo.css
index a22e911..c301447 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -40,13 +40,10 @@ p,h3,h4,pre {
   }
 
 .rslides {
-  box-shadow: 0 0 20px #000;
-  -moz-box-shadow: 0 0 20px #000;
-  -webkit-box-shadow: 0 0 20px #000;
   margin: 0 auto 40px;
   }
 
-#slides2 {
+.rslides2 {
   box-shadow: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
@@ -106,9 +103,6 @@ a {
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
-  box-shadow: 0 0 10px #000;
-  -moz-box-shadow: 0 0 10px #000;
-  -webkit-box-shadow: 0 0 10px #000;
   display: block;
   font-size: 20px;
   font-weight: bold;
diff --git a/demo/demo.html b/demo/demo.html
index 4425dff..abc2d0b 100644
--- a/demo/demo.html
+++ b/demo/demo.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="no-js">
 <head>
   <meta charset="utf-8" />
   <title>ResponsiveSlides.js &middot; Responsive jQuery slideshow</title>
@@ -10,15 +10,19 @@
   <script src="../responsiveslides.min.js"></script>
   <script>
     $(function () {
+      
+      // If you aren't using Modernizr you might want to add no-js class
+      // to html and use that to support cases when JavaScript isn't available
+      $("html").removeClass("no-js");
 
       // Slideshow 1
-      $("#slides1").responsiveSlides({
+      $(".rslides1").responsiveSlides({
         maxwidth: 800,
         speed: 800
       });
 
       // Slideshow 2
-      $("#slides2").responsiveSlides({
+      $(".rslides2").responsiveSlides({
         auto: false,
         pager: true,
         speed: 300,
@@ -26,7 +30,7 @@
       });
 
       // Slideshow 3
-      $("#slides3").responsiveSlides({
+      $(".rslides3").responsiveSlides({
         auto: false,
         pager: false,
         nav: true,
@@ -52,14 +56,14 @@
     <h2>Simple &amp; lightweight responsive slideshow plugin (in 1kb)</h2>
 
     <!-- Slideshow 1 -->
-    <ul id="slides1">
+    <ul class="rslides rslides1">
       <li><img src="1.jpg" alt="" /></li>
       <li><img src="2.jpg" alt="" /></li>
       <li><img src="3.jpg" alt="" /></li>
     </ul>
 
     <!-- Slideshow 2 -->
-    <ul id="slides2">
+    <ul class="rslides rslides2">
       <li><a href="#"><img src="1.jpg" alt="" /></a></li>
       <li><a href="#"><img src="2.jpg" alt="" /></a></li>
       <li><a href="#"><img src="3.jpg" alt="" /></a></li>
@@ -67,7 +71,7 @@
 
     <!-- Slideshow 2 -->
     <div class="callbacks_container">
-      <ul id="slides3">
+      <ul class="rslides rslides3">
         <li>
           <img src="1.jpg" alt="" />
           <p class="caption">This is a caption</p>
diff --git a/demo/themes/themes.html b/demo/themes/themes.html
index 8ae04f8..c2af210 100644
--- a/demo/themes/themes.html
+++ b/demo/themes/themes.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="no-js">
 <head>
   <meta charset="utf-8" />
   <title>ResponsiveSlides.js &middot; Alternative themes</title>
@@ -11,8 +11,12 @@
   <script>
     $(function () {
 
+      // If you aren't using Modernizr you might want to add no-js class
+      // to html and use that to support cases when JavaScript isn't available
+      $("html").removeClass("no-js");
+
       // Slideshow 1
-      $("#slides1").responsiveSlides({
+      $(".rslides1").responsiveSlides({
         auto: false,
         pager: true,
         nav: true,
@@ -21,7 +25,7 @@
       });
 
       // Slideshow 2
-      $("#slides2").responsiveSlides({
+      $(".rslides2").responsiveSlides({
         auto: false,
         pager: true,
         nav: true,
@@ -30,7 +34,7 @@
       });
 
       // Slideshow 3
-      $("#slides3").responsiveSlides({
+      $(".rslides3").responsiveSlides({
         auto: false,
         pager: false,
         nav: true,
@@ -47,7 +51,7 @@
 
     <h3>Vertically centered on both sides</h3>
     <div class="rslides_container">
-      <ul id="slides1" class="rslides">
+      <ul class="rslides rslides1">
         <li><img src="../1.jpg" alt="" /></li>
         <li><img src="../2.jpg" alt="" /></li>
         <li><img src="../3.jpg" alt="" /></li>
@@ -56,7 +60,7 @@
 
     <h3>Transparent buttons over the left and right side</h3>
     <div class="rslides_container">
-      <ul id="slides2" class="rslides">
+      <ul class="rslides rslides2">
         <li><img src="../1.jpg" alt="" /></li>
         <li><img src="../2.jpg" alt="" /></li>
         <li><img src="../3.jpg" alt="" /></li>
@@ -65,7 +69,7 @@
 
     <h3>100% height with vertically centered icons</h3>
     <div class="rslides_container">
-      <ul id="slides3" class="rslides">
+      <ul class="rslides rslides3">
         <li><img src="../1.jpg" alt="" /></li>
         <li><img src="../2.jpg" alt="" /></li>
         <li><img src="../3.jpg" alt="" /></li>
diff --git a/responsiveslides.css b/responsiveslides.css
index ec77333..5601e81 100644
--- a/responsiveslides.css
+++ b/responsiveslides.css
@@ -1,4 +1,4 @@
-/*! http://responsiveslides.com v1.24 by @viljamis */
+/*! http://responsiveslides.com v1.25 by @viljamis */
 
 .rslides {
   position: relative;
@@ -11,11 +11,18 @@
 
 .rslides li {
   position: absolute;
+  display: none;
   width: 100%;
   left: 0;
   top: 0;
   }
 
+.no-js .rslides li:first-child {
+  position: relative;
+  display: block;
+  float: left;
+  }
+
 .rslides img {
   display: block;
   height: auto;
