/* Text CSS */

/* Estilo JS  */
/* /// CORES /// */
/*amarelo: #fd3;*/
/*amarelo 2: #fc3;*/
/*/// TONS LARANJAS ///*/
/* #930 // marrom */
/* #C63 // laranja-marrom */
/* #F60 // laranja */
/* #F96 // salmão */
/* #FCB // nude */

body { 
	color: #300; /* cor da fonte */
	background-color: #ccc; /* cor do fundo da página */
	}

div#container {
	background-color: #eee;  /* cor do fundo da div container */
	border-color: #fd3;
	}

header, footer {
	background-color: #fc3;  /* cor do cabeçalho, rodapé e botões do menu */
	border-color: #fc3; /* cor da borda */
	}
header, footer {
	background-image: linear-gradient(141deg, #fc3 0%, #fd3 90%);
	/* efeito gradiente no cabeçalho e rodapé */
	}
header h2 {
	color: #333;
}
img.sombra {
	box-shadow: 0.5em 0.5em 0.3em #aaa;
}

/*a, a:link, a:active{
	color: #930;
}
a:hover, a:visited{
	color: #630;
}*/
.exemplo {
	background-color: #fe9;
	box-shadow: 0.5em 0.5em 0.3em #aaa;
	}
nav.menu {
	background-color: #fc3; /* cor de fundo do menu */
	background-image: linear-gradient(141deg, #fc3 0%, #fd3 90%);
	}

nav.menu ul li {
	background-color: #fc3; 
	color: #333;
	background-image: linear-gradient(141deg, #fc3 0%, #fd3 90%);
	}

nav.menu ul li:hover{
	background-color: #fe9;
	background-image: none;
	}

nav.menu a {
	color: #333;
	}

code, .code {
	background-color: #ccc;
	color: #333;
	box-shadow: 0.5em 0.5em 0.3em #aaa;
	}
code span.etiqueta, pre .etiqueta, p .etiqueta{
	color: #c06;
	}
code span.atributo, pre .atributo {
	color: #06c;
	}
code span.valor, pre .valor{
	color: #390;
	}

button{
	background-color: #fff;
	box-shadow: 0.2em 0.2em 0.05em #666;
	color: #666;
}
button:hover{
	background-color: #F96;
	transition: 0.2s;
}
button:active{
	background-color: #ddd;
	transform: translateY(0.1em);
	box-shadow: 0.1em 0.1em 0.05em #999;

}

/* /// Design responsivo para Desktops  //// */
@media only screen and (min-width: 800px) 
	{
		body {
			background-image: linear-gradient(141deg, #ccc 0%, #aaa 90%);
		}
		header, footer, article{
			padding: 0 4em 1em;
		}

		nav.menu {
			padding: 0.4em;
		}
		nav.menu a{
			text-decoration: none;
			}
		nav.menu a:hover{
			text-decoration: underline;
			}	
		nav.menu ul{
			padding: 0 0 0 4em;
			}
		
		nav.menu ul li{
			display: inline;
			padding: 0.2em 1em 0.2em 1em;
			}
	
		nav.menu ul li:hover{
			background-image: none;
		}
		pre.code{
			white-space: pre-wrap;
			display: block;
		}
		input {
			margin: 0 1em;
		}
		input.slider {
			margin: 0 1em;
		}
		#meuBox{
			margin: 1.5em 2em;
		}
		.exemplo p label{
			text-align: right;
		}
    }