@charset "utf-8";
/* CSS Document */


body{
	background:#999;

}


#principal{
	background:#996699;
	width:960px;
	height:630px;
	border-radius:75px;
	/* Para fazer a div ficar centralizada na tela, independente do tamanho da tela, é preciso seguir os passos abaixo, onde as medidas da margin-top e margin-left serão sempre -(a medade da altura e largura) respectivamente. */
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-480px;
	margin-top:-315px;

}



#branco_principal{
	background:#FFFFFF;
	width:336px;
	height:630px;
	border-radius:75px 0px 0px 75px; /* Para definir o valor das esquinas separadamente: 1º- Superior esquerdo, 2º- Superior direito, 3º- Inferior direito, 4º- Inferior esquerdo. */
}



#tomada{
	background:url(../Imagens/tomada.png) no-repeat right;
	float:left;
	width:620px;
	height:630px;
	margin-top:-630px;
	margin-left:340px;
	border-radius:0px 65px 65px 0px; /* Para definir o valor das esquinas separadamente: 1º- Superior esquerdo, 2º- Superior direito, 3º- Inferior direito, 4º- Inferior esquerdo. */
}





#menu_principal{
	clear:both;
	position:relative;
	float:left;
	margin-left:135px;
	margin-top:40px;
	width:320px;
	height:190px;
	border-radius:30px;
	background:#cc3399;
}


#logo{
	width:185px;
	height:180px;
	background:url(../Imagens/logo_menu.png) no-repeat right;
	float:left;
	margin-left:15px;
	margin-top:8px;
}



#branco_menu{
	width:118px;
	height:190px;
	float:right;
	background:#FFF;
	border-radius:0px 30px 30px 0px; /* Para definir o valor das esquinas separadamente: 1º- Superior esquerdo, 2º- Superior direito, 3º- Inferior direito, 4º- Inferior esquerdo. */
}


#texto_conteudo{
	width:260px;
	height:300px;
	float:left;
	margin-top:60px;
	margin-left:40px;
	text-align:justify;
}




/* ESTILOS DO SOBRE*/


#scrollbar1{ 
	padding-right:10px;
	width:260px;
	height:250px;
	overflow:auto; /* barra de rolagem automática */
}


#scrollbar1 p{
	text-indent:15px;
	margin-bottom: 2px; 
	margin-top: 0px;	
	}




::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}







/* ESTILOS DO MENU PRINCIPAL*/
#branco_menu li{
	list-style-type:none;
}



#branco_menu a{
	display:block;
	text-decoration:none;
	float:left;
	margin-top:22px;
	margin-left:22px;
	text-align:center;
	color:#cc3399;
	transition:padding-left .5s; /* Deixa mais suave a transição (0.5 segundos)*/
}



#branco_menu a:hover{
	padding-left:10px;
	text-decoration:none;
	color:#996699;
}

#branco_menu a:active{
	padding-left:10px;
	text-decoration:none;
	color:#663366;
}
/* FIM DOS ESTILOS DO MENU PRINCIPAL*/





/* ESTILOS DO MENU TRABALHO - ESQUERDA*/


#menu_trabalhos{
	width:190px;
	height:220px;
	margin-top:-15px;
	float:left;
	margin-left:-40px;
}



#menu_trabalhos li{
	list-style-type:none;
}


#menu_trabalhos a{
	display:block;
	text-decoration:none;
	float:left;
	margin-top:15px;
	margin-left:10px;
	text-align:center;
	color:#996699;
	transition:padding-left .5s; /* Deixa mais suave a transição (0.5 segundos)*/
}


/*#menu_trabalhos a:visited{
	padding-left:10px;
	text-decoration:none;
	color:#999;
}
*/

#menu_trabalhos a:hover{
	padding-left:10px;
	text-decoration:none;
	color:#cc3399;
}

	
#menu_trabalhos a:active{
	padding-left:10px;
	text-decoration:none;
	background:#996699;
	color:#FFFFFF;
}
/* DEVE SEGUIR SEMPRE ESTA SEQUÊNCIA: 
a:link........define o estilo do link no estado inicial;
a:visited...define o estilo do link visitado;
a:hover.....define o estilo do link quando passa-se o mouse sobre ele;
a:active....define o estilo do link ativo (o que foi "clicado"). */

/* FIM DOS ESTILOS DO MENU TRABALHO - ESQUERDA*/








/* ESTILOS DO CONTATO*/


a img 
{ 
border: none; 
}



#contato{
	width:286px;
	height:82px;
}


#midias{
	width:286px;
	height:240px;
}


#telefone{
	clear:both;
	margin-top:5px;
	float:left;
	width:286px;
	height:55px;
}


#texto_tel{
	float:right;
	width:220px;
	height:55px;
	margin-top:-1px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	line-height:13pt;
	color:#996699;
	
}



#mail{
	clear:both;
	margin-top:5px;
	float:left;
	width:286px;
	height:55px;
}


#texto_mail{
	float:right;
	width:220px;
	height:55px;
	margin-top:8px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	line-height:12pt;
	color:#996699;
	
}



#face{
	clear:both;
	margin-top:5px;
	float:left;
	width:286px;
	height:55px;
}


#texto_face{
	float:right;
	width:220px;
	height:55px;
	margin-top:8px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	line-height:12pt;
	color:#996699;
	
}



#skype{
	clear:both;
	margin-top:5px;
	float:left;
	width:286px;
	height:55px;
}


#texto_skype{
	float:right;
	width:220px;
	height:55px;
	margin-top:8px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	line-height:12pt;
	color:#996699;
	
}


/* FIM DOS ESTILOS DO CONTATO*/








li{
	font-size:15px;
	font-family:Verdana, Geneva, sans-serif;
}



h2{
	font-family:Verdana, Geneva, sans-serif;
	font-size:22px;
	font-weight:normal; /* Para tirar a configuração padrão (bold) do h1, h2, h3, h4... */
	color:#cc3399;
}




h3{
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	font-weight:normal; /* Para tirar a configuração padrão (bold) do h1, h2, h3, h4... */
	color:#996699;
}



p{
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	line-height:14pt;
	color:#996699;
	
}


#direitos{
	position:relative;
	clear:both;
	float:right;
	margin-top:2px;
	margin-right:100px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:8px;
	color:#FFF;
}












/* COMEÇO DOS ESTILOS DAS PÁGINAS DE TRABALHOS*/


#trampos{
	position:absolute;
	width:960px;
	height:630px;
	background:#996699;
	border-radius:75px;
	/* Para fazer a div ficar centralizada na tela, independente do tamanho da tela, é preciso seguir os passos abaixo, onde as medidas da margin-top e margin-left serão sempre -(a medade da altura e largura) respectivamente. */
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-315px;
	margin-left:-480px;
}


#branco_principal_trampos{
	position:fixed;
	background:#FFFFFF;
	height:630px;
	width:780px;
	border-radius:75px 0px 0px 75px; /* Para definir o valor das esquinas separadamente: 1º- Superior esquerdo, 2º- Superior direito, 3º- Inferior direito, 4º- Inferior esquerdo. */
}







#menu_trabalhos_2{
	width:190px;
	height:220px;
	float:right;
	margin-top:110px;
	margin-right:-150px;
}





/* ESTILOS DO MENU TRABALHO - DIREITA*/
#menu_trabalhos_2 li{
	list-style-type:none;
	line-height:10px;
}
	
	

#menu_trabalhos_2 a{
	text-decoration:none;
	display:block;
	float:left;
	margin-top:25px;
	color:#FFFFFF;
	transition:padding-left .5s; /* Deixa mais suave a transição (0.5 segundos)*/
}


/*#menu_trabalhos_2 a:visited{
		text-decoration:none;
		padding-left:10px;
		color:#663366;
}
*/

#menu_trabalhos_2 a:hover{
	text-decoration:none;
	padding-left:10px;
	background:#FFFFFF;
	color:#996699;
}


#menu_trabalhos_2 a:active{
	text-decoration:none;
	padding-left:10px;
	background:#999;
	color:#FFF;
}
/* FIM DOS ESTILOS DO MENU TRABALHO - DIREITA*/




#menu_principal_2{
	position:relative;
	clear:both;
	float:right;
	margin-right:62px;
	margin-top:68px;
	width:320px;
	height:190px;
	border-radius:30px;
	background:#cc3399;
}


#quadro_2 h2{
	float:right;
	margin-top:80px;
	margin-right:25px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:22px;
	color:#FFFFFF;
 	font-weight:normal; /* Para tirar a configuração padrão (bold) do h1, h2, h3, h4... */
}


#direitos_2{
	position:relative;
	clear:both;
	float:right;
	margin-top:44px;
	margin-right:100px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:8px;
	color:#FFF;
}








/** 
 * COMEÇO DO SLIDESHOW
 */
 
#slideshow {
	margin-left:65px; /*  Margem para centralizar os slides, pq se ficar 0, eles vão para a esquerda */
	width:668px;
	height:630px;
	border-radius:75px 0px 0px 75px;

}


#slideshow #slidesContainer {
  width:668px;
  height:630px;
  overflow:auto; /*permitir que a barra de rolagem*/
}


#slideshow #slidesContainer .slide {
  margin-left:0 auto;
  width:956px; /* reduzir por 20 pixels de #slidesContainer para evitar rolagem horizontal */
  height:630px;
}


/** 
 * ESTILOS DOS CONTROLES DO SLIDESHOW
 */
.control {
  display:block;
  width:56px;
  height:630px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}

/* CONTROLES IDENTIDADE */
#leftControl_1 {
  top:0px;
  left:0px;
  background:transparent url(../Imagens/ide_left_control.png) no-repeat 0 0;
}


#rightControl_1 {
  top:0px;
  right:0px;
  background:transparent url(../Imagens/ide_right_control.png) no-repeat 0 0;
}



/* CONTROLES PERSONA */
#leftControl_2 {
  top:0px;
  left:0px;
  background:transparent url(../Imagens/persona_left_control.png) no-repeat 0 0;
}


#rightControl_2 {
  top:0px;
  right:0px;
  background:transparent url(../Imagens/persona_right_control.png) no-repeat 0 0;
}




/* CONTROLES PRODUÇÃO GRÁFICA */
#leftControl_3 {
  top:0px;
  left:0px;
  background:transparent url(../Imagens/grafica_left_control.png) no-repeat 0 0;
}


#rightControl_3 {
  top:0px;
  right:0px;
  background:transparent url(../Imagens/grafica_right_control.png) no-repeat 0 0;
}



/* CONTROLES FOTOGRAFIA */
#leftControl_4 {
  top:0px;
  left:0px;
  background:transparent url(../Imagens/foto_left_control.png) no-repeat 0 0;
}


#rightControl_4 {
  top:0px;
  right:0px;
  background:transparent url(../Imagens/foto_right_control.png) no-repeat 0 0;
}




/* CONTROLES WEB DESIGN */
#leftControl_5 {
  top:0px;
  left:0px;
  background:transparent url(../Imagens/web_left_control.png) no-repeat 0 0;
}


#rightControl_5 {
  top:0px;
  right:0px;
  background:transparent url(../Imagens/web_right_control.png) no-repeat 0 0;
}





/* CONTROLES VESTUÁRIO */
#leftControl_6 {
  top:0px;
  left:0px;
  background:transparent url(../Imagens/vestuario_left_control.png) no-repeat 0 0;
}


#rightControl_6 {
  top:0px;
  right:0px;
  background:transparent url(../Imagens/vestuario_right_control.png) no-repeat 0 0;
}