/****************
	Commom
*****************/
*												{ margin: 0; padding: 0; }
html, body									{ height: 100%; }
a												{ color: #FF6600; text-decoration: underline; }
a:hover										{ color: #990000; }
a img											{ border: none; }
h1, h2, h3									{ font-family: 'Trebuchet MS', Tahoma, sans-serif; font-weight: normal; }
h1												{ font-size: 16pt; }
h2												{ font-size: 14pt; }
div, span, th, td							{ font: 10pt Arial, Tahoma, Helvetica, sans-serif; color: #333; }

h2						{ display: block; margin: 10px 0 15px 0; border-bottom: 1px solid #333; font-weight: bold; font-size: 18pt; }

/****************
	Container
*****************/
#container	{
	position: relative;
	width: 760px;
	left: 50%;
	margin-left: -380px;
	background: url(img/bg-paper.gif) no-repeat left top;
}

.intro	{
	margin: 5px 14px 30px 20px;
}
.intro h1	{
	font-size: 11pt !important;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.intro p	{
	margin: 5px 0;
}
.intro *	{
	font-size: 8pt;
	color: #666;
}

/****************
	Header
*****************/
#header										{ padding: 14px 60px; }

/****************
	Content
*****************/
#content										{ margin: 0 60px; /*border: 1px solid blue;*/ }

/****************
	Application
*****************/
#application  								{ border-width: 1px 0; border-style: solid; border-color: #D4D4D4; background: #F6F6F6 url(img/bg-form.gif) no-repeat left 10px; }
#application form table					{ margin: 20px; width: 600px; }
#application form table td				{ text-align: center; }
#application form table th.spacer	{ width: 21%; }
#application form select				{ width: 140px; font-size: 10pt; font-weight: bold; color: #333; }
#application form button				{ margin: 5px 10px 20px 260px; padding: 2px 30px; font: bold 13pt Arial, Verdana, sans-serif; color: #666; cursor: pointer; }
#application form .errors				{ font-weight: bold; color: #F00; text-align: center; } 

#application-tabs ul 					{ margin: 5px 0 5px 15px; }
#application-tabs ul li					{ display: inline; margin-right: 4px; padding: 5px 15px; border: 1px solid #D4D4D4; background-color: #EDEDED; cursor: pointer; }


/* Tab All */
#content.tab-all #application-tabs ul li.all					{ background-color: #F6F6F6; border-bottom-color: #F3F3F3; }
/* Tab Bloodtype */
#content.tab-bloodtype #application-tabs ul li.bloodtype	{ background-color: #F6F6F6; border-bottom-color: #F3F3F3; }
#content.tab-bloodtype #application table tr.eyecolor,
#content.tab-bloodtype #application table tr.earlobe		{ display: none; }
/* Tab eyecolor */
#content.tab-eyecolor #application-tabs ul li.eyecolor	{ background-color: #F6F6F6; border-bottom-color: #F3F3F3; }
#content.tab-eyecolor #application table tr.bloodtype,
#content.tab-eyecolor #application table tr.earlobe		{ display: none; }
/* Tab earlobe */
#content.tab-earlobe #application-tabs ul li.earlobe		{ background-color: #F6F6F6; border-bottom-color: #F3F3F3; }
#content.tab-earlobe #application table tr.bloodtype,
#content.tab-earlobe #application table tr.eyecolor		{ display: none; }

#loading						{
	padding: 0;
	text-align: center;
	font-size: 14pt;
	color: #555;
}


/****************
	Result
*****************/
.box-result						{ padding: 10px 20px; }
#result p						{ padding: 3px 0; }
#result hr						{ margin: 10px; }
#result h2						{ font-size: 16pt; }
#result h3						{ color: #039; display: block; margin: 20px 0 15px 0; border-bottom: 1px solid #333; font-weight: bold; font-size: 14pt; }
#result a						{ color: #000080; }
#result a.clear				{ color: #FF6600 !important; padding-right: 15px; }
#result a.recicle				{ background-image: url(../img/loading-recicle.gif); background-position: right bottom; background-repeat: no-repeat; }
#result table.received		{ margin: 10px 30px; }
#result table.received th	{ border-bottom: 1px solid #CCC; padding: 4px; font-weight: bold; border-top: 1px solid #CCC; }
#result table.received td	{ border-bottom: 1px solid #CCC; padding: 4px; text-align: center; width: 100px; }
#result .individual			{ margin: 0 0 30px 0; }

/****************
	Contact Form
*****************/
.contact-form					{ margin-left: 40px; }
.contact-form label			{ display: block; float: left; padding: 4px 0 2px 0; width: 120px; }
.contact-form input,
.contact-form textarea		{ margin: 2px; padding: 2px; font: 8pt Verdana, Arial, sans-serif; }
.contact-form button			{ margin: 20px 20px 20px 125px; padding: 3px 10px; font: bold 11pt Arial, Verdana, sans-serif; color: #333; }
.contact-form .message,
.contact-form .summary		{ margin: 5px 20px 20px 0; padding: 10px 10px 10px 100px; border: 1px solid #CCC; background-color: #FAFAFA; }


/****************
	Highlights
*****************/
#highlights						{ height: 90px; display: none; }

#newsletter 					{ position: absolute; width: 410px; height: 75px; background: #E77817 url(img/ico-mail.gif) no-repeat 20px center; }
#newsletter fieldset 		{ border: none; }
#newsletter legend			{ display: none; }
#newsletter form #email		{ margin-bottom: 8px; font: 8pt Verdana, Arial, sans-serif; padding: 2px; width: 210px; }
#newsletter form				{ display: block; padding: 35px 10px 5px 90px; background: url(img/tit-newsletter.gif) no-repeat 90px 14px; }

#newsletter-response .close{ color: #333; font-size: 8pt; font-weight: normal; text-decoration: underline; cursor: pointer; }
#newsletter-response-text	{ color: #E77817; font-weight: bold; padding: 5px 0; }

#contact							{ position: absolute; left: 490px; width: 200px; height: 75px; background: #7F7F7F url(img/ico-write.gif) no-repeat 40px center; }
#contact a						{ display: block; width: 100%; height: 100%; text-indent: -999em; background: url(img/tit-contato.gif) no-repeat 90px center; }


/****************
	Footer
*****************/
#footer	{
	background: url(img/bg-footer.gif) no-repeat center top;
	padding: 20px;
	text-align: right;
}


.info-code	{
	margin-top: 10px;
	padding-top: 20px;
	border-top: 1px solid #CCC;
}
.demo-code	{
	margin: 20px 0 10px 0;
	padding: 15px;
	border: 1px solid #E77817;
	background-color: #F1F1F1;
	color: #E77817;
}
.demo-code code	{
	color: #000;
}