body {
 font-family: Verdana, Geneva, sans-serif;   /* font-family: helvetica, arial, sans-serif */
 background: #e3e3e3;
 text-align: center;
}

/* MENU */

#nav {
 background: #e5e5e5;
 float: left;
 margin: 0; padding: 0;
 border: 1px solid white;
 border-bottom: none;
}

#nav li a, #nav li {
 float: left;
}

#nav li {
 list-style: none;
 position: relative;
}

#nav li a {
 padding: 0.5em 0.5em;
 text-decoration: none;
 color: white;
 background: #292929; 
 background: -moz-linear-gradient(top, black, #3c3c3c 1px, #E52B50 25px);
 background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#bd632f));
 border-right: 1px solid #3c3c3c;
 border-left: 1px solid #292929;
 border-bottom: 1px solid #232323;
 border-top: 1px solid #545454;
}

#nav li a:hover {
 background: #2a0d65;
 background: -moz-linear-gradient(top, #11032e, #2a0d65);
 background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}


/* Submenu */

.hasChildren {
	position: absolute;
	width: 5px; height: 5px;
	background: black;
	right : 0;
	bottom: 0;
}

#nav li ul {
 display: none;
 position: absolute;
 left: 0;
 top: 100%;
 padding: 0; margin: 0;
}

#nav li:hover > ul {
 display: block;
}

#nav li ul li, #nav li ul li a {
 float: none;
}

#nav li ul li {
 _display: inline; /* for IE6 */
}

#nav li ul li a {
 width: 150px;
 display: block;
}

/* SUBSUB Menu */

#nav li ul li ul {
 display: none;
}

#nav li ul li:hover ul {
 left: 100%;
 top: 0;
}

#nav li ul 

/* DIVIDIR PAGINA*/
#site{
	/* Definimos a largura da página */
	width:1000px;
	/* Definirmos a altura da página*/
	height:700px;
	/* Aqui definiremos a posição que a página ocupará na tela, nesse caso estamos definindo que fique centralizado na tela*/
	/*top : posição de cima */
	margin-top:0;
	/* left: posição de esquerda*/
	margin-left:auto;
	/* bottom : posição de baixo */
	margin-bottom:0;
	/* right : posição de direita */
	margin-right:auto;
	/* Aqui definiremos a cor de fundo da página */
	background-color:#666;
}

#header{
	/*Novamente definimos a largura da div*/
	width:1000px;
	/* altura da div */
	height:100px;
	/* Cor de fundo da div */
	background-color:#00F;
	}
#conteudo{
	/*Novamente definimos a largura da div*/
	width:1000px;
	/* altura da div */
	height:700px;
	/* Cor de fundo da div */
	background-color:#FFFFFF;	
}	
#footer{
	/*Novamente definimos a largura da div*/
	width:1000px;
	/* altura da div */
	height:100px;
	/* Cor de fundo da div */
	background-color:#C3C;
	}

#conteudo-left{
	/*Novamente definimos a largura da div*/
	width:250px;
	/* altura da div */
	height:700px;
	/* O atributo Float é utilizado para fazermos o nosso bloco(div) literalmente flutue e se posicione onde queremos na página, quando escolhemos left, dizemos que esse bloco irá se posicionar na parte esquerda da página */
	float:left;
	/* Cor de fundo da div */
	background-color:#FFFFFF;
	}
#conteudo-centro{
	/*Novamente definimos a largura da div*/
	width:250px;
	/* altura da div */
	height:700px;
	/* O atributo Float é utilizado para fazermos o nosso bloco(div) literalmente flutue e se posicione onde queremos na página, quando escolhemos left, dizemos que esse bloco irá se posicionar na parte esquerda da página */
	float:left;
	/* Cor de fundo da div */
	background-color:#FFFFFF;
	}	
#conteudo-right{
	/*Novamente definimos a largura da div*/
	width:500px;
	/* altura da div */
	height:700px;
	/* Pode parecer meio estranho usarmos o mesmo atributo left para o bloco em que queremos posicionar na direita, mas como sabemos, o CSS é um estilo em cascata, nossa div conteúdo definimos a largura de 1000px e na conteudo-left 500px, 
automaticamente ao definirmos o conteudo-right com 500px e à esquerda também, ele ficou à direita do conteudo-left, pois o máximo que a div filha poderá ter é 1000px, sendo 500+500=1000px */
	float:left;
	/* Cor de fundo da div */
	background-color:#FFFFFF;
	}