diff --git a/node/MessageHandler.js b/node/MessageHandler.js
index 89a72754..7fd27308 100644
--- a/node/MessageHandler.js
+++ b/node/MessageHandler.js
@@ -529,6 +529,7 @@ function handleClientReady(client, message)
           userInfo: {
             "ip": "127.0.0.1",
             "colorId": authorManager.getAuthorColorId(sessioninfos[pad2sessions[message.padId][i]].author),
+            "name": authorManager.getAuthorName(sessioninfos[pad2sessions[message.padId][i]].author),
             "userAgent": "Anonymous",
             "userId": sessioninfos[pad2sessions[message.padId][i]].author
           }
diff --git a/static/css/pad_ie_lite.css b/static/css/pad_ie_lite.css
new file mode 100644
index 00000000..d9ece8bd
--- /dev/null
+++ b/static/css/pad_ie_lite.css
@@ -0,0 +1,38 @@
+#users, #embed
+{
+background:transparent;
+filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000070,endColorstr=#00000070);
+zoom: 1;
+}
+
+
+#editorcontainerbox
+{
+position: relative;
+top: 1px;
+padding-top: 37px;
+}
+#editorcontainer 
+{
+  position: absolute;
+  
+  width: 100%;
+  
+  top: 0px;
+  left: 0px;  
+  bottom: 0px;
+
+  z-index: 1;
+  
+  overflow: hidden;
+}
+
+#editorcontainer iframe {
+  height: 100%;
+  width: 100%; 
+  padding-bottom: 37px; 
+  margin: 0; 
+}
+
+#editorloadingbox { padding-top: 100px; padding-bottom: 100px; font-size: 2.5em;  color: #aaa;
+   text-align: center; position: absolute; width: 100%; height: 30px; z-index: 100; }
diff --git a/static/css/pad_lite.css b/static/css/pad_lite.css
index 3f47f298..354bce67 100644
--- a/static/css/pad_lite.css
+++ b/static/css/pad_lite.css
@@ -7,6 +7,33 @@ html { font-size: 62.5%; }
 body { background: #ccc;}
 body, textarea { font-family: Helvetica, Arial, sans-serif; }
 
+#users
+{
+  position: absolute;
+  z-index: 10;
+  background-color: #000;
+  background-color: rgba(0,0,0,0.7);
+  width: 160px;
+  right: 4px;
+  top: 40px;
+  color: #fff;
+  padding: 5px;
+  -moz-border-radius: 6px;
+  border-radius: 6px; 
+}
+
+#sharebutton {
+  background: url(/static/img/jun09/pad/inviteshare2.gif) no-repeat 0 -31px;
+  position: relative;
+  display: block; 
+  top: 6px; 
+  padding-top: 30px;
+  height: 0; overflow: hidden; width: 96px;
+  left:50%;
+  margin-left: -48px;
+}
+
+
 a img
 {
   border: 0;
@@ -40,11 +67,11 @@ a img
   margin-left: 2px;
   background-color: #fff;
   
-  -moz-border-radius: 2px;
-  border-radius: 2px; 
+  -moz-border-radius: 4px;
+  border-radius: 4px; 
   
   border: 1px solid #ccc;
-  padding: 4px 6px;
+  padding: 4px 5px;
   
   height: 18px;
   
@@ -55,6 +82,18 @@ a img
   background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), color-stop(20%, white), color-stop(20%, white));  
 }
 
+#editbar ul li a
+{
+  text-decoration: none;
+  color: #ccc;
+}
+
+#editbar ul li a span
+{
+  position: relative;
+  top:-2px
+}
+
 #editbar ul li:hover
 {
   border: 1px solid #888;
@@ -65,6 +104,7 @@ a img
 {
   border: inherit;
   background: inherit;
+  visibility:hidden;
 }
 #editbar ul li a
 {
@@ -373,8 +413,11 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; }
 #myswatchbox { position: absolute; left: 5px; top: 5px; width: 22px; height: 22px;
   /*border-top: 1px solid #c3cfe0; border-left: 1px solid #c3cfe0;
   border-right: 1px solid #ecf3fc; border-bottom: 1px solid #ecf3fc;*/
-  border: 1px solid #bbb;
-  padding: 1px; background: transparent; cursor: pointer; }
+  border: 1px solid #fff;
+  padding: 1px; background: transparent; cursor: pointer; 
+  -moz-border-radius: 3px;
+  border-radius: 3px; 
+  }
 /*
 #myuser .myswatchboxhoverable, #myuser .myswatchboxunhoverable {
   background: white;
@@ -389,13 +432,17 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; }
   background: url(/static/img/jun09/pad/colorpicker.gif) no-repeat left top;
   width: 232px; height: 140px;
   position: absolute;
-  left: 10px; top: 18px; z-index: 101;
+  left: -240px; top: 0px; z-index: 101;
   display: none;/*...initially*/
 }
 
-#mycolorpicker .picked { border: 1px solid #fff !important; }
+#mycolorpicker ul li
+{
+  float: left;
+}
+#mycolorpicker .picked { border: 1px solid #000 !important; }
 
-#mycolorpicker .picked .pickerswatch { border: 1px solid #666; }
+#mycolorpicker .picked .pickerswatch { border: 1px solid #fff; }
 #mycolorpickersave { position: absolute; left: 14px; top: 102px;
   width: 47px; height: 0; padding-top: 20px; overflow: hidden;
   cursor: pointer; }
@@ -403,11 +450,11 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; }
   width: 44px; height: 0; padding-top: 20px; overflow: hidden;
   cursor: pointer; }
 #myusernameform { margin-left: 35px; }
-#myusernameedit { font-size: 1.6em; color: #444;
+#myusernameedit { font-size: 1.3em; color: #fff;
   padding: 3px; height: 18px; margin: 0; border: 0;
-  width: 197px; background: transparent; }
-#myusernameform input.editable { border: 1px solid #bbb; }
-#myuser .myusernameedithoverable:hover { background: white; }
+  width: 117px; background: transparent; }
+#myusernameform input.editable { border: 1px solid #444; }
+#myuser .myusernameedithoverable:hover { background: white; color: black}
 #mystatusform { margin-left: 35px; margin-top: 5px; }
 #mystatusedit { font-size: 1.2em; color: #777;
   font-style: italic; display: none;
@@ -417,22 +464,24 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; }
   background: white;  border-left: 1px solid #c3c3c3;
   border-top: 1px solid #c3c3c3;
   border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
+  color: #000
 }
 #myusernameform .editempty { color: #ef641e; }
   
 table#otheruserstable { display: none; }
-#nootherusers { padding: 10px; font-size: 1.2em; color: #999; font-weight: bold;}
-#nootherusers a { color: #48d; }
+#nootherusers { padding: 10px; font-size: 1.2em; color: #eee; font-weight: bold;}
+#nootherusers a { color: #3C88FF; }
 
 #otheruserstable td {
-  border-bottom: 1px solid #e1e1e1;
+  border-top: 1px solid #555;
   height: 26px;
   vertical-align: middle;
   padding: 0 2px;
+  color: #fff;
 }
 
 #otheruserstable .swatch {
-  border: 1px solid #999; width: 13px; height: 13px; overflow: hidden;
+  border: 1px solid #000; width: 13px; height: 13px; overflow: hidden;
   margin: 0 4px;
 }
 
@@ -448,15 +497,6 @@ table#otheruserstable { display: none; }
   border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
 }
 .usertdname input.editempty { color: #888; font-style: italic;}
-
-#sharebutton {
-  background: url(/static/img/jun09/pad/inviteshare2.gif) no-repeat 0 -31px;
-  position: absolute; display: block; top: 3px; padding-top: 23px;
-  height: 0; overflow: hidden; width: 96px;
-  left:50%;
-  margin-left: -48px;
-}
-
   /*#guestslabel { font-size: 1.2em; position: absolute; width: auto;
   height: 22px; line-height: 22px; top: 4px; left: 8px; }
 #guestsmenu { font-size: 1.2em; position: absolute; left: 100px;
@@ -1053,9 +1093,18 @@ a#topbarmaximize {
 #embed{
 display:none;
 position:absolute;
-top:42px;
+top:40px;
 font-size:14px;
-width:100%;
+width:400px;
+right: 5px;
+z-index: 500;
+background-color: #000;
+color: white;
+background-color: rgb(0,0,0);
+background-color: rgba(0,0,0,0.7);
+padding: 10px;
+-moz-border-radius: 6px;
+border-radius: 6px; 
 }
 
 #embedcode{
@@ -1063,11 +1112,11 @@ margin-left:10px;
 }
 
 #embedinput{
-width:80%;
+width:375px;
 height:24px;
 display:inline;
+margin-top: 10px;
 padding-left:4px;
-margin-left:4px;
 }
 
 ul#colorpickerswatches
@@ -1078,7 +1127,7 @@ ul#colorpickerswatches
 
 ul#colorpickerswatches li 
 {
-  border: 1px solid #999; 
+  border: 1px solid #fff; 
   width: 14px; 
   height: 14px; 
   overflow: hidden;
diff --git a/static/img/jun09/pad/inviteshare2.gif b/static/img/jun09/pad/inviteshare2.gif
index 98d4c859..fe07332b 100644
Binary files a/static/img/jun09/pad/inviteshare2.gif and b/static/img/jun09/pad/inviteshare2.gif differ
diff --git a/static/js/pad_editbar.js b/static/js/pad_editbar.js
index 28e15808..4f73ca73 100644
--- a/static/js/pad_editbar.js
+++ b/static/js/pad_editbar.js
@@ -81,29 +81,29 @@ var padeditbar = (function(){
         if (cmd == 'showusers') {
         // show users shows the current users on teh pad
         // get current height
-        var editbarheight = $('#editbar').css('height');
-          if (editbarheight == "36px"){
+        var editbarheight = $('#users').css('display');
+          if (editbarheight == "none"){
             // increase the size of the editbar
-            $('#editbar').animate({height:'72px'});
-            $('#editorcontainerbox').animate({top:'72px'});
+            //$('#editbar').animate({height:'72px'});
+            //$('#editorcontainerbox').animate({top:'72px'});
             $('#embed').hide();
             $('#users').show();
           }
           else
           {
             // increase the size of the editbar
-            $('#editbar').animate({height:'36px'});
-            $('#editorcontainerbox').animate({top:'36px'});
+            //$('#editbar').animate({height:'36px'});
+            //$('#editorcontainerbox').animate({top:'36px'});
             $('#users').hide();
           }
         }
         if (cmd == 'embed') {
         // embed shows the embed link
         // get current height
-        var editbarheight = $('#editbar').css('height');
-          if (editbarheight == "36px"){
+        var editbarheight = $('#embed').css('display');
+          if (editbarheight == "none"){
             // increase the size of the editbar
-            $('#editbar').animate({height:'72px'});
+            //$('#editbar').animate({height:'72px'});
             $('#editorcontainerbox').animate({top:'72px'});
             // hide the users
             $('#users').hide();
@@ -111,12 +111,13 @@ var padeditbar = (function(){
             padurl = document.location;
             // change the div contents to include the pad url in an input box
             $('#embed').html('<div id="embedcode">Embed code:<input id="embedinput" type="text" value="<iframe src=&quot;'+padurl+'&quot; width=500 height=400>"</iframe>></div>');
+            $('#users').hide();
             $('#embed').show();
           }
           else
           {
             // increase the size of the editbar
-            $('#editbar').animate({height:'36px'});
+            //$('#editbar').animate({height:'36px'});
             $('#editorcontainerbox').animate({top:'36px'});
             $('#embed').hide();
           }
diff --git a/static/js/pad_modals.js b/static/js/pad_modals.js
index 37a3386f..0d0f57f0 100644
--- a/static/js/pad_modals.js
+++ b/static/js/pad_modals.js
@@ -78,7 +78,7 @@ var padmodals = (function() {
       });
     },
     initShareBox: function() {
-      $("#sharebutton, #nootherusers a").click(function() {
+      $("#sharebutton").click(function() {
         self.showShareBox();
       });
       $("#sharebox-hide").click(function() {
diff --git a/static/js/pad_userlist.js b/static/js/pad_userlist.js
index 3e2f38b5..3e476fad 100644
--- a/static/js/pad_userlist.js
+++ b/static/js/pad_userlist.js
@@ -20,67 +20,6 @@ var colorPickerOpen = false;
 var colorPickerSetup = false;
 var previousColorId = 0;
 
-function getColorPickerSwatchIndex(jnode) {
-//  return Number(jnode.get(0).className.match(/\bn([0-9]+)\b/)[1])-1;
-  return $("#colorpickerswatches li").index(jnode);
-}
-function closeColorPicker(accept) {
-  if (accept) {
-    var newColorId = getColorPickerSwatchIndex($("#colorpickerswatches .picked"));
-    if (newColorId >= 0) { // fails on NaN
-      myUserInfo.colorId = newColorId;
-      pad.notifyChangeColor(newColorId);
-    }
-  } else {
-    pad.notifyChangeColor(previousColorId);
-  }
-  colorPickerOpen = false;
-  $("#mycolorpicker").css('display', 'none');
-  //renderMyUserInfo();
-}
-
-function showColorPicker() {
-  previousColorId = myUserInfo.colorId ;
-
-  if (! colorPickerOpen) {
-    var palette = pad.getColorPalette();
-
-    if(!colorPickerSetup) {
-      var colorsList = $("#colorpickerswatches")
-      for(var i=0;i<palette.length;i++) {
-        
-        var li = $('<li>', {
-            style: 'background: '+palette[i]+';'
-        });
-        
-        li.appendTo(colorsList);
-        
-        li.bind('click', function(event){
-          $("#colorpickerswatches li").removeClass('picked');
-          $(event.target).addClass("picked");
-          
-          var newColorId = getColorPickerSwatchIndex($("#colorpickerswatches .picked"));
-          pad.notifyChangeColor(newColorId);
-        });
-        
-        if(myUserInfo.colorId == i){
-          $(event.target).addClass("picked");
-        }
-      }
-            
-      colorPickerSetup = true;
-    }
-    
-    $("#mycolorpicker").css('display', 'block');
-    colorPickerOpen = true;
-    
-    $("#colorpickerswatches li").removeClass('picked');
-    $($("#colorpickerswatches li")[myUserInfo.colorId]).addClass("picked"); //seems weird
-    
-    //paduserlist.renderMyUserInfo();
-  } 
-}
-
 
 var paduserlist = (function() {
 
@@ -366,26 +305,6 @@ var paduserlist = (function() {
     });
   }
 
-  function renderMyUserInfo() {
-    if (myUserInfo.name) {
-      $("#myusernameedit").removeClass("editempty").val(
-        myUserInfo.name);
-    }
-    else {
-      $("#myusernameedit").addClass("editempty").val(
-        "< enter your name >");
-    }
-    if (colorPickerOpen) {
-      $("#myswatchbox").addClass('myswatchboxunhoverable').removeClass(
-        'myswatchboxhoverable');
-    }
-    else {
-      $("#myswatchbox").addClass('myswatchboxhoverable').removeClass(
-        'myswatchboxunhoverable');
-    }
-    $("#myswatch").css('background', pad.getColorPalette()[myUserInfo.colorId]);
-  }
-
   function findExistingIndex(userId) {
     var existingIndex = -1;
     for(var i=0;i<otherUsersInfo.length;i++) {
@@ -466,7 +385,7 @@ var paduserlist = (function() {
                         // wrap with setTimeout to do later because we get
                         // a double "blur" fire in IE...
                         window.setTimeout(function() {
-                          renderMyUserInfo();
+                          self.renderMyUserInfo();
                         }, 0);
                       });
       }
@@ -489,7 +408,7 @@ var paduserlist = (function() {
     setMyUserInfo: function(info) {
       myUserInfo = $.extend({}, info);
 
-      renderMyUserInfo();
+      self.renderMyUserInfo();
     },
     userJoinOrUpdate: function(info) {
       if ((! info.userId) || (info.userId == myUserInfo.userId)) {
@@ -548,7 +467,21 @@ var paduserlist = (function() {
         rowManager.insertRow(newIndex, userData);
       }
 
-      updateInviteNotice();
+      updateInviteNotice(); 
+      
+      self.updateNumberOfOnlineUsers();
+    },
+    updateNumberOfOnlineUsers: function(){
+      var online = 1; // you are always online!
+      for(var i=0;i<otherUsersData.length;i++) {
+        if(otherUsersData[i].status == "")
+        {
+          online++;
+        }
+      }
+      $("#online_count").text(online);
+            
+      return online;
     },
     userLeave: function(info) {
       var existingIndex = findExistingIndex(info.userId);
@@ -578,7 +511,9 @@ var paduserlist = (function() {
         }, 8000); // how long to wait
         userData.leaveTimer = thisLeaveTimer;
       }
-      updateInviteNotice();
+      updateInviteNotice();    
+      
+      self.updateNumberOfOnlineUsers();  
     },
     showGuestPrompt: function(userId, displayName) {
       if (knocksToIgnore[userId]) {
@@ -631,7 +566,88 @@ var paduserlist = (function() {
       pad.sendClientMessage(msg);
 
       self.removeGuestPrompt(guestId);
+    },
+    renderMyUserInfo: function() {
+      if (myUserInfo.name) {
+        $("#myusernameedit").removeClass("editempty").val(
+          myUserInfo.name);
+      }
+      else {
+        $("#myusernameedit").addClass("editempty").val(
+          "Enter your name");
+      }
+      if (colorPickerOpen) {
+        $("#myswatchbox").addClass('myswatchboxunhoverable').removeClass(
+          'myswatchboxhoverable');
+      }
+      else {
+        $("#myswatchbox").addClass('myswatchboxhoverable').removeClass(
+          'myswatchboxunhoverable');
+      }
+      $("#myswatch").css('background', pad.getColorPalette()[myUserInfo.colorId]);
     }
   };
   return self;
-}());
\ No newline at end of file
+}());
+
+function getColorPickerSwatchIndex(jnode) {
+//  return Number(jnode.get(0).className.match(/\bn([0-9]+)\b/)[1])-1;
+  return $("#colorpickerswatches li").index(jnode);
+}
+function closeColorPicker(accept) {
+  if (accept) {
+    var newColorId = getColorPickerSwatchIndex($("#colorpickerswatches .picked"));
+    if (newColorId >= 0) { // fails on NaN
+      myUserInfo.colorId = newColorId;
+      pad.notifyChangeColor(newColorId);
+    }
+    
+    paduserlist.renderMyUserInfo();
+  } else {
+    pad.notifyChangeColor(previousColorId);
+    paduserlist.renderMyUserInfo();
+  }
+  
+  colorPickerOpen = false;
+  $("#mycolorpicker").css('display', 'none');
+}
+
+function showColorPicker() {
+  previousColorId = myUserInfo.colorId ;
+
+  if (! colorPickerOpen) {
+    var palette = pad.getColorPalette();
+
+    if(!colorPickerSetup) {
+      var colorsList = $("#colorpickerswatches")
+      for(var i=0;i<palette.length;i++) {
+        
+        var li = $('<li>', {
+            style: 'background: '+palette[i]+';'
+        });
+        
+        li.appendTo(colorsList);
+        
+        li.bind('click', function(event){
+          $("#colorpickerswatches li").removeClass('picked');
+          $(event.target).addClass("picked");
+          
+          var newColorId = getColorPickerSwatchIndex($("#colorpickerswatches .picked"));
+          pad.notifyChangeColor(newColorId);
+        });
+        
+        if(myUserInfo.colorId == i){
+          $(event.target).addClass("picked");
+        }
+      }
+            
+      colorPickerSetup = true;
+    }
+    
+    $("#mycolorpicker").css('display', 'block');
+    colorPickerOpen = true;
+    
+    $("#colorpickerswatches li").removeClass('picked');
+    $($("#colorpickerswatches li")[myUserInfo.colorId]).addClass("picked"); //seems weird
+  } 
+}
\ No newline at end of file
diff --git a/static/padhtml b/static/padhtml
index e6a43e53..6bb0c934 100644
--- a/static/padhtml
+++ b/static/padhtml
@@ -10,6 +10,9 @@
 <!-- <base href="http://localhost:9001/" />-->
 <!-- CSS -->
 <link href="/static/css/pad_lite.css" rel="stylesheet" type="text/css"/>
+<!--[if lte IE 7]>
+<link href="/static/css/pad_ie_lite.css" rel="stylesheet" type="text/css"/>
+<![endif]-->
 <!-- javascript -->
 <script type="text/javascript">
   // <![CDATA[
@@ -84,17 +87,6 @@ var clientVars = {};  // ]]>
 </ul>
 
 <ul id="menu_right">
-<li>
-  <a href="javascript:void (window.pad&&pad.editbarClick('showusers'));" title="Show connected users">
-    <img id="showusersicon" src="/static/img/mar11/editbar_showusers.gif" />
-  </a>
-</li>
-<li class="separator"></li>
-<li>
-	<a href="javascript:void (window.pad&&pad.editbarClick('clearauthorship'));" title="Clear Authorship Colors">
-	  <img src="/static/img/jun09/pad/editbar_clearauthorship.gif" />
-	</a>
-</li>
 <li>
 	<a href="javascript:void (window.pad&&pad.editbarClick('undo'));" title="Undo (ctrl-Z)">
 	  <img src="/static/img/jun09/pad/editbar_undo.gif" />
@@ -125,31 +117,78 @@ var clientVars = {};  // ]]>
 		<option value="z300">300%</option>
 	</select>
 </li>
+<li class="separator"></li>
+<li>
+	<a href="javascript:void (window.pad&&pad.editbarClick('clearauthorship'));" title="Clear Authorship Colors">
+	  <img src="/static/img/jun09/pad/editbar_clearauthorship.gif" />
+	</a>
+</li>
+<li>
+  <a href="javascript:void (window.pad&&pad.editbarClick('showusers'));" title="Show connected users">
+    <img id="showusersicon" src="/static/img/mar11/editbar_showusers.gif" /> <span id="online_count">1</span>
+  </a>
+</li>
 </ul>
 
 </div>
 
 <div id="users">
-	<ul>
-		<li><a onclick="showColorPicker();" title="Change my name/color">John</a></li>
-		<li>Joe</li>
-	</ul>
-	<!-- some example code so I can make the css -->
-	<div id="mycolorpicker">
-		<ul id="colorpickerswatches">
-		</ul>
-		<span id="mycolorpickersave">
-			<a onclick="closeColorPicker()">Save</a>
-		</span>
-		<span id="mycolorpickercancel">
-			<a onclick="closeColorPicker()">Cancel</a>
-		</span>
-	</div>
-</div>
+  <div id="connectionstatus">
+    <!-- -->
+  </div>
+
+  <div id="myuser">
+  
+     <div id="mycolorpicker">
+     	<ul id="colorpickerswatches">
+     	</ul>
+     	<span id="mycolorpickersave">
+     		<a onclick="closeColorPicker()">Save</a>
+     	</span>
+     	<span id="mycolorpickercancel">
+     		<a onclick="closeColorPicker()">Cancel</a>
+     	</span>
+   </div>
+  	  <div id="mycolorpickersave">Save</div>
+      <div id="mycolorpickercancel">Cancel</div>
+    
+    <div id="myswatchbox"><div id="myswatch"><!-- --></div></div>
+    <div id="myusernameform"><input type="text" id="myusernameedit" disabled="disabled" /></div>
+    <div id="mystatusform"><input type="text" id="mystatusedit" disabled="disabled" /></div>
+  </div>
+  
+  <div id="otherusers">
+    <div id="guestprompts"><!-- --></div>
+    
+    <table id="otheruserstable" cellspacing="0" cellpadding="0" border="0">
+  	<tr>
+  	<td>
+  	</td>
+    </tr>
+    </table>
+    
+    <div id="nootherusers">
+      <a href="javascript:void(0)">Invite</a> other users and they will show up here.
+    </div>
+  </div>
+  
+  <div id="userlistbuttonarea">
+    <!--<a href="javascript:void(0)" id="sharebutton">Share</a>-->
+  </div>
+  
+</div> 
+<!-- /padusers -->
+  
+  
+<!--<div id="users">
+
+	<!-- some example code so I can make the css --*>
+	
+</div>-->
+
+<div id="editorcontainerbox">
 
 <div id="editorcontainer">
-
-<div id="editor">
   <!-- -->
 </div>
 <div id="editorloading">