* { 
    box-sizing: border-box; 
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif; 
    font-size: 16px;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    }
	
    body {
	height: 100%;
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #fff;
    background: url(img/Sliderdunkel-3.png) no-repeat top center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: #000000; 
	}
header {
	background-color: rgba(0,0,0,1.0);
	height: 80px;
	width: 100%; 
}
div.top_dark {
    background: url(img/logoneu2grau.png) no-repeat center left ; 
  background-size:425px 30px;  
  display: flex; 
  flex-wrap: wrap; 
  height: 80px; 
}

logo {
		padding-top: 5px;
		margin-top: 0px;
		z-index:20;
	}
	
	.logotop {
	height: 80px;
    width: 100%; 
    border: 0;
	z-index:10;
	}

div.top_darkout {  
  
  background: url(img/logoneu2grau.png) no-repeat center left ; 
  background-size:425px 30px;  
  display: flex; 
  flex-wrap: wrap; 
  height: 80px;
}

        .login {
        width: 400px; 
        background-color:rgba(255,255,255,0.5);
        box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2); 
        margin: 150px auto;
		border-radius : 0 0 20px 20px;
        }
        .login h1 {         
        text-align: center; 
        color: #fff; 
        font-size: 24px; 
        padding: 20px 0 20px 0; 
        border-bottom: 1px solid #dee0e4;
		
        }
        .login form {
        display: flex; 
        flex-wrap: wrap; 
        justify-content: center; 
        padding-top: 20px;
        }
        .login form label { 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        width: 50px; 
        height: 50px; 
        background-color: #757575; 
        color: #ffffff;
        }
        .login form input[type="password"], .login form input[type="text"] {
        width: 310px; 
        height: 50px; 
        border: 1px solid #dee0e4; 
        margin-bottom: 20px; 
        padding: 0 15px;
        }
        .login form input[type="submit"] { 
        width: 100%; 
        padding: 15px; 
        margin-top: 20px; 
        background-color: #757575; 
        border: 0; 
        cursor: pointer; 
        font-weight: bold; 
        color: #ffffff; 
        transition: background-color 0.5s;
        }
        .login form input[type="submit"]:hover { 
        background-color: #abb8a3; 
        transition: background-color 0.5s;
        }

	a {
	color: #ffffff;
	transition: background-color 0.5s;
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.4); 
	padding:2px; 
	border-radius : 0 4px 4px 4px;
	}

	a:hover, .hover {
    color: #ffffff;
	background-color: #abb8a3; 
	transition: background-color 0.5s;
	
	}
	
	


	.navwish {
	background-color: rgba(171,184,195,0.9);
    height: 150px;
    border: 0;
	position: sticky; top: 75px;
	margin-left: 10%;
	margin-right: 10%;
	color: #ffffff;
	border-radius: 8px;
	align-items: center;
	}
	
	.navwishanzeige {
	background-color: rgba(171,184,195,0.2);
    border: 0;
	margin-left: 10%;
	margin-right: 10%;
	color: #ffffff;
	border-radius: 8px;
	align-items: center;
	box-shadow: 5px rgba(255, 255, 255, 0.5);
	}
	
	
    .navtop {
	background-color: rgba(171,184,195,0.9);
    height: 73px;
    width: 100%; 
    border: 0;
	position: sticky; top: 0;
	z-index:10;
	}
    .navtop div {
    display: flex;
    margin: 0 auto;
    width: 90%;
    height: 100%;
    }
    .navtop div h1, .navtop div a {
    display: inline-flex;
    align-items: center;
    }
    .navtop div h1 { 
    flex: 1;
    font-size: 24px;
    padding: 0; 
    margin: 0; 
    color: #ffffff; 
    font-weight: normal;
    }
	.navtop div, .navtop a::before { 
	
	}
	
    .navtop div a,
	.navtop a:hover::before{ 
    padding: 0 20px;
    text-decoration: none;
    color: #ffffff; 
    font-weight: bold;
	background-color: rgba(171,184,195,0.9);
	transition: background-color 0.5s;
	display: inline-flex;
	  }
    .navtop div a i {
    padding: 2px 8px 0 0;
    }
	
	
	.navtop div a:focus,
	.focus a:active,
	.active { 
    color: #ffffff;
	background-color: #abb8b3; 
	transition: background-color 0.5s;
    }
    .navtop div a:hover { 
    color: #ffffff;
	background-color: #abb8a3; 
	transition: background-color 0.5s;
    }
	
	body.loggedin {
    background-color: #fafdff;
	height: 100%;
    }
	
	#seite {
	min-height: 100%;
    width: 90%;
    margin: 0px auto;
	background-color:rgba(255,255,255,0.5);
	border-radius : 0 0 20px 20px;
	color: #fff;
	padding-top: 0;
	padding-left: 15px;
	padding-right: 15px;
	z-index:1;
	box-shadow: 5px rgba(0, 0, 0, 0.5);
	}

    .content { 
    width: 100%; 
	min-height: 100%;
    padding-bottom: 70px;	
	 background-color:rgba(0,0,0,0.5);
	 border-radius : 0 0 20px 20px;
	 padding-left: 15px;
	 padding-right: 15px;
	 padding-bottom: 20px;
    }
    .content h2 {
    margin: 0; 
    padding: 25px 0; 
    font-size: 22px; 
    border-bottom: 1px solid #e0e0e3; 
    color: #abb8c3;
    }
    .content > p, .content > div {
    margin: 5px 0;
    padding: 5px 0;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
	}
    .content > p table td, .content > div table td {
    padding: 5px;
	width: 100%;
	
    }
    .content > p table td:first-child, .content > div table td:first-child { 
    font-weight: bold; 
    color: #757575; 
    padding-right: 15px;
	width: 100%; 
	padding-left: 15px;
    }
    
	.sortable > p table td:first-child, .content > div table td:first-child{ 
    font-weight: bold; 
    color: #757575; 
    padding-right: 15px;
	width: 100%; 
	padding-left: 15px;
	border: 1px dotted;
	vertical-align: top;
    }
	
	
	hr { 
    color: #ffffff;
	border: 1px dotted;
    }
	smaller {
	font-size: x-small;
	font-weight: bold; 
    font-style: italic;
	}
	
	button {
	background-color: rgba(0,0,0,0.3);
	font-size: 14px;
	font-style: italic;
	border-radius: 4px;
	color: #ffffff;
	border: 0;
	padding:5px;
	transition: background-color 0.5s;
	}
	
	 button:hover { 
    color: #ffffff;
	background-color: #abb8a3; 
	transition: background-color 0.5s;
    }
	
	 button:active { 
    color: #000000;
	background-color: #088A08; 
	transition: background-color 0.1s;
    }
	
	
		
	button.link-box_aktiv {
		background-color: rgba(0,0,0,0.9);
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
	font-size: 14px;
}
		button.link-box_aktiv:hover, .hover {
    color: #ffffff;
	background-color: #abb8a3; 
	transition: background-color 0.5s;
	
	}
	
		button.link-gruss_aktiv {
		background-color: rgba(0,0,0,0.9);
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
	font-size: 14px;
}
		button.link-gruss_aktiv:hover, .hover {
    color: #ffffff;
	background-color: #abb8a3; 
	transition: background-color 0.5s;
	
	}
	
		button.link-wunsch_aktiv {
		background-color: rgba(0,0,0,0.9);
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
	font-size: 14px;
}
		button.link-wunsch_aktiv:hover, .hover {
    color: #ffffff;
	background-color: #abb8a3; 
	transition: background-color 0.5s;
	
	}
	
		button.link-song_aktiv {
		background-color: rgba(0,0,0,0.9);
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
	font-size: 14px;
}
		button.link-song_aktiv:hover, .hover {
    color: #ffffff;
	background-color: #abb8a3; 
	transition: background-color 0.5s;
	
	}
	
	
	
	
	
	
	.hidden {
		visibility: hidden;
	}
	
.footer {
background-color: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
font-weight: lighter;
text-transform: uppercase;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
padding: 5px;
}
	textarea {
  width: 80%;
  height: 100px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 1px solid;
  border-color: rgb(117,168,56);
  border-radius: 4px;
  font-size: 10px;
  resize: none;
  background: none;
}

.contentc {
  width: 80%;
  height: 100px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 1px solid;
  border-color: rgb(117,168,56);
  border-radius: 4px;
  font-size: 10px;
  resize: none;
  background: none;
}

iframe {
  min-height: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 1px solid;
  border-color: rgb(117,168,56);
  border-radius: 4px;
  font-size: 10px;
  resize: none;
  background: none;
}


.output {
	font-family: "monospace"; font-size: 16px;
	padding-left: 15px;
	
}

.hauptadmins {
	font-family: "monospace"; font-size: 12px;
	padding-left: 15px;
	background-color: rgba(0,0,0,0.2);
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.4); 
	border-color: rgb(117,168,56);
}

	.weiss { font-weight: bold; color: #ffffff; }
	.grau { font-weight: bold; color: #757575; }
	.Stil8 { color: #BDC6DE; font-size: 16px; font-weight: bold; border-radius : 0 4px 4px 4px;}
	.Stil8a { color: #BDC6DE; font-size: 12px; font-weight: bold; border-radius : 0 4px 4px 4px;}
	.Stil9 { color: #05a153; font-size: 12px; font-weight: bold; }
	.Stil9small { color: #05a153; font-size: 12px;font-weight: bold;}
	.Stil9f { color: #000000; font-size: 12px; font-weight: bold; }
	.Stil9a { color: #AD0000; font-size: 12px; font-weight: bold; }
	.Stil9asmall { color: #AD0000; font-size: 12px; font-weight: bold; }
	.Stil9b { color: #D66321; font-size: 12px; font-weight: bold; }
	.Stil9bsmall { color: #D66321; font-size: 12px; font-weight: bold; border-radius : 0 4px 4px 4px; text-shadow:3px 2px 0px rgba(0, 0, 0, 0.9);}
	.Stil9c { color: #D3D3D3; font-size: 12px; font-weight: bold; }
	.Stil9d { color: #FAFAD2; font-size: 12px; font-weight: bold; }
	.Stil9e { color: #FFD700; font-size: 12px; font-weight: bold; }
	.Stil10 { color: #ffffff; font-size: 12px; font-weight: bold;  }
	.Stil10b { color: #ffffff; font-size: 16px; font-weight: bold; background-color: #757575; padding: 10px; }
	
	
	
	.Stil9team { color: #D66321; font-size: 12px; font-weight: bold; border-radius : 0 4px 4px 4px; }
    .Stil9bteam { color: #BDC6DE; font-size: 12px; font-weight: bold; border-radius : 0 4px 4px 4px; }

.main-navigation { 
	width: 270px;
	float: left;
	background-color: rgba(0,0,0,0.3);
	display: inline;
   border-radius : 0 20px 20px 20px;
     }
   
.main-navigation li,
.main-navigation a {
  list-style-type: upper-roman;
  text-align: left;
  text-decoration: none;
  background: none;
  text-transform: lowercase;
  font-size: 10px;
  
   }
.main-navigation a:hover,
.main-navigation .active {
  color: white !important;
  background-color: #abb8b3; 
  transition: background-color 0.5s;
}
.main-navigation li:hover ul {
  display: inline-block;
}

.bottom {
	border-bottom: 1px solid;
	border-color: rgb(117,168,56);
	}

iframe{
    overflow:hidden;
    max-height: 2000px;
min-height: 600px;
    width:100%;
    border-width:1px;
}


#contact input {
			    border: 1px solid #ccc;
			    box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    height: 32px;
			    width: 245px;
			    font-family: Helvetica;
			    font-size: 12px;
			    margin-right: 16px;
			    padding: 8px;
			}
#contact select {
			    border: 1px solid #ccc;
			    box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    height: 32px;
			    width: 245px;
			    font-family: Helvetica;
			    font-size: 12px;
			    margin-right: 16px;
			    padding: 8px;
			}
#contact textarea {
			    border: 1px solid #ccc;
			    box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    height: 80px;
			    width: 345px;
			    max-width: 339px;
			    font-family: Helvetica;
			    font-size: 12px;
			    margin-top: 16px;
			    padding: 8px;
				color: #ffffff; 
			}
			
		

form ix {
	margin-left: -40px;
	margin-right: 20px;
	cursor: pointer;
	color: #000000;
}

#contact input {
			    border: 1px solid #ccc;
			    box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    height: 32px;
			    width: 245px;
			    font-family: Helvetica;
			    font-size: 12px;
			    margin-right: 16px;
			    padding: 8px;
				background-color: rgba(0,0,0,0.3);
				color: #ffffff;
			}
#contact select {
			    border: 1px solid #ccc;
			    box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    height: 32px;
			    width: 245px;
			    font-family: Helvetica;
			    font-size: 12px;
			    margin-right: 16px;
			    padding: 8px;
				background-color: rgba(0,0,0,0.3);
				color: #ffffff;
			}

#postingsystem textarea {
				border: 1px solid #ccc;
			    box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    width: 345px;
			    font-family: Helvetica;
			    font-size: 12px;
			    margin-right: 16px;
			    padding: 8px;
				background-color: rgba(0,0,0,0.3);
				color: #ffffff;
				font-style: italic;
	}


#postingsystem button {
	border: 1px solid #ccc;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	background-color: rgba(0,0,0,0.3);
	height: 32px;
	font-family: Helvetica;
	font-size: 12px;
	border-radius: 4px;
	color: #ffffff;
	border: 0;
	padding: 8px;
	transition: background-color 0.5s;
	}
	
#postingsystem button:hover { 
    color: #ffffff;
	background-color: #abb8a3; 
	transition: background-color 0.5s;
    }
	
#postingsystem button:active { 
    color: #000000;
	background-color: #088A08; 
	transition: background-color 0.1s;
    }


	
	
.Posts {
				border: 1px solid #ccc;
			    box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    font-family: Helvetica;
			    font-size: 12px;
			    margin-right: 16px;
			    padding: 8px;
				background-color: rgba(0,0,0,0.3);
				color: #ffffff;
				border-radius : 0 20px 20px 20px;
	}
	
	
.Post {
				border: 1px solid #ccc;
			    box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    font-family: Helvetica;
			    font-size: 18px;
				padding-top: 5px;
			    margin-bottom: 5px;
				padding-bottom: 10px;
			    padding-left: 10px;
				color: #ffffff;
				border-radius : 0 20px 20px 0;
	}
	

	
	
.Postmane {
				box-sizing: border-box;
			    -moz-box-sizing: border-box;
				font-family: Helvetica;
			    font-size: 10px;
				color: #cccccc;
				border-bottom: 1px solid;
				border-color: rgba(117,168,56,0.2);
		}
		
.icons {
				box-sizing: border-box;
			    -moz-box-sizing: border-box;
				font-family: Helvetica;
			    font-size: 10px;
				color: #cccccc;
				padding-top: 5px;
				border-top: 1px solid;
				border-bottom: 1px solid;
				margin-bottom: 5px;
				border-color: rgba(117,168,56,0.2);
		}
		

.Kommentare {
				width: 90%;
				min-width: 500px;
				margin-left: 20px;
				border: 1px solid #ccc;
			    box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    font-family: Helvetica;
			    font-size: 12px;
			    margin-right: 16px;
			    padding: 8px;
				background-color: rgba(0,0,0,0.3);
				color: #ffffff;
				border-radius : 0 20px 20px 20px;
	}
	
	
.Kommentar {
				border: 1px solid #ccc;
			    box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    font-family: Helvetica;
			    font-size: 14px;
			    margin-bottom: 5px;
				padding-bottom: 10px;
			    padding-left: 10px;
				color: #ffffff;
				border-radius : 0 20px 20px 0;
	}
	
.Kommentarname {
				box-sizing: border-box;
			    -moz-box-sizing: border-box;
				font-family: Helvetica;
			    font-size: 10px;
				color: #cccccc;
				border-bottom: 1px solid;
				border-color: rgba(117,168,56,0.2);
		}
		
.Kommentaricons {
				box-sizing: border-box;
			    -moz-box-sizing: border-box;
				font-family: Helvetica;
			    font-size: 10px;
				color: #cccccc;
				padding-top: 5px;
				border-top: 1px solid;
				border-bottom: 1px solid;
				margin-bottom: 5px;
				border-color: rgba(117,168,56,0.2);
		}
		
.autosize {
  resize: none;
  overflow: hidden;
}


.WunschGruss { color: #ffffff; font-size: 14px;  font-weight: bold; background-color: rgba(0,0,0,0.4); margin-top: 5px; padding:0px; border-radius : 0 4px 4px 4px; }
.WunschGrussGreeting { color: #ffffff; font-size: 14px;  font-weight: bold; margin-top: 5px; padding:0px; border-radius : 0 4px 4px 4px; }		
.WunschGrussloe { color: #BDC6DE; font-size: 10px; font-weight: bold; }
.eraser { color: #D66321; font-size: 12px; font-weight: bold; background-color: rgba(0,0,0,0.6); box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.4); padding:2px; border-radius : 0 4px 4px 4px; border-bottom: 1px solid; border-color: rgba(117,168,56,0.2); }
	

.PostWB {
				border: 1px solid #ccc;
			   	padding-top: 5px;
			    margin-bottom: 5px;
				padding-bottom: 10px;
			    padding-left: 10px;
				color: #ffffff;
				border-radius : 0 20px 20px 0;
	}
	
	
.PosthochWB  {
				border: 1px solid #ccc;
			    padding-top: 5px;
			    margin-bottom: 5px;
				padding-bottom: 10px;
			    padding-left: 10px;
				color: #ffffff;
				border-radius : 0 20px 20px 0;
				width: 98%;
	}
	
	
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  font-size: 10px;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -90px;
   box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.4);
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 35%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

	span .span {
				width: 160px;
				border-bottom: 1px solid;
				border-color: rgba(117,168,56,0.4);
			}