@font-face {
  font-family: 'fixedsys';
  src: url("../fonts/fsex300-webfont.eot");
  src: url("../fonts/fsex300-webfont.eot?#iefix") format('embedded-opentype'),
       url("../fonts/fsex300-webfont.woff") format('woff'),
       url("../fonts/fsex300-webfont.ttf") format('truetype'),
       url("../fonts/fsex300-webfont.svg#fixedsys") format('svg');
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
  font-smooth: never;
}

.system {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAHklEQVQoU2NkYGD4z8DAwMiAACh8nBIwjSAFQ98EAE3kEAmbk0M6AAAAAElFTkSuQmCC') repeat;
  margin: 0;
  padding: 0;
  font-family: 'fixedsys' !important;
  font-size: 16px !important;
}

.system * {
  font-family: 'fixedsys' !important;
  font-size: 16px !important;
  font-weight: normal !important;
}

.system h1,
.system h2,
.system h3,
.system h4,
.system h5,
.system h6 {
  margin: 0 0 8px 0;
  padding: 0;
}

.system small {
  color: #999;
}

.system a {
  color: #00A;
  font-size: 16px !important;
  text-decoration: none;
}

.system a:hover {
  color: #00F;
  font-size: 16px !important;
  text-decoration: underline;
}

.system img {
  vertical-align: middle;
}

.system p {
  padding: 0;
  margin: 0 0 16px 0;
}

.system ul {
  margin: 0 0 16px 0;
  padding: 0 0 0 16px;
  list-style-type: none;
}

.system li {
  word-break: break-all;
}

.system li:before {
  content: "- ";
  margin-left: -16px;
}

.system div.panel {
  border: 3px double #000;
  margin: 3px;
  box-shadow: 1px 1px 2px #000;
  background: #FFF;
}

.system div.panel > div.content {
  padding: 10px;
}

.system div.panel > div.console {
  background: #222;
  color: #AAA;
  padding: 9px;
  margin: 1px;
}

.system div.panel > div.editor {
  background: #00A;
  color: #FFF;
  padding: 9px;
  margin: 1px;
}

.system .footer {
  color: #999;
  padding: 0px 16px !important;
}

.system img.thumbnail-align-left {
  float: left !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 8px 0 0;
}

.system .inline {
  display: inline !important;
}

.system .pull-right {
  float: right;
  margin: 0 0 0 8px;
}

.system .row {
  display: flex;
}

.system .column {
  flex: 1;
}

@media (max-width: 48em) {
  .system .row {
    flex-direction: column;
  }

  .system .column {
    flex: 0 0 auto;
  }
}

@media (min-width: 48em) {
  .system .container {
    margin: 0 auto;
    width: 800px;
  }

  .system .column-tenth {
    flex: 0 0 10%;
  }

  .system .column-fifth {
    flex: 0 0 20%;
  }

  .system .column-quarter {
    flex: 0 0 25%;
  }

  .system .column-third {
    flex: 0 0 33.3333334%;
  }

  .system .column-half {
    flex: 0 0 50%;
  }
}

.system .twitter {
  padding: 2px 1px 0 2px;
  height: 16px;
  background: #777;
}