*{ margin: 0; padding: 0; }

#page-wrap {
  margin: auto 0;
}

.treeview_custom li > input :before{
  content: "+";
}

.treeview_custom {
  margin: 10px 0 0 -20px;
}

ul { 
  list-style: none;
}

.treeview_custom li {
  background: url(32px.png);
  padding: 6px 0 2px 10px;
  background-position: -282px -4px;
  background-repeat: repeat-y;
  margin-left: 12px; 
}

.treejs-icon.treejs-ocl {
  padding: 6px 0 2px 28px;
  background-image: url(32px.png);
  background-position: -68px -4px;
}

.treeview_custom > li:first-child > label {
  /* style for the root element - IE8 supports :first-child
  but not :last-child ..... */
}

.treeview_custom li.last {
  background-position: 0 -1766px;
}

.treeview_custom li > input {
  height: 16px;
  width: 16px;
  /* hide the inputs but keep them in the layout with events (use opacity) */
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */ 
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
}

.treeview_custom li > label {
  background: url(gr_custom-inputs.png) 0 -1px no-repeat;
  /* move left to cover the original checkbox area */
  margin-left: -20px;
  /* pad the text to make room for image */
  padding-left: 20px;
}

/* Unchecked styles */

.treeview_custom .custom-unchecked {
  background-position: 0 0px;
}
.treeview_custom .custom-unchecked:hover {
  background-position: 0 -21px;
}

/* Checked styles */

.treeview_custom .custom-checked { 
  background-position: 0 -81px;
}
.treeview_custom .custom-checked:hover { 
  background-position: 0 -101px; 
}

/* Indeterminate styles */

.treeview_custom .custom-indeterminate { 
  background-position: 0 -141px; 
}
.treeview_custom .custom-indeterminate:hover { 
  background-position: 0 -121px; 
}