ol.number-with-parenthesis {
  counter-reset: li;
  /* Initiate a counter */
  margin-left: 0;
  /* Remove the default left margin */
  padding-left: 0;
  /* Remove the default left padding */
}

ol.number-with-parenthesis > li {
  position: relative;
  /* Create a positioning context */
  margin: 0 0 0px 2em;
  /* Give each list item a left margin to make room for the numbers */
  padding: 0px 8px;
  /* Add some spacing around the content */
  list-style: none;
  /* Disable the normal item numbering */
}

ol.number-with-parenthesis > li:before {
  content: counter(li) ")";
  /* Use the counter as content */
  counter-increment: li;
  /* Increment the counter by 1 */
  /* Position and style the number */
  position: absolute;
  top: 0px;
  left: -1.4em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 2em;
  /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
  margin-right: 8px;
  padding: 0px 4px;
  text-align: center;
}

ol.lower-alpha {
  list-style-type: lower-alpha;
}

ol.lower-greek {
  list-style-type: lower-greek;
}

ol.lower-roman {
  list-style-type: lower-roman;
}

ol.upper-alpha {
  list-style-type: upper-alpha;
}

ol.upper-roman {
  list-style-type: upper-roman;
}

ul.circle {
  list-style-type: circle;
}

ul.square {
  list-style-type: square;
}

ul.disc {
  list-style-type: disc;
}