/*
	v1.3.4, 2016-10-16, tdogan

	Cms4d.FMenu
	navigierbares fluid Sitemapmenu

	©2015 Tanyel Dogan, alle Rechte vorbehalten

	HINWEIS:
	Ab v1.3.3 wird der komplette Zeichensatz fontawesome 4.0.3. verwendet (aus icomoon auch für opera mobile).
	Die Positionen in der Zeichentabelle sind neu und auch die UTF-Codes
*/
/*box model*/
.cms4d_fmenu_container, .cms4d_fmenu_container *{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.cms4d_fmenu_container{
	width:100%;
	float:left;
	clear:both;
	position:relative;
	z-index:1000;
	/*Im Normalzustand hat das Menü eine fette Linie open, die den Container mit dem
	Öffnen Button verbindet.*/
/*	border-top:10px solid rgb(153,153,153);*/
	color:black;
	font-family:roboto2014_condensed_light, Arial, 'Arial Unicode MS', Helvetica, sans-serif;
	font-size:17px;
	line-height:19px;
}
.cms4d_fmenu{
	/*Dieser container sogt dafür, dass das gesamte Menü absolute über dem Seiteninhalt schwebt.
	Er wird auch dazu verwendet den gesamten Menüinhalt bei open/close animiert ein- und auszublenden.*/
	position:absolute;
	width:100%;
	height:0px;
	left:0px;
	overflow:hidden;
}
	/*per JS wird in geöffnetem Zustand eine Zusatzklasse gesetzt, die Höhe und Überlauf des containers normalisiert.*/
	.cms4d_fmenu_container.is_open .cms4d_fmenu{
		height:auto;
		overflow:visible;
	}
.cms4d_fmenu_content{
	/*Dieser Container beinhaltet den eigentlichen Menüinhalt. Er wird zum Ausmessen des
	gesamten Menüinhaltes header/body/footer herangezogen.*/
	width:100%;
	float:left;
	clear:both;
	position:relative;
	-webkit-box-shadow:0px 5px 5px 0px rgba(0,0,0,0.8);
	box-shadow:0px 5px 5px 0px rgba(0,0,0,0.8);
}



.cms4d_fmenu_head{
	width:100%;
	min-height:50px;
	float:left;
	clear:both;
	position:relative;
	color:white;
	background-color:rgb(102,102,102);
	padding:0 50px 0 50px;
	text-align:center;
}
	.cms4d_fmenu_head .btn{
		position:absolute;
		width:40px;
		height:40px;
		padding:10px;
		top:5px;
		cursor:pointer;
	}
	.cms4d_fmenu_head .btn:before{
		/*icon-arrow-left*/
		content:'\f060';
		font-family:'fontawesome';
		font-size:20px;
		line-height:20px;
	}
		.cms4d_fmenu_head .btn.back{
			left:5px;
		}
	.cms4d_fmenu_head .btn.act{
		right:5px;
	}
		.cms4d_fmenu_head .btn.act:before{
						/*icon-file*/
						/*content:'\e613';*/
			/*icon-file*/
			content:'\f15b';
			color:rgb(255,204,0);
		}
	.cms4d_fmenu_head .ccol{
		/*außer bei der ROOT-Gruppe füllt der Titel immer die volle Innenbreite aus.*/
		display:block;
		position:relative;
		max-width:100%;
		padding:5px 0 0 0;
		cursor:pointer;
	}
	.cms4d_fmenu_head .ccol:before{
		/*icon-home*/
		content:'\f015';
		font-family:'fontawesome';
		/*Nur bei ROOT einblenden s.u.*/
		/*display:inline-block;*/
		display:none;
		position:absolute;
		font-size:20px;
		left:-24px;
		top:16px;
	}
		.cms4d_fmenu_head .ftitle{
			font-family:roboto2014_condensed_regular, Arial, 'Arial Unicode MS', Helvetica, sans-serif;
			width:100%;
			display:inline-block;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
			line-height:20px;
			padding-top:10px;
			padding-bottom:10px;
		}

	/*Wird die ROOT-Gruppe angezeigt, werden einige Element ein/ausgeblendet*/
	.cms4d_fmenu.is_root_group .cms4d_fmenu_head .btn.back{
		display:none;
	}
	.cms4d_fmenu.is_root_group .cms4d_fmenu_head .ccol{
		/*nur inline zentriert, damit das Icon Home direkt am Text steht.*/
		display:inline-block;
		/*04.07.2014, dogan
		ab 1.3 ist auf dem title der ROOT-Gruppe eine Linkfunktion zur Homepage. Dadruch kann ggf. der
		Menüpunkt Home aus der Navigation ausgespart werden. Der Cursor wird deshalb auf pointer belassen.*/
		/*cursor:default;*/
	}
	.cms4d_fmenu.is_root_group .cms4d_fmenu_head .ccol:before{
		display:inline-block;
	}



.cms4d_fmenu_body{
	width:100%;
	float:left;
	clear:both;
	position:relative;
	background-color:rgb(102,102,102);
}
	/*Die Gruppencontainer stapeln sich durch negative margin alle an 0,0 übereinander*/
	.cms4d_fmenu_group{
		width:100%;
		float:left;
		position:relative;
		margin-right:-100%;
		left:100%;
		display:none;
	}
		.cms4d_fmenu_group.on{
			left:0px;
			display:block;
		}



.cms4d_fmenu_footer{
	width:100%;
	float:left;
	clear:both;
	position:relative;
	padding:10px 20px 20px 20px;
	min-height:40px;
	/*border-bottom-left-radius:40px;
	border-bottom-right-radius:40px;*/
	background-color:rgb(102,102,102);
}



/*--- Buttons ---*/
/*Der äußere DIV.fcol dient nur zur Steuerung des Layoutflusses und des paddings.*/
.fcol{
	width:50%;
	float:left;
	position:relative;
	overflow:hidden;
	padding:0 5px 10px 5px;
}
	.cms4d_fmenu .fcol:nth-child(2n-1){
		/*Sicherstellen, dass bei unterschiedlich hohen Buttons der Umbruch vor jedem dritten Button erfolgt 1,3,5,7,9...*/
		clear:left;
	}
	/*Wenn es in einer Gruppe nur einen Button gibt, dann diesen immer über die volle Breite ziehen*/
	.cms4d_fmenu .fcol.only{
		width:100%;
	}
	/*sichtbarer Button*/
	.cms4d_fmenu .fbtn{
		width:100%;
		float:left;
		clear:both;
		min-height:42px;
		background-color:rgb(230,230,230);
		border:1px solid rgb(80,80,80);
		border-radius:5px;
	}
		.cms4d_fmenu .fcol.act .fbtn{
			background-color:rgb(255,230,180);
		}
		.cms4d_fmenu .fcol.on .fbtn{
			background-color:rgb(255,204,0);
		}
		/*Hat der Knoten einen eigene Hyperlink, muss links Platz für das Icon freigehalten werden.
		Dieses wird durch den innenliegenden a:before erzeugt s.u.*/
		.cms4d_fmenu .fcol.hashref .fbtn{
			padding-left:30px;
		}
		/*Hat der Knoten noch Kindern, dann muss rechts ein Bereich für den Pfeilbutton freigehalten werden.
		Um die beiden Bereiche für touch-Displays deutlicher zu trennen,
		wird mehr padding gegeben, als der fcbtn breit ist.*/
		.cms4d_fmenu .fcol.hascn .fbtn{
			padding-right:60px;
		}
	/*Label*/
	.cms4d_fmenu .flbl{
	}
		.cms4d_fmenu .flbl span{
			display:inline-block;
			cursor:pointer;
			padding:10px 5px 8px 10px;
			width:100%;
			position:relative;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}
			.cms4d_fmenu .fcol.hashref .flbl span{
				padding-left:0;
			}
			.cms4d_fmenu .fcol.hascn .flbl span{
				padding-right:0;
			}
		/*Hyperlink und Icon*/
		.cms4d_fmenu .flbl a{
			display:block;
			color:black;
			text-decoration:none;
			position:relative;
		}
			.cms4d_fmenu .flbl a:before{
				/*icon-file-text*/
				content:'\f15c';
				font-family:'fontawesome';
				color:rgb(102,102,102);
				display:inline-block;
				line-height:41px;
				position:absolute;
				width:30px;
				height:100%;
				left:-30px;
				top:0;
				padding-left:10px;
			}

	/*opt. Pfeilbutton -> Untergruppe*/
	.cms4d_fmenu .fcbtn{
		display:block;
		cursor:pointer;
		width:40px;
		height:40px;
		padding:5px;
		position:absolute;
		right:5px;
		top:1px;
	}
		.cms4d_fmenu .fcbtn > span{
			display:block;
			position:relative;
			width:100%;
			height:100%;
			overflow:hidden;
			border-radius:80px;
			background-color:rgb(153,153,153);
		}
			.cms4d_fmenu .fcbtn > span:before{
				/*icon-arrow-right*/
				content:'\f061';
				font-family:'fontawesome';
				color:white;
				font-size:20px;
				line-height:20px;
				position:absolute;
				left:7px;
				top:4px;
			}

		/*Buttons footer*/
		.cms4d_fmenu_footer .btn{
			font-family:'fontawesome';
			display:block;
			width:40px;
			height:40px;
			overflow:hidden;
			float:left;
			position:relative;
			border-radius:40px;
			background-color:rgb(153,153,153);
			cursor:pointer;
		}
			.cms4d_fmenu_footer .btn:before{
				color:white;
				font-size:28px;
				line-height:28px;
				position:absolute;
				left:9px;
				top:5px;
							/*icon-remove*/
							/*content:'\e60b';*/
				/*icon-remove*/
				content:'\f00d';
			}
			.cms4d_fmenu_footer .btn.close{
				float:right;
			}
			.cms4d_fmenu_footer .btn.back{
				/*mittig*/
				position:absolute;
				left:50%;
				margin-left:-20px;
			}
				.cms4d_fmenu_footer .btn.back:before{
								/*icon-arrow-left*/
								/*content:'\e658';*/
					/*icon-arrow-left*/
					content:'\f060';
					left:8px;
				}
			.cms4d_fmenu_footer .btn.home{
				float:left;
			}
				.cms4d_fmenu_footer .btn.home:before{
								/*icon-home*/
								/*content:'\e612';*/
					/*icon-home*/
					content:'\f015';
					left:7px;
				}
		/*Wird die Root-Gruppe angezeigt, dann einige Buttons ausblenden*/
		.cms4d_fmenu.is_root_group .cms4d_fmenu_footer .btn.home{
			display:none;
		}
		.cms4d_fmenu.is_root_group .cms4d_fmenu_footer .btn.back{
			display:none;
		}