html, body {
	font-family: 'Segoe UI', Arial, sans-serif, "lucida console";
	margin:0;
	padding:0;
	height:100%;
	overflow:hidden;
	overflow-x:hidden;
	font-size:0.95rem;
}
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget button {
	font-family: inherit;
}
* {
	margin:0;
	padding:0;
	-moz-outline-style:none;
	outline:none;
}
div { box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box
}
label { cursor:pointer; }
ul { list-style: none; }
h1, h2 {
	color:#29A9C9;
	font-weight:bold;
	font-size: 1.35em;
	letter-spacing: -1px;
	text-shadow: -2px 0 1px #65686B, 0 -2px 1px #65686B, 0 2px 1px #65686B, 2px 0 1px #65686B, 3px 2px 5px black, 3px 2px 3px black;
	font-weight: bold;
}
h1 {
	font-size:1.9em;
}
sub, sup {
  font-size: 80%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  vertical-align: super;
}
#chat-top .inner h1 {
	text-shadow: -2px 0 1px #EEEEEE, 0 -2px 1px #EEEEEE, 0 2px 1px #EEEEEE, 2px 0px 1px #EEEEEE, 1px -1px 1px #EEEEEE, 1px 1px 1px #EEEEEE, 3px 2px 6px #000000, 3px 2px 4px #000000, 3px 2px 8px #000000;
}
#chat-top .inner h2 {
	text-shadow: -2px 0 1px #EEEEEE, 0 -2px 1px #EEEEEE, 0 2px 1px #EEEEEE, 2px 0px 1px #EEEEEE, 1px -1px 1px #EEEEEE, 1px 1px 1px #EEEEEE, 3px 2px 5px #000000, 3px 2px 3px #000000;
}
input {
	width:99%;
	padding:1px 0;
}
input:disabled, input[type="submit"]:disabled {
	background:#111111 url(images/ui-bg_diagonals-thick_20_111111_40x40.png) 50% 50% repeat;
	opacity:0.7;
	color:#000;
}
.disabled {
  cursor: not-allowed;
  opacity:0.7;
}
input[type="submit"] {
	width: auto;
	padding-left: 5px;
	padding-right: 5px;
}
input + input[type="submit"] {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: none;
	cursor:pointer;
}

.droptarget {
    width: 40px;
    margin-left: -20px;
    position: absolute;
    z-index: 9999;
    display: block;
    background: rgba(200, 230, 255, 0.25);
}
.droptarget:hover {
    background: rgba(200, 230, 255, 0.5);
}
/*end resizing stuff*/
#chatters {
	position:absolute;
	top:0px;
	right:0;
	bottom:0;
	width:210px;
}
#chat {
	height:100%;
	background:#75787F;
	padding: 0 2px;
	margin-right:210px;
	border-right:1px solid #606265;
}
#chat:after, #chat-top .inner::before, #chat-top .inner::after {
	position: absolute;
	content: "";
	top:0;
	pointer-events: none;
}
#chat:after {
	left: 0;
	right: 0;
	height:50px;
	background-image: linear-gradient(#222, rgba(239,239,239, 0.85) 2px,rgba(239,239,239, 0)); /* 239,239,239 is #efefef*/
}
/*#chat-top .inner::before { for theme proposal... 
    background: #444549;
    width: 205px;
    bottom: 0;
}
#chat-top .inner::after {
    background: linear-gradient(rgba(68,69,73,0.85), rgba(66,66,66,0));
    width: 205px;
    height: 50px;
    left: 0;
}*/

.top {
	height:100%;
	padding-bottom:50px;
	overflow-y:scroll;
}
.bottom {
	margin-top:-50px;
	height:50px;
}

#chat-top {
	height:100%;
	padding-bottom:34px;
}
#chat-top .msgs {
	position:absolute;
	bottom:0;
	max-height:100%;
	overflow-y:auto;
	top:auto;
	padding-top:6px;
}
#chat-bottom {
	margin-top:-40px;
	height:0px;
	padding-top:1px;
}
/*#chat-top .inner:after, .textarea:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    box-shadow: inset 0px 8px 4px -4px rgba(0,0,0,0.3);
    pointer-events: none;
}*/
#chat-top .inner {
	border:1px solid #606265;
	border-top:none;
	height:100%;
	word-wrap:break-word;
	overflow:hidden;
	position:relative;
	vertical-align:bottom;
}
#chat-top .inner .msgs div {
	line-height:100%;
}
.msgs > div > span {
	padding: 1px 0 3px;
}
#left-messenger.open #chat-top .inner {
	padding-left: 150px;
}
* .blackbg {
	background:#393939!important;
}
#chat-top .msg img {
	vertical-align:middle;
	line-height:0;
	position:absolute;
	right:0;
}
#chat-top  .smily {
	vertical-align:top;
	position:relative;
}

#chat-top .first .name {
    position:absolute;
    right: 0;
    white-space:nowrap;
	margin-right:1px;
}
.name, .name:hover {
	font-weight:600;
	color:inherit;
}

#chat-top .msgs > div.owner {
	background:rgba(230,110,220,0.05);
}
#chat-top .msgs > div.self {
	background:rgba(105,178,233, 0.05);
}
#chat-top .msgs > div.mod {
	background:rgba(235,187,116,0.05);
}
#chat-top .msgs > div.group-member {
	background:rgba(242,201,120,0.05);
}
#chat-top .msgs > div.friend {
	background:rgba(234,156,120,0.05);
}
.highlight {
	background:#efe6af;
	display:inline-block;
}
#chat-top .first .name .colon {
	width:0; color:transparent;
}
#chat-top .msgs div > .first {
	width:202px;
    position:absolute;
	letter-spacing: -0.5px;
}
.timestamp {
	color:#999aa0;
}
#chat-top .msgs div > .first span:not(.timestamp) {
	position:absolute;
	z-index:5;
    right:0;
	top:0;
	height:15px;
	overflow:hidden;
	cursor:pointer;
	display:inline-block;
    white-space:nowrap;
}

#chat-top .msgs > div > :not(.first), #chat-top .msgs > div.lfrp > :not(.first) {
	margin-left:204px;
}
#chat-top .msgs > div > :not(.first) {
	padding-left:2px;
	border-left:1px solid #999aa0;
	word-wrap:break-word;
	display:block;
}

#chat-top .msgs div.action {
	/*background:#e6dfef;*/
}
#chat-top .msgs > div.action > :not(.first) {
	border-left:2px solid #B369BC;
	padding-left:1px;
}
#chat-top .msgs > div.sys > :not(.first) {
	border-left:2px dotted #999aa0;
}
#chat-top .msgs div.join >.first, #chat-top .msgs div.leave >.first {
	background: #44aa33;
	width: 7px;
	position: absolute;
	left: 195px;
	border-radius: 5px;
	height: 7px;
	margin-top: 4px;
	padding:0;
}
#chat-top .msgs div.leave>.first {
	background: #cc4433;
}
#chat-top .msgs > div.lfrp > *:not(.first) {
    border-left: 3px solid #5980CF;
}

.hr {
    background:#000;
    height:4px;
    margin: 2px 0 3px 0;
}
.textarea {
	padding-right:1.5px;
	position:relative;
}
textarea {
	word-wrap:break-word;
	background:none;
	min-height:30px;
	max-height:120px;
	border:0;
	resize:none;
	outline:none;
	font-size:inherit;
	font-family:inherit;
}
#chat textarea {
	width:100%;
	overflow:hidden;
}

ul.horiBtns li {
	padding:2px;
	float:left;
	cursor:pointer;
	display:inline-block;
	text-align:chat;
}
ul.horiBtns li  { display:inline; }
html > /**/ body ul.horiBtns li  { display:inline-block; }
ul.horiBtns li:hover {
	color:#f9a300;
}
ul.horiBtns:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#chat-bottom .horiBtns, #notPMChat .horiBtns {
	position:absolute;
	/*width:30px;*/
	right:0;
}
#fontOptions.horiBtns {
	margin:2px 0 3px 0;
	color:#f9a300;
}
.chatTab {
	padding:2px 4px;
}
.chatTab {
	margin-right:3px;
	font-size:85%;
}
html > /**/ body .pmTab, html > /**/ body .chatTab { display:inline-block; }

#userlist {
	word-wrap:none;
	position:absolute;
	top:30px;
	bottom:0;
	right:0;
	width:100%;
	z-index:0;
	padding-bottom:29px;
}
#userlist .inner {
	height:100%;
	box-shadow: inset 8px 0 6px -6px rgba(0,0,0,0.4);
}
#userlist .room {
	position:relative;
}
#userlist .room.active {
	box-shadow: 0 2px 4px rgba(0,0,0,0.4);
	z-index: 1;
	margin: -2px 0;
}

#userlist .room:not(.active):after {
	content: "";
    /* Expand element */
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    box-shadow: inset 8px 0 5px -8px rgba(0,0,0,1.4);
    /* Disable click events */
    pointer-events: none;
}
#userlist .rooms {
	height:100%;
	overflow-x:hidden;
	overflow-y:scroll;
}
#userlist .user .name, #userlist .user .statusMsg {
	white-space:pre;
}
#userlist .user img {
	-webkit-transition:opacity 0.5s;
    transition:opacity 0.5s;
}
#userlist .user:hover img {
	opacity:1.0;
}

#userlist .room .header, #userlist .room .panel {
	color:#f9a300;
	padding:4px 0 3px 3px;
	cursor:pointer;
}
#userlist .room .panel {
	padding-top:0;
}

#userlist .room:nth-child(even) .header, #userlist .room:nth-child(even) .panel, #userlist {
	background:#434548;
}

#userlist .user {
	padding:0;
	height:25px;
}
#userlist .user a, #userlist .user p {
    margin-left: 30px;
}
#userlist .user a {
	padding-top:0;
	
}

.room .header .name {
    max-width: 185px;
    overflow: hidden;
    white-space: nowrap;
	text-overflow: ellipsis;
	line-height:130%;
	margin-top: -4.5px;
	vertical-align: middle;
}
.room .header .manage {
    padding-bottom: 2px;
    padding-top: 2px;
    float: right;
    margin-right: 14px;
    display:none;
}
.room.active .header .manage, .room:hover .header .manage {
	display:block;
}
.room.active .header .name, .room:hover .header .name {
	max-width:120px;
}

.index {
	float: left;
	line-height: 42px;
	font-size: 150%;
	width: 45px;
	text-align: center;
}
.chars-list .thumb {
	padding-right:10px;
}
#userlist .thumb {
	height:25px;
	width:33px;
	float:left;
	margin-right:1px;
	opacity:0.6;
}
.user {
	overflow:hidden;
}
#userlist .user .statuses {
    font-size: 75%;
    line-height: 9px;
}
#userlist .user .name {
	line-height:12px;
	height:13px;
}
#not-userlist {
	height:30px;
	position:absolute;
	top:0;
	width:100%;
}
#userlist > ul {
	padding-bottom:75px;
}

#dropdownMenu {
	z-index: 9999; width: 125px; padding: 2px;
}
#dropdownMenu li, .dropdown li {
	cursor:pointer;
}
#dropdownMenu, .dropdown {
	font-size:85%;
	text-align:left;
}
.dropdown li a {
	width: 100%;
	display: inline-block;
}

#notification {
	position: absolute; bottom: 0; left: 50%; 
	margin-left: -300px; width: 600px; height: 30px;
	background: #29A9C9; color: #fff;
	text-align:chat;
}
#notification p { font-size: 13px; }
#notification p .left, #notification p .right { font-size:11px; }
#notification p .left { float: left; }
#notification p .right { float:right; }
#notification a { text-decoration: underline; }
#top {
	height:30px;
	position: relative;
	border-bottom: 1px solid #333439;
	border-right: 1px solid #404146;
	margin-right: 210px;
	line-height:30px;
	padding-left:5px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
#top a:hover {
	color:#f9a300;
}
#top .divider {
	border-left:1px #a9aab0 solid;
}
#top .settings {
	background:url(images/cog.gif) no-repeat 0 0;
	background-position:3px 1px
}

#footer {
	background:#3A3A3A;
	height:30px;
	color:#ddd;
}

#outter {
	height:100%;
}

#menus {
	height:100%;
}
a {
	color: #09d;
}
a:visited {
	color: #97c;
}

.innerbg {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	background:#3A3A3A;
	padding:5px;
	margin:0;
	height:100%;
}
.smallBorders {
	-moz-border-radius: 3px; -webkit-border-radius: 3px;
}
.smallBtn span {
	padding: 0 3px;
}
.largeBtn { padding: .2em .6em .3em .6em; margin: 2px 2px 2px 5px; }
.iconBtn {
	padding: 1px 2px 1px 1px!important;
	margin: 0!important;
}
.iconBtn:hover {
	padding: 0 1px 0 0!important;
	margin: 0!important;
}
.inner-alert {
	padding: 3px;
	background-image: -moz-linear-gradient(top, #99DFEF, #008FA3);
	background-image: -webkit-linear-gradient(top, #99DFEF, #008FA3);
	margin: 3px;
	border-radius: 5px;
}
.inner-alert > p {
	padding:6px 7px;
	border-radius:3px;
}
.subAlert {
	background:#ddd;
	border:2px solid #f9a300;
	padding:8px;
}
.dull {
	color: #999aa0;
}
.em {
	font-family: Georgia,Times,serif;
	font-style: italic;
}
.bold {
	font-weight: bold;
}
.clickable { cursor: pointer; }
.hide { display:none;}

.shadow {  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }
.full-width { width:100%; }

#chat-menu, #chat-menu .dropdown {
	background:#4487bb;
	color:#fff;
	width:100%;
	padding:0 5px;
}
#chat-menu {
	height: 100%;
	border-bottom: 1px solid #114477;
	box-sizing: border-box;
	line-height:22px;
	text-align: center;
	white-space: nowrap;
}
#chat-menu:after {
	position: absolute;
	top: 30px;
	height: 30px;
	content: "";
	right: 0;
	width: 100%;
	box-shadow: inset 0 12px 15px -10px rgba(0,0,0,0.6);
	pointer-events: none;
}
#chat-menu .ui-icon.ui-icon-plusthick {
	margin-top: -4px;
	vertical-align: middle;
}
#chat-menu li a {
	font-weight:bold;
}
#chat-menu li:hover {
	box-shadow: inset 0 0 4px 4px #4487bb;
	background: rgba(255,255,255,0.2);
}
ul.horizontal > li + li {
    border-left: 1px solid white;
}
ul.horizontal > li {
    display: inline-block;
    margin: 3px 0;
    padding: 0 0 0 2px;
    height:80%;
    position:relative;
}
ul.horizontal > li > a {
	padding:4px;
}
.dropdown {
	position:absolute;
	right:0;
}

.notify {
	background:#F9A300;
}

#room-joiner {
	
}
#room-joiner .top button {
    margin-bottom: 50px;
    margin-left: 5px;
}
#room-joiner ul {
	width:100%;
	border-top:1px solid grey;
	cursor:pointer;
	line-height:120%;
}
#room-joiner ul:last-child {
    margin-bottom: 60px;
}
#room-joiner ul:nth-child(3) {
    border-top: medium none;
}
#room-joiner li {
	display:inline-block;
	padding:6px 10px 8px;
	font-size:135%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
#room-joiner li.count {
	padding-left:0px;
	width:5%;
}
#room-joiner li.name {
	width:20%;
}
#room-joiner li.topic {
	width:75%;
}
#room-joiner .bottom {
	border-top-left-radius: 6px;
    border-top-right-radius: 6px;
	padding:12px;
	position: absolute;
	right: 16%;
	left: 15%;
}

#rooms-header {
	color:#eee;
	border-radius:6px;
}

.ui-button:not(.ui-dialog-titlebar-close) {
    background: /*#587fa4*/#4487bb;
    border: 0 none;
    padding: 5px 7px;
	color:#eee;
	font-weight:bold;
	text-shadow: 0 0 1px #000000;
	font-size:11px;
}

#user-selector, #password-inputter {
	width:250px;
	position:absolute;
	padding:3px;
	z-index:987654321;
}
#user-selector .users {
	max-height:250px;
	overflow-y:auto;
	overflow-x:hidden;
	white-space:pre;
}
#user-selector button, #password-inputter button, #password-inputter input {
	width:100%;
}
#user-selector .thumb {
	width:66px;
	vertical-align:middle;
}
#user-selector .tip {
    height: auto;
    margin-left: 0;
    white-space: normal;
    width: 220px;
}

.chat-tabs:first-child {
	margin-left:0;
}
.chat-tabs {
    border-radius:3px;
    display:inline-block;
    overflow:hidden;
	margin-left:2px;
	height:36px;
}
.chat-tabs img {
	float:right;
	height:36px;
}

#chat-tabs .chat-tabs li {
    border-left: 1px solid #6F9FB9;
    height: inherit;
    line-height: 45px;
    max-width: 85px;
    padding: 0 4px;
    position: relative;
    width: auto;
}
#chat-tabs .chat-tabs li:nth-child(2){
	border:none;
}
#chat-tabs .chat-tabs li:hover {
	background:#6F9FB9;
	color:#111;
}

#chat-tabs .tab .close {
    color: #D05020;
    display: inline-block;
    font-weight: bold;
    height: 10px;
    line-height: 6px;
    margin-top: -17px;
    padding: 4px;
    position: absolute;
    right: 1px;
    top: 50%;
}
#chat-tabs .tab .close:hover {
	color:#111;
	background:#D05020;
}
#chat-tabs .tab.active {
    box-shadow: 0 0 15px 2px rgba(50, 150, 220, 0.75) inset;
}

.notifications {
    border-radius: 2px;
    line-height: 100%;
    font-size: 80%;
    vertical-align: super;
    margin-left: 2px;
    position:absolute;
    color:#fff;
    text-shadow: 0 0 0.5px #222;
}
.tab .notifications {
	right:18px;
	margin-top:1px;
}
.notifications > * {
	background: #df4033;
	padding:1px 3px 2px 2px;
	border-radius:2px;
	display: inline-block;
	min-width:6px;
	text-align:center;
	margin-left:1px;
}

#chat-bottom .textarea textarea {
	height:50px;
	display:none;
	border: 1px solid #606265;
}
#chat-bottom .textarea textarea.active {
	display:block;
}
textarea {
	font-family:inherit;
}

.ui-button-icon-only .ui-icon {
    left: auto;
}
.ui-button-icon-only .ui-icon, .ui-button-text-icon .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon {
    position: absolute;
    top: -1px;
}

#room-management-dialog .users {
	float:left;
	width:33.3%;
	padding:0 4px;
	margin-bottom:4px;
}
#room-management-dialog .users a {
	display:block;
}
#room-management-dialog .users .owners, #room-management-dialog .users .mods, #room-management-dialog .users .bans, #room-management-dialog .users .inGroup {
	height:100px;
	background:#eee;
	overflow-x:hidden;
	overflow-y:scroll;
	white-space:nowrap;
}
#room-management-dialog label {
    width: 32%;
	-moz-box-sizing: border-box;
	margin:0; padding:0;
}
#room-management-dialog input[type="checkbox"] {
    vertical-align: middle;
    width: 20px;
}

.sending {
	opacity:0.6;
}
img.smily {
	max-width: 80px;
}

body {
	color:#111;
}
.modal .ui-dialog-titlebar-close {
    position: absolute;
    top: 15px;
    right: 0;
    z-index: 1;
}
.modal .ui-dialog-titlebar-close span, .ui-dialog-titlebar-close span {
	margin:-2.5px 1px 1px 0.5px;
}
.ui-dialog-titlebar-close .ui-button-text {
    text-indent: -9999999px;
    /*padding: 0.4em;*/
}
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
	padding:0;
}
.ui-dialog-titlebar-close {
	cursor:pointer;
}
.modal h3 {
	color:#666;
	font-size:20px;
}
.modal .tabs h3 {
	padding: 4px 5px 10px;
	border-bottom: 1px solid #666;
	margin: 6px;
}

.modal .tabs li {
  margin:5px;
  box-sizing:border-box;
  position:relative;
  cursor:pointer;
  height:30px;
}
.modal .tabs li a {
  width:100%;
  display:inline-block;
  position:absolute;
  padding:6px;
  color:#111;
  text-decoration:none;
}
.modal .tabs li:before{
  content:"";
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  transition: 0.3s;
  width:25%;
  border-radius:2px;
  pointer-events: none;
}
.modal .tabs li:hover:before {
  background:#4487bb;
  width:100%;
}

.mini-modal {
	width: 70%;
	height: 50%;
	position: absolute;
	top: 25%;
	left: 15%;
	pointer-events: none;
}

#rph-notifications {
  position:absolute;
  right:0;
  bottom:20px;
  width:300px;
  overflow:hidden;
}
.rph-notification {
  padding:3px 5px;
  margin:5px;
  background:#dfdfdf;
  transition: all 0.4s ease;
  opacity:1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  box-sizing: content-box;
}
.rph-notification > * {
  line-height:20px;
}
.rph-notification.hide {
  margin: -56px -300px 10px 300px;
  opacity:0;
}

.modal {
  background:rgba(60,60,60,0.4);
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  color:#111;
}
.modal > .inner {
  margin:2% 5%;
  position:relative;
  height:90%;
  width:90%;
}

.modal > .inner > .tabs, .modal > .inner > .content, .modal > .inner:after {
  position:absolute;
  height:100%;
}
.modal > .inner > .tabs {
  top:0;
  bottom:0;
  left:0;
  padding:6px 0;
  width:170px;
  margin:-6px 0;
  box-shadow:0 2px 9px 4px rgba(0,0,0,0.3);
  font-weight:bold;
}
.modal > .inner > .content {
  left:170px;
  right:8px;
  padding:10px 170px 10px 16px;
  box-sizing:border-box;
  box-shadow: inset 9.5px 0 5px -8px rgba(0,0,0,0.3),
    8px 2px 7px 3px rgba(0,0,0,0.3);
}
.modal > .inner:after {
    content: "";
    top: 0px;
    right: 0px;
    bottom: 0px;
    width:8px;
}

#settings-dialog .inner > div > div {
    padding: 10px 0 5px;
}
#settings-dialog .inner > div > div + div {
    border-top: 1px solid #aaa;
    clear:both;
}
#settings-dialog .content {
	overflow:auto;
}
.setting p {
	clear:left;
}
#pm-header {
	margin-right: 1px;
	border-left:1px solid black;
	border-right:1px solid black;
	height:48px;
}
.pm-thumb-corner {
	position:absolute;
}
.pm-thumb-corner .state {
	position: absolute;
	bottom: 1px;
	right: 1px;
	width: 12px;
	height: 12px;
	border-radius: 6px;
	border: 1.6px solid #445;
	text-indent: 99999px;
	cursor:help;
}
.state.online {
	background:#33dd55;
}
.state.offline {
	background:#111;
}
.state.busy {
	background:#df392f;
}
.state.idle {
	background:#65686c;
}
#pm-header .top {
	padding-left:67px;
	padding-top:23px;
}
a.button {
	padding:3px 4px 5px;
	margin:0;
}
a.button + a.button {
	margin-left: 2px;
}
#pm-bottom .textarea {
	height:56px;
}
#pm-bottom textarea {
	height:100%;
}
.ui-dialog .ui-dialog-content {
	padding:0 2px 2px 2px;
}
.ui-dialog .ui-dialog-titlebar {
	padding:0 1px 0 2px;
}

/** nanoscroller **/
.nano {
  position : relative;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.nano > .nano-content {
  position      : absolute;
  overflow      : scroll;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
}
.nano > .nano-content:focus {
  outline: thin dotted;
}
.nano > .nano-content::-webkit-scrollbar {
  display: none;
}
.has-scrollbar > .nano-content::-webkit-scrollbar {
  display: block;
}
#chatters .nano > .nano-pane {
	z-index:1;
}
.nano > .nano-pane {
  background : #90959F;
  position   : absolute;
  width      : 4px;
  right      : 0;
  top        : 0;
  bottom     : 0;
  transition            : .2s;
  border-radius         : 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.4);
  margin: 2px;
}
.nano > .nano-pane > .nano-slider {
  background: #111;
  position              : relative;
  border-radius         : 2px;
  margin:0;
}
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
  width      : 10px;
  box-shadow: 0 2px 2px rgba(0,0,0,0.5);
}
.nano:hover > .nano-pane > .nano-slider {
  margin: 0 1px;
}

.container.dock {
	right:0;
	left:auto;
	padding-right:2px;
}

/*trying to make css cleaner and reused more...*/
.no-underline {
	text-decoration:none;
}

.char-listing {
	height:48px;
}
.char-listing .edit-profile::after, .char-listing .delete-char::after {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	line-height: 120%;
	vertical-align: sub;
	transition: max-width 0.4s;
	-moz-transition: max-width 0.4s;
	-webkit-transition: max-width 0.4s;
	max-width: 0px;
}
.char-listing .edit-profile::after {
	content:'Edit Profile';
}
.char-listing .delete-char::after {
	content:'Delete Character';
}

.char-listing:hover .edit-profile::after{
	max-width:200px;
}
.char-listing:hover .delete-char::after{
	max-width:200px;
}

/*color picker*/
#hue {
	background: -moz-linear-gradient(left, hsla(0, 100%, 50%, 1),hsla(10, 100%, 50%, 1),hsla(20, 100%, 50%, 1),hsla(30, 100%, 50%, 1),hsla(40, 100%, 50%, 1),hsla(50, 100%, 50%, 1),hsla(60, 100%, 50%, 1),hsla(70, 100%, 50%, 1),hsla(80, 100%, 50%, 1),hsla(90, 100%, 50%, 1),hsla(100, 100%, 50%, 1),hsla(110, 100%, 50%, 1),hsla(120, 100%, 50%, 1),hsla(130, 100%, 50%, 1),hsla(140, 100%, 50%, 1),hsla(150, 100%, 50%, 1),hsla(160, 100%, 50%, 1),hsla(170, 100%, 50%, 1),hsla(180, 100%, 50%, 1),hsla(190, 100%, 50%, 1),hsla(200, 100%, 50%, 1),hsla(210, 100%, 50%, 1),hsla(220, 100%, 50%, 1),hsla(230, 100%, 50%, 1),hsla(240, 100%, 50%, 1),hsla(250, 100%, 50%, 1),hsla(260, 100%, 50%, 1),hsla(270, 100%, 50%, 1),hsla(280, 100%, 50%, 1),hsla(290, 100%, 50%, 1),hsla(300, 100%, 50%, 1),hsla(310, 100%, 50%, 1),hsla(320, 100%, 50%, 1),hsla(330, 100%, 50%, 1),hsla(340, 100%, 50%, 1),hsla(350, 100%, 50%, 1),hsla(360, 100%, 50%, 1));
	background: linear-gradient(to right, hsla(0, 100%, 50%, 1),hsla(10, 100%, 50%, 1),hsla(20, 100%, 50%, 1),hsla(30, 100%, 50%, 1),hsla(40, 100%, 50%, 1),hsla(50, 100%, 50%, 1),hsla(60, 100%, 50%, 1),hsla(70, 100%, 50%, 1),hsla(80, 100%, 50%, 1),hsla(90, 100%, 50%, 1),hsla(100, 100%, 50%, 1),hsla(110, 100%, 50%, 1),hsla(120, 100%, 50%, 1),hsla(130, 100%, 50%, 1),hsla(140, 100%, 50%, 1),hsla(150, 100%, 50%, 1),hsla(160, 100%, 50%, 1),hsla(170, 100%, 50%, 1),hsla(180, 100%, 50%, 1),hsla(190, 100%, 50%, 1),hsla(200, 100%, 50%, 1),hsla(210, 100%, 50%, 1),hsla(220, 100%, 50%, 1),hsla(230, 100%, 50%, 1),hsla(240, 100%, 50%, 1),hsla(250, 100%, 50%, 1),hsla(260, 100%, 50%, 1),hsla(270, 100%, 50%, 1),hsla(280, 100%, 50%, 1),hsla(290, 100%, 50%, 1),hsla(300, 100%, 50%, 1),hsla(310, 100%, 50%, 1),hsla(320, 100%, 50%, 1),hsla(330, 100%, 50%, 1),hsla(340, 100%, 50%, 1),hsla(350, 100%, 50%, 1),hsla(360, 100%, 50%, 1));
}
#hue, #saturation, #luminosity {
	height:19px;
	margin:0;
}
#hue.ui-slider.ui-widget-content a, #saturation.ui-slider.ui-widget-content a, #luminosity.ui-slider.ui-widget-content a {
	top:0;
	height:16px;
}
#swatch {
	width:185px;
	height:62px;
	margin-top:3px;
	line-height:105%;
	padding:0 2px;
}
#bright-notification {
	font-size:80%;
	line-height:11px;
}
.fade-config {
	letter-spacing: -0.5px;
}
.fade-config input {
	width: auto;
	margin-right: 4px;
}
.vertical-fade, .horizontal-fade, .radial-fade, .vertical-fade  {
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height:100%;
    display:inline-block;
}
.vertical-fade.two-color {
	background-image: linear-gradient(var(--color1) 10%, var(--color2) 90%);
}
.vertical-fade.three-color {
	background-image: linear-gradient(var(--color1) 10%, var(--color2), var(--color3) 90%);
}
.horizontal-fade.two-color {
	background-image: linear-gradient(to right, var(--color1), var(--color2));
}
.horizontal-fade.three-color {
	background-image: linear-gradient(to right, var(--color1), var(--color2), var(--color3));
}
.radial-fade.two-color {
	background-image: radial-gradient(at center center, var(--color1) 5%, var(--color2) 90%);
}
.radial-fade.three-color {
	background-image: radial-gradient(at center center, var(--color1) 15%, var(--color2), var(--color3) 80%);
}
.name {
	line-height: 100%;
	display: inline-block;
}
.ui-slider .ui-slider-handle {
	z-index:auto;
}

#set-color-dialog a.button {
    padding: 0 3px 2px;
    font-size: 90%;
    vertical-align: middle;
    margin-top: -3px;
}
.hexcolor {
    border: 1px solid transparent;
    cursor: pointer;
}
.hexcolor:hover {
	border-color:#4a4b4f;
}

/* new separation for easier consistent styling */
body,
#pm-msgs, #pm-bottom .textarea,
#userlist .users,
.inner-alert > p,
#user-selector .users,
#chat-top .inner,
.textarea,
.modal > .inner > .content, .modal > .inner:after, .rph-notification,
#set-color-dialog .inner { /*lightest*/
	background:#ededed;
	color:#222;
}
.modal > .inner > .tabs { /*darker light*/
	background:#d3d5d8;
}

#top, #chat-menu li a,
#user-selector,
#password-inputter,
a.button {
	color:#fff;
}

#top, #user-selector,
#password-inputter,
.chat-tabs {
	background: #4a4b4f;
}

.container > :not(a) {
	color:#ddd;
}
.container > *,
#userlist .room .header, #userlist .room .panel,
#rooms-header,
#room-joiner .bottom,
#user-selector .tip {
	background:#3a3c3f;
}