/* ################################################################ */
/* ###### footer > enthält alle Knoepfe, Menues und das Logo ###### */
/* ################################################################ */

#footer{
	position: fixed;
	padding: 0;
	height: 6.5%;   /* important figure */
	height: 6.5vmin; /* important figure */
	bottom: 7%;  /* important figure */
	bottom: 7vmin; /* important figure */
	left: 50%;
	width: 90%;  /* changes require to correct margin-left! */
	margin-left: calc(90%/-2); /* Negative half of width! */
	border-radius: 6px;
	border-radius: 0.5vw;
	box-shadow: 2px 2px 3px black;
}

/* ############################################### */
/* ########### ALLGEMEIN menue Bereich ########### */
/* ############################################### */

#footer_menueZone {
	float: left;
	width: 80%;  /* relative to width of total footer */
	background: rgba(20,20,20,1);
	height: 100%;
	background-color: rgba(12,12,12,1);
	padding-left: 0.5vw;
	border-radius: 0.5vw 0px 0px 0.5vw; /* links runde Ecken; rechts nicht [dort beginnt buendig das my!WIND Logo!] */
}

#footer_buttons{  /* >>> area that is occupied by ALL buttons <<< */
	margin: auto 0;
	padding: 0px;
	height: 100%;
}

/* ######################################### */
/* ########### MENUE dropup list ########### */
/* ######################################### */

/* dropup rollt aus Footer-Leiste nach oben */

.dropup-menu-type1-parent { position: relative; }

.dropup-menu-type1 { 
	visibility: hidden; /* hides sub-menu */
	opacity: 0;
	position: absolute;
	padding: 0vh 0vw 0px 1vw; /* oben rechts unten links */
	display: block;
  	bottom: 6.5vmin; /* move menue field above footer */
	left: 0;
	width: calc(100% - 1vw);  /* Korrektur, weil Menü-Einträge ein 1vw nach rechts eingeschoben sind */
	background: rgba(255,255,255,0);
 	transform: translateY(2em);
	z-index: -1;
	transition: all 0.3s ease-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
	box-shadow: 2px 2px 3px black;
}

.dropup-menu-type1-parent:hover .dropup-menu-type1 {
	visibility: visible; /* shows sub-menu */
	background: rgba(255,255,255,1);
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
	z-index: 999;
	transform: translateY(0%);
	transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}

.dropup-menu-type1 a:link { color: #333333; }
.dropup-menu-type1 a:visited { color: #333333; }
.dropup-menu-type1 a:active { color: #333333; }
.dropup-menu-type1 a:hover { color: #0072CE; }


/* ############################################### */
/* ########### MENUE BUTTONS in footer ########### */
/* ############################################### */

#footer_buttons .button, #footer_buttons .home_button_placeholder{ /* this is each button (not the link therein) */
	list-style: none;
	float: left;
	font-size: 140%;
	font-size: 1.2vw;
	height: 100%;
	padding: 0px 2vw 0px 2vw;
	background: rgba(12,12,12,1);
 	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
	color: #cccccc;
}

#footer_buttons .button:hover{ /* Button-Flaeche, wenn mouseover */
	background: rgba(52,52,52,1);
	color: white;
}
#footer_buttons .home_button_placeholder{ /* Schaltfläche NICHT aufhellen bei Mouseover; nur Home Logo (siehe unten) */
	background: rgba(12,12,12,1);
}

/* ###########  links inside buttons ########### */
#footer_buttons .button a{  /* Button Hyperlink-Design: Button Text */
	display: block;
	text-decoration: none;
}

/* ########################################################## */
/* ########### menue button reaction at mouseover ########### */
/* ########################################################## */


/* menu buttons inside menu bar, but from right */

#footer_buttons .right{
	float: right;
	right: 0px;
	margin-right: 2px;
	border-right: none;
	border-left: 1px solid rgba(0,0,0,0.3);
}

/* #################################### */
/* ########### HOME  button ########### */
/* #################################### */

.homeButton{
	padding: 0px 8px 0px 14px;
	border: none;
	background: none;
}

.homeButton a{
	opacity: 0.8;
	width: 2.5vw;
	height: 100%;
 	display: flex;
	align-items: center;
	justify-content: center;
}

.homeButton:hover{
	background: none;
}
.homeButton a:active{
	background: none; decoration: none;
}

.homeButton a:hover{
	opacity: 1;
}

.homeButton-HoverOpacity {
	opacity: 0.8;
}
.homeButton-HoverOpacity:hover {
	opacity: 1;
}

/* #################################### */
/* ########### my!WIND logo ########### */
/* #################################### */

#footer_logo{   /* white area for logo */
	float: right;
	background: white;
	width: calc(20% - 0.5vw);  /* relative to width of footer (i.e. 0.5 vw to take rounded corners of footer into account; "padding" to prevent buttons covering them - see above!) */
	height: 100%;
	text-align: center;
 	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0px 6px 6px 0px;
	border-radius: 0vw 0.5vw 0.5vw 0vw; /* rechts runde Ecken; links nicht [dort beginnt buendig das Menue!] */
}

#footer_logo img{  /* my!WIND logo <image> settings */
	width: 80%;   /* svg file size: 413 x 103 px */
	height: 80%;
	margin: 0% auto;
}

/* ############################################# */
/* ########### icons für Menueleiste ########### */
/* ############################################# */

#footer_menueZone #notifications{  /* kleine Icons zum Anklicken */
	float: right;
	width: auto;
	padding: 0px;
	overflow: hidden;
	height: 100%;
 	display: flex;
	align-items: center;
	justify-content: center;
}

#footer_menueZone #notifications li:hover{  /* Zucken beim mouse-over */
	margin-top: -1px;
}

#footer_menueZone #notifications li{
	margin-right: 12px;
	float: left;
	width: auto;
	padding: 0px;
	height: 32px;
	list-style: none; /* no bullet points in front of list items */
}

.notificationIcon span{
	position: absolute;
	display: none;
	font-size: 12px;
	color: white;
	bottom: 7vmin;

	width: 150px;
	border: 1px solid #333333;
	border-radius: 3px;
	padding: 5px;
	margin-left: -70px; /* entire box is moved 70px to the left (relative to button position) */
	background: rgba(0,0,255,0.4);
}

a.notificationIcon:hover span{
	display: block;
}