design.css

/* Basic Body Structure */

* {
	margin: 0;
	padding: 0;
	font-size: 100%;
  	word-wrap: break-word;
}

body {
	color: #000;
	height: 100%;
 	z-index: 100;
	font-size: 12px;
	overflow: hidden;
	overflow-y: visible;
	background-color: #fff;
	font-family: "Lucida Grande";
}

body div#body_home {
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 100;
	max-height: 99.99%;
	position: absolute;
	opacity: 0; /* Set by JavaScript */
	-webkit-transition: opacity 0.8s linear;
}

body[type=channel] div#body_home {
	max-height: 96.5%;
}

body .line {
 	margin-top: -1px;
 	clear: both;
}

body div#body_home p {
	margin-left: 0 !important;
	text-indent: 0 !important;
}

body[dir=rtl] .sender {
	display: inline-block;
}

/* Loading Screen */

body div#loading_screen {
	position:absolute;
	top: 50%;
	left: 50%;
	margin-top: -11px;
	margin-left: -150px;
	width: 300px;
	height: 21px;
	font-size: 18px;
	background: #f3f3f3;
	border: 1px solid #d7d7d7;
	border-radius: 5px;
	padding: 5px;
	padding-left: 10px;
	opacity: 1; /* Set by JavaScript */
	-webkit-transition: opacity 0.8s linear;
}

/* Time */

body[dir=ltr] .time {
	color: #aaa;
	white-space: nowrap;
	display: inline-block;
}


body[dir=rtl] .time {
	color: #aaa;
	white-space: nowrap;
	padding-left: 0.4em;
}

/* Links */

a, .channel {
	color: #3e7c92;
	border-color: #3e7c92;
	text-decoration: none;
	border-bottom: dotted 1px;
}

a:hover, .channel:hover {
	color: #4fa0bf;
	border-color: #4fa0bf;
	cursor : pointer;
}

/* Topic Bar */

#topic_bar {
	top: 0;
	left: 0;
	right: 0;
	z-index: 400;
	opacity: 100 !important; /* Set by JavaScript */
	position: fixed;
	padding: 2px 0.5em 3px;
	-webkit-transition: opacity 0.8s linear;
	background: #e9eef3;
	border-bottom: 1px solid #c6cbd0;
	color: #000;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.7);
	font-size : 80%;
	max-height : 2.3em;
	overflow: hidden;
	text-overflow: ellipsis;
}

#topic_bar:hover {
	max-height: none;
	height: auto;
}

#topic_bar a,
#topic_bar span.channel {
	color: #5a6673;
	border : 0 none;
}

#topic_bar a:hover,
#topic_bar span.channel:hover {
	color : #68788b;
	border-bottom: 1px dotted #68788b;
}

/* Images */

body a img {
	border: 0;
}

body img {
	display: block;
	max-width: 95%;
	margin: 15px 15px 12px 15px;
}

/* Remember Line */

div[id=mark] {
	position: relative;
	z-index: 295;
	margin-top: -1px;
	border-bottom: 1px dashed;
	border-color: #aaa;
	-webkit-transition: 0.2s linear;
}

/* NOTICE/CTCP/WALLOPS */

body div.line[type*=ctcp],
body div.line[type*=notice],
body div.line[type*=wallops] {
	color: #f00;
  	z-index: 191;
	background: #fcc;
  	position: relative;
 	padding: 2px 5px 2px 5px;
	border-top: 1px solid #f77;
	border-bottom: 1px solid #f77;
}

body div[type*=notice] .sender {
	color: #f00;
	font-weight: 700;
}

/* PRIVMSG */

body div.line[type*=privmsg][highlight=false] {
 	padding: 3px 5px 3px 5px;
}

body div.line[type*=privmsg][highlight=true],
body div.line[type*=action][highlight=true] {
	font-weight: normal;
 	padding: 2px 5px 2px 5px;
	border-top: 1px solid #F6E73F;
	border-bottom: 1px solid #F6E73F;
  	background-color: #FAF4AF !important;
}

body div[type*="privmsg"] .message {
	color: #000;
}

body div[type*=privmsg] p[type*=myself] .message {
	color: #000;
}

body div[type*=privmsg] .sender {
	font-weight: 700;
}

/* ACTION */

body div.line[type*=action] {
 	padding: 3px 5px 3px 5px;
}

body div[type*="action"] .message {
	color: #000;
}

body div[type*=action] .sender {
	font-weight: 700;
}

body div[type*=action] p[type*=myself] .sender,
body div[type*=action] p[type*=myself] .message {
	color: #B52CF6;
}

body[dir=ltr] div[type*=action] .sender:before {
	content: "\2022";
	margin-right: 0.4em;
}

body[dir=ltr] div[type*=action] .sender:after {
	content: "";
  	/* margin-right: 0.4em; */
}

body[dir=rtl] div[type*=action] .sender:before {
	content: "\2022";
	margin-left: 0.4em;
}

body[dir=rtl] div[type*=action] .sender:after {
	content: "";
  	/* margin-left: 0.4em; */
}

/* DEBUG/INVITE */

body div.line[type*=invite],
body div.line[type*=debug] ,
body div.line[type*=rawhtml] {
	color: #777;
  	z-index: 190;
	background: #eee;
  	position: relative;
 	padding: 2px 5px 2px 5px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

/* GENERAL EVENT */

body div.line[type*=join],
body div.line[type*=part],
body div.line[type*=kick],
body div.line[type*=quit],
body div.line[type*=kill],
body div.line[type*=nick],
body div.line[type*=mode],
body div.line[type*=topic],
body div.line[type*=website] {
 	padding: 3px 5px 3px 5px;
	color: #aaa;
}

body[dir=ltr] div[type*=join] .message:before {
	content: "→";
  	color: #0c0;
  	/* margin-right: 0.4em; */
}

body[dir=ltr] div[type*=kick] .message:before,
body[dir=ltr] div[type*=part] .message:before,
body[dir=ltr] div[type*=quit] .message:before {
	content: "←";
  	color: #e00;
  	/* margin-right: 0.4em; */
}

body[dir=ltr] div[type*=nick] .message:before {
	content:"•";
  	color: #0c0;
  	/* margin-right: 0.4em; */
}

body[dir=rtl] div[type*=join] .message:before {
	content: "→";
  	color: #0c0;
  	/* margin-left: 0.4em; */
}

body[dir=rtl] div[type*=kick] .message:before,
body[dir=rtl] div[type*=part] .message:before,
body[dir=rtl] div[type*=quit] .message:before {
	content: "←";
  	color: #e00;
  	/* margin-left: 0.4em; */
}

body[dir=rtl] div[type*=nick] .message:before {
	content:"•";
  	color: #0c0;
  	/* margin-left: 0.4em; */
}

/* Nickname Colors */

body .inline_nickname {
	font-weight: 700;
}

body div[type*=privmsg] .sender[type*=myself] {
	color: #ea0d68;
}

body .sender[type*=normal][colornumber='0'],
body .inline_nickname[colornumber='0'] {
	color: #0080ff;
}

body .sender[type*=normal][colornumber='1'],
body .inline_nickname[colornumber='1'] {
	color: #059005;
}

body .sender[type*=normal][colornumber='2'],
body .inline_nickname[colornumber='2'] {
	color: #a80054;
}

body .sender[type*=normal][colornumber='3'],
body .inline_nickname[colornumber='3'] {
	color: #9b0db1;
}

body .sender[type*=normal][colornumber='4'],
body .inline_nickname[colornumber='4'] {
	color: #108860;
}

body .sender[type*=normal][colornumber='5'],
body .inline_nickname[colornumber='5'] {
	color: #7F4FFF;
}

body .sender[type*=normal][colornumber='6'],
body .inline_nickname[colornumber='6'] {
	color: #58701a;
}

body .sender[type*=normal][colornumber='7'],
body .inline_nickname[colornumber='7'] {
	color: #620a8e;
}

body .sender[type*=normal][colornumber='8'],
body .inline_nickname[colornumber='8'] {
	color: #BB0008;
}

body .sender[type*=normal][colornumber='9'],
body .inline_nickname[colornumber='9'] {
	color: #44345f;
}

body .sender[type*=normal][colornumber='10'],
body .inline_nickname[colornumber='10'] {
	color: #2f5353;
}

body .sender[type*=normal][colornumber='11'],
body .inline_nickname[colornumber='11'] {
	color: #904000;
}

body .sender[type*=normal][colornumber='12'],
body .inline_nickname[colornumber='12'] {
	color: #808000;
}

body .sender[type*=normal][colornumber='13'],
body .inline_nickname[colornumber='13'] {
	color: #57797e;
}

body .sender[type*=normal][colornumber='14'],
body .inline_nickname[colornumber='14'] {
	color: #3333dd;
}

body .sender[type*=normal][colornumber='15'],
body .inline_nickname[colornumber='15'] {
	color: #5f4d22;
}

body .sender[type*=normal][colornumber='16'],
body .inline_nickname[colornumber='16'] {
	color: #706616;
}

body .sender[type*=normal][colornumber='17'],
body .inline_nickname[colornumber='17'] {
	color: #46799c;
}

body .sender[type*=normal][colornumber='18'],
body .inline_nickname[colornumber='18'] {
	color: #80372e;
}

body .sender[type*=normal][colornumber='19'],
body .inline_nickname[colornumber='19'] {
	color: #8F478E;
}

body .sender[type*=normal][colornumber='20'],
body .inline_nickname[colornumber='20'] {
	color: #5b9e4c;
}

body .sender[type*=normal][colornumber='21'],
body .inline_nickname[colornumber='21'] {
	color: #13826c;
}

body .sender[type*=normal][colornumber='22'],
body .inline_nickname[colornumber='22'] {
	color: #b13637;
}

body .sender[type*=normal][colornumber='23'],
body .inline_nickname[colornumber='23'] {
	color: #e45d59;
}

body .sender[type*=normal][colornumber='24'],
body .inline_nickname[colornumber='24'] {
	color: #1b51ae;
}

body .sender[type*=normal][colornumber='25'],
body .inline_nickname[colornumber='25'] {
	color: #4855ac;
}

body .sender[type*=normal][colornumber='26'],
body .inline_nickname[colornumber='26'] {
	color: #7f1d86;
}

body .sender[type*=normal][colornumber='27'],
body .inline_nickname[colornumber='27'] {
	color: #73643f;
}

body .sender[type*=normal][colornumber='28'],
body .inline_nickname[colornumber='28'] {
	color: #0b9578;
}

body .sender[type*=normal][colornumber='29'],
body .inline_nickname[colornumber='29'] {
	color: #569c96;
}

body .sender[type*=normal][colornumber='30'],
body .inline_nickname[colornumber='30'] {
	color: #08465f;
}

/* mIRC Color Codes */

.effect[color-number='0']  { color: #ffffff; }
.effect[color-number='1']  { color: #000000; }
.effect[color-number='2']  { color: #000088; }
.effect[color-number='3']  { color: #008800; }
.effect[color-number='4']  { color: #ff0000; }
.effect[color-number='5']  { color: #880000; }
.effect[color-number='6']  { color: #880088; }
.effect[color-number='7']  { color: #ff8800; }
.effect[color-number='8']  { color: #ffff00; }
.effect[color-number='9']  { color: #00ff00; }
.effect[color-number='10'] { color: #008888; }
.effect[color-number='11'] { color: #00ffff; }
.effect[color-number='12'] { color: #0000ff; }
.effect[color-number='13'] { color: #ff00ff; }
.effect[color-number='14'] { color: #888888; }
.effect[color-number='15'] { color: #cccccc; }

.effect[bgcolor-number='0']  { background-color: #ffffff; }
.effect[bgcolor-number='1']  { background-color: #000000; }
.effect[bgcolor-number='2']  { background-color: #000088; }
.effect[bgcolor-number='3']  { background-color: #008800; }
.effect[bgcolor-number='4']  { background-color: #ff0000; }
.effect[bgcolor-number='5']  { background-color: #880000; }
.effect[bgcolor-number='6']  { background-color: #880088; }
.effect[bgcolor-number='7']  { background-color: #ff8800; }
.effect[bgcolor-number='8']  { background-color: #ffff00; }
.effect[bgcolor-number='9']  { background-color: #00ff00; }
.effect[bgcolor-number='10'] { background-color: #008888; }
.effect[bgcolor-number='11'] { background-color: #00ffff; }
.effect[bgcolor-number='12'] { background-color: #0000ff; }
.effect[bgcolor-number='13'] { background-color: #ff00ff; }
.effect[bgcolor-number='14'] { background-color: #888888; }
.effect[bgcolor-number='15'] { background-color: #cccccc; }