diff --git a/.DS_Store b/.DS_Store
index 76211fc..5008ddf 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/example.css b/example.css
new file mode 100644
index 0000000..cbc5f8d
--- /dev/null
+++ b/example.css
@@ -0,0 +1,227 @@
+* {
+  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;
+  }
+
+h3 { 
+  font: 16px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; 
+  color: #fff;
+  font-weight: 900;
+  margin-top: 40px;
+  }
+
+h4 { 
+  font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; 
+  font-weight: 900;
+  margin-top: 40px;
+  }
+
+#wrapper {
+  padding: 20px;
+  }
+
+a {
+  text-decoration: none;
+  color: #fff;
+  }
+
+a:hover {
+  border-bottom: 1px solid #666;
+  }
+
+p,h3,h4,pre {
+  text-align: left;
+  max-width: 500px;
+  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;
+}
+
+.rslides {
+  position: relative;
+  list-style: none;
+  overflow: hidden;
+  width: 100%;
+  padding: 0;
+  margin: 0 auto 40px;
+  }
+
+.rslides2 {
+  position: relative;
+  list-style: none;
+  overflow: hidden;
+  width: 100%;
+  padding: 0;
+  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 a:hover {
+  border: 0;
+}
+
+.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;
+}
+
+pre,code {
+  font-family: monospace, monospace;
+  }
+
+pre {
+  -webkit-font-smoothing: subpixel-antialiased;
+  -webkit-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);
+  box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  text-shadow: none;
+  width: auto;
+  background: #111;
+  background: rgba(0,0,0,.25);
+  padding: 20px;
+  margin-bottom: 30px;
+  _padding: 0;
+  font-size: 13px;
+  color: #fff;
+  _float: left;
+  _width: 100%;
+  white-space: pre;
+  white-space: no-wrap;
+  overflow-x: scroll;
+  }
+
+pre::-webkit-scrollbar {
+  -webkit-appearance: none;
+  background-color: rgba(255,255,255,.1);
+  width: 8px;
+  height: 8px;
+  }
+
+pre::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(255,255,255,.5);
+  }
+
+pre::-webkit-scrollbar-thumb:hover {
+  border-radius: 4px;
+  background-color: rgba(255,255,255,.8);
+  }
+
+.list {
+  text-align: left;
+  max-width: 450px;
+  margin: 0 auto;
+  }
+
+#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: 540px) {
+  h1 {
+    font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+  .github {
+    display: none;
+  }
+  .list {
+    margin-left: 20px;
+  }
+}
\ No newline at end of file
diff --git a/index.htm b/index.html
similarity index 98%
rename from index.htm
rename to index.html
index 6e07aa3..d807941 100644
--- a/index.htm
+++ b/index.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>ResponsiveSlides.js &middot; Responsive jQuery Slider &amp; Slideshow</title>
   <meta name="author" content="Viljami Salminen">
-  <meta name="description" content="ResponsiveSlides.js is a tiny jQuery plugin that automatically creates responsive slider using images inside a container">
+  <meta name="description" content="ResponsiveSlides.js is a tiny jQuery plugin that automatically creates responsive slider using images inside a container.">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="responsiveslides.css">
   <link rel="stylesheet" href="example.css">
@@ -12,15 +12,15 @@
   <script>window.jQuery || document.write('<script src="http://viljamis.com/js/libs/jquery-1.8.2.min.js"><\/script>')</script>
   <script src="responsiveslides.min.js"></script>
   <script>
-    $(function() {
+    $(function () {
 
-      // Slideshow 1 
+      // Slideshow 1
       $(".rslides1").responsiveSlides({
         speed: 1000,
         maxwidth: 800
       });
 
-      // Slideshow 2 
+      // Slideshow 2
       $(".rslides2").responsiveSlides({
         auto: false,
         pager: true,