Starting to clean up the example code

example/example.css

@@ -0,0 +1,130 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  background: #222 url("bg.png") repeat;
+}
+
+body {
+  _width: 70%;
+  color: #888;
+  font: 14px/20px Helvetica, Arial, sans-serif;
+  margin: 20px auto 0;
+  max-width: 800px;
+  text-align: center;
+  text-shadow: 0 -2px 1px #000;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1 { 
+  font: 40px/60px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #fff;
+  font-weight: 200;
+  }
+
+h2 { 
+  font: 16px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; 
+  margin-bottom: 40px;
+  }
+
+#wrapper {
+  padding: 20px;
+}
+
+p,h3,h4,pre {
+  text-align: left;
+  max-width: 540px;
+  margin: 0 auto 20px;
+  }
+
+.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 {
+  box-shadow: none;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  margin: 0 auto;
+  }
+
+.rslides_tabs {
+  background: rgba(0,0,0,.25);
+  box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
+  -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
+  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
+  font-size: 18px;
+  list-style: none;
+  margin: 0 auto 50px;
+  max-width: 540px;
+  padding: 10px 0;
+  text-align: center;
+  width: 100%;
+}
+
+.rslides_tabs li {
+  display: inline;
+  float: none;
+  margin-right: 1px;
+}
+
+.rslides_tabs a {
+  width: auto;
+  line-height: 20px;
+  padding: 9px 20px;
+  height: auto;
+  background: transparent;
+  display: inline;
+}
+
+.rslides_tabs li:first-child {
+  margin-left: 0;
+}
+
+.rslides_tabs .rslides_here a {
+  background: rgba(255,255,255,.1);
+  color: #fff;
+  font-weight: bold;
+}
+
+a {
+  color: #fff;
+  text-decoration: none;
+}
+
+#download {
+  background: #333;
+  background: rgba(255,255,255,.1);
+  border: 1px solid rgba(255,255,255,.1);
+  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;
+  margin: 60px auto;
+  max-width: 500px;
+  padding: 20px;
+}
+
+#download:hover {
+  background: rgba(255,255,255,.15);
+}
+
+.footer {
+  font-size: 11px;
+}
+
+@media screen and (max-width: 600px) {
+  h1 {
+    font: 30px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+}

example/index.html

@@ -5,22 +5,19 @@
   <title>ResponsiveSlides.js &middot; Responsive jQuery Slideshow</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="example.css" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-  <script src="../responsiveslides.min.js"></script>
+  <script src="../responsiveslides.js"></script>
   <script>
   jQuery(function() {
     // Slideshow 1
     $("#slides1").responsiveSlides({
-      auto: true,
-      pagination: true,
-      fade: 500,
-      maxwidth: 800,
-      speed: 4000
+      maxwidth: 800
     });
 
     // Slideshow 4
     $("#slides2").responsiveSlides({
-      auto: false,
+      auto: true,
       pagination: true,
       fade: 300,
       maxwidth: 540
@@ -42,9 +39,9 @@
 
     <!-- Slideshow 2 -->
     <ul id="slides2">
-      <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>
+      <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>
     </ul>
 
     <a href="http://responsive-slides.viljamis.com/" id="download">See the documentation</a>