demos: touch up

12 files changed, 27 insertions, 16 deletions

diff --git a/demos/resizable/alsoresize.html b/demos/resizable/alsoresize.html
index 31d5a1333..f200ffcf7 100644
--- a/demos/resizable/alsoresize.html
+++ b/demos/resizable/alsoresize.html
@@ -10,6 +10,7 @@
 	<style type="text/css">
 	#resizable { background-position: top left; }
 	#resizable, #also { width: 150px; height: 120px; padding: 0.5em; }
+	#resizable h3, #also h3 { text-align: center; margin: 0; }
 	#also { margin-top: 1em; }
 	</style>
 	<script type="text/javascript">
@@ -25,11 +26,11 @@
 <div class="demo">
 	
 <div id="resizable" class="ui-widget-header">
-	<p>Resize me</p>
+	<h3 class="ui-state-active">Resize</h3>
 </div>
 
 <div id="also" class="ui-widget-content">
-	<p>I will resize with the other div. I can also be resized independently.</p>
+	<h3 class="ui-widget-header">will also resize</h3>
 </div>
 
 </div><!-- End demo -->
diff --git a/demos/resizable/animate.html b/demos/resizable/animate.html
index 1e2f4c39d..b83575840 100644
--- a/demos/resizable/animate.html
+++ b/demos/resizable/animate.html
@@ -9,6 +9,7 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
 	.ui-resizable-helper { border: 1px dotted gray; }
 	</style>
 	<script type="text/javascript">
@@ -23,7 +24,7 @@
 <div class="demo">
 	
 <div id="resizable" class="ui-widget-content">
-	<p>Resize me</p>
+	<h3 class="ui-widget-header">Animate</h3>
 </div>
 
 </div><!-- End demo -->
diff --git a/demos/resizable/aspectratio.html b/demos/resizable/aspectratio.html
index df777eb55..286b00b9c 100644
--- a/demos/resizable/aspectratio.html
+++ b/demos/resizable/aspectratio.html
@@ -9,6 +9,7 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 160px; height: 90px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
@@ -22,7 +23,7 @@
 <div class="demo">
 	
 <div id="resizable" class="ui-widget-content">
-	<p>Resize me</p>
+	<h3 class="ui-widget-header">Aspect Ratio</h3>
 </div>
 
 </div><!-- End demo -->
diff --git a/demos/resizable/containment.html b/demos/resizable/containment.html
index 948afbdbb..74e767ad1 100644
--- a/demos/resizable/containment.html
+++ b/demos/resizable/containment.html
@@ -8,9 +8,10 @@
 	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
+	#container { width: 300px; height: 300px; }
+	#container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
 	#resizable { background-position: top left; width: 150px; height: 150px; }
 	#resizable, #container { padding: 0.5em; }
-	#container { width: 300px; height: 300px; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
@@ -24,9 +25,9 @@
 <div class="demo">
 	
 <div id="container" class="ui-widget-content">
-	<p>Container</p>
-	<div id="resizable" class="ui-widget-header">
-		<p>Resize me</p>
+	<h3 class="ui-widget-header">Containment</h3>
+	<div id="resizable" class="ui-state-active">
+		<h3 class="ui-widget-header">Resizable</h3>
 	</div>
 </div>
 
diff --git a/demos/resizable/default.html b/demos/resizable/default.html
index b98b620cc..f8f05f9e5 100644
--- a/demos/resizable/default.html
+++ b/demos/resizable/default.html
@@ -9,6 +9,7 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
@@ -20,7 +21,7 @@
 <div class="demo">
 	
 <div id="resizable" class="ui-widget-content">
-	<p>Resize me</p>
+	<h3 class="ui-widget-header">Resizable</h3>
 </div>
 
 </div><!-- End demo -->
diff --git a/demos/resizable/delay.html b/demos/resizable/delay.html
index 29264dcc2..bddc713bf 100644
--- a/demos/resizable/delay.html
+++ b/demos/resizable/delay.html
@@ -9,6 +9,7 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
@@ -22,7 +23,7 @@
 <div class="demo">
 	
 <div id="resizable" class="ui-widget-content">
-	<p>Resize me</p>
+	<h3 class="ui-widget-header">Delay</h3>
 </div>
 
 </div><!-- End demo -->
diff --git a/demos/resizable/distance.html b/demos/resizable/distance.html
index a8b72685f..3e6ffbc1e 100644
--- a/demos/resizable/distance.html
+++ b/demos/resizable/distance.html
@@ -9,6 +9,7 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
@@ -22,7 +23,7 @@
 <div class="demo">
 	
 <div id="resizable" class="ui-widget-content">
-	<p>Resize me</p>
+	<h3 class="ui-widget-header">Distance</h3>
 </div>
 
 </div><!-- End demo -->
diff --git a/demos/resizable/ghost.html b/demos/resizable/ghost.html
index af352b35a..71d798066 100644
--- a/demos/resizable/ghost.html
+++ b/demos/resizable/ghost.html
@@ -9,6 +9,7 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
 	.ui-resizable-ghost { border: 1px dotted gray; }
 	</style>
 	<script type="text/javascript">
@@ -23,7 +24,7 @@
 <div class="demo">
 	
 <div id="resizable" class="ui-widget-content">
-	<p>Resize me</p>
+	<h3 class="ui-widget-header">Ghost</h3>
 </div>
 
 </div><!-- End demo -->
diff --git a/demos/resizable/grid.html b/demos/resizable/grid.html
index 30360a14a..7a8528984 100644
--- a/demos/resizable/grid.html
+++ b/demos/resizable/grid.html
@@ -9,6 +9,7 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
@@ -22,7 +23,7 @@
 <div class="demo">
 	
 <div id="resizable" class="ui-widget-content">
-	<p>Resize me</p>
+	<h3 class="ui-widget-header">Grid</h3>
 </div>
 
 </div><!-- End demo -->
diff --git a/demos/resizable/index.html b/demos/resizable/index.html
index 0d329c53a..6e691cbb4 100644
--- a/demos/resizable/index.html
+++ b/demos/resizable/index.html
@@ -9,7 +9,7 @@
 <div class="demos-nav">
 	<h4>Examples</h4>
 	<ul>
-		<li class="demo-config-on"><a href="default.html">Default</a></li>
+		<li class="demo-config-on"><a href="default.html">Default Resizable</a></li>
 		<li><a href="alsoresize.html">Also Resize</a></li>
 		<li><a href="animate.html">Animate</a></li>
 		<li><a href="aspectratio.html">Aspect Ratio</a></li>
diff --git a/demos/resizable/max.html b/demos/resizable/max.html
index 859dca81f..4061cf7f7 100644
--- a/demos/resizable/max.html
+++ b/demos/resizable/max.html
@@ -9,6 +9,7 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
@@ -23,7 +24,7 @@
 <div class="demo">
 	
 <div id="resizable" class="ui-widget-content">
-	<p>Resize me</p>
+	<h3 class="ui-widget-header">maxHeight / maxWidth</h3>
 </div>
 
 </div><!-- End demo -->
diff --git a/demos/resizable/min.html b/demos/resizable/min.html
index 8c8621757..518eb6a77 100644
--- a/demos/resizable/min.html
+++ b/demos/resizable/min.html
@@ -9,6 +9,7 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 	#resizable { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
@@ -23,7 +24,7 @@
 <div class="demo">
 	
 <div id="resizable" class="ui-widget-content">
-	<p>Resize me</p>
+	<h3 class="ui-widget-header">minHeight / minWidth</h3>
 </div>
 
 </div><!-- End demo -->