/* Copyright 2013 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

#about-info {
  -webkit-column-width: 350px;
}

#about-info > div {
  -webkit-column-break-inside: avoid;
  width: 350px;
}

#about-info h2 {
  color: rgb(74, 142, 230);
  font-size: 100%;
  margin-bottom: 0;
}

#about-info .err {
  color: red;
}

#about-info .section {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.about-details {
  width: 100%;
}

.about-details tr:nth-child(odd) {
  background: rgb(239, 243, 255);
}

#typeInfo .error {
 background: rgb(255, 204, 204);
}

#typeInfo .warning {
 background: rgb(255, 255, 204);
}

#typeInfo .disabled {
 background: rgb(224, 224, 224);
}

#typeInfo .ok {
 background: rgb(204, 255, 204);
}

@-webkit-keyframes highlight1 {
  0% {
    background: rgb(255, 255, 0);
  }
  100% {
    background: #fff;
  }
}

@-webkit-keyframes highlight2 {
  0% {
    background: rgb(155, 158, 166);
  }
  100% {
    background: rgb(239, 243, 255);
  }
}

.about-details [highlighted] {
  -webkit-animation-duration: 3s;
  -webkit-animation-name: highlight1;
  -webkit-animation-timing-function: linear;
}

.about-details [highlighted]:nth-child(odd) {
  -webkit-animation-duration: 3s;
  -webkit-animation-name: highlight2;
  -webkit-animation-timing-function: linear;
}

.about-details .uninitialized {
  color: #7f7f7f;
}

#status {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 300px;
}

#dump-status {
  margin: 2px;
}

#import-status {
  margin: 2px;
}

#traffic-event-container {
  border: 1px solid;
  height: 500px;
  max-width: 500px;
  overflow-y: auto;
}

.traffic-event-entry {
  border: 2px outset;
  padding: 0.5em;
}

.traffic-event-entry:hover {
  background-color: #eee;
}

.traffic-event-entry .time {
  color: #222;
  font-family: sans-serif;
}

.traffic-event-entry .type {
  font-family: sans-serif;
  font-weight: bold;
  margin: 0.5em;
  white-space: nowrap;
}

.traffic-event-entry .details {
  margin: 0.5em;
  overflow-x: auto;
}

.traffic-event-entry .proto {
  display: none;
}

.traffic-event-entry-expanded .proto {
  background-color: #fff;
  border: 1px solid #222;
  display: block;
  max-height: 300px;
  overflow-x: auto;
  overflow-y: auto;
}