/*
Nome: Agência P4
Endereço: http://www.agenciap4.com.br/
Descrição: Site da Agência P4
Versão: 2.1
Autor: Giovani de Oliveira
*/

*{margin:0;padding:0;list-style:none;}

body{background: #0e68b7 url(imagens/fundo+body.jpg) repeat-x 0 0;}


h1{
	text-indent:-9000px;
	background: url(imagens/h1+portfolio.png) no-repeat;
	width:249px;
	height:205px;
	position:absolute;
	left:62px;
	top:15px;
}
h1.contato{background: url(imagens/h1+contato.png) no-repeat;}
h1.agencia{background: url(imagens/h1+agencia.png) no-repeat;}
h1.clientes{background: url(imagens/h1+clientes.png) no-repeat;}

#geral{
	background: url(imagens/fundo+geral.png) repeat-y 0 0;
	margin: 0 auto;
	width:998px;
}

#principal{
	position: relative;
	width: 998px;
}

/* topo do site = marca + menu navegação */
#topo{
	background: url(imagens/fundo+topo.jpg) no-repeat 0 0;
	height: 67px;
	padding-top:297px;
}
#topo img{
	margin-left:50px;
}

#topo ul{
	height: 35px;
	margin: 0 auto;
	width:625px;
}

#topo ul li{
	float: left;
	width:125px;
	text-align:center;
}
#topo ul li a{
	height: 33px;
	display: block;
	text-indent: -9999px;
}
#topo ul li a.home{background: url(imagens/menu+home.png) no-repeat;}
#topo ul li a.agencia{background: url(imagens/menu+agencia.png) no-repeat;}
#topo ul li a.portfolio{background: url(imagens/menu+portfolio.png) no-repeat;}
#topo ul li a.clientes{background: url(imagens/menu+clientes.png) no-repeat;}
#topo ul li a.contato{background: url(imagens/menu+contato.png) no-repeat;}
/* topo do site */

#conteudo{
	background: #fff url(imagens/fundo+conteudo.jpg) repeat-x left bottom;
	margin: 0 auto;
	padding: 0 20px;
	width: 798px;
}

#conteudo p{
	color:#222;
	font: normal 12px Arial, Helvetica, sans-serif;
	line-height: 125%;
	margin: 10px 20px;
}


/* banner - imagens dos últimos trabalhos feitos */
#banner{
	background: url(imagens/fundo+banner.png) no-repeat center center;
	height: 455px;
	left: 23px;
	position: absolute;
	top: 105px;
	width: 952px;
}

#slide{
    width: 870px; /* important to be same as image width */
    height: 421px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
	top: 12px;
	left: 41px;
}

#slideContent {
    width: 870px; /* important to be same as image width or wider */
    position: absolute;
	top: 0;
	margin-left: 0;
}
.slideImage {
    float: left;
    position: relative;
	display: none;
}
.slideImage span {
    position: absolute;
	font: normal 12px Arial, Helvetica, sans-serif;
    padding: 25px;
    width: 820px;
    background-color: #000;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
	-khtml-opacity: 0.8;
    opacity: 0.8;
    color: #fff;
    display: none;
}
.clear {clear: both;}
.slideImage span strong{font-size: 20px;}
.slideImage span p a{
	color: #fff;
	float: right;
    font-size: 16px;
	margin-top: 10px;
	text-decoration: none;
}
.left {
	top: 0;
    left: 0;
	width: 110px !important;
	height: 455px;
}
.right {
	right: 0;
	bottom: 0;
	width: 90px !important;
	height: 290px;
}
.bottom {
	bottom: 0;
    left: 0;
}
/* banner */

/* depoimento dos clientes */
#depoimento{
	background: url(imagens/fundo+depoimento.gif) no-repeat 5px 2px;
	border-right: 1px solid #cfcfcf;
	height: 163px;
	margin-top:470px;
	padding: 27px 10px 5px 10px;
	width:375px;
}

#depoimento p{
	color: #222;
	font: 13px Georgia, "Times New Roman", Times, serif;
	margin:5px 10px;
}

#depoimento p.cliente{
	color: #444;
	display: block;
	font: 11px Arial, Helvetica, sans-serif;
	padding: 5px 15px 0;
	text-align:right;
}

#depoimento p.cliente strong{
	color:#222;
	display: block;
	font: bold 16px Arial, Helvetica, sans-serif;
}
/* depoimento dos clientes */

/* box news - cadastro de e-mail para recebimento de news da P4 */
#news{
	background: url(imagens/titulo+news.gif) no-repeat 0 2px;
	height: 195px;
	padding: 30px 10px 0 0;
	position: absolute;
	right: 240px;
	top: 570px;
	width: 232px;
}
#news p{
	color: #444;
	font: 11px Arial, Helvetica, sans-serif;
}
#news form{margin: 20px 0 0;}
#news form input{
	border: 1px solid #bbb;
	color: #888;
	padding: 8px 5px;
	margin-bottom: 8px;
	width: 200px;
}
#news form input.botaoNews{
	border: none;
	height: 68px;
	margin: 2px 0 0 45px;
	width:170px;
}
/* box news*/

/* rodape do site */
#rodape{
	background: url(imagens/fundo+rodape.jpg) no-repeat 0 0;
	height: 185px;
}

address{
	color: #fff;
	font: 12px Arial, Helvetica, sans-serif;
	display: block;
	padding:110px 70px 0 0;
	text-align:center;
}
address a{
	color: #fff;
	font: bold 15px Arial, Helvetica, sans-serif;
	text-decoration:none;
}
address strong{
	display: block;
	font: bold 15px Arial, Helvetica, sans-serif;
}
/* rodape do site */

#cafe{
	background: url(imagens/cafe.png) no-repeat 0 0;
	height:319px;
	position: absolute;
	right:5px;
	bottom:10px;
	width:276px;
}

.boxWeb, .boxDesenvolvimento{
	background: url(imagens/fundo+box+web.gif) no-repeat left 10px;
	padding: 10px 10px 10px 130px;
	margin-top: 50px;
}

.boxWeb h2, .boxDesenvolvimento h2{
	background: url(imagens/h2+web.gif) no-repeat left center;
	text-indent:-9000px;
	margin-left: 18px;
	height: 36px;
	
}
.boxDesenvolvimento{
 	background: url(imagens/fundo+box+desenvolvimento.gif) no-repeat left 10px;
	padding-right: 120px;
	margin-top: 20px;
}
.boxDesenvolvimento h2{background: url(imagens/h2+desenvolvimento.gif) no-repeat left center;}

ul#clientes{
	min-height:500px;
	padding: 10px 0 200px 250px;
}

ul#clientes li{
	float: left;
	margin: 10px 15px;
}

ul#contato{
	min-height:550px;
	padding: 10px 0 200px 200px;
}
ul#contato img{margin-left: 15px;}
ul#contato iframe{margin:20px;}
ul#contato form{float: right; width: 360px;}
ul#contato form p{
	color:#444;
	font: normal 11px Arial, Helvetica, sans-serif;
}
ul#contato form p img{
	margin: 5px 0 0;}
ul#contato form input,
ul#contato form textarea,
ul#contato form select{
	background: url(imagens/fundo+input.jpg) repeat-x;
	color:#444;
	border: 1px solid #d3d3d3;
	font: normal 11px Arial, Helvetica, sans-serif;
	padding: 5px;
	width:300px;
}
ul#contato form select{ width:310px; padding:5px;}
ul#contato form option{background-color:#fff;}
ul#contato form textarea{background: transparent url(imagens/fundo+textarea.jpg) repeat-x left bottom;}
ul#contato form input.botaoEnviar{
	background: none;
	border: none;
	height: 29px;
	margin: -10px 0 0 225px;
	width:103px;
}


#conteudo #menuPortfolio{
	border-bottom: 1px solid #cecece;
	height: 180px;
	margin: 0 10px 0 225px;
	padding: 10px 0;
	width: 580px;
}

#conteudo #menuPortfolio h6{
	border-bottom: 1px solid #cecece;
	color:#053160;
	font: bold 12px Arial, Helvetica, sans-serif;
	margin-top:10px;
	padding-bottom: 7px;
	text-transform:uppercase;
}
#conteudo #menuPortfolio  ul{
	float: left;
	margin:10px 0 5px;
	padding-left: 5px;
	width: 180px;
}
#conteudo #menuPortfolio  ul li{
	color: #222;
	display: block;
	font: normal 11px Arial, Helvetica, sans-serif;
	margin: 6px 0;
	text-align:left;
	width: 180px;
}
#conteudo #menuPortfolio  ul li a{
	color: #222;
	font: normal 11px Arial, Helvetica, sans-serif;
	text-decoration: none;
}
#conteudo #menuPortfolio  ul li a:hover{ font-weight:bold;}

#portfolio{
	padding: 10px 0;
	margin-top:10px;
	min-height: 600px;
}

#loading{
	padding: 10px 0;
	margin-top:10px;
	min-height: 600px;
	text-align: center;
}

#loading img{
    margin: 190px 0;
}

/*#portfolio #descricao{
	float: left;
	margin-top:60px;
	width:210px;
}*/

#portfolio #descricao{
	position:absolute;
	width:210px;
	left: 89px;
	top: 240px;
}

#portfolio #descricao p{
	color: #222;
	font: normal 11px Arial, Helvetica, sans-serif;
	padding: 5px 0 10px;
	margin: 5px 0 0;
}
#portfolio #descricao p a{
	background: url(imagens/link.gif) no-repeat right 2px;
	color: #222;
	display: block;
	font: bold 12px Arial, Helvetica, sans-serif;
	padding: 5px 23px 5px 0;
	text-align:right;
	text-decoration:none;
	text-transform:uppercase;
}
#portfolio #descricao p strong{
	display: block;
	font: bold 12px Arial, Helvetica, sans-serif;
	padding-bottom:5px;
}

#portfolio #apresentacao{
	margin-left: 220px;
	position:relative;
}
#portfolio #apresentacao .tag{
	position:absolute;
	right:-12px;
	top:36px;
}
#portfolio .semDepoimento{
	display:block;
	clear: both;
	margin-top:20px;
	padding: 30px 0 90px 210px;
}
#portfolio #apresentacao h2{
	color: #444;
	font: bold 22px Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	margin: 0 0 20px 10px;
}



#portfolio #depoimentos{
	background: url(imagens/depoimentoCliente.gif) no-repeat 210px 2px;
	clear: both;
	margin-top:20px;
	padding: 30px 0 90px 210px;
}
#portfolio #depoimentos p{
	color: #222;
	display: block;
	font: 14px Georgia, "Times New Roman", Times, serif !important;
	padding: 5px 15px 0;
	margin: 10px 0 0;
}
#portfolio #depoimentos p span{
	background: url(imagens/fundo+box.png) repeat-x left top;
	display: block;
	font: normal 11px Arial, Helvetica, sans-serif;
}
#portfolio #depoimentos p strong{
	display: block;
	font: bold 16px Arial, Helvetica, sans-serif;
	padding-top:10px;
}



/* classes adicionais */
.left{float:left;}
.right{float:right;}
.intro{margin: 25px 40px 15px;}
.introAgencia{margin: 40px 0 50px 250px;}
a{    outline: none;}
a img{border: none;}
div.hr {height: 2px; background: url(imagens/fundo+box.png) repeat-x;}
div.hr hr {display: none;}