Index: main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html
===================================================================
--- main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html	(revision 10985)
+++ main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html	(revision 10986)
@@ -11,4 +11,10 @@
     <link href="bootstrap/css/bootstrap.min.css"
           rel="stylesheet">
+    <link href="bootstrap/css/bootstrap-theme.min.css"
+          rel="stylesheet">
+
+    <link href="static/css/jquery.dataTables.css"
+          rel="stylesheet">
+
     <link href="static/css/base.css" rel="stylesheet">
 
@@ -20,12 +26,5 @@
     <!-- icons -->
     <link rel="shortcut icon" href="static/ico/favicon.ico">
-    <link rel="apple-touch-icon-precomposed" sizes="144x144"
-          href="static/ico/apple-touch-icon-144-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="114x114"
-          href="static/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72"
-          href="static/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed"
-          href="static/ico/apple-touch-icon-57-precomposed.png">
+
 
   </head>
@@ -175,14 +174,15 @@
             </div>
             <div>...content that spans the whole page.</div>
+            <br><br>
             <div id="#sampleform">
               <form method="post">
                 <fieldset id="form-fieldset">
                   <legend>A Sample Form</legend>
-                  <div class="form-field">
+                  <div class="form-group">
                     <label>Some Label</label>
                     <input type="text" class="textType"
                            name="myinput[]" placeholder="A name..." />
                   </div>
-                  <button type="submit" class="btn rowadd">
+                  <button type="submit" class="btn rowadd btn-default">
                     Add row
                   </button>
@@ -192,9 +192,43 @@
               </form>
             </div> <!-- /sampleform -->
-          </div> <!-- /well -->
-
-
-
-
+            <br><br>
+            <h3>A Sample Data Table</h3>
+            <table id="#dadatable" class="table dataTable">
+              <thead>
+                <tr>
+                  <th>Id</th>
+                  <th>Name</th>
+                  <th>Portal Roles</th>
+                  <th>Local Roles</th>
+                  <th></th>
+                </tr>
+              </thead><tbody><tr><td>admin</td>
+                  <td>John</td>
+                  <td nowrap="nowrap">Portal Manager <br />Academics Officer (view only) </td>
+                  <td>Owner</td>
+                  <td class="text-right">
+                    <form method="post">
+                      <input type="hidden" name="userid" value="admin" />
+                      <input class="btn btn-sm btn-primary" type="submit" name="manage" value="Manage" />
+                      <input class="btn btn-sm btn-default" type="submit" name="delete" value="Remove" />
+                    </form>
+                  </td>
+                </tr>
+                <tr>
+                  <td>tester</td>
+                  <td>Vitali</td>
+                  <td nowrap="nowrap">Academics Officer (view only)</td>
+                  <td>Owner</td>
+                  <td class="text-right">
+                    <form method="post">
+                      <input type="hidden" name="userid" value="your_id" />
+                      <input class="btn btn-sm btn-primary" type="submit" name="manage" value="Manage" />
+                      <input class="btn btn-sm btn-default" type="submit" name="delete" value="Remove" />
+                    </form>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div> <!-- /well -->
         </div> <!-- /kofa-content-wide -->
       </div> <!-- /row -->
@@ -222,8 +256,30 @@
          evt.preventDefault();
          /* Add first .form-field after last .form-field... */
-         $(".form-field:last").after($(".form-field:first").clone().hide().fadeIn());
+         $(".form-group:last").after($(".form-group:first").clone().hide().fadeIn());
       });
     </script>
 
+    <script src="static/js/jquery.dataTables.min.js"></script>
+
+    <script type="text/javascript">
+      $(document).ready(function(){
+        $('.dataTable').dataTable();
+
+      	$('.dataTableFiles').dataTable( {
+      		"aaSorting": [[ 2, "desc" ]],
+      	} );
+
+      	$('.dataTableManage').dataTable( {
+      		"aaSorting": [[ 1, "asc" ]],
+      		"aoColumnDefs":[{ "bSortable": false, "aTargets": [ 0 ] }]
+      	} );
+
+      	$('.dataTableManageFiles').dataTable( {
+      		"aaSorting": [[ 3, "desc" ]],
+      		"aoColumnDefs":[{ "bSortable": false, "aTargets": [ 0 ] }]
+      	} );
+      });
+    </script>
+
   </body>
 </html>
