/*
Author: Jéssica Schissato - http://www.princiweb.com.br

Indice:

1. CSS Reset
2. Regras gerais
3. Estrutura
    3.1. Topo
    3.2. Conteudo
    3.3. Contato
    3.4. Rodape
4. Páginas
	4.1. Página Inicial
	4.2. Portfolio
	4.3. Especialidades
	4.4. Contato
	4.5. Clientes atuais
		4.5.1. Clientes atuais - Fotos e releases
			4.5.1.1. Clientes atuais - Fotos e releases - Releases
			4.5.1.2. Clientes atuais - Fotos e releases - Galerias
				4.5.1.2.1. Clientes atuais - Fotos e releases - Galerias - Fotos
*/

/*
+----------------------------------------------------------------+
1. CSS Reset
+----------------------------------------------------------------+
*/
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; font-size: 100%; vertical-align: baseline; background: transparent }
ol, ul { list-style: none }
blockquote, q {	quotes: none }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none }
ins  { text-decoration: none }
del { text-decoration: line-through }
table {	border-collapse: collapse;	border-spacing: 0 }

/*
+----------------------------------------------------------------+
2. Regras gerais
+----------------------------------------------------------------+
*/

body { background: url(../img/bg.gif) repeat }
select { cursor: pointer }
body { background-color: #ffffff; color: #383838; font-family: Tahoma, Geneva, sans-serif; font-size: 100%; line-height: 1.125em /* 16 x 1.125 = 18px */; min-width: 900px }
a, a:visited { color: #285da2; text-decoration: underline }
a:hover { color: #383838 }
p, ul li, ol li, table, address, label { font-size: 0.75em /* 16 x 0.75 = 12px */ }
p { margin-bottom: 20px }
ul, ol { margin-bottom: 30px }
ul li { background: url(../img/ico-flecha.png) 0 5px no-repeat; margin-bottom: 10px; padding-left: 18px }
ol { list-style: decimal inside none }
span.underline { text-decoration: underline }
.display { display: none }
.img-esquerda { float: left; margin: 15px 10px 10px 0 }
.img-direita { float: right; margin: 0 10px 10px 0 }

@font-face {
    font-family: 'MyriadProBoldCondensedItalic';
    src: url('fonts/myriadpro-boldcondit-webfont.eot');
    src: url('fonts/myriadpro-boldcondit-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/myriadpro-boldcondit-webfont.woff') format('woff'),
         url('fonts/myriadpro-boldcondit-webfont.ttf') format('truetype'),
         url('fonts/myriadpro-boldcondit-webfont.svg#MyriadProBoldCondensedItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadProCondensedItalic';
    src: url('fonts/myriadpro-condit-webfont.eot');
    src: url('fonts/myriadpro-condit-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/myriadpro-condit-webfont.woff') format('woff'),
         url('fonts/myriadpro-condit-webfont.ttf') format('truetype'),
         url('fonts/myriadpro-condit-webfont.svg#MyriadProCondensedItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 { color: #19519b; font-family: MyriadProCondensedItalic; font-size: 1.5em /* 24px */; font-weight: normal; margin-bottom: 15px; text-transform: uppercase }
h2 { font-family: Tahoma, Geneva, sans-serif; font-size: 0.9em /* 14px */; font-weight: bold; margin-bottom: 5px }
h3 { color: #08418b; font-family: Tahoma, Geneva, sans-serif; font-size: 0.8em /* 13px */; font-weight: normal; margin-bottom: 10px }

/* Botões */
#btn-saiba-mais { background: url(../img/btn-saiba-mais.png) top no-repeat; display: block; float: right; font-size: 0; height: 33px; line-height: 0; margin-top: 15px; text-indent: -5000em; width: 87px }
#btn-ver-clientes { background: url(../img/btn-ver-clientes.png) top no-repeat; display: block; font-size: 0; height: 33px; line-height: 0; text-indent: -5000em; width: 87px }
#btn-ver-especialidades { background: url(../img/btn-ver-especialidades.png) top no-repeat;  display: block; font-size: 0; height: 33px; line-height: 0;  text-indent: -5000em; width: 127px }
#btn-ver-portfolio { background: url(../img/btn-ver-portfolio.png) top no-repeat; display: block; font-size: 0; height: 33px; line-height: 0;  text-indent: -5000em; width: 95px }
#cphConteudo_btnEnviar { background: url(../img/btn-enviar.png) top no-repeat; border: 0; cursor: pointer; display: block; float: right; font-size: 0; height: 40px; line-height: 0; text-indent: -5000em; width: 70px }
#cphConteudo_btnEntrar { background: url(../img/btn-entrar.png) top no-repeat; border: 0; cursor: pointer; display: block; float: right; font-size: 0; height: 29px; line-height: 0; margin-top: 23px; text-indent: -5000em; width: 51px }
#cphConteudo_btnCadastrar { background: url(../img/btn-cadastrar.png) top no-repeat; border: 0; cursor: pointer; display: block; float: right; font-size: 0; height: 29px; line-height: 0; margin-top: 23px; text-indent: -5000em; width: 67px }
#btn-saiba-mais:hover, #btn-ver-clientes:hover, #btn-ver-especialidades:hover, #btn-ver-portfolio:hover, #cphConteudo_btnEnviar:hover, #cphConteudo_btnEntrar:hover, #cphConteudo_btnCadastrar:hover { background-position: bottom }

/* Formulário */
fieldset legend { color: #08418b; font-size: 0.8em; margin-bottom: 5px }
fieldset div { margin-bottom: 10px }
fieldset div.esquerda { float: left; margin-right: 10px }
input, select, textarea { background: url(../img/bg-input.gif) bottom repeat-x #ffffff; border: 1px solid #cdcdcd; color: #383838; font-family: Tahoma, Geneva, sans-serif; font-size: 0.75em; }
input { height: 27px; padding: 0 3px; line-height: 25px }
select { color: #383838; height: 29px; padding: 4px 3px }
textarea { height: 120px; margin: 0; padding: 3px; width: 571px }
input:focus, select:focus, textarea:focus { border-color: #383838 }
span.obrigatorio { color: #ff0000 }
label { cursor: pointer; display: block; margin-bottom: 5px }
label.error { color: #ff0000; font-size: 0.7em; margin: 0 }
.limpa-float { clear: both }

/* Mensagen de erro e sucesso */
div.erro { background-color: #ffebe8; border: 1px solid #dd3b10; margin-bottom: 20px; padding: 5px 10px }
div.erro h2 { font-size: 0.75em; margin: 0 }
div.erro ul, div.erro ul li { margin: 0 }

div.sucesso { background-color: #dff5d5; border: 1px solid #479325; margin-bottom: 20px; padding: 5px 10px }
div.sucesso h2 { font-size: 0.75em; margin: 0 }
div.sucesso p { margin: 0 }

/* Breadcrumb */
#breadcrumb { margin-bottom: 20px }
#breadcrumb li { background: none; display: inline; padding: 0 }
#breadcrumb li a { text-decoration: none }
#breadcrumb li a:hover { color: #285da2; text-decoration: underline }

ul.paginacao { clear: both }

ul.paginacao li { background: none; display: block; float: left; font-family: MyriadProCondensedItalic; font-size: 1.1em; height: 23px; margin: 0 7px 0 0; padding: 0 }
ul.paginacao li a { background-color: #b9b9b9; padding: 0 7px; text-decoration: none }
ul.paginacao li a:hover { background-color: #b8551b; color: #ffffff }
ul.paginacao li.pag-atual span { color: #ffffff; background-color: #285da2; padding: 0 7px }
ul.paginacao li.pag-ant a, ul.paginacao li.prox-pag a { background: none; padding: 0 }
ul.paginacao li.pag-ant a:hover, ul.paginacao li.prox-pag a:hover { color: #383838; text-decoration: underline }

/*
+----------------------------------------------------------------+
3. Estrutura
+----------------------------------------------------------------+
*/

#principal { background: url(../img/luz-topo.png) top center repeat-x; overflow: hidden }

/*
+----------------------------------------------------------------+
3.1. Topo
+----------------------------------------------------------------+
*/

#topo { height: 58px; margin: 25px auto; width: 900px }
    #topo #logo { display: block; float: left }
    
    /* Menu */
    #menu { float: right; height: 25px; margin: 23px -15px 0 0 }
	#menu li { background: none; float: left; list-style: none; padding-left: 0 }
	#menu li a { background: url(../img/menu.gif) left no-repeat; display: block; font-size: 0; height: 25px; line-height: 0; padding-left: 10px; text-indent: -5000em }
	#menu li a:hover { background: url(../img/menu-hover.gif) left no-repeat; }
	#menu li a#menu-sobre { background-position: 0; width: 123px }
	#menu li a#menu-jornalistas { background-position: -133px; width: 108px }
	#menu li a#menu-especialidades { background-position: -251px; width: 129px }
	#menu li a#menu-clientes { background-position: -390px; width: 129px }
	#menu li a#menu-portfolio { background-position: -529px; width: 100px }
	#menu li a#menu-contato { background-position: -639px; padding-right: 0; width: 85px }	

/*
+----------------------------------------------------------------+
3.2. Conteúdo
+----------------------------------------------------------------+
*/

#conteudo { margin: 0 auto; width: 900px }
	#box { background: url(../img/bg-interna.png) bottom no-repeat; padding: 0 13px; overflow: hidden }
		#esquerda { float: left; width: 580px }
		#direita { float: right; width: 275px }
		#direita h2 { color: #19519b; font-family: MyriadProCondensedItalic; font-size: 1.5em /* 24px */; font-weight: normal; margin-bottom: 10px; text-transform: uppercase }
	    #direita ul { margin-bottom: 20px }
		#direita ul li { margin: 0 0 15px 20px }
		#direita li h3 { color: #383838; font-size: 1em /* 12px */; font-weight: bold; margin-bottom: 0 }
		#direita li p { font-size: 1em /* 12px */ }
		#direita #btn-ver-especialidades { margin-left: 148px }
		#direita #btn-ver-clientes { margin-bottom: 20px; margin-left: 188px }
		#direita #btn-ver-portfolio { margin-left: 180px }
	#rodape-box { background: url(../img/bg-sombra.png) no-repeat; height: 59px; margin-left: -35px; width: 965px }

/*
+----------------------------------------------------------------+
3.3. Contato
+----------------------------------------------------------------+
*/

#contato { clear: both; height: 62px; line-height: 24px; margin: 0 auto 25px; width: 504px }
#contato p { margin: 0 }
#contato #telefone { background: url(../img/ico-telefone.png) no-repeat; color: #0b4797; float: left; font-family: MyriadProBoldCondensedItalic; height: 35px; margin-right: 10px; padding: 23px 0 3px 43px }
	#telefone span.ddd { font-size: 1.5em /* 18px */ }
	#telefone span.numero-telefone { font-size: 3.5em /* 42px */ }
	#email { background: url(../img/ico-email.png) 0 15px no-repeat; display: block; float: right; font-family: MyriadProCondensedItalic; font-size: 1.3em /* 21px */;  height: 45px; padding: 25px 0 12px 65px }
	#email a { color: #383838; text-decoration: none }
	#contato #email a:hover { text-decoration: underline }

/*
+----------------------------------------------------------------+
3.4. Rodapé
+----------------------------------------------------------------+
*/

#rodape { background: url(../img/bg-rodape.gif) no-repeat; height: 89px; margin: 0 auto 35px; width: 900px }
	#rodape-conteudo { color: #ffffff; padding: 7px 15px 10px 20px; }
	
		address { float: left; font-style: normal; margin-right: 20px }
		address a, address a:visited { color: #68cfff }
		address a:hover { color: #ffffff }
		
		#blog { float: left; margin: 5px 16px 0 0 }
		#blog img { float: left; margin: 5px 9px 0 0 }
		#blog p { display: block; float: right; width: 142px }
		#blog a { color: #4fabe3; display: block }
		#blog a:hover { color: #ffffff }
		
		#assinatura { display: block; float: right; margin-top: 21px }
		#assinatura a { background: url(../img/assinatura-rodape.png) left top no-repeat; display: block; font-size: 0; height: 7px; line-height: 0; text-indent: -5000em; width: 132px }
		#assinatura a:hover { background-position: left bottom }

/*
+----------------------------------------------------------------+
4. Páginas
+----------------------------------------------------------------+
*/

/*
+----------------------------------------------------------------+
4.1. Página Inicial
+----------------------------------------------------------------+
*/

#fullbanner { background: url(../img/img-institucional.png) 0 0 no-repeat; height: 212px; margin: 60px auto 25px; width: 900px }
#fullbanner p { float: right; margin-top: 128px; text-align: right; width: 530px }

#box-clientes { background: url(../img/bg-clientes.png) left bottom no-repeat; float: left; margin-left: -36px; padding: 0 22px 78px 45px; position: relative; width: 570px }
#box-clientes p { margin-bottom: 20px }
#box-clientes ul { margin: 0 }
#box-clientes ul.direita { float: right }
#box-clientes ul.esquerda { float: left }
#box-clientes ul li { margin: 0 0 15px 20px; width: 228px }
#box-clientes #btn-ver-clientes { bottom: 45px; position: absolute; right: 181px }

#box-especialidades { background: url(../img/bg-especialidades.png) left bottom no-repeat; float: right; margin-right: -36px; padding: 0 50px 78px 21px; position: relative; width: 264px }
#box-especialidades ul { margin: 0 }
#box-especialidades ul li { margin: 0 0 15px 20px }
#box-especialidades li h3 { color: #383838; font-size: 1em /* 12px */; font-weight: bold; margin-bottom: 0 }
#box-especialidades li p { font-size: 1em /* 12px */ }
#box-especialidades #btn-ver-especialidades { bottom: 45px; position: absolute; right: 60px }

#box-clientes h2, #box-especialidades h2 { color: #19519b; font-family: MyriadProCondensedItalic; font-size: 1.5em; font-weight: normal; margin-bottom: 10px; text-transform: uppercase }

/*
+----------------------------------------------------------------+
4.2. Portfolio
+----------------------------------------------------------------+
*/

#menu-categorias { background: url(../img/linha-separacao.png) right top no-repeat; float: left; margin: 0 20px 0 0; padding-right: 10px; width: 215px }
#menu-categorias li a { color: #285da2 }
#menu-categorias li a:hover { color: #383838 }
#menu-categorias li p { font-size: 1em; margin: 0 }
    
#conteudo-direita { float: right; width: 629px }
#conteudo-direita h3 { margin-bottom: 10px }
#conteudo-direita ul { margin-bottom: 10px }

/*
+----------------------------------------------------------------+
4.3. Especialidades
+----------------------------------------------------------------+
*/

div.item-especialidade { background: url(../img/bg-item-especialidade.gif) bottom repeat-x #efefef; margin-bottom: 20px }
div.item-especialidade .titulo { background-color: #3768a8; padding: 3px }
div.item-especialidade .titulo:hover { background-color: #b8551b; padding: 3px }
div.item-especialidade .titulo h3 { background: url(../img/ico-flecha.png) 6px 5px no-repeat; border: 1px solid #539cd4; color: #ffffff; margin: 0; padding-left: 23px }
div.item-especialidade .titulo:hover h3 { border-color: #ea912e }
div.item-especialidade .conteudo { padding: 14px }
div.item-especialidade .conteudo p { margin: 0 }
div.ativo .titulo { background-color: #2c486d }
div.ativo .titulo h3 { background-image: url(../img/ico-flecha-ativa.png); border-color: #426ca4 }

ul.lista-especialidades { margin-bottom: 10px; overflow: hidden }
ul.lista-especialidades li { float: left; width: 200px }

/*
+----------------------------------------------------------------+
4.4. Contato
+----------------------------------------------------------------+
*/

.form-contato #cphConteudo_txtNome, .form-contato #cphConteudo_txtEmail { width: 572px }
.form-contato #cphConteudo_Telefone, .form-contato #cphConteudo_txtCidade { width: 169px }

#mapa { border: 3px solid #a5a5a5; height: 154px; margin-bottom: 5px }

/*
+----------------------------------------------------------------+
4.5. Clientes atuais
+----------------------------------------------------------------+
*/

.lista-clientes { margin: 0 }
.lista-clientes li { background: none; border-bottom: 1px solid #dedede; margin-bottom: 30px; overflow: hidden; padding: 0 0 30px }
.lista-clientes li img { box-shadow: 1px 2px 2px 0 #888888; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#888888'); float: left; margin-right: 10px; -moz-box-shadow: 1px 2px 2px 0 #888888; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#888888')"; -webkit-box-shadow: 1px 2px 2px 0 #888888 }
.lista-clientes li h2 { display: inline-block; font-size: 1.2em; margin-bottom: 5px }
.lista-clientes li h2 a { color: #383838; text-decoration: none }
.lista-clientes li h2 a:hover { color: #383838; text-decoration: underline }
.lista-clientes li span { color: #08418b; font-size: 1.1em }
.lista-clientes li p { font-size: 1em; margin: 0 }
.alta-resolucao { clear: left; float: left; margin-top: 4px !important; margin-bottom: 42px !important; width: 131px }
.alta-resolucao a { font-size: 0.9em}

/*
+----------------------------------------------------------------+
4.5.1. Clientes atuais - Fotos e releases
+----------------------------------------------------------------+
*/

.clientes #esquerda { background: url(../img/linha-separacao.png) right top no-repeat; min-height: 456px; padding-right: 10px; width: 430px }

	#form-login { margin-bottom: 20px }
	#form-login div { margin-bottom: 0 }
	#form-login #cphConteudo_txtLoginEmail { width: 361px }
	
	#form-cadastro #cphConteudo_txtCadastroNome { width: 241px }
	#form-cadastro #cphConteudo_txtCadastroTelefone { width: 163px }
	#form-cadastro #cphConteudo_txtCadastroVeiculoComunicacao { width: 422px }
	#form-cadastro #cphConteudo_txtCadastroEmail { width: 345px }

.clientes #direita { width: 424px }
.clientes #direita h2 { color: #383838; font-family: Tahoma, Geneva, sans-serif; font-size: 0.9em /* 14px */; font-weight: bold; margin-bottom: 20px; text-transform: none }
.clientes #direita ul li { margin-left: 0 }

/*
+----------------------------------------------------------------+
4.5.1.1. Clientes atuais - Fotos e releases - Releases
+----------------------------------------------------------------+
*/

#lista-releases-esquerda { border-right: 1px solid #cacaca; float: left; padding-right: 10px; width: 430px }
#lista-releases-direita { float: right; width: 423px }
#lista-releases-esquerda li, #lista-releases-direita li { font-size: 1em }
#lista-releases-esquerda li h3 a, #lista-releases-direita li h3 a { color: #08418b; text-decoration: none }
#lista-releases-esquerda li h3 a:hover, #lista-releases-direita li h3 a:hover { text-decoration: underline }
#lista-releases-esquerda li p a, #lista-releases-direita li p a { color: #383838; text-decoration: none }
#lista-releases-esquerda li p a:hover, #lista-releases-direita li p a:hover { text-decoration: underline }

/*
+----------------------------------------------------------------+
4.5.1.2. Clientes atuais - Fotos e releases - Galerias
+----------------------------------------------------------------+
*/

#lista-galerias li { background: none; float: left; margin: 0 12px 25px 13px; padding-left: 0; text-align: center; width: 120px }
#lista-galerias li img { box-shadow: 1px 2px 2px 0 #888888; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#888888'); -moz-box-shadow: 1px 2px 2px 0 #888888; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#888888')"; -webkit-box-shadow: 1px 2px 2px 0 #888888 }
#lista-galerias li h3 { font-size: 1em }
#lista-galerias li h3 a { text-decoration: none }

/*
+----------------------------------------------------------------+
4.5.1.2. Clientes atuais - Fotos e releases - Galerias - Fotos
+----------------------------------------------------------------+
*/

#lista-fotos li { background: none; float: left; margin: 0 12px 25px 13px; padding-left: 0; text-align: center; width: 120px }
#lista-fotos li img { box-shadow: 1px 2px 2px 0 #888888; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#888888'); -moz-box-shadow: 1px 2px 2px 0 #888888; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#888888')"; -webkit-box-shadow: 1px 2px 2px 0 #888888 }
#lista-fotos li p { font-size: 1em /* 12 x 1 = 12px */ }