/** CSS Styling to create an easy tree view. Use following structure below:

<ol class="TreeCSSTree">
  
    <!--- Example of a branch with all the +/- signs and folder icon -->
    <li class="TreeCSSFolder" style=""><input type="checkbox" checked id="folder1" class="TreeCSScbxInput"/><label class="TreeCSSFolderLabel" for="folder1">Folder 1</label> 
      <ol class="TreeCSSFolderOL">
        <li class="TreeCSSFile"><a href="#">HTML File</a></li>
        
        <!--- Example of a branch with no icons -->
        <li class="TreeCSSFolder"><input type="checkbox" id="subfolder1" class="TreeCSScbxInputNoIcon" /><label class="TreeCSSFolderLabelNoIcon" for="subfolder1">Subfolder NoIcon</label>
          <ol  class="TreeCSSFolderOL">
            <li class="TreeCSSFile"><a href="">File Heading</a></li>
            <li class="TreeCSSFile"><a href="test.pdf">PDF File</a></li>
          </ol>
        </li>
        
        <!--- Example of a branch with only the +/- signs -->
        <li class="TreeCSSFolder"><input type="checkbox" id="subfolder2" class="TreeCSScbxInputNoFolderIcon" /><label class="TreeCSSFolderLabelNoFolderIcon" for="subfolder2">Subfolder NoFolderIcon</label>
          <ol  class="TreeCSSFolderOL">
            <li class="TreeCSSFile"><a href="#">File Heading</a></li>
          </ol>
        </li>
        
        <li class="TreeCSSFile"><a href="">File Heading</a></li>
      </ol>
    </li>
    
</ol>
	
*/

ol.TreeCSSTree{padding: 0em;}
li.TreeCSSFolder{position: relative; margin-left: 0px; list-style: none;}
li.TreeCSSFile{margin-left: -1px !important;}
li.TreeCSSFile a{color: black; display: block; text-decoration: none;}
/* If link to pdf, show file icon */
li.TreeCSSFile a[href *= '.pdf'] { padding-left: 21px;background: url(../images/item.gif) 0 0 no-repeat; text-decoration: none;}
    
/* For folders with icons (plus sign and folder icon) */
input.TreeCSScbxInput{
    display: none;
    z-index: 2;
    cursor: pointer;
    height: 1em;
    width: 1em;
}
/* (li label) */
label.TreeCSSFolderLabel{
    background: url(../images/rectplus.gif), url(../images/close.gif);
    background-position: 1px 50%, 15px 50%;
    background-repeat: no-repeat, no-repeat; 
    cursor: pointer;
    display: block;
    padding-left: 35px;
    font-size: 22pt;
    display: inline;
}
/* For folders without any icons  */
input.TreeCSScbxInputNoIcon{
    /*display: none;*/
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    height: 1em;
    width: 1em;
}
label.TreeCSSFolderLabelNoIcon{
  cursor: pointer;
  margin-left: 0px;
  font-size: 12pt;
}
/* For folders with only the +/- icons */
input.TreeCSScbxInputNoFolderIcon{
    display: none;
    z-index: 2;
    cursor: pointer;
    height: 1em;
    width: 1em;
}
label.TreeCSSFolderLabelNoFolderIcon{
    background: url(images/rectplus.gif);
    background-position: 0px 50%;
    background-repeat: no-repeat; 
    cursor: pointer;
    padding-left: 18px;
}


/* If clicked, update the icons(plus sign & folder).  NOTE:: IF the size of the Fonts are changed, change position to fit correctly */
input.TreeCSScbxInput:checked + label{
    /* when folder clicked, use [-] and position both the negative box and folder to correct location*/
    background: url(../images/rectminus.gif), url(../images/open.gif) 20px 0px no-repeat;
    /* y-pos(pos=right) x-pos(pos=down) match these to those in TreeCSSFolderLabel */
    background-position: 1px 50%, 15px 50%;
    background-repeat: no-repeat, no-repeat;
}
/* Branch with only (+ and -)*/
input.TreeCSScbxInputNoFolderIcon:checked + label{
    /* when folder clicked, use [-] and position both the negative box and folder to correct location*/
    background: url(images/rectminus.gif);
    background-position: 1px 50%;
    background-repeat: no-repeat;
}
/* Used for no icon folder */
input.TreeCSScbxInputNoIcon:checked + label{
    /* Do Nothing */
}

/*li input + ol*/
ol.TreeCSSFolderOL{
      /*background: url(../images/rectplus.gif) 40px 0 no-repeat;/* <img class="" src="images/rectplus.gif" style="display:inline;"> */
      /*margin: -0.938em 0 0 -44px;
      height: 1em;*/
}
    
/*li input + ol*/
ol.TreeCSSFolderOL > li { display: none; margin-left: -14px !important; padding-left: 1px; }


/* If the main Folder branch (plus sign) is checked */
input.TreeCSScbxInput:checked + label + ol > li { display: block; margin: 0 0 0.125em;}
input.TreeCSScbxInput:checked + ol > li:last-child { margin: 0 0 0.063em; }
/* Used for no icon */
input.TreeCSScbxInputNoIcon:checked + label + ol > li{ display: block; margin: 0 0 0.125em;}
input.TreeCSScbxInputNoIcon:checked + ol > li:last-child { margin: 0 0 0.063em; }
/* Used for no folder icon */
input.TreeCSScbxInputNoFolderIcon:checked + label + ol > li{ display: block; margin: 0 0 0.125em;}
input.TreeCSScbxInputNoFolderIcon:checked + ol > li:last-child { margin: 0 0 0.063em; }