@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: $Id$
 *
 * @package     JYAML
 * @subpackage  JYAML.Dropdown.Stylesheet
 *
 * @author      Reinhard Hiebl <reinhard@hieblmedia.com>
 * @copyright   Copyright (C) 2006 - 2016, HieblMedia (Reinhard Hiebl)
 * @license     http://www.jyaml.de/en/license Creative Commons Attribution 3.0
 * @link        http://www.jyaml.de
 */

@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 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;
		min-width: 100%;
	}
	.dropdown .dropitem .dropitem,
	.dropdown-vertical .dropitem {
		min-width: inherit;
		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;
	}

	#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;
	}

}
