@charset "utf-8";
/* CSS Document */

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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .8em;
	color: #5a646d;
	}
	
	label {
		display: none;
		}
		
		input {
			width: 184px;
			height: 20px;
			padding: 5px;
			color: #7c8998;
			margin: 3px 0px;
			background-color: #f6fafc;
			border: 1px solid #d5e5f3;
			
			}
			
		textarea {
	width: 330px;
	padding: 5px;
	color: #7c8998;
	margin: 5px 0px;
	background-color: #f6fafc;
	border: 1px solid #d5e5f3;
	overflow: hidden;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 13px;
			}
			
		.button {
	width: 88px;
	height: 24px;
	position: absolute;
	right: 0px;
	display: block;
	cursor: pointer;
	color: #fff;
	background-color: #FDFEFE;
	background-image: url(../images/midias.gif);
	background-repeat: no-repeat;
	background-position: left -24px;
	padding: 0px;
	border: none;
	text-indent: -9999px;
	font-size: 0px;
	line-height: 0px;
			}
			
			.button:hover {
				background-position: left top;
				}

h2 {
	text-transform: uppercase;
	color: #0b99ce;
	}
	
	h2 em {
	text-transform: none;
	color: #b4bdc5;
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding-left: 15px;
	height: 25px;
	font-size: .95em;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url(../images/backslash.gif);
	letter-spacing: 1px;
		}
		
		h3 {
			color:#ad252b;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: .9em;
			}

body {
	line-height: 1;
	background-color: #fdfefe;
	background-image:url(../images/bgtop.jpg);
	font-family: Verdana, arial, Geneva, sans-serif;
	background-position: top;
	background-repeat: repeat-x;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

#wrapper{
	width: 960px;
	margin: 0 auto;
	height: auto;
	}

/* top e nav */

#top {
	height: 130px;
	width: 955px;
	color: #b4bdc5;
	margin: 0 auto;
	float: left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #c9d4e0;
	position: relative;
	top: 0px;
	margin-left: 5px;
}
	#top span {
		font-weight: bold;
		color:#f18e00;
	}
#cel {

		}
		
		#cel .telefonetop {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				color: #d2d7da;
				font-size: .75em;
				float: right;
				padding-top: 7px;
			}
			
	   #cel .matryainfo {
				font-family: Georgia, "Times New Roman", Times, serif;
				color: #d2d7da;
				font-size: .7em;
				padding-top: 8px;
				float: left;
			}
			
			#cel .matryainfo a {
				color: #d2d7da;
				text-decoration: none;
				}
		
	#logo {
	float: left;
	width: 177px;
	height: 45px;
	position: absolute;
	bottom: 10px;
	left: 15px;
			}
		
	.nav {
	float: right;
	color: #5a646d;
	margin-top: 60px;
	font-size: 0.9em;
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 570px;
		}
		
		.nav ul li {
	float: left;
	padding: 3px 0px;
	display: block;
	margin-left: 24px;
	letter-spacing: 0.1em;
			}
		
		.nav ul li a{
			color: #707175;
			display: block;
			text-decoration:none;
			}
		
		.nav li a:hover {
		color: #0b9acf;	
			}
		
		.nav ul .leftline {
			padding-left: 20px;
			border-left-width: 1px;
			border-left-style: solid;
			border-left-color: #ccc;
			}
		
		.nav ul .contato {
			font-weight: bold;
			padding-left: 24px;
			margin-left: 24px;
			border-left-width: 1px;
			border-left-style: solid;
			border-left-color: #e3b6b8;
			}
			

/* intro e elevator pitch*/

#intro {
	float: left;
	margin-top: 40px;
	width: 940px;
	line-height: 1.2em;
	color: #414042;
	padding-left: 20px;
	}
	
	#intro span{
	font-size: .92em;
	}
	
	#intro strong{
	font-size: 1.3em;
	line-height: 1.2em;
	}

	#imgintro {
	width: 476px;
	height: 268px;
	float: left;
	}
	
	#elevatorp {
		float: left;
		margin-left: 34px;
		}
	h1.ep {
	float: left;
	text-indent: -9999px;
	width: 361px;
	height: 37px;
	clear: both;
	background-image: url(../images/web_designer_freelancer.gif);
	background-repeat: no-repeat;
	background-position: left top;		
		}
		
		h2.ep2 {
			margin-top: 14px;
			float: left;
			width: 370px;
			font-weight: normal;
			line-height: 1.2em;
			clear: both;
			text-shadow: 0 1px 2px #d7d7d7;
			font-size: 1.4em;
			text-transform: none;
			color: #414042;
			}
			
			h3.ep3 {
			font-family: Georgia, "Times New Roman", Times, serif;
			margin-top: 14px;
			font-size: 17px;
			color: #0b9acf;
			float: left;
			line-height: 1.2em;
			border-top: 1px solid #d2d2d2;
			padding-top: 12px;
			width: 370px;
			font-weight: normal;
			clear: both;
			}
			
			
	#calltoaction {
		clear: both;
		width: 370px;
		margin-top: 12px;
		float: left;
		clear: both;
		}
		
		.callbutton a{
	width: 137px;
	height: 50px;
	text-indent: -9999px;
	float: left;
	margin-right: 33px;
	background-image: url(../images/sprites.gif);
	background-repeat: no-repeat;
	background-position: -135px  -54px;
			}
			
			.callbutton a:hover{
	background-position: -135px  bottom;
			}
			
				.callbuttonleft a{
	width: 137px;
	height: 50px;
	text-indent: -9999px;
	float: left;
	margin-right: 33px;
	background-image: url(../images/sprites.gif);
	background-repeat: no-repeat;
	background-position: left -54px;
			}
	.callbuttonleft a:hover{
	background-position: left bottom;
			}
/* portfolio*/

#portfolio {
	width: 955px;
	float: left;
	margin-top: 27px;
	padding-left: 0px;
	position: relative;
	font-size: 1.1em;
	}
	
	#portfolio h2 {
	padding: 0px 0px 7px 10px;
	width: 930px;
	font-weight: normal;
	border-bottom: 1px solid #c9d4e0;
	margin-bottom: 25px;
		}
	.visit {
		float: left;
		margin-top: 5px;
		width: 299px;
		height: 30px;
		background-color: #ebf5f8;
		}
		
		.visit a {
			text-decoration: none;
			color:#929ba5;
			font-size: 13px;
			margin-top: 7px;
			margin-right: 5px;
			float: right;
			}
		.visit a:hover {
			text-decoration: underline;
			color:#ad252b;
			}
	
	p.client {
		margin-top: 7px;
		margin-left: 5px;
		float: left;
		width: 150px;
		}
		
	p.description {
		width: 205px;
		}
		a:hover .caption {
			background-image:url(../images/bgcaptionhover.png);
			display: inline;
			}
 
 .caption {
background-image:url("../images/bgcaption.png");
color:#FDFEFE;
cursor:pointer;
display:none;
float:left;
font-size:0.8em;
height:26px;
margin-left:5px;
margin-top:-40px;
padding-top:8px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
width:289px;
}
			
			
	.sites {
			float: left;
			color: #929ba5;
			font-size: 1em;
			margin: 0px;
			margin-left: 6px;
			width: 310px;
			}
			
			
	
			
			.sites img {
				margin: 0px;
				padding: 5px;
				background-color: #f1f2f2;
				float: left;
				}
				
				
				
			.featured img {
				margin: 0px;
				padding: 5px;
				background-color: #f1f2f2;
				}
				
				.client {
					font-size: 13px;
					font-family: Arial, Helvetica, sans-serif;
					}
		.client span {
			font-size: 14px;
			color: #ad252b;
			}
			
		p.description {
	padding-top: 5px;
	line-height: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
	width: 205px;
	font-size: 13px;
			}
			
		p.description em {
			color: #444;
			font-family:Georgia, "Times New Roman", Times, serif;
			font-size: 1.1em;
			}
			
			
		#portfoliolink {
			width: 100%;
			float: left;
			font-size: .75em;
			margin-top: 20px;
			}
			
			
			#portfoliolink a {
				color: #a1abb6;
				text-decoration:none;
				float: right;
				display: block;
				height: 20px;
				display: block;
				padding-top: 3px;
				padding-left: 2px;
				background-image:url(../images/portfolio_webdesign.gif);
				background-position: right;
				background-repeat:no-repeat;
				padding-right: 113px;
				}
				
				
				#portfoliolink a:hover {
				background-color: #edf7fb;
				}
	 
	 
/* portfolio*/	 
	

#servicos { 
	 width: 945px;
	float: left;
	margin-top: 27px;
	padding-left: 15px;
	position: relative;
	font-size: 1.1em;
	}
	
	#servicos h2 {
		padding: 0px 0px 7px 10px;
		width: 930px;
		font-weight: normal;
		border-bottom: 1px solid #c9d4e0;
		margin-bottom: 25px;
			}
			
			#servicos h3 {
				margin-top: 12px;
				margin-bottom: 6px;
				}
				
				.TabbedPanelsContent {
					padding-left: 25px;
					width: 465px;
					position: relative;
					}
				
			#servicos .TabbedPanelsContent p {
					color: #5a646d;
					line-height: 1.4em;
					font-family: Arial, Helvetica, sans-serif;
								
					}
	
					
				.tabbedimgweb {
	text-indent: -9999px;
	width: 83px;
	height: 88px;
	background-image: url(../images/ilutabs.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	float: right;
	position: absolute;
	right: -100px;
	top: 6px;
					}
					
					.tabbedimgseo {
	text-indent: -9999px;
	width: 83px;
	height: 88px;
	background-image: url(../images/ilutabs.jpg);
	background-repeat: no-repeat;
	float: right;
	position: absolute;
	right: -100px;
	top: 6px;
	background-position: center top;
					}
					
						.tabbedimgana {
	text-indent: -9999px;
	width: 83px;
	height: 88px;
	background-image: url(../images/ilutabs.jpg);
	background-repeat: no-repeat;
	float: right;
	position: absolute;
	right: -100px;
	top: 6px;
	background-position: left top;
					}
		#servicos h2.servicos {
			width: 630px;
			}
	
.testemunho {
	background-image: url(../images/bgtestemunho.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	float: left;
	width: 281px;
	position: relative;
	top: -25px;
	height: 112px;
	margin-left: 23px;
	padding-top: 30px;
	padding-bottom: 10px;
}

.testemunho p.testmonial {
	padding: 0px 20px;
	color: #929ba5;
	margin-left: 10px;
	padding-top: 50px;
	padding-bottom: 10px;
	line-height: 1.5em;
	font-size: 13px;
	width: 200px;
	}
	
	
	
	p.cliente {
		font-size: 12px;
		color: #ad252b;
		float: right;
		margin-right: 50px;
margin-top: 5px;
		}
		
/* processo */

#processo {
	width: 945px;
	float: left;
	margin-top: 27px;
	padding-left: 15px;
	position: relative;
	font-size: 1.1em;
	}
	
	#processo h2 {
	padding: 0px 0px 7px 10px;
	width: 930px;
	font-weight: normal;
	border-bottom: 1px solid #c9d4e0;
	margin-bottom: 25px;
		}
		
	
	
	li.primeiro {
	width: 456px;
	text-indent: -9999px;
	height: 184px;
	background-image:url(../images/processohigh.gif);
	background-repeat:no-repeat;
	display: block;
	background-position: 0px bottom;
		}
	
	
	li.segundo {
	width: 456px;
		text-indent: -9999px;
	height: 184px;
	background-image:url(../images/processohigh.gif);
	background-repeat:no-repeat;
	display: block;
	background-position: -456px bottom;
		}
		
		li.terceiro {
	width: 456px;
		text-indent: -9999px;
	height: 184px;
	background-image:url(../images/processohigh.gif);
	background-repeat:no-repeat;
	display: block;
	background-position: -912px bottom;
		}
		
		li.quarto {
	width: 456px;
		text-indent: -9999px;
	height: 184px;
	background-image:url(../images/processohigh.gif);
	background-repeat:no-repeat;
	display: block;
	background-position: -1368px bottom;
		}
		
	* {margin:0; padding:0}
.sm {list-style:none; width:907px; height:184px; display:block; overflow:hidden; margin-left: 20px;}
.sm li {float:left; width: 456px; display:inline; overflow:hidden}

/* contato */

#contato {
	width: 945px;
	float: left;
	margin-top: 27px;
	padding-left: 15px;
	position: relative;
	font-size: 1.1em;
	margin-bottom: 30px;
	}
	
	#contato h2 {
	padding: 0px 0px 7px 10px;
	width: 930px;
	font-weight: normal;
	border-bottom: 1px solid #c9d4e0;
	margin-bottom: 25px;
		}
		


/*footer*/

#footer {
	width: 960px;
	border-top: 1px solid #c9d4e0;
	margin: 25px 0px;
	float: left;
	padding:10px;
	font-size: .85em;
	position: relative;
	}
	
	#footer p.copyright {
		float: left;
		display: block;
		margin-top: 5px;
		}
		
		#footer p.copyright a{
		text-decoration: none;
		color: #5a646d; 
		}
		
		
	#footer p.copyright span {
		display: block;
		margin-top: 4px;
		
		}
	
	#footer .nav {
		float: right;
		width: 530px;
		margin: 0px;
		margin-top: 10px;
		padding:5px;
		position: relative;
		}
		
		#formulariofooter {
			float: left;
			width: 565px;
			}
		
		#leftform {
			float: left;
			margin-left: 10px;
			width: 194px;
			position: relative;
			}
			
		#rightform {
			float: left;
			margin-left: 14px;
			width: 329px;
			}
			
			
	#contatotext {
	height: 100px;
	font-size: 0.9em;
	line-height: 1.3em;
	padding: 10px;
	padding-left: 18px;
	border-left: 1px solid #eff1f3;
	margin-left: 25px;
	float: left;
	margin-right: 20px;
		}
		.email {
			border-top: 1px solid #eff1f3;
			padding-top: 6px;
			margin-top: 6px;
			font-weight: bold;
			}
			
			#contatotext p.email span {
				border: none;
				font-weight: normal;
				}
		
		#contatotext p span {
		width: 50px;
		text-align: right;
		float: left;
		padding-right: 5px;
		border-right: 1px solid #eff1f3;
		margin-right: 6px;
		}
		
		.midias {
			float: left;
			text-indent: -9000px;
			}
			
		.twitter a, .facebook a, .orkut a {
			width: 46px;
			height: 34px;
			display: block;
			
			}
			
			
			
			.twitter a {
	background-image: url(../images/midias.gif);
	background-position: left -50px;
	background-repeat: no-repeat;
				}
				
				.orkut a {
	background-image: url(../images/midias.gif);
	background-position: left -88px;
	background-repeat: no-repeat;
				}
				
				.facebook a {
	background-image: url(../images/midias.gif);
	background-position: left -122px;
	background-repeat: no-repeat;
				}
			
			.facebook a:hover {
	background-image: url(../images/midias.gif);
	background-repeat: no-repeat;
	background-position: -46px bottom;
			}
			
			.twitter a:hover {
				background-image: url(../images/midias.gif);
	background-repeat: no-repeat;
	background-position: -46px -50px;
				}
		.orkut a:hover {
			background-image: url(../images/midias.gif);
	background-repeat: no-repeat;
	background-position: -46px -88px;
			}


.TabbedPanelsTabHover {
	background-color: #CCC;
}

.TabbedPanels {
	margin: 0px;
	padding: 0px;
	float: left;
	padding-left: 15px;
	clear: none;
	width: 617px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
	
}

.TabbedPanelsTab {
	position: relative;
	top: 1px;
	float: left;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#5a646d;
	font-style: italic;
	font-size: 15px;
	padding: 4px 10px;
	margin: 0px 1px 0px 0px;
	font-style: italic;
	font-size: 14px;
	list-style: none;
	background-color: #fdfefe;
	cursor: pointer;
	border-left: 2px solid #f0f6fb;
}

.TabbedPanelsTabSelected {
	background-color: #f0f6fb;
	border-bottom: 1px solid #f0f6fb;
}

.TabbedPanelsTab a {
	color: #f0f6fb;
	text-decoration: none;
}


.TabbedPanelsContentGroup {
	clear: both;
	background-color: #f0f6fb;
}

.TabbedPanelsContent {
	padding: 4px;
	padding-bottom: 10px;
	padding-left: 25px;
}

.TabbedPanelsContentVisible {
	}

.VTabbedPanels .TabbedPanelsTabGroup {
	float: left;
	width: 10em;
	height: 20em;
	background-color: #EEE;
	position: relative;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}


.VTabbedPanels .TabbedPanelsTab {
	float: none;
	margin: 0px;
	border-top: none;
	border-left: none;
	border-right: none;
}

.VTabbedPanels .TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: solid 1px #999;
}


.VTabbedPanels .TabbedPanelsContentGroup {
	clear: none;
	float: left;
	padding: 0px;
	width: 30em;
	height: 20em;
}

.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}


.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}


 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #f3e4e4;
	color: #6b7988;
	border: 1px solid #D5E5F3;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #fdfefe;
}


.textfieldFlashText input, input.textfieldFlashText {
	color: red !important;
}

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input, input.textfieldHintState {
	/*color: red !important;*/
}
.textareaRequiredMsg,
.textareaMinCharsMsg,
.textareaMaxCharsMsg,
.textareaValidMsg {
	display:none;
}


.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg
{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}

 /* When the widget is in the valid state the TEXTAREA has a green background applied on it. */
.textareaValidState textarea, textarea.textareaValidState {
	}

/* When the widget is in an invalid state the TEXTAREA has a red background applied on it. */
textarea.textareaRequiredState, .textareaRequiredState textarea, 
textarea.textareaMinCharsState, .textareaMinCharsState textarea, 
textarea.textareaMaxCharsState, .textareaMaxCharsState textarea {
	background-color:#FF9F9F;
}

/* When the widget has received focus, the TEXTAREA has a yellow background applied on it. */
.textareaFocusState textarea, textarea.textareaFocusState {
	background-color:#fdfefe;
}

/* This class applies only for a short period of time and changes the way the text in the textarea looks like.
 * It applies only when the widget has enforce max chars enabled and the user tries to type some more.
 */
.textareaFlashState textarea, textarea.textareaFlashState{
	color:red !important;
}
/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
textarea.textareaHintState, .textareaHintState textarea{
	/* color: red !important;*/
}

#servicos a {
text-decoration: none;
color: #AD252B;
}

#servicos a:hover {
color: #888;
}
#servicos .linkblog a{
font-size: 14px;
	color: #929ba5;
	margin-left: 20px;
	margin-bottom: 10px;
	line-height: 1.5em;
border-bottom: 1px dotted #C9D4E0;
width: 220px;
display: block;
}

#servicos .linkblog a:hover{

	color: #AD252B;

}
.english a{
float: left;
font-size: 13px;
padding: 7px;
color: #d2d7da;
text-decoration: none;
	}
	
	.english a:hover{
text-decoration: underline;
	}