/**********************************************************************
* CSS for display mode only
**********************************************************************/

/**********************************************************************
* specials for smartphones
**********************************************************************/
@media only screen and (max-width: 480px) {
	html{
		font-size: 16px;  /* For mobile phones: */
	}
	body {
		display: flex;
		justify-content: center;
		background-image: none;
		background-color:rgb(255, 255, 255);
		padding: 0;
		margin: 0;  
	}
	main{
		width:100%;
	}
	.onlySmallScreen{
		display:block;
	}
	.onlyBigScreen{
		display:none;
	}
}
/**********************************************************************
* specials for desktop
**********************************************************************/
@media only screen and (min-width: 481px) {
	body {
		display: flex;
		justify-content: center;
		background-color:#020451;
		padding: 0;
		margin: 0;  
	}
	main{
		width:960px;
	}
	.onlySmallScreen{
		display:none;
	}
	.onlyBigScreen{
		width: auto;		/* dummy */
	}
}

/**********************************************************************
* other formatting
**********************************************************************/
#content{
	min-height:40em; 
	padding: 0.5em 0.5em 0.5em 0.5em;  /* top, right, bottum, left  */
	background-color: white;
}
.programTitle{
	font-weight: bold;
	text-shadow: 0.25em 0.2em 0.3em rgb(0, 0, 0);
	color: white;
	text-align:center; 
	font-size: 3em;
	margin: auto;
}
@media (max-width: 480px) {
	.programTitle{
		font-size: 1.5em;
	}
}
.smallInput{
	width: 8em;
	font-size: 1em;
	border-radius: 0.3em; 
	border: 0.1em solid black;
	margin: 0.15em 0.15em 0.2em 0.2em;  /* top, right, bottum, left  */
	padding: 0.2em 0.2em 0.2em 0.2em;  /* top, right, bottum, left  */
}
.messageHeadInfo,
.messageHeadError,
.messageHeadDialog,
.messageHeadSuccess{
	border-radius: 0.5em;
	padding: 0.2em 0.2em 0.2em 0.2em  ;  /* top, right, bottum, left  */
	margin: 0.2em 0 0.2em 0  ;  /* top, right, bottum, left  */
	clear:left;					/* clear left orientation of boxes */
}
.messageHeadInfo{
	background-color:#aaaaff;
	border:solid 0.2em #0000ff;
}
.messageHeadError{
	background-color:#ff8080;
	border:solid 0.2em #ff0000;
}
.messageHeadDialog{
	background-color:#ffff00;
	border:solid 0.2em #000000;
}
.messageHeadSuccess{
	background-color:#80ff80;
	border:solid 0.2em #00ff40;
}
.keyPassword{
	background-color:rgb(192, 192, 192);
	border:solid 0.2em rgb(80, 80, 80);
	border-radius: 0.7em;
	padding: 0.4em;  /* top, right, bottum, left  */
	display: inline-flex;
	align-items: center;
}
.keyPasswordText{
	font-size: 1.5em;
	background-color: inherit;
	border: none;
	outline: none;
	width: 12em;
}
@media (max-width: 480px) {
	.keyPassword{
		border-radius: 0.5em;
	}
}
.logo{
	margin: 0.1em 0.1em 0.0em 0.3em;  /* top, right, bottum, left  */
}
.fileSelect{
	font-size: 1em;
	padding: 0.75em;
	border: 0.2em solid blue;
	border-radius: 0.7em;
}
/**********************************************************************
* table formatting
**********************************************************************/
table{
	border-color:white;
}
@media (max-width: 480px) {
	ttable{
		width:100%;
	}
}
td, th{
	padding: 0.25em 0.25em 0.1em 0.25em  ;  /* top, right, bottum, left  */
}
.tableHeadline{
	background-color:#0080c0;
	color:#ffffff;
	text-align:left;
}

.tableLine{
	background-color:#cacaca;
	border-color:#03cafc;
	color:#000000;
	padding: 0.4em;
	min-height: 3em;
}
.tableLine2{
	background-color:#e2e2e2;
	border-color:#03cafc;
	color:#000000;
	padding: 0.4em;
	min-height: 3em;
}
.onlyPrint{
	display: none; 
}
.overflow{
	overflow:auto;
}
/*----------------------------------------
 * formatting the scroll-up button    
 * position: right lower corner
 *-----------------------------------------*/
#scrollUp_btn_DIV{
	position: fixed; 
	display: none; /* invisible at the beginning  */
	right: 130px;
	bottom: 0px;
	z-index: 2;
}


/*-end of file------------------------------------------------------------*/

