/* 
FOLHA DE ESTILOS
CLIENTE: Pepper Interativa
AUTOR: JOAO PAULO (joaopaulo.passos@gmail.com)
*/

/*-------------------------------------------
	ESTE ARQUIVO ESTÁ DIVIDO DA SEGUINTE FORMA:
	
		1. ELEMENTOS HTML
		2. ESTRUTURA PRINCIPAL DAS PÁGINAS
		3. BOX DE CONTEUDO
		4. ESTILOS ESPECÍFICOS
---------------------------------------------*/

@font-face {
    font-family: 'crayonCrumble';
    src: url('fontes/dk_crayon_crumble-webfont.eot');
    src: url('fontes/dk_crayon_crumble-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontes/dk_crayon_crumble-webfont.woff') format('woff'),
         url('fontes/dk_crayon_crumble-webfont.ttf') format('truetype'),
         url('fontes/dk_crayon_crumble-webfont.svg#dk_crayon_crumbleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* 
1. ELEMENTOS HTML --------------------------------------------------- 
					TODAS AS TAGS HTML (apenas estilos que se aplicam a todos elementos da página)
*/

* {
	margin:0;
	padding:0;
}
img {
	border:none;
}
label {
	display:block;
}
ul {
	list-style:none;
}
a {
	text-decoration:none;
}
/*Reset Completo*/
html {
	color:#000;
	background:#FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0
}
table {
	border-collapse:collapse;
	border-spacing:0
}
fieldset, img {
	border:0
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal;
	font-weight:normal
}
ol, ul {
	list-style:none
}
caption, th {
	text-align:left
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal
}
q:before, q:after {
	content:''
}
abbr, acronym {
	border:0;
	font-variant:normal
}
sup {
	vertical-align:text-top
}
sub {
	vertical-align:text-bottom
}
input, textarea, select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit
}
input, textarea, select {
*font-size:100%
}
legend {
	color:#000
}
body {
	font:Arial, Helvetica, sans-serif;
	width: 100%
}
iframe{border:0}
/* 2. 
ESTRUTURA PRINCIPAL DAS PÁGINAS ---------------------------------- 
					Todos os containers estruturais das páginas 
					(Corpo geral, Menu Principal, Topo da página, Rodapé)	
*/
#mass-container{width: 960px; margin:0 auto; position:relative; z-index:1}
	.logo-principal{margin: 0 auto;width: 613px;padding-top: 12px;margin-bottom: 42px;}
	.texto-explicativo{width: 666px;margin: 0 auto;margin-bottom: 40px;}
		.texto-explicativo .imagem-texto{float:left}
		.texto-explicativo .bloco-interrogacao{display: block; margin-top: 145px;float: left;margin-left: 40px;}
	.links-e-redes{width: 564px;margin: 0 auto;}
	.links-e-redes #chamadaContrata{position: absolute;
    margin-left: -248px;
    margin-top: 114px;
    z-index: 1;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);  
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);}
	.links-e-redes ul{
    margin-top: 24px;
}
	.links-e-redes li{float: left}
	.links-e-redes li.blog{
    margin-right: 146px;
}
	.links-e-redes li.textos{
    margin-bottom: 34px;
}
	.links-e-redes li.portfolio{
    margin-right: 106px;
}
	.links-e-redes li.webdev{
    margin-bottom: 34px;
}
	.links-e-redes li.linkedin{
    margin-right: 0px;
}
	.links-e-redes li.facebook{
    margin-bottom: 28px;
}
	.links-e-redes li.twitter{
    margin-bottom: 16px;
    margin-left: 82px;
}
	.links-e-redes li.stumble{
    margin-right: 92px;
    margin-top: 20px;
}
.botoes-sociais{text-align: center;}
.ja-chegou-o-disco-voador{
	margin-top: 40px;
	height: 470px;
}
.ja-chegou-o-disco-voador a{float:left; display:block}

.superman-ficou{right: 0;
margin-right: -210px;
position: fixed;z-index: 999;}

.superman-ficou .box-mensagem{width: 200px; height: 120px; border: 5px solid black; border-radius: 2px; padding: 10px; background-color:white;margin-top: -49px;margin-left: -210px;font: 23px crayonCrumble;display: none}
.tedjo{position: fixed;left: 0;top: 160px;}
.gambiarra{position: absolute; top: 0; left: 0;font: 23px crayonCrumble;margin-left: -10px;visibility: hidden}
	.links-e-redes li.instagram{margin-top: 30px;}
	.links-e-redes li.googleplus{
    width: 182px;
    margin-top: 20px;
    margin-left: 30px;
}
    .arsenal{margin-top: 135px;}
	.logo-arsenal{width: 740px; margin: 0 auto 50px auto;}
	    .descricao-arsenal{position: absolute;margin-top: -25px;}
	.arsenal ul{margin: 35px auto 0 auto;width: 620px;}
	.arsenal li{float: left;margin-right: 29px;margin-bottom: 20px;}
#grandicone-aniversario{width: 467px; height: 201px;margin: 0 auto 60px auto;}	
    #grandicone-aniversario div{margin-left: 0px !important;}

#minicone-buffalobill{left: 200px;position: absolute;}
#minicone-coxinha{left: 400px;position: absolute;}
#minicone-dormir{left: 600px;position: absolute;}
#minicone-link{left: 800px;position: absolute;}
#minicone-gif{
    left: 150px;  position: absolute;  
    margin-top: 120px;
}
#minicone-placas{
    left: 510px;
    position: absolute;
    margin-top: 110px;
}

/* 3. 
BOX DE CONTEUDO --------------------------------------------------
						Todos os box's de conteudo
						(Container principal de conteúdos, Box de noticias, Box de categorias, Box de imagens, etc)							
*/

/* 
4. ESTILOS ESPECIFICOS E UNICOS --------------------------------------------------------- 
*/

.hide {
	display:none;
}
.clear {
	clear: both;
	float:none
}
.no_margin{margin-left: 0px !important; margin-right:0px !important}

.fade{
	width: 100%;
	height:100%;
	background-color:#000;
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
	filter: alpha(opacity=95);
    -moz-opacity: 0.95;
    -khtml-opacity: 0.95;
	opacity: 0.95;
	position:fixed;
	z-index:1000;
	display:none
}

*::selection {
	background:#666666;
	color:#FFF;
}
*::-moz-selection {
background:#666666;
color:#FFF;
}
*::-webkit-selection {
background:#666666;
color:#FFF;
}