@charset "UTF-8";

/* 
Nome do Projeto: Mirabilis
Versao: 2.0 
Autores: Leonardo Saraiva; Raphael Schoneborn; Rodrigo da Costa - http://ckav.deviantart.com/

SUMARIO
---------------------------------------------------------------------------------- 

1 - RESET

2 - Estrutura
3 - links e texto 
4 - extras

5 - TODAS AS PAGINAS
	5.1 - logo
	5.2 - login
	5.3 - Redes Sociais
	5.4 - Menu Principal
	5.5 - Meio: Caixas de conteudo
	5.6 - Baixo
		5.6.1 - mapa do site
		5.6.2 - rodape

6 - HOME
	6.1 - Destaques
	6.2 -  Jobs
	6.3 -  Momentum Mirabilis

7 -  JOBS

8 - EXPERTISE

9 -  CLIENTES

10 - MIRABILIS 

11 - CONTATO
12 - Obrigado pelo contato

13 - AREA RESTRITA

*/
/*-------------*/
/*  RESET */
/*------------*/
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
:focus {
    outline: 0;
}

ol, ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

/* Estrutura */
body { 
background: black;
line-height: 1;
color: black;
background-color: #000; 
font-family: "Century Gothic", verdana, sans-serif; 
margin:0; 
padding:0 ;
background-image: url("../images/fundo2.jpg"); 
background-repeat: no-repeat; 
background-position: center 150px; }

#tudo {
width: 970px; 
text-align:left; 
margin:0px auto;} 

#bg{
background: url("../images/login.gif") repeat-x top left;
top:217px;
position:absolute;
z-index:-999;
width:100%;
height:36px;
}

/* links e texto */
a {
	color: #999; 
	background-color: #000; 
	text-decoration:none; 
	border:0;
	}

a:hover {
	color: #F65F13;  
	background-color:#000; 
	text-decoration:none;
	}

a:active {color:#2F3437;}

p {
	color: #000; 
	font-size:12px; 
	text-align:justify; 
	font-family:verdana, sans-serif; 
	line-height: 16px;
	}

h2 {
	color:#2F2C2C;  
	font-size:26px; 
	font-family: "Century Gothic", verdana, sans-serif;  
	font-weight: bold; 
	margin: 20px 0 10px 0;
	}


h3 {
	color:#F65F13; 
	margin: 0px 0px 2px;
	}

ul {
	list-style:none; 
	margin:0 0 20px 0; 
	padding:0;
	}

#link_topo img { 
	position:fixed; 
	bottom: 0; 
	right: 0; 
	border: 0;
	}

/* extras */
hr {
	border: solid ; 
	border-color:#F65F13; 
	color:#F65F13; 
	border-width: 0px; 
	height: 1px; 
	border-top-width: 1px;  
	margin-bottom: 10px;
	}

img{border:0;} 

#alertajs {position:fixed; top:0; width: 100%; background-color:black;} 
#alertajs  p{color:gray;text-align:center;}

/*===================================================*/
/* TODAS AS PAGINAS */
.clear{clear:both;}

/* logo */
#logo {width: 632px; height:114px; margin:50px auto 90px; border:0px;}

/* login */
    form.login fieldset  {
	width: 436px;
	margin-top: -34px;
	margin-top /*\**/: -35px\9;
	margin-left: -5px;
    border:none;
	float:left;
    }
	
	form.login fieldset label input {
	height:28px;
	border:none;
	}

    form.login fieldset label.usuariobg input {
	width:84px;
	float:left;
    background:url(../images/input_normal-usuario.png) no-repeat 0 4px;
	cursor:pointer;
	padding:6px 0 0 62px;
    }

    form.login fieldset label.senhabg input {
	width:91px;
	float:left;
    background:url(../images/input_normal-senha.png) no-repeat 0 4px;
	cursor:pointer;	padding:6px 0 0 55px;
    }
	
	form.login fieldset button {
    width:42px;
	height:32px;
	padding:8px 22px 0 17px;
    background:url(../images/botao-login-ok.png) no-repeat 0px 3px;
	border:none;
    text-indent:-9000em;
    overflow:hidden;
    cursor:pointer;
    }
	
    form.login fieldset label input :focus {
    background-position:0 -36px;
    }
	
    form.login fieldset button:focus {
	background-position:0px -36px;
	}
	
  	form.login fieldset label input:focus, form.login fieldset label input.focado {
	background-position:0 -34px!important;
	}

/* Redes Sociais */
	
#redes-sociais {
	width:196px;
	height:40px;
	float: right;
	margin-top: -39px;
	}	
	
#redes-sociais ul li  {
	float:left;
	}	
	
#redes-sociais ul li a#vimeo  {
	width:40px;
	height:40px;
	background: url(../images/vimeo.png) no-repeat center center;
	margin-right:12px;
	float:left;
	text-indent:-9999px;
	}	
	
#redes-sociais ul li a:hover#vimeo  {
	width:40px;
	height:40px;
	background: url(../images/vimeo.png) no-repeat center center;
	margin-right:12px;
	float:left;
	text-indent:-9999px;
	}	

#redes-sociais ul li a#twitter  {
	width:40px;
	height:40px;
	background: url(../images/twitter.png) no-repeat center center;
	margin-right:12px;
	float:left;
	text-indent:-9999px;
	}		

#redes-sociais ul li a:hover#twitter  {
	width:40px;
	height:40px;
	background: url(../images/twitter.png) no-repeat center center;
	margin-right:12px;
	float:left;
	text-indent:-9999px;
	}	
	
#redes-sociais ul li a#flickr  {
	width:40px;
	height:40px;
	background: url(../images/flickr.png) no-repeat center center;
	margin-right:12px;
	float:left;
	text-indent:-9999px;
	}	
	
#redes-sociais ul li a:hover#flickr  {
	width:40px;
	height:40px;
	background: url(../images/flickr.png) no-repeat center center;
	margin-right:12px;
	float:left;
	text-indent:-9999px;
	}	
	
#redes-sociais ul li a#youtube  {
	width:40px;
	height:40px;
	background: url(../images/youtube.png) no-repeat center center;
	float:left;
	text-indent:-9999px;
	}	

#redes-sociais ul li a:hover#youtube  {
	width:40px;
	height:40px;
	background: url(../images/youtube.png) no-repeat center center;
	float:left;
	text-indent:-9999px;
	}	
	
/* Menu Principal */
#div-menu {
	margin:0px auto; 
	padding:5px;
	height: 35px; 
	width:970px; 
	background:#000;	 
	position:absolute;
	}
	
.compensa-menu{	height: 35px;  clear:both; margin-bottom:12px;}
.compensa-menu{	*height: 0;  *clear:both; *margin-bottom:-47px;} /* Hack IE7 */ 

#menu ul{ 
	list-style:none; 
	font-size:20px; 
	display:none;
	 position:absolute;
	height: 35px; 
	width:970px; 
	 top:0;
	 left:0;
	 margin:2.5em 0 0 0;
	 padding:0;	
	 z-index:2;
	}

#menu li {
	float:left;
	position:relative;
	margin-left:62px;
	font-size:20px;
	}
	
#menu li:hover ul { display:block; }

#menu li a{
	display:block;
	padding:.75em .5em;
	text-decoration:none;
	color:#CFCFCF;
	}
	
#menu li a:hover{
	display:block;
	padding:.75em .5em;
	text-decoration:none;
	color:#F66013;
	}	
#menu li ul{
	background:#000;
	}
	
#menu li ul a{
	color: #869395;
	}
	
#menu li ul li {
	float:left;
	position:relative;
	margin-left:1px;
	font-size:16px;
	}
	
#menu li ul li a{
	padding:.75em 1.5em;
	}

#menu li ul li a:hover{
	padding:.75em 1.5em;
	}	

/* Meio: Caixas de conteudo */ 
.box_fundo{
	background-color:#748185; 
	border: 1px  outset;
	position: absolute; 
	width:inherit; 
	height:inherit;
	width:100%; 
	height:100%;
	background-image: url("../images/textura_bg.bmp"); 
 /* for IE */
 filter:alpha(opacity=50, finishopacity=30, style=1);
 /* CSS3 standard */
 opacity:0.5;
        /* Safari */
 -khtml-opacity:.5;
 /* Mozilla */
 -moz-opacity: 0.5;
 z-index: 0;
}

.box_conteudo{
 z-index: 1;
position: relative;	
padding-left:30px;
}



/* Baixo: Mapa do site e Rodape */
#baixo{}

/* mapa do site */
#mapa_do_site {margin-top: 30px;}
#coluna1_mapa {width:266px; float: left; margin: 30px 85px 0px 0px;}
#coluna2_mapa {width:266px; float: left; margin: 30px 85px 30px 0px;}
#coluna3_mapa {width:266px; float: left; margin: 30px 0 0 0;}
.bolinhas{color:#F65F13;}
.bolinhas-recuo{color:#9F430C; margin-left:10px; margin-top:-15px; font-size:14px;}

#baixo #mapa_do_site ul li{line-height: normal;}
ul.bolinhas-recuo li{margin-bottom: 4px;}

/* rodape */
#rodape{clear:both; margin-bottom: 30px; text-align:center;}



/*===================================================*/
/* HOME */
	/* Destaques */
#meio .box_conteudo h2 a {
	background:none; 
	color:#000;
	}
	
#box_destaque{
	margin:4px 0px 0px 0px; 
	padding: 1px 0px 1px 0px; 
	width: 970px; 
	height:380px;
	position: relative;
	overflow:hidden;
	}
	
.coluna_destaque{
	float: left; 
	width: 200px; 
	margin-right:35px;
	}
	
.coluna_destaque img{
	width: 200px; 
	height:135px; 
	background-color:#292929; 
	margin: 0 35px 10px 0; 
	border: 2px  solid;
	*border: 2px  solid #999999; /* Hack IE7 */ 
	}
	
.txt_destaque{
	width: 200px; 
	height:130px; 
	margin-right:35px; 
	overflow:hidden;
	}
	
.coluna_destaque a{background-color:transparent;}

a.bt_mais{background-color:#000;padding:2px;}

.bt_mais:hover{
    background-position: 0 -25px;
}
/* Jobs */
#box_jobs_home {
	margin:14px 0px 0px 0px;  
	padding:0px 34px 0px 0px; 
	width: 446px; 
	height:340px; 
	float:left;
	position: relative;
	overflow:hidden;
	}
	
#swf{ 
width: 400px;
height:150px;
	border:solid black 4px;;
	}

/* Momentum Mirabilis */
#friendfeed .logo img { 
	display: none!important;
	}

#friendfeed.widget,#friendfeed.widget div { background-color: transparent !important; color: #000 !important;border:0 !important; }	
#friendfeed.widget a,#friendfeed.widget div a { color: #999 !important; background-color: #000 !important; }	
#friendfeed.widget a:hover,#friendfeed.widget div a:hover { color: #F35E13 !important; background-color: #000 !important; text-decoration:none !important;}	
#friendfeed.widget .bottom,#friendfeed.widget div .bottom { background: #000 !important; }	
#friendfeed.widget .bottom a,#friendfeed.widget div .bottom a { color: #999 !important; }	

#box_momentum{
	margin:14px 0px 0px 0; 
	padding:0px 30px 0px 0px; 
	width: 446px; 
	height:340px; 
	float:right;
	position: relative;
	overflow:hidden;
	}

#img_momentum{ 
	width: 140px; 
	height:140px; 
	margin:0 18px 1px 0; 
	background-color:#292929; 
	float:left; 
	border: 2px solid; 
	}
	

/*===================================================*/
/* JOBS */
#box_jobs {
width: 970px;
margin:4px 0px 0px 0px; 
padding: 1px 0px 1px 0px;
	position: relative;
	overflow:hidden;
}
	
#contem_videos{
width: 970px;
}

#box_jobs p#descritivo_geral{padding: 0 40px 0 0; margin-bottom:30px;}

.descritivo_video{
 width: 480px;
 height: 318px;
 float: right;
 margin: -7px 70px 0 0;
 }

.descritivo_video h2{
margin:5px 0 0 0;
} 

.descritivo_video h3{
margin:10px 0 5px 0;
color:#1F1D1D;
font-weight:bold;
} 

.descritivo_video p{margin:10px 0;}
.caracteristicas{
width:100%;
padding: 5px;
background-color:#3E4344;
	}
	
.video-e-descritivo{
	margin-bottom:30px;
	}

.lista{
	background:url(../images/list.gif) no-repeat left center;
	display:block;
	width: 460px;
	padding-left:20px;
	margin-bottom:5px;
}
h2{color:#2F2C2C;}		

.navegar-job{float:right; margin: 0 30px 30px 0;}

.navegar-job a{background-color:#000; padding:3px 5px; border: solid #2F2C2C 1px;}
.navegar-job a:hover{background-color:#000; padding:3px 5px; border: solid #DE6B00 1px;}
/*===================================================*/
/* EXPERTISE */		
.expertises-itens{ margin-bottom:30px;
width: 910px;}

.box_expertise {
width: 970px;
margin:4px 0px 0px 0px; 
padding: 1px 0px 1px 0px;
	position: relative;
	overflow:hidden;
}

.box_expertise p.descritivo_geral{padding: 0 40px 0 0; margin-bottom:30px;}

.box_expertise .box_conteudo h3{font-weight:bold; color:#DE6B00;}

a.link-maisvimeo{
background-color:transparent;
}

#comercial {
	color:#DE6B00; 
	margin: 0px 0px 2px;
	background-color:transparent;
	}

/*===================================================*/
/* CLIENTES */	
ul.clientes-logo{ 
margin:0 50px 30px 0;
float: left;
}

.clientes-logo li{
list-style:disc inside;
}

.box_clientes{
	width: 970px;
	margin:4px 0px 0px 0px; 
	padding: 1px 0px 1px 0px;
	position: relative;
	overflow:hidden;
}

.box_clientes p.descritivo_geral{padding: 0 40px 0 0; margin-bottom:30px;}

.depoimentos{
margin: 0 40px 30px 0;
float:left;
}

.ass-cliente{
font-style: italic;
margin-left:18px;
 width: 400px;
 	font-size:12px; 
	text-align:justify; 
	font-family:verdana, sans-serif; 
	line-height: 16px;
	display:block;
}

blockquote {
  font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
  width: 400px;
  background: url(../images/close-quote.png) no-repeat right bottom;
  padding-left: 18px;
  text-indent: -18px;
}

blockquote:first-letter {
  background: url(../images/open-quote.png) no-repeat left top;
  padding-left: 18px;
  font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

/*===================================================*/
/* MIRABILIS */
.box_mirabilis{
width: 970px;
margin:4px 0px 0px 0px; 
padding: 1px 30px 1px 0px;
	position: relative;
	overflow:hidden;
}
.box_mirabilis p.descritivo_geral{padding: 0 40px 0 0; margin-bottom:30px;}
.box_mirabilis img{float:left; margin:4px 10px 10px 0;}

h2 a {background-color:transparent; color:#2F2C2C;  }
h2 a:hover {background-color:transparent; color:#2F2C2C;  }

.mirabilis-itens{ margin-bottom:30px;
width: 910px;}



.box_mirabilis ul li{margin-bottom:50px; width: 225px; height:145px; float:left; margin-left:10px; font-size:13px;}

/*===================================================*/
/* CONTATO */
#box_contato{
margin:4px 0px 0px 0px; 
padding: 1px 4px 1px 0px; 
width: 966px; 
position: relative;
overflow:hidden;
}

#dados{float:right; width: 400px; margin: 120px -45px; border-left: dotted 3px #666; padding-left: 20px;}
#foto{width: 325px; height:190px; border: 2px solid; margin-top: 40px;}

form.contato fieldset {
    border:none;
 	margin:4px 0px 0px 0px; 
	padding: 10px 0 10px 0px;
	width: 560px;
	}

form.contato fieldset h2 {
	padding-left:15px;
	}
	
/* alinhamento dos inputs que nao podem ter elemento do lado */
form.contato fieldset label.img_grande, form fieldset label.img_txtarea {
	display:table;
	width:100%;
	clear:both;
	}
	
/* posicionamento dos inputs */
form.contato fieldset label input.pequeno {
	float:left;
	height:25px;
	border:none;
	padding:5px 15px 0 18px;
	}

form.contato fieldset label input.medio {
	float:left;
	height:25px;
	border:none;
	padding:5px 22px 0 17px;
	}
	
form.contato fieldset label input.grande {
	height:25px;
	border:none;
	padding:5px 22px 0 17px;
	}
	
form.contato fieldset label textarea.txtarea {
	float:left;
	height:210px;
	border:none;
	padding:15px 0 0 14px;
	overflow: auto;
	}
	
/* texto */	
form.contato fieldset label span.alinhamento {
	float:left;
	text-align:right;
	width:100px;
}

.branco {color:white;}


/* posicionamento das imagens dos inputs */
form.contato fieldset label.img_pequeno input {
    width:25px;
    background:url(../images/input_pequeno.png) no-repeat;
	cursor:pointer;
    }
	
form.contato fieldset label.img_medio input {
    width:115px;
    background:url(../images/input_medio.png) no-repeat;
	cursor:pointer;
    }
	
form.contato fieldset label.img_grande input {
    width:420px;
    background:url(../images/input_grande.png) no-repeat;
	cursor:pointer;
    }
	
form.contato fieldset label.img_txtarea textarea {
    width:430px;
	background:url(../images/input_txtarea.png) no-repeat;
	cursor:pointer;
    }

form.contato fieldset button#enviar {
    width:100px;
	height:60px;
    background:url(../images/enviar2.png) no-repeat 0px 0px;
	border:none;
    text-indent:-9000em;
    overflow:hidden;
    cursor:pointer;
	float:left;
	margin-left: 100px;
    }
	
form.contato fieldset button#limpar {
    width:100px;
	height:60px;
    background:url(../images/limpar2.png) no-repeat 0px 0px;
	border:none;
    text-indent:-9000em;
    overflow:hidden;
    cursor:pointer;
	float:left;
    }
	
/* rollover dos inputs */
form.contato fieldset label input :focus {
    background-position:0 -36px;
    }
	
input:focus, input.focado {
	background-position:0 -36px!important;
	}
	
form.contato fieldset button#limpar:focus,
form.contato fieldset button#enviar:focus{
	background-position:0px -60px;
	}
		
/* rollover do textarea */
form.contato fieldset label textarea :focus {
    background-position:0 -223px;
    }

textarea:focus, textarea.focado {
	background-position:0 -223px!important;
	}
	
/* contador de caracteres do textarea */
#progresso {
  background: url(../images/contador.png) no-repeat;
  background-position: 0px 0px;
  text-align: center;
  margin-left: 110px;
  margin-bottom: 20px;
  width: 430px;
  height: 20px;
  color: #fff;
  font-size: 8pt;
  font-family: Arial;
}
/*===================================================*/
/* Obrigado pelo contato */

#box_obrigado{
margin:4px 0px 0px 0px; 
padding: 1px 4px 1px 0px; 
width: 966px; 
position: relative;
overflow:hidden;
}

#box_obrigado .box_conteudo p{
margin-top:120px;
font-size:18px;
width:515px;
float:left;
}

/*===================================================*/
/* ÁREA RESTRITA */
#box_restrita{
	margin:4px 0px 0px 0px; 
	padding: 1px 40px 40px 0px; 
	width: 930px; 
	position: relative;
	overflow:hidden;
	}