/******************************************************************************
 * Menu.css
 *
 * RealPatterns Web Application Framework :: Menu
 *
 * Copyright 2007 RealPatterns, Inc.  All rights reserved.
 *
 * A Menu is a small box containing a list of links leading to special
 * sections. Typically, the list is composed of subjects, or categories, and
 * lacks a lengthy description or explanation of the items listed. Therefore,
 * each item listed should be self-descriptive and intuitive to the user.
 * Traditionally, menu items are listed vertically and are short in length.
 * Layout is accomplished by using a three-row table providing a grid of nine
 * cells. The cells on this grid are denoted, from left to right and top to
 * bottom: north west, north, north east, west, center, east, south west,
 * south, and south east. All except the center cell are bordering cells, and
 * are used to decortate the borders and corners of the Menu. The center cell
 * contains a nested two-column table. The first cell contains a small image,
 * or icon, depicting the item. The second cell contains a link. Alternatively,
 * the center cell may contain division elements or list elements which in
 * turn contain the menu items.
 *
 * Color map:
 * ----------
 * rgb(50, 50, 50);     (Dark Gray)
 * rgb(0, 0, 100);      (Dark Navy Blue);
 */

/******************************************************************************
 * Menu.
 * Apply to top-level table element containing all content.
 */
.Menu {

  border: none;
  z-index: 10;

  color: rgb(0, 0, 100);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: 12px sans-serif;
}

/******************************************************************************
 * Menu::North West
 * Apply to 1st row, 1st cell.
 */
.MenuNorthWest {

  width: 20px;
  height: 10px;
  text-align: left;
  vertical-align: top;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: 12px sans-serif;
}

/******************************************************************************
 * Menu::North
 * Apply to 1st row, 2nd cell.
 */
.MenuNorth {

  text-align: center;
  vertical-align: top;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: 12px sans-serif;
}

/******************************************************************************
 * Menu::North East
 * Apply to 1st row, 3rd cell.
 */
.MenuNorthEast {

  width: 10px;
  height: 10px;
  text-align: right;
  vertical-align: top;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: 12px sans-serif;
}

/******************************************************************************
 * Menu::West
 * Apply to 2nd row, 1st cell.
 */
.MenuWest {

  width: 20px;
  text-align: left;
  vertical-align: middle;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: 12px sans-serif;
}

/******************************************************************************
 * Menu::Center
 * Apply to 2nd row, 2nd cell.
 */
.MenuCenter {

  height: 464px;
  text-align: center;
  vertical-align: top;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: 12px sans-serif;
}

/******************************************************************************
 * Menu::East
 * Apply to 2nd row, 3rd cell.
 */
.MenuEast {

  width: 10px;
  text-align: right;
  vertical-align: middle;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: 12px sans-serif;
}

/******************************************************************************
 * Menu::South West
 * Apply to 3rd row, 1st cell.
 */
.MenuSouthWest {

  width: 20px;
  height: 10px;
  text-align: left;
  vertical-align: bottom;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: 12px sans-serif;
}

/******************************************************************************
 * Menu::South
 * Apply to 3rd row, 2nd cell.
 */
.MenuSouth {

  text-align: center;
  vertical-align: bottom;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: 12px sans-serif;
}

/******************************************************************************
 * Menu::Sourth East
 * Apply to 3rd row, 3rd cell.
 */
.MenuSouthEast {

  width: 10px;
  height: 10px;
  text-align: right;
  vertical-align: bottom;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: 12px sans-serif;
}

/******************************************************************************
 * Menu::Copy.
 * Apply to nested element containing menu items.
 */
.MenuCopy {

  z-index: 10;
  text-align: left;
  vertical-align: top;

  color: rgb(128, 153, 80);
  margin: 0px auto;
  padding: 0px 0px 0px 0px;
  font: 12px sans-serif;
}

/******************************************************************************
 * Menu::Title.
 * Apply to cell containing menu title.
 */
.MenuTitle {

  z-index: 10;
  text-align: left;
  vertical-align: middle;

  margin: 0px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  font: bold 10px sans-serif;
}

/******************************************************************************
 * Menu::Icon.
 * Apply to cell containing menu icon.
 */
.MenuIcon {

  z-index: 10;
  text-align: center;
  vertical-align: middle;

  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: 10px sans-serif;
}

/******************************************************************************
 * Menu::Item.
 * Apply to cells containing a menu item icon, or menu item link.
 */
.MenuItem {

  z-index: 10;
  text-align: left;
  vertical-align: middle;

  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: bold 10px sans-serif;
}

/******************************************************************************
 * Menu::Item Icon.
 * Apply to every menu item icon.
 */
.MenuItemIcon {

  border: none;
  z-index: 10;
  text-align: center;
  vertical-align: middle;

  margin: 0px 0px 4px 0px;
  padding: 0px 0px 0px 0px;
  font: 12px sans-serif;
}

/******************************************************************************
 * Menu::List.
 * Apply to nested menu list.
 */
.MenuList {

  border: none;
  z-index: 10;
  text-align: left;
  vertical-align: middle;

  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: normal 10px sans-serif;
}

/******************************************************************************
 * Menu::List Item.
 * Apply to nested menu list items.
 */
.MenuListItem {

  border: none;
  z-index: 10;
  text-align: left;
  vertical-align: middle;

  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font: normal 10px sans-serif;
}

/******************************************************************************
 * Menu::Item Link.
 * Apply to every menu item link, or menu list item link.
 */
.MenuItemLink {

  border: none;
  z-index: 10;
  text-align: left;
  vertical-align: middle;
  text-decoration: none;

  color: rgb(50, 50, 50);
  font: normal 10px sans-serif;
}