/*In this portion we style the main DIV containing the menu, everything that represents our menu resides in this box.
For the purpose of this tutorial we are floating the menus left so they can stay aligned next to each other*/
#MenuFlip {
width: 150px;
height:300px;
overflow-y:auto;
overflow-x:hidden;
float:left;
}
 
#MenuFlip ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
 

/*In this portion we apply a CSS property to our List elements that makes our menu look the same on Internet Explorer and other browsers.*/

#MenuFlip li
{
    float:left;
    display: inline;
/* for IE5 and IE6 */
}
 

/*In this portion we style the LINK that is reside inside the list element. 
The reason we are not styling the LI element is that by styling the LINK (a href) 
we can make the clickable menu area spread along the whole list element, using display: block;*/

    #MenuFlip tr, #MenuFlip td {
    background-color: #FFFFCC;
    padding: 0;
    margin: 0;
}

#MenuFlip a {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    display: block;
    padding: 3px;
    width: 150px;
    
    border-bottom: 1px solid #eee;
}
 

/*In this portion we style visited and active state of our links (menu items, a href).*/

#MenuFlip a:link, #MenuFlip a:visited
{
color: #000;
text-decoration: none;
}
 
#MenuFlip a:hover {
    background: #00BEE4;
    color: #EEE;
    text-decoration: none;
}

#MenuFlipTitle {
    padding: 5px;
    background-color: #686C7A;
    color: #FFFFFF;
    font-weight: bolder;
    font-size: 14px;
}

/*In this portion we style the hover state of our links (menu items). 
The attributes we use here are applied to the a menu item when we move our mouse cursor over it.*/

#MenuFlip li a#current
{
border-bottom: 3px solid #DAD6B7;
background: #00BEE4;
}