@charset "utf-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
}
#login-form {
	margin:9% auto;
	max-width:500px;
}
/* home page */
#wrapper{
	padding-top:50px;
}





.message {
background:#fff url(images/bg.png) 50% 50% repeat;
color:#000;
position: absolute;
top: -350px;
left: 10px;
width: 300px;
height: 350px;
padding: 60px 20px 50px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: scroll;
box-sizing: border-box;
border:1px solid #000;
overflow-x:hidden;

}

.message h1 {
  color:#FFF;
}

#toggle {
  position:fixed;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggle + label {
  position:fixed;
  cursor:pointer;
  padding:0px;
  background: #26ae90;
  width: 200px;
  border-radius: 0px;
  padding: 8px 10px;
  color: #FFF;
  line-height:20px;
  font-size:12px;
  text-align:center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  margin:0px 0px 0px 10px;
  transition:all 500ms ease;
  left:0;
  bottom:0;
}
#toggle + label:after {
  content:"Who are Online?" 
}

.containers {
  transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#toggle:checked ~ .message {
  top: 0;
}

#toggle:checked ~ .containers {
  margin-top: 250px;
}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"Close"
}


#onlinePeople {
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 101;
}

#onlinePeople #onlinePeoplBtn {
    text-align: center;
    line-height: 40px;
    background: #fff;
    box-shadow: 1px 1px 2px #0003;
    margin-right: 5px;
    border-radius: 3px;
    float: left;
    height: 40px;
    width: 40px;
    opacity: .8;
}

.icon-vcard::before {
    content: "\63";
}
[class^="icon-"]::before, [class*=" icon-"]::before {
    font-family: "untitled-font-1" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
    display: inline-block;
}

.online-offline li{}