/**************** ESSENTIAL STYLES ***************/
/* remove any default styles */
.superfish, .superfish * {
  margin:0;
  padding:0;
  list-style:none;
  line-height:2.5em;
}

/* nested submenu ul elements */
.superfish ul {
  position:absolute; /* remove from flow and allow positioning */
  top:-999em; 
    /* hide submenu in screen-reader and search-engine friendly way */
  width:9.45em; 
    /* VARIABLE. Must have a width for menu items to inherit. Use ems so font
     * scaling does not break design
     */
}
/* submenu items */
.superfish ul li { 
  width: 100%;
    /* stretch submenu items to width of submenu ul width (see .superfish ul
     * rules above). When link text runs over more than one line, use padding
     * and an explicit width for the anchor instead of width:100% and
     * text-indent. Example below in the SKIN section 
    */
}

/* all li elements */
.superfish li {
  padding-left:1em;
  float:left; 
    /* must float all li elements. Vertical submenu items are restrained by
     * parent ul width (see .superfish ul rules above) 
     */
  position:relative; 
    /* make child submenu ul position relative to parent li */
  z-index:99; 
    /* ensure submenus appear above other page items. Increase if needed, but
     * do not exceed thickbox overlay z-index! 
     */
}

/* all anchor elements */
.superfish a {
  display:block; /* make IE6 obey width when text-indent is used */
}

/**** Position of second tier of.superfish ****/
.superfish li:hover ul, 
  /* this pure CSS hover is overridden by the .superfish rules below which are
   * applied only when JavaScript is available. This way, the menu degrades to
   * regular CSS dropdown when JavaScript is .superfishailable 
   */
ul.superfish li.sfHover ul 
/* this is the familiar IE6 hover support. With Superfish, all browsers use
 * this rule when JS is available. This is because the JS needs to be able to
 * control hide and reveal delays and animations without the pure CSS rule
 * intruding. Note the tag selector ul.superfish instead of just .superfish -
 * this gives it the most specificity of all and makes it trump all other
 * positioning rules, including the .superfish overrides below 
 */
{
  left:-1px; /* position first submenu directly under parent li */
  top:2.5em; 
    /* VARIABLE. This is calculated by adding 1em text height to top and bottom
     * anchor element padding (original skin: .75em top + .75em bottom + 1em
     * text height = 2.5em) 
     */
}

/**** Position of third tier of.superfish ****/
/* Note that this rule must appear here in the code order in order for it to
 * override previous positioning rules so that this and subsequent nested
 * submenus still remain hidden when the parent submenu is shown. Do not group
 * these selectors with other top:-999em rules 
 */
.superfish li:hover li ul,
.superfish li.sfHover li ul {
  top:-999em; /* hide submenu in screen-reader and search-engine friendly way */
}
/* DO NOT attempt to group these selectors with similar earlier rules. The code
 * order is important so the rules override previous ones correctly 
 */
.superfish li li:hover ul, 
  /* this pure CSS hover is overridden by the .superfish rules below which are
   * applied only when JavaScript is available. This way, the menu degrades to
   * regular CSS dropdown when JavaScript is .superfishailable 
   */
ul.superfish li li.sfHover ul 
  /* this is the familiar IE6 hover support. With Superfish, all browsers use
   * this rule when JS is available. This is because the JS needs to be able to
   * control hide and reveal delays and animations without the pure CSS rule
   * intruding. Note the tag selector ul.superfish instead of just .superfish -
   * this gives it the most specificity of all and makes it trump all other
   * positioning rules, including the .superfish overrides below 
   */
 {
  left:10.45em; 
    /* VARIABLE. Offset subsequent submenus to the right by the amount you set
     * for the submenu widths (see .superfish ul rules above) 
     */
  top:-1px; /* position subsequent submenus horizontally aligned to parent li */
}

/**** Position of fourth tier of.superfish 
 * (not used on main demo page. You could delete this block for a three tiered.superfish) i
 ****/

/* Note that this rule must appear here in the code order in order for it to
 * override previous positioning rules so that this and subsequent nested
 * submenus still remain hidden when the parent submenu is shown. Do not group
 * these selectors with other top:-999em rules 
 */
.superfish li li:hover li ul,
.superfish li li.sfHover li ul {
  top:-999em; /* hide submenu in screen-reader and search-engine friendly way */
}
/* DO NOT attempt to group these selectors with similar earlier rules. The code
 * order is important so the rules override previous ones correctly 
 */
.superfish li li li:hover ul, 
  /* this pure CSS hover is overridden by the .superfish rules below which are
   * applied only when JavaScript is available. This way, the menu degrades to
   * regular CSS dropdown when JavaScript is .superfishailable 
   */
ul.superfish li li li.sfHover ul 
  /* this is the familiar IE6 hover support. With Superfish, all browsers use
   * this rule when JS is available. This is because the JS needs to be able to
   * control hide and reveal delays and animations without the pure CSS rule
   * intruding. Note the tag selector ul.superfish instead of just .superfish -
   * this gives it the most specificity of all and makes it trump all other
   * positioning rules, including the .superfish overrides below 
   */
 {
  left:10.45em; 
    /* VARIABLE. Offset subsequent submenus to the right by the amount you set
     * for the submenu widths (see .superfish ul rules above) 
     */
  top:-1px; /* position subsequent submenus horizontally aligned to parent li */
}

/**** Position of further tiers of.superfish ****/
/* To add further tiers, you need copy the previous block of code (everything
 * back until the "Position of fourth tier of.superfish" comment) and paste it
 * in here. Then add an extra li just after .superfish in each of the pasted
 * selectors. So the new block will differ from the copied block in the same
 * way that the block for the fourth tier differs from the block for the third
 * tier.
 */

/**** Very important ****/
/* this negates the pure CSS hovers so submenu remains hidden and JS controls
 * when and how it appears. This is in turn is overridden by the .sfHover rules
 * above as they have greater specificity 
 */

/* notice there are three selectors here. You need three for a four tier menu
 * system. If you had a five tier system you would copy the last selector of
 * these three and paste it below to create a fourth selector and add another
 * li just after the .superfish part. On the other hand if you only had a three
 * tiered menu you could delete the third line here and save some file size.
 */
.superfish li:hover ul,
.superfish li li:hover ul,
.superfish li li li:hover ul {
  top: -999em; /* hide submenu in screen-reader and search-engine friendly way */
}

/* A quick note about issues with submenus appearing under Flash animations.
 * Some say that setting wmode="opaque" or  wmode="transparent" on the embed or
 * object tag is sufficient. This does fix many issues but I find it sometimes
 * helps to also add this CSS: */
embed, object {
  position: relative;
  z-index: 0;
}

/******************** ORIGINAL SKIN ******************/
/*
 * The CSS below is my attempt to extract most of the stuff you need to change in order
 * to reskin the menu with the appearance you require. However, certain rules above
 * (indicated with the word "VARIABLE") may also need to be altered to suit the width
 * and height of your menu items and submenus. For example, if you need wider submenus
 * eg: .superfish ul { width:12em} then you will need to also apply that value
 * to the left offset of any deeper nested submenus, eg:
 * .superfish li li:hover ul,
 * ul.superfish li li.sfHover ul {
   left:12em; top:-1px;
  }
 *
 * Other than that, most of the cosmetic stuff is below:
 */

ul.superfish {
  /* if you want to change font-size, do it here as opposed to setting it on
   * deeper nested anchor elements for example,  so that the em unit is the
   * same size for all elements in the menu 
   */
  float:left; /* necessary if you don't want this element to collapse */
  margin-bottom:1.5em; /* add space beneath.superfish. Purely cosmetic */
  color: white;
}
ul.superfish li {
  background-color:#BDD2FF; /* default background colour */
  border-left:1px solid #fff;
  border-top:1px solid #CFDEFF;
  width:9.45em; 
    /* affects top level menu items only, as nested li elements have width 100%
     * of their ul parent (see .superfish ul rules above)
     */
}
ul.superfish a {
  text-decoration:none;
  color:inherit;
}

/* if link text runs over two or more lines, you will want padding in the
 * anchor element instead of relying on text-indent to provide space. The
 * following disabled rule shows how to style the submenu links in this case.
 * Note that the width plus left and right padding must equal the width set
 * above for the submenu (.superfish ul) 
 */

/*
.superfish ul a {
  width: 7.45em;
  padding: .75em 1em;
  text-indent: 0;
  }
*/

ul.superfish li:hover, 
ul.superfish li.sfHover,
ul.superfish a:focus, 
ul.superfish a:hover, 
ul.superfish a:active {
  background-color:#CFDEFF; /* hover highlight */
  background-image:url(MenuArrow.gif);
  background-position:95% 85%;
  background-repeat:no-repeat;
}
ul.superfish li li {
  background-color:#AABDE6; /* slightly darker shade for nested submenus */
}
ul.superfish li li li {
  background-color:#9AAEDB; /* slightly darker shade for nested submenus */
}
ul.superfish li li li li {
  background-color:#707E9F; /* slightly darker shade for nested submenus */
}
ul.superfish li.sfHover ul {
  opacity:0.95;
}
ul.superfish li ul li ul li ul li,
ul.superfish li ul li ul li,
ul.superfish li ul li,
ul.superfish li {
  background-image:url(MenuArrow.gif);
  background-position:95% 85%;
  background-repeat:no-repeat;
}
ul.superfish .sfPath {
  background:red;
}