/* --------------------------------- generelle Styles --------------------------------- */

body {
	background:#F0F0F0;
	font-family:Arial;
	font-size:100%;
	font-weight:normal;
	color:black;
	margin:0em;
	padding:0em;
}

#login {
  display:block;
  width:20em;
  text-align:left;
  margin: 0 auto;
	/* background:green; */
}

/* --------------------------------- Input --------------------------------- */

#label_input {
  display: inline;
	margin:0em 0em 0em 0em;
  width:99%;
	min-width:20em;	
	height:1.5em;
  text-align:left;
	/* background:lightblue; */
}

#label_input label {
  display: inline;
  width:20em;
	float:left;
	margin:0em 0em 0em 0em;
	font-style:italic;
	font-weight:bold;
  text-align:left;
	margin:0em 0em 0em 0em;
	/* background:yellow; */
}

#label_input input[type=text], #label_input input[type=email], #label_input input[type=password]{
  width:95%;
	margin:0em 0em 0.2em 0em;
	/* background:orange; */
}

#label_input input[type=date] {
  width:10em;
	margin:0em 0em 0.2em 0em;
}

#label_input select {
  width:95%;
	margin:0em 0em 0.2em 0em;
}

input[type=submit] {
  width:15em;
	text-align:center;
	font-weight:bold;
	padding:0.2em 0em 0.2em 0em;
}

/* --------------------------------- Header --------------------------------- */

header {
	display:block;
	background:#F0F0F0;
	text-align:center;
	width:100%;
	padding:0.2em 0em 0.2em 0em;
	color:blue;
	font-size:3em;
}

/* --------------------------------- Main --------------------------------- */

main {
	text-align:center;
	padding:0em 0em 3em 0em;
}

main #grafik img {
		width:auto;
		height:10em;
		max-width:100%;
}

main #meldung {
	height:3em;
	color:red;
}

/* --------------------------------- Footer --------------------------------- */

footer {
	display:block;
	background:#F0F0F0;
	text-align:center;	
  position:fixed;
  padding:0.5em 1em 0.5em 0em;
  bottom:0;
  left:0;
  right:0;
	font-size:0.8em;
}

#all {
	position:relative;
	width:100%;
	height:1em;
	bottom:0;
}
	
#change {
	position:absolute;
	text-align:left;
	width:200px;
	left:0px;
	padding:0em 0em 0em 1em;
}
	
#pflicht {
	position:absolute;
	text-align:center;
	width:100%;
	left:0px
}
	
#copy {
	position:absolute;
	text-align:right;
	width:100px;
	right:0px;
	padding:0em 1em 0em 0em;
}

/* --------------------------------- Anpassung Tablet --------------------------------- */

@media screen and (min-width : 641px) and (max-width : 1280px) {

	body {
		font-size:90%;
	}

	header {
		font-size:2em;
		font-weight:bold;
	}

	main #grafik img {
			width:auto;
			max-width:100%;
	}

	main #meldung {
		height:3em;
	}

}

/*  landscape  */
@media screen and (min-width : 801px) and (max-width : 1280px) {

	main #grafik img {
			height:10em;
	}
	
}

/*  portrait */
@media screen and (min-width : 641px) and (max-width : 800px) {

	main #grafik img {
			height:13em;
	}
	
}	
/* --------------------------------- Anpassung Handy --------------------------------- */

@media screen and (max-width : 640px) {
	
	body {
		font-size:80%;
	}

	header {
		font-size:1.5em;
		font-weight:bold;
	}

	main #grafik img {
			width:auto;
			max-width:100%;
	}
	
	main #meldung {
		height:3em;
	}
	
}

/*  landscape  */
@media screen and (min-width : 361px) and (max-width : 640px) {

	header {
		padding:0em;
	}

	main #grafik img {
			height:0em;
	}
	
}

/*  portrait */
@media screen and (max-width : 360px) {

	main #grafik img {
			height:7em;
	}
	
}