/*

	Css modular de classes pre definidas.

	A finalidade desse arquivo é otimizar a interfaces e o desenvolvimento dos projetos.

	

	! desenvolver foto com legenda

	

	ultima atualização:

	4/05/2009

	

	conteudo:	

	|---	* .lista horizontal

	|---	* .menu_arvore

	|---	* .funcionalidades

	|---	* .coluna

	|---	* .funcionalidades

	|---	* .lista_dados

	|---	* forms

	|---	* .grid

	|---	* .paginacao

	|---	* .path

	|---	* Classes essenciais

	|---	* Clasees de posicionamentos

	

*/



/* ------------------------------  */



/*

	Classe lista horizontal, aplicada no elemento <ul>(lista nao ordenada) e <ol>(lista ordenada)).

	Regras de estilizaçoes, cores, tamanhos, fontes devem ser chamados pelo id do elemento.

	Abaixo as regras que estruturam a forma da lista vertical.

	Ex:

	<ul class="lista_horizontal" id="menu">

		<li>Menu item 1</li>

		<li>Menu item 2</li>

		<li>Menu item 3</li>

	</ul>

*/



ul.lista_horizontal {display:inline-block;list-style:none;}
ul.lista_horizontal:after {display:block;visibility:hidden;clear:both;height:0;content:" ";}
ul.lista_horizontal li{display:inline;float:left;}

/*  se tiver links nos itens(<li>). */
ul.lista_horizontal li a{display:block;float:left;}
/* Fim lista horizontal. */
/* ------------------------------  */
/*

	Classe menu_arvore, aplicada no elemento <ul>(lista nao ordenada) e <ol>(lista ordenada)).

	Regras de estilizaçoes, cores, tamanhos, fontes devem ser chamados pelo id do elemento.

	Abaixo as regras que estruturam a forma da menu_arvore.	

	Em itens que possuem filhos, deve se aplicar a tag a com a class .sub_item :

		<a href="javascript://" onclick="escondeMostra()" class="sub_item"><img src="imagens/imgagem.gif" /></a>

	E utilizar a tag ul com class .sub	

	Ex:

	<ul class="menu_arvore" id="menu">

		<li>Menu item 1</li>

		<li><a href="javascript://" onclick="escondeMostra()" class="sub_item"><img src="imagens/imgagem.gif" /></a>Menu item 2</li>

			<ul>

				<li><a href="" class="item_pai">item filho1</a></li>

				<li><a href="" class="item_pai">item filho2</a></li>

				<li><a href="" class="item_pai">item filho3</a></li>

			</ul>

		<li>Menu item 3</li>

	</ul>

	lembrando que esse componente usa a função javascript escondeMostra(objeto); que se encontra no arquivos js/funcoes.js

*/



ul.menu_arvore{list-style-type: none;}

ul.menu_arvore li{position:relative;}

ul.menu_arvore li a{display:block;}



ul.menu_arvore li a.sub_item{position:absolute;top:5px;left:0;width:25px;}

ul.menu_arvore li a.sub_item:hover{background:none;}



ul.menu_arvore li a.item_pai{text-indent:12px;}

ul.menu_arvore li ul.sub{display:none;}

ul.menu_arvore li ul.sub li{list-style-type: none;}

ul.menu_arvore li ul.sub li a{list-style: none;}

ul.menu_arvore li ul.sub li{text-indent:15px;background: none;}



/*Fim menu_arvore. */



/* ------------------------------  */



/*

	class funcionalidades

	extenção da classe .lista_horizontal.

	adiciona caracteristicas visuais para as listas de funcionalidades.

	<ul class="lista_horizontal funcionalidades">

		<li>...</li>

	</ul>

*/





ul.funcionalidades {margin:5px;}

ul.funcionalidades li{

	display:table-cell;

	position:relative;	

	width:90px;

	height:80px;	

	margin:3px;

	padding:3px;		

	text-align:center;	

	vertical-align:middle;	

}

ul.funcionalidades li a{width:100%; height:100%;text-decoration:none;background: url(../imagens/bg_utilidade.jpg) no-repeat;}

ul.funcionalidades li a:hover{background: url(../imagens/bg_utilidadex.jpg) no-repeat;}

/*Fim funcionalidades. */



/* ------------------------------  */



/*

	Classe coluna, aplicada no elemento <div> faz com que uma div flutue, podendo ficar do lado da outra(colunas)

	Regras de tamanho deve ser chamadas pelo id do elemento

	Ex:

		<div class="coluna" id="coluna1">

			<p>conteudo...</p>

		</div>

		<div class="coluna" id="coluna2">

			<p>conteudo...</p>

		</div>



*/



div.coluna{float:left;} /* ie 6  x*/

div.coluna_direita{float:right;}

* html div.coluna, * html div.coluna_direita{display:inline;} /* hack ie 6 double margin */

div.coluna:after, div.coluna_direita:after{display:block;clear:both;content:" ";}



/*Fim lista generica. */



/* ------------------------------  */



/*

	classe funcionalidades

	responsavel por criar os elementos que mostrarão as partes mais acessadas do sistema, pagina principal.

	ex:

	<div class="funcionalidades">

		

		<div class="borda coluna">

		</div>

		

	</div>

*/



div.funcionalidades fieldset{border:1px solid #999999;}

div.funcionalidades legend{letter-spacing:2px;color:#0066FF;}

div.funcionalidades div.bloco{float:left;width:48%;padding:1%;}

div.funcionalidades div table.grid td{padding:2px;}

div.funcionalidades div img{float:left;}



/* Fim  funcionalidades. */



/* ------------------------------  */



/*

	classe lista_dados

	responsavel por mostrar dados especificos.

		ex:

	<ul class="lista_dados">

		<li>dados</li>		

		<li>dados</li>		

		<li>dados</li>		

	</ul>

*/

.apresentacao ul li, .lista_dados li{margin:10px;font-size:0.75em;}
.apresentacao ul li, .apresentacao ol li{margin:10px;padding-left:10px;font-size:0.75em; background:url(../img/quadrado-azul.jpg) no-repeat 0 2px;}
.apresentacao ul, .apresentacao ol{margin:20px 0; color:#000;}

ol.lista_dados{list-style:decimal inside;}


dl.lista_dados dt{font-weight:bold;}
dl.lista_dados dd{padding-left:5px;font-size:0.75em;}


/* Fim  funcionalidades. */



/* ------------------------------  */



/* 

	pre definição de forms	

*/





fieldset{margin:5px 0 5px 0;padding:5px;border:1px solid #CCCCCC;}

legend{margin:0 5px;font-weight:bold;}

label{display: block;float:left;height:24px;line-height:24px;font-size:100%;/*margin: 0 0 0 5px;padding: 0 0 0 10px;*/}

input{background:url(../img/bg_campos.gif) no-repeat;height:20px;padding:2px; font-size:100%;margin-bottom:10px;font-weight:bold;background:#CCCCCC}



/*input{padding:3px;margin-bottom:10px;background:url(../imagens/bg_campos.gif) no-repeat;height:20px}*/

select{padding:2px;background:url(../imagens/bg_campos.gif) no-repeat;margin-bottom:10px;}

input[type="checkbox"], input[type="radio"]{margin:0;padding:0;border:0;background:none;} /* não funciona no IE6 */

textarea{margin-bottom:10px;background:url(../img/bg_campos.gif) no-repeat;background:#CCCCCC}



/* Fim  forms. */



/* ------------------------------  */



/* Complementos para forms */



div.checkbox_list, div.form_inline{margin-bottom:5px;}

div.checkbox_list label{display:inline;float:none;padding:0 !important;margin:0 !important;border:none;}



div.form_inline label,

div.form_inline input,

div.form_inline select{display:inline;float:none;margin:0;padding:0;}



/* Fim  complementos para forms. */



/* ------------------------------  */





/*

	mensagens informativas em campos de formulários	

*/



label span{color:#FF0000;margin: 0 3px 0 3px;}





/* estilos para inputs, textareas e botoes */

.textarea_p{width:300px;height:100px;}

.textarea_m{width:350px;height:100px;}

.textarea_g{width:450px;height:150px;}

.textarea_e{width:500px;height:150px;}



.pequeno{width:30px;}

.medio{width:200px;}

.grande{width:300px;}

.extra{width:400px;}



.p_medio{width:95%;}

* html .p_medio{width:90%;} /* -- ie 6 bug -- */

.p_grande{width:100%;}



.botao_p{

	background:url(../imagens/bg_botao.gif) repeat-x;

	border:1px solid #999999;	

	color:#333333;

	height:22px;

	width:100px;

}

.botao_m{

	height:26px;

	width:130px;

	border:1px solid #999999;	

	background:url(../imagens/bg_botao.gif) repeat-x;

	color:#333333;

}

.botao_g{

	height:26px;

	width:160px;

	border:1px solid #999999;	

	background:url(../imagens/bg_botao.gif) repeat-x;	

	color:#333333;

}



/* fim estilos para inputs, textareas e botoes */





/* fim dos forms*/





/* ------------------------------  */



/*  .grid elemento responsavel pela listagem de dados tabulados */



table.grid{width:100%;margin-bottom:10px;}

table.grid caption{text-align:left;}

table.grid td, table.grid th{padding:2px; vertical-align:middle;}

table.grid thead th{background:#c9c9c9 url(../imagens/bg_thead.jpg); padding:5px;}

table.grid tfoot {padding:5px; text-align:right;}



table.grid .alternada{background:#e6e6e6;}

table.grid .grid_link{text-align:center; width:40px; vertical-align:middle;}

table.grid .alternada{background:#d3d3d3;}



/* fim grid */

 

/* ------------------------------  */



/* paginação */



div.paginacao{margin:5px 0;text-align:right;}

div.paginacao span{padding:2px;}

div.paginacao a{margin:3px;}



/* fim paginação */



/* ------------------------------  */



/* Path */



.path li a{ display:block; margin-right:3px;padding:0 15px 0 0; background:url(../imagens/ico_path.gif) no-repeat 100% 65%;}



/* fim Path */



/* ------------------------------  */



/*

	estilos padrões de mensagens para usuários.

	ex:

		<div class="positivo borda">

			<p>senha incorreta</p>

		</div>

	é possivel usar duas classes em um mesmo elemento(class="warning borda").

	lembrando que a .borda faz com que um elemento possua canto arredondado e adicione margin e padding, por questões de estética.

*/		

	

.borda{clear:both;margin:10px 0 10px 0;padding:10px;}

.sucesso{padding-left:45px;background:#ecfeca url(../imagens/ico_positivo.gif) no-repeat 3px 3px;}

.aviso{padding-left:45px;background:#fef8ca url(../imagens/ico_aviso.gif) no-repeat 3px 3px;}

.erro{padding-left:45px;background:#fecacb url(../imagens/ico_negativo.gif) no-repeat 3px 3px;}

.obrigatorio{color:#ff0000;}



/* fim mensagens */



/* ------------------------------  */



/* 

	Classes essenciais. !important serve para que essa propriedade seja seja respeitada

	independente da ordem de outras propriedade sobre o elemento

*/



/* posicionamentos */

.relativa{position:relative;}

.absoluta{position:absolute;}



.esquerda{text-align:left;}

img.esquerda{float:left;margin:5px 10px 10px 5px;} /* para imagens */

.f_esquerda{float:left;}



.meio{text-align:center;}



.direita{text-align:right;}

img.direita{float:right;margin:5px;} /* para imagens */

.f_direita{float:right !important;}



.hide{display:none;}



/* perdendo propriedade */

.no_bg{background:none !important;}

.no_border{border:none !important;}

.no_border_top{border-top:none !important;}

.no_border_right{border-right:none !important;}

.no_border_bottom{border-bottom:none !important;}

.no_border_left{border-left:none !important;}

.clear{clear:both}

.cleaner:after {display:block;clear:both;content:" ";}

/* fim Classes essenciais */



/* ------------------------------  */