From 016eb2487a0c781d35a75131134db97453f8ace7 Mon Sep 17 00:00:00 2001
From: Richard Worth <rdworth@gmail.com>
Date: Wed, 31 Dec 2008 06:29:31 +0000
Subject: [PATCH] demos: moved the demos.css link down so it can override
 default theme styles. other minor updates.

---
 demos/accordion/collapsible.html          |  2 +-
 demos/accordion/custom_icons.html         |  2 +-
 demos/accordion/default.html              |  2 +-
 demos/accordion/fillspace.html            |  2 +-
 demos/accordion/mouseover.html            |  2 +-
 demos/datepicker/buttonbar.html           |  2 +-
 demos/datepicker/default.html             |  2 +-
 demos/datepicker/dropdown_month_year.html |  2 +-
 demos/datepicker/inline.html              |  2 +-
 demos/datepicker/multiple_calendars.html  |  2 +-
 demos/demos.css                           |  6 +++++-
 demos/dialog/default.html                 |  2 +-
 demos/dialog/modal.html                   |  2 +-
 demos/dialog/modal_confirmation.html      |  2 +-
 demos/dialog/modal_form.html              |  2 +-
 demos/dialog/modal_message.html           |  2 +-
 demos/draggable/axis.html                 |  4 ++--
 demos/draggable/containment.html          |  2 +-
 demos/draggable/cursorat.html             |  4 ++--
 demos/draggable/default.html              |  2 +-
 demos/draggable/delaydistance.html        |  4 ++--
 demos/draggable/grid.html                 |  4 ++--
 demos/draggable/handle.html               |  6 +++---
 demos/draggable/helper.html               |  4 ++--
 demos/draggable/opacity.html              |  4 ++--
 demos/draggable/revert.html               |  4 ++--
 demos/draggable/scroll.html               |  4 ++--
 demos/draggable/snap.html                 |  8 ++++----
 demos/draggable/sortable.html             | 11 +++++------
 demos/draggable/zindexstack.html          |  4 ++--
 demos/droppable/accept.html               | 10 ++++------
 demos/droppable/activeclass.html          |  6 +++---
 demos/droppable/default.html              |  6 +++---
 demos/droppable/greedy.html               | 10 ++++------
 demos/droppable/hoverclass.html           |  6 +++---
 demos/droppable/revert.html               |  6 +++---
 demos/droppable/tolerance.html            |  6 +++---
 demos/progressbar/default.html            |  2 +-
 demos/progressbar/resize.html             | 12 ++----------
 demos/resizable/alsoresize.html           |  2 +-
 demos/resizable/animate.html              |  2 +-
 demos/resizable/aspectratio.html          |  2 +-
 demos/resizable/containment.html          |  2 +-
 demos/resizable/default.html              |  2 +-
 demos/resizable/delay.html                |  2 +-
 demos/resizable/distance.html             |  2 +-
 demos/resizable/ghost.html                |  2 +-
 demos/resizable/grid.html                 |  2 +-
 demos/resizable/max.html                  |  2 +-
 demos/resizable/min.html                  |  2 +-
 demos/slider/colorpicker.html             |  2 +-
 demos/slider/default.html                 |  2 +-
 demos/slider/multiple_vertical.html       |  2 +-
 demos/slider/range.html                   |  2 +-
 demos/slider/range_vertical.html          |  2 +-
 demos/slider/rangemax.html                |  2 +-
 demos/slider/rangemin.html                |  2 +-
 demos/slider/slider_vertical.html         |  2 +-
 demos/slider/steps.html                   |  2 +-
 demos/sortable/connectwith.html           |  2 +-
 demos/sortable/default.html               |  2 +-
 demos/sortable/delaydistance.html         |  2 +-
 demos/sortable/droponempty.html           |  2 +-
 demos/sortable/droppable.html             | 16 ++++++++--------
 demos/sortable/floating.html              | 10 +++++-----
 demos/sortable/items.html                 | 15 +++++++--------
 demos/sortable/placeholder.html           | 10 +++++-----
 demos/tabs/ajax.html                      |  2 +-
 demos/tabs/collapsible.html               |  2 +-
 demos/tabs/default.html                   |  2 +-
 demos/tabs/mouseover.html                 |  2 +-
 71 files changed, 131 insertions(+), 141 deletions(-)

diff --git a/demos/accordion/collapsible.html b/demos/accordion/collapsible.html
index 68843a68e..e1a1584dd 100644
--- a/demos/accordion/collapsible.html
+++ b/demos/accordion/collapsible.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Accordion - Collapsible Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.accordion.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#accordion").accordion({
diff --git a/demos/accordion/custom_icons.html b/demos/accordion/custom_icons.html
index 3fb00167f..91519a186 100644
--- a/demos/accordion/custom_icons.html
+++ b/demos/accordion/custom_icons.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Accordion - Custom Icon Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.accordion.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#accordion").accordion({
diff --git a/demos/accordion/default.html b/demos/accordion/default.html
index dc1a7f2f7..c4f9259f8 100644
--- a/demos/accordion/default.html
+++ b/demos/accordion/default.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Accordion - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.accordion.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#accordion").accordion({
diff --git a/demos/accordion/fillspace.html b/demos/accordion/fillspace.html
index 2e880dd48..63778064b 100644
--- a/demos/accordion/fillspace.html
+++ b/demos/accordion/fillspace.html
@@ -2,12 +2,12 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Accordion - FillSpace Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.accordion.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#accordion").accordion({
diff --git a/demos/accordion/mouseover.html b/demos/accordion/mouseover.html
index ff3e5a6c1..a6d498afb 100644
--- a/demos/accordion/mouseover.html
+++ b/demos/accordion/mouseover.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Accordion - Mouseover Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.accordion.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#accordion").accordion({
diff --git a/demos/datepicker/buttonbar.html b/demos/datepicker/buttonbar.html
index cc7111044..783799347 100644
--- a/demos/datepicker/buttonbar.html
+++ b/demos/datepicker/buttonbar.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Datepicker - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$('#date123').datepicker({
diff --git a/demos/datepicker/default.html b/demos/datepicker/default.html
index c4efbb4ec..b0b3ac0dc 100644
--- a/demos/datepicker/default.html
+++ b/demos/datepicker/default.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Datepicker - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#date123").datepicker();
diff --git a/demos/datepicker/dropdown_month_year.html b/demos/datepicker/dropdown_month_year.html
index dc381bf23..980e27326 100644
--- a/demos/datepicker/dropdown_month_year.html
+++ b/demos/datepicker/dropdown_month_year.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Datepicker - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$('#date123').datepicker({
diff --git a/demos/datepicker/inline.html b/demos/datepicker/inline.html
index 8e7f2d5c3..5682f455e 100644
--- a/demos/datepicker/inline.html
+++ b/demos/datepicker/inline.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Datepicker - Inline Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#date123").datepicker();
diff --git a/demos/datepicker/multiple_calendars.html b/demos/datepicker/multiple_calendars.html
index e213321ad..a1ef312dc 100644
--- a/demos/datepicker/multiple_calendars.html
+++ b/demos/datepicker/multiple_calendars.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Datepicker - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$('#date123').datepicker({
diff --git a/demos/demos.css b/demos/demos.css
index 4541b8adf..704ca0ed4 100644
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -178,4 +178,8 @@ div.demo-description {
 	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
 	font-size: 1.3em;
 	line-height: 1.4em;
-}
\ No newline at end of file
+}
+
+.ui-draggable, .ui-droppable {
+	background-position: top left;
+}
diff --git a/demos/dialog/default.html b/demos/dialog/default.html
index 7a8aa0dee..e004e4690 100644
--- a/demos/dialog/default.html
+++ b/demos/dialog/default.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Dialog - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#dialog").dialog();
diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html
index 84e998e43..6789ec8e9 100644
--- a/demos/dialog/modal.html
+++ b/demos/dialog/modal.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Dialog - Modal Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#dialog").dialog({
diff --git a/demos/dialog/modal_confirmation.html b/demos/dialog/modal_confirmation.html
index 670131a38..13666a623 100644
--- a/demos/dialog/modal_confirmation.html
+++ b/demos/dialog/modal_confirmation.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Dialog - Modal Confirmation Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#dialog").dialog({
diff --git a/demos/dialog/modal_form.html b/demos/dialog/modal_form.html
index 33894226f..494fd3a7e 100644
--- a/demos/dialog/modal_form.html
+++ b/demos/dialog/modal_form.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Dialog - Modal Form Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#dialog").dialog({
diff --git a/demos/dialog/modal_message.html b/demos/dialog/modal_message.html
index 5f476932c..8d2266181 100644
--- a/demos/dialog/modal_message.html
+++ b/demos/dialog/modal_message.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Dialog - Modal Message Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#dialog").dialog({
diff --git a/demos/draggable/axis.html b/demos/draggable/axis.html
index c2c234071..61dd072fb 100644
--- a/demos/draggable/axis.html
+++ b/demos/draggable/axis.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Constrained to one axis</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
 	#draggable { cursor: n-resize; }
 	#draggable2 { cursor: e-resize; }
 	</style>
diff --git a/demos/draggable/containment.html b/demos/draggable/containment.html
index 10250fb36..9ffc4c95b 100644
--- a/demos/draggable/containment.html
+++ b/demos/draggable/containment.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Containment</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
 	</style>
diff --git a/demos/draggable/cursorat.html b/demos/draggable/cursorat.html
index ec98a935a..e1c0c1b52 100644
--- a/demos/draggable/cursorat.html
+++ b/demos/draggable/cursorat.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Cursor at a certain position</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/draggable/default.html b/demos/draggable/default.html
index e0cc9a6ea..55a454ab9 100644
--- a/demos/draggable/default.html
+++ b/demos/draggable/default.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#draggable { width: 150px; height: 150px; padding: 0.5em; }
 	</style>
diff --git a/demos/draggable/delaydistance.html b/demos/draggable/delaydistance.html
index 84abedb4c..64b1ff684 100644
--- a/demos/draggable/delaydistance.html
+++ b/demos/draggable/delaydistance.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Distance and Delay</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/draggable/grid.html b/demos/draggable/grid.html
index 48a3d1752..03741e4dc 100644
--- a/demos/draggable/grid.html
+++ b/demos/draggable/grid.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Grid</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/draggable/handle.html b/demos/draggable/handle.html
index b3b9f2d2c..5dc950050 100644
--- a/demos/draggable/handle.html
+++ b/demos/draggable/handle.html
@@ -2,14 +2,14 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Handle</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
-	.ui-widget-header { cursor: move; }
+	#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	#draggable p { cursor: move; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/draggable/helper.html b/demos/draggable/helper.html
index 368cf0315..5bbdde4aa 100644
--- a/demos/draggable/helper.html
+++ b/demos/draggable/helper.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Helper</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/draggable/opacity.html b/demos/draggable/opacity.html
index 0ee3e18af..c407449bb 100644
--- a/demos/draggable/opacity.html
+++ b/demos/draggable/opacity.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Opacity</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	#draggable1, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/draggable/revert.html b/demos/draggable/revert.html
index c50f944bb..87822f8cb 100644
--- a/demos/draggable/revert.html
+++ b/demos/draggable/revert.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Revert</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/draggable/scroll.html b/demos/draggable/scroll.html
index c1d159710..ee1abd2f2 100644
--- a/demos/draggable/scroll.html
+++ b/demos/draggable/scroll.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Scroll</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/draggable/snap.html b/demos/draggable/snap.html
index f232ff397..0394196a5 100644
--- a/demos/draggable/snap.html
+++ b/demos/draggable/snap.html
@@ -2,14 +2,14 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Snap</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-content { width: 75px; height: 80px; padding: 0.5em; float: left; margin: 5px; }
-	.ui-widget-header { height: 130px; }
+	#draggable, #draggable2, #draggable3, #draggable4, #draggable5 { width: 75px; height: 80px; padding: 0.5em; float: left; margin: 5px; }
+	#snaptarget { height: 130px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
@@ -23,7 +23,7 @@
 </head>
 <body>
 
-<div class="ui-widget-header">
+<div id="snaptarget" class="ui-widget-header">
 	<p>I'm a snap target</p>
 </div>
 
diff --git a/demos/draggable/sortable.html b/demos/draggable/sortable.html
index 92ce2aff7..292f3e31d 100644
--- a/demos/draggable/sortable.html
+++ b/demos/draggable/sortable.html
@@ -2,21 +2,20 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Sortable - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
 	li { margin: 3px; padding: 2px; width: 150px; }
-	.ui-widget-header { margin-bottom: 10px; float: right; width: 100px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
-		$("ul.sortable").sortable();
-		$(".draggable").draggable({
+		$("#sortable").sortable();
+		$("#draggable").draggable({
 			connectToSortable: ['ul'],
 			helper: 'clone'
 		});
@@ -26,10 +25,10 @@
 <body>
 
 <ul>
-	<li class="ui-state-hover draggable">Drag me down</li>
+	<li id="draggable" class="ui-state-highlight">Drag me down</li>
 </ul>
 
-<ul class="sortable">
+<ul id="sortable">
 	<li class="ui-state-default">Item 1</li>
 	<li class="ui-state-default">Item 2</li>
 	<li class="ui-state-default">Item 3</li>
diff --git a/demos/draggable/zindexstack.html b/demos/draggable/zindexstack.html
index 102a64764..d41c6a5c6 100644
--- a/demos/draggable/zindexstack.html
+++ b/demos/draggable/zindexstack.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Z-Index / Stack</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	#draggable, #set, #set div { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
 	#set { width: 368px; height: 120px; }
 	</style>
 	<script type="text/javascript">
diff --git a/demos/droppable/accept.html b/demos/droppable/accept.html
index e49a250ff..1ef776dc6 100644
--- a/demos/droppable/accept.html
+++ b/demos/droppable/accept.html
@@ -2,20 +2,20 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Droppable - accept</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+	#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
 
-		$("#draggable,#draggable-nonvalid").draggable();
+		$("#draggable, #draggable-nonvalid").draggable();
 
 		$("#droppable").droppable({
 			accept: '#draggable',
@@ -39,8 +39,6 @@
 	<p>Drag me to my target</p>
 </div>
 
-
-
 <div id="droppable" class="ui-widget-header">
 	<p>accept: '#draggable'</p>
 </div>
diff --git a/demos/droppable/activeclass.html b/demos/droppable/activeclass.html
index 9c97d3ea3..08b7afa85 100644
--- a/demos/droppable/activeclass.html
+++ b/demos/droppable/activeclass.html
@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Droppable - activeClass</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+	#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/droppable/default.html b/demos/droppable/default.html
index 051636a1c..375a45871 100644
--- a/demos/droppable/default.html
+++ b/demos/droppable/default.html
@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Droppable - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+	#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/droppable/greedy.html b/demos/droppable/greedy.html
index d4bdb3fb9..7bb7144e9 100644
--- a/demos/droppable/greedy.html
+++ b/demos/droppable/greedy.html
@@ -2,16 +2,16 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Droppable - greedy</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	#droppable,#droppable2 { width: 200px; height: 160px; padding: 0.5em; float: left; margin: 10px; }
-	#droppable-inner,#droppable2-inner { width: 140px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+	#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+	#droppable, #droppable2 { width: 200px; height: 160px; padding: 0.5em; float: left; margin: 10px; }
+	#droppable-inner, #droppable2-inner { width: 140px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
@@ -44,8 +44,6 @@
 	<p>Drag me to my target</p>
 </div>
 
-
-
 <div id="droppable" class="ui-widget-header">
 	<p>Outer droppable (greedy deactivated)</p>
 	<div id="droppable-inner" class="ui-widget-header">
diff --git a/demos/droppable/hoverclass.html b/demos/droppable/hoverclass.html
index be6e9f9b8..eef118ac5 100644
--- a/demos/droppable/hoverclass.html
+++ b/demos/droppable/hoverclass.html
@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Droppable - hoverClass</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+	#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/droppable/revert.html b/demos/droppable/revert.html
index 56a3ea369..089fb14a6 100644
--- a/demos/droppable/revert.html
+++ b/demos/droppable/revert.html
@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Droppable - revert</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/droppable/tolerance.html b/demos/droppable/tolerance.html
index b0278c6ef..9cbd2d1fb 100644
--- a/demos/droppable/tolerance.html
+++ b/demos/droppable/tolerance.html
@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Droppable - tolerance</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+	#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+	#dropppable, #dropppable-fit, #dropppable-pointer, #dropppable-touch { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/progressbar/default.html b/demos/progressbar/default.html
index 012e18f07..94b451e57 100644
--- a/demos/progressbar/default.html
+++ b/demos/progressbar/default.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Progressbar - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#progressbar").progressbar({
diff --git a/demos/progressbar/resize.html b/demos/progressbar/resize.html
index e96938f75..e87f7a8a6 100644
--- a/demos/progressbar/resize.html
+++ b/demos/progressbar/resize.html
@@ -2,22 +2,18 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Progressbar - Resize Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
-
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#progressbar").progressbar({
 			value: 37
 		});
-	});
-	$(function() {
-		$("#progressbarWrapper").resizable({
-		});
+		$("#progressbarWrapper").resizable();
 	});
 	</script>
 </head>
@@ -31,15 +27,11 @@
 
 </div><!-- End demo -->
 
-
-
 <div class="demo-description">
 
 <p>Since the progress bar is coded in percentages for flexible sizing, it will resize to fit whatever block it's placed inside. Try resizing the height and width of this bar to see how it maintains the correct proportions. This is not a real-world example, but it's a good illustration of how flexibly all the plugins are coded.</p>
 
 </div><!-- End demo-description -->
 
-
-
 </body>
 </html>
diff --git a/demos/resizable/alsoresize.html b/demos/resizable/alsoresize.html
index 985c62bee..4fb339633 100644
--- a/demos/resizable/alsoresize.html
+++ b/demos/resizable/alsoresize.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Resizable - Also Resize Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { background-position: top left; }
 	#resizable, #also { width: 150px; height: 150px; padding: 0.5em; }
diff --git a/demos/resizable/animate.html b/demos/resizable/animate.html
index 1944192c8..a498461c1 100644
--- a/demos/resizable/animate.html
+++ b/demos/resizable/animate.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Resizable - Animate Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
 	.ui-resizable-helper { border: 1px dotted gray; }
diff --git a/demos/resizable/aspectratio.html b/demos/resizable/aspectratio.html
index bbcb05bd3..73a3b99ac 100644
--- a/demos/resizable/aspectratio.html
+++ b/demos/resizable/aspectratio.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Resizable - Aspect Ratio Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 160px; height: 90px; padding: 0.5em; }
 	</style>
diff --git a/demos/resizable/containment.html b/demos/resizable/containment.html
index abab89736..60c861738 100644
--- a/demos/resizable/containment.html
+++ b/demos/resizable/containment.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Resizable - Containment Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { background-position: top left; width: 150px; height: 150px; }
 	#resizable, #container { padding: 0.5em; }
diff --git a/demos/resizable/default.html b/demos/resizable/default.html
index 2ace6d6a9..a7baf3d17 100644
--- a/demos/resizable/default.html
+++ b/demos/resizable/default.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Resizable - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
 	</style>
diff --git a/demos/resizable/delay.html b/demos/resizable/delay.html
index bf686eec9..9ff3e9881 100644
--- a/demos/resizable/delay.html
+++ b/demos/resizable/delay.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Resizable - Delay Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
 	</style>
diff --git a/demos/resizable/distance.html b/demos/resizable/distance.html
index f8c4ba8ca..d46dbc174 100644
--- a/demos/resizable/distance.html
+++ b/demos/resizable/distance.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Resizable - Distance Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
 	</style>
diff --git a/demos/resizable/ghost.html b/demos/resizable/ghost.html
index 4c7b1c7f7..a4c3feaba 100644
--- a/demos/resizable/ghost.html
+++ b/demos/resizable/ghost.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Resizable - Ghost Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
 	.ui-resizable-ghost { border: 1px dotted gray; }
diff --git a/demos/resizable/grid.html b/demos/resizable/grid.html
index 2cd5badc6..857533c10 100644
--- a/demos/resizable/grid.html
+++ b/demos/resizable/grid.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Resizable - Grid Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
 	</style>
diff --git a/demos/resizable/max.html b/demos/resizable/max.html
index 24b382400..c03b61f5a 100644
--- a/demos/resizable/max.html
+++ b/demos/resizable/max.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Resizable - Max Height / Width Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
 	</style>
diff --git a/demos/resizable/min.html b/demos/resizable/min.html
index 2e9606bbd..a4ac74c97 100644
--- a/demos/resizable/min.html
+++ b/demos/resizable/min.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Resizable - Min Height / Width Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
 	</style>
diff --git a/demos/slider/colorpicker.html b/demos/slider/colorpicker.html
index 1525df634..ecdaa7ae2 100644
--- a/demos/slider/colorpicker.html
+++ b/demos/slider/colorpicker.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Slider - Colorpicker Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.slider.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#red, #green, #blue {
 		float: left;
diff --git a/demos/slider/default.html b/demos/slider/default.html
index 28fd1f59b..75533e52e 100644
--- a/demos/slider/default.html
+++ b/demos/slider/default.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Slider - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.slider.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#slider").slider();
diff --git a/demos/slider/multiple_vertical.html b/demos/slider/multiple_vertical.html
index f6f263e7d..8fb619be4 100644
--- a/demos/slider/multiple_vertical.html
+++ b/demos/slider/multiple_vertical.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Slider - Range Min Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.slider.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#slider0").slider({
diff --git a/demos/slider/range.html b/demos/slider/range.html
index 203c14689..b65509abb 100644
--- a/demos/slider/range.html
+++ b/demos/slider/range.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Slider - Range Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.slider.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#slider-range").slider({
diff --git a/demos/slider/range_vertical.html b/demos/slider/range_vertical.html
index 3cc55544d..7f488b0fe 100644
--- a/demos/slider/range_vertical.html
+++ b/demos/slider/range_vertical.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Slider - Range Min Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.slider.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#slider-range").slider({
diff --git a/demos/slider/rangemax.html b/demos/slider/rangemax.html
index d5abf5fd7..612084d8e 100644
--- a/demos/slider/rangemax.html
+++ b/demos/slider/rangemax.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Slider - Range Max Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.slider.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#slider-range-max").slider({
diff --git a/demos/slider/rangemin.html b/demos/slider/rangemin.html
index 707f23ef7..72b784c43 100644
--- a/demos/slider/rangemin.html
+++ b/demos/slider/rangemin.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Slider - Range Min Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.slider.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#slider-range-min").slider({
diff --git a/demos/slider/slider_vertical.html b/demos/slider/slider_vertical.html
index 178d29852..633fac01a 100644
--- a/demos/slider/slider_vertical.html
+++ b/demos/slider/slider_vertical.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Slider - Range Min Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.slider.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#slider-vertical").slider({
diff --git a/demos/slider/steps.html b/demos/slider/steps.html
index e1e3cb9a6..ac18e3879 100644
--- a/demos/slider/steps.html
+++ b/demos/slider/steps.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Slider - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.slider.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#slider").slider({
diff --git a/demos/sortable/connectwith.html b/demos/sortable/connectwith.html
index b3ac6c409..95fe9bde5 100644
--- a/demos/sortable/connectwith.html
+++ b/demos/sortable/connectwith.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Sortable - Connected lists</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
 	li { margin: 3px; padding: 2px; width: 120px; }
diff --git a/demos/sortable/default.html b/demos/sortable/default.html
index 6f68cfa81..06e3ff0f6 100644
--- a/demos/sortable/default.html
+++ b/demos/sortable/default.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Sortable - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	ul { list-style-type: none; margin: 0; padding: 0; }
 	li { margin: 3px; padding: 2px; }
diff --git a/demos/sortable/delaydistance.html b/demos/sortable/delaydistance.html
index 096c1d582..8e5bc6033 100644
--- a/demos/sortable/delaydistance.html
+++ b/demos/sortable/delaydistance.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Sortable - Delay / Distance</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 20px; }
 	li { margin: 3px; padding: 2px; }
diff --git a/demos/sortable/droponempty.html b/demos/sortable/droponempty.html
index a48e8e932..84f135510 100644
--- a/demos/sortable/droponempty.html
+++ b/demos/sortable/droponempty.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Sortable - Dropping on empty lists</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 133px;}
 	li { margin: 3px; padding: 2px; width: 120px; }
diff --git a/demos/sortable/droppable.html b/demos/sortable/droppable.html
index 906eaadf8..b6e2b5081 100644
--- a/demos/sortable/droppable.html
+++ b/demos/sortable/droppable.html
@@ -2,21 +2,21 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Sortable - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
 	<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	ul { list-style-type: none; margin: 0; padding: 0; }
-	li { margin: 3px; padding: 2px; width: 150px; }
-	.ui-widget-header { height: 60px; margin-bottom: 10px; float: right; width: 200px; }
+	#sortable { list-style-type: none; margin: 0; padding: 0; }
+	#sortable li { margin: 3px; padding: 2px; width: 150px; }
+	#droppable { height: 60px; margin-bottom: 10px; float: right; width: 200px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
-		$("ul").sortable();
-		$("div").droppable({
+		$("#sortable").sortable();
+		$("#droppable").droppable({
 			activeClass: 'ui-state-hover',
 			hoverClass: 'ui-state-active',
 			drop: function(event, ui) {
@@ -28,11 +28,11 @@
 </head>
 <body>
 
-<div class="ui-widget-header">
+<div id="droppable" class="ui-widget-header">
 	<p>Drop a list item on me - sortable items are automatically connected to droppables.</p>
 </div>
 
-<ul>
+<ul id="sortable">
 	<li class="ui-state-default">Item 1</li>
 	<li class="ui-state-default">Item 2</li>
 	<li class="ui-state-default">Item 3</li>
diff --git a/demos/sortable/floating.html b/demos/sortable/floating.html
index 6f940929b..aae9dbdf9 100644
--- a/demos/sortable/floating.html
+++ b/demos/sortable/floating.html
@@ -2,24 +2,24 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Sortable - Floating</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	ul { list-style-type: none; margin: 0; padding: 0; }
-	li { margin: 3px; padding: 2px; float: left; width: 100px; height: 100px; }
+	#sortable { list-style-type: none; margin: 0; padding: 0; }
+	#sortable li { margin: 3px; padding: 2px; float: left; width: 100px; height: 100px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
-		$("ul").sortable();
+		$("#sortable").sortable();
 	});
 	</script>
 </head>
 <body>
 
-<ul>
+<ul id="sortable">
 	<li class="ui-state-default">Item 1</li>
 	<li class="ui-state-default">Item 2</li>
 	<li class="ui-state-default">Item 3</li>
diff --git a/demos/sortable/items.html b/demos/sortable/items.html
index 078af9990..876c3cefb 100644
--- a/demos/sortable/items.html
+++ b/demos/sortable/items.html
@@ -2,22 +2,21 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Sortable - Items</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	ul { list-style-type: none; margin: 0; padding: 0; }
-	li { margin: 3px; padding: 2px; }
+	#sortable, #sortable2 { list-style-type: none; margin: 0; padding: 0; }
+	#sortable li, #sortable2 li { margin: 3px; padding: 2px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
-		$("ul:eq(0)").sortable({
+		$("#sortable").sortable({
 			items: 'li:not(.ui-state-disabled)'
 		});
-
-		$("ul:eq(1)").sortable({
+		$("#sortable2").sortable({
 			cancel: '.ui-state-disabled'
 		});
 	});
@@ -27,7 +26,7 @@
 
 <p>Completely exclude items from the sorting logic using the 'items' option</p>
 
-<ul>
+<ul id="sortable">
 	<li class="ui-state-default">Item 1</li>
 	<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
 	<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
@@ -37,7 +36,7 @@
 
 <p>Keep the items as valid targets, but non-draggable, using the 'cancel' option</p>
 
-<ul>
+<ul id="sortable2">
 	<li class="ui-state-default">Item 1</li>
 	<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
 	<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
diff --git a/demos/sortable/placeholder.html b/demos/sortable/placeholder.html
index 68d6ecdbe..4404821ff 100644
--- a/demos/sortable/placeholder.html
+++ b/demos/sortable/placeholder.html
@@ -2,18 +2,18 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Sortable - Placeholder</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
-	ul { list-style-type: none; margin: 0; padding: 0; }
-	li { margin: 3px; padding: 2px; }
+	#sortable { list-style-type: none; margin: 0; padding: 0; }
+	#sortable li { margin: 3px; padding: 2px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
-		$("ul").sortable({
+		$("#sortable").sortable({
 			placeholder: 'ui-state-highlight'
 		});
 	});
@@ -21,7 +21,7 @@
 </head>
 <body>
 
-<ul>
+<ul id="sortable">
 	<li class="ui-state-default">Item 1</li>
 	<li class="ui-state-default">Item 2</li>
 	<li class="ui-state-default">Item 3</li>
diff --git a/demos/tabs/ajax.html b/demos/tabs/ajax.html
index 46760c289..0492f8378 100644
--- a/demos/tabs/ajax.html
+++ b/demos/tabs/ajax.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Tabs - Ajax Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.tabs.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#tabs").tabs();
diff --git a/demos/tabs/collapsible.html b/demos/tabs/collapsible.html
index 4c11661f7..388d97a17 100644
--- a/demos/tabs/collapsible.html
+++ b/demos/tabs/collapsible.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Tabs - Collapsible Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.tabs.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#tabs").tabs({
diff --git a/demos/tabs/default.html b/demos/tabs/default.html
index ba02b1bee..9140c1391 100644
--- a/demos/tabs/default.html
+++ b/demos/tabs/default.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Tabs - Default Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.tabs.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#tabs").tabs();
diff --git a/demos/tabs/mouseover.html b/demos/tabs/mouseover.html
index 3f87a7383..4026d17a3 100644
--- a/demos/tabs/mouseover.html
+++ b/demos/tabs/mouseover.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Tabs - Mouseover Demo</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/ui.tabs.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
 		$("#tabs").tabs({
-- 
2.39.5