.chatSpan{
    position: relative;
    left: 27px;
}

/* Yellow Chat Button */
.yellowChatButton {
  /* allowing italic or bold here would just artifically fatten/slant the weight */
  font-weight: normal;
  font-style: normal;
  font-size: 16px !important;
  line-height: 18px !important;
  display: table;
  width: 240px;
  float: right;
  text-transform: uppercase !important;
  text-align: auto;	
  left: 50px;
  height: 35px;
  background: #f0f0f0 url(/etc/designs/catDotCom/clientlibs/img/links-buttons/link-arrow-invert.png) right center no-repeat;
  background-color: #ffcd11;
  background-image: url(/etc/designs/catDotCom/clientlibs/img/button-images/chat-icon-black.png), url(/etc/designs/catDotCom/clientlibs/img/links-buttons/link-arrow-invert.png);
  background-position: 10px 50%, right;
  color: #000000 !important;
  border: 2px solid #ffdc58 !important;
  font-family: "UniversLTW01-67BoldCn", "Arial Narrow", Arial, sans-serif;
}

.yellowChatButton span {
  padding: 0 10px 0 10px;
  display: table-cell;
  vertical-align: middle;
}

.yellowChatButton:hover,
.yellowChatButton:active,
.yellowChatButton.active {
  color: #000000 !important;
  background-image: url(/etc/designs/catDotCom/clientlibs/img/button-images/chat-icon-black.png), url(/etc/designs/catDotCom/clientlibs/img/links-buttons/link-arrow-invert.png);
  background-position: 10px 50%, right;
  background-color: #ffdc58 !important;
  text-decoration: none !important;
  cursor:pointer;
  border: 2px solid #ffdc58 !important;  
}

@media screen and (max-width: 767px) {
    .chatFeature {
		float:left;
		width:240px;
    }
}
@media screen and (min-width: 767px) {
    .chatFeature {
		float:left !important;
		width:240px;
		height:40px;
		position:relative;
        top: 5px !important;        
		right:30px !important;
    }
}