Index: main/waeup.kofa/trunk/layout/static/css/base.css
===================================================================
--- main/waeup.kofa/trunk/layout/static/css/base.css	(revision 11551)
+++ main/waeup.kofa/trunk/layout/static/css/base.css	(revision 11558)
@@ -131,8 +131,11 @@
 /* Buttons */
 
-.btn {
-    margin: 4px;
-    font-size: 13px;
-    display: inline;
+input.btn {
+    padding: 8px 12px;
+    margin-right: 4px;
+}
+
+input.btn-sm {
+  padding: 5px 10px;
 }
 
Index: main/waeup.kofa/trunk/layout/static/css/file-upload.css
===================================================================
--- main/waeup.kofa/trunk/layout/static/css/file-upload.css	(revision 11558)
+++ main/waeup.kofa/trunk/layout/static/css/file-upload.css	(revision 11558)
@@ -0,0 +1,19 @@
+.btn-file {
+    position: relative;
+    overflow: hidden;
+}
+.btn-file input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 100%;
+    min-height: 100%;
+    font-size: 999px;
+    text-align: right;
+    filter: alpha(opacity=0);
+    opacity: 0;
+    outline: none;
+    background: white;
+    cursor: inherit;
+    display: block;
+}
Index: main/waeup.kofa/trunk/layout/static/js/file-upload.js
===================================================================
--- main/waeup.kofa/trunk/layout/static/js/file-upload.js	(revision 11558)
+++ main/waeup.kofa/trunk/layout/static/js/file-upload.js	(revision 11558)
@@ -0,0 +1,21 @@
+$(document)
+	.on('change', '.btn-file :file', function() {
+		var input = $(this),
+		numFiles = input.get(0).files ? input.get(0).files.length : 1,
+		label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+		input.trigger('fileselect', [numFiles, label]);
+});
+
+$(document).ready( function() {
+	$('.btn-file :file').on('fileselect', function(event, numFiles, label) {
+
+		var input = $(this).parents('.input-group').find(':text'),
+			log = numFiles > 1 ? numFiles + ' files selected' : label;
+
+		if( input.length ) {
+			input.val(log);
+		} else {
+			if( log ) alert(log);
+		}
+	});
+});
Index: main/waeup.kofa/trunk/layout/theme.html
===================================================================
--- main/waeup.kofa/trunk/layout/theme.html	(revision 11551)
+++ main/waeup.kofa/trunk/layout/theme.html	(revision 11558)
@@ -18,4 +18,5 @@
           rel="stylesheet">
     <link href="static/css/base.css" rel="stylesheet">
+    <link href="static/css/file-upload.css" rel="stylesheet">
 
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
@@ -271,5 +272,39 @@
                      title="This is a tooltip">Sample Tooltip
                 </div>
+
                 <br><br>
+
+                <h3>File Upload</h3>
+                <br>
+                <a href="#">Birth Certificate Scan</a>
+                <input type="submit"
+                       value="Delete file"
+                       class="btn btn-danger" />
+                <div class="btn btn-default btn-file">
+                  Select new file&hellip;
+                  <input type="file"/>
+                </div>
+                <input type="submit"
+                       value="Upload selected file"
+                       class="btn btn-primary" />
+                (10 kB max.)
+                <br><br>
+
+        				<div class="input-group">
+        					<div class="input-group-btn">
+        						<div class="btn btn-default btn-file">
+                      Select new file&hellip;
+                      <input type="file">
+                    </div>
+        					</div>
+        					<input type="text" class="form-control" readonly>
+                  <div class="input-group-btn">
+                    <input type="submit"
+                           value="Upload selected file"
+                           class="btn btn-primary" />
+                    (10 kB max.)
+                  </div>
+                </div>
+
 
               </div><!-- /tab-content -->
@@ -309,9 +344,8 @@
                            name="myinput[]" placeholder="A name..." />
                   </div>
-                  <button type="submit" class="btn rowadd btn-default">
+                  <div type="submit" class="btn rowadd btn-default">
                     Add row
-                  </button>
-                  <br />
-                  <button type="submit" class="btn btn-primary">Save</button>
+                  </div>
+                  <div type="submit" class="btn btn-primary">Save</div>
                 </fieldset>
               </form>
@@ -338,7 +372,7 @@
                       <form method="post">
                         <input type="hidden" name="userid" value="admin" />
-                        <input class="btn btn-sm btn-primary" type="submit"
+                        <input class="btn btn-primary btn-sm" type="submit"
                                name="manage" value="Manage" />
-                        <input class="btn btn-sm btn-default" type="submit"
+                        <input class="btn btn-default btn-sm" type="submit"
                                name="delete" value="Remove" />
                       </form>
@@ -518,4 +552,5 @@
     <script src="static/js/kofa-activate-tab.js"></script>
     <script src="static/js/kofa-scrollto.js"></script>
+    <script src="static/js/file-upload.js"></script>
     <script class="kofa-script-tooltip"
         src="static/js/kofa-tooltip.js">
