/**
 * Framework starts from here ...
 * ------------------------------
 */

.menuol {
  font-weight:bold;
  --font-weight:normal;
  font-size: 15px;
  margin-top: 15px;
}

 /* Clear all ol element */
.menuol ol {
  margin:0;
  padding:0;
  list-style:none;
}

/* indent ol list */
.menuol ol {
  position:relative;
  margin-left:1em;
}

/* insert |, for element before ol, that's li - if any. First ol woold not li */
.menuol ol:before {
  position:absolute;
  content:"";
  display:block;
  width:0;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}

/* format list elements */
.menuol li {
  position:relative;
  margin:0;
  --padding:0 1.5em; /* indentation + .5em */
  color:#369;
  line-height:1.42857;
}

.menuol li a {
  --margin-left: -20px;
}


/*** sub list ***/
.menuol ol ol {margin-left:.5em}


/* sub list element, set top border - creates horizontal line */
.menuol ol li:before {
  content:"";
  display:block;
  width:20px; /* same with indentation */
  height:0;
  border-top:1px solid;
  margin-top:-1px; /* border top width */
  position:absolute;
  top:1em; /* (line-height/2) */
  left:0;
}

/* sub list last element - creates horizontal line */
.menuol ol li:last-child:before {
  background:white; /* same with body background */
  height:auto;
  top:1em; 
  bottom:0;
}