@charset "utf-8";

/*
//
//	PROJETO:	    RICTORRES - PORTFOLIO PESSOAL
//	DATA:		    15/05/2008
//	DESENVOLVEDOR:	RICARDO TORRES
//	AGENCIA:		RICTORRES.NET
//
*/


/* ------------------------------------ */
/*                                      */
/*                GERAL                 */
/*                                      */
/* ------------------------------------ */

* {
	margin:0;
	padding:0;
}

body {
	background:#fff url('../img/bg.png') top left repeat-x fixed;
	font-family:Tahoma, 'Trebuchet MS', sans-serif;
	font-size:12px;
	cursor:default;
}

#geral {
	width:961px;
	margin:10px auto;
}

.clearfix:after { 
	content:"."; 
	display:block; 
	clear:both; 
	visibility:hidden; 
	line-height:0; 
	height:0; 
} 

.clearfix { 
	display:inline-block; 
} 

html[xmlns] .clearfix { 
	display:block; 
} 

* html .clearfix { 
	height:1%; 
}

a {
	color:#ff8a00;
	text-decoration:none;
}

a:hover {
	color:#ff8a00;
	text-decoration:underline;
}

ul {
	list-style:none;
}

img {
	border:0;
}

.clear {
	clear:both;
}

.negrito {
	font-weight:bold;
}

.aleft {
	float:left;
}

.aright {
	float:right;
}

.tcenter {
	text-align: center;
}

.none {
	display:none;
}

.block {
	display:block;
}

.noborder {
	border:0;
}

acronym {
	cursor:help;
}




/* ------------------------------------ */
/*                                      */
/*                SITE                  */
/*                                      */
/* ------------------------------------ */


#bg-topo {
	width:961px;
	height:15px;
	background:transparent url('../img/bg-topo.png') top left no-repeat;
}

#bg-rodape {
	width:961px;
	height:15px;
	background:transparent url('../img/bg-rodape.png') top left no-repeat;
}

#site {
	background:transparent url('../img/site-bg.png') top left repeat-y;
	color:#555;
	padding:20px 27px;
}




/* ------------------------------------ */
/*                                      */
/*                TOPO                  */
/*                                      */
/* ------------------------------------ */


#topo {
	margin-bottom:20px;
}

#topo h1 a {
	display:block;
	width:242px;
	height:54px;
	background:#fff url('../img/marca.png') top left no-repeat;
	text-indent:-10000px;
}

#topo div.telefone {
	padding:12px 0 0 0;
}

#topo div.telefone p {
	letter-spacing:1px;
}

#topo div.telefone p.numero {
	color:#ffd100;
	font-size:17px;
	letter-spacing:normal;
	font-weight:bold;
}




/* ------------------------------------ */
/*                                      */
/*                MENU                  */
/*                                      */
/* ------------------------------------ */


#menu {
	height:37px;
	width:910px;
	margin:0 0 10px 0;
	background:url('../img/menu-bg.png') top left no-repeat;
}

#menu ul {
	padding:7px 0 0 0;
	margin:0;
}

#menu ul li {
	float:left;
	padding:0 15px;
}

#menu ul li a {
	display:block;
	text-indent:-10000px;
	background:url('../img/menu-links.png') no-repeat;
}

#menu ul li a.principal {
	background-position:0 0;
	width:72px;
	height:24px;
}

#menu ul li a.principal:hover, #menu ul li a.principal2 {
	background-position:0 -24px;
}

#menu ul li a.sobre {
	background-position:-72px 0;
	width:56px;
	height:24px;
}

#menu ul li a.sobre:hover, #menu ul li a.sobre2 {
	background-position:-72px -24px;
}

#menu ul li a.servicos {
	background-position:-128px 0;
	width:71px;
	height:24px;
}

#menu ul li a.servicos:hover, #menu ul li a.servicos2 {
	background-position:-128px -24px;
}

#menu ul li a.portfolio {
	background-position:-199px 0;
	width:71px;
	height:24px;
}

#menu ul li a.portfolio:hover, #menu ul li a.portfolio2 {
	background-position:-199px -24px;
}

#menu ul li a.parceiros {
	background-position:-270px 0;
	width:68px;
	height:24px;
}

#menu ul li a.parceiros:hover, #menu ul li a.parceiros2 {
	background-position:-270px -24px;
}

#menu ul li a.suporte {
	background-position:-345px 0;
	width:68px;
	height:24px;
}

#menu ul li a.suporte:hover, #menu ul li a.suporte2 {
	background-position:-345px -24px;
}

#menu ul li a.contato {
	background-position:-413px 0;
	width:68px;
	height:24px;
}

#menu ul li a.contato:hover, #menu ul li a.contato2 {
	background-position:-413px -24px;
}




/* ------------------------------------ */
/*                                      */
/*                PAINEL                */
/*                                      */
/* ------------------------------------ */


#painel {
	width:910px;
	height:272px;
	background:url('../img/painel-bg.jpg') no-repeat;
	overflow:hidden;
}

#painel_conteudo {
	width:10000px;
}

.inner {
	width:910px;
	height:272px;
	margin:7px 0 0 20px;
}

.section {
	width:910px;
	height:272px;
}

.listagem {
	float:left;
	width:270px;
}

.section ul {
	margin:17px 20px 0 0;
}

.section li {
	width:auto;
	color:#555;
	font-size:12px;
	padding:0 0 0 20px;
	margin:10px 0;
	background:url('../img/tic.gif') top left no-repeat;
	background-position:left 2px;
}

.texto {
	width:80%;
}

.next-1, .next-2, .next-3, .next-4 {
	width:105px;
	height:32px;
}

.next-1 {
	margin:10px 40px;
}

.next-2 {
	margin:35px 40px;
}

.next-3 {
	margin:0 40px;
}

.next-4 {
	margin:0 40px;
}

.last {
	display:block;
	width:105px;
	height:32px;
	margin:22px 40px;
}

#painel p {
	width:475px;
	line-height:19px;
}

#painel h2 {
	font-size:36px;
	font-weight:normal;
	color:#555;
}

#painel h4 {
	font-size:20px;
	color:#555;
	font-weight:normal;
}

ul#painel-menu {
	width:910px;
	height:44px;
	background:url('../img/painel-menu.png') no-repeat;
	margin-bottom:30px;
}

ul#painel-menu li {
	float:left; 
	font-size:14px;
	font-weight:bold;
	padding:15px 26px;
}

ul#painel-menu a {
	color:#a2a2a1;
}

ul#painel-menu .s_on a, ul#painel-menu a:hover {
	color:#565655;
	text-decoration:none;
}

#section1, #section2, #section3, #section4, #section5 {
	width:910px;
	height:272px;
}

#section1 {
	background:url('../img/painel-webdesign.jpg') 530px 15px no-repeat;
}

#section2 {
	background:url('../img/painel-cms.jpg') 610px 15px no-repeat;
}

#section3 {
	background:url('../img/painel-ecommerce.jpg') 640px 15px no-repeat;
}

#section4 {
	background:url('../img/painel-seo.jpg') 560px 30px no-repeat;
}

#section5 {
	background:url('../img/painel-emailmarketing.jpg') 615px 25px no-repeat;
}

#painel a, #painel a:visited, #painel a:active {
	color:#555;
	text-decoration:none;
}

#painel a:hover {
	color:#777;
	text-decoration:none;
}

.section .texto p {
	width:65%;
	color:#555;
}




/* ------------------------------------ */
/*                                      */
/*              PRINCIPAL               */
/*                                      */
/* ------------------------------------ */


div.colunas {
	
}

div.colunas .col1 {
	width:285px;
	float:left;
	margin-right:22px;
}

div.colunas p {
	padding:0 14px;
}

div.colunas .col1 h3 {
	width:257px;
	height:35px;
	line-height:35px;
	padding:0 14px;
	font-size:13px;
	font-weight:bold;
	color:#fff;
	margin-bottom:10px;
	background:url('../img/principal-titulos-bg.png') top left no-repeat;
}

div.colunas .col1 li {
	border-bottom:1px solid #d4d4d4;
	height:25px;
	line-height:25px;
	padding:0 14px;
}

div.colunas .col1 li.noborder {
	border:0;
}

div.colunas .col2 {
	width:302px;
	float:left;
	margin-right:22px;
}

div.colunas .col2 h3 {
	width:274px;
	height:35px;
	line-height:35px;
	padding:0 14px;
	font-size:13px;
	font-weight:bold;
	color:#fff;
	margin-bottom:10px;
	background:url('../img/principal-titulos-bg.png') -285px 0 no-repeat;
}

div.colunas .col2 #phplive {
	text-align:center;
	margin-top:10px;
}

div.colunas .col3 {
	width:275px;
	float:left;
}

div.colunas .col3 h3 {
	width:247px;
	height:35px;
	line-height:35px;
	padding:0 14px;
	font-size:13px;
	font-weight:bold;
	color:#fff;
	margin-bottom:10px;
	background:url('../img/principal-titulos-bg.png') -587px 0 no-repeat;
}

div.colunas .col3 form {
	margin:10px 0 0 25px;
}

div.colunas .col3 form label {
	font-weight:bold;
	width:55px;
	float:left;
	text-align:right;
	margin:2px 4px 0 0;
}

div.colunas .col3 form input {
	border:1px solid #c6c6c6;
	color:#555;
	padding:2px 3px;
	background:#eee;
	margin-bottom:10px;
	float:left;
	width:145px;
}

div.colunas .col3 form button {
	width:13px;
	height:14px;
	background:url('../img/ok.png') no-repeat;
	border:0;
	cursor:pointer;
	float:left;
	margin:3px 0 0 10px;
}




/* ------------------------------------ */
/*                                      */
/*               CONTEUDO               */
/*                                      */
/* ------------------------------------ */


#conteudo {
	
}

#esquerda {
	float:left;
	width:230px;
}

#esquerda ul#menu-sec {
	
}

#esquerda ul#menu-sec li {
	margin-bottom:10px;
}

#esquerda ul#menu-sec a {
	display:block;
	width:186px;
	height:35px;
	line-height:35px;
	color:#555;
	padding:0 15px;
	background:url('../img/menu-sec-bg.png') top left no-repeat;
}

#esquerda ul#menu-sec a:hover, #esquerda ul#menu-sec a.ativo {
	text-decoration:none;
	background-position:0 -35px;
}

#direita {
	float:left;
	width:667px;
	margin-left:10px;
}

#direita p.breadcrumbs {
	font-size:11px;
	margin-bottom:10px;
}

#direita h2.titulo {
	font-size:24px;
	font-weight:bold;
	margin-bottom:20px;
	padding-bottom:5px;
	border-bottom:1px solid #e4e4e4;
}

#direita p {
	margin-bottom:8px;
}

ul.tic {
	margin:10px 0 10px 20px;
}

ul.tic li {
	width:auto;
	color:#555;
	font-size:12px;
	padding:0 0 0 20px;
	margin:15px 0;
	background:url('../img/tic.gif') top left no-repeat;
	background-position:left 2px;
}

h3.subtitulo {
	font-size:14px;
	font-weight:bold;
}

a.curriculo {
	display:block;
	text-align:center;
	margin:50px 0;
	color:red;
	font-size:14px;
	font-weight:bold;
}

a.curriculo:hover {
	text-decoration:none;
	color:#ff8a00;
}

a.pagination {
	margin-right: 10px;
}




/* ------------------------------------ */
/*                                      */
/*               CLIENTES               */
/*                                      */
/* ------------------------------------ */


div.clientes {
	position:relative;
	width:662px;
	height:99px;
	background:#eee url('../img/clientes-bg.png') no-repeat;
	margin:0 0 40px 0;
	padding:1px 0 0 0;
}

.panel {
	position:relative;
	margin:0 0 0 55px;
	width:200px;
	height:90px;
	border:4px solid #fff;
	overflow:hidden;
}

.imgPanel {
	position:absolute;
	border:none;
	text-decoration:none;
}

div.clientes h4 {
	position:absolute;
	top:6px;
	left:279px;
	margin:0;
	padding:0;
	font-weight:bold;
	font-size:16px;
	color:#555;
}

div.clientes p {
	position:absolute;
	left:281px;
}

div.clientes p.descricao {
	top:35px;
	width:281px;
}

div.clientes p.projeto {
	top:63px;
}

div.clientes p.tecnologias {
	top:80px;
}

div.clientes span.shots {
	position:absolute;
	top:33px;
	left:10px;
	width:36px;
	height:36px;
	background:url('../img/clientes-icones.png') no-repeat;
	display:block;
	text-indent:-10000px;
}

div.clientes span.shots a {
	display:block;
	width:36px;
	height:36px;
	background:url('../img/clientes-icones.png') no-repeat;
	background-position:0 -36px;
}

div.clientes span.shots a:hover {
	background-position:0 -72px;
}

div.clientes span.website {
	position:absolute;
	top:33px;
	right:10px;
	width:36px;
	height:36px;
	background:url('../img/clientes-icones.png') no-repeat;
	display:block;
	background-position:-36px 0;
	text-indent:-10000px;
}

div.clientes span.website a {
	display:block;
	width:36px;
	height:36px;
	background:url('../img/clientes-icones.png') no-repeat;
	background-position:-36px -36px;
}

div.clientes span.website a:hover {
	background-position:-36px -72px;
}




/* ------------------------------------ */
/*                                      */
/*                SERVIÇOS              */
/*                                      */
/* ------------------------------------ */


div.servico {
	border-bottom:1px solid #ddd;
	padding:20px 0;
}

div.servico.noborder {
	border:0;
}

div.servico .miniatura {
	float:left;
	text-align:center;
	margin-right:15px;
}


div.servico .descricao {
	float:left;
	width:556px;
}

div.servico h3 {
	font-size:14px;
	font-weight:bold;
	margin-bottom:10px;
}




/* ------------------------------------ */
/*                                      */
/*               FAQ                    */
/*                                      */
/* ------------------------------------ */


ul.faq {
	list-style:disc;
	margin:10px 0 20px 15px;
}

ul.faq li.question {
	margin:5px 0;
	cursor:pointer;
	color:#ff8a00;
	font-weight:bold;
}

ul.faq li.question:hover {
	color:#c98400;
}

ul.faq li.question:hover span, ul.faq li.question span {
	color:#555;
	text-decoration:none;
	margin:8px 0 15px 0;
	font-weight:normal;
	display:none;
}




/* ------------------------------------ */
/*                                      */
/*             ORÇAMENTO                */
/*                                      */
/* ------------------------------------ */


form#orcamento div.orcamento-estrutura ol.master {
	margin: 0 0 20px 70px;
}

form#orcamento div.orcamento-estrutura ol.master li {
	margin: 4px 0;
}

form#orcamento div.orcamento-estrutura ol.slave {
	margin-left: 20px;
}

form#orcamento ul.funcionalidades {
	margin-top:20px;
	width:50%;
}

form#orcamento ul.funcionalidades li {
	margin: 8px 0;
}

form#orcamento ul.refazer_website {
	margin-bottom:20px;
}

form#orcamento ul.refazer_website li {
	margin: 8px 0;
}




/* ------------------------------------ */
/*                                      */
/*            FORMS                     */
/*                                      */
/* ------------------------------------ */

form#contato {
}

form#contato fieldset, form#orcamento fieldset {
	width:95%;
	padding:15px;
	border:1px solid #ccc;
	margin-bottom:25px;
}

form#contato fieldset p {
	margin-left:100px;
}

form#contato .red, form#orcamento .red {
	color:red;
}

form#contato legend, form#orcamento legend {
	font-weight:bold;
	font-size:14px;
	letter-spacing:1px;
	padding:6px;
	margin-bottom:3px;
}

form#contato label, form#orcamento label {
	width:15em;
	float:left;
	margin-top:5px;
	text-align:right;
	padding-right:5px;
	font-weight:bold;
	cursor:pointer;
}

form#orcamento label {
	width:auto;
	float:none;
	margin-right:20px;
	font-weight:bold;
	cursor:pointer;
}

form#orcamento label.normal {
	width:auto;
	text-align:left;
	float:none;
	display:block;
}

form#contato textarea, form#orcamento textarea {
	width:300px;
	height:7em;
	background:#fff;
	border:1px solid #aaa;
	padding:3px;
	margin-bottom:10px;
	font-family:Tahoma, 'Trebuchet MS', sans-serif;
	font-size:12px;
}

form#contato input.textfield, form#orcamento input.textfield {
	width:300px;
	background:#fff;
	border:1px solid #aaa;
	padding:4px 3px;
	margin-bottom:10px;
	font-family:Tahoma, 'Trebuchet MS', sans-serif;
	font-size:12px;
}

form#orcamento input.textfield, form#orcamento textarea {
	width:99%;
	margin-top:2px;
}

form#orcamento select {
	width:99%;
	margin-top:2px;
	background:#fff;
	border:1px solid #aaa;
	font-family:Tahoma, 'Trebuchet MS', sans-serif;
	font-size:12px;
}

form#orcamento select option {
	padding:2px 3px;
}

form#orcamento textarea.large {
	height:15em;	
}

form#orcamento textarea {
	height:60px;
}

form#contato input.textfield:focus, form#contato textarea:focus, form#orcamento input.textfield:focus, form#orcamento textarea:focus {
	border:1px solid #ffa800;
}

form#contato button, form#orcamento button {
	background:url('../img/form-button-bg.png') repeat-x;
	border:1px solid #ccc;
	padding:3px 10px;
	color:#444;
	font-weight:bold;
	height:29px;
	line-height:29px;
	cursor:pointer;
}

form#contato button:hover, form#orcamento button:hover {
	background-position:0 -29px;
}

form#contato button.enviar, form#orcamento button.enviar {
	margin:10px 0 0 235px;
}

form#contato button.limpar, form#orcamento button.limpar {
	margin:10px 0 0 50px;
}

form#contato label.error, form#orcamento label.error {
	float:none;
	width:200px;
	text-align:left;
	display:block;
	clear:both;
	font-weight:normal;
	color:red;
	margin:-7px 0 10px 185px;
	
}

form#orcamento label.error {
	margin:-7px 0 10px 0;
	
}




/* ------------------------------------ */
/*                                      */
/*               RODAPE                 */
/*                                      */
/* ------------------------------------ */


#rodape {
	padding:5px 25px;
	font-size:10px;
	margin-bottom:20px;
}

#rodape a {
	display:block;
	float:left;
	text-transform:uppercase;
	color:#999;
}

#rodape a:hover {
	color:#555;
}

#rodape p {
	float:right;
	color:#999;
	text-transform:uppercase;
}




#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #fff3e1;
	padding: 15px;
}

#tooltip h3, #tooltip div { 
	margin: 0;
}