/*
//
//  public/css/home.php
//  criado por Peewee em 21/06/2011
//	modificado por Peewee em 21/06/2011
//
//
*/

@import "lib.less";

#vitrine
{
	overflow: hidden;
	position: relative;
	width: 890px;
	height: 260px;
	
	
	.container
	{
		height: 260px;
		float: left;
		overflow: hidden;
		position: absolute;
		margin: 0;
		
		.item
		{
			float: left;
		}
	}
	ul
	{
		list-style: none;
		padding: 0;
		position: relative;
		left: 50%;
		margin: 245px 0 0 0;
		
		li
		{
			width: 14px;
			height: 14px;
			margin: 0 5px 0 0;
			padding: 0;
			float: left;
			background: url(../images/destaque_nav.png) no-repeat 0 -14px;
			cursor: default;
			cursor: pointer;
			
			&:hover, &.active
			{
				background-position: 0 0px;
			}	
		}
	}	
}
.center
{
	margin: 20px;
	width: 608px;
	float: left;
	overflow: hidden;
	
	h2
	{
		height: 30px;
		margin: 0;
		padding: 0;
		font: normal 18px @fontMain;
		font-weight: lighter;
		color: @azul;
	}
	
	/*h3
	{
		height: 20px;
		margin: 0;
		padding: 0;
		font: normal 13px @fontMain;
		font-weight: lighter;
		color: @azul;
	}*/
	.publicidade
	{
		margin: 0 0 20px 0;
		
		#banner
		{
			width: 600px;
			height: 90px;
			padding: 3px;
			border: solid 1px #d1d1d1;
		}
	}
	.blog
	{
		img
		{
			border: none;
		}
		
		a
		{
			text-decoration: none;
			color: @azul;
		}
		
		.destaque
		{
			width:608px;
			height: 178px;
			overflow: hidden;
			position: relative;
			float: left;
			margin: 20px 8px 0 0;
			
			&.clear
			{
				margin-right:0;
			}
			
			a
			{
				float: left;
				overflow: hidden;
				width:608px;
				height: 178px;
				
				&:hover
				{
					border: solid 4px @azul;
					width:600px;
					height: 170px;
					
					img
					{
						margin: -4px;
						border: none;
					}
					
					.info
					{
						h3.title
					 	{
					 		margin: 0;
					 		padding: 0;
					 		font: lighter 12px @fontMain;
					 		color: #fffeff;
					 	}	
					}
					
					h2
					{
						margin: 4px;
					}
					p
					{
						margin: 0 4px;
					}
				}	
				.imagem
				{
					width:608px;
					height: auto;
					min-height: 178px;
					border: none;
				}
				.info
				{
					width: 608px;
					padding:5px 10px 9px 10px;
					overflow:hidden;
				 	position:absolute;
					bottom: 0;
				 	background: rgba(78,112,168,0.8);
				 	
				 	h3.title
				 	{
				 		margin: 0;
				 		padding: 0;
				 		font: lighter 12px @fontMain;
				 		color: #fffeff;
				 	}				 	
				}
				h2
			 	{
					margin: 8px 8px 4px 8px;
					padding: 0;
					font: normal 16px @fontMain;
					font-weight: lighter;
					color: @azul;
				}
				p
				{
					margin: 0 8px;
					padding: 0;
					font: normal 10px @fontMain;
					font-weight: lighter;
					color: @padrao;
					line-height: 15px;					
				}
			}
		}
			
		.item
		{
			
			width:300px;
			height: 208px;
			//overflow: hidden;
			position: relative;
			float: left;
			margin: 20px 8px 0 0;
			
			&.bottom
			{
				margin: 70px 8px 0 0;
			}
							
			&.clear
			{
				margin-right:0;
			}
			
			&.colunista
			{
				a:hover
				{
					border: 0;
				}
			}
			
			.author
			{
				position: relative;
				float: left;
				width: 300px
				height: 200px;
				margin: -50px 0 5px 0;
				img
				{
					float: left;
					margin: 0 10px 0 0;
				}				
				h2{
					float: left;
					margin: 13px 0 0 0;
					font-size: 14px;
					padding: 0;
				}
			}
			
			a
			{
				float: left;
				overflow: hidden;
				width:300px;
				height: 208px;
								
				.imagem
				{
					width:300px;
					height: auto;
					min-height: 208px;
					border: none;
				}
				.info
				{
					width: 280px;
					padding:5px 10px 9px 10px;
					overflow:hidden;
				 	position:absolute;
					bottom: 0;
					font: lighter 12px @fontMain;
				 	color: #fffeff;
				 	background: rgba(78,112,168,0.8);
				 	
				 	h3.title
				 	{
				 		margin: 0;
				 		padding: 0;
				 		font: lighter 12px @fontMain;
				 		color: #fffeff;
				 	}
				}
				h1
			 	{
			 		margin: 0 0 10px 0;
			 		padding: 0;
					font: normal 20px @fontMain;
					font-weight: lighter;
					color: @azul;
				}
				h2
			 	{
					margin: 8px 8px 4px 8px;
					padding: 0;
					font: normal 16px @fontMain;
					font-weight: lighter;
					color: @azul;
				}
				p
				{
					margin: 0 8px;
					padding: 0;
					font: normal 10px @fontMain;
					font-weight: lighter;
					color: @padrao;
					line-height: 15px;					
				}
				.texto{
					float: left;
					margin: 0 10px 0 0;
					font: normal 11px @fontMain;
					font-weight: lighter;
					color: @padrao;
				}
				&:hover
				{
					border: solid 4px @azul;
					width:292px;
					height: 200px;
					
					img
					{
						margin: -4px;
						border: none;
					}
					.texto
					{
						width: 288px;
					}
					.info
					{

					}
					
					h2
					{
						margin: 4px;
					}
					p
					{
						margin: 0 4px;
					}
				}	
			}
		}
	}
}
.sidebar
{
	width:222px;
	margin: 20px 20px 20px 0;
	float: left;
	overflow: hidden;
	
	h3
	{
		height: 20px;
		margin: 0;
		padding: 0;
		font: normal 13px @fontMain;
		font-weight: lighter;
		color: @azul;
	}
	.produtos, .publicidade, .narede
	{
		margin: 0 0 20px 0;
	}
	.produtos
	{
		
		a,a:hover
		{
			text-decoration: none;
		}
		
		.item
		{
			width: 220px;
			height: 80px;
			margin: 0 0 10px 0;
			border: solid 1px #d1d1d1;
			
			img
			{
				float: left;
				
				&.alt
				{
					float: right;
				}
			}
			
			.info
			{
				margin: 5px 20px 0 20px;
				font: normal 12px @fontMain;
				.nome
				{
					margin: 0;
					padding: 0;
					color: #2a2a2a;
				}
				.categoria
				{
					margin: 0;
					padding: 0;
					color: #949494;	
				}
				.preco
				{
					margin: 5px 0 0 0;
					padding: 0;
					color: #FF0000;	
				}
			}
		}
	}
	.publicidade
	{
		.bannerA
		{
			width: 220px;
			height: 160px;
			margin: 0 0 10px 0;
			background: #e4e4e4;
		}
		.bannerB
		{
			width: 100px;
			height: 60px;
			margin: 0 0 10px 0;
			background: #e4e4e4;
			float: left;
		}
		.bannerC
		{
			width: 100px;
			height: 60px;
			margin: 0 0 10px 0;
			background: #e4e4e4;
			float: right;
		}
		.bannerD
		{
			width: 220px;
			height: 60px;
			margin: 0 0 10px 0;
			background: #e4e4e4;
			clear: both;
		}
		
	}
	.narede
	{
		.facebook, .twitter
		{
			margin: 0 0 10px 0;
			overflow:hidden;
		}
	}
}