@import "compass/css3";
$black: #444444;
$white: #eeeeee;
$gray : #bbbbbb;
$red  : #d80f0b;
body {@include background-image(linear-gradient(#ffffff, #888888));}
#hello {
    width: 100%;
    height: 100%;
    @include background-image(linear-gradient(#ffffff, #888888));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    text-align: center;
    img {
        display: block;
        margin:0 auto;
        margin-top: 66px;
    }
}

#header {
    #help {
        margin:5px 0;
    }
}

#footer {
    #form {
        width       :395px;
        float       :left;
        margin-left :5px;
    }
    #validation {
        display     : none;
        margin-left : 5px;
    }
    #buttons {
        display     : none;
    }
    #send {
        margin      :5px 0;
    }
}

#chatForm {
    width            : 100%;
	height           : 100%;
    font-family      : monospace;
    @include box-sizing(border-box);
    #inital{
        height : 0;
    }
    .remark {
    	margin : 10px auto;
    	width  : 100%;
        height : 55px;
    	.top {
    		width  : 100%;
    		height : 52px;
			.image-cpu {
	            width         : 50px;
	 	        height        : 50px;
	       		border        : 1px solid $gray;
			    border-radius : 3px;
				float: left;
            }
	        .text-cpu {
            	text-shadow   : 0 0 5px #fff, 0 0 10px #fff;
            	margin-left   : 5px;
            	padding       : 5px;
            	border        : 1px solid $gray;
			    border-radius : 3px ;
                @include background-image(linear-gradient(#ffffff, #888888));
				float: left;
                margin-top    : 10px;
        	}
            .triangle-cpu {
            	margin        : 15px -5px;
    			width         : 0;
    			height        : 0;
    			border-top    : 10px solid transparent;
 				border-right  : 10px solid $gray;
    			border-left   : 10px solid transparent;
    			border-bottom : 10px solid transparent;
                float: left;
            }
			.image-user {
	            width         : 30px;
	 	        height        : 30px;
	       		border        : 1px solid $red;
			    border-radius : 3px;
				float: right;
            }
	        .text-user {
            	text-shadow   : 0 0 5px #fff, 0 0 10px #fff;
            	margin-right  : 5px;
            	padding       : 5px;
            	border        : 1px solid $red;
			    border-radius : 3px ;
                @include background-image(linear-gradient(#ffffff, $red));
				float: right;
        	}
    		.triangle-user {
            	margin        : 4px -5px;
    			width         : 0;
    			height        : 0;
    			border-top    : 10px solid transparent;
 				border-right  : 10px solid transparent;
    			border-left   : 10px solid $red;
    			border-bottom : 10px solid transparent;
                float: right;
            }
        }
        .bottom {
    
    		width      :100%;
			float      : left;
    		margin-top : 10px;
    		height     : 17px;
            .time {
    			width     : 100%;
    			font-size : 15px;
        		color     : $black;
    			text-align: center;
    	    }
        }
    }
}