diff --git a/demos/addClass/default.html b/demos/addClass/default.html
index 8a1486ca6..429c5fef5 100644
--- a/demos/addClass/default.html
+++ b/demos/addClass/default.html
@@ -12,8 +12,8 @@
 		#effect {position: relative; }
 		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
 		.ui-effects-transfer { border: 2px dotted gray; } 
-		.first { width: 240px; height: 135px; padding: 0.4em;  font-size: 1.2em; border-width: 1px; }
-		.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border-width: 5px; }
+		.first { width: 240px; height: 135px; padding: 0.4em;  font-size: 1.2em; border: 1px solid #000; background: #fff; color: #333; }
+		.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border: 5px solid #4f5b8c; background: #ddebf4; color: #2c4359; } 
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/removeClass/default.html b/demos/removeClass/default.html
index 429fdee22..99eb22cf8 100644
--- a/demos/removeClass/default.html
+++ b/demos/removeClass/default.html
@@ -12,8 +12,8 @@
 		#effect {  position: relative; }
 		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
 		.ui-effects-transfer { border: 2px dotted gray; } 
-		.first { width: 240px; height: 135px; padding: 0.4em;  font-size: 1.2em; border-width: 1px; }
-		.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border-width: 5px; }
+		.first { width: 240px; height: 135px; padding: 0.4em;  font-size: 1.2em; border: 1px solid #000; background: #fff; color: #333; }
+		.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border: 5px solid #4f5b8c; background: #ddebf4; color: #2c4359; } 
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/switchClass/default.html b/demos/switchClass/default.html
index 99aa7b2ad..e5491b6d2 100644
--- a/demos/switchClass/default.html
+++ b/demos/switchClass/default.html
@@ -12,8 +12,8 @@
 		#effect { position: relative; }
 		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
 		.ui-effects-transfer { border: 2px dotted gray; } 
-		.first { width: 240px; height: 135px; padding: 0.4em;  font-size: 1.2em; border-width: 1px; }
-		.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border-width: 5px; }
+		.first { width: 240px; height: 135px; padding: 0.4em;  font-size: 1.2em; border: 1px solid #000; background: #fff; color: #333; }
+		.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border: 5px solid #4f5b8c; background: #ddebf4; color: #2c4359; } 
 	</style>
 	<script type="text/javascript">
 	$(function() {
diff --git a/demos/toggleClass/default.html b/demos/toggleClass/default.html
index b01d2eca2..bdb5de497 100644
--- a/demos/toggleClass/default.html
+++ b/demos/toggleClass/default.html
@@ -9,11 +9,11 @@
 	<style type="text/css">
 		.toggler { width: 500px; height: 200px; position: relative;}
 		#button { padding: .5em 1em; text-decoration: none; }
-		#effect {  position: relative; }
+		#effect { position: relative; }
 		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
 		.ui-effects-transfer { border: 2px dotted gray; } 
-		.first { width: 240px; height: 135px; padding: 0.4em;  font-size: 1.2em; border-width: 1px; }
-		.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border-width: 5px; }
+		.first { width: 240px; height: 135px; padding: 0.4em;  font-size: 1.2em; border: 1px solid #000; background: #fff; color: #333; }
+		.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border: 5px solid #4f5b8c; background: #ddebf4; color: #2c4359; } 
 	</style>
 	<script type="text/javascript">
 	$(function() {