--- a/css/mpiwg.css	Fri Jun 21 09:06:11 2013 +0200
+++ b/css/mpiwg.css	Mon Jun 24 12:13:46 2013 +0200
@@ -1320,6 +1320,28 @@
 	text-decoration: underline;
 }
 
+/*
+ * flyout divs (for webpages)
+ */
+.flyout {
+	position: relative;
+	z-index: 0;
+}
+.flyout.flying {
+    background-color: white;
+    z-index: 10;
+}
+
+.flyout .flyout_open,
+.flyout .flyout_close {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+} 
+.flyout .flyout_close {
+	/* close initially hidden */
+	display: none;
+}
 
 /* 
  * sidebar 

--- a/js/mpiwg.js	Fri Jun 21 09:06:11 2013 +0200
+++ b/js/mpiwg.js	Mon Jun 24 12:13:46 2013 +0200
@@ -109,7 +109,7 @@
      * foldout divs
      * 
      * foldable: .foldable is ancestor of .fold_head and .fold_body
-     *   that are folded simultaneously.
+     *   all children are folded simultaneously.
      * 
      * foldableById: .foldableById is ancestor of multiple .fold_head and .fold_body
      *   where each pair has a common unique .foldId_xxx.
@@ -180,4 +180,28 @@
             }
         }).css('cursor', 'pointer');
     });
+    
+    /*
+     * flyout divs
+     */
+    $('.flyout').each(function () {
+        var $flyout = $(this);
+        var parent = $flyout.parent();
+        var ph = parent.height();
+        var pw = parent.width();
+        // size up to parent in folded state
+        var dh = ph - $flyout.outerHeight();
+        if (dh > 0) {
+            $flyout.height($flyout.height()+dh);
+        }
+        $flyout.find('.flyout_open').on('click', function () {
+            console.debug('flyout click on ', this);
+            $flyout.addClass('flying');
+            $flyout.css('position','absolute');
+            $flyout.width(2*pw);
+            $flyout.height(2*ph);
+        }).css('cursor', 'pointer');
+        
+    });     
+
 }); 
\ No newline at end of file