From 0c57e6b3140b6581a3807b416eff17bd7072e630 Mon Sep 17 00:00:00 2001
From: Viljami S <viljami.salminen@gmail.com>
Date: Fri, 25 May 2012 11:43:21 +0300
Subject: [PATCH] Use custom namespace on all example slideshow as the css
 styles are then easier to understand.

---
 demo/themes/themes.css  | 38 +++++++++++++++++++++++---------------
 demo/themes/themes.html | 21 ++++++++++++---------
 2 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/demo/themes/themes.css b/demo/themes/themes.css
index 55ebd57..25862fe 100644
--- a/demo/themes/themes.css
+++ b/demo/themes/themes.css
@@ -50,7 +50,7 @@ a {
   width: 100%;
   }
 
-.rslides1_nav {
+.centered-btns_nav {
   position: absolute;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   top: 50%;
@@ -65,17 +65,17 @@ a {
   margin-top: -45px;
   }
 
-.rslides1_nav:active {
+.centered-btns_nav:active {
   opacity: 1.0;
   }
 
-.rslides1_nav.next {
+.centered-btns_nav.next {
   left: auto;
   background-position: right top;
   right: 0;
   }
 
-.rslides2_nav {
+.transparent-btns_nav {
   position: absolute;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   top: 0;
@@ -90,12 +90,12 @@ a {
   height: 91%;
   }
 
-.rslides2_nav.next {
+.transparent-btns_nav.next {
   left: auto;
   right: 0;
   }
 
-.rslides3_nav {
+.large-btns_nav {
   position: absolute;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   opacity: 0.6;
@@ -108,28 +108,32 @@ a {
   width: 38px;
   }
 
-.rslides3_nav:active {
+.large-btns_nav:active {
   opacity: 1.0;
   }
 
-.rslides3_nav.next {
+.large-btns_nav.next {
   left: auto;
   background-position: right 50%;
   right: 0;
   }
 
-.rslides1_nav:focus,
-.rslides2_nav:focus,
-.rslides3_nav:focus {
+.centered-btns_nav:focus,
+.transparent-btns_nav:focus,
+.large-btns_nav:focus {
   outline: none;
   }
 
-.rslides_tabs {
+.centered-btns_tabs,
+.transparent-btns_tabs,
+.large-btns_tabs {
   margin-top: 10px;
   text-align: center;
   }
 
-.rslides_tabs li {
+.centered-btns_tabs li,
+.transparent-btns_tabs li,
+.large-btns_tabs li {
   display: inline;
   float: none;
   _float: left;
@@ -137,7 +141,9 @@ a {
   margin-right: 5px;
   }
 
-.rslides_tabs a {
+.centered-btns_tabs a,
+.transparent-btns_tabs a,
+.large-btns_tabs a {
   text-indent: -9999px;
   overflow: hidden;
   -webkit-border-radius: 15px;
@@ -155,7 +161,9 @@ a {
   height: 9px;
   }
 
-.rslides_tabs .rslides_here a {
+.centered-btns_here a,
+.transparent-btns_here a,
+.large-btns_here a {
   background: #222;
   background: rgba(0,0,0, .8);
   }
diff --git a/demo/themes/themes.html b/demo/themes/themes.html
index 102da06..b3242dd 100644
--- a/demo/themes/themes.html
+++ b/demo/themes/themes.html
@@ -12,30 +12,33 @@
     $(function () {
 
       // Slideshow 1
-      $(".rslides1").responsiveSlides({
+      $("#slider1").responsiveSlides({
         auto: false,
         pager: true,
         nav: true,
         speed: 500,
-        maxwidth: 800
+        maxwidth: 800,
+        namespace: "centered-btns"
       });
 
       // Slideshow 2
-      $(".rslides2").responsiveSlides({
+      $("#slider2").responsiveSlides({
         auto: false,
         pager: true,
         nav: true,
         speed: 500,
-        maxwidth: 800
+        maxwidth: 800,
+        namespace: "transparent-btns"
       });
 
       // Slideshow 3
-      $(".rslides3").responsiveSlides({
+      $("#slider3").responsiveSlides({
         auto: false,
         pager: false,
         nav: true,
         speed: 500,
-        maxwidth: 800
+        maxwidth: 800,
+        namespace: "large-btns"
       });
 
     });
@@ -47,7 +50,7 @@
 
     <h3>Vertically centered on both sides</h3>
     <div class="rslides_container">
-      <ul class="rslides rslides1">
+      <ul class="rslides" id="slider1">
         <li><img src="../1.jpg" alt="" /></li>
         <li><img src="../2.jpg" alt="" /></li>
         <li><img src="../3.jpg" alt="" /></li>
@@ -56,7 +59,7 @@
 
     <h3>Transparent buttons over the left and right side</h3>
     <div class="rslides_container">
-      <ul class="rslides rslides2">
+      <ul class="rslides" id="slider2">
         <li><img src="../1.jpg" alt="" /></li>
         <li><img src="../2.jpg" alt="" /></li>
         <li><img src="../3.jpg" alt="" /></li>
@@ -65,7 +68,7 @@
 
     <h3>100% height with vertically centered icons</h3>
     <div class="rslides_container">
-      <ul class="rslides rslides3">
+      <ul class="rslides" id="slider3">
         <li><img src="../1.jpg" alt="" /></li>
         <li><img src="../2.jpg" alt="" /></li>
         <li><img src="../3.jpg" alt="" /></li>