Merge remote-tracking branch 'upstream/master'

2026-03-16 22:10:25 +00:00 · 2011-10-24 10:29:20 -07:00 · 2011-10-24 10:29:20 -07:00 · 2b773393a8
commit 2b773393a8
parent 7860a90e87 777d16c7cd
788 changed files with 34366 additions and 37752 deletions
--- a/.gitignore
+++ b/.gitignore
@ -5,3 +5,9 @@
 .DS_Store
 cache/
 combined/
+combine/
+compiled/
+gitstatus.log
+refreshCDN
+*.swp
+.gitignore
--- a/.htaccess
+++ b/.htaccess
@ -1,10 +0,0 @@
-#thx askapache.com
-<FilesMatch "\.(php|html|htm|js|css)$">
-FileETag None
-<IfModule mod_headers.c>
-Header unset ETag
-Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
-Header set Pragma "no-cache"
-Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
-</IfModule>
-</FilesMatch>
--- a/258
+++ b/258
@ -1,108 +1,216 @@
+# The system generated date in YYYYMMDD format
+DATE = $(shell date "+%Y%m%d")

+# The version according to the source file. If this is the nightly build, use a different version
 VER = $(shell cat version.txt)
-SED_VER = sed "s/@VERSION/${VER}/"

+# The command to replace the @VERSION in the files with the actual version
+SED_VER = sed "s/@VERSION/$(shell git log -1 --format=format:" Git > Date: %cd Info SHA1: %H")/"
+deploy:  SED_VER = sed "s/@VERSION/${VER}/"
+
+# The version of jQuery core used
+JQUERY = $(shell grep Library js/jquery.js | sed s'/ \* jQuery JavaScript Library v//')
+
+# The directory to create the zipped files in and also serves as the filenames
 DIR = jquery.mobile-${VER}
-MAX = ${DIR}.js
+STRUCTUREFILE = jquery.mobile.structure-${VER}
+nightly: DIR = jquery.mobile
+
+# The output folder for the finished files
+OUTPUT = compiled
+
+# Command to remove the latest directory from the CDN before uploading, only if using latest target
+RMLATEST = echo ""
+
+# The output folder for the nightly files.
+NIGHTLY_OUTPUT = nightlies/${DATE}
+ifeq (${NIGHTLY_OUTPUT}, latest)
+	RMLATEST = ssh jqadmin@code.origin.jquery.com 'rm -rf /var/www/html/code.jquery.com/mobile/latest'
+endif
+NIGHTLY_WEBPATH = http://code.jquery.com/mobile/${NIGHTLY_OUTPUT}
+
+# The filenames
+JS = ${DIR}.js
 MIN = ${DIR}.min.js
 CSS = ${DIR}.css
 CSSMIN = ${DIR}.min.css
+CSSSTRUCTURE = ${STRUCTUREFILE}.css
+CSSSTRUCTUREMIN = ${STRUCTUREFILE}.min.css
+CSSTHEME = default

-FILES = js/jquery.ui.widget.js \
-  js/jquery.mobile.widget.js \
-  js/jquery.mobile.media.js \
-  js/jquery.mobile.support.js \
-  js/jquery.mobile.event.js \
-  js/jquery.mobile.hashchange.js \
-  js/jquery.mobile.core.js \
-  js/jquery.mobile.navigation.js \
-  js/jquery.mobile.page.js \
-  js/jquery.ui.position.js \
-  js/jquery.mobile.fixHeaderFooter.js \
-  js/jquery.mobile.forms.checkboxradio.js \
-  js/jquery.mobile.forms.textinput.js \
-  js/jquery.mobile.forms.select.js \
-  js/jquery.mobile.buttonMarkup.js \
-  js/jquery.mobile.forms.button.js \
-  js/jquery.mobile.forms.slider.js \
-  js/jquery.mobile.collapsible.js \
-  js/jquery.mobile.controlGroup.js \
-  js/jquery.mobile.fieldContain.js \
-  js/jquery.mobile.listview.js \
-  js/jquery.mobile.listview.filter.js \
-  js/jquery.mobile.dialog.js \
-  js/jquery.mobile.navbar.js \
-  js/jquery.mobile.grid.js
+# The files to include when compiling the JS files
+JSFILES = 	  js/jquery.ui.widget.js \
+			  js/jquery.mobile.widget.js \
+			  js/jquery.mobile.media.js \
+			  js/jquery.mobile.support.js \
+			  js/jquery.mobile.vmouse.js \
+			  js/jquery.mobile.event.js \
+			  js/jquery.mobile.hashchange.js \
+			  js/jquery.mobile.page.js \
+			  js/jquery.mobile.core.js \
+			  js/jquery.mobile.navigation.js \
+			  js/jquery.mobile.navigation.pushstate.js \
+			  js/jquery.mobile.transition.js \
+			  js/jquery.mobile.degradeInputs.js \
+			  js/jquery.mobile.dialog.js \
+			  js/jquery.mobile.page.sections.js \
+			  js/jquery.mobile.collapsible.js \
+			  js/jquery.mobile.fieldContain.js \
+			  js/jquery.mobile.grid.js \
+			  js/jquery.mobile.navbar.js \
+			  js/jquery.mobile.listview.js \
+			  js/jquery.mobile.listview.filter.js \
+			  js/jquery.mobile.nojs.js \
+			  js/jquery.mobile.forms.checkboxradio.js \
+			  js/jquery.mobile.forms.button.js \
+			  js/jquery.mobile.forms.slider.js \
+			  js/jquery.mobile.forms.textinput.js \
+			  js/jquery.mobile.forms.select.custom.js \
+			  js/jquery.mobile.forms.select.js \
+			  js/jquery.mobile.buttonMarkup.js \
+			  js/jquery.mobile.controlGroup.js \
+			  js/jquery.mobile.links.js \
+			  js/jquery.mobile.fixHeaderFooter.js \
+			  js/jquery.mobile.fixHeaderFooter.native.js \
+			  js/jquery.mobile.init.js

-CSSFILES =  themes/default/jquery.mobile.theme.css \
-  themes/default/jquery.mobile.core.css \
-  themes/default/jquery.mobile.transitions.css \
-  themes/default/jquery.mobile.grids.css \
-  themes/default/jquery.mobile.headerfooter.css \
-  themes/default/jquery.mobile.navbar.css \
-  themes/default/jquery.mobile.button.css \
-  themes/default/jquery.mobile.collapsible.css \
-  themes/default/jquery.mobile.controlgroup.css \
-  themes/default/jquery.mobile.dialog.css \
-  themes/default/jquery.mobile.forms.checkboxradio.css \
-  themes/default/jquery.mobile.forms.fieldcontain.css \
-  themes/default/jquery.mobile.forms.select.css \
-  themes/default/jquery.mobile.forms.textinput.css \
-  themes/default/jquery.mobile.listview.css \
-  themes/default/jquery.mobile.forms.slider.css
+CSSTHEMEFILES = css/themes/${CSSTHEME}/jquery.mobile.theme.css
+CSSSTRUCTUREFILES = css/structure/jquery.mobile.core.css \
+			  css/structure/jquery.mobile.transitions.css \
+			  css/structure/jquery.mobile.grids.css \
+			  css/structure/jquery.mobile.headerfooter.css \
+			  css/structure/jquery.mobile.navbar.css \
+			  css/structure/jquery.mobile.button.css \
+			  css/structure/jquery.mobile.collapsible.css \
+			  css/structure/jquery.mobile.controlgroup.css \
+			  css/structure/jquery.mobile.dialog.css \
+			  css/structure/jquery.mobile.forms.checkboxradio.css \
+			  css/structure/jquery.mobile.forms.fieldcontain.css \
+			  css/structure/jquery.mobile.forms.select.css \
+			  css/structure/jquery.mobile.forms.textinput.css \
+			  css/structure/jquery.mobile.listview.css \
+			  css/structure/jquery.mobile.forms.slider.css

-all: mobile min css cssmin

-clean:
-	@@rm -rf ${DIR}*
+# The files to include when compiling the CSS files
+CSSFILES = ${CSSTHEMEFILES} ${CSSSTRUCTUREFILES}

-css:
-	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${CSS}
-	@@cat ${CSSFILES} >> ${CSS}
+# By default, this is what get runs when make is called without any arguments.
+# Min and un-min CSS and JS files are the only things built
+all: init js min css cssmin notify

-cssmin: css
-	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${CSSMIN}
-	@@java -jar build/yuicompressor-2.4.2.jar --type css ${CSS} >> ${CSSMIN}
+# Build the normal CSS file.
+css: init
+	# Build the CSS file
+	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${OUTPUT}/${CSS}
+	@@cat ${CSSFILES} >> ${OUTPUT}/${CSS}
+	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${OUTPUT}/${CSSSTRUCTURE}
+	@@cat ${CSSSTRUCTUREFILES} >> ${OUTPUT}/${CSSSTRUCTURE}

-mobile:
-	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${MAX}
-	@@cat ${FILES} >> ${MAX}
+# Build the minified CSS file
+cssmin: init css
+	# Build the minified CSS file
+	@@java -jar build/yuicompressor-2.4.6.jar --type css ${OUTPUT}/${CSS} >> ${OUTPUT}/${CSSMIN}
+	@@java -jar build/yuicompressor-2.4.6.jar --type css ${OUTPUT}/${CSSSTRUCTURE} >> ${OUTPUT}/${CSSSTRUCTUREMIN}

-min: mobile
-	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${MIN}
-	@@java -jar build/google-compiler-20100917.jar --js ${MAX} --warning_level QUIET --js_output_file ${MIN}.tmp
-	@@cat ${MIN}.tmp >> ${MIN}
+# Build the normal JS file
+js: init
+	# Build the JavaScript file
+	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${OUTPUT}/${JS}
+	@@cat ${JSFILES} >> ${OUTPUT}/${JS}
+
+# Create the output directory. This is in a separate step so its not dependant on other targets
+init:
+	# Building jQuery Mobile in the "${OUTPUT}" folder
+	@@rm -rf ${OUTPUT}
+	@@mkdir ${OUTPUT}
+
+# Build the minified JS file
+min: init js
+	# Build the minified JavaScript file
+	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${OUTPUT}/${MIN}
+	@@java -jar build/google-compiler-20111003.jar --js ${OUTPUT}/${JS} --warning_level QUIET --js_output_file ${MIN}.tmp
+	@@cat ${MIN}.tmp >> ${OUTPUT}/${MIN}
 	@@rm -f ${MIN}.tmp

-zip: clean min cssmin
+# Let the user know the files were built and where they are
+notify:
+	@@echo "The files have been built and are in " $$(pwd)/${OUTPUT}
+
+# Pull the latest commits. This is used for the nightly build but can be used to save some keystrokes
+pull:
+	@@git pull --quiet
+
+# Zip the 4 files and the theme images into one convenient package
+zip: init js min css cssmin
 	@@mkdir -p ${DIR}
-	@@cp ${DIR}*.js ${DIR}/
-	@@cp ${DIR}*.css ${DIR}/
-	@@cp -R themes/default/images ${DIR}/
-	@@zip -r ${DIR}.zip ${DIR}
+	@@cp ${OUTPUT}/*.js ${DIR}/
+	@@cp ${OUTPUT}/*.css ${DIR}/
+	@@cp -R css/themes/${CSSTHEME}/images ${DIR}/
+	@@zip -rq ${OUTPUT}/${DIR}.zip ${DIR}
+	@@rm -fr ${DIR}
+
+
+# Used by the jQuery team to make the nightly builds
+nightly: pull zip
+	# Create the folder to hold the files for the demos
+	@@mkdir -p ${VER}
+
+	# Copy in the base stuff for the demos
+	@@cp -r index.html css experiments docs tools ${VER}/
+
+	# First change all the paths from super deep to the same level for JS files
+	@@find ${VER} -type f -name '*.html' -exec sed -i 's|src="../../../js|src="js|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i 's|src="../../js|src="js|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i 's|src="../js|src="js|g' {} \;
+
+	# Then change all the paths from super deep to the same level for CSS files
+	@@find ${VER} -type f -name '*.html' -exec sed -i 's|media="only all"||g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i 's|rel="stylesheet"  href="../../../|rel="stylesheet"  href="|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i 's|rel="stylesheet"  href="../../|rel="stylesheet"  href="|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i 's|rel="stylesheet"  href="../|rel="stylesheet"  href="|g' {} \;
+
+	# Change the empty paths to the location of this nightly file
+	@@find ${VER} -type f -name '*.html' -exec sed -i 's|href="css/themes/${CSSTHME}/"|href="${NIGHTLY_WEBPATH}/${DIR}.min.css"|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i 's|src="js/jquery.js"|src="http://code.jquery.com/jquery-${JQUERY}.min.js"|' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i 's|src="js/"|src="${NIGHTLY_WEBPATH}/${DIR}.min.js"|g' {} \;
+
+	# Move the demos into the output folder
+	@@mv ${VER} ${OUTPUT}/demos
+
+	# Copy the images as well
+	@@cp -R css/themes/${CSSTHME}/images ${OUTPUT}
+
+	@@${RMLATEST}
+	@@scp -r ${OUTPUT} jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/${NIGHTLY_OUTPUT}
+	@@rm -rf ${OUTPUT}

 # Used by the jQuery team to deploy a build to the CDN
 deploy: zip
 	# Deploy to CDN
-	@@mv ${DIR} ${VER}
-	@@cp ${DIR}.zip ${VER}/
+	@@mv ${OUTPUT} ${VER}
 	@@scp -r ${VER} jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/
-	@@mv ${VER} ${DIR}
+	@@mv ${VER} ${OUTPUT}

-	# Deploy Demos
+	# Deploy Demos to the jQueryMobile.com site
 	@@mkdir -p ${VER}
-	@@cp -r index.html themes experiments docs ${VER}/
+	@@cp -r index.html css experiments docs tools ${VER}/

-	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|"text/javascript" src="../../../js|"text/javascript" src="js|g' {} \;
-	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|"text/javascript" src="../../js|"text/javascript" src="js|g' {} \;
-	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|"text/javascript" src="../js|"text/javascript" src="js|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../../../js|src="js|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../../js|src="js|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../js|src="js|g' {} \;

+	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|media="only all"||g' {} \;
 	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|rel="stylesheet"  href="../../../|rel="stylesheet"  href="|g' {} \;
 	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|rel="stylesheet"  href="../../|rel="stylesheet"  href="|g' {} \;
 	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|rel="stylesheet"  href="../|rel="stylesheet"  href="|g' {} \;

-	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|href="themes/default"|href="http://code.jquery.com/mobile/${VER}/${DIR}.min.css"|g' {} \;
-	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|<script type="text/javascript" src="js/all|<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script><script type="text/javascript" src="js/all|' {} \;
-	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="js/all"|src="http://code.jquery.com/mobile/${VER}/${DIR}.min.js"|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|href="css/themes/${CSSTHEME}/"|href="http://code.jquery.com/mobile/${VER}/${DIR}.min.css"|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="js/jquery.js"|src="http://code.jquery.com/jquery-${JQUERY}.min.js"|' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="js/"|src="http://code.jquery.com/mobile/${VER}/${DIR}.min.js"|g' {} \;

 	@@scp -r ${VER} jqadmin@jquerymobile.com:/srv/jquerymobile.com/htdocs/demos/
+
+	# Clean up the local files
+	@@rm -rf ${VER}
+	@@echo "All Done"
--- a/README.md
+++ b/README.md
@ -1,19 +1,83 @@
-Early stage development for the jQuery Mobile UI Framework.
-Code is subject to change dramatically!
+jQuery Mobile Framework
+=======================
+[Official Site: http://jquerymobile.com](http://jquerymobile.com)

-Usage
-=====
+[Demos and Documentation](http://jquerymobile.com/test/)

-Early documentation: https://github.com/jquery/jquery-mobile/wiki/_pages
+How to build your own jQuery Mobile CSS and JS files
+====================================================
+Clone this repo and build the js and css files (you'll need Git and Make installed):

-For now, I've set things up with a little combinator script to concat all the css and js files into one request and gzip. (js/ and themes/default)
-You'll need to point your local apache & php webserver at this root directory in order to preview things. 
+    git clone git://github.com/jquery/jquery-mobile.git
+    cd jquery-mobile
+    make

-If you don't currently have a webserver running locally, a quick way to get up and running is to download and install Mamp for Mac OSX. Once installed, just open Mamp, click preferences, go to the Apache tab, and select your local jQuery Mobile folder as the root. Then you can open a browser to http://localhost:8888 to preview the code.
-An alternative is XAMPP, which is also available for Windows, though you need to actually modify Apache's httpd.conf to point to your checkout: http://www.apachefriends.org/en/xampp.html
-You need the Rewrite (mod_rewrite.so), Expire (mod_expires.so) and Header (mod_headers.so) modules loaded.
+A full version and a minified version of the jQuery Mobile JavaScript and CSS files will be created 
+in a folder named "compiled". There is also now a Structure only css file so you can add your own theme on top of it.

-Whenever this configuration becomes inconvenient, we can remove it, obviously it's not meant to stay!
+Submitting bugs
+===============
+If you think you've found a bug, please report it by following these instructions:  

- when adding a js or css file, add it to the manifest in its directory and it'll be included in the request
- As far as JS files go, jQuery.mobile.core.js is the starting point.
+1. Visit the [Issue tracker: https://github.com/jquery/jquery-mobile/issues](https://github.com/jquery/jquery-mobile/issues)
+2. Create an issue explaining the problem and expected result
+    - Be sure to include any relevant information for reproducing the issue
+    - Include information such as:
+        * Browser/device (with version #)
+        * The version of the jQuery Mobile code you're running
+        * If you are running from a git version, include the date and/or hash number
+    - Make sure that the bug still exists at http://jquerymobile.com/test/ as it may be fixed already
+    - You can use the CDN hosted JS and CSS files to test in your own code by using:
+        * [JS](http://code.jquery.com/mobile/latest/jquery.mobile.min.js)
+        * [CSS](http://code.jquery.com/mobile/latest/jquery.mobile.min.css)
+    - Include a link to some code of the bug in action. You can use either of these services to host your code
+        * [jsbin](http://jsbin.com)
+        * [jsfiddle](http://jsfiddle.net)
+3. Submit the issue.
+
+Submitting patches
+==================
+To contribute code and bug fixes to jQuery Mobile: fork this project on Github, make changes to the code in your fork, 
+and then send a "pull request" to notify the team of updates that are ready to be reviewed for inclusion.
+
+Detailed instructions can be found at [jQuery Mobile Patching](https://gist.github.com/1294035)
+
+Running the jQuery Mobile demos & docs locally
+==============================================
+To preview locally, you'll need to clone a local copy of this repository and point your Apache & PHP webserver at its 
+root directory (a webserver is required, as PHP and .htaccess are used for combining development files).
+
+If you don't currently have a webserver running locally, there are a few options. 
+
+If you're on a Mac, you can try dropping jQuery Mobile into your sites folder and turning on Web Sharing via System 
+Prefs. From there, you'll find a URL where you can browse folders in your sites directory from a browser.
+
+Another quick way to get up and running is to download and install MAMP for Mac OSX. Once installed, just open MAMP, 
+click preferences, go to the Apache tab, and select your local jQuery Mobile folder as the root. Then you can open a 
+browser to http://localhost:8888 to preview the code.
+
+Another alternative is XAMPP (Mac, Windows). You need to actually modify Apache's httpd.conf to point to your checkout:
+[Instructions](http://www.apachefriends.org/en/xampp.html)
+
+You need the following Apache modules loaded:
+
+* Rewrite (mod\_rewrite.so)
+* Expire (mod\_expires.so)
+* Header (mod\_headers.so)
+
+Building With A Custom Theme
+============================
+To use a custom theme in your own build, you'll need Make installed. You can find the themes in the CSS/Themes folder.
+To create a new theme:
+
+1. Copy the `Default` folder from CSS/Themes to a new folder in the same location. The name of the folder will be the
+theme's name. For testing locally, make sure the index.php file is copied as well.
+2. Edit the `jquery.mobile.theme.css` file so it contains your custom fonts and colors.
+3. Once you are done editing your files and saving them, open a terminal.
+4. Navigate to the jQuery-Mobile folder's root.
+5. Run the following command to build jQuery-Mobile. The CSSTHEME specifies what theme to include. If you leave it off,
+it will build using the "default" theme.
+
+    make CSSTHEME=YourThemeName
+    
+6. The compiled files will be located in the "compiled" folder in the root of jQuery-Mobile.
--- a/build.xml
+++ b/build.xml
@ -1,66 +0,0 @@
-<?xml version="1.0"?>
-<project name="jquery-mobile" basedir="." default="merge">
-
-	<property name="cssdir" location="themes/default"/>
-	<property name="jsdir" location="js"/>
-	<property name="css-sources" value="jquery.mobile.button.css,
-	jquery.mobile.collapsible.css,
-	jquery.mobile.controlgroup.css,
-	jquery.mobile.core.css,
-	jquery.mobile.dialog.css,
-	jquery.mobile.forms.checkboxradio.css,
-	jquery.mobile.forms.fieldcontain.css,
-	jquery.mobile.forms.select.css,
-	jquery.mobile.forms.slider.css,
-	jquery.mobile.forms.textinput.css,
-	jquery.mobile.grids.css,
-	jquery.mobile.headerfooter.css,
-	jquery.mobile.listview.css,
-	jquery.mobile.navbar.css,
-	jquery.mobile.theme.css,
-	jquery.mobile.transitions.css"/>
-	<property name="js-sources" value="jquery.js,
-	jquery.ui.position.js,
-	jquery.ui.widget.js,
-	jquery.mobile.widget.js,
-	jquery.mobile.media.js,
-	jquery.mobile.support.js,
-	jquery.mobile.event.js,
-	jquery.mobile.hashchange.js,
-	jquery.mobile.core.js,
-	jquery.mobile.navigation.js,
-	jquery.mobile.page.js,
-	jquery.mobile.buttonMarkup.js,
-	jquery.mobile.collapsible.js,
-	jquery.mobile.controlGroup.js,
-	jquery.mobile.dialog.js,
-	jquery.mobile.fieldContain.js,
-	jquery.mobile.fixHeaderFooter.js,
-	jquery.mobile.forms.button.js,
-	jquery.mobile.forms.checkboxradio.js,
-	jquery.mobile.forms.select.js,
-	jquery.mobile.forms.slider.js,
-	jquery.mobile.forms.textinput.js,
-	jquery.mobile.grid.js,
-	jquery.mobile.listview.js,
-	jquery.mobile.listview.filter.js,
-	jquery.mobile.navbar.js"
-	/>
-
-	<target name="merge">
-		<antcall target="merge_css" />
-		<antcall target="merge_js" />
-	</target>
-
-	<target name="merge_css">		
-		<concat destfile="combine/jquery.mobile.css">
-			<filelist dir="${cssdir}" files="${css-sources}"/>
-		</concat>
-	</target>
-	
-	<target name="merge_js">		
-		<concat destfile="combine/jquery.mobile.js">
-			<filelist dir="${jsdir}" files="${js-sources}"/>
-		</concat>
-	</target>
-</project>
--- a/build/google-compiler-20100917.jar
+++ b/build/google-compiler-20100917.jar
--- a/build/google-compiler-20111003.jar
+++ b/build/google-compiler-20111003.jar
--- a/build/yuicompressor-2.4.6.jar
+++ b/build/yuicompressor-2.4.6.jar
--- a/combine.php
+++ b/combine.php
@ -1,18 +1,22 @@
 <?php
-
-if (!isset($type) || !isset($elements))
+// Get the filetype and array of files
+if ( ! isset($type) || ! isset($files) )
 {
-	echo "\$type and \$elements must be specified!";
+	echo '$type and $files must be specified!';
 	exit;
 }

 $contents = '';
-reset($elements);
-while (list(,$element) = each($elements)) {
-	$contents .= "\n\n" . file_get_contents($element);
+
+// Loop through the files adding them to a string
+foreach ( $files as $file ) {
+	$contents .= file_get_contents($file). "\n\n";
 }

-header("Content-Type: " . $type);
-header("Content-Length: " . strlen($contents));
+// Set the content type, filesize and an expiration so its not cached
+header('Content-Type: ' . $type);
+header('Content-Length: ' . strlen($contents));
+header('Expires: Fri, 01 Jan 2010 05:00:00 GMT');
+
+// Deliver the file
 echo $contents;
-?>
--- a/css/structure/index.php
+++ b/css/structure/index.php
@ -0,0 +1,21 @@
+<?php
+$files = array_merge($files, array(
+	'../../structure/jquery.mobile.core.css',
+	'../../structure/jquery.mobile.transitions.css',
+	'../../structure/jquery.mobile.grids.css',
+	'../../structure/jquery.mobile.headerfooter.css',
+	'../../structure/jquery.mobile.navbar.css',
+	'../../structure/jquery.mobile.button.css',
+	'../../structure/jquery.mobile.collapsible.css',
+	'../../structure/jquery.mobile.controlgroup.css',
+	'../../structure/jquery.mobile.dialog.css',
+	'../../structure/jquery.mobile.forms.checkboxradio.css',
+	'../../structure/jquery.mobile.forms.fieldcontain.css',
+	'../../structure/jquery.mobile.forms.select.css',
+	'../../structure/jquery.mobile.forms.textinput.css',
+	'../../structure/jquery.mobile.listview.css',
+	'../../structure/jquery.mobile.forms.slider.css'
+));
+
+require_once($base.'/../../../combine.php');
+
--- a/themes/default/jquery.mobile.button.css
+++ b/themes/default/jquery.mobile.button.css
@ -4,15 +4,15 @@
 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
 */
 .ui-btn { display: block; text-align: center; cursor:pointer;  position: relative; margin: .5em 5px; padding: 0; }
-.ui-btn:focus, .ui-btn a:focus { outline: none; }
-.ui-btn:visited { color: #fff; }
 .ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13px; margin: 0; }
 .ui-btn-inline { display: inline-block; }
-.ui-btn-inner { padding: .6em 25px; display: block; height: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; }
+.ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
+.ui-btn input, .ui-btn button { z-index: 2; }
 .ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: .4em 8px .5em; }
-.ui-btn-icon-notext { display: inline-block; width: 20px; height: 20px; padding: 1px 0px 1px 2px; text-indent: -9999px; }
-.ui-btn-icon-notext .ui-btn-inner { padding: 0; }
-.ui-btn-icon-notext .ui-btn-text { position: absolute; left: -999px; }
+.ui-btn-icon-notext { width: 24px; height: 24px; }
+.ui-btn-icon-notext .ui-btn-inner { padding: 2px 1px 2px 3px; }
+.ui-btn-text { position: relative; z-index: 1; }
+.ui-btn-icon-notext .ui-btn-text { position: absolute; left: -9999px; }
 .ui-btn-icon-left .ui-btn-inner { padding-left: 33px; }
 .ui-header .ui-btn-icon-left .ui-btn-inner,
 .ui-footer .ui-btn-icon-left .ui-btn-inner,
@ -31,11 +31,13 @@
 .ui-bar .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 27px; }

 /*btn icon positioning*/
-.ui-btn-icon-notext .ui-icon { display: block; }
+.ui-btn-icon-notext .ui-icon { display: block; z-index: 0;}
 .ui-btn-icon-left .ui-icon, .ui-btn-icon-right .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
 .ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon { position: absolute; left: 50%;  margin-left: -9px; }
 .ui-btn-icon-left .ui-icon { left: 10px; }
-.ui-btn-icon-right .ui-icon {right: 10px; }
+.ui-btn-icon-right .ui-icon { right: 10px; }
+.ui-btn-icon-top .ui-icon { top: 10px; }
+.ui-btn-icon-bottom .ui-icon { bottom: 10px; }
 .ui-header .ui-btn-icon-left .ui-icon,
 .ui-footer .ui-btn-icon-left .ui-icon,
 .ui-bar .ui-btn-icon-left .ui-icon { left: 4px; }
@ -48,7 +50,6 @@
 .ui-header .ui-btn-icon-bottom .ui-icon,
 .ui-footer .ui-btn-icon-bottom .ui-icon,
 .ui-bar .ui-btn-icon-bottom .ui-icon { bottom: 4px; }
-.ui-btn-icon-top .ui-icon { top: 5px; }
-.ui-btn-icon-bottom .ui-icon { bottom: 5px; }
+
 /*hiding native button,inputs */
-.ui-btn-hidden {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: 0; cursor: pointer; }
+.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: .1; cursor: pointer; background: transparent; font-size: 1px; border: none; line-height: 999px; }
--- a/themes/default/jquery.mobile.collapsible.css
+++ b/themes/default/jquery.mobile.collapsible.css
@ -3,16 +3,23 @@
 * Copyright (c) jQuery Project
 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
 */
-.ui-collapsible-contain { margin: .5em 0; }
+.ui-collapsible { margin: .5em 0; }
 .ui-collapsible-heading { font-size: 16px; display: block; margin: 0 -8px; padding: 0; border-width: 0 0 1px 0; position: relative; }
 .ui-collapsible-heading a { text-align: left; margin: 0;  }
 .ui-collapsible-heading a .ui-btn-inner { padding-left: 40px; }
 .ui-collapsible-heading a span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0px 1px 2px; text-indent: -9999px; }
-.ui-collapsible-heading a span.ui-btn .ui-btn-inner { padding: 0; }
+.ui-collapsible-heading a span.ui-btn .ui-btn-inner { padding: 10px 0; }
 .ui-collapsible-heading a span.ui-btn .ui-icon { left: 0; margin-top: -10px; }
-.ui-collapsible-heading-status { position:absolute; left:-99999px; }
-.ui-collapsible-content {  display: block; padding: 10px 0 10px 8px; }
+.ui-collapsible-heading-status { position: fixed; top: 0; left:-9999px; }
+.ui-collapsible-content {
+	display: block;
+	margin:  0 -8px;
+	padding: 10px 16px;
+	border-top:  none;      /* Overrides ui-btn-up-* */
+	background-image: none; /* Overrides ui-btn-up-* */
+	font-weight: normal;    /* Overrides ui-btn-up-* */
+}
 .ui-collapsible-content-collapsed { display: none; }

 .ui-collapsible-set { margin: .5em 0; }
-.ui-collapsible-set .ui-collapsible-contain { margin: -1px 0 0; }
+.ui-collapsible-set .ui-collapsible { margin: -1px 0 0; }
--- a/themes/default/jquery.mobile.controlgroup.css
+++ b/themes/default/jquery.mobile.controlgroup.css
@ -6,14 +6,16 @@
 .ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0 1em; }
 .ui-bar .ui-controlgroup { margin: 0 .3em; }
 .ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; }
-.ui-controlgroup-controls { display: block; width: 95%;}
+.ui-controlgroup-controls { display: block; width: 100%;}
 .ui-controlgroup li { list-style: none; }
 .ui-controlgroup-vertical .ui-btn,
 .ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio { margin: 0; border-bottom-width: 0;  }
+.ui-controlgroup-controls label.ui-select { position: absolute; left: -9999px; }
+
 .ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; }
 .ui-controlgroup-horizontal { padding: 0; }
-.ui-controlgroup-horizontal .ui-btn,
-.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { margin: 0 -5px 0 0; display: inline-block;  }
+.ui-controlgroup-horizontal .ui-btn, .ui-controlgroup-horizontal .ui-select { display: inline-block; margin: 0 -5px 0 0; }
+.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { float: left; margin: 0 -1px 0 0; }
 .ui-controlgroup-horizontal .ui-checkbox .ui-btn, .ui-controlgroup-horizontal .ui-radio .ui-btn,
 .ui-controlgroup-horizontal .ui-checkbox:last-child, .ui-controlgroup-horizontal .ui-radio:last-child { margin-right: 0; }
 .ui-controlgroup-horizontal .ui-controlgroup-last { margin-right: 0; }
@ -23,5 +25,9 @@
 .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner {  padding: 5px 6px 5px 5px; }
 */

-.min-width-480px .ui-controlgroup-label { vertical-align: top; display: inline-block;  width: 20%;  margin: 0 2% 0 0;  }
-.min-width-480px .ui-controlgroup-controls { width: 60%; display: inline-block; } 
+@media all and (min-width: 450px){
+	.ui-field-contain .ui-controlgroup-label { vertical-align: top; display: inline-block;  width: 20%;  margin: 0 2% 0 0;  }
+	.ui-field-contain .ui-controlgroup-controls { width: 60%; display: inline-block; }
+	.ui-field-contain .ui-controlgroup .ui-select { width: 100%; } 
+	.ui-field-contain .ui-controlgroup-horizontal .ui-select { width: auto; }
+}	
--- a/css/structure/jquery.mobile.core.css
+++ b/css/structure/jquery.mobile.core.css
@ -0,0 +1,126 @@
+/*
+* jQuery Mobile Framework
+* Copyright (c) jQuery Project
+* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
+*/
+
+/* some unsets - more probably needed */
+.ui-mobile, .ui-mobile body { height: 100%; }
+.ui-mobile fieldset, .ui-page { padding: 0; margin: 0; }
+.ui-mobile a img, .ui-mobile fieldset { border: 0; }
+
+/* responsive page widths */
+.ui-mobile-viewport {  margin: 0; overflow-x: hidden; -webkit-text-size-adjust: none; -ms-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+
+/* "page" containers - full-screen views, one should always be in view post-pageload */
+.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; } 
+.ui-mobile .ui-page-active { display: block; overflow: visible; }
+
+/* on ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */
+.ui-page { outline: none; }
+
+/*orientations from js are available */
+@media screen and (orientation: portrait){
+.ui-mobile, .ui-mobile .ui-page { min-height: 420px; }
+}
+@media screen and (orientation: landscape){
+.ui-mobile, .ui-mobile .ui-page { min-height: 300px; }
+}
+
+/* native overflow scrolling */
+.ui-page.ui-mobile-touch-overflow,
+.ui-mobile-touch-overflow.ui-native-fixed .ui-content {
+	overflow: auto;
+	height: 100%;
+	-webkit-overflow-scrolling: touch;
+	-moz-overflow-scrolling: touch;
+	-o-overflow-scrolling: touch;
+	-ms-overflow-scrolling: touch;
+	overflow-scrolling: touch;
+}
+.ui-page.ui-mobile-touch-overflow,
+.ui-page.ui-mobile-touch-overflow * {
+	/* some level of transform keeps elements from blinking out of visibility on iOS */
+	-webkit-transform: rotateY(0);
+}
+.ui-page.ui-mobile-pre-transition {
+	display: block;
+}
+
+/* loading screen */
+.ui-loading .ui-mobile-viewport { overflow: hidden !important; }
+.ui-loading .ui-loader { display: block; }
+.ui-loading .ui-page { overflow: hidden;  }
+.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; }
+.ui-loader h1 { font-size: 15px; text-align: center; }
+.ui-loader .ui-icon { position: static; display: block; opacity: .9; margin: 0 auto; width: 35px; height: 35px; background-color: transparent; }
+
+/*fouc*/
+.ui-mobile-rendering > * { visibility: hidden; }
+
+/*headers, content panels*/
+.ui-bar, .ui-body { position: relative; padding: .4em 15px;  overflow: hidden; display: block;  clear:both;  }
+.ui-bar { font-size: 16px; margin: 0; }
+.ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 { margin: 0; padding: 0; font-size: 16px; display: inline-block; }
+
+.ui-header, .ui-footer { display: block; }
+.ui-page .ui-header, .ui-page .ui-footer { position: relative; }
+.ui-header .ui-btn-left { position: absolute; left: 10px; top: .4em;  }
+.ui-header .ui-btn-right { position: absolute; right: 10px; top: .4em; }
+.ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 90px .8em;  padding: 0;  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
+.ui-footer .ui-title { margin: .6em 15px .8em;  }
+
+/*content area*/
+.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
+.ui-page-fullscreen .ui-content { padding:0; }
+
+/* native fixed headers and footers */
+.ui-mobile-touch-overflow.ui-page.ui-native-fixed,
+.ui-mobile-touch-overflow.ui-page.ui-native-fullscreen {
+	overflow: visible;
+}
+.ui-mobile-touch-overflow.ui-native-fixed .ui-header,
+.ui-mobile-touch-overflow.ui-native-fixed .ui-footer {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	z-index: 200;
+}
+.ui-mobile-touch-overflow.ui-page.ui-native-fixed .ui-footer {
+	top: auto;
+	bottom: 0;
+}
+.ui-mobile-touch-overflow.ui-native-fixed .ui-content {
+	padding-top: 2.5em;
+	padding-bottom: 3em;
+	top: 0;
+	bottom: 0;
+	height: auto;
+	position: absolute;
+}
+.ui-mobile-touch-overflow.ui-native-fullscreen .ui-content {
+	padding-top: 0;
+	padding-bottom: 0;
+}
+.ui-mobile-touch-overflow.ui-native-fullscreen .ui-header,
+.ui-mobile-touch-overflow.ui-native-fullscreen .ui-footer {
+	opacity: .9;
+}
+.ui-native-bars-hidden {
+	display: none;
+}
+
+/* icons sizing */
+.ui-icon { width: 18px; height: 18px; }
+
+/* fullscreen class on ui-content div */
+.ui-fullscreen {  }
+.ui-fullscreen img { max-width: 100%; }
+
+/* non-js content hiding */
+.ui-nojs { position: absolute; left: -9999px; }
+
+/* accessible content hiding */
+.ui-hide-label label,
+.ui-hidden-accessible { position: absolute !important; left: -9999px; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
--- a/themes/default/jquery.mobile.dialog.css
+++ b/themes/default/jquery.mobile.dialog.css
@ -3,6 +3,8 @@
 * Copyright (c) jQuery Project
 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
 */
-.ui-dialog .ui-header, .ui-dialog .ui-content,  .ui-dialog .ui-footer { margin: 15px; position: relative; }
-.ui-dialog .ui-header, .ui-dialog .ui-footer { z-index: 10; width: auto; }
+.ui-dialog { min-height: 480px; }
+.ui-dialog .ui-header, .ui-dialog .ui-content,  .ui-dialog .ui-footer { max-width: 500px; margin: 10% auto 15px auto; padding: 15px; width: 85%; position: relative; }
+.ui-dialog .ui-header { padding: 0 15px; }
+.ui-dialog .ui-header, .ui-dialog .ui-footer { z-index: 10; }
 .ui-dialog .ui-content, .ui-dialog .ui-footer { margin-top: -15px;  }
--- a/themes/default/jquery.mobile.forms.checkboxradio.css
+++ b/themes/default/jquery.mobile.forms.checkboxradio.css
@ -5,8 +5,10 @@
 */
 .ui-checkbox, .ui-radio { position:relative;  margin: .2em 0 .5em; z-index: 1;  }
 .ui-checkbox .ui-btn, .ui-radio .ui-btn { margin: 0; text-align: left; z-index: 2; }
+.ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; }
 .ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 45px; }
 .ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
+.ui-checkbox .ui-icon, .ui-radio .ui-icon { top: 1.1em; }
 .ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {left: 15px; }
 .ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon {right: 15px; }
 /* input, label positioning */
--- a/themes/default/jquery.mobile.forms.fieldcontain.css
+++ b/themes/default/jquery.mobile.forms.fieldcontain.css
@ -3,8 +3,8 @@
 * Copyright (c) jQuery Project
 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
 */
-.ui-field-contain { background: none; padding: 1.5em 0; margin: 0; border-bottom-width: 1px; overflow: visible; }
+.ui-field-contain { padding: 1.5em 0; margin: 0; border-bottom-width: 1px; overflow: visible; }
 .ui-field-contain:first-child { border-top-width: 0; }
-@media screen and (max-width: 480px){ 
+@media all and (min-width: 450px){
 	.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
-}
+}	
--- a/css/structure/jquery.mobile.forms.select.css
+++ b/css/structure/jquery.mobile.forms.select.css
@ -0,0 +1,39 @@
+/*
+* jQuery Mobile Framework
+* Copyright (c) jQuery Project
+* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
+*/
+.ui-select { display: block; position: relative; }
+.ui-select select { position: absolute; left: -9999px; top: -9999px; }
+.ui-select .ui-btn { overflow: hidden; }
+.ui-select .ui-btn select { cursor: pointer; -webkit-appearance: button; left: 0; top:0; width: 100%;  min-height: 1.5em; min-height: 100%; height: 3em; max-height: 100%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); z-index: 2; }
+@-moz-document url-prefix() {.ui-select .ui-btn select { opacity: 0.0001; }}
+.ui-select .ui-btn select.ui-select-nativeonly { opacity: 1; text-indent: 0; }
+
+.ui-select .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; } 
+.ui-select .ui-btn-icon-right .ui-icon { right: 15px;  }
+
+/* labels */
+label.ui-select { font-size: 16px; line-height: 1.4;  font-weight: normal; margin: 0 0 .3em; display: block; }
+
+/*listbox*/
+.ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text { display: block; min-height: 1em; overflow: hidden; }
+.ui-select .ui-btn-text { text-overflow: ellipsis; }
+
+.ui-selectmenu { position: absolute; padding: 0; z-index: 100 !important; width: 80%; max-width: 350px; padding: 6px; }
+.ui-selectmenu .ui-listview { margin: 0; }
+.ui-selectmenu .ui-btn.ui-li-divider { cursor: default; }
+.ui-selectmenu-hidden { top: -9999px; left: -9999px; }
+.ui-selectmenu-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: 99; }
+.ui-screen-hidden, .ui-selectmenu-list .ui-li .ui-icon { display: none; }
+.ui-selectmenu-list .ui-li .ui-icon { display: block; }
+.ui-li.ui-selectmenu-placeholder { display: none; }
+.ui-selectmenu .ui-header .ui-title { margin: 0.6em 46px 0.8em; }
+
+@media all and (min-width: 450px){	
+	.ui-field-contain label.ui-select { vertical-align: top;  display: inline-block;  width: 20%;  margin: 0 2% 0 0; }
+	.ui-field-contain .ui-select { width: 60%; display: inline-block; }
+}	
+
+/* when no placeholder is defined in a multiple select, the header height doesn't even extend past the close button.  this shim's content in there */
+.ui-selectmenu .ui-header h1:after { content: '.'; visibility: hidden; }
--- a/themes/default/jquery.mobile.forms.slider.css
+++ b/themes/default/jquery.mobile.forms.slider.css
@ -3,23 +3,27 @@
 * Copyright (c) jQuery Project
 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
 */
-label.ui-slider { display: block; }
-input.ui-slider-input, .min-width-480px input.ui-slider-input { display: inline-block; width: 50px; }
+label.ui-slider { font-size: 16px; line-height: 1.4;  font-weight: normal; margin: 0 0 .3em; display: block; }
+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: 66%; }
+div.ui-slider-switch { width: 99.8%; }
 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; }
-.min-width-480px label.ui-slider { display: inline-block;  width: 20%;  margin: 0 2% 0 0; }
-.min-width-480px div.ui-slider { width: 45%; }
+@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%; }
+}	

 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%; }
-div.ui-slider-handle-snapping { -webkit-transition: left 100ms linear; }
+a.ui-slider-handle-snapping { -webkit-transition: left 100ms linear; }
 div.ui-slider-labelbg { position: absolute; top:0; margin: 0; border-width: 0; }
 div.ui-slider-switch div.ui-slider-labelbg-a { width: 60%; height: 100%; left: 0; }
 div.ui-slider-switch div.ui-slider-labelbg-b { width: 60%; height: 100%; right: 0; }
-.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: 10; }
+.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; }
--- a/css/structure/jquery.mobile.forms.textinput.css
+++ b/css/structure/jquery.mobile.forms.textinput.css
@ -0,0 +1,27 @@
+/*
+* jQuery Mobile Framework
+* Copyright (c) jQuery Project
+* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
+*/
+label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }
+input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em 1.5%; line-height: 1.4; font-size: 16px; display: block; width: 97%; }
+input.ui-input-text { -webkit-appearance: none; }
+textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; }
+.ui-input-search { padding: 0 30px; background-image: none; position: relative; }
+.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
+.ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
+.ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
+.ui-input-search .ui-input-clear-hidden { display: none; }
+
+/* orientation adjustments - incomplete!*/
+@media all and (min-width: 450px){
+	.ui-field-contain label.ui-input-text  { vertical-align: top; display: inline-block;  width: 20%;  margin: 0 2% 0 0 }
+	.ui-field-contain input.ui-input-text, 
+	.ui-field-contain textarea.ui-input-text, 
+	.ui-field-contain .ui-input-search { width: 60%; display: inline-block; } 
+	.ui-field-contain .ui-input-search { width: 50%; }
+	.ui-hide-label input.ui-input-text, 
+	.ui-hide-label textarea.ui-input-text, 
+	.ui-hide-label .ui-input-search { padding: .4em 1.5%; width: 97%; } 
+	.ui-input-search input.ui-input-text { width: 98%; /*echos rule from above*/ }
+}
--- a/themes/default/jquery.mobile.grids.css
+++ b/themes/default/jquery.mobile.grids.css
@ -6,7 +6,10 @@

 /* content configurations. */
 .ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; }
-.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; }
+.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px;}
+
+/* grid solo: 100 - single item fallback */
+.ui-grid-solo .ui-block-a { width: 100%; float: none; }

 /* grid a: 50/50 */
 .ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 50%; }
@ -22,4 +25,4 @@

 /* grid d: 20/20/20/20/20 */
 .ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 20%; }
-.ui-grid-d .ui-block-a { clear: left; }
+.ui-grid-d .ui-block-a { clear: left; }
--- a/themes/default/jquery.mobile.headerfooter.css
+++ b/themes/default/jquery.mobile.headerfooter.css
--- a/css/structure/jquery.mobile.listview.css
+++ b/css/structure/jquery.mobile.listview.css
@ -0,0 +1,56 @@
+/*
+* jQuery Mobile Framework
+* Copyright (c) jQuery Project
+* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
+*/
+.ui-listview { margin: 0; counter-reset: listnumbering; }
+.ui-content .ui-listview { margin: -15px; }
+.ui-content .ui-listview-inset { margin: 1em 0;  }
+.ui-listview, .ui-li { list-style:none; padding:0; }
+.ui-li, .ui-li.ui-field-contain { display: block; margin:0; position: relative; overflow: visible; text-align: left; border-width: 0; border-top-width: 1px; }
+.ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap;  }
+.ui-li-divider, .ui-li-static { padding: .5em 15px; font-size: 14px; font-weight: bold;  }
+.ui-li-divider { counter-reset: listnumbering;  }
+ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal;counter-increment: listnumbering; content: counter(listnumbering) ". "; }
+ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
+.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
+.ui-li:last-child, .ui-li.ui-field-contain:last-child { border-bottom-width: 1px; }
+.ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
+.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px .7em 15px; display: block; }
+.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb  { min-height: 60px; padding-left: 100px; }
+.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon {  min-height: 20px; padding-left: 40px; }
+.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count { padding-right: 45px; }
+.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow { padding-right: 30px; }
+.ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow.ui-li-has-count { padding-right: 75px; }
+.ui-li-has-count .ui-btn-text { padding-right: 15px; }
+.ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;  }
+.ui-li-desc {  font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
+.ui-li-thumb, .ui-listview .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; }
+.ui-listview .ui-li-icon { max-height: 40px; max-width: 40px; left: 10px; top: .9em; }
+.ui-li-thumb, .ui-listview .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; }
+
+.ui-li-aside { float: right; width: 50%; text-align: right; margin: .3em 0; }
+@media all and (min-width: 480px){
+	 .ui-li-aside { width: 45%; }
+}	 
+.ui-li-divider { cursor: default; }
+.ui-li-has-alt .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt { padding-right: 95px; }
+.ui-li-has-count .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 38px; }
+.ui-li-divider .ui-li-count, .ui-li-static .ui-li-count { right: 10px; }
+.ui-li-has-alt .ui-li-count { right: 55px; }
+.ui-li-link-alt { position: absolute; width: 40px; height: 100%; border-width: 0; border-left-width: 1px; top: 0; right: 0; margin: 0; padding: 0; z-index: 2; }
+.ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 8px; top: 50%; margin: -11px 0 0 0; border-bottom-width: 1px; z-index: -1;}
+.ui-li-link-alt .ui-btn-inner { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0;}
+.ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px;  }
+
+.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0px; }
+
+.ui-listview-filter { border-width: 0; overflow: hidden; margin: -15px -15px 15px -15px }
+.ui-listview-filter .ui-input-search { margin: 5px; width: auto; display: block; }
+
+.ui-listview-filter-inset { margin: -15px -5px -15px -5px; background: transparent; }
+.ui-li.ui-screen-hidden{display:none;}
+/* Odd iPad positioning issue. */
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+    .ui-li .ui-btn-text { overflow:  visible; }
+}
--- a/themes/default/jquery.mobile.navbar.css
+++ b/themes/default/jquery.mobile.navbar.css
@ -7,8 +7,8 @@
 .ui-navbar ul, .ui-navbar-expanded ul { list-style:none; padding: 0; margin: 0; position: relative; display: block; border: 0;}
 .ui-navbar-collapsed ul { float: left; width: 75%; margin-right: -2px; }
 .ui-navbar-collapsed .ui-navbar-toggle { float: left; width: 25%; }
-.ui-navbar li.ui-navbar-truncate { position: absolute; left: -99999px; top: -99999px; }
-.ui-navbar li .ui-btn, .ui-navbar .ui-navbar-toggle .ui-btn { display: block; font-size: 12px; text-align: center; margin: 0; outline: none; border-right-width: 0; }
+.ui-navbar li.ui-navbar-truncate { position: absolute; left: -9999px; top: -9999px; }
+.ui-navbar li .ui-btn, .ui-navbar .ui-navbar-toggle .ui-btn { display: block; font-size: 12px; text-align: center; margin: 0; border-right-width: 0; }
 .ui-navbar li .ui-btn {  margin-right: -1px; }
 .ui-navbar li .ui-btn:last-child { margin-right: 0; }
 .ui-header .ui-navbar li .ui-btn, .ui-header .ui-navbar .ui-navbar-toggle .ui-btn,
@ -23,4 +23,4 @@
 .ui-navbar-expanded .ui-btn-icon-bottom .ui-btn-inner { padding: 15px 5px 45px; text-align: center; }
 .ui-navbar-expanded .ui-btn-icon-bottom .ui-icon { bottom: 15px; }
 .ui-navbar-expanded li .ui-btn .ui-btn-inner { min-height: 2.5em; }
-.ui-navbar-expanded .ui-navbar-noicons .ui-btn .ui-btn-inner { padding-top: 1.8em; padding-bottom: 1.9em; }
+.ui-navbar-expanded .ui-navbar-noicons .ui-btn .ui-btn-inner { padding-top: 1.8em; padding-bottom: 1.9em; }
--- a/themes/default/jquery.mobile.transitions.css
+++ b/themes/default/jquery.mobile.transitions.css
@ -8,6 +8,7 @@
 	-webkit-animation-name: spin;
 	-webkit-animation-duration: 1s;
 	-webkit-animation-iteration-count:  infinite;
+	-webkit-animation-timing-function: linear;
 }
@-webkit-keyframes spin {
 	from {-webkit-transform: rotate(0deg);}
@ -22,14 +23,20 @@ Built by David Kaneda and maintained by Jonathan Stark.
 	-webkit-animation-duration: 350ms;
 }

+
+.slide.out {
+	-webkit-transform: translateX(-100%);
+	-webkit-animation-name: slideouttoleft;
+}
+
 .slide.in {
 	-webkit-transform: translateX(0);
 	-webkit-animation-name: slideinfromright;
 }

-.slide.out {
-	-webkit-transform: translateX(-100%);
-	-webkit-animation-name: slideouttoleft;
+.slide.out.reverse {
+	-webkit-transform: translateX(100%);
+	-webkit-animation-name: slideouttoright;
 }

 .slide.in.reverse {
@ -37,9 +44,9 @@ Built by David Kaneda and maintained by Jonathan Stark.
 	-webkit-animation-name: slideinfromleft;
 }

-.slide.out.reverse {
-	-webkit-transform: translateX(100%);
-	-webkit-animation-name: slideouttoright;
+.slideup.out {
+	-webkit-animation-name: dontmove;
+	z-index: 0;
 }

 .slideup.in {
@ -48,9 +55,9 @@ Built by David Kaneda and maintained by Jonathan Stark.
 	z-index: 10;
 }

-.slideup.out {
-	-webkit-animation-name: dontmove;
+.slideup.in.reverse {
 	z-index: 0;
+	-webkit-animation-name: dontmove;
 }

 .slideup.out.reverse {
@ -59,19 +66,20 @@ Built by David Kaneda and maintained by Jonathan Stark.
 	-webkit-animation-name: slideouttobottom;
 }

-.slideup.in.reverse {
-	z-index: 0;
+.slidedown.out {
 	-webkit-animation-name: dontmove;
+	z-index: 0;
 }
+
 .slidedown.in {
 	-webkit-transform: translateY(0);
 	-webkit-animation-name: slideinfromtop;
 	z-index: 10;
 }

-.slidedown.out {
-	-webkit-animation-name: dontmove;
+.slidedown.in.reverse {
 	z-index: 0;
+	-webkit-animation-name: dontmove;
 }

 .slidedown.out.reverse {
@ -80,11 +88,6 @@ Built by David Kaneda and maintained by Jonathan Stark.
 	-webkit-animation-name: slideouttotop;
 }

-.slidedown.in.reverse {
-	z-index: 0;
-	-webkit-animation-name: dontmove;
-}
-
@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
@ -105,7 +108,6 @@ Built by David Kaneda and maintained by Jonathan Stark.
    to { -webkit-transform: translateX(100%); }
 }

-
@-webkit-keyframes slideinfromtop {
    from { -webkit-transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); }
@ -135,23 +137,24 @@ Built by David Kaneda and maintained by Jonathan Stark.
    to { opacity: 0; }
 }

-.fade.in {
-	opacity: 1;
-	z-index: 10;
-	-webkit-animation-name: fadein;
-}
 .fade.out {
 	z-index: 0;
 	-webkit-animation-name: fadeout;
 }

-/* The properties in this body rule are only necessary for the 'flip' transition.
+.fade.in {
+	opacity: 1;
+	z-index: 10;
+	-webkit-animation-name: fadein;
+}
+
+/* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
-.ui-mobile-viewport-perspective {
+.viewport-flip {
 	-webkit-perspective: 1000;
 	position: absolute;
 }
@ -169,28 +172,28 @@ Built by David Kaneda and maintained by Jonathan Stark.
 	-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
 }

-.flip.in {
-	-webkit-transform: rotateY(0) scale(1);
-	-webkit-animation-name: flipinfromleft;
-}
-
 .flip.out {
 	-webkit-transform: rotateY(-180deg) scale(.8);
 	-webkit-animation-name: flipouttoleft;
 }

-/* Shake it all about */
-
-.flip.in.reverse {
+.flip.in {
 	-webkit-transform: rotateY(0) scale(1);
-	-webkit-animation-name: flipinfromright;
+	-webkit-animation-name: flipinfromleft;
 }

+/* Shake it all about */
+
 .flip.out.reverse {
 	-webkit-transform: rotateY(180deg) scale(.8);
 	-webkit-animation-name: flipouttoright;
 }

+.flip.in.reverse {
+	-webkit-transform: rotateY(0) scale(1);
+	-webkit-animation-name: flipinfromright;
+}
+
@-webkit-keyframes flipinfromright {
    from { -webkit-transform: rotateY(-180deg) scale(.8); }
    to { -webkit-transform: rotateY(0) scale(1); }
@ -230,6 +233,11 @@ Built by David Kaneda and maintained by Jonathan Stark.
 	z-index: 10;
 }

+.pop.in.reverse {
+	z-index: 0;
+	-webkit-animation-name: dontmove;
+}
+
 .pop.out.reverse {
 	-webkit-transform: scale(.2);
 	opacity: 0;
@ -237,11 +245,6 @@ Built by David Kaneda and maintained by Jonathan Stark.
 	z-index: 10;
 }

-.pop.in.reverse {
-	z-index: 0;
-	-webkit-animation-name: dontmove;
-}
-
@-webkit-keyframes popin {
    from {
        -webkit-transform: scale(.2);
--- a/css/themes/default/images/ajax-loader.png
+++ b/css/themes/default/images/ajax-loader.png
--- a/css/themes/default/images/icons-18-black.png
+++ b/css/themes/default/images/icons-18-black.png
--- a/css/themes/default/images/icons-18-white.png
+++ b/css/themes/default/images/icons-18-white.png
--- a/css/themes/default/images/icons-36-black.png
+++ b/css/themes/default/images/icons-36-black.png
--- a/css/themes/default/images/icons-36-white.png
+++ b/css/themes/default/images/icons-36-white.png
--- a/css/themes/default/index.php
+++ b/css/themes/default/index.php
@ -0,0 +1,7 @@
+<?php
+$type = 'text/css';
+$files = array(
+	'jquery.mobile.theme.css'
+);
+$base = dirname(__FILE__);
+require_once('../../structure/index.php');
--- a/css/themes/default/jquery.mobile.theme.css
+++ b/css/themes/default/jquery.mobile.theme.css
--- a/css/themes/valencia/images/ajax-loader.png
+++ b/css/themes/valencia/images/ajax-loader.png
--- a/css/themes/valencia/images/icon-search-black.png
+++ b/css/themes/valencia/images/icon-search-black.png
--- a/css/themes/valencia/images/icons-18-black.png
+++ b/css/themes/valencia/images/icons-18-black.png
--- a/css/themes/valencia/images/icons-18-white.png
+++ b/css/themes/valencia/images/icons-18-white.png
--- a/css/themes/valencia/images/icons-36-black.png
+++ b/css/themes/valencia/images/icons-36-black.png
--- a/css/themes/valencia/images/icons-36-white.png
+++ b/css/themes/valencia/images/icons-36-white.png
--- a/css/themes/valencia/images/texture_05.png
+++ b/css/themes/valencia/images/texture_05.png
--- a/css/themes/valencia/images/texture_075.png
+++ b/css/themes/valencia/images/texture_075.png
--- a/css/themes/valencia/index.php
+++ b/css/themes/valencia/index.php
@ -0,0 +1,7 @@
+<?php
+$type = 'text/css';
+$files = array(
+	'jquery.mobile.theme.css'
+);
+$base = dirname(__FILE__);
+require_once('../../structure/index.php');
--- a/css/themes/valencia/jquery.mobile.theme.css
+++ b/css/themes/valencia/jquery.mobile.theme.css
@ -2,7 +2,6 @@
 * jQuery Mobile Framework
 * Copyright (c) jQuery Project
 * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
-* Note: Code is in draft form and is subject to change 
 */


@ -18,25 +17,23 @@
  background:             #e99515; 
  color:                  #fff; 
  text-shadow: 0 -1px 0px #94440F; 
-  background-image: -moz-linear-gradient(top, 
-                          #e9a015,
-                          #e98a15);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #e9a015),
-    color-stop(1,         #e98a15));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e9a015', EndColorStr='#e98a15')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e9a015), to(#e98a15)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #e9a015, #e98a15); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #e9a015, #e98a15); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #e9a015, #e98a15); /* IE10 */
+  background-image:      -o-linear-gradient(top, #e9a015, #e98a15); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #e9a015, #e98a15); 
 }
 .ui-btn-up-a {
  border: 1px solid       #BD610D;
  background:             #e68510;
  color:                  #fff;
-  background-image: -moz-linear-gradient(top, 
-                          #ea9e0c,
-                          #e68510);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #ea9e0c),
-    color-stop(1,         #e68510));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ea9e0c', EndColorStr='#e68510')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ea9e0c), to(#e68510)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #ea9e0c, #e68510); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #ea9e0c, #e68510); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #ea9e0c, #e68510); /* IE10 */
+  background-image:      -o-linear-gradient(top, #ea9e0c, #e68510); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #ea9e0c, #e68510); 
 }
 .ui-btn-up-a a.ui-link-inherit {
  color:                  #fff;
@ -45,13 +42,12 @@
  border: 1px solid       #b77504;
  background:             #ed9730;
  color:                  #fff;
-  background-image: -moz-linear-gradient(top, 
-                          #edab30,
-                          #ed9730);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #edab30),
-    color-stop(1,         #ed9730));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#edab30', EndColorStr='#ed9730')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#edab30), to(#ed9730)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #edab30, #ed9730); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #edab30, #ed9730); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #edab30, #ed9730); /* IE10 */
+  background-image:      -o-linear-gradient(top, #edab30, #ed9730); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #edab30, #ed9730); 
 }
 .ui-btn-hover-a a.ui-link-inherit {
  color:                  #fff;
@ -60,13 +56,12 @@
  border: 1px solid       #BD610D;
  background:             #BA6E11;
  color:                  #fff;
-  background-image: -moz-linear-gradient(top, 
-                          #BA8011,
-                          #BA6E11);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #BA8011),
-    color-stop(1,         #BA6E11));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#BA8011', EndColorStr='#BA6E11')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#BA8011), to(#BA6E11)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #BA8011, #BA6E11); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #BA8011, #BA6E11); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #BA8011, #BA6E11); /* IE10 */
+  background-image:      -o-linear-gradient(top, #BA8011, #BA6E11); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #BA8011, #BA6E11);
 }
 .ui-btn-up-a,
 .ui-btn-hover-a,
@ -97,19 +92,12 @@
  background:             #444;
  color:                  #ddd;
  text-shadow: 0 -1px 0px #000;
-  background-image: -moz-linear-gradient(top, 
-                          #333  0%,
-                          #333  5%,
-                          #444  15%, 
-                          #444  60%, 
-                          #222  100%);
-  background-image: -webkit-gradient(linear, center top, center bottom, 
-    color-stop(0,         #333), 
-    color-stop(5%,        #333), 
-    color-stop(15%,       #444), 
-    color-stop(60%,       #444), 
-    color-stop(1,         #222));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#222222')";
+  background-image: -webkit-gradient(linear, center top, center bottom, from(#333), color-stop(5%, #333), color-stop(15%, #444), color-stop(60%, #444), to(#222)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #333 0%, #333 5%, #444 15%, #444 60%, #222 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #333 0%, #333 5%, #444 15%, #444 60%, #222 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #333 0%, #333 5%, #444 15%, #444 60%, #222 100%); /* IE10 */
+  background-image:      -o-linear-gradient(top, #333 0%, #333 5%, #444 15%, #444 60%, #222 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #333 0%, #333 5%, #444 15%, #444 60%, #222 100%);
 }
 .ui-body-a, 
 .ui-body-a input, 
@ -138,25 +126,23 @@
  background:             #333333; 
  color:                  #fff; 
  text-shadow: 0 -1px 0px #111; 
-  background-image: -moz-linear-gradient(top, 
-                          #555555,
-                          #333333);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #555555),
-    color-stop(1,         #333333));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#333333')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #555, #333); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #555, #333); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #555, #333); /* IE10 */
+  background-image:      -o-linear-gradient(top, #555, #333); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #555, #333);
 }
 .ui-btn-up-b {
  border: 1px solid       #232323;
  background:             #393939;
  color:                  #eee;
-  background-image: -moz-linear-gradient(top, 
-                          #5E5E5E,
-                          #393939);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #5E5E5E),
-    color-stop(1,         #393939));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E5E5E', EndColorStr='#393939')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5E5E5E), to(#393939)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #5E5E5E, #393939); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #5E5E5E, #393939); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #5E5E5E, #393939); /* IE10 */
+  background-image:      -o-linear-gradient(top, #5E5E5E, #393939); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #5E5E5E, #393939);
 }
 .ui-btn-up-b a.ui-link-inherit { 
  color:                  #eee;
@ -165,13 +151,12 @@
  border: 1px solid       #232323;
  background:             #494949;
  color:                  #fff;
-  background-image: -moz-linear-gradient(top, 
-                          #6E6E6E,
-                          #494949);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #6E6E6E),
-    color-stop(1,         #494949));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#6E6E6E', EndColorStr='#494949')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#6E6E6E), to(#494949)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #6E6E6E, #494949); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #6E6E6E, #494949); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #6E6E6E, #494949); /* IE10 */
+  background-image:      -o-linear-gradient(top, #6E6E6E, #494949); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #6E6E6E, #494949);
 }

 .ui-btn-hover-b a.ui-link-inherit {
@ -181,13 +166,12 @@
  border: 1px solid       #232323;
  background:             #292929;
  color:                  #fff;
-  background-image: -moz-linear-gradient(top, 
-                          #4E4E4E,
-                          #292929);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #4E4E4E),
-    color-stop(1,         #292929));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4E4E4E', EndColorStr='#292929')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#4E4E4E), to(#292929)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #4E4E4E, #292929); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #4E4E4E, #292929); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #4E4E4E, #292929); /* IE10 */
+  background-image:      -o-linear-gradient(top, #4E4E4E, #292929); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #4E4E4E, #292929);
 }
 .ui-btn-down-b a.ui-link-inherit {
  color:                  #fff; 
@ -249,13 +233,12 @@
  background:             #e5e5e5; 
  color:                  #111; 
  text-shadow: 0 1px 0px  #fff;
-  background-image: -moz-linear-gradient(top, 
-                          #eeeeee,
-                          #e5e5e5);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #eeeeee),
-    color-stop(1,         #e5e5e5));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#e5e5e5')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#e5e5e5)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #eee, #e5e5e5); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #eee, #e5e5e5); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #eee, #e5e5e5); /* IE10 */
+  background-image:      -o-linear-gradient(top, #eee, #e5e5e5); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #eee, #e5e5e5);
 }
 .ui-bar-c, 
 .ui-bar-c input, 
@ -277,13 +260,12 @@
  border: 1px solid       #ccc;
  background:             #e5e5e5;
  color:                  #444;
-  background-image: -moz-linear-gradient(top, 
-                          #eeeeee,
-                          #e5e5e5);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #eeeeee),
-    color-stop(1,         #e5e5e5));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#e5e5e5')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#e5e5e5)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #eee, #e5e5e5); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #eee, #e5e5e5); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #eee, #e5e5e5); /* IE10 */
+  background-image:      -o-linear-gradient(top, #eee, #e5e5e5); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #eee, #e5e5e5);
 }
 .ui-btn-up-c a.ui-link-inherit {
  color:                  #444;
@ -292,13 +274,12 @@
  border: 1px solid       #ccc;
  background:             #f5f5f5;
  color:                  #222;
-  background-image: -moz-linear-gradient(top, 
-                          #ffffff,
-                          #f5f5f5);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #ffffff),
-    color-stop(1,         #f5f5f5));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#f5f5f5')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #fff, #f5f5f5); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #fff, #f5f5f5); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #fff, #f5f5f5); /* IE10 */
+  background-image:      -o-linear-gradient(top, #fff, #f5f5f5); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #fff, #f5f5f5);
 }
 .ui-btn-hover-c a.ui-link-inherit { 
  color:                  #222;
@ -307,13 +288,12 @@
  border: 1px solid       #ccc;
  background:             #d5d5d5;
  color:                  #111;
-  background-image: -moz-linear-gradient(top, 
-                          #dddddd,
-                          #d5d5d5);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #dddddd),
-    color-stop(1,         #d5d5d5));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#dddddd', EndColorStr='#d5d5d5')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#d5d5d5)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #ddd, #d5d5d5); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #ddd, #d5d5d5); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #ddd, #d5d5d5); /* IE10 */
+  background-image:      -o-linear-gradient(top, #ddd, #d5d5d5); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #ddd, #d5d5d5);
 }
 .ui-btn-down-c a.ui-link-inherit { 
  color:                  #111;
@ -351,19 +331,12 @@
  background:             #cbcbcb;
  color:                  #666; 
  text-shadow: 0 1px 0px  #fff;
-  background-image: -moz-linear-gradient(top, 
-                          #ddd  0%,
-                          #ccc  5%,
-                          #bbb  15%, 
-                          #ddd  95%, 
-                          #ccc  100%);
-  background-image: -webkit-gradient(linear, center top, center bottom,
-    color-stop(0,         #ddd),
-    color-stop(5%,        #ccc),
-    color-stop(15%,       #bbb),
-    color-stop(95%,       #ddd),
-    color-stop(1,         #ccc));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#aaaaaa', EndColorStr='#e5e5e5')";
+  background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), color-stop(5%, #ccc), color-stop(15%, #bbb), color-stop(95%, #ddd), to(#ccc)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #ddd 0%, #ccc 5%, #bbb 15%, #ddd 95%, #ccc 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #ddd 0%, #ccc 5%, #bbb 15%, #ddd 95%, #ccc 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #ddd 0%, #ccc 5%, #bbb 15%, #ddd 95%, #ccc 100%); /* IE10 */
+  background-image:      -o-linear-gradient(top, #ddd 0%, #ccc 5%, #bbb 15%, #ddd 95%, #ccc 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #ddd 0%, #ccc 5%, #bbb 15%, #ddd 95%, #ccc 100%);
 }
 .ui-bar-d, 
 .ui-bar-d input, 
@ -384,13 +357,12 @@
  border: 1px solid       #c5c5c5;
  background:             #ddd;
  color:                  #666;
-  background-image: -moz-linear-gradient(top, 
-                          #d5d5d5,
-                          #dddddd);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #d5d5d5),
-    color-stop(1,         #dddddd));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d5d5d5', EndColorStr='#dddddd')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#ddd)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #d5d5d5, #ddd); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #d5d5d5, #ddd); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #d5d5d5, #ddd); /* IE10 */
+  background-image:      -o-linear-gradient(top, #d5d5d5, #ddd); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #d5d5d5, #ddd);
 }
 .ui-btn-up-d a.ui-link-inherit {
  color:                  #666;
@ -399,13 +371,12 @@
  border: 1px solid       #aaa;
  background:             #c5c5c5;
  color:                  #666;
-  background-image: -moz-linear-gradient(top, 
-                          #c5c5c5,
-                          #cccccc);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #c5c5c5),
-    color-stop(1,         #cccccc));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#c5c5c5', EndColorStr='#cccccc')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5), to(#ccc)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #c5c5c5, #ccc); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #c5c5c5, #ccc); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #c5c5c5, #ccc); /* IE10 */
+  background-image:      -o-linear-gradient(top, #c5c5c5, #ccc); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #c5c5c5, #ccc);
 }
 .ui-btn-hover-d a.ui-link-inherit {
  color:                  #666;
@ -414,13 +385,12 @@
  border: 1px solid       #999;
  background:             #b5b5b5;
  color:                  #444;
-  background-image: -moz-linear-gradient(top, 
-                          #b5b5b5,
-                          #bbbbbb);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #b5b5b5),
-    color-stop(1,         #bbbbbb));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#b5b5b5', EndColorStr='#bbbbbb')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#b5b5b5), to(#bbb)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #b5b5b5, #bbb); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #b5b5b5, #bbb); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #b5b5b5, #bbb); /* IE10 */
+  background-image:      -o-linear-gradient(top, #b5b5b5, #bbb); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #b5b5b5, #bbb);
 }
 .ui-btn-up-d a.ui-link {
  color:                  #444;
@ -449,15 +419,12 @@
  color:                  #666;
  text-shadow: 0 1px 0px  #fff;
  background:             #eee;
-  background-image: -moz-linear-gradient(top, 
-                          #ffffff 0%,
-                          #f5f5f5 15%,
-                          #eeeeee 100%);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #ffffff),
-    color-stop(15%,       #f5f5f5),
-    color-stop(1,         #eeeeee));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#eeeeee')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(15%, #f5f5f5), to(#eee)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #fff 0%, #f5f5f5 15%, #eee 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #fff 0%, #f5f5f5 15%, #eee 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #fff 0%, #f5f5f5 15%, #eee 100%); /* IE10 */
+  background-image:      -o-linear-gradient(top, #fff 0%, #f5f5f5 15%, #eee 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #fff 0%, #f5f5f5 15%, #eee 100%);
 }
 .ui-body-d .ui-link {
  font-weight: bold;
@ -484,17 +451,12 @@
  background:             #dedede;
  color:                  #000;
  text-shadow: 0 1px 0px  #fff;
-  background-image: -moz-linear-gradient(top, 
-                          #ffffff 0%,
-                          #cccccc 50%,
-                          #b5b5b5 50%,
-                          #eeeeee 100%);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #ffffff),
-    color-stop(.5,        #cccccc),
-    color-stop(.5,        #b5b5b5),
-    color-stop(1,         #eeeeee));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#b5b5b5')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(50%, #ccc), color-stop(50%, #b5b5b5), to(#eee)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #fff 0%, #ccc 50%, #b5b5b5 50%, #eee 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #fff 0%, #ccc 50%, #b5b5b5 50%, #eee 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #fff 0%, #ccc 50%, #b5b5b5 50%, #eee 100%); /* IE10 */
+  background-image:      -o-linear-gradient(top, #fff 0%, #ccc 50%, #b5b5b5 50%, #eee 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #fff 0%, #ccc 50%, #b5b5b5 50%, #eee 100%);
 }
 .ui-bar-e,
 .ui-bar-e input, 
@ -515,17 +477,12 @@
  background:             #dfdfdf;
  color:                  #333;
  text-shadow: 0 1px 0px  #fff;
-  background-image: -moz-linear-gradient(top, 
-                          #f5f5f5 0%,
-                          #cccccc 50%,
-                          #b5b5b5 50%,
-                          #f5f5f5 100%);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #f5f5f5),
-    color-stop(.5,        #cccccc),
-    color-stop(.5,        #b5b5b5),
-    color-stop(1,         #f5f5f5));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#b5b5b5')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), color-stop(50%, #ccc), color-stop(50%, #b5b5b5), to(#f5f5f5)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #ccc 50%, #b5b5b5 50%, #f5f5f5 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #f5f5f5 0%, #ccc 50%, #b5b5b5 50%, #f5f5f5 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #f5f5f5 0%, #ccc 50%, #b5b5b5 50%, #f5f5f5 100%); /* IE10 */
+  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #ccc 50%, #b5b5b5 50%, #f5f5f5 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #f5f5f5 0%, #ccc 50%, #b5b5b5 50%, #f5f5f5 100%);
 }
 .ui-btn-up-e a.ui-link-inherit {
  color:                  #333;
@ -535,17 +492,12 @@
  background:             #e5e5e5;
  color:                  #333;
  text-shadow: 0 1px 0px  #fff;
-  background-image: -moz-linear-gradient(top, 
-                          #ffffff 0%,
-                          #dddddd 50%,
-                          #cccccc 50%,
-                          #ffffff 100%);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #ffffff),
-    color-stop(.5,        #dddddd),
-    color-stop(.5,        #cccccc),
-    color-stop(1,         #ffffff));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#cccccc')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(50%, #ddd), color-stop(50%, #ccc), to(#fff)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #fff 0%, #ddd 50%, #ccc 50%, #fff 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #fff 0%, #ddd 50%, #ccc 50%, #fff 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #fff 0%, #ddd 50%, #ccc 50%, #fff 100%); /* IE10 */
+  background-image:      -o-linear-gradient(top, #fff 0%, #ddd 50%, #ccc 50%, #fff 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #fff 0%, #ddd 50%, #ccc 50%, #fff 100%);
 }
 .ui-btn-hover-e a.ui-link-inherit {
  color:                  #333;
@ -554,17 +506,12 @@
  border: 1px solid       #888;
  background:             #ccc;
  color:                  #333;
-  background-image: -moz-linear-gradient(top, 
-                          #dddddd 0%,
-                          #cccccc 50%,
-                          #bbbbbb 50%,
-                          #dddddd 100%);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #dddddd),
-    color-stop(.5,        #cccccc),
-    color-stop(.5,        #bbbbbb),
-    color-stop(1,         #dddddd));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#dddddd', EndColorStr='#bbbbbb')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), color-stop(50%, #ccc), color-stop(50%, #bbb), to(#ddd)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #ddd 0%, #ccc 50%, #bbb 50%, #ddd 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #ddd 0%, #ccc 50%, #bbb 50%, #ddd 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #ddd 0%, #ccc 50%, #bbb 50%, #ddd 100%); /* IE10 */
+  background-image:      -o-linear-gradient(top, #ddd 0%, #ccc 50%, #bbb 50%, #ddd 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #ddd 0%, #ccc 50%, #bbb 50%, #ddd 100%);
 }
 .ui-btn-down-e a.ui-link-inherit {
  color:                  #333;
@ -618,16 +565,15 @@ a.ui-link-inherit {
  cursor: pointer;
  text-decoration: none;
  border: 1px solid       #FFBC19;
-  background:             #4596ce;
+  background:             #FFBC19;
  color:                  #222;
  text-shadow: 0 1px 0px  #eee;
-  background-image: -moz-linear-gradient(top, 
-                          #FFDC52,
-                          #FFBC19);
-  background-image: -webkit-gradient(linear,left top,left bottom,
-    color-stop(0,         #FFDC52),
-    color-stop(1,         #FFBC19));
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFDC52', EndColorStr='#FFBC19')";
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFDC52), to(#FFBC19)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #FFDC52, #FFBC19); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(top, #FFDC52, #FFBC19); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #FFDC52, #FFBC19); /* IE10 */
+  background-image:      -o-linear-gradient(top, #FFDC52, #FFBC19); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #FFDC52, #FFBC19);
 }
 .ui-btn-active a.ui-link-inherit {
  color:                  #333;
@ -708,104 +654,161 @@ a.ui-link-inherit {
 }

 /* Icons
----------------------------------*/
-/* .ui-icon { background-position: 50% 50%; background-repeat: no-repeat; background-color: #fff; background-color: rgba(0,0,0,.4);  -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; } */
+-----------------------------------------------------------------------------------------------------------*/

 .ui-icon {
-  background-image:       url(images/icons-18-white.png);
-  background-repeat:      no-repeat; 
-  background-color:       #666; 
-  background-color:       rgba(0,0,0,.4);
-  -moz-border-radius:     9px;
-  -webkit-border-radius:  9px;
-  border-radius:          9px;
-}
-.ui-icon-disc {
-  background-color:       #666;
-  background-color:       rgba(0,0,0,.3);
-  -moz-border-radius:     9px;
-  -webkit-border-radius:  9px;
-  border-radius:          9px;
+	background: 						#666;
+	background: 						rgba(0,0,0,.4);
+	background-image: url(images/icons-18-white.png);
+	background-repeat: no-repeat;
+	-moz-border-radius: 				9px;
+	-webkit-border-radius: 				9px;
+	border-radius: 						9px;
 }

-/* alt color */
-.ui-icon-black {
-  background-image:       url(images/icons-18-black.png);
-}
-.ui-icon-black-disc {
-  background-color:       #fff;
-  background-color:       rgba(255,255,255,.3);
-  -moz-border-radius:     9px;
-  -webkit-border-radius:  9px;
-  border-radius:          9px;
+
+/* Alt icon color
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-icon-alt {
+	background: 						#fff;
+	background: 						rgba(255,255,255,.3);
+	background-image: url(images/icons-18-black.png);
+	background-repeat: no-repeat;
 }

-/* retina */
-@media  screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
-  .ui-icon {
-    background-size:  558px 18px;
-    background-image: url(images/icons-36-white.png);
-  }
-	.ui-icon-black {
-    background-image: url(images/icons-36-black.png);
-  }
+/* HD/"retina" sprite
+-----------------------------------------------------------------------------------------------------------*/
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+       only screen and (min--moz-device-pixel-ratio: 1.5),
+       only screen and (min-resolution: 240dpi) {
+	
+	.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
+	.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
+	.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
+	.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, 
+	.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
+		background-image: url(images/icons-36-white.png);
+		-moz-background-size: 776px 18px;
+		-o-background-size: 776px 18px;
+		-webkit-background-size: 776px 18px;
+		background-size: 776px 18px;
+	}
+	.ui-icon-alt {
+		background-image: url(images/icons-36-black.png);
+	}
 }

-/*plus minus*/
-.ui-icon-plus {     background-position: -0     0; }
-.ui-icon-minus {    background-position: -36px  0; }
+/* plus minus */
+.ui-icon-plus {
+	background-position: 	-0 50%;
+}
+.ui-icon-minus {
+	background-position: 	-36px 50%;
+}

 /* delete/close */
-.ui-icon-delete {   background-position: -72px  0; }
-
-/*arrows*/
-.ui-icon-arrow-r {  background-position: -108px 0; }
-.ui-icon-arrow-l {  background-position: -144px 0; }
-.ui-icon-arrow-u {  background-position: -180px 0; }
-.ui-icon-arrow-d {  background-position: -216px 0; }
-
-.ui-icon-check {    background-position: -252px 0; }
-.ui-icon-gear {     background-position: -288px 0; }
-.ui-icon-refresh {  background-position: -324px 0; }
-.ui-icon-forward {  background-position: -360px 0; }
-.ui-icon-back {     background-position: -396px 0; }
-
-.ui-icon-grid {     background-position: -432px 0; }
-.ui-icon-star {     background-position: -468px 0; }
-.ui-icon-alert {    background-position: -504px 0; }
-.ui-icon-info {     background-position: -540px 0; }
-
-/*checks,radios*/
-.ui-icon-checkbox-off,
-.ui-icon-checkbox-on,
-.ui-icon-radio-off,
-.ui-icon-radio-on {
-  background-color: transparent; 
-  -moz-border-radius:     0; 
-  -webkit-border-radius:  0;
-  border-radius:          0;
-  background-size: 20px 20px;
+.ui-icon-delete {
+	background-position: 	-72px 50%;
 }

-.ui-icon-checkbox-off { background-image: url(images/form-check-off.png); }
-.ui-icon-checkbox-on {  background-image: url(images/form-check-on.png); }
-.ui-icon-radio-off {    background-image: url(images/form-radio-off.png); }
-.ui-icon-radio-on {     background-image: url(images/form-radio-on.png); }
+/* arrows */
+.ui-icon-arrow-r {
+	background-position: 	-108px 50%;
+}
+.ui-icon-arrow-l {
+	background-position: 	-144px 50%;
+}
+.ui-icon-arrow-u {
+	background-position: 	-180px 50%;
+}
+.ui-icon-arrow-d {
+	background-position: 	-216px 50%;
+}

-.ui-icon-search {       background-image: url(images/icon-search-black.png); background-size: 16px 16px; }
+/* misc */
+.ui-icon-check {
+	background-position: 	-252px 50%;
+}
+.ui-icon-gear {
+	background-position: 	-288px 50%;
+}
+.ui-icon-refresh {
+	background-position: 	-324px 50%;
+}
+.ui-icon-forward {
+	background-position: 	-360px 50%;
+}
+.ui-icon-back {
+	background-position: 	-396px 50%;
+}
+.ui-icon-grid {
+	background-position: 	-432px 50%;
+}
+.ui-icon-star {
+	background-position: 	-468px 50%;
+}
+.ui-icon-alert {
+	background-position: 	-504px 50%;
+}
+.ui-icon-info {
+	background-position: 	-540px 50%;
+}
+.ui-icon-home {
+	background-position: 	-576px 50%;
+}
+.ui-icon-search {
+	background-position: 	-612px 50%;
+}
+.ui-icon-checkbox-off {
+	background-position: 	-684px 50%;
+}
+.ui-icon-checkbox-on {
+	background-position: 	-648px 50%;
+}
+.ui-icon-radio-off {
+	background-position: 	-756px 50%;
+}
+.ui-icon-radio-on {
+	background-position: 	-720px 50%;
+}
+
+
+/* checks,radios */
+.ui-checkbox .ui-icon {
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+.ui-icon-checkbox-off,
+.ui-icon-radio-off {
+	background-color: transparent;	
+}
+.ui-checkbox-on .ui-icon,
+.ui-radio-on .ui-icon {
+	background-color: #FFBC19; /* NOTE: this hex should match the active state color. It's repeated here for cascade */
+}
+.ui-icon-searchfield {
+	background-image: url(images/icon-search-black.png);
+	background-size: 16px 16px;
+}

 /* loading icon */
 .ui-icon-loading {
-  background-image: url(images/ajax-loader.png); 
-  width:  40px;
-  height: 40px;
-  -moz-border-radius:                 20px;
-  -webkit-border-radius:              20px;
-  border-radius:                      20px;
- background-size: 35px 35px;
+	background-image: url(images/ajax-loader.png);
+	width: 40px;
+	height: 40px;
+	-moz-border-radius: 20px;
+	-webkit-border-radius: 20px;
+	border-radius: 20px;
+	background-size: 35px 35px;
 }

-/* btn Corner radius */
+
+/* Button corner classes
+-----------------------------------------------------------------------------------------------------------*/
+
 .ui-btn-corner-tl { 
  -moz-border-radius-topleft:         1em;
  -webkit-border-top-left-radius:     1em;
@ -871,8 +874,17 @@ a.ui-link-inherit {
 .ui-btn-corner-br, .ui-btn-corner-top, .ui-btn-corner-bottom, 
 .ui-btn-corner-right, .ui-btn-corner-left, .ui-btn-corner-all {
  -webkit-background-clip: padding-box;
-     -moz-background-clip: padding-box;
+     -moz-background-clip: padding;
          background-clip: padding-box;
+
+}
+
+/* Form field separator */
+.ui-br {
+	border-bottom: rgb(130,130,130);
+	border-bottom: rgba(130,130,130,.3);
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
 }

 /* Overlays */
@ -914,7 +926,6 @@ a.ui-link-inherit {

 /* set focus state last */
 .ui-focus {
-  outline: none;
  -moz-box-shadow:    0px 0px 12px #FFBC19;
  -webkit-box-shadow: 0px 0px 12px #FFBC19;
  box-shadow:         0px 0px 12px #FFBC19;
@ -963,4 +974,4 @@ a.ui-btn.ui-btn-inline.ui-btn-corner-all .ui-btn-inner{
 /* inner highlight is janky! */
 .ui-dialog a.ui-btn-icon-notext.ui-btn-corner-all .ui-btn-inner.ui-btn-corner-all{
  border-top-color: transparent; 
-}
+}
--- a/design/mobile-icons.ai
+++ b/design/mobile-icons.ai
--- a/design/mobile-logo.ai
+++ b/design/mobile-logo.ai
--- a/docs/_assets/css/jqm-docs.css
+++ b/docs/_assets/css/jqm-docs.css
@ -1,12 +1,342 @@
-.ui-mobile #jqm-home {  background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; }
-.ui-mobile #jqm-homeheader { padding: 55px 25px 0; text-align: center }
-.ui-mobile #jqm-homeheader h1 { margin: 0 0 10px; }
-.ui-mobile #jqm-homeheader p { margin: 0; }
-.ui-mobile #jqm-version { text-indent: -99999px; background: url(../images/version.png) top right no-repeat; width: 119px; height: 122px; overflow: hidden; position: absolute; top: 0; right: 0; }
-.ui-mobile .jqm-themeswitcher { clear: both; margin: 20px 0 0; }
+/* jqm docs css

-h2 { margin-top:1.5em; }
+Beware: lots of last-minute CSS going on in here 
+cobblers, shoes, 
+*/
+
+body { background: #dddddd; }
+.ui-mobile .type-home .ui-content { margin: 0; background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; }
+.ui-mobile #jqm-homeheader { padding: 40px 10px 0; text-align: center;  margin: 0 auto; }
+.ui-mobile #jqm-homeheader h1 { margin: 0 0 ; }
+.ui-mobile #jqm-homeheader p { margin: .3em 0 0; line-height: 1.3; font-size: .9em; font-weight: bold; color: #666; }
+.ui-mobile #jqm-version { text-indent: -99999px; background: url(../images/version.png) top right no-repeat; width: 119px; height: 122px; overflow: hidden; position: absolute; z-index: 50; top: -11px; right: 0; }
+.ui-mobile .jqm-themeswitcher { margin: 10px 25px 10px 10px;  }
+
+h2 { margin:1.2em 0 .4em 0; }
 p code { font-size:1.2em; font-weight:bold; } 

 dt { font-weight: bold; margin: 2em 0 .5em; }
-dt code, dd code { font-size:1.3em; line-height:150%; }
+dt code, dd code { font-size:1.3em; line-height:150%; }
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+#jqm-homeheader img { width: 235px; }
+img { max-width: 100%; }
+
+.ui-header .jqm-home { top:0.65em; }
+nav { margin: 0; }
+
+p.intro {
+	font-size: .96em;
+	line-height: 1.3;
+		border-top: 1px solid #75ae18;
+		border-bottom: 0;
+		background: none;
+		margin: 1.5em 0;
+		padding: 1.5em 15px 0;
+
+}
+p.intro strong {
+	color:  #558e08;
+}
+.footer-docs {
+	padding: 5px 0;
+}
+.footer-docs p {
+	float: left;
+	margin-left:15px;
+	font-weight: normal;
+	font-size: .9em;
+}
+
+.type-interior .content-secondary {
+	border-right: 0;
+	border-left: 0;
+	margin: 10px -15px 0;
+	background: #fff;
+	border-top: 1px solid #ccc;
+}
+.type-home .ui-content {
+	margin-top: 5px;
+}
+.type-interior .ui-content {
+	padding-bottom: 0;
+}
+.content-secondary .ui-collapsible {
+	padding: 0 15px 10px;
+
+}
+.content-secondary .ui-collapsible-content {
+	padding: 0;
+	background: none;
+	border-bottom: none;
+}
+.content-secondary .ui-listview {
+	margin: 0;
+}
+/* new API additions */
+
+dt {  
+	margin: 35px 0 15px 0; 
+	background-color:#ddd; 
+	font-weight:normal;
+}
+dt code { 
+	display:inline-block; 
+	font-weight:bold;
+	color:#56A00E; 
+	padding:3px 7px; 
+	margin-right:10px; 
+	background-color:#fff; 
+}
+dd { 
+	margin-bottom:10px; 
+}
+dd .default { font-weight:bold; }
+dd pre { 
+	margin:0 0 0 0; 
+}
+dd code { font-weight: normal; }
+dd pre code { 
+	margin:0; 
+	border:none; 
+	font-weight:normal; 
+	font-size:100%; 
+	background-color:transparent; 
+}
+dd h4 { margin:15px 0 0 0; }
+		
+.localnav {
+	margin:0 0 20px 0;
+	overflow:hidden;
+}
+.localnav li {
+	float:left;
+}
+.localnav .ui-btn-inner { 
+	padding: .6em 10px; 
+	font-size:80%; 
+}
+
+
+/* F bar theme - just for the docs overview headers */
+.ui-bar-f {
+	border: 1px solid 		#56A00E;
+	background: 			#74b042;
+	color: 					#fff;
+	font-weight: bold;
+	text-shadow: 0 -1px 1px #234403;	
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#74b042), to(#56A00E)); /* Saf4+, Chrome */
+	background-image: -webkit-linear-gradient(top, #74b042, #56A00E); /* Chrome 10+, Saf5.1+ */
+	background-image:    -moz-linear-gradient(top, #74b042, #56A00E); /* FF3.6 */
+	background-image:     -ms-linear-gradient(top, #74b042, #56A00E); /* IE10 */
+	background-image:      -o-linear-gradient(top, #74b042, #56A00E); /* Opera 11.10+ */
+	background-image:         linear-gradient(top, #74b042, #56A00E);		
+}
+.ui-bar-f,
+.ui-bar-f .ui-link-inherit {
+	color: 					#fff;
+}
+.ui-bar-f .ui-link {
+	color: 					#fff;
+	font-weight: bold;
+}
+.ui-btn-up-f {
+	border: 1px solid 		#3B6F07;
+	background: 			#56A00E;
+	font-weight: bold;
+	color: 					#fff;
+	text-shadow: 0 -1px 1px #234403;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#74b042), to(#56A00E)); /* Saf4+, Chrome */
+	background-image: -webkit-linear-gradient(top, #74b042, #56A00E); /* Chrome 10+, Saf5.1+ */
+	background-image:    -moz-linear-gradient(top, #74b042, #56A00E); /* FF3.6 */
+	background-image:     -ms-linear-gradient(top, #74b042, #56A00E); /* IE10 */
+	background-image:      -o-linear-gradient(top, #74b042, #56A00E); /* Opera 11.10+ */
+	background-image:         linear-gradient(top, #74b042, #56A00E);
+}
+.ui-btn-up-f a.ui-link-inherit {
+	color: 					#fff;
+}
+.ui-btn-hover-f {
+	border: 1px solid 		#3B6F07;
+	background: 			#6EBC1F;
+	font-weight: bold;
+	color: 					#fff;
+	text-shadow: 0 -1px 1px #234403;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#8FC963), to(#6EBC1F)); /* Saf4+, Chrome */
+	background-image: -webkit-linear-gradient(top, #8FC963, #6EBC1F); /* Chrome 10+, Saf5.1+ */
+	background-image:    -moz-linear-gradient(top, #8FC963, #6EBC1F); /* FF3.6 */
+	background-image:     -ms-linear-gradient(top, #8FC963, #6EBC1F); /* IE10 */
+	background-image:      -o-linear-gradient(top, #8FC963, #6EBC1F); /* Opera 11.10+ */
+	background-image:         linear-gradient(top, #8FC963, #6EBC1F);
+}
+.ui-btn-hover-f a.ui-link-inherit {
+	color: 					#fff;
+}
+.ui-btn-down-f {
+	border: 1px solid 		#3B6F07;
+	background: 			#3d3d3d;
+	font-weight: bold;
+	color: 					#fff;
+	text-shadow: 0 -1px 1px #234403;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#56A00E), to(#64A234)); /* Saf4+, Chrome */
+	background-image: -webkit-linear-gradient(top, #56A00E, #64A234); /* Chrome 10+, Saf5.1+ */
+	background-image:    -moz-linear-gradient(top, #56A00E, #64A234); /* FF3.6 */
+	background-image:     -ms-linear-gradient(top, #56A00E, #64A234); /* IE10 */
+	background-image:      -o-linear-gradient(top, #56A00E, #64A234); /* Opera 11.10+ */
+	background-image:         linear-gradient(top, #56A00E, #64A234);
+}
+.ui-btn-down-f a.ui-link-inherit {
+	color: 					#fff;
+}
+.ui-btn-up-f,
+.ui-btn-hover-f,
+.ui-btn-down-f {
+	font-family: Helvetica, Arial, sans-serif;
+	text-decoration: none;
+}
+
+
+
+
+/* docs site layout */
+
+@media all and (min-width: 650px){
+	
+	.jqm-home {
+		position: absolute;
+		left: 10px;
+		top: 0;
+	}
+	.type-home .ui-content {
+		margin-top: 5px;
+	}
+	.ui-mobile #jqm-homeheader {
+		max-width: 340px;
+	}
+	.ui-mobile .jqm-themeswitcher {
+		float: right;
+	}
+	p.intro {
+		margin: 2em 0;
+	}
+	.type-home .ui-content,
+	.type-interior .ui-content {
+		padding: 0;
+		background: url(../images/px-ccc.gif) 50% 0 repeat-y;
+	}
+	.type-interior .ui-content {
+		background-position: 45%;
+		overflow: hidden;
+	}
+	.content-secondary {
+		text-align: left;
+		float: left;
+		width: 45%;
+		background: none;
+	}
+	.content-secondary,
+	.type-interior .content-secondary {
+		margin: 30px 0 20px 2%;
+		padding: 20px 4% 0 0;
+			background: none;
+					border-top: none;
+	}
+	.type-index .content-secondary {
+		padding: 0;
+	}
+	.content-secondary .ui-collapsible {
+		margin: 0;
+		padding: 0;
+	}
+	.content-secondary .ui-collapsible-content {
+		border: none;
+	}
+	.type-index .content-secondary .ui-listview {
+		margin: 0;
+	}
+
+	.ui-mobile #jqm-homeheader {
+		padding: 0;
+	}
+	.content-primary {
+		width: 45%;
+		float: right;
+		margin-top: 30px;
+		margin-right: 1%;
+		padding-right: 1%;
+	}
+	.content-primary ul:first-child {
+		margin-top: 0;
+	}
+	.content-secondary h2 {
+		position: absolute;
+		left: -9999px;
+	}
+	.type-interior .content-primary {
+		padding: 1.5em 6% 3em 0;
+		margin: 0;
+	}
+	/* fix up the collapsibles - expanded on desktop */
+	.content-secondary .ui-collapsible-heading {
+		display: none;
+	}
+	.content-secondary .ui-collapsible-contain {
+		margin:0;
+	}
+	.content-secondary .ui-collapsible-content {
+		display: block;
+		margin: 0;
+		padding: 0;
+	}
+	.type-interior  .content-secondary .ui-li-divider {
+		padding-top: 1em;
+		padding-bottom: 1em;
+	}
+	.type-interior .content-secondary {
+		margin: 0;
+		padding: 0;
+	}
+	
+}
+@media all and (min-width: 750px){
+	.type-home .ui-content,
+	.type-interior .ui-content {
+		background-position: 39%;
+	}
+	.content-secondary {
+		width: 34%;
+	}
+	.content-primary {
+		width: 56%;
+		padding-right: 1%;
+	}	
+	.type-interior .ui-content {
+		background-position: 34%;
+	}
+}
+
+@media all and (min-width: 1200px){
+	.type-home .ui-content{
+		background-position: 38.5%;
+	}
+	.type-interior .ui-content {
+		background-position: 30%;
+	}
+	.content-secondary {
+		width: 30%;
+		padding-right:6%;
+		margin: 30px 0 20px 5%;
+	}
+	.type-interior .content-secondary {
+		margin: 0;
+		padding: 0;
+	}
+	.content-primary {
+		width: 50%;
+		margin-right: 5%;
+		padding-right: 3%;
+	}
+	.type-interior .content-primary {
+		width: 60%;
+	}
+}
--- a/docs/_assets/images/ios_icon.png
+++ b/docs/_assets/images/ios_icon.png
--- a/docs/_assets/images/ios_startup.png
+++ b/docs/_assets/images/ios_startup.png
--- a/docs/_assets/images/ipad-palm.png
+++ b/docs/_assets/images/ipad-palm.png
--- a/docs/_assets/images/jquery-logo.png
+++ b/docs/_assets/images/jquery-logo.png
--- a/docs/_assets/images/mobile-devices.png
+++ b/docs/_assets/images/mobile-devices.png
--- a/docs/_assets/images/px-ccc.gif
+++ b/docs/_assets/images/px-ccc.gif
--- a/docs/_assets/images/version.png
+++ b/docs/_assets/images/version.png
--- a/docs/_assets/js/_viewsource.js
+++ b/docs/_assets/js/_viewsource.js
@ -2,14 +2,14 @@
 $.fn.addSourceLink = function(style){

 	return $(this).each(function(){
-		var link = $('<a href="#" data-inline="true">View Source</a>'),
+		var link = $('<a href="#" data-'+ $.mobile.ns +'inline="true">View Source</a>'),
 			src = src = $('<div></div>').append( $(this).clone() ).html(),
-			page = $( "<div data-role='dialog' data-theme='a'>" +
-					"<div data-role='header' data-theme='b'>" +
-						"<a href='#' class='ui-btn-left' data-icon='delete' data-iconpos='notext'>Close</a>"+
+			page = $( "<div data-"+ $.mobile.ns +"role='dialog' data-"+ $.mobile.ns +"theme='a'>" +
+					"<div data-"+ $.mobile.ns +"role='header' data-"+ $.mobile.ns +"theme='b'>" +
+						"<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"icon='delete' data-"+ $.mobile.ns +"iconpos='notext'>Close</a>"+
 						"<div class='ui-title'>jQuery Mobile Source Excerpt</div>"+
 					"</div>"+
-					"<div data-role='content'></div>"+
+					"<div data-"+ $.mobile.ns +"role='content'></div>"+
 				"</div>" )
 				.appendTo( "body" )
 				.page();
@ -21,7 +21,7 @@ $.fn.addSourceLink = function(style){
 			})
 			.click(function(){
 				var codeblock = $('<pre><code></code></pre>');
-				src = src.replace(/&/gmi, '&amp;').replace(/"/gmi, '&quot;').replace(/>/gmi, '&gt;').replace(/</gmi, '&lt;').replace('data-jqm-source="true"','');
+				src = src.replace(/&/gmi, '&amp;').replace(/"/gmi, '&quot;').replace(/>/gmi, '&gt;').replace(/</gmi, '&lt;').replace('data-'+ $.mobile.ns +'source="true"','');
 				codeblock.find('code').append(src);

 				var activePage = $(this).parents('.ui-page-active');
@ -38,5 +38,5 @@ $.fn.addSourceLink = function(style){

 //set up view source links
 $('div').live('pagebeforecreate',function(){
-	$(this).find('[data-jqm-source="true"]').addSourceLink();
+	$(this).find('[data-'+ $.mobile.ns +'source="true"]').addSourceLink();
 });
--- a/docs/_assets/js/jqm-docs.js
+++ b/docs/_assets/js/jqm-docs.js
@ -1,18 +1,55 @@
 //set up the theme switcher on the homepage
 $('div').live('pagecreate',function(event){
 	if( !$(this).is('.ui-dialog')){ 
-		$('<a href="#themeswitcher" data-rel="dialog" data-transition="pop">Switch theme</a>')
+		var appendEl = $(this).find('.ui-footer:last');
+		
+		if( !appendEl.length ){
+			appendEl = $(this).find('.ui-content');
+		}
+		
+		if( appendEl.is("[data-position]") ){
+			return;
+		}
+		
+		$('<a href="#themeswitcher" data-'+ $.mobile.ns +'rel="dialog" data-'+ $.mobile.ns +'transition="pop">Switch theme</a>')
 			.buttonMarkup({
 				'icon':'gear',
 				'inline': true,
 				'shadow': false,
 				'theme': 'd'
 			})
-			.appendTo( $(this).find('.ui-content') )
+			.appendTo( appendEl )
 			.wrap('<div class="jqm-themeswitcher">')
-			.click(function(){
+			.bind( "vclick", function(){
 				$.themeswitcher();
 			});
 	}	
-	event.stopPropagation();
+
+});
+
+//collapse page navs after use
+$(function(){
+	$('body').delegate('.content-secondary .ui-collapsible-content', 'click',  function(){
+		$(this).trigger("collapse")
+	});
+});
+
+function setDefaultTransition(){
+	var winwidth = $( window ).width(),
+		trans ="slide";
+		
+	if( winwidth >= 1000 ){
+		trans = "none";
+	}
+	else if( winwidth >= 650 ){
+		trans = "fade";
+	}
+
+	$.mobile.defaultPageTransition = trans;
+}
+
+
+$(function(){
+	setDefaultTransition();
+	$( window ).bind( "throttledresize", setDefaultTransition );
 });
--- a/docs/about/accessibility.html
+++ b/docs/about/accessibility.html
@ -1,21 +1,29 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Intro</title> 
-	<link rel="stylesheet"  href="../../themes/default" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Accessibility</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
+	<div data-role="header" data-theme="f">
 		<h1>Accessibility</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
+		
+		
+		<div class="content-primary">
 			
 			<h2>Accessibility</h2>
 			<p>jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA</a> specification.</p> 
@ -24,7 +32,32 @@
 			
 			<p>While our accessibility implementation is currently a work in progress, we aim to provide a fully accessible suite of components for version 1.0.</p>
 			
-			
+		</div>		
+		
+		<div class="content-secondary">
+
+			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+					<h3>More in this section</h3>
+
+					<ul data-role="listview" data-theme="c" data-dividertheme="d">
+						<li data-role="list-divider">Overview</li>
+						<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
+						<li><a href="../../docs/about/features.html">Features</a></li>
+						<li data-theme="a"><a href="../../docs/about/accessibility.html">Accessibility</a></li>
+						<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
+
+					
+					</ul>
+			</div>
+		</div>
+				
+
+		</div><!-- /content -->
+
+		<div data-role="footer" class="footer-docs" data-theme="c">
+				<p>&copy; 2011 The jQuery Project</p>
+		</div>

 						

--- a/docs/about/features.html
+++ b/docs/about/features.html
@ -1,42 +1,74 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Intro</title> 
-	<link rel="stylesheet"  href="../../themes/default" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Features</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+<div data-role="page" class="type-interior"> 

-	<div data-role="header">
-		<h1>Features</h1>
+	<div data-role="header" data-theme="f">
+		<h1>Features</h1>	
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
+		
+		<div class="content-primary">
 			
 				<h2>Key features:</h2>
 				<ul>
-					<li><strong>Built on jQuery core</strong> for familiar and consistent jQuery syntax and minimal learning curve</li>
-					<li><strong>Compatible with all major mobile  platforms</strong> - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo with baseline support for all devices that understand HTML</li>
-					<li><strong>Lightweight size</strong> (12k compressed for all mobile functionality) and minimal image dependencies for speed.</li>
+					<li><strong>Built on jQuery core</strong> for familiar and consistent jQuery syntax and minimal learning curve and leverages jQuery UI code and patterns.</li>
+					<li><strong>Compatible with all major mobile, tablet, e-reader & desktop platforms</strong> - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, and all modern browsers with graded levels of support.</li>
+					<li><strong>Lightweight size</strong> and minimal image dependencies for speed.</li>
+					<li><strong>Modular architecture</strong> for creating custom builds that are optimized to only the features needed for a particular application</li>
 					<li><strong>HTML5 Markup-driven configuration</strong> of pages and behavior for fast development and minimal required scripting.</li>
-					<li><strong>Progressive enhancement</strong> approach brings core content and functionality to all mobile, tablet and deskstop platforms and a rich, installed application-like experience on newer mobile platforms.</li>
-					<li><strong>Automatic initialization</strong> by using HTML5 <code>data-role</code> attributes in the HTML markup to act as the trigger to automatically initialize all jQuery Mobile widgets found on a page.</li>
+					<li><strong>Progressive enhancement</strong> approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.</li>
+					<li><strong>Responsive design</strong> techniques and tools allow the same underlying codebase to automatically scale from smartphone to desktop-sized screens</li>
+					<li><strong>Powerful Ajax-powered navigation system</strong> to enable animated page transitions while maintaining back button, bookmarking and and clean URLs though pushState. </li>
 					<li><strong>Accessibility</strong> features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.</li>
-					<li><strong>New events</strong> streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API. </li>
-					<li><strong>New plugins</strong> enhance native controls with touch-optimized, themable controls. </li>
+					<li><strong>Touch and mouse event support</strong> streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API. </li>
+					<li><strong>Unified UI widgets</strong> for common controls enhance native controls with touch-optimized, themable controls that are platform-agnostic and easy to use.</li>
 					<li><strong>Powerful theming framework</strong> and ThemeRoller application make highly-branded experiences easy to build.</li>

 				</ul>

-						
+		</div>
+		
+		<div class="content-secondary">
+
+			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+					<h3>More in this section</h3>
+
+					<ul data-role="listview" data-theme="c" data-dividertheme="d">
+						<li data-role="list-divider">Overview</li>
+						<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
+						<li data-theme="a"><a href="../../docs/about/features.html">Features</a></li>
+						<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
+						<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
+
+					</ul>
+			</div>
+		</div>		

 	</div><!-- /content -->
+
+	<div data-role="footer" class="footer-docs" data-theme="c">
+			<p>&copy; 2011 The jQuery Project</p>
+	</div>				
+
+
 	
 </div><!-- /page -->

 </body>
-</html>
+</html>
--- a/docs/about/index.html
+++ b/docs/about/index.html
@ -1,22 +1,28 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<meta charset="utf-8" />
-	<title>jQuery UI Mobile Framework - Documentation</title>
-	<link rel="stylesheet" href="../../themes/default" />
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery UI Mobile Framework - About</title>
+	<link rel="stylesheet"  href="../../css/themes/default/" />
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 
-<div data-role="page" data-theme="b">

-<div data-role="header" data-position="inline">
+	<div data-role="page" class="type-index">
+
+<div data-role="header" data-theme="f">
 	<h1>About jQuery Mobile</h1>
+	<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 </div>

 <div data-role="content">
 	
-	<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
+	<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
 		<li data-role="list-divider">Overview</li>
 		<li><a href="intro.html">Intro to jQuery Mobile</a></li>
 		<li><a href="features.html">Features</a></li>
@ -28,4 +34,4 @@

 </div>
 </body>
-</html>
+</html>
--- a/docs/about/intro.html
+++ b/docs/about/intro.html
@ -1,36 +1,67 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
 	<title>jQuery Mobile Docs - Intro</title> 
-	<link rel="stylesheet"  href="../../themes/default" /> 
+	<link rel="stylesheet"  href="../../css/themes/default/" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
+	<div data-role="header" data-theme="f">
 		<h1>Introduction</h1>
+		
+		
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
 		
+		<div class="content-primary">
 		
-		<p>jQuery’s mobile strategy can be summarized simply: Delivering top-of-the-line JavaScript in a unified User Interface that works across the most-used smartphone web browsers and tablet form factors.</p>
+		<h2>jQuery Mobile Overview</h2>
+
+		<p>jQuery’s mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Focused on a lightweight codebase built on progressive enhancement with a flexible, easily themeable design.</p>

 		<p>The critical difference with our approach is the <a href="platforms.html">wide variety of mobile platforms we’re targeting</a> with jQuery Mobile. We’ve been working hard at bringing jQuery support to all mobile browsers that are sufficiently-capable and have at least a nominal amount of market share. In this way, we’re treating mobile web browsers exactly how we treat desktop web browsers.</p>
 		
 		<p>To make this broad support possible, all pages in jQuery Mobile are built on a foundation of <strong>clean, semantic HTML</strong> to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies <strong>progressive enhancement techniques</strong> to unobtrusively transform the semantic page into a rich, interactive experience that leverages the power of jQuery and CSS. <strong>Accessibility features</strong> such as WAI-ARIA are tightly integrated throughout the framework to provide support for screen readers and other assistive technologies.</p>
 			
-			
-		<img src="../_assets/images/ipad-palm.png" alt="Smartphone and tablet designs" style="max-width:100%; margin-top:20px;">

-						
+		</div><!--/content-primary -->		
+		
+		<div class="content-secondary">
+			
+			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+				
+					<h3>More in this section</h3>
+					
+					<ul data-role="listview"  data-theme="c" data-dividertheme="d">
+						<li data-role="list-divider">Overview</li>
+						<li data-theme="a"><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
+						<li><a href="../../docs/about/features.html">Features</a></li>
+						<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
+						<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
+
+				
+					</ul>
+			</div>
+		</div>		

 	</div><!-- /content -->
 	
+	<div data-role="footer" class="footer-docs" data-theme="c">
+			<p>&copy; 2011 The jQuery Project</p>
+	</div>	
+	
+	
 </div><!-- /page -->

 </body>
--- a/docs/about/platforms.html
+++ b/docs/about/platforms.html
@ -1,44 +1,101 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Intro</title> 
-	<link rel="stylesheet"  href="../../themes/default" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Supported platforms</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
+	<div data-role="header" data-theme="f">
 		<h1>Supported platforms</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
-			
-				<h2>Supported platforms</h2>
-				<p>For the alpha release, the following devices have been tested and should have a fairly solid jQuery Mobile experience. That being said, there are still a fair amount of bugs and performance improvements to be tackled before the 1.0 release in January. </p>
+		
+		
+			<div class="content-primary">
+				<h2 id="platforms">Platform support in 1.0 RC2</h2>
+				<p>We're excited to announce that as of 1.0 RC2, we've covered all our target platforms for the project. At this stage, we have broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We're very proud of our commitment to universal accessibility through our broad support for all popular platforms.</p>
+
+				<p>Our <a href="http://jquerymobile.com/gbs/">graded support matrix</a> was created over a year ago based on our goals as a project and since that time, we've been refining our grading system based on real-world device testing and the quickly evolving mobile landscape. To provide a quick summary of our browser support in Beta 1, we've created a simple A (full), B (full minus Ajax), C (basic) grade system with notes of the actual devices and versions we've been testing on in our lab.</p>
+
+				<p>The visual fidelity of the experience is highly dependent on CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that's the nature of the web. </p>
+				<h3 style="display: block; font-size: 15px !important; font-weight: normal; background: #f0f0f0; border-left: 7px solid #74B64A; padding: 5px 0 5px 8px;"><strong> A-grade</strong> - Full enhanced experience with Ajax-based animated page transitions.</h3>
 				<ul>
-					<li>Apple iOS: iPhone, iPod Touch, iPad (all versions)</li>
-					<li>Android: all devices (all versions)</li>
-					<li>Blackberry Torch (version 6)</li>
-					<li>Palm WebOS Pre, Pixi</li>
-					<li>Nokia N900 (in progress)</li>
+					<li><strong>Apple iOS 3.2-5.0 beta</strong> - Tested on the original iPad (3.2 / 4.3), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0 beta)</li>
+					<li><strong>Android 2.1-2.3</strong> - Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 &amp; 1.6 but performance may be sluggish, tested on Google G1 (1.5)</li>
+					<li><strong>Android Honeycomb</strong>- Tested on the Samsung Galaxy Tab 10.1</li>
+					<li><strong>Windows Phone 7</strong> - Tested on the HTC 7 Surround</li>
+					<li><strong>Blackberry 6.0</strong> - Tested on the Torch 9800 and Style 9670</li>
+					<li><strong>Blackberry 7</strong> - Tested on BlackBerry® Torch 9810</li>
+					<li><strong>Blackberry Playbook</strong> - Tested on PlayBook version 1.0.1 / 1.0.5</li>
+					<li><strong>Palm WebOS (1.4-2.0)</strong> - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)</li>
+					<li><strong>Palm WebOS 3.0 </strong> - Tested on HP TouchPad</li>
+					<li><strong>Firebox Mobile (Beta)</strong> - Tested on Android 2.2</li>
+					<li><strong>Opera Mobile 11.0</strong>: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0), Windows Mobile 6.5 (5.0)</li>
+					<li><strong>Meego 1.2</strong> - Tested on Nokia 950</li>
+					<li><strong>Kindle 3</strong>: Tested on the built-in WebKit browser included in the Kindle 3 device</li>
+					<li><strong>Chrome <strong>Desktop </strong>11-13</strong> - Tested on OS X 10.6.7 and Windows 7</li>
+					<li><strong>Firefox Desktop 3.6-4.0</strong> - Tested on OS X 10.6.7 and Windows 7</li>
+					<li><strong>Internet Explorer 7-9</strong> - Tested on Windows XP, Vista and 7 (minor CSS issues)</li>
+					<li><strong>Opera Desktop 10-11</strong> - Tested on OS X 10.6.7 and Windows 7</li>
+				</ul>
+				<h3 style="display: block; font-size: 15px !important; font-weight: normal; background: #f0f0f0; border-left: 7px solid #6699cc; padding: 5px 0 5px 8px;"><strong>B-grade</strong> - Enhanced experience except without Ajax navigation features.</h3>
+				<ul>
+					<li><strong>Blackberry 5.0</strong>: Tested on the Storm 2 9550, Bold 9770</li>
+					<li><strong>Opera Mini (5.0-6.0)</strong> - Tested on iOS 3.2/4.3</li>
+					<li><strong>Nokia Symbian^3 </strong>- Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)</li>
+				</ul>
+				<h3 style="display: block; font-size: 15px !important; font-weight: normal; background: #f0f0f0; border-left: 7px solid #FFCC33; padding: 5px 0 5px 8px;"><strong>C<strong>-grade</strong></strong> - Basic, non-enhanced HTML experience that is still functional</h3>
+				<ul>
+					<li><strong>Blackberry 4.x</strong> - Tested on the Curve 8330</li>
+					<li><strong>Windows Mobile</strong> - Tested on the HTC Leo (WInMo 5.2)</li>
+					<li><strong>All older smartphone platforms and featurephones</strong> - Any device that doesn't support media queries will receive the basic, C grade experience</li>
+				</ul>
+				<h3 style="display: block; font-size: 15px !important; font-weight: normal; background: #f0f0f0; border-left: 7px solid #aaaaaa; padding: 6px 0 8px 8px;"><strong>Not Officially Supported - </strong>May work, but haven't been thoroughly tested or debugged</h3>
+				<ul>
+					<li><strong>Samsung Bada</strong> - The project doesn't currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0</li>
 				</ul>
 				
-				<p>Older versions of Blackberry, Nokia/Symbian, and Windows Mobile may work but we're still seeing JavaScript errors and rendering bugs that need to be tracked down. We don't yet have phones to test  Windows Mobile 7, bada, or MeeGo but these will be added as soon as we can get devices.</p>
-				
-				<p>Since jQuery Mobile is built on the jQuery core, all pages should also work great on most recent versions of desktop browsers too - Firefox, Chrome, Safari, Internet Explorer, Opera, etc.</p>
-				
-				<p><a href="http://jquerymobile.com/gbs/" rel="external"><strong>View supported browser matrix</strong> on jQuery Mobile</a></p>
 				
+				</div>
+
+				<div class="content-secondary">
+
+					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+							<h3>More in this section</h3>
+
+							<ul data-role="listview" data-theme="c" data-dividertheme="d">
+								<li data-role="list-divider">Overview</li>
+								<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
+								<li><a href="../../docs/about/features.html">Features</a></li>
+								<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
+								<li data-theme="a"><a href="../../docs/about/platforms.html">Supported platforms</a></li>

 						
+							</ul>
+					</div>
+				</div>		

-	</div><!-- /content -->
+			</div><!-- /content -->
+
+			<div data-role="footer" class="footer-docs" data-theme="c">
+					<p>&copy; 2011 The jQuery Project</p>
+			</div>				
+			
 	
 </div><!-- /page -->

 </body>
-</html>
+</html>
--- a/docs/api/events.html
+++ b/docs/api/events.html
@ -1,48 +1,111 @@
-<!DOCTYPE html> 
-<html> 
+<!DOCTYPE html>
+<html>
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Events</title> 
-	<link rel="stylesheet"  href="../../themes/default" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Events</title>
+	<link rel="stylesheet"  href="../../css/themes/default/" />
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-</head> 
-<body> 
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head>
+<body>

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
+	<div data-role="header" data-theme="f">
 		<h1>Events</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
-	
+		<div class="content-primary">

 		<p>jQuery Mobile offers several custom events that build upon native events to create useful hooks for development. Note that these events employ various touch, mouse, and window events, depending on event existence, so you can bind to them for use in both handheld and desktop environments. You can bind to these events like you would with other jQuery events, using <code>live()</code> or <code>bind()</code>.</p>
-		
+
+			<div class="ui-body ui-body-e">
+		<h4 style="margin:.5em 0">Important: Use pageInit(), not $(document).ready()</h4>
+		The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the <code><strong>pageinit</strong></code> event. This event is explained in detail at the bottom of this page.</div>
+
+      <p>
+		<div class="ui-body ui-body-e">
+		<h4 style="margin:.5em 0">Important: pageCreate() vs pageInit()</h4>
+    Prior to Beta 2 the recommendation to users wishing to manipulate jQuery Mobile enhanced page and child widget markup was to bind to the <code><strong>pagecreate</strong></code> event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the <code><strong>pagecreate</strong></code> event in place of direct calls to the widget methods. As a result, users binding to the <code><strong>pagecreate</strong></code> in <code><strong>mobileinit</strong></code> would find their binding executing before the markup had been enhanced by each of the plugins. In keeping with the lifecycle of the jQuery UI Widget Factory, the initialization method is invoked <strong>after</strong> the create method, so the <code><strong>pageinit</strong></code> event provides the correct timing for post enhancement manipulation of the DOM and/or Javascript objects.
+
+		In short, if you were previously using <code><strong>pagecreate</strong></code> to manipulate the enhanced markup before the page was shown its very likely you'll want to migrate to 'pageinit'.
+		</div></p>
+
 		<h2>Touch events</h2>
 		<dl>
 			<dt><code>tap</code></dt>
 			<dd>Triggers after a quick, complete touch event.</dd>
-			
+
 			<dt><code>taphold</code></dt>
 			<dd>Triggers after a held complete touch event (close to one second).</dd>
-			
+
 			<dt><code>swipe</code></dt>
-			<dd>Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration.</dd>
-			
+			<dd><p>Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration but these can be configured:</p>
+			  <ul>
+			  	<li><code>scrollSupressionThreshold</code> (default: 10px) – More than this horizontal displacement, and we will suppress scrolling</li>
+			  	<li><code>durationThreshold</code> (default: 1000ms) – More time than this, and it isn’t a swipe</li>
+			  	<li><code>horizontalDistanceThreshold</code> (default: 30px) – Swipe horizontal displacement must be more than this.</li>
+			  	<li><code>verticalDistanceThreshold</code> (default: 75px) – Swipe vertical displacement must be less than this.</li>
+			  	</ul>
+			</dd>
+
 			<dt><code>swipeleft</code></dt>
 			<dd>Triggers when a swipe event occurred moving in the left direction.</dd>
-			
+
 			<dt><code>swiperight</code></dt>
 			<dd>Triggers when a swipe event occurred moving in the right direction.</dd>
 			</dl>
+			
+			<h2>Virtual mouse events</h2>
+			<p>We provide a set of "virtual" mouse events that attempt to abstract away mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. In touch environments, the plugin retains the order of event firing that is seen in traditional mouse environments, so for example, vmouseup is always dispatched before vmousedown, and vmousedown before vclick, etc. The virtual mouse events also normalize how coordinate information is extracted from the event, so in touch based environments, coordinates are available from the pageX, pageY, screenX, screenY, clientX, and clientY properties, directly on the event object.</p>
+			<dl>
+				<dt><code>vmouseover</code></dt>
+				<dd>Normalized event for handling touch or  <code>mouseover</code> events</dd>
+
+				<dt><code>vmousedown</code></dt>
+				<dd>Normalized event for handling touchstart or  <code>mousedown</code> events</dd>
+
+				<dt><code>vmousemove</code></dt>
+				<dd>Normalized event for handling touchmove or  <code>mousemove</code> events</dd>
+
+				<dt><code>vmouseup</code></dt>
+				<dd>Normalized event for handling touchend or  <code>mouseup</code> events</dd>
+
+				<dt><code>vclick</code></dt>
+				<dd>Normalized event for handling touchend or mouse <code>click</code> events. On touch devices, this event is dispatched *AFTER* vmouseup. </dd>
+
+				<dt><code>vmousecancel</code></dt>
+				<dd>Normalized event for handling touch or mouse <code>mousecancel</code> events</dd>
+			</dl>
+
+			<div class="ui-body ui-body-e">
+				<h4 style="margin:.5em 0">Warning: Use vclick with caution</h4>
+				<p> Use vclick with caution on touch devices. Webkit based browsers synthesize mousedown, mouseup, and click events roughly 300ms after the touchend event is dispatched. The target of the synthesized mouse events are calculated at the time they are dispatched and are based on the location of the touch events and, in some cases, implementation specific heuristics which leads to different target calculations on different devices and even different OS versions for the same device. This means the target element within the original touch events could be different from the target element within the synthesized mouse events.</p>
+	            <p>We recommend using click instead of vclick anytime the action being triggered has the possibility of changing the content underneath the point that was touched on screen. This includes page transitions and other behaviors such as collapse/expand that could result in the screen shifting or content being completely replaced.</p>
+			</div>
+			<p>&nbsp;</p>
+			<div class="ui-body ui-body-e">
+				<h4 style="margin:.5em 0">Canceling an elements default click behavior</h4>
+				<p>Applications can call preventDefault() on a vclick event to cancel an element's default click behavior. On mouse based devices, calling preventDefault() on a vclick event equates to calling preventDefault() on the real click event during the bubble event phase. On touch based devices, it's a bit more complicated since the actual click event is dispatched about 300ms after the vclick event is dispatched. For touch devices, calling preventDefault() on a vclick event triggers some code in the vmouse plugin that attempts to catch the next click event that gets dispatched by the browser, during the capture event phase, and call preventDefault() and stopPropagation() on it. As mentioned in the warning above, it is sometimes difficult match up a touch event with its corresponding mouse event because the targets can differ. For this reason, the vmouse plugin also falls back to attempting to identify a corresponding click event by coordinates. There are still cases where both target and coordinate identification fail, which results in the click event being dispatched and either triggering the default action of the element, or in the case where content has been shifted or replaced, triggering a click on a different element. If this happens on  a regular basis for a given element/control, we suggest you use click for triggering your action.</p>
+			</div>
+		
 		<h2>Orientation change event</h2>
 		<dl>
 			<dt><code>orientationchange</code></dt>
-			<dd>Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an <code>orientation</code> property equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationChange is not natively supported.</dd>
+			<dd>Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an <code>orientation</code> property equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationChange is not natively supported, or when <code>$.mobile.orientationChangeEnabled</code> is set to false.</dd>
+			<div class="ui-body ui-body-e">
+				<h4>orientationchange timing</h4>
+
+				The timing of the <code>orientationchange</code> with relation to the change of the client height and width is different between browsers, though the current implementation will give you the correct value for <code>event.orientation</code> derived from <code>window.orientation</code>. This means that if your bindings are dependent on the height and width values you may want to disable orientationchange all together with <code>$.mobile.orientationChangeEnabled = false</code> to let the fallback resize code trigger your bindings.
+			</div>
 		</dl>
-			
+
 		<h2>Scroll events</h2>
 		<dl>
 			<dt><code>scrollstart</code></dt>
@ -51,87 +114,373 @@
 		<dl>
 			<dt><code>scrollstop</code></dt>
 			<dd>Triggers when a scroll finishes.</dd>
-		</dl>	
-		
-		<h2>Page show/hide events</h2>
-		<p>Whenever a page is shown or hidden in jQuery Mobile, two events are triggered on that page. The events triggered depend on whether that page is being shown or hidden, so when a page transition occurs, there are actually 4 events triggered: 2 for each page. </p>
+		</dl>
+
+		<h2>Page load events</h2>
+        <p>Whenever an external page is loaded into the application DOM, 2 events are fired. The first is pagebeforeload. The 2nd event will be either pageload or pageloadfailed.</p>
+		<dl>
+			<dt><code>pagebeforeload</code></dt>
+			<dd><p>Triggered before any load request is made. Callbacks bound to this event can call preventDefault() on the event to indicate that they are handling the load request. Callbacks that do this *MUST* make sure they call resolve() or reject() on the deferred object reference contained in the data object passed to the callback.</p>
+			<p>The data object, passed as the 2nd arg to the callback function contains the following properties:</p>
+            <ul>
+            	<li><code>url</code> (string)
+<ul>
+           	    <li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
+          	    </ul>
+            	</li>
+            	<li><code>absUrl</code> (string)
+            	  <ul>
+            	    <li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
+          	    </ul>
+            	</li>
+            	<li><code>dataUrl</code> (string)
+            	  <ul>
+            	    <li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
+          	    </ul>
+            	</li>
+            	<li><code>deferred</code> (object)
+            	  <ul>
+            	    <li>Callbacks that call preventDefault() on the event, *MUST* call resolve() or reject() on this object so that changePage() requests resume processing. Deferred object observers expect the deferred object to be resolved like this:</p>
+                    <pre><code>
+$( document ).bind( &quot;pagebeforeload&quot;, function( event, data ){
+
+	// Let the framework know we're going to handle the load.
+
+	event.preventDefault();
+
+	// ... load the document then insert it into the DOM ...
+	// at some point, either in this callback, or through
+	// some other async means, call resolve, passing in
+	// the following args, plus a jQuery collection object
+	// containing the DOM element for the page.
+
+	data.deferred.resolve( data.absUrl, data.options, page );
+
+});</code></pre>
+                    <p>or rejected like this:
+                    <pre><code>
+$( document ).bind( &quot;pagebeforeload&quot;, function( event, data ){
+
+	// Let the framework know we're going to handle the load.
+
+	event.preventDefault();
+
+	// ... load the document then insert it into the DOM ...
+	// at some point, if the load fails, either in this
+	// callback, or through some other async means, call
+	// reject like this:
+
+	data.deferred.reject( data.absUrl, data.options );
+
+});</code></pre>
+                    </li>
+          	    </ul>
+            	</li>
+            	<li><code>options</code> (object)
+            	  <ul>
+            	    <li>This object contains the options that were passed into $.mobile.loadPage().</li>
+          	    </ul>
+            	</li>
+           	  </ul>
+            </dd>
+			<dt><code>pageload</code></dt>
+			<dd>Triggered after the page is successfully loaded and inserted into the DOM. Callbacks bound to this event will be passed a data object as its 2nd arg. This object contains the following information:
+            <ul>
+            	<li><code>url</code> (string)
+<ul>
+           	    <li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
+          	    </ul>
+            	</li>
+            	<li><code>absUrl</code> (string)
+            	  <ul>
+            	    <li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
+          	    </ul>
+            	</li>
+            	<li><code>dataUrl</code> (string)
+            	  <ul>
+            	    <li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
+          	    </ul>
+            	</li>
+            	<li><code>options</code> (object)
+            	  <ul>
+            	    <li>This object contains the options that were passed into $.mobile.loadPage().</li>
+          	    </ul>
+            	</li>
+           	  </ul>
+            </dd>
+			<dt><code>pageloadfailed</code></dt>
+			<dd>Triggered if the page load request failed. By default, after dispatching this event, the framework will display a page failed message and call reject() on the deferred object contained within the event's data object. Callbacks can prevent this default behavior from executing by calling preventDefault() on the event.
+			  <p>The data object, passed as the 2nd arg to the callback function contains the following properties:</p>
+              <ul>
+            	<li><code>url</code> (string)
+<ul>
+           	    <li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
+          	    </ul>
+            	</li>
+            	<li><code>absUrl</code> (string)
+            	  <ul>
+            	    <li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
+          	    </ul>
+            	</li>
+            	<li><code>dataUrl</code> (string)
+            	  <ul>
+            	    <li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
+          	    </ul>
+            	</li>
+            	<li><code>deferred</code> (object)
+            	  <ul>
+            	    <li>Callbacks that call preventDefault() on the event, *MUST* call resolve() or reject() on this object so that changePage() requests resume processing. Deferred object observers expect the deferred object to be resolved like this:</p>
+                    <pre><code>
+$( document ).bind( &quot;pageloadfailed&quot;, function( event, data ){
+
+	// Let the framework know we're going to handle things.
+
+	event.preventDefault();
+
+	// ... attempt to load some other page ...
+	// at some point, either in this callback, or through
+	// some other async means, call resolve, passing in
+	// the following args, plus a jQuery collection object
+	// containing the DOM element for the page.
+
+	data.deferred.resolve( data.absUrl, data.options, page );
+
+});</code></pre>
+                    <p>or rejected like this:
+                    <pre><code>
+$( document ).bind( &quot;pageloadfailed&quot;, function( event, data ){
+
+	// Let the framework know we're going to handle things.
+
+	event.preventDefault();
+
+	// ... attempt to load some other page ...
+	// at some point, if the load fails, either in this
+	// callback, or through some other async means, call
+	// reject like this:
+
+	data.deferred.reject( data.absUrl, data.options );
+
+});</code></pre>
+                    </li>
+          	    </ul>
+            	</li>
+            	<li><code>options</code> (object)
+            	  <ul>
+            	    <li>This object contains the options that were passed into $.mobile.loadPage().</li>
+          	    </ul>
+            	</li>
+           	  </ul>
+			</dd>
+		</dl>
+		<h2>Page change events</h2>
+		<p>Navigating between pages in the application is usually accomplished through a call to <code>$.mobile.changePage()</code>. This function is responsible for making sure that the page we are navigating to is loaded and inserted into the DOM, and then kicking off the transition animations between the current active page, and the page the caller wants to to make active. During this process, which is usually asynchronous, changePage() will fire off 2 events. The first is <code>pagebeforechange</code>. The second event depends on the success or failure of the change request. It will either be <code>pagechange</code> or <code>pagechangefailed</code>.</p>
+		<dl>
+			<dt><code>pagebeforechange</code></dt>
+			<dd>This event is triggered prior to any page loading or transition. Callbacks can prevent execution of the changePage() function by calling preventDefault on the event object passed into the callback. The callback also recieves a data object as its 2nd arg. The data object has the following properties:
+            <ul>
+				<li><code>toPage</code> (object or string)
+					<ul>
+						<li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
+					</ul>
+				</li>
+				<li><code>options</code> (object)
+					<ul>
+						<li>This object contains the configuration options to be used for the current changePage() call.</li>
+					</ul>
+				</li>
+			</ul>
+              <p>It should be noted that callbacks can modify both the toPage and options properties to alter the behavior of the current changePage() call. So for example, the toPage can be mapped to a different url from within a callback to do a sort of redirect.</p>
+            </dd>
+			<dt><code>pagechange</code></dt>
+			<dd>This event is triggered after the changePage() request has finished loading the page into the DOM and all page transition animations have completed. Note that any pageshow or pagehide events will have fired *BEFORE* this event is triggered. Callbacks for this particular event will be passed a data object as the 2nd arg. The properties for this object are as follows:
+            <ul>
+				<li><code>toPage</code> (object or string)
+					<ul>
+						<li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
+					</ul>
+				</li>
+				<li><code>options</code> (object)
+					<ul>
+						<li>This object contains the configuration options to be used for the current changePage() call.</li>
+					</ul>
+				</li>
+			</ul>
+            </dd>
+			<dt><code>pagechangefailed</code></dt>
+			<dd>This event is triggered when the changePage() request fails to load the page. Callbacks for this particular event will be passed a data object as the 2nd arg. The properties for this object are as follows:
+            <ul>
+				<li><code>toPage</code> (object or string)
+					<ul>
+						<li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
+					</ul>
+				</li>
+				<li><code>options</code> (object)
+					<ul>
+						<li>This object contains the configuration options to be used for the current changePage() call.</li>
+					</ul>
+				</li>
+			</ul>
+            </dd>
+            </dl>
+		<h2>Page transition events</h2>
+		<p>Page transitions are used to animate the change from the current active page (fromPage) to a new page (toPage). Events are triggered before and after these transitions so that observers can be notified whenever pages are shown or hidden. The events triggered are as follows:</p>
 		<dl>
 			<dt><code>pagebeforeshow</code></dt>
-			<dd>Triggered on the page being shown, before its transition begins.</dd>
-			
+			<dd>Triggered on the "toPage" we are transitioning to, before the actual transition animation is kicked off. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
+			<ul>
+				<li><code>prevPage</code> (object)
+					<ul>
+						<li>A jQuery collection object that contains the page DOM element that we are transitioning away from. Note that this collection is empty when the first page is transitioned in during application startup.</li>
+					</ul>
+				</li>
+			</ul>
+            </dd>
+
 			<dt><code>pagebeforehide</code></dt>
-			<dd>Triggered on the page being hidden, before its transition begins.</dd>
-			
+			<dd>Triggered on the "fromPage" we are transitioning away from, before the actual transition animation is kicked off. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
+			<ul>
+				<li><code>nextPage</code> (object)
+					<ul>
+						<li>A jQuery collection object that contains the page DOM element that we are transitioning to.</li>
+					</ul>
+				</li>
+			</ul>
+			<p>Note that this event will not be dispatched during the transition of the first page at application startup since there is no previously active page.</p>
+          </dd>
+
 			<dt><code>pageshow</code></dt>
-			<dd>Triggered on the page being shown, after its transition completes.</dd>
-			
+			<dd>Triggered on the "toPage" after the transition animation has completed. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
+			<ul>
+				<li><code>prevPage</code> (object)
+					<ul>
+						<li>A jQuery collection object that contains the page DOM element that we just transitioned away from. Note that this collection is empty when the first page is transitioned in during application startup.</li>
+					</ul>
+				</li>
+			</ul>
+          </dd>
+
 			<dt><code>pagehide</code></dt>
-			<dd>Triggered on the page being hidden, after its transition completes.</dd>
-			
+			<dd>Triggered on the "fromPage" after the transition animation has completed. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
+			<ul>
+				<li><code>nextPage</code> (object)
+					<ul>
+						<li>A jQuery collection object that contains the page DOM element that we just transitioned to.</li>
+					</ul>
+				</li>
+			</ul>
+			<p>Note that this event will not be dispatched during the transition of the first page at application startup since there is no previously active page.</p>
+          </dd>
+
 		</dl>
-		
-		<p>Note that all four of these events expose a reference to either the next page (<code>nextPage</code>) or previous page (<code>prevPage</code>), depending on whether the page is being shown or hidden, and whether that next or previous page exists (the first ever page shown does not have a previous page to reference, but an empty jQuery object is provided just the same). You can access this reference via the second argument of a bound callback function. For example: </p>
-		<pre>
-		<code>
-$('div').live('pageshow',function(event, ui){
-  alert('This page was just hidden: '+ ui.prevPage);
+
+		<p>You can access the prevPage or nextPage properties via the second argument of a bound callback function. For example: </p>
+<pre><code>
+$( 'div' ).live( 'pageshow',function(event, ui){
+  alert( 'This page was just hidden: '+ ui.prevPage);
 });

-$('div').live('pagehide',function(event, ui){
-  alert('This page was just shown: '+ ui.nextPage);
+$( 'div' ).live( 'pagehide',function(event, ui){
+  alert( 'This page was just shown: '+ ui.nextPage);
 });
-		</code>
-		</pre>
+</code></pre>
 		<p>Also, for these handlers to be invoked during the initial page load, you must bind them before jQuery Mobile executes.  This can be done in the <code>mobileinit</code> handler, as described on the <a href="globalconfig.html">global config</a> page.
 		<h2>Page initialization events</h2>
-		
+
 		<p>Internally, jQuery Mobile auto-initializes plugins based on the markup conventions found in a given "page". For example, an <code>input</code> element with a <code>type</code> of <code>range</code> will automatically generate a custom slider control.</p>
-		
-		<p>This auto-initialization is controlled by the "page" plugin, which dispatches events before and after it executes, allowing you to manipulate a page either pre-or-post initialization, or even provide your own intialization behavior and prevent the auto-initializations from occuring. Note that these events will only fire once per "page", as opposed to the show/hide events, which fire every time a page is shown and hidden.</p>	
-			
+
+		<p>This auto-initialization is controlled by the "page" plugin, which dispatches events before and after it executes, allowing you to manipulate a page either pre-or-post initialization, or even provide your own intialization behavior and prevent the auto-initializations from occuring. Note that these events will only fire once per "page", as opposed to the show/hide events, which fire every time a page is shown and hidden.</p>
+
 		<dl>
 			<dt><code>pagebeforecreate</code></dt>
-			<dd>Triggered on the page being initialized, before initialization occurs.</dd>
+			<dd>
+				<p>Triggered on the page being initialized, before most plugin auto-initialization occurs.</p>
+<pre><code>
+$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
+  alert( 'This page was just inserted into the dom!' );
+});
+</code></pre>
+				<p>Note that by binding to <code>pagebeforecreate</code>, you can manipulate markup before jQuery Mobile's default widgets are auto-initialized. For example, say you want to add data-attributes via JavaScript instead of in the HTML source, this is the event you'd use.</p>
+
+<pre><code>
+$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
+  // manipulate this page before its widgets are auto-initialized
+});
+</code></pre>
+			</dd>
+
 			<dt><code>pagecreate</code></dt>
-			<dd>Triggered on the page being initialized, after initialization occurs.</dd>
-		</dl>	
-		
-		
-				<pre>
-		<code>
-$('#aboutPage').live('pagebeforecreate',function(event){
-  alert('This page was just inserted into the dom!');
+			<dd>
+				<p>Triggered when the page has been created in the DOM (via ajax or other) but before all widgets have had an opportunity to enhance the contained markup. This event is most useful for user's wishing to create their own custom widgets for child markup enhancement as the jquery mobile widgets do.</p>
+<pre><code>
+$( '#aboutPage' ).live( 'pagecreate',function(event){
+  ( ":jqmData(role='sweet-plugin')" ).sweetPlugin();
 });
+</code></pre>
+			</dd>

-$('#aboutPage').live('pagecreate',function(event){
-  alert('This page was just enhanced by jQuery Mobile!');
-});
-		</code>
-		</pre>
-		
-		<p>Note that by binding to <code>pagebeforecreate</code> and returning <code>false</code>, you can prevent the page plugin from making its manipulations.</p>
-		
-<pre>
-		<code>
-$('#aboutPage').live('pagebeforecreate',function(event){
-  //run your own enhancement scripting here...
-  return false;
+			<dt><code>pageinit</code></dt>
+			<dd>
+				<p>Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.</p>
+<pre><code>
+$( '#aboutPage' ).live( 'pageinit',function(event){
+  alert( 'This page was just enhanced by jQuery Mobile!' );
 });
+</code></pre>
+			</dd>
+		</dl>

-		</code>
-		</pre>		
-		
-		<div class="ui-body ui-body-e">
-			<p><strong>Note on Page IDs in Alpha 2 release (<em>no longer an issue</em>): </strong> In jQuery Mobile Alpha 2 and older, page elements utilized the <code>ID</code> attribute for storing the location from which they came. When you place an <code>ID</code> attribute on a page that is brought into jQuery Mobile's single-page environment through Ajax, jQuery Mobile wraps that page with a new "page" <code>div</code> element, preserving any CSS references to your <code>ID</code>. However, this means that your <code>ID</code> attribute is no longer on the "page" element, so you must keep this in mind when binding to page events (<code>pagebeforecreate</code>, <code>pagecreate</code>, etc). To avoid issues, try using a class if possible. </p>
-		</div>
-		
+
+
+		<h2>Page remove events</h2>
+		<p>By default, the framework removes any non active dynamically loaded external pages from the DOM as soon as the user navigates away to a different page. The <code>pageremove</code> event is dispatched just before the framework attempts to remove the a page from the DOM.</p>
+		<dl>
+			<dt><code>pageremove</code></dt>
+			<dd>This event is triggered just before the framework attempts to remove an external page from the DOM. Event callbacks can call preventDefault on the event object to prevent the page from being removed.
+			</dd>
+		</dl>
+
+		<h2>Layout events</h2>
+		<p>Some components within the framework, such as collapsible and listview search, dynamically hide and show content based on user events. This hiding/showing of content affects the size of the page and may result in the browser adjusting/scrolling the viewport to accommodate the new page size. Since this has the potential to affect other components such as fixed headers and footers, components like collapsible and listview trigger a custom <code>updatelayout</code> event to notify other components that they may need to adjust their layouts in response to their content changes. Developers who are building dynamic applications that inject content into the current page can also manually trigger this <code>updatelayout</code> event to ensure components on the page update in response to the new content that was just added.</p>
+		<dl>
+			<dt><code>updatelayout</code></dt>
+			<dd>This event is triggered by components within the framework that dynamically show/hide content, and is meant as a generic mechanism to notify other components that they may need to update their size or position. Within the framework, this event is fired on the component element whose content was shown/hidden, and bubbles all the way up to the document element.
+<pre><code>
+$( '#foo' ).hide().trigger( 'updatelayout' );
+</code></pre>
+            </dd>
+        </dl>
 		
 		<h2>Animation Events</h2>
 		<p>jQuery Mobile exposes the <code>animationComplete</code> plugin, which you can utilize after adding or removing a class that applies a CSS transition.</p>

-    </div><!-- /content -->
-	
+    </div><!--/content-secondary -->
+
+	<div class="content-secondary">
+
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+				<h3>More in this section</h3>
+
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+
+					<li data-role="list-divider">API</li>
+					<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
+					<li data-theme="a"><a href="../../docs/api/events.html">Events</a></li>
+					<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
+					<li><a href="../../docs/api/themes.html">Theme framework</a></li>
+
+				</ul>
+		</div>
+	</div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+
 </div><!-- /page -->

 </body>
-</html>
+</html>
--- a/docs/api/globalconfig.html
+++ b/docs/api/globalconfig.html
@ -1,27 +1,34 @@
-<!DOCTYPE html> 
-<html> 
+<!DOCTYPE html>
+<html>
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Configuring default settings</title> 
-	<link rel="stylesheet"  href="../../themes/default" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Configuring default settings</title>
+	<link rel="stylesheet"  href="../../css/themes/default/" />
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-</head> 
-<body> 
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head>
+<body>

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
+	<div data-role="header" data-theme="f">
 		<h1>Configuring Defaults</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content" data-theme="c">
+		<div class="content-primary">
+
 			<h2>Working with jQuery Mobile's Auto-initialization</h2>
 			<p>Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before document.ready event fires). These enhancements are applied based on jQuery Mobile's default configuration, which is designed to work with common scenarios, but may or may not match your particular needs. Fortunately, these settings are easy to configure.</p>
-			
+
 			<h3>The mobileinit event</h3>
 			<p>When the jQuery Mobile starts to execute, it triggers a <code>mobileinit</code> event on the <code>document</code> object, to which you can bind to apply overrides to jQuery Mobile's defaults.</p>
-			
+
 			<pre>
 				<code>
 $(document).bind("mobileinit", function(){
@ -29,7 +36,7 @@ $(document).bind("mobileinit", function(){
 });
 				</code>
 			</pre>
-			
+
 			<p>Because the <code>mobileinit</code> event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded. Thus, we recommend linking to your JavaScript files in the following order:</p>

 			<pre>
@ -38,10 +45,10 @@ $(document).bind("mobileinit", function(){
 <strong>&lt;script src=&quot;custom-scripting.js&quot;&gt;&lt;/script&gt;</strong>
 &lt;script src=&quot;jquery-mobile.js&quot;&gt;&lt;/script&gt;
 				</code>
-			</pre>			
-			
+			</pre>
+
 			<p>Within this event binding, you can configure defaults either by extending the <code>$.mobile</code> object using jQuery's <code>$.extend</code> method:</p>
-			
+
 			<pre>
 				<code>
 $(document).bind("mobileinit", function(){
@ -51,7 +58,7 @@ $(document).bind("mobileinit", function(){
 });
 				</code>
 			</pre>
-			
+
 			<p>...or by setting them individually:</p>
 			<pre>
 				<code>
@ -60,50 +67,96 @@ $(document).bind("mobileinit", function(){
 });
 				</code>
 			</pre>
-			
-	
+
+		<p>To quickly preview these global configuration options in action, check out the <a href="../config/index.html">config test pages</a>.</p>
+
 		<h2>Configurable options</h2>
 		<p>The following defaults are configurable via the <code>$.mobile</code> object:</p>
-			
+
 <dl>
-	<dt>subPageUrlKey (<em>string</em>, default: "ui-page"):</dt>
+	<dt><code>ns</code> <em>string</em>, default: ""</dt>
+	<dd>The namespace used in data- attributes, for example, data-role. Can be set to anything, including a blank string which is the default. When using, it's clearest if you include a trailing dash, such as "mynamespace-" which maps to <code>data-mynamespace-foo="..."</code>.
+		<p><strong>NOTE:</strong> if you're using data- namespacing, you'll need to manually update/override one selector in the theme CSS. The following data selectors should incorporate the namespace you're using:
+		<pre><code>
+.ui-mobile [data-<strong>mynamespace-</strong>role=page], .ui-mobile [data-<strong>mynamespace-</strong>role=dialog], .ui-page { ...
+		</code></pre>
+		</p>
+	</dd>
+
+	<dt><code>autoInitializePage</code> <em>boolean</em>, default: true</dt>
+	<dd>When the DOM is ready, the framework should automatically call <code>$.mobile.initializePage</code>. If false, page will not initialize, and will be visually hidden until until <code>$.mobile.initializePage</code> is manually called.</dd>
+
+	<dt><code>subPageUrlKey</code> <em>string</em>, default: "ui-page"</dt>
 	<dd>The url parameter used for referencing widget-generated sub-pages (such as those generated by nested listviews). Translates to to <em>example.html<strong>&ui-page=</strong>subpageIdentifier</em>. The hash segment before &ui-page= is used by the framework for making an Ajax request to the URL where the sub-page exists.</dd>
-	
-	<dt>nonHistorySelectors (<em>string</em>, default: "dialog"):</dt>
-	<dd>Anchor links with a data-rel attribute value, or pages with a data-role value, that match these selectors will not be trackable in history (they won't update the location.hash and won't be bookmarkable).</dd>
-	
-	
-	<dt>activePageClass (<em>string</em>, default: "ui-page-active"):</dt> 
+
+	<dt><code>activePageClass</code> <em>string</em>, default: "ui-page-active"</dt>
 	<dd>The class assigned to page currently in view, and during transitions</dd>
-	
-	
-	<dt>activeBtnClass (<em>string</em>, default: "ui-page-active"):</dt> 
+
+
+	<dt><code>activeBtnClass</code> <em>string</em>, default: "ui-btn-active"</dt>
 	<dd>The class used for "active" button state, from CSS framework.</dd>

-	<dt>ajaxLinksEnabled (<em>boolean</em>, default: true):</dt> 
-	<dd>jQuery Mobile will automatically handle link clicks through Ajax, when possible.</dd>
+	<dt><code>ajaxEnabled</code> <em>boolean</em>, default: true</dt>
+	<dd>jQuery Mobile will automatically handle link clicks and form submissions through Ajax, when possible. If false, url hash listening will be disabled as well, and urls will load as regular http requests.</dd>

-	<dt>ajaxFormsEnabled (<em>boolean</em>, default: true):</dt> 
-	<dd>jQuery Mobile will automatically handle form submissions through Ajax, when possible.</dd>
+	<dt><code>linkBindingEnabled</code> <em>boolean</em>, default: true</dt>
+	<dd>jQuery Mobile will automatically bind the clicks on anchor tags in your document. Setting this options to false will prevent all anchor click handling <em>including</em> the addition of active button state and alternate link bluring. This should only be used when attempting to delegate the click management to another library or custom code.</dd>

-	<dt>defaultTransition (<em>string</em>, default: 'slide'):</dt> 
+	<dt><code>hashListeningEnabled</code> <em>boolean</em>, default: true</dt>
+	<dd>jQuery Mobile will automatically listen and handle changes to the location.hash. Disabling this will prevent jQuery Mobile from handling hash changes, which allows you to handle them yourself, or simply to use simple deep-links within a document that scroll to a particular ID.</dd>
+
+	<dt><code>pushStateEnabled</code> <em>boolean</em>, default: true</dt>
+	<dd>Enhancement to use <code>history.replaceState</code> in supported browsers, to convert the hash-based Ajax URL into the full document path. Note that we <a href="../pages/page-navmodel.html">recommend</a> disabling this feature if Ajax is disabled or if extensive use of external links are used.</dd>
+
+	<dt><code>defaultPageTransition</code> <em>string</em>, default: 'slide'</dt>
 	<dd>Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.</dd>
-	
-	<dt>loadingMessage (<em>string</em>, default: "loading"):</dt> 
-	<dd>Set the text that appears when a page is loading. If set to false, the message will not appear at all.</dd>
-	
-	<dt>metaViewportContent (<em>string</em>, default: "width=device-width, minimum-scale=1, maximum-scale=1"):</dt> 
-	<dd>Configure the auto-generated meta viewport tag's content attribute. If false, no meta tag will be appended to the DOM.</dd>

-	<dt>gradeA (<em>function that returns a boolean</em>, default: a function returning the value of $.support.mediaquery):</dt> 
+	<dt><code>touchOverflowEnabled</code> <em>boolean</em>, default: false</dt>
+	<dd>Enable smoother page transitions and true fixed toolbars in devices that support both the <code>overflow:</code> and <code>overflow-scrolling: touch; </code> CSS properties.</dd>
+
+	<dt><code>defaultDialogTransition</code> <em>string</em>, default: 'pop'</dt>
+	<dd>Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions by default.</dd>
+
+	<dt><code>minScrollBack</code> <em>string</em>, default: 150</dt>
+	<dd>Minimum scroll distance that will be remembered when returning to a page. </dd>
+
+	<dt><code>loadingMessage</code> <em>string</em>, default: "loading"</dt>
+	<dd>Set the text that appears when a page is loading. If set to false, the message will not appear at all.</dd>
+
+	<dt><code>pageLoadErrorMessage</code> <em>string</em>, default: "Error Loading Page"</dt>
+	<dd>Set the text that appears when a page fails to load through Ajax.</dd>
+
+	<dt><code>gradeA</code> <em>function that returns a boolean</em>, default: a function returning the value of $.support.mediaquery</dt>
 	<dd>Any support conditions that must be met in order to proceed.</dd>


 </dl>
-	
-		
-	</div><!-- /content -->
+	</div><!--/content-secondary -->
+
+	<div class="content-secondary">
+
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+				<h3>More in this section</h3>
+
+				<ul data-role="listview"  data-theme="c" data-dividertheme="d">
+
+					<li data-role="list-divider">API</li>
+					<li data-theme="a"><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
+					<li><a href="../../docs/api/events.html">Events</a></li>
+					<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
+					<li><a href="../../docs/api/themes.html">Theme framework</a></li>
+				</ul>
+		</div>
+	</div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+
 </div><!-- /page -->

 </body>
-</html>
+</html>
--- a/docs/api/index.html
+++ b/docs/api/index.html
@ -1,28 +1,32 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<meta charset="utf-8" />
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>jQuery UI Mobile Framework - API</title>
-	<link rel="stylesheet" href="../../themes/default" />
+	<link rel="stylesheet"  href="../../css/themes/default/" />
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 
-<div data-role="page" data-theme="b">
+<div data-role="page" class="type-index">

-<div data-role="header" data-position="inline">
+<div data-role="header" data-theme="f">
 	<h1>API</h1>
+	<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 </div>

 <div data-role="content">
 	
 		
-		<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
+		<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
 			<li data-role="list-divider">API</li>
 			<li><a href="globalconfig.html">Configuring defaults</a></li>
 			<li><a href="events.html">Events</a></li>
 			<li><a href="methods.html">Methods &amp; Utilities</a></li>
-			<li><a href="mediahelpers.html">Responsive Layout</a></li> 
 			<li><a href="themes.html">Theme framework</a></li>
 		</ul>

@ -30,4 +34,4 @@

 </div>
 </body>
-</html>
+</html>
--- a/docs/api/mediahelpers.html
+++ b/docs/api/mediahelpers.html
@ -1,27 +1,36 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
 	<title>jQuery Mobile Docs - Responsive Layout Helpers</title> 
-	<link rel="stylesheet"  href="../../themes/default" /> 
+	<link rel="stylesheet"  href="../../css/themes/default/" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
+	<div data-role="header" data-theme="f">
 		<h1>Responsive Layout Helpers</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content" data-theme="c">
 			
-			
+			<div class="content-primary">
 			<h2>Media Query Helper Classes</h2>
+<p class="ui-bar-e ui-body"><strong>Note: This feature was deprecated in beta, and removed in 1.0rc1. We recommend using CSS3 Media Queries instead.</strong> To support older versions of Internet Explorer, check out <a href="https://github.com/scottjehl/Respond">respond.js</a>, a fast &amp; lightweight polyfill for min/max-width CSS3 Media Queries.</p>
+			<p class="ui-bar-e ui-body">If you still need this feature, you can find the code here: <a href="https://raw.github.com/jquery/jquery-mobile/38d7ad8848f00b0921bf4ae723f3ad199eb851c1/js/jquery.mobile.media.classes.js">jquery.mobile.media.classes.js</a></p>
+			
 			<p>jQuery Mobile adds classes to the <code>HTML</code> element that mimic browser orientation and common min/max-width CSS media queries. These classes are updated on load, resize and orientationchange, allowing you to key off these classes in your CSS, to create <a href="http://www.alistapart.com/articles/responsive-web-design/">responsive layouts</a> - even in browsers that don't support media queries! </p>
 			
-			<h3>Orientation Classes</h3>
+			<h3>Orientation Classes </h3>
+
 			<p>The HTML element will always have a class of either "portrait" or "landscape", depending on the orientation of the browser or device. You can utilize these in your CSS like this:</p>
 			<pre>
 			<code>
@ -89,8 +98,32 @@ $.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");
 			</code>
 </pre>
 					
+	</div><!--/content-secondary -->		
+	
+	<div class="content-secondary">
 		
-	</div><!-- /content -->
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview"  data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">API</li>
+					<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
+					<li><a href="../../docs/api/events.html">Events</a></li>
+					<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
+					<li data-theme="a"><a href="../../docs/api/mediahelpers.html">Responsive Layout</a></li> 
+					<li><a href="../../docs/api/themes.html">Theme framework</a></li>
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
 </div><!-- /page -->

 </body>
--- a/docs/api/methods.html
+++ b/docs/api/methods.html
@ -1,46 +1,79 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
 	<title>jQuery Mobile Docs - Methods</title> 
-	<link rel="stylesheet"  href="../../themes/default" /> 
+	<link rel="stylesheet"  href="../../css/themes/default/" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
+	<div data-role="header" data-theme="f">
 		<h1>Methods</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
-	
+	<div class="content-primary">

-		<p>jQuery Mobile exposes several methods and properties on the $.mobile object for use in your applications.</p>
+	  <p>jQuery Mobile exposes several methods and properties on the $.mobile object for use in your applications.</p>
 		

 		<dl>
 			<dt><code>$.mobile.changePage</code> (<em>method</em>)</dt>
-			<dd>Programmatically change from one page to another. This method is used internally for transitions that occur as a result of clicking a link or submitting a form, when those features are enabled.</dd>
+			<dd>Programmatically change from one page to another. This method is used internally for the page loading and transitioning that occurs as a result of clicking a link or submitting a form, when those features are enabled.</dd>
 			
 			<dd>
 				
 				<dl>
-					<dt>Arguments</dt>
-					<dd><code>to</code>					
-						<ul>
-							<li>String, url to transition to (<code>"about/us.html"</code>)</li>
-							<li>jQuery object (<code>$("#about")</code>)</li>
-							<li>Array specifying two page references [from,to] for transitioning from a known page. From is otherwise assumed to be the current page in view (or $.mobile.activePage ).</li>
-							<li>Object for sending form data. (<code>{to: url, data: serialized form data, type: "get" or "post"}</code></li>  
-						</ul>	
-						</dd>	
+					<dt><code>&#183;</code> Arguments</dt>
+					<dd><code>to</code> (<em>string or object</em>, required)
+<ul>
+				<li>String: Absolute or relative URL. (&quot;about/us.html&quot;)</li>
+							<li>Object: jQuery collection object. (<code>$("#about")</code>)</li>
+						</ul>
+					</dd>	
 						
-					<dd><code>transition</code> (<em>string</em>, examples: "pop", "slide"," "none")</dd>
-					<dd><code>back</code> (<em>boolean</em>, default: false). True will cause a reverse-direction transition.</dd>
-					<dd><code>changeHash</code> (<em>boolean</em>, default: true). Update the hash to the to page's URL when page change is complete.</dd>
+					<dd><code>options</code> (<em>object</em>, optional)
+						<ul>
+							<li>Properties:
+								<ul>
+									<li><code>allowSamePageTransition</code> (<em>boolean</em>,	default:	false) By default, changePage() ignores requests to change to the current active page. Setting this option to true, allows the request to execute. Developers should note that some of the page transitions assume that the fromPage and toPage of a changePage request are different, so they may not animate as expected. Developers are responsible for either providing a proper transition, or turning it off for this specific case.</li>
+									<li><code>changeHash</code> (<em>boolean</em>,	default:	true) Decides if the hash in the location bar should be updated. </li>
+									<li><code>data</code> (<em>object</em> or	string,	default: undefined) The data to send with an Ajax page request.
+										<ul>
+											<li>Used only when the 'to' argument of changePage() is a URL.</li>
+										</ul>
+								  </li>
+									<li><code>data-url</code> (string,	default: undefined) The URL to use when updating the browser location upon changePage completion.
+								  If not specified, the value of the data-url attribute of the page element is used.</li>
+									<li><code>pageContainer</code> (jQuery collection,	default:	$.mobile.pageContainer) Specifies the element that should contain the page. </li>
+									<li><code>reloadPage</code> (<em>boolean</em>, default: false) Forces a reload of a page, even if it is already in the DOM of the page container.
+										<ul>
+											<li>Used only when the 'to' argument of changePage() is a URL.</li>
+										</ul>
+									</li>
+								  <li><code>reverse</code> (<em>boolean</em>,	default:	false) Decides what direction the transition will run when showing the page. </li>
+									<li><code>showLoadMsg</code> (<em>boolean</em>,	default:	true) Decides whether or not to show the loading message when loading external pages.</li>
+									<li><code>role</code> (<em>string</em>,	default:	undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.</li>
+									<li><code>transition</code> (<em>string</em>,	default:	$.mobile.defaultPageTransition)	The transition to use when showing the page. </li>
+									<li><code>type</code> (<em>string</em>, default: &quot;get&quot;) Specifies the method ("get" or "post") to use when making a page request. 
+										<ul>
+											<li>Used only when the 'to' argument of changePage() is a URL.</li>
+										</ul>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</dd>	
+
 				</dl>
 			</dd>
 			
@ -48,51 +81,434 @@
 			<pre>
 			<code>
 <strong>//transition to the "about us" page with a slideup transition</strong> 			
-$.mobile.changePage("about/us.html", "slideup");	
+$.mobile.changePage( "about/us.html", { transition: "slideup"} );	

 <strong>//transition to the "search results" page, using data from a form with an ID of "search"" 	</strong>	
-$.mobile.changePage({
-	url: "searchresults.php", 
-	type: "get", 
+$.mobile.changePage( "searchresults.php", {
+	type: "post", 
 	data: $("form#search").serialize()
 });		

 <strong>//transition to the "confirm" page with a "pop" transition without tracking it in history	</strong>		
-$.mobile.changePage("../alerts/confirm.html", "pop", false, false);	
+$.mobile.changePage( "../alerts/confirm.html", {
+	transition: "pop",
+	reverse: false,
+	changeHash: false
+});	
 		
 			</code>
 			</pre>
 			
 			</dd>
 			
-			<dt><code>$.mobile.pageLoading</code> (<em>method</em>)</dt>
-			<dd>Show or hide the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
+			
+			<dt><code>$.mobile.loadPage</code> (<em>method</em>)</dt>
+			<dd>Load an external page, enhance its content, and insert it into the DOM. This method is called internally by the changePage() function when its first argument is a URL. This function does not affect the current active page so it can be used to load pages in the background. The function returns a deferred promise object that gets resolved after the page has been enhanced and inserted into the document.</dd>
+			
 			<dd>
+				
 				<dl>
-					<dt>Arguments:</dt>
-					<dd><code>Done</code> (<em>boolean</em>, defaults to false, meaning loading has started). True will hide the loading message.</dd>
+					<dt><code>&#183;</code> Arguments</dt>
+					<dd><code>url</code> (<em>string or object</em>, required) A relative or absolute URL.</dd>	
+						
+					<dd><code>options</code> (<em>object</em>, optional)
+						<ul>
+							<li>Properties:
+								<ul>
+									<li><code>data</code> (<em>object</em> or	string,	default: undefined) The data to send with an Ajax page request. </li>
+									<li><code>loadMsgDelay</code> (<em>number (in ms)</em>, default: 50) Forced delay before the loading message is shown. This is meant to allow time for a page that has already been visited to be fetched from cache without a loading message.</li>
+									<li><code>pageContainer</code> (jQuery collection,	default:	$.mobile.pageContainer) Specifies the element that should contain the page after it is loaded. </li>
+									<li><code>reloadPage</code> (<em>boolean</em>, default: false) Forces a reload of a page, even if it is already in the DOM of the page container. </li>
+									<li><code>role</code> (<em>string</em>,	default:	undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.</li>
+									<li><code>type</code> (<em>string</em>, default: &quot;get&quot;) Specifies the method ("get" or "post") to use when making a page request. 
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</dd>	
+
 				</dl>
 			</dd>
 			
 			<dd>Examples:
 			<pre>
 			<code>
-<strong>//cue the page loader</strong> 			
-$.mobile.pageLoading();	
+<strong>//load the "about us" page into the DOM</strong>			
+$.mobile.loadPage( "about/us.html" );	

-<strong>//hide the page loader</strong> 			
-$.mobile.pageLoading( true );	
+<strong>//load a "search results" page, using data from a form with an ID of "search"" 	</strong>	
+$.mobile.loadPage( "searchresults.php", {
+	type: "post", 
+	data: $("form#search").serialize()
+});				
 			</code>
 			</pre>
 			
 			</dd>
 			
 			
+			<dt><code>jqmData(), jqmRemoveData()</code> (<em>method</em>)</dt>
+			<dd>When working with jQuery Mobile, <code>jqmData</code> and <code>jqmRemoveData</code> should be used in place of jQuery core's <code>data</code> and <code>removeData</code> methods (note that this includes $.fn.data, $.fn.removeData, and the $.data, $.removeData, and $.hasData utilities), as they automatically incorporate getting and setting of namespaced data attributes (even if no namespace is currently in use).</dd>
+			<dd>
+				<dl>
+					<dt><code>&#183;</code> Arguments:</dt>
+					<dd>See jQuery's <a href="http://api.jquery.com/jQuery.data/">data</a> and <a href="http://api.jquery.com/jQuery.removeData/">removeData</a> methods</dd>
+					<strong>Note: </strong>Calling jqmData() with no argument will return <code>undefined</code>. This behavior is subject to change in future versions.
+					<dt><code>&#183;</code> Also:</dt>
+					<dd>When finding elements by their jQuery Mobile data attribute, please use the custom selector <code>:jqmData()</code>, as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling <code>$("div[data-role='page']")</code>, you should use <code>$("div:jqmData(role='page')")</code>, which internally maps to <code>$("div[data-"+ $.mobile.ns +"role='page']")</code> without forcing you to concatenate a namespace into your selectors manually.</dd>
+				</dl>
+			</dd>
+
+			
+			
+			
+			<dt><code>$.mobile.showPageLoadingMsg</code> (<em></em>)</dt>
+			<dd>Show the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
+			
+			<dd>Example:
+			<pre>
+			<code>
+<strong>//cue the page loader</strong> 			
+$.mobile.showPageLoadingMsg();	
+			</code>
+			</pre>
+			
+			</dd>
+
+			
+			
+			
+			<dt><code>$.mobile.hidePageLoadingMsg</code> (<em></em>)</dt>
+			<dd>Hide the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
+			
+			<dd>Example:
+			<pre>
+			<code>
+<strong>//cue the page loader</strong> 			
+$.mobile.hidePageLoadingMsg();	
+			</code>
+			</pre>
+			
+			</dd>
+			
+			<dt><code>$.mobile.fixedToolbars.show</code> (<em>method</em>)</dt>
+			<dd>Utility method for displaying the fixed header and/or footer of the current active page within the viewport. Note that fixed headers/footers are never really hidden. Toggling the show/hide state of a toolbar is really toggling whether or not they are inline within the page content, or displayed within the viewport as if they were fixed.</dd>
+			<dd>
+				<dl>
+					<dt><code>&#183;</code> Arguments</dt>
+					<dd><code>immediately</code> (<em>boolean</em>, optional) If true, any fixed header or footer for the current active page is displayed immediately within the viewport. If false or unspecified, the fixed header/footer will fade-in after a 100 millisecond delay. Note that other events such as a document resize or scroll event can result in an additional delay before the start of the header/footer display animation.</dd>							
+				</dl>
+			</dd>
+			<dd>Example:
+			<pre>
+			<code>
+<strong>// Show fixed header/footer with a fade animation.</strong> 			
+$.mobile.fixedToolbars.show();	
+
+<strong>// Show fixed header/footer immediately.</strong>
+$.mobile.fixedToolbars.show(true);	
+			</code>
+			</pre>
+			
+			</dd>
+
+			<dt><code>$.mobile.fixedToolbars.hide</code> (<em>method</em>)</dt>
+			<dd>Utility method for hiding the fixed header and/or footer of the current active page.</dd>
+			<dd>
+				<dl>
+					<dt><code>&#183;</code> Arguments</dt>
+					<dd><code>immediately</code> (<em>boolean</em>, optional) If true, any fixed header or footer for the current active page is immediately placed inline (back in flow) with the page content, which means it will scroll along with the content and will only be visible when viewing the top or bottom of the page within the viewport. If false or unspecified, the fixed header/footer will fade-out after a 100 millisecond delay. Note that other events such as a document resize or scroll event can result in the header/footer being immediately hidden.</dd>							
+				</dl>
+			</dd>
+			<dd>Example:
+			<pre>
+			<code>
+<strong>// Hide fixed header/footer with a fade animation.</strong> 			
+$.mobile.fixedToolbars.hide();	
+
+<strong>// Hide fixed header/footer immediately.</strong>
+$.mobile.fixedToolbars.hide(true);	
+			</code>
+			</pre>
+			
+			</dd>
+            
+			<dt><code>$.mobile.path.parseUrl</code> (<em>method</em>)</dt>
+			<dd>Utility method for parsing a URL and its relative variants into an object that makes accessing the components of the URL easy. When parsing relative variants, the resulting object will contain empty string values for missing components (like protocol, host, etc). Also, when parsing URLs that have no authority, such as tel: urls, the pathname property of the object will contain the data after the protocol/scheme colon.</dd>
+			
+			<dd>
+				
+				<dl>
+					<dt><code>&#183;</code> Arguments</dt>
+					<dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>	
+						
+					<dt><code>&#183;</code> Return Value</dt>
+					<dd>
+						<p>This function returns an object that contains the various components of the URL as strings. The properties on the object mimic the browser's location object:</p>
+						<dl>	
+							<dt><code>hash</code></dt>
+							<dd>The fragment conponent of the URL, including the leading '#' character.</dd>
+							<dt><code>host</code></dt>
+							<dd>The host and port number of the URL.</dd>
+							<dt><code>hostname</code></dt>
+							<dd>The name of the host within the URL.</dd>
+							<dt><code>href</code></dt>
+							<dd>The original URL that was parsed.</dd>
+							<dt><code>pathname</code></dt>
+							<dd>The path of the file or directory referenced by the URL.</dd>
+							<dt><code>port</code></dt>
+							<dd>The port specified within the URL. Most URLs rely on the default port for the protocol used, so this may be an empty string most of the time.</dd>
+							<dt><code>protocol</code></dt>
+							<dd>The protocol for the URL including the trailing ':' character.</dd>
+							<dt><code>search</code></dt>
+							<dd>The query component of the URL including the leading '?' character.</dd>
+						</dl>	
+						<p>But it also contains additional properties that provide access to additional components as well as some common forms of the URL developers access:</p>
+						<dl>	
+							<dt><code>authority</code></dt>	
+							<dd>The username, password, and host components of the URL</dd>	
+							<dt><code>directory</code></dt>
+							<dd>The directory component of the pathname, minus any filename.</dd>	
+							<dt><code>domain</code></dt>	
+							<dd>The protocol and authority components of the URL.</dd>	
+							<dt><code>filename</code></dt>	
+							<dd>The filename within the pathname component, minus the directory.</dd>	
+							<dt><code>hrefNoHash</code></dt>	
+							<dd>The original URL minus the fragment (hash) components.</dd>	
+							<dt><code>hrefNoSearch</code></dt>	
+							<dd>The original URL minus the query (search) and fragment (hash) components.</dd>	
+							<dt><code>password</code></dt>	
+							<dd>The password contained within the authority component.</dd>	
+							<dt><code>username</code></dt>	
+							<dd>The username contained within the authority component.</dd>	
+						</dl>	
+					</dd>	
+						
+				</dl>
+			</dd>
+			
+			<dd>Examples:
+			<pre>
+			<code>
+<strong>// Parsing the Url below results an object that is returned with the
+// following properties:
+//
+//  obj.href:         http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&amp;type=unread#msg-content
+//  obj.hrefNoHash:   http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&amp;type=unread
+//  obj.hrefNoSearch: http://jblas:password@mycompany.com:8080/mail/inbox
+//  obj.domain:       http://jblas:password@mycompany.com:8080
+//  obj.protocol:     http:
+//  obj.authority:    jblas:password@mycompany.com:8080
+//  obj.username:     jblas
+//  obj.password:     password
+//  obj.host:         mycompany.com:8080
+//  obj.hostname:     mycompany.com
+//  obj.port:         8080
+//  obj.pathname:     /mail/inbox
+//  obj.directory:    /mail/
+//  obj.filename:     inbox
+//  obj.search:       ?msg=1234&amp;type=unread
+//  obj.hash:         #msg-content</strong>
+
+var obj = $.mobile.path.parseUrl("http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234");
+			</code>
+			</pre>
+			
+			</dd>
+			
+            
+			<dt><code>$.mobile.path.makePathAbsolute</code> (<em>method</em>)</dt>
+			<dd>Utility method for converting a relative file or directory path into an absolute path.</dd>
+			<dd>
+				<dl>
+					<dt><code>&#183;</code> Arguments</dt>
+					<dd><code>relPath</code> (<em>string</em>, required) A relative file or directory path.</dd>	
+					<dd><code>absPath</code> (<em>string</em>, required) An absolute file or relative path to resolve against.</dd>	
+						
+					<dt><code>&#183;</code> Return Value</dt>
+					<dd>This function returns a string that is an absolute version of the relative path passed in.</dd>	
+						
+				</dl>
+			</dd>
+			<dd>Examples:
+			<pre>
+			<code>
+<strong>// Returns: /a/b/c/file.html</strong>
+var absPath = $.mobile.path.makePathAbsolute("file.html", "/a/b/c/bar.html");
+
+<strong>// Returns: /a/foo/file.html</strong>
+var absPath = $.mobile.path.makePathAbsolute("../../foo/file.html", "/a/b/c/bar.html");
+
+			</code>
+			</pre>
+			</dd>
+			
+            
+			<dt><code>$.mobile.path.makeUrlAbsolute</code> (<em>method</em>)</dt>
+			<dd>Utility method for converting a relative URL to an absolute URL.</dd>
+			<dd>
+				
+				<dl>
+					<dt>Arguments</dt>
+					<dd><code>relUrl</code> (<em>string</em>, required) A relative URL.</dd>	
+					<dd><code>absUrl</code> (<em>string</em>, required) An absolute URL to resolve against.</dd>	
+						
+					<dt>Return Value</dt>
+					<dd>This function returns a string that is an absolute version of the relative URL passed in.</dd>	
+						
+				</dl>
+			</dd>
+			<dd>Examples:
+			<pre>
+			<code>
+<strong>// Returns: http://foo.com/a/b/c/file.html</strong>
+var absUrl = $.mobile.path.makeUrlAbsolute("file.html", "http://foo.com/a/b/c/test.html");
+
+<strong>// Returns: http://foo.com/a/foo/file.html</strong>
+var absUrl = $.mobile.path.makeUrlAbsolute("../../foo/file.html", "http://foo.com/a/b/c/test.html");
+
+<strong>// Returns: http://foo.com/bar/file.html</strong>
+var absUrl = $.mobile.path.makeUrlAbsolute("//foo.com/bar/file.html", "http://foo.com/a/b/c/test.html");
+
+<strong>// Returns: http://foo.com/a/b/c/test.html?a=1&amp;b=2</strong>
+var absUrl = $.mobile.path.makeUrlAbsolute("?a=1&amp;b=2", "http://foo.com/a/b/c/test.html");
+
+<strong>// Returns: http://foo.com/a/b/c/test.html#bar</strong>
+var absUrl = $.mobile.path.makeUrlAbsolute("#bar", "http://foo.com/a/b/c/test.html");
+
+			</code>
+			</pre>
+			
+			</dd>
+			
+            
+			<dt><code>$.mobile.path.isSameDomain</code> (<em>method</em>)</dt>
+			<dd>Utility method for comparing the domain of 2 URLs.</dd>
+			<dd>
+				
+				<dl>
+					<dt><code>&#183;</code> Arguments</dt>
+					<dd><code>url1</code> (<em>string</em>, required) A relative URL.</dd>	
+					<dd><code>url2</code> (<em>string</em>, required) An absolute URL to resolve against.</dd>	
+						
+					<dt>Return Value</dt>
+					<dd>This function returns a boolean true if the domains match, false if they don't.</dd>	
+						
+				</dl>
+			</dd>
+			<dd>Examples:
+			<pre>
+			<code>
+<strong>// Returns: true</strong>
+var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
+
+<strong>// Returns: false</strong>
+var same = $.mobile.path.isSameDomain("file://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
+
+<strong>// Returns: false</strong>
+var same = $.mobile.path.isSameDomain("https://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
+
+<strong>// Returns: false</strong>
+var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://bar.com/a/b/c/test.html");
+
+			</code>
+			</pre>
+			
+			</dd>
+			
+            
+			<dt><code>$.mobile.path.isRelativeUrl</code> (<em>method</em>)</dt>
+			<dd>Utility method for determining if a URL is a relative variant.</dd>
+			<dd>
+				
+				<dl>
+					<dt><code>&#183;</code> Arguments</dt>
+					<dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>	
+						
+					<dt><code>&#183;</code> Return Value</dt>
+					<dd>This function returns a boolean true if the URL is relative, false if it is absolute.</dd>	
+						
+				</dl>
+			</dd>
+			<dd>Examples:
+			<pre>
+			<code>
+<strong>// Returns: false</strong>
+var isRel = $.mobile.path.isRelativeUrl("http://foo.com/a/file.html");
+
+<strong>// Returns: true</strong>
+var isRel = $.mobile.path.isRelativeUrl("//foo.com/a/file.html");
+
+<strong>// Returns: true</strong>
+var isRel = $.mobile.path.isRelativeUrl("/a/file.html");
+
+<strong>// Returns: true</strong>
+var isRel = $.mobile.path.isRelativeUrl("file.html");
+
+<strong>// Returns: true</strong>
+var isRel = $.mobile.path.isRelativeUrl("?a=1&amp;b=2");
+
+<strong>// Returns: true</strong>
+var isRel = $.mobile.path.isRelativeUrl("#foo");
+
+
+			</code>
+			</pre>
+			
+			</dd>
+			
+            
+			<dt><code>$.mobile.path.isAbsoluteUrl</code> (<em>method</em>)</dt>
+			<dd>Utility method for determining if a URL is absolute.</dd>
+			<dd>
+				
+				<dl>
+					<dt><code>&#183;</code> Arguments</dt>
+					<dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>	
+						
+					<dt><code>&#183;</code> Return Value</dt>
+					<dd>This function returns a boolean true if the URL is absolute, false if it is absolute.</dd>	
+						
+				</dl>
+			</dd>
+			<dd>Examples:
+			<pre>
+			<code>
+<strong>// Returns: true</strong>
+var isAbs = $.mobile.path.isAbsoluteUrl("http://foo.com/a/file.html");
+
+<strong>// Returns: false</strong>
+var isAbs = $.mobile.path.isAbsoluteUrl("//foo.com/a/file.html");
+
+<strong>// Returns: false</strong>
+var isAbs = $.mobile.path.isAbsoluteUrl("/a/file.html");
+
+<strong>// Returns: false</strong>
+var isAbs = $.mobile.path.isAbsoluteUrl("file.html");
+
+<strong>// Returns: false</strong>
+var isAbs = $.mobile.path.isAbsoluteUrl("?a=1&amp;b=2");
+
+<strong>// Returns: false</strong>
+var isAbs = $.mobile.path.isAbsoluteUrl("#foo");
+
+
+			</code>
+			</pre>
+			
+			</dd>
+			
+            
+			<dt><code>$.mobile.base</code> (<em>methods, properties</em>)</dt>
+			<dd>Utilities for working with generated base element. TODO: document as public API is finalized.</dd>
+			
+			
+			
 			<dt><code>$.mobile.silentScroll</code> (<em>method</em>)</dt>
 			<dd>Scroll to a particular Y position without triggering scroll event listeners.</dd>
 			<dd>
 				<dl>
-					<dt>Arguments:</dt>
+					<dt><code>&#183;</code> Arguments:</dt>
 					<dd><code>yPos</code> (<em>number</em>, defaults to 0). Pass any number to scroll to that Y location.</dd>
 				</dl>
 			</dd>
@ -107,27 +523,7 @@ $.mobile.silentScroll(100);
 			
 			</dd>
 			
-			
-			<dt><code>$.mobile.addResolutionBreakpoints</code> (<em>method</em>)</dt>
-			<dd>Add width breakpoints to the min/max width classes that are added to the HTML element.</dd>
-			<dd>
-				<dl>
-					<dt>Arguments:</dt>
-					<dd><code>values</code> (<em>number or array</em>). Pass any number or array of numbers to add to the resolution classes. Read more about this feature here: <a href="mediahelpers.html">Orientation &amp; resolution targeting</a>.</dd>
-				</dl>
-			</dd>
-			
-			<dd>Examples:
-			<pre>
-			<code>
-<strong>//add a 400px breakpoint</strong> 			
-$.mobile.addResolutionBreakpoints(400);	
-<strong>//add 2 more breakpoints</strong> 			
-$.mobile.addResolutionBreakpoints([600,800]);	
-			</code>
-			</pre>
-			
-			</dd>
+
 			
 			
 			
@ -138,7 +534,30 @@ $.mobile.addResolutionBreakpoints([600,800]);
 			
 			
 		</dl>			
-	</div><!-- /content -->
+	</div><!--/content-secondary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview"  data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">API</li>
+					<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
+					<li><a href="../../docs/api/events.html">Events</a></li>
+					<li data-theme="a"><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
+					<li><a href="../../docs/api/themes.html">Theme framework</a></li>
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
 	
 </div><!-- /page -->

--- a/docs/api/themes.html
+++ b/docs/api/themes.html
@ -1,22 +1,28 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
 	<title>jQuery Mobile Framework - Static Containers, States</title> 
-	<link rel="stylesheet"  href="../../themes/default" /> 
+	<link rel="stylesheet"  href="../../css/themes/default/" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
+	<div data-role="header" data-theme="f">
 		<h1>Themes</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div>

 	<div data-role="content">
 	
+	<div class="content-primary">
 		<h2>Theming overview</h2>
 		
 			<p>Every layout and widget in jQuery Mobile is designed around a new object-oriented CSS framework that makes it possible to apply a complete unified visual design Theme to sites and applications. The theming system is similar to the ThemeRoller system in jQuery UI, but adds a few important improvements:</p> 
@ -45,14 +51,14 @@
 		<p>The default theme contains the following five Bar styles:</p>
 		
 		<div class="swatch-preview">
-			<div class="ui-bar ui-bar-a">Bar A</div>
-			<div class="ui-bar ui-bar-b">Bar B</div>
-			<div class="ui-bar ui-bar-c">Bar C</div>
-			<div class="ui-bar ui-bar-d">Bar D</div>
-			<div class="ui-bar ui-bar-e">Bar E</div>
+			<div class="ui-bar ui-bar-a">Bar A - <a href="#" data-role="none" class="ui-link">Link</a></div>
+			<div class="ui-bar ui-bar-b">Bar B - <a href="#" data-role="none" class="ui-link">Link</a></div>
+			<div class="ui-bar ui-bar-c">Bar C - <a href="#" data-role="none" class="ui-link">Link</a></div>
+			<div class="ui-bar ui-bar-d">Bar D - <a href="#" data-role="none" class="ui-link">Link</a></div>
+			<div class="ui-bar ui-bar-e">Bar E - <a href="#" data-role="none" class="ui-link">Link</a></div>
 		</div><!-- end swatch-bars -->
 		
-		<p>By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the <code>data-theme</code> attribute to your header or footer and specify an alternate swatch letter ('b' or 'd', for example) and the specified theme swatch color will be applied. Learn more about <a href="../toolbars/bars-themes.html">toolbar theming</a>.</p>
+		<p>By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the <code> data-theme</code> attribute to your header or footer and specify an alternate swatch letter ('b' or 'd', for example) and the specified theme swatch color will be applied. Learn more about <a href="../toolbars/bars-themes.html">toolbar theming</a>.</p>
 		
 		
 		
@ -60,11 +66,11 @@
 		<p>The default theme also includes color swatch values for use in content blocks, designed to coordinate with the header color swatches in the theme. </p>
 		
 		<div class="swatch-preview">	
-			<div class="ui-body ui-body-a">Block A</div>
-			<div class="ui-body ui-body-b">Block B</div>
-			<div class="ui-body ui-body-c">Block C</div>
-			<div class="ui-body ui-body-d">Block D</div>
-			<div class="ui-body ui-body-e">Block E</div>
+			<div class="ui-body ui-body-a">Block A - <a href="#">Link</a></div>
+			<div class="ui-body ui-body-b">Block B - <a href="#">Link</a></div>
+			<div class="ui-body ui-body-c">Block C - <a href="#">Link</a></div>
+			<div class="ui-body ui-body-d">Block D - <a href="#">Link</a></div>
+			<div class="ui-body ui-body-e">Block E - <a href="#">Link</a></div>
 		</div><!-- end swatch-bars -->


@ -90,10 +96,11 @@
 			</div>
 			<div class="ui-bar ui-bar-a">
 				<div data-role="controlgroup" data-type="horizontal" >
-					<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
+					<a href="#" data-role="button" data-inline="true">Button</a><a href="#" data-role="button" data-inline="true">Button</a><a href="#" data-role="button" data-inline="true">Button</a>
 				</div><!-- /controlgroup -->
 			</div>

+
 		<p>Learn more about <a href="../content/content-themes.html">content theming</a>.</p>
 		

@ -148,52 +155,52 @@
 		
 		<p>This default behavior makes it easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. Since form elements use the button styles, they will also adapt to their parent container too. </p>
 			
-		<p>If you want to add visual emphasis to a button and help it stand out visually from its parent toolbar, an alternate swatch color can be set by adding a <code>data-theme="a"</code> to the anchor. Once an alternate swatch color is set on a button in the markup, the framework won't override that color if the parent theme is changed, because you made a conscious decision to set it.</p>
+		<p>If you want to add visual emphasis to a button and help it stand out visually from its parent toolbar, an alternate swatch color can be set by adding a <code> data-theme="a"</code> to the anchor. Once an alternate swatch color is set on a button in the markup, the framework won't override that color if the parent theme is changed, because you made a conscious decision to set it.</p>
 		
 		<div class="swatch-bars">
-			<div data-role="header" data-theme="a" class="ui-bar" data-nobackbtn="true">
+			<div data-role="header" data-theme="a" class="ui-bar" >
 				<div><!-- wrapper div to have control over butttons -->
-					<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
 				</div>
 			</div>
-			<div data-role="header" data-theme="b" class="ui-bar" data-nobackbtn="true">
+			<div data-role="header" data-theme="b" class="ui-bar" >
 				<div><!-- wrapper div to have control over butttons -->
-					<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
 				</div>
 			</div>
-			<div data-role="header" data-theme="c" class="ui-bar" data-nobackbtn="true">
+			<div data-role="header" data-theme="c" class="ui-bar" >
 				<div><!-- wrapper div to have control over butttons -->
-					<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
 				</div>
 			</div>
-			<div data-role="header" data-theme="d" class="ui-bar" data-nobackbtn="true">
+			<div data-role="header" data-theme="d" class="ui-bar" >
 				<div><!-- wrapper div to have control over butttons -->
-					<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
 				</div>
 			</div>
-			<div data-role="header" data-theme="e" class="ui-bar" data-nobackbtn="true">
+			<div data-role="header" data-theme="e" class="ui-bar" >
 				<div><!-- wrapper div to have control over butttons -->
-					<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
 				</div>
 			</div>
 			
@ -216,20 +223,63 @@
 		<h3>Icons</h3>
 		<p>There a core set of <a href="../buttons/buttons-icons.html">standard icons</a> included in the framework that can be assigned to any button. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.</p>

-		
+		<h3>Theme classes</h3>
+		<p>Assigning color swatches through the <code> data-theme</code> attribute is one way to leverage the theme system, but it's also possible to apply any of the theme swatches directly to your markup through classes to apply the colors, textures and font formatting of your theme to any markup. This is especially useful when creating your own custom layout elements or UI widgets. Here are a few common theme classes, but many more are available in the theme stylesheet:</p>
+		<dl>
+			<dt><code>ui-bar-(a-z)</code></dt>
+			<dd>Applies the toolbar theme styles for the selected swatch letter. Commonly used in conjunction with <code>ui-bar</code> structural class to add the standard bar padding styles.</dd>
+			<dt><code>ui-body-(a-z)</code></dt>
+			<dd>Applies the content body theme styles for the selected swatch letter. Commonly used in conjunction with <code>ui-body</code> structural class to add the standard content block padding styles. </dd>
+			<dt><code>ui-btn-up-(a-z)</code></dt>
+			<dd>Applies the button/clickable element theme styles for the selected swatch letter. Commonly used in with the <code>ui-btn-hover-(a-z)</code> and <code>ui-btn-down-(a-z)</code> interaction class states to provide visual feedback and <code>ui-btn-active</code> to indicate the selected or "on" state.</dd>
+			<dt><code>ui-corner-all</code></dt>
+			<dd>Applies the theme's global border-radius for rounded corners and is used for container or grouped items in the framework (inset lists, radiobutton sets). There are additional classes for all the possible combinations of rounded corners, for example: <code>ui-corner-tl</code> (top left only), <code>-top</code> (both top corners), <code>-left</code> (both left corners),  etc. A second full set of corner classes is provided for buttons so these can have a different corner radius. These use classes with a similar naming convention, but with "btn" instead of "corner", like this: <code>.ui-<strong>btn</strong>-corner-all</code>.</dd>
+			<dt><code>ui-shadow</code></dt>
+			<dd>Applies the theme's global drop shadow to any element using CSS <code>box-shadow</code> property. </dd>
+			<dt><code>ui-disabled</code></dt>
+			<dd>Applies the disabled look and feel which essentially reduces the opacity of any element with this class to 30%, hides the cursor, and sets <code>pointer-events: none;</code> which prevents any interaction in many modern browsers.</dd>
+		</dl>

-	
+			<h3>Overriding themes</h3>
+			<p>The themes are meant as a solid starting point, but are meant to be customized to add the custom design elements that make your site or app unique. Since everything is controlled by CSS, it's easy to use a web inspector tool to identify the style properties you want to modify. The set of of theme classes (global) and semantic structural classes (widget-specific) added to elements provide a rich set of possible selectors to target style overrides against. We recommend adding an external stylesheet to the <code>head</code>, placed <strong>after</strong> the structure and theme stylesheet references, that contain all your style overrides. This allows you to easily update to newer versions of the library because overrides are kept separate from the library code.</p>
+			
+			
 		<p><strong>Learn more</strong> about theming individual components:</p>
 		<ul data-role="listview" data-inset="true">
 			<li><a href="../pages/pages-themes.html">Page theming</a></li>
 			<li><a href="../toolbars/bars-themes.html">Toolbar theming</a></li>
 			<li><a href="../content/content-themes.html">Content theming</a></li>
 			<li><a href="../buttons/buttons-themes.html">Button theming</a></li>
-			<li><a href="../lists/lists-themes.html">List theming</a></li>
+            <li><a href="../forms/forms-themes.html">Form theming</a></li>
+            <li><a href="../lists/lists-themes.html">List theming</a></li>
 		</ul>
-	</div><!-- end content -->
+	</div><!--/content-secondary -->		
 	
-</div><!-- end page -->
+	<div class="content-secondary ui-body-d">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+			
+					<li data-role="list-divider">API</li>
+					<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
+					<li><a href="../../docs/api/events.html">Events</a></li>
+					<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
+					<li data-theme="a"><a href="../../docs/api/themes.html">Theme framework</a></li>
+	
+								</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
+</div><!-- /page -->

 </body>
 </html>
--- a/docs/buttons/api-buttons.html
+++ b/docs/buttons/api-buttons.html
@ -1,18 +1,23 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
 	<title>jQuery Mobile Docs - Buttons</title> 
-	<link rel="stylesheet"  href="../../themes/default" /> 
+	<link rel="stylesheet"  href="../../css/themes/default/" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
+	<div data-role="header" data-theme="f">
 		<h1>Button API</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content" data-theme="c">
--- a/docs/buttons/buttons-events.html
+++ b/docs/buttons/buttons-events.html
@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Button events</title>
+	<link rel="stylesheet"  href="../../css/themes/default/" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head>
+<body>
+
+	<div data-role="page" class="type-interior">
+
+		<div data-role="header" data-theme="f">
+		<h1>Button basics</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		<div class="content-primary">
+
+		<form action="#" method="get">
+
+			<h2>Button basics</h2>		
+		
+      <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+			<li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
+			<li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
+			<li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+			<li><a href="buttons-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+		</ul>	
+			
+			<p>Bind events directly to the <code>a</code>, <code>input</code>, or <code>button</code> element.  Use jQuery Mobile's <a href="../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+			<pre><code> 
+$( ".myButton" ).bind( "click", function(event, ui) {
+  ...
+});
+</code></pre> 
+			
+			<p>The <strong>form button</strong> plugin has the following custom events:</p>
+
+	<dl>
+				
+		<dt><code>create</code> triggered when a form button is created</dt>
+		<dd>
+
+			<pre><code>
+$('[type='submit']').button({
+   create: function(event, ui) { ... }
+});		
+			</code></pre>
+			</dd>
+			
+	</dl>
+	    
+	</form>
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">				
+					<li data-role="list-divider">Buttons</li>
+					<li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
+					<li><a href="buttons-icons.html">Button icons</a></li>
+					<li><a href="buttons-inline.html">Inline buttons</a></li>
+					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
+					<li><a href="buttons-themes.html">Theming buttons</a></li>	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
+</div><!-- /page -->
+
+</body>
+</html>
+
--- a/docs/buttons/buttons-grouped.html
+++ b/docs/buttons/buttons-grouped.html
@ -1,23 +1,29 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Buttons</title> 
-	<link rel="stylesheet"  href="../../themes/default" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Grouped Buttons</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> 
-	<script type="text/javascript" src="../../js/"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head>
 <body> 

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
+	<div data-role="header" data-theme="f">
 		<h1>Grouped buttons</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
-		<p>Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code>data-role="controlgroup"</code> attribute &mdash; the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
+		<div class="content-primary">
+		
+		<p>Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code> data-role="controlgroup"</code> attribute &mdash; the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
 <pre><code>
 &lt;div data-role=&quot;controlgroup&quot;&gt;
 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Yes&lt;/a&gt;
@ -45,8 +51,7 @@
 			
 		<p>Horizontal grouped buttons with icons:</p>
 		<div data-role="controlgroup" data-type="horizontal" >
-			<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
-			<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
+			<a href="index.html" data-role="button" data-icon="plus">Add</a>
 			<a href="index.html" data-role="button" data-icon="delete">Delete</a>
 		</div>
 		
@ -58,9 +63,33 @@
 		</div>
 		
 		
-
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
 		
-	</div><!-- /content -->
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">Buttons</li>
+					<li><a href="buttons-types.html">Button basics</a></li>
+					<li><a href="buttons-icons.html">Button icons</a></li>
+					<li><a href="buttons-inline.html">Inline buttons</a></li>
+					<li data-theme="a"><a href="buttons-grouped.html">Grouped buttons</a></li>
+					<li><a href="buttons-themes.html">Theming buttons</a></li>
+	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
 </div><!-- /page -->

 </body>
--- a/docs/buttons/buttons-icons.html
+++ b/docs/buttons/buttons-icons.html
@ -1,31 +1,36 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Buttons</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Button icons</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
+	<div data-role="header" data-theme="f">
 		<h1>Button icons</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
+		<div class="content-primary">
 		
 		<h2>Adding Icons to Buttons</h2>
 		<p>The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.</p> 
 		
 			
-			<p>An icon can be added to a button by adding a <code>data-icon</code> attribute on the anchor specifying the icon to display.  For example, the following markup:</p> 
+			<p>An icon can be added to a button by adding a <code> data-icon</code> attribute on the anchor specifying the icon to display.  For example, the following markup:</p> 
 			
 			<code>
-			&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; <strong>data-icon=&quot;delete&quot;</strong>&gt;Delete&lt;/a&gt;
+			&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; <strong> data-icon=&quot;delete&quot;</strong>&gt;Delete&lt;/a&gt;
 			</code>
 			
 			<p>Creates this button with an icon:</p>
@ -33,7 +38,7 @@
 			
 			<h2>Icon set</h2>
 			
-			<p>The following <code>data-icon</code> attributes can be referenced to create the icons shown below:</p>
+			<p>The following <code> data-icon</code> attributes can be referenced to create the icons shown below:</p>
 			
 			<p><strong>Left arrow</strong> - data-icon="arrow-l"</p>
 			<a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
@ -67,15 +72,17 @@
 			<a href="index.html" data-role="button" data-icon="alert">My button</a>
 			<p><strong>Info</strong> - data-icon="info"</p>
 			<a href="index.html" data-role="button" data-icon="info">My button</a>
-			
-			
+			<p><strong>Home</strong> - data-icon="home"</p>
+			<a href="index.html" data-role="button" data-icon="home">My button</a>
+			<p><strong>Search</strong> - data-icon="search"</p>
+			<a href="index.html" data-role="button" data-icon="search">My button</a>
 			

 		<h2>Icon positioning</h2>
 		<p>By default, all icons in buttons are placed to the left of the button text. </p>
 		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="left">Delete</a>
 		
-		<p>This default may be overridden using the <code>data-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:</p> 
+		<p>This default may be overridden using the <code> data-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:</p> 

 <code>
 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;<strong> data-iconpos=&quot;right&quot;</strong>&gt;Delete&lt;/a&gt;
@ -84,13 +91,13 @@
 		<p>Creates this button with right-aligned icon:</p>
 		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>

-		<p>Icons can also be positioned above the text by specifying <code>data-iconpos="top"</code></p>
+		<p>Icons can also be positioned above the text by specifying <code> data-iconpos="top"</code></p>
 		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">Delete</a>
 		
-		<p>Or icons can also be positioned below the text by specifying <code>data-iconpos="bottom"</code></p>
+		<p>Or icons can also be positioned below the text by specifying <code> data-iconpos="bottom"</code></p>
 		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">Delete</a>
 		
-		<p>You can also create an icon-only button, by setting the <code>data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code>data-iconpos="right"</code> on the previous example with <code>data-iconpos="notext"</code>:</p>
+		<p>You can also create an icon-only button, by setting the <code> data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code> data-iconpos="right"</code> on the previous example with <code> data-iconpos="notext"</code>:</p>

 <code>
 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;<strong> data-iconpos=&quot;notext&quot;</strong>&gt;Delete&lt;/a&gt;
@ -100,7 +107,7 @@
 			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>

 		<h2>Custom Icons</h2>
-		<p>To use custom icons, specify a <code>data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code>data-icon</code> value and apply it to the button. You can then write a CSS rule that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
+		<p>To use custom icons, specify a <code> data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code> data-icon</code> value and apply it to the button. You can then write a CSS rule that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
 			
 		 	
 		<h2>Icons and themes</h2>
@ -125,6 +132,8 @@
 		<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 		<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 		<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 		</div>
 		
 		<!-- B themed -->
@ -146,6 +155,8 @@
 		<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 		<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 		<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 		</div>
 		
 		<!-- C themed -->
@ -167,10 +178,38 @@
 		<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 		<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 		<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 		</div>
 	
-	</div><!-- /content -->
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">Buttons</li>
+					<li><a href="buttons-types.html">Button basics</a></li>
+					<li data-theme="a"><a href="buttons-icons.html">Button icons</a></li>
+					<li><a href="buttons-inline.html">Inline buttons</a></li>
+					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
+					<li><a href="buttons-themes.html">Theming buttons</a></li>
+	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
 </div><!-- /page -->

 </body>
-</html>
+</html>
--- a/docs/buttons/buttons-inline.html
+++ b/docs/buttons/buttons-inline.html
@ -1,43 +1,46 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Buttons</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Inline buttons</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
+	<div data-role="header" data-theme="f">
 		<h1>Inline buttons</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
+		<div class="content-primary">
 		
 		<p>By default, all buttons in the body content are styled as block-level element so they fill the width of the screen:</p>
 		
 		<a href="index.html" data-role="button">Button</a>
 		
 			
-		<p>However, if you want a more compact button that is only as wide as the text and icons inside, add the <code>data-inline="true"</code> attribute to the button:</p>
+		<p>However, if you want a more compact button that is only as wide as the text and icons inside, add the <code> data-inline="true"</code> attribute to the button:</p>
 		
 		
 		<a href="index.html" data-role="button" data-inline="true">Button</a>
 		
-		<p>If you have multiple buttons that should sit side-by-side on the same line, wrap the buttons in a container that has a <code>data-inline="true"</code> attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. </p>
+		<p>If you have multiple buttons that should sit side-by-side on the same line, add the <code> data-inline="true"</code> attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. </p>
 			
 <pre><code>
-&lt;div data-inline=&quot;true&quot;&gt;
-	&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Cancel&lt;/a&gt;
-	&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;
-&lt;/div&gt;
+&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Cancel&lt;/a&gt;
+&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;
 </code></pre>

-		<p>This creates an inline button set:</p>
+		<p>The result is this:</p>

 			<a href="index.html" data-role="button" data-inline="true">Cancel</a>
 			<a href="index.html" data-role="button" data-theme="b" data-inline="true">Save</a>
@ -45,10 +48,34 @@
 		
 		<p>If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the <a href="../content/content-grids.html">content column grids</a> to put normal full-width buttons into 2- or 3-columns.</p>	
 			
-		
-	
-	</div><!-- /content -->
-</div><!-- /page -->
+		</div><!--/content-primary -->		

-</body>
-</html>
+		<div class="content-secondary">
+
+			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+					<h3>More in this section</h3>
+
+					<ul data-role="listview" data-theme="c" data-dividertheme="d">
+
+						<li data-role="list-divider">Buttons</li>
+						<li><a href="buttons-types.html">Button basics</a></li>
+						<li><a href="buttons-icons.html">Button icons</a></li>
+						<li data-theme="a"><a href="buttons-inline.html">Inline buttons</a></li>
+						<li><a href="buttons-grouped.html">Grouped buttons</a></li>
+						<li><a href="buttons-themes.html">Theming buttons</a></li>
+
+					</ul>
+			</div>
+		</div>		
+
+	</div><!-- /content -->
+
+	<div data-role="footer" class="footer-docs" data-theme="c">
+			<p>&copy; 2011 The jQuery Project</p>
+	</div>
+
+	</div><!-- /page -->
+
+	</body>
+	</html>
--- a/docs/buttons/buttons-methods.html
+++ b/docs/buttons/buttons-methods.html
@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Button methods</title>
+	<link rel="stylesheet"  href="../../css/themes/default/" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head>
+<body>
+
+	<div data-role="page" class="type-interior">
+
+		<div data-role="header" data-theme="f">
+		<h1>Button basics</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		<div class="content-primary">
+
+		<form action="#" method="get">
+
+			<h2>Button basics</h2>		
+		
+      <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+			<li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
+			<li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
+			<li><a href="buttons-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+			<li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
+		</ul>	
+			
+			<p>The following methods apply only to <strong>form buttons</strong>.  Link-based buttons do not have any associated methods.</p>
+
+		<dl>
+						
+			<dt><code>enable</code> enable a disabled form button</dt>
+			<dd>
+				<pre><code>
+$('[type='submit']').button('enable');			
+				</code></pre>
+			</dd>
+			
+			<dt><code>disable</code> disable a form button</dt>
+			<dd>
+				<pre><code>
+$('[type='submit']').button('disable');			
+				</code></pre>
+			</dd>
+			
+			<dt><code>refresh</code> update the form button</dt>
+			<dd>
+			<p>If you manipulate a form button via JavaScript, you must call the refresh method on it to update the visual styling.</p> 				
+			
+			<pre><code>		
+$('[type='submit']').button('refresh');
+				</code></pre>
+			</dd>
+			
+		</dl>	
+    
+	</form>
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">				
+					<li data-role="list-divider">Buttons</li>
+					<li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
+					<li><a href="buttons-icons.html">Button icons</a></li>
+					<li><a href="buttons-inline.html">Inline buttons</a></li>
+					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
+					<li><a href="buttons-themes.html">Theming buttons</a></li>	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
+</div><!-- /page -->
+
+</body>
+</html>
+
--- a/docs/buttons/buttons-options.html
+++ b/docs/buttons/buttons-options.html
@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Button options</title>
+	<link rel="stylesheet"  href="../../css/themes/default/" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head>
+<body>
+
+	<div data-role="page" class="type-interior">
+
+		<div data-role="header" data-theme="f">
+		<h1>Button basics</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		<div class="content-primary">
+
+		<form action="#" method="get">
+
+			<h2>Button basics</h2>		
+		
+         <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+   			<li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
+   			<li><a href="buttons-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+   			<li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+   			<li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
+   		</ul>	
+			
+			<p>The following options apply to <strong>all buttons</strong>:</p>
+
+		<dl>			
+			<dt><code>corners</code> <em>boolean</em></dt>
+			<dd>
+				<p class="default">default: true</p>
+				<p>Applies the theme button border-radius if set to true. This option is also exposed as a data attribute: <code>data-corners=&quot;false&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ corners: "false" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-corners="false">No rounded corners</a>
+			</dd>			
+			<dt><code>icon</code> <em>string</em></dt>
+			<dd>
+				<p class="default">default: null</p>
+				<p>Applies an icon from the <a href="../buttons/buttons-icons.html">icon set</a>. This option is also exposed as a data attribute: <code>data-icon=&quot;star&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ icon: "star" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-icon="star">Star icon</a>
+			</dd>
+			
+			<dt><code>iconpos</code> <em>string</em></dt>
+			<dd>
+				<p class="default">default: "left"</p>
+				<p>Positions the icon in the button. Possible values: left, right, none, notext. The notext value will display an icon-only button with no text feedback. This option is also exposed as a data attribute: <code>data-iconpos=&quot;left&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ iconpos: "right" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-icon="star" data-iconpos="right">Star icon</a>
+			</dd>
+			
+			<dt><code>iconshadow</code> <em>boolean</em></dt>
+			<dd>
+				<p class="default">default: true</p>
+				<p>Applies the theme shadow to the button's icon if set to true. This option is also exposed as a data attribute: <code>data-iconshadow=&quot;false&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ iconshadow: "false" }</strong>);</code></pre>
+				<a href="#" data-role="button"  data-icon="star" data-iconshadow="false">No icon shadow</a>
+			</dd>
+			
+			<dt><code>inline</code> <em>boolean</em></dt>
+			<dd>
+				<p class="default">default: null (false)</p>
+				<p>If set to true, this will make the button act like an inline button so the width is determined by the button's text. By default, this is null (false) so the button is full width, regardless of the feedback content. Possible values: true, false. This option is also exposed as a data attribute: <code>data-inline=&quot;true&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ inline: "true" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-inline="true">Inline</a>
+			</dd>
+			
+			<dt><code>shadow</code> <em>boolean</em></dt>
+			<dd>
+				<p class="default">default: true</p>
+				<p>Applies the drop shadow style to the button if set to true. This option is also exposed as a data attribute: <code>data-shadow=&quot;false&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ shadow: "false" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-shadow="false">No button shadow</a>
+			</dd>
+			
+			<dt><code>theme</code> <em>string</em></dt>
+			<dd>
+				<p class="default">default: null, inherited from parent</p>
+				<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code></p>			
+				<pre><code>$('a').buttonMarkup(<strong>{ theme: "a" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-theme="a">Theme A</a>
+			</dd>					
+		</dl>	
+		
+		<div class="ui-body ui-body-e">
+		<p>The following option applies only to <strong>form buttons</strong>, which are automatically initialized by the framework:</p>
+		</div>
+				
+		<dl>
+			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
+			<dd>
+				<p class="default">default: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"</p>
+				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as form buttons. To change which elements are initialized, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+   <strong>$.mobile.button.prototype.options.initSelector = ".myButtons";</strong>
+});
+</code></pre>
+			</dd>			
+		</dl>	
+		
+    
+	</form>
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">				
+					<li data-role="list-divider">Buttons</li>
+					<li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
+					<li><a href="buttons-icons.html">Button icons</a></li>
+					<li><a href="buttons-inline.html">Inline buttons</a></li>
+					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
+					<li><a href="buttons-themes.html">Theming buttons</a></li>	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
+</div><!-- /page -->
+
+</body>
+</html>
+
--- a/docs/buttons/buttons-themes.html
+++ b/docs/buttons/buttons-themes.html
@ -1,41 +1,46 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Buttons</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Theming buttons</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
+	<div data-role="header" data-theme="f">
 		<h1>Theming buttons</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
+		<div class="content-primary">
 			
-			<h2>Theming</h2>
+			<h2>Theming buttons</h2>
 			
-			<p>jQuery Mobile has a rich <a href="../themes/index.html">theming system</a> that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches it's parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup: </p>
+			<p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches its parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup: </p>
 			
-			<div data-role="content" data-theme="a"><h4>A swatch</h4><a href="index.html" data-role="button">Button</a></div>
-			<div data-role="content" data-theme="b"><h4>B swatch</h4><a href="index.html" data-role="button">Button</a></div>
-			<div data-role="content" data-theme="c"><h4>C swatch</h4><a href="index.html" data-role="button">Button</a></div>
-			<div data-role="content" data-theme="d"><h4>D swatch</h4><a href="index.html" data-role="button">Button</a></div>
-			<div data-role="content" data-theme="e"><h4>E swatch</h4><a href="index.html" data-role="button">Button</a></div>
+			<div class="ui-body ui-body-a"><h4>A swatch</h4><a href="index.html" data-role="button">Button</a></div>
+			<div class="ui-body ui-body-b"><h4>B swatch</h4><a href="index.html" data-role="button">Button</a></div>
+			<div class="ui-body ui-body-c"><h4>C swatch</h4><a href="index.html" data-role="button">Button</a></div>
+			<div class="ui-body ui-body-d"><h4>D swatch</h4><a href="index.html" data-role="button">Button</a></div>
+			<div class="ui-body ui-body-e"><h4>E swatch</h4><a href="index.html" data-role="button">Button</a></div>
 			
 			<h2>Assigning theme swatches</h2>
-			<p>Button can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code>data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
+			<p>Buttons can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code> data-theme</code> attribute on the button markup and specifying a swatch letter. </p>

 <pre><code>			
 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-theme=&quot;a&quot;&gt;Theme a&lt;/a&gt;			
 </code></pre>
 				
-		<p>Here are 4 buttons with icons that have a different swatch letter assigned via the <code>data-theme</code> attribute.</p>
+		<p>Here are 5 buttons with icons that have a different swatch letter assigned via the <code> data-theme</code> attribute.</p>
 	
 		<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
 		<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
@ -46,7 +51,7 @@
 		<h2>Theme variations</h2>
 		
 		<p><strong>"a" theme</strong> on container with themed buttons inside</p>
-		<div data-role="content" data-theme="a">
+		<div class="ui-body ui-body-a">
 			<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
 			<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
 			<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
@ -55,7 +60,7 @@
 		</div>
 		
 		<p><strong>"b" theme</strong> on container with themed buttons inside</p>
-		<div data-role="content" data-theme="b">
+		<div class="ui-body ui-body-b">
 			<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
 			<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
 			<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
@ -64,7 +69,7 @@
 		</div>
 		
 		<p><strong>"c" theme</strong> on container with themed buttons inside</p>
-		<div data-role="content" data-theme="c">
+		<div class="ui-body ui-body-c">
 			<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
 			<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
 			<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
@ -73,7 +78,7 @@
 		</div>
 		
 		<p><strong>"d" theme</strong> on container with themed buttons inside</p>
-		<div data-role="content" data-theme="d">
+		<div class="ui-body ui-body-d">
 			<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
 			<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
 			<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
@ -81,8 +86,8 @@
 			<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
 		</div>
 		
-		<p><strong>"d" theme</strong> on container with themed buttons inside</p>
-		<div data-role="content" data-theme="e">
+		<p><strong>"e" theme</strong> on container with themed buttons inside</p>
+		<div class="ui-body ui-body-e">
 			<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
 			<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
 			<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
@ -90,7 +95,33 @@
 			<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
 		</div>
 		
-	</div><!-- /content -->
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">Buttons</li>
+					<li><a href="buttons-types.html">Button basics</a></li>
+					<li><a href="buttons-icons.html">Button icons</a></li>
+					<li><a href="buttons-inline.html">Inline buttons</a></li>
+					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
+					<li data-theme="a"><a href="buttons-themes.html">Theming buttons</a></li>
+	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
 </div><!-- /page -->

 </body>
--- a/docs/buttons/buttons-types.html
+++ b/docs/buttons/buttons-types.html
@ -1,28 +1,43 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Lists</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Button types</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+<div data-role="page" class="type-interior">

-	<div data-role="header">
-		<h1>Button markup options</h1>
+	<div data-role="header" data-theme="f">
+		<h1>Button basics</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
-	
-	<p>Buttons that are used for navigation should be coded as anchor links, and those that submit forms as <code>button</code> elements &mdash; each will be styled identically by the framework.</p>
+		<div class="content-primary">
+		
+		 <h2>Button basics</h2>		
+		
+         <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+				<li><a href="buttons-types.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+				<li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
+				<li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+				<li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
+			</ul>	
+			
+			
+   <p>Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device.  Use anchor links (<code>a</code> elements) to mark up navigation buttons, and <code>input</code> or <code>button</code> elements for form submission.</p>
 	
 		<h2>Styling links as buttons</h2>

-		<p>In the main content block of a page, you can style any anchor link as a button by adding the <code>data-role="button"</code> to the link. The framework will add all necessary classes to style the link as a button. For example, this markup: </p>
+		<p>In the main content block of a page, you can style any anchor link as a button by adding the <code>data-role="button"</code> attribute. The framework will enhance the link with markup and classes to style the link as a button. For example, this markup: </p>

 <code>
 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Link button&lt;/a&gt;
@ -31,27 +46,57 @@
 		<p>Produces this <strong>link-based</strong> button:</p>
 		<a href="index.html" data-role="button">Link button</a>
 		
+		<p>Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the <code>button</code> plugin and only just use the underlying <code>buttonMarkup</code> plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.</p>
+		
 		<h2>Form buttons</h2>
-		<p>For ease of styling, the framework automatically converts any <code>button</code> element or <code>input</code> with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> into a custom styled link-based button &mdash; there is no need to add the <code>data-role="button"</code> attribute. </p>
-		<p>The original form-based button is hidden, but remains in the markup.  When a click event fires on a link button, it triggers a click on the original form button.</p>
+		<p>For ease of styling, the framework automatically converts any <code>button</code> or <code>input</code> element with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> into a custom styled button &mdash; there is no need to add the <code> data-role="button"</code> attribute. However, if needed, you can directly call the button plugin on any selector, just like any jQuery plugin:</p>

+<code>
+$('[type='submit']').button();
+</code>
+
+		<p>To preserve events bound to the original <code>button</code> or <code>input</code>, the framework hides the original element by making it transparent and positioning it over the new button markup.  When a user clicks on the the custom-styled button, they're actually clicking on the original element. To prevent a form button from being converted into an enhanced button, add the <code>data-role="none"</code> attribute and hte native control will be rendered.</p>

 		<p><strong>Button</strong> based button:</p>
 		<button>Button element</button>
 		
 		<p><strong>Input type="button"</strong> based button:</p>
-		<input type="button" value="Input type=button" />
+		<input type="button" value="buttonBtn" />
 		
 		<p><strong>Input type="submit"</strong> based button:</p>
-		<input type="submit" value="Input type=submit" />
+		<input type="submit" value="submitBtn" />
 		
 		<p><strong>Input type="reset"</strong> based button:</p>
-		<input type="reset" value="Input type=reset" />
+		<input type="reset" value="resetBtn" />
 		
 		<p><strong>Input type="image"</strong> based button:</p>
-		<input type="image" value="Input type=image" />
+		<input type="image" value="imageBtn" />
 		
-	</div><!-- /content -->
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">				
+					<li data-role="list-divider">Buttons</li>
+					<li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
+					<li><a href="buttons-icons.html">Button icons</a></li>
+					<li><a href="buttons-inline.html">Inline buttons</a></li>
+					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
+					<li><a href="buttons-themes.html">Theming buttons</a></li>	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
 </div><!-- /page -->

 </body>
--- a/docs/buttons/index.html
+++ b/docs/buttons/index.html
@ -1,34 +1,41 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
 	<title>jQuery Mobile Docs - Buttons</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page" data-theme="b">
+<div data-role="page" class="type-index">

-	<div data-role="header" data-theme="b">
+	<div data-role="header" data-theme="f">
 		<h1>Buttons</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
-		<p>Buttons are core widgets in jQuery Mobile, and are used within a wide range of other plugins.</p>
-		
-		<ul data-role="listview" data-inset="true">
-			<li><a href="buttons-types.html">Button markup options</a></li>
-			<li><a href="buttons-icons.html">Button icons</a></li>
-			<li><a href="buttons-inline.html">Inline buttons</a></li>
-			<li><a href="buttons-grouped.html">Grouped buttons</a></li>
-			<li><a href="buttons-themes.html">Theming buttons</a></li>
-			<!--<li><a href="api-buttons.html">API documentation</a></li>-->
-		</ul>
-	</div><!-- /ui-body wrapper -->	
-</div><!-- /page -->
+			<p>Buttons are core widgets in jQuery Mobile, and are used within a wide range of other plugins.</p>

-</body>
-</html>
+			<ul data-role="listview" data-inset="true">
+					<li><a href="buttons-types.html">Button basics</a></li>
+					<li><a href="buttons-icons.html">Button icons</a></li>
+					<li><a href="buttons-inline.html">Inline buttons</a></li>
+					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
+					<li><a href="buttons-themes.html">Theming buttons</a></li>
+			</ul>
+		</div>
+	</div><!-- /content -->
+
+
+
+	</div><!-- /page -->
+
+	</body>
+	</html>
--- a/docs/config/dialogTransition.html
+++ b/docs/config/dialogTransition.html
@ -0,0 +1,40 @@
+<!DOCTYPE html> 
+<html> 
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Configuration</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script>
+	$(document).bind("mobileinit", function(){
+	  $.mobile.defaultDialogTransition = 'flip';
+	});
+	</script>
+	
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head> 
+<body> 
+
+	<div data-role="page" class="type-index">
+
+		<div data-role="header" data-theme="f">
+		<h1>Config applied</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		
+		<h2>defaultDialogTransition is now "flip"</h2>
+		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+		<a href="../pages/dialog.html" data-role="button" data-rel="dialog">Or open a basic dialog</a>
+
+		</div><!-- /ui-body wrapper -->	
+</div><!-- /page -->
+
+</body>
+</html>
--- a/docs/config/iOSFullscreen.html
+++ b/docs/config/iOSFullscreen.html
@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black">
+	<link rel="apple-touch-icon" href="../_assets/images/ios_icon.png"/>
+	<link rel="apple-touch-startup-image" href="../_assets/images/ios_startup.png" />
+	<title>jQuery Mobile Docs - Configuration</title>
+	<link rel="stylesheet"  href="../../css/themes/default/" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script>
+	$(document).bind("mobileinit", function() {
+		if (!!window.navigator.standalone) {
+			$.mobile.page.prototype.options.addBackBtn = true;
+		}
+	});
+	</script>
+
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head>
+<body>
+
+	<div data-role="page" class="type-index">
+
+		<div data-role="header" data-theme="f">
+		<h1>jQuery Mobile</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div>
+
+	<div data-role="content">
+
+		<h2>Fullscreen docs in iOS</h2>
+		<p>First, hit Add to Home Screen to create a new shortcut icon on the home screen.  Next, open the new shortcut and hit the button below to browse the docs as a fullscreen web app.</p>
+		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+	</div>
+</div><!-- /page -->
+
+</body>
+</html>
--- a/docs/config/index.html
+++ b/docs/config/index.html
@ -0,0 +1,90 @@
+<!DOCTYPE html> 
+<html> 
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Configuration</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head> 
+<body> 
+
+	<div data-role="page" class="type-index">
+
+		<div data-role="header" data-theme="f">
+		<h1>Pages</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+				<h2>Global config tests</h2>
+				<p>The following links will cause a full page refresh so that the global options configuration can take effect. Each link below will tweak a different option for quick testing.</p>
+
+			
+		<ul data-role="listview" data-inset="true">
+			<li>
+				<a href="pushState.html" data-ajax="false">
+				<h3>pushStateEnabled - False</h3>
+				<p>Enhancement to use history.replaceState in supported browsers, to convert the hash-based Ajax URL into the full document path. </p>
+				</a>
+			</li>
+			<li>
+				<a href="touchOverflow.html" data-ajax="false">
+				<h3>touchOverflowEnabled - True</h3>
+				<p>Enable smoother page transitions and true fixed toolbars in devices that support both the overflow: and overflow-scrolling: touch; CSS properties.</p>
+				</a>
+			</li>
+			<li>
+				<a href="pageTransition.html" data-ajax="false">
+				<h3>defaultPageTransition - Fade</h3>
+				<p>Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.</p>
+				</a>
+			</li>
+			<li>
+				<a href="dialogTransition.html" data-ajax="false">
+				<h3>defaultDialogTransition - Flip</h3>
+				<p>Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions by default.</p>
+				</a>
+			</li>
+			<li>
+				<a href="minScrollBack.html" data-ajax="false">
+				<h3>minScrollBack - 999</h3>
+				<p>Minimum scroll distance that will be remembered when returning to a page.</p>
+				</a>
+			</li>
+			<li>
+				<a href="loadingMessage.html" data-ajax="false">
+				<h3>loadingMessage - false</h3>
+				<p>Set the text that appears when a page is loading. If set to false, the message will not appear at all.</p>
+				</a>
+			</li>
+			<li>
+				<a href="pageLoadErrorMessage.html" data-ajax="false">
+				<h3>pageLoadErrorMessage - "Yikes, we broke the internet!"</h3>
+				<p>Set the text that appears when a page fails to load through Ajax.</p>
+				</a>
+			</li>
+			<li>
+				<a href="iOSFullscreen.html" data-ajax="false">
+				<h3>apple-mobile-web-app-capable meta tag</h3>
+				<p>View the docs without browser chrome in iOS.</p>
+				</a>
+			</li>
+			<li>
+				<a href="jq17b1.html" data-ajax="false">
+				<h3>jQuery core version 1.7 Beta 1</h3>
+				<p>Test the docs with the latest jQuery core version</p>
+				</a>
+			</li>
+		</ul>
+		
+
+		</div><!-- /ui-body wrapper -->	
+</div><!-- /page -->
+
+</body>
+</html>
--- a/docs/config/jq17b1.html
+++ b/docs/config/jq17b1.html
@ -0,0 +1,34 @@
+<!DOCTYPE html> 
+<html> 
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Configuration</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="http://code.jquery.com/jquery-1.7b1.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head> 
+<body> 
+
+	<div data-role="page" class="type-index">
+
+		<div data-role="header" data-theme="f">
+		<h1>jQuery version</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		
+		<h2>jQuery core version 1.7 Beta 1</h2>
+		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+
+		</div><!-- /ui-body wrapper -->	
+</div><!-- /page -->
+
+</body>
+</html>
--- a/docs/config/loadingMessage.html
+++ b/docs/config/loadingMessage.html
@ -0,0 +1,40 @@
+<!DOCTYPE html> 
+<html> 
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Configuration</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script>
+	$(document).bind("mobileinit", function(){
+	  $.mobile.loadingMessage = false;
+	});
+	</script>
+	
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head> 
+<body> 
+
+	<div data-role="page" class="type-index">
+
+		<div data-role="header" data-theme="f">
+		<h1>Config applied</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		
+		<h2>loadingMessage is now disabled</h2>
+		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+
+		</div><!-- /ui-body wrapper -->	
+</div><!-- /page -->
+
+</body>
+</html>
--- a/docs/config/minScrollBack.html
+++ b/docs/config/minScrollBack.html
@ -0,0 +1,40 @@
+<!DOCTYPE html> 
+<html> 
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Configuration</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script>
+	$(document).bind("mobileinit", function(){
+	  $.mobile.minScrollBack = 999;
+	});
+	</script>
+	
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head> 
+<body> 
+
+	<div data-role="page" class="type-index">
+
+		<div data-role="header" data-theme="f">
+		<h1>Config applied</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		
+		<h2>minScrollBack is now set to 999 (disabled)</h2>
+		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+
+		</div><!-- /ui-body wrapper -->	
+</div><!-- /page -->
+
+</body>
+</html>
--- a/docs/config/pageLoadErrorMessage.html
+++ b/docs/config/pageLoadErrorMessage.html
@ -0,0 +1,41 @@
+<!DOCTYPE html> 
+<html> 
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Configuration</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script>
+	$(document).bind("mobileinit", function(){
+	  $.mobile.pageLoadErrorMessage = 'Yikes, we broke the internet!';
+	});
+	</script>
+	
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head> 
+<body> 
+
+	<div data-role="page" class="type-index">
+
+		<div data-role="header" data-theme="f">
+		<h1>Config applied</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		
+		<h2>pageLoadErrorMessage is now "Yikes, we broke the internet!"</h2>
+		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+		<a href="broken.html" data-role="button" data-rel="dialog">Or try this broken link</a>
+
+
+		</div><!-- /ui-body wrapper -->	
+</div><!-- /page -->
+
+</body>
+</html>
--- a/docs/config/pageTransition.html
+++ b/docs/config/pageTransition.html
@ -0,0 +1,40 @@
+<!DOCTYPE html> 
+<html> 
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Configuration</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script><!-- Moving the docs JS up here because it was overriding with my override -->
+	
+	<script>
+	$(document).bind("mobileinit", function(){
+	  $.mobile.defaultPageTransition = 'fade';
+	});
+	</script>
+	
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../../js/"></script>
+</head> 
+<body> 
+
+	<div data-role="page" class="type-index">
+
+		<div data-role="header" data-theme="f">
+		<h1>Config applied</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		
+		<h2>defaultPageTransition is now "fade"</h2>
+		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+		</div><!-- /ui-body wrapper -->	
+</div><!-- /page -->
+
+</body>
+</html>
--- a/docs/config/pushState.html
+++ b/docs/config/pushState.html
@ -0,0 +1,40 @@
+<!DOCTYPE html> 
+<html> 
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Configuration</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script>
+	$(document).bind("mobileinit", function(){
+	  $.mobile.pushStateEnabled = false;
+	});
+	</script>
+	
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head> 
+<body> 
+
+	<div data-role="page" class="type-index">
+
+		<div data-role="header" data-theme="f">
+		<h1>Config applied</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		
+		<h2>pushStateEnabled is now disabled</h2>
+		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+
+		</div><!-- /ui-body wrapper -->	
+</div><!-- /page -->
+
+</body>
+</html>
--- a/docs/config/touchOverflow.html
+++ b/docs/config/touchOverflow.html
@ -0,0 +1,40 @@
+<!DOCTYPE html> 
+<html> 
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Configuration</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script>
+	$(document).bind("mobileinit", function(){
+	  $.mobile.touchOverflowEnabled = true;
+	});
+	</script>
+	
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head> 
+<body> 
+
+	<div data-role="page" class="type-index">
+
+		<div data-role="header" data-theme="f">
+		<h1>Config applied</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		
+		<h2>touchOverflowEnabled is now active</h2>
+		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+
+		</div><!-- /ui-body wrapper -->	
+</div><!-- /page -->
+
+</body>
+</html>
--- a/docs/content/api-content.html
+++ b/docs/content/api-content.html
@ -1,16 +1,20 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
 	<title>jQuery Mobile Docs - Content formatting</title> 
-	<link rel="stylesheet"  href="../../themes/default" /> 
-	<script type="text/javascript" src="../../js/"></script>
+	<link rel="stylesheet"  href="../../css/themes/default/" /> 
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+	<div data-role="page" class="type-interior">

-	<div data-role="header">
+		<div data-role="header" data-theme="f">
 		<h1>Content formatting API</h1>
 	</div><!-- /header -->

--- a/docs/content/content-collapsible-set.html
+++ b/docs/content/content-collapsible-set.html
@ -0,0 +1,151 @@
+<!DOCTYPE html> 
+<html> 
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Collapsible Content</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head> 
+<body> 
+
+	<div data-role="page" class="type-interior">
+
+		<div data-role="header" data-theme="f">
+		<h1>Collapsible sets (Accordions)</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		<div class="content-primary">
+		
+		<h2>Collapsible set markup</h2>
+		<p>Collapsible sets start with the exact same markup as <a href="content-collapsible.html">individual collapsibles</a>. By adding a parent wrapper with a <code> data-role="collapsible-set"</code> attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.</p>
+		<p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code> data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>
+
+	<pre><code>		
+<strong>&lt;div data-role="collapsible-set"&gt;</strong>
+
+	&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;false&quot;</strong>&gt;
+	&lt;h3&gt;Section 1&lt;/h3&gt;
+	&lt;p&gt;I&#x27;m the collapsible set content for section B.&lt;/p&gt;
+	&lt;/div&gt;
+	
+	&lt;div data-role=&quot;collapsible&quot;&gt;
+	&lt;h3&gt;Section 2&lt;/h3&gt;
+	&lt;p&gt;I&#x27;m the collapsible set content for section B.&lt;/p&gt;
+	&lt;/div&gt;
+	
+<strong>&lt;/div&gt;</strong>
+	</code></pre>	
+	
+
+		<p>Here is an example of a collapsible set with 5 sections.</p>
+		
+		<div data-role="collapsible-set">
+			<div data-role="collapsible" data-collapsed="false">
+				<h3>Section 1</h3>
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the <code>data-collapsed="false"</code> attribute.</p>
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 2</h3>
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 3</h3>
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 4</h3>
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 5</h3>
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+			</div>
+		</div>
+
+		<h2>Theming collapsible content</h2>
+		<p>The standard <code>data-theme</code> attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the <code>data-content-theme</code> attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.</p>
+
+
+<pre><code>		
+&lt;div data-role=&quot;collapsible-set&quot; <strong>data-theme=&quot;c&quot; data-content-theme=&quot;d&quot;</strong>&gt;
+</code></pre>	
+
+
+		<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
+			<div data-role="collapsible">
+				<h3>Section 1</h3>
+				<p>Collapsible content</p>
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 2</h3>
+				<p>Collapsible content</p>
+
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 3</h3>
+				<p>Collapsible content</p>
+			</div>
+		</div>
+
+
+		<h2>Theming individual sections</h2>
+		<p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>
+
+		<div data-role="collapsible-set" data-content-theme="c">
+			<div data-role="collapsible" data-theme="b" data-content-theme="b">
+				<h3>Section header, swatch B</h3>
+				<p>Collapsible content, swatch B</p>
+
+			</div>
+			<div data-role="collapsible" data-theme="a" data-content-theme="a">
+				<h3>Section header, swatch A</h3>
+				<p>Collapsible content, swatch A</p>
+			</div>
+			<div data-role="collapsible" data-theme="e" data-content-theme="d">
+				<h3>Section header, swatch E</h3>
+				<p>Collapsible content, swatch D</p>
+			</div>
+		</div>
+		
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">Content Formatting</li>
+					<li><a href="content-html.html">Basic HTML styles</a></li>
+					<li><a href="content-grids.html">Layout grids (columns)</a></li>
+					<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+					<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+					<li><a href="content-themes.html">Theming content</a></li>
+	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
+</div><!-- /page -->
+
+</body>
+</html>
--- a/docs/content/content-collapsible.html
+++ b/docs/content/content-collapsible.html
@ -1,138 +1,194 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Content formatting</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Collapsible Content</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-	
-
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+	<div data-role="page" class="type-interior">

-	<div data-role="header">
+		<div data-role="header" data-theme="f">
 		<h1>Collapsible content</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
+		<div class="content-primary">
 		
 		<h2>Collapsible content markup</h2>
-		<p>To create a collapsible blocks of content, create a container and add the <code>data-role="collapsible"</code> attribute.</p>
-		
+		<p>To create a collapsible block of content, create a container and add the <code> data-role="collapsible"</code> attribute.</p>
+
+		<p>Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible.</p>
+
 		<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
 	
 		<p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>
-
-	<pre><code>		
-	&lt;div data-role=&quot;collapsible&quot;&gt;
-	&lt;h3&gt;I&#x27;m a header&lt;/h3&gt;
-	&lt;p&gt;I&#x27;m the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.&lt;/p&gt;
-	&lt;/div&gt;
-	</code></pre>	
+		
+		<p>By default, the content will be collapsed.</p>
+<pre><code>		
+&lt;div <strong>data-role=&quot;collapsible&quot;</strong>&gt;
+   &lt;h3&gt;I&#x27;m a header&lt;/h3&gt;
+   &lt;p&gt;I&#x27;m the collapsible content. By default I'm closed, but you can click the header to open me.&lt;/p&gt;
+&lt;/div&gt;
+</code></pre>	
 	

 			<div data-role="collapsible">
 				<h3>I'm a header</h3>
-				<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
+				<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
 			</div>

-
-		<p>As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the <code>data-collapsed="true"</code> attribute to the wrapper.</p>
+	<h2>Expanding collapsibles on load</h2>
+			
+		<p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>

 	<code>		
-	&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;true&quot;&gt;</strong>
+	&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;false&quot;&gt;</strong>
 	</code>

 		<p>This code will create a collapsible widget like this:</p>
 	

-			<div data-role="collapsible" data-collapsed="true">
+			<div data-role="collapsible" data-collapsed="false">
 				<h3>I'm a header</h3>
-				<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+				<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
 			</div>
 	
-		<p>Collapsible content is minimally styled &mdash; we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>
-
-		<h2>Collapsible example</h2>
-		<p>This page has 4 collapsible containers with different types of content inside.</p>
-		
-		<div data-role="collapsible" data-collapsed="true">
-			<h3>Section 1: Collapsed text block</h3>
-			<p>I'm closed when the page loads because I have the <code>data-collapsed="true"</code> attribute on my container. </p>
-			<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. </p>
-		</div><!-- /section 1 -->
-		
-		<div data-role="collapsible">
-			<h3>Section 2: Expanded on load</h3>
-			<p>I'm open when the page loads because I don't have the <code>data-collapsed="true"</code> attribute on my container. </p>
-			<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.</p>
-		</div><!-- /section 2 -->
-		
-		<div data-role="collapsible" data-collapsed="true">
-			<h3>Section 3: Form elements</h3>
-			<form action="#" method="get">
-				<div data-role="fieldcontain">
-					<label for="textarea">Textarea:</label>
-					<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
-				</div>
-				<div data-role="fieldcontain">
-					<label for="slider">Input slider:</label>
-				 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
-				</div>
-				<fieldset class="ui-grid-a">
-						<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
-						<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
-			    </fieldset>
-			</form>
-		</div><!-- /section 3 -->
+	<h2>Theming collapsible content</h2>
 	
-		<div data-role="collapsible" data-collapsed="true">
-			<h3>Section 4: Collapsed list</h3>
-			<ul data-role="listview" data-inset="true" data-theme="d">
-				<li><a href="index.html">Acura</a></li>
-				<li><a href="index.html">Audi</a></li>
-				<li><a href="index.html">BMW</a></li>
-				<li><a href="index.html">Cadillac</a></li>
-				<li><a href="index.html">Chrysler</a></li>
-				<li><a href="index.html">Dodge</a></li>
-				<li><a href="index.html">Ferrari</a></li>
-				<li><a href="index.html">Ford</a></li>
-			</ul>
-		</div><!-- /section 4 -->
+		
+		<p>Collapsible content is minimally styled &mdash; we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>
+		
+		<p>To provide a stronger visual connection between the collapsible header and content, add the <code>data-content-theme</code> attribute to the wrapper and specify a theme swatch letter. This will apply the swatch's border and <em>flat</em> background color (not the gradient) to the content block and changes the corner rounding to square off the bottom of the header and round the bottom of the content block instead to visually group these elements.</p>
+		
+<pre><code>		
+&lt;div data-role=&quot;collapsible&quot; <strong>data-content-theme=&quot;c&quot;</strong>&gt;
+   &lt;h3&gt;Header swatch A&lt;/h3&gt;
+   &lt;p&gt;I&#x27;m the collapsible content with a themed content block set to "C".&lt;/p&gt;
+&lt;/div&gt;
+</code></pre>
+		
+		<div data-role="collapsible" data-content-theme="c">
+			<h3>Header swatch</h3>
+			<p>I'm the collapsible content with a themed content block set to "C".</p>
+		</div>
+		
+		<h2>Theming collapsible headers</h2>
+		<p>To set the theme on a collapsible header button, add the <code>data-theme</code> attribute to the wrapper and specify a swatch letter. Note that you can mix and match swatch letters between the header and content with these theme attributes.</p>
+
+<pre><code>		
+&lt;div data-role=&quot;collapsible&quot; <strong>data-theme=&quot;a&quot; data-content-theme=&quot;a&quot;</strong>&gt;
+   &lt;h3&gt;Header swatch A&lt;/h3&gt;
+   &lt;p&gt;I&#x27;m the collapsible content with a themed content block set to "A".&lt;/p&gt;
+&lt;/div&gt;
+</code></pre>
+		
+		<div data-role="collapsible" data-theme="a" data-content-theme="a">
+			<h3>Header swatch A</h3>
+			<p>I'm the collapsible content with a themed content block set to "A".</p>
+		</div>
+
+
+		
+		<div data-role="collapsible" data-theme="b" data-content-theme="d">
+			<h3>Header swatch B</h3>
+			<p>I'm the collapsible content with a themed content block set to "D".</p>
+		</div>
+
+		
 		
 		<h2>Nested Collapsibles</h2>
-		<div data-role="collapsible">
+		
+		<p>Collapsibles can be nested inside each other if needed. In this example, we're setting the content theme to provide clearer visual connection between the levels.</p>
+		<div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
 			<h3>I'm a header</h3>
 			<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
-			<div data-role="collapsible">
-				<h3>I'm a nested collapsible header</h3>
-				<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
-			</div>
+			
+			<div data-role="collapsible" data-theme="c" data-content-theme="c">
+				<h3>I'm a nested collapsible with a child collapsible</h3>
+				<p>I'm a child collapsible.</p>
+					<div data-role="collapsible" data-theme="d" data-content-theme="d">
+						<h3>Nested inside again.</h3>
+						<p>Three levels deep now.</p>
+					</div><!-- /section 1A -->
+			</div><!-- /section 1 -->
+
+			
+			<div data-role="collapsible" data-content-theme="c">
+				<h3>Section 3: Form elements</h3>
+				<form action="#" method="get">
+					<div data-role="fieldcontain">
+						<label for="textarea">Textarea:</label>
+						<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+					</div>
+					<div data-role="fieldcontain">
+						<label for="slider">Input slider:</label>
+					 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
+					</div>
+					<fieldset class="ui-grid-a">
+							<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
+							<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
+				    </fieldset>
+				</form>
+			</div><!-- /section 2 -->
+
+			<div data-role="collapsible" data-content-theme="c">
+				<h3>Section 4: Collapsed list</h3>
+				<p>Here is an inset list:</p>
+				<ul data-role="listview" data-inset="true" data-theme="d">
+					<li><a href="index.html">Acura</a></li>
+					<li><a href="index.html">Audi</a></li>
+					<li><a href="index.html">BMW</a></li>
+					<li><a href="index.html">Cadillac</a></li>
+					<li><a href="index.html">Chrysler</a></li>
+					<li><a href="index.html">Dodge</a></li>
+					<li><a href="index.html">Ferrari</a></li>
+					<li><a href="index.html">Ford</a></li>
+				</ul>
+			</div><!-- /section 3 -->
 		</div>
 		
-		<h2>Collapsible sets</h2>
-		<p>By giving a parent element a data-role of collapsible-set, you can cause other collapsibles within that parent to close whenever a new one is opened, acting like an accordion widget:</p>
 		
-		<div data-role="collapsible-set">
-			<div data-role="collapsible">
-				<h3>I'm a header in a set of collapsibles</h3>
-				<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-			</div>
-			<div data-role="collapsible" data-collapsed="true">
-				<h3>I'm a header in a set of collapsibles</h3>
-				<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-			</div>
-			<div data-role="collapsible" data-collapsed="true">
-				<h3>I'm a header in a set of collapsibles</h3>
-				<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-			</div>
-		</div>
 		
+		<h2>Collapsible sets (accordions)</h2>
+		<p>It's possible to combine multiple collapsibles into a grouped sets that acts like an accordion widget. <a href="content-collapsible-set.html">Learn more</a></p>
+		
+		
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">Content Formatting</li>
+					<li><a href="content-html.html">Basic HTML styles</a></li>
+					<li><a href="content-grids.html">Layout grids (columns)</a></li>
+					<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
+					<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+					<li><a href="content-themes.html">Theming content</a></li>
+	
+				</ul>
+		</div>
+	</div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
 	
-	</div><!-- /content -->
 </div><!-- /page -->

 </body>
--- a/docs/content/content-grids.html
+++ b/docs/content/content-grids.html
@ -1,30 +1,43 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Content formatting</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Content Grids</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
-	
-
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+	<div data-role="page" class="type-interior">

-	<div data-role="header">
+		<div data-role="header" data-theme="f">
 		<h1>Layout grids</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
+		<div class="content-primary">
 		
 		<p>Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example). </p>
 		
 		<p>The jQuery Mobile framework provides a simple way to build CSS-based columns through a  block style class convention called <code>ui-grid</code>. </p>
-		<p>There are two preset configurations layouts &mdash; two-column (using the <code>class</code> of <code>ui-grid-a</code>), and three-column (using the <code>class</code> of <code>ui-grid-b</code>) &mdash; that can be used in any situation that requires columns. Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them.</p>
 		
+		<p>There are four preset configurations layouts  that can be used in any situation that requires columns:</p>
+			<ul>
+				<li><strong>two</strong>-column (using the <code>ui-grid-a</code> class)</li>
+				<li><strong>three</strong>-column (using the <code>ui-grid-b</code> class)</li>
+				<li><strong>four</strong>-column (using the <code>ui-grid-c</code> class)</li>
+				<li><strong>five</strong>-column (using the <code>ui-grid-d</code> class)</li>
+			</ul>
+			
+			<p>Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them. </p>
+			<p>Within the grid container, child elements are assigned <code>ui-block-a/b/c/d</code> in a sequential manner which makes each "block" element float side-by-side, forming the grid. The <code>ui-block-a</code> class essentially clears the floats which will start a new line (see multiple row grids, below).</p>
+			
 		<h2>Two column grids</h2>
 		<p>To build a two-column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code>, and add two child containers inside it classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second:</p>

@ -44,7 +57,7 @@
 			<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
 		</div><!-- /grid-a -->
 		
-		<p>As you see above, by default grid blocks have no styles for appearance; they simply present content side-by-side.</p>
+		<p>As you see above, by default grid blocks have no visual styling; they simply present content side-by-side.</p>
 		
 		<p>Grid classes can be applied to any container. In this next example, we add <code>ui-grid-a</code> to a <code>fieldset</code>, and apply the <code>ui-block</code> classes to the two buttons inside to stretch them each to 50% of the screen width:</p>

@ -61,7 +74,7 @@
 	    </fieldset>
 	    
 	    
-	    <p>And, grid blocks can adopt presentation styles from the <a href="../themes/index.html">theming system</a> &mdash; by adding a height and color swatch reference to the grid blocks, we can achieve this style appearance:</p>
+	    <p>Theme classes (not data-theme attributes) from the <a href="../api/themes.html">theming system</a> can be added to an element, including grids. On the blocks below, we're adding two classes: <code>ui-bar</code> to add the default bar padding and <code>ui-bar-e</code> to apply the background gradient and font styling for the "e" toolbar theme swatch. For illustration purposes, an inline <code>style="height:120px"</code> attribute is also added to each grid to set each to a standard height. </p>
 			
 		<div class="ui-grid-a">
 			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
@ -69,14 +82,14 @@
 		</div><!-- /grid-a -->

 		<h2>Three-column grids</h2>
-		<p>The other grid layout configuration uses <code>class=ui-grid-b</code> on the parent, and 3 child container elements, each with its respective <code>ui-block-a/b/c</code> class, to create a three-column layout (33/33/33%).</p>
+		<p>The other grid layout configuration uses <code>class=ui-grid-b</code> on the parent, and 3 child container elements, each with its respective <code>ui-block-a/b/c</code> class, to create a three-column layout (33/33/33%). Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
 	
 <pre><code>
 &lt;div class=&quot;ui-grid-b&quot;&gt;
 	&lt;div class=&quot;ui-block-a&quot;&gt;Block A&lt;/div&gt;
 	&lt;div class=&quot;ui-block-b&quot;&gt;Block B&lt;/div&gt;
 	&lt;div class=&quot;ui-block-c&quot;&gt;Block C&lt;/div&gt;
-&lt;/div&gt;&lt;!-- /grid-a --&gt;
+&lt;/div&gt;&lt;!-- /grid-b --&gt;
 </code></pre>
 		
 		<p>This will produce a 33/33/33% grid for our content.</p>
@ -97,7 +110,7 @@
 		
 		<h2>Four-column grids</h2>
 		
-		<p>A four-column, 25/25/25/25% grid is created by specifying <code>class=ui-grid-c</code> on the parent and adding a fourth block.</p>
+		<p>A four-column, 25/25/25/25% grid is created by specifying <code>class=ui-grid-c</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
 			
 		<div class="ui-grid-c">
 			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
@ -107,7 +120,7 @@
 		</div><!-- /grid-c -->
 		
 		<h2>Five-column grids</h2>
-		<p>A five-column, 20/20/20/20/20% grid is created by specifying <code>class=ui-grid-d</code> on the parent and adding a fourth block.</p>
+		<p>A five-column, 20/20/20/20/20% grid is created by specifying <code>class=ui-grid-d</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
 			
 		<div class="ui-grid-d">
 			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
@ -133,7 +146,45 @@
 			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
 		</div><!-- /grid-c -->
 		
-	</div><!-- /content -->
+		
+		<h2>Grids in toolbars</h2>
+		<p>Grids are helpful for creating layouts within a toolbar. Here's a footer with a 3 column grid.</p>
+		<!--  NOTE: Inline styles are for demo purposes only, please use external styles -->
+		<div data-role="footer" data-theme="a" class="ui-bar ui-grid-c">
+				<div class="ui-block-a"><h3 style="margin-top:10px;">Settings</h3></div>
+				<div class="ui-block-b"><label for="value" style="margin:8px 10px 0 0; text-align:right;">Price</label> </div>
+				<div class="ui-block-c"><input id="value" value="5,000"></div>	 
+				<div class="ui-block-d"><div style="margin:6px 0 0 10px;"><button type="submit" data-theme="b">Update</button></div></div>  
+	    </div><!-- /footer -->
+	
+	
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+						<li data-role="list-divider">Content Formatting</li>
+						<li><a href="content-html.html">Basic HTML styles</a></li>
+						<li data-theme="a"><a href="content-grids.html">Layout grids (columns)</a></li>
+						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+						<li><a href="content-themes.html">Theming content</a></li>
+	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
 </div><!-- /page -->

 </body>
--- a/docs/content/content-html.html
+++ b/docs/content/content-html.html
@ -1,26 +1,28 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Content formatting</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - HTML formatting</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
-	
-
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+	<div data-role="page" class="type-interior">

-	<div data-role="header">
+		<div data-role="header" data-theme="f">
 		<h1>HTML Formatting</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
-
-		<style type="text/css">
+		<div class="content-primary">
+		<style>
 			table { width:100%; }
 			table caption { text-align:left;  }
 			table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
@ -30,7 +32,7 @@
 		
 	
 		
-		<p>The default approach to styling content in jQuery Mobile is simple: Use a light hand.  Our goal is to let the browser's native rendering take precedence; we add a bit of padding for more comfortable readability, and use the <a href="../themes/index.html">theming system</a>  to apply the font family and colors. </p>
+		<p>The default approach to styling content in jQuery Mobile is simple: Use a light hand.  Our goal is to let the browser's native rendering take precedence; we add a bit of padding for more comfortable readability, and use the <a href="../api/themes.html">theming system</a>  to apply the font family and colors. </p>
 		<p>Taking a light hand with content styling gives designers and developers a clean slate to work with, instead of fighting against a lot of complex style overhead.</p>
 		
 		<h2>Default HTML markup styling</h2>
@ -42,7 +44,7 @@
 		<h3>H3 Heading</h3>
 		<h4>H4 Heading</h4>
 		<h5>H5 Heading</h5>
-		<h6>H1 Heading</h6>
+		<h6>H6 Heading</h6>
 		
 		<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
 		
@ -58,11 +60,11 @@
 			<li>Unordered list item 1</li>
 		</ul>
 		
-		<ul>
+		<ol>
 			<li>Ordered list item 1</li>
 			<li>Ordered list item 1</li>
 			<li>Ordered list item 1</li>
-		</ul>
+		</ol>
 		
 		<dl title="Definition list">
 			<dt>Definition term</dt>
@ -107,7 +109,33 @@
 		</table>
 	
 	
-	</div><!-- /content -->
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+						<li data-role="list-divider">Content Formatting</li>
+						<li data-theme="a"><a href="content-html.html">Basic HTML styles</a></li>
+						<li><a href="content-grids.html">Layout grids (columns)</a></li>
+						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+						<li><a href="content-themes.html">Theming content</a></li>
+	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
 </div><!-- /page -->

 </body>
--- a/docs/content/content-themes.html
+++ b/docs/content/content-themes.html
@ -1,35 +1,40 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Content formatting</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Content Themes</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+	<div data-role="page" class="type-interior">

-	<div data-role="header">
+		<div data-role="header" data-theme="f">
 		<h1>Theming content</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
-			
-			
+			<div class="content-primary">
 		<h2>Theming the content area</h2>
-		<p>The main content area of a page (container with the <code>data-role="content"</code> attribute) should be themed by adding the <code>data-theme</code> attribute to the <code>data-role="page"</code> container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add to the <code>data-theme</code> to the content container, the background color will stop after the content so there may be a gap in color between the content and fixed footer.)</p>
-		
+		<p>The main content area of a page (container with the <code> data-role="content"</code> attribute) should be themed by adding the <code> data-theme</code> attribute to the <code> data-role="page"</code> container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add to the <code> data-theme</code> to the content container, the background color will stop after the content so there may be a gap in color between the content and fixed footer.)</p>
+		<p>Additionally, the content area can be themed to match the theme of the collapsible header using the <code>data-content-theme</code> attribute.</p>
+
 <code>
-&lt;div data-role=&quot;page&quot; <strong>data-theme=&quot;a&quot;</strong>&gt;
-</code>	
+&lt;div data-role=&quot;page&quot; <strong> data-theme=&quot;a&quot;</strong> <strong>data-content-theme=&quot;a&quot;</strong>&gt;
+</code>
+
 		<h2>Theming collapsible blocks</h2>
-		<p>To set the color of the collapsible header, add the <code>data-theme</code> attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.</p>
+		<p>To set the color of the collapsible header, add the <code> data-theme</code> attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.</p>

 <code>		
-&lt;div data-role=&quot;collapsible&quot; data-collapsed=&quot;true&quot; <strong>data-theme=&quot;a&quot;&gt;</strong>
+&lt;div data-role=&quot;collapsible&quot; data-collapsed=&quot;true&quot; <strong> data-theme=&quot;a&quot;&gt;</strong>
 </code>
 		<h2>Themed examples</h2>
 		
@ -38,9 +43,13 @@
 			<h1>H1 Heading</h1>
 			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
 			<div data-role="collapsible" data-collapsed="true" data-theme="a">
-				<h3>I'm an themed collapsible</h3>
-				<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+				<h3>I'm a themed collapsible</h3>
+				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
 			</div><!-- /collapsible -->
+			<div data-role="collapsible" data-theme="a" data-content-theme="a">
+				<h3>I'm a themed collapsible with a themed content</h3>
+				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div>
 		</div><!-- /themed container -->
 		
 		<p><strong>B</strong> theme swatch on content &amp; collapsible</p>
@ -48,9 +57,13 @@
 			<h1>H1 Heading</h1>
 			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
 			<div data-role="collapsible" data-collapsed="true" data-theme="b">
-				<h3>I'm an themed collapsible</h3>
-				<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+				<h3>I'm a themed collapsible</h3>
+				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
 			</div><!-- /collapsible -->
+			<div data-role="collapsible" data-theme="b" data-content-theme="b">
+				<h3>I'm a themed collapsible with a themed content</h3>
+				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div>
 		</div><!-- /themed container -->
 		
 		<p><strong>C</strong> theme swatch on content &amp; collapsible</p>
@ -58,9 +71,13 @@
 			<h1>H1 Heading</h1>
 			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
 			<div data-role="collapsible" data-collapsed="true" data-theme="c">
-				<h3>I'm an themed collapsible</h3>
-				<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+				<h3>I'm a themed collapsible</h3>
+				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
 			</div><!-- /collapsible -->
+			<div data-role="collapsible" data-theme="c" data-content-theme="c">
+				<h3>I'm a themed collapsible with a themed content</h3>
+				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div>
 		</div><!-- /themed container -->
 		
 		<p><strong>D</strong> theme swatch on content &amp; collapsible</p>
@ -68,9 +85,13 @@
 			<h1>H1 Heading</h1>
 			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
 			<div data-role="collapsible" data-collapsed="true" data-theme="d">
-				<h3>I'm an themed collapsible</h3>
-				<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+				<h3>I'm a themed collapsible</h3>
+				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
 			</div><!-- /collapsible -->
+			<div data-role="collapsible" data-theme="d" data-content-theme="d">
+				<h3>I'm a themed collapsible with a themed content</h3>
+				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div>
 		</div><!-- /themed container -->
 		
 		<p><strong>E</strong> theme swatch on content &amp; collapsible</p>
@ -78,16 +99,43 @@
 			<h1>H1 Heading</h1>
 			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
 			<div data-role="collapsible" data-collapsed="true" data-theme="e">
-				<h3>I'm an themed collapsible</h3>
-				<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+				<h3>I'm a themed collapsible</h3>
+				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
 			</div><!-- /collapsible -->
+			<div data-role="collapsible" data-theme="e" data-content-theme="e">
+				<h3>I'm a themed collapsible with a themed content</h3>
+				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+			</div>
 		</div><!-- /themed container -->
 		
 	
-		
+	</div><!--/content-primary -->		
 	
+	<div class="content-secondary">
 		
-	</div><!-- /content -->
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+						<li data-role="list-divider">Content Formatting</li>
+						<li><a href="content-html.html">Basic HTML styles</a></li>
+						<li><a href="content-grids.html">Layout grids (columns)</a></li>
+						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+						<li data-theme="a"><a href="content-themes.html">Theming content</a></li>
+	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
 </div><!-- /page -->

 </body>
--- a/docs/content/index.html
+++ b/docs/content/index.html
@ -1,32 +1,41 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
 	<title>jQuery Mobile Docs - Content formatting</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page" data-theme="b">
+<div data-role="page" class="type-index">

-	<div data-role="header" data-theme="b">
+		<div data-role="header" data-theme="f">
 		<h1>Content formatting</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
+
 		<p>The content of pages in jQuery Mobile is completely open-ended, but the jQuery Mobile framework provides a number of helpful tools and widgets &mdash; such as collapsible panels and multiple-column grid layouts &mdash; to make it easy to format your content for mobile devices.</p>

+		
+
 			
 		<ul data-role="listview" data-inset="true">
 			<li><a href="content-html.html">Basic HTML styles</a></li>
 			<li><a href="content-grids.html">Layout grids (columns)</a></li>
 			<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+			<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
 			<li><a href="content-themes.html">Theming content</a></li>
 			<!--<li><a href="api-content.html">API documentation</a></li>-->
 		</ul>
+
 	</div><!-- /ui-body wrapper -->	
 </div><!-- /page -->

--- a/docs/forms/api-forms.html
+++ b/docs/forms/api-forms.html
@ -1,18 +1,23 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Forms</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Forms API</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+	<div data-role="page" class="type-interior">

-	<div data-role="header">
+		<div data-role="header" data-theme="f">
 		<h1>Form API</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content" data-theme="c">
--- a/docs/forms/checkboxes/events.html
+++ b/docs/forms/checkboxes/events.html
@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Checkboxes</title>
+	<link rel="stylesheet"  href="../../../css/themes/default/" />
+	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+	<script src="../../../js/jquery.js"></script>
+	<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../../_assets/js/jqm-docs.js"></script>
+	<script src="../../../js/"></script>
+</head>
+<body>
+
+	<div data-role="page" class="type-interior">
+
+		<div data-role="header" data-theme="f">
+		<h1>Checkboxes</h1>
+		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		<div class="content-primary">
+
+		<form action="#" method="get">
+
+		<h2>Checkboxes</h2>
+			
+			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
+				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+				<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+			</ul>
+			
+			<p>Bind events directly to the <code>input</code> element.  Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+			<pre><code> 
+$("input[type='checkbox']").bind( "change", function(event, ui) {
+  ...
+});
+</code></pre>
+			
+			<p>The checkbox plugin has the following custom events:</p>
+
+	<dl>
+				
+		<dt><code>create</code> triggered when a checkbox is created</dt>
+		<dd>
+			
+			<pre><code>
+$("input[type='checkbox']").checkboxradio({
+   create: function(event, ui) { ... }
+});		
+			</code></pre>
+		</dd>
+		
+
+	</dl>
+	    
+	</form>
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">Form elements</li>
+					<li><a href="../docs-forms.html">Form basics</a></li>
+					<li><a href="../forms-all.html">Form element gallery</a></li>
+					<li><a href="../textinputs/index.html">Text inputs</a></li>
+					<li><a href="../search/">Search input</a></li>
+					<li><a href="../slider/">Slider</a></li>
+					<li><a href="../switch/">Flip toggle switch</a></li>
+					<li><a href="../radiobuttons/">Radio buttons</a></li>
+					<li data-theme="a"><a href="index.html">Checkboxes</a></li>
+					<li><a href="../selects/">Select menus</a></li>
+					<li><a href="../forms-themes.html">Theming forms</a></li>
+					<li><a href="../forms-all-native.html">Native form elements</a></li>
+					<li><a href="../forms-sample.html">Submitting forms</a></li>
+					
+	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
+</div><!-- /page -->
+
+</body>
+</html>
+
--- a/docs/forms/checkboxes/index.html
+++ b/docs/forms/checkboxes/index.html
@ -1,44 +1,69 @@
 <!DOCTYPE html> 
 <html> 
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Forms</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
-	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Checkboxes</title> 
+	<link rel="stylesheet"  href="../../../css/themes/default/" />  
+	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+	<script src="../../../js/jquery.js"></script>
+	<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../../_assets/js/jqm-docs.js"></script>
+	<script src="../../../js/"></script>
 </head> 
 <body> 

-<div data-role="page">
+	<div data-role="page" class="type-interior">

-	<div data-role="header">
+		<div data-role="header" data-theme="f">
 		<h1>Checkboxes</h1>
+		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
+		<div class="content-primary">
 		
 		<form action="#" method="get">

 		<h2>Checkboxes</h2>
+
+    <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+      <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+      <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+      <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+      <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+    </ul>
+
 		<p>Checkboxes are used to provide a list of options where more than one can be selected. Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
 		
 		<p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. </p>

 		<p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated.</p>
 		
-		<p>Because checkboxes use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question. Add the  <code>data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
+		<pre><code>	
+&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; id=&quot;checkbox-0&quot; class=&quot;custom&quot; /&gt;
+&lt;label for=&quot;checkbox-0&quot;&gt;I agree&lt;/label&gt;
+		</code></pre>
 		
-		<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code>data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
+		<p>This will produce a basic checkbox. The default styles will set the width of the element to 100% of the parent container.</p>
+					
+		<input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" />
+		<label for="checkbox-0">I agree</label>
+					
+
+			
+		<p>Because checkboxes use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question. Add the  <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
+		
+		<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>


 <pre><code>	
 &lt;div data-role=&quot;fieldcontain&quot;&gt;
- 	&lt;fieldset data-role=&quot;controlgroup&quot;&gt;
-		&lt;legend&gt;Agree to the terms:&lt;/legend&gt;
-		&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; id=&quot;checkbox-1&quot; class=&quot;custom&quot; /&gt;
-		&lt;label for=&quot;checkbox-1&quot;&gt;I agree&lt;/label&gt;
-    &lt;/fieldset&gt;
+    <strong>&lt;fieldset data-role=&quot;controlgroup&quot;&gt;
+	   &lt;legend&gt;Agree to the terms:&lt;/legend&gt;</strong>
+	   &lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; id=&quot;checkbox-1&quot; class=&quot;custom&quot; /&gt;
+	   &lt;label for=&quot;checkbox-1&quot;&gt;I agree&lt;/label&gt;
+    <strong>&lt;/fieldset&gt;</strong>
 &lt;/div&gt;
 </code></pre>

@ -52,7 +77,7 @@
 		
 		<h2>Vertically grouped checkboxes</h2>
 		
-		<p>Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code>data-role="controlgroup"</code> attribute on the fie.</p>
+		<p>Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the fie.</p>

 			<div  data-role="fieldcontain">
 			 	<fieldset data-role="controlgroup">
@ -76,7 +101,7 @@
 		<p>Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>

 <code>
-&lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-type=&quot;horizontal&quot;</strong> data-role=&quot;fieldcontain&quot;&gt;
+&lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-type=&quot;horizontal&quot;</strong>&gt;
 </code>

 			<p>The framework will float the labels so they sit side-by-side on a line, hide the checkbox icons and only round the left and right edges of the group.</p>
@ -96,10 +121,46 @@
 		</div>


+
+
 	</form>
 	
-	</div><!-- /content -->
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">Form elements</li>
+					<li><a href="../docs-forms.html">Form basics</a></li>
+					<li><a href="../forms-all.html">Form element gallery</a></li>
+					<li><a href="../textinputs/index.html">Text inputs</a></li>
+					<li><a href="../search/">Search input</a></li>
+					<li><a href="../slider/">Slider</a></li>
+					<li><a href="../switch/">Flip toggle switch</a></li>
+					<li><a href="../radiobuttons/">Radio buttons</a></li>
+					<li data-theme="a"><a href="index.html">Checkboxes</a></li>
+					<li><a href="../selects/">Select menus</a></li>
+					<li><a href="../forms-themes.html">Theming forms</a></li>
+					<li><a href="../forms-all-native.html">Native form elements</a></li>
+					<li><a href="../forms-sample.html">Submitting forms</a></li>
+					
+	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
 </div><!-- /page -->

 </body>
-</html>
+</html>
--- a/docs/forms/checkboxes/methods.html
+++ b/docs/forms/checkboxes/methods.html
@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Checkboxes</title>
+	<link rel="stylesheet"  href="../../../css/themes/default/" />
+	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+	<script src="../../../js/jquery.js"></script>
+	<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../../_assets/js/jqm-docs.js"></script>
+	<script src="../../../js/"></script>
+</head>
+<body>
+
+	<div data-role="page" class="type-interior">
+
+		<div data-role="header" data-theme="f">
+		<h1>Checkboxes</h1>
+		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		<div class="content-primary">
+
+		<form action="#" method="get">
+
+		<h2>Checkboxes</h2>
+			
+			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
+				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+				<li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+			</ul>
+			
+			<p>The checkbox has the following methods:</p>
+
+		<dl>
+			
+			<dt><code>enable</code> enable a disabled checkbox</dt>
+			<dd>
+				<pre><code>
+ $("input[type='checkbox']").checkboxradio('enable');
+				</code></pre>
+			</dd>
+			
+			<dt><code>disable</code> disable a select.</dt>
+			<dd>
+				<pre><code>
+$("input[type='checkbox']").checkboxradio('disable');
+				</code></pre>
+			</dd>
+			
+			<dt><code>refresh</code> update the custom select</dt>
+			<dd>
+      If you manipulate a checkbox via JavaScript, you must call the refresh method on it to update the visual styling.
+				<pre><code>
+$("input[type='checkbox']:first").attr("checked",true).checkboxradio("refresh");
+				</code></pre>
+			</dd>
+			
+		</dl>	
+    
+	</form>
+	</div><!--/content-primary -->
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">Form elements</li>
+					<li><a href="../docs-forms.html">Form basics</a></li>
+					<li><a href="../forms-all.html">Form element gallery</a></li>
+					<li><a href="../textinputs/index.html">Text inputs</a></li>
+					<li><a href="../search/">Search input</a></li>
+					<li><a href="../slider/">Slider</a></li>
+					<li><a href="../switch/">Flip toggle switch</a></li>
+					<li><a href="../radiobuttons/">Radio buttons</a></li>
+					<li data-theme="a"><a href="index.html">Checkboxes</a></li>
+					<li><a href="../selects/">Select menus</a></li>
+					<li><a href="../forms-themes.html">Theming forms</a></li>
+					<li><a href="../forms-all-native.html">Native form elements</a></li>
+					<li><a href="../forms-sample.html">Submitting forms</a></li>
+					
+	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
+</div><!-- /page -->
+
+</body>
+</html>
+
--- a/docs/forms/checkboxes/options.html
+++ b/docs/forms/checkboxes/options.html
@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Checkboxes</title>
+	<link rel="stylesheet"  href="../../../css/themes/default/" />
+	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+	<script src="../../../js/jquery.js"></script>
+	<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../../_assets/js/jqm-docs.js"></script>
+	<script src="../../../js/"></script>
+</head>
+<body>
+
+	<div data-role="page" class="type-interior">
+
+		<div data-role="header" data-theme="f">
+		<h1>Checkboxes</h1>
+		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		<div class="content-primary">
+
+		<form action="#" method="get">
+
+		<h2>Checkboxes</h2>
+			
+			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
+				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+				<li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+			</ul>
+			
+			<p>The checkbox has the following options:</p>
+
+		<dl>
+			
+			<dt><code>theme</code> <em>string</em></dt>
+			<dd>
+				<p class="default">default: null, inherited from parent</p>
+				<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code></p>		
+				<pre><code>$("input[type='checkbox']").checkboxradio(<strong>{ theme: "a" }</strong>);</code></pre>
+			</dd>
+			
+		</dl>	
+    
+	</form>
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">Form elements</li>
+					<li><a href="../docs-forms.html">Form basics</a></li>
+					<li><a href="../forms-all.html">Form element gallery</a></li>
+					<li><a href="../textinputs/index.html">Text inputs</a></li>
+					<li><a href="../search/">Search input</a></li>
+					<li><a href="../slider/">Slider</a></li>
+					<li><a href="../switch/">Flip toggle switch</a></li>
+					<li><a href="../radiobuttons/">Radio buttons</a></li>
+					<li data-theme="a"><a href="index.html">Checkboxes</a></li>
+					<li><a href="../selects/">Select menus</a></li>
+					<li><a href="../forms-themes.html">Theming forms</a></li>
+					<li><a href="../forms-all-native.html">Native form elements</a></li>
+					<li><a href="../forms-sample.html">Submitting forms</a></li>
+					
+	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
+</div><!-- /page -->
+
+</body>
+</html>
+
--- a/docs/forms/docs-forms.html
+++ b/docs/forms/docs-forms.html
@ -1,29 +1,33 @@
-<!DOCTYPE html> 
-<html> 
+<!DOCTYPE html>
+<html>
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Forms</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Forms</title>
+	<link rel="stylesheet"  href="../../css/themes/default/" />
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
-</head> 
-<body> 
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head>
+<body>

-<div data-role="page">
+	<div data-role="page" class="type-interior">

-	<div data-role="header" data-theme="d">
+		<div data-role="header" data-theme="f">
 		<h1>Forms</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

 	<div data-role="content">
-			
+		<div class="content-primary">
 			<p>jQuery Mobile provides a complete set of finger-friendly form elements that are based on native HTML form elements.</p>
-			
+
 			<h2>Form structure</h2>
-			
+
 			<p>All forms should be wrapped in a <code>form</code> tag that has an <code>action</code> and <code>method</code> that will handle the form data processing on the server.</p>
-			
+
 <code>
 &lt;form action=&quot;form.php&quot; method=&quot;post&quot;&gt;
 ...
@ -31,50 +35,204 @@
 </code>


-<h2>Markup Conventions</h2>
+<h2>Markup conventions</h2>
 <p>When constructing forms to be used in jQuery Mobile, most of the standard guidelines used to create forms that submit via normal HTTP post or get still apply. However, one thing to keep in mind is that the <code>id</code> attributes of form controls need to be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time, so you must be careful to use unique <code>id</code> attributes so there will be only one of each in the DOM (and of course, be sure to pair them properly with <code>label</code> elements via the <code>for</code> attribute).</p>

-	<h2>Auto-initialization of form elements</h2>
-	<p>By default, jQuery Mobile will automatically enhance certain native form controls into rich touch-friendly components. This is handled internally by finding form elements by tag name and running a plugin method on them, so for instance, a <code>select</code> element will be found and initialized with the "selectmenu" plugin, while an <code>input</code> element with a <code>type="checkbox"</code> will be enhanced with the "checkboxradio" plugin. Once initialized, you can address these enhanced components programmatically through their jQuery UI widget API methods (see documentation on available methods here: <a href="plugin-eventsmethods.html">Form Plugin Methods</a>). </p>
+	<h2>Hiding labels accessibly</h2>
+	<p>For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful <code>label</code>. To hide labels in a way that leaves them visible to assistive technologies—for example, when letting an element’s <code>placeholder</code> attribute serve as a label—apply the helper class <code>ui-hidden-accessible</code> to the label itself:</p>
+<code>
+<pre>
+&lt;label for="username" <strong>class="ui-hidden-accessible"</strong>>Username:&lt;/label&gt;
+&lt;input type="text" name="username" id="username" value="" placeholder="Username"/&gt;
+</pre>
+</code>
+
+	<p>To hide labels within a field container and adjust the layout accordingly, add the class <code>ui-hide-label</code> to the field container as in the following:</p>
+
+<code>
+<pre>
+&lt;div data-role="fieldcontain" <strong>class="ui-hide-label"</strong>&gt;
+	&lt;label for="username">Username:&lt;/label&gt;
+	&lt;input type="text" name="username" id="username" value="" placeholder="Username"/&gt;
+&lt;/div&gt;
+</pre>
+</code>
+
+	<p>Both of the above examples will render as:</p>
+	<div data-role="fieldcontain" class="ui-hide-label">
+		<label for="username">Username:</label>
+		<input type="text" name="username" id="username" value="" placeholder="Username" />
+	</div>
+
+	<p>While the label will no longer be visible, it will be available to assisitive technologies such as screen readers.</p>
+
+
+	<h2>Disabling form elements</h2>
+	<p>All jQuery Mobile widgets can be disabled in the markup by adding the standard <code>disabled</code> attribute to the element, just like you would with native controls. Each form widget also has standard <code>disable</code> and <code>enable</code> methods that are documented with each form widget. Here are a few examples of disabled widgets. Note that you can disable form buttons, but not links with a role of button because links don't have a parallel disabled feature in HTML. If you need to disable a link-based button, it's possible to apply the same disabled class <code>ui-disabled</code> with JavaScript to the enhanced button markup generated to achieve this effect. </p>
 	
+	<div data-role="fieldcontain">
+     <label for="foo">Text Input:</label>
+     <input type="text" name="name" id="foo" value="" disabled />
+	</div>
+	
+	<div data-role="fieldcontain">
+	<fieldset data-role="controlgroup">
+    	<legend>Gender:</legend>
+         	<input type="radio" name="gender" id="radio-female" value="f" disabled />
+         	<label for="radio-female">Female</label>
+
+         	<input type="radio" name="gender" id="radio-male" value="m" disabled  />
+         	<label for="radio-male">Male</label>
+    </fieldset>
+    </div>
+
+	<div data-role="fieldcontain">
+	<label for="flip-s">Server status:</label>
+	<select name="slider" id="flip-s" data-role="slider" disabled >
+		<option value="off">Off</option>
+		<option value="on">On</option>
+	</select>
+    </div>    
+
+	<div data-role="fieldcontain">
+		<label for="select-choice-x" class="select">Shipping:</label>
+		<select name="select-shipper" id="select-choice-x" disabled>
+			<option></option>
+			<option value="standard">Standard</option>
+			<option value="rush">Rush</option>
+			<option value="express">Express</option>
+			<option value="overnight">Overnight</option>
+		</select>
+	</div> 
+	
+	<p>Note that you can disable buttons created from <code>button</code> or <code>input</code>-based markup, but not links with a role of button. Links don't have a parallel disabled feature in HTML, but if you need to disable a link-based button (or any element), it's possible to apply the disabled class <code>ui-disabled</code> yourself with JavaScript to achieve the same effect. </p>
+	
+		<h2>Field containers</h2>
+		<p>To improve the styling to labels and form elements on wider screens, we recommend wrapping a <code>div</code> or <code>fieldset </code>with the <code> data-role="fieldcontain"</code> attribute around each label/form element. This framework aligns the input and associated label side-by-side, and breaks to stacked block-level elements below ~480px. The framework will also add a thin bottom border to act as a field separator.</p>
+
+		<p>For example:</p>
+<pre><code>
+&lt;div data-role=&quot;fieldcontain&quot;&gt;
+&lt;label for="name">Text Input:&lt;/label&gt;
+&lt;input type="text" name="name" id="name" value="" /&gt;
+&lt;/div&gt;
+</code></pre>
+
+		<p>Will render as:</p>
+
+		<div data-role="fieldcontain">
+ 			<label for="name">Text Input:</label>
+ 			<input type="text" name="name" id="name" value=""  />
+		</div>
+
+		<p>For additional examples, see the <a href="forms-all.html">form elements gallery</a></p>
+		
+		
+	<h2>Auto-initialization of form elements</h2>
+	<p>By default, jQuery Mobile will automatically enhance certain native form controls into rich touch-friendly components. This is handled internally by finding form elements by tag name and running a plugin method on them, so for instance, a <code>select</code> element will be found and initialized with the "selectmenu" plugin, while an <code>input</code> element with a <code>type="checkbox"</code> will be enhanced with the "checkboxradio" plugin. Once initialized, you can address these enhanced components programmatically through their jQuery UI widget API methods - see options, methods and events listed on each form plugin's documentation page for details. </p>
+
+	<h2>Initializing groups of dynamically-injected form elements</h2> 
+	<p>If you should generate new markup client-side or load in content via AJAX and inject it into a page, you can trigger the <code>create</code> event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (see below).</p> 
+
+	<p>For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:</p>
+
+	<code>
+	$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
+	</code>
+
+	<h2>Refreshing form elements</h2>
+
+    <p>In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom controls (selects, sliders) built from, and kept in sync with, the native control. To programmatically update a form control with JavaScript, first manipulate the native control, then use the <code>refresh</code> method to tell the enhanced control to update itself to match the new state. Here are some examples of how to update common form controls, then call the <code>refresh</code> method:</p>
+	<h4>Checkboxes:</h4>
+
+<code>
+$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
+</code>
+
+<h4>Radios:</h4>
+<code>
+$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
+</code>
+
+<h4>Selects:</h4>
+<code><pre>
+var myselect = $("select#foo");
+myselect[0].selectedIndex = 3;
+myselect.selectmenu("refresh");
+</pre></code>
+
+<h4>Sliders:</h4>
+<code>
+$("input[type=range]").val(60).slider("refresh");
+</code>
+
+<h4>Flip switches (they use slider):</h4>
+
+<code><pre>
+var myswitch = $("select#bar");
+myswitch[0].selectedIndex = 1;
+myswitch.slider("refresh");
+</pre></code>
+
 	<h2>Preventing auto-initialization of form elements</h2>
-	<p>If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute <code>data-role="none"</code>. For example:</p>
-	<pre><code>				
+	<p>If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute <code> data-role="none"</code>. For example:</p>
+	<pre><code>
 &lt;label for=&quot;foo&quot;&gt;
-&lt;select name=&quot;foo&quot; id=&quot;foo&quot; <strong>data-role=&quot;none&quot;</strong>&gt;
+&lt;select name=&quot;foo&quot; id=&quot;foo&quot; <strong> data-role=&quot;none&quot;</strong>&gt;
 	&lt;option value="a" &gt;A&lt;/option&gt;
 	&lt;option value="b" &gt;B&lt;/option&gt;
 	&lt;option value="c" &gt;C&lt;/option&gt;
 &lt;/select&gt;
 </code></pre>
-	
-	
-	<p>Or, if you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's <code>keepNative</code> option (which defaults to <code>"[data-role="none"]</code>. Be sure to configure this option inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
+
+
+	<p>Or, if you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's <code>keepNative</code> option (which defaults to <code>[data-role="none"]</code>. Be sure to configure this option inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
 		<pre><code>
 $(document).bind('mobileinit',function(){
 	<strong>$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";</strong>
-});	
+});
 		</pre></code>
+
+<p>One special case is that of selects. The above sample will prevent any and all augmentation from taking place on select elements in the page if <code>select</code> is included. If you wish to retain the native performance, look/feel of the menu itself and benefit from the visual augmentation of the select button by jQuery Mobile you can set $.mobile.nativeSelectMenu to true in a <code>mobileinit</code> callback as a global setting or use <code>data-native="true"</code> on a case by case basis.</p>
+
+		
+
+	</div><!--/content-primary -->		
 	
-			<h2>Dynamic form layout</h2>
-
-			<p>In jQuery Mobile, all form elements are designed to be a flexible width so they will comfortably fit the width of any mobile device. One optimization built into the framework is that we present labels and form elements differently based on screen width. </p>
-			<p>If a page is fairly narrow (~480px), the labels are styled as block-level elements so they will stack on top of the form element to save horizontal space.</p> 
-			<p>On wider screens, the labels and form elements are styled to be on the same line in a 2-column layout to take advantage of the screen real estate.</p>
-
-			<h2>Field containers</h2>
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 			
-			<p>To improve the styling to labels and form elements on wider screens, we recommend wrapping a <code>div</code> or <code>fieldset </code>with the <code>data-role="fieldcontain"</code> attribute around each label/form element. The framework will add a thin vertical bottom border on this container to act as a field separator and visually align the label and form elements for quick scanning.</p>
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">Form elements</li>
+					<li data-theme="a"><a href="docs-forms.html">Form basics</a></li>
+					<li><a href="forms-all.html">Form element gallery</a></li>
+					<li><a href="textinputs/">Text inputs</a></li>
+					<li><a href="search/">Search inputs</a></li>
+					<li><a href="slider/">Slider</a></li>
+					<li><a href="switch/">Flip toggle switch</a></li>
+					<li><a href="radiobuttons/">Radio buttons</a></li>
+					<li><a href="checkboxes/">Checkboxes</a></li>
+					<li><a href="selects/">Select menus</a></li>
+					<li><a href="forms-themes.html">Theming forms</a></li>
+					<li><a href="forms-all-native.html">Native form elements</a></li>
+					<li><a href="forms-sample.html">Submitting forms</a></li>
+					
+	
+				</ul>
+		</div>
+	</div>		

-<pre><code>				
-&lt;div data-role=&quot;fieldcontain&quot;&gt;
-	...label/input code goes here...
-&lt;/div&gt;
-</code></pre>
-			
-			
-	</div><!-- /content -->
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
 </div><!-- /page -->

 </body>
-</html>
+</html>
--- a/docs/forms/forms-all-native.html
+++ b/docs/forms/forms-all-native.html
@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Native Form Controls</title>
+	<link rel="stylesheet"  href="../../css/themes/default/" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head>
+<body>
+
+	<div data-role="page" class="type-interior">
+
+		<div data-role="header" data-theme="f">
+		<h1>Forms</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		<div class="content-primary">
+
+		<form action="#" method="get">
+
+			<h2>Native form elements &amp; buttons</h2>
+
+			<p>Although the framework automatically enhances form elements and buttons into <a href="forms-all.html">touch input optimized controls</a> to streamline development, it's easy to tell jQuery Mobile to leave these elements alone so the standard, native control can be used instead.</p>
+			<p>Adding the <code>data-role="none"</code> attribute to any form or button element tells the framework to not apply any enhanced styles or scripting. The examples below all have this attribute in place to demonstrate the effect. You may need to write custom styles to lay out your form controls because we try to leave all the default styling intact.</p>
+
+			<div data-role="fieldcontain">
+	         <label for="name">Text Input:</label>
+	         <input type="text" name="name" id="name" value="" data-role="none" />
+			</div>
+
+			<div data-role="fieldcontain">
+			<label for="textarea">Textarea:</label>
+			<textarea cols="40" rows="8" name="textarea" id="textarea" data-role="none"></textarea>
+			</div>
+
+			<div data-role="fieldcontain">
+	         <label for="search">Search Input:</label>
+	         <input type="search" name="password" id="search" value="" data-role="none" />
+			</div>
+
+			<div data-role="fieldcontain">
+				<label for="slider2">Flip switch:</label>
+				<select name="slider2" id="slider2" data-role="none">
+					<option value="off">Off</option>
+					<option value="on">On</option>
+				</select>
+			</div>
+
+			<div data-role="fieldcontain">
+				<label for="slider">Slider:</label>
+			 	<input type="range" name="slider" id="slider" value="0" min="0" max="100" data-role="none" />
+			</div>
+
+			<div data-role="fieldcontain">
+			<fieldset data-role="controlgroup">
+				<legend>Choose as many snacks as you'd like:</legend>
+				<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" data-role="none" />
+				<label for="checkbox-1a">Cheetos</label>
+
+				<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" data-role="none" />
+				<label for="checkbox-2a">Doritos</label>
+
+				<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" data-role="none" />
+				<label for="checkbox-3a">Fritos</label>
+
+				<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" data-role="none" />
+				<label for="checkbox-4a">Sun Chips</label>
+		    </fieldset>
+			</div>
+
+			<div data-role="fieldcontain">
+			<fieldset data-role="controlgroup" data-type="horizontal">
+		    	<legend>Font styling:</legend>
+		    	<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" data-role="none" />
+				<label for="checkbox-6">b</label>
+
+				<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" data-role="none" />
+				<label for="checkbox-7"><em>i</em></label>
+
+				<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" data-role="none" />
+				<label for="checkbox-8">u</label>
+		    </fieldset>
+			</div>
+
+			<div data-role="fieldcontain">
+			    <fieldset data-role="controlgroup">
+			    	<legend>Choose a pet:</legend>
+			         	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" data-role="none" />
+			         	<label for="radio-choice-1">Cat</label>
+
+			         	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" data-role="none" />
+			         	<label for="radio-choice-2">Dog</label>
+
+			         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" data-role="none" />
+			         	<label for="radio-choice-3">Hamster</label>
+
+			         	<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" data-role="none" />
+			         	<label for="radio-choice-4">Lizard</label>
+			    </fieldset>
+			</div>
+
+			<div data-role="fieldcontain">
+			    <fieldset data-role="controlgroup" data-type="horizontal">
+			     	<legend>Layout view:</legend>
+			         	<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" data-role="none" />
+			         	<label for="radio-choice-c">List</label>
+			         	<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" data-role="none" />
+			         	<label for="radio-choice-d">Grid</label>
+			         	<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" data-role="none" />
+			         	<label for="radio-choice-e">Gallery</label>
+			    </fieldset>
+			</div>
+
+			<div data-role="fieldcontain">
+				<label for="select-choice-1" class="select">Choose shipping method:</label>
+				<select name="select-choice-1" id="select-choice-1" data-role="none">
+					<option value="standard">Standard: 7 day</option>
+					<option value="rush">Rush: 3 days</option>
+					<option value="express">Express: next day</option>
+					<option value="overnight">Overnight</option>
+				</select>
+			</div>
+
+			<div data-role="fieldcontain">
+				<label for="select-choice-3" class="select">Your state:</label>
+				<select name="select-choice-3" id="select-choice-3" data-role="none">
+					<option>Choose...</option>
+					<option value="AL">Alabama</option>
+					<option value="AK">Alaska</option>
+					<option value="AZ">Arizona</option>
+					<option value="AR">Arkansas</option>
+					<option value="CA">California</option>
+					<option value="CO">Colorado</option>
+					<option value="CT">Connecticut</option>
+					<option value="DE">Delaware</option>
+					<option value="FL">Florida</option>
+					<option value="GA">Georgia</option>
+					<option value="HI">Hawaii</option>
+					<option value="ID">Idaho</option>
+					<option value="IL">Illinois</option>
+					<option value="IN">Indiana</option>
+					<option value="IA">Iowa</option>
+					<option value="KS">Kansas</option>
+					<option value="KY">Kentucky</option>
+					<option value="LA">Louisiana</option>
+					<option value="ME">Maine</option>
+					<option value="MD">Maryland</option>
+					<option value="MA">Massachusetts</option>
+					<option value="MI">Michigan</option>
+					<option value="MN">Minnesota</option>
+					<option value="MS">Mississippi</option>
+					<option value="MO">Missouri</option>
+					<option value="MT">Montana</option>
+					<option value="NE">Nebraska</option>
+					<option value="NV">Nevada</option>
+					<option value="NH">New Hampshire</option>
+					<option value="NJ">New Jersey</option>
+					<option value="NM">New Mexico</option>
+					<option value="NY">New York</option>
+					<option value="NC">North Carolina</option>
+					<option value="ND">North Dakota</option>
+					<option value="OH">Ohio</option>
+					<option value="OK">Oklahoma</option>
+					<option value="OR">Oregon</option>
+					<option value="PA">Pennsylvania</option>
+					<option value="RI">Rhode Island</option>
+					<option value="SC">South Carolina</option>
+					<option value="SD">South Dakota</option>
+					<option value="TN">Tennessee</option>
+					<option value="TX">Texas</option>
+					<option value="UT">Utah</option>
+					<option value="VT">Vermont</option>
+					<option value="VA">Virginia</option>
+					<option value="WA">Washington</option>
+					<option value="WV">West Virginia</option>
+					<option value="WI">Wisconsin</option>
+					<option value="WY">Wyoming</option>
+				</select>
+			</div>
+
+				
+
+
+			<p><strong>Button</strong> based button:</p>
+			<button data-role="none">Button element</button>
+
+			<p><strong>Input type="button"</strong> based button:</p>
+			<input type="button" value="Input type=button" data-role="none" />
+
+			<p><strong>Input type="submit"</strong> based button:</p>
+			<input type="submit" value="Input type=submit" data-role="none" />
+
+			<p><strong>Input type="reset"</strong> based button:</p>
+			<input type="reset" value="Input type=reset" data-role="none" />
+
+			<p><strong>Input type="image"</strong> based button:</p>
+			<input type="image" src="../_assets/images/jquery-logo.png" style="width:120px; padding:5px; background:#fff; border:1px solid #999;" value="Input type=image" data-role="none" />
+
+	</form>
+
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">Form elements</li>
+					<li><a href="docs-forms.html">Form basics</a></li>
+					<li><a href="forms-all.html">Form element gallery</a></li>
+					<li><a href="textinputs/">Text inputs</a></li>
+					<li><a href="search/">Search inputs</a></li>
+					<li><a href="slider/">Slider</a></li>
+					<li><a href="switch/">Flip toggle switch</a></li>
+					<li><a href="radiobuttons/">Radio buttons</a></li>
+					<li><a href="checkboxes/">Checkboxes</a></li>
+					<li><a href="selects/">Select menus</a></li>
+					<li><a href="forms-themes.html">Theming forms</a></li>
+					<li data-theme="a"><a href="forms-all-native.html">Native form elements</a></li>
+					<li><a href="forms-sample.html">Submitting forms</a></li>
+					
+	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
+	
+</div><!-- /page -->
+
+</body>
+</html>
+
--- a/docs/forms/forms-all.html
+++ b/docs/forms/forms-all.html
@ -1,58 +1,64 @@
-<!DOCTYPE html> 
-<html> 
+<!DOCTYPE html>
+<html>
 	<head>
-	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Forms</title> 
-	<link rel="stylesheet"  href="../../themes/default" />  
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Gallery of Form Controls</title>
+	<link rel="stylesheet"  href="../../css/themes/default/" />
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-</head> 
-<body> 
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head>
+<body>

-<div data-role="page" data-theme="c">
+	<div data-role="page" class="type-interior">

-	<div data-role="header">
+		<div data-role="header" data-theme="f">
 		<h1>Forms</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div><!-- /header -->

-	<div data-role="content" data-theme="c">
-		
+	<div data-role="content">
+		<div class="content-primary">
+
 		<form action="#" method="get">
-			
+
 			<h2>Form elements</h2>

 			<p>This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. </p>
-			
+
 			<p>Browsers that don't support the custom controls will still deliver a usable experience, because all are based on native form elements.</p>

 			<div data-role="fieldcontain">
 	         <label for="name">Text Input:</label>
 	         <input type="text" name="name" id="name" value=""  />
 			</div>
-			 
+
 			<div data-role="fieldcontain">
 			<label for="textarea">Textarea:</label>
 			<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
 			</div>
-		
+
 			<div data-role="fieldcontain">
 	         <label for="search">Search Input:</label>
 	         <input type="search" name="password" id="search" value=""  />
 			</div>
-			
+
 			<div data-role="fieldcontain">
 				<label for="slider2">Flip switch:</label>
 				<select name="slider2" id="slider2" data-role="slider">
 					<option value="off">Off</option>
 					<option value="on">On</option>
-				</select> 
+				</select>
 			</div>
-			
+
 			<div data-role="fieldcontain">
 				<label for="slider">Slider:</label>
 			 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
 			</div>
-			
+
 			<div data-role="fieldcontain">
 			<fieldset data-role="controlgroup">
 				<legend>Choose as many snacks as you'd like:</legend>
@ -61,7 +67,7 @@

 				<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
 				<label for="checkbox-2a">Doritos</label>
-				
+
 				<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
 				<label for="checkbox-3a">Fritos</label>

@ -69,7 +75,7 @@
 				<label for="checkbox-4a">Sun Chips</label>
 		    </fieldset>
 			</div>
-			
+
 			<div data-role="fieldcontain">
 			<fieldset data-role="controlgroup" data-type="horizontal">
 		    	<legend>Font styling:</legend>
@ -80,10 +86,10 @@
 				<label for="checkbox-7"><em>i</em></label>

 				<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
-				<label for="checkbox-8">u</label>    
+				<label for="checkbox-8">u</label>
 		    </fieldset>
 			</div>
-		
+
 			<div data-role="fieldcontain">
 			    <fieldset data-role="controlgroup">
 			    	<legend>Choose a pet:</legend>
@ -94,13 +100,13 @@
 			         	<label for="radio-choice-2">Dog</label>

 			         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
-			         	<label for="radio-choice-3">Hampster</label>
+			         	<label for="radio-choice-3">Hamster</label>

 			         	<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
 			         	<label for="radio-choice-4">Lizard</label>
 			    </fieldset>
 			</div>
-			
+
 			<div data-role="fieldcontain">
 			    <fieldset data-role="controlgroup" data-type="horizontal">
 			     	<legend>Layout view:</legend>
@ -112,7 +118,7 @@
 			         	<label for="radio-choice-e">Gallery</label>
 			    </fieldset>
 			</div>
-		
+
 			<div data-role="fieldcontain">
 				<label for="select-choice-1" class="select">Choose shipping method:</label>
 				<select name="select-choice-1" id="select-choice-1">
@ -122,7 +128,7 @@
 					<option value="overnight">Overnight</option>
 				</select>
 			</div>
-			
+
 			<div data-role="fieldcontain">
 				<label for="select-choice-3" class="select">Your state:</label>
 				<select name="select-choice-3" id="select-choice-3">
@ -179,17 +185,60 @@
 				</select>
 			</div>

+			<div data-role="fieldcontain">
+				<label for="select-choice-a" class="select">Choose shipping method:</label>
+				<select name="select-choice-a" id="select-choice-a" data-native-menu="false">
+					<option>Custom menu example</option>
+					<option value="standard">Standard: 7 day</option>
+					<option value="rush">Rush: 3 days</option>
+					<option value="express">Express: next day</option>
+					<option value="overnight">Overnight</option>
+				</select>
+			</div>

 		<div class="ui-body ui-body-b">
 		<fieldset class="ui-grid-a">
 				<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
-				<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>	   
+				<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
 	    </fieldset>
 		</div>
 	</form>
+	</div><!--/content-primary -->		
+	
+	<div class="content-secondary">
+		
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+			
+				<h3>More in this section</h3>
+				
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+				
+					<li data-role="list-divider">Form elements</li>
+					<li><a href="docs-forms.html">Form basics</a></li>
+					<li data-theme="a"><a href="forms-all.html">Form element gallery</a></li>
+					<li><a href="textinputs/">Text inputs</a></li>
+					<li><a href="search/">Search inputs</a></li>
+					<li><a href="slider/">Slider</a></li>
+					<li><a href="switch/">Flip toggle switch</a></li>
+					<li><a href="radiobuttons/">Radio buttons</a></li>
+					<li><a href="checkboxes/">Checkboxes</a></li>
+					<li><a href="selects/">Select menus</a></li>
+					<li><a href="forms-themes.html">Theming forms</a></li>
+					<li><a href="forms-all-native.html">Native form elements</a></li>
+					<li><a href="forms-sample.html">Submitting forms</a></li>
+					
+	
+				</ul>
+		</div>
+	</div>		
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011 The jQuery Project</p>
+</div>
 	
-	</div><!-- /content -->
 </div><!-- /page -->

 </body>
-</html>
+</html>
--- a/Show more
+++ b/Show more