/* CSS fuer Skin 4 Black */

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: #b6a56a;
}

body {
	padding: 10px 10px 0 10px;
	background:#000; 	/* hier die Hintergrundfarbe fuer die Seite */
	max-width: 70em;
	margin: auto;
}



h1 {
	font-size:1.4em;
	line-height:125%;
	margin-left:.5em;
	background-image: linear-gradient(90deg,#7a7afb,red,yellow,green,purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #e1d097;
}
h1 span {color:#06AEFF}

h2 {
	font-size:.8em;
	line-height:125%;
}

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

/*.bg {background:#2a2a2a}*/

#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:#b6a56a}
a:focus, a:hover {background:transparent;}

#addsmileys a:hover {background:none}

#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: #b6a56a; }

#antenna img, #tiktok_logo, #antenna img {filter:invert(1);}

#topic, #topic_wdw {
margin:0 0 5px 10px;
}

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:20px 0 0 0;
}

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

/* Hides from IE-mac \*/
* html #opt {height: 1%;}
/* End hide from IE-mac */
/* End Op hacks */


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

.klein {
	font-size: .7em;
	margin: 0 0 .3em .3em;
}


#wall {
	height: 22em;
	resize:vertical;
	/* background-color: rgba(0,0,0,0.6); */ /* Paranoia - damit man den Scrollbutton sieht */	
	/* -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;
	margin: 0 10px 0 0;
    padding: 0 0 .7em .3em;
	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 */
}


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


#wall .nick, #wall .nk {
	font-weight:900;
}


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

#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(182, 165, 106, .7);
}
#user::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background-color: rgba(182, 165, 106, .7);
}

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


#wall::-webkit-resizer {
background-color: rgba(182, 165, 106, .7);
border-radius:1em;
}
#user::-webkit-resizer {
background-color: rgba(182, 165, 106, .7);
border-radius:1em;
}

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




#ton {
	width: 0;
	height: 0;
}
#user{
	min-height: calc(60vh - 20em) !important; max-height: calc(60vh - 2em) !important;	overflow-y:scroll !important;
	max-width:unset !important;
	padding:2px 0;
}

#user ul {margin-top:.5em}

#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 15px;
}
object {margin: 3px 0 0 3px;}


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



#f {margin-left:10px;}

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

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

/* so wills der IE */
#talk input, .rooms input {
       color:#fff;
       background:#333;
       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:#000;
       cursor:text;
}

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

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

#menu1, #menu2, #room {width:65%; clear:both;}

#menu1, #menu2 {background: black;color: #ccc;	margin: 5px 4px 0 0; padding:3px;-webkit-appearance: none}


.uolist {display:none;}


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

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



#logout, .logout {
        text-align:center;
        margin:4px 0;
        padding:3px 8px;
        border: 2px outset #b6a56a;
        background-color: #000;
		cursor:pointer;
		/* max-width:18em; */		
}
.logout a {text-decoration:none;}


.button {padding: 3px; margin-left:3px; bottom:7px !important}
.helplinks {position:relative;}
.helplinks p, .helplinks p a {background: black; color:#b6a56a}
.helplinks p a:focus,
.helplinks p a:hover,
.helplinks p a:active
 {background: #00a; text-decoration:none}

#mp3 {margin-left: .6em;}


#upload legend {color:#b6a56a}

#mp3 audio {
	margin-top: 4px;
	margin-left: 0;
	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: red !important; font-size: 80%; font-style:italic; font-weight:bold;}

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

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


#r_player, #player  {width: 92%;margin: 15px 0 !important}

#radio {text-align:center;}
#player_0 embed {max-width: 100%; outline:0; margin: 0 auto;}

#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:#aaa; max-width:92%;} 

.tr {visibility:hidden}

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

#background_video {
	position: fixed;
	left: 0;
	min-height: 102%;
	z-index: -100;
	/*    background: url(img/pixabay_Fireplace1971.mp4) no-repeat; */
	object-fit: cover;
}


#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: #555}
input[type="image"]:disabled {
	opacity:.4;
	cursor:default;
	background:transparent;
}
#popout_icon {filter:invert(1);}
#wdw_logo {filter:invert(1)}

.pin {
	background: #222;
	border:1px solid #b6a56a;
}