diff --git a/main/css/base.css b/main/css/base.css
index f22a10c8cf..2ca7fb4eb7 100644
--- a/main/css/base.css
+++ b/main/css/base.css
@@ -350,215 +350,731 @@ pre {
 
 
 
+/* top nav bar features */
 
-/* Patterns.less
- * Repeatable UI elements outside the base styles provided from the scaffolding
- * ---------------------------------------------------------------------------- */
-.topbar {
-  height: 40px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10000;
-  overflow: visible;
+
+
+.nav {
+  margin-left: 0;
+  margin-bottom: 18px;
+  list-style: none;
 }
-.topbar a {
-  color: #bfbfbf;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+.nav > li > a {
+  display: block;
 }
-.topbar h3 a:hover, .topbar .brand a:hover, .topbar ul .active > a {
-  background-color: #333;
-  background-color: rgba(255, 255, 255, 0.05);
-  color: #ffffff;
+.nav > li > a:hover {
   text-decoration: none;
+  background-color: #eeeeee;
 }
-.topbar h3 {
-  position: relative;
+.nav-list {
+  padding-left: 14px;
+  padding-right: 14px;
+  margin-bottom: 0;
+}
+.nav-list > li > a, .nav-list .nav-header {
+  display: block;
+  padding: 3px 15px;
+  margin-left: -15px;
+  margin-right: -15px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+.nav-list .nav-header {
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 18px;
+  color: #999999;
+  text-transform: uppercase;
+}
+.nav-list > li + .nav-header {
+  margin-top: 9px;
+}
+.nav-list .active > a, .nav-list .active > a:hover {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  background-color: #0088cc;
 }
-.topbar h3 a, .topbar .brand {
+.nav-list [class^="icon-"] {
+  margin-right: 2px;
+}
+.nav-tabs, .nav-pills {
+  *zoom: 1;
+}
+.nav-tabs:before,
+.nav-pills:before,
+.nav-tabs:after,
+.nav-pills:after {
+  display: table;
+  content: "";
+}
+.nav-tabs:after, .nav-pills:after {
+  clear: both;
+}
+.nav-tabs > li, .nav-pills > li {
+  float: left;
+}
+.nav-tabs > li > a, .nav-pills > li > a {
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-right: 2px;
+  line-height: 14px;
+}
+.nav-tabs {
+  border-bottom: 1px solid #ddd;
+}
+.nav-tabs > li {
+  margin-bottom: -1px;
+}
+.nav-tabs > li > a {
+  padding-top: 9px;
+  padding-bottom: 9px;
+  border: 1px solid transparent;
+  -webkit-border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
+}
+.nav-tabs > li > a:hover {
+  border-color: #eeeeee #eeeeee #dddddd;
+}
+.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
+  color: #555555;
+  background-color: #ffffff;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+  cursor: default;
+}
+.nav-pills > li > a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+.nav-pills .active > a, .nav-pills .active > a:hover {
+  color: #ffffff;
+  background-color: #0088cc;
+}
+.nav-stacked > li {
+  float: none;
+}
+.nav-stacked > li > a {
+  margin-right: 0;
+}
+.nav-tabs.nav-stacked {
+  border-bottom: 0;
+}
+.nav-tabs.nav-stacked > li > a {
+  border: 1px solid #ddd;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+.nav-tabs.nav-stacked > li:first-child > a {
+  -webkit-border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
+}
+.nav-tabs.nav-stacked > li:last-child > a {
+  -webkit-border-radius: 0 0 4px 4px;
+  -moz-border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
+}
+.nav-tabs.nav-stacked > li > a:hover {
+  border-color: #ddd;
+  z-index: 2;
+}
+.nav-pills.nav-stacked > li > a {
+  margin-bottom: 3px;
+}
+.nav-pills.nav-stacked > li:last-child > a {
+  margin-bottom: 1px;
+}
+.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu {
+  margin-top: 1px;
+  border-width: 1px;
+}
+.nav-pills .dropdown-menu {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret {
+  border-top-color: #0088cc;
+  margin-top: 6px;
+}
+.nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret {
+  border-top-color: #005580;
+}
+.nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret {
+  border-top-color: #333333;
+}
+.nav > .dropdown.active > a:hover {
+  color: #000000;
+  cursor: pointer;
+}
+.nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > .open.active > a:hover {
+  color: #ffffff;
+  background-color: #999999;
+  border-color: #999999;
+}
+.nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret {
+  border-top-color: #ffffff;
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+.tabs-stacked .open > a:hover {
+  border-color: #999999;
+}
+.tabbable {
+  *zoom: 1;
+}
+.tabbable:before, .tabbable:after {
+  display: table;
+  content: "";
+}
+.tabbable:after {
+  clear: both;
+}
+.tabs-below .nav-tabs, .tabs-right .nav-tabs, .tabs-left .nav-tabs {
+  border-bottom: 0;
+}
+.tab-content > .tab-pane, .pill-content > .pill-pane {
+  display: none;
+}
+.tab-content > .active, .pill-content > .active {
+  display: block;
+}
+.tabs-below .nav-tabs {
+  border-top: 1px solid #ddd;
+}
+.tabs-below .nav-tabs > li {
+  margin-top: -1px;
+  margin-bottom: 0;
+}
+.tabs-below .nav-tabs > li > a {
+  -webkit-border-radius: 0 0 4px 4px;
+  -moz-border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
+}
+.tabs-below .nav-tabs > li > a:hover {
+  border-bottom-color: transparent;
+  border-top-color: #ddd;
+}
+.tabs-below .nav-tabs .active > a, .tabs-below .nav-tabs .active > a:hover {
+  border-color: transparent #ddd #ddd #ddd;
+}
+.tabs-left .nav-tabs > li, .tabs-right .nav-tabs > li {
+  float: none;
+}
+.tabs-left .nav-tabs > li > a, .tabs-right .nav-tabs > li > a {
+  min-width: 74px;
+  margin-right: 0;
+  margin-bottom: 3px;
+}
+.tabs-left .nav-tabs {
+  float: left;
+  margin-right: 19px;
+  border-right: 1px solid #ddd;
+}
+.tabs-left .nav-tabs > li > a {
+  margin-right: -1px;
+  -webkit-border-radius: 4px 0 0 4px;
+  -moz-border-radius: 4px 0 0 4px;
+  border-radius: 4px 0 0 4px;
+}
+.tabs-left .nav-tabs > li > a:hover {
+  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
+}
+.tabs-left .nav-tabs .active > a, .tabs-left .nav-tabs .active > a:hover {
+  border-color: #ddd transparent #ddd #ddd;
+  *border-right-color: #ffffff;
+}
+.tabs-right .nav-tabs {
+  float: right;
+  margin-left: 19px;
+  border-left: 1px solid #ddd;
+}
+.tabs-right .nav-tabs > li > a {
+  margin-left: -1px;
+  -webkit-border-radius: 0 4px 4px 0;
+  -moz-border-radius: 0 4px 4px 0;
+  border-radius: 0 4px 4px 0;
+}
+.tabs-right .nav-tabs > li > a:hover {
+  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
+}
+.tabs-right .nav-tabs .active > a, .tabs-right .nav-tabs .active > a:hover {
+  border-color: #ddd #ddd #ddd transparent;
+  border-left-color: #ffffff;
+}
+.navbar {
+  overflow: visible;
+  margin-bottom: 0px !important;
+}
+.navbar-inner {
+  padding-left: 20px;
+  padding-right: 20px;
+  background-color: #2c2c2c;
+  background-image: -moz-linear-gradient(top, #333333, #222222);
+  background-image: -ms-linear-gradient(top, #333333, #222222);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
+  background-image: -webkit-linear-gradient(top, #333333, #222222);
+  background-image: -o-linear-gradient(top, #333333, #222222);
+  background-image: linear-gradient(top, #333333, #222222);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+
+#topbar {
+    z-index:20000;
+}
+.subbar-inner {
+  padding-left: 20px;
+  padding-right: 20px;
+  /*
+  background-color: #2c2c2c;
+  background-image: -moz-linear-gradient(top, #333333, #222222);
+  background-image: -ms-linear-gradient(top, #333333, #222222);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
+  background-image: -webkit-linear-gradient(top, #333333, #222222);
+  background-image: -o-linear-gradient(top, #333333, #222222);
+  background-image: linear-gradient(top, #333333, #222222);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);*/
+}
+
+.btn-navbar {    
+  display: none;
+  float: right;
+  padding: 7px 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+  background-color: #2c2c2c;
+  background-image: -moz-linear-gradient(top, #333333, #222222);
+  background-image: -ms-linear-gradient(top, #333333, #222222);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
+  background-image: -webkit-linear-gradient(top, #333333, #222222);
+  background-image: -o-linear-gradient(top, #333333, #222222);
+  background-image: linear-gradient(top, #333333, #222222);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
+  border-color: #222222 #222222 #000000;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
+  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
+  cursor:pointer;
+}
+.btn-navbar:hover,
+.btn-navbar:active,
+.btn-navbar.active,
+.btn-navbar.disabled,
+.btn-navbar[disabled] {
+  background-color: #222222;
+}
+.btn-navbar:active, .btn-navbar.active {
+  background-color: #080808 \9;
+}
+.btn-navbar .icon-bar {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background-color: #f5f5f5;
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+}
+.btn-navbar .icon-bar + .icon-bar {
+  margin-top: 3px;
+}
+.nav-collapse.collapse {
+  height: auto;
+}
+.navbar .brand:hover {
+  text-decoration: none;
+}
+.navbar .brand {
   float: left;
   display: block;
   padding: 8px 20px 12px;
   margin-left: -20px;
-  color: #ffffff;
   font-size: 20px;
   font-weight: 200;
   line-height: 1;
+  color: #ffffff;
 }
-.topbar p {
-  margin: 0;
+.navbar .navbar-text {
+  margin-bottom: 0;
   line-height: 40px;
+  color: #999999;
 }
-.topbar p a:hover {
-  background-color: transparent;
+.navbar .navbar-text a:hover {
   color: #ffffff;
+  background-color: transparent;
 }
-.topbar form {
-  float: left;
-  margin: 5px 0 0 0;
-  position: relative;
-  filter: alpha(opacity=100);
-  -khtml-opacity: 1;
-  -moz-opacity: 1;
-  opacity: 1;
+.navbar .btn, .navbar .btn-group {
+  margin-top: 5px;
 }
-.topbar form.pull-right {
-  float: right;
+.navbar .btn-group .btn {
+  margin-top: 0;
+}
+.navbar-form {
+  margin-bottom: 0;
+  *zoom: 1;
+}
+.navbar-form:before, .navbar-form:after {
+  display: table;
+  content: "";
+}
+.navbar-form:after {
+  clear: both;
+}
+.navbar-form input, .navbar-form select {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+.navbar-form .radio, .navbar-form .checkbox {
+  margin-top: 5px;
+}
+.navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
+  margin-top: 3px;
 }
-.topbar input {
-  background-color: #444;
-  background-color: rgba(255, 255, 255, 0.3);
+.navbar-search {
+  position: relative;
+  float: left;
+  margin-top: 6px;
+  margin-bottom: 0;
+}
+.navbar-search .search-query {
+  padding: 4px 9px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: normal;
-  font-weight: 13px;
+  font-size: 13px;
+  font-weight: normal;
   line-height: 1;
-  padding: 4px 9px;
   color: #ffffff;
   color: rgba(255, 255, 255, 0.75);
+  background: #666;
+  background: rgba(255, 255, 255, 0.3);
   border: 1px solid #111;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
-  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
+  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
   -webkit-transition: none;
   -moz-transition: none;
   -ms-transition: none;
   -o-transition: none;
   transition: none;
 }
-.topbar input:-moz-placeholder {
-  color: #e6e6e6;
+.navbar-search .search-query :-moz-placeholder {
+  color: #eeeeee;
 }
-.topbar input::-webkit-input-placeholder {
-  color: #e6e6e6;
+.navbar-search .search-query::-webkit-input-placeholder {
+  color: #eeeeee;
 }
-.topbar input:hover {
-  background-color: #bfbfbf;
-  background-color: rgba(255, 255, 255, 0.5);
+.navbar-search .search-query:hover {
   color: #ffffff;
+  background-color: #999999;
+  background-color: rgba(255, 255, 255, 0.5);
 }
-.topbar input:focus, .topbar input.focused {
-  outline: 0;
-  background-color: #ffffff;
-  color: #404040;
+.navbar-search .search-query:focus, .navbar-search .search-query.focused {
+  padding: 5px 10px;
+  color: #333333;
   text-shadow: 0 1px 0 #ffffff;
+  background-color: #ffffff;
   border: 0;
-  padding: 5px 10px;
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
   -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+  outline: 0;
 }
-.topbar-inner, .topbar .fill {
-  background-color: #222;
-  background-color: #222222;
-  background-repeat: repeat-x;
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
-  background-image: -moz-linear-gradient(top, #333333, #222222);
-  background-image: -ms-linear-gradient(top, #333333, #222222);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
-  background-image: -webkit-linear-gradient(top, #333333, #222222);
-  background-image: -o-linear-gradient(top, #333333, #222222);
-  background-image: linear-gradient(top, #333333, #222222);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+.navbar-fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
 }
-
-.topbar div > ul{
+.navbar-fixed-top .navbar-inner {
+  padding-left: 0;
+  padding-right: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+.navbar .nav {
+  position: relative;
+  left: 0;
   display: block;
   float: left;
   margin: 0 10px 0 0;
-  position: relative;
-  left: 0;
 }
-.topbar div > ul > li{
+.navbar .nav.pull-right {
+  float: right;
+}
+.navbar .nav > li {
   display: block;
   float: left;
 }
-.topbar div > ul a{
-  display: block;
+.navbar .nav > li > a {
   float: none;
   padding: 10px 10px 11px;
   line-height: 19px;
+  color: #999999;
   text-decoration: none;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
-.topbar div > ul a:hover {
+.navbar .nav > li > a:hover {
+  background-color: transparent;
   color: #ffffff;
   text-decoration: none;
 }
-.topbar div > ul .active > a{
-  background-color: #222;
+.navbar .nav .active > a, .navbar .nav .active > a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  background-color: #222222;
   background-color: rgba(0, 0, 0, 0.5);
 }
-.topbar div > ul.secondary-nav, .nav.secondary-nav {
-  float: right;
+.navbar .divider-vertical {
+  height: 40px;
+  width: 1px;
+  margin: 0 9px;
+  overflow: hidden;
+  background-color: #222222;
+  border-right: 1px solid #333333;
+}
+.navbar .nav.pull-right {
   margin-left: 10px;
   margin-right: 0;
 }
-.topbar div > ul.secondary-nav .menu-dropdown,
-.topbar div > ul.secondary-nav .dropdown-menu {
-  right: 0;
-  border: 0;
+.navbar .dropdown-menu {
+  margin-top: 1px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
 }
-.topbar div > ul a.menu:hover,
-.topbar div > ul li.open .menu,
-.topbar div > ul .dropdown-toggle:hover,
-.topbar div > ul .dropdown.open .dropdown-toggle{
-  background: #444;
-  background: rgba(255, 255, 255, 0.05);
-}
-.topbar div > ul .menu-dropdown,
-.topbar div > ul .dropdown-menu {
-  background-color: #333;
-}
-.topbar div > ul .menu-dropdown a.menu,
-.topbar div > ul .dropdown-menu a.menu,
-.topbar div > ul .menu-dropdown .dropdown-toggle,
-.topbar div > ul .dropdown-menu .dropdown-toggle {
-  color: #ffffff;
+.navbar .dropdown-menu:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+  top: -7px;
+  left: 9px;
 }
-.topbar div > ul .menu-dropdown a.menu.open,
-.topbar div > ul .dropdown-menu a.menu.open,
-.topbar div > ul .menu-dropdown .dropdown-toggle.open,
-.topbar div > ul .dropdown-menu .dropdown-toggle.open {
-  background: #444;
-  background: rgba(255, 255, 255, 0.05);
-}
-.topbar div > ul .menu-dropdown li a,
-.topbar div > ul .dropdown-menu li a {
-  color: #999;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
-}
-.topbar div > ul .menu-dropdown li a:hover,
-.topbar div > ul .dropdown-menu li a:hover {
-  background-color: #191919;
-  background-repeat: repeat-x;
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
-  background-image: -moz-linear-gradient(top, #292929, #191919);
-  background-image: -ms-linear-gradient(top, #292929, #191919);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
-  background-image: -webkit-linear-gradient(top, #292929, #191919);
-  background-image: -o-linear-gradient(top, #292929, #191919);
-  background-image: linear-gradient(top, #292929, #191919);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
-  color: #ffffff;
+.navbar .dropdown-menu:after {
+  content: '';
+  display: inline-block;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #ffffff;
+  position: absolute;
+  top: -6px;
+  left: 10px;
+}
+.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
+  border-top-color: #ffffff;
 }
-.topbar div > ul .menu-dropdown .active a,
-.topbar div > ul .dropdown-menu .active a {
+.navbar .nav .active .caret {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+.navbar .nav .open > .dropdown-toggle, .navbar .nav .active > .dropdown-toggle, .navbar .nav .open.active > .dropdown-toggle {
+  background-color: transparent;
+}
+.navbar .nav .active > .dropdown-toggle:hover {
   color: #ffffff;
 }
-.topbar div > ul .menu-dropdown .divider,
-.topbar div > ul .dropdown-menu .divider {
-  background-color: #222;
-  border-color: #444;
+.navbar .nav.pull-right .dropdown-menu {
+  left: auto;
+  right: 0;
+}
+.navbar .nav.pull-right .dropdown-menu:before {
+  left: auto;
+  right: 12px;
 }
-.topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a {
-  padding: 4px 15px;
+.navbar .nav.pull-right .dropdown-menu:after {
+  left: auto;
+  right: 13px;
+}
+
+
+
+
+[class*="span"] {
+  float: left;
+  margin-left: 20px;
+}
+.span1 {
+  width: 60px;
+}
+.span2 {
+  width: 140px;
+}
+.span3 {
+  width: 220px;
+}
+.span4 {
+  width: 300px;
+}
+.span5 {
+  width: 380px;
+}
+.span6 {
+  width: 460px;
+}
+.span7 {
+  width: 540px;
+}
+.span8 {
+  width: 620px;
+}
+.span9 {
+  width: 700px;
+}
+.span10 {
+  width: 780px;
+}
+.span11 {
+  width: 860px;
+}
+.span12, .container {
+  width: 940px;
+}
+.offset1 {
+  margin-left: 100px;
+}
+.offset2 {
+  margin-left: 180px;
+}
+.offset3 {
+  margin-left: 260px;
+}
+.offset4 {
+  margin-left: 340px;
+}
+.offset5 {
+  margin-left: 420px;
+}
+.offset6 {
+  margin-left: 500px;
+}
+.offset7 {
+  margin-left: 580px;
+}
+.offset8 {
+  margin-left: 660px;
+}
+.offset9 {
+  margin-left: 740px;
+}
+.offset10 {
+  margin-left: 820px;
+}
+.offset11 {
+  margin-left: 900px;
+}
+.row-fluid {
+  width: 100%;
+  *zoom: 1;
+}
+.row-fluid:before, .row-fluid:after {
+  display: table;
+  content: "";
 }
+.row-fluid:after {
+  clear: both;
+}
+.row-fluid > [class*="span"] {
+  float: left;
+  margin-left: 2.127659574%;
+}
+.row-fluid > [class*="span"]:first-child {
+  margin-left: 0;
+}
+.row-fluid .span1 {
+  width: 6.382978723%;
+}
+.row-fluid .span2 {
+  width: 14.89361702%;
+}
+.row-fluid .span3 {
+  width: 23.404255317%;
+}
+.row-fluid .span4 {
+  width: 31.914893614%;
+}
+.row-fluid .span5 {
+  width: 40.425531911%;
+}
+.row-fluid .span6 {
+  width: 48.93617020799999%;
+}
+.row-fluid .span7 {
+  width: 57.446808505%;
+}
+.row-fluid .span8 {
+  width: 65.95744680199999%;
+}
+.row-fluid .span9 {
+  width: 74.468085099%;
+}
+.row-fluid .span10 {
+  width: 82.97872339599999%;
+}
+.row-fluid .span11 {
+  width: 91.489361693%;
+}
+.row-fluid .span12 {
+  width: 99.99999998999999%;
+}
+.container {
+  width: 940px;
+  margin-left: auto;
+  margin-right: auto;
+  *zoom: 1;
+}
+.container:before, .container:after {
+  display: table;
+  content: "";
+}
+.container:after {
+  clear: both;
+}
+.container-fluid {
+  padding-left: 20px;
+  padding-right: 20px;
+  *zoom: 1;
+}
+.container-fluid:before, .container-fluid:after {
+  display: table;
+  content: "";
+}
+.container-fluid:after {
+  clear: both;
+}
+
+ 
 li.menu, .dropdown {
   position: relative;
 }
@@ -795,6 +1311,10 @@ footer {
   margin-bottom: 8px;
 }
 
+#topbar_push {
+    height:40px;
+}
+
 
 .actions {	
 	background:#efefef;
@@ -3741,79 +4261,10 @@ form div.error input, form div.error textarea {
     vertical-align: middle;
 }
 
-
-.container:before, .container:after {
-    content: "";
-    display: table;
-}
-.container {
-    margin: 0 auto;
-    width: 940px;
-}
-
-.container {
-    margin: 0 auto;
-    width: 940px;
-}
-
-.container {
-  width: 940px;
-  margin-left: auto;
-  margin-right: auto;
-  zoom: 1;
-}
-.container:before, .container:after {
-  display: table;
-  content: "";
-  zoom: 1;
-  display: inline;
-}
-.container:after {
-  clear: both;
-}
-.container-fluid {
-  position: relative;
-  padding-left: 20px;
-  padding-right: 20px;
-  zoom: 1;
-}
-.container-fluid:before, .container-fluid:after {
-  display: table;
-  content: "";
-  zoom: 1;
-  display: inline;
-}
-.container-fluid:after {
-  clear: both;
-}
-.container-fluid > .sidebar {
-  float: left;
-  width: 220px;
-}
-.container-fluid > .content {
-  float: left;
-  min-width: 700px;
-  max-width: 1180px;
-  margin-left: 20px;
-}
-
 .hide {
   display: none;
 }
 
-
-/* Top bar experimenting changes */
-#topbar_push {
-    height:40px;
-}
-.topbar-inner, .topbar .fill {
-    height:40px;
-}
-
-.topbar li a   {
-    color:#BFBFBF;
-}
-
 /* agenda js  */
 #add_event_form fieldset {
     width:400px;
diff --git a/main/css/base_chamilo.css b/main/css/base_chamilo.css
index 5fd043136f..9e90034be5 100755
--- a/main/css/base_chamilo.css
+++ b/main/css/base_chamilo.css
@@ -16,7 +16,7 @@ body {
     padding: 0;
     background-color: #fff;
     height: 100%; /* stick */
-	font-family: Arial, Helvetica, sans-serif;
+	font-family: Arial, Helvetica, sans-serif;    
 }
 
 /* Sticky footer*/
@@ -378,42 +378,15 @@ input.link_alike:hover {
     font-style:normal;
     color:#666666;
 }
-/*****************************************************
- *  HEADER 3: TABS OF THE HEADER                     *
- *****************************************************/
-#header3 {
-
-}
-
-#header3 a:hover {
-    //color:#fffc00D;
-}
-
-#header3 li {
-    //float:left; /* important for ieX*/
-}
-#header3 li a span:hover {
-    //color:#fffc00;
-}
-
-#header3 ul {
-    /*padding-left:0px;
-    list-style-type:none;
-    height:25px;
-    margin-left:0px;
-    margin: 11px 0px 0px 0px ;*/
-}
-
-#header3  a {
-
-}
 
-#current a {
+/* HEADER 3: TABS OF THE HEADER                     */
+ 
+#header3 {
     
 }
 
 #header3 li {
-    float:left;
+    //float:left; /* important for ieX*/
 }
 
 #current {
@@ -437,7 +410,7 @@ input.link_alike:hover {
     padding: 0 30px 0 0;
     background-color: transparent;
     border: none;
-    COLOR: #fff;
+    color: #fff;
     font-size: 1.0em;
     font-weight:bold;
     font-family: verdana, arial, helvetica, sans-serif;
@@ -2475,7 +2448,6 @@ span.form_required  {
     padding:20px;
 }
 
-
 #header3 {
     font-size: 14px;
     font-weight: bold;
@@ -2489,6 +2461,7 @@ span.form_required  {
     padding-top: 10px;
     position: relative;
     width: 92%;
+    min-width: 760px;
 }
 
 /* Scroll effect */
@@ -2508,8 +2481,9 @@ span.form_required  {
   
 /* Subnav */
 .subnav {
-  width: 100%;
+  width:100%;  
   height: 36px;
+
   
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
diff --git a/main/css/bootstrap-responsive.css b/main/css/bootstrap-responsive.css
new file mode 100644
index 0000000000..4b032cdb55
--- /dev/null
+++ b/main/css/bootstrap-responsive.css
@@ -0,0 +1,567 @@
+/*!
+ * Bootstrap Responsive v2.0.0
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ */
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+@media (max-width: 480px) {
+  .nav-collapse {
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  .page-header h1 small {
+    display: block;
+    line-height: 18px;
+  }
+  input[class*="span"],
+  select[class*="span"],
+  textarea[class*="span"],
+  .uneditable-input {
+    display: block;
+    width: 100%;
+    height: 28px;
+    /* Make inputs at least the height of their button counterpart */
+  
+    /* Makes inputs behave like true block-level elements */
+  
+    -webkit-box-sizing: border-box;
+    /* Older Webkit */
+  
+    -moz-box-sizing: border-box;
+    /* Older FF */
+  
+    -ms-box-sizing: border-box;
+    /* IE8 */
+  
+    box-sizing: border-box;
+    /* CSS3 spec*/
+  
+  }
+  .input-prepend input[class*="span"], .input-append input[class*="span"] {
+    width: auto;
+  }
+  input[type="checkbox"], input[type="radio"] {
+    border: 1px solid #ccc;
+  }
+  .form-horizontal .control-group > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+    text-align: left;
+  }
+  .form-horizontal .controls {
+    margin-left: 0;
+  }
+  .form-horizontal .control-list {
+    padding-top: 0;
+  }
+  .form-horizontal .form-actions {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .modal {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    right: 10px;
+    width: auto;
+    margin: 0;
+  }
+  .modal.fade.in {
+    top: auto;
+  }
+  .modal-header .close {
+    padding: 10px;
+    margin: -10px;
+  }
+  .carousel-caption {
+    position: static;
+  }
+}
+@media (max-width: 768px) {
+  .container {
+    width: auto;
+    padding: 0 20px;
+  }
+  .row-fluid {
+    width: 100%;
+  }
+  .row {
+    margin-left: 0;
+  }
+  .row > [class*="span"], .row-fluid > [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+    margin: 0;
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .row {
+    margin-left: -20px;
+    *zoom: 1;
+  }
+  .row:before, .row:after {
+    display: table;
+    content: "";
+  }
+  .row:after {
+    clear: both;
+  }
+  [class*="span"] {
+    float: left;
+    margin-left: 20px;
+  }
+  .span1 {
+    width: 42px;
+  }
+  .span2 {
+    width: 104px;
+  }
+  .span3 {
+    width: 166px;
+  }
+  .span4 {
+    width: 228px;
+  }
+  .span5 {
+    width: 290px;
+  }
+  .span6 {
+    width: 352px;
+  }
+  .span7 {
+    width: 414px;
+  }
+  .span8 {
+    width: 476px;
+  }
+  .span9 {
+    width: 538px;
+  }
+  .span10 {
+    width: 600px;
+  }
+  .span11 {
+    width: 662px;
+  }
+  .span12, .container {
+    width: 724px;
+  }
+  .offset1 {
+    margin-left: 82px;
+  }
+  .offset2 {
+    margin-left: 144px;
+  }
+  .offset3 {
+    margin-left: 206px;
+  }
+  .offset4 {
+    margin-left: 268px;
+  }
+  .offset5 {
+    margin-left: 330px;
+  }
+  .offset6 {
+    margin-left: 392px;
+  }
+  .offset7 {
+    margin-left: 454px;
+  }
+  .offset8 {
+    margin-left: 516px;
+  }
+  .offset9 {
+    margin-left: 578px;
+  }
+  .offset10 {
+    margin-left: 640px;
+  }
+  .offset11 {
+    margin-left: 702px;
+  }
+  .row-fluid {
+    width: 100%;
+    *zoom: 1;
+  }
+  .row-fluid:before, .row-fluid:after {
+    display: table;
+    content: "";
+  }
+  .row-fluid:after {
+    clear: both;
+  }
+  .row-fluid > [class*="span"] {
+    float: left;
+    margin-left: 2.762430939%;
+  }
+  .row-fluid > [class*="span"]:first-child {
+    margin-left: 0;
+  }
+  .row-fluid .span1 {
+    width: 5.801104972%;
+  }
+  .row-fluid .span2 {
+    width: 14.364640883%;
+  }
+  .row-fluid .span3 {
+    width: 22.928176794%;
+  }
+  .row-fluid .span4 {
+    width: 31.491712705%;
+  }
+  .row-fluid .span5 {
+    width: 40.055248616%;
+  }
+  .row-fluid .span6 {
+    width: 48.618784527%;
+  }
+  .row-fluid .span7 {
+    width: 57.182320438000005%;
+  }
+  .row-fluid .span8 {
+    width: 65.74585634900001%;
+  }
+  .row-fluid .span9 {
+    width: 74.30939226%;
+  }
+  .row-fluid .span10 {
+    width: 82.87292817100001%;
+  }
+  .row-fluid .span11 {
+    width: 91.436464082%;
+  }
+  .row-fluid .span12 {
+    width: 99.999999993%;
+  }
+  input.span1, textarea.span1, .uneditable-input.span1 {
+    width: 32px;
+  }
+  input.span2, textarea.span2, .uneditable-input.span2 {
+    width: 94px;
+  }
+  input.span3, textarea.span3, .uneditable-input.span3 {
+    width: 156px;
+  }
+  input.span4, textarea.span4, .uneditable-input.span4 {
+    width: 218px;
+  }
+  input.span5, textarea.span5, .uneditable-input.span5 {
+    width: 280px;
+  }
+  input.span6, textarea.span6, .uneditable-input.span6 {
+    width: 342px;
+  }
+  input.span7, textarea.span7, .uneditable-input.span7 {
+    width: 404px;
+  }
+  input.span8, textarea.span8, .uneditable-input.span8 {
+    width: 466px;
+  }
+  input.span9, textarea.span9, .uneditable-input.span9 {
+    width: 528px;
+  }
+  input.span10, textarea.span10, .uneditable-input.span10 {
+    width: 590px;
+  }
+  input.span11, textarea.span11, .uneditable-input.span11 {
+    width: 652px;
+  }
+  input.span12, textarea.span12, .uneditable-input.span12 {
+    width: 714px;
+  }
+}
+@media (max-width: 980px) {
+  body {
+    padding-top: 0;
+  }
+  .navbar-fixed-top {
+    position: static;
+    margin-bottom: 18px;
+  }
+  .navbar-fixed-top .navbar-inner {
+    padding: 5px;
+  }
+  .navbar .container {
+    width: auto;
+    padding: 0;
+  }
+  .navbar .brand {
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 0 0 0 -5px;
+  }
+  .navbar .nav-collapse {
+    clear: left;
+  }
+  .navbar .nav {
+    float: none;
+    margin: 0 0 9px;
+  }
+  .navbar .nav > li {
+    float: none;
+  }
+  .navbar .nav > li > a {
+    margin-bottom: 2px;
+  }
+  .navbar .nav > .divider-vertical {
+    display: none;
+  }
+  .navbar .nav > li > a, .navbar .dropdown-menu a {
+    padding: 6px 15px;
+    font-weight: bold;
+    color: #999999;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+  }
+  .navbar .dropdown-menu li + li a {
+    margin-bottom: 2px;
+  }
+  .navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover {
+    background-color: #222222;
+  }
+  .navbar .dropdown-menu {
+    position: static;
+    top: auto;
+    left: auto;
+    float: none;
+    display: block;
+    max-width: none;
+    margin: 0 15px;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+  }
+  .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
+    display: none;
+  }
+  .navbar .dropdown-menu .divider {
+    display: none;
+  }
+  .navbar-form, .navbar-search {
+    float: none;
+    padding: 9px 15px;
+    margin: 9px 0;
+    border-top: 1px solid #222222;
+    border-bottom: 1px solid #222222;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+  .navbar .nav.pull-right {
+    float: none;
+    margin-left: 0;
+  }
+  .navbar-static .navbar-inner {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .btn-navbar {
+    display: block;
+  }
+  .nav-collapse {
+    overflow: hidden;
+    height: 0;
+  }
+}
+@media (min-width: 980px) {
+  .nav-collapse.collapse {
+    height: auto !important;
+  }
+}
+@media (min-width: 1200px) {
+  .row {
+    margin-left: -30px;
+    *zoom: 1;
+  }
+  .row:before, .row:after {
+    display: table;
+    content: "";
+  }
+  .row:after {
+    clear: both;
+  }
+  [class*="span"] {
+    float: left;
+    margin-left: 30px;
+  }
+  .span1 {
+    width: 70px;
+  }
+  .span2 {
+    width: 170px;
+  }
+  .span3 {
+    width: 270px;
+  }
+  .span4 {
+    width: 370px;
+  }
+  .span5 {
+    width: 470px;
+  }
+  .span6 {
+    width: 570px;
+  }
+  .span7 {
+    width: 670px;
+  }
+  .span8 {
+    width: 770px;
+  }
+  .span9 {
+    width: 870px;
+  }
+  .span10 {
+    width: 970px;
+  }
+  .span11 {
+    width: 1070px;
+  }
+  .span12, .container {
+    width: 1170px;
+  }
+  .offset1 {
+    margin-left: 130px;
+  }
+  .offset2 {
+    margin-left: 230px;
+  }
+  .offset3 {
+    margin-left: 330px;
+  }
+  .offset4 {
+    margin-left: 430px;
+  }
+  .offset5 {
+    margin-left: 530px;
+  }
+  .offset6 {
+    margin-left: 630px;
+  }
+  .offset7 {
+    margin-left: 730px;
+  }
+  .offset8 {
+    margin-left: 830px;
+  }
+  .offset9 {
+    margin-left: 930px;
+  }
+  .offset10 {
+    margin-left: 1030px;
+  }
+  .offset11 {
+    margin-left: 1130px;
+  }
+  .row-fluid {
+    width: 100%;
+    *zoom: 1;
+  }
+  .row-fluid:before, .row-fluid:after {
+    display: table;
+    content: "";
+  }
+  .row-fluid:after {
+    clear: both;
+  }
+  .row-fluid > [class*="span"] {
+    float: left;
+    margin-left: 2.564102564%;
+  }
+  .row-fluid > [class*="span"]:first-child {
+    margin-left: 0;
+  }
+  .row-fluid .span1 {
+    width: 5.982905983%;
+  }
+  .row-fluid .span2 {
+    width: 14.529914530000001%;
+  }
+  .row-fluid .span3 {
+    width: 23.076923077%;
+  }
+  .row-fluid .span4 {
+    width: 31.623931624%;
+  }
+  .row-fluid .span5 {
+    width: 40.170940171000005%;
+  }
+  .row-fluid .span6 {
+    width: 48.717948718%;
+  }
+  .row-fluid .span7 {
+    width: 57.264957265%;
+  }
+  .row-fluid .span8 {
+    width: 65.81196581200001%;
+  }
+  .row-fluid .span9 {
+    width: 74.358974359%;
+  }
+  .row-fluid .span10 {
+    width: 82.905982906%;
+  }
+  .row-fluid .span11 {
+    width: 91.45299145300001%;
+  }
+  .row-fluid .span12 {
+    width: 100%;
+  }
+  input.span1, textarea.span1, .uneditable-input.span1 {
+    width: 60px;
+  }
+  input.span2, textarea.span2, .uneditable-input.span2 {
+    width: 160px;
+  }
+  input.span3, textarea.span3, .uneditable-input.span3 {
+    width: 260px;
+  }
+  input.span4, textarea.span4, .uneditable-input.span4 {
+    width: 360px;
+  }
+  input.span5, textarea.span5, .uneditable-input.span5 {
+    width: 460px;
+  }
+  input.span6, textarea.span6, .uneditable-input.span6 {
+    width: 560px;
+  }
+  input.span7, textarea.span7, .uneditable-input.span7 {
+    width: 660px;
+  }
+  input.span8, textarea.span8, .uneditable-input.span8 {
+    width: 760px;
+  }
+  input.span9, textarea.span9, .uneditable-input.span9 {
+    width: 860px;
+  }
+  input.span10, textarea.span10, .uneditable-input.span10 {
+    width: 960px;
+  }
+  input.span11, textarea.span11, .uneditable-input.span11 {
+    width: 1060px;
+  }
+  input.span12, textarea.span12, .uneditable-input.span12 {
+    width: 1160px;
+  }
+  .thumbnails {
+    margin-left: -30px;
+  }
+  .thumbnails > li {
+    margin-left: 30px;
+  }
+}
diff --git a/main/inc/lib/banner.lib.php b/main/inc/lib/banner.lib.php
index 9aab260842..ddf74c2243 100644
--- a/main/inc/lib/banner.lib.php
+++ b/main/inc/lib/banner.lib.php
@@ -422,6 +422,13 @@ function show_header_3() {
     
     // Logout    
     if ($show_bar) {
+        
+          if (!empty($lis)) {
+            $header3 .= '<ul class="nav nav-pills">';
+            $header3 .= $lis;
+            $header3 .= '</ul>';
+        }
+        
         if (api_get_user_id()) {
             $login = '';
             if (api_is_anonymous()) {
@@ -429,21 +436,15 @@ function show_header_3() {
             } else {
                 $uinfo = api_get_user_info(api_get_user_id());
                 $login = $uinfo['username'];
-            }
-            
+            }            
             //start user section line with name, my course, my profile, scorm info, etc            
             $header3 .= '<ul class="nav nav-pills secondary-nav">';
                 //echo '<li><span>'.get_lang('LoggedInAsX').' '.$login.'</span></li>';
                 //echo '<li><a href="'.api_get_path(WEB_PATH).'main/auth/profile.php" target="_top"><span>'.get_lang('Profile').'</span></a></li>';
                 $header3 .= '<li><a href="'.api_get_path(WEB_PATH).'index.php?logout=logout&uid='.api_get_user_id().'" target="_top"><span>'.get_lang('Logout').' ('.$login.')</span></a></li>';
             $header3 .= '</ul>';    
-        }   
-        if (!empty($lis)) {
-            $header3 .= '<ul class="nav nav-pills">';
-            $header3 .= $lis;
-            $header3 .= '</ul>';
-        }
-    }    
+        }      
+    }
     return $header3;
 }
 
diff --git a/main/inc/lib/display.lib.php b/main/inc/lib/display.lib.php
index d06c3d853e..b39ada2541 100644
--- a/main/inc/lib/display.lib.php
+++ b/main/inc/lib/display.lib.php
@@ -881,9 +881,9 @@ class Display {
                 $width_fix = '150';
             }
             //see BT#2020
-            $json .= "$(window).bind('resize', function() {
+            /*$json .= "$(window).bind('resize', function() {
                 $('#".$div_id."').setGridWidth($(window).width() - ".$width_fix.");
-            }).trigger('resize');";
+            }).trigger('resize');";*/
         }
 
         //Creating the jqgrid element
diff --git a/main/inc/lib/javascript/bootstrap/bootstrap-collapse.js b/main/inc/lib/javascript/bootstrap/bootstrap-collapse.js
new file mode 100644
index 0000000000..8134cc42ff
--- /dev/null
+++ b/main/inc/lib/javascript/bootstrap/bootstrap-collapse.js
@@ -0,0 +1,136 @@
+/* =============================================================
+ * bootstrap-collapse.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html#collapse
+ * =============================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================ */
+
+!function( $ ){
+
+  "use strict"
+
+  var Collapse = function ( element, options ) {
+  	this.$element = $(element)
+    this.options = $.extend({}, $.fn.collapse.defaults, options)
+
+    if (this.options["parent"]) {
+      this.$parent = $(this.options["parent"])
+    }
+
+    this.options.toggle && this.toggle()
+  }
+
+  Collapse.prototype = {
+
+    constructor: Collapse
+
+  , dimension: function () {
+      var hasWidth = this.$element.hasClass('width')
+      return hasWidth ? 'width' : 'height'
+    }
+
+  , show: function () {
+      var dimension = this.dimension()
+        , scroll = $.camelCase(['scroll', dimension].join('-'))
+        , actives = this.$parent && this.$parent.find('.in')
+        , hasData
+
+      if (actives && actives.length) {
+        hasData = actives.data('collapse')
+        actives.collapse('hide')
+        hasData || actives.data('collapse', null)
+      }
+
+      this.$element[dimension](0)
+      this.transition('addClass', 'show', 'shown')
+      this.$element[dimension](this.$element[0][scroll])
+
+    }
+
+  , hide: function () {
+      var dimension = this.dimension()
+      this.reset(this.$element[dimension]())
+      this.transition('removeClass', 'hide', 'hidden')
+      this.$element[dimension](0)
+    }
+
+  , reset: function ( size ) {
+      var dimension = this.dimension()
+
+      this.$element
+        .removeClass('collapse')
+        [dimension](size || 'auto')
+        [0].offsetWidth
+
+      this.$element.addClass('collapse')
+    }
+
+  , transition: function ( method, startEvent, completeEvent ) {
+      var that = this
+        , complete = function () {
+            if (startEvent == 'show') that.reset()
+            that.$element.trigger(completeEvent)
+          }
+
+      this.$element
+        .trigger(startEvent)
+        [method]('in')
+
+      $.support.transition && this.$element.hasClass('collapse') ?
+        this.$element.one($.support.transition.end, complete) :
+        complete()
+  	}
+
+  , toggle: function () {
+      this[this.$element.hasClass('in') ? 'hide' : 'show']()
+  	}
+
+  }
+
+  /* COLLAPSIBLE PLUGIN DEFINITION
+  * ============================== */
+
+  $.fn.collapse = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('collapse')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('collapse', (data = new Collapse(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.collapse.defaults = {
+    toggle: true
+  }
+
+  $.fn.collapse.Constructor = Collapse
+
+
+ /* COLLAPSIBLE DATA-API
+  * ==================== */
+
+  $(function () {
+    $('body').on('click.collapse.data-api', '[data-toggle=collapse]', function ( e ) {
+      var $this = $(this), href
+        , target = $this.attr('data-target')
+          || e.preventDefault()
+          || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
+        , option = $(target).data('collapse') ? 'toggle' : $this.data()
+      $(target).collapse(option)
+    })
+  })
+
+}( window.jQuery )
diff --git a/main/template/default/layout/head.tpl b/main/template/default/layout/head.tpl
index 4daa13d1e0..94b547d51e 100644
--- a/main/template/default/layout/head.tpl
+++ b/main/template/default/layout/head.tpl
@@ -25,7 +25,7 @@
 //<![CDATA[
 // This is a patch for the "__flash__removeCallback" bug, see FS#4378.
 {literal}
-if ( ( navigator.userAgent.toLowerCase().indexOf('msie') != -1 ) && ( navigator.userAgent.toLowerCase().indexOf( 'opera' ) == -1 ) ) {
+if ((navigator.userAgent.toLowerCase().indexOf('msie') != -1 ) && ( navigator.userAgent.toLowerCase().indexOf('opera') == -1 )) {
     window.attachEvent( 'onunload', function() {
             window['__flash__removeCallback'] = function ( instance, name ) {
                 try {
@@ -40,14 +40,15 @@ if ( ( navigator.userAgent.toLowerCase().indexOf('msie') != -1 ) && ( navigator.
 {/literal}
 //]]>
 
-/* global chat variables */
-var ajax_url = '{$_p.web_ajax}chat.ajax.php';
+/* Global chat variables */
+var ajax_url        = '{$_p.web_ajax}chat.ajax.php';
 var online_button   = '{$online_button}';
 var offline_button  = '{$offline_button}';
 var	connect_lang    = '{"ChatConnected"|get_lang}';
 var	disconnect_lang = '{"ChatDisconnected"|get_lang}';
 
 </script>
+
 {$js_file_to_string}
 {$css_file_to_string}
 {$extra_headers}
@@ -57,6 +58,8 @@ var	disconnect_lang = '{"ChatDisconnected"|get_lang}';
 
 $(document).scroll(function() {
     // If has not activated (has no attribute "data-top"
+
+    if($('body').width() > 959) {
     if (!$('.subnav').attr('data-top')) {
         // If already fixed, then do nothing
         if ($('.subnav').hasClass('subnav-fixed')) return;
@@ -69,14 +72,15 @@ $(document).scroll(function() {
         $('.subnav').addClass('subnav-fixed');
     else
         $('.subnav').removeClass('subnav-fixed');
+    }
 });
 
 
-$(document).ready(function(){
-   
-	$('.topbar').dropdown();
-
-	$('.ajax').live('click', function() {
+$(document).ready(function() {       
+	$('.dropdown-toggle').dropdown();   
+    $(".collapse").collapse();
+    
+	$('.ajax').on('click', function() {
 		var url     = this.href;
 		var dialog  = $("#dialog");
 		if ($("#dialog").length == 0) {
@@ -91,7 +95,7 @@ $(document).ready(function(){
 					dialog.dialog({
 						modal	: true, 
 						width	: 540, 
-						height	: 400,              
+						height	: 400        
 					});	                    
 		});
 		//prevent the browser to follow the link
diff --git a/main/template/default/layout/header.tpl b/main/template/default/layout/header.tpl
index 32fbf01be1..ba8544d500 100644
--- a/main/template/default/layout/header.tpl
+++ b/main/template/default/layout/header.tpl
@@ -1,74 +1,99 @@
 <!-- Topbar -->
 {if $show_toolbar == 1}
-    <div class="topbar">
-        <div class="topbar-inner">
+    <style>    
+    .subnav-fixed {
+        top:39px;
+    }
+    </style>
+    <div id="topbar" class="navbar navbar-fixed-top">
+        <div class="navbar-inner">
             <div class="container-fluid">
-                <h3><a href="{$_p.web}">{"siteName"|api_get_setting}</a></h3>
+                <a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar">
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </a>
+                <a class="brand" href="{$_p.web}">{"siteName"|api_get_setting}</a>
                 
                 {if $_u.logged}
-                <ul class="nav">
-                    <li class="active"><a href="{$_p.web}user_portal.php">{"MyCourses"|get_lang}</a></li>
-                    <li class="dropdown">
-                        <a class="dropdown-toggle" href="#">{'Teaching'|get_lang}</a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{$_p.web_main}create_course/add_course.php">{"AddCourse"|get_lang}</a></li>
-                            <li><a href="{$_p.web_main}auth/courses.php">{"Catalog"|get_lang}</a></li>
-                        </ul>
-                    </li>
-                    <li class="dropdown">
-                        <a class="dropdown-toggle" href="#">{'Tracking'|get_lang}</a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{$_p.web_main}mySpace/">{"CoursesReporting"|get_lang}</a></li>
-                            <li><a href="{$_p.web_main}mySpace/index.php?view=admin">{"AdminReports"|get_lang}</a></li>
-                            <li><a href="{$_p.web_main}tracking/exams.php">{"ExamsReporting"|get_lang}</a></li>
-                            <li class="divider"></li>
-                            <li><a href="{$_p.web_main}dashboard/">{"Dashboard"|get_lang}</a></li>
-                        </ul>
-                    </li>
+                    
+                <div class="nav-collapse">
+                    
+                    <ul class="nav">
+                        <li class="active"><a href="{$_p.web}user_portal.php">{"MyCourses"|get_lang}</a></li>
+
+                        {if 0}
+                        <li class="dropdown">
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">{'Teaching'|get_lang}</a>
+                            <ul class="dropdown-menu">
+                                <li><a href="{$_p.web_main}create_course/add_course.php">{"AddCourse"|get_lang}</a></li>
+                                <li><a href="{$_p.web_main}auth/courses.php">{"Catalog"|get_lang}</a></li>
+                            </ul>
+                        </li>
+                        {/if}
+                        <li class="dropdown">
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">{'Tracking'|get_lang}</a>
+                            <ul class="dropdown-menu">
+                                <li><a href="{$_p.web_main}mySpace/">{"CoursesReporting"|get_lang}</a></li>
+                                <li><a href="{$_p.web_main}mySpace/index.php?view=admin">{"AdminReports"|get_lang}</a></li>
+                                <li><a href="{$_p.web_main}tracking/exams.php">{"ExamsReporting"|get_lang}</a></li>
+                                <li class="divider"></li>
+                                <li><a href="{$_p.web_main}dashboard/">{"Dashboard"|get_lang}</a></li>
+                            </ul>
+                        </li>
+                        {if $_u.is_admin == 1}
+                        <li class="dropdown">
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">{'Administration'|get_lang}</a>
+                            <ul class="dropdown-menu">
+                                <li><a href="{$_p.web_main}admin/">{"Home"|get_lang}</a></li>
+                                <li><a href="{$_p.web_main}admin/user_list.php">{"UserList"|get_lang}</a></li>
+                                <li><a href="{$_p.web_main}admin/course_list.php">{"CourseList"|get_lang}</a></li>
+                                <li><a href="{$_p.web_main}admin/session_list.php">{"SessionsList"|get_lang}</a></li>
+                                <li><a href="{$_p.web_main}admin/settings.php">{"Settings"|get_lang}</a></li>
+                            </ul>
+                        </li>
+                        {/if}
+                    </ul>
+                    {/if}
+
                     {if $_u.is_admin == 1}
-                    <li class="dropdown">
-                        <a class="dropdown-toggle" href="#">{'Administration'|get_lang}</a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{$_p.web_main}admin/">{"Home"|get_lang}</a></li>
-                            <li><a href="{$_p.web_main}admin/user_list.php">{"UserList"|get_lang}</a></li>
-                            <li><a href="{$_p.web_main}admin/course_list.php">{"CourseList"|get_lang}</a></li>
-                            <li><a href="{$_p.web_main}admin/session_list.php">{"SessionsList"|get_lang}</a></li>
-                            <li><a href="{$_p.web_main}admin/settings.php">{"Settings"|get_lang}</a></li>
-                        </ul>
-                    </li>
+                    <form class="navbar-search pull-left" action="{$_p.web_main}admin/user_list.php" method="get">
+                        <input type="text" placeholder="{'SearchUsers'|get_lang}" name="keyword">
+                    </form>
                     {/if}
-                </ul>
-                {/if}
-                
-                {if $_u.is_admin == 1}
-                <form action="{$_p.web_main}admin/user_list.php" method="get">
-                <input type="text" placeholder="{'SearchUsers'|get_lang}" name="keyword">
-                </form>
-                {/if}
-                
-                {if $_u.logged}
-                    <ul class="nav secondary-nav">
+
+                    {if $_u.logged}
+                    <ul class="nav pull-right">
                         <li><a href="{$_p.web_main}social/home.php"><img src="{$_u.avatar_small}"/></a></li>
                         <li class="dropdown">
-                            <a class="dropdown-toggle" href="#">{$_u.complete_name}</a>
+                            <a class="dropdown-toggle" data-toggle="dropdown"  href="#">{$_u.complete_name}</a>
                             <ul class="dropdown-menu">
                                 <li><a href="{$_p.web_main}social/home.php">{"Profile"|get_lang}</a></li>
                                 <li><a href="{$_p.web_main}calendar/agenda_js.php?type=personal">{"MyAgenda"|get_lang}</a></li>
                                 <li><a href="{$_p.web_main}messages/inbox.php">{"Messages"|get_lang}</a></li>
                                 <li><a href="{$_p.web_main}auth/my_progress.php">{"MyReporting"|get_lang}</a></li>
-                                <li class="divider"></li>
-                                <li><a href="{$_p.web_main}social/invitations.php">{"PendingInvitations"|get_lang}</a></li>
+                                <!--<li class="divider"></li>
+                                <li><a href="{$_p.web_main}social/invitations.php">{"PendingInvitations"|get_lang}</a></li> -->
                             </ul>
                         </li>
                         <li><a href="{$_p.web}index.php?logout=logout">{"Logout"|get_lang}</a></li>
                     </ul>
-                {/if}
-            </div>
-        </div><!-- /topbar-inner -->
-    </div><!-- /topbar -->
-    <div id="topbar_push"></div>
+                    {/if}
+                </div>         
+            </div> <!-- /container-->
+        </div><!-- /navbar-inner -->
+    </div><!-- /navbar -->    
+{else}
+<style>
+    body {
+        padding-top: 0px;
+    }
+    .subnav-fixed {
+        top:-2px;
+    }
+</style>
 {/if}
-    
+    <div id="topbar_push"></div>
 <div id="header">
     {* header *}
     {$header1}
@@ -81,8 +106,9 @@
 
 {if $header3}
 <div id="header3">
-    <div class="subnav">
-    {$header3}
+    <div class="subnav">        
+        {$header3}    
     </div>
 </div>
 {/if}
+<div class="clear"></div>