/**********************************************************************
* CSS menu formatting for the .menuLevel1 element
* The main menu is formatted (.menuLevel1) and dropdowns (menuButton)
**********************************************************************/
.menuLine {
	display: flex;
	flex-direction:row;
	background-color: lightgray;
	padding: 0.2em 0.2em 0.2em 0.2em; /* top, right, bottum, left  */
	border-bottom: 0.3em solid blue;
	position: sticky;	/* keeps menu visible when scrolling  */
	top: 0;				/* scrolls to top  */
	overflow: auto;		/* scrol horizontal possible */
}
.menuText{
	padding: 0.3em 0.2em 0.2em 0.2em; /* top, right, bottum, left  */
	font-size: 2em;
	font-weight: bold;	
}
@media (max-width: 480px) {
	.menuText{
	font-size: 1.3em;
		padding: 0.6em 0.1em 0.2em 0.1em; /* top, right, bottum, left  */
	}
}
/*-------------------------------------------------------------------
 * formatting of the dropdown (menuButton)   
 * used for the second level menu
 *------------------------------------------------------------------*/
.menuButton {
	display: flex;
	vertical-align: super;
	margin: 0 0.5em 0 0  ;  /* top, right, bottum, left  */
	border-width: 4px;
	border-style:solid;
	border-radius: 5px;
	border-color: rgb(192, 192, 192);
}
.menuButton:hover{
	border-color: blue;
	outline:none;
	cursor:pointer;
}
.menuButton:active{
	border-color: red;
}
@media only screen and (max-width: 480px) {
	.menuButton {
		margin: 0 0.3em 0 0  ;  /* top, right, bottum, left  */
	}
}

/*-------------------------------------------------------------------
 * formatting the buttons for the menu
 *-----------------------------------------------------------------*/
.back_btn, 
.save_btn,
.tipp_btn,
.print_btn,
.timeout_btn,
.logout_btn,
.home_btn,
.clipboard_btn,
.trophy_btn,
.whatsapp_btn,
.paragraph_btn,
.refresh_btn {
	width: 48px;
	height: 48px;
	border: none;
	background-color: transparent;
	background-repeat:no-repeat;
	outline:none;
}
/*-------------------------------------------------------------------
 * formatting special background items for buttons in menu lines 
 *------------------------------------------------------------------*/
.back_btn {
	background-image: url(../../Common/Icons/icon-back-filled-48.png);
}
.save_btn {
	background-image: url(../../Common/Icons/icon-ok-48.png);
}
.logout_btn {
	background-image: url(../../Common/Icons/icon-delete-48.png);
}
.timeout_btn {
	background-image: url(../../Common/Icons/icon-hourglass-48.png);
}
.home_btn {
	background-image: url(../../Common/Icons/icon-home-48.png);
}
.clipboard_btn {
	background-image: url(../../Common/Icons/icon-clipboard-48.png);
}
.trophy_btn {
	background-image: url(../../Common/Icons/icon-trophy-48.png);
}
.whatsapp_btn {
	background-image: url(../../Common/Icons/icon-whatsapp-48.png);
}
.paragraph_btn {
	background-image: url(../../Common/Icons/icon-paragraph-48.png);
}
.print_btn {
	background-image: url(../../Common/Icons/icon-print-48.png);
}
.tipp_btn {
	background-image: url(../../Common/Icons/icon-tipp-48.png);
}
.refresh_btn {
	background-image: url(../../Common/Icons/icon-refresh-48.png);
}

/* on small screens the button size is reduced   */
@media (max-width: 480px) {
	.back_btn,
	.print_btn,
	.save_btn,
	.tipp_btn,
	.timeout_btn,
	.logout_btn,
	.home_btn,
	.clipboard_btn,
	.trophy_btn,
	.whatsapp_btn,
	.paragraph_btn,
	.refresh_btn{
		width: 40px;
		height: 40px;
		background-size: 40px;
	}
}


/*-end of file------------------------------------------------------------*/