*{
	margin: 0 auto;
	padding: 0;	
	font-family: "Calibri";
	font-size: 22px;
}
h1{
font-size: 40px;
font-variant: small-caps;
margin: 10px;
}
h2{
font-size: 30px;
margin: 5px;
}
#einverstaendnis{
font-size: 16px;
}
.result{
display: none;
position: relative;
top: 0;
left: 0;
}
.input.large{
width: 80%;
}
.input.medium{
width: 400px;
}
.input.small{
width: 20%;
}
.input.tiny{
width: 30px;
}
.input.inactive{
background-color: #aaa;

}
.ui-autocomplete{
	list-style: none;
	background-color: #fafafa;
	max-width: 300px;
	border: 1px solid #ddd;
	padding: 10px;
}
.ui-helper-hidden-accessible{display:none;
	}	
.navbar{
	background-color: #eeefef;
	overflow: hidden;
	width: 100%;
	position: fixed;
	z-index: 1;
	-webkit-box-shadow:  0px 0px 5px 3px rgba(0, 0, 0, 0.3);
    box-shadow:  0px 0px 5px 3px rgba(0, 0, 0, 0.3);
}
.navbar a{
	display: block;
	text-align: center;
	float: left;
	color: black;
	padding: 14px 16px;
	text-decoration: none;
}
.navbar a:hover {
	background-color: #145;
	color: white;
	}
.navbar a.active{
	background-color: #145;
	color: white;
	}
a.login{
	background-color: #146;
	transition:ground-color: #333;
	color: white;
	}
.navbar .icon {display: none;}	

.main{
	position: relative;
	top: 60px;
	padding: 10px;
	width: 70%;
	background-color: #eeefef;
}
.footer{
position: absolute;
bottom: 0px;
margin: 0;
width: 100%;
font-size: 8px;
text-align: center;
background-color: #eeefef;

}

@media screen and (max-width: 850px) {

	.navbar a:not(.active){
		display: none;
		height: 0px;
	} 

	.navbar a.icon{
		float: right;
		height: 26px;
		display: block;
	}
	
	.navbar.responsive .icon{
		position: absolute;
		top: 0;
		right: 0;	
	}
	.navbar.responsive a{
		float: none;
		text-align: left;
		visibility: visible;
		height: 28px;
		display: block;	
		animation: fade .1s ease-in;
		}
		
	.input.medium{
		width: 80%;
	}
	.main{
	position: relative;
	top: 60px;
	padding: 10px;
	width: 95%;
	background-color: #eeefef;
	
	}
	.tab{
	overflow: auto;	
	}
 }
 
#main{
background-color: #eeefef;
text-align: left;
max-width: 50%;
-webkit-box-shadow:  0px 0px 6px 3px rgba(0, 0, 0, 0.3);
    box-shadow:  0px 0px 6px 3px rgba(0, 0, 0, 0.3);
}
#form{
	position: absolute;
	margin-top: 10px;
	left: 40%;
	background-color: #ececec;
	display: table-cell;
	-webkit-box-shadow:  0px 0px 5px 3px rgba(0, 0, 0, 0.3);
    box-shadow:  0px 0px 5px 3px rgba(0, 0, 0, 0.3);
	text-align: left;
}
td{
padding:8px;
}
.input, .btn{
	outline: none;
	padding: 5px;
	margin: 5px;
	background-color: #abc;
	border: 1px solid #abc;
	border-radius: 2px;
}
.input.bemerkungen{
height: auto;
}
.btn{
border-radius: 2px;
border: 1px solid #abc;
}
.kopfzeile{
background-color: #146;
color: white;
}
.gzeile{
background-color: #ddd;
}
.uzeile{
background-color: #ccc;
}
.fehler{
color: red;
}
.turnier{
margin-left: 0;
}
.content{
margin-top: 20px;
}

.turnier td{ 
font-size: 20px;
}
.turnierdetails{
	background-color: #eee;
}
@keyframes fade{
	0% { height: 0;}
	100% { height: 32px;}
 }
#btn{
text-decoration: none;
color: #000;
padding: 5px;
	margin: 5px;
	background-color: #abc;
	border: 1px solid black;
	border-radius: 2px;
}
.ergebnis {
	border-bottom:1px solid grey;
	font-size:16px;
	padding:4px;
}
.ergebnis a {
	color:black;
	text-decoration: none;
}
div.register{
 position: relative;
 margin:0;
 min-height: 30em;
 line-height: 1;
 z-index: 0;
}
div.register > div {
 display: inline;
}

div.register > div>a {
 text-decoration: none;
 margin: 0;
 color: black;
 border: none;

}
div.register > div:not(:target) > a {
 border-bottom: none; 
 background-color: #eeefef;
}
div.register > div:target > a,	/* Apply to the targeted item or... */
:target #turniere > a {		/* ... to the default item */
  border-bottom: 0.1em solid #145; /* Visually connect tab and tab body */
  color: white;  
  background: #145;
  }	
div.register > div > div {
 background-color: #f5f5f5;
 z-index: -2;
 left:0; top: 1.35em;
 bottom: 0; right: 0;
 overflow: auto;
 margin: 1px;
 padding-top: 0.5em;
 /*	-webkit-box-shadow:  0px 0px 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow:  0px 0px 2px 1px rgba(0, 0, 0, 0.2);
*/
}
div.register > div:not(:target) > div { /* Protect CSS1 & CSS2 browsers */
  position: absolute; }
div.register > div:target > div, :target #benutzerverwaltung > div { /* Protect CSS1 & CSS2 browsers */
  position: absolute;
  z-index: -1;  
  }

a.btn{
text-decoration: none;
color: black; 
border:none;
}
.btn.disabled{
pointer-events: none;
cursor: default;
opacity: 0.6;
}
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-left: 10em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #abc;
}

input:focus + .slider {
  box-shadow: 0 0 1px #abc;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}	
#sloeschen{
 margin-bottom: 0.5em;
}
.img{
margin: 10px;
}
.left{
float: left;
}

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -5px;
  left: 5px;
  height: 25px;
  width: 25px;
  background-color: #555;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #aaa;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #146;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.footer a{
color: black;

font-size: 14px;
}.footer a:hover{
color: white;
background-color: #146;
font-size: 14px;
}