flexall done

some details not 100%

static/css/styles2.css

@@ -223,6 +223,98 @@
         display: block;
     }
     
+    main .cd-accordion-menu {
+        width: 100%;
+        max-width: 600px;
+        background: #27aae2;
+        padding-left: 30px;
+        padding-bottom: 0px;
+    }
+    
+    main .cd-accordion-menu ul {
+        /* by default hide all sub menus */
+        display: none;
+    }
+
+    main .cd-accordion-menu li {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    main .cd-accordion-menu input[type=checkbox] {
+        /* hide native checkbox */
+        position: absolute;
+        opacity: 0;
+    }    
+
+    main .cd-accordion-menu label,
+    main .cd-accordion-menu a {
+        position: relative;
+        display: block;
+        color: #fff;
+    }
+
+    main ul label:hover,
+    main ul ul label:hover,
+    main ul ul a:hover,
+    main ul ul ul label:hover,
+    main ul ul ul a:hover {
+        background: #1c74bb;
+    }
+
+    main .cd-accordion-menu a::before {
+        content: '\00a0';
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        font-size: inherit;
+        text-rendering: auto;
+    }
+                 
+
+    main .cd-accordion-menu label::before
+    {
+        /* icons */
+        font:  normal normal normal 1.0em/1 FontAwesome;
+        font-size: inherit;
+        text-rendering: auto;
+        content: '\f0da';
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        
+        -webkit-transform: translateY(0%);
+        -moz-transform: translateY(0%);
+        -ms-transform:  translateY(0%);
+        -o-transform: translateY(0%);
+        transform: translateY(0%); 
+    }
+
+    main .cd-accordion-menu label {
+        cursor: pointer;
+        background: #27aae2;
+    }
+
+
+    main .cd-accordion-menu input[type=checkbox]:checked + label::before {
+        /* rotate arrow */
+        -webkit-transform: translateY(20%) rotate(90deg);
+        -moz-transform: translateY(20%) rotate(90deg);
+        -ms-transform:  translateY(20%) rotate(90deg);
+        -o-transform: translateY(20%) rotate(90deg);
+        transform: translateY(20%) rotate(90deg); 
+
+    }
+    
+    
+    main .cd-accordion-menu input[type=checkbox]:checked + label + ul,
+    main .cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
+        /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
+        /* show children when item is checked */
+        display: block;
+    }
 
     
     user ul {