/***************************************************************************
                  CSS to present different menus

   filename    : nav_style.css
   Author      : Elango Samy Manim
   website     : local
   Date        : Apr 15, 2009
   Description : xmenu = Menu with items expanding along x-axis.
                 ymenu = Menu with items expanding along y-axis.
                         ymenu also supports a total of 3 flyouts.
                 xymenu= Dropdown menu or suckerfish menu i.e. Menu
                         with first items expanding along x-axis
                         and the rest along y-axis.
****************************************************************************/

/********* BEGIN: xmenu *********/

.xmenu
{
  padding: 0;
  margin: 0;
}

.xmenu ul
{
  font-weight: bold;
}

.xmenu li
{
  float: left;
  list-style-type: none;
  background-color: #37F;
}

.xmenu a
{
  display: block;
  padding: 0px 30px 0px 30px;
  border-right: 1px red solid;
  text-decoration: none;
  color: white;
}

.xmenu a:hover, .xmenu #active
{
  color: yellow;
  background-color: blue;
}

/********* END: xmenu *********/

/********* BEGIN: ymenu *********/

.ymenu
{
  width: 150px;
  font-weight: bold;
}

.ymenu ul
{
  padding: 0;
  margin: 0;
  list-style-type: none;         /* removes bullets but not their space in Firefox */
  padding-left: 0;               /* removes space that was occupied by bullets in Firefox  */
}

.ymenu li
{
/*  border-bottom: 1px solid white;  Separator between list items */
/*  border-style: outset; */
  border-left: 1px solid #FFFFFF;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid #030303;   /* These 4 borders create outset buttons but make it more visually pleasing */
  border-bottom: 1px solid #030303;  /* These 4 borders create 3-D effect and make the cursor jump to submenu easier */
/*  padding: 5px 0px 5px 20px; */
  position: relative;            /* To hold submenu .ymenu li ul in position. Define ONLY IF there are submenus */
}

.ymenu li:hover       /* WARNING: IE 6 recognizes hover pseudo-class only for html links */
{
/*  border-style: inset; */
  border-left: 1px solid #030303;
  border-top: 1px solid #030303;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF; /* These borders create inset buttons */
}

.ymenu a
{
  display: block;
  width: 128px;      /* menu width 150 minus padding 20 defined here minus 2 pixels for borders defined in li */
  height: 25px;
  padding: 2px 10px 2px 10px;
  text-decoration: none;
  color: white;
  background-color: #ffcc33;
}

.ymenu a:hover  /* , .ymenu a:visited, .ymenu a:active */
{
  color: yellow;
}

.ymenu a.flyout
{
	background-color: ffcc33;
	background-image: url(ymenu_flyout_off.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

.ymenu a.flyout:hover
{
	background-color: ffcc33;
	background-image: url(ymenu_flyout_on.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

.ymenu li ul,  .ymenu li:hover ul li ul,  .ymenu li:hover ul li:hover ul li ul
{
  display: none;
}

.ymenu li:hover ul, .ymenu li:hover ul li:hover ul,  .ymenu li:hover ul li:hover ul li:hover ul
{
  display: block;
  width: 150px;
  position: absolute;
  top: 0;
  left: 149px;
/*  padding-left: 1px;    Gap between a main menu item and its submenu ... submenu item and its submenu etc. */
}

.ymenu li:hover ul li,  .ymenu li:hover ul li:hover ul li
{
  position: relative;            /* To hold submenu .ymenu li:hover ul li ul in position */
}

/********* END: ymenu *********/

/********* BEGIN: xymenu *********/

.xymenu
{
/*  float: left; */
  width: 100%;
  font-weight: bold;
  background-color: ffcc33; /* yellow */
}

.xymenu ul
{
  padding: 0;
  margin: 0;
  list-style-type: none;         /* removes bullets but not their space in Firefox */
  padding-left: 10px;               /* removes space that was occupied by bullets in Firefox  */
}

.xymenu ul li
{
  float: left;
  position: relative;            /* To hold submenu .xymenu li ul in position. Define ONLY IF there are submenus */
  width: 150px;

  border-left: 1px solid #FFFFFF;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid #030303;
  border-bottom: 1px solid #030303;

/*  padding: 5px 0px 5px 20px; */
}

.xymenu ul li:hover
{
  position: relative;
  border-left: 1px solid #030303;
  border-top: 1px solid #030303;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

.xymenu ul li a, .xymenu ul li a:visited
{
	float: left;
	display: block;
	width: 130px;         /* li width 150px minus padding 20px defined here */
	height: 25px;
	padding: 3px 10px 3px 10px;
	text-decoration: none;
	color: white;
	background-color: #ffcc33;  /* brown */
}

.xymenu ul li a:hover  /* , .xymenu a:visited, .xymenu a:active */
{
  color: yellow;
}

.xymenu ul li a.dropdown
{
  background: #ffcc33 url('xmenu_dropdown_off.gif') center right no-repeat;
}

.xymenu ul li a.dropdown:hover
{
  background: #ffcc33 url('xmenu_dropdown_on.gif') center right no-repeat;
}

.xymenu ul li ul
{
  display: none;
}

.xymenu ul li:hover ul
{
  display: block;
  width: 150px;
  position: absolute;
  top: 30px;
  left: -11px;
/*  padding-left: 1px;    Gap between a main menu item and its submenu ... submenu item and its submenu etc. */
}

.xymenu ul li:hover ul li
{
  border-left: 1px solid #FFFFFF;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid #030303;   /* These 4 borders create outset buttons but make it more visually pleasing */
  border-bottom: 1px solid #030303;  /* These 4 borders create 3-D effect and make the cursor jump to submenu easier */
  position: relative;            /* To hold submenu .xymenu li:hover ul li ul in position */
}

.xymenu ul li:hover ul li:hover
{
  border-left: 1px solid #030303;
  border-top: 1px solid #030303;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF; /* These borders create inset buttons */
  position: relative;
}

.xymenu ul li ul li a
{
  display: block;
  width: 130px;      /* menu width 150 minus padding 20 defined here minus 2 pixels for borders defined in li */
  height: 25px;
  padding: 2px 10px 2px 10px;
  text-decoration: none;
  color: white;
  background-color: #b63b3b;  /* lighter brown */
}

.xymenu ul li ul li a:hover
{
  color: yellow;
}

.xymenu ul li ul li a.flyout
{
  background: #ffcc33 url('ymenu_flyout_off.gif') center right no-repeat;
}

.xymenu ul li ul li a.flyout:hover
{
  background: #ffcb00 url('ymenu_flyout_on.gif') center right no-repeat;
}

.xymenu ul li:hover ul li ul, .xymenu ul li:hover ul li:hover ul li ul
{
  display: none;
}

.xymenu ul li:hover ul li:hover ul, .xymenu ul li:hover ul li:hover ul li:hover ul
{
  display: block;
  width: 150px;
  position: absolute;
  top: -1px;
  left: 141px;
}

.xymenu ul li:hover ul li:hover ul.leftflyout
{
  display: block;
  width: 150px;
  position: absolute;
  top: -1px;
  left: -163px;
}

/********* END: xymenu *********/