/*body {height:3000px}*/

.chat-box {
  font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif;

  width: 18%;
  right: 1%;
  bottom:0;
  background-color:white;
  color:#333;
  border:1px solid #344150;
  border-bottom:none;
  z-index:9999;
  position:fixed;
  -webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  box-shadow:1px 1px 5px rgba(0,0,0,.2);
}

.chat-box > input[type="checkbox"] {
  display:block;
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:3em;
  z-index:4;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
}

.chat-box > label {
  display:block;
  height:3em;
  line-height:3em;

  background-color:#344150;
  color:white;
  font-weight:bold;
  
  padding: 0 1em;
}

.chat-box > label:before {content:attr(data-collapsed)}

.chat-box .chat-box-content {
  /*padding:10px;*/
  display:none;
}

.chat-box .chat-box-content ul {
}

.chat-box .chat-box-content ul li {
  width: 100%;
  height: 2.6em;
  background:url("../img/online.png") no-repeat;
  background-position: left center;
  float:left;
  font-weight:bold;
  padding: 0.7em 0px 0px 2.2em;
  text-decoration: none;
  color: #666;
  font-size: 1.2em;
  font-family: sans-serif;
}
.chat-box .chat-box-content ul li {
}

.chat-box .chat-box-content ul li:hover {
  cursor: pointer;
  background-color: #e6e6e6;
}

/* hover state */
.chat-box > input[type="checkbox"]:hover + label {background-color:#404D5A}

/* checked state */
.chat-box > input[type="checkbox"]:checked + label {background-color:#212A35}
.chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)}
.chat-box > input[type="checkbox"]:checked ~ .chat-box-content {display:block}