/* --- Tigra menu styles ---
note:
	not all browsers render styles the same way so try out your style sheet
	on different browsers before publishing;
*/

/* --- menu styles ---
Explanation of "Outer" and "Inner" Menu Levels:
    Inner Level: Refers to the content area of the menu item, 
    typically where the text or label of the menu item is displayed. 
    The inner part is styled using classes like .m0l0iout and 
    .m0l0iover. These classes control the font, padding, text color, 
    and background color of the text inside the menu item.

    Outer Level: Refers to the container or wrapper of the menu item, 
    which includes the border and background surrounding the inner 
    content. The outer part is styled using classes like .m0l0oout and 
    .m0l0oover. These classes control the border, background color, 
    and sometimes opacity of the menu item's container.

Why Separate Inner and Outer Styles?
    The separation allows for more granular control over the 
    appearance of the menu items. For example, you can have a 
    different background color for the outer container while keeping 
    the inner text area styled differently. This is useful for 
    creating visually appealing hover effects or highlighting menu 
    items.

How It Relates to the JavaScript:
    In the JavaScript (menu.js), the menu_item class generates HTML 
    elements for each menu item. The outer part is typically the <a> 
    tag (the clickable link), and the inner part is the <div> inside 
    the <a> tag that contains the text.

    The getstyle function in the JavaScript dynamically applies the 
    appropriate CSS classes (e.g., .m0l0iout, .m0l0iover) to the inner 
    and outer parts of the menu item based on user interactions 
    (hover, click, etc.).

This separation of inner and outer styling allows for more flexible 
and visually appealing menu designs.

*/

/* ======================================================================== */

/* level 0 (root level) inner */
.m0l0iout {                                                                  /* Style for the outer part of level 0 menu items when not hovered. */
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;              /* Font family for the text inside the menu item. */
	font-size: 12px;                                                         /* Font size for the text inside the menu item. */
	font-weight: bold;                                                       /* Bold text inside the menu item. */
	text-decoration: none;                                                   /* No underline for the text inside the menu item. */
	text-align: center;
	padding: 10px 0px;                                                       /* 1st top/bottom, 2nd left/right; Padding around the text inside the menu item. */
	color: Black;                                                            /* Black text color inside the menu item. */
	background: LightGray;                                                    /* LightGray background for the inner part of the menu item. */
}                                                                           
.m0l0iover {                                                                 /* Style for the inner part of level 0 menu items when hovered. */
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;              /* Font family for the text inside the menu item. */
	font-size: 12px;                                                         /* Font size for the text inside the menu item. */
	font-weight: bold;                                                       /* Bold text inside the menu item. */
	text-decoration: none;                                                   /* No underline for the text inside the menu item. */
	text-align: center;
	color: White;                                                         /* White text color inside the menu item. */
	background: LightGray;                                                    /* LightGray background for the inner part of the menu item. */
}                                                                           

/* level 0 outer */
.m0l0oout {                                                                  /* Style for the outer part of level 0 menu items when not hovered. */
	text-decoration : none;                                                  /* No underline for the outer part of the menu item. */
	border: 1px solid White;                                                 /* White border around the outer part of the menu item. */
	background: LightGray;                                                    /* LightGray background for the outer part of the menu item. */
}                                                                           
.m0l0oover {                                                                 /* Style for the outer part of level 0 menu items when hovered. */
	font-size: 12px;                                                         /* Font size for the text inside the menu item. */
	font-weight: bold;                                                       /* Bold text inside the menu item. */
	text-decoration: none;                                                   /* No underline for the text inside the menu item. */
	padding: 10px 0px;                                                       /* 1st top/bottom, 2nd left/right; Padding around the text inside the menu item. */
	text-decoration : none;                                                  /* No underline for the outer part of the menu item. */
	border: 1px solid White;                                                 /* White border around the outer part of the menu item. */
	background: LightGray;                                                    /* LightGray background for the outer part of the menu item. */
}                                                                           

/* =================== root level configuration (level 0) ================== */
/* level 1 inner */
.m0l1iout {                                                                  /* Style for the inner part of level 1 menu items when not hovered. */
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;              /* Font family for the text inside the menu item. */
	font-size: 12px;                                                         /* Font size for the text inside the menu item. */
	font-weight: bold;                                                       /* Bold text inside the menu item. */
	text-decoration: none;                                                   /* No underline for the text inside the menu item. */
	padding: 4px;                                                            /* Padding around the text inside the menu item. */
	color: Black;                                                            /* Black text color inside the menu item. */
	background: LightGray;                                                    /* LightGray background for the inner part of the menu item. */
}                                                                           
.m0l1iover {                                                                 /* Style for the inner part of level 1 menu items when hovered. */
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;              /* Font family for the text inside the menu item. */
	font-size: 12px;                                                         /* Font size for the text inside the menu item. */
	font-weight: bold;                                                       /* Bold text inside the menu item. */
	text-decoration: none;                                                   /* No underline for the text inside the menu item. */
	padding: 4px;                                                            /* Padding around the text inside the menu item. */
	color: White;                                                         /* White text color inside the menu item. */
}                                                                           

/* level 1 outer */
.m0l1oout {                                                                  /* Style for the outer part of level 1 menu items when not hovered. */
	text-decoration : none;                                                  /* No underline for the outer part of the menu item. */
	border: 1px solid White;                                                 /* White border around the outer part of the menu item. */
	background: LightGray;                                                    /* LightGray background for the outer part of the menu item. */
}                                                                           
.m0l1oover {                                                                 /* Style for the outer part of level 1 menu items when hovered. */
	text-decoration : none;                                                  /* No underline for the outer part of the menu item. */
	border: 1px solid White;                                                 /* White border around the outer part of the menu item. */
	background: LightGray;                                                    /* LightGray background for the outer part of the menu item. */
}                                                                           


/* ==================== sub-menu configuration (level 2) =================== */
/* level 2 inner */
.m0l2iout {                                                                  /* Style for the inner part of level 2 menu items when not hovered. */
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;              /* Font family for the text inside the menu item. */
	font-size: 12px;                                                         /* Font size for the text inside the menu item. */
	font-weight: bold;                                                       /* Bold text inside the menu item. */
	text-decoration: none;                                                   /* No underline for the text inside the menu item. */
	padding: 4px;                                                            /* Padding around the text inside the menu item. */
	color: Black;                                                            /* Black text color inside the menu item. */
	background: LightGray;                                                    /* LightGray background for the inner part of the menu item. */
}                                                                           

.m0l2iover {                                                                 /* Style for the inner part of level 2 menu items when hovered. */
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;              /* Font family for the text inside the menu item. */
	font-size: 12px;                                                         /* Font size for the text inside the menu item. */
	font-weight: bold;                                                       /* Bold text inside the menu item. */
	text-decoration: none;                                                   /* No underline for the text inside the menu item. */
	padding: 4px;                                                            /* Padding around the text inside the menu item. */
	color: White;                                                         /* White text color inside the menu item. */
}                                                                           

/* level 2 outer */
.m0l2oout {                                                                  /* Style for the outer part of level 2 menu items when not hovered. */
	text-decoration : none;                                                  /* No underline for the outer part of the menu item. */
	border: 1px solid White;                                                 /* White border around the outer part of the menu item. */
	background: LightGray;                                                    /* LightGray background for the outer part of the menu item. */
}                                                                           
.m0l2oover {                                                                 /* Style for the outer part of level 2 menu items when hovered. */
	text-decoration : none;                                                  /* No underline for the outer part of the menu item. */
	border: 1px solid White;                                                 /* White border around the outer part of the menu item. */
	background: LightGray;                                                    /* LightGray background for the outer part of the menu item. */
}

/* ==================== sub-menu configuration (level 3) =================== */
/* level 3 inner */
.m0l3iout {                                                                  /* Style for the inner part of level 3 menu items when not hovered. */
	font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;                /* Font shorthand for the text inside the menu item. */
	text-decoration: none;                                                   /* No underline for the text inside the menu item. */
	font-weight: bold;                                                       /* Bold text inside the menu item. */
	padding: 4px;                                                            /* Padding around the text inside the menu item. */
	color: Black;                                                            /* Black text color inside the menu item. */
	background: LightGray;                                                    /* LightGray background for the inner part of the menu item. */
}                                                                           

.m0l3iover {                                                                 /* Style for the inner part of level 3 menu items when hovered. */
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;              /* Font family for the text inside the menu item. */
	font-size: 12px;                                                         /* Font size for the text inside the menu item. */
	font-weight: bold;                                                       /* Bold text inside the menu item. */
	text-decoration: none;                                                   /* No underline for the text inside the menu item. */
	padding: 4px;                                                            /* Padding around the text inside the menu item. */
	color: White;                                                         /* White text color inside the menu item. */
}                                                                           

/* level 3 outer */
.m0l3oout {                                                                  /* Style for the outer part of level 3 menu items when not hovered. */
	text-decoration : none;                                                  /* No underline for the outer part of the menu item. */
	border: 1px solid White;                                                 /* White border around the outer part of the menu item. */
	background: LightGray;                                                    /* LightGray background for the outer part of the menu item. */
}                                                                           
.m0l3oover {                                                                 /* Style for the outer part of level 3 menu items when hovered. */
	text-decoration : none;                                                  /* No underline for the outer part of the menu item. */
	border: 1px solid White;                                                 /* White border around the outer part of the menu item. */
	background: LightGray;                                                    /* LightGray background for the outer part of the menu item. */
}