.ddsmoothmenu{
font-size: 13px;
font-weight: bold;
font-family: Verdana;
width: 100%;
padding:21px 0 0 5px;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
width: auto;
display: block;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
color: #C386C3;
padding: 8px 5px 6px 3px;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
font-size: 13px;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: #C386C3;
font-size: 13px;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: white; 
color: #C386C3;
}

.ddsmoothmenu ul li a:hover{
background: #FCF7FB; /*background of menu items during onmouseover (hover state)*/
color: #C386C3;
font-size: 13px;
}

.ddsmoothmenu ul li:hover{
background: #FCF7FB; /*background of menu items during onmouseover (hover state)*/
color: #C386C3;
font-size: 13px;
}
	
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
color: #C386C3;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
background: white;
color: #C386C3;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
width: 160px; /*width of sub menus*/
margin: 0;
color: #C386C3 !important;
font-size: 14px !important;
border-top-width: 0;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: transparent;
}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}

.downarrowclass {
position: absolute;
}



/* =============== */

* { margin:0; padding:0; }

body {
	font-family:Arial, Tahoma, Verdana, Helvetica, sans-serif;
	font-size:12px;
}

/* CLASSES DE FORMATACAO DE TEXTO - CONTEUDO DO GERENCIADOR */
	.sublinhado 						{ text-decoration: underline; }
	em 									{ font-style: italic; }
	a 									{ outline: none !important; cursor: pointer; }
	a:hover 							{ text-decoration: underline; }
	.bold 								{ font-weight: bold; }
	ul,ol 								{ list-style: none; }
	.txtEsquerda 						{ text-align: left!important; }
	.txtDireita 						{ text-align: right!important; }
	.txtCentro 							{ text-align: center!important; }
	.txtJustificado, .txtJustificado * 	{ text-align: justify!important; }
	h2 span 							{ display: none; }
	
	
	.clear 				{ clear: both; }
	.none 				{ display: none; }
	.left 				{ float:left; }
	.right 				{ float:right!important; }
	.no-margin			{ margin: 0 !important; }
	.no-margin-right	{ margin-right: 0 !important; }
	 
	a img 		{ border: none; } 
	a 			{ text-decoration: none; color: #000; }

/* ESTRUTURA */
	#elementos-fundo {  }
	#gradiente-fundo { width: 100%; height: 345px; background: url(i/sprites/sprite-fundos-site.jpg) repeat-x top left; }
	#gradiente-fundo #elementos { 
		width: 100%; 
		height: 285px; 
		background: url(i/sprites/sprite-elementos-fundo.png) no-repeat top center; 
		position: relative; 
		top: 40px; 
	}
	#topo-produtos { height: 240px; }
	#brush-fundo { width: 100%; height: 198px; background: url(i/sprites/sprite-brush.png) repeat-x top left; }
	
	#pagina	{ width: 930px; margin: 0 auto; position: relative; margin-top: -530px; background: url(i/fundos/bg-redondo-pagina.png) no-repeat bottom left; padding-bottom: 10px; }
	#pagina #cabecalho { height: 70px; margin-bottom: 10px; position: relative; }
	#pagina #cabecalho .logo-johnpetter { float: left; margin: 10px 0 0 0; }
	#pagina #cabecalho .logo-johnpetter a { width: 204px; height: 52px; float: left; background: url(i/logomarca-johnpetter.png) no-repeat top left; }
	#pagina #cabecalho .logo-johnpetter a span { display: none; }
	
	/* MENU */
#conteiner-menu { width:580px; float: left; margin:0; z-index:5; }
#conteiner-menu img { float: left; }
#conteiner-menu ul table {border-collapse:collapse; margin:-1px -10px; font-size:1em;}

/* make the dropdown ul invisible */
		#conteiner-menu ul li ul { position:absolute; left:-9999px; height: 31px !important;}

		li.sublista 						{ background: none !important; height: auto; }
		li.sublista a 						{ background: none !important; height: auto; width: auto !important; }
		.bg-end:hover 						{ border: solid 1px black; background: url(i/fundos/bg-menu-principal-last.png) no-repeat top right; widht: 8px; height: 22px;}
		ul#menu-principal 					{ width: 560px; float: right; margin: 22px 0 0 0; }
		ul#menu-principal li				{ float: left; overflow: hidden; }
		ul#menu-principal li a 				{ float: left; margin-top: 4px; font-weight: bold; font-size: 13px; margin-right: 5px; }
		ul#menu-principal li a:hover 			{ text-decoration: underline; }
		ul#menu-principal li a.line-none:hover 	{ text-decoration: none; }
		ul#menu-principal li a 					{ padding: 5px 4px 0 4px; height: 22px; }


		#conteiner-menu ul li a:hover,
		#conteiner-menu ul li:hover a { /* background-color: #FFF !important; */ }

		#conteiner-menu ul li.a-johnpetter a:hover,

		#conteiner-menu ul li.produtos a:hover,

		#conteiner-menu ul li.cursos-e-eventos a:hover,


		/* make the sub menu ul visible and position it beneath the first list item */
		#conteiner-menu ul :hover ul { top:48px; left:0; height:auto; text-align:left; z-index: 9999; }
		#conteiner-menu ul :hover ul li.palavra-da-direcao { margin-left: 200px;}
		#conteiner-menu ul :hover ul li.onde-encontrar { margin-left: 200px;}
		#conteiner-menu ul :hover ul li.campanha-recheada-guia-tendo-um-bebe { margin-left: 200px;}
		#conteiner-menu ul :hover ul li.contate-nos { margin-left: 600px;}
		#conteiner-menu ul :hover ul.a-johnpetter { left: 372px; }
		#conteiner-menu ul :hover ul.campanhas { left: 469px !important; }
		#conteiner-menu ul :hover ul.produtos { left: 382px; }
		#conteiner-menu ul :hover ul.cursos-e-eventos { left: 580px !important; }

		/* make the sub menu ul li the full width with padding and border. Add an auto scroll bar */
		#conteiner-menu ul :hover ul li { color:#000; }

		/* style the background and foreground color of the submenu links */
		#conteiner-menu ul :hover ul li a { font-size: 11px; color: #141F45; text-decoration: underlined; border:0; height: auto !important; }

	
	/* ACESSIBILIDADE TOPO */
		#acessibilidade-topo { float: right; width: 80px; }
		#acessibilidade-topo li { float: left; }
		#acessibilidade-topo li a { 
			float: left; 
			width: 18px; 
			height: 15px; 
			background: url(i/sprites/sprite-acessibilidade.png) no-repeat top left; 
			margin-right: 5px; 
		}
		#acessibilidade-topo li a span { display: none; }
		#acessibilidade-topo li.inicio a { background-position: 0 0; }
		#acessibilidade-topo li.mapa-do-site a { background-position: -17px 0; }
		#acessibilidade-topo li.imprimir a { background-position: -36px 0; }
		
		
	/* FORMULARIO BUSCA TOPO */
		#form-busca-principal { float: right; margin: 10px 3px 0 0; }
		#form-busca-principal span.bg-input { 
			background: url(i/fundos/bg-input-busca.png) no-repeat top left; 
			float: left; 
			height: 21px; 
			width: 94px; 
			padding: 8px 0 1px 10px; 
		}
		#form-busca-principal input[type='text'] { background: none; border: none; width: 94px; height: 18px; float: left; font-size: 11px; color: #666; }
		#form-busca-principal input[type='image'] {  }
	
	#conteudo { clear: both; background: #FFF; padding: 0 13px 13px; overflow: hidden; }
	
	/* BOXES CAPA */
		#conteudo .box-tit { background: url(i/sprites/sprite-box-titulos.png) no-repeat top left; }
		#conteudo .box-rosa { width: 288px; height: 205px; float: left; background-position: 0 10px; margin-right: 13px; }
		
		#conteudo #conheca-o-guia h2 { width: 174px; height: 32px; background-position: -809px -6px; margin-left: 15px; }
		#conteudo #conheca-o-guia a { text-align: center; margin-top: 5px; display: block; }
		
		#conteudo .box-adjusting { overflow: hidden; height: 220px; }
		/* PRODUTOS */
			#conteudo #produtos-john-petter h2 { width: 174px; height: 32px; background-position: -622px -6px; margin-left: 15px; }
			#conteudo #produtos-john-petter a { display: block; }
			#conteudo #produtos-john-petter ul#carouselProdutos {  } 
			#conteudo #produtos-john-petter ul#carouselProdutos li {  }
			#conteudo #produtos-john-petter ul#carouselProdutos li p { color: #9C9E9F; font-size: 13px; font-family: Georgia, Verdana, Arial; }
			#conteudo #produtos-john-petter ul#carouselProdutos li p.titulo a { font-size: 15px; font-weight: bold; color: #9C9E9F !important; }
		
		/* DICAS E NOVIDADES */
			#conteudo #dicas-e-novidades { background-position: -300px 10px; width: 301px; height: 203px; float: left; }
			#conteudo #dicas-e-novidades h2 { width: 174px; height: 32px; background-position: -622px -60px; margin-left: 15px; }
			#conteudo #dicas-e-novidades ul { width: 290px; margin: 0 auto; margin-top: 6px; }
			#conteudo #dicas-e-novidades ul li { line-height: 22px; }
			#conteudo #dicas-e-novidades ul li a { color: #333333; }
			#conteudo #dicas-e-novidades ul li a span { color: #E2603A; }
		
		/* BANNER ENCONTRAR PRODUTOS */
			#conteudo #banner-encontrar-produtos-capa { margin: 10px 0; float: left; clear: both; }
		
		/* DEPOIMENTOS */
			#conteudo #depoimentos { clear: both; background-position: 0 -212px; width: 444px; float: left; }
			#conteudo #depoimentos h2 { width: 139px; height: 32px; background-position: -828px -60px; margin-left: 15px; }
			#conteudo #depoimentos .zebra { background: #FCF9EB; }
			#conteudo #depoimentos div.depoimento { margin: 0 auto; margin-top: 7px; padding: 4px 20px; }
			#conteudo #depoimentos div.depoimento p { color: #666; line-height: 18px; }
			#conteudo #depoimentos div.depoimento p.por { color: #E2603A; margin-top: 5px; }
			#conteudo #depoimentos div.depoimento p.por a { color: #E2603A; }
			#conteudo #depoimentos div.depoimento p.por span { font-weight: bold; }
			#conteudo #depoimentos p.links { clear: both; overflow: hidden; margin-top: 10px;}
			#conteudo #depoimentos p.links a span { display: none; }
			#conteudo a.h-30 { height: 30px; display: block; float: left; }
			#conteudo #depoimentos p.links a.envie { width: 209px; background-position: -622px -146px; }
			#conteudo #depoimentos p.links a.veja { width: 217px; background-position: -845px -146px; float: right; }
		
		/* ACONTECIMENTOS E EVENTOS */
			#conteudo #acontecimentos-e-eventos { float: right; background-position: -457px -213px; width: 444px; margin-right: 5px; }
			#conteudo #acontecimentos-e-eventos h2 { width: 208px; height: 32px; background-position: -622px -112px; margin-left: 15px; }
			#conteudo #acontecimentos-e-eventos ul { margin: 0 auto; overflow: hidden; }
			#conteudo #acontecimentos-e-eventos ul li { float: left; clear: both; margin-top: 2px; padding: 12px 10px; width: 422px; }
			#conteudo #acontecimentos-e-eventos ul li div.bg-img { 
				float: left; 
				/*background: url(i/fundos/bg-img.png) no-repeat top left;*/ 
				width: 107px; 
				height: 77px;
				border-left: solid 1px #CCC;
				border-top: solid 1px #CCC;
				border-right: solid 1px #666;
				border-bottom: solid 1px #666;
				text-align: center;
				margin-right: 4px;
				padding: 3px; 
			}
			#conteudo #acontecimentos-e-eventos ul li div.bg-img div.container-img { overflow: hidden; padding: 3px; height: 71px; width: 101px;}
			
			#conteudo #acontecimentos-e-eventos ul li div.info { padding-left: 88px;  }
			#conteudo #acontecimentos-e-eventos ul li div.info h3 a { font-size: 12px; color: #233A31; font-weight: bold; }
			#conteudo #acontecimentos-e-eventos ul li div.info p { line-height: 18px; }
			#conteudo #acontecimentos-e-eventos ul li div.info p a { color: #666; margin-top: 5px; display: block; }
			#conteudo #acontecimentos-e-eventos p.links { clear: both; overflow: hidden; margin-top: 10px; }
			#conteudo #acontecimentos-e-eventos p.links a span { display: none; }
			#conteudo #acontecimentos-e-eventos p.links a.veja { width: 440px; background-position: -622px -178px; float: right; margin-right: 2px; }
		
		/* BANNERS CAPA */
			#conteudo #banners-capa { clear: both; width: 896px; margin-top: 10px; float: left; }
			#conteudo #banners-capa .left { float: left; width: 294px; height: 172px; }
			#conteudo #carouselCampanhas {  }
			#conteudo #banner-mameame { margin: 0 7px; overflow: hidden; }
			#conteudo #banner-medicos {  }
			#conteudo #other-banners { clear: both; margin: 20px 0; float: left; width: 100%; }
			#conteudo #other-banners .banner { float: left; margin-right: 22px; }
			#conteudo #other-banners .banner a { float: left; }
			
	/* RODAPE */	
		#formulario-rodape { width: 100%; background: url(i/sprites/sprite-bg-rodape.png) no-repeat top center; margin: 0 auto; height: 52px; clear: both; }
		#formulario-rodape form { width: 930px; margin: 0 auto; height: 52px; }
		#formulario-rodape form .elements { width: 570px; float: right; height: 52px; position: relative; }
		#formulario-rodape form .elements label.receba { float: left; cursor: pointer; width: 266px; height: 12px; margin-top: 22px; }
		#formulario-rodape form .elements label.receba span { display: none; }
		#formulario-rodape form .elements .campos { float: right; width: 252px; margin-top: 25px; position: relative; }
		#formulario-rodape form .elements .campos p { float: left; }
		#formulario-rodape form .elements .campos p input[type='text'] { float: left; width: 104px; height: 15px; margin-right: 17px; border: none; font-size: 11px; padding-top: 2px; }
		#formulario-rodape form .elements .campos input[type='image'] { position: absolute; top: 3px; right: 8px; }
		
		#rodape 	{ clear: both; height: 250px; background: #FFF; width: 100%; }
		#rodape #container { width: 930px; margin: 0 auto; }
		#rodape #set-color { height: 213px; width: 143px; background: url(i/fundos/bg-escolha-a-cor.jpg) no-repeat top left; float: left; position: relative; }
		#rodape #set-color p { position: absolute; bottom: 55px; right: 6px; } 
		#rodape #set-color p a { width: 35px; height: 17px; float: left; margin-left: 5px; cursor: pointer; }
		#rodape #set-color p a span { display: none; }
		
		#rodape #links-rodape { overflow: hidden; padding-top: 10px; }
		#rodape #links-rodape ul { float: left; margin-left: 18px; }
		#rodape #links-rodape ul li { margin-top: 5px; font-family: Tahoma, Arial; font-size: 11px; color: #333; border-bottom: dotted 1px #666; padding-bottom: 5px; }
		#rodape #links-rodape ul li .first { font-weight: bold !important; font-size: 13px !important; font-family: Arial !important; }
		#rodape #links-rodape ul li.no-border { border: none; }
		#rodape #links-rodape ul li span { display: block; }
		
		#rodape .vcard { clear: both; width: 790px; font-size: 11px; font-family: Tahoma, Arial; margin: 0 auto; }
		#rodape .vcard span { color: #B81859; }

/* FORMULARIO FOCUSED */
	form.focused {  }
	form.focused .bloco { float: left; clear: both; width: 878px; margin-bottom: 13px; }
	form.focused .bloco p { float: left; margin-right: 15px; }
	form.focused .bloco label { float: left; text-align: right; margin-top: 8px; padding-right: 5px; }
	form.focused .bloco label.notRequired { color: #888; }
	form.focused .bloco input[type='text'] { font-size: 14px; padding: 6px 2px; color: #333; font-weight: bold; float: left; }
	form.focused .bloco select { font-size: 14px; padding: 0 2px; margin-top: 4px; color: #333; font-weight: bold; float: left; }
	form.focused .bloco textarea { font-size: 14px; padding: 6px 2px; color: #333; font-weight: bold; float: left; overflow: auto; }
	
	form.focused .captcha img { padding: 5px; }
	form.focused .captcha input[type='text'] { font-size: 27px; width: 125px; text-align: center; text-transform: uppercase; letter-spacing: 5px; }
	
	/* RADIOS */
		form.focused .radio {  }
		form.focused .radio input { float: none; display: inline; padding: 0; }
		form.focused .radio label.first { margin: 0 !important; margin-top: 8px !important; }
		form.focused .radio label.font-14 { font-size: 14px; }
		form.focused .radio span.border label { display: inline; float: none; }
		form.focused .radio span.border { float: left; padding: 5px 10px; }
		
/* ACESSIBILIDADE INTERNA */
	#acessibilidade-interna { background: #ffffff; width: 900px; padding: 4px 0 0 15px; height: 30px;}
	#acessibilidade-interna span {line-height: 20px; float: left; margin: 0 5px; font-size: 11px; color: #4E3951; }
	#acessibilidade-interna ul.breadcrumb { float: left; }
	#acessibilidade-interna ul.breadcrumb li { padding-top: 4px; float: left; }		
	#acessibilidade-interna ul.breadcrumb li a { float: left; font-size: 11px; color: #4E3951; font-weight: bold; }
	
	#acessibilidade-interna ul.opcoes { float: right; margin: 0 20px 0 0; }
	#acessibilidade-interna ul.opcoes li { float: left; }		
	#acessibilidade-interna ul.opcoes li a { 
		float: left; 
		background: url(i/sprites/sprite-acessibilidade-interna.png) no-repeat top left;
		width: 30px; 
		height: 30px; 
		margin-right: 10px;
	}
	#acessibilidade-interna ul.opcoes li a.favoritos { background-position: 0 0; }
	#acessibilidade-interna ul.opcoes li a.favoritos:hover { background-position: 0 -31px; }
	#acessibilidade-interna ul.opcoes li a.fonte-mais { background-position: -35px 0; }
	#acessibilidade-interna ul.opcoes li a.fonte-mais:hover { background-position: -35px -31px; }
	#acessibilidade-interna ul.opcoes li a.fonte-menos { background-position: -70px 0; }
	#acessibilidade-interna ul.opcoes li a.fonte-menos:hover { background-position: -70px -31px; }
	#acessibilidade-interna ul.opcoes li a.voltar { background-position: -105px 0; }
	#acessibilidade-interna ul.opcoes li a.voltar:hover { background-position: -105px -31px; }
	
	#acessibilidade-interna ul.opcoes li a span { display: none; } 

/* PAGINACAO */
	.paginacao {
		clear: both;
		padding: 15px 3px;
		text-align: center;
		width: 697px;
		margin: 0 auto;
		height: 15px;
		list-style-type: none;
		overflow: hidden;
		margin-bottom: 10px;
	}
	
	.paginacao a { font-weight: bold; font-size: 15px; color: #87307E !important; clear: both;
		padding: 15px 3px;
		text-align: center;
		width: 697px;
		margin: 0 auto;
		height: 15px;
		list-style-type: none;
		overflow: hidden;
		margin-bottom: 10px;
		height: 30px;
		padding:6px;
		border:1px solid #EBC6E7;
		background: #FFF;
		margin: 0 3px}
	
	.paginate {
		height: 30px;
		padding:6px;
		border:1px solid #EBC6E7;
		background: #FFF;
		margin: 0 3px;
		
	}
	.nolink {
		color: #87307E;
		font-size: 15px;
		background: #F0D5ED;
		padding: 6px;
		border:1px solid #EBC6E7;
	}
		
/* MENSAGEM ALERTA */
	.msgSistema {
		overflow: hidden;
		display: block;
		z-index: 999;
		width: 100%;
		text-align: center;
		position: fixed;
		top: 0;
		left: 0;
		color: #FFF;
		font-weight: bold;
		font: 22px arial, sans-serif;
		opacity: .9;
		filter:alpha(opacity=90);
	}
	
	.msgSistema span { font-size: 26px; font-weight: bold; }
	
	#msgSucesso{	
		background-color: #9FD686;
		color: #FFF;
		font-weight: bold;
		font-size: 32px;
		height: 0;
	}
	
	#msgErro{	
		background-color: #CF5A5A;
		text-align: left;
	}
	
	#msgErro .conteudo { width: 720px; margin: 0 auto; }
	#msgErro .conteudo ul { list-style: square; padding-left: 25px; margin-top: 10px; }
	
	a#btFecharMsgErro { float: right; margin: 5px 15px; cursor: pointer; background: #FFF; color: #8E0404; padding: 2px 15px; font-weight: bold; }
	a#btFecharMsgErro:hover { text-decoration: none; }
		
/* INFIELDLABELS */
	form.infield p 		{ position: relative; float: left; z-index: 0;  }
	form.infield p label.in	{ position: absolute; top: 0; left: 0; z-index: 1; margin: 8px 0 0 12px; font-size: 11px; color: #666; }
	#formulario-rodape form p label.in { margin: 2px 0 0 2px; }
	
/*  BUSCA   */

	.lista-busca .resultado-busca { height: 84px; border-bottom: 2px dotted #CCC; padding-top: 4px;}
	.lista-busca .resultado-busca .titulo a { font-size: 16px; font-weight: bold; color: #A454A4;}
	.lista-busca .resultado-busca .descricao { padding: 4px 0px; line-height: 17px;}
	.lista-busca .resultado-busca .descricao .link-busca a { font-weight: bold;}
	
/*  SITEMAP   */

	.sitemap #sitemap li { height: 24px; border-bottom: 2px dotted #CCC; padding-top: 4px; }
	.sitemap #sitemap li a { padding-left: 12px; font-size: 16px; font-weight: bold; color: #A454A4; }
	.sitemap #sitemap li .sub-menu li { padding-left: 25px; height: 20px; border: none;}
	.sitemap #sitemap li .sub-menu li a { font-size: 13px; font-weight: bold; color: #666; }
	.sitemap #sitemap li.a-johnpetter { height: 144px;}
	.sitemap #sitemap li.produtos { height: 144px;}
	.sitemap #sitemap li.campanhas { height: 100px;}
	.sitemap #sitemap li.fale-conosco { height: 76px;}
	
	
/* GALERIA DE IMAGENS */

	.galeria-de-imagens { width: 900px; height: 150px; background-color: #D6C7C4; margin-top: 8px; padding: 5px;}