Tree css

by Alon Rotem

HTML

<body class="body_tree">
    <div id="tree">
      <h2>Home</h2>
      <ul>
        <li  class="completed">
          <a href="/" target="_top">Home</a>
          <ul>
            <li id="active" class="completed">
              <a href="/" target="_top" class="active">Lesson 1</a>
                <ul><li class="not-attempted"><a href="/">Lesson 1.1</a></li></ul>
            </li>
            <li  class="not-attempted">
              <a href="/" target="_top">Lesson 2</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>

CSS

/* 
	To use this template, set the following framesets:
	Left frame width: 203px
	Top frame height: 50px
*/

/* ==================================================
LEFT SIDEBAR FRAME AREA
==================================================*/

/* --------------------------------------------------
	Navigation tree header logo
-------------------------------------------------- */
#tree h2 {
    font-size: 0px;
    color: #FF4E00;
    padding-top: 0px;
    padding-bottom: 50px;
    background-color: #333333;
    margin-bottom: 115;
    background-image: url(/progress/nd/fresco/repository/EKP000070849.png);
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: 0;
    margin: 0px;
	overflow: hidden;
}

/* --------------------------------------------------
	Navigation tree area
-------------------------------------------------- */
.body_tree {
    margin: 0;
}

/* --------------------------------------------------
	Navigation tree unordered list
-------------------------------------------------- */
.body_tree ul {
    margin-left: -25px;
}

/* --------------------------------------------------
	Navigation tree items (links and non-links)
-------------------------------------------------- */
.body_tree li {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
	margin: 8px 0px;
	list-style-type: none;
	color: #0C498E;
}

/* --------------------------------------------------
	Navigation tree links (default)
-------------------------------------------------- */
.body_tree a {
    text-decoration: none !important;
    color: #105CB6;
}

/* --------------------------------------------------
	Navigation tree links (visited)
-------------------------------------------------- */
.body_tree a:visited {
    color: #105CB6;
}

/* --------------------------------------------------
	Navigation tree links (active)
-------------------------------------------------- */
/*===================  THE MESSY PART...