body{
		font-family: sans-serif; 
		font-size:12px;
        background: white;
	}

	.man {
		background:url("small_man.png");
		height:194px;
		width:133px;
		float:left;
		}

	.dog {
		background:url("small_dog.png");
		height:198px;
		width:278px;
		float:right;
        clear: both;
		}

	.manspeech {
		position:relative;
		display:block;
		min-height:14px;
        min-width: 150px;
        max-width: 600px;
        max-height: 100px;
        width: auto;
        height: auto;
        margin-top: 186px;
		}

	.dogspeech {
		float:right;
		position:relative;
		display:block;
		min-height:14px;
        min-width: 250px;
        max-width: 400px;
        width: auto;
        height: auto;
        margin-top: 186px;/**/
        margin-right: 20px;
		}

	.botsay{
	    overflow: auto;
      	color:red;
      	font-weight:bold;
        height: 100%;
        width: 100%;
        max-height: 100px;
	}

	.usersay{
	    overflow: auto;
      	max-height: 150px;
      	color:green;
      	font-weight:bold;
	}

	.centerthis {
		margin: 0 auto;
		width:450px;
		}	
	.clearthis {
		clear:both;
		}





/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border, .triangle-border-right {
	padding:5px;
	margin:0.5em 0 1em;
	color:#333;
	background:#fff;
	/* css3 */
	border:5px solid #5a8f00;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	position: absolute; bottom: 0;
	width:100%;
    height: auto;
    box-sizing: border-box;
}

.blue{
	border:5px solid lightblue;
}

.orange{
	border:5px solid orange;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
	margin-left:3px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border-right {
	margin-right:3px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border:before, .triangle-border-right:before {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:40px; /* controls horizontal position */
    border-width:20px 20px 0;
	border-style:solid;
    border-color:#000 transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}
.triangle-border-right:before {
  left: auto;
  right: 40px;
}


.blue:before {
	border-color:lightblue transparent;
}

.orange:before {
	border-color:orange transparent;
}



/* creates the smaller  triangle */
.triangle-border:after, .triangle-border-right:after {
	content:"";
	position:absolute;
	bottom:-13px; /* value = - border-top-width - border-bottom-width */
	left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	border-width:13px 13px 0;
	border-style:solid;
	border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}
.triangle-border-right:after {
  left: auto;
  right: 47px;
}