.treeview, .treeview ul { 
   padding: 0;
   margin: 0;
   list-style: none;
}

.treeview ul {
   background-color: none;
   margin-top: 4px;
}

.treeview .hitarea {
   background: url(../images/treeview-default.gif) -64px -25px no-repeat;
   height: 16px;
   width: 16px;
   margin-left: -16px;
   float: left;
   cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
   display: inline;
   float:none;
}

.treeview li { 
   margin: 0;
   padding: 3px 0pt 3px 16px;
}


.treeview a.selected {
   background-color: firebrick;
}


/* MOST STYLES VISUALLY AFFECTING THE TREE ARE HERE
moved here from screen.css; control left spacing of the tree here 
NO MORE fonts on all tree items it seems to create conflict below, though it shouldn't
sidetree's an outer div containing sidetreecontrol too
also the tree items themselves now in div id=tree

SET LEFT MARGIN HERE
*/
#sidetree {margin-left:5px;border:0px solid black;font-family:verdana;}  /* font-size:12px;color:purple; */



/* 
COLLAPSE ALL AND EXPAND ALL
this was originally just 'treecontrol' which matches nothing so did nothing 
Now used to style Collapse All and Expand All at top of tree
*/
#sidetreecontrol { color:white;margin-bottom:10px;text-align:left;}  /* WAS also display:none; but not good */
#sidetreecontrol a {color:white;font-size:12px;}  

/* 
TREEHEADER
originally not used, WAS as CLASS to style in this case YOLO COUNTY CALIFORNIA but changed to div id
*/
#treeheader, #treeheader a {color:#fff;font-size:16px;font-weight:bold;background:none;text-decoration:none;cursor:pointer;margin-left:0px;padding-left:0px;}
#treeheader a:hover {color:firebrick;background:yellow;cursor:pointer;font-weight:bold;}
/*
#treeheader a:hover {color:red;background:yellow;cursor:pointer;}
*/



/* 
TREE ITSELF
tree added here though it was a valid div in the code there was originally no other style for it; styles all the elements in the tree itself
customize each h tag
*/
#tree, #tree a, #tree h1 {font-family:Arial;color:white;text-decoration:none;cursor:pointer;font-size:14px;font-weight:normal;}
#tree a:hover {color:firebrick;background:yellow;cursor:pointer;font-weight:bold;}

/* Style the rest of the h tags (we only go to 4 levels max h4) */
#tree h2, #tree h2 a {font-family:Arial;color:yellow;text-decoration:none;cursor:pointer;font-size:13px;font-weight:normal;}
#tree h3, #tree h3 a {font-family:Arial;color:white;text-decoration:none;cursor:pointer;font-size:13px;font-weight:normal;}
#tree h4, #tree h4 a {font-family:Arial;color:white;text-decoration:none;cursor:pointer;font-size:13px;font-weight:normal;}


/*  this didn't work, morphed from .treeview above but it must be in the javascript
.tree a.selected {
   background-color: #e10;
}
*/

.treeview .hover { color:red; cursor: pointer; }

.treeview li { background: url(../images/treeview-default-line.gif) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }

.treeview .expandable-hitarea { background-position: -80px -3px; }

.treeview li.last { background-position: 0 -1766px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(../images/treeview-default.gif); }  
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }

.treeview-red li { background-image: url(../images/treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(../images/treeview-red.gif); } 

.treeview-black li { background-image: url(../images/treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(../images/treeview-black.gif); }  

.treeview-gray li { background-image: url(../images/treeview-gray-line.gif); }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(../images/treeview-gray.gif); } 

.treeview-famfamfam li { background-image: url(../images/treeview-famfamfam-line.gif); }
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(../images/treeview-famfamfam.gif); } 


.filetree li { padding: 3px 0 2px 16px; }
.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
.filetree span.folder { background: url(../images/folder.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder { background: url(../images/folder-closed.gif) 0 0 no-repeat; }
.filetree span.file { background: url(../images/file.gif) 0 0 no-repeat; }