/**********************************************************************
* CSS for display mode only
**********************************************************************/
.selectText{
	font-size: 1.5em;
}
/**********************************************************************
* specials for desctop
**********************************************************************/
@media only screen and (min-width: 481px) {
	html{
		font-size: 16px;  /* For mobile phones: */
	}
	body{
		background-image: url(../Resources/Program/VerlaufSenkrecht.jpg); 
		background-repeat:repeat-x;
		background-attachment: fixed;
	}
}
/**********************************************************************
* other formatting
**********************************************************************/
#content{
	background-color: #c0c0c0;
}
.smallButton{
	width: 9.7em;
	cursor:pointer;
	font-size: 1em;
	background-color: #c0c0c0;
	border-radius: 0.4em; 
	border: 0.1em solid black;
	padding: 0.3em 0.5em 0.3em 0.5em;  /* top, right, bottum, left  */
	margin: 0.5em 0.2em 0.1em 0.1em;  /* top, right, bottum, left  */
}
@media (max-width: 480px) {		/* smartphone */
	.smallButton{
		width: 7.7em;
	}
}
/**********************************************************************
* table formatting
**********************************************************************/
table, td{
	padding: 0; 
}
/* grid with 9x9 cells */
.field81{
	border: 0.2em solid black;
	border-spacing: 0;
	margin-left: auto;
	margin-right: auto;
}
/* grid with 3x3 cells  */
.field9{
	border: 0.1em solid black; 
	border-spacing: 0;
	padding: 0;
}
.cell-black,
.cell-gray,
.cell-empty-gray,
.cell-green,
.cell-red{
	border: 0.071em solid red; 
	width: 1.5929em;
	height: 1.5929em;
	font-size: 2em;
	font-weight:bold;
	margin: 0;
	padding: 0;	
	background-color: white;
}
@media (max-width: 480px) {		/* smartphone */
	.cell-black,
	.cell-gray,
	.cell-empty-gray,
	.cell-green,
	.cell-red{
		border: 0.045em solid red; 
		width: 1.25em;
		height: 1.25em;
	}
}
.cell-black{
	color:black;
}
.cell-gray{
	color: gray;
}
.cell-empty-gray{
	color: white;
	background-color: rgb(128, 128, 128);
}
.cell-red{
	background-color: red;
	color: white;
}
.cell-green{
	color: green;
}
.cell-mini{
	width: 4.25em;
	height: 4.25em; 
	font-size: 0.75em;
	color: gray;
	overflow-wrap: break-word;
	border: 0.19em solid red; 
	background-color: white;
}
@media (max-width: 480px) {		/* smartphone */
	.cell-mini{
		width: 5em;
		height: 5em; 
		font-size: 0.5em;
		border: 0.25em solid red; 
	}
}
.cell-mini:active,
.cell-mini:hover,
.cell-black:active,
.cell-black:hover,
.cell-gray:active,
.cell-gray:hover,
.cell-red:hover,
.cell-green:hover{
	background-color: rgb(128, 128, 128);
}
.cell-gray:active,
.cell-gray:hover,
.cell-mini:active,
.cell-mini:hover{
	color: white;
}
/* log window */
.logContent {
	width: 30em;  
	padding: 1em;
	margin: auto;
	margin-top: 2em; 
	background-color: white;
	border-radius: 0.4em; 
	border: 0.2em solid black;
	text-align:center;
}
.logText {
	text-align:left;
	width: 28em; 
	height: 30em;
	font-family: courier; 
	font-size: 1em;
	border-radius: 0.5em; 
	border: 0.1em solid black;
}
@media (max-width: 480px) {		/* smartphone */
	.logContent {
		width: 22em;  
		border: 0.1em solid black;
	}
	.logText {
		width: 27em; 
		height: 30em;
		font-size: 0.8em;
		border: 0.05em solid black;
	}
}
.messageText {
	text-align:center;
	margin: 1em 0.1em 1em 0.1em;  /* top, right, bottum, left  */
}
/* The Modal Window  */
.modalWindow{
	display: none; 		/* Hidden by default */
	position: fixed; 	/* Stay in place */
	z-index: 100; 		/* Sit on top */
	left: 0;
	top: 0;
	width: 100%; 		/* Full width */
	height: 100%; 		/* Full height */
	overflow: auto; 	/* Enable scroll if needed */
	background-color: rgb(0,0,0); 		/* Fallback color */
	background-color: rgba(0,0,0,0.5);	/* Black w/ opacity */
}
/* Modal Content */
.modalContent {
	width: 9.8em;  
	font-size: 1em;
	padding: 1em;
	margin: auto;
	margin-top: 10em; 
	background-color: white;
	border-radius: 0.4em; 
	border: 0.1em solid black;
}
@media (max-width: 480px) {		/* smartphone */
	.modalContent {
		width: 7.8em;  
	}
}

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