Всем привет. 
Решил изменить вид чата на такой:



Но получается вот так:




То есть сам чат залезает под полоску навигации и хотелось бы убрать расстояние где отметил красными крестиками.

Код CSS

 

/*CHAT*/

.timenew {
    float: right;
    color: #565a5a;
    padding-left: 30px;
    padding-right: 9px;
    line-height: 28px;
    margin-top: 6px;
    background-image: -webkit-linear-gradient(right,#252525, rgba(255,255,255,0));
  margin-right: -4px;
}
.chat_row:after {
    content: '';
    display: block;
    border-top: 0px solid transparent;
    border-bottom: 25px solid rgb(35, 35, 35);
    border-right: 25px solid rgba(41, 41, 41, 0);
    border-left: 25px solid rgba(41, 41, 41, 0);
    position: absolute;
    left: -14px;
    top: 30px;
    -webkit-transform: rotate(-226deg);
    border-width: 15px;
}
.ipsUserPhoto:after {
    border: 3px solid rgba(255,255,255,0.15);
}
.chat_row .ipsPhotoPanel > .ipsUserPhoto {
    position: relative;
    display: block;
    background: #2d2d2d;
    padding: 3px;
    border: 0;
    left: -70px;
    top: -3px;
}
.ipsPad_half1 {
    margin-left: -400px;
    padding: 5px 5px 0px 3px;
    line-height: 1.7;
}
.chat_row {
    width: auto;
    background: rgba(41, 41, 41, 0.55);
    border: 0;
    margin: 5px 5px 5px 65px;
    border-radius: 6px;
    position: relative;
}
/*CHAT END*/
 

Код chatbox.css

 

.smile-bny {
    position: absolute;
    right: -5px;
    padding: 0 10px 0 10px !important;
    height: 26px !important;
    font-size: 18px;
    line-height: 27px;
    background: rgb(35, 35, 35);
}
.vol-bny {
    position: absolute;
    bottom: 6px;
    right: 40px;
    padding: 0 10px 0 10px !important;
    height: 26px !important;
    line-height: 24px !important;
    font-size: 12px;
    line-height: 28px;
    padding: 0 15px;
    background: rgb(35, 35, 35);
}
.vol-bny-fal {
    position: absolute;
    bottom: 6px;
    right: 5px;
    padding: 0 10px 0 10px !important;
    height: 26px !important;
    line-height: 24px !important;
    font-size: 12px;
    line-height: 28px;
    padding: 0 15px;
    background: rgb(35, 35, 35);
}
#chatboxWrap {
    height: 300px;
    overflow-y: scroll;
    resize: vertical;
background: #1c1c1c;
}

.bimcb_chatArea {
	/*padding: 4px; background: #fff; */
}

#cbInput_container { position:relative; padding:0; margin:0; }


#input_img {
    position: absolute;
    bottom: 6px;
    right: 80px;
    padding: 0 10px 0 10px !important;
    height: 26px !important;
    line-height: 24px !important;
}
#chat_button {
    position: absolute;
    bottom: 6px;
    right: 114px;
    padding: 0 10px 0 10px !important;
    height: 26px !important;
    line-height: 24px !important;
}
.bimcb_chatInput {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 2px;
    height: 36px;
    padding: 8px 90px 8px 8px !important;
    border: none !important;
    background: transparent;
    opacity: 0.5;
}
.ipsDataList:not( .ipsGrid ) .ipsDataItem:last-child, .ipsDataList.ipsDataList_zebra > .ipsDataItem {
    border-bottom: 0px solid #252525 !important;
}
.bimcb_chatInput :focus {
	border: none !important;
	outline: 0 !important;
}

#cbInput_container input:focus {
	border: none !important;
	outline: 0 !important;
}

.cbEmoList {
	float: left; 
	width: 55px; 
	height: 55px; 
	text-align: center;
}

.cbEmoList img {
	cursor: pointer; cursor: hand;
}

#elChatbox {
  background: {theme="section_title"};
  color: {theme="section_title_font"};
}	

#elChatboxBar > li > a {
	color: #000;
}
	#elChatboxBar > li > a:not( .ipsTabs_activeItem ) {
		background: rgba(225,225,225,0.2);
		color: {theme="section_title_font"};
	}

.cbTabSmall { font-size: 12px !important; padding-right: 8px !important; padding-left: 8px !important; }

.ipsWidget.ipsWidget_horizontal[data-blockid^="app_bimchatbox"] {
	padding: 5px !important;
}

.ipsWidget.ipsWidget_horizontal div[data-controller="bimChatBoxMain"] {
	margin-top: -20px;
}

@media screen and (max-width: 767px) {
	#elChatboxBar > li > a:not( .ipsTabs_activeItem ) {
		color: #52585f;
		background: #fff;
	}

	#elChatboxBar {
		margin-right: 150px;
		font-size: 13px !important;
	}	

	#elChatboxBar a { font-size: 13px !important; }
	
	#cbexpandTabs
	{
		margin-right: 150px !important;
		left: 100px !important;
	}	
}

.manaButtonSmall a { color: #fff; line-height: 30px; }

 

UP!)
Проблема с выползанием чата решена)
Осталось еще убрать расстояние между аватаркой и самим текстом. Есть идеи у кого нибудь?)