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;
}

        h3 {
            text-align: center;
        }

        hr {
            width: 80%;
            color: green;
            margin-left: 0;
        }

        .user_name {
            color: rgb(16, 45, 178);
        }

        .bot_name {
            color: rgb(204, 0, 0);
        }

        #shameless_plug, #urlwarning {
            position: absolute;
            right: 10px;
            bottom: 10px;
            border: 1px solid red;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-shadow: 2px 2px 2px 0 #808080;
            padding: 5px;
            border-radius: 5px;
        }

        #urlwarning {
            right: auto;
            left: 10px;
            width: 50%;
            font-size: large;
            font-weight: bold;
            background-color: white;
        }

        .leftside {
            text-align: right;
            float: left;
            width: 48%;
        }

        .rightside {
            text-align: left;
            float: right;
            width: 48%;
        }

        .centerthis {
            width: 90%;
        }

        #chatdiv {
            margin-top: 20px;
            text-align: center;
            width: 100%;
        }

        p.center {
            text-align: center;
        }

        hr.center {
            margin: 0 auto;
        }

        #convo_id {
            position: absolute;
            top: 10px;
            right: 10px;
            border: 1px solid red;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-shadow: 2px 2px 2px 0 #808080;
            padding: 5px;
            border-radius: 5px;
        }

        hr.thick {
            border-bottom: 3px solid black;
            box-shadow: 3px 3px 8px -1px #696969;
            margin: 1.5em auto;
        }

        .m0a {
            margin: 0 auto;
        }
        #conversation {
            border: 1px solid black;
            border-radius: 1em;
            padding: 1em;
            margin: 0.5em auto;
            min-height: 4em;
            max-height: 20em; /* Adjust this as you see fit. */
            overflow: auto;
        }
        .input {
            color: #B22222;
            font-weight: bold;
        }
        .response {
            color: #0000CD;
            font-weight: bold;
        }