Cleaning up the styles to work with IE6 et al.

arielsalminen · Mar 20, 2012 · 76fae30 · 76fae30
1 parent 4a72c65
commit 76fae30
Showing 1 changed file with 27 additions and 16 deletions.
diff --git a/demo/themes/demo_themes.css b/demo/themes/demo_themes.css
@@ -12,87 +12,97 @@ body {
   font: 14px/24px sans-serif;
   margin: 0 auto;
   max-width: 700px;
-  padding: 30px;
+  _width: 700px;
+  padding: 50px 30px;
   text-align: center;
   -webkit-font-smoothing: antialiased;
   }
 
 h1 {
   font: 600 24px/32px sans-serif;
+  margin-bottom: 50px;
   }
 
 .rslides {
-  margin: 50px auto 0;
+  margin: 0 auto;
   }
 
 .container {
+  margin-bottom: 50px;
   position: relative;
+  float: left;
+  width: 100%;
   }
 
-.rslides1_nav_prev,
-.rslides1_nav_next {
+.rslides1_nav {
   position: absolute;
-  -webkit-tap-highlight-color: rgba(0,0,0,.01);
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
   top: 50%;
   left: 0;
+  background: #000;
   background: rgba(0,0,0, .8);
   text-decoration: none;
-  padding: 0 20px;
+  padding: 0 16px;
   height: 40px;
-  line-height: 40px;
-  margin-top: -30px;
+  font: 900 20px/38px sans-serif;
+  margin-top: -40px;
   color: #fff;
   }
 
-.rslides1_nav_next {
+.rslides1_nav.next {
   left: auto;
   right: 0;
   }
 
-.rslides2_nav_prev,
-.rslides2_nav_next {
+.rslides2_nav {
   position: absolute;
-  -webkit-tap-highlight-color: rgba(0,0,0,.01);
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
   top: 0;
   left: 0;
   background: transparent;
   text-decoration: none;
-  width: 40%;
+  width: 48%;
   text-indent: -9999px;
   overflow: hidden;
   height: 100%;
   color: #fff;
   }
 
-.rslides2_nav_next {
+.rslides2_nav.next {
   left: auto;
   right: 0;
   }
 
+.rslides1_nav:focus,
+.rslides2_nav:focus {
+  outline: none;
+  }
+
 /* PAGINATION STYLE 2
 --------------------------------------------- */
 
 .rslides_tabs {
   margin-top: 10px;
   text-align: center;
-  width: 100%;
   }
 
 .rslides_tabs li {
   display: inline;
   float: none;
+  _float: left;
   margin-right: 5px;
   }
 
 .rslides_tabs a {
   text-indent: -9999px;
   overflow: hidden;
-  width: auto;
   -webkit-radius: 15px;
   -moz-radius: 15px;
   border-radius: 15px;
+  background: #ccc;
   background: rgba(0,0,0, .2);
   display: inline-block;
+  _display: block;
   -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
   -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
   box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
@@ -101,5 +111,6 @@ h1 {
   }
 
 .rslides_tabs .rslides_here a {
+  background: #222;
   background: rgba(0,0,0, .8);
   }