.foo {}/* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

/* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */
/* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */
/* See WhitePaper.aspx for details. */

ul.AspNet-Menu {
  position: relative;
  z-index: 1000;
}


  ul.AspNet-Menu,
  ul.AspNet-Menu ul {
    margin: 0;
    padding: 0;
    display: block;
  }

    ul.AspNet-Menu li 
    {
      position: relative;
      list-style: none;
      float: left;
    }

      ul.AspNet-Menu li a,
      ul.AspNet-Menu li span 
      {
        display: block;
        text-decoration: none;
      }

    ul.AspNet-Menu ul
    {
      position: absolute;
      visibility: hidden;
    }

    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
    {
      visibility: hidden;
    }

    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul {
      visibility: visible;
    }

.AspNet-Menu-Vertical ul.AspNet-Menu li {
  width: 100%;
}

.ColorBlue {
  background-color: #046CB6;
}

.ColorPurple {
  background-color: #5A3988;
}

.ColorGreen {
  background-color: #4AA942;
}

.ColorGreenBlue {
  background-color: #199DB5;
}


/* The menu adapter renders an unordered list (ul) in HTML for each tier in the menu. */
/* So, effectively says: style all tiers in the menu this way... */
.PrettyMenu ul {
  background-color: #046CB6;
}


/* Top tier */
.PrettyMenu .AspNet-Menu-Vertical ul.AspNet-Menu {
  width: 9em;
}

/* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
/* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
/* the topmost tier's appearance. */
.PrettyMenu ul.AspNet-Menu ul {
  width: 147px;
  z-index: 100;
}

  .PrettyMenu ul.AspNet-Menu ul ul {
    width: 147px;
  }

/* The menu adapter generates a list item (li) in HTML for each menu item. */
/* Use this rule create the common appearance of each menu item. */
.PrettyMenu ul.AspNet-Menu li {
  position: relative;
  background-color: #474747;
  /*border-top: solid 1px #E7E7E7;*/
  border-right: solid 2px #D2D2D2;
  /*border-bottom: solid 1px #D2D2D2;*/
  /*border-left: solid 1px #E7E7E7;*/
  z-index: 100;
}


  /* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */
  /* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */
  /* in each menu item.  One comes from the CSS rule (above) governing the li tag that each menu item has. */
  /* The second image comes from this rule (below). */
  .PrettyMenu ul.AspNet-Menu li a,
  .PrettyMenu ul.AspNet-Menu li span {
    position: relative;
    color: white;
    font-weight: bold;
    padding: 11px 0px 0px 0px;
    height: 67%;
    z-index: 100;
  }

  /* When a menu item contains no submenu items it is marked as a "leaf" and can be styled specially by this rule. */
  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span {
    /*background: none;*/
    background: #474747;
  }

  /* Not used presently.  This is here if you modify the menu adapter so it renders img tags, too. */
  .PrettyMenu ul.AspNet-Menu li a img {
    border-style: none;
    vertical-align: middle;
  }

  /* When you hover over a menu item, this rule comes into play. */
  /* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically change the */
  /* menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is over that li tag. */
  /* See MenuAdapter.js (in the JavaScript folder). */
  .PrettyMenu ul.AspNet-Menu li:hover,
  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover {
    background-color: #A4B6C1;
  }

    .PrettyMenu ul.AspNet-Menu li:hover a,
    .PrettyMenu ul.AspNet-Menu li:hover span,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover span,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover a,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover span,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul a:hover,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover {
      color: #000000;
    }

    .PrettyMenu ul.AspNet-Menu li:hover ul a,
    .PrettyMenu ul.AspNet-Menu li:hover ul span,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul a,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul span,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span {
      color: White;
      padding: 6px 2px 0px 5px;
    }

  /* While you hover over a list item (li) you are also hovering over a link or span because */
  /* the link or span covers the interior of the li.  So you can set some hover-related styles */
  /* in the rule (above) for the li but set other hover-related styles in this (below) rule. */
  .PrettyMenu ul.AspNet-Menu li a:hover,
  .PrettyMenu ul.AspNet-Menu li span:hover,
  .PrettyMenu ul.AspNet-Menu li span.Asp-Menu-Hover {
    color: #000000;
  }

  .PrettyMenu ul.AspNet-Menu li ul li.AspNet-Menu-WithChildren span,
  .PrettyMenu ul.AspNet-Menu li ul li.AspNet-Menu-WithChildren a {
    background: transparent url(images/arrowRight.gif) right center no-repeat;
  }

    .PrettyMenu ul.AspNet-Menu li ul li.AspNet-Menu-WithChildren span:hover,
    .PrettyMenu ul.AspNet-Menu li ul li.AspNet-Menu-WithChildren a:hover {
      background: transparent url(images/activeArrowRight.gif) right center no-repeat;
    }

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover,
  .PrettyMenu ul.AspNet-Menu li ul li.AspNet-Menu-Leaf a,
  .PrettyMenu ul.AspNet-Menu li ul li.AspNet-Menu-Leaf a:hover,
  .PrettyMenu ul.AspNet-Menu li ul li ul li.AspNet-Menu-Leaf a,
  .PrettyMenu ul.AspNet-Menu li ul li ul li.AspNet-Menu-Leaf a:hover {
    background: none;
    /*background: #474747;*/
  }

/* -------------------------------------------------------------------------- */
/* When the Menu control's Orientation property is Horizontal the adapter wraps the menu with DIV */
/* whose class is AspNet-Menu-Horizontal. */
/* Note that the example menu in this web site uses absolute positioning to force the menu to occupy */
/* a specific place in the web page.  Your web site will likely use a different technique to position your */
/* menu.  So feel free to change all the properties found in this CSS rule if you clone this style sheet. */
/* There is nothing, per se, that is magical about these particular property value choices.  They happen to */
/* work well for the sample page used to demonstrate an adapted menu. */

.PrettyMenu .AspNet-Menu-Horizontal {
  z-index: 100;
}

  /* This rule controls the width of the top tier of the horizontal menu. */
  /* BE SURE TO MAKE THIS WIDE ENOUGH to accommodate all of the top tier menu items that are lined */
  /* up from left to right. In other words, this width needs to be the width of the individual */
  /* top tier menu items multiplied by the number of items. */
  .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu {
  }

    /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
    /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
    /* the topmost tier's appearance. */
    /* Remember that only the topmost tier of the menu is horizontal.  The second and third tiers are vertical. */
    /* So, they need a much smaller width than the top tier.  Effectively, the width specified here is simply */
    /* the width of a single menu item in the second and their tiers. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul {
      width: 220px;
      left: -2px; /* For the 2 px border */
      top: 100%;
      border-left: solid 2px #D2D2D2;
      border-right: solid 2px #D2D2D2;
      border-bottom: solid 2px #D2D2D2;
    }

      .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul {
        top: 0;
        left: 0;
      }

      .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul {
        width: 180px;
        border-top: solid 2px #D2D2D2;
      }

    /* Generally, you use this rule to set style properties that pertain to all menu items. */
    /* One exception is the width set here.  We will override this width with a more specific rule (below) */
    /* That sets the width for all menu items from the second tier downward in the menu. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li {
      min-width: 110px;
      height: 36px;
      text-align: center;
      padding-left: 4px;
      padding-right: 4px;
    }

    /* This rule establishes the width of menu items below the top tier.  This allows the top tier menu items */
    /* to be narrower, for example, than the sub-menu items. */
    /* This value you set here should be slightly larger than the left margin value in the next rule. See */
    /* its comment for more details. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li
    {
      text-align: Left;
      height: 25px;
      width: 212px;
      z-index: 100;
      border-right: none;
    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li {
      width: 172px;
    }

    /* Third tier menus have to be positioned differently than second (or top) tier menu items because */
    /* they drop to the side, not below, their parent menu item. This is done by setting the last margin */
    /* value (which is equal to margin-left) to a value that is slightly smaller than the WIDTH of the */
    /* menu item. So, if you modify the rule above, then you should modify this (below) rule, too. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul {
      margin: 0 0 0 220px;
    }

.PrettyMenu ul li.MenuItem0, .PrettyMenu ul li.MenuItem1 li {
  /*background-color: #046CB6;*/
  background-color: #474747;
}

.PrettyMenu ul li.MenuItem1, .PrettyMenu ul li.MenuItem1 li {
  /*background-color: #4f2683;*/
  background-color: #474747;
}

.PrettyMenu ul li.MenuItem2, .PrettyMenu ul li.MenuItem2 li {
  /*background-color: #4AA942;*/
  background-color: #474747;
}

.PrettyMenu ul li.MenuItem3, .PrettyMenu ul li.MenuItem3 li {
  /*background-color: #00B5CC;*/
  background-color: #474747;
}

.PrettyMenu ul li.MenuItem4, .PrettyMenu ul li.MenuItem4 li {
  /*background-color: #4F2683;*/
  background-color: #474747;
}
/*.PrettyMenu ul li.MenuItem5, .PrettyMenu ul li.MenuItem5 li {
       background-color: #474747;
}*/

.PrettyMenu ul li.MenuItem6, .PrettyMenu ul li.MenuItem6 li
{
    background-color: #474747;

}

.PrettyMenu *,
.PrettyMenu *:before,
.PrettyMenu *:after {
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}