/* --------------- Chat --------------- */
div#chat {
	background-color:#FFFFFF;
	border:#999999 solid 1px;
	border-radius:5px;
	box-shadow:0px 3px 3px rgba(0, 0, 0, 0.3);
	display:none;
	left:100%;
	margin-left:-20px;
	margin-top:-20px;
	position:fixed;
	top:100%;
	-webkit-transform:translate(-100%, -100%);
	transform:translate(-100%, -100%);
	width:400px;
	z-index:1000;
}
div#chat > button:first-child {
	background:none;
	border:none;
	color:rgba(204, 204, 204, 0);
	font-size:0px;
	height:20px;
	margin-left:-25px;
	margin-top:5px;
	left:100%;
	position:absolute;
	width:20px;
}
div#chat > button:first-child::before {
	color:#CCCCCC;
	content:'\00D7';
	display:block;
	font-size:20px;
	height:20px;
	line-height:20px;
	text-align:center;
	width:20px;
}

/* --------------- Log In --------------- */
form#chatLogIn {
	margin:40px auto 40px auto;
	width:320px;
}
form#chatLogIn input[type="text"] {
	background-color:#FFFFFF;
	border:#CCCCCC solid 1px;
	border-radius:2px;
	display:block;
	font-family:Arial;
	font-size:16px;
	height:30px;
	line-height:30px;
	margin-bottom:10px;
	padding:0px 10px 0px 10px;
	text-align:center;
	width:298px;
}
form#chatLogIn input[type="submit"] {
	background-color:#FF9933;
	border:none;
	border-radius:5px;
	color:#FFFFFF;
	display:block;
	height:30px;
	width:320px;
}

/* --------------- Chat Panel --------------- */
form#chatLogIn + div#chatPanel {
	display:none;
}

/* --------------- Chat Greeting --------------- */
p#chatGreeting {
	background-color:#009900;
	color:#FFFFFF;
	margin-bottom:0px;
	padding:0px 10px 0px 10px;
	line-height:30px;
}
p#chatGreeting b {
	text-transform:capitalize;
}

/* --------------- Chat View Port --------------- */
div#chatViewPort {
	border-bottom:#999999 solid 1px;
	font-size:12px;
	height:200px;
	overflow:auto;
	position:relative;
	width:400px;
}

/* --------------- Chat Thread --------------- */
div#chatThread {
	padding-left:15px;
	padding-right:15px;
	padding-top:15px;
}
div#chatThread p {
	line-height:20px;
	margin-bottom:10px;
}
div#chatThread p.system {
	color:#999999;
	text-align:center;
}
div#chatThread p.system::before {
	content:'- - - - - - - - - - ';
}
div#chatThread p.system::after {
	content:' - - - - - - - - - -';
}

/* --------------- Chat Input --------------- */
form#chatInput textarea {
	background-color:#FFFFFF;
	border:none;
	display:block;
	float:left;
	font-family:Arial;
	font-size:12px;
	height:60px;
	line-height:15px;
	padding:10px;
	resize:none;
	width:320px;
}
form#chatInput input {
	background-color:#FFFFFF;
	background-image:url(/graphics/send-arrow.png);
	background-position:center;
	background-repeat:no-repeat;
	border:none;
	color:rgba(255, 255, 255, 0);
	display:block;
	float:left;
	font-size:0px;
	height:80px;
	width:60px;
}