@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
 display: block;
 }
 html{height:100%;}
 body {
 line-height: 1;
 min-height:100%;
 background:#111 url(images/bjk.png);
 margin:auto;
 font:12px Arial, Helvetica, sans-serif;
 text-align:center;
 }
 ol, ul {
 list-style: none;
 margin:0px;
 padding:0px;
 }
 blockquote, q {
 quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
 content: '';
 content: none;
 }
 table {
 border-collapse: collapse;
 border-spacing: 0;
 }

#container
{
	width: 70%;
    margin: 0 auto;
    height: 60%;
    position: absolute;
    left: 0;
    right: 0;
	top:50px;
}
#mediaplayer_wrapper
{
	width:100%;
	resize: both;
}
#mediaplayer
{
	border:#DDD solid 2px;
	border-radius:7px;
	color:#DDD;
}
#user
{
	color:#FFF;
	font-weight:bold;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background:#363;
	padding:2px;
	z-index:9;
	box-sizing: border-box;
}

#logon
{
	float:left;
	padding:3px;
}
#player-wrapper #list-container{
	background-color:white;
	height:480px;
	float: left;
  width: 25%;
  box-shadow: inset 1px 0px 6px 0 #673AB7;
}
#player-wrapper #list-container #list{
	height:450px;
	overflow-y:auto;
}
#player-wrapper #list-container #arabul{
	height:30px;
}
#player-wrapper #list-container #arabul input{
	padding: 3px 18px 3px 3px;
	width: 98%;
    box-sizing: border-box;
}
.clearable{
  position: relative;
  display: inline-block;
  top: 2px;
  width:100%;
}
.clearable i{
  display: none;
  position: absolute;
  right:0; top:0;
  padding: 3px 5px;
  font-style: normal;
  font-size: 1.4em;
  user-select: none;
  cursor: pointer;
}
.clearable input::-ms-clear {  /* Remove IE default X */
  display: none;
}
#player-wrapper #list a{
	display:block;
	text-decoration:none;
	color:black;
	font-size:13px;
	line-height:1.5em;
	padding: 1px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
#player-wrapper #list a:hover{
	background-color:#363;
	color:#FFF;
}
#player-wrapper #list a.playing{
	background-color:#ff8c00;
	color:#a0522d;
}
#player-wrapper{
	height: 510px;
  box-shadow: 0 0 15px 5px #639;
}
#player{
	float:left;
	width:75%;
}
#nowplaying{
 background-color:#532c99;
 font-size: 20px;
 font-weight: bold;
 font-family: arial;
 text-align:center;
 height:30px;
 line-height:30px;
 border-top: 1px solid #f00;
}
#nowplaying h1{
	float:left;
	width:75%;
	color:#fff;
	text-shadow:-1px -1px 2px #E91E63;
}
#nowplaying #controls{
	float:left;
	width:25%;
}
#controls span{
	color:white;
	font-size:30px;
	font-weight:bold;
	cursor:pointer;
}
#controls span:hover{
	color:blue;
}
#SohbetGenel
{
	width:90%;
	margin:20px auto;
	text-align:left;
}
#SohbetIcerik
{
	background:#FFF;
	padding:10px;
	border:3px solid #DDD;
	max-height:300px;
	overflow:auto;
}
#MesajGonder
{
	color: #FFF;
    margin-top: -5px;
    padding: 0 0.5%;
}

#MesajGonder textarea
{
	border: 2px solid #DDD;
    padding: 7px;
    width: 100%;
    resize: none;
    overflow: auto;
    color: #555;
    height: 65px;
    box-sizing: border-box;
}
#giris
{
	background:#FFF;
	border:3px solid #DDD;
	padding:5px;
	width:300px;
	margin:30px auto;
}
#giris span
{
	display:block;
	padding:3px;
}
#giris span input.giris_in
{
	border:1px solid #AAA; 
	padding:5px;
	width:280px;
}
.sohbetMesaji
{
	padding:7px 2px;
	border-bottom:1px solid #EEE;
}
.sohbetMesaji strong
{
	background:#000;
	color:#FFF;
	padding:2px 5px;
	font-size:14px;
	margin-right:10px;
}
.sohbetTemizle
{
	background:#FFF;
	border:2px solid #DDD;
	padding:5px;
	margin-top:-5px;
}

.sohbetTemizle a
{
	background:#656565;
	color:#FFF;
	font-size:14px;
	font-weight:bold;
	padding:2px 5px;
	text-decoration:none;
}

#menu {
	float:right;
	font-weight:bold;
}
#menu ul {
	padding:0;
	margin:0;
}
#menu ul li {
	list-style:none;
	float:left;
	display:block;
	background:#363;
	padding:4px 0;
}
#menu ul li a {
	padding:8px;
	text-decoration:none;
	color:#FFF;
}
#menu ul li a:hover {
	background:#633;
	padding:8px;
}
.clear{clear:both;}
.acik{display:block}
.yasak{display:none}
#sohbet{color:#FFF;font-weight:bold;padding:5px;}
#settings, #listekle{display:none;position:fixed;top:25px;right:0;background:#373;padding:10px;z-index:9;width:350px;}
#settings td {text-align:left;}
#listekle{bottom:0;}
.bslk{border-bottom:1px solid #999;text-align:center;color:#FFF;font-weight:bold;}
#boyutla{
	position:fixed;
	border-radius:0 0 8px 8px;
	background-color:#8CA28C;
	top:-20px;
	left:48%;
	z-index:10;
	cursor:pointer;
}
#boyutla:hover{
	top:0;
	transition: top .8s;
}
#boyutla > big {
	font-size:1.8em;
	color:#fff;
	font-weight:bold;
	padding:1px 3px;
	border-radius:0 0 8px 8px;
	width:18px;
	display:inline-block;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */
}
#boyutla > big:hover{
	background-color:#69B6BB;
}

/* Mobile */
@media only screen and (max-device-width: 481px) {
	#container{width:90%;height:50%;}
	#boyutla{display:none;}
	#menu:before{
	    content:'\039e';
	    display:block;
	    text-align:right;
	    font-size:18px;
	}
	#menu > ul{display:none;}
	#menu > ul li{float:none;}
	#menu:hover ul{
	    display:block;
	    transition:0.5s;
	}
}