Index: main/waeup.kofa/branches/uli-diazo-themed/layout/rules.xml
===================================================================
--- main/waeup.kofa/branches/uli-diazo-themed/layout/rules.xml	(revision 11029)
+++ main/waeup.kofa/branches/uli-diazo-themed/layout/rules.xml	(revision 11030)
@@ -50,15 +50,20 @@
 
     <!-- breadcrumbs -->
-    <drop css:theme="div.kofa-breadcrumbs-box"
+    <drop css:theme="div.kofa-breadcrumbs-box-long"
           css:if-not-content="ul.breadcrumb" />
+    <drop css:theme="div.kofa-breadcrumbs-box-long"
+          css:if-content="div.wfstatus" />
+    <drop css:theme="div.kofa-breadcrumbs-box-short"
+          css:if-not-content="ul.breadcrumb" />
+    <drop css:theme="div.kofa-breadcrumbs-box-short"
+          css:if-not-content="div.wfstatus" />
     <replace css:theme-children="ol.kofa-breadcrumbs"
              css:content-children="ul.breadcrumb" />
 
-    <!-- student info -->
-
-    <drop css:theme="div.kofa-student-breadcrumbs-box"
-          css:if-not-content="ul.student-info-bar" />
-    <replace css:theme-children="ol.kofa-student-breadcrumbs"
-             css:content-children="ul.student-info-bar" />
+    <!-- student status -->
+    <drop css:theme="div.kofa-student-status-box"
+          css:if-not-content="div.wfstatus" />
+    <replace css:theme-children="div.wfstatus"
+             css:content-children="div.wfstatus" />
 
     <!-- sidebar -->
Index: main/waeup.kofa/branches/uli-diazo-themed/layout/static/css/base.css
===================================================================
--- main/waeup.kofa/branches/uli-diazo-themed/layout/static/css/base.css	(revision 11029)
+++ main/waeup.kofa/branches/uli-diazo-themed/layout/static/css/base.css	(revision 11030)
@@ -28,5 +28,5 @@
 }
 
-.breadcrumb {
+.breadcrumb , .wfstatus {
     background-color: #fff;
     margin-bottom: 0px;
@@ -40,4 +40,5 @@
     background-image: None;
     background-color: #fff;
+    filter: None;
 }
 
@@ -47,32 +48,29 @@
 }
 
-.wfstatus {
-    float: right;
-}
 
 /* Kofa styles */
 
 .kofa-sidebar,
-.kofa-content-narrow ,
-.kofa-breadcrumbs-box {
+.kofa-content-narrow,
+.kofa-content-wide,
+.kofa-breadcrumbs-box-short,
+.kofa-breadcrumbs-box-long,
+.kofa-student-status-box {
     padding: 0px 5px 0px 5px;
 }
 
-.kofa-content-wide {
-    padding: 0px 15px 0px 15px;
-}
-
 .workflow {
-  border:1px solid #1fdf00;
-  background-color:#bbffb6;
-  font-family: courier;
-  font-size: 100%;
-  padding: 4px;
-  margin-bottom: 8px;
-  line-height: 16px;
-}
-
-.kofa-breadcrumbs-box .well,
-.kofa-student-breadcrumbs-box .well {
+    border:1px solid #1fdf00;
+    background-color:#bbffb6;
+    font-family: courier;
+    font-size: 100%;
+    padding: 4px;
+    margin-bottom: 8px;
+    line-height: 16px;
+}
+
+.kofa-breadcrumbs-box-short .well,
+.kofa-breadcrumbs-box-long .well,
+.kofa-student-status-box .well {
     padding: 5px 5px 5px 5px;
 }
@@ -235,5 +233,4 @@
 /* Smartphone styles */
 
-
 @media (max-width: 767px) {
 
@@ -243,6 +240,8 @@
 
   .kofa-sidebar,
-  .kofa-content-narrow , .kofa-breadcrumbs-box,
-  .kofa-student-breadcrumbs-box {
+  .kofa-content-narrow ,
+  .kofa-breadcrumbs-box-short,
+  .kofa-breadcrumbs-box-long,
+  .kofa-student-status-box {
       padding: 0px 0px 0px 0px;
   }
Index: main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html
===================================================================
--- main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html	(revision 11029)
+++ main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html	(revision 11030)
@@ -19,10 +19,11 @@
     <link href="static/css/base.css" rel="stylesheet">
 
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
     <script src="static/js/kofa-recaptcha_white.js"></script>
-
-    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
 
     <!-- icons -->
@@ -87,5 +88,5 @@
 
       <div class="row">
-        <div class="col-md-12 container kofa-breadcrumbs-box">
+        <div class="col-md-12 container kofa-breadcrumbs-box-long">
           <div class="well">
             <ol class="breadcrumb kofa-breadcrumbs">
@@ -97,15 +98,60 @@
               <li>
                 <a href="#">
-                  Subtopic
-                </a>
-              </li>
-              <span class="wfstatus">
-                Student Id: K12345678
-                  &nbsp;&nbsp;
-                  State: clearance requested
-              </span> <!-- /wfstatus -->
+                  Subtopic 1
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  Subtopic 2
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  Subtopic 3
+                </a>
+              </li>
             </ol><!-- /kofa-breadcrumbs -->
           </div> <!-- /well -->
-        </div> <!-- /kofa-breadcrumbs-box -->
+        </div> <!-- /kofa-breadcrumbs-box-short -->
+      </div>
+
+      <div class="row">
+        <div class="col-md-8 container kofa-breadcrumbs-box-short">
+          <div class="well">
+            <ol class="breadcrumb kofa-breadcrumbs">
+              <li>
+                <a href="#">
+                  Home
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  Subtopic 1
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  Subtopic 2
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  Subtopic 3
+                </a>
+              </li>
+            </ol><!-- /kofa-breadcrumbs -->
+          </div> <!-- /well -->
+        </div> <!-- /kofa-breadcrumbs-box-short -->
+
+        <div class="col-md-4 container kofa-student-status-box">
+          <div class="well">
+            <div class="wfstatus">
+                K1000000
+                |
+                quite long student status
+            </div> <!-- /wfstatus -->
+          </div> <!-- /well -->
+        </div> <!-- /kofa-student-status-box -->
+
       </div> <!-- /row -->
 
@@ -225,33 +271,4 @@
 
       <div class="row">
-        <div class="col-md-12 container kofa-student-breadcrumbs-box">
-          <div class="well">
-            <ol class="breadcrumb kofa-student-breadcrumbs">
-              <li>
-                <a href="#">
-                  Home
-                </a>
-              </li>
-              <li>
-                <a href="#">
-                  Students
-                </a>
-              </li>
-              <li>
-                <a href="#">
-                  Demo Student
-                </a>
-              </li>
-              <span class="wfstatus">
-                  K1000000
-                  |
-                  school fee paid
-              </span>
-            </ol>
-          </div>
-        </div>
-      </div>
-
-      <div class="row">
         <div class="col-md-12 content kofa-content-wide">
           <div class="well kofa-content">
Index: main/waeup.kofa/branches/uli-diazo-themed/src/waeup/kofa/browser/templates/staffsitelayout.pt
===================================================================
--- main/waeup.kofa/branches/uli-diazo-themed/src/waeup/kofa/browser/templates/staffsitelayout.pt	(revision 11029)
+++ main/waeup.kofa/branches/uli-diazo-themed/src/waeup/kofa/browser/templates/staffsitelayout.pt	(revision 11030)
@@ -74,16 +74,19 @@
             tal:condition="python: layout.isAuthenticated()"
             tal:content="structure provider:breadcrumbs" />
-      <span
-        tal:condition="layout/getStudentName" class="wfstatus">
-          <span i18n:translate="">Student Id:</span>
-          <span tal:replace="python:context.student.student_id">
-            ID
-          </span>&nbsp;&nbsp;
-          <span i18n:translate="">State:</span>
-          <span tal:replace="python:context.student.translated_state">
-            STATE
-          </span>
-      </span>
     </ul>
+    <!-- /Diazo element-->
+
+    <!-- Diazo element-->
+    <span tal:condition="layout/getStudentName">
+      <div class="wfstatus">
+            <span tal:replace="python:context.student.student_id">
+              Id
+            </span>
+            |
+            <span tal:replace="python:context.student.translated_state">
+              State
+            </span>
+      </div>
+    </span>
     <!-- /Diazo element-->
 
Index: main/waeup.kofa/branches/uli-diazo-themed/src/waeup/kofa/browser/templates/studentsitelayout.pt
===================================================================
--- main/waeup.kofa/branches/uli-diazo-themed/src/waeup/kofa/browser/templates/studentsitelayout.pt	(revision 11029)
+++ main/waeup.kofa/branches/uli-diazo-themed/src/waeup/kofa/browser/templates/studentsitelayout.pt	(revision 11030)
@@ -59,18 +59,26 @@
 
     <div class="container">
-      <ul class="student-info-bar" tal:condition="layout/isAuthenticated">
+      <!-- Diazo element-->
+      <ul class="breadcrumb" tal:condition="layout/isAuthenticated">
         <tal:breadcrumbs
               tal:condition="python: layout.isAuthenticated()"
               tal:content="structure provider:breadcrumbs" />
-        <span tal:condition="layout/getStudentName" class="wfstatus">
-            <span tal:replace="python:context.student.student_id">
-              Id
-            </span>
-            |
-            <span tal:replace="python:context.student.translated_state">
-              State
-            </span>
-        </span>
       </ul>
+      <!-- /Diazo element-->
+
+      <!-- Diazo element-->
+      <span tal:condition="layout/getStudentName">
+        <div class="wfstatus">
+              <span tal:replace="python:context.student.student_id">
+                Id
+              </span>
+              |
+              <span tal:replace="python:context.student.translated_state">
+                State
+              </span>
+        </div>
+      </span>
+      <!-- /Diazo element-->
+
       <div class="kofa-content">
         <div class="actionbar" tal:condition="provider:actionbar">
