body {
	text-align: center; /* for automatic centering of images and tables */
	background-color: #FFFFFF; /* para que o fundo se mescle com o fundo das imagens */
	font-family: verdana, arial, helvetica, sans-serif;
}
b, dl, h2, h3, ol, ul {
	text-align: left;
}
h1, h2, h3 { /* titles */
	font-weight: bold;
}
a {
	font-weight: bold;
	/* white-space: nowrap; */
	color: #137E9F;
}
b { /* subtitle */
	display: block;
	margin: 1.5em 0 1.5em 0; /* same as <p>'s top and bottom margin in ie 7 */
}
hr {
	border: thin solid #000000;
	height: thin;
}
blockquote {
	/*font-size: 0.8em;*/
	font-style: italic; /* wiuthout this it seems the quote is part of the text. */
	font-family: tahoma;
}
blockquote i, blockquote cite, blockquote em {
	font-style: normal; /* italics in italics should really be plain */
	padding-left: 2px; /* just a little */
}
blockquote p {
	line-height: 2em; /* always double-space block quotations */
	/* text-align: center; */
}
blockquote.dialogue p {
	line-height: 1em;
}
dl {
	margin-left: 3.5em; /* based on <ul>'s left margin in firefox 2 and ie 7 */
	margin-right: 3.5em; /* same as margin-left */
	padding: 1em; /* at least something */
	border: thin solid #000000;
}
dt {
	font-weight: bold;
	margin: 0.5em 0 0.5em 0;
}
dd {
	text-align: justify;
	margin: 0.5em 0 0.5em 0;
}
label { /* legend */
	display: block;
	/* border: 1px solid #000000; */
	font-size: smaller;
	width: 80%;
	margin-top: 0.8em; /* at least something */
	padding-right: 10%;
	padding-left: 10%;
}
p {
	text-indent: 1em; /* o padrao mais formal parece ser uma identacao pequena mesmo */
	text-align: justify;
}
table {
	padding: 0;
	border: 0;
	border-collapse: collapse;
	margin: 0 auto 0 auto; /* centers on firefox 2 and eliminates vertical margin if existent */
	/* font-family: monospace; o mesmo usado para o <pre> na maioria dos browsers. para dar a idea de codigo. */
}
td, th {
	border: thin solid #000000;
	padding: 4px; /* so um pouquinho */
}
th {
	white-space: nowrap;
	font-weight: bold;
	text-align: center;
}
tfoot {
	font-weight: bold;
	text-align: center;
}
pre { /* schematics */
	border: thin solid #000000;
	margin: 0 auto 0 auto; /* centers on firefox 2 and eliminates vertical margin if existent */
	padding: 1em;
	width: 60%; /* default size to be applied even on very short content */
	text-align: center; 
	/* centered text is preferred, but sometimes we need to align left. in this case, just complement
	the shorter lines with whitespaces until all lines have the same ascii character width */
}
img {
	display: block;
	margin: 0 auto 0 auto; /* centers on firefox 2 */
	border: 0;
}
var {
	padding-right: 4px; /* pelo menos um pouco por causa de ponto final */
	padding-left: 4px; /* diminuimos o word-spacing, portanto precisa compensar com um pouco aqui. */
	white-space: nowrap; /* line breaks are often undesirable inside math expressions */
	word-spacing: -0.07em; 
	/* we want to create an appearance that more or less resembles typical typesetting of
	mathematical expressions. this value is aimed to apply to typical fonts like times new roman
	and arial. */
	/* font-size: 110%;*/
	/* some math symbols are rendered by browsers in a fairly small size. we need a bigger font size. */
}

/*Custom Classes----------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------*/

.draft {
	color: red;
}
a.bonusimg {
	background-image: url('bonus_bg.png');
	border: 1px solid black;
	color: #000000;
	display: block;
	width: 30%;
	margin: 1.5em 0 1.5em 0; /* same as <p>'s top and bottom margin in ie 7 */
	padding: 0 2px 0 2px;
	text-decoration: underline;
}
.version-final, .version-early, .version-draft, .version-empty {
	background-repeat: no-repeat;
	background-position: right;
}
.version-final { background-image: url('version-final.png'); }
.version-early { background-image: url('version-early.png'); }
.version-draft { background-image: url('version-draft.png'); }
.version-empty { background-image: url('version-empty.png'); }
div.buttons {
	text-align: right;
	border: 1px solid gray;
}
h2.biblio {
	text-align: center;
}
p.fn { /* footnote */
	text-indent: 0;
	text-align: left;
	font-size: smaller;
}
p.fn sup {
	font-weight: bold;
	font-size: normal;  /* override: p.fn */
}
p.forbidden {
	text-align: center;
	font-weight: bold;
	color: #000000;
	background-image: url('forbidden_bg.gif'); /* a "police line"-like (used in crime scenes) background */
}
p.math {
	text-align: center;
	position: relative;
	/* white-space: nowrap; /* nao precisa pois sempre usamos <var> dentro. */
}
p.math label {
	display: block;
	position: absolute;
	right: 16;
	top: 2; /* so um pouco pois parece que os browsers assumem top: 0 por padrao */
	font-size: 100%; /* override: label */
}
p.math img {
/* latex images - for math expressions that cannot be represented with html only. obs: make sure
that the font used in the image is sufficiently larger than the default size so that we can at least
avoid some of the disparity that arises when users change the browser's default font size but the
image size remains same. */
	display: inline; /* override: img */
	margin: 0; /* override: img */
	vertical-align: middle;
}
p.undercons { /* under construction */
	color: red;
	font-weight: bold;
}
ol.biblio li {
	line-height: 2em;
}
pre.large {
	width: 75%;
}
pre.small {
	width: 50%;
}
pre.tiny {
	width: 35%;
}
sup.fn { /* footnote */
/* vamos colocar em negrito para diferenciar dos superescritos usados em expressoes matematicas, alem de que
chama mais atencao. */
	font-weight: bold;
}
span.pre {
	border: 1px solid #DDDDDD; /* just a very faint shade of gray */
	font-family: monospace; /* o mesmo usado para o <pre> na maioria dos browsers. para dar a idea de codigo. */
	font-size: 94%; /* so um poco. ie tende a aumentar monospace por alguma razao */
	padding-right: 2px; /* just enough to isolate the block from normal text */
	padding-left: 2px; */ /* just enough to isolate the block from normal text */
	/* white-space: nowrap; */
}
table.qualities-of-energy td.quality0 {
	background-color: #0099FF;
	font-weight: bold;
}
table.qualities-of-energy td.quality1 {
	background-color: #47B3FF;
	font-weight: bold;
}
table.qualities-of-energy td.quality2 {
	background-color: #66CCFF;
	font-weight: bold;
}
table.qualities-of-energy td.quality3 {
	background-color: #99FFFF;
	font-weight: bold;
}
table.qualities-of-energy td.quality4 {
	background-color: #CCFFFF;
	font-weight: bold;
}
table.qualities-of-energy td.quality5 {
	background-color: #FFFFFF;
	font-weight: bold;
}
table.structural {
      	padding: 0;
      	border: 0;
	border-collapse: collapse;
	margin: auto; /* centraliza no firefox 2 */
}
table.structural td, table.structural th {
	padding: 0;
	margin: 0;
	border: 0;
}
td.structural {
	padding: 0;
	margin: 0;
	border: 0;
}
div.details-container {
	background-color: #6C6C6C;
	border: 1px solid #727272;
	float: left;
	margin: 0 16px 0 16px; /* at least some */
	width: 480px;
}
div.details-container h1 { 
	background-color: #878787;
	color: #FFFFFF;
	font-size: 13px;
	font-weight:bold;
	line-height: 26px;
	margin: 0;
	width: 480px;
}
div.details-container div.middle { 
	color: #FFFFFF;
	float: left;
	line-height: 26px;
	padding: 10px;
	width: 460px; /* por causa dofirefox tem q ser menor que 480px;*/
}
div.details-container div.middle label {
	margin: 0px; 
	padding: 0px;
	float: left;
	width: 120px; /* 120 + 320 = 440 = 460 - 20 */
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	/*border: 1px solid black;*/
}
div.details-container div.middle code { 
	float:left;
	font-family:Arial,Helvetica,sans-serif;
	padding:0 0 0 10px;
	width: 320px;
	/*border: 1px solid black;*/
}

/*Unique DIVs-------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------*/

div#social-bookmarking-buttons img { /* override: img */
	display: inline;
	margin: 0;
	border: 0;
}
div#contents ol {
	/* width: 100%; */
	/* warning: don't use this or in ie7 all list markers disappear. */
}
div#contents ol.top {
	margin-top: 0;
	margin-bottom: 0;
}
div#contents li {
	border-bottom: 1px solid #6593CF;
	display: list-item;
	height: 20px;
	list-style-type: decimal;
}
div#contents li.skip {
	border: 0; /* override: see above */
	height: 0; /* override: see above */
	/* use this to avoid empty <li>s that use this class to occupy vertical space in firefox 2 */
	list-style-type: none; /* override */
}
div#contents li a {
	text-decoration: none;
}
div#contents 
li.progress,
li.progress-00,
li.progress-05,
li.progress-10,
li.progress-15,
li.progress-20,
li.progress-25,
li.progress-30,
li.progress-35,
li.progress-40,
li.progress-45,
li.progress-50,
li.progress-55,
li.progress-60,
li.progress-65,
li.progress-70,
li.progress-75,
li.progress-80,
li.progress-85,
li.progress-90,
li.progress-95,
li.progress-100 {
	background-repeat: no-repeat;
	background-position: top right;
	background-image: url('progress_bar.png');
	/* list-style-image: url('progress_bar.png'); */
}

div#contents li.progress-00 {
	background-position: 100% -20; /* for firefox 2, because it doesn't support background-position-y */
	background-position-y: -20;
}
div#contents li.progress-05 {
	background-position: 100% -40;
	background-position-y: -40;
}
div#contents li.progress-10 {
	background-position: 100% -60;
	background-position-y: -60;
}
div#contents li.progress-15 {
	background-position: 100% -80;
	background-position-y: -80;
}
div#contents li.progress-20 {
	background-position: 100% -100;
	background-position-y: -100;
}
div#contents li.progress-25 {
	background-position: 100% -120;
	background-position-y: -120;
}
div#contents li.progress-30 {
	background-position: 100% -140;
	background-position-y: -140;
}
div#contents li.progress-35 {
	background-position: 100% -160;
	background-position-y: -160;
}
div#contents li.progress-40 {
	background-position: 100% -180;
	background-position-y: -180;
}
div#contents li.progress-45 {
	background-position: 100% -200;
	background-position-y: -200;
}
div#contents li.progress-50 {
	background-position: 100% -220;
	background-position-y: -220;
}
div#contents li.progress-55 {
	background-position: 100% -240;
	background-position-y: -240;
}
div#contents li.progress-60 {
	background-position: 100% -260;
	background-position-y: -260;
}
div#contents li.progress-65 {
	background-position: 100% -280;
	background-position-y: -280;
}
div#contents li.progress-70 {
	background-position: 100% -300;
	background-position-y: -300;
}
div#contents li.progress-75 {
	background-position: 100% -320;
	background-position-y: -320;
}
div#contents li.progress-80 {
	background-position: 100% -340;
	background-position-y: -340;
}
div#contents li.progress-85 {
	background-position: 100% -360;
	background-position-y: -360;
}
div#contents li.progress-90 {
	background-position: 100% -380;
	background-position-y: -380;
}
div#contents li.progress-95 {
	background-position: 100% -400;
	background-position-y: -400;
}
div#contents li.progress-100 {
	background-position: 100% -420;
	background-position-y: -420;
}