/*
 * spa.chat.css
 * Chat feature styles
*/

.spa-chat {
  position      : absolute;
  bottom        : 0;
  right         : 0;
  width         : 25em;
  height        : 2em;
  background    : #fff;
  border-radius : 0.5em 0 0 0;
  border-style  : solid;
  border-width  : thin 0 0 thin;
  border-color  : #888;
  box-shadow    : 0 0 0.75em 0 #888;
  z-index       : 1;
}

.spa-chat-head, .spa-chat-closer {
  position      : absolute;
  top           : 0;
  height        : 2em;
  line-height   : 1.8em;
  border-bottom : thin solid #888;
  cursor        : pointer;
  background    : #888;
  color         : white;
  font-family   : arial, helvetica, sans-serif;
  font-weight   : 800;
  text-align    : center;
}

.spa-chat-head {
  left          : 0;
  right         : 2em;
  border-radius : 0.3em 0 0 0;
}

.spa-chat-closer {
  right : 0;
  width : 2em;
}
  .spa-chat-closer:hover {
    background : #800;
  }

.spa-chat-head-toggle {
  position      : absolute;
  top           : 0;
  left          : 0;
  width         : 2em;
  bottom        : 0;
  border-radius : 0.3em 0 0 0;
}

.spa-chat-head-title {
  position    : absolute;
  left        : 50%;
  width       : 16em;
  margin-left : -8em;
}

.spa-chat-sizer {
  position : absolute;
  top      : 2em;
  left     : 0;
  right    : 0;
}

.spa-chat-msgs {
  position : absolute;
  top      : 1em;
  left     : 1em;
  right    : 1em;
  bottom   : 4em;
  padding  : 0.5em;
  border   : thin solid #888;
  overflow-x : hidden;
  overflow-y : scroll;
}

.spa-chat-box {
  position : absolute;
  height   : 2em;
  left     : 1em;
  right    : 1em;
  bottom   : 1em;
  border   : thin solid #888;
  background : #888;
}

.spa-chat-box input[type=text] {
  float      : left;
  width      : 75%;
  height     : 100%;
  padding    : 0.5em;
  border     : 0;
  background : #ddd;
  color      : #404040;
}
  .spa-chat-box input[type=text]:focus {
    background : #fff;
  }

.spa-chat-box div {
  float       : left;
  width       : 25%;
  height      : 2em;
  line-height : 1.9em;
  text-align  : center;
  color       : #fff;
  font-weight : 800;
  cursor      : pointer;
}
  .spa-chat-box div:hover {
    background-color: #444;
    color      : #ff0;
  }

.spa-chat-head:hover .spa-chat-head-toggle {
  background : #aaa;
}
