 input {
	padding: 5px;
	font-size: 10px;
	text-shadow: 0px 1px 0px #fff;
	outline: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #ccc;
	-webkit-transition: .3s ease-in-out;
  	-moz-transition: .3s ease-in-out;
  	-o-transition: .3s ease-in-out;
}

	input:focus {
		border: 1px solid #fafafa;
		-webkit-box-shadow: 0px 0px 6px #007eff;
		-moz-box-shadow: 0px 0px 5px #007eff;
		box-shadow: 0px 0px 5px #007eff;
	}
	
   .chat {
  font-family: Arial;
  font-size: 11px;
  padding: 10px;
  border: 1px solid #aaa; 
  width: 300px;
  height: 400px;
  overflow: scroll;
  }

  .bubble {
    background-color: #F2F2F2;
    border-radius: 5px;
    border: 1px solid #bbb;
    box-shadow: 0 1px 6px #B2B2B2;
    display: block;
    padding: 10px 18px;
    margin: 1em 18px;
    position: relative;
    vertical-align: top; }

    .tail {
      position: absolute;
      height: 18px;
      width: 18px;
      overflow: hidden; }
      .tail:before {
        border: 1px solid #bbb;
        background-color: #F2F2F2;
        box-shadow: 0 1px 6px #B2B2B2;
        content: "\00a0";
        display: block;
        position: absolute;
        top: 0px;
        height: 12px;
        width: 12px; }

.bubble.left {
  text-align: left; }
  .bubble.left .tail {
    top: 12px;
    left: -18px; }
    .bubble.left .tail:before {
      left: 12px;
      -webkit-transform: skewX(-45deg);
      -moz-transform: skewX(-45deg);
      -o-transform: skewX(-45deg); }

.bubble.right {
  text-align: right; }
  .bubble.right .tail {
    top: 12px;
    right: -18px; }
    .bubble.right .tail:before {
      right: 12px;
      -webkit-transform: skewX(45deg);
      -moz-transform: skewX(45deg);
      -o-transform: skewX(45deg); }

      