@font-face {
  font-family: 'vga';
  src: url('font.ttf');
  src: url('font.ttf')  format('truetype');
}

html, body { margin:0; padding:0;
 font-smooth: never;
 -webkit-font-smoothing : none;
 font-size: 24px; 
 width:100%;
} 

body {
 background: #000;
 color: #aaa;
 font-family: 'vga', monospace;
}

pre {
 font-family: 'vga', monospace;
 font-size: 0.7em;
}

body > nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap; 
  background-color: #0a0;
}
body > nav ul li a {
 display:inline-block;
 color: #000;
 text-decoration: none;
 padding: 7px 10px;
 font-size: 1em;
 font-smooth: never;
 -webkit-font-smoothing : none;
}

body > nav ul li.disabled > a {
 color: #5f5;
}

body > nav ul li a.active {
 background-color: #111;
 color: #0a0;
}

form > div  input[type=text], form > div select, form > div input[type=password], form > div input[type=number]{
 background: #555;
 font-size: 24px;
 font-family: 'vga', monospace;
 outline: none;
 border: none;
 color: #aaa;
 padding: 5px;
}

form > div button {
 background: transparent;
 color: #0a0;
 padding: 5px;
 border: none;
 outline:none;
 font-family: 'vga', monospace;
 font-size: 24px;
 cursor: pointer;
}

form > div button:focus, form > div button:hover {
 background: #0a0;
 color: #111;
}

form > div input[type=text]:focus, form > div select:focus, form > div input[type=password]:focus, form > div input[type=number]:focus {
 background: #aaa;
 color: #000;
}

form > div select option {
 color: #000;
 background: #aaa;
}

form > div > label {
 display:inline-block;
 width: 40%;
 text-align: right;
 padding-right: 17px;
}

form > div {
 padding: 5px;
}

.info {
 color: #55f;
 font-size: 17px;
}

.centered {
 text-align: center;
}

[data-update] {
 cursor:pointer;
}

[data-update]:hover {
 background: #ff5;
 color: #000;
}

table td{
 -webkit-font-smoothing : none;
 font-size: 17px;
 border: solid 2px #555;  
 padding: 3px;

}

table {
 border-collapse: collapse;
}

table thead td {
 text-align: center;
 width: 10px;
}


table.list tbody tr:nth-child(even) {
 color: #ff5;
}

table.list {
 width:97%;
 border: solid 3px #00c;
 margin: 0 1%;
}

table.list thead tr:first-child {
 background: #00c;
 color: #fff;
}
table.list thead tr:nth-child(2) td {
 padding:3px;
}

table.list input {
 background: #555;
 border:none;
 outline: none;
 font-family: 'vga', monospace;
 color: #aaa;
 font-size: 17px;
 padding: 5px;
}

table.list input:focus {
 background: #aaa;
 color: #000;
}


.inputtd100 {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

.infobox {
 color:#ff5;
 width: 50%;
 margin: 15px auto;
 border: solid 4px #ff5;
 padding: 10px;
}

a.factive {
 text-decoration:none;
 color: #5f5;
}
a.finactive {
 text-decoration:none;
 color: #f55;
}
a.factive:hover {
 text-decoration:none;
 background: #5f5;
 color: #000;
}
a.finactive:hover {
 text-decoration:none;
 background: #f55;
 color: #000;
}

table a {
 text-decoration:none;
 color:inherit;
 padding: 2px;
 display:inline-block;
}
table a:hover {
 text-decoration:none;
 color:#000;
 background: #ff5;
}