div#s1 {
width: 174px; /* menu width */
}

div#s1 ul {
list-style-type: none; /* get rid of the bullets */
padding:0; /* no padding */
margin:0; /* no margin for IE either */
}

div#s1 ul li {
margin: 0;
padding: 0;
display:block;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
background: url(arrows.gif) no-repeat;
}

div#s1 ul li a {
display: block; /* lines extend to right, make area clickable */
color: #336699;
margin:0;
text-decoration: none;
height:15px; /* hint for IE, alternatively remove whitespace from HTML */
padding-top: 3px;
padding-right: 3px;
padding-bottom: 6px;
padding-left: 23px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #FFFFFF url(arrows.gif) no-repeat 8px 50%;

}

div#s1 ul li.leaf a {
background-image: url(arrows.gif);
background-repeat: no-repeat;
}

div#s1 ul li.open a {
background-image: url(arrows.gif);
background-repeat: no-repeat;
}

div#s1 ul li.closed a {
background-image: url(arrows.gif);
background-repeat: no-repeat;
}

div#s1 ul li.leaf a {
background-image: url(arrows.gif);
background-repeat: no-repeat;
}

div#s1 li.active a {
background-position: 0px -20px;
color: red; /* highlight text */
}

div#s1 li.active li a {
background-position: 0px 0px;
color: white; /* fix lower levels */
}

div#s1 ul li a:hover {
color: #FFFFFF;
background-color: #336699; /* rollover effect */
}