/*
 DONT MODIFY THIS FILE (unless, of course you want to change all other 
 projects). 
 Instead, import it into your app level stylesheet (includes/styles) as such:

 @import url("../../../stlLib/styles/menuAppSpecific.css");
*/

/* Menu Template */

#stlMenu {
    font-family: Arial, Helvetica, sans-serif;
}

#stlMenu a {
    text-decoration: none;
    font-size: 13px;   /* was small, but problem w/IE view->text size */
    font-weight: bold; 
    color: black;
}

#stlMenu li {
    width: 97px; /* Change this as desired for width */
    margin: 0 2px 0 0; /* This was margin: 0 1em; but IE can't add */
}

#stlMenu li a img {
    border: none;
}

#stlMenu li ul {  
    padding-left: 1px; /* Move the ul over one, because it's 2 px narrower than the li up top. */
    text-align: center;
}

#stlMenu li li {
    width: 93px; /* Make our item smaller for the border to fit. */
    border-left: 1px solid #004B1E;
    border-right: 1px solid #004B1E;
    border-bottom: 1px solid #B8C2CC;

    color: black;
    background-color: white;
}

#stlMenu li li.lastLi {
    border-bottom: 1px solid #004B1E;
}

 /* Get rid of that pesky 3 pixels we get at the bottom of images */
#stlMenu img {
    display: block;
}

/*
 * Hover properties 
 */
/* Give the menu titlebar a new background color on mouseover */
#stlMenu li:hover, #stlMenu li.over {
 /* background-color: #036; */
}

/* Selects on the uls of the currently rolled over menu */
#stlMenu li:hover ul, #stlMenu li.over ul {
}
 
/* Give the menu item a new background color on mouseover
   This selector affects the currently open menu's contents */
#stlMenu li:hover li, #stlMenu li.over li {
    background-color: white;
}


/* Select both the li and the a within: */
#stlMenu li li:hover, #stlMenu li li:hover a, #stlMenu li li.over, 
#stlMenu li li.over a {
    background-color: #99B288;
    color: black;
}