body{
	margin:0;
	padding:0;
}

#grade{
	display: table;
	width:100%;
	height:100%;
}

#grade > div:first-child{
	border:1px solid green;
	height: 5%;
}

#grade > div:last-child{
	border:1px solid black;
	height:95%;
}

.titulo{
	width:100%;
	height:100%;
}

.titulo > tr {

}

/**.titulo tr td:first-child{
	width:35px;
	background-image: url('icons/menu.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 25px 25px;
}*/

.icone-trocar{
	width:35px;
	background-image: url('icons/trocar.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 25px 25px;
}

.titulo tr td {
	text-align: center;
	font-family: arial;
	font-weight: bold;
	letter-spacing: 2px;
}

#topo{
	position: absolute;
	width: 100%;
	padding-top:10px;
	padding-bottom: 10px;
	height:40px;
}

.faixa{
	width: 100%;
	height:20px;
	position: absolute;
	top:60px;
}

.faixa {
	width: 100%;
	height: 19px;
	display: table;
	border-bottom:1px solid black;
	border-top:1px solid black;
}

.faixa > div {
	display: table-cell;
}

.pagina {
	position: absolute;
	top:80px;
	left:0;
	right:0;
	padding:5px;
}

.pagina fieldset {
	margin-top:10px;
}

.pagina legend {
	font-weight: bold;
}

.lista {
	width:100%;
	border-collapse:collapse;
}

.lista > thead {
	background-color: rgba(0,100,0,0.55);
}

.lista > thead > tr > td {
	padding: 5px;
	font-weight: bold;
}

.lista > tbody > tr > td {
	padding: 5px;
}

.linha-par {
	background-color: rgba(0,100,0,0.1);
}

.linha-impar {
	background-color: rgba(0,100,0,0.25);
}

.faixa-ponta-preta {
	background-color: black;
	z-index: 100;
}

.faixa-ponta-vermelha {
	background-color: red;
}

.faixa-grau {
	border-right: 5px solid white;
}

.faixa-branca{
	/** nao precisa preencher */
}

.faixa-cinza-branca {
	background-color: grey;
}

.faixa-cinza {
	background-color: grey;
}

.faixa-cinza-preta {
	background-color: grey;
}

.faixa-amarela-branca {
	background-color: yellow;
}

.faixa-amarela {
	background-color: yellow;
}

.faixa-amarela-preta {
	background-color: yellow;
}

.faixa-laranja-branca{
	background-color: orange;
}

.linha-branca {
  position: absolute;
  top: 50%;
  left: 0;
  width: 70%;
  height: 2px;
  background-color: white;
  transform: translateY(-50%);
}

.linha-preta {
  position: absolute;
  top: 50%;
  left: 0;
  width: 70%;
  height: 2px;
  background-color: black;
  transform: translateY(-50%);
}

.faixa-laranja {
	background-color: orange;
}

.faixa-laranja-preta {
	background-color: orange;
}

.faixa-verde-branca {
	background-color: green;
}

.faixa-verde {
	background-color: green;
}

.faixa-verde-preta {
	background-color: green;
}

.faixa-azul {
	background-color: blue;
}

.faixa-roxa {
	background-color: purple;
}

.faixa-marrom {
	background-color: brown;
}

.faixa-preta {
	background-color: black;
}

.login{
	border:1px solid white;
	color: white;
	display: table;
	width: 100%;
	height: 100%;
}

.login > div{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.login input {
	border:1px solid black;
	margin:5px;
	padding:5px;
	letter-spacing: 2px;
}

.login span {
	font-weight: bold;
	letter-spacing: 2px;
}

.login button{
	border: 1px solid white;
	margin: 7px;
	padding: 7px;
	background-color: black;
	color: white;
	font-weight: bold;
	letter-spacing: 2px;
}

.login-fundo {
	background-color: black;
	background-image: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)), url('icons/logo.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 170%;
}

.dados-pessoais span{
	font-weight: bold;
}

.menu{
	background-color: white;
	position: absolute;
	z-index: 100;
	width:100%;
	border:3px solid black;
	padding-bottom: 20px;
	display: none;
}

.menu div {
	position: absolute;
	top:10;
	right:20;
}

.menu td {
	padding:20px;
}