#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:310px;
    background:#fff;
    border-radius:6px;
    overflow:hidden;
    height:800px;
    position:absolute;
    top:0px;
    left:50%;
    margin-left:-155px;
}

#friendslist{
    position:absolute;
    top:0;
    left:0;
    width:310px;
    height:800px;
}
#topmenu{
    height:69px;
    width:310px;
    border-bottom:1px solid #d8dfe3;    
}
#topmenu span{
    float:left; 
    width: 96px;
    height: 70px;
    /*background: url("../images/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("../images/search.png") -11px 0 no-repeat;*/
    height:60px;
    width:310px;
    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:400;
    color:#8198ac;
}

#searchfield:focus{
     outline: 0;
}

#chatview{
    width:310px;
    height:800px;
    position:absolute;
    top:0;
    left:0; 
    display:none;
    background:#fff;
}

#profile{
    height:153px;
    overflow:hidden;
    text-align:center;
    color:#818181;
	border-bottom:1px solid #e7ebee;
    padding-bottom: 20px;
}

.p1 #profile{

}

#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.chatAnimate{
    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:310px;
    height:586px;
    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.chatAnimate{
    opacity:1;
    margin-top:0;
}
#chat-messages label{
    color:#aab8c2;
    font-weight:600;
    font-size:12px;
    text-align:center;
    margin:15px 0;
    width:310px;
    display:block;  
}
#chat-messages div.message{
    padding:0 0 30px 58px;
    clear:both;
    margin-bottom:45px;
}
#chat-messages div.message.right{
      padding: 0 58px 40px 0;
      margin-right: -19px;
      margin-left: 19px;
}
#chat-messages .message img{
      float: left;
      margin-left: -38px;
      border-radius: 50%;
      width: 30px;
      margin-top: 12px;
}
#chat-messages div.message.right img{
    float: right;   
    margin-left: 0;
    margin-right: -38px;    
}
.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;
}
#chat-messages div.message.right .bubble{
    float:right;
    border-radius:5px 5px 0px 5px ;
}
.bubble .corner{
    background:url("../images/bubble-corner.png") 0 0 no-repeat;
    position:absolute;
    width:7px;
    height:7px;
    left:-5px;
    bottom:0;
}
div.message.right .corner{
    background:url("../images/bubble-cornerR.png") 0 0 no-repeat;
    left:auto;
    right:-5px;
}
.bubble span{
      color: #aab8c2;
      font-size: 11px;
      position: absolute;
      right: 0;
      bottom: -22px;
}


#mssPrompt {
    width: 310px;
    /* height: 30px;*/
    /*background-color: #f44336;*/
    text-align: center;
    color: white
}

.modal-mssPrompt {
    width: 100%;
    /* height: 30px;*/
    /*background-color: #f44336;*/
    text-align: center;
    color: white;
    display:none;
}

.modal-sendmessager {
    height: 100%;
    width: 100%;
}

.modal-sendmessager .separator {
    border-bottom: 1px dashed #e7ebee;
    padding-top: 20px;
}

.modal-sendmessager input {
    border: 0px;
}

.modal-sendmessager input {
    background: #fff;
    margin: 21px 0 0 21px;
    border: none;
    padding: 0;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    color: #aab8c2;
}

.modal-sendmessager textarea:focus {
    outline: 0;
}

.formularyContact {
    height: 100%;
    width: 100%;
}

.modal-sendmessager textarea {
    border: 0px;
    width: 95%;
}

.modal-sendmessager textarea {
    background: #fff;
    margin: 21px 0 0 21px;
    border: none;
    padding: 0;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    color: #aab8c2;
}

.modal-sendmessager textarea:focus {
   outline: 0;
}


.formValid {
    background-color: #00a750;
}

.formError {
    background-color: #f44336;
}

.formNotComplete {
    background-color: #fabd13;
}

#sendmessager{
    height:60px;
    /*border-top:1px solid #e7ebee;  */ 
    position:absolute;
    right:0px;
    width:310px;
    background:#fff;
    padding-bottom:50px;
}

#sendmessager .separator {
  border-bottom: 1px dashed #e7ebee;
  padding-top: 20px;
}

#sendmessager input{
  border:0px;
}

#sendmessager input{
    background:#fff;
    margin:21px 0 0 21px;
    border:none;
    padding:0;
    font-size:14px;
    font-family:"Open Sans", sans-serif; 
    font-weight:400;
    color:#aab8c2;
}

#sendmessager textarea:focus{
   outline: 0;
}


    #sendmessager textarea {
        border: 0px;
        height: 282px;
        width: 280px;
    }

#sendmessager textarea {
  background: #fff;
  margin: 21px 0 0 21px;
  border: none;
  padding: 0;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  color: #aab8c2;
}

#sendmessager textarea:focus {
  outline: 0;
}

#sendmessager button{
    background:#fff url("../images/send.png") 0 -41px no-repeat;
    width:30px;
    height:30px;
    position:absolute;
    right: 15px;
    top: 23px;
    border:none;
}

#sendmessager button:hover{
    cursor:pointer;
    background-position: 0 0;
}

#sendmessage button:focus{
     outline: 0;     
}

#closeChat{
    position:absolute;
    top: 8px;   
    opacity:0.8;
    right: 10px;
    width:20px;
    height:20px;
    cursor:pointer;
}
#closeChat:hover{
    opacity:1;
}
.cx, .cy{
    background:#fff;
    position:absolute;
    width:0px;
    top:15px;
    right:15px;
    height:3px;
    -webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
        -ms-transition: all 250ms ease-in-out;
         -o-transition: all 250ms ease-in-out;
            transition: all 250ms ease-in-out;
}
.cx.s1, .cy.s1{ 
    right:0;    
    width:20px; 
    -webkit-transition: all 100ms ease-out;
       -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ms ease-out;
         -o-transition: all 100ms ease-out;
            transition: all 100ms ease-out;
}
.cy.s2{ 
    -ms-transform: rotate(50deg); 
    -webkit-transform: rotate(50deg); 
    transform: rotate(50deg);        
    -webkit-transition: all 100ms ease-out;
       -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ms ease-out;
         -o-transition: all 100ms ease-out;
            transition: all 100ms ease-out;
}
.cy.s3{ 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg);        
    -webkit-transition: all 100ms ease-out;
       -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ms ease-out;
         -o-transition: all 100ms ease-out;
            transition: all 100ms ease-out;
						background: #CECBCB;
}
.cx.s1{ 
    right:0;    
    width:20px; 
    -webkit-transition: all 100ms ease-out;
       -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ms ease-out;
         -o-transition: all 100ms ease-out;
            transition: all 100ms ease-out;
}
.cx.s2{ 
    -ms-transform: rotate(140deg); 
    -webkit-transform: rotate(140deg); 
    transform: rotate(140deg);       
    -webkit-transition: all 100ms ease-out;
       -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ease-out;
         -o-transition: all 100ms ease-out;
            transition: all 100ms ease-out;
}
.cx.s3{ 
    -ms-transform: rotate(135deg); 
    -webkit-transform: rotate(135deg); 
    transform: rotate(135deg);       
    -webkit-transition: all 100ease-out;
       -moz-transition: all 100ms ease-out;
        -ms-transition: all 100ms ease-out;
         -o-transition: all 100ms ease-out;
            transition: all 100ms ease-out;
			background: #CECBCB;
}
#chatview, #sendmessage { 
overflow:hidden; 
border-radius:6px; 
}