#css_vertical_menu{
/*1. the width of the vertical menu*/
width:180px; 
/*2. remove the default list bullets*/
list-style:none;
/*3. margin value to null – needed for Internet Explorer*/
margin:0;
/*4. a space (padding) of 1 px between the list border and its content*/
padding:1px; 
/*5. the background color of the menu*/
background-color:#FFFFFF;
/*6. a border of 1px around the menu*/
border:1px solid #444444;
}

#css_vertical_menu a{
/*1. convert the link from inline to block element so they cover all the available space*/
display:block;
/*2. a specific height – needed for Internet Explorer 6*/
height:25px;
/*3. a top space in between eack link*/
margin-top:1px;
/*4. and a left space (padding) between the border and the text link*/
padding-left:5px;
/*5. background color of the links*/
background-color:#DDDDDD;
/*6. a left border of 10px*/
border-left:5px solid #BBBBBB;
/*7. the font family*/
font-family:verdana,arial,sans-serif;
font-weight: bold;
/*8. the font size*/
font-size:10px;
/*9. convert the font to capital letter*/
/*text-transform:uppercase;*/
/*10. remove the text underline added by default to the links*/
text-decoration:none;
/*11. the color of the text links*/
color:#000000;
/*12. vertical align of the text link (value equal to the height)*/
line-height:25px;
}

#css_vertical_menu hr {
display:block;
background-color:#BBBBBB;
height:10px;
line-height:10px;
margin-top:1px;
margin-bottom:1px;
}

#css_vertical_menu a:hover{
/*1. change of background color*/
background-color:#7dB894;
/*2. change of the left border color*/
border-left:5px solid #3d7854;
/*3. change the color of the text link*/
color:#000000;
}

#css_vertical_menu a.first{
margin-top:0;
}