p.loginerror {
    background-color: #F00;
}

.toppic {
    background-color: #44F;
    overflow: hidden;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #F44;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #FFF;
  padding: 12px 20px;
  text-align: center;
  font-size: 18px;
  text-decoration: none;
}
.topnav a:hover {
  background-color: #D99;
  color: black;
}
.topnav .active {
  background-color: #FEE;
  color: black;
}
.topnav .right {
  float: right;
}

/* The fixed footer area at the bottom. */
.footer {
    width: 100%;
    background-color: #44F;
    color: white;
    text-align: left;
    padding-left: 20px;
    padding-top: 10px;
    overflow: hidden;
}

/* ---The general file table style------ */

/* Headings. The labels are dark grey changing to black on hover. */
.filetable .heading, .filetable .heading a {
  color: #666;
}

.filetable .heading th {
  padding: 0px;
}

.filetable .heading a {
    text-decoration: none;
}

.filetable .heading a:hover {
    color: #000;
}

.filetable .sorttitle {
  padding: 0px 4px;
  text-align: left;
  font-size: 12px;
  width: 100%;
}

.filetable .sorters {
  padding: 0px 1px;
  text-align: right;
  font-size: 10px;
}

.filetable .sorthead:hover {
    background-color: #FFE;
}

/* The file table rows. All cells centred except for name and description. File names do not wrap but
 * elide. Odd and even row backgrounds different colour and hover changes the background on all. */
.filetable .rows td {
  color: black;
  padding: 8px 12px;
  font-size: 12px;
}

.filetable .heading {
    background-color: #EEF;
}

.filetable .rows:nth-child(even) {
    background-color: #CCF;
}

.filetable .rows:nth-child(odd) {
    background-color: #EEF;
}

.filetable .rows:hover:nth-child(n+2):nth-last-child(n-0)  {
    background-color: #FFE;
}

.filetable .rows .name, .filetable .rows .desc {
  text-align: left;
}

.filetable .rows .name, .filetable .rows .size, .filetable .rows .ctime, .filetable .rows .mtime {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.filetable .rows {
  text-align: center;
}

.filetable .rows .nofilesfound {
    color: #666;
    background-color: #DDF;
    font-style: italic;
    font-size: 18px;
}

/* The ticket table. */
.tickets .rows td {
    color: black;
    padding: 8px 12px;
    font-size: 15px;
}

.tickets .keys {
    text-align: right;
    font-weight: bold;
    font-size: 17px;
}

.tickets .values {
    text-align: left;
}

.tickets .submit {
    font-weight: bold;
    font-size: 17px;
}

.tickets .heading {
    background-color: #F99;
    padding: 8px 12px;
    font-size: 22px;
    font-weight: bold;
}

.tickets .rows:nth-child(even) {
    background-color: #FCC;
}

.tickets .rows:nth-child(odd) {
    background-color: #FEE;
}

.tickets .rows:hover:nth-child(n+2):nth-last-child(n-0)  {
    background-color: #EFF;
}

/* Short tags for the text in fileTable description files. */
/* Blinking text. See https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3 */
.blink {
    animation: blinker 1s step-start infinite;
}

@keyframes blinker {
    50% {
	opacity: 0;
    }
}

.red {
    color: #F00;
}

.orange {
    color: #F80;
}

.yellow {
    color: #FF0;
}

.blue {
    color: #00F;
}

.purple {
    color: #F0F;
}

.green {
    color: #0F0;
}

.underline {
    text-decoration: underline;
}

.strikethrough {
    text-decoration: line-through;
}

.italic {
    font-style: italic
}

.bold {
    font-weight: bold;
}