Index: main/waeup.diazo/trunk/kofa/theme.html
===================================================================
--- main/waeup.diazo/trunk/kofa/theme.html	(revision 10114)
+++ main/waeup.diazo/trunk/kofa/theme.html	(revision 10130)
@@ -13,4 +13,5 @@
     <link href="bootstrap/css/bootstrap-responsive.min.css"
 	  rel="stylesheet">
+    <link href="static/css/base.css" rel="stylesheet">
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
@@ -34,14 +35,103 @@
   <body id="kofa-body">
 
-    <h1>waeup.kofa theme</h1>
+    <div class="navbar navbar-inverse navbar-static-top">
+      <div class="navbar-inner">
+        <div class="container-fluid">
+          <button type="button" class="btn btn-navbar" data-toggle="collapse"
+		  data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="brand active" href="#">WAeUP.Kofa</a>
+          <div class="nav-collapse collapse">
+            <ul class="nav">
+              <li class="active"><a href="#">Academics</a></li>
+              <li><a href="#about">Applicants</a></li>
+              <li><a href="#contact">Students</a></li>
+              <li><a href="#contact">Hostels</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle"
+		   data-toggle="dropdown">Language <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">en</a></li>
+                  <li><a href="#">fr</a></li>
+                  <li><a href="#">de</a></li>
+                  <li><a href="#">ha</a></li>
+                  <li><a href="#">yo</a></li>
+                  <li><a href="#">ig</a></li>
+                </ul>
+              </li>
+            </ul>
+            <ul class="nav secondary-nav pull-right">
+              <li class="nav"><a href="#">Contact</a></li>
+              <li class="nav"><a href="#">Logout</a></li>
+	    </ul>
 
-    <p>
-      Donec id elit non mi porta gravida at eget metus. Fusce dapibus,
-      tellus ac cursus commodo, tortor mauris condimentum nibh, ut
-      fermentum massa justo sit amet risus. Etiam porta sem malesuada
-      magna mollis euismod. Donec sed odio dui.
-    </p>
+          </div><!--/.nav-collapse -->
+        </div>
+      </div>
+    </div>
 
-    <img src="static/img/bg.png" />
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+	<div class="span12">
+	  <ul class="breadcrumb">
+	    <li>
+	      <a href="#">
+		<span>Home</span>
+	      </a>
+	      <span class="divider">/</span>
+	    </li>
+	    <li>
+	      <a href="#">
+		<span>Subtopic</span>
+	      </a>
+	    </li>
+	  </ul>
+	</div><!-- /span12 -->
+      </div><!-- /row-fluid -->
+
+      <div class="row-fluid">
+	<div class="span2">
+	  <div class="sidebar-nav well">
+            <ul class="nav nav-list">
+	      <li class="nav-header">Username</li>
+              <li><a href="#">Portal Configuration</a></li>
+	      <li><a href="#">Portal Users</a></li>
+	      <li><a href="#">Data Center</a></li>
+	      <li><a href="#">Reports</a></li>
+	      <li><a href="#">Access Codes</a></li>
+            </ul>
+          </div> <!-- /well -->
+        </div><!-- /span2 -->
+	<div class="span10 content well">
+
+	  <div class="hero-unit">
+	    <h1>waeup.kofa theme</h1>
+	    <p>A sample theme for waeup.kofa</p>
+	  </div>
+
+	  <p>
+	    Donec id elit non mi porta gravida at eget metus. Fusce
+	    dapibus, tellus ac cursus commodo, tortor mauris
+	    condimentum nibh, ut fermentum massa justo sit amet
+	    risus. Etiam porta sem malesuada magna mollis
+	    euismod. Donec sed odio dui.
+	  </p>
+
+	  <img src="static/img/bg.png" />
+
+	  <div class="footer">
+	    <hr />
+	    <p class="credit muted">&copy; WAeUP Group 2013</p>
+	  </div>
+
+
+	</div>
+      </div><!-- /row-fluid -->
+    </div><!-- /container-fluid -->
 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
