/* --------------------------------- */

html {
	background: #ffffff;
	margin: 0.5;
	padding: 0.5;
	font-size: 60%;
	font-family: Arial, Helvetica, sans-serif;
	font: inherit;
	
}

/* --------------------------------- */

body {
	padding-top: 5em;
	margin: auto;
	font-family: Arial, Helvetica, sans-serif;
}

	#schmal {
		width: 700px;
		max-width: 90%;
		margin: auto;
		text-align: center;
	}
	
	#breit {
		width: 95%;
		max-width: 95%;
		margin: auto;
		text-align: center
		
	}

/* --------------------------------- */

header {
		position: fixed;
		top: 0;
		left: 0; 
		right: 0;
		background-color: #4696e5;
		color: #d1e5f9;
		padding: 0.5em 0em 0em 0em ;
		margin: auto;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		align-items: center;
		background-image: url("images/overlay.png"), url("images/pattern-size1.svg");
		background-position: top left, center center;
		background-attachment: fixed, fixed;
		background-size: auto, cover;
		height: 5%;
		min-height: 5em;
}

/* --------------------------------- */

a {
		color: inherit;
		color: #281e42;
}

	a:hover {
			color: #26057d;
	}

/* --------------------------------- */
/* h */
h1 {
	font-size: 2em;
	font-family: Helvetica, sans-serif;
}

h2{
	font-size: 1em;
	font-family: Helvetica, sans-serif;
	
	text-align: left;	
}

h3{
	color: #969799; 
	
}

h4 {
	font-family: Arial, Helvetica, sans-serif;
}

/* --------------------------------- */

h5, b {
	margin: 0.1;
	padding: 0.1;
	color:black;
	border: 0;
	font-size: 50%;
	font: inherit;
	vertical-align: baseline;}
	.rot {
		background-color:red;
		color:black;}
	.gelb {
		color:black;
		background-color:yellow;}
	.grün {
		background-color:green;
		color:black;}
	.grau {
		color:#999999;}
}


/* --------------------------------- */

p {
	font-size: 2em;
	font-family: Helvetica, sans-serif;
	
	text-align: left;
	box-sizing: border-box;
	width: 700px;
	margin: 25px;
	padding: 10px;
	float: left;
	border: solid 2px white; 
	border-radius: 5px;
	
}

/* --------------------------------- */

iframe {
	margin: 0.5;
	padding: 0.5;
	border: 1;
	font-size: 40%;
	vertical-align: baseline;
	width: 90%;
}




/* -------------------- */
/* Table */

table {
	margin: 0 1 0 0;
	width: 80%;
	font: Arial, Helvetica, sans-serif;
	float: left;
	border-collapse: separate;
	border-spacing: 0.2em;
}
  
th,td {
	padding: 0.2em 0.5em;
	border-radius: 0.1em;  
	padding: 0.3em 0.3em;
}  

thead th {
	background-color: #ffebe6;
	color: #c32e04;
}

td {
	font-style:italic;
	text-align: left;
	box-shadow: inset 1px 3px 5px -3px rgba(0,0,0,0.5);
}   

td:empty{
	box-shadow: none;
}

/* ------------------------------- */
/* Button und input */

	button {
		margin-top: 10px;
		margin-bottom: 30px;
		padding: 10px 30px;
		width: 40%;
		
		color: #FFF;
		/*background-color: #003399;   */
		background: #003399; /* old browsers */
		background: linear-gradient(to bottom, grey, #003399);
		box-shadow: 0px 17px 10px -7px
		rgba(0, 0, 0, 0.4);
		
		border: solid 1px grey;
		border-radius: 5px;
		
		font-size: 30px;
		font-family: Helvetica, sans-serif;
		
		transition: ease-in-out all 300ms;

	}
	

	button:hover {
		color: grey;
		background-color: #FFFF;
		transform: translate(0px, -10px);
		box-shadow: 0px, 30px, 15px, -10px
		rgba(0,0,0,0.2);
		
	}
	
	
	.bonbon {
		width: 150px;
		height: 30px; 
		margin-top: 5px;
		margin-bottom: 10px;
		padding: 5px 5px;
		
		
		color: #FFF;
		/*background-color: #003399;   */
		background: #003399; /* old browsers */
		background: linear-gradient(to bottom, grey, #003399);
		box-shadow: 0px 17px 10px -7px
		rgba(0, 0, 0, 0.4);
	
		border: solid 1px grey;
		border-radius: 5px;
	
		font-size: 12px;
		font-family: Helvetica, sans-serif;
		text-align: center;
		
		transition: ease-in-out all 300ms;
  }
 
   
  .bonbon:hover,
  .bonbon:focus,
  .pwd:hover,
  .pwd:focus  {
    color: grey;
		background-color: #FFFF;
		transform: translate(0px, -5px);
		box-shadow: 0px, 20px, 15px, -8px
		rgba(0,0,0,0.2);}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		border-radius: 6px;
		border: none;
		border-style: solid;
		border-width: 1px;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		width: 50%;
		height: 2em;
	}


select {
	width:auto;
	margin: 0.1;
	padding: 0.1;
	color:black;
	background-color: rgba(200, 200, 200, 0.2);
	border: 5px;
	border-color: rgba(99, 99, 99, 0.8);
	font-size: 50%;
	font: inherit;
	vertical-align: baseline;
}

/* --------------------------------- */


label {
		display: block;
		font-size: 0.9em;
		font-weight: bold;
		margin: 0 0 1em 0;
	}

/* --------------------------------- */

	#footer {
		background-color: rgb(194, 198, 204);
		color: black;
		padding: 0.1em;
		text-align: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 4%
}