.chatBox * {
	box-sizing: border-box;
}
.chatBox {
	font-family: Verdana, sans-serif;
	font-size: 11px;
	position: fixed;
	bottom: 0;
	right: 8px;
	background: black;
	color: white;
	padding: 0;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	-moz-border-top-left-radius: 6px;
	-moz-border-top-right-radius: 6px;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	overflow: hidden;
	line-height: 1.5em;
}
.chatBox a {
	color: white;
}
.chatBox .titleBar {
	font-weight: bold;
	display: block;
	cursor: pointer;

	background: #458a93; /* Old browsers */
	background: -moz-linear-gradient(top, #458a93 0%, #336577 50%, #18526a 51%, #376e81 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#458a93), color-stop(50%,#336577), color-stop(51%,#18526a), color-stop(100%,#376e81)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #458a93 0%,#336577 50%,#18526a 51%,#376e81 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #458a93 0%,#336577 50%,#18526a 51%,#376e81 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #458a93 0%,#336577 50%,#18526a 51%,#376e81 100%); /* IE10+ */
	background: linear-gradient(to bottom, #458a93 0%,#336577 50%,#18526a 51%,#376e81 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#458a93', endColorstr='#376e81',GradientType=0 ); /* IE6-9 */
}
.chatBox .titleBar .title {
	margin-left: 8px;
	padding: 8px 8px 8px 0;
	float: left;
	z-index: 1000;
}
.chatBox .titleBar .clear {
	clear: both;
}
.chatBox .titleBar .buttons {
	float: right;
}
.chatBox .titleBar ul.config-menu {
	display: none;
	position: absolute;
	right: 0;
	left: auto;
	background: white;
	border: 1px solid #ccc;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.chatBox .titleBar ul.config-menu li {
	color: black;
	font-weight: bold;
	padding: 4px;
	margin: 0;
}
.chatBox .titleBar ul.config-menu li a,
.chatBox .titleBar ul.config-menu li label {
	display: block;
	color: black;
}
.chatBox .titleBar .resizeHandle {
	float: left;
	width: 8px;
	height: 31px;
	margin-right: -20px;
	margin-bottom: -31px;
	cursor: nwse-resize;
	z-index: 1300;
}
.chatBox .log {
	width: 400px;
	height: 300px;
	overflow-y: auto;
	padding: 4px;
	text-align: left;
	background: black;
}
.chatBox .log.fixed {
	font-family: Source Code Pro, Lucida Console, DejaVu Sans Mono, monospace;
	white-space: pre;
}
.chatBox .log::-webkit-scrollbar {
	width: 12px;
	height: 12px;
	padding: 1px;
}
.chatBox .log::-webkit-scrollbar-thumb {
	background: #458a93;
}
.chatBox .log .timestamp {
	font-size: 75%;
	color: #6bf;
}
.chatBox .log .http {
	font-weight: bold;
}
.chatBox .log .http:after {
	content: ":";
}
.chatBox .log .irc {
	color: #8f8;
}
.chatBox .log .irc:before {
	content: "<";
}
.chatBox .log .irc:after {
	content: ">";
}
.chatBox .inputBox {
	padding: 0px 1px;
}
.chatBox .inputBox input[type=text] {
	width: 100%;
	border: 0;
	outline: 0;
	padding: 3px;
	color: black;
}
.ircColor2 {
	color: blue;
}
.ircColor3 {
	color: green;
}
.ircColor4 {
	color: orange;
}
.ircColor5 {
	color: red;
}
.ircColor6 {
	color: purple;
}
.ircColor8 {
	color: yellow;
}
.ircBgColor2 {
	background-color: purple;
}
.ircBgColor3 {
	background-color: green;
}

.button {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url('icons.png');
	margin: 0;
	padding: 0;
}
.button:hover {
	background-color: #17a;
}

.button-close {
	background-position: -28px 0;
}

.button-close:hover {
	background-position: -0px 0;
}

.button-config {
	background-position: -84px 0;
}

.button-config:hover {
	background-position: -56px 0;
}

@media (pointer: coarse) {
	.chatBox {
		width: 100%;
		position: relative;
		right: 0;
		border-radius: 0;
		font-size: 13px;
	}
}

/* http://hawkee.com/snippet/10164/ */
/*control codes*/
.chatBox .log .bg0 { background-color: white; }
.chatBox .log .bg1 { background-color: black; }
.chatBox .log .bg2 { background-color: navy; }
.chatBox .log .bg3 { background-color: green; }
.chatBox .log .bg4 { background-color: red; }
.chatBox .log .bg5 { background-color: brown; }
.chatBox .log .bg6 { background-color: purple; }
.chatBox .log .bg7 { background-color: orange; }
.chatBox .log .bg8 { background-color: yellow; }
.chatBox .log .bg9 { background-color: lime; }
.chatBox .log .bg10 { background-color: teal; }
.chatBox .log .bg11 { background-color: #58A19D; }
.chatBox .log .bg12 { background-color: blue; }
.chatBox .log .bg13 { background-color: pink; }
.chatBox .log .bg14 { background-color: grey; }
.chatBox .log .bg15 { background-color: lightgrey; }
.chatBox .log .fg0 { color: white; }
.chatBox .log .fg1 { color: black; }
.chatBox .log .fg2 { color: navy; }
.chatBox .log .fg3 { color: green; }
.chatBox .log .fg4 { color: red; }
.chatBox .log .fg5 { color: brown; }
.chatBox .log .fg6 { color: purple; }
.chatBox .log .fg7 { color: orange; }
.chatBox .log .fg8 { color: yellow; }
.chatBox .log .fg9 { color: lime; }
.chatBox .log .fg10 { color: teal; }
.chatBox .log .fg11 { color: #58A19D; }
.chatBox .log .fg12 { color: blue; }
.chatBox .log .fg13 { color: pink; }
.chatBox .log .fg14 { color: grey; }
.chatBox .log .fg15 { color: lightgrey; }