/* (A) LIST TO MENU */
.tree, .section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tree {
  background: #fbfbfb;
  border: 1px solid #d2d2d2;
}
.tree li {
  border-bottom: 1px solid #d2d2d2;
  padding: 7px 3px;
  color: #ffffff;
  background: #DD4B39; /* Old browsers */
  background: -moz-linear-gradient(top, #DD4B39 0%, #9F2C1D 44%, #6D2217 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DD4B39), color-stop(44%,#9F2C1D), color-stop(100%,#6D2217)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #DD4B39 0%,#9F2C1D 44%,#6D2217 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #DD4B39 0%,#9F2C1D 44%,#6D2217 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #DD4B39 0%,#9F2C1D 44%,#6D2217 100%); /* IE10+ */
  background: linear-gradient(top, #DD4B39 0%,#9F2C1D 44%,#6D2217 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DD4B39', endColorstr='#9F2C1D',GradientType=0 ); /* IE6-9 */
}
.tree li:last-child {
  border: 0;
  color: #ffffff;
}

.tree li a { color: #ffffff; font-weight: normal; }


/* (B) SUB-SECTIONS */
/* (B1) TOGGLE SHOW/HIDE */
.section ul { display: none; }
.section input:checked ~ ul { display: block; }

/* (B2) HIDE CHECKBOX */
.section input[type=checkbox] { display: none; }

/* (B3) ADD EXPAND/COLLAPSE ICON  */
.section { 
  position: relative; 
  padding-left: 20px !important;
}
.section label:after {
  content: "\0002B";
  position: absolute;
  top: 0; left: 0;
  padding: 7px;
  text-align: center;
  /* font-size: 30px; */
  color: #f00;
  transition: all 0.5s;
}
.section input:checked ~ label:after { 
  color: #23c37a;
  transform: rotate(45deg);
}

/* (B4) SUB-SECTION ITEMS */
.section ul { margin-top: 10px; }
.section ul li { color: #ffffff; }
.section ul li a { color: #ffffff; font-weight: normal; }

/* DOES NOT MATTER */
.tree {
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  /* font-family: arial, sans-serif; */
}