Adding a nice sub var (experimental changes not finished yet)

main/css/base_chamilo.css

@@ -2483,6 +2483,168 @@ span.form_required  {
     padding:20px;
 }
 
+
+#header3 {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 10px;
+    position: relative;
+    width: 92%;
+}
+
+
+  .subnav-fixed {
+    position: fixed;
+    top: 40px;
+    left: 0;
+    right: 0;
+    z-index: 1030;
+    border-color: #d5d5d5;
+    border-width: 0 0 1px; /* drop the border on the fixed edges */
+    -webkit-border-radius: 0;
+       -moz-border-radius: 0;
+            border-radius: 0;
+    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+       -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+            box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+  }
+  .subnav-fixed .nav {
+    /* width: 938px; */
+    margin: 0 auto;
+    padding: 0 1px;
+  }
+  .subnav .nav > li:first-child > a,
+  .subnav .nav > li:first-child > a:hover {
+    -webkit-border-radius: 0;
+       -moz-border-radius: 0;
+            border-radius: 0;
+  }
+
+
+
+
+
+/* Subnav */
+.subnav {
+  width: 100%;
+  height: 36px;
+  background-color: #eeeeee; /* Old browsers */
+  background-repeat: repeat-x; /* Repeat the gradient */
+  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
+  background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
+  background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
+  background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
+  border: 1px solid #e5e5e5;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+.subnav .nav {
+  margin-bottom: 0;
+}
+.subnav .nav > li > a {
+  margin: 0;
+  padding-top:    11px;
+  padding-bottom: 11px;
+  border-left: 1px solid #f5f5f5;
+  border-right: 1px solid #e5e5e5;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+.subnav .nav > #current > a,
+.subnav .nav > #current > a:hover {
+  padding-left: 13px;
+  color: #777;
+  background-color: #e9e9e9;
+  border-right-color: #ddd;
+  border-left: 0;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+     -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+          box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+}
+.subnav .nav > #current > a .caret,
+.subnav .nav > #current > a:hover .caret {
+  border-top-color: #777;
+}
+.subnav .nav > li:first-child > a,
+.subnav .nav > li:first-child > a:hover {
+  border-left: 0;
+  padding-left: 12px;
+  -webkit-border-radius: 4px 0 0 4px;
+     -moz-border-radius: 4px 0 0 4px;
+          border-radius: 4px 0 0 4px;
+}
+.subnav .nav > li:last-child > a {
+  border-right: 0;
+}
+.subnav .dropdown-menu {
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
+}
+
+.nav-tabs > li, .nav-pills > li {
+    float: left;
+}
+
+li {
+    line-height: 18px;
+}
+.nav {
+    list-style-image: none;
+    list-style-position: outside;
+    list-style-type: none;
+}
+
+.nav-tabs:before, .nav-pills:before, .nav-tabs:after, .nav-pills:after {
+    content: "";
+    display: table;
+}
+.nav-pills:after {
+    clear: both;
+}
+.nav-pills > li {
+    float: left;
+}
+.nav-pills > li > a {
+    line-height: 14px;
+    margin-right: 2px;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+
+.subnav .nav > li:first-child > a,
+.subnav .nav > li:first-child > a:hover {
+-webkit-border-radius: 0;
+    -moz-border-radius: 0;
+        border-radius: 0;
+}
+.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 > li > a:hover {
+  text-decoration: none;
+  background-color: #eeeeee;
+}
+
 /*  New forum table */
 
 
@@ -2599,44 +2761,3 @@ abbr {
 .chzn-search input {
 
 }
-#header3 {    
-    font-size: 14px;
-    font-weight: bold;
-    padding: 10px 10px 0;    
-    position: relative;
-    width: 92%;
-    margin: 0 auto 35px auto;
-}
-
-/* Main tabs */
-
-#header3 ul {
-    margin: 0px;
-}
-
-#header3 li {
-    list-style: none;
-    float: left;
-    margin-right: 5px;
-}    
-
-#header3 li a {
-    background: none repeat scroll 0 0 #D9E4F0;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    /*color: #277098;*/
-    display: block;
-    padding: 8px 12px 9px;
-    text-decoration: none;
-}
-
-#header3 li a:hover {
-    background: none repeat scroll 0 0 #ddd;
-    color: #FFFFFF;
-}
-#header #current a {
-    background: none repeat scroll 0 0 #ccc;        
-}
-#header #current a:hover {
-    color: #fff;
-}

main/css/chamilo_green/default.css

@@ -28,17 +28,17 @@ a:active {
 }
 
 #header3 li a {
-    background-color: #A1D80B;    
-    color:#fff;
+    /*background-color: #A1D80B;    
+    color:#fff;*/
 }
 
 #header3 li a:hover {
-    background: none repeat scroll 0 0 #81B031;
-    color: #FFFFFF;
+   /* background: none repeat scroll 0 0 #81B031;
+    color: #FFFFFF;*/
 }
 
 #header3 #current a {
-    background: none repeat scroll 0 0 #81B031;        
+    /*background: none repeat scroll 0 0 #81B031;        */
 }