From 2c2f830b48558b54f20b404cd7a2d63be12f7bf1 Mon Sep 17 00:00:00 2001
From: toddparker <todd@filamentgroup.com>
Date: Wed, 21 Dec 2011 23:36:57 -0500
Subject: [PATCH] More tweaks to the sliders to fit well at 320px

---
 css/structure/jquery.mobile.forms.slider.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/css/structure/jquery.mobile.forms.slider.css b/css/structure/jquery.mobile.forms.slider.css
index 1d5e2b75..70bf2eb4 100644
--- a/css/structure/jquery.mobile.forms.slider.css
+++ b/css/structure/jquery.mobile.forms.slider.css
@@ -2,15 +2,16 @@ label.ui-slider { font-size: 16px; line-height: 1.4;  font-weight: normal; margi
 input.ui-slider-input,
 .ui-field-contain input.ui-slider-input { display: inline-block; width: 50px; }
 select.ui-slider-switch { display: none; }
-div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 72%; }
+div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 65%; }
 div.ui-slider-switch { width: 99.8%; }
+.ui-field-contain div.ui-slider-switch { width: 50%; }
 a.ui-slider-handle { position: absolute; z-index: 10;  top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; }
 a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
 @media all and (min-width: 480px){
 	.ui-field-contain label.ui-slider { vertical-align: top;  display: inline-block;  width: 20%;  margin: 0 2% 0 0; }
 	.ui-field-contain div.ui-slider { width: 43%; }
+	.ui-field-contain div.ui-slider-switch { width: 35%; }
 }	
-
 div.ui-slider-switch { height: 32px;  overflow: hidden; margin-left: 0; }
 div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 50%; }
 a.ui-slider-handle-snapping { -webkit-transition: left 70ms linear; }
@@ -20,7 +21,7 @@ div.ui-slider-switch div.ui-slider-labelbg-b { width: 60%; height: 100%; right:
 .ui-slider-switch-a div.ui-slider-labelbg-a, .ui-slider-switch-b div.ui-slider-labelbg-b { z-index: -1; }
 .ui-slider-switch-a div.ui-slider-labelbg-b, .ui-slider-switch-b div.ui-slider-labelbg-a { z-index: 0; }
 
-div.ui-slider-switch a.ui-slider-handle { z-index: 20;  width: 101%; height: 32px; margin-top: -18px; margin-left: -101%; }
-span.ui-slider-label { width: 100%; position: absolute;height: 32px;  font-size: 16px; text-align: center; line-height: 2; background: none; border-color: transparent; }
+div.ui-slider-switch a.ui-slider-handle { z-index: 20;  width: 100%; height: 30px; margin-top: -17px; margin-left: -100%; }
+span.ui-slider-label { width: 100%; position: absolute; height: 32px;  font-size: 16px; text-align: center; line-height: 1.8; background: none; border-color: transparent; }
 span.ui-slider-label-a { left: -100%;  margin-right: -1px }
 span.ui-slider-label-b { right: -100%;  margin-left: -1px }