// Place all the styles related to the Messages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

$blueSea: #8bf;
$gray: #999999;
$white: #fff;

#chatroom {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background-color: $white;
	background-image: -webkit-linear-gradient(top, #8bf, #eee);
	background-image: -moz-linear-gradient(top, #8bf, #eee);
	background-image: -o-linear-gradient(top, #8bf, #eee);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";
	position: fixed;
	right: 0;
	bottom: 0;
	width: 400px;
	height: 550px;
	div.min-chatroom {
		height: 35px;
		text-align: center;
		cursor: pointer;
	}
	.chat-show {
		#chat {
			// a complete message including information(time) and content
			.message-line {
				position: relative;
				padding: 0px;
				margin-top: 0px;
				margin-left: 0px;
				margin-bottom: 20px;
				top: 0px;
				display: block;
				// the message information
				.info-message {
					position: relative;
					display: block;
					margin: 0px;
					.sender {
						padding-left: 3px;
						display: inline;
						position: relative;
						font-weight: bold;
						font-color: $gray;
					}
					.send-time {
						position: relative;
						float: right;
						margin-right: 10px;
					}
				}
				// the message that you send
				.say {
					display: block;
					position: relative;
					margin-top: 10px;
					padding-left: 10px;	// the message that you sent must indent 10px
					// change the message formation
					span {
						top: 0;
						left: 0;
						position: relative;
					}
				}
			}
			position: relative;
			height: 300px;
			margin: 5px;
			border: 1px solid $gray;
			background-color: $white;
			overflow-y: scroll;
		}
		span {
			position: absolute;
			top: 36px;
		}
	}
	.chat-send {
	//------- Form
		.send-message {
			margin: 8px;
			width: 100%;
			position: relative;
			div.send-bar {
				height: 16px;
				width: 95%;
				margin-bottom: 0px;
				border: 1px solid $gray;
				border-bottom: none;
				.emotions {
					text-decoration: none;
					position: relative;
					width: 18px;
					height: 16px;
					text-align: center;
					cursor: pointer;
					.emotions-icon {
						display: inline-block;
						position: relative;
						background: image-url("chatroom-icons/default.png") 0px -609px no-repeat;
						width: 18px;
						height: 16px;
						border-right: 1px solid $gray;
					}
				}
				.font-bloder {
					position: relative;
					width: 18px;
					height: 16px;
					text-align: center;
					cursor: pointer;
					.font-bloder-icon {
						display: inline-block;
						position: relative;
						background: image-url("chatroom-icons/default.png") 0px -416px no-repeat;
						width: 18px;
						height: 16px;
						border-right: 1px solid $gray;
					}
				}
				.font-italic {
					position: relative;
					width: 18px;
					height: 16px;
					text-align: center;
					cursor: pointer;
					.font-italic-icon {
						display: inline-block;
						position: relative;
						background: image-url("chatroom-icons/default.png") 0px -432px no-repeat;
						width: 18px;
						height: 16px;
						border-right: 1px solid $gray;
					}
				}
				.font-colorer {
					position: relative;
					width: 20px;
					height: 16px;
					text-align: center;
					cursor: pointer;
					.font-colorer-icon {
						display: inline-block;
						position: relative;
						background: image-url("chatroom-icons/default.png") 0px -384px no-repeat;
						width: 20px;
						height: 16px;
						border-right: 1px solid $gray;
					}
				}
			}
			#new_message_editor {
				display: inline;
				position: relative;
				float: left;
				width: 94%;
				border: 1px $gray solid;
				font-size: 14px;
				font-family: "Tahoma", "SimSun";
				word-wrap: break-word;
				line-height: 18px;
				overflow-x: hidden;
				outline: none;
			}
			div.send {
				input[type="submit"].btn {
					position: relative;
					margin: 10px;
					float: right;
				}
			}
		}
	}
}

//---------- when the chatroom hided, this thing show
#chatBeam {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background-color: $white;
	background-image: -webkit-linear-gradient(top, #8bf, #eee);
	background-image: -moz-linear-gradient(top, #8bf, #eee);
	background-image: -o-linear-gradient(top, #8bf, #eee);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";
	background-repeat: repeat-x;
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	width: 400px;
	div.max-chatroom {
		height: 35px;
		text-align: center;
		cursor: pointer;
	}
}

//---------- emotions
table.chatroom-emotions-images {
	border: 0;
	margin: 0;
	padding: 5px;
	border-collapse: separate;
	background-color: $white;
	position: absolute;
	left: 10px;
	top: 2px;
	z-index: 1;
	display: none;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	tbody {
		display: table-row-group;
		vertical-align: middle;
		border-color: inherit;
		tr {
			td.chat-cell {
				margin: 0;
				padding: 1px;
				border: 1px solid #F0F0EE;
				cursor: pointer;
				span.emotion-img {
					display: block;
					overflow: hidden;
					margin: 2px;
					width: 24px;
					height: 24px;
					margin: 0;
					padding: 0;
					border: 0;
					border: 1px $white solid;
					&:hover {
						border: 1px $blueSea solid;
					}
				}
			}
		}
	}
}

//---------- font-color picker
.chatroom-font-colors {
	border: 0;
	margin: 0;
	padding: 2px;
	border-collapse: separate;
	background-color: $white;
	position: absolute;
	left: 14px;
	top: 4px;
	z-index: 1;
	display: none;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	tbody {
		display: table-row-group;
		vertical-align: middle;
		border-color: inherit;
		tr {
			td.chat-cell {
				margin: 0;
				padding: 1px;
				border: 1px solid #F0F0EE;
				cursor: pointer;
				span.font-color {
					display: block;
					overflow: hidden;
					margin: 1px;
					width: 12px;
					height: 12px;
					margin: 0;
					padding: 0;
					border: 0;
					border: 1px $white solid;
					&:hover {
						border: 1px $blueSea solid;
					}
				}
			}
		}
	}
}

.btn {
	color: white;
	background-color: $blueSea;
	cursor: pointer;
	padding: 2px 10px 2px 10px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}