@charset "utf-8";

/****************************************************************** 
		Folha de estilo para o site,                        		
		da agencia Expert Comunicacao                      			
		autor: Everton                                     				
		data: 01/2009                                       		
		everton.silva@expert.com.br                         											
*******************************************************************/

@font-face{
    font-family: "Snell Black BT";
    src: url(../fonts/Snell Black BT.ttf) format("truetype");
    src: local("Snell Black BT"), url(../fonts/Snell_Black_BT.eof), url(../fonts/Snell_Black_BT.svg#SnellBT-Black) format('svg'), url(../fonts/Snell_Black_BT.woff) format('woff');
}


/***** minhas classes ******************************************/
.center{ margin-left: auto; margin-right: auto;}
.ocultar{ display: none;}
.titulo{ font-family: Lucida Handwriting; font-size: 14pt;}
.linkVoltar{ 
	font-size: 7pt;
	font-weight: bold;
	text-decoration: none;
	color: #666;
}
.linkVoltar:before{ content: url(../img/setaVoltarPort.gif);}
.linkVoltar span{ text-transform: uppercase;}

/***** index ************************************************/
body{
    text-align: center;
    background: #006cac;
    font-family: MyriadPro arial, sans-serif;
    color: #999;
}

img{ border: none;}

div#container{
  border: #777 1px solid;
  width: 500px;
  height: 550px;
  background: #fff url(../img/bg-container.jpg) no-repeat top;
  text-align: center;
  -moz-box-shadow: 0 0 40px  #747280;
  -webkit-box-shadow: 0 0 40px  #747280;
  box-shadow: 0 0 40px #747280;
  overflow: hidden;
}

div#saudacao{ margin-top: 21%;}

div#header{ height: 100px; margin: 12px 0 30px 0;}

div#conteudoCarregado{ margin-top: 30px;}

div#expertLogo{
  background: url(../img/logoExpert.gif) no-repeat center;
  width: 144px;
  height: 67px;
  margin-bottom: 16px;
  cursor: pointer;
}

ul#navMenu{ list-style-type: none;}

ul#navMenu li{
   float: left;
   padding: 0 5px;
   width: 100px;
}

ul#navMenu li a{
	width: 100px;
	display: block;
	text-decoration: none;
	color: #999;
}

ul#navMenu li a:hover{ background: #999; color: #fff;}

h1{
  color: #149bc6;
  margin-bottom: 13%;
  font-family: "Snell Black BT";

  }

h4 a{
  text-decoration: none;
  color: #149bc6;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#voltarEm, #voltarEx, #voltarC, #voltarPf{ position: relative; left: 192px;}
#voltarEm{ top: 60px;}
#voltarEx{ top: 65px;}
#voltarPf{ top: 123px;}

/******* dock ***************************************************************/

div#rodape{
    width: 950px;
    height: 100%;
    position: relative;
    left: 47px;
    bottom: 30px;
    margin-bottom: 30px;
}

div#rodape div{ float: left; }

div#rodape img{ padding: 0 10px; }
div#rodape > div{ float: left; }
div#rodape .imgInt{ position: relative; top: 44px;}
div#rodape div#wp{ position: relative; bottom: 10px; left: 9px;}
div#rodape div#flickr{ position: relative; top: 51px;}
div#rodape div#orkut{ position: relative; top: 49px;}
div#rodape div#youtube{ position: relative; top: 50px;}
div#rodape div#feeds{ position: relative; top: 52px; }
div#rodape div#twitter{ position: relative; top: 39px;}
div#rodape div#delicious{ position: relative; top: 52px;}
div#rodape div#mail{ position: relative; top: 15px;}


/**** home ************************************************************/
div#home p{
    width: 300px;
    height: 125px;
    position: relative;
    bottom: 219px;
    left: 19.9%;
    text-align: justify;
    line-height: 1.3em;
    }

.negrito{ font-weight: bold; color: #888;}
.italico{ font-style: oblique}
.tam1{ font-size: 9pt}
.tam2{ font-size: 8pt}
.tam3{ font-size: 7pt}
span#word8{ font-size: 11pt;}
span#word11{ font-size: 12pt;}
span#word14{ vertical-align: 4px;}
span#word15{ font-size: 24pt; vertical-align: -10px;}


/**** empresa ************************************************************/
.texto-rolagem p{
  text-align: justify;
  font-size: 10pt;
  width: 390px;  
}

.texto-rolagem p a{ color: #5e5399; }

/**** portfolio ************************************************************/
.coluna{ float: left; padding: 10px; margin: 0 3px; text-indent: -9999px; position: relative;}
.linha{ clear: both;}

div#capaPortfolio{ position: relative; left: 32px;}
/*
width:102px; height:80px; background: url(../img/marcasPb/villaCriar.png) no-repeat;
width:100px; height:90px; background: url(../img/marcasPb/expertTecnologia.png) no-repeat;   
width:111px; height:36px; background: url(../img/marcasPb/unifacsInterativa.png) no-repeat; 
*/
a#item1-1{ width:120px; height:120px; background: url(../img/marcasPb/KSC.gif) no-repeat;}
a#item1-2{ width:132px; height:72px; background: url(../img/marcasPb/karisHomeEnglish.png) no-repeat; top: 12px;}
a#item1-3{ width:132px; height:62px; background: url(../img/marcasPb/teccomp.png) no-repeat; top: 14px;}
a#item2-1{ width:126px; height:42px; background: url(../img/marcasPb/quantumLegal.png) no-repeat; top: 16px;}
a#item2-2{ width:150px; height:83px; background: url(../img/marcasPb/expertSolutions.png) no-repeat;}
a#item2-3{ width:132px; height:62px; background: url(../img/marcasPb/korpusMotel.png) no-repeat; top: 17px;}
/*
a#item3-1{}
a#item3-2{}
a#item3-3{}
*/
a#item1-1:hover{ background: url(../img/marcasColor/KSC.gif) no-repeat;}
a#item1-2:hover{ background: url(../img/marcasColor/karisHomeEnglish.png) no-repeat;}
a#item1-3:hover{ background: url(../img/marcasColor/teccomp.png) no-repeat;}
a#item2-1:hover{ background: url(../img/marcasColor/quantumLegal.png) no-repeat;}
a#item2-2:hover{ background: url(../img/marcasColor/expertSolutions.png) no-repeat;}
a#item2-3:hover{ background: url(../img/marcasColor/korpusMotel.png) no-repeat;}
/*
a#item3-1:hover{ background: url(../img/marcasColor/XXX.png) no-repeat;}
a#item3-2:hover{ background: url(../img/marcasColor/XXX.png) no-repeat;}
a#item3-3:hover{ background: url(../img/marcasColor/XXX.png) no-repeat;}
*/

div#info{
   height: 150px;
   position: relative;
   text-align: left;
   color: #777;
   }

div#info a#voltarPort{ 
	position: relative;
	bottom: 34px;
	left: 378px;	
	}  

div#info dl{
      background: #ddd;
      height: 145px;
      padding-top: 10px;
      font-size: 10pt;	
}

div#info dl dt{
     float: left;
     text-align: right;
     padding-left: 23px;
     font-weight: bold;
}

div#info dl dd{
      width: 180px;
      margin-bottom: 10px;
      margin-left: 100px;
	width: 350px;
}

div#info dl dd a{ color: #0059ca;}
div#info dl dd a:hover{ color: #333;}


/* Cases */
div.portfolioImg{ border: none; width: 100%; overflow-y: hidden; overflow-x: scroll;}

/* a regra abaixo visa apenas corrigir o posicionamento da div info */
div#container > div#info{ position: relative; bottom: 29px;}


/***** Expertianos *********************************************/
p.expertianos{ width: 370px; font-size: 9pt; position: relative; margin: 5px 33px;}
/*#carExpertianos h3{ font-size: 10pt; text-align: left; margin-left: 33px;}*/
#carExpertianos #slideItemsWrapper {clear:both; position:relative; width:469px; overflow:hidden;}
#carExpertianos #slideItems { width:3220px; position:relative; margin: 0; padding: 0; list-style-type: none;}
#carExpertianos #slideItems li { display:block; float:left; position:relative; width:/*815*/400px; height:320px; overflow:hidden; padding:0 25px;}



/**** Contato *************************************************/

#formulario { 
	width: 400px;
	height: 350px;
	text-align: left;
	font-size: 10pt;
	margin-left: 65px;
	font-weight: bold;
	}

#formulario dl{ position: relative; left: 40px;}
	
#formulario dt{ margin-bottom: 5px;}
#formulario dd{ margin: 0 0 9px 0;}


#formulario input[type=text], #formulario textarea{ 
	border: #ddd 1px solid;
	width: 290px;
	color: #595959;
	text-indent: 15px;
	}
	
#formulario input[type=text]{ height: 17px;}
#formulario textarea{ height: 150px;}
#formulario input:focus, #formulario textarea:focus{ background: #cbdef8}
#formulario input[type=submit]{ background: none; position: relative; left: 276px; color: #666;}

p#msgErro{ font-size: 8pt; position: relative; bottom: 75px; left: 105px; text-align: left; width: 200px; color: #f00;}

/*** rolagem de conteudo ****************************************/

#slideLinks{
    width: 563px;
    font-size: 8pt;
    position: relative;
    list-style-type: none;
    top: -40px;
    left: 24%;
}

#slideLinks li{
	float: left;
	padding-right: 15px;
	}

#slideLinks li:focus{
    background: red;
	}

#slideLinks a{
	color: #0090d6;
	text-decoration: none;
	display: block !important;
	}

#slideItemsWrapper {clear:both; position:relative; width:469px; overflow:hidden;}
#slideItems { width:2054px; position:relative; margin: 0; padding: 0; list-style-type: none;}
#slideItems li { display:block; float:left; position:relative; width:/*815*/405px; height:325px; overflow:hidden; padding:0 25px 0 30px;}

a#scrollD, a#scrollE, #slide-previous-link, a#slide-next-link { text-decoration:none; display:block; width:136px; height:108px; position: absolute; /*overflow:hidden;*/ top: 206px;}
a#scrollE, a#slide-previous-link { left:12%; background: url(../img/setaEsq1.png) no-repeat;}
a#scrollE:hover, a#slide-previous-link:hover{ background: url(../img/setaEsq2.gif) no-repeat;}
a#scrollD, a#slide-next-link { left:75%; background: url(../img/setaDir1.png) no-repeat;}
a#scrollD:hover, a#slide-next-link:hover { background: url(../img/setaDir2.gif) no-repeat;}