/**********************************************************************
* 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.5em; /* 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.2em;
	}
}
/*-------------------------------------------------------------------
 * formatting of the dropdown (menuButton)   
 * used for the second level menu
 *------------------------------------------------------------------*/
.menuButton {
	display: flex;
	vertical-align: super;
	background-color: rgb(242, 242, 242) ;
	margin: 0.1em 0.5em 0.1em 0.1em  ;  /* 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.5em 0 0  ;  /* top, right, bottum, left  */
		padding-inline: 0.1em;
	}
}

/*-------------------------------------------------------------------
 * formatting the buttons for the menu
 *-----------------------------------------------------------------*/
.preset_btn, 
.next_btn,
.back_btn, 
.log_btn,
.backup_btn,
.save_btn,
.print_btn,
.timeout_btn,
.logout_btn,
.delete_btn,
.scrollUp_btn,
.cake_btn,
.home_btn{
	width: 48px;
	height: 48px;
	background-size: 48px;
	border: none;
	background-color:transparent;
	background-repeat:no-repeat;
	outline:none;
}
.eye_btn,
.key_btn_small{
	width: 32px;
	height: 32px;
	background-size: 32px;
	border: none;
    background-repeat:no-repeat;
	background-color:transparent;
}
.eye_btn{
	margin-left: 0.5em;
}
.key_btn_small{
	margin-right: 0.5em;
}
.eye_btn:hover{
	cursor:pointer;
}

/*-------------------------------------------------------------------
 * formatting special background items for buttons in menu lines 
 *------------------------------------------------------------------*/
.key_btn_small {
    background-image: url(../Icons/icon-key-48.png);
}
.eye_btn {
	background-image: url(../Icons/icon-eye-48.png);
}
.preset_btn {
	background-image: url(../Icons/icon-p-48.png);
}
.log_btn {
	background-image: url(../Icons/icon-report-48.png);
}
.next_btn {
	background-image: url(../Icons/icon-forward-48.png);
}
.back_btn {
	background-image: url(../Icons/icon-back-filled-48.png);
}
.backup_btn {
    background-image: url(../Icons/icon-backup-48.png);
}
.eye_btn {
	background-image: url(../Icons/icon-eye-48.png);
}
.save_btn {
	background-image: url(../Icons/icon-ok-48.png);
}
.logout_btn {
	background-image: url(../Icons/icon-delete-48.png);
}
.timeout_btn {
	background-image: url(../Icons/icon-hourglass-48.png);
}
.home_btn {
	background-image: url(../Icons/icon-home-48.png);
}
.print_btn {
	background-image: url(../Icons/icon-print-48.png);
}
.scrollUp_btn {
    background-image: url(../Icons/icon-scroll-up-48.png);
}
.cake_btn {
    background-image: url(../Icons/icon-cake-48.png);
}
.delete_btn {
    background-image: url(../Icons/icon-delete-48.png);
}

/* on small screens the button size is reduced   */
@media (max-width: 480px) {
	.preset_btn, 
	.next_btn,
	.log_btn,
	.back_btn,
	.eye_btn,
	.key_btn,
	.delete_btn,
	.backup_btn,
	.save_btn,
	.print_btn,
	.timeout_btn,
	.logout_btn,
	.scrollUp_btn,
	.cake_btn,
	.home_btn{
		width: 32px;
		height: 32px;
		background-size: 32px;
	}
}
.tinyButton,
.webButton{
	cursor:pointer;
	font-size: 1em;
	width: 3.5em;
	background-color: #c0c0c0;
	border-radius: 0.4em; 
	border: 0.15em solid black;
	padding: 0.3em 0.1em 0.3em 0.1em;  /* top, right, bottum, left  */
	margin: 0.1em 0.1em 0.2em 0.1em;  /* top, right, bottum, left  */
}
.tinyButton{
	width: 3.5em;
}
.webButton{
	width: 7.1em;
}
.tinyButton:hover,
.webButton:hover{
	border-color: blue;
}
.tinyButton:active,
.webButton:active{
	border-color: red;
}

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