diff --git a/demos/demos.css b/demos/demos.css
index ce918b1d7..fe5baedf9 100644
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -10,7 +10,7 @@ table {
    -------------------------------- */
 
 body {
-	font-family: "Arial", "Helvetica", "Verdana", "sans-serif";
+	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
 }
 
 /* Layout
@@ -31,7 +31,7 @@ body {
 .layout-grid td.normal {
 	border-left: 1px solid #ccc;
 	padding: 20px 24px;
-	font-family:  "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif";
+	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
 }
 
 .layout-grid td.demos {
@@ -83,7 +83,7 @@ body {
 	margin: 0;
 	padding: 0;
 	letter-spacing: 0.75pt;
-	font: bold 1.2em 'Arial', 'Helvetica', sans-serif;
+	font: bold 1.2em "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
 	color: #e87b10;
 }
 
@@ -98,7 +98,7 @@ body {
 .demos-nav li a {
 	border-bottom: 1px solid #F4F4F4;
 	display:block;
-	padding: 3px 3px 3px 12px;
+	padding: 3px 3px 3px 3px;
 	font-size: 95%;
 	text-decoration: none;
 	color: #000;
@@ -134,10 +134,10 @@ eventually we should convert the font sizes to ems -- using px for now to minimi
 
 #demo-config-menu ul { list-style: none; padding: 0; margin: 0; }
 
-#demo-config-menu li { font-size:11px; padding:0 0 0 10px; margin:3px 0; zoom: 1; }
+#demo-config-menu li { font-size:12px; padding:0 0 0 10px; margin:3px 0; zoom: 1; }
 
 #demo-config-menu li a:link,
-#demo-config-menu li a:visited { display:block; padding:2px 8px 3px; border-bottom:1px dotted #b3b3b3; }
+#demo-config-menu li a:visited { display:block; padding:3px 8px 2px; border-bottom:1px dotted #b3b3b3; }
 #demo-config-menu li a:hover,
 #demo-config-menu li a:active { background-color:#f6f6f6; }
 
@@ -191,3 +191,6 @@ div.demo-description {
 .left-nav .demos-nav {
 	padding-right: 10px;
 }
+
+#demo-link { font-size:11px;  margin:6px 0 20px 0; }
+#demo-link a span.ui-icon { float:left; margin-right:3px; }
diff --git a/demos/index.html b/demos/index.html
index 8b8d9253e..7340a7077 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -160,7 +160,7 @@
 		function updateDemoNotes() {
 			var notes = $('#demo-frame .demo-description');
 			if ($('#demo-notes').length == 0) {
-				$('<div id="demo-notes"></div>').insertAfter('#demo-config');
+				$('<div id="demo-notes"></div>sdfdffd').insertAfter('#demo-config');
 			}						
 			$('#demo-notes').hide().empty().html(notes.html());
 			$('#demo-notes').fadeIn();
@@ -209,6 +209,21 @@
 					<p>
 						These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started. Have fun playing with them.
 					</p>
+					
+				
+				<iframe></iframe>
+				
+				<div id="demo-link">
+					<a href="foo" class="demoWindowLink"><span class="ui-icon ui-icon-newwin"></span>Open demo in a new window</a>
+				</div>
+				
+				<p>The description for the demo goes here, below the link to open the demo in a new window. The description for the demo goes here, below the link to open the demo in a new window. The description for the demo goes here, below the link to open the demo in a new window.</p>
+				
+				<div id="demo-source">
+					<a href="#" class="source-closed">View source</a><!-- change the class to "source-open" when code is visible -->
+				</div>
+				
+				
 					<?php  } ?>
 			</div>