.demo {
  width: 200px;
  height: 200px;
  background-color: #0f0;
}

.logitem {
  background-color: #eee;
  padding: 1px;
  margin: 1px;
  font-family: monospace;
}

.logitem .timeandmodule {
  width: 200px;
  color: #007;
  margin: 1px;
  background-color: #ddd;
  padding: 1px;
  font-size: 11px;
  text-align: center;
}

.logitem .module {
  color: #070;
}

.logitem .messagecont {
  background-color: #ccc;
  margin-left: 10px;
}

.logitem .file {
  color: #007;
  margin-left: 10px;
  font-size: 10px;
}

.logitem .level {
  width: 50px;
  margin: 1px;
  margin-left: 5px;
  background-color: #fff;
  color: #000;
  padding: 1px;
  text-align: center;
  box-shadow: 5px 5px 4px 5px #888888;
}

.logitem.raw {
  background-color: #aaf;
  font-weight: bold;
}

.logitem.error .level {
  color: #700;
  font-weight: bold;
}

.logitem.warn .level {
  color: #770;
}

.logitem.info .level {
  color: #070;
}

.logitem.debug .level {
  color: #007;
}

.logitem.trace .level {
  color: #077;
}

.logitem .msg {
  width: 889px;
  margin: 1px;
  margin-left: 1px;
  background-color: #333;
  color: #ff0;
  padding: 5px;
}

.logitem.raw .msg {
  background-color: #ffa;
  color: #00f;
  font-weight: bold;
}

.logitem.error .msg {
  background-color: #ffa;
  color: #f00;
  font-weight: bold;
}

.log {
  width: 1200px;
  height: 500px;
  overflow: scroll;
  background-color: #ccc;
  padding: 1px;
  margin: 1px;
}

.labeled {
  padding: 1px;
  margin: 1px;
  background-color: #eee;
}

.labeled .label {
  padding-left: 2px;
  padding-right: 4px;
  font-family: monospace;
}

.labeled .content {
  padding: 1px;
}

.textinput {
  font-family: monospace;
  padding: 3px;
  font-size: 14px;
}

.dropimage {
  background-color: #aaa;
  border-style: dashed;
  border-width: 1px;
  padding: 2px;
}

.dropimage.dragover {
  background-color: #00f;
  background-color: #7f7;
  border-style: dotted;
  border-width: 2px;
  padding: 1px;
}