body, input {
  background: #fff;
  color: #666;
  font: 18px/1.5 FreeSans, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.nav {
  background: #2c2c35;
}
.nav ul {
  list-style: none;
  height: 2.5em;
  margin: 0;
  padding: 0;
}
.nav li {
  float: left;
  line-height: 1em;
  margin: 1.5em 0.5em 0 0;
}
.nav a {
  font-weight: normal;
}
.nav .current a {
  color: #fff;
}
#message {
  color: #9292a8;
  float: right;
  line-height: 1em;
  font-size: 70%;
  margin-top: 2.4em;
}
#message.active {
  color: #fff;
}

.sub {
  margin: 0 auto;
  padding: 0 1em 1.2em;
  width: 400px;
}
.form {
  background: #f4f4f4;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
}
.info .sub {
  padding-bottom: 0;
}

h1 {
  color: #333;
  font-size: 1.4em;
}
h2, p {
  font-size: 1em;
  margin: 1em 0;
}
p:last-child {
  margin-bottom: 0;
}
a {
  color: #39f;
  font-weight: bold;
  text-decoration: none;
}
#feedback {
  font-weight: bold;
}

label, input.text, input.password {
  display: block;
  width: 100%;
}
label {
  color: #555;
  font-size: 0.9em;
  margin-top: 1em;
}
label span {
  color: #999;
}
.form input {
  background: #f4f4f4;
}
input.text, input.password {
  border: none;
  border-bottom: 1px solid #666;
  font-size: 1em;
}
button {
  margin-top: 1.5em;
}
.password input.text, .password input.password {
  display: inline;
  margin-right: 1em;
  margin-top: 1em;
  width: 75%;
}
.password .show {
  float: right;
  font-size: 0.6em;
  font-weight: bold;
  padding-top: 0.5em;
  text-transform: uppercase;
}
.password .show label {
  display: inline;
}
.length, .repeat {
  float: left;
  margin-bottom: 1em;
  width: 47%;
}
.length {
  clear: both;
  margin-right: 6%;
}
.generator input {
  font-family: Monaco, Courier New, monospace;
}

table label {
  display: inline;
}
table input.text {
  display: inline;
  width: 1em;
}

table {
  border-collapse: collapse;
  clear: both;
  margin-top: 1em;
  width: 100%;
}
table label {
  font-size: 1em;
}
table th, table td {
  border-left: 1px solid #ccc;
  padding: 4px 0;
  text-align: center;
}
table th {
  color: #555;
  font-size: 0.5em;
  font-weight: bold;
  text-transform: uppercase;
  width: 30px;
}
table thead th {
  text-transform: none;
}
table thead tr {
  border-bottom: 1px solid #ccc;
}
table tbody th {
  text-align: left;
}
table th:first-child, table td:first-child {
  border: none;
}

@media (max-width: 800px) {
  body { font-size: 14px; }
  .sub { margin: none; width: auto; }
}