body {
	background:#fff;
	font:small "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#666;
	font-weight:normal;
	line-height:180%;
}

.hide {
	display:none;
}

header {
	background-color:#000;
	margin:0 auto;
	padding:5pt 10pt;
	overflow:hidden;
}
	header h1 {
		float:left;
	}
		header h1 a {
			color:#bbb;
			font-size:12pt;
			text-decoration:none;
		}
		header h1 a:hover {
			text-decoration:underline;
		}

	header div {
		float:right;
	}
		header div h2 {
			display:inline;
			color:#bbb;
			font-size:12pt;
		}
		header select {
			color:#666;
			font-size:10pt;
		}

#screen {
	clear:both;	
	width:60%;
	margin-left:auto;
	margin-right:auto;
}

nav {
	padding:0;
	line-height:0;
	font-size:0;
	text-align:center;
}
	nav a.generator {
		display:inline-block;
		padding:0.8em 1.2em;
		margin:0;
		
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
		font-size:16pt;
		text-transform:uppercase;
		text-decoration:none;
		color:#fff;
		background-color:#0b98e1;
		line-height:150%;
		
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	nav a.generator:hover {
		background-color:#3dcbff;
		text-decoration:none;
	}


article {
	text-align:center;
}
	article p {
		background-color:#fff;
		padding:15pt;
		margin:0;
		
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		
		-moz-box-shadow: 0px 1px 5px #888;
		-webkit-box-shadow: 0px 1px 5px #888;
		box-shadow: 0px 1px 5px #888;
	
		font-size:16pt;
		font-family:Georgia, "Times New Roman", Times, serif;
	}
	
	article div {
		clear:both;
		margin-top:10px;
		font-size:0;
		line-height:0;
	}
	
	article a {
		vertical-align:top;
	}

	article a.generator {
		display:inline-block;
		padding:8px 12px 0 12px;
		margin:0 5px 0 0;
		height:24px;
		overflow:hidden;
		
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
		font-size:8pt;
		text-transform:uppercase;
		text-decoration:none;
		font-weight:bold;
		color:#fff;
		background-color:#0b98e1;
		line-height:150%;
		
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	article a.generator:hover {
		background-color:#3dcbff;
		text-decoration:none;
	}
	
	article a.shareTW {
		background:url(twitter.gif) 0 0 no-repeat;
		
		display:inline-block;
		margin:0 5px 0 0;
		width:32px;
		height:32px;
		overflow:hidden;

		line-height:0;
		font-size:0;
		text-indent:-999px;
		
		vertical-align:top;
	}	
	article a.shareFB {
		background:url(facebook.gif) 0 0 no-repeat;

		display:inline-block;
		margin:0 5px 0 0;
		width:32px;
		height:32px;
		overflow:hidden;

		line-height:0;
		font-size:0;
		text-indent:-999px;
		
		vertical-align:top;
	}
	article a.shareTW:hover, article a.shareFB:hover {
		background-position:0 -32px;
		text-decoration:none;
	}
	article a.shareWP {
		background:url(whatsapp.gif) 0 0 no-repeat;

		display:inline-block;
		margin:0;
		width:32px;
		height:32px;
		overflow:hidden;

		line-height:0;
		font-size:0;
		text-indent:-999px;
		
		vertical-align:top;
	}
	article a.shareWP:hover, article a.shareWP:hover {
		background-position:0 -32px;
		text-decoration:none;
	}
	
	.trecho {}


footer {
	position:absolute;
	width:100%;
	bottom:0;
	clear:both;
	padding:0.5em 0;
	text-align:center;

	background-color:#fff;
	border-top:1px solid #ccc;
	color:#666;
	text-align:middle;
}
	footer a {
		font-weight:bold;
		color:#0b98e1;
		text-decoration:none;
	}
	footer a:hover {
		text-decoration:underline;
	}
	footer input {
		vertical-align:middle;
	}

@media all and (max-width: 900px) {
	header {
		text-align:center;
	}
	
	header h1, header div h2 {
		display:none;
	}
	
	header div {
		float:none;
	}
	
	header select, header select:focus {
	    font-size:16px;
	}

	#screen {
		clear:both;
		width:90%;
	}
}