/* ============================================================================== 
   File: scr_menu.css
	- Stylesheet for TipTool MENUS 
	- Author: Daniel Hugentobler (DH)
	- created: 19.DEC.2018, taken from scr_generic.css
	- amended: 09.MAR.2019, DH: revised coloring for menu's share-button in top/bottom-corners
	- amended: 20.JUN.2019, DH: profile dummy share-buttons
	- amended: 17.JAN.2021, DH: new media-width-breakpoints for: narrow/medium/wide
	- amended: 23.JAN.2021, DH: more robust approach for menu (display instead of hidden position =>
								the latter got disclosed upon turning the mobile back from landscape to portrait)
   ============================================================================== */

/* ---------------- */
/* generic settings */
/* ---------------- */
nav ul {
	padding: 0;
}
 
nav li {
	list-style-type: none; 			/* no bullets */
	margin: 0;
	padding: 0.5rem;
}

nav a {
	padding: 0.2rem 0.8rem;
}
 
/*ol, ul {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem; 
=> inactive, else strange effects in navi_main upon a:hover in main !
}*/

/* indent for nested lists */
ul ul,
ol ol,
ul ol,
ol ul {
	margin-left: 1.6rem;
}

ol li {
	list-style: decimal inside; 
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

ul li {
	list-style: disc inside; 
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

ul.iconlist li 
{
	list-style: none;
}

/* --------------------
	MAIN navigation menu 
	#navi_main	= nav = top element required for fix positionning but mainly for semantics
	.menu		= top-level ul (would be sufficient for fix positionning)
	.slideout	= ul nested in a li (menu to slide in/out upon hovering)
	-------------------- */
#navi_main {			/* nav: replace it with ul? */
	position: fixed;
	display: block;
	z-index: 6;
	width: 3.2rem;		/* provide enough space for the buttons' circles */
}
.slideout {
	height: auto;
	width: auto;
	margin: 0.3rem 0 0.3rem;	/* vertically align the 2.4rem heighted first li to its 3rem heighted menuLink (=parent) */
}

/* corner-positions of navi_main */
#navi_main.top_left {
	top: 2rem;
	left: 2.4rem;
}
#navi_main.top_right {
	top: 2rem;
	right: 2.4rem;
}
#navi_main.bottom_left {
	bottom: 1.6rem;
	left: 2.4rem;
}
#navi_main.bottom_right {
	bottom: 1.6rem;
	right: 2.4rem;
}

/* if menu is positioned top_left/bottom_left: indent elements residing there */
.indent4Menu {
	padding-left: 3.6rem;
}

/* ------------------------- */
/* NARROW / MEDIUM viewports */
/* ------------------------- */
@media (max-width: 60rem) {
	#navi_main.top_left {
		top: 1rem;
		left: 1rem;
	}
	#navi_main.top_right {
		top: 1rem;
		right: 1rem;
	}
	#navi_main.bottom_left {
		bottom: 1rem;
		left: 1rem;
	}
	#navi_main.bottom_right {
		bottom: 1rem;
		right: 1rem;
	}
	.slideout li {
		line-height: 1.2rem;
	}
}/* end of narrow */

/* align 1.-level-items with and without links */
.menu > li > a,
.byNight .menu > li > a {
	margin: 0;
	padding: 0;
}
.menu > li {
	padding: 0;
	margin: 0;
}
.menu li img {
	background-color: transparent;
}

.slideout li a,
.slideout li span {
	display: block;					/* allow sizing */
	margin: 0;
	padding: 0;
	padding: 0.5rem 0.6rem 0.5rem;	/* fill the li with the link => max. use for max. touch area */
}
.slideout li a {
	color: black; /* onlx for links, not for spans! */
}

.menuLink {
	position: relative;
	display: block;					/* allow sizing */
	min-width: 3rem;
	max-width: 3rem;
	min-height: 3rem;
	max-height: 3rem;
	border-radius: 1.5rem;
	text-align: center;
	-webkit-background-image: linear-gradient(olivedrab, darkolivegreen, black);
	-moz-background-image: linear-gradient(olivedrab, darkolivegreen, black);
	-ms-background-image: linear-gradient(olivedrab, darkolivegreen, black);
	-o-background-image: linear-gradient(olivedrab, darkolivegreen, black);
	background-image: linear-gradient(olivedrab, darkolivegreen, black);
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem #202020;					/* extremely dark gray */
	-moz-box-shadow: 0.2rem 0.2rem 0.4rem #202020;
	box-shadow: 0.4rem 0.4rem 0.6rem #202020;							/* a bit larger for MS IEx */
}
#navi_main .menuLink {
	/* finger-friendly distance */
	margin-bottom: 0.4rem;
}
.byNight .menuLink {
	-webkit-background-image: linear-gradient(forestgreen, black);
	-moz-background-image: linear-gradient(forestgreen, black);
	-ms-background-image: linear-gradient(forestgreen, black);
	-o-background-image: linear-gradient(forestgreen, black);
	background-image: linear-gradient(forestgreen, black);
	-webkit-box-shadow: 0 0 1.8rem #94FF94;								/* light lime glow */	
	-moz-box-shadow: 0 0 1.8rem #94FF94;
	box-shadow: 0 0 1.8rem #94FF94;
}

/* #navi_main is required to override WIDE settings */
.menuLink:hover,
.menuLink:focus,
.menuLink:active
{
	-webkit-background-image: linear-gradient(#8B0000, #5C0000, black); /* dark red to black */
	-moz-background-image: linear-gradient(#8B0000, #5C0000, black);
	-ms-background-image: linear-gradient(#8B0000, #5C0000, black);
	-o-background-image: linear-gradient(#8B0000, #5C0000, black);
	background-image: linear-gradient(#8B0000, #5C0000, black);
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem #202020;					/* extremely dark gray */
	-moz-box-shadow: 0.2rem 0.2rem 0.4rem #202020;
	box-shadow: 0.4rem 0.4rem 0.6rem #202020;							/* a bit larger for MS IEx */
}
.byNight #navi_main .menuLink:active,
.byNight #navi_main .menuLink:focus,
.byNight #navi_main .menuLink:hover {
	-webkit-box-shadow: 0 0 2rem red;	/* red glow */
	-moz-box-shadow: 0 0 2rem red;
	box-shadow: 0 0 2rem red;
}
.menuLink > img, 
.menuLink > a img {
	position: absolute;
	left: 0.65rem;
	top: 0.7rem;
	max-width: 1.5rem;
	max-height: 1.5rem;
}
/* ensure that the link covers the same circle as its parent li */
.menuLink > a {
	display: inline-block;				/* allow sizing */
	min-width: 3rem;
	max-width: 3rem;
	min-height: 3rem;
	max-height: 3rem;
	border-radius: 1.5rem;
}
.menuLink > a {
	background-color: transparent;		/* prevent lime */
}
/* any other list-items */
.menu li {
	position: relative;					/* MUST be so! to allow absolute position of ul within */
	display: block;
	list-style: none;
	white-space: nowrap;				/* do not break the text */
}
.menu ul {
	position: absolute;					/* each ul MUST be ABSOLUTE for its positionning */
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.slideout li {
	-webkit-background-image: linear-gradient(white, lightgray, gray);
	-moz-background-image: linear-gradient(white, lightgray, gray);
	-ms-background-image: linear-gradient(white, lightgray, gray);
	-o-background-image: linear-gradient(white, lightgray, gray);
	background-image: linear-gradient(white, lightgray, gray);
	border: 0.12rem solid gray;
	color: black;
	cursor: auto;
	font-weight: normal;
	margin: 0;
	min-height: 2.4rem;
	max-height: 2.4rem; 
	border-radius: 1.2rem;	/* half-circle; to mach with the menuLink's full circle */
	padding: 0;
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem #202020;					/* extremely dark gray */
	-moz-box-shadow: 0.2rem 0.2rem 0.4rem #202020;
	box-shadow: 0.4rem 0.4rem 0.6rem #202020;							/* a bit larger for MS IEx */
	width: auto;
}
.byNight .slideout li {
	border: 0.12rem solid #404040;	/* extremely dark gray */
	-webkit-background-image: linear-gradient(gray, black);
	-moz-background-image: linear-gradient(gray, black);
	-ms-background-image: linear-gradient(gray, black);
	-o-background-image: linear-gradient(gray, black);
	background-image: linear-gradient(gray, black);
	color: lightgray;
	-webkit-box-shadow: 0 0 1rem gray;								/* gray glow */	
	-moz-box-shadow: 0 0 1rem gray;
	box-shadow: 0 0 1rem gray;
}

/* position all LIST-ITEMS relative to their parent-UL */
.top_left .slideout li {
	margin: 0;
	margin-left: 0.4rem;
	margin-bottom: 0.2rem;
}
.top_right .slideout li {
	margin: 0;
	margin-right: 0.4rem;
	margin-bottom: 0.2rem;
}
.bottom_left .slideout li {
	margin: 0;
	margin-left: 0.4rem;
	margin-top: 0.2rem;
}
.bottom_right .slideout li {
	margin: 0;
	margin-right: 0.4rem;
	margin-top: 0.2rem;
}

.slideout:active > ul,
.slideout:focus > ul,
.slideout:hover > ul {
	-webkit-transition: all 0.6s ease-in-out;		
	-moz-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}
.slideout li:hover,
.slideout li:focus,
.slideout li:active {
	border: 0.12rem solid #8B0000;	/* dark red */
	-webkit-background-image: linear-gradient(#8B0000, #5C0000, black); /* dark red to black */
	-moz-background-image: linear-gradient(#8B0000, #5C0000, black);
	-ms-background-image: linear-gradient(#8B0000, #5C0000, black);
	-o-background-image: linear-gradient(#8B0000, #5C0000, black);
	background-image: linear-gradient(#8B0000, #5C0000, black);
	color: white;
}
.byNight .slideout li:hover,
.byNight .slideout li:focus,
.byNight .slideout li:active {
	border: 0.12rem solid #8B0000;	/* enhances the glow effect! */
	-webkit-box-shadow: 0 0 1rem red;	/* red glow */
	-moz-box-shadow: 0 0 1rem red;
	box-shadow: 0 0 1rem red;
}

/* display 2nd+ level menu-items */
.top_left li > ul {
	top: -0.12rem;		/* compensate parent's border */
	left: 100%;			/* relative to parent-li */
	margin-left: 0;
}
.top_right li > ul {
	top: -0.12rem;		/* compensate parent's border */
	right: 100%;		/* relative to parent-li */
}
.bottom_left li > ul {
	bottom: -0.12rem;	/* compensate parent's border */
	left: 100%;			/* relative to parent-li */
	margin-left: 0;
}
.bottom_right li > ul {
	bottom: -0.12rem;	/* compensate parent's border */
	right: 100%;		/* relative to parent-li */
}

/* ------------------------ */
/*	REACT TO USER ACTION	*/
/* ------------------------ */
.menuLink ul,
.slideout ul {
	display: none;
	/* TRANSITION does not work => due to display-property ??? */
}
.menu li:hover > ul,
.menu li:focus > ul,
.menu li:active > ul {
	display: block;
}

/* override the regular flag */
#nav_item_language a {
	text-align: left;
	padding-left: 0.3rem;		/* position the circular flag into its rounded nav-item */
}
#navi_main .flag {
	/* move the flag up a bit */
	display: inline-block;
	-webkit-transform: translateY(-0.32rem);
	-moz-transform: translateY(-0.32rem);
	-ms-transform: translateY(-0.32rem);
	-o-transform: translateY(-0.32rem);
	transform: translateY(-0.32rem);
	height: 1.6rem;
	width: 1.6rem;
	border-radius: 50%;
}
.byNight #navi_main .flag {
	/* compensate for the optical delusion: move .flag a bit further up to the lighter part of the background */
	-webkit-transform: translateY(-0.4rem);
	-moz-transform: translateY(-0.4rem);
	-ms-transform: translateY(-0.4rem);
	-o-transform: translateY(-0.4rem);
	transform: translateY(-0.4rem);
}
#navi_main .cmd,
#navi_main .flag {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
#navi_main .language {
	padding-right: 0.3rem;		/* sync with the circular flag's position (#nav_item_language a: padding-left) */
	/* move the text up a bit */
	display: inline-block;
	-webkit-transform: translateY(-0.8rem);
	-moz-transform: translateY(-0.8rem);
	-ms-transform: translateY(-0.8rem);
	-o-transform: translateY(-0.8rem);
	transform: translateY(-0.8rem);
}

/* override generic link styles */
/*#navi_main li:active > a,
#navi_main li:focus > a,
#navi_main li:hover > a,
.slide-menu li:active > a,
.slide-menu li:focus > a,
.slide-menu li:hover > a,
.byNight #navi_main li:active > a,
.byNight #navi_main li:focus > a,
.byNight #navi_main li:hover > a,*/
/*.byNight .slide-menu li:active > a,
.byNight .slide-menu li:focus > a,
.byNight .slide-menu li:hover > a*/
.slideout li:hover > a,
.slideout li:focus > a,
.slideout li:active > a
{
	background-color: transparent;	/* prevent olivedrab */
	color: white;
}
.byNight #navi_main ul li a {
	color: white;
}


/* override button-settings */
#hdrSearch {
	display: inline-block;
	background-color: transparent;	/* allow the search-icon to appear above the lawn-image */
	cursor: pointer;
	vertical-align:top;
}
#hdrSearch img {					/* search-icon */
	max-height: 1.8rem;
	max-width: 1.8rem;
}

/* --------------------------------
   SHARE-BUTTONS (for social media)
   placed within the main-menu's ul
   -------------------------------- */
#nav_item_share .btnShare,
#selectChannel .btnShare {
	display: block;
	text-align: center;
	/* override generic menu-item's settings */
	background-color: transparent;
	background-image: none;
	border: none;
	border-radius: 50%;
	max-height: 2.4rem;
	max-width: 2.4rem;
	min-height: 2.4rem;
	min-width: 2.4rem;
}
/* dummy: align text to center/top */
#nav_item_profile .btnShare label {
	vertical-align: super;
}
/* get some distance for narrow/medium viewports */
@media (max-width: 60rem) {
	#nav_item_profile .btnShare .toggle {
		margin-bottom: 1.2rem;
	}
}

#nav_item_share .hide { /* MUST be AFTER #nav_item_share .btnShare to override it */
	display: none;
}
/* share-buttons for invitation: display buttons horizontally */
#selectChannel {
	display: inline-block;
}
#selectChannel .btnShare {
	display: inline-block;
	margin: 0;
	margin-right: 1.2rem;
	margin-bottom: 1.2rem;
}

#nav_item_share .btnShare:active,
#nav_item_share .btnShare:focus,
#nav_item_share .btnShare:hover {
	background-color: transparent;
	/* keep the shadow - yet lighter than for regular menu items */
	-webkit-box-shadow: 0.4rem 0.4rem 0.4rem #202020; /* extremely dark gray */
	-moz-box-shadow: 0.4rem 0.4rem 0.4rem #202020;
	-ms-box-shadow: 0.4rem 0.4rem 0.4rem #202020;
	-o-box-shadow: 0.4rem 0.4rem 0.4rem #202020;
	box-shadow: 0.4rem 0.4rem 0.4rem #202020;
}
.byNight #nav_item_share .btnShare:active,
.byNight #nav_item_share .btnShare:focus,
.byNight #nav_item_share .btnShare:hover {
	-webkit-box-shadow: 0 0 2rem red;	/* red glow */
	-moz-box-shadow: 0 0 2rem red;
	box-shadow: 0 0 2rem red;
}
/* provide a finger-friendly distance */
#navi_main .btnShare {
	margin-bottom: 0.4rem;
}
.btnShare a {
	display: inline-block;     /* allow sizing */
	position: relative;
	max-height: 2.4rem;
	max-width: 2.4rem;
	min-height: 2.4rem;
	min-width: 2.4rem;
	border-radius: 50%;
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem #202020; /* extremely dark gray */
	-moz-box-shadow: 0.2rem 0.2rem 0.4rem #202020;
	-ms-box-shadow: 0.2rem 0.2rem 0.4rem #202020;
	-o-box-shadow: 0.2rem 0.2rem 0.4rem #202020;
	box-shadow: 0.2rem 0.2rem 0.4rem #202020;
}
.btnShare a img {
	position: absolute;
	top: 0.32rem;
	left: 0.32rem;
	max-width: 1.5rem;
	max-height: 1.5rem;
}

/*	INDIVIDUAL COLOR based on the target-app 
	from the target-brand's color to very dark gray */
#nav_item_dummy_facebook a,
#nav_item_facebook a {
	-webkit-background-image: linear-gradient(#3B5998, #404040);
	-moz-background-image: linear-gradient(#3B5998, #404040);
	-ms-background-image: linear-gradient(#3B5998, #404040);
	-o-background-image: linear-gradient(#3B5998, #404040);
	background-image: linear-gradient(#3B5998, #404040);
}
.byNight #nav_item_dummy_facebook a,
.byNight #nav_item_facebook a {
	-webkit-box-shadow: 0 0 1rem cornflowerblue; /* glow */
	-moz-box-shadow: 0 0 1rem cornflowerblue;
	box-shadow: 0 0 1rem cornflowerblue;
}
#nav_item_dummy_linkedIn a img,
#nav_item_linkedIn a img {
	left: 0.4rem;	/* slight adjustment to the right */
}
#nav_item_dummy_linkedIn a,
#nav_item_linkedIn a {
	-webkit-background-image: linear-gradient(#0077B5, #00466B, #404040);
	-moz-background-image: linear-gradient(#0077B5, #00466B, #404040);
	-ms-background-image: linear-gradient(#0077B5, #00466B, #404040);
	-o-background-image: linear-gradient(#0077B5, #00466B, #404040);
	background-image: linear-gradient(#0077B5, #00466B, #404040);
}
.byNight #nav_item_dummy_linkedIn a,
.byNight #nav_item_linkedIn a {
	-webkit-box-shadow: 0 0 1rem dodgerblue; /* glow */
	-moz-box-shadow: 0 0 1rem dodgerblue;
	box-shadow: 0 0 1rem dodgerblue;
}
#nav_item_googlePlus a {
	-webkit-background-image: linear-gradient(#C63D2D, #404040);
	-moz-background-image: linear-gradient(#C63D2D, #404040);
	-ms-background-image: linear-gradient(#C63D2D, #404040);
	-o-background-image: linear-gradient(#C63D2D, #404040);
	background-image: linear-gradient(#C63D2D, #404040);
}
.byNight #nav_item_dummy_googlePlus a,
.byNight #nav_item_googlePlus a {
	-webkit-box-shadow: 0 0 1rem salmon; /* glow */
	-moz-box-shadow: 0 0 1rem salmon;
	box-shadow: 0 0 1rem salmon;
}
#nav_item_dummy_twitter a img,
#nav_item_twitter a img {
	top: 0.5rem;	/* slight adjustment to the right and down */
	left: 0.4rem;
}
#nav_item_dummy_twitter a,
#nav_item_twitter a {
	-webkit-background-image: linear-gradient(#33CCFF, #404040);
	-moz-background-image: linear-gradient(#33CCFF, #404040);
	-ms-background-image: linear-gradient(#33CCFF, #404040);
	-o-background-image: linear-gradient(#33CCFF, #404040);
	background-image: linear-gradient(#33CCFF, #404040);
}
.byNight #nav_item_dummy_twitter a,
.byNight #nav_item_twitter a {
	-wenkit-box-shadow: 0 0 1rem lightblue; /* glow */
	-moz-box-shadow: 0 0 1rem lightblue;
	box-shadow: 0 0 1rem lightblue;
}
#nav_item_dummy_whatsApp a,
#nav_item_whatsApp a {
	-webkit-background-image: linear-gradient(lime, #404040);
	-moz-background-image: linear-gradient(#25D366, #404040);
	-ms-background-image: linear-gradient(#25D366, #404040);
	-o-background-image: linear-gradient(#25D366, #404040);
	background-image: linear-gradient(lime, #404040);
}
.byNight #nav_item_dummy_whatsApp a,
.byNight #nav_item_whatsApp a {
	-webkit-box-shadow: 0 0 1rem lime; /* glow */
	-moz-box-shadow: 0 0 1rem lime;
	box-shadow: 0 0 1rem lime;
}
#nav_item_dummy_email a img,
#nav_item_email a img {
	top: 0.65rem;	/* slight adjustment down */
}
#nav_item_dummy_sms a,
#nav_item_sms a {
	-webkit-background-image: linear-gradient(darkorange, #404040);
	-moz-background-image: linear-gradient(salmon, #404040);
	-ms-background-image: linear-gradient(salmon, #404040);
	-o-background-image: linear-gradient(salmon, #404040);
	background-image: linear-gradient(darkorange, #404040);
}
.byNight #nav_item_dummy_sms a,
.byNight #nav_item_sms a {
	-webkit-box-shadow: 0 0 1rem orange; /* glow */
	-moz-box-shadow: 0 0 1rem orange;
	box-shadow: 0 0 1rem orange;
}
#nav_item_dummy_email a img,
#nav_item_email a img {
	top: 0.65rem;	/* slight adjustment down */
}
#nav_item_dummy_email a,
#nav_item_email a {
	-webkit-background-image: linear-gradient(olivedrab, #404040);
	-moz-background-image: linear-gradient(olivedrab, #404040);
	-ms-background-image: linear-gradient(olivedrab, #404040);
	-o-background-image: linear-gradient(olivedrab, #404040);
	background-image: linear-gradient(olivedrab, #404040);
}
.byNight #nav_item_dummy_email a,
.byNight #nav_item_email a {
	-webkit-box-shadow: 0 0 1rem olivedrab; /* glow */
	-moz-box-shadow: 0 0 1rem olivedrab;
	box-shadow: 0 0 1rem olivedrab;
}
/* override individual colors with dark red */
.slideout .btnShare:active,
.slideout .btnShare:focus,
.slideout .btnShare:hover,
#nav_item_facebook a:active,
#nav_item_facebook a:focus,
#nav_item_facebook a:hover,
#nav_item_linkedIn a:active,
#nav_item_linkedIn a:focus,
#nav_item_linkedIn a:hover,
#nav_item_googlePlus a:active,
#nav_item_googlePlus a:focus,
#nav_item_googlePlus a:hover,
#nav_item_twitter a:active,
#nav_item_twitter a:focus,
#nav_item_twitter a:hover,
#nav_item_whatsApp a:active,
#nav_item_whatsApp a:focus,
#nav_item_whatsApp a:hover,
#nav_item_sms a:active,
#nav_item_sms a:focus,
#nav_item_sms a:hover,
#nav_item_email a:active,
#nav_item_email a:focus,
#nav_item_email a:hover
{
	-webkit-background-image: linear-gradient(#8B0000, #5C0000, black); /* dark red to black */
	-moz-background-image: linear-gradient(#8B0000, #5C0000, black);
	-ms-background-image: linear-gradient(#8B0000, #5C0000, black);
	-o-background-image: linear-gradient(#8B0000, #5C0000, black);
	background-image: linear-gradient(#8B0000, #5C0000, black);
}
.byNight .btnShare a:active,
.byNight .btnShare a:focus,
.byNight .btnShare a:hover,
.byNight #nav_item_facebook a:active,
.byNight #nav_item_facebook a:focus,
.byNight #nav_item_facebook a:hover,
.byNight #nav_item_linkedIn a:active,
.byNight #nav_item_linkedIn a:focus,
.byNight #nav_item_linkedIn a:hover,
.byNight #nav_item_googlePlus a:active,
.byNight #nav_item_googlePlus a:focus,
.byNight #nav_item_googlePlus a:hover,
.byNight #nav_item_twitter a:active,
.byNight #nav_item_twitter a:focus,
.byNight #nav_item_twitter a:hover,
.byNight #nav_item_whatsApp a:active,
.byNight #nav_item_whatsApp a:focus,
.byNight #nav_item_whatsApp a:hover,
.byNight #nav_item_sms a:active,
.byNight #nav_item_sms a:focus,
.byNight #nav_item_sms a:hover,
.byNight #nav_item_email a:active,
.byNight #nav_item_email a:focus,
.byNight #nav_item_email a:hover {
	-webkit-box-shadow: 0 0 1rem darkred;	/* darkred glow */
	-moz-box-shadow: 0 0 1rem darkred;
	box-shadow: 0 0 1rem darkred;
}

/* -------------------------
   other NAVIGATION-ELEMENTS
   -------------------------- */
#nav_item_toctips a {
	font-weight: bold;				/* mark most important menu-item */
}

/* navi_myobject ?????? */
#navi_myobject li {
	line-height: 2rem;
    list-style-type: circle;	/*no effect*/	 /* none;*/ 		/* no bullets */
    display: block; /*inline-block;*/		/* horizontal */
	padding: 0;
	margin: 0;
	margin-right: 0.2rem;
}
#navi_myobject a {
	padding: 0.3rem;
	padding-left: 0.8rem;
	padding-right: 0.8rem;
	border-radius: 1rem;
}
#toolbar {
	margin-top: 0.8rem;
}

.generic_toolbar li a,
.toolbar li a {
	line-height: 2.4rem;
}

.toolbar/*,
#navi_tips #toc_toolbar*/ {			/* prevent override by navi_tips */
	text-align: left;
	padding: 0;
	margin: 0;
}
.toolbar li/*,
#navi_tips #toc_toolbar li*/ {		/* prevent override by navi_tips */
	display: inline-block; 			/* horizontal */
	list-style-type: none; 		/* no bullets */
	padding: 0;
	margin: 0;
}

.toolbar img {
	margin-right: 0.4rem;
}

#highscreen_toolbar,
#widescreen_toolbar {
	padding-left: 0.8rem; 
	padding-bottom: 0.8rem;
}

#navi_tips a {
	padding: 0.2rem;
	padding-top: 0.06rem;		/* prevent overlap in case of line-break */
}

#navi_sitemap li,
#navi_sponsors li, 
#navi_tips li {
	display: block;
	list-style-type: none; 		/* no bullets */
	list-style-position: outside;
	padding: 0;
	margin: 0;
	margin-top: 0.4rem;
}
#navi_sponsors ul li a {		/* no inset */
	padding-left: 0;
}

.breadcrumb,
.breadcrumbGT {
	text-align: left;
	padding: 0;
	margin: 0;
	padding-bottom: 0.4rem;
	margin-bottom: 0.4rem;
}
.breadcrumbGT img {
	max-height: 1.5rem;
	max-width: 1.5rem;
	vertical-align: text-top;
}
.breadcrumb li,
.breadcrumbGT li {
	display: inline; 		    /* horizontal */
	list-style-type: none; 		/* no bullets */
	margin: 0;
	padding: 0;
}
.col_left .breadcrumb a,
.col_right .breadcrumb a,
main .breadcrumb a,
main .breadcrumbGT a,
.main .breadcrumb a,
.main .breadcrumbGT a,
.col_left .breadcrumbGT a,
.col_right .breadcrumbGT a {
	cursor: pointer;				/* hand */
}