@charset "UTF-8";

@font-face {
  font-family: 'distant_galaxyregular';
  src: url('distant_galaxy_2-webfont.eot');
  src: url('distant_galaxy_2-webfont.eot?#iefix') format('embedded-opentype'),
       url('distant_galaxy_2-webfont.woff') format('woff'),
       url('distant_galaxy_2-webfont.ttf') format('truetype'),
       url('distant_galaxy_2-webfont.svg#distant_galaxyregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'penultimatelightregular';
  src: url('penulli_-webfont.eot');
  src: url('penulli_-webfont.eot?#iefix') format('embedded-opentype'),
       url('penulli_-webfont.woff') format('woff'),
       url('penulli_-webfont.ttf') format('truetype'),
       url('penulli_-webfont.svg#penultimatelightregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'cp-icons';
  src: url("cp-icons.eot");
  src: url("cp-icons.eot#iefix") format('embedded-opentype'), url("cp-icons.woff") format('woff'), url("cp-icons.ttf") format('truetype'), url("cp-icons.svg#cp-icons") format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before,
[class*=" icon-"]:before, .icon-shemale:after {
  font-family: 'cp-icons';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: 0.1em;
}

.icon-star:before { content: '\2605'; color:#FFFF00;}
.icon-heart:before { content: '\2665'; color:#FF0000;}
.icon-pencil:before { content: '\270e'; }
.icon-male:before { content: '\e07b'; color:#0000FF;}
.icon-group:before { content: '\e091'; }
.icon-female:before { content: '\e098'; color:#FF00FF;}
.icon-shemale:before { content: '\e098'; color:#880088;}
.icon-shemale:after { content: '\e07b'; color:#000088; position:relative;top:0px;left:-1.2em;}
.icon-user-add:before { content: '\e700'; }
.icon-compass:before { content: '\e728'; }
.icon-trash:before { content: '\e729'; }
.icon-emo-happy:before { content: '\e800'; }
.icon-emo-wink:before { content: '\e801'; }
.icon-emo-unhappy:before { content: '\e802'; }
.icon-emo-sleep:before { content: '\e803'; }
.icon-emo-devil:before { content: '\e805'; }
.icon-emo-surprised:before { content: '\e806'; }
.icon-emo-tongue:before { content: '\e807'; }
.icon-emo-sunglasses:before { content: '\e809'; }
.icon-emo-displeased:before { content: '\e80a'; }
.icon-emo-grin:before { content: '\e80c'; }
.icon-emo-angry:before { content: '\e80d'; }
.icon-emo-saint:before { content: '\e80e'; }
.icon-emo-cry:before { content: '\e80f'; }
.icon-emo-laugh:before { content: '\e812'; }
.icon-chat:before { content: '\f03d'; }
.icon-magic:before { content: '\f0d0'; }
.icon-reply:before { content: '\f112'; }
.icon-bell:before { content: '🔔';  color:#FFFF00;}
.icon-link:before { content: '🔗'; }
.icon-clock:before { content: '🕔'; }

.icon-alpha:before { content: '\03B1'; font-family:normal;}
.icon-beta:before { content: '\03B2'; font-family:normal;}
.icon-Alpha:before { content: '\03B1'; font-family:normal;}
.icon-Beta:before { content: '\03B2'; font-family:normal;}
.icon-ceta:before { content: '\03C2'; font-family:normal;}
.icon-vanilla:before { content: 'v'; font-family:normal;}

PRE{
  white-space: pre-wrap;
}

BODY{
  background-image:url('topbar.png');
  background-repeat:no-repeat;
  background-position:center top;
  background-color:black;
  color:white;
}

.header{
  position:absolute;
  left:10px;
  top:10px;
  font-family:'distant_galaxyregular';
  font-size:60px;
  height:120px;
}
.headerbar{
  background-color:#363636;
  height:2px;
  width:100%;
  position:absolute;
  left:0px;
  top:120px;
}
.main{
  position:absolute;
  top:122px;
  bottom:0px;
  left:0px;
  right:0px;
}
.content{
  position:absolute;
  left:9em;
  right:10em;
  bottom:0px;
  top:0px;
}

.userlist{
  position:absolute;
  width:10em;
  right:0px;
  top:0px;
  bottom:0px;
  border-left:1px solid #363636;
}

.content,.userlist{
  overflow-y: auto;
  overflow-x: hidden;
}

.menu{
  position:absolute;
  left:0.5em;
  top:0.5em;
  width:8.5em;
  bottom:0px;
  overflow-y:hidden;
  overflow-x:auto;
}
.menu A,.menu A:visited,.menu A:active{
  font-family: 'penultimatelightregular';
  font-size:1.2em;
  line-height:1.5em;
  text-align:center;
  height:1.5em;
  width:6em;
  text-decoration:none;
  color:white;
  display:block;
  margin-bottom:0.2em;
  border-radius:3px;
  overflow:hidden;
}
.menu A:hover{
  color:#76cff7;
  border:2px solid #76cff7;
}
.menu A.disabled,.menu A.disabled:visited,.menu A.disabled:active, .menu A.disabled:hover{
  color:#333333;
  text-decoration:line-through;
  border:2px solid #363636;
}

.login{
  font-family: 'penultimatelightregular';
  width:9em;
  margin-bottom:0.24em;
  font-size:0.8em;
}

INPUT[type="button"]{
  font-family: 'penultimatelightregular';
  line-height:1.5em;
  margin:0px;
  padding:0px;
  text-align:center;
  border:1px solid #363636;
  height:1.5em;
  width:5em;
  color:white;
  border-radius:3px;
}
INPUT[type="button"]:hover{
  color:#76cff7;
  border:1px solid #76cff7;
}

INPUT[type="text"],INPUT[type="password"]{
  line-height:1.5em;
  margin:0px;
  padding:0px;
  border:0px;
  height:1.5em;
  color:black;
  border-radius:3px;
}

INPUT.message_input{
  position:absolute;
  left:0px;
  right:0px;
  bottom:0px;
  width:100%;
  background-color:black;
  color:white;
  border:none;
  border-top:1px solid white;
}
.messages{
  position:absolute;
  left:0px;
  right:0px;
  top:0px;
  bottom:1.5em;
  overflow-y:scroll;
}

.login INPUT[type="text"],INPUT[type="password"]{
  width:5em;
}

.gradient_1, .login, INPUT[type="button"], .menu A{
  background-color:#011926; /* When gradients fail... */
  background-image: -ms-linear-gradient(top, #002033 0%, #030D11 100%);
  background-image: -moz-linear-gradient(top, #002033 0%, #030D11 100%);
  background-image: -o-linear-gradient(top, #002033 0%, #030D11 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #002033), color-stop(1, #030D11));
  background-image: -webkit-linear-gradient(top, #002033 0%, #030D11 100%);
  background-image: linear-gradient(to bottom, #002033 0%, #030D11 100%);
  border:2px solid #363636;
}

.tooltip{
  border:1px solid white;
  background-color:black;
  padding:5px;
  white-space: pre-wrap;
  max-width:500px;
  max-height:400px;
  overflow-y:hidden;
}

.cproom .cpname{
  padding-left:5px;
}

@media screen and (max-height: 900px) {
  .main{
    top:70px;
  }
  BODY{
    background-position: center -50px; 
  }
  .header{
    height:68px;
  }
  .headerbar{
    top:68px;
  }
}

@media screen and (max-height: 750px) {
  .main{
    top:50px;
  }
  BODY{
    background-position: center -68px; 
  }
  .header{
    height:48px;
    font-size:40px;
  }
  .headerbar{
    top:50px;
  }
}

@media screen and (max-height: 600px) {
  .main{
    top:0px;
  }
  BODY{
    background-image:none;
  }
  .header,.headerbar{
    display:none;
  }
}