@charset "UTF-8";

/**
 * JYAML - Template Framework includes YAML for Joomla!
 *
 * All rights reserved. The JYAML project is a template to manage and
 * configure Joomla!-Templates with the YAML XHTML/CSS Framework
 * - http://www.yaml.de
 *
 * -----------------------------------------------------------------------------
 *
 * @version       $Id$
 *
 * @author        Reinhard Hiebl
 * @copyright     Copyright (C) 2006 - 2012, HieblMedia (Reinhard Hiebl)
 * @license       Creative Commons Attribution 3.0 Unported License
 *                  > http://www.jyaml.de/en/license-conditions.html
 * @link          http://www.jyaml.de
 * @package       JYAML
 * @subpackage    JYAML.Dropdown.Stylesheet
 *
 */

@media all
{

  .dropdown {
    width: 100%;
    overflow: visible;
    float: left;
    display: block;
    position: relative;
    line-height: 0;
    text-align: left;
    font-size: 1em;

    z-index: 800;
  }
  .dropdown:hover {
    z-index: 801;
  }

  .dropdown ul,
  .dropdown li {
    /* reset */
    list-style: none;
    list-style-type: none;
    list-style-image: none;

    margin: 0;
    padding: 0;
    border: 0;
  }

  .dropdown,
  .dropdown ul,
  .dropdown li,
  .dropdown a {
    /* fix some hover issues for all browsers (lost background focus on absolute elements) */
    background:#fff url(../images/blank.gif);
  }

  .dropdown ul {
    position: relative;
    display: inline;
    float: left;
  }

  .dropdown li {
    display:block;
    position: relative; /* important for having right dimensions from beginning */

    float: left; /* LTR */
    font-size:1.0em;
    line-height:1em;
  }

  .dropdown-vertical ul,
  .dropdown-vertical li  {
    display: block;
    float: none;
  }

  .dropdown li.hover,
  .dropdown li:hover {
    /* position: relative; */
    z-index: 857;
    cursor: default;
  }

  .dropdown li a {
    display: block;
    width: 100%;
    float: left;
    font-size:1em;
    cursor: pointer;
  }
  .dropdown li span.item-title {
    display: block;
    width: auto;
  }

  .dropdown .dropitem {
    position: absolute;
    visibility: hidden;

    /* optional fallback? width: 150px; */

    /* defaults (open right) */
    top: 0px;
    bottom: auto;
    left: 100%;
    right: auto;

    z-index: 856;
    width: 100%;
  }
  .dropdown .dropitem .dropitem,
  .dropdown-vertical .dropitem {
    width: auto; /* from view level 2 or vertical always auto width */
  }

  #dropdownSubMenusContainer .dropdown .dropitem {
    width: auto;
    visibility: visible;
    top: 0px;
    bottom: auto;
    left:0px;
    right: auto;
  }

  .dropdown .dropitem ul {
    width: 100%;
  }

  .dropdown-horizontal .viewLevel0 .dropitem {
    /* horizontal level0 (open down by default) */
    top: 100%;
    bottom: auto;
    left: 0px;
    right: auto;
  }
  .dropdown-horizontal .viewLevel1 .dropitem {
    /* horizontal level0 (open right by default) */
    top: 0px;
    bottom: auto;
    left: 100%;
    right: auto;
  }

  .dropdown li:hover > .dropitem,
  .dropdown li a:focus + .dropitem {
     visibility: visible;
  }

  .dropdown .dropitem-content {
    position: absolute;
    top:-32768px;
    left:-32768px;
  }
  .dropdown li:hover > .dropitem > .dropitem-content,
  .dropdown li.hover > .dropitem > .dropitem-content,
  .dropdown li a:focus + .dropitem > .dropitem-content,
  .dropdown-linear .viewLevel1 .dropitem .dropitem-content,
  #dropdownSubMenusContainer .dropitem-content,
  .js .dropdown .dropitem-content {
    position: static;
    top:auto;
    left:auto;
  }

  .dropdown .dropitem li {
    width: 100%;
  }

  .dropdown li li .dropitem {
    top: 0px;
    bottom: auto;
    left: 100%;
    right: auto;
  }

  .dropdown-linear li,
  .dropdown-linear li.hover,
  .dropdown-linear li:hover {
    position: static !important;
  }

  .dropdown-linear .dropitem li {
    width: auto;
    float: left;
  }

  .dropdown-linear .viewLevel1 .dropitem {
    position: relative;
    visibility: visible;
    left: 0;
    top: 0;
  }
  .dropdown-linear .viewLevel1 .dropitem li {
    width: 100%;
  }

  /**
   * @Experimental: Specail mix with important rules and specificity to Inherit parent direction
   */
  .dropdown .dropitem-up {
     top: auto !important; bottom: 100% !important;
     left: 0px !important; right: auto !important;
  }

  .dropdown .dropitem-right {
     top: 0px !important; bottom: auto !important;
     left: 100% !important; right: auto !important;
  }

  .dropdown .dropitem-left {
     top: 0px !important; bottom: auto !important;
     left: auto !important; right: 100% !important;
  }

  .dropdown .dropitem-down {
    top: 100% !important; bottom: auto !important;
    left: 0px !important; right: auto !important;
  }

  .js #dropdownSubMenusContainer .dropdown .dropitem {
    top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important;
  }


  /* debug/test */
  /*
  .dropdown ul li { background: red; }
  .dropdown ul li.parent ul {
    border:1px solid #000;
    border-top:0;
    padding:0 10px 10px 10px;
    margin:0 -11px -11px -11px;
  }
  .dropdown ul li ul li { background: green; }

  */

  #dropdownSubMenusContainer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: visible;
    z-index: 900;
    background: transparent;
  }

  .dropdownHelperContainer {
    display: none;
    position: absolute;
    overflow: hidden;
    background: transparent;
  }

}