/* CSS fuer Skin 5 Stage */

html,body,div,p,h1,h2,h3,h4,h5,ul,ol,span,form,img,li, fieldset, input {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	border: 0;
	margin: 0;
	padding: 0;
	color: #BBB; /* die Schriftfarbe fuer alle Texte, kann fuer jedes Element individuell ueberschrieben werden */
}

html {
	background: #000; 	/* hier die Hintergrundfarbe fuer die Seite */
	/* hier ein Hintergrundbild einbinden */
	background: url(img/stage_bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
body {
	padding: 10px 20px 0 20px;
}



h1 {
	font-size: 1.4em;
	color: #bbb;		/* dies ist ein Beispiel fuer eine spezielle Schriftfarbe fuer die Ueberschrift */
	line-height:125%;
	margin-left: 5%;
}
h1 span {
	color: #bbb
}

h2 {
	color: #ced0e6;
	font-size: .95em;
	line-height: 125%;
}

.rooms h2 {
	margin-top: 1em;
}

#wall p.bg span:not(.ytb) {
    color: #aaa !important;
}


h3, h4, h5 {
	font-size: .8em;
	margin-top: 1em;
	line-height: 125%;
}

p, ol li, #user, #help tr, #upload input {
	font-size: .8em;
	margin-bottom: .1em;
}

fieldset fieldset a {
	text-decoration: none;
}

a {
	color: #ccc;
}
/* a:focus, a:hover {
	background: transparent;
} */

#addsmileys a:hover {
	background: none
}
#antenna img, #tiktok_logo, #antenna img {filter:invert(1);}

#user_pro_room em {
	font-weight: bold;
	font-style: normal;
	color: red;
}

#user_pro_room em:after {
	content: " ✔︎";
}


#addsmileys ul li, #farben ul li {
	display: inline;
	margin: 0;
}
#addsmileys ul li a:visited span {color:transparent}
#addsmileys ul li a:hover span{color: #bbb; }

#wdw_logo {filter:invert(1);}

ul {
	font-size: .8em;
	list-style-type: none;
}


li {
	margin: 0 1em 0 0;
}

hr {
	display: none;
}


fieldset {
	clear: right;
	margin: 0 0 3px 0;
	padding: 3px;
	min-width: 8em;
}


#wrapper {
	margin: 0 3% 0 5%;
}

#wrapper:after, #opt:after {/* der Konq braucht das 1., der Op das 2. */
	content : ".";		
	display : block; 
	height : 0; 
	clear : both; 
	visibility : hidden;
}



.datum, .uhrzeit, .dt, .uz, .tr {
	font-size: .8em;
	color: #888 !important;
}

.klein {
	font-size: .7em;
	margin: 0 0 .3em .3em;
}
.helplinks {
	margin-right: 5%;
}

#talk {
	margin: 0 10px 0 0;
	background-color: rgba(0,0,0,0.8);
	height:unset !important;
	padding: 0.7em 0 0 0.7em;
	width:71% !important;
}

#wall {
	height: 22em;
	resize:vertical;
	/* -webkit-mask-image: -webkit-gradient(linear, left top, left 5%, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))); */
	overflow-y: scroll;
	padding: .7em 0;
	line-height: 1.1em;
	max-width: 60em; /* damit word-wrap weiss was es tun soll */
	word-wrap:break-word;
	/* border: 3px solid transparent; */ /* wg scrollbar */
}

/* Safari not Opera */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media {
#wall::-webkit-scrollbar { background:transparent;width:7px}
#wall::-webkit-scrollbar-thumb {background:#666;width:6px;border-radius:4px}
}}


#wall p {
	/* die beiden folgenden Zeilen bestimmen die Einrueckung */
	padding:  0 .5em 0 3.4em;
	text-indent: -3.4em;
}


#uo {min-height:unset !important;}

#uo ul li {line-height:1.4em;}


#wall::-webkit-scrollbar, #user_pro_room::-webkit-scrollbar, #user::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 8px;height:8px;
  }
#wall::-webkit-scrollbar-thumb, #user_pro_room::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background-color: rgba(255, 255, 255, .4);
}
#user::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background-color: rgba(255, 255, 255, .4);
}

#wall::-webkit-scrollbar-corner, #user_pro_room::-webkit-scrollbar-corner, #user::-webkit-scrollbar-corner {
	background-color:transparent;
}


#wall::-webkit-resizer {
background-color: rgba(255, 255, 255, .4);
border-radius:1em;
}
#user::-webkit-resizer {
background-color: rgba(255, 255, 255, .4);
border-radius:1em;
}

#line {
	width: 45em;
	max-width: 74%;
	max-width: min(74%, 50vw);
	font-size:1em;
}
input#line {
	position: relative;
	top: -6px;
}
#line:focus{outline:none}


#ton {
	width: 0;
	height: 0;
}
#user{
	min-height: calc(60vh - 20em) !important; max-height: calc(60vh - 10em) !important;	overflow-y:scroll !important;
	max-width:unset !important;
	padding:2px 0;
}
#user ul, #user ul li {
	display: inline;
	display:block;	font-size:100%;
}
#user ul, #user_pro_room ul, #opt form p {
	padding: .2em 0 .25em 0;
}


#user_pro_room ul li {
	padding: 0;
	line-height: 1.45em;
}
* html #user_pro_room ul li {
	line-height: 1.45em;
}

#addsmileys {
	/*	float:left; */
	margin: 5px 0 0 5px;
}
object {
	margin: 5px;
}


dfn, .dot {
	position: absolute;
	left: -1000px;
	top: -1000px;
	width: 0;
	height: 0;
	overflow: hidden;
	display: inline;
}

#f {
	margin-left: 0;
}

#opt input[type=submit] {
	margin-top: 3px
}


/* so wills der IE */
input {
	color: #fff;
	padding: 1px 0 1px 3px;
	background: #464;
	border: 1px solid #888;
	cursor: pointer;
}
#reverse, #mehrzeilig, #datum, #uhr, #bilder, #avatar, #sound, #nickfarben,#nickfarben2, #time_online, #time_real {
	border: 0;
	background: transparent;
}

#line, #handle, #room {
	border: 1px solid #888;
	padding: 2px 0 2px 3px;
	color: #fff;
	background: #010e03;
	cursor: text;
}

label, select {
	cursor: pointer;
	margin-left: 4px;
	font-size: 1em;
}

.button, .away {margin-left:10px; border: 1px solid #999; background:#333; color:#eee; padding: 2px 4px; vertical-align: bottom;cursor:pointer}


#menu1, #menu2 {
	width: 65%;
	clear: both;
	margin: 5px 4px 0 0;
	padding:5px;
	background: black;
	color: #ccc;
	-webkit-appearance: none;
}


.uolist {
	display: none;
}
#file {
	background: transparent;
	border:none;
}


#upload {
	clear:left;
	margin: -.3em 5px 3px 6.4em;
	min-height:5em !important;
}



#wrapper fieldset legend {
	font-size: .8em;
	position: relative;
	top: 1.8em;
	left: -8.7em;
	color:#aaa;
}


#logout, .logout {
	text-align: center;
	margin: 4px 1px 4px 0;
	padding: 3px 8px;
	border: 2px outset #eee;
	background-color: transparent;
	max-width:23em;
	cursor:pointer;
}
.logout a {
	text-decoration: none;
}
#upload legend {
	color: #eee
}

#mp3 audio {
	margin-top: 3px;
	margin-left: 5px;
	width: 15em; 
	max-height:20px;
}

audio {
-webkit-filter: invert(1);
filter: invert(100%);
}
@-moz-document url-prefix() {
	audio {filter: invert(0);}
	#mp3 audio {max-height:30px;margin-top:0;}
}


a.mp3 {
	text-decoration: none;
	padding-left: 20px;
	background-image: url(img/audio_neg.gif) !important;
	background-repeat: no-repeat !important;
	background-position: 0 50% !important;
}
.hello {
	color: #888;
	font-size: 80%;
	font-style: italic;
	font-weight: bold;
}

a.stop {
	color: #ddd;
	border: 1px solid;
	text-decoration: none;
	font-size: 80%;
	padding: 0 2px;
}

.at, .whisper {
	color: gold;
	text-shadow:
	0 0 3px #fff,
	0 0 20px #fff,
	0 0 23px gold;
}

.av {
	width: 30px !important;
	object-fit: cover;
}

#ae {
	margin-bottom: .5em;
}


#nickname {
	color: red;
}

.yta {
	color: #aaa;
	font-weight: bold;
	font-family: Arial narrow;
	font-size: 1.2em;
}
.ytb {
	font-family: Arial narrow;
	background: #aaa;
	color: black !important;
	font-weight: bold;
	font-size: 1.2em;
	padding: 0 .2em;
	margin-left: .1em;
	border-radius: .4em;
}
iframe {
	background: #4e5548;
}
/* nur fuer Fehlermeldung chat_up_player erforderlich */

.tr {visibility:hidden}

#webradio {text-align:center;}
#audio-controls {margin-top: -24px;}
#vol-control{filter: invert(.7);}

input[type="image"] {cursor:pointer; padding: 2px 5px;border:1px solid #888;}
input[type="image"]:hover, input[type="image"]:focus { background: #222}
input[type="image"]:disabled {
	opacity:.4;
	cursor:default;
	background:transparent;
}
#popout_icon {filter:invert(1);}

.pin {
	background: #222;
	border:1px solid #ddd;
	top: -11px;
}