/* Allgemeiner Teil */
@font-face {font-family: "Karasha";src:url(karasha.otf) format("opentype");}
body {margin:0;font-family:Arial,sans;font-size:100%;}
.topnav {display:block;overflow: hidden;background-color: black;text-align:center;width:100%;}
.topnav a {float: left;color: #f2f2f2;text-align: center;padding:16px;text-decoration: none;}
.suchfeld {float: left;text-align: center;padding: 11px 16px;text-decoration: none;color:white;}
.active {background-color: #e61e36;color: white;}
.topnav .icon {display: none;}
.suchfeld span {cursor:pointer;}
.dropdown {float: left;overflow: hidden;}
.dropdown .menuimage {font-size:32pt;}
.dropdown .dropbtn {border: none;outline: none;color: white;background-color:black;padding:16px;font-family: inherit;margin: 0;font-size:1em;}
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 2;}
.dropdown-content a {float: none;color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}
.dropdown-megamenu {top:47px;left:0;width:100%;border-bottom:2px solid black;background: #f2f2f2;background: -moz-linear-gradient(top,  #f2f2f2 1%, #bfbfbf 100%);background: -webkit-linear-gradient(top,  #f2f2f2 1%,#bfbfbf 100%);background: linear-gradient(to bottom,  #f2f2f2 1%,#bfbfbf 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#bfbfbf',GradientType=0 );}
.dropdown-megamenu a {float:left;text-align:center;font-size:10pt;}
.dropdown-megamenu a .menutext {display:none;}
.topnav a:hover, .dropdown:hover .dropbtn {background-color: #555;color: white;}
.dropdown-content a:hover {background-color: #ddd;color: black;}
.dropdown:hover .dropdown-content {display: block;}
.linkA {color:black;text-decoration:none;}
.linkA:hover {color:black;text-decoration:underline;}
#header {width:350px;margin:1em auto;cursor:pointer;}
#header h1 {font-weight:normal;font-size:2em;margin:0;}
#header h2 {font-weight:normal;font-size:1.5em;margin:0;text-align:center;}
#header p {font-size:1em;margin:0;text-align:center;}
#header .tsvlogo {float:left;margin-right:1em;height:85px;width:auto;position:relative;}
hr {border: 0;height: 1px;background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));}
#topteaser {padding:0;text-align:center;margin-bottom:-4px;display:none;position:relative;}
#topteaserph {padding:1.5em 0 2em 0;text-align:center;margin-bottom:-4px;display:none;position:relative;}
#topteaserph p {margin:0;}
.topteaserimg {max-width:1000px;width:100%;height:auto;}
#footer {display:block;background:black;color:white;text-align:center;padding:.1em;border-top:2px solid #e61e36;width:100%;box-sizing:border-box;}
#footer a {color:white;text-decoration:none;}
#footer a:hover {text-decoration:underline;}
#userbar {display:block;padding:.5em 1em .5em 0;position:relative;min-height:82px;background: #f2f2f2;background: -moz-linear-gradient(top,  #f2f2f2 1%, #bfbfbf 100%);background: -webkit-linear-gradient(top,  #f2f2f2 1%,#bfbfbf 100%);background: linear-gradient(to bottom,  #f2f2f2 1%,#bfbfbf 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#bfbfbf',GradientType=0 );}
#userbar p {margin:0;}
#LoginArea {display:none;width:300px;margin:1em auto;border:2px solid #646464;padding:0;border-radius:5px 5px 0 0;background:white;}
#LoginArea h1 {margin:0;padding:5px;background:#646464;color:white;font-size:1.25em;font-weight:normal;}
#LoginArea p {margin-bottom:.5em;}
#LoginBtn {text-align:center;}
#LA1 {display:none;}
#LA0,#LA1 {padding:1em;}
.closebtn a {color:white;float:right;text-decoration:none;}
.closebtn a:hover {color:#e61e36;}
.schatten {-webkit-box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.58);
-moz-box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.58);
box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.58);}
.dialogs {display:none;}
.msgbarORANGE {background:orange;padding:.5em;color:black;margin-bottom:.25em;}
.msgbarRED {background:maroon;padding:.5em;color:white;margin-bottom:.25em;}
.msgbarGREEN {background:darkgreen;padding:.5em;color:white;margin-bottom:.25em;}
.msgbar {position:relative;}
.msgbara {color:white;}
#edieterback {position: fixed;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;overflow: none;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);display:none;}
#edieter {background:white;width:800px;height:600px;position:absolute;top:calc(50% - 300px);left:calc(50% - 400px);border-radius:5px;padding:0;border:2px solid black;}
#edieterbox h1 {color:red;}
.myfotto {-webkit-box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);-moz-box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);border:3px solid white;}
input {font-size:12pt;padding:3px;}
select {font-size:12pt;}
input:focus,select:focus {background:honeydew;}
#sponsorarea {margin:1em auto;max-width:468px;width:90%;display:block;}
#sponsorarea .balken {height:2px;position:relative;overflow:hidden;}
#sponsorarea .progress {width: 0%;height: 100%;background-color: #e61e36;position: absolute;top: 0;left: 0;}
.aclicktt {color:darkgreen;text-decoration:none;position:relative;}
.aclicktt:hover {color:#e61e36;text-decoration:underline;top:-1px;}
.ktermin {background:white;padding:.5em;margin:5px 0;}
.ktermin:hover {box-shadow:0 0 3px 3px yellow;cursor:pointer;}
.ktermin p {font-size:10pt;margin:3px 0;}
.ktermin h2 {margin:3px 0;font-size:14pt;font-weight:normal;}
#dsgvo {position: fixed;z-index: 2;left: 0;top: 0;width: 100%;height: 100%;overflow: none;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);display:none;}
#dsgvowindow {background:white;width:calc(100% - 1em);max-width:500px;position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border:2px solid black;border-radius:5px 5px 0 0;padding:0;}
#dsgvowindow h1 {margin:0;padding:.5em 1em;background:black;color:white;font-size:1.25em;font-weight:normal;}
#dsgvowindow p:last-of-type a {display:block;}
.dsgvoa {color:darkblue;text-decoration:none;}
.dsgvoa:hover {color:blue;text-decoration:underline;}
#owndata {position:relative;padding:.5em;background:#e0e0e0;height:250px;overflow:scroll;border:1px solid #646464;display:none;}
#owndata h2 {margin:0;}
#owndata a {color:black;text-decoration:none;}
#owndata a:hover {color:red;}
.zebratab td {padding:5px;}
.zebratab thead td {background:black;}
.zebratab thead {color:white;font-weight:bold;}
.zebratab tr:nth-child(even) {background:#e0e0e0;}
.lightbox {display: none;position: fixed;z-index: 999;width: 100%;height: 100%;text-align: center;top: 0;left: 0;background: rgba(0,0,0,0.8);}
.lightbox img {max-width: 90%;max-height: 80%;margin-top: 10%;border:5px solid white;}
.lightbox:target {outline: none;display: block;}
#memberonlinewidget {position:relative;display:none;}
#memberonlinewidget .newmsg {color:white;padding:3px;border-radius:3px;animation: newmsganim .66s infinite;position:relative;}
#sidhistory p {font-size:10pt;margin:0;line-height:.5em;}
#bdaywidget li a,#surveywidget p a {color:black !important;text-decoration:none !important;}
#bdaywidget li a:hover,#surveywidget p a:hover {color:#e61e36 !important;}
.ui-tooltip p {margin:3px 0;}
.ui-tooltip {box-shadow:3px 3px 5px #323232;}
.requester {position: fixed;z-index: 2;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);display:none;}
.requester .window {background:white;width:calc(100% - 1em);max-width:640px;position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border:2px solid black;border-radius:5px 5px 0 0;padding:0;}
.requester .titel {background:black;padding:4px;font-size:16pt;color:white;}
.requester .titel a {float:right;color:white;text-decoration:none;}
.requester .titel a:hover {color:#e61e36;}
.requester .content {padding:0 .5em;max-height:70vh;overflow:auto;}
.requester .buttons {background:#f0f0f0;padding:.5em;text-align:center;}
.requester .buttons a {padding:4px 1em;font-size:14pt;text-decoration:none;border:2px solid;display:block;margin:4px 0;}
.requester .buttons .normal {background:#d0d0d0;border-color:#808080;color:black;}
.requester .buttons .normal:hover {background:#808080;border-color:white;color:white;}
.requester .buttons .warn {background:mistyrose;border-color:red;color:#320000;}
.requester .buttons .warn:hover {background:red;border-color:white;color:white;}
.requester .buttons .ok {background:lightgreen;border-color:darkgreen;color:#003200;}
.requester .buttons .ok:hover {background:#003200;border-color:white;color:white;}
#chatlayer * {box-sizing:border-box;}
#chatlayer {background:rgba(255,255,255,.75);padding:1em 0;position:-webkit-sticky;position:sticky;top:0;z-index:2;display:none;}
#chatlayer .inner {background:white;border:2px solid green;width:100%;max-width:500px;margin:0 auto;box-shadow:2px 2px 5px #808080;}
#chatlayer h1 {margin:0 0 5px 0;padding:4px 8px;background:green;color:white;font-size:16pt;}
#chatlayer .chatliste {padding:0 8px;max-height:150px;overflow:auto;}
#chatlayer .btnbar {background:#e8e8e8;padding:4px;text-align:center;border-top:1px solid #808080;}
#chatlayer section {margin:.5em 0;background:#f0f0f0;padding:4px;cursor:pointer;}
#chatlayer section:hover {background:lightgreen;}
#chatlayer section h2 {margin:4px 0;font-weight:normal;font-size:10pt;}
#chatlayer section p {margin:0;}
#chatlayer section p:before {content:'"';}
#chatlayer section p:after {content:'"';}

@keyframes newmsganim
{
 0%,100% {background:black;top:0;}
 50% {background:red;top:-5px;}
}

@keyframes bounceInDown
{
 from,60%,75%,90%,to {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
 0% {opacity: 0;transform: translate3d(-50%, calc(-3000px - 50%), 0) scaleY(3);}
 60% {opacity: 1;transform: translate3d(-50%, calc(25px - 50%), 0) scaleY(0.9);}
 75% {transform: translate3d(-50%, calc(-10px - 50%), 0) scaleY(0.95);}
 90% {transform: translate3d(-50%, -50%, 0) scaleY(0.985);}
 to {transform: translate3d(-50%, -50%, 0);}
}
@keyframes bounceOutUp
{
 20% {transform: translate3d(-50%, calc(-10px -50%), 0) scaleY(0.985);}
 40%,45% {opacity: 1;transform: translate3d(-50%, calc(20px - 50%), 0) scaleY(0.9);}
 to {opacity: 0;transform: translate3d(-50%, calc(-2000px - 50%), 0) scaleY(3);}
}
.bounceInDown {animation: bounceInDown 1s;}
.bounceOutUp {animation: bounceOutUp 1s;}

/* Buttons */
.editbtn {position:absolute;top:3px;right:3px;color:chocolate;}
.editbtn:hover {top:2px;}
.delbtn {position:absolute;top:3px;right:33px;}
.delbtn:hover {top:2px;}
.statbtn {position:absolute;top:3px;right:63px;}
.statbtn:hover {top:2px;}

#msgbarclosebutton {position:absolute;top:0;right:20px;color:white;}
#msgbarclosebutton a {color:white;text-decoration:none;}
#msgbarclosebutton a:hover {color:black;}
.baseBtn
{
 -moz-box-shadow:inset 0px 1px 0px 0px #646464;
 -webkit-box-shadow:inset 0px 1px 0px 0px #646464;
 box-shadow:inset 0px 1px 0px 0px #646464;
 -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
 -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border-radius:5px;
 display:inline-block;
 cursor:pointer;
 padding:6px 24px;
 text-decoration:none;
 font-size:1em;
}
.baseBtn:active {position:relative;top:1px;}
.greenBtn:hover
{
 background: #98d698;
 text-shadow:1px 1px 0px #646464;
 background: -moz-linear-gradient(top,  #98d698 0%, #61cc61 27%, #00bc00 30%, #008900 83%, #005600 100%);
 background: -webkit-linear-gradient(top,  #98d698 0%,#61cc61 27%,#00bc00 30%,#008900 83%,#005600 100%);
 background: linear-gradient(to bottom,  #98d698 0%,#61cc61 27%,#00bc00 30%,#008900 83%,#005600 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98d698', endColorstr='#005600',GradientType=0 );
}
.greenBtn
{
 border:1px solid #000000;
 color:white;
 background: #74a574;
 background: -moz-linear-gradient(top,  #74a574 0%, #499b49 27%, #008a00 30%, #005700 83%, #002400 100%);
 background: -webkit-linear-gradient(top,  #74a574 0%,#499b49 27%,#008a00 30%,#005700 83%,#002400 100%);
 background: linear-gradient(to bottom,  #74a574 0%,#499b49 27%,#008a00 30%,#005700 83%,#002400 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#74a574', endColorstr='#002400',GradientType=0 );
}
.redBtn:hover
{
 text-shadow:1px 1px 0px #646464;
 background: #ff837a;
 background: -moz-linear-gradient(top,  #ff837a 0%, #ff5647 22%, #e04c3e 25%, #cc0404 100%);
 background: -webkit-linear-gradient(top,  #ff837a 0%,#ff5647 22%,#e04c3e 25%,#cc0404 100%);
 background: linear-gradient(to bottom,  #ff837a 0%,#ff5647 22%,#e04c3e 25%,#cc0404 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff837a', endColorstr='#cc0404',GradientType=0 );
}
.redBtn
{
 border:1px solid #000000;
 color:white;
 background: #ff5d4f;
 background: -moz-linear-gradient(top,  #ff5d4f 0%, #fc2511 22%, #e02716 25%, #7f0202 100%);
 background: -webkit-linear-gradient(top,  #ff5d4f 0%,#fc2511 22%,#e02716 25%,#7f0202 100%);
 background: linear-gradient(to bottom,  #ff5d4f 0%,#fc2511 22%,#e02716 25%,#7f0202 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5d4f', endColorstr='#7f0202',GradientType=0 );
}
.grayBtn
{
 color:black;
 border:1px solid #808080;
 font-weight:bold;
 background: #f6f8f9;
 background: -moz-linear-gradient(top,  #f6f8f9 0%, #e5ebee 21%, #d7dee3 24%, #bdbebf 93%, #949596 100%);
 background: -webkit-linear-gradient(top,  #f6f8f9 0%,#e5ebee 21%,#d7dee3 24%,#bdbebf 93%,#949596 100%);
 background: linear-gradient(to bottom,  #f6f8f9 0%,#e5ebee 21%,#d7dee3 24%,#bdbebf 93%,#949596 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#949596',GradientType=0 );
}
.grayBtn:hover
{
 background: #f6f8f9;
 background: -moz-linear-gradient(top,  #f6f8f9 0%, #f2f7f9 21%, #e6edf2 24%, #edeeef 93%, #abacad 100%);
 background: -webkit-linear-gradient(top,  #f6f8f9 0%,#f2f7f9 21%,#e6edf2 24%,#edeeef 93%,#abacad 100%);
 background: linear-gradient(to bottom,  #f6f8f9 0%,#f2f7f9 21%,#e6edf2 24%,#edeeef 93%,#abacad 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#abacad',GradientType=0 );
}

/* Responsiver Teil */
@media screen and (max-width: 310px)
{
 .suchfeld {display: none;}
}

@media screen and (min-width: 400px)
{
 #dsgvowindow p:last-of-type a {display:initial;}
 .requester .buttons a {display:initial;margin:0 .25em;}

}

@media screen and (min-width: 805px)
{
 #LoginBtn {text-align:right;position:absolute;top:1.5em;right:1.5em;display:inline;}
 #sponsorarea {position:absolute;left:1em;top:1em;max-width:468px;width:90%;}
 #userbar {min-height:105px;}
}

@media screen and (max-width: 800px)
{
 .topnav a:not(:nth-child(-n + 2)), .dropdown .dropbtn {display: none;}
 .topnav a.icon {float: left;display: block;height:18px;}
 .topnav.responsive {position: relative;}
 .topnav.responsive .fbtn {margin-left:2.8em;}
 .topnav.responsive .icon {position: absolute;left: 0;top:0;}
 .topnav.responsive a {float: none;display: block;text-align: left;font-size:12pt;}
 .topnav.responsive a .menuimage {display:none;}
 .topnav.responsive a .menutext {display:block;}
 .topnav.responsive .dropdown {float: none;}
 .topnav.responsive .dropdown-content {position: relative;}
 .topnav.responsive .dropdown-megamenu {top:0;}
 .topnav.responsive .dropdown .dropbtn {display: block;width: 100%;text-align: left;}
 .topnav.responsive .suchfeld {float: none;display: block;text-align: left;}
  #LoginBtn {text-align:center;top:6em;}
  #userbar {min-height:130px;}
}