changes for menu decoration and related code updates

src/main/webapp/css/main.css

@@ -141,99 +141,18 @@ img {
   margin-top:25px;
   margin-right:20px;
 }
-/* Sidebar */
-.sidebar {
-  width: 240px;
-  /*height: 100%;*/
-  background: #222;
-  position: absolute;
-  -webkit-transition: all 0.3s ease-in-out;
-  -moz-transition: all 0.3s ease-in-out;
-  -o-transition: all 0.3s ease-in-out;
-  -ms-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  z-index: 100;
-}
 
-#leftside-navigation {
-  overflow-y:scroll;
-  overflow-x:hidden;
-}
-
-#sidebar {
-  /*background-color:#333;*/
-  background-color:blue;
-}
-
-  
-.sidebar-toggle {
-  margin-left: -240px;
-}
-#leftside-navigation ul,
-#leftside-navigation ul ul {
-  margin: -2px 0 0;
-  padding: 0;
-}
-#leftside-navigation ul li {
-  list-style-type: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
-#leftside-navigation ul li a {
-  color: #aeb2b7;
-  text-decoration: none;
-  display: block;
-  padding: 18px 0 18px 25px;
-  font-size: 12px;
-  outline: none;
-  -webkit-transition: all 200ms ease-in;
-  -moz-transition: all 200ms ease-in;
-  -o-transition: all 200ms ease-in;
-  -ms-transition: all 200ms ease-in;
-  transition: all 200ms ease-in;
-}
-#leftside-navigation ul li a span {
-  display: inline-block;
-}
-#leftside-navigation ul ul li {
-  background: #333;
-  margin-bottom: 0;
-  margin-left: 0;
-  margin-right: 0;
-  border-bottom: none;
-}
-#leftside-navigation ul ul li a {
-  font-size: 12px;
-  padding-top: 13px;
-  padding-bottom: 13px;
-  color: #aeb2b7;
-}
-#leftside-navigation ul li a i {
-  width: 20px;
-}
-#leftside-navigation ul li a i.fa-angle-right,
-#leftside-navigation ul li a i.fa-angle-left {
-  padding-top: 3px;
-}
-#leftside-navigation ul ul {
-  display: none;
-}
-#leftside-navigation li.active ul {
-  display: block;
-}
-#leftside-navigation ul li a:hover,
-#leftside-navigation ul li.active > a {
-  color: #e84c3d;
-}
 .btn-primary + .dropdown-menu > li > a:hover,
 .btn-primary + .dropdown-menu > li > a:active {
   background-color: #16a086;
 }
 
 .sidebar > div > ul > li > ul > li > span.lessonComplete {
-    float: right;
-    margin-left: 1.5em;
+    /*float: right;
+    margin-left: 1.5em;*/
     margin-right: 5px;
-    margin-top: -25px;
+    margin-top: -38px; /* << don't like doing this, but otherwise it does not line up correctly */
+    color:#0F0
 }
 
 /* ==========================================================================
@@ -797,14 +716,109 @@ fieldset[disabled] .btn-warning.active {
 
 .table-nonfluid {
   width:auto;
+  
+}
+.table-nonfluid {
+ 
 }
 
 .cookieTable tr td, .paramsTable tr td {
   padding: 3px;
   max-width: 200px;
   font-size: x-small;
+  word-wrap: break-word;
 }
-/* MENU */
+
+/* ==========================================================================
+   MENU / Sidebar
+   ========================================================================== */
+/* Sidebar */
+.sidebar {
+  width: 240px;
+  /*height: 100%;*/
+  background: #222;
+  position: absolute;
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  z-index: 100;
+}
+
+#leftside-navigation {
+  overflow-y:scroll;
+  overflow-x:hidden;
+}
+
+#sidebar {
+  /*background-color:#333;*/
+  background-color:blue;
+}
+
+  
+.sidebar-toggle {
+  margin-left: -240px;
+}
+#leftside-navigation ul,
+#leftside-navigation ul ul {
+  margin: -2px 0 0;
+  padding: 0;
+}
+#leftside-navigation ul li {
+  list-style-type: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+
+#leftside-navigation ul li a {
+  color: #aeb2b7;
+  text-decoration: none;
+  display: block;
+  padding: 5px 0 5px 15px;
+  font-size: 12px;
+  outline: none;
+  -webkit-transition: all 200ms ease-in;
+  -moz-transition: all 200ms ease-in;
+  -o-transition: all 200ms ease-in;
+  -ms-transition: all 200ms ease-in;
+  transition: all 200ms ease-in;
+}
+#leftside-navigation ul li a span {
+  display: inline-block;
+}
+#leftside-navigation ul ul li {
+  background: #333;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  border-bottom: none;
+}
+#leftside-navigation ul ul li a {
+  font-size: 11px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  color: #aeb2b7;
+  margin-left:8px;
+}
+#leftside-navigation ul li a i {
+  width: 20px;
+}
+#leftside-navigation ul li a i.fa-angle-right,
+#leftside-navigation ul li a i.fa-angle-left {
+  padding-top: 3px;
+}
+#leftside-navigation ul ul {
+  display: none;
+}
+#leftside-navigation li.active ul {
+  display: block;
+}
+#leftside-navigation ul li a:hover,
+#leftside-navigation ul li.active > a {
+  color: #e84c3d;
+}
+
 .sidebar ul span.lessonComplete {
     float: right;
     margin-left: -5px;
@@ -820,6 +834,9 @@ fieldset[disabled] .btn-warning.active {
   color:white;
 }
 
+#leftside-navigation ul ul.lessonsAndStages.keepOpen {
+  display: block
+}
 
 /* HINTS */
 #hintsViewTop{