@font-face {
    font-family: 'Fontelo';
    src: url('/resources/fontelo.eot');
    src: url('/resources/fontelo.eot?#iefix') format('eot'),
         url('/resources/fontelo.woff') format('woff'),
         url('/resources/fontelo.ttf') format('truetype'),
         url('/resources/fontelo.svg#webfontkw9J4lGG') format('svg');
    font-weight: normal;
    font-style: normal;
}
input[type='text'],input[type='number'],textarea {font-size:16px;}
body{
	overflow:hidden;
	background:#ededed;
}
.fontelo{
    font-weight: normal;
    font-style: normal;
    font-family: 'Fontelo', sans-serif;
}
#widget{

}
#header{
	position:relative;
	width:100%;
	height:65px;
	background-color:#202528;
    border-bottom: 2px solid #222;
}
#header .avatar{
	position:absolute;
	top:4px;
	left:5px;
	width:55px;
	height:55px;
	border:1px solid #555;
    border-radius: 3px;
	background-position:50% 50%;
	background-size: 55px 55px;
	background-repeat:no-repeat;
}
#header .no-avatar{
	background-image:url(../images/nouser-50.png);
}
#header .input-hldr {
    position:absolute;
    top:10px; left:70px;
    bottom: 35px;
    right: 55px;
    background-color:#202528;
}
#header textarea{
    background:transparent;
    width: 100%;
    height: 30px;
    resize: none;
    border:none;
    font-size: 90%;
    color:#efefef;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
}
#header .details{
	position:absolute;
	top:36px;
	left:73px;
    bottom:5px;
    right: 5px;
}
#header .details a.login,
#header .details a.logout{
	text-decoration:none;
    margin-left:10px;
	color:#efefef;
	padding-left:18px;
	font-weight:bold;
	font-size:11px;
	display:none;
	background:url(../images/fblogin-mini.png) no-repeat  0 0;
	background-size: 14px 14px;
}
#header .details .caption{
	display: inline;
	font-size:12px;
	color:#efefef;
	text-shadow:0 -1px -1px #000;
	font-weight:bold;
	height:27px;
	line-height:28px;
}
#header .details .caption a.logout{
	text-decoration:none;
	color:#999;
	display:none;
	font-size:14px;
	vertical-align: middle;
}
#header a.send{
	position:absolute;
	top:10px;
	right:11px;
	height:24px;
	width:40px;
	color:#fff;
	font-weight:bold;
	line-height:25px;
	font-size:11px;
	text-align:center;
	text-decoration:none;
	background:#555;
	z-index:100;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}
#header a.send:active{
	background:#999;
}
#stream-holder{
	height:300px;
	width:100%;
	overflow-y:auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling:touch
}
.stream-ad a{
	text-decoration:none;
	color:#222;
}
.stream-msg .msg a{
	color:#4183C4;
}
li.stream-item{
    padding:0 !important;
    position:relative;
    min-height:75px;
    line-height: 1.3em;
    text-shadow:0 1px 1px #fff;

    border-bottom:1px solid #D6D6D6;
	border-top:1px solid #fff;
}
li.stream-song{
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f1ef), to(#ededed));
    background-image:-moz-linear-gradient(top, #fafafa, #ededed);
    background-image:-o-linear-gradient(top, #fafafa, #ededed);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#ededed')";
    max-height:45px;
    min-height:45px;
}
li.stream-song .artwork{
    position:absolute;
    top:5px; right:5px;
    width:30px; height:30px;
    background:url(/images/noart-45.png) no-repeat 50% 50%;
    background-size: 30px 30px;
    border:2px solid #fff;
    -webkit-box-shadow:0px 0px 1px #888;
    -moz-box-shadow:0px 0px 1px #888;
    -o-box-shadow:0px 0px 1px #888;
    box-shadow:0px 0px 1px #888;
}
li.stream-song .icon{
    position:absolute;
    top:0; left:5px;
    vertical-align:middle;
    line-height:45px;
    font-size:20px;
    color:#ccc;
}
li.stream-song .info{
    height:45px;
    white-space: nowrap;
    padding:4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right:50px;
    margin-left:32px;
    font-weight:normal;
    line-height:1.1em;
}
li.stream-song .info .title{
    font-weight:bold;
    font-size: 90%;
    display:inline;
}
li.stream-song .info .artist{
    font-size:85%;
    display:inline;
}
li.stream-song .info .timestamp{
    color:#888;
    font-size:80%;
    display:block;
}




li.stream-msg{
    min-height:75px;
    background-color:#FAFAFA;
    background-image:none;
}
li.stream-msg .avatar{
    position:absolute;
    top:9px; left:5px;
    width:45px; height:45px;
    background:url(/images/nouser-50.png) no-repeat 50% 0;
    background-size: 45px 45px;
    border:1px solid #efefef!important;
    border-radius: 3px;
}
li.stream-msg .type-icon{
    width:16px; height:16px;
    position:absolute;
    top:45px!important;
    left:38px!important;
    background-repeat: no-repeat;
    background-image: url(/images/social-icons.png);
}
li .type-android{
    background-position:0 0;
}
li .type-facebook{
    background-position:0 -20px;
}
li .type-twitter{
    background-position:0 -40px;
}
li .type-ios{
    background-position:0 -60px;
}
li .type-voice{
    background-position:0 -80px;
}
li .type-sms{
    background-position:0 -100px;
}
li .type-web{
    background-position:0 -120px;
}
li .type-dj,
li .type-DJ{
    background-position:0 -140px;
}
li .type-desktop{
    background-position:0 -160px;
}
li .type-instagram{
    background-position:0 -180px;
}
li.stream-msg .info{
    padding:8px 10px 8px 10px;
    margin-left:57px;
    font-weight:normal;
    overflow-x: hidden;
}
li.stream-msg .info .caption{
    font-weight:bold;
    font-size: 95%;
    color:#333;
}
li.stream-msg .info .msg{
    font-size:90%;
    line-height:1.3em;
    margin-bottom:3px;
}
li.stream-msg .info .reply-to{
    font-size:80%;
    margin-bottom:5px;
    color:#777;
    padding-left:4px;
    border-left:1px solid #ccc;
}
li.stream-msg .info .reply-to .reply-content{
    line-height:1.3em;
}
li.stream-msg .info .media{
    display:block;
}
li.stream-msg .info a.voicemail{
    width:32px;
    height:32px;
    text-decoration:none;
}
li.stream-msg .info .media img{
    padding:3px;
    -webkit-box-shadow:0 0 1px #888;
}
li.stream-msg .info .media-tap img{
    -webkit-box-shadow:0 0 1px #000;
}
li.stream-msg .info .timestamp, li.stream-msg .info .network{
    color:#888;
    font-size:80%;
}
li.stream-tap{
    background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
    background-image:-moz-linear-gradient(top, #666, #333);
    background-image:-o-linear-gradient(top, #666, #333);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#333333')";
}
li.stream-tap .info,
li.stream-tap .info .timestamp,
li.stream-tap .info .caption,
li.stream-tap .info .network{
    color:#fff;
    text-shadow:none;
}

li.stream-ad{
    background:#FFF8EB;
    text-decoration:none;
    text-shadow: none;
}
li.ad-tap{
    background:#fff;
}
li.stream-ad .image{
    position:absolute;
    top:9px; right:5px;
    width:55px; height:55px;
    border:3px solid #fff;
    -webkit-box-shadow:0px 0px 1px #888;
    -moz-box-shadow:0px 0px 1px #888;
    -o-box-shadow:0px 0px 1px #888;
    box-shadow:0px 0px 1px #888;
}
li.stream-ad a .info{
    padding:12px 10px 8px 10px;
    margin-right:65px;
    margin-left:22px;
    font-weight:normal;
}
li.stream-ad a .info .title{
    font-weight:bold;
    font-size: 90%!important;
    color:#333;
}
li.stream-ad .info .msg{
    color:#888;
    font-size: 85%!important;
}

/* Song voting */
.voting,
.vote-alert{
    display:none;
    z-index:1001;
    background:url(/images/trans.png);
    position:absolute;
    top:-1px;
    left:0;
    width:100%;
    height:46px;
    padding:0px 47px 0px 42px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
.voting table{
    margin:0;
    width:100%;
}
.voting td div{
    margin:0px 2px;
    width:100%;
    height:45px;
    border-right:1px solid #272727;
    border-left:1px solid #272727;
    /*background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
    background:-moz-linear-gradient(top, #666, #333);
    background:-o-linear-gradient(top, #666, #333);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#333333')";*/
}
.voting td div.green{
    background: #00FF00;
    /*background: -webkit-gradient(linear, left top, left bottom, from(#00FF00), to(#008B00));
    background:-moz-linear-gradient(top, #00FF00, #008B00);
    background:-o-linear-gradient(top, #00FF00, #008B00);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00', endColorstr='#008B00')";*/
}
.voting td div.red{
    background: #FF0000;
    /*background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#CD0000));
    background:-moz-linear-gradient(top, #00FF00, #CD0000);
    background:-o-linear-gradient(top, #00FF00, #CD0000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00', endColorstr='#CD0000')";*/
}
.voting td div.mid{
    background: #222;
    /*background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#222));
    background:-moz-linear-gradient(top, #333, #222);
    background:-o-linear-gradient(top, #333, #222);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222')";*/
}
.voting .thumb{
    position:absolute;
    text-decoration:none;
    display:block;
    top:0px;
    height:46px;
    width:46px;
    line-height:45px;
    text-align:center;
    font-size:28px;

}
.voting .thumb:active{

}
.voting .thumbup{
    right:0px;
    color:#00FF00;
}
.voting .thumbup:before{
    content: "👍";
    text-shadow:0 1px 1px #111;
}
.voting .thumbdown{
    left:0px;
    color:#ff2a0b;
}
.voting .thumbdown:before{
    content: "👎";
    text-shadow:0 1px 1px #111;
}
.vote-alert{
    color:#fff;
    text-shadow:0 0 1px #000;
    font-weight:bold;
    text-align:center;
    width:100%;
    line-height:46px;
    display:none;
}
.info .preview-holder{
    position:absolute;
    top:10px; right:5px;
    width:60px; height:70px;
    background:#333;
    border:1px solid #000;
    -webkit-border-radius:5px 5px 0 0;
    -moz-border-radius:5px 5px 0 0;
    border-radius:5px 5px 0 0;
}