/*
  dunkelgrün  = #003333
  hellgrün    = #99CC99
  orange      = #FF9900
  cyan (Menu) = #009999
*/
/*
 * Sample CSS for adding new styles to the /style directory of the Superfish library.
 * 
 * Instructions:
 *
 * 1. Replace the mira (below) with the name of the new style.
 *    For example, if the style name is drupal, the class will be sf-style-drupal .
 *
 * 2. Save the file as CSS with the style name as its name.
 *    For example, if the style name is drupal the file will be drupal.css and therefore
 *    libraries/superfish/style/drupal.css.
 *
 * 3. That's it! go to the block conifguration, use the new style, make sure everything is right :)
 *
 */

.sf-vertical,
.sf-vertical li {
  width: 100%;
}

.sf-menu.sf-style-mira {
  float: left;
  background: #FF0000;
}

.sf-vertical li:hover > ul,
.sf-vertical li.sfHover > ul {
  left: 12em;
  top: 0;
  background: #00FF00;
}

ul.menu li {
  margin: 0 0 0 0.2em; /* LTR */
}

.sf-menu.sf-style-mira ul {
  padding-left: 0;
}


.sf-menu.sf-style-mira a,
.sf-menu.sf-style-mira span.nolink {
  font-size: 1em;
  color: #FF99FF;
  text-decoration:none;
  padding: 0.55em 0.2em; /* erste Werte Abstand nach oben, zweiter Abstand links  */
}

/*
.sf-menu.sf-style-mira a.sf-with-ul,
.sf-menu.sf-style-mira span.nolink.sf-with-ul {
  padding-right: 2.25em;
}

.sf-menu.sf-style-mira.rtl a.sf-with-ul,
.sf-menu.sf-style-mira.rtl span.nolink.sf-with-ul {
  padding-left: 2.25em;
  padding-right: 1em;
}
*/


.sf-menu.sf-style-mira span.sf-description {
  color: #0000ff;
  display: block;
  font-size: 0.833em;
  line-height: 1.5;
  margin: 5px 0 0 5px;
  padding: 0;
}
/*
.sf-menu.sf-style-mira.rtl span.sf-description {
  margin: 1px 1px 0 0;
}
*/

/* Farbe erste Menuebene */
.sf-menu.sf-style-mira li,
.sf-menu.sf-style-mira.sf-navbar {
  background: #003333;
}
/* ENDE Farbe erste Menuebene */

/* Farbe zweite Menuebene */
.sf-menu.sf-style-mira li li {
  background: #009999;
}
/* ENDE Farbe zweite Menuebene */

.sf-menu.sf-style-mira li li li {
  background: #d0d0d0;
}

/* aufgeklapter Menüpunkt */
.sf-menu.sf-style-mira li:hover {
  background: #FF9900;
  outline: 0;
}

/* Drüberfahren */
.sf-menu.sf-style-mira a:hover {
  color:#000000;
  background: #FF9900;
  outline: 0;
}

/* Klicken */
.sf-menu.sf-style-mira a:active {
  color:#000000;
  background: #FF0000;
  outline: 0;
}

/*
.sf-menu.sf-style-mira li.sfHover {
  color:#000000;
  background: #FF0000;
  outline: 0;
}


/* Activer Menüpunkt */
/*
.sf-menu.sf-style-mira a:focus {
  color:#000000;
  background: #FF0000;
  outline: 0;
}
*/

/*
.sf-menu.sf-style-mira li.sfHover,
.sf-menu.sf-style-mira a:focus,
.sf-menu.sf-style-mira a:hover,
.sf-menu.sf-style-mira a:active,
.sf-menu.sf-style-mira span.nolink:hover
{
  color: #000000;
  background: #FF9900;
  outline: 0;
}
*/


/* Untermenü Schatten */
.sf-menu.sf-style-mira li:hover > ul,
.sf-menu.sf-style-mira li.sfHover > ul {
  background-color: #FF0000;
  left: 160px;
  top: 5px;
}
/* ENDE Untermenü Schatten */


.sf-menu.sf-style-mira .sf-sub-indicator {
  background-image: url('../images/arrows-777777.png');
}



/*
div.sf-accordion-toggle.sf-style-mira a {
  background: #f0f0f0;
  color: #0000ff;
  padding: 1em;
}
div.sf-accordion-toggle.sf-style-mira a.sf-expanded,
.sf-menu.sf-style-mira.sf-accordion li.sf-expanded {
  background-color: #c0c0c0;
}
div.sf-accordion-toggle.sf-style-mira a.sf-expanded,
.sf-menu.sf-style-mira.sf-accordion li.sf-expanded > a,
.sf-menu.sf-style-mira.sf-accordion li.sf-expanded > span.nolink {
  font-weight: bold;
}
.sf-menu.sf-style-mira.sf-accordion li a.sf-accordion-button {
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 499;
}
.sf-menu.sf-style-mira.sf-accordion li li a,
.sf-menu.sf-style-mira.sf-accordion li li span.nolink {
  padding-left: 2em;
}
.sf-menu.sf-style-mira.sf-accordion li li li a,
.sf-menu.sf-style-mira.sf-accordion li li li span.nolink {
  padding-left: 3em;
}
.sf-menu.sf-style-mira.sf-accordion li li li li a,
.sf-menu.sf-style-mira.sf-accordion li li li li span.nolink {
  padding-left: 4em;
}
.sf-menu.sf-style-mira.sf-accordion li li li li li a,
.sf-menu.sf-style-mira.sf-accordion li li li li li span.nolink {
  padding-left: 5em;
}
.sf-menu.sf-style-mira.rtl.sf-accordion li li a,
.sf-menu.sf-style-mira.rtl.sf-accordion li li span.nolink {
  padding-left: auto;
  padding-right: 2em;
}
.sf-menu.sf-style-mira.rtl.sf-accordion li li li a,
.sf-menu.sf-style-mira.rtl.sf-accordion li li li span.nolink {
  padding-left: auto;
  padding-right: 3em;
}
.sf-menu.sf-style-mira.rtl.sf-accordion li li li li a,
.sf-menu.sf-style-mira.rtl.sf-accordion li li li li span.nolink {
  padding-left: auto;
  padding-right: 4em;
}
.sf-menu.sf-style-mira.rtl.sf-accordion li li li li li a,
.sf-menu.sf-style-mira.rtl.sf-accordion li li li li li span.nolink {
  padding-left: auto;
  padding-right: 5em;
}
.sf-menu.sf-style-mira ul.sf-megamenu li.sf-megamenu-wrapper ol,
.sf-menu.sf-style-mira ul.sf-megamenu li.sf-megamenu-wrapper ol li {
  margin: 0;
  padding: 0;
}
.sf-menu.sf-style-mira ul.sf-megamenu li.sf-megamenu-wrapper a.menuparent,
.sf-menu.sf-style-mira ul.sf-megamenu li.sf-megamenu-wrapper span.nolink.menuparent {
  font-weight: bold;
}
.sf-menu.sf-style-mira ul.sf-megamenu li.sf-megamenu-wrapper {
  background: #c0c0c0;
}
.sf-menu.sf-style-mira ul.sf-megamenu li.sf-megamenu-wrapper li {
  background: transparent;
}
.sf-menu.sf-style-mira ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
  display: inline;
  float: left;
}
.sf-menu.sf-style-mira.rtl ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
  float: right;
}
*/