Categories sidebox design

Hi all

I have come across this really nice Categories sidebox and wonder if there is a template/code out there that can achieve this look.

Basically it is only used on the Categories sidebox. It has a red line on either side of the sidebox title ‘Categories’, and a grey divider line between each main category but not between the sub-categories. Also there is a small amount of top and bottom padding on each category/sub-category.

See below for the link to the site. Any help would be much appreciated.

http://shop.waiyeehong.com/index.php?main_page=index&cPath=4

Many thanks

This site uses a mod that makes the categories into a <ul> list, and applies a loong string of CSS to it.```
#categories, #categoriescss{
BORDER-TOP: #cc0000 3px solid;
MARGIN: 0px;
PADDING: 0px;
BORDER-BOTTOM: #cc0000 3px solid;
BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none;
}

#categoriesContent {
background-color:#FFFFFF;
float:left;
width:150px;
font-size:11px;
}
#categoriesContent a:hover {
text-decoration:none;
}
#categoriesContent ul {
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
}
#categoriesContent ul li {
border-bottom:1px solid #7D8793;
}
#categoriesContent li.selected {
background:#FFFFFF url(../images/nav_arrow_blue.gif) no-repeat scroll 5px 10px;
color:#333333;
font-weight:bold;
}
#categoriesContent li a {
display:block;
margin:0pt;
padding:5px 0px;
}
#categoriesContent li.selected a {
color:#000000;
}
#categoriesContent li ul {
background-color:#FFFFFF;
font-weight:normal;
padding:0pt;
}

#categoriesContent li.selected ul li a {
color:#0134A7;
}
#categoriesContent li ul li {
border:1px solid #FFFFFF;
color:#00366D;
}
#categoriesContent li ul li.selected {
background:#FFFFFF url(../images/nav_arrow_blue.gif) no-repeat scroll 10px;
font-weight:bold;
}
#categoriesContent li ul li a {
display:block;
margin:0pt 5px 0pt 20px;
padding:5px 0pt;
}

#categoriesContent li ul li ul{
background-color:#FFFFFF;
font-weight:normal;
padding:0pt;
}

#categoriesContent li ul li ul li.selected {
background:#FFFFFF url(../images/nav_arrow_blue.gif) no-repeat scroll 20px 10px;
}
#categoriesContent li ul li ul li a {
display:block;
display:block;
margin:0pt 5px 0pt 30px;
padding:5px 0pt;
}
#categoriesContent li ul li ul li ul li.selected {
background:#EFEFEF url(../images/nav_arrow_blue.gif) no-repeat scroll 30px 10px;
}
#categoriesContent li ul li ul li ul li a {
display:block;
margin:0pt 5px 0pt 40px;
padding:5px 0pt;
}
#categoriesContent li ul li ul li ul li ul li.selected {
background:#EFEFEF url(../images/nav_arrow_blue.gif) no-repeat scroll 40px 10px;
}
#categoriesContent li ul li ul li ul li ul li a {
display:block;
margin:0pt 5px 0pt 50px;
padding:5px 0pt;
}
#categoriesContent ul.external {
list-style-image:url(../images/arrow.gif);
margin:0pt 0pt 10px 25px;
}
#categoriesContent ul.external li {
border:medium none;
}
#categoriesContent ul.external li a {
padding-left:0pt;
}

Anyway, the basic part of having different top cat and subcat display can be done with CSS in your current stylesheet, using the classes that are already available.