/*----------- header elements -----------*/
#chatdiv .center_header {
  text-align: left;
}

.chat_content_div{ /* Background etc. ChatStream | Hindergrund etc. des ChatStreams */
  overflow-x: auto;
  overflow-y: visible;
  font-size: 12px;
  padding: 0 4px;

}

#content {
  height: calc(100vh - 242px);
}

.cwelcome {
  padding-top:5px;
  margin-bottom:5px;
  display: block;
}

.system_view{ /* View in Chat | Systemanzeigen im Chat */
  font-size: 75%;
}

#text_input_div{ /* Container vom Input und Sendebutton */
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background: rgb(110, 30, 30);
  font-size:12px;
  margin:0 auto;
  overflow:auto;
  height:68px;
}

#text_container{ /* UserControlArea | Benutzer-Kontrollbereich */
  height:30px;
  padding: 5px 0 0 4px;

}

#text_container  input.button {
  margin: 0 auto;
  cursor: pointer;
  padding: 0px;

}

#text_petition {
  width: 96%;
  float:left;
}

#text_petition input[type="text"]{
  margin: 0 auto;
}

#scrollSwitch{
  width: 4%;
  height:30px;
  text-align: right;
  padding-top: 3px;
  float:right;
}

.scrollcon_on{
        background:url(../image/sys/icon_scroll_on.png) no-repeat;
        padding:2px 8px 0px 10px;
}

.scrollcon_off{
        background:url(../image/sys/icon_scroll_off.png) no-repeat;
        padding:2px 8px 0px 10px;
}

#controls_container{ /* UserControlArea | Benutzer-Kontrollbereich */
  height:25px;
  padding-left: 4px;

}

#controls_container select[type="text"]{
  margin: 0 auto;
}

.icon_button{
  background-color: transparent;
  background-position: 0px 0px;
  border: none;
  cursor: pointer;
  margin-left: 2px;
  margin-bottom:4px;
}

.assigned{
  cursor: pointer;
  padding: 1px;
  color: #FFFFFF;
  font-weight:bold;
  background: rgba(63,73,88,1);
  background: -moz-linear-gradient(top, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(63,73,88,1)), color-stop(100%, rgba(92,105,126,1)));
  background: -webkit-linear-gradient(top, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  background: -o-linear-gradient(top, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  background: -ms-linear-gradient(top, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  background: linear-gradient(to bottom, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4958', endColorstr='#5c697e', GradientType=0 );
}

.assigned:hover{
  color: rgba(63,73,88,1);
  background: #FFFFFF;
}

.chatlink{
  cursor: pointer;
  color: #0000EE;
}

.chatlink:hover{
  cursor: pointer;
  color: #0000EE;
  text-decoration: underline;
}

#usercolorbox{
  background:#346;
  border:3px solid #121212;
  border-radius: 10px;
  min-width:120px;
  z-index:999;
  position:absolute;
  overflow:auto;
  font-size: 13px;
  padding: 4px;
  color: #000;
}

#chatcolorbox{
  background:#346;
  border:3px solid #121212;
  border-radius: 10px;
  min-width:120px;
  z-index:999;
  position:absolute;
  overflow:auto;
  font-size: 13px;
  padding: 4px;
  color: #000;
}

#colorbox{
  background:#346;
  border:3px solid #121212;
  border-radius: 10px;
  min-width:120px;
  z-index:999;
  position:absolute;
  overflow:auto;
  font-size: 13px;
  padding: 4px;
  color: #000;
}

.talk_to {
  color: red;
}

.mess_time {
  font-size: 8px;
  font-style: italic;
}

/* ---------------- OnlineStatusbox ------------ */
#onlinestatusbox{
  background:#346;
  border:3px solid #121212;
  border-radius: 10px;
  min-width:120px;
  z-index:999;
  position:absolute;
  overflow:auto;
  font-size: 13px;
  padding: 4px;
  color: #000;
  height: 122px;
}

[class*='ost'] {
  color: #FFFFFF;
  height: 18px;
  font-weight:bold;
  border-radius: 4px;
  background: rgba(83,93,108,1);
  background: -moz-linear-gradient(top, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(63,73,88,1)), color-stop(100%, rgba(92,105,126,1)));
  background: -webkit-linear-gradient(top, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  background: -o-linear-gradient(top, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  background: -ms-linear-gradient(top, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  background: linear-gradient(to bottom, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4958', endColorstr='#5c697e', GradientType=0 );
  cursor:pointer;
  margin: 3px auto;
}

[class*='ost']:hover{
  color: rgba(63,73,88,1);
  background: #FFFFFF;
}

[class*='ost']:before {
  padding-right: 5px;
  height: 16px;
  vertical-align: middle;
  background-size:16px 16px;
}

.ost1:before {
  content: url(../image/sys/icon_online_1.png);
}

.ost2:before {
  content: url(../image/sys/icon_online_2.png);
}

.ost3:before {
  content: url(../image/sys/icon_online_3.png);
}

.ost4:before {
  content: url(../image/sys/icon_online_4.png);
}

/* OsbHref GO */
.closeonlbox{
  margin: 15px auto 0;
  text-align: center;
  cursor: pointer;
  padding: 1px;
  color: #FFFFFF;
  font-weight:bold;
  border-radius: 4px;
  background: rgba(63,73,88,1);
  background: -moz-linear-gradient(top, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(63,73,88,1)), color-stop(100%, rgba(92,105,126,1)));
  background: -webkit-linear-gradient(top, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  background: -o-linear-gradient(top, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  background: -ms-linear-gradient(top, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  background: linear-gradient(to bottom, rgba(63,73,88,1) 0%, rgba(92,105,126,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4958', endColorstr='#5c697e', GradientType=0 );
}

.closeonlbox:hover{
  color: rgba(63,73,88,1);
  background: #FFFFFF;
}

#onlinestatusbox .field {
  padding: 3px 1px;
  cursor: pointer;
}

#onlinestatusbox .field:hover {
  background: #FFFFFF;
}

.contexthead{
  padding: 3px 0 3px 0;
  font-weight:bold;
  text-align: center;
  color: rgb(221,221,221);
  background: rgb(110, 30, 30);
  font-size: 13px;
}

.userlistcontextmenu{
  background:#346;
  border:3px solid #121212;
  border-radius: 10px;
  width:150px;
  overflow:auto;
  font-size: 12px;
  padding: 0px;
}

.userlistcontextmenu ul li {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  background:#346;
  padding: 3px 1px;
  cursor: pointer;
}

.userlistcontextmenu ul li:hover {
  background: rgb(110, 30, 30);
}

.userlistcontextmenu ul li:not(#ucmclose):not(#acmclose):before {
  content: url(../image/sys/bull.gif);
  padding-right: 5px;
}

.userlistcontextmenu ul li:not(#ucmclose):not(#acmclose):hover:before {
  content: url(../image/sys/bull2.gif);
}

#ucmclose{
  text-align: center;
  cursor: pointer;
  color: #FFFFFF;
  font-weight:bold;
  background: rgb(110, 30, 30);
  font-size: 13px;
}

#acmclose{
  text-align: center;
  cursor: pointer;
  color: #FFFFFF;
  font-weight:bold;
  background: rgb(110, 30, 30);
  font-size: 13px;
}

.pmholder {
  background:#D3FFE9;
  border:1px solid #ccc;
  margin-bottom:3px;
  padding:0px;
  cursor:pointer;
  border-radius: 4px;
}

.pmholder:hover{
  border:1px solid #aaa;
  background:#eeeeff;
}

[class*='olli_'] {
  height: 13px;
  vertical-align: middle;
  background-size:13px 13px;
}

[class*='olli_']:before {
  padding-right: 1px;
}
.olli_whis_icon:before {
  content: url(../image/sys/bubble.png);
  float:left;
  margin-top: 1px;
}

.olli_male_icon:before {
  content: url(../image/sys/icon_male.png);
}

.olli_fermale_icon:before {
  content: url(../image/sys/icon_female.png);
}

.olli_unisex_icon:before {
  content: url(../image/sys/icon_unisex.png);
}

.olli_online_icon_1:before {
  content: url(../image/sys/icon_online_1.png);
}

.olli_online_icon_2:before {
  content: url(../image/sys/icon_online_2.png);
}

.olli_online_icon_3:before {
  content: url(../image/sys/icon_online_3.png);
}

.olli_online_icon_4:before {
  content: url(../image/sys/icon_online_4.png);
}

.think{
  border: 1px solid #999;
  margin: 1px 2px 1px 0px;
}

.think._a {
  border-radius: 3px;
  display:inline-block;
  width: 5px;
  height: 5px;
}

.think._b {
  border-radius: 4px;
  display:inline-block;
  width: 7px;
  height: 7px;
}

.think._c {
  border-radius: 6px;
  display:inline-block;
  width: 9px;
  height: 9px;
}

.think._d {
  border-radius: 8px;
  display:inline-block;
  padding-right: 7px;
  padding-left: 5px;
}

#colorbox table{
}

#colorbox td{
  border: 1px solid #000; 
  width: 12px;
  height:12px;
  cursor:pointer;
}

#colorbox td:hover{
  border: 1px solid #fff; 
}