* { margin: 0px; padding: 0px; }
body {
	background: #f0f1f2;
	font:12px "Open Sans", sans-serif; 
}

#view-code{
  color:#89a2b5;    
  opacity:0.7;
  font-size:14px;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  position:absolute;top:660px;
  left:50%;margin-left:-50px;
  z-index:200;
}
#view-code:hover{opacity:1;}
#chatbox{
	width:100%;
	background:#fff;
	border-top-left-radius: 6px;
    border-top-right-radius: 6px;
	overflow:hidden;
}

#friendslist{
	position:absolute;
	top:0;
	left:0;
	width:290px;
	height:484px;
}
#topmenu{
	height:69px;
	width:290px;
	border-bottom:1px solid #d8dfe3;	
}
#topmenu span{
	float:left;	
	width: 96px;
    height: 70px;
    background: url("../img/top-menu.png") -3px -118px no-repeat;
}
#topmenu span.friends{margin-bottom:-1px;}
#topmenu span.chats{background-position:-95px 25px; cursor:pointer;}
#topmenu span.chats:hover{background-position:-95px -46px; cursor:pointer;}
#topmenu span.history{background-position:-190px 24px; cursor:pointer;}
#topmenu span.history:hover{background-position:-190px -47px; cursor:pointer;}
.friend{
	height:70px;
	border-bottom:1px solid #e7ebee;		
	position:relative;
}
.friend:hover{
	background:#f1f4f6;
	cursor:pointer;
}
.friend img{
	width:40px;
	border-radius:50%;
	margin:15px;
	float:left;
}
.floatingImg{
	width:40px;
	border-radius:50%;
	position:absolute;
	top:0;
	left:12px;
	border:3px solid #fff;
}
.friend p{
	padding:15px 0 0 0;			
	float:left;
	width:220px;
}
.friend p strong{
  font-weight:600;
  font-size:15px;
	color:#597a96;  

}
.friend p span{
	font-size:13px;
	font-weight:400;
	color:#aab8c2;
}
.friend .status{
	background:#26c281;
	border-radius:50%;	
	width:9px;
	height:9px;
	position:absolute;
	top:31px;
	right:17px;
}
.friend .status.away{background:#ffce54;}
.friend .status.inactive{background:#eaeef0;}
#search{
	background:#e3e9ed url("../img/search.png") -11px 0 no-repeat;
	height:60px;
	width:290px;
	position:absolute;
	bottom:0;
	left:0;
}
#searchfield{
	background:#e3e9ed;
	margin:21px 0 0 55px;
	border:none;
	padding:0;
	font-size:14px;
	font-family:"Open Sans", sans-serif; 
	font-weight:400px;
	color:#8198ac;
}
#searchfield:focus{
	 outline: 0;
}
#chatview{
	width:290px;
	height:484px;
	position:absolute;
	top:0;
	left:0;	
	display:none;
	background:#fff;
}
#profile{
	height:153px;
	overflow:hidden;
	text-align:center;
	color:#fff;
}
.p1 #profile{
	background:#fff url("../img/timeline1.png") 0 0 no-repeat;
}
#profile .avatar{
	width:68px;
	border:3px solid #fff;
	margin:23px 0 0;
	border-radius:50%;
}
#profile  p{
	font-weight:600;
	font-size:15px;
	margin:118px 0 -1px;
	opacity:0;
	-webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);	
}
#profile  p.animate{
	margin-top:97px;
	opacity:1;
	-webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);	
}
#profile  span{
	font-weight:400;
	font-size:11px;
}
#chat-messages{
	opacity:0;
	margin-top:30px;
	width:100%;
	height:100%;
	overflow-y:scroll;	
	overflow-x:hidden;
	padding-right: 20px;
	-webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
#chat-messages.animate{
	opacity:1;
	margin-top:0;
}
#chat-messages label{
	color:#aab8c2;
	font-weight:600;
	font-size:12px;
	text-align:center;
	margin:15px 0;
	width:290px;
	display:block;	
}
#chat-messages div.message{
	padding:0 0 30px 58px;
	clear:both;
	margin-bottom:25px;
	margin-top:2px;
}
#chat-messages div.message.right{
	  padding: 0 58px 25px 0;
	  margin-right: -19px;
	  margin-left: 19px;
}
#chat-messages .message img{
	  float: left;
	  margin-left: -38px;
	  border-radius: 50%;
	  border: 1px solid #c0c0c0;
	  width: 30px;
	  height: 30px;
	  margin-top: 1px;
}
#chat-messages div.message.right img{
	float: right;	
    margin-left: 0;
	margin-right: -38px;	
	border: 1px solid #c0c0c0;
}
.message .bubble{	
	background:#f0f4f7;
	font-size:13px;
	font-weight:600;
	padding:12px 13px;
	border-radius:5px 5px 5px 0px;
	color:#8495a3;
	position:relative;
	float:left;
	margin-bottom: 10px;
}
#chat-messages div.message.right .bubble{
	float:right;
	border-radius:5px 5px 0px 5px ;
}
.bubble .corner{
	background:url("../img/bubble-corner.png") 0 0 no-repeat;
	position:absolute;
	width:7px;
	height:7px;
	left:-5px;
	top: 5px;
}
div.message.right .corner{
	background:url("../img/bubble-cornerR.png") 0 0 no-repeat;
	left:auto;
	right:-5px;
}
.bubble span{
	  color: #aab8c2;
	  font-size: 11px;
	  position: absolute;
	  right: 0;
	  bottom: -22px;
}
#sendmessage{
	height:60px;
	border-top:1px solid #e7ebee;	
	position:relative;
	bottom:0;
	right:0px;
	width:100%;
	background:#fff;
	padding-bottm:50px;
}
#sendmessage textarea{
	border
}
#sendmessage textarea{
	position: absolute;
	width: 90%;
	height:40px;
	background:#fff;
	top: 10px;
	left: 10px;
	padding:0;
	font-size:14px;
	font-family:"Open Sans", sans-serif; 
	font-weight:400px;
    border : 0;
    overflow-y : auto; /* IE */
    resize : none; /* Firefox, Chrome */
}
#sendmessage textarea:focus{
	 outline: 0;
}
#sendmessage button{
	/*background:#fff url("../img/send.png") 0 -41px no-repeat;*/
	background:#fff;
	width:30px;
	height:30px;
	position:absolute;
	right: 15px;
	top: 15px;
	border:none;
	z-index: 2;
}
#sendmessage button:hover{
	cursor:pointer;
	background-position: 0 0 ;
}
#sendmessage button:focus{
	 outline: 0;	 
}

#chatview, #sendmessage { 
overflow:hidden; 
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}

#videoall {
    width: 100%;
	max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}
#video{
  max-width: 100%;
  top:0px;
  position: relative;
  /*max-height: 448px;*/
}
#videotitle{
	font-size:18px;
	font-weight:400px;
	padding: 10px;
}

#fullscreen {
    position: absolute;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    text-align: center;
    z-index: 1000001;
    opacity: 0.9;
    color: #fff;
}
#playico {
    width: 100%;
	height: 80%;
	top:10%;
    overflow: hidden;
    position:absolute;
    cursor: pointer;
    margin: 0 auto;
    text-align: center;
	z-index:1000000;
	opacity: 0.9;
}
#pauseico {
    width: 100%;
	height: 80%;
	top:10%;
    overflow: hidden;
    position:absolute;
    cursor: pointer;
    margin: 0 auto;
    text-align: center;
	z-index:1000000;
	opacity: 0.8;
}
.playend {
    width: 100%;
    position: absolute;
    font-size: 18px;
    color: #fff;
    margin: 0 auto;
    text-align: center;
    z-index: 1000000;
	font-weight: bold;
	opacity: 0.9;
}
.playend span{
   background-color: #FF0000;
   padding: 5px;
   border-radius: 4px;
}

#onlineall {
    width: 90px;
	height:25px;
    overflow: hidden;
    position:absolute;
	margin-left:10px;
    top: 10px;
    text-align: left;
	z-index:1000000;
	background-color:#000000;
	color:#FFF;
	border: 1px solid #ccc;
	border-radius: 4px;
	opacity: 0.5;
	font-size:13px;
}
#onlinetxt {
	padding-left: 5px;
	/*margin-top: 2px;
	line-height: 1.5;
	vertical-align:middle;*/
	margin: 0px auto;
	line-height: 23px;
}

#msgall {
    width: 100%;
	height:auto;
    max-width: 800px;
    margin: 0 auto;
    /*text-align: center;*/
}
.row0{
  margin-right: -2px;
  margin-left: -2px;
}

.norow{
 padding-right: 0px;
 padding-left: 0px;
}
.Delayplay {
    width: 100%;
    position: absolute;
    font-size: 18px;
    color: #fff;
    margin: 0 auto;
    text-align: center;
    z-index: 1000000;
	font-weight: bold;
	opacity: 0.9;
	top:30%;
}
@media (max-width: 767px) {
   .Delayplay {
	   top:15%;
   }
}
#uname{
    z-index: 1;
}
#new-messages{
    z-index: 1000000;
    position: fixed;
    bottom: 60px;
    font-size: 14px;
    background-color: #000;
    color: #FFF;
    opacity: 0.7;
    width: 60px;
    border-radius: 3px;
    line-height: 1.7;
    right: 10px;
}

#sendmessage textarea::placeholder {
	padding-top: 9px;
	font-size: 16px;
}
@media (max-width: 767px) {
   #sendmessage textarea::placeholder {
	   padding-top: 5px;
	   font-size: 18px;
   }
}


.listimg{
   width: 100%;
   height:200px;
   position:relative;
   overflow: hidden;
   cursor: pointer;
   text-align:center;
   background-repeat:no-repeat;
   border:1px #ccc solid;
   min-height: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-position: center;
}
.listimg img{
	position: relative;
    top: 70px;
    opacity: 0.7;
}
.listtitel {
   height: 50px;
   margin-bottom:10px;
   font-size:18px;
   overflow: hidden;
   /*white-space:nowrap;*/
   padding-top: 5px;
   padding-left: 3px;
   padding-right: 3px;
   line-height: 1.2;
}