Merge pull request #3497 from jakeboone02/global-config-loading-sequence

Fixed remaining loading sequence issues for global config tests

.gitignore

@@ -5,3 +5,9 @@
 .DS_Store
 cache/
 combined/
+combine/
+compiled/
+tmp/
+*.swp
+.gitignore
+tests/speed/stats/stats.db

.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>

GPL-LICENSE.txt

@@ -0,0 +1,278 @@
+        GNU GENERAL PUBLIC LICENSE
+           Version 2, June 1991
+
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc.
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+          Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+License is intended to guarantee your freedom to share and change free
+software--to make sure the software is free for all its users.  This
+General Public License applies to most of the Free Software
+Foundation's software and to any other program whose authors commit to
+using it.  (Some other Free Software Foundation software is covered by
+the GNU Lesser General Public License instead.)  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+this service if you wish), that you receive source code or can get it
+if you want it, that you can change the software or use pieces of it
+in new free programs; and that you know you can do these things.
+
+  To protect your rights, we need to make restrictions that forbid
+anyone to deny you these rights or to ask you to surrender the rights.
+These restrictions translate to certain responsibilities for you if you
+distribute copies of the software, or if you modify it.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must give the recipients all the rights that
+you have.  You must make sure that they, too, receive or can get the
+source code.  And you must show them these terms so they know their
+rights.
+
+  We protect your rights with two steps: (1) copyright the software, and
+(2) offer you this license which gives you legal permission to copy,
+distribute and/or modify the software.
+
+  Also, for each author's protection and ours, we want to make certain
+that everyone understands that there is no warranty for this free
+software.  If the software is modified by someone else and passed on, we
+want its recipients to know that what they have is not the original, so
+that any problems introduced by others will not reflect on the original
+authors' reputations.
+
+  Finally, any free program is threatened constantly by software
+patents.  We wish to avoid the danger that redistributors of a free
+program will individually obtain patent licenses, in effect making the
+program proprietary.  To prevent this, we have made it clear that any
+patent must be licensed for everyone's free use or not licensed at all.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+        GNU GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License applies to any program or other work which contains
+a notice placed by the copyright holder saying it may be distributed
+under the terms of this General Public License.  The "Program", below,
+refers to any such program or work, and a "work based on the Program"
+means either the Program or any derivative work under copyright law:
+that is to say, a work containing the Program or a portion of it,
+either verbatim or with modifications and/or translated into another
+language.  (Hereinafter, translation is included without limitation in
+the term "modification".)  Each licensee is addressed as "you".
+
+Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running the Program is not restricted, and the output from the Program
+is covered only if its contents constitute a work based on the
+Program (independent of having been made by running the Program).
+Whether that is true depends on what the Program does.
+
+  1. You may copy and distribute verbatim copies of the Program's
+source code as you receive it, in any medium, provided that you
+conspicuously and appropriately publish on each copy an appropriate
+copyright notice and disclaimer of warranty; keep intact all the
+notices that refer to this License and to the absence of any warranty;
+and give any other recipients of the Program a copy of this License
+along with the Program.
+
+You may charge a fee for the physical act of transferring a copy, and
+you may at your option offer warranty protection in exchange for a fee.
+
+  2. You may modify your copy or copies of the Program or any portion
+of it, thus forming a work based on the Program, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) You must cause the modified files to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    b) You must cause any work that you distribute or publish, that in
+    whole or in part contains or is derived from the Program or any
+    part thereof, to be licensed as a whole at no charge to all third
+    parties under the terms of this License.
+
+    c) If the modified program normally reads commands interactively
+    when run, you must cause it, when started running for such
+    interactive use in the most ordinary way, to print or display an
+    announcement including an appropriate copyright notice and a
+    notice that there is no warranty (or else, saying that you provide
+    a warranty) and that users may redistribute the program under
+    these conditions, and telling the user how to view a copy of this
+    License.  (Exception: if the Program itself is interactive but
+    does not normally print such an announcement, your work based on
+    the Program is not required to print an announcement.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Program,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Program, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Program.
+
+In addition, mere aggregation of another work not based on the Program
+with the Program (or with a work based on the Program) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may copy and distribute the Program (or a work based on it,
+under Section 2) in object code or executable form under the terms of
+Sections 1 and 2 above provided that you also do one of the following:
+
+    a) Accompany it with the complete corresponding machine-readable
+    source code, which must be distributed under the terms of Sections
+    1 and 2 above on a medium customarily used for software interchange; or,
+
+    b) Accompany it with a written offer, valid for at least three
+    years, to give any third party, for a charge no more than your
+    cost of physically performing source distribution, a complete
+    machine-readable copy of the corresponding source code, to be
+    distributed under the terms of Sections 1 and 2 above on a medium
+    customarily used for software interchange; or,
+
+    c) Accompany it with the information you received as to the offer
+    to distribute corresponding source code.  (This alternative is
+    allowed only for noncommercial distribution and only if you
+    received the program in object code or executable form with such
+    an offer, in accord with Subsection b above.)
+
+The source code for a work means the preferred form of the work for
+making modifications to it.  For an executable work, complete source
+code means all the source code for all modules it contains, plus any
+associated interface definition files, plus the scripts used to
+control compilation and installation of the executable.  However, as a
+special exception, the source code distributed need not include
+anything that is normally distributed (in either source or binary
+form) with the major components (compiler, kernel, and so on) of the
+operating system on which the executable runs, unless that component
+itself accompanies the executable.
+
+If distribution of executable or object code is made by offering
+access to copy from a designated place, then offering equivalent
+access to copy the source code from the same place counts as
+distribution of the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  4. You may not copy, modify, sublicense, or distribute the Program
+except as expressly provided under this License.  Any attempt
+otherwise to copy, modify, sublicense or distribute the Program is
+void, and will automatically terminate your rights under this License.
+However, parties who have received copies, or rights, from you under
+this License will not have their licenses terminated so long as such
+parties remain in full compliance.
+
+  5. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Program or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Program (or any work based on the
+Program), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Program or works based on it.
+
+  6. Each time you redistribute the Program (or any work based on the
+Program), the recipient automatically receives a license from the
+original licensor to copy, distribute or modify the Program subject to
+these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties to
+this License.
+
+  7. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Program at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Program by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Program.
+
+If any portion of this section is held invalid or unenforceable under
+any particular circumstance, the balance of the section is intended to
+apply and the section as a whole is intended to apply in other
+circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system, which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  8. If the distribution and/or use of the Program is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Program under this License
+may add an explicit geographical distribution limitation excluding
+those countries, so that distribution is permitted only in or among
+countries not thus excluded.  In such case, this License incorporates
+the limitation as if written in the body of this License.
+
+  9. The Free Software Foundation may publish revised and/or new versions
+of the General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Program
+specifies a version number of this License which applies to it and "any
+later version", you have the option of following the terms and conditions
+either of that version or of any later version published by the Free
+Software Foundation.  If the Program does not specify a version number of
+this License, you may choose any version ever published by the Free Software
+Foundation.
+
+  10. If you wish to incorporate parts of the Program into other free
+programs whose distribution conditions are different, write to the author
+to ask for permission.  For software which is copyrighted by the Free
+Software Foundation, write to the Free Software Foundation; we sometimes
+make exceptions for this.  Our decision will be guided by the two goals
+of preserving the free status of all derivatives of our free software and
+of promoting the sharing and reuse of software generally.
+
+          NO WARRANTY
+
+  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
+FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
+OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
+PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
+OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
+TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
+PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
+REPAIR OR CORRECTION.
+
+  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
+REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
+OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
+TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
+YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
+PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGES.

LICENSE-INFO.txt

@@ -0,0 +1,9 @@
+/*
+* jQuery Mobile Framework v@VERSION
+* http://jquerymobile.com
+*
+* Copyright 2011 (c) jQuery Project
+* Dual licensed under the MIT or GPL Version 2 licenses.
+* http://jquery.org/license
+*
+*/

MIT-LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright (c) 2011 John Resig, http://jquery.com/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Makefile

@@ -1,105 +1,189 @@
+# Helper Variables
+# The command to replace the @VERSION in the files with the actual version
+VER = sed "s/v@VERSION/$$(git log -1 --format=format:"Git Build: SHA1: %H <> Date: %cd")/"
+VER_MIN = "/*! jQuery Mobile v$$(git log -1 --format=format:"Git Build: SHA1: %H <> Date: %cd") jquerymobile.com | jquery.org/license */"
+VER_OFFICIAL = $(shell cat version.txt)
+SED_VER_API = sed 's/__version__/"${VER_OFFICIAL}"/g'
+deploy: VER = sed "s/v@VERSION/${VER_OFFICIAL}/"
+deploy: VER_MIN = "/*! jQuery Mobile v${VER_OFFICIAL} jquerymobile.com | jquery.org/license */"
 
-VER = $(shell cat version.txt)
-SED_VER = sed "s/@VERSION/${VER}/"
+# The output folder for the finished files
+OUTPUT = compiled
 
-DIR = jquery.mobile-${VER}
-MAX = ${DIR}.js
-MIN = ${DIR}.min.js
-CSS = ${DIR}.css
-CSSMIN = ${DIR}.min.css
+# The name of the files
+NAME = jquery.mobile
+STRUCTURE = jquery.mobile.structure
+deploy: NAME = jquery.mobile-${VER_OFFICIAL}
+deploy: STRUCTURE = jquery.mobile.structure-${VER_OFFICIAL}
 
-FILES = js/jquery.ui.widget.js \
-  js/jquery.mobile.widget.js \
-  js/jquery.mobile.support.js \
-  js/jquery.mobile.event.js \
-  js/jquery.mobile.hashchange.js \
-  js/jquery.mobile.page.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 \
-  js/jquery.mobile.js
+# The CSS theme being used
+THEME = default
 
-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
+RUN_JS = @@java -XX:ReservedCodeCacheSize=64m -classpath build/js.jar:build/google-compiler-20111003.jar org.mozilla.javascript.tools.shell.Main
 
-all: mobile min css cssmin
 
-clean:
-	@@rm -rf ${DIR}*
 
-css:
-	@@head -8 js/jquery.mobile.js | ${SED_VER} > ${CSS}
-	@@cat ${CSSFILES} >> ${CSS}
+# Build Targets
 
-cssmin: css
-	@@head -8 js/jquery.mobile.js | ${SED_VER} > ${CSSMIN}
-	@@java -jar build/yuicompressor-2.4.2.jar --type css ${CSS} >> ${CSSMIN}
+# When no build target is specified, all gets ran
+all: init css js zip notify
 
-mobile:
-	@@head -8 js/jquery.mobile.js | ${SED_VER} > ${MAX}
-	@@cat ${FILES} >> ${MAX}
 
-min: mobile
-	@@head -8 js/jquery.mobile.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}
-	@@rm -f ${MIN}.tmp
+# Build and minify the CSS files
+css: init
+	# Build the CSS file with the theme included
+	${RUN_JS} \
+		external/r.js/dist/r.js \
+		-o cssIn=css/themes/default/jquery.mobile.css \
+		out=${OUTPUT}/${NAME}.compiled.css
+	@@cat LICENSE-INFO.txt | ${VER} > ${OUTPUT}/${NAME}.css
+	@@cat ${OUTPUT}/${NAME}.compiled.css >> ${OUTPUT}/${NAME}.css
+	@@echo ${VER_MIN} > ${OUTPUT}/${NAME}.min.css
+	@@java -XX:ReservedCodeCacheSize=64m \
+		-jar build/yuicompressor-2.4.6.jar \
+		--type css ${OUTPUT}/${NAME}.compiled.css >> ${OUTPUT}/${NAME}.min.css
+	@@rm ${OUTPUT}/${NAME}.compiled.css
+	# Build the CSS Structure-only file
+	${RUN_JS} \
+		external/r.js/dist/r.js \
+		-o cssIn=css/structure/jquery.mobile.structure.css \
+		out=${OUTPUT}/${STRUCTURE}.compiled.css
+	@@cat LICENSE-INFO.txt | ${VER} > ${OUTPUT}/${STRUCTURE}.css
+	@@cat ${OUTPUT}/${STRUCTURE}.compiled.css >> ${OUTPUT}/${STRUCTURE}.css
+	# ..... and then minify it
+	@@echo ${VER_MIN} > ${OUTPUT}/${STRUCTURE}.min.css
+	@@java -XX:ReservedCodeCacheSize=64m \
+		-jar build/yuicompressor-2.4.6.jar \
+		--type css ${OUTPUT}/${STRUCTURE}.compiled.css >> ${OUTPUT}/${STRUCTURE}.min.css
+	@@rm ${OUTPUT}/${STRUCTURE}.compiled.css
+	# ..... and then copy in the images
+	@@cp -R css/themes/${THEME}/images ${OUTPUT}/
+	# Css portion is complete.
+	# -------------------------------------------------
 
-zip: clean min cssmin
-	@@mkdir -p ${DIR}
-	@@cp ${DIR}*.js ${DIR}/
-	@@cp ${DIR}*.css ${DIR}/
-	@@cp -R themes/default/images ${DIR}/
-	@@zip -r ${DIR}.zip ${DIR}
 
-# Used by the jQuery team to deploy a build to the CDN
-deploy: zip
-	# Deploy to CDN
-	@@mv ${DIR} ${VER}
-	@@cp ${DIR}.zip ${VER}/
-	@@scp -r ${VER} jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/
-	@@mv ${VER} ${DIR}
+docs: init
+	# Create the Demos/Docs/Tests/Tools
+	# ... Build the docs bundle
+	${RUN_JS} \
+		external/r.js/dist/r.js \
+	 	-o build/docs.build.js \
+		dir=../tmp/${NAME}
+	# ... Prepend versioned license
+	@@cat LICENSE-INFO.txt | ${VER} > tmp/${NAME}/LICENSE-INFO.txt
+	@@cat tmp/${NAME}/LICENSE-INFO.txt | cat - tmp/${NAME}/js/jquery.mobile.docs.js > tmp/${NAME}/js/jquery.mobile.docs.js.tmp
+	@@cat tmp/${NAME}/js/jquery.mobile.docs.js.tmp | ${SED_VER_API} > tmp/${NAME}/js/jquery.mobile.docs.js
+	@@cat tmp/${NAME}/LICENSE-INFO.txt | cat - tmp/${NAME}/css/themes/default/${NAME}.css > tmp/${NAME}/css/themes/default/${NAME}.css.tmp
+	@@mv tmp/${NAME}/css/themes/default/${NAME}.css.tmp tmp/${NAME}/css/themes/default/${NAME}.css
+	# ... Move and zip up the the whole folder
+	@@cd tmp; zip -rq ../${OUTPUT}/${NAME}.docs.zip ${NAME}
+	@@mv tmp/${NAME} ${OUTPUT}/demos
+	# Finish by removing the temporary files
+	@@rm -rf tmp
+	# -------------------------------------------------
 
-	# Deploy Demos
-	@@mkdir -p ${VER}
-	@@cp -r index.html themes experiments docs ${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' {} \;
+# 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}
+	@@rm -rf tmp
+	@@mkdir -p ${OUTPUT}
+	# -------------------------------------------------
 
-	@@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' {} \;
+# Build and minify the JS files
+js: init
+	# Build the JavaScript file
+	${RUN_JS} \
+		external/r.js/dist/r.js \
+	 	-o baseUrl="js" \
+		include=jquery.mobile \
+		exclude=jquery,../external/requirejs/order,../external/requirejs/text,../external/requirejs/text!../version.txt \
+		out=${OUTPUT}/${NAME}.compiled.js \
+		pragmasOnSave.jqmBuildExclude=true \
+		wrap.startFile=build/wrap.start \
+		wrap.endFile=build/wrap.end \
+		findNestedDependencies=true \
+		skipModuleInsertion=true \
+		optimize=none
+	@@cat LICENSE-INFO.txt | ${VER} > ${OUTPUT}/${NAME}.js
+	@@cat ${OUTPUT}/${NAME}.compiled.js | ${SED_VER_API} >> ${OUTPUT}/${NAME}.js
+	@@rm ${OUTPUT}/${NAME}.compiled.js
+	# ..... and then minify it
+	@@echo ${VER_MIN} > ${OUTPUT}/${NAME}.min.js
+	@@java -XX:ReservedCodeCacheSize=64m \
+		-jar build/google-compiler-20111003.jar \
+		--js ${OUTPUT}/${NAME}.js \
+		--js_output_file ${OUTPUT}/${NAME}.compiled.js
+	@@cat ${OUTPUT}/${NAME}.compiled.js >> ${OUTPUT}/${NAME}.min.js
+	@@rm ${OUTPUT}/${NAME}.compiled.js
+	# -------------------------------------------------
+
+
+# Output a message saying the process is complete
+notify: init
+	@@echo "The files have been built and are in: " $$(pwd)/${OUTPUT}
+	# -------------------------------------------------
+
+
+# Zip up the jQm files without docs
+zip: init css js
+	# Packaging up the files into a zip archive
+	@@mkdir tmp
+	@@cp -R ${OUTPUT} tmp/${NAME}
+	# ... And remove the Zipped docs so they aren't included twice (for deploy scripts)
+	@@rm -rf tmp/${NAME}/${NAME}.docs.zip
+	@@cd tmp; zip -rq ../${OUTPUT}/${NAME}.zip ${NAME}
+	@@rm -rf tmp
+	# -------------------------------------------------
+
+# -------------------------------------------------
+# -------------------------------------------------
+# -------------------------------------------------
+#
+# For jQuery Team Use Only
+#
+# -------------------------------------------------
+
+# Push the latest git version to the CDN. This is done on a post commit hook
+latest: init css docs js zip
+	# Time to put these on the CDN
+	@@scp -qr ${OUTPUT}/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/latest/
+	# -------------------------------------------------
+
+# Build the nightly backups. This is done on a server cronjob
+nightlies: init css js docs zip
+	# Time to put these on the CDN
+	@@mkdir -p tmp/nightlies
+	@@mv ${OUTPUT} tmp/nightlies/$$(date "+%Y%m%d")
+	@@scp -qr tmp/nightlies/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/nightlies/
+	# Do some cleanup to wrap it up
+	@@rm -rf tmp
+	# -------------------------------------------------
+
+
+# Deploy a finished release. This is manually done.
+deploy: init css js docs zip
+	# Deploying all the files to the CDN
+	@@mkdir tmp
+	@@cp -R ${OUTPUT} tmp/${VER_OFFICIAL}
+	@@scp -qr tmp/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/
+	@@rm -rf tmp/${VER_OFFICIAL}
+	@@mv ${OUTPUT}/demos tmp/${VER_OFFICIAL}
+	# Create the Demos/Docs/Tests/Tools for jQueryMobile.com
+	# ... By first replacing the paths
+	# TODO update jQuery Version replacement on deploy
+	@@find tmp/${VER_OFFICIAL} -type f \
+		\( -name '*.html' -o -name '*.php' \) \
+		-exec perl -pi -e \
+		's|src="(.*)${NAME}.min.js"|src="//code.jquery.com/mobile/${VER_OFFICIAL}/${NAME}.min.js"|g;s|href="(.*)${NAME}.min.css"|href="//code.jquery.com/mobile/${VER_OFFICIAL}/${NAME}.min.css"|g;s|src="(.*)jquery.js"|src="//code.jquery.com/jquery-1.7.1.min.js"|g' {} \;
+	# ... So they can be copied to jquerymobile.com
+	@@scp -qr tmp/* jqadmin@jquerymobile.com:/srv/jquerymobile.com/htdocs/demos/
+	# Do some cleanup to wrap it up
+	@@rm -rf tmp
+	@@rm -rf ${OUTPUT}
+	# -------------------------------------------------
+
 
-	@@scp -r ${VER} jqadmin@jquerymobile.com:/srv/jquerymobile.com/htdocs/demos/

README.md

@@ -1,19 +1,107 @@
-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!
+How to build a self-contained version of the Docs/Demos
+=======================================================
+Once you have your own cloned repo on your computer:
 
-- 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.js is the starting point.
+    make docs
+
+The docs will be built and available in the compiled/demos folder. You can move this folder to your web server or
+other location. It has no dependencies on anything other than a basic HTML web server.
+
+
+Submitting bugs
+===============
+If you think you've found a bug, please report it by following these instructions:
+
+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.
+
+Recommended: [JS Bin issue template with instructions](http://jsbin.com/obowiw/edit)
+
+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)
+
+Alternatively, with the addition of async loading, you can use the python simple http server from the project root:
+
+    $ python -m SimpleHTTPServer 8000
+
+And in your browser visit [localhost:8000](http://localhost:8000).
+
+AMD Support in Development
+==========================
+
+Please bear in mind that async loading is not supported for production and is primarily used for the project's build process. As a result developers should expect an initial flash of unstyled content, which will not occur when the library is compiled.
+
+If you find dependency bugs when using the async loading support for development please log them in the github issue tracker.
+
+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 (THEME is the name of the folder for your theme from step 1.):
+
+    make THEME=YourThemeName
+
+6. The compiled files will be located in the "compiled" folder in the root of jQuery-Mobile.

build.xml

@@ -1,63 +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.mobile.buttonMarkup.js,
-	jquery.mobile.collapsible.js,
-	jquery.mobile.controlGroup.js,
-	jquery.mobile.dialog.js,
-	jquery.mobile.event.js,
-	jquery.mobile.fieldContain.js,
-	jquery.mobile.fixHeaderFooter.js,
-	jquery.mobile.forms.ajaxform.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.hashchange.js,
-	jquery.mobile.js,
-	jquery.mobile.listview.filter.js,
-	jquery.mobile.listview.js,
-	jquery.mobile.navbar.js,
-	jquery.mobile.page.js,
-	jquery.mobile.support.js,
-	jquery.mobile.widget.js,
-	jquery.ui.widget.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>

build/docs.build.js

@@ -0,0 +1,39 @@
+({
+	appDir: "..",
+	baseUrl: "js",
+	dir: "../compiled/demos",
+
+	optimize: "none",
+
+	//Finds require() dependencies inside a require() or define call.
+	findNestedDependencies: true,
+
+	//If skipModuleInsertion is false, then files that do not use define()
+	//to define modules will get a define() placeholder inserted for them.
+	//Also, require.pause/resume calls will be inserted.
+	//Set it to true to avoid this. This is useful if you are building code that
+	//does not use require() in the built project or in the JS files, but you
+	//still want to use the optimization tool from RequireJS to concatenate modules
+	//together.
+	skipModuleInsertion: true,
+
+	modules: [
+		{
+			name: "jquery.mobile.docs",
+			exclude: [ "jquery", "../external/requirejs/order" , "../external/requirejs/text", "../external/requirejs/text!../version.txt" ]
+		}
+	],
+
+	pragmasOnSave: {
+		jqmBuildExclude: true
+	},
+
+	//File paths are relative to the build file, or if running a commmand
+	//line build, the current directory.
+	wrap: {
+		startFile: "wrap.start",
+		endFile:   "wrap.end"
+	},
+
+	dirExclusionRegExp: /^\.|^build|^compiled/
+})

build/wrap.end

@@ -0,0 +1,2 @@
+
+}));

build/wrap.start

@@ -0,0 +1,12 @@
+(function ( root, doc, factory ) {
+	if ( typeof define === "function" && define.amd ) {
+		// AMD. Register as an anonymous module.
+		define( [ "jquery" ], function ( $ ) {
+			factory( $, root, doc );
+			return $.mobile;
+		});
+	} else {
+		// Browser globals
+		factory( root.jQuery, root, doc );
+	}
+}( this, document, function ( $, window, document, undefined ) {

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;
-?>

css/structure/jquery.mobile.button.css

@@ -1,17 +1,13 @@
-/*
-* jQuery Mobile Framework
-* Copyright (c) jQuery Project
-* 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-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13px; margin: 0; }
+.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13px; margin: 0; max-width: 30%; }
 .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,
@@ -30,11 +26,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; }
@@ -47,7 +45,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; left: -9999px; }
+.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: .1; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=.0001); font-size: 1px; border: none; text-indent: -9999px; }

css/structure/jquery.mobile.collapsible.css

@@ -1,18 +1,20 @@
-/*
-* jQuery Mobile Framework
-* 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: absolute; top: -9999px; left:0px; }
+.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; }

css/structure/jquery.mobile.controlgroup.css

@@ -1,19 +1,16 @@
-/*
-* jQuery Mobile Framework
-* Copyright (c) jQuery Project
-* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
-*/
-.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0 1em; }
+.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: 0em 0 .5em; }
 .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-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .4em; }
+.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 +20,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; }
+}	

css/structure/jquery.mobile.core.css

@@ -0,0 +1,69 @@
+/* some unsets - more probably needed */
+.ui-mobile, .ui-mobile body { height: 99.9%; }
+.ui-mobile fieldset, .ui-page { padding: 0; margin: 0; }
+.ui-mobile a img, .ui-mobile fieldset { border-width: 0; }
+
+/* responsive page widths */
+.ui-mobile-viewport {  margin: 0; overflow-x: visible; -webkit-text-size-adjust: none; -ms-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+/* Issue #2066 */
+body.ui-mobile-viewport,
+div.ui-mobile-viewport { overflow-x: hidden; }
+
+/* "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; }
+}
+
+/* loading screen */
+.ui-loading .ui-loader { display: block; }
+.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; box-shadow: 0 1px 1px -1px #fff; left: 50%; border:0; }
+.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -18px; margin-top: -18px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
+.ui-loader-verbose { width: 200px; opacity: .88; height: auto; margin-left: -110px; padding: 10px; }
+.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
+.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
+.ui-loader .ui-icon {  display: block; margin: 0; width: 46px; height: 46px; background-color: transparent; }
+.ui-loader-verbose .ui-icon { margin: 0 auto 10px; }
+.ui-loader-textonly { padding: 15px; margin-left: -115px;  }
+.ui-loader-textonly .ui-icon { display: none; }
+.ui-loader-fakefix { position: absolute; }
+/*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 { position: relative; overflow: hidden; width: 100%; border-left-width: 0; border-right-width: 0; }
+.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 30% .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; }
+
+/* icons sizing */
+.ui-icon { width: 18px; height: 18px; }
+
+/* fluid images */
+.ui-mobile 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); }

css/structure/jquery.mobile.dialog.css

@@ -0,0 +1,28 @@
+.ui-dialog { width: 92.5%; max-width: 500px; margin: 10% auto 15px auto; padding: 0; }
+.ui-dialog-page {
+	 background: none !important; /* this is to ensure that dialog theming does not apply (by default at least) on the page div */
+}
+.ui-dialog .ui-header {
+	margin-top: 15%;
+}
+.ui-dialog .ui-header, 
+.ui-dialog .ui-content, 
+.ui-dialog .ui-footer { 
+	display: block;
+	position: relative; 
+	width: auto;
+}
+.ui-dialog .ui-header, 
+.ui-dialog .ui-footer  { 
+	z-index: 10; 
+	padding: 0;
+}
+.ui-dialog .ui-footer {
+	padding: 0 15px; 
+}
+.ui-dialog .ui-content { 
+	padding: 15px; 
+}
+.ui-dialog { 
+	margin-top: -15px;  
+}

css/structure/jquery.mobile.fixedToolbar.css

@@ -0,0 +1,43 @@
+/* fixed page header & footer configuration */
+.ui-header-fixed,
+.ui-footer-fixed {
+	left: 0;
+	right: 0;
+	position: fixed;
+	z-index: 1000;
+	-webkit-transform: translateZ(0); /* Force header/footer rendering to go through the same rendering pipeline as native page scrolling. */
+}
+.ui-header-fixed {
+	top: 0;
+}
+.ui-footer-fixed {
+	bottom: 0;
+}
+.ui-header-fullscreen,
+.ui-footer-fullscreen {
+	opacity: .9;
+}
+.ui-page-header-fixed {
+	padding-top: 2.5em;
+}
+.ui-page-footer-fixed {
+	padding-bottom: 3em;
+}
+.ui-page-header-fullscreen .ui-content,
+.ui-page-footer-fullscreen .ui-content {
+	padding: 0;
+}
+.ui-fixed-hidden {
+	position: absolute;
+}
+.ui-page-header-fullscreen .ui-fixed-hidden,
+.ui-page-footer-fullscreen .ui-fixed-hidden {
+	left: -99999em;
+}
+.ui-footer-duplicate {
+	display: none;
+}
+.ui-header-fixed .ui-btn,
+.ui-footer-fixed .ui-btn { 
+	z-index: 10;
+}

css/structure/jquery.mobile.forms.checkboxradio.css

@@ -1,13 +1,10 @@
-/*
-* jQuery Mobile Framework
-* Copyright (c) jQuery Project
-* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
-*/
-.ui-checkbox, .ui-radio { position:relative;  margin: .2em 0 .5em;  }
-.ui-checkbox .ui-btn, .ui-radio .ui-btn { margin: 0; text-align: left; }
+.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 */
-.ui-checkbox input,.ui-radio input { position:absolute; left:20px; top:50%; width: 10px; height: 10px;  margin:-5px 0 0 0; outline: 0 !important; }
+.ui-checkbox input,.ui-radio input { position:absolute; left:20px; top:50%; width: 10px; height: 10px;  margin:-5px 0 0 0; outline: 0 !important; z-index: 1; }

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

@@ -0,0 +1,5 @@
+.ui-field-contain, fieldset.ui-field-contain { padding: .8em 0; margin: 0; border-width: 0 0 1px 0; overflow: visible; }
+.ui-field-contain:first-child { border-top-width: 0; }
+@media all and (min-width: 450px){
+	.ui-field-contain, .ui-mobile fieldset.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
+}	

css/structure/jquery.mobile.forms.select.css

@@ -0,0 +1,42 @@
+.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 { opacity: 1; }
+
+/* Fixes #2588 — When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select—including “inherit”—without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */
+.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; }
+
+.ui-select .ui-disabled { opacity: .3; }
+
+@-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: 1100 !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; }

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

@@ -0,0 +1,27 @@
+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: 65%; }
+div.ui-slider-switch { width: 99.8%; }
+.ui-field-contain div.ui-slider-switch { width: 50%; }
+a.ui-slider-handle { position: absolute; z-index: 1;  top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; outline: 0; }
+a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
+@media all and (min-width: 480px){
+	.ui-field-contain label.ui-slider { vertical-align: top;  display: inline-block;  width: 20%;  margin: 0 2% 0 0; }
+	.ui-field-contain div.ui-slider { width: 43%; }
+	.ui-field-contain div.ui-slider-switch { width: 35%; }
+}	
+div.ui-slider-switch { height: 32px;  overflow: hidden; margin-left: 0; }
+div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 50%; }
+a.ui-slider-handle-snapping { -webkit-transition: left 70ms linear; -moz-transition: left 70ms 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: 0; }
+
+div.ui-slider-switch a.ui-slider-handle { z-index: 1;  width: 100%; height: 30px; margin-top: -17px; margin-left: -100%; }
+span.ui-slider-label { width: 100%; position: absolute; height: 32px;  font-size: 16px; text-align: center; line-height: 1.8; background: none; border-color: transparent; }
+span.ui-slider-label-a { left: -100%;  margin-right: -1px }
+span.ui-slider-label-b { right: -100%;  margin-left: -1px }

css/structure/jquery.mobile.forms.textinput.css

@@ -0,0 +1,22 @@
+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; line-height: 1.4; font-size: 16px; display: block; width: 97%; outline: 0; }
+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; width: 97%; } 
+	.ui-input-search input.ui-input-text { width: 98%; /*echos rule from above*/ }
+}

css/structure/jquery.mobile.grids.css

@@ -1,12 +1,9 @@
-/*
-* jQuery Mobile Framework
-* Copyright (c) jQuery Project
-* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
-*/
-
 /* 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 +19,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; }

css/structure/jquery.mobile.listview.css

@@ -0,0 +1,51 @@
+.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; }
+}

css/structure/jquery.mobile.navbar.css

@@ -1,14 +1,9 @@
-/*
-* jQuery Mobile Framework
-* Copyright (c) jQuery Project
-* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
-*/
 .ui-navbar { overflow: hidden;  }
 .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; max-width: 100%; }
 .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 +18,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; }

css/structure/jquery.mobile.structure.css

@@ -0,0 +1,23 @@
+@import url( "jquery.mobile.core.css" );
+@import url( "jquery.mobile.transitions.css" );
+@import url( "jquery.mobile.transitions.fade.css" );
+@import url( "jquery.mobile.transitions.pop.css" );
+@import url( "jquery.mobile.transitions.slide.css" );
+@import url( "jquery.mobile.transitions.slidedown.css" );
+@import url( "jquery.mobile.transitions.slideup.css" );
+@import url( "jquery.mobile.transitions.flip.css" );
+@import url( "jquery.mobile.transitions.turn.css" );
+@import url( "jquery.mobile.transitions.flow.css" );
+@import url( "jquery.mobile.grids.css" );
+@import url( "jquery.mobile.fixedToolbar.css" );
+@import url( "jquery.mobile.navbar.css" );
+@import url( "jquery.mobile.button.css" );
+@import url( "jquery.mobile.collapsible.css" );
+@import url( "jquery.mobile.controlgroup.css" );
+@import url( "jquery.mobile.dialog.css" );
+@import url( "jquery.mobile.forms.checkboxradio.css" );
+@import url( "jquery.mobile.forms.fieldcontain.css" );
+@import url( "jquery.mobile.forms.select.css" );
+@import url( "jquery.mobile.forms.textinput.css" );
+@import url( "jquery.mobile.listview.css" );
+@import url( "jquery.mobile.forms.slider.css" );

css/structure/jquery.mobile.transitions.css

@@ -0,0 +1,21 @@
+/* Transitions originally inspired by those from jQtouch, nice work, folks */
+.ui-mobile-viewport-transitioning,
+.ui-mobile-viewport-transitioning .ui-page {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.in {
+	-webkit-animation-timing-function: ease-out;
+	-webkit-animation-duration: 350ms;
+	-moz-animation-timing-function: ease-out;
+	-moz-animation-duration: 350ms;
+}
+
+.out {
+	-webkit-animation-timing-function: ease-in;
+	-webkit-animation-duration: 225ms;
+	-moz-animation-timing-function: ease-in;
+	-moz-animation-duration: 225;
+}

css/structure/jquery.mobile.transitions.fade.css

@@ -0,0 +1,35 @@
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@-webkit-keyframes fadeout {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+@-moz-keyframes fadeout {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+.fade.out {
+	opacity: 0;
+	-webkit-animation-duration: 125ms;
+	-webkit-animation-name: fadeout;
+	-moz-animation-duration: 125ms;
+	-moz-animation-name: fadeout;
+}
+
+.fade.in {
+	opacity: 1;
+	-webkit-animation-duration: 225ms;
+	-webkit-animation-name: fadein;
+	-moz-animation-duration: 225ms;
+	-moz-animation-name: fadein;
+}

css/structure/jquery.mobile.transitions.flip.css

@@ -0,0 +1,79 @@
+/* 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.
+ */
+
+.viewport-flip {
+	-webkit-perspective: 1000;
+	-moz-perspective: 1000;
+	position: absolute;
+}
+.flip {
+	-webkit-backface-visibility:hidden;
+	-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. */
+	-moz-backface-visibility:hidden;
+	-moz-transform:translateX(0);
+}
+
+.flip.out {
+	-webkit-transform: rotateY(-90deg) scale(.9);
+	-webkit-animation-name: flipouttoleft;
+	-webkit-animation-duration: 175ms;
+	-moz-transform: rotateY(-90deg) scale(.9);
+	-moz-animation-name: flipouttoleft;
+	-moz-animation-duration: 175ms;
+}
+
+.flip.in {
+	-webkit-animation-name: flipintoright;
+	-webkit-animation-duration: 225ms;
+	-moz-animation-name: flipintoright;
+	-moz-animation-duration: 225ms;
+}
+
+.flip.out.reverse {
+	-webkit-transform: rotateY(90deg) scale(.9);
+	-webkit-animation-name: flipouttoright;
+	-moz-transform: rotateY(90deg) scale(.9);
+	-moz-animation-name: flipouttoright;
+}
+
+.flip.in.reverse {
+	-webkit-animation-name: flipintoleft;
+	-moz-animation-name: flipintoleft;
+}
+
+@-webkit-keyframes flipouttoleft {
+    from { -webkit-transform: rotateY(0); }
+    to { -webkit-transform: rotateY(-90deg) scale(.9); }
+}
+@-moz-keyframes flipouttoleft {
+    from { -moz-transform: rotateY(0); }
+    to { -moz-transform: rotateY(-90deg) scale(.9); }
+}
+@-webkit-keyframes flipouttoright {
+    from { -webkit-transform: rotateY(0) ; }
+    to { -webkit-transform: rotateY(90deg) scale(.9); }
+}
+@-moz-keyframes flipouttoright {
+    from { -moz-transform: rotateY(0); }
+    to { -moz-transform: rotateY(90deg) scale(.9); }
+}
+@-webkit-keyframes flipintoleft {
+    from { -webkit-transform: rotateY(-90deg) scale(.9); }
+    to { -webkit-transform: rotateY(0); }
+}
+@-moz-keyframes flipintoleft {
+    from { -moz-transform: rotateY(-90deg) scale(.9); }
+    to { -moz-transform: rotateY(0); }
+}
+@-webkit-keyframes flipintoright {
+    from { -webkit-transform: rotateY(90deg) scale(.9); }
+    to { -webkit-transform: rotateY(0); }
+}
+@-moz-keyframes flipintoright {
+    from { -moz-transform: rotateY(90deg) scale(.9); }
+    to { -moz-transform: rotateY(0); }
+}

css/structure/jquery.mobile.transitions.flow.css

@@ -0,0 +1,89 @@
+/* flow transition */
+.flow {
+	-webkit-transform-origin: 50% 30%;
+	-moz-transform-origin: 50% 30%;	
+	-webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
+	-moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
+}
+.ui-dialog-page.flow {
+	-webkit-transform-origin: none;
+	-moz-transform-origin: none;	
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+}
+.flow.out {
+	-webkit-transform: translateX(-100%) scale(.7);
+	-webkit-animation-name: flowouttoleft;
+	-webkit-animation-timing-function: ease;
+	-webkit-animation-duration: 350ms;
+	-moz-transform: translateX(-100%) scale(.7);
+	-moz-animation-name: flowouttoleft;
+	-moz-animation-timing-function: ease;
+	-moz-animation-duration: 350ms;
+}
+
+.flow.in {
+	-webkit-transform: translateX(0) scale(1);
+	-webkit-animation-name: flowinfromright;
+	-webkit-animation-timing-function: ease;
+	-webkit-animation-duration: 350ms;
+	-moz-transform: translateX(0) scale(1);
+	-moz-animation-name: flowinfromright;
+	-moz-animation-timing-function: ease;
+	-moz-animation-duration: 350ms;
+}
+
+.flow.out.reverse {
+	-webkit-transform: translateX(100%);
+	-webkit-animation-name: flowouttoright;
+	-moz-transform: translateX(100%);
+	-moz-animation-name: flowouttoright;
+}
+
+.flow.in.reverse {
+	-webkit-animation-name: flowinfromleft;
+	-moz-animation-name: flowinfromleft;
+}
+
+@-webkit-keyframes flowouttoleft {
+    0% { -webkit-transform: translateX(0) scale(1); }
+	60%, 70% { -webkit-transform: translateX(0) scale(.7); }
+    100% { -webkit-transform: translateX(-100%) scale(.7); }
+}
+@-moz-keyframes flowouttoleft {
+    0% { -moz-transform: translateX(0) scale(1); }
+	60%, 70% { -moz-transform: translateX(0) scale(.7); }
+    100% { -moz-transform:  translateX(-100%) scale(.7); }
+}
+
+@-webkit-keyframes flowouttoright {
+    0% { -webkit-transform: translateX(0) scale(1); }
+	60%, 70% { -webkit-transform: translateX(0) scale(.7); }
+    100% { -webkit-transform:  translateX(100%) scale(.7); }
+}
+@-moz-keyframes flowouttoright {
+    0% { -moz-transform: translateX(0) scale(1); }
+	60%, 70% { -moz-transform: translateX(0) scale(.7); }
+    100% { -moz-transform:  translateX(100%) scale(.7); }
+}
+
+@-webkit-keyframes flowinfromleft {
+    0% { -webkit-transform: translateX(-100%) scale(.7); }
+	30%, 40% { -webkit-transform: translateX(0) scale(.7); }
+    100% { -webkit-transform: translateX(0) scale(1); }
+}
+@-moz-keyframes flowinfromleft {
+    0% { -moz-transform: translateX(-100%) scale(.7); }
+	30%, 40% { -moz-transform: translateX(0) scale(.7); }
+    100% { -moz-transform: translateX(0) scale(1); }
+}
+@-webkit-keyframes flowinfromright {
+    0% { -webkit-transform: translateX(100%) scale(.7); }
+	30%, 40% { -webkit-transform: translateX(0) scale(.7); }
+    100% { -webkit-transform: translateX(0) scale(1); }
+}
+@-moz-keyframes flowinfromright {
+    0% { -moz-transform: translateX(100%) scale(.7); }
+	30%, 40% { -moz-transform: translateX(0) scale(.7); }
+    100% { -moz-transform: translateX(0) scale(1); }
+}

css/structure/jquery.mobile.transitions.pop.css

@@ -0,0 +1,78 @@
+.pop {
+	-webkit-transform-origin: 50% 50%;
+	-moz-transform-origin: 50% 50%;
+}
+
+.pop.in {
+	-webkit-transform: scale(1);
+	-moz-transform: scale(1);
+    opacity: 1;
+	-webkit-animation-name: popin;
+	-moz-animation-name: popin;
+	-webkit-animation-duration: 350ms;
+	-moz-animation-duration: 350ms;
+}
+
+.pop.out {
+	-webkit-animation-name: fadeout;
+	-moz-animation-name: fadeout;
+	opacity: 0;
+	-webkit-animation-duration: 100ms;
+	-moz-animation-duration: 100ms;
+}
+
+.pop.in.reverse {
+	-webkit-animation-name: fadein;
+	-moz-animation-name: fadein;
+}
+
+.pop.out.reverse {
+	-webkit-transform: scale(.8);
+	-moz-transform: scale(.8);
+	-webkit-animation-name: popout;
+	-moz-animation-name: popout;
+}
+
+@-webkit-keyframes popin {
+    from {
+        -webkit-transform: scale(.8);
+        opacity: 0;
+    }
+    to {
+        -webkit-transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes popin {
+    from {
+        -moz-transform: scale(.8);
+        opacity: 0;
+    }
+    to {
+        -moz-transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes popout {
+    from {
+        -webkit-transform: scale(1);
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: scale(.8);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes popout {
+    from {
+        -moz-transform: scale(1);
+        opacity: 1;
+    }
+    to {
+        -moz-transform: scale(.8);
+        opacity: 0;
+    }
+}

css/structure/jquery.mobile.transitions.slide.css

@@ -0,0 +1,54 @@
+/* slide transition */
+.slide.out {
+	-webkit-transform: translateX(-100%);
+	-webkit-animation-name: slideouttoleft;
+	-moz-transform: translateX(-100%);
+	-moz-animation-name: slideouttoleft;
+	-webkit-animation-duration: 225ms;
+	-moz-animation-duration: 225ms;
+}
+
+.slide.in {
+	-webkit-transform: translateX(0);
+	-webkit-animation-name: fadein;
+	-moz-transform: translateX(0);
+	-moz-animation-name: fadein;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
+
+.slide.out.reverse {
+	-webkit-transform: translateX(100%);
+	-webkit-animation-name: slideouttoright;
+	-moz-transform: translateX(100%);
+	-moz-animation-name: slideouttoright;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
+
+.slide.in.reverse {
+	-webkit-transform: translateX(0);
+	-webkit-animation-name: fadein;
+	-moz-transform: translateX(0);
+	-moz-animation-name: fadein;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
+
+@-webkit-keyframes slideouttoleft {
+    from { -webkit-transform: translateX(0); }
+    to { -webkit-transform: translateX(-100%); }
+}
+@-moz-keyframes slideouttoleft {
+    from { -moz-transform: translateX(0); }
+    to { -moz-transform: translateX(-100%); }
+}
+
+@-webkit-keyframes slideouttoright {
+    from { -webkit-transform: translateX(0); }
+    to { -webkit-transform: translateX(100%); }
+}
+@-moz-keyframes slideouttoright {
+    from { -moz-transform: translateX(0); }
+    to { -moz-transform: translateX(100%); }
+}

css/structure/jquery.mobile.transitions.slidedown.css

@@ -0,0 +1,50 @@
+/* slide down */
+.slidedown.out {
+	-webkit-animation-name: fadeout;
+	-moz-animation-name: fadeout;
+	-webkit-animation-duration: 100ms;
+	-moz-animation-duration: 100ms;
+}
+
+.slidedown.in {
+	-webkit-transform: translateY(0);
+	-webkit-animation-name: slideinfromtop;
+	-moz-transform: translateY(0);
+	-moz-animation-name: slideinfromtop;
+	-webkit-animation-duration: 250ms;
+	-moz-animation-duration: 250ms;
+}
+
+.slidedown.in.reverse {
+	-webkit-animation-name: fadein;
+	-moz-animation-name: fadein;
+	-webkit-animation-duration: 150ms;
+	-moz-animation-duration: 150ms;
+}
+
+.slidedown.out.reverse {
+	-webkit-transform: translateY(-100%);
+	-moz-transform: translateY(-100%);
+	-webkit-animation-name: slideouttotop;
+	-moz-animation-name: slideouttotop;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
+
+@-webkit-keyframes slideinfromtop {
+    from { -webkit-transform: translateY(-100%); }
+    to { -webkit-transform: translateY(0); }
+}
+@-moz-keyframes slideinfromtop {
+    from { -moz-transform: translateY(-100%); }
+    to { -moz-transform: translateY(0); }
+}
+
+@-webkit-keyframes slideouttotop {
+    from { -webkit-transform: translateY(0); }
+    to { -webkit-transform: translateY(-100%); }
+}
+@-moz-keyframes slideouttotop {
+    from { -moz-transform: translateY(0); }
+    to { -moz-transform: translateY(-100%); }
+}

css/structure/jquery.mobile.transitions.slideup.css

@@ -0,0 +1,50 @@
+/* slide up */
+.slideup.out {
+	-webkit-animation-name: fadeout;
+	-moz-animation-name: fadeout;
+	-webkit-animation-duration: 100ms;
+	-moz-animation-duration: 100ms;
+}
+
+.slideup.in {
+	-webkit-transform: translateY(0);
+	-webkit-animation-name: slideinfrombottom;
+	-moz-transform: translateY(0);
+	-moz-animation-name: slideinfrombottom;
+	-webkit-animation-duration: 250ms;
+	-moz-animation-duration: 250ms;
+}
+
+.slideup.in.reverse {
+	-webkit-animation-name: fadein;
+	-moz-animation-name: fadein;
+	-webkit-animation-duration: 150ms;
+	-moz-animation-duration: 150ms;
+}
+
+.slideup.out.reverse {
+	-webkit-transform: translateY(100%);
+	-moz-transform: translateY(100%);
+	-webkit-animation-name: slideouttobottom;
+	-moz-animation-name: slideouttobottom;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
+
+@-webkit-keyframes slideinfrombottom {
+    from { -webkit-transform: translateY(100%); }
+    to { -webkit-transform: translateY(0); }
+}
+@-moz-keyframes slideinfrombottom {
+    from { -moz-transform: translateY(100%); }
+    to { -moz-transform: translateY(0); }
+}
+
+@-webkit-keyframes slideouttobottom {
+    from { -webkit-transform: translateY(0); }
+    to { -webkit-transform: translateY(100%); }
+}
+@-moz-keyframes slideouttobottom {
+    from { -moz-transform: translateY(0); }
+    to { -moz-transform: translateY(100%); }
+}

css/structure/jquery.mobile.transitions.turn.css

@@ -0,0 +1,83 @@
+/* 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.
+ */
+
+.viewport-turn {
+	-webkit-perspective: 1000;
+	-moz-perspective: 1000;
+	position: absolute;
+}
+.turn {
+	-webkit-backface-visibility:hidden;
+	-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. */
+	-webkit-transform-origin: 0;
+	
+	-moz-backface-visibility:hidden;
+	-moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
+	-moz-transform-origin: 0;
+}
+
+.turn.out {
+	-webkit-transform: rotateY(-90deg) scale(.9);
+	-webkit-animation-name: flipouttoleft;
+	-moz-transform: rotateY(-90deg) scale(.9);
+	-moz-animation-name: flipouttoleft;
+	-webkit-animation-duration: 125ms;
+	-moz-animation-duration: 125ms;
+}
+
+.turn.in {
+	-webkit-animation-name: flipintoright;
+	-moz-animation-name: flipintoright;
+	-webkit-animation-duration: 250ms;
+	-moz-animation-duration: 250ms;
+	
+}
+
+.turn.out.reverse {
+	-webkit-transform: rotateY(90deg) scale(.9);
+	-webkit-animation-name: flipouttoright;
+	-moz-transform: rotateY(90deg) scale(.9);
+	-moz-animation-name: flipouttoright;
+}
+
+.turn.in.reverse {
+	-webkit-animation-name: flipintoleft;
+	-moz-animation-name: flipintoleft;
+}
+
+@-webkit-keyframes flipouttoleft {
+    from { -webkit-transform: rotateY(0); }
+    to { -webkit-transform: rotateY(-90deg) scale(.9); }
+}
+@-moz-keyframes flipouttoleft {
+    from { -moz-transform: rotateY(0); }
+    to { -moz-transform: rotateY(-90deg) scale(.9); }
+}
+@-webkit-keyframes flipouttoright {
+    from { -webkit-transform: rotateY(0) ; }
+    to { -webkit-transform: rotateY(90deg) scale(.9); }
+}
+@-moz-keyframes flipouttoright {
+    from { -moz-transform: rotateY(0); }
+    to { -moz-transform: rotateY(90deg) scale(.9); }
+}
+@-webkit-keyframes flipintoleft {
+    from { -webkit-transform: rotateY(-90deg) scale(.9); }
+    to { -webkit-transform: rotateY(0); }
+}
+@-moz-keyframes flipintoleft {
+    from { -moz-transform: rotateY(-90deg) scale(.9); }
+    to { -moz-transform: rotateY(0); }
+}
+@-webkit-keyframes flipintoright {
+    from { -webkit-transform: rotateY(90deg) scale(.9); }
+    to { -webkit-transform: rotateY(0); }
+}
+@-moz-keyframes flipintoright {
+    from { -moz-transform: rotateY(90deg) scale(.9); }
+    to { -moz-transform: rotateY(0); }
+}

css/themes/default/index.php

@@ -0,0 +1,7 @@
+<?php
+$type = 'text/css';
+$files = array(
+	'../../../LICENSE-INFO.txt',
+	'jquery.mobile.css'
+);
+$base = dirname(__FILE__);

css/themes/default/jquery.mobile.css

@@ -0,0 +1,2 @@
+@import url( "jquery.mobile.theme.css" );
+@import url( "../../structure/jquery.mobile.structure.css" );

css/themes/valencia/index.php

@@ -0,0 +1,7 @@
+<?php
+$type = 'text/css';
+$files = array(
+	'../../../LICENSE-INFO.txt',
+	'jquery.mobile.css'
+);
+$base = dirname(__FILE__);

css/themes/valencia/jquery.mobile.css

@@ -0,0 +1,2 @@
+@import url( "jquery.mobile.theme.css" );
+@import url( "../../structure/jquery.mobile.structure.css" );

css/themes/valencia/jquery.mobile.theme.css

@@ -1,11 +1,3 @@
-/*
-* 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 
-*/
-
-
 /*####################################################################################################################################
 
   A
@@ -18,25 +10,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(#e9a015, #e98a15); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#e9a015, #e98a15); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#e9a015, #e98a15); /* IE10 */
+  background-image:      -o-linear-gradient(#e9a015, #e98a15); /* Opera 11.10+ */
+  background-image:         linear-gradient(#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(#ea9e0c, #e68510); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#ea9e0c, #e68510); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#ea9e0c, #e68510); /* IE10 */
+  background-image:      -o-linear-gradient(#ea9e0c, #e68510); /* Opera 11.10+ */
+  background-image:         linear-gradient(#ea9e0c, #e68510); 
 }
 .ui-btn-up-a a.ui-link-inherit {
   color:                  #fff;
@@ -45,13 +35,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(#edab30, #ed9730); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#edab30, #ed9730); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#edab30, #ed9730); /* IE10 */
+  background-image:      -o-linear-gradient(#edab30, #ed9730); /* Opera 11.10+ */
+  background-image:         linear-gradient(#edab30, #ed9730); 
 }
 .ui-btn-hover-a a.ui-link-inherit {
   color:                  #fff;
@@ -60,13 +49,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(#BA8011, #BA6E11); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#BA8011, #BA6E11); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#BA8011, #BA6E11); /* IE10 */
+  background-image:      -o-linear-gradient(#BA8011, #BA6E11); /* Opera 11.10+ */
+  background-image:         linear-gradient(#BA8011, #BA6E11);
 }
 .ui-btn-up-a,
 .ui-btn-hover-a,
@@ -91,25 +79,19 @@
   color:                  #7cc4e7;
   font-weight: bold;
 }
-.ui-body-a {
+.ui-body-a,
+.ui-dialog.ui-overlay-a {
   font-weight: normal;
   border: 1px solid       #222;
   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(#333 0%, #333 5%, #444 15%, #444 60%, #222 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#333 0%, #333 5%, #444 15%, #444 60%, #222 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#333 0%, #333 5%, #444 15%, #444 60%, #222 100%); /* IE10 */
+  background-image:      -o-linear-gradient(#333 0%, #333 5%, #444 15%, #444 60%, #222 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(#333 0%, #333 5%, #444 15%, #444 60%, #222 100%);
 }
 .ui-body-a, 
 .ui-body-a input, 
@@ -138,25 +120,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(#555, #333); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#555, #333); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#555, #333); /* IE10 */
+  background-image:      -o-linear-gradient(#555, #333); /* Opera 11.10+ */
+  background-image:         linear-gradient(#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(#5E5E5E, #393939); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#5E5E5E, #393939); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#5E5E5E, #393939); /* IE10 */
+  background-image:      -o-linear-gradient(#5E5E5E, #393939); /* Opera 11.10+ */
+  background-image:         linear-gradient(#5E5E5E, #393939);
 }
 .ui-btn-up-b a.ui-link-inherit { 
   color:                  #eee;
@@ -165,13 +145,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(#6E6E6E, #494949); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#6E6E6E, #494949); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#6E6E6E, #494949); /* IE10 */
+  background-image:      -o-linear-gradient(#6E6E6E, #494949); /* Opera 11.10+ */
+  background-image:         linear-gradient(#6E6E6E, #494949);
 }
 
 .ui-btn-hover-b a.ui-link-inherit {
@@ -181,13 +160,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(#4E4E4E, #292929); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#4E4E4E, #292929); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#4E4E4E, #292929); /* IE10 */
+  background-image:      -o-linear-gradient(#4E4E4E, #292929); /* Opera 11.10+ */
+  background-image:         linear-gradient(#4E4E4E, #292929);
 }
 .ui-btn-down-b a.ui-link-inherit {
   color:                  #fff; 
@@ -215,7 +193,8 @@
   color:                  #7cc4e7; 
   font-weight: bold;
 }
-.ui-body-b { 
+.ui-body-b,
+.ui-dialog.ui-overlay-b {
   font-weight: normal;
   border: 1px solid       #999;
   background-color:             #e5e5e5;
@@ -249,13 +228,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(#eee, #e5e5e5); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#eee, #e5e5e5); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#eee, #e5e5e5); /* IE10 */
+  background-image:      -o-linear-gradient(#eee, #e5e5e5); /* Opera 11.10+ */
+  background-image:         linear-gradient(#eee, #e5e5e5);
 }
 .ui-bar-c, 
 .ui-bar-c input, 
@@ -277,13 +255,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(#eee, #e5e5e5); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#eee, #e5e5e5); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#eee, #e5e5e5); /* IE10 */
+  background-image:      -o-linear-gradient(#eee, #e5e5e5); /* Opera 11.10+ */
+  background-image:         linear-gradient(#eee, #e5e5e5);
 }
 .ui-btn-up-c a.ui-link-inherit {
   color:                  #444;
@@ -292,13 +269,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(#fff, #f5f5f5); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#fff, #f5f5f5); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#fff, #f5f5f5); /* IE10 */
+  background-image:      -o-linear-gradient(#fff, #f5f5f5); /* Opera 11.10+ */
+  background-image:         linear-gradient(#fff, #f5f5f5);
 }
 .ui-btn-hover-c a.ui-link-inherit { 
   color:                  #222;
@@ -307,18 +283,18 @@
   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(#ddd, #d5d5d5); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#ddd, #d5d5d5); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#ddd, #d5d5d5); /* IE10 */
+  background-image:      -o-linear-gradient(#ddd, #d5d5d5); /* Opera 11.10+ */
+  background-image:         linear-gradient(#ddd, #d5d5d5);
 }
 .ui-btn-down-c a.ui-link-inherit { 
   color:                  #111;
 }
-.ui-body-c {
+.ui-body-c,
+.ui-dialog.ui-overlay-c {
   border: 1px solid       #ddd;
   color:                  #333333;
   text-shadow: 0 1px 0px  #fff;
@@ -351,19 +327,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(#ddd 0%, #ccc 5%, #bbb 15%, #ddd 95%, #ccc 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#ddd 0%, #ccc 5%, #bbb 15%, #ddd 95%, #ccc 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#ddd 0%, #ccc 5%, #bbb 15%, #ddd 95%, #ccc 100%); /* IE10 */
+  background-image:      -o-linear-gradient(#ddd 0%, #ccc 5%, #bbb 15%, #ddd 95%, #ccc 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(#ddd 0%, #ccc 5%, #bbb 15%, #ddd 95%, #ccc 100%);
 }
 .ui-bar-d, 
 .ui-bar-d input, 
@@ -384,13 +353,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(#d5d5d5, #ddd); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#d5d5d5, #ddd); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#d5d5d5, #ddd); /* IE10 */
+  background-image:      -o-linear-gradient(#d5d5d5, #ddd); /* Opera 11.10+ */
+  background-image:         linear-gradient(#d5d5d5, #ddd);
 }
 .ui-btn-up-d a.ui-link-inherit {
   color:                  #666;
@@ -399,13 +367,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(#c5c5c5, #ccc); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#c5c5c5, #ccc); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#c5c5c5, #ccc); /* IE10 */
+  background-image:      -o-linear-gradient(#c5c5c5, #ccc); /* Opera 11.10+ */
+  background-image:         linear-gradient(#c5c5c5, #ccc);
 }
 .ui-btn-hover-d a.ui-link-inherit {
   color:                  #666;
@@ -414,13 +381,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(#b5b5b5, #bbb); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#b5b5b5, #bbb); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#b5b5b5, #bbb); /* IE10 */
+  background-image:      -o-linear-gradient(#b5b5b5, #bbb); /* Opera 11.10+ */
+  background-image:         linear-gradient(#b5b5b5, #bbb);
 }
 .ui-btn-up-d a.ui-link {
   color:                  #444;
@@ -444,20 +410,18 @@
 .ui-body-d .ui-link-inherit { 
   color:                  #333333;
 }
-.ui-body-d { 
+.ui-body-d,
+.ui-dialog.ui-overlay-d {
   border: 1px solid       #aaa;
   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(#fff 0%, #f5f5f5 15%, #eee 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#fff 0%, #f5f5f5 15%, #eee 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#fff 0%, #f5f5f5 15%, #eee 100%); /* IE10 */
+  background-image:      -o-linear-gradient(#fff 0%, #f5f5f5 15%, #eee 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(#fff 0%, #f5f5f5 15%, #eee 100%);
 }
 .ui-body-d .ui-link {
   font-weight: bold;
@@ -484,17 +448,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(#fff 0%, #ccc 50%, #b5b5b5 50%, #eee 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#fff 0%, #ccc 50%, #b5b5b5 50%, #eee 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#fff 0%, #ccc 50%, #b5b5b5 50%, #eee 100%); /* IE10 */
+  background-image:      -o-linear-gradient(#fff 0%, #ccc 50%, #b5b5b5 50%, #eee 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(#fff 0%, #ccc 50%, #b5b5b5 50%, #eee 100%);
 }
 .ui-bar-e,
 .ui-bar-e input, 
@@ -515,17 +474,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(#f5f5f5 0%, #ccc 50%, #b5b5b5 50%, #f5f5f5 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#f5f5f5 0%, #ccc 50%, #b5b5b5 50%, #f5f5f5 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#f5f5f5 0%, #ccc 50%, #b5b5b5 50%, #f5f5f5 100%); /* IE10 */
+  background-image:      -o-linear-gradient(#f5f5f5 0%, #ccc 50%, #b5b5b5 50%, #f5f5f5 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(#f5f5f5 0%, #ccc 50%, #b5b5b5 50%, #f5f5f5 100%);
 }
 .ui-btn-up-e a.ui-link-inherit {
   color:                  #333;
@@ -535,17 +489,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(#fff 0%, #ddd 50%, #ccc 50%, #fff 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#fff 0%, #ddd 50%, #ccc 50%, #fff 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#fff 0%, #ddd 50%, #ccc 50%, #fff 100%); /* IE10 */
+  background-image:      -o-linear-gradient(#fff 0%, #ddd 50%, #ccc 50%, #fff 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(#fff 0%, #ddd 50%, #ccc 50%, #fff 100%);
 }
 .ui-btn-hover-e a.ui-link-inherit {
   color:                  #333;
@@ -554,17 +503,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(#ddd 0%, #ccc 50%, #bbb 50%, #ddd 100%); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#ddd 0%, #ccc 50%, #bbb 50%, #ddd 100%); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#ddd 0%, #ccc 50%, #bbb 50%, #ddd 100%); /* IE10 */
+  background-image:      -o-linear-gradient(#ddd 0%, #ccc 50%, #bbb 50%, #ddd 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(#ddd 0%, #ccc 50%, #bbb 50%, #ddd 100%);
 }
 .ui-btn-down-e a.ui-link-inherit {
   color:                  #333;
@@ -578,7 +522,8 @@
   text-decoration: none;
   text-shadow: 0 1px 0px  #fff;
 }
-.ui-body-e { 
+.ui-body-e,
+.ui-dialog.ui-overlay-e {
   font-weight: normal;
   border: 1px solid       #aaa;
   background:             #ccc;
@@ -618,16 +563,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(#FFDC52, #FFBC19); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#FFDC52, #FFBC19); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#FFDC52, #FFBC19); /* IE10 */
+  background-image:      -o-linear-gradient(#FFDC52, #FFBC19); /* Opera 11.10+ */
+  background-image:         linear-gradient(#FFDC52, #FFBC19);
 }
 .ui-btn-active a.ui-link-inherit {
   color:                  #333;
@@ -701,109 +645,168 @@ a.ui-link-inherit {
 /* Interaction Cues
 ----------------------------------*/
 .ui-disabled { 
-  cursor: default !important;
   opacity: .3;
 }
+.ui-disabled, .ui-disabled a {
+  cursor: default !important;
+}
 
 /* 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;
@@ -869,8 +872,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 */
@@ -912,7 +924,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;
@@ -961,4 +972,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; 
-}
+}

docs/_assets/css/jqm-docs.css

@@ -1,12 +1,344 @@
-.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; } 
+h4 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-top: 1px solid 	#56A00E;
+	border-bottom: 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(#74b042, #56A00E); /* Chrome 10+, Saf5.1+ */
+	background-image:    -moz-linear-gradient(#74b042, #56A00E); /* FF3.6 */
+	background-image:     -ms-linear-gradient(#74b042, #56A00E); /* IE10 */
+	background-image:      -o-linear-gradient(#74b042, #56A00E); /* Opera 11.10+ */
+	background-image:         linear-gradient(#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(#74b042, #56A00E); /* Chrome 10+, Saf5.1+ */
+	background-image:    -moz-linear-gradient(#74b042, #56A00E); /* FF3.6 */
+	background-image:     -ms-linear-gradient(#74b042, #56A00E); /* IE10 */
+	background-image:      -o-linear-gradient(#74b042, #56A00E); /* Opera 11.10+ */
+	background-image:         linear-gradient(#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(#8FC963, #6EBC1F); /* Chrome 10+, Saf5.1+ */
+	background-image:    -moz-linear-gradient(#8FC963, #6EBC1F); /* FF3.6 */
+	background-image:     -ms-linear-gradient(#8FC963, #6EBC1F); /* IE10 */
+	background-image:      -o-linear-gradient(#8FC963, #6EBC1F); /* Opera 11.10+ */
+	background-image:         linear-gradient(#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(#56A00E, #64A234); /* Chrome 10+, Saf5.1+ */
+	background-image:    -moz-linear-gradient(#56A00E, #64A234); /* FF3.6 */
+	background-image:     -ms-linear-gradient(#56A00E, #64A234); /* IE10 */
+	background-image:      -o-linear-gradient(#56A00E, #64A234); /* Opera 11.10+ */
+	background-image:         linear-gradient(#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%;
+	}
+}

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();
 });

docs/_assets/js/jqm-docs.js

@@ -1,19 +1,60 @@
 //set up the theme switcher on the homepage
-$('div').live('pagecreate',function(event){
-	if( !$(this).is('.ui-dialog')){ 
-		$('<a href="#">Switch theme</a>')
-			.buttonMarkup({
-				'icon':'gear',
-				'inline': true,
-				'shadow': false,
-				'theme': 'd'
-			})
-			.appendTo( $(this).find('.ui-content') )
-			.wrap('<div class="jqm-themeswitcher">')
-			.click(function(){
-				$.themeswitcher();
-				return false;
-			});
-	}	
-	event.stopPropagation();
-});
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+define( function() {
+//>>excludeEnd("jqmBuildExclude");
+
+//collapse page navs after use
+$(function(){
+	$('body').delegate('.content-secondary .ui-collapsible-content', 'click',  function(){
+		$(this).trigger("collapse");
+	});
+});
+
+
+// Turn off AJAX for local file browsing
+if ( location.protocol.substr(0,4)  === 'file' ||
+     location.protocol.substr(0,11) === '*-extension' ||
+     location.protocol.substr(0,6)  === 'widget' ) {
+
+  // Start with links with only the trailing slash and that aren't external links
+  var fixLinks = function() {
+    $( "a[href$='/'], a[href='.'], a[href='..']" ).not( "[rel='external']" ).each( function() {
+      this.href = $( this ).attr( "href" ).replace( /\/$/, "" ) + "/index.html";
+    });
+  };
+
+  // fix the links for the initial page
+  $(fixLinks);
+
+  // fix the links for subsequent ajax page loads
+  $(document).bind( 'pagecreate', fixLinks );
+
+  // Check to see if ajax can be used. This does a quick ajax request and blocks the page until its done
+  $.ajax({
+    url: '.',
+    async: false,
+    isLocal: true
+  }).error(function() {
+    // Ajax doesn't work so turn it off
+    $( document ).bind( "mobileinit", function() {
+      $.mobile.ajaxEnabled = false;
+
+      var message = $( '<div>' , {
+        'class': "ui-footer ui-bar-e",
+        style: "overflow: auto; padding:10px 15px;",
+        'data-ajax-warning': true
+      });
+
+      message
+        .append( "<h3>Note: Navigation may not work if viewed locally</h3>" )
+        .append( "<p>The AJAX-based navigation used throughout the jQuery Mobile docs may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, try a different browser or <a href='https://github.com/jquery/jquery-mobile/wiki/Downloadable-Docs-Help'>view help</a>.</p>" );
+
+      $( document ).bind( "pagecreate", function( event ) {
+        $( event.target ).append( message );
+      });
+    });
+  });
+}
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");

docs/about/accessibility.html

@@ -1,21 +1,28 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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 +31,33 @@
 			
 			<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/getting-started.html">Quick start guide</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>
 
 						
 

docs/about/features.html

@@ -1,42 +1,74 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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 include 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>Powerful theming framework</strong> and ThemeRoller application make highly-branded experiences easy to build.</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 the <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller</a> 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><a href="../../docs/about/getting-started.html">Quick start guide</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>

docs/about/getting-started.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html> 
+<html class="ui-mobile-rendering"> 
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Quick start</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" /> 
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.js"></script>
+</head> 
+<body> 
+
+<div data-role="page" class="type-interior">
+
+	<div data-role="header" data-theme="f">
+		<h1>Quick start guide</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>Getting Started with jQuery Mobile</h2>
+
+		<p>jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. Building your first jQuery Mobile page is easy, here's how:</p>
+		
+		<h2>Create a basic page template</h2>	
+		<p>Pop open your favorite text editor, paste in the <a href="../pages/page-anatomy.html" id="" title="page-anatomy">page template</a> below, save and open in a browser. You are now a mobile developer!</p>
+		<p>Here's what's in the template. In the <code>head</code>, a meta <code>viewport</code> tag sets the screen width to the pixel width of the device and references to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN add all the styles and scripts. </p>
+		<p>In the <code>body</code>, a div with a <code>data-role</code> of <code>page</code> is the wrapper used to delineate a page, and the header bar (<code>data-role="header"</code>) and content region (<code>data-role="content"</code>) are added inside to create a basic page (these are both optional). These <code>data-</code> attributes are HTML5  attributes are used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.</p> 
+
+<pre><code>
+&lt;!DOCTYPE html&gt; 
+&lt;html&gt; 
+	&lt;head&gt; 
+	&lt;title&gt;My Page&lt;/title&gt; 
+	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; 
+	&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css&quot; /&gt;
+	&lt;script src=&quot;http://code.jquery.com/jquery-1.6.4.min.js&quot;&gt;&lt;/script&gt;
+	&lt;script src=&quot;http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js&quot;&gt;&lt;/script&gt;
+&lt;/head&gt; 
+&lt;body&gt; 
+
+&lt;div <strong>data-role=&quot;page&quot;</strong>&gt;
+
+	&lt;div <strong>data-role=&quot;header&quot;</strong>&gt;
+		&lt;h1&gt;My Title&lt;/h1&gt;
+	&lt;/div&gt;&lt;!-- /header --&gt;
+
+	&lt;div <strong>data-role=&quot;content&quot;</strong>&gt;	
+		&lt;p&gt;Hello world&lt;/p&gt;		
+	&lt;/div&gt;&lt;!-- /content --&gt;
+
+&lt;/div&gt;&lt;!-- /page --&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+
+		
+		<h2>Add your content</h2>
+		<p>Inside your content container, you can add all any standard <a href="../content/content-html.html">HTML elements</a> - headings, lists, paragraphs, etc. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the <code>head</code> after the jQuery Mobile stylesheet.</p> 
+		
+		<h2>Make a listview</h2>
+		<p>jQuery Mobile includes a diverse set of common <a href="../lists/docs-lists.html" id="" title="docs-lists">listviews</a> that are coded as lists with a <code>data-role="listview"</code> added. Here is a simple linked list that has a role of <code>listview</code>. We're going to make this look like an inset module by adding a <code>data-inset="true"</code> and add a dynamic search filter with the <code>data-filter="true"</code> attributes.</p>
+
+<pre><code>
+&lt;ul <strong>data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-filter=&quot;true&quot</strong>&gt;
+	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Acura&lt;/a&gt;&lt;/li&gt;
+	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Audi&lt;/a&gt;&lt;/li&gt;
+	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;BMW&lt;/a&gt;&lt;/li&gt;
+	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Cadillac&lt;/a&gt;&lt;/li&gt;
+	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Ferrari&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+
+</code></pre>
+		<ul data-role="listview" data-inset="true" data-filter="true">
+			<li><a href="#">Acura</a></li>
+			<li><a href="#">Audi</a></li>
+			<li><a href="#">BMW</a></li>
+			<li><a href="#">Cadillac</a></li>
+			<li><a href="#">Ferrari</a></li>
+		</ul>
+
+
+
+		
+		<h2>Add a slider</h2>
+		<p>The framework contains a full set of <a href="../forms/forms-all.html">form elements</a> that automatically are enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no <code>data-role</code> needed. Be sure to wrap these in a <code>form</code> element and always properly associate a <code>label</code> to every form element.</p> 
+		
+<pre><code>
+&lt;form&gt;
+   &lt;label for=&quot;slider-0&quot;&gt;Input slider:&lt;/label&gt;
+   &lt;input <strong>type=&quot;range&quot;</strong> name=&quot;slider&quot; id=&quot;slider-0&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot;  /&gt;
+&lt;/form&gt;
+</code></pre>
+		
+		<form>
+			<label for="slider-0">Input slider:</label>
+			<input type="range" name="slider-1" id="slider-0" value="25" min="0" max="100"  />
+		</form>
+		
+
+		
+		<h2>Make a button</h2>
+		<p>There are a few ways to make <a href="../buttons/buttons-types.html" title="buttons-types">buttons</a>, but lets turn a link into a button so it's easy to click. Just start with a link and add a <code>data-role="button"</code> attribute to it.  You can add an <a href="../buttons/buttons-icons.html">icon</a> with the <code>data-icon</code> attribute and optionally set its position with the <code>data-iconpos</code> attribute.</p>
+
+<pre><code>
+&lt;a href=&quot;#&quot; <strong>data-role=&quot;button&quot; data-icon=&quot;star&quot;</strong>&gt;Star button&lt;/a&gt;
+</code></pre>
+
+		<a href="#" data-role="button" data-icon="star">Star button</a>
+
+
+		
+		<h2>Play with theme swatches</h2>
+		<p>jQuery Mobile has a robust <a href="../api/themes.html" id="">theme framework</a> that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a <code>data-theme="e"</code> attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Try different swatch letters in default theme from a-e to mix and match swatches. </p>
+		<p>Cool party trick: add the theme swatch to the page and see how all the widgets inside the content will automatically inherit the theme (headers don't inherit, they default to swatch A).</p>
+		
+<code>&lt;a href=&quot;#&quot; data-role=&quot;button&quot; data-icon=&quot;star&quot; <strong>data-theme=&quot;a&quot;</strong>&gt;Button&lt;/a&gt;</code>
+		
+		<a href="#" data-role="button" data-icon="star" data-theme="a">data-theme="a"</a>
+		<a href="#" data-role="button" data-icon="star" data-theme="b">data-theme="b"</a>
+		<a href="#" data-role="button" data-icon="star" data-theme="c">data-theme="c"</a>
+		<a href="#" data-role="button" data-icon="star" data-theme="d">data-theme="d"</a>
+		<a href="#" data-role="button" data-icon="star" data-theme="e">data-theme="e"</a>
+	
+	<p>When you're ready to build a custom theme, use <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller</a> to drag and drop, then download a custom theme.</p>
+	
+	<h2>Go forth and build stuff</h2>
+	<p>This is just scratching the surface of all the cool things you can build with jQuery Mobile with little effort. Be sure to explore <a href="../pages/page-links.html" id="" title="page-links">linking pages</a>, <a href="../pages/page-transitions.html" id="" title="page-transitions">adding animated page transitions</a>, and <a href="../pages/page-dialogs.html" id="" title="page-dialogs">creating dialogs</a>. Use the <a href="../api/data-attributes.html" id="" title="data-attributes">data-attribute reference</a> to try out some of the other <code>data-</code> attributes you can play with. </p>
+	
+	<p><strong>More of a developer?</strong> Great, forget everything we just covered (kidding). If you don't want to use the <code>data-</code> attribute configuration system, you can take full control of everything and call plugins directly because these are all just standard jQuery plugins built with the UI widget factory. Be sure to dig into <a href="../api/globalconfig.html" id="" title="globalconfig">global configuration</a>, <a href="../api/events.html" id="" title="events">events</a>, and <a href="../api/methods.html" id="" title="methods">methods</a>. Then read up on <a href="../pages/page-scripting.html" id="" title="page-scripting">scripting pages</a>, <a href="../pages/page-dynamic.html" id="" title="page-dynamic">generating dynamic pages</a>, and <a href="../pages/phonegap.html" id="" title="phonegap">building PhoneGap apps</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">Overview</li>
+						<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
+						<li data-theme="a"><a href="../../docs/about/getting-started.html">Quick start guide</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>
+</html>

docs/about/index.html

@@ -1,24 +1,30 @@
 <!DOCTYPE html>
-<html>
+<html class="ui-mobile-rendering">
 <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/jquery.mobile.css" />
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-</head> 
-<body> 
-<div data-role="page" data-theme="b">
 
-<div data-role="header" data-position="inline">
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.js"></script>
+</head>
+<body> 
+
+	<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="getting-started.html">Quick start guide</a></li>	
 		<li><a href="features.html">Features</a></li>
 		<li><a href="accessibility.html">Accessibility</a></li>
 		<li><a href="platforms.html">Supported platforms</a></li>
@@ -28,4 +34,4 @@
 
 </div>
 </body>
-</html>
+</html>

docs/about/intro.html

@@ -1,36 +1,67 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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/getting-started.html">Quick start guide</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>

docs/about/platforms.html

@@ -1,44 +1,99 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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">jQuery Mobile Supported Platforms</h2>
+				<p>jQuery Mobile has 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>We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic). The visual fidelity of the experience is highly dependent on the 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</strong> - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0)</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 and Motorola XOOM</li>
+					<li><strong>Windows Phone 7-7.5</strong> - Tested on the HTC Surround (7.0) HTC Trophy (7.5), and LG-E900 (7.5)</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 Android 2.2</li>
+					<li><strong>Meego 1.2</strong> - Tested on Nokia 950 and N9</li>
+					<li><strong>Kindle 3 and Fire</strong>: Tested on the built-in WebKit browser for each</li>
+					<li><strong>Chrome <strong>Desktop </strong>11-15</strong> - Tested on OS X 10.6.7 and Windows 7</li>
+					<li><strong>Firefox Desktop 4-8</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>
+					<li><strong>Samsung Bada</strong> - Tested on the device's stock Dolphin Browser</li>
+					<li><strong>Android UCWeb</strong> - Tested on Android 2.3</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>
 				
-				<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/getting-started.html">Quick start guide</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>

docs/api/data-attributes.html

@@ -0,0 +1,460 @@
+<!DOCTYPE html> 
+<html class="ui-mobile-rendering"> 
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Data Attribute Reference</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" /> 
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.js"></script>
+</head> 
+<body> 
+
+<div data-role="page" class="type-interior">
+
+	<div data-role="header" data-theme="f">
+		<h1>Data Attributes</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>Data- attribute reference</h2>
+			<p>The jQuery Mobile framework uses HTML5 <code>data-</code> attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported. To avoid naming conflicts with other plugins or frameworks that also use <code>data-</code> attributes, set a custom namespace by modifying the <a href="globalconfig.html"><code>ns</code> global option</a>.<p>
+
+				<style>
+					table { width:100%; border-bottom:1px solid #ccc; }
+					th { text-align:left; width: 170px; }
+					th, td { vertical-align:top; border-top:1px solid #ccc; padding: 6px 10px 4px 0; }
+				</style>
+
+			<h2><a href="../buttons/buttons-types.html">Button</a></h2>
+			<p>Links with <code>data-role="button"</code>. Input-based buttons and button elements are auto-enhanced, no <code>data-role</code> required</p>
+			<table>
+				<tr>
+					<th>data-corners</th>
+					<td><strong>true</strong> | false</td>
+				</tr>
+				<tr>
+					<th>data-icon</th>
+					<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
+				</tr>
+				<tr>
+					<th>data-iconpos</th>
+					<td><strong>left</strong> | right | top | bottom |  notext</td>
+				</tr>
+				<tr>
+					<th>data-iconshadow</th>
+					<td><strong>true</strong> | false</td>
+				</tr>
+				<tr>
+					<th>data-inline</th>
+					<td>true | <strong>false</strong></td>
+				</tr>
+				<tr>
+					<th>data-shadow</th>
+					<td><strong>true</strong> | false</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z)</td>
+				</tr>
+			</table>
+			<p>Multiple buttons can be wrapped in a container with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the buttons to sit side-by-side.</p>
+
+
+			<h2><a href="../forms/checkboxes/">Checkbox</a></h2>
+			<p>Pairs of labels and inputs with <code>type="checkbox"</code> are auto-enhanced, no <code>data-role</code> required</p>
+			<table>
+				<tr>
+					<th>data-role</th>
+					<td>none (prevents auto-enhancement to use native control)</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z) - Added to the form element</td>
+				</tr>
+			</table>
+
+			<h2><a href="../content/content-collapsible.html">Collapsible</a></h2>
+			<p>A heading and content wrapped in a container with the <code>data-role="collapsible"</code></p>
+			<table>
+				<tr>
+					<th>data-collapsed</th>
+					<td><strong>true</strong> | false</td>
+				</tr>
+				<tr>
+					<th>data-content-theme</th>
+					<td>swatch letter (a-z)</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z)</td>
+				</tr>
+			</table>
+
+			<h2><a href="../content/content-collapsible-set.html">Collapsible set</a></h2>
+			<p>A number of collapsibles wrapped in a container with the <code>data-role="collapsible-set"</code></p>
+			<table>
+				<tr>
+					<th>data-content-theme</th>
+					<td>swatch letter (a-z) - Sets all collapsibles in set</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z) - Sets all collapsibles in set</td>
+				</tr>
+			</table>
+			
+			<h2><a href="../pages/page-dialogs.html">Dialog</a></h2>
+			<p>Page with <code>data-role="page"</code> linked to with <code>data-rel="dialog"</code> on the anchor.</p>
+			<table>
+				<tr>
+					<th>data-close-btn-text</th>
+					<td>string (text for the close button, dialog only)</td>
+				</tr>
+				<tr>
+					<th>data-dom-cache</th>
+					<td>true | <strong>false</strong></td>
+				</tr>
+				<tr>
+					<th>data-fullscreen</th>
+					<td>true | false (used in conjunction with fixed toolbars)</td>
+				</tr>
+				<tr>
+					<th>data-overlay-theme</th>
+					<td>swatch letter (a-z) - overlay theme when the page is opened in a dialog</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z)</td>
+				</tr>
+				<tr>
+					<th>data-title</th>
+					<td>string (title used when page is shown)</td>
+				</tr>
+			</table>
+
+			<h2><a href="../pages/page-anatomy.html">Content</a></h2>
+			<p>Container with <code>data-role="content"</code></p>
+			<table>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z)</td>
+				</tr>
+			</table>
+
+
+			<h2><a href="../forms/docs-forms.html">Field container</a></h2>
+			<p>Container with <code>data-role="fieldcontain"</code> wrapped around label/form element pair</p>
+
+			<h2><a href="../forms/switch/">Flip toggle switch</a></h2>
+			<p>Select with <code>data-role="slider"</code>, two options only</p>
+			<table>
+				<tr>
+					<th>data-role</th>
+					<td>none (prevents auto-enhancement to use native control)</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z) - Added to the form element</td>
+				</tr>
+				<tr>
+					<th>data-track-theme</th>
+					<td>swatch letter (a-z) - Added to the form element</td>
+				</tr>
+			</table>
+
+			<h2><a href="../toolbars/docs-footers.html">Footer</a></h2>
+			<p>Container with <code>data-role="footer"</code></p>
+			<table>
+				<tr>
+					<th>data-id</th>
+					<td>string (unique id, useful in persistent footers)</td>
+				</tr>
+				<tr>
+					<th>data-position</th>
+					<td>fixed</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z)</td>
+				</tr>
+			</table>
+
+			<h2><a href="../toolbars/docs-headers.html">Header</a></h2>
+			<p>Container with <code>data-role="header"</code></p>
+			<table>
+				<tr>
+					<th>data-position</th>
+					<td>fixed</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z)</td>
+				</tr>
+			</table>
+
+			<h2><a href="../pages/page-links.html">Link</a></h2>
+			<p>Links, including those with a <code>data-role="button"</code>, and form submit buttons share these attributes</p>
+			<table>
+				<tr>
+					<th>data-ajax</th>
+					<td><strong>true</strong> | false</td>
+				</tr>
+				<tr>
+					<th>data-direction</th>
+					<td>reverse (reverse page transition animation)</td>
+				</tr>
+				<tr>
+					<th>data-dom-cache</th>
+					<td>true | <strong>false</strong></td>
+				</tr>
+				<tr>
+					<th>data-prefetch</th>
+					<td>true | <strong>false</strong></td>
+				</tr>
+				<tr>
+					<th>data-rel</th>
+					<td>back (to move one step back in history)<br />
+						dialog (to open link styled as dialog, not tracked in history)<br />
+						external (for linking to another domain)</td>
+				</tr>
+				<tr>
+					<th>data-transition</th>
+					<td><strong>slide</strong> | slideup | slidedown | pop | fade | flip</td>
+				</tr>
+			</table>
+
+			<h2><a href="../lists/docs-lists.html">Listview</a></h2>
+			<p>OL or UL with <code>data-role="listview"</code></p>
+			<table>
+				<tr>
+					<th>data-count-theme</th>
+					<td>swatch letter (a-z)</td>
+				</tr>
+				<tr>
+					<th>data-dividertheme</th>
+					<td>swatch letter (a-z)</td>
+				</tr>
+				<tr>
+					<th>data-filter</th>
+					<td>true | <strong>false</strong></td>
+				</tr>
+				<tr>
+					<th>data-filter-placeholder</th>
+					<td>string</td>
+				</tr>
+				<tr>
+					<th>data-filter-theme</th>
+					<td>swatch letter (a-z)</td>
+				</tr>
+				<tr>
+					<th>data-inset</th>
+					<td>true | <strong>false</strong></td>
+				</tr>
+				<tr>
+					<th>data-split-icon</th>
+					<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
+				</tr>
+				<tr>
+					<th>data-split-theme</th>
+					<td>swatch letter (a-z)<td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z)</td>
+				</tr>
+			</table>
+
+			<h2><a href="../lists/docs-lists.html">Listview item</a></h2>
+			<p>LI within a listview</p>
+			<table>
+				<tr>
+					<th>data-filtertext</th>
+					<td>string (filter by this value instead of inner text)</td>
+				</tr>
+				<tr>
+					<th>data-icon</th>
+					<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
+				</tr>
+				<tr>
+					<th>data-role</th>
+					<td>list-divider</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z) - can also be set on individual LIs</td>
+				</tr>
+			</table>
+			<h2><a href="../toolbars/docs-navbar.html">Navbar</a></h2>
+			<p>A number of LIs wrapped in a container with <code>data-role="navbar"</code></p>
+			<table>
+				<tr>
+					<th>data-icon</th>
+					<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
+				</tr>
+				<tr>
+					<th>data-iconpos</th>
+					<td><strong>left</strong> | right | top | bottom |  notext</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z) - can also be set on individual LIs</td>
+				</tr>
+			</table>
+			<h2><a href="../pages/page-anatomy.html">Page</a></h2>
+			<p>Container with <code>data-role="page"</code></p>
+			<table>
+				<tr>
+					<th>data-add-back-btn</th>
+					<td>true | <strong>false</strong> (auto add back button, header only)</td>
+				</tr>
+				<tr>
+					<th>data-back-btn-text</th>
+					<td>string</td>
+				</tr>
+				<tr>
+					<th>data-back-btn-theme</th>
+					<td>swatch letter (a-z)</td>
+				</tr>
+				<tr>
+					<th>data-close-btn-text</th>
+					<td>string (text for the close button, dialog only)</td>
+				</tr>
+				<tr>
+					<th>data-dom-cache</th>
+					<td>true | <strong>false</strong></td>
+				</tr>
+				<tr>
+					<th>data-fullscreen</th>
+					<td>true | false (used in conjunction with fixed toolbars)</td>
+				</tr>
+				<tr>
+					<th>data-overlay-theme</th>
+					<td>swatch letter (a-z) - overlay theme when the page is opened in a dialog</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z)</td>
+				</tr>
+				<tr>
+					<th>data-title</th>
+					<td>string (title used when page is shown)</td>
+				</tr>
+			</table>
+
+			<h2><a href="../forms/radiobuttons/">Radio button</a></h2>
+			<p>Pairs of labels and inputs with <code>type="radio"</code> are auto-enhanced, no <code>data-role</code> required</p>
+			<table>
+				<tr>
+					<th>data-role</th>
+					<td>none (prevents auto-enhancement to use native control)</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z) - Added to the form element</td>
+				</tr>
+			</table>
+
+			<h2><a href="../forms/selects/">Select</a></h2>
+			<p>All <code>select</code> form elements are auto-enhanced, no <code>data-role</code> required</p>
+			<table>
+				<tr>
+					<th>data-icon</th>
+					<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
+				</tr>
+				<tr>
+					<th>data-iconpos</th>
+					<td><strong>left</strong> | right | top | bottom |  notext</td>
+				</tr>
+				<tr>
+					<th>data-inline</th>
+					<td>true | <strong>false</strong></td>
+				</tr>
+				<tr>
+					<th>data-native-menu</th>
+					<td><strong>true</strong> | false</td>
+				</tr>
+				<tr>
+					<th>data-overlay-theme</th>
+					<td>swatch letter (a-z) - overlay theme for non-native selects</td>
+				</tr>
+				<tr>
+					<th>data-placeholder</th>
+					<td>true | false - Add to the Option</td>
+				</tr>
+				<tr>
+					<th>data-role</th>
+					<td>none (prevents auto-enhancement to use native control)</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z) - Added to the form element</td>
+				</tr>	
+			</table>
+			<p>Multiple selects can be wrapped in a fieldset with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the selects to sit side-by-side.</p>
+
+			<h2><a href="../forms/slider/">Slider</a></h2>
+			<p>Inputs with <code>type="range"</code> are auto-enhanced, no <code>data-role</code> required</p>
+			<table>
+				<tr>
+					<th>data-role</th>
+					<td>none (prevents auto-enhancement to use native control)</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z) - Added to the form element</td>
+				</tr>
+				<tr>
+					<th>data-track-theme</th>
+					<td>swatch letter (a-z) - Added to the form element</td>
+				</tr>
+			</table>
+
+			<h2><a href="../forms/textinputs/">Text input &amp; Textarea</a></h2>
+			<p>Input <code>type="text|number|search|etc."</code> or <code>textarea</code> elements are auto-enhanced, no <code>data-role</code> required</p>
+			<table>
+				<tr>
+					<th>data-role</th>
+					<td>none (prevents auto-enhancement to use native control)</td>
+				</tr>
+				<tr>
+					<th>data-theme</th>
+					<td>swatch letter (a-z) - Added to the form element</td>
+				</tr>
+			</table>
+
+		</div><!--/content -->		
+
+	<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><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
+					<li data-theme="a"><a href="../../docs/api/data-attributes.html">Data attribute reference</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>

docs/api/events.html

@@ -1,112 +1,511 @@
-<!DOCTYPE html> 
-<html> 
+<!DOCTYPE html>
+<html class="ui-mobile-rendering">
 	<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/jquery.mobile.css" />
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-</head> 
-<body> 
 
-<div data-role="page">
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.js"></script>
+</head>
+<body>
 
-	<div data-role="header">
+<div data-role="page" class="type-interior">
+
+	<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 <code>pageInit()</code>, not <code>$(document).ready()</code></h4>
+		<p>The first thing you learn in jQuery is to call code inside the <code>$(document).ready()</code> 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>pageinit</code> event. This event is explained in detail at the bottom of this page.</p></div>
+
+      <p> &nbsp;</p>
+		<div class="ui-body ui-body-e">
+		<h4 style="margin:.5em 0">Important: <code>pageCreate()</code> vs <code>pageInit()</code></h4>
+   <p> 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>pagecreate</code> event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the <code>pagecreate</code> event in place of direct calls to the widget methods. As a result, users binding to the <code>pagecreate</code> in <code>mobileinit</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>pageinit</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>pagecreate</code> to manipulate the enhanced markup before the page was shown, it's very likely you'll want to migrate to 'pageinit'.
+		</p></div>
+
 		<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 <code>mousedown</code>, <code>mouseup</code>, and <code>click</code> events roughly 300ms after the <code>touchend</code> 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, the 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 <code>click</code> instead of <code>vclick</code> 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 <code>preventDefault()</code> on a <code>vclick</code> event to cancel an element's default click behavior. On mouse based devices, calling <code>preventDefault()</code> on a <code>vclick</code> event equates to calling <code>preventDefault()</code> on the real <code>click</code> event during the bubble event phase. On touch based devices, it's a bit more complicated since the actual <code>click</code> event is dispatched about 300ms after the <code>vclick</code> event is dispatched. For touch devices, calling <code>preventDefault()</code> on a <code>vclick</code> event triggers some code in the vmouse plugin that attempts to catch the next <code>click</code> event that gets dispatched by the browser, during the capture event phase, and calls <code>preventDefault()</code> and <code>stopPropagation()</code> on it. As mentioned in the warning above, it is sometimes difficult to 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 <code>click</code> event by coordinates. There are still cases where both target and coordinate identification fail, which results in the <code>click</code> 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 <code>click</code> 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 <code>orientationchange</code> 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>
+
+			<p>	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 <code>orientationChange</code> all together with <code>$.mobile.orientationChangeEnabled = false</code> to let the fallback resize code trigger your bindings.</p>
+			</div>
 		</dl>
-			
+
 		<h2>Scroll events</h2>
 		<dl>
 			<dt><code>scrollstart</code></dt>
 			<dd>Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts.</dd>
-		<dl>	
+		</dl>
+		<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 <code>pagebeforeload</code>. The 2nd event will be either <code>pageload</code> or <code>pageloadfailed</code>.</p>
+		<dl>
+			<dt><code>pagebeforeload</code></dt>
+			<dd><p>Triggered before any load request is made. Callbacks bound to this event can call <code>preventDefault()</code> on the event to indicate that they are handling the load request. Callbacks that do this *MUST* make sure they call <code>resolve()</code> or <code>reject()</code> 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>
+            	<li><code>xhr</code> (object)
+            	  <ul>
+            	    <li>The jQuery XMLHttpRequest object used when attempting to load the page. This is what gets passed as the 3rd argument to the framework's $.ajax() success callback.</li>
+          	    </ul>
+            	</li>
+            	<li><code>textStatus</code> (null or string)
+            	  <ul>
+            	    <li>According to the jQuery Core <a href="http://api.jquery.com/jQuery.ajax/">documentation</a>, this will be a string describing the status. This is what gets passed as the 2nd argument to the framework's $.ajax() error callback.</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>
+            	<li><code>xhr</code> (object)
+            	  <ul>
+            	    <li>The jQuery XMLHttpRequest object used when attempting to load the page. This is what gets passed as the first argument to the framework's $.ajax() error callback.</li>
+          	    </ul>
+            	</li>
+            	<li><code>textStatus</code> (null or string)
+            	  <ul>
+            	    <li>According to the jQuery Core <a href="http://api.jquery.com/jQuery.ajax/">documentation</a>, possible values for this property, aside from null, are &quot;timeout&quot;, &quot;error&quot;, &quot;abort&quot;, and &quot;parsererror&quot;. This is what gets passed as the 2nd argument to the framework's $.ajax() error callback.</li>
+          	    </ul>
+            	</li>
+            	<li><code>errorThrown</code> (null, string, object)
+            	  <ul>
+            	    <li>According to the jQuery Core <a href="http://api.jquery.com/jQuery.ajax/">documentation</a>, this property may be an exception object if one occured, or if an HTTP error occured this will be set to the textual portion of the HTTP status. This is what gets passed as the 3rd argument to the framework's $.ajax() error callback.</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 <code>toPage</code> and <code>options</code> properties to alter the behavior of the current <code>changePage()</code> call. So for example, the <code>toPage</code> 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 <code>changePage()</code> 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 <code>changePage()</code> 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 <code>prevPage</code> or <code>nextPage</code> 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>	
-		
-		<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>
-		
-		<div class="ui-body ui-body-e">
-			<p><strong>Note on Page IDs: </strong> Page elements in jQuery Mobile utilize 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>
-		
+			<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>
+
+			<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>
+
+
+
+		<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, hide, or remove content from the page, or manipulate it in any way that affects the dimensions of the page, can also manually trigger this <code>updatelayout</code> event to ensure components on the page update in response to the changes.</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/data-attributes.html">Data attribute reference</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>

docs/api/globalconfig.html

@@ -1,27 +1,33 @@
-<!DOCTYPE html> 
-<html> 
+<!DOCTYPE html>
+<html class="ui-mobile-rendering">
 	<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/jquery.mobile.css" />
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
-</head> 
-<body> 
 
-<div data-role="page">
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.js"></script>
+</head>
+<body>
 
-	<div data-role="header">
+<div data-role="page" class="type-interior">
+
+	<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>
-			
+			<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 <code>document.ready</code> 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 +35,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 +44,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,64 +57,117 @@ $(document).bind("mobileinit", function(){
 });
 				</code>
 			</pre>
-			
+
 			<p>...or by setting them individually:</p>
 			<pre>
 				<code>
-$(document).live("mobileinit", function(){
+$(document).bind("mobileinit", function(){
   <strong>$.mobile.foo = bar;</strong>
 });
 				</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 <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><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>transitions (<em>array</em>, default: ['slide', 'slideup', 'slidedown', 'pop', 'flip', 'fade']):</dt> 
-	<dd>Available CSS transitions in the CSS.</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>defaultTransition (<em>string</em>, default: 'slide'):</dt> 
+	<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> 
+
+	<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: 250</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>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><code>loadingMessageTheme</code> <em>string</em>, default: "a"</dt>
+	<dd>Set the theme that the loading message box uses, when text is visible.</dd>
 
-	<dt>gradeA (<em>function that returns a boolean</em>, default: a function returning the value of $.support.mediaquery):</dt> 
+	<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>pageLoadErrorMessageTheme</code> <em>string</em>, default: "e"</dt>
+	<dd>Set the theme that the error message box uses.</dd>
+	
+	<dt><code>loadingMessageTextVisible</code> <em>string</em>, default: false</dt>
+	<dd>Should the text be visible when loading message is shown. (note: currently, the text is always visible for loading errors)</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/data-attributes.html">Data attribute reference</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>

docs/api/index.html

@@ -1,28 +1,32 @@
 <!DOCTYPE html>
-<html>
+<html class="ui-mobile-rendering">
 <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/jquery.mobile.css" />
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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="data-attributes.html">Data attribute reference</a></li>
 			<li><a href="themes.html">Theme framework</a></li>
 		</ul>
 
@@ -30,4 +34,4 @@
 
 </div>
 </body>
-</html>
+</html>

docs/api/mediahelpers.html

@@ -1,28 +1,36 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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>
-			<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>
+			<h3>Orientation Classes </h3>
+
+			<p>The HTML element will always have a class of either <code>"portrait"</code> or <code>"landscape"</code>, depending on the orientation of the browser or device. You can utilize these in your CSS like this:</p>
 			<pre>
 			<code>
 .portrait {
@@ -35,7 +43,7 @@
 			</pre>
 			
 			<h3>Min/Max Width Breakpoint Classes</h3>
-			<p>By default, we create min and max breakpoint classes at the following widths: <code>320</code>,<code>480</code>,<code>768</code>,<code>1024</code>. These translate to classes that look like this: "min-width-320px", "max-width-480px", and are meant to be used as a replacement of (or in addition to) the media query equivalents they mimic.</p>
+			<p>By default, we create min and max breakpoint classes at the following widths: <code>320</code>,<code>480</code>,<code>768</code>,<code>1024</code>. These translate to classes that look like this: <code>"min-width-320px"</code>, <code>"max-width-480px"</code>, and are meant to be used as a replacement of (or in addition to) the media query equivalents they mimic.</p>
 <pre>
 			<code>
 .myelement { 
@@ -71,9 +79,51 @@ $.mobile.addResolutionBreakpoints(1200);
 $.mobile.addResolutionBreakpoints([1200, 1440]);
 			</code>
 </pre>	
+
+<h3>Running Media Queries</h3>
+<p>jQuery Mobile provides a function that allows you to test whether a particular CSS Media Query applies. Simple call <code>$.mobile.media()</code> and pass a media type or query. If the browser supports that type or query, and it currently applies, the function will return true. If not, it'll return false.</p>
+
+<pre>
+			<code>
+//test for screen media type
+$.mobile.media("screen");
+
+//test  a min-width media query
+$.mobile.media("screen and (min-width: 480px)");
+
+//test for iOS retina display
+$.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/data-attributes.html">Data attribute reference</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>

docs/api/methods.html

@@ -1,46 +1,78 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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>dataUrl</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 +80,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 not.</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,25 +522,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>//scroll to Y 100px</strong> 			
-$.mobile.silentScroll(100);	
-			</code>
-			</pre>
-			
-			</dd>
+
 			
 			
 			
@@ -136,7 +533,31 @@ $.mobile.silentScroll(100);
 			
 			
 		</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/data-attributes.html">Data attribute reference</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 -->
 

docs/api/themes.html

@@ -1,22 +1,27 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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> 
@@ -29,6 +34,9 @@
 				<li>A <strong>simplified icon set</strong> including those most commonly used for mobile, in a sprite to reduce image weight</li> 
 			</ul>
 			
+		<h2>ThemeRoller</h2>
+		<a href="http://www.jquerymobile.com/themeroller" rel="external"><img src="../_assets/images/themroller-mobile-logo.png" width="250" style="float:right; margin-left:25px;" alt="Themroller Mobile Logo"></a>
+		The easiest way to create custom themes is with the <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller tool</a>. It allows you to build a theme, then download a custom CSS file, ready to be dropped into your project.
 		
 		<h2>Themes &amp; swatches</h2>
 		
@@ -45,14 +53,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,17 +68,17 @@
 		<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 -->
 
 
 		<p>If a theme isn't specified on a content block, the framework will default to "c" to maximize contrast against the default header "a", as shown here:</p>
 					
-			<div data-role="header" data-position="inline">
+			<div data-role="header">
 				<a href="#" data-icon="arrow-l">Back</a>
 				<h1>Default Header</h1>
 			</div>
@@ -90,10 +98,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 +157,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 +225,64 @@
 		<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-corner" instead of "corner", like this: <code>.ui-<strong>btn-corner</strong>-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><a href="../../docs/api/data-attributes.html">Data attribute reference</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>

docs/buttons/api-buttons.html

@@ -1,18 +1,22 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
-	<script type="text/javascript" src="../../js/"></script>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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">

docs/buttons/buttons-events.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html class="ui-mobile-rendering">
+	<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/jquery.mobile.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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>
+

docs/buttons/buttons-grouped.html

@@ -1,30 +1,35 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" /> 
 	<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> 
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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;
 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;No&lt;/a&gt;
 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Maybe&lt;/a&gt;
 &lt;/div&gt;
-</pre></code>
+</code></pre>
 
 		<p>By default, grouped buttons are presented as a vertical list:</p>
 		
@@ -45,8 +50,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 +62,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>

docs/buttons/buttons-icons.html

@@ -1,31 +1,35 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" />  
 	<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 data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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 +37,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 +71,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 +90,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,8 +106,24 @@
 			<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: <code>ui-icon-myapp-email</code>. </p>
+		<p>You can then write a CSS rule in your stylesheet that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
+		<p> In this example, we're just pointing to a standalone icon image, but you could just as easily use an icon sprite and specify the positioning instead, just like the icon sprite we use in the framework.</p>
+		
+<pre><code>.ui-icon-myapp-email {
+	background-image: url("app-icon-email.png");
+}</code></pre>
+
+		<p>This will create the standard resolution icon, but many devices now have very high resolution displays, like the retina display on the iPhone 4. To add a HD icon, create an icon that is 36x36 pixels (exactly double the 18 pixel size), and add second rule that uses the <code>-webkit-min-device-pixel-ratio: 2</code> media query to target a rule only to high resolution displays. Specify the background image for the HD icon file and set the background size to 18x18 pixels which will fit the 36 pixel icon into the same 18 pixel space. The media query block can wrap multiple icon rules:</p>
+<pre><code>
+@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+	.ui-icon-myapp-email {
+		background-image: url("app-icon-email-highres.png");
+		background-size: 18px 18px;
+	}
+	...more HD icon rules go here...
+}
+</code></pre>			
 		 	
 		<h2>Icons and themes</h2>
 		<p>The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches in out theme.</p>
@@ -125,6 +147,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 +170,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 +193,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>

docs/buttons/buttons-inline.html

@@ -1,43 +1,45 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" />  
 	<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 data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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;
-</pre></code>
+&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 +47,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>

docs/buttons/buttons-methods.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html class="ui-mobile-rendering">
+	<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/jquery.mobile.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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>
+

docs/buttons/buttons-options.html

@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html class="ui-mobile-rendering">
+	<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/jquery.mobile.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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>
+

docs/buttons/buttons-themes.html

@@ -1,41 +1,45 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" />  
 	<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 data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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;			
-</pre></code>
+</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 +50,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 +59,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 +68,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 +77,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 +85,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 +94,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>

docs/buttons/buttons-types.html

@@ -1,28 +1,42 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" />  
 	<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 data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to buttons.</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 +45,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>

docs/buttons/index.html

@@ -1,34 +1,40 @@
 <!DOCTYPE html> 
-<html> 
+<html class="ui-mobile-rendering"> 
 	<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/jquery.mobile.css" />  
 	<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 data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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>

docs/config/dialogTransition.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html> 
+<html class="ui-mobile-rendering"> 
+	<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/jquery.mobile.css" />  
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+	<script src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.js"></script>
+	<script>
+		$(document).bind("mobileinit", function(){
+			$.mobile.defaultDialogTransition = 'flip';
+		});
+	</script>
+	<script>
+		require( {
+			baseUrl: "../../js"
+		}) ( [ "jquery.mobile.docs" ] )
+	</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>

docs/config/iOSFullscreen.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class="ui-mobile-rendering">
+	<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/jquery.mobile.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+	
+	<script src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.js"></script>
+	<script>
+	$(document).bind("mobileinit", function() {
+		if (!!window.navigator.standalone) {
+			$.mobile.page.prototype.options.addBackBtn = true;
+		}
+	});
+	</script>
+	<script>
+		require( {
+			baseUrl: "../../js"
+		}) ( [ "jquery.mobile.docs" ] )
+	</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>

docs/config/index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html> 
+<html class="ui-mobile-rendering"> 
+	<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/jquery.mobile.css" />  
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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>

docs/config/jq17b1.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html> 
+<html class="ui-mobile-rendering"> 
+	<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/jquery.mobile.css" />  
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="http://code.jquery.com/jquery-1.7b1.js"></script>
+	
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+	<script src="../../js/jquery.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>