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: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
ol, ul {
list-style: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
q, blockquote {
quotes: none; }
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
a img {
border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block; }
body {
font-family: arial, sans-serif;
font-size: 16px;
font-style: normal;
background: url(../img/wood.jpg) center top repeat;
color: #4e4e4e; }
#users {
position: fixed;
top: 25px;
left: 0;
bottom: 0;
background: url(../img/bg.png);
width: 65px;
-webkit-box-shadow: 0px 0px 30px black inset;
-moz-box-shadow: 0px 0px 30px black inset;
box-shadow: 0px 0px 30px black inset; }
#users div{
width: 250px;
color: #FFF;
}
#users img {
vertical-align:middle;
margin: 5px;
position: relative;
-webkit-animation-name: "fadeInUp";
-moz-animation-name: "fadeInUp";
-ms-animation-name: "fadeInUp";
-o-animation-name: "fadeInUp";
animation-name: "fadeInUp";
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-box-shadow: 0px 0px 10px black inset, 0px 1px 0px rgba(255, 255, 255, 0.1);
-moz-box-shadow: 0px 0px 10px black inset, 0px 1px 0px rgba(255, 255, 255, 0.1);
box-shadow: 0px 0px 10px black inset, 0px 1px 0px rgba(255, 255, 255, 0.1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; }
#room {
position: fixed;
left: 0;
right: 0;
top: 0;
background: url(../img/bg.png);
height: 25px;
-webkit-box-shadow: 0px 0px 30px black inset;
-moz-box-shadow: 0px 0px 30px black inset;
box-shadow: 0px 0px 30px black inset;}
#room span{
line-height: 25px;
color: #FFF;
padding-left: 5px;
padding-right: 5px;
}
#form {
position: fixed;
left: 65px;
right: 0;
bottom: 0;
background: #d2d2d2;
height: 50px; }
#form .text {
padding: 0 5px;
border: solid 1px #d2d2d2;
height: 32px;
position: fixed;
bottom: 9px;
left: 74px;
right: 9px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px #d2d2d2 inset;
-moz-box-shadow: 0px 1px 3px #d2d2d2 inset;
box-shadow: 0px 1px 3px #d2d2d2 inset; }
#form .submit {
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #e6e6e6;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #bbbbbb;
*border: 0;
border-bottom-color: #a2a2a2;
*margin-left: .3em;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
position: fixed;
height: 32px;
bottom: 9px;
right: 9px;
cursor: pointer; }
#messages {
position: fixed;
top: 25px;
left: 65px;
right: 0px;
bottom: 30px;
overflow: scroll;
background: url("../img/wood.jpg") repeat scroll center top transparent;
padding: 10px;
box-shadow: 0 0 30px black outset; }
#messages .message {
display: block;
position: relative;
background-color: #FFF;
border-bottom: 1px solid #d2d2d2;
padding: 10px;
z-index: 20;
-webkit-animation-name: "fadeInRight";
-moz-animation-name: "fadeInRight";
-ms-animation-name: "fadeInRight";
-o-animation-name: "fadeInRight";
animation-name: "fadeInRight";
-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
-ms-animation-duration: 0.4s;
-o-animation-duration: 0.4s;
animation-duration: 0.4s; }
#messages .message:after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
right: 0;
background-color: #FFF;
height: 1px;
z-index: 10;
border-bottom: 1px solid #d2d2d2; }
#messages .message:before {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
background-color: #FFF;
height: 1px;
z-index: 10;
border-bottom: 1px solid #d2d2d2; }
#messages img {
position: absolute;
display: block;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
box-shadow: 0px 0px 10px black inset; }
#messages .info {
margin-left: 65px; }
#messages strong {
font-weight: bold;
color: #4e4e4e;
font-size: 14px; }
#messages p {
margin-bottom: 10px;
font-size: 14px; }
#messages .date {
font-size: 12px;
color: #ababab;
position: absolute;
top: 10px;
right: 10px; }
#messages .sep {
height: 20px; }
#msgtpl {
display: none; }
#login {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2000; }
#login #loginform {
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: -55px;
text-align: center; }
#login #loginform input {
color: #FFF;
border: 1px solid rgba(0, 0, 0, 0.4);
background-color: rgba(0, 0, 0, 0.4);
height: 30px;
outline: none;
padding: 0 5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1);
-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1);
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1); }
#login #loginform input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.4);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s; }
#login #loginform input:focus::-webkit-input-placeholder {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; }
#login h1 {
font-size: 50px;
color: #FFF; }
#login p {
color: #FFF;
font-size: 16px;
padding: 20px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7; }
@-moz-keyframes fadeInUp {
0% {
-moz-transform: translateY(20px);
transform: translateY(20px);
opacity: 0; }
100% {
-moz-transform: translateY(0);
transform: translateY(0);
opacity: 1; } }
@-webkit-keyframes fadeInUp {
0% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
opacity: 0; }
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1; } }
@-o-keyframes fadeInUp {
0% {
-o-transform: translateY(20px);
transform: translateY(20px);
opacity: 0; }
100% {
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1; } }
@-ms-keyframes fadeInUp {
0% {
-ms-transform: translateY(20px);
transform: translateY(20px);
opacity: 0; }
100% {
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1; } }
@keyframes fadeInUp {
0% {
transform: translateY(20px);
opacity: 0; }
100% {
transform: translateY(0);
opacity: 1; } }
@-moz-keyframes fadeInRight {
0% {
-moz-transform: translateX(20px);
transform: translateX(20px);
opacity: 0; }
100% {
-moz-transform: translateX(0);
transform: translateX(0);
opacity: 1; } }
@-webkit-keyframes fadeInRight {
0% {
-webkit-transform: translateX(20px);
transform: translateX(20px);
opacity: 0; }
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1; } }
@-o-keyframes fadeInRight {
0% {
-o-transform: translateX(20px);
transform: translateX(20px);
opacity: 0; }
100% {
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1; } }
@-ms-keyframes fadeInRight {
0% {
-ms-transform: translateX(20px);
transform: translateX(20px);
opacity: 0; }
100% {
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1; } }
@keyframes fadeInRight {
0% {
transform: translateX(20px);
opacity: 0; }
100% {
transform: translateX(0);
opacity: 1; } }