/*	============================================================================ */
/*	CSS STYLESHEET COPYRIGHT LORENZ RUEDISUEHLI   				                 */
/*	============================================================================ */


/*	============================================================================ */
/*	BEREICH Lernspiele				                                             */
/*	============================================================================ */

body {	
    background-color: rgba(218,183,255,1);   	
}


.button {	
	background-color: rgba(218,183,255,1);
	color: rgba(50,50,50,1);	
	min-width: 110px;	
}

.button:hover {
	background: rgba(50,50,50,1);
	color:rgba(218,183,255,1);
}

.button:disabled {
	background: rgba(198,198,198,1);
}

.button:disabled:hover {
	background: rgba(198,198,198,1);
	color: rgba(50,50,50,1);
	cursor: default;
}

.formBox {
	display:flex;
	flex-direction: column;
	justify-content:flex-start;
}

.lernspiel{
	display: flex;
	flex-direction: column;	
}

.selectSelected{
	background:rgba(218,183,255,1);
}

.thTitel{
	width: 25%;
}
.thBesch{
	width: 40%;
}
.thAspekt{
	width: 20%;
}
.thBtn{
	width: 15%;
}

#containerLernspiel {  	
	margin-left:auto;
	margin-right:auto;
	position: relative;		
		top:75px;
	width:80vw;
		max-width: 1400px;
		min-width: 850px;	
}


#btnStart {
	width:10rem;	
}

#lpId {
	margin-top:0.5rem;
}

table {
	width: 100%;
}
th, td {
	padding: 0.5rem;
	text-align: left;	
}
th {
	border-bottom: 1px solid rgba(50,50,50,1);
}
tr:nth-child(even) {background-color: #f2f2f2;}

select {
	border: none;
	background:rgba(114,255,253,1);
	font-family: 'Lato', serif;
	font-size: 1rem;
	font-weight: 300;
	height: 2rem;
	padding: 0 5px;
}

/*	============================================================================ */
/*	MEDIA QUERIES 		          				                                 */
/*	============================================================================ */
/* -------------------------------------------------------- */
/* Bildschirm 1200x											*/
/* -------------------------------------------------------- */

@media screen and (max-width:1200px) {
	
	#containerLernspiel {    	
		position: relative;
/*		width: 640px;*/
		width:960px;
	}
	
	#menucontainer {
		display:none;
	}
	
	
	#menuMobile{
		background-color: rgba(255,255,255,1.00);
		display:flex;
		flex-direction: column;
		position: absolute;
			top:0.5rem;
			right:3.5rem;		
	}
	
	#menuMobile a:link {
		border-left:none;
		border-bottom:1px rgba(50,50,50,1) solid;
		font-size:1.5rem;
		padding:0.3rem 0.5rem;
	}

	#menuMobile a:last-child {
		border-bottom: none;
	}
	
	#hamburger {		
		right:1rem;
		top:0.5rem;		
	}

}/* Ende media 1200px*/


/* -------------------------------------------------------- */
/* Bildschirm 960px											*/
/* -------------------------------------------------------- */


@media only screen and (max-width:960px) {
	
	.button {			
		min-width: 80%;
	}
}/*Ende media 960px*/

/* -------------------------------------------------------- */
/* Bildschirm 600px											*/
/* -------------------------------------------------------- */


@media only screen and (max-width:600px) {
	
	.button {	
		font-size:1rem;		
	}

	.thBesch{
		width: 25%;
	}
	
}/*Ende media 600px*/

/* -------------------------------------------------------- */
/* Mobile 480 - 768											*/
/* -------------------------------------------------------- */


@media only screen and (max-device-width:480px) {


	
	
}/*Ende*/