css/structure/jquery.mobile.forms.fieldcontain.css

@@ -1,4 +1,10 @@
-.ui-field-contain, fieldset.ui-field-contain { padding: .8em 0; margin: 0; border-width: 0 0 1px 0; overflow: visible; }
+.ui-field-contain, fieldset.ui-field-contain { padding: .8em 0; margin: 0; overflow: visible; }
+.ui-field-contain:after {
+	content: "";
+	display: block;
+	margin-top: 1em;
+	border-bottom: 1px solid;
+}
 .ui-field-contain:last-child { border-bottom-width: 0; }
 .ui-field-contain { max-width: 100%; } /* This prevents horizontal scrollbar in IE7 */
 @media all and (min-width: 28em){

css/structure/jquery.mobile.forms.slider.tooltip.css

@@ -1,3 +1,19 @@
+/* slider tooltip
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-slider .ui-btn-inner {
+	padding: 5px 0 0 0 !important;
+	font-size:.8em;
+}
+
+.ui-slider-popup {
+	width: 64px;
+	height: 64px;
+	font-size: 36px;
+	padding-top: 14px;
+	opacity: 0.8;
+}
+
 .ui-slider-popup {
 	position: absolute !important;
 	text-align: center;

css/structure/jquery.mobile.popup.arrow.css

@@ -1,3 +1,155 @@
+/* Dimensions related to the popup arrow
+-----------------------------------------------------------------------------------------------------------*/
+/* desired triangle height: 10px */
+
+/**
+ * guide for the arrow - its width, height, and offset are theme-dependent and
+ * should be expessed as left, right, top, bottom, so that the element bearing
+ * such a class becomes stretched inside its parent position: relative element.
+ * The left/top/right/bottom specified below should reflect the corresponding
+ * border radii and so it leaves room for the shadow:
+ *     ..--------------------..
+ *   ."        ^ top           ".
+ *  /          v                 \
+ * |     +------------------+     |
+ * |     |                  |     |
+ * | left|                  |right|
+ * |<--->|                  |<--->|
+ * |     +------------------+     |
+ *  \          ^                 /
+ *   `.        v bottom        .'
+ *     ""--------------------""
+ * The idea is that the top/left of the arrow container box does not move to a
+ * coordinate smaller than the top/left of the guide and the right/bottom of
+ * the arrow container box does not move to a coordinate larger than the
+ * bottom/right of the guide. This will help us avoid the following situation:
+ *        ..--------------------..
+ *      ."        ^ top           ".
+ *   /|/          v                 \
+ *  / |     +------------------+     |
+ *  \ |     |                  |     |
+ *   \| left|                  |right|
+ *    |<--->|                  |<--->|
+ *    |     +------------------+     |
+ *     \          ^                 /
+ *      `.        v bottom        .'
+ *        ""--------------------""
+ * The arrow should not receive a top/left coordinate such that it is too close
+ * to one of the corners, because then at first the shadow of the arrow and,
+ * given a coordinate even closer to the corner, even the body of the arrow will
+ * "stick out" of the corner of the popup. The guide provides a hint to the
+ * arrow positioning code as to which range of values is acceptable for the
+ * arrow container's top/left coordinate.
+ **/
+
+.ui-popup.ui-corner-all > .arrow-guide {
+	left: .6em /*{global-radii-blocks}*/;
+	right: .6em /*{global-radii-blocks}*/;
+	top: .6em /*{global-radii-blocks}*/;
+	bottom: .6em /*{global-radii-blocks}*/;
+}
+
+.arrow-container {
+	width: 20px;
+	height: 20px;
+}
+
+/* aside from the "infinities" (-1000,2000), triangle height is used */
+.arrow-container.l {
+	left: -10px;
+	clip: rect(-1000px,10px,2000px,-1000px);
+}
+
+.arrow-container.ie.l {
+	clip: rect(-1000px 10px 2000px -1000px);
+}
+
+.arrow-container.t {
+	top: -10px;
+	clip: rect(-1000px,2000px,10px,-1000px);
+}
+
+.arrow-container.ie.t {
+	clip: rect(-1000px 2000px 10px -1000px);
+}
+
+.arrow-container.r {
+	right: -10px;
+	clip: rect(-1000px,2000px,2000px,10px);
+}
+
+.arrow-container.ie.r {
+	clip: rect(-1000px 2000px 2000px 10px);
+}
+
+.arrow-container.b {
+	bottom: -10px;
+	clip: rect(10px,2000px,1000px,-1000px);
+}
+
+.arrow-container.ie.b {
+	clip: rect(10px 2000px 1000px -1000px);
+}
+
+/**
+ * The arrow needs to be centred inside the arrow container such that, when
+ * rotated 45 degrees, its corners touch, but do not break through, the sides
+ * of the arrow container:
+ *
+ * +----------+
+ * |    /\    |
+ * |   /  \  <------ arrow container
+ * |  /    \  |
+ * | /      \ |
+ * |/  arrow \|
+ * |\        /|
+ * | \      / |
+ * |  \    /  |
+ * |   \  /   |
+ * |    \/    |
+ * +----------+
+ **/
+.arrow {
+	/* (2*desired triangle height)/sqrt(2) - does not account for border - centred within the outer rectangle */
+	width: 14.142135624px;
+	height: 14.142135624px;
+	/* ( (2*desired triangle height) - (above width/height) ) / 2 */
+	left: 2.928932188px;
+	top: 2.928932188px;
+}
+
+.arrow-container.ie .arrow {
+	/* Fix rotation center  - see http://www.useragentman.com/IETransformsTranslator/ */
+	margin-left: -3px;
+	margin-top: -3px;
+}
+
+.arrow-background {
+	/* desired triangle height is used here */
+	width: 20px;
+	height: 20px;
+}
+
+.arrow-container.t .arrow-background {
+	/* 0px triangle height */
+	background-position: 0 10px;
+}
+
+.arrow-container.l .arrow-background {
+	/* triangle height 0px */
+	background-position: 10px 0;
+}
+
+/* For some reason (probably because of all the decimal places) there's a
+   rounding error in the background position, so push it over by one */
+.arrow-container.b .arrow-background {
+	background-position: 0 11px;
+}
+
+.arrow-container.r .arrow-background {
+	background-position: 11px 0;
+}
+
 .ui-popup > .arrow-guide {
 	position: absolute;
 	left: 0;