/*                   Bookmarks Menu Tree Styles                   */


/* The style used for everything inside '<ol class="tree">'       */
/* This applies to the whole of the bookmarks menu tree           */
ol.tree
{
   /* Remove padding from the LHS                                 */
   padding-left: 0;

   /* Move the left margin over so that all the "top level"       */
   /* folders have their LHS where normal body text would start   */
   margin-left: -15px;
}


/* The style used for list elements of all types                  */
/* This applies to folders, sub-folders and bookmarks themselves  */
li
{
   /* Do not number the entries in the list                       */
   list-style: none;
}


/* The style used for the <a> elements within <li class="file">   */
/* elements These are the actual bookmark entries within the      */
/* folders or sub-folders                                         */
li.file a
{
   /* Yellow text                                                 */
   color: #ff0;

   /* Remove the default underlining from the text                */
   text-decoration: none;

   /* Position the element to indent the bookmark to be just      */
   /* in from the RHS of the parent folder icon                   */
   margin-left: 15px;
}


/* The style used for all unselected <input> elements within <li> */
/* elements These are the folders and sub folders in the bookmark */
/* tree that have not been "opened up" by being clicked upon      */
li input
{
   /* Make the elements invisible, otherwise we'd see check-boxes */
   opacity: 0;

   /* Remove the top margin to keep the spacing of the folders    */
   /* the same as for the actual bookmark entries                 */
   margin-top: 0;
}


/* The style used for all selected <input> elements within <li>   */
/* elements These are the folders and sub folders in the bookmark */
/* tree that have been "opened up" by being clicked upon          */
li input:checked + ol
{
   /* Position the element to indent the sub-folder to be just    */
   /* in from the RHS of the parent folder icon                   */
   padding-left: 20px;
}


/* The style used for all unselected <ol> elements within <li>    */
/* elements where the child is another <li> element               */
/* This applies to all the folders in the bookmarks menu tree     */
/* that have not been "opened up" by being clicked upon           */
li input + ol > li
{
   /* Do not display anything, i.e. sub-entities are not shown    */
   display: none;
}


/* The style used for all selected <ol> elements within <li>      */
/* elements where the child is another <li> element               */
/* This applies to all the folders in the bookmarks menu tree     */
/* that have been "opened up" by being clicked upon               */
li input:checked + ol > li
{
   /* Display the entity, i.e. show the sub-entities              */
   display: block;
}


/* The style used for all <label> entities within <li> entities   */
/* These are the folders and sub-folders of the menu tree         */
li label
{
   /* Use our 'folder-horizontal.png' image as the background     */
   /* Position it 15 pixels from the LHS with only one per line   */
   background: url(folder-horizontal.png) 15px no-repeat;

   /* Set the mouse pointer to be a "pointing finger" when it is  */
   /* hovered over an item that can be selected in our list       */
   cursor: pointer;

   /* Allow space to for the 'folder-horizontal.png' image so     */
   /* that the label (i.e. the bookmark name) doesn't overlay it  */
   padding-left: 37px;
}