@charset "utf-8";
.btn-style,
#controles > input {
	border: 1px solid #fff;
    border-radius: 10px;
    color: #FFFFFF;
    cursor: pointer;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 5px;
    width: 150px;
	font-size:16px;
	font-weight:bold;
	text-decoration:none;	
	background-color: #6B9F28;
	box-shadow: 1px 1px 1px #999999;	
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 ); /* IE6-9 */
}
.btn-style:hover,
.btn-style:focus,
#controles > input:focus,
#controles > input:hover{

	background: #96c56f; /* Old browsers */
	background: -moz-linear-gradient(top,  #96c56f 98%, #a9db80 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(98%,#96c56f), color-stop(100%,#a9db80)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #96c56f 98%,#a9db80 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #96c56f 98%,#a9db80 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #96c56f 98%,#a9db80 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #96c56f 98%,#a9db80 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96c56f', endColorstr='#a9db80',GradientType=0 ); /* IE6-9 */

}
#controles > input.desabilitado {
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
	cursor:not-allowed;
}
.btn.danger,
.alert-message.danger,
.btn.danger:hover,
.alert-message.danger:hover,
.btn.error,
.alert-message.error,
.btn.error:hover,
.alert-message.error:hover,
.btn.success,
.alert-message.success,
.btn.success:hover,
.alert-message.success:hover,
.btn.info,
.alert-message.info,
.btn.info:hover,
.alert-message.info:hover {
  color: #ffffff;
}
.btn.danger,
.alert-message.danger,
.btn.error,
.alert-message.error {
  background-color: #c43c35;
  background-repeat: repeat-x;
  background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #3A5E1A),
	color-stop(1, #96C56F)
	);
  background-image: -o-linear-gradient(bottom, #3A5E1A 0%, #96C56F 100%);
  background-image: -moz-linear-gradient(bottom, #3A5E1A 0%, #96C56F 100%);
  background-image: -webkit-linear-gradient(bottom, #3A5E1A 0%, #96C56F 100%);
  background-image: -ms-linear-gradient(bottom, #3A5E1A 0%, #96C56F 100%);
  background-image: linear-gradient(to bottom, #3A5E1A 0%, #96C56F 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #c43c35 #c43c35 #882a25;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.success,
.alert-message.success {
  background-color: #57a957;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -ms-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(top, #62c462, #57a957);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #57a957 #57a957 #3d773d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.info,
.alert-message.info {
  background-color: #339bb9;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
  background-image: linear-gradient(top, #5bc0de, #339bb9);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #339bb9 #339bb9 #22697d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn {
  cursor: pointer;
  display: inline-block;
  background-color:#CCC;
  border-color: #CCC;
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  padding: 4px 12px;  
  color: #666;
  font-size: 16px;
  font-weight: bold;
  line-height: normal;
  
  
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -o-transition: 0.1s linear all;
  -webkit-transition: 0.1s linear all;
  -moz-transition: 0.1s linear all;
  -ms-transition: 0.1s linear all;
  transition: 0.1s linear all;
}
.btn:hover {

  background-color:: #90CC82;
  text-decoration: none;
}
.btn:focus {
  outline: 1px dotted #666;
}
.btn.primary {
  color: #ffffff;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn:active {
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled {
  cursor: default;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  filter: alpha(opacity=65);
  -khtml-opacity: 0.65;
  -moz-opacity: 0.65;
  opacity: 0.65;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn[disabled] {
  cursor: default;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  filter: alpha(opacity=65);
  -khtml-opacity: 0.65;
  -moz-opacity: 0.65;
  opacity: 0.65;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn.large {
  font-size: 18px;
  line-height: normal;
  padding: 6px 14px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.btn.small {
  padding: 2px 7px;
  font-size: 14px;
}

:root .btn {
  border-radius: 0 \0;
}
button.btn::-moz-focus-inner,
input[type=submit].btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}
body{
	font-family:Arial, Helvetica, sans-serif;	
	
}

#fondo-imag { position:fixed; top:-50%; left:-50%; width:200%; height:200%; }
#fondo-imag img {
	position: absolute;
	top: 0;
	left: -1px;
	right: 0;
	bottom: 0;
	margin: auto;
	min-width: 50%;
	min-height: 50%;
	width: 1947px;
} 
h1{
	font-size:28px;	
}
h2{
	font-size:18px;	
}
h3{
	font-size:16px;	
}
p,
ul li{
	font-size:12px;	
	text-align:left;
	margin:0px;
	padding:0px;
}
div#content {
    margin: auto;
    text-align: center;
    width: auto;
}
div#instrucao,
div#game{
	display: block;
	position: relative;
	margin-left:1px;
	color:#494949;
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
}
div#instrucao{
	background: linear-gradient(to bottom, #4fa5c4 0%, #73c6ea 100%);
		display: block;
		position: relative;
		width:50%;
		margin-left:10px;
		color:#494949;
		font-size:18px;
		font-family:Arial, Helvetica, sans-serif;		
		left:30%;
		top:5%;
		margin-left:-110px;
		margin-top:-40px;
		padding: 30px;
		height: 600px; 
		display:;	
}


#keyboard > ul {
    margin: 0;
    padding: 0;
}
#instrucao h1, h2 {
    color: #6b9f28;
}

#instru li {
    list-style-image:url(../img/ico.png);
}

#dicas{
	border-radius:5px;
	background: #FFF;
   	color: #494949;       
    border: 5px solid #CCC;
	margin auto;
	width:95%;
	float: none;
	padding: 6px;
}

#keyboard li {
   display: inline;
}
#dica,
#caracteres,
#hangman{
	display:block;
	
}

#dica{
	min-width:180px;
	
	margin-bottom:10px;

}

#postit{
	width: 100%;
	
	position:relative;	
	text-align:right;
	margin-top:30px;
	
}

#caracteres{

	max-width:90%;
	width:90%;
	margin-top:90px;
	margin-bottom:45px;
}


#hangman{
	width: 220px; 
	height:250px;
	background:url(../img/hangman.png) center center no-repeat;

}
#keyboard{
	clear:both;

}
input.letra {
    font-size: 20px;
    height: 30px;
    text-align: center;
    width: 30px;	
	margin: 2px;
}
#info_game {
    color: #7A7A7A;
    font-size: 12px;
}

#hangman img {
    height: 150px;
    position: relative;
	margin-left: -15px;
    top: 28px;
}

#grama{
		
		position:relative;
		margin-top:0px;
		width: 100%;
		display:none;
}
#jogo{
		border: 20px solid #dbd6d3;
		border-radius: 10px;
		height: 250px;
		background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #4FA5C4),
		color-stop(1, #73C6EA)
		);
		background-image: -o-linear-gradient(bottom, #4FA5C4 0%, #73C6EA 100%);
		background-image: -moz-linear-gradient(bottom, #4FA5C4 0%, #73C6EA 100%);
		background-image: -webkit-linear-gradient(bottom, #4FA5C4 0%, #73C6EA 100%);
		background-image: -ms-linear-gradient(bottom, #4FA5C4 0%, #73C6EA 100%);
		background-image: linear-gradient(to bottom, #4FA5C4 0%, #73C6EA 100%);
		box-shadow: 2px 2px 3px #999999;
	}
	
#gramaini{
		max-width: 1200px; 
		width: 100%; 
		height: auto; 
		position:absolute; 
		bottom: -5px; 
		left: 0px;
	}
	
	#gramaini img{
		max-width: 1200px;   /* Máximo da largura da imagem */
		width: 100%;
		max-height: 50px;  /* Máximo da altura da imagem */
		min-height: auto;      /* Mínimo da altura, por padrão “auto” */
	}

@media (max-width: 1000px){
	div#instrucao{
		background: none;
	}
	
	#fondo-imag{
		display: none;
	}
	
	body{
		background-color: #4fa5c4;		
		background-size: 100%;
	}
	#gramaini{
		display:none;
	}
	
	
}

@media (min-width: 1430px){
	#dica,
	#caracteres,
	#hangman{
		display:block;
		width:250px;
		
	}

	body{
		width: 100%;	
	}
	#keyboard > ul {
		margin: 5px;
		padding: 5px;
	}
	
	#dica{
		margin-top:60px;
		position:relative;
		
	}

	#caracteres{
		min-width:340px;
		margin-top:70px;
		max-width:90%;
		width:90%;
		margin-top:10px;
		margin-bottom:45px;
	}
	
	#dicas{
		border-radius:5px;
		background: #FFF;
   		color: #494949;       
    	border: 5px solid #CCC;
		margin auto;
		width:70%;
		float: none;
		padding: 10px;
    	width: 90%;
	}
	
	
	div#game{
		display: block;
		position: relative;
		width:50%;
		margin-left:10px;
		color:#494949;
		font-size:18px;
		font-family:Arial, Helvetica, sans-serif;		
		left:30%;
		top:5%;
		margin-left:-110px;
		margin-top:-40px;
	}
	
	div#instrucao{
		background: linear-gradient(to bottom, #4fa5c4 0%, #73c6ea 100%);
		display: block;
		position: relative;
		width:40%;
		margin-left:10px;
		color:#494949;
		font-size:18px;
		font-family:Arial, Helvetica, sans-serif;		
		left:30%;
		top:5%;
		margin-left:-110px;
		margin-top:-40px;
		padding: 30px;
		height: 600px;
	}
	
	#postit{
		width: 289px;
		height:190px;
		position:relative;
		float:right;
		background-image:url(../img/dica.png);	
		text-align:right;
	
	}
	
	#hangman{
		height:250px;
		background:url(../img/hangman.png) center center no-repeat;
		position: relative;
		float:left;
	}
	
	#grama{

		margin-top:-118px;
		display:inline-block;	
	}

	
	#jogo{
		border: 20px solid #dbd6d3;
		border-radius: 10px;
		height: 265px;
		background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #4FA5C4),
		color-stop(1, #73C6EA)
		);
		background-image: -o-linear-gradient(bottom, #4FA5C4 0%, #73C6EA 100%);
		background-image: -moz-linear-gradient(bottom, #4FA5C4 0%, #73C6EA 100%);
		background-image: -webkit-linear-gradient(bottom, #4FA5C4 0%, #73C6EA 100%);
		background-image: -ms-linear-gradient(bottom, #4FA5C4 0%, #73C6EA 100%);
		background-image: linear-gradient(to bottom, #4FA5C4 0%, #73C6EA 100%);
		box-shadow: 2px 2px 3px #999999;
	}
	
	#icon_boy{
		position: absolute;
		top: 380px;
	}
	
	#gramaini{
		max-width: 1200px; 
		width: 100%; 
		height: auto; 
		position:absolute; 
		bottom: -5px; 
		left: 0px;
	}
	
	#gramaini img{
		max-width: 1200px;   /* Máximo da largura da imagem */
		width: 100%;
		max-height: 50px;  /* Máximo da altura da imagem */
		min-height: auto;      /* Mínimo da altura, por padrão “auto” */
	}
	
	#caixadica{
		position: absolute;
		top: 35%;
		right: 3%;
		background:url(../img/Jogo%20da%20forca-10.png) no-repeat top center;
		min-height: 402px;
		max-width: 467px;
		width: 100%;
	}
	
	#dicatexto{
		display: inline-block;
		width: 80%;
		padding: 10px 10px 10px 50px;
	}

	
	
}
#anime{
    top: 0;
    display: block;
    height: 10px;
    left: 100;
    position: fixed;
    width: 10px;
}
img.anjo{
	position:absolute;
	opacity:0.5;
	-webkit-animation: angelAnime 5s ease-in-out; 
	animation: angelAnime 5s ease-in-out; 
	opacity:0;
}


@keyframes angelAnime {
	0% {
		top:0px;
		left:0px;
	}
	25% { 
		top:20px;
		left:250px;		
	}
	50% { 	
		top:0px;
		left:550px;
	}
	75% { 
		top:0px;
		left:400px;
		opacity:1;
	}
	100% {
		top:-20px;
		left:600px;
		opacity:0;
	}
}
@-webkit-keyframes angelAnime{
	0% {
		top:0px;
		left:0px;
	}
	25% { 
		top:20px;
		left:250px;		
	}
	50% { 	
		top:0px;
		left:550px;
	}
	75% { 
		top:0px;
		left:400px;
		opacity:1;
	}
	100% {
		top:-20px;
		left:600px;
		opacity:0;
	}
}