/*********************************************************************************************************************************************
	Reset styles
**********************************************************************************************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, 
code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, 
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	padding: 0;
	margin: 0;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/*********************************************************************************************************************************************
	General Styles
**********************************************************************************************************************************************/
*{
	font-family:Arial, Tahoma, Verdana, Sans-serif;
	padding:0;
	margin:0;
}

h1, h2, h3, h4, h5, h6{
	font-family:Arial, Tahoma, Verdana, Sans-serif;
	font-weight:normal;
}
a{
	text-decoration:none;
}


/*********************************************************************************************************************************************
	Wrapper, Body & Container
**********************************************************************************************************************************************/

	body
	{
		margin: 0;
		padding: 0;
		background-color: #fff;
		background-image: url("../images/background.jpg");
	}
	
	.wrapper
	{
		width: 838px;
		margin: 0 auto;
		min-height: 800px;
	}
	
	.container
	{
		float:left;
		width: 838px;
		min-height: 800px;
		background-color: transparent;
		margin: 30px 0 10px 0;
	}


/*********************************************************************************************************************************************
	Layout
**********************************************************************************************************************************************/
	
	.logo
	{
		float: left;
		height: 105px;
		width: 219px;
		display: block;
		background-image: url("../images/logo.png");
		text-indent: -9000px;
	}
	
	.titulo-sessao
	{
		float: left;
		height: 34px;
		width: 303px;
		display: block;
		background-image: url("../images/titulos/home.png");
		text-indent: -9000px;
		margin: 0 0 0 0;
		*margin: 90px 500px 0 0;
		
	}
	
		.titulo-sessao-sobre
		{
			float: left;
			height: 34px;
			width: 216px;
			display: block;
			background-image: url("../images/titulos/sobre.png");
			text-indent: -9000px;
			margin: 0 0 0 0;
			*margin: 90px 500px 0 0;
		}
		
		.titulo-sessao-servicos
		{
			float: left;
			height: 34px;
			width: 240px;
			display: block;
			background-image: url("../images/titulos/servicos.png");
			text-indent: -9000px;
			margin: 0 0 0 0;
			*margin: 90px 500px 0 0;
		}
		
		.titulo-sessao-portfolio
		{
			float: left;
			height: 34px;
			width: 240px;
			display: block;
			background-image: url("../images/titulos/portfolio.png");
			text-indent: -9000px;
			margin: 0 0 0 0;
			*margin: 90px 500px 0 0;
		}
		
		.titulo-sessao-contato
		{
			float: left;
			height: 34px;
			width: 293px;
			display: block;
			background-image: url("../images/titulos/contato.png");
			text-indent: -9000px;
			margin: 0 0 0 0;
			*margin: 90px 500px 0 0;
		}
	
	.marcador
	{
		float:right;
		height: 102px;
		width: 149px;
		display: block;
		background-image: url("../images/titulos/01home.png");
		text-indent: -9000px;
		margin: -70px 40px 0 0;
		*margin: -100px 0 0 0;
	}
		
		.marcador-sobre
		{
			float:right;
			height: 102px;
			width: 170px;
			display: block;
			background-image: url("../images/titulos/02sobre.png");
			text-indent: -9000px;
			margin: -70px 40px 0 0;
			*margin: -100px 0 0 0;
		}
		
		.marcador-servicos
		{
			float:right;
			height: 102px;
			width: 199px;
			display: block;
			background-image: url("../images/titulos/03servicos.png");
			text-indent: -9000px;
			margin: -70px 40px 0 0;
			*margin: -100px 0 0 0;
		}
		
		.marcador-portfolio
		{
			float:right;
			height: 102px;
			width: 211px;
			display: block;
			background-image: url("../images/titulos/04portfolio.png");
			text-indent: -9000px;
			margin: -70px 40px 0 0;
			*margin: -100px 0 0 0;
		}
		
		.marcador-contato
		{
			float:right;
			height: 102px;
			width: 193px;
			display: block;
			background-image: url("../images/titulos/05contato.png");
			text-indent: -9000px;
			margin: -70px 40px 0 0;
			*margin: -100px 0 0 0;
		}
	
	.palco
	{
		float: left;
		width: 838px;
		min-height: 500px;
		background-color: white;
		margin: 2px 0 0 0;
	}
	
		.palco-transparente
		{
			float: left;
			width: 838px;
			min-height: 500px;
			background-color: transparent;
			margin: 2px 0 0 0;
		}
	
	.footer
	{
		float: left;
		width: 838px;
		height: 27px;
		background-image: url("../images/footer.png");
	}
	
	.rodape
	{
		float: left;
		width: 838px;
		min-height: 100px;
		margin: 15px 0 0 0;
	}
	
		.sociais
		{
			float: left;
		}
		
			.sociais li
			{
				display: inline;
				float: left;
				margin: 0 15px 0 0;
			}
			
				.sociais li a
				{
					width: 75px;
					height: 67px;
				}
		
		.sociais-contato
		{
			float: left;
		}
		
			.sociais-contato li
			{
				display: inline;
				float: left;
				margin: 75px 15px 0 0;
			}
			
				.sociais-contato li a
				{
					width: 75px;
					height: 67px;
				}
		
					.twitter
					{
						float: left;
						display: block;
						background-image: url("../images/rodape/twitter.png");
						text-indent: -9000px;
					}
					
						.twitter:hover
						{
							background-image: url("../images/rodape/twitter-hover.png");
						}
						
					.rss
					{
						float: left;
						display: block;
						background-image: url("../images/rodape/rss.png");
						text-indent: -9000px;
					}
					
						.rss:hover
						{
							background-image: url("../images/rodape/rss-hover.png");
						}
						
					.blog
					{
						float: left;
						display: block;
						background-image: url("../images/rodape/blog.png");
						text-indent: -9000px;
					}
					
						.blog:hover
						{
							background-image: url("../images/rodape/blog-hover.png");
						}
						
		.dados
		{
			float:right;
			height: 70px;
			width: 243px;
			display: block;
			background-image: url("../images/rodape/dados.png");
			text-indent: -9000px;
		}
	
	.destaque-esquerda
	{
		float: left;
		width: 241px;
		height: 216px;
		background-image: url("../images/destaques/esquerda.jpg");
		background-repeat: no-repeat;
		margin: 20px 15px 0 32px;
		_display: inline;
	}
	
	
	.destaque-centro
	{
		float: left;
		width: 241px;
		height: 216px;
		background-image: url("../images/destaques/centro.jpg");
		background-repeat: no-repeat;
		margin: 20px 15px 0 20px;
		_display: inline;
	}
	
	.destaque-direita
	{
		float: left;
		width: 241px;
		height: 216px;
		background-image: url("../images/destaques/direita.jpg");
		background-repeat: no-repeat;
		margin: 20px 0 0 20px;
		_display: inline;
	}
	
/****** Início menu ******/	

	.menu
	{
		margin: 5px 0 175px 0;
	}

		.menu a{
			display:block;
			text-indent:-9999px;
			float:right;
			background-repeat:no-repeat;
			cursor:pointer;
		}

	#menu_home
	{
		background-position:0px 0;
		background-image: url(../images/menu/home.png);
		_background-image: url(../images/menu/ie6/home.png);
		width:85px;
		height:60px;
		margin-right: -6px;
	}

	#menu_home:hover, #menu_home.hover
	{
		background-position:0 -62px;
	}
	
	#menu_sobre
	{
		background-position:0px 0;
		background-image: url(../images/menu/sobre.png);
		_background-image: url(../images/menu/ie6/sobre.png);
		width:75px;
		height:60px;
		margin-right: 5px;
	}

	#menu_sobre:hover, #menu_sobre.hover
	{
		background-position:0 -62px;
	}

	#menu_servicos
	{
		background-position:0px 0;
		background-image: url(../images/menu/servicos.png);
		_background-image: url(../images/menu/ie6/servicos.png);
		width:98px;
		height:60px;
		margin-right: 4px;
	}

	#menu_servicos:hover, #menu_servicos.hover
	{
		background-position:0 -62px;
	}
	
	#menu_portfolio
	{
		background-position:0px 0;
		background-image: url(../images/menu/portfolio.png);
		_background-image: url(../images/menu/ie6/portfolio.png);
		width:104px;
		height:60px;
		margin-right: 16px;
	}

	#menu_portfolio:hover, #menu_portfolio.hover
	{
		background-position:0 -62px;
	}
	
	#menu_blog
	{
		background-position:0px 0;
		background-image: url(../images/menu/blog.png);
		_background-image: url(../images/menu/ie6/blog.png);
		width:37px;
		height:60px;
		margin: 0px 10px 0 0;
	}

	#menu_blog:hover, #menu_blog.hover
	{
		background-position:0 -62px;
	}
	
	#menu_contato
	{
		background-position:0px 0;
		background-image: url(../images/menu/contato.png);
		_background-image: url(../images/menu/ie6/contato.png);
		width:102px;
		height:60px;
	}

	#menu_contato:hover, #menu_contato.hover
	{
		background-position:0 -62px;
	}

	.demo{ margin-bottom:50px; overflow:auto; clear:both;}
	
/****** fim menu ******/
	
/*********************************************************************************************************************************************
	Elementos Gerais
**********************************************************************************************************************************************/
	
	.data1
	{
		float: left;
		height: 34px;
		width: 303px;
		display: block;
		background-image: url("../images/destaques/data1.jpg");
		background-repeat: no-repeat;
		text-indent: -9000px;
		margin: 50px 0 0 18px;
	}
	
	.data2
	{
		float: left;
		height: 34px;
		width: 303px;
		display: block;
		background-image: url("../images/destaques/data2.jpg");
		background-repeat: no-repeat;
		text-indent: -9000px;
		margin: 15px 0 0 18px;
	}

	/****** Início Painel ******/
	
	.painel
	{
		float: left;
		margin: 10px;
	}
	
	.sm
	{
		list-style:none;
		width:817px;
		height:312px;
		display:block;
		overflow:hidden
	}
	
	.sm li
	{
		float:left;
		display:inline;
		overflow:hidden
	}

/****** Fim Painel ******/
	
	#servico_site
	{
		background-position:0px 0;
		background-image: url(../images/servicos/sites.png);
		width:269px;
		height:178px;
	}

		#servico_site:hover
		{
			background-position:0 -62px;
		}
	
	#servico_site
	{
		background-position:0px 0;
		background-image: url(../images/servicos/sites.png);
		width:269px;
		height:178px;
	}

		#servico_site:hover
		{
			background-position:0 -178px;
		}
		
	#servico_loja
	{
		background-position:0px 0;
		background-image: url(../images/servicos/loja.png);
		width:269px;
		height:178px;
	}

		#servico_loja:hover
		{
			background-position:0 -178px;
		}
		
	#servico_moveis
	{
		background-position:0px 0;
		background-image: url(../images/servicos/movel.png);
		width:269px;
		height:178px;
	}

		#servico_moveis:hover
		{
			background-position:0 -178px;
		}
		
	#servico_cms
	{
		background-position:0px 0;
		background-image: url(../images/servicos/cms.png);
		width:269px;
		height:178px;
	}

		#servico_cms:hover
		{
			background-position:0 -178px;
		}
		
	#servico_mail
	{
		background-position:0px 0;
		background-image: url(../images/servicos/mail.png);
		width:269px;
		height:178px;
	}

		#servico_mail:hover
		{
			background-position:0 -178px;
		}
		
	#servico_blog
	{
		background-position:0px 0;
		background-image: url(../images/servicos/blog.png);
		width:269px;
		height:178px;
	}

		#servico_blog:hover
		{
			background-position:0 -178px;
		}
		
	#servico_apresentacao
	{
		background-position:0px 0;
		background-image: url(../images/servicos/apresentacao.png);
		width:269px;
		height:178px;
	}

		#servico_apresentacao:hover
		{
			background-position:0 -178px;
		}
		
	#servico_host
	{
		background-position:0px 0;
		background-image: url(../images/servicos/host.png);
		width:269px;
		height:178px;
	}

		#servico_host:hover
		{
			background-position:0 -178px;
		}
		
	#servico_ilustra
	{
		background-position:0px 0;
		background-image: url(../images/servicos/ilustra.png);
		width:269px;
		height:178px;
	}

		#servico_ilustra:hover
		{
			background-position:0 -178px;
		}
	
	.lista-servicos
	{
		
	}
	
		.lista-servicos li
		{
			float: left;
			display: inline;
			width: 269px;
			height: 178px;
			margin: 0 10px 10px 0;
		}
		
			
			
			
	.lista-portfolio
	{
		
	}
	
		.lista-portfolio li
		{
			float: left;
			display: inline;
			width: 269px;
			height: 178px;
			margin: 0 10px 10px 0;
			background-image: url("../images/bg-item.png");
		}
		
	/****** Início Tooltip ******/
	
	/* trigger button */

	
	/* tooltip styling */
	.tooltip {
		display:none;
		background:url("../images/tooltip.png");
		background-repeat: no-repeat;
		background-color: transparent;
		height:218px;
		width:297px;
		font-size:11px;
		color:#fff;
		margin: -50px 0 0 25px;
	}
	
		/* a .label element inside tooltip */
		.tooltip .label {
			color:yellow;
			width:35px;
		}
		
		.tooltip a {
			color:#712400;
			font-size:12px;
			font-weight:bold;
		}
		
		.tooltip img
		{
			margin: 50px 0 0 25px;
		}


	
	/****** Fim Tooltip ******/
			
	.interaja-conosco
	{
		float: left;
		width: 298px;
		height: 133px;
		background-image: url("../images/siga.jpg");
		background-repeat: no-repeat;
		background-position: right;
		margin: 50px 0 0 80px;
	}
	
		.ultimo
		{
			border-right: hidden;
		}
		
		.menu-portfolio
		{
			margin: -10px 0 5px 0;
			float: left;
		}

			.menu-portfolio a{
				display:block;
				text-indent:-9999px;
				float:left;
				background-repeat:no-repeat;
				cursor:pointer;
			}
			
			#menu-port-web
			{
				background-position:0px 0;
				background-image: url(../images/menu/web-port.png);
				_background-image: url(../images/menu/ie6/web-port.png);
				width:40px;
				height:60px;
				margin-right: 10px;
				
			}
			
				#menu-port-web:hover, #menu-port-web.hover
				{
					background-position:0 -53px;
				}
				
			#menu-port-logo
			{
				background-position:0px 0;
				background-image: url(../images/menu/logo-port.png);
				_background-image: url(../images/menu/ie6/logo-port.png);
				width:71px;
				height:60px;
				margin-right: 10px;
			}
			
				#menu-port-logo:hover, #menu-port-logo.hover
				{
					background-position:0 -53px;
				}
				
			#menu-port-ilustra
			{
				background-position:0px 0;
				background-image: url(../images/menu/ilustra-port.png);
				_background-image: url(../images/menu/ie6/ilustra-port.png);
				width:94px;
				height:60px;
				margin-right: 10px;
			}
			
				#menu-port-ilustra:hover, #menu-port-ilustra.hover
				{
					background-position:0 -53px;
				}
				
			#menu-port-mail
			{
				background-position:0px 0;
				background-image: url(../images/menu/mail-port.png);
				_background-image: url(../images/menu/ie6/mail-port.png);
				width:122px;
				height:60px;
				margin-right: 10px;
			}
			
				#menu-port-mail:hover, #menu-port-mail.hover
				{
					background-position:0 -53px;
				}
				
			#menu-port-blogs
			{
				background-position:0px 0;
				background-image: url(../images/menu/blogs-port.png);
				_background-image: url(../images/menu/ie6/blogs-port.png);
				width:50px;
				height:60px;
				margin-right: 10px;
			}
			
				#menu-port-blogs:hover, #menu-port-blogs.hover
				{
					background-position:0 -53px;
				}
		
	/****** Ínicio Portfolio *******/
	
	#content{
	overflow:hidden;
	width:838px;
	height:620px;
	background-color:transparent;
	position:relative;
	float:left;
	margin: 0 0 0 0;
	z-index: 50;
	position: relative;
	color: white;
	
}
	#content h2{
		color:#993333;
		margin:10px 0pt;
	}
	#content a{
		color:#777;
		font-weight:bolder;
		text-decoration:none;
	}
	
	#navigation{
		float:left;
		width:110px;
		height:400px;
		background-color:transparent;
		margin: -80px 0 0 0px;
		z-index: 50;
		position: relative;
	}
		#navigation .sup{
			margin:26px 5px;
			font-size:14px;
		}
			#navigation ul{
				margin:5px 0;
				list-style:circle;
				padding-left:6px;						
			}
			#navigation a{
				color:white;
				font-weight:bolder;
				text-decoration:none;
			}
			
				#navigation a:hover
				{
					color:#008CEB;
				}
	
			#navigation .sup li{
				margin: 3px 0 !important;
				margin:-4px 0;
				font-size:11px;
			}
			#navigation a.scrolling{
				color:#933;
			}


	.message{
		background:#EEE;
		border:1px solid #999;
		color:#333;
		font-size:12px;
		padding:1px;
		position:absolute;
		left:11px;
	}
	#first{
		top:484px !important;
		top:498px;			
	}
	#second{
		top:503px !important;
		top:517px;			
	}
	
	.section{
		width:1900px;
		position:relative;
		right:30px;
		bottom: 10px;
		margin: 0 0 5px 0;
	}
	
		.section .sub{
			float:left;
			height:560px;
			width:838px;
			margin:16px 15px 45px 28px;
			font-size:85%;
			line-height:1.4em;
		}
		
			.section .section .prev .prev-web{
				font-size:18px;
				position: absolute;
				bottom:15px;
				letter-spacing:-2px;
				
			}
			.next{
				float: right;
				color: black;
				bottom: 5px;
				height: 50px;
				width: 49px;
				display: block;
				background-image: url("../images/proximo.png");
				text-indent: -9000px;
				*background-image: none;
				*text-indent: 0px;
				*z-index: 10;
				*position: inherit;
				*margin-right: 10px;
			}
			
			.prev{
				float: left;
				color: black;
				bottom: 5px;
				height: 44px;
				width: 51px;
				display: block;
				background-image: url("../images/anterior.png");
				text-indent: -9000px;
				*background-image: none;
				*text-indent: 0px;
				*z-index: 10;
				*position: inherit;
			}
			
				.prev-web{
				float: right;
				color: black;
				bottom: 5px;
				height: 44px;
				width: 51px;
				display: block;
				background-image: url("../images/anterior.png");
				text-indent: -9000px;
				margin: 190px 770px 0 0;
				*background-image: none;
				*text-indent: 0px;
				*z-index: 10;
				*position: inherit;
				}
			
			
			.section .prev .prev-web{
				left:30px;
				bottom: 10px;
				margin: 0 0 5px 0;
			}
			
	#logo1, #logo2
	{
		*margin: 60px 0 0 30px;
	}
	
	#mail
	{
		*margin: 60px 0 0 30px;
	}
	
	#blog
	{
		*margin: 60px 0 0 30px;
	}
	
	#ilustracoes
	{
		*margin: 60px 0 0 30px;
	}

	/****** Fim Portfolio *******/
	
	.formulario-contato
	{
		float: right;
		width: 320px;
		margin: 30px 10px 40px 0px;
	}
	
		.formulario-contato fieldset
		{
			float: left;
			padding: 0 0 10px 0;
			width: 100%;
		}
		
			.formulario-contato fieldset label
			{
				float: left;
				padding: 0 0 2px 0;
				width: 100%;
				font-family: arial, helvetica, sans-serif;
				font-size: 14px;
				color: #fff;
			}
			
			.formulario-contato fieldset select
			{
				float: left;
				padding: 0 0 2px 0;
				width: 250px;
				font-family: arial, helvetica, sans-serif;
				font-size: 14px;
				border: 1px solid #999;
				height: 25px;
				color: #990000;
			}
			
			.form_geral
			{
				border: none;
				width: 235px;
				height: 34px;
				color: #ff6600;
				font-size: 16px;
				background-color: transparent;
				background-image: url("../images/chave.png");
				background-repeat: no-repeat;
				padding: 0 0 0 5px;
				*padding: 5px 0 0 2px;
				*width: 238px;
			}
		
			
			.textarea_geral
			{
				border: none;
				width: 229px;
				height: 120px;
				color: #ff6600;
				font-size: 16px;
				background-color: transparent;
				overflow: auto;
				padding:5px;
			}
			
			.box-textarea
			{
				float: left;
				background-image: url("../images/chave-form.png");
				background-repeat: no-repeat;
				width: 239px;
				height: 130px;
			}
			
			.botao
			{
				float: left;
				height: 34px;
				width: 96px;
				background-color: transparent;
				background-image: url("../images/botao.png");
				background-repeat: no-repeat;
				border: none;
				text-indent: -9000px;
				*background-color: inherit;
				*background-image:none;
				*text-indent:0px;
			}
			
	.thumb-portfolio
	{
		float: left;
		margin: 6px 0 0 8px;
	}
	
	
/*********************************************************************************************************************************************
	Textos
**********************************************************************************************************************************************/
	
	.texto-destaque
	{
		font-family: arial, helvetica, sans-serif;
		font-size: 14px;
		color: #666;
		margin: 50px 0 0 15px;
		line-height: 135%;
	}
	
	.link-destaque
	{
		font-family: arial, helvetica, sans-serif;
		font-size: 14px;
		color: #ff6600;
		margin: 15px 0 0 15px;
		float: right;
	}
	
		.link-destaque:hover
		{
			color: #ffb17d;
		}
		
	.link-blog
	{
		font-family: arial, helvetica, sans-serif;
		font-size: 14px;
		color: #666;
		float: left;
		margin: -5px 0 0 18px;
		line-height: 120%;
	}
	
		.link-blog:hover
		{
			color: #ff6600;
		}
		
	.texto-sobre
	{
		font-family: arial, helvetica, sans-serif;
		font-size: 14px;
		color: #666;
		float: left;
		margin:40px;
		line-height: 120%;
		_display: inline;
	}
	
		.texto-sobre a
		{
			font-family: arial, helvetica, sans-serif;
			font-size: 14px;
			color: #666;
			float: left;
			line-height: 120%;
			font-weight: bold;
		}
		
			.texto-sobre a:hover
			{
				color: #999;
			}
	
	.texto-contato
	{
		float:left;
		height: 109px;
		width: 343px;
		display: block;
		background-image: url("../images/interaja.jpg");
		text-indent: -9000px;
		margin: 115px 50px 0 50px;
	}
	
	.texto-sucesso
	{
		float:left;
		height: 33px;
		width: 287px;
		display: block;
		background-image: url("../images/sucesso.png");
		text-indent: -9000px;
		margin: 115px 50px 0 25px;
	}