=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/widgets.css'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/widgets.css	2013-06-29 14:16:34 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/widgets.css	2013-06-29 14:41:19 +0000
@@ -66,26 +66,44 @@
 #detailsData
 {
   vertical-align: top;
-  width: 20em;
-  padding-left: 2em;
+  width: 0;
+  padding-left: 15px;
 }
 
-#detailsArea
+#detailsArea 
 {
   display: none;
+  border: 1px solid #ececec;
+  position: fixed;
+  top: 150px;
+  width: 233px;
+  margin-right: 20px;
+  padding: 15px;
+  overflow: auto;
+  color: #222;
+}
+
+#detailsArea label 
+{
+  font-family: LiberationSansBold, arial;
+  font-size: 13px;
+}
+
+#hideDetailsArea
+{
+  float: right;
 }
 
 #warningArea
 {
+  display: none;
+  border: 1px solid #9d0000;
+  background-color: #f48d8d;
   position: fixed;
-  right: 10px;
-  top: 200px;
-  display: none;
-}
-
-#hideDetailsArea
-{
-  float: right;
+  top: 150px;
+  width: 233px;
+  padding: 15px;
+  overflow: auto;
 }
 
 /*----------------------------------------------------------------------------*/
@@ -322,33 +340,6 @@
   border-radius: 3px;
 }
 
-div#detailsArea 
-{
-  border: 1px solid #a9c2dc;
-  background-color: #ebf0f6;
-  position: fixed;
-  width: 18em;
-  max-height: 75%;
-  padding: 0.5em;
-  overflow: auto;
-  border-radius: 3px;
-}
-
-div#detailsArea label 
-{
-  font-family: LiberationSansBold, arial;
-  font-size: 13px;
-}
-
-div#warningArea
-{
-  border: 1px solid #9d0000;
-  background-color: #f48d8d;
-  position: fixed;
-  width: 18em;
-  padding: 0.5em;
-}
-
 div#headerMessage
 {
   top: 0px;

=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/commons.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/commons.js	2013-06-25 13:58:55 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/commons.js	2013-06-29 14:41:19 +0000
@@ -668,7 +668,8 @@
  */
 function showDetails()
 {
-    $( '#detailsArea' ).show( "fast" );
+	$( '#detailsData' ).css( 'width', '270px' );
+    $( '#detailsArea' ).show();
 }
 
 /**
@@ -676,7 +677,8 @@
  */
 function hideDetails()
 {
-    $( '#detailsArea' ).hide( "fast" );
+	$( '#detailsData' ).css( 'width', '0' );
+    $( '#detailsArea' ).hide();
 }
 
 /**