body {
	margin: 0px;
	padding: 0px;
}
#principal {
	font: 12px Verdana, Geneva, sans-serif;
	padding: 0 10px;
	height: 270px;
	width: 370px;
	overflow: hidden;
}
h1 {
	text-align: center;
	margin-top: 0px;
	margin-bottom: 10px;
	font-size: 20px;
	color: #51422f;
}
p {
	color: #51422f;
	margin:5px 0 10px;
}
#principal #meio {
	height: 215px;
}
#principal #rodape{
	text-align: center;
	font-size: 85%;
	margin: 0px;
	padding: 0px;
}
#principal #conteudo {
	height: 200px;
	margin-bottom:5px;
}


#menu2 {
	height:28px;
	margin-bottom:5px;
}
#menu2 > ul,
#menu-principal > ul {
	list-style: none;
	padding: 0;
	vertical-align: baseline;
	line-height: 1;
}
#menu-principal > ul{
	display: block;
	width: 280px;
	margin: 25px auto 40px 95px;
}
	#menu2 > ul{
		float:left;
		width: 350px;
		margin: 0 auto 0 20px;
		z-index:1;
	}
	#menu2 > ul li{
		float:left;
		position: relative;
		margin: 0 10px 0 0;
		padding: 0;
		width: 160px;
	}
	#menu2 > ul ul li{
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		width: 160px;
	}
  #menu-principal > ul li {
	  display: block;
	  position: relative;
	  margin: 0;
	  padding: 0;
	  width: 180px;	
  }
  	#menu2 > ul li a{
		padding: 7px !important;
	}
		#menu2 > ul li a,
		#menu-principal > ul li a {
			text-decoration:none;
			color: #51422f;
			display: block;
			position: relative;
			margin: 0;
			border-top: 1px dotted #fff;
			border-bottom: 1px dotted #d9d9d9;
			padding: 9px;
			background: #DCD0C2;
		}
		#menu2 > ul li:first a,
		#menu-principal > ul li:first a {
			border-top:none;
		}
		#menu2 > ul li a:hover, #menu2 > ul li:hover>a,
		#menu-principal > ul li a:hover, #menu-principal > ul li:hover>a {
			color: #fff;
			text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
			background: #C1AC93;
			border-color: transparent;
		}

		/* The arrow indicating a submenu */
		#menu-principal > ul .has-sub >a::after,
		#menu2 > ul ul .has-sub >a::after {
			content: '';
			position: absolute;
			top: 10px;
			right: 10px;
			width: 0px;
			height: 0px;
			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #e4433c; 
		}
		#menu-principal > ul li>a:hover::after, #menu-principal > ul li:hover>a::after,
		#menu2 > ul ul li>a:hover::after, #menu2 > ul ul li:hover>a::after {
			border-left: 4px solid #fff;
		}

		#menu2 > ul .has-sub >a::after {
			content: '';
			position: absolute;
			top: 10px;
			right: 10px;
			width: 0px;
			height: 0px;
			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-top: 4px solid #e4433c; 
		}
		#menu2 > ul li>a:hover::after, #menu2 > ul li:hover>a::after {
			border-top: 4px solid #fff;
		}
		

		/* THE SUBMENUS */
		#menu2 > ul ul {
			margin-left:0px;
			padding-left:0;
			margin-top:28px;
			z-index:10;
			border-left: 1px dotted #fff;
		}
		#menu2 > ul ul ul {
			margin-left:160px;
			padding-left:0px;
			margin-top:0px;
			border-left: 1px dotted #fff;
			z-index:10;
		}
	
		#menu-principal > ul ul {
			margin-left:180px;
			padding-left: 2px;
		}
		#menu2 > ul ul, #menu-principal > ul ul {
			position: absolute;
			top: -9999px;
			opacity: 0;
			/* The fade effect, created using an opacity transition */
			-webkit-transition: opacity .3s ease-in;
			-moz-transition: opacity .3s ease-in;
			-o-transition: opacity .3s ease-in;
			-ms-transition: opacity .3s ease-in;
		}
		#menu2 > ul ul li{
			width:160px;
		}
			#menu2 > ul ul ul li{
				width:80px;
			}
		#menu-principal > ul ul li{
			width:80px;
		}

		/* Showing the submenu when the user is hovering the parent link */
		#menu2 > ul li:hover>ul,
		#menu-principal > ul li:hover>ul {
			top: 0px;
			opacity: 1;
		}