/* style_droplist-flyout.css ================================== */
/* Function:  Styles for Drop Down List Menue                   */
/*                                                              */
/* This menu is copyright protected!                            */
/*                                                              */
/* You may use it only in templates and designs which are       */
/* delivered together with the SENTRA CMS software package.     */
/*                                                              */
/* For any other usage you need the permission of Stu Nichols.  */
/*                                                              */
/* This is an adapted version of the original version which was */
/* developed by Stu Nichols. The original version of this       */
/* stylesheet and the associated (x)html is available at        */
/* http://www.cssplay.co.uk/menus/droplist-flyout.html          */
/* ============================================================ */
.collector {
	.ddl {
		width:{{img_eyecatcher_width}}px;
		background: {{ddlmenu_bg}};
		z-index: 35;
	}
}
.shellcentered {
	.ddl {
		width: {{pagewidth}} + 2 * {{colborderwidth}};
	}
}
.ddl {
	float:left;
	background: {{ddlmenu_bg}};
	height: {{ddlmenu_height}}px;
	line-height: {{ddlmenu_height}}px;
	font-size:{{NavifontsizeSel}};
	font-family:"arial, sans-serif";
	position:relative;
	border:1px solid #aaa;
	z-index:35;
	-o-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
	-icab-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
	-khtml-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
	-o-border-radius: 6px 6px 0 0;
	-icab-border-radius: 6px 6px 0 0;
	-khtml-border-radius: 6px 6px 0 0;
	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-top-right-radius: 6px;
	-webkit-border-top-left-radius: 6px;
	border-radius: 6px 6px 0 0;

	ul {
		float:left;
		padding:0;
		margin:0;
		list-style:none;
	}
	/* Topics area dropping down */
	ul li div {
		position:absolute;
		left:-9999px;
		top:-9999px;
		background: {{ddl-div_bg_url}};
		border:1px solid #aaa;
		border-top-color:#ddd;
		padding-bottom:6px;
		-o-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
		-icab-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
		-khtml-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
		box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
		-o-border-radius: 0 0 6px 6px;
		-icab-border-radius: 0 0 6px 6px;
		-khtml-border-radius: 0 0 6px 6px;
		-moz-border-radius: 0 0 6px 6px;
		-webkit-border-bottom-right-radius: 6px;
		-webkit-border-bottom-left-radius: 6px;
		border-radius: 0 0 6px 6px;
	}
	ul li div ul {
		width:{{ddlmenucol_width}}px;
		float:left !important;
	}

	ul li {
		clear: none !important;
		left: 0  !important;
		float:left !important;
		background: {{ddl-mt-bg_url}};
	}
	ul li a {
		color: {{ddl_mt_color}};
		display:block;
		padding:0 11px;
		float:left !important;
		line-height:{{ddlmenu_height}}px;
		text-decoration:none;
		font-weight:bold;
	}
	ul li.current {
		background: {{ddl-mtmenu_li_current_url}};
	}
	ul li ul li.current {
		background: {{ddl-topic-menu_li_current_url}};
		padding: 0;
		margin: 0;
		width:{{ddlmenucol_width}}px;
		a.current {
			color: {{tp_color_hvr}} !important;
			font-weight: bold;
			text-decoration:underline overline;
			border: 3px solid #fff;
		}
	}
	ul li ul li.current ul li.current {
		background: {{ddl-subtopic-menu_li_current_url}};
		padding: 0;
		margin: 0;
		width:{{ddlmenucol_width}}px;
		a.current,
		a:hover {
			color: {{stp_color_hvr}};
			font-weight: bold;
			text-decoration:underline overline;
			border: 3px solid #fff;
		}
	}
	/* SubTopics */
	ul ul ul li {
		background: {{ddl-stpc_bg_url}};
		padding:0;
		width:{{ddlmenucol_width}}px;
		text-indent: {{ddl.text-indent}};
		line-height: {{ddlmenu_height}}px;
		font-weight:normal;
		a {
			color:{{stp_color}}!important;
		}
		a:hover {
			color:{{stp_color_hvr}}!important;
			text-decoration:underline overline;
			border: 3px solid #fff;
		}

	}
	/* current maintopic */
	ul li a.current {
		background:{{ddl-mt.current.bg_url}};
	}
	ul li a.fly {
		background: {{ddl-mt-a.fly_bg_url}};
	}
	/* Topics (2. level)*/
	ul ul li {
		a {
			color: {{tp_color}};
			padding:0;
			width:{{ddlmenucol_width}}px;
			text-indent: {{ddl.text-indent}};
			line-height: {{ddlmenu_height}}px;
			font-weight:normal;
			white-space: nowrap;
		}
		a:hover {
			color: {{tp_color_hvr}} !important;
		}
		a.fly {
			background: {{ddl-topic-a.fly_bg_url}};
		}
		h4 {
			padding:8px 0 4px 0;
			margin:0;
		}
		a {
			padding:0;
			width:{{ddlmenucol_width}}px;
			text-indent: {{ddl.text-indent}};
			line-height: {{ddlmenu_height}}px;
			font-weight:bold;
			font-size:14px;
		}
	}

	/* Topics && Subtopics background on hover */
	ul li a:hover {
		color:{{ddl_mt_color_hvr}};
		background:{{ddl-topic-hover_bg_url}};
	}
	ul li:hover > a {
		background:{{ddl-topic-hover_bg_url}};
	}

	ul .fourCol:hover div {
		left:-1px;
		top:{{ddlmenu_height}}px;
		width:{{ddlmenucol_width}}px * 4;
	}

	ul .threeCol:hover {
		position:relative;
	}
	ul .threeCol:hover div {
		left:-1px;
		top:{{ddlmenu_height}}px;
		width: {{ddlmenucol_width}}px * 3;
	}

	ul .twoCol:hover {
		position:relative;
	}
	ul .twoCol:hover div {
		left:-1px;
		top:{{ddlmenu_height}}px;
		width: {{ddlmenucol_width}}px * 2;
	}

	ul .oneCol:hover {
		position:relative;
	}
	ul .oneCol:hover div {
		left:-1px;
		top:{{ddlmenu_height}}px;
		width:{{ddlmenucol_width}}px;
	}

	ul :hover div ul ul {
		position:absolute;
		left:-9999px;
		top:-9999px;
	}
	/* Subtopics flying out */
	ul :hover div ul .fly:hover {
		position:relative;
	}
	ul :hover div ul .fly:hover ul {
		left:{{ddlmenucol_width}}px;
		top:-7px;
		background:{{ddl-stpc_ul.bg_url}};
		border:1px solid #aaa;
		padding:6px 0;
		-o-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
		-icab-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
		-khtml-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
		box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
		-o-border-radius: 6px;
		-icab-border-radius: 6px;
		-khtml-border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
	}

	ul :hover div ul .fly:hover ul ul {
		left:-9999px;
		top:-9999px;
	}

	ul :hover div ul .fly:hover ul .fly:hover ul {
		left:{{ddlmenucol_width}}px;
		top:-7px;
		background:#fff;
		border:1px solid #aaa;
	}

	table {
		border-collapse:collapse;
		width:0;
		height:0;
		margin-bottom:-1px;
	}
}
