/*-----------------------------------------------------------------------------
Folha de estilos

version:   1.0
author:    Plus! Estudio Web
email:     contato@plusestudioweb.com.br
website:   http://www.plusestudioweb.com.br
-----------------------------------------------------------------------------*/

/* =Geral
-----------------------------------------------------------------------------*/
/* Definindo Html e Body */
html{ margin:0; padding:0;}
body
{ 
	margin:20px 0 0 0;
	padding:0;
	text-align:center;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
}


/* =Pagina Inicial
-----------------------------------------------------------------------------*/
/* Entrada do Chat */
#entrada_chat_box{ width:371px; height:290px; margin:40px auto 0 auto; padding:0; background:url(../../_IMG/entrada_chat/bg_entrada.jpg) center top no-repeat; clear:both;}
.entrada_cima{ width:351px; height:87px; margin:0; padding:43px 10px 0 10px; clear:both;}
.entrada_baixo{ width:331px; height:140px;  margin:0; padding:0 20px 20px 20px; clear:both;}

/* Formulario */
.formulario_entrada_box{ margin:0; padding:0; line-height:1.5em;}
form.formulario_entrada{ margin:0; font-family:Arial, Verdana,s Helvetica, sans-serif; font-size:11px; color:#6E90B0;}	
form.formulario_entrada form{ margin:0; padding:0;}
form.formulario_entrada ul{ width:270px; list-style-type:none; margin:0 0 0 30px; *margin:0; padding:0;}
form.formulario_entrada ul li{ width:270px; margin:4px 0 0 0;}
form.formulario_entrada ul li.left{ width:130px; margin:4px 5px 8px 0; padding:0; float:left;}
form.formulario_entrada ul li.botao{ width:270px; margin:6px 0 0 0; text-align:right;}
form.formulario_entrada ul li.botao_moderador{ width:266px; margin:8px 0 0 0; /*Hack IE 6 e 7*/ *margin:0; /**/ text-align:right;}
form.formulario_entrada .botaoForm{
		width:100px; 
		height:38px; 
		padding:6px; 
		margin:0; 
		font-family:Arial, Helvetica, sans-serif; 
		font-weight:bold; 
		font-size:16px; 
		text-transform:uppercase; 
		letter-spacing: -1px; 
		background:url(../../_IMG/entrada_chat/bg_botao.gif) left center repeat-x; 
		border:3px double #6E90B0; 
		border-left-color:#cccccc; 
		border-top-color:#e7e7e7; 
		color: #6E90B0;
		cursor:pointer !important;
		/* Hack IE */
		*margin-top:-49px;
		*position:relative;
		*z-index:2;
}
form.formulario_entrada input.nick{ 
	width:250px; 
	padding:5px 7px 7px 7px; 
	font-size:16px; 
	font-weight:bold; 
	letter-spacing:-1px; 
	font-family:Arial, Verdana, Helvetica, sans-serif; 
	color:#6E90B0; 
	border:1px solid #B9C9E3; 
	background:#ffffff;
}	
form.formulario_entrada label{ margin:0 0 1px 0; padding:0; font-family:Arial, Verdana, Helvetica, sans-serif;font-size:12px; font-weight:bold; text-align:left; display:block;}
form.formulario_entrada fieldset{ margin:0; padding:0; border:none; }
form.formulario_entrada legend{ margin:0; padding:0; display:none;}


/* Botao UPLOAD */
.chatFoto label.envolveUploadFoto
{
    width: 140px;
    height: 26px;
		margin-top:5px;
    background:url(../../_IMG/bt_selecionar_foto.gif) 0 0 no-repeat;
		cursor:pointer !important;
    display: block;
		float:left;
    overflow: hidden;
}

.chatFoto label.envolveUploadFoto input.file
{
    position: relative;
    height: 100%;
    width: auto;
		cursor:pointer !important;
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
		z-index:1;
}




/* Caixa Mensagem de Erro*/
.msg_erro{ margin:0; padding:5px; border:1px dashed #6E90B0; background:#FEF5F5; font-weight:bold; line-height:1.2em;}




/* =Pagina Principal
-----------------------------------------------------------------------------*/
/* Container que alerta se o locutor está Online */
#box_locutor{ width:380px; margin:0 auto 0 auto; padding:20px 0 20px 0; text-align:left; float:left;}

/* Container que envolve todos os elementos */
#box_envolve_chat{ width:760px; height:550px; margin:0 auto 20px auto; clear:both; /*Hack IE*/_width:780px;}



/*******
	Containers com as colunas Dir e Esq da estrutura 
*******/
#box-col-esq{ width:550px; margin:0 7px 0 0; padding:0; text-align:left; float:left;}
#box-col-dir{ width:176px; height:510px; margin:0; padding:0; border:1px solid #eeeeee; float:right; /*Hack IE*/*height:530px;}



/*******
	Listas para organizar o conteudo da coluna da direita (box-col-dir)
*******/
/* Lista Online */
#box-col-dir ul.online{ width:176px; /*Hack IE 6 e 7*/*width:154px;/**/ margin:0; padding:0; list-style-type:none; float:left;}
#box-col-dir ul.online li{ width:176px;}
#box-col-dir ul.online li .lista_de_nicks{ 
	padding-top:11px; 
	height:475px; 
	overflow:auto; 
	overflow-y:scroll; 
	overflow-x:hidden; 
	/* Hack IE */
	*height:493px; 
}
/* Hack para funcionar o Scroll no Opera */
html:first-child div#box-col-dir ul.online li .lista_de_nicks{overflow:scroll; overflow-x:auto;}

#box-col-dir ul.online li.titulo_falar_com{ width:176px; height:18px; /*Hack IE 6 e 7*/*width:175px; *height:20px;/**/ margin:0; padding:5px 0 0 0; font-weight:bold; font-size:14px; background:url(../../_IMG/bg_titulo_online.gif) left top repeat-x; border-bottom:1px solid #f7f7f7;}

/* Lista pagina Online.html - Ordena os usuarios*/
ul.usuarios_online{ width:168px; margin:-10px 0 0 2px; padding:0; list-style-type:none;}
ul.usuarios_online li{ width:100%; margin:0; padding:0; text-align:left;}
ul.usuarios_online li.opcao_todos{ width:170px; margin:0; padding:0 0 1px 0; background:url(../../_IMG/bg_tracejado_hz.gif) left bottom repeat-x;}
ul.usuarios_online li.opcao_todos a{ padding:7px 0 6px 0; color:#000000; font-weight:bold; font-size:13px; text-decoration:none; display:block; }
ul.usuarios_online li.opcao_todos a:hover{ color:#000000; background:#f7f7f7; text-decoration:underline;}
ul.usuarios_online li.opcao_todos img{ border:none; vertical-align:middle;}

/* Lista Fupload */
#box-col-dir ul.box_fupload{ width:100%; margin:0; padding:0; list-style-type:none; float:left; display:none;}
#box-col-dir ul.box_fupload li{ width:100%; margin:0; padding:0; display:none;}



/*******
	Container com a lista dos usuarios 
********/
/* Botao falar com todos*/
.bt_falar_com_todos{ margin:0 0 0 100px;}

/* Lista com os usuarios ativos no chat*/
ul.ordena_usuarios{ width:100%; margin:0; padding:0; list-style-type:none;}
ul.ordena_usuarios li{ width:170px; margin:0; padding:0 0 1px 0; background:url(../../_IMG/bg_tracejado_hz.gif) left bottom repeat-x;}
ul.ordena_usuarios li a{ padding:6px 3px 6px 0; color:#000000; text-decoration:none; display:block; }
ul.ordena_usuarios li a:hover{ color:#000000; background:#f7f7f7; text-decoration:underline;}
ul.ordena_usuarios li img{ border:none; vertical-align:middle;}


/* Container com a foto de exibicao do usuario */
.exibe_img_usuario{
	width:120px;
	height:90px;
	margin-left:-123px;
	display:none;
	position:absolute;
	z-index:2;
	text-align:right;
}



/*******
	Container com as mensagens enviadas 
********/
.chat{ width:565px; height:420px; /* Hack IE */*height:440px;/**/ margin:0 0 6px 0; padding:3px; border:1px solid #eeeeee; clear:both;}
/**/
#mostrar{ margin:-20px 0 0 0; text-align: left; }



/********
	Container com envio das mensagens 
*********/
/* Container que engloba todo o Container */
#envolve_msg_box{ width:550px; height:80px; padding:10px 10px 10px 10px; border:1px solid #eeeeee; background:url(../../_IMG/bg_envolve_msg_box.gif) left bottom repeat-x; background-color:#ffffff; clear:both;}


/* Status box */
.status_box .exibe_nick { font-size: 14px; font-weight: bold; letter-spacing: -1px; color: #6E90B0; }
.status_box{ width:100%; margin:0; padding:0; clear:both; display:table;}
.status_box ul{ margin:0; padding:0; list-style-type:none;}
.status_box ul li{ margin:0; padding:0; margin-right: 10px; float: left;}
.status_box .status { margin: 0; float: right; text-align: right; }
.status_box ul li img{ margin:0 20px 0 5px; /*Hack IE 6 e 7*/ *margin:-4px 20px 0 5px; /**/ padding:0; vertical-align:middle;}
.status_box ul li div#exibefrase{ padding:3px 0 0 0; display: none; }
.status_box ul li select{ width:125px; margin:0; padding:1px; font-size:11px; border:1px solid #CCCCCC;}

/* Enviar mensagem box */
.enviar_msg_box{ width:100%; margin:0; padding:0; clear:both; display:table;}
.enviar_msg_box ul{ width:544px; margin:0; padding:0; list-style-type:none;}
.enviar_msg_box ul li{ margin:0; padding:0; float:left;}
/* Textarea */
.enviar_msg_box ul li.textarea{ width:461px; height:50px; margin:0; margin-top: 6px; padding:0;}
.enviar_msg_box ul li.textarea textarea{ width:461px; height:50px; margin:0; padding:0; background:#ffffff;}
.enviar_msg_box ul li.textarea textarea:focus{ background:#fffeef;}
/* Botao Enviar*/
.enviar_msg_box ul li.bt_enviar{ width:70px; height:50px; margin:0 0 0 13px; padding:0;}
.enviar_msg_box ul li.bt_enviar #botenviar img{ margin:6px 0 0 0; border:none;}
.enviar_msg_box ul li.bt_enviar #botenviar img a{ margin:6px 0 0 0; border:none; cursor:pointer;}

ul#box-sub-dir{ height: 20px; clear: both; }
ul#box-sub-dir li { list-style: none; float: left; margin:5px 0 0 20px; text-align: right; /*Hack IE*/*margin:-10px 0 0 20px; _margin:0 0 0 20px; }




/* =Outros
-----------------------------------------------------------------------------*/
.borda {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	border: 1px solid #CCCCCC;
}
.form {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	border: 1px solid #CCCCCC;
}
.formbranco {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	border: 1px solid #DDDDDD;
	background-color: #F7F7F7;
}
.form_textarea{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	border: 1px solid #DDDDDD;
	background:url(../../_IMG/bg_gradiente.gif) left bottom repeat-x;
}
.formfundobranco {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	border: 1px solid #FFFFFF;
}
.bordaint {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	border: 1px solid #999999;
}
a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}
a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: underline;
}
body {
	scrollbar-shadow-color: #FFFFFF; 
	scrollbar-face-color: #FFFFFF; 
	scrollbar-3dlight-color: #CCCCCC; 
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-darkshadow-color: #CCCCCC;
	scrollbar-track-color: #FFFFFF;
	scrollbar-arrow-color: #CCCCCC;
	font-size: 13px;
}

.topo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #FFFFFF;
}


.inferior {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;	
}

.separador {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #fdfdfd;
	margin:0 0 3px 0;	
	padding: 2px;
}

.reservado {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	border: 1px solid #FFFFFF;
	background: #fffeef;
	padding: 2px;
}
.publico {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	border: 1px solid #FFFFFF;
	background-color: #FFFFFF;
	padding: 2px;
}

span.oculto{ display:none;}

#load { position:absolute; width:100%; height:100%; z-index:auto; left: 0px; top: 0px; visibility: visible; background-color: #FFFFFF;}

#textoload { padding-top: 150px;}
#textoload img { margin-top: 10px; }


/*-------------
	TOPO CHAT
-------------*/
#topo_chat{
	width:760px;
	height:auto;
	margin:0 auto;
	clear:both;
}


/*-------------
	LOGO
-------------*/
#logo_chat{
	width:180px;
	padding:20px 0 20px 0;
	color:#a7171d;
	float:left;
	font-size:18px;
	font-weight:bold;
	text-align:left;
}

#logo_chat img{
	vertical-align:middle;
}


/*-------------
	BANNER CHAT
-------------*/
#banner_chat{
	width:580px;
	height:90px;
	padding-bottom:20px;
	float:left;
	clear:right;
}