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

@import url(http://fonts.googleapis.com/css?family=Della+Respira);

body{
	margin: 0;
	padding: 0;
	background: url(../images/background.jpg);
}

#top{
	top: 0;
	left: 0;
	right: 0;
	height: 112px;
	position: fixed;
	background: url(../images/topbar.png) repeat-x;
}

#nav{
	padding: 0;
	border: none;
	width: 811px;
	margin: 0 auto;
	list-style: none;
}

#nav li{
	float: left;
}

#nav a{
	width: 180px;
	height: 71px;
	color: #7E8480;
	display: block;
	padding-top: 30px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font: normal 20px 'Della Respira', arial;
}

#nav a:hover{
	border-bottom: 10px solid #09C;
}

#nav li.selected a{
	color: #8DD1E8;
	background: url(../images/backbtn.jpg) repeat-x;
}

#nav li.selected a:hover{
	border-bottom: none;
}

#content {
	width: 980px;
	margin: 0 auto;
	padding-top: 120px;
}

#sobre{
	height: 950px;
	color: #565759;
	font: normal 20px tahoma, arial;
}

#sobre .logo{
	padding-top: 3%;
	padding-bottom: 5%;
	
}

#sobre p{
	width: 670px;
	text-align: justify;
}

#produtos{
	overflow: hidden;
	min-height: 1200px;
}

#coluna{
	float: left;
	width: 288px;
	margin: 19px;
}

#box{
	width: 288px;
	float: left;
	margin-bottom: 20px;
	/*box-shadow:0px 10px 10px #8C8C8C;*/
	-moz-box-shadow:0px 10px 10px #8C8C8C;
	-webkit-box-shadow:0px 10px 10px, #8C8C8C;
	/*behavior: url(../ie-css3.htc);*/
}

#box .color{
	text-transform: uppercase;
}

#box .color a{
	text-decoration: none;
	font: normal 20px 'Della Respira', arial;	
}

#box span{
	float: left;
	width: 278px;
	text-align: left;
	padding:5px 0px 50px 5px;
	font: normal 10px arial;
}

#box .text{
	display: none;
	border:1px solid #CCC;
	background: #FFF;
	color: #333;
	text-align: justify;
	font: normal 11px verdana;
}

.text p{
	padding: 10px;	
}

a.img{
	width: 288px;
	height: 37px;
	float:left;
}

.hospedagem a{
	display:block;
	height: 156px;
	color: #A6DBEC;
	background-color: #0097C9;
}

.hospedagem a:hover{
	background-color: #0489B5;
}

a.hospedagem{
	background: url(../images/btn-voltar-hospedagem-off.jpg) no-repeat;
}

a.hospedagem:hover{
	background: url(../images/btn-voltar-hospedagem-on.jpg) no-repeat;
}

.software a{
	display:block;
	height: 156px;
	color: #FFE5A6;
	background-color: #FFB400;
}

.software a:hover{
	background-color: #DC9D05;
}

a.software{
	background: url(../images/btn-voltar-software-off.jpg) no-repeat;
}

a.software:hover{
	background: url(../images/btn-voltar-software-on.jpg) no-repeat;
}

.linguagens a{
	display:block;
	height: 156px;
	color: #C5E4A8;
	background-color: #5AB106;	
}

.linguagens a:hover{
	background-color: #509D06;	
}

a.linguagens{
	background: url(../images/btn-voltar-linguagens-off.jpg) no-repeat;
}

a.linguagens:hover{
	background: url(../images/btn-voltar-linguagens-on.jpg) no-repeat;
}

.portabilidade a{
	display:block;
	height: 156px;
	color: #DEA6A6;
	background-color: #A10101;	
}

.portabilidade a:hover{
	background-color: #7F0000;	
}

a.portabilidade{
	background: url(../images/btn-voltar-portabilidade-off.jpg) no-repeat;
}

a.portabilidade:hover{
	background: url(../images/btn-voltar-portabilidade-on.jpg) no-repeat;
}

.documentos a{
	display:block;
	height: 156px;
	color: #F2D0A8;
	background-color: #D97805;		
}

.documentos a:hover{
	background-color: #B96604;		
}

a.documentos{
	background: url(../images/btn-voltar-documentos-off.jpg) no-repeat;
}

a.documentos:hover{
	background: url(../images/btn-voltar-documentos-on.jpg) no-repeat;
}

.consultoria a{
	display:block;
	height: 156px;
	color: #CFCAC0;
	background-color: #76674B;		
}

.consultoria a:hover{
	background-color: #5E513A;		
}

a.consultoria{
	background: url(../images/btn-voltar-consultoria-off.jpg) no-repeat;
}

a.consultoria:hover{
	background: url(../images/btn-voltar-consultoria-on.jpg) no-repeat;
}


.sistema a{
	display:block;
	height: 156px;
	color: #BFBFBF;
	background-color: #484848;		
}

.sistema a:hover{
	background-color: #383838;		
}

a.sistema{
	background: url(../images/btn-voltar-sistemas-off.jpg) no-repeat;
}

a.sistema:hover{
	background: url(../images/btn-voltar-sistemas-on.jpg) no-repeat;
}


.sites a{
	display:block;
	height: 156px;
	color: #BFBFBF;
	background-color: #77419F;		
}

.sites a:hover{
	background-color: #5A2577;		
}

a.sites{
	background: url(../images/btn-voltar-site-off.jpg) no-repeat;
}

a.sites:hover{
	background: url(../images/btn-voltar-site-on.jpg) no-repeat;
}


.manutencao a{
	display:block;
	height: 156px;
	color: #BFBFBF;
	background-color: #4E5215;		
}

.manutencao a:hover{
	background-color: #3D3F10;		
}

a.manutencao{
	background: url(../images/btn-voltar-manutencao-off.jpg) no-repeat;
}

a.manutencao:hover{
	background: url(../images/btn-voltar-manutencao-on.jpg) no-repeat;
}


#parceiro{
	height: 800px;	
}

#fornecedor{
	width:200px;
	float: left;
	text-align: center;
	padding-bottom: 150px;
}

#fornecedor p{
	color: #868684;
	padding-top: 15px;
	padding-bottom: 50px;
	text-align: justify;
	font: normal 10px verdana;
}

.separador{
	float:left;
	padding: 0px 10px;
}

a.site{
	float: left;
	width: 40px;
	height: 39px;
	margin-left:80px;
	background: url(../images/btn-mais-off.jpg) no-repeat;
}

a.site:hover{
	background: url(../images/btn-mais-on.jpg) no-repeat;
}

#contato{
	height: 700px;
	padding-top: 150px;
}

#info{
	float: left;
	text-align: right;
	padding-left: 110px;
}

#info span{
	color: #BFBDC0;
	text-transform: uppercase;
	font: normal 18px 'Della Respira', arial;
}

#info p{
	color: #0198CD;
	font: normal 16px 'Della Respira', arial;
}

a.tagart{
	float: left;
	width: 200px;
	height: 157px;	
	background: url(../images/logo-tagart-off.jpg) no-repeat;
}

a.tagart:hover{
	background: url(../images/logo-tagart-on.jpg) no-repeat;
}

a.garcia{
	float: left;
	width: 200px;
	height: 157px;	
	background: url(../images/logo-garcia-off.jpg) no-repeat;
}

a.garcia:hover{
	background: url(../images/logo-garcia-on.jpg) no-repeat;
}

a.panmalhas{
	float: left;
	width: 200px;
	height: 157px;	
	background: url(../images/logo-panmalhas-off.jpg) no-repeat;
}

a.panmalhas:hover{
	background: url(../images/logo-panmalhas-on.jpg) no-repeat;
}

a.f2{
	float: left;
	width: 200px;
	height: 157px;	
	background: url(../images/logo-f2-off.jpg) no-repeat;
}

a.f2:hover{
	background: url(../images/logo-f2-on.jpg) no-repeat;
}



#midias-contato{
	width:250px;
	height:31px;
	padding-top: 25%;
}

#midias-contato .twitter, .facebook{
	float:right;
	width: 31px;
	height: 31px;
	padding-left: 5px;
}

iframe{
	float:left;
	width: 450px;
	height: 500px;
	border: none;		
}

#formulario{
	float: left;
	color: #BFBDC0;
	text-transform: uppercase;
	font: normal 18px 'Della Respira', arial;
}

#formulario input, textarea{
	width: 400px;
	height: 35px;
	padding: 3px;
	color: #0198CD;
	text-align: left;
	margin-bottom: 10px;
	background-color: #FFF;
	border: 1px solid #CCC;
	font: normal 28px arial;
	border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;
}

#formulario textarea{
	height: 150px;
}

#formulario form{
	text-align: left;	
}

#formulario .enviar{
	float:right;
	width: 80px;
	height: 35px;
	border: none;
	color: #0198CD;
	background: none;
	font: normal 28px arial;
}

#formulario label.error{
	color: #900;
	font: normal 10px verdana;
}

#erro{
	color: #900;
	font: bold 14px verdana;
}

#footer{
	color: #FFF;
	height: 31px;
	padding-top: 17px;
	text-align: center;
	font: normal 11px verdana;
	background: url(../images/footer.jpg) repeat-x;
}

#midias{
	clear:both;
	width:70px;
	height:31px;
}

#midias .twitter, .facebook{
	width: 31px;
	height: 31px;
}

a.twitter{
	float: left;
	background: url(../images/btn-twitter-off.jpg) no-repeat;
}

a.twitter:hover{
	background: url(../images/btn-twitter-on.jpg) no-repeat;
}

a.facebook{
	float: right;
	background: url(../images/btn-facebook-off.jpg) no-repeat;
}

a.facebook:hover{
	background: url(../images/btn-facebook-on.jpg) no-repeat;
}

#btn{
	right: 0;
	bottom: 0;
	width:82px;
	height:82px;
	position: fixed;
	background: url(../images/btn-next.jpg) no-repeat;
}

/* -------------- tooltip ---------*/

.text a{
	color: #484848;
	text-decoration: none;	
}

.text a:hover{
	text-decoration: underline;	
}

#example a:hover { 
	text-decoration: none; 
}
	
span.show-tooltip-text { 
	display: none; 
	position: absolute; 
	font: 0.9em verdana; 
	padding: 10px; 
	color: #FFF; 
	background:#484848 
}