@charset "utf-8";
/*--------------------------------------------------------------------
ライブチャット チャットログ / 管理画面・一般画面共有
--------------------------------------------------------------------*/


div.chatBase01{
	width			:	760px;
	height		:	50px;
	clear			:	both;
	background:	url(../images/shop/chatBaseBg01.jpg) no-repeat;
}

div.chatBase01 p{
	padding-top	:	18px;
	text-align	:	center;
	font-size		:	18px;
	color				:	#DD0000;
}

div.chatBase02{
	width			:	760px;
	height		:	350px;
	background:	url(../images/shop/chatBaseBg02.jpg) no-repeat;

}

div.chatBase02{
	text-align	:	center;
	padding-top	:	5px;
	position		:	relative;
}

div#chatFrame{
	/*width		:740px;*/
	width		:	758px;
	height	:	335px;
	border	:	1px solid #BBBBBB;
	margin	:	0 auto;
	background-color		:	#FFFFFF;
	background-image		:	url('../images/chatback.gif');
	background-repeat		:	no-repeat;
	background-position	:	400px 200px;
}

div#chatLog{
	text-align	:	left;
	/*width				:	730px;*/
	width				:	748px;
	height			:	325px;
	padding			:	5px;
	overflow		:	scroll;
	overflow-x	:	hidden;
}


div#chatLog span{
	margin-top		:	3px;
	margin-bottom	:	1px;
	margin	:	0;
	cursor	:	default;
}

div#chatLog .icon{
	display	:	block;
	float		:	left;
	margin-right	:	2px;
}
div#chatLog .icon img{
	width		:	15px;
	height	:	15px;
}


div#chatLog .icon a,div#chatLog .icon span{
	display	:	block;
	width		:	15px;
	height	:	15px;
	margin	:	1px 1px 0 1px;
	padding	:	0px;
	border	:	1px solid #FFFFFF;
	float		:	left;
}
div#chatLog .icon a:hover{
	border	:	1px solid #FF0000;
}

div#chatLog span.time{
	color				:	#CCCCCC;
	font-size		:	10px;
	margin-left	:	5px;
	cursor			:	default;
}


div#chatLog .message{
	display			:	block;
	width				:	650px;
	float				:	left;
	font-size		:	12px;
	line-height	:	14px;
	margin			:	3px 0px 2px 0px;
	padding-left:3px;
}

div#chatLog p{
	clear					:	both;
	height				:	1px;
	margin				:	0px;
	padding				:	0px;
	border				:	none;
	border-bottom	:	1px dotted #CCCCCC;
	font-size			:	0px;
}


/* 顔文字用レイヤー */
div#aaWinLayer{
	position	:	absolute;
	width			:	200px;
	height		:	300px;
	z-index		:	1;
	top				:	10px;
	right			:	30px;
}


/*==============================================================================================*/

/* チャット発言欄 */
div#chatform{
	width						:	740px;
	padding					:	9px;
	background-color:	#E5E4E6;
	border					:	1px solid #BBBBBB;
	border-bottom		:	5px solid #696969;
}

div#chatform table{
	width				:	100%;
	table-layout:	fixied;
}

div#chatform th, div#chatform td{
	height				:	28px;
	text-align		:	left;
	vertical-align:	middle;
}

div#chatform th{
	width				:	78px;
	text-indent	:	-9999px
}
div#chatform th.titHn			{ background: url('../images/livechat/chat_name.png')		 no-repeat right; }
div#chatform th.titMsg		{ background: url('../images/livechat/chat_comment.png') no-repeat right; }
div#chatform th.titColor	{ background: url('../images/livechat/chat_color.png')	 no-repeat right; }

div#chatform td.tdBtn{
	position	:	relative;
	width			:	98px;
	text-align:	center;
}


/* テキストボックス */
input#hname, input#chatmsg{
	box-shadow	:	none;
	border			:	1px solid #696969;
	margin			:	0;
	padding			:	2px;
	font-size		:	12px;
	line-height	:	14px;
}
input#chatmsg{
	width	:	550px;
}
input#hname:hover, input#hname:focus,
input#chatmsg:hover, input#chatmsg:focus {
	border	:	1px solid #FF0000;
}


/* チャットフォームボタン共通 */
div#chatform input[type="submit"], div#chatform input[type="button"]{
	width				:	82px;
	height			:	28px;
	margin			:	0;
	padding			:	0;
	text-indent	:	-9999px;
	border			:	none;
	box-shadow	:	none;
	cursor			:	pointer;
}
div#chatform input.enter		{ background: url('../images/livechat/chat_btn_login.png')		no-repeat left; }
div#chatform input.exit			{ background: url('../images/livechat/chat_btn_logout.png')		no-repeat left; }
div#chatform input.sendmsg	{ background: url('../images/livechat/chat_btn_comment.png')	no-repeat left; }
div#chatform input.kaomoji	{ background: url('../images/livechat/chat_btn_kaomoji.png')	no-repeat left; }
div#chatform input.stamp		{ background: url('../images/livechat/chat_btn_stamp.png')		no-repeat left; }


/* チャットカラーリスト */
div#chatform .colorlist{
	width	:	auto;
}
div#chatform .colorlist:after{
	content	:	"";
	display	:	block;
	height	:	0;
	clear		:	both;
}

div#chatform .colorlist li{
	position		:	relative;
	width				:	18px;
	height			:	18px;
	margin-top	:	7px;
	margin-right:	3px;
	float				:	left;
	text-indent	:	-9999px;
	border			:	1px solid #FFFFFF;
	cursor			:	pointer;
}
div#chatform .colorlist li.sel:before{
	content			:	"";
	position		:	absolute;
	top					:	-6px;
	left				:	50%;
	margin-left	:	-6px;
	border			:	6px solid transparent;
	border-top	:	6px solid #000000;
}


/* 顔文字フォーム */
div#frmKaomoji{
	position				:	absolute;
	right						:	0;
	top							:	30px;
	width						:	180px;
	height					:	360px;
	z-index					:	500;
	background-color:	#FFFFFF;
	border					:	2px solid #696969;
}

div#frmKaomoji p,
div#frmStamp p{
	color				:	#FFFFFF;
	line-height	:	20px;
	font-weight	:	bold;
	background	:	#696969;
}

div#frmKaomoji ul#liveNameList,
div#frmKaomoji ul#listKaomoji{
	overflow	:	auto;
	height		:	160px;
}

div#frmKaomoji li{
	cursor		:	pointer;
	padding		:	1px 5px;
	text-align:	left;
}
div#frmKaomoji li:hover{
	background-color	:	#DDDDDD;
}


/* スタンプフォーム */
div#frmStamp{
	position	:	absolute;
	right			:	0;
	top				:	30px;
	width			:	180px;
	height		:	220px;
	z-index		:	501;
	background-color:	#FFFFFF;
	border					:	2px solid #696969;
}

ul#listStamp{
	height		:	200px;
	overflow		:	scroll;
	overflow-x	:	hidden;
}
ul#listStamp:after{
	content	:	"";
	display	:	block;
	height	:	0;
	clear		:	both;
}

div#frmStamp li{
	cursor		:	pointer;
	width			:	50px;
	height		:	50px;
	float			:	left;
	text-align:	left;
}
div#frmStamp li:hover{
	background-color	:	#DDDDDD;
}