style.css

/*CSS RESET BY MEYERWEB | http://meyerweb.com/eric/tools/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}

body{
    background-color: #54556e;
    font-family: 'Oswald', sans-serif;
}
.button{
    font-size: 16px;
    font-family: sans-serif;
    height: 38px;
    line-height: 40px;
    width: 125px;
    margin: 0px 5px 20px 5px;
    display: inline-block;
    text-align: center;
    border-radius: 10px;
    border: 0;
    transition: background-color .15s ease-in-out;
    background-color: #51c3d5;
    cursor: pointer;
}
.button:hover{
    background:#1194a9;
}
.button a{
    cursor: hand;
}
/***********************
    Header Styling
************************/
#header{
    height: 50px;
    width: 100%;
    background-color: #40415a;
    text-align: center;
}
#header #left{
    margin-top: 14px;
    width: 33%;
    float: left;
    color: #F5F5F5;
    font-size: 23px;
}
#header #middle{
    width: 33%;
    margin-top: 7px;
    float: left;
}
#header #middle img{
    border-radius: 50%;
    height: 35px;
    width: 35px;
    margin: 0px 5px 0px 0px;
}
#header #middle span{
    color: #F5F5F5;
    font-size: 25px;
    margin-top: -28px;
    display: inherit;
    margin-left: 125px;
}
#header #right{
    width: 33%;
    float: right;
}
#header #right span{
    display: inline-block;
    color: #F5F5F5;
    padding: 0px 10px;
    height: 100%;
    line-height: 50px;
}
#header #right span:hover{
    background-color: #333348;
}
#header #right a{
    text-decoration: none;
    color: black;
}
/************************
    Home Page Styling!
************************/
#container #home #left{
    float: left;
    width: 58%;
}
#container #home #left img{
    width: 100%;

  /* this section calls the dropHeader animation we defined above */
  animation-name: FadeIn;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 3s;
}
#container #home #right{
    float: right;
    width: 42%;
    color: #F5F5F5;
    text-align: center;
}
#container #home #right h1{
    font-size: 36px;
    margin: 100px 0px 36px 0px;
      /* this section calls the dropHeader animation we defined above */
  animation-name: FadeIn;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 1s;
}
#container #home #right span{
    color: #9e9ea9;
    line-height: 19px;
      /* this section calls the dropHeader animation we defined above */
  animation-name: FadeIn1;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 3s;
}
#buttons{
    display: block; 
    margin-top: 15px;

      /* this section calls the dropHeader animation we defined above */
  animation-name: FadeIn2;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 3s;
}

.IndexButton{
    font-size: 25px;
    font-family: sans-serif;
    color: #F5F5F5;
    height: 66px;
    line-height: 66px;
    width: 240px;
    margin: 0;
    display: inline-block;
    text-align: center;
    border-radius: 10px;
    border: 0;
    text-decoration: none;
    transition: background-color .15s ease-in-out;
    background-color: #51c3d5;
}
/***********************
    rooms page container!
***********************/
#rooms #container{
    text-align: center;
    margin-top: 25px;
}

/*************************
    Login Page Styling
**************************/
#loginForm{
    width: 50%;
    margin: 100px auto;
}
#loginForm input[type=text], #loginForm input[type=password]{
    color: #F5F5F5;
    padding: 0px 10px;
    border: 1px solid rgba(0,0,0,.4);
    background:rgba(0,0,0,.15);
    border-radius: 7px;
    display: block;
    width: 550px;
    height: 50px;
    margin: 10px auto;
}
#loginForm input[type=submit]{
width: 275px;
    height: 50px;
    border-radius: 7px;
    margin: 10px auto;
    display: block;
    padding: 25px;
    color: #F5F5F5;
    line-height: 4px;
    border: 1px solid #0b4750;
    background-color: #51c3d5;
    outline: none;
    font-size: 20px;
    font-weight: 700;
}

/*******************************
    Register Form Styling!
*******************************/
#registerForm{
    width: 50%;
    margin: 100px auto;
}
#registerForm input[type=text], #registerForm input[type=password],#registerForm input[type=email]{
    color: #F5F5F5;
    padding: 0px 10px;
    border: 1px solid rgba(0,0,0,.4);
    background:rgba(0,0,0,.15);
    border-radius: 7px;
    display: block;
    width: 550px;
    height: 50px;
    margin: 10px auto;
}
#registerForm input[type=submit]{
width: 275px;
    height: 50px;
    border-radius: 7px;
    margin: 10px auto;
    display: block;
    padding: 25px;
    color: #F5F5F5;
    line-height: 4px;
    border: 1px solid #0b4750;
    background-color: #51c3d5;
    outline: none;
    font-size: 20px;
    font-weight: 700;
}

/*************************
    Room List Styling!
**************************/
#roomContainer{
    width: 80%;
    margin: auto;
    color: #F5F5F5;
}
#roomContainer #roomListSelect{
    padding: 10px;
    border-radius: 7px;
    background-color: rgba(0,0,0,.1);
    color: #F5F5F5;
    border: 1px solid rgba(0,0,0,.3);
    font-size: 18px;
    outline: none;
    cursor: pointer;
}
#roomContainer #roomListSelect option{
    background-color: rgba(0,0,0,.3);
}
#roomContainer a{
    color: inherit;
    text-decoration: none;
}
#roomContainer .room{
    height: 300px;
    width: 400px;
    text-align: center;
    background-color: #4d4e67;
    border-radius: 7px;
    display: inline-block;
    margin: 10px 20px;
    border: 1px solid rgba(0,0,0,.3);
    transition: background-color .15s ease-in-out;
}
#roomContainer .room:hover{
    cursor: hand;
    background: #40415a;
}
#roomContainer .room #name{
    display: block;
    border-bottom: 1px solid rgba(0,0,0,.3);
    background-color: #40415a;
    padding: 10px;
}
#roomContainer .room #users{
    display: block;
    font-family: sans-serif;
}
#roomContainer .room img{
    border-radius: 50%;
    height: 200px;
    width: 200px;
    margin: 20px 0px;
    border: 1px solid rgba(0,0,0,.3);
}
/************************
    Room Page Styling!
************************/
#messagesIframe{
    height: 88%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll
}
#input{
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 8%;
}
#input input[type=text]{
    height: 100%;
    width: 95%;
    padding: 0px 10px;
    font-size: 18px;
    background: rgba(0,0,0,.3);
    border: 0;
    outline: none;
    color: #F5F5F5;
}
#input input[type=submit]{
    height: 100%;
    width: 5%;
    float: right;
    border: 0;
    background: #51c3d5;
    color: #F5F5F5;
    font-size: 20px;
}
/******************************
    Messages Page Styling!
******************************/
#messages{
    margin: 20px;
}
.message{
    width: 100%;
    display: inline-block;
    padding: 5px;
}
.message span{
    max-width: 20%;
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 18px;
    font-family: sans-serif;
    word-wrap: break-word;
}
.message :after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    z-index: -1;
    border: 10px solid;
}
.message .inbound{
    float: left;
    background-color: #71f442;
}
.message .inbound:after {
    left: 24px;
    margin-top: 10px;
    transform: rotate(113deg);
    border-color: transparent transparent #71f442 #71f442;

}
.message .outbound{
    float: right;
    background-color: #e5e5e5;
}
.message .outbound:after {
    right: 7px;
    margin-top: 3px;
    transform: rotate(25deg);
    border-color: transparent transparent #e5e5e5 #e5e5e5;
}
/********************
    Error Styling
*********************/
#error{
    width: 80%;
    text-align: center;
    color: #F5F5F5;
    margin: 50px auto;
}
#error h1{
    font-size: 36px;
    font-weight: bold;
}
#error h2{
    margin: 10px 0px;
    color: #a4a4b3;
}
#error span{
    display: block;
    margin: 10px 0px;
    font-family: sans-serif;
}
#error strong{
    font-weight: bold;
}
#error .button{
    text-decoration: none;
    color: #000000;
}

/******************
    Scroll Bar
*******************/
::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
  border-radius: 7px;
}


/*********************
    Animations Home
*********************/

@keyframes FadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes FadeIn1 {
    0% {
        opacity: 0;
    }
    20%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes FadeIn2 {
    0% {
        opacity: 0;
    }
    50%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}