design.css

/*
 Simplified Colors used throughout

base03    #002b36
base02    #073642
base01    #586e75
base00    #657b83
base0     #839496
base1     #93a1a1
base2     #eee8d5
base3     #fdf6e3
yellow    #b58900
orange    #cb4b16
red       #dc322f
magenta   #d33682
violet    #6c71c4
blue      #268bd2
cyan      #2aa198
green     #859900

*/

/* Basic Body Structure */

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

body {
	color: #839496;
	height: 100%;
	z-index: 100;
	font-size: 12px;
	overflow: hidden;
	overflow-y: visible;
	background-color: #002b36;
	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;
}

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

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

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

/* Time */

body[dir=ltr] .time {
	color: #586e75;
	white-space: nowrap; 
}

body[dir=rtl] .time {
	color: #586e75;
	white-space: nowrap; 
	padding-left: 0.4em;
	display: inline-block;
}

/* Links */

a {
	color: #93a1a1;
	border-color: #93a1a1;
	text-decoration: none;
	border-bottom: dotted 1px;
}

a:hover {
	color: #eee8d5;
	border-color: #eee8d5;
}

/* Topic Bar */

#topic_bar {
	top: 0;
	left: 0;
	right: 0;
	color: #839496;
	z-index: 400;
	opacity: 0.95;
	position: fixed;
	background: #fdf6e3;
	padding: 2px 0.5em 3px;
	border-bottom: 1px solid #073642;
	-webkit-box-shadow: 0 1px 5px #777;
}

#topic_bar a {
	color: #586e75;
	border-color: #586e75;
}

#topic_bar a:hover {
	color: #073642;
	border-color: #073642;
}

/* 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: #586e75;
	-webkit-transition: 0.2s linear;
}

/* NOTICE/CTCP/WALLOPS */

body div.line[type*=ctcp],
body div.line[type*=notice],
body div.line[type*=wallops] {
	color: #dc322f;
	z-index: 191;
	background: rgba(220, 50, 47, 0.4); /* dc322f with opacity */
	position: relative;
	padding: 2px 5px 2px 5px;
	border-top: 1px solid #dc322f;
	border-bottom: 1px solid #dc322f;
}

body div[type*=notice] .sender {
	color: #dc322f !important;
	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 #b58900;
	border-bottom: 1px solid #b58900;
	background-color: rgba(203, 75, 22, 0.3) !important;
}

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

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

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: #839496;
}

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: #93a1a1;
}

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;
}

/* REPLY/SYSTEM/ERROR/DEBUG/INVITE */

body div.line[type*=reply],
body div.line[type*=error],
body div.line[type*=invite],
body div.line[type*=system],
body div.line[type*=debug_send],
body div.line[type*=error_reply],
body div.line[type*=debug_receive] {
	color: #839496;
	z-index: 190;
	background: #073642;
	position: relative;
	padding: 2px 5px 2px 5px;
	border-top: 1px solid #586e75;
	border-bottom: 1px solid #586e75;
}

/* 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: #586e75;
}

body[dir=ltr] div[type*=join] .message:before {
	content: "→";
	color: #859900;
	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: #dc322f;
	margin-right: 0.4em;
}

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

body[dir=rtl] div[type*=join] .message:before {
	content: "→";
	color: #859900;
	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: #dc322f;
	margin-left: 0.4em;
}

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

/* Nickname Colors */

body .inline_nickname {
	font-weight: 700;
}

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

body .sender[type*=normal][colornumber='0'], 
body .inline_nickname[colornumber='0'] { 
	color: #dc322f; /* kept red for right now */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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; }

/* extras */
.ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}