@import url(https://fonts.googleapis.com/css?family=Sanchez);

/* Eric Meyer CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* CSS reset ends */


body,
input,
button{
    font-family: Sanchez, sans-serif;
    font-size: 16px;
    line-height: 1.2;
    
    /*Electrolize*/
}

.wrapper {
   max-width: 400px;
   margin: 0 auto;
}

#app-header{
    font-size: 300%;
    text-align: center;
    padding: 20px 0;
    color: rgb(121, 85, 72);
}

#chat-form{
  display: none;     
}


/*
chat container, adding a 500px 'depth' for the 3d translation
that will be applied to the child li elements.
*/

#chat-list {
    /* determines the depth. the smaller the number the more dramatic */
    -webkit-perspective: 500px;
    perspective: 500px;
}



/* The individual chat messages */
#chat-list li{
   position: relative;
   background: #f8f8f8;
   border-bottom: solid 1px #ddd;
   border-right: solid 1px #ddd;
   padding: 10px;
   margin-bottom: 5px;
}

#chat-list li::after{
   content: '';
   position: absolute;
   display: block;
   bottom: -8px;
   left: -8px;
   border: solid 8px transparent;
   border-top-color: #f8f8f8;
   width: 0;
   height: 0;
    
}



.hidden{
    display: none;
}

.wrapper{
    max-width: 400px;
    margin: 0 auto;
}

#app-header{
    font-size: 300%;
    text-align: center;
    padding: 20px 0;
    color: rgb(121, 85, 72);
}

#chat-form{
    display: none;
    margin-bottom: 60px;
}

/* 
    chat container, adding a 500px 'depth' for the 3d translation
    that will be applied to the child li elements
*/
#chat-list{
    -webkit-perspective: 500px;
    perspective: 500px;
}

/* the individual chat messages */
#chat-list li{
    position: relative;
    background: #e6e6e6;
    border-bottom: solid 1px #ddd;
    border-right: solid 1px #ddd;
    padding: 10px;
    margin-bottom: 5px;    
}

/* little triangle generated to make 
   box look like a speech bubble (on left side) */
#chat-list li::after{
    content: '';
    position: absolute;
    display: block;
    bottom: -8px;
    left: -8px;
    border: solid 8px transparent;
    border-top-color: #e6e6e6;
    width: 0;
    height: 0;
}

/* currentl local user's messages */
#chat-list li.local-user{
    /* background: red; */
}

/* little triangle generated to make 
   box look like a speech bubble (on right side) */
#chat-list li.local-user::after{
    right: -8px;
    bottom: -9px;
    left: auto;
}

/* shadow for speech bubble triangle  */
#chat-list li.local-user::before{
    content: '';
    position: absolute;
    display: block;
    bottom: -9px;
    right: -9px;
    border: solid 8px transparent;
    border-top-color: #ddd;
    width: 0;
    height: 0;
}



/* AVATARS */

.avatar {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    position: absolute;
    left: -35px;
    top: 5px;
}

li.local-user .avatar {
    right: -35px;
    left: auto;
}







/* chat form */

/* input field */
#chat-message-input{
    margin: 0;
    width: calc(100% - 120px);
    float: left;
    border: none;
    border-bottom: solid 1px #ddd;
    padding: 0 10px;
    line-height: 29px;
}

#chat-message-input:focus{
    outline: none;
}

/* submit button */
#chat-submit{
    margin: 0;
    width: 100px;
    border: none;
    background: #e0f7fa;
    color: rgb(121, 85, 72);
    cursor: pointer;
    float: left;
    line-height: 30px;
    padding: 0;
}


/*  Loading animation */

.loading {
   background: url(../images/stripes.png) repeat;
    background-position: 0 0;
    -webkit-animation: loading 0.5s linear infinite;
    animation: loading 0.5s linear infinite;
}



/* Animations */

@keyframes loading {
    0% {
       background-position: 0 0; 
    }
    100% {
        background-position: 10px 0px; 
    }
}
.fade-in{
    -webkit-animation: fade-in 0.666s ease;
    animation: fade-in 0.666s ease;
}

@-webkit-keyframes fade-in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes fade-in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.appear{
    -webkit-animation: appear 0.666s ease;
    animation: appear 0.666s ease;
}

@-webkit-keyframes appear{
    0%{
        opacity: 0;
        -webkit-transform: translateZ(-100px);
        transform: translateZ(-100px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateZ(0px);
        transform: translateZ(0px);
    }
}

@keyframes appear{
    0%{
        opacity: 0;
        -webkit-transform: translateZ(-100px);
        transform: translateZ(-100px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateZ(0px);
        transform: translateZ(0px);
    }
}