/* CSS Document */
* {
	margin:0; /*** para tirar o padrão de margem dos navegadores em relação a margem do HTML ***/
	padding:0; /*** ajuda a tirar o padrão HTML para fazermos um novo em CSS, o padding e o margin deixam todos os elementos colados ***/
}

hr {display:none;} /*** tira a linha que separa os elementos no HTML cru ***/
img {border:none;} /*** Tira a borda das imagens ***/

body {
		background:#000000;
}

#geral {
	width:900px;
	margin:0 auto; /*** o auto deixa centralizado ***/
}

/*** CABECALHO ***/


#cabecalho h1 {
	background:#000000;  /*** 696356 ***/
	margin:0 0; /*** distancia vertical do topo da tela ***/
	float:left;
	font-size:9px;
	font:trebuchet ms, sans-serif; 
	color:#FFFFFF;
	width:220px;
	height:80px;
}

/*** googlepeq ***/
#googlepeq {
		background:#000000;
        margin:4px 70px 14px 100px;
		width:468px;
		height:75px;
		float:left;
		}






/*** WEBRADIO ***/

#colunaesq {
		background:#696356;
		width:220px;
		height:760px;
		float:left;
		margin:0 0;
		top:0px; 
		left:0px;
		
}

#colunaesq #menu {
		background:#FF9900;
		width:220px;
		height:160px; /*** cada item do menu a mais coloca-se mais 17 px no height ***/
		float:left;
        /*** tinha um float aqui pra deixar o menu a esquerda ou direita mas acertei ele sem o float ***/
		margin:1px 0 0; /*** primeiro px trouxe o menu pra baixo 2px,, segundo px movimenta o menu para direita ***/
		padding:15px 0 15px;
		
		
}

#colunaesq #menu ul li {
	
	list-style:none; /*** tita os bullets as bolinhas ***/
	  /***   display:inline;  deixa o menu horizontal ***/
	
	
}

#colunaesq #menu ul li a {
border:none;
font:12px Verdana, Arial, tahoma, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration:none;
padding:3px 9px 3px;  /*** o primeiro px é o tamanho q terá acima da palavra link,, o segundo px está definindo a distancia entre os topicos do menu,, o terceiro px é o tamanho abaixo da palavra link (o primeiro e o terceiro definem otamanho vertical da area do link   na verdade deu certo no #cabecalho #menu  ***/
                 /*** border-bottom:2px solid #99CC00; linha embaixo do link ***/

}

#colunaesq #menu ul li a em{
	border:none;
	font:9px Verdana, Arial, tahoma, Helvetica, sans-serif;
	color:#FF0000;
	text-decoration:none;
	}

#colunaesq #menu ul li a:hover {
border:none;
background-color:#ffff00;
color:#000000;
padding:3px 9px 3px;
}
                       /*** no a.hover deixa uma linha embaixo do link - border-bottom:3px solid #EA0000;  ***/	
/*** WEBRADIO ***/

#webradio {
		background:#696356;
		width:220px;
		height:100px;
		float:left;
		margin:5px 0 0;
		top:0px; 
		left:0px;
		
}

#colunaesq #pagseg {
		background:#ffffff;
		width:218px;
		height:42px;
		float:left;
		margin:3px 2px 1px 2px;

}

#colunaesq #pagseg input {
		float:left;
		margin:6px 3px 0 5px;
		}




/*** ENQUETE ***/

#enquete {
		background:#696356;
		width:220px;
		height:235px;
		float:left;
		margin:9px 0 0;
		top:0px; 
		left:0px;
		
}

#colunacentro {
		background:#FFFFFF; /*** #696356 ***/
		width:530px;
		height:760px;
		float:left;
		margin:0 0;
		top:0px; 
		left:0px;
		
}

#colunacentro #noticiadestaque {
		margin:1px 5px 27px 16px;
		background:#FFFFFF;
}

#colunacentro #noticiadestaque img {
		width:150px;
		height:110px;
		float:left;
		margin:10px 9px 1px 7px;
}

#colunacentro #noticiadestaque h2 {
		font:17px trebuchet ms, arial, tahoma, sans-serif;
		color:#FF0000;
		text-transform: uppercase;
}


#colunacentro #noticiadestaque h3 {
		font:14px trebuchet ms, arial, tahoma, sans-serif;
		color:#FF0000;
		text-transform: uppercase;
}

#colunacentro #noticiadestaque h4 {
		font:13px verdana, trebuchet ms, arial, tahoma, sans-serif;
		color:#000000;
}

#colunacentro #noticiadestaque h5 {
		font:13px verdana, trebuchet ms, arial, tahoma, sans-serif;
		color:#000000;
		margin-left:150px;
}

#colunacentro #noticiadestaque h5 a strong {
		font:20px verdana, trebuchet ms, arial, tahoma, Helvetica, sans-serif;
		color:#FF0000;
}

		

#colunacentro #principaisnoticias div {
		width:215px;
		float:left;
		padding-left:8px;
		margin:15px 21px 3px 14px;
		background:#FFFFFF;
		
}


#colunacentro #principaisnoticias div img {
		width:60px;
		height:60px;
		float:left;
		margin:10px 2px 1px 0px;

}

#colunacentro #principaisnoticias div h3 {
		font:15px trebuchet ms, arial, tahoma, sans-serif;
		color:#FF0000;
		text-transform: uppercase;
}

#colunacentro #principaisnoticias div h4 {
		font:13px verdana, trebuchet ms, arial, tahoma, sans-serif;
		color:#000000;
}


#colunacentro #maladireta {
		float:left;
		margin:15px 0 0;
		width:220px;
		height:120px;
		}

#colunacentro img {
		float:right;
		width:70px;
		height:85px;
		margin:35px 25px 0 1px;
		}

/*** FLASH LIGHT BOX ***/

#flashlightbox {
		background:#FFFFFF; /*** #696356 ***/
		width:524px;
		height:302px;
		float:left;
		margin:5px 0;
		top:0px; 
		left:0px;
		
}

#flashlightbox object {
		background:#696300;
		width:390px;
		height:290px;
		float:left;
		margin:5px 0 0 52px;
		top:0px; 
		left:0px;
		
}




/*** VIDEO ***/
	
#video {
			float:left;
			width:435px;
			height:360px;
			margin:1px 37px;
			}

#colunadir  {
		background:#696356;
		width:150px;
		height:760px;
		float:left;
		margin:0 0;
		
		}
#google {
		width:120px;
		height:600px;
		padding-left:15px;
		float:left;
		} 	
#colunadir div {
		width:120px; /*** tamanho horizontal total da div, largura da div ***/
		float:left;
		margin:5px 16px 2px 0; /***  o primeiro = espaçoacima, o div desce um pouco 10px,, o segundo = margem horizontal entre eles,, o terceiro = margem entre o proprio div e o de baixo, ele desce o elemento abaixo, quanto maior o numero de px mais baixo ficará o rodape  ***/
		padding-left:15px;
}

/*** ENTRADASNOVA ***/

#entradasnova {
		background:#990000;
		float:left;
		margin:0 0;
		width:900px;
		height:160px;
		}
#entradasnova div {
		width:207px; /*** tamanho horizontal total da div, largura da div ***/
		float:left;
		padding-left:8px;
		margin:15px 7px 2px 0; /***  o primeiro = espaçoacima, o div desce um pouco 10px,, o segundo = margem horizontal entre eles,, o terceiro = margem entre o proprio div e o de baixo, ele desce o elemento abaixo, quanto maior o numero de px mais baixo ficará o rodape  ***/
		
}

#entradasnova div h3 {
		font:15px trebuchet ms, arial, tahoma, sans-serif;
		color:#FFFFFF;
		text-transform: uppercase;
}

#entradasnova div h4 {
		font:13px verdana, trebuchet ms, arial, tahoma, sans-serif;
		color:#FFFFFF;
}

#entradasnova div a {
		color:#FFFF00;  /*** FF6600 ***/
}



/*** DESTAQUE ***/

#destaque {
	margin:0 0 -5px; /*** primeiro px define a distancia entre o cabecalho e o destaque bom trabalhar em conjunto com o padding do 'cabecalho menu ul li a' primeiro e terceiro px ***/
	color:#000;
	clear:both; /*** ignora o float dos elementos acima dele ***/
	height:240px;
	background: url(../images/destaquemenor1.jpg) no-repeat;
	padding:5px; /*** interessante, verificar mais ***/
	position:relative; /*** Isso é  para o link "matricule-se no curso de tableless" se posicionar absolutamente em relação a div destaque, veja #destaque a.linkdestaque ***/
}

#destaque h2 {
	color:#000;
	font:bold 20px Trebuchet Ms, Arial, Tahoma, sans-serif;
	text-transform: uppercase;
	margin:0 4px 20px;  /*** o primeiro px abaixa o h2 "radio web ilha",, o segundo px movimenta ele da esquerda pra direita,, o terceiro px abaixou o "p"  ***/
}

#destaque p {
		color:#000;
		font:14px verdana, arial, tahoma;
		margin:0 5px 10px;
}

#destaque li {
		color:#000;
		font:14px verdana, arial, tahoma;
		margin:0 30px 3px;  /*** segundo px traz pra direita a lista,, terceiro px junta verticalmente as listas ***/
}



#destaque a.linkdestaque {
	font:17px verdana, arial, tahoma;
	color:#ff0000;
	text-decoration:none;
	background:url(../images/setadireita.gif) no-repeat right center;
	margin:0 40px 0;
	padding:0 30px 0 0; /*** o segundo px leva a setinha pra direita quto maior o px ***/
	position:absolute;  /***  Para se posicionar absolutamente em relação ao div destaque e não ao body  ***/
	bottom:27px; /*** relativo a posição do linkdestaque em relação a base da div destaque, qto maior o px mais alto fica ***/
}

#destaque a.linkdestaque2 {
	font:17px verdana, arial, tahoma;
	color:#ff0000;
	text-decoration:none;
	background:url(../images/setadireita.gif) no-repeat right center;
	margin:0 40px 0;
	padding:0 30px 0 0; /*** o segundo px leva a setinha pra direita quto maior o px ***/
	position:absolute;  /***  Para se posicionar absolutamente em relação ao div destaque e não ao body  ***/
	bottom:43px; /*** relativo a posição do linkdestaque em relação a base da div destaque, qto maior o px mais alto fica ***/
}

#destaque a.linkdestaque3 {
	font:17px verdana, arial, tahoma;
	color:#ff0000;
	text-decoration:none;
	background:url(../images/setadireita.gif) no-repeat right center;
	margin:0 40px 0;
	padding:0 30px 0 0; /*** o segundo px leva a setinha pra direita quto maior o px ***/
	position:absolute;  /***  Para se posicionar absolutamente em relação ao div destaque e não ao body  ***/
	bottom:20px; /*** relativo a posição do linkdestaque em relação a base da div destaque, qto maior o px mais alto fica ***/
}

#destaque a.linkdestaque4 {
	font:17px verdana, arial, tahoma;
	color:#ff0000;
	text-decoration:none;
	background:url(../images/setadireita.gif) no-repeat right center;
	margin:0 40px 0;
	padding:0 30px 0 0; /*** o segundo px leva a setinha pra direita quto maior o px ***/
	position:absolute;  /***  Para se posicionar absolutamente em relação ao div destaque e não ao body  ***/
	bottom:80px; /*** relativo a posição do linkdestaque em relação a base da div destaque, qto maior o px mais alto fica ***/
}

#destaque a.linkdestaque5 {
	font:17px verdana, arial, tahoma;
	color:#ff0000;
	text-decoration:none;
	background:url(../images/setadireita.gif) no-repeat right center;
	margin:0 40px 0;
	padding:0 30px 0 0; /*** o segundo px leva a setinha pra direita quto maior o px ***/
	position:absolute;  /***  Para se posicionar absolutamente em relação ao div destaque e não ao body  ***/
	bottom:75px 60px; /*** relativo a posição do linkdestaque em relação a base da div destaque, qto maior o px mais alto fica ***/
}

/*** DESTAQUE2 ***/

#destaque2 {
	margin:0 0 -5px; /*** primeiro px define a distancia entre o cabecalho e o destaque bom trabalhar em conjunto com o padding do 'cabecalho menu ul li a' primeiro e terceiro px ***/
	color:#000;
	clear:both; /*** ignora o float dos elementos acima dele ***/
	height:240px;
	background: url(../images/destaquemenor1.jpg) no-repeat;
	padding:5px; /*** interessante, verificar mais ***/
	position:relative; /*** Isso é  para o link "matricule-se no curso de tableless" se posicionar absolutamente em relação a div destaque, veja #destaque a.linkdestaque ***/
}

#destaque2 h2 {
	color:#000;
	font:bold 20px Trebuchet Ms, Arial, Tahoma, sans-serif;
	text-transform: uppercase;
	margin:0 4px 20px;  /*** o primeiro px abaixa o h2 "radio web ilha",, o segundo px movimenta ele da esquerda pra direita,, o terceiro px abaixou o "p"  ***/
}

#destaque2 p {
		color:#000;
		font:14px verdana, arial, tahoma;
		margin:0 5px 10px;
}

#destaque2 li {
		color:#000;
		font:14px verdana, arial, tahoma;
		margin:0 30px 3px;  /*** segundo px traz pra direita a lista,, terceiro px junta verticalmente as listas ***/
}



#destaque2 a.linkdestaque {
	font:17px verdana, arial, tahoma;
	color:#ff0000;
	text-decoration:none;
	background:url(../images/setadireita.gif) no-repeat right center;
	margin:0 40px 0;
	padding:0 30px 0 0; /*** o segundo px leva a setinha pra direita quto maior o px ***/
	position:absolute;  /***  Para se posicionar absolutamente em relação ao div destaque e não ao body  ***/
	bottom:27px; /*** relativo a posição do linkdestaque em relação a base da div destaque, qto maior o px mais alto fica ***/
}

/*** FRASES 
#frases {
		width:900px;
		height:25px;
		background-color:#000;
		margin:0 0;
} ***/




#webradio h1{
		font:9px Verdana, Arial, Helvetica, sans-serif;
		}
		
/*** Banner1 ***/
#banner1 {
		background:#696356;
		width:550px;
		height:160px;
		float:left;
		margin:2px 0 0;
		 /*** ignora os floats acima ***/
}	



			
/*** LOGIN  ***/

#login {
		background:#696356;
		width:380px;
		height:160px;
		float:left;
		margin:2px 0 0;
		 /*** ignora os floats acima ***/
}	

#login form {
		float:right;
		width:360px;
		margin:15px 0 0; /*** desce um pouco ***/
}

#login form fieldset {border:none;} /*** perde a borda ***/
#login form fieldset legend {
		font:bold 14px verdana, arial, tahoma;
		color:#fff;
}
#login form fieldset label {
		display:block;
		width:266px;
		font:12px verdana, arial, tahoma;
		color:#white;
		text-align:right; /*** alinhou o campo branco pra direita ***/
		padding:0 0 3px; /*** espaço entre os campos ***/
		float:left; /*** faz o botao entrar ficar do lado do form, sem ele o botão fica embaixo ***/
}
#login form fieldset label a {
		color:white;
		text-decoration:none;}
		
		
#login form fieldset label input {
		border:1px black;
		width:200px; /*** largura do campo branco ***/
		padding:5px; /*** tamanho vertical do campo branco, altura ***/
}

#login form fieldset input.botentrar {
		float:left;
}
		

#login a.linklogin {	
		width:242px;
		height:40px;
		display:block;
		position:absolute;
		top:43px;
		left:144px;
		text-indent:-99999px; /*** tirar o texto ***/
		overflow:hidden;
		outline:none;
}	










/*** googlepeq ***/
#entradas googlepeq {
		width:468px;
		height:60px;
		}
		





/*** NOTICIAS ***/

#noticias {
		width:900px;
		height:430px;
		margin:-10px 0 20px;
		background:url(../images/bgnoticias.jpg) repeat;
		float:left;
		 /*** tinhaum display inline ***/
		}
#not1 div {
		display:inline;
		width:200px;
		height:30px;
		}
#not1 {

			width:880px;
			height:9px;
			float:left;
			margin:3px 4px 3px 0;
			
			}
#not1 h1{
		font:24px trebuchet ms, verdana, sans-serif;
	    margin:5px 14px;  /*** o primeiro px abaixa o h2 "radio web ilha",, o segundo px movimenta ele da esquerda pra direita,, o terceiro px abaixou o "p"  ***/
		}
		
#not1 h2{
		font:17px trebuchet ms, verdana, sans-serif;
		margin:0px 14px;
		}
		

		


#not2txt {

			width:890px;
			float:left;
			margin:40px 10px 3px 0;
			
			}
#not2txt img {
float:left;
margin:3px 7px 3px;
}

#not2txt p{
		font:14px trebuchet ms, verdana, sans-serif;
	    margin:10px 15px;  /*** o primeiro px abaixa o h2 "radio web ilha",, o segundo px movimenta ele da esquerda pra direita,, o terceiro px abaixou o "p"  ***/
		}
#not2txt strong{
		font:bold 14px trebuchet ms, verdana, sans-serif;
		}
#not2txt a strong{
		font:bold 15px trebuchet ms, verdana, sans-serif;
		color:#FF0000;
		}	
		

/*** google só noticias sem intrumentos 

#google {
		margin:450px 920px 0px;
		float:right;
		position:absolute;
		} 

 google quando for noticias e instrumentos 
 #google {
		margin:-1px 780px 0px;
		float:right;
		position:absolute;
		} 	***/
		

#portuguesa {
		width:770px;
		height:600px;
		margin:0px 0 20px;
		background:url(../images/bgportuguesa.jpg) no-repeat;
		float:left;
		 
		}


#port1 h1{
		font:24px trebuchet ms, verdana, sans-serif;
	    margin:5px 10px;  
		}
		
#port1 h2{
		font:17px trebuchet ms, verdana, sans-serif;
		margin:0px 14px;
		}

		
#port2txt {

			width:770px;
			height:600px;
			float:left;
			margin:0px 39px 80px 0;
			
			}
#port2txt p{
		font:14px trebuchet ms, verdana, sans-serif;
		margin:0px 10px;
	      
		}
#port2txt img {
		float:left;
		width:163px;
		height:110px;
		margin:12px 14px;
		}
#port2txt h3{
		font:14px trebuchet ms, verdana, sans-serif;
		margin:0px 10px;
	      
		}
#port2txt strong{
		font:14px trebuchet ms, verdana, sans-serif;
		}
#port2txt a strong{
		font:bold 15px trebuchet ms, verdana, sans-serif;
		color:#FF0000;
		}	


		
/*** google quando for noticias e instrumentos ***/

		
/*** banner flash ***/


#menuflash {
			margin:20px 0;
			width:900px;
			}


/*** RODAPE ***/


#rodape {
	margin:0 0;
	width:888px;
	float:left;
	border-top:2px dotted #000;
	padding:4px;
	
	
	}

#rodape a {
	color:#FFF;
	text-decoration: none;
}

#rodape address {
	color:#FFF;
	float:left;
	font:11px verdana, arial, tahoma, sans-serif;
}

#minimenu {
	float:right;
	margin:0 0 -999px;
}

#minimenu li {
	list-style:none;
	font:12px verdana;
	float:right;
	padding:0 7px; /*** distancia entre os li ***/
}

strong.tel, strong.email {
		float:right;
		 /*** ignora os floats right dos elementos, como todos estão right incluindo ele, serve como quebra de linha, esses strongs vão para baixo do minimenu, se tirar esse clear ele fica do lado a esquerda ***/
		font:16px verdana, arial, tahoma;
		color:white;
		margin:13px 0;
		
}

/***
#peca2 {
		width:380px;
		height:160px;
		float:left;
		margin:2px 0 0;
		
}	

#peca2 form {
		float:right;
		width:360px;
		margin:15px 0 0; 
}

#peca2 form fieldset {border:none;}
#peca2 form fieldset legend {
		font:bold 14px verdana, arial, tahoma;
		color:#000;
}
#peca2 form fieldset label {
		display:block;
		width:266px;
		font:12px verdana, arial, tahoma;
		color:#000;
		text-align:right; 
		padding:0 0 3px; 
		float:left; 
}
		
		
#peca2 form fieldset label input {
		border:1px black;
		width:200px; 
		padding:5px; 
}

#peca2 form fieldset input.botentrar {
		float:left;
}
***/

#cadastre2 {
		width:430px;
		height:160px;
		float:left;
		margin:-13px 0 0;
		 /*** ignora os floats acima ***/
}	

#cadastre2 form {
		float:right;
		width:425px;
		 /*** desce um pouco era margin 5px 0 0  ***/
}

#cadastre2 form fieldset {border:none;} /*** perde a borda ***/
#cadastre2 form fieldset legend {
		font:bold 14px verdana, arial, tahoma;
		color:#000;
}
#cadastre2 form fieldset label {
		display:block;
		width:296px;
		font:12px verdana, arial, tahoma;
		color:#000;
		text-align:left; /*** alinhou o campo branco pra direita ***/
		padding:0 0 1px; /*** espaço entre os campos ***/
		float:left;
		 /*** faz o botao entrar ficar do lado do form, sem ele o botão fica embaixo é um float left ***/
}
		
		
#cadastre2 form fieldset label input {
		border:1px black;
		width:250px; /*** largura do campo branco ***/
		padding:2px; /*** tamanho vertical do campo branco, altura ***/
}

#cadastre2 form fieldset input.btn {
		float:right;
		margin:-24px 70px;
		
}

#cadastre2 form fieldset input.btn2 {
		float:right;
		margin:-24px 0px;
		
}

#cadastre3 {
		width:430px;
		height:160px;
		float:left;
		margin:-13px 0 0;
		 /*** ignora os floats acima ***/
}	

#cadastre3 form {
		float:right;
		width:425px;
		 /*** desce um pouco era margin 5px 0 0  ***/
}

#cadastre3 form fieldset {border:none;} /*** perde a borda ***/
#cadastre3 form fieldset legend {
		font:bold 14px verdana, arial, tahoma;
		color:#000;
}
#cadastre3 form fieldset label {
		display:block;
		width:296px;
		font:12px verdana, arial, tahoma;
		color:#000;
		text-align:left; /*** alinhou o campo branco pra direita ***/
		padding:0 0 1px; /*** espaço entre os campos ***/
		 /*** faz o botao entrar ficar do lado do form, sem ele o botão fica embaixo é um float left ***/
}
		
		
#cadastre3 form fieldset label input {
		border:1px black;
		width:250px; /*** largura do campo branco ***/
		padding:2px; /*** tamanho vertical do campo branco, altura ***/
}

#cadastre3 form fieldset input.btn {
		float:left;
		margin:10px 20px;
		
}



#contato {
		width:430px;
		height:160px;
		float:left;
		margin:-8px 0 0;
		 /*** ignora os floats acima ***/
}	

#contato h2 {
	color:#000;
	font:bold 20px Trebuchet Ms, Arial, Tahoma, sans-serif;
	text-transform: uppercase;
	margin:5px 4px 14px;  /*** o primeiro px abaixa o h2 "radio web ilha",, o segundo px movimenta ele da esquerda pra direita,, o terceiro px abaixou o "p"  ***/
}

#contato form {
		float:right;
		width:425px;
		
		 /*** desce um pouco era margin 5px 0 0  ***/
}

#contato form fieldset {border:none;} /*** perde a borda ***/
#contato form fieldset legend {
		font:bold 14px verdana, arial, tahoma;
		color:#000;
}
#contato form fieldset label {
		display:block;
		width:296px;
		font:12px verdana, arial, tahoma;
		color:#000;
		text-align:left; /*** alinhou o campo branco pra direita ***/
		padding:0 0 1px; /*** espaço entre os campos ***/
		 /*** faz o botao entrar ficar do lado do form, sem ele o botão fica embaixo é um float left ***/
}
		
		
#contato form fieldset label input {
		border:1px black;
		width:250px; /*** largura do campo branco ***/
		padding:2px; /*** tamanho vertical do campo branco, altura ***/
}

#contato form fieldset input.btn {
		float:left;
		margin:0 30px;
		
}

#colunavideos {
	width:800px;
	margin:0 auto; /*** o auto deixa centralizado ***/
}