/*
    Stylesheet for Modular Merchant advanced category menu
    
    CSS selectors used by this menu:
    .menu - Class for container element surrounding the menu.
    .menu-item - Class for container element of each menu item. Menu items are nested like so
                 (your category structure may vary):
                    <div class="menu-item" id="cat-menu1">
                       <div class="menu-item" id="cat-menu2">
                         <!-- subcategory of category 1, sibling of category 3 -->
                        ...
                       </div>
                       <div class="menu-item" id="cat-menu3">
                        <!-- subcategory of category 1, sibling of category 2 -->
                        ...
                       </div>
                    </div>
    .menu-item-selected - Class for the currently selected category which the user is browsing, if any.
    .menu-item-unselected - Class for all categories which the user is not currently browsing.
    .menu-item-has-children - Class for categories which have child subcategories.
    .menu-item-first-child - First menu item within a category
    .menu-item-middle-child - A middle item within a category
    .menu-item-last-child - Last menu item within a category
    
    To apply a style to all menu items at a certain level and their subcategories, use the syntax:
    .menu-item { ...CSS... } (root level)
    .menu-item .menu-item { ...CSS... } (first level of subcategories)
    .menu-item .menu-item .menu-item { ...CSS... } (second level of subcategories)
    ... and so on.
    You can also use this technique to override styles. For example, override the root level style with a 
    style at the first level of subcategories (.menu-item .menu-item), which will then apply
    to that level and all subcategories, unless it too is overridden.
    
    Styles can also be applied at the individual category level, using the syntax:
    .menu-catID { ...CSS... } where ID is a Modular Merchant system ID. For example, to apply a style to the 
    category with Modular Merchant system ID 2 and all of its subcategories, use: .menu-cat2 { ...CSS... }

	As another example, changing the link behavior for just category 17 would be formatted like this:
		#menu-cat17 .menu-item a:link,
		#menu-cat17 .menu-item a:visited,
		#menu-cat17 .menu-item a:hover,
		#menu-cat17 .menu-item a:active
		{
		    color: #FF0000;
		}
*/


.menu {
    font-family: Tahoma, verdana, sans-serif;
    font-size: 11px;
    border: 1px solid #666666;
    background-color: #FFFFFF;
    color: #666666;
    padding-right: 3px;
    padding-left: 3px;
    margin-top: 15px;
    width: 150px;
}

.menu h1, .menu h2, .menu h3, .menu h4, .menu h5, .menu h6 {
font-family: Tahoma, verdana, sans-serif;
font-size: 11px;
padding: 0px;
margin: 0px;
}

/* For menu items that are children of other menu items, add padding */
.menu-item .menu-item {
   padding-left: 12px;
}


.menu a:link, .menu a:visited, .menu a:hover, .menu a:active {
    font-weight: bold;
    text-decoration: underline;
    color: #666666;
}

.menu a:hover {  
    color: #C02857; 
    text-decoration: none;
}

.menu a:active {  
    color: #A8041F; 
    text-decoration: underline;
}

.menu-item .menu-item a:link {
    font-weight: normal;
}
.menu-item .menu-item a:visited {
    font-weight: normal;
}
.menu-item .menu-item a:hover {
    font-weight: normal;
    text-decoration: none;
}
.menu-item .menu-item a:active {
    font-weight: normal;
    text-decoration: none;
}

.menu-item-selected {
background-image: url(/store/img/graphics/default/arrow_small.gif);
background-position: center left;
background-repeat: no-repeat;
}

.menu-item-has-children {
background-image: url(/store/img/graphics/default/arrow_small_off.gif);
background-position: center left;
background-repeat: no-repeat;
}

.menu-item-selected, .menu-item-unselected, .menu-item-has-children {
    padding-left: 12px;

}

.menu-item-first-child, .menu-item-middle-child, .menu-item-last-child {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #666666;
}

.menu-item-last-child {
    border-bottom: none;
}