/*
 * This file was modified from BOOTSTRA.386 (https://github.com/kristopolous/BOOTSTRA.386)
 * licensed under the Apache License, Version 2.0 (https://www.apache.org/licenses/LICENSE-2.0).
 */

@font-face {
  font-family: 'DOS';
  font-style: normal;
  font-weight: normal;
  src: url('fonts/Fixedsys500c.woff') format('woff'),
       url('fonts/Fixedsys500c.ttf') format('truetype');
}

html { font-size: 100%; min-height: 100%; }
body {
  margin: 0;
  font-family: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 18px;
  line-height: 20px;
  color: #bbbbbb;
  background-color: #000084;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: #fefe54; text-decoration: none; }
a:hover, a:focus { color: #fefe54; background: #aa5500; text-decoration: none; }

img { max-width: 100%; vertical-align: middle; border: 0; }
.rounded, .img-thumbnail { border-radius: 0 !important; }
.img-thumbnail { padding: 9px 4px; background: #fff; border: 2px solid #000; }

p { margin: 0 0 20px; }
.lead { padding: 9px 14px; margin: 9px 4px; font-size: 18px; color: #fff; border: 2px solid #bbb; }
small, .small { font-size: 100%; }
strong, b { font-weight: normal; color: #fff; }
em, i, cite, var, address, dfn { font-style: normal; color: #fff; }

.text-muted { color: #bbbbbb !important; }
.text-warning { color: #fff !important; }
.text-danger { color: #fff !important; }
.text-info { color: #000 !important; }
.text-success { color: #00aa00 !important; }
.text-white { color: #fff !important; }

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
  margin: 0;
  font-family: inherit;
  font-weight: normal;
  font-size: 18px;
  line-height: 20px;
  color: #fff;
}
h1,.h1 { text-transform: uppercase; }
h2,.h2 { text-align: center; white-space: nowrap; }
h3::before,.h3::before { content: ">>> "; }
h3::after,.h3::after { content: " <<<"; }
h4,.h4 { color: #fe54fe; }

.page-header { padding: 20px; margin: 20px 0; background: #00aaaa; }
.page-header h1 { color: #000; }
hr { margin: 6px 0 7px; border: 0; border-bottom: 2px solid #fff; }
blockquote { padding: 0 0 0 15px; margin: 0 0 20px; border-left: 5px solid #bbb; }
blockquote p { margin-bottom: 0; font-size: 18px; line-height: 20px; }

code, pre {
  font-family: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 18px;
  border-radius: 0;
}
code { padding: 0; color: #fff; background: #000; border: 0; }
pre { padding: 0; margin: 0 0 10px; line-height: 20px; color: #bbb; background: #000; border: 0; }

/* Forms */
label, input, button, select, textarea, .form-control {
  font-family: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 18px;
  font-weight: normal;
  line-height: 20px;
}
.form-control,
select.form-control,
textarea.form-control,
input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="search"], input[type="tel"], input[type="number"], input[type="date"],
input[type="time"], input[type="datetime-local"] {
  height: auto;
  padding: 0;
  color: #000;
  background: #bbb;
  border: 2px solid #000;
  border-radius: 0;
  box-shadow: none;
}
textarea.form-control { height: auto; }
.form-control:focus {
  color: #000;
  background: #bbb;
  border-color: #000;
  outline: 0;
  box-shadow: none;
}
.form-control::placeholder { color: #555; opacity: 1; }
.form-control:disabled, .form-control[readonly] { background: #bbb; cursor: not-allowed; }
.form-group { margin-bottom: 20px; }
.form-text { color: #e1e1e1 !important; }
.input-group-text { color: #000; background: #bbb; border: 0; border-radius: 0; }
.custom-select { border-radius: 0; background-color: #bbb; color: #000; }

/* Buttons */
.btn {
  padding: 0 10px;
  margin-bottom: 20px;
  font-family: inherit;
  font-size: 18px;
  line-height: 20px;
  font-weight: normal;
  color: #000;
  background: #bbb;
  border: 0;
  border-radius: 0;
  box-shadow: 10px 10px 0 #000;
  cursor: pointer;
  transition: none;
}
.btn::before { content: "< "; }
.btn::after { content: " >"; }
.btn:hover, .btn:focus { color: #fff; background: #555; border: 0; box-shadow: 10px 10px 0 #000; }
.btn:hover::before, .btn:hover::after, .btn:focus::before, .btn:focus::after { color: #fff; }
.btn:active, .btn.active { transform: translate(10px,10px); box-shadow: none !important; }
.btn:disabled, .btn.disabled { box-shadow: none; cursor: default; opacity: .65; }
.btn-primary, .btn-secondary { color: #000; background: #bbb; border-color: #bbb; }
.btn-success { color: #000; background: #00aa00; border-color: #00aa00; }
.btn-danger { color: #fff; background: #aa0000; border-color: #aa0000; }
.btn-warning { color: #000; background: #aa5500; border-color: #aa5500; }
.btn-info { color: #000; background: #00aaaa; border-color: #00aaaa; }
.btn-dark { color: #fff; background: #555; border-color: #555; }
.btn-link { color: #fefe54; background: transparent; box-shadow: none; }
.btn-link:hover { color: #fefe54; background: #00aa00; }
.btn-lg { padding: 10px; font-size: 18px; border-radius: 0; }
.btn-lg::after { content: " \00BB  >"; }
.btn-sm { padding: 0; font-size: 18px; border-radius: 0; }
.btn-group > .btn { border-radius: 0 !important; }

/* Labels and badges */
.label,
.badge {
  display: inline-block;
  padding: 0 12.4px;
  font-size: 18px;
  line-height: 20px;
  color: #ffffff;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #555555;
}


.label:empty,
.badge:empty {
  display: none;
}


.label-important,
.badge-important {
  background-color: #aa0000;
}

.label-important[href],
.badge-important[href] {
  background-color: #aa0000;
}

.label-warning,
.badge-warning {
  background-color: #a85400;
}

.label-warning[href],
.badge-warning[href] {
  background-color: #a85400;
}

.label-success,
.badge-success {
  background-color: #00aa00;
}

.label-success[href],
.badge-success[href] {
  background-color: #00aa00;
}

.label-info,
.badge-info {
  background-color: #000000;
}

.label-info[href],
.badge-info[href] {
  background-color: #000000;
}

.label-inverse,
.badge-inverse {
  background-color: #555555;
}

.label-inverse[href],
.badge-inverse[href] {
  background-color: #555555;
}

/* Tables */
.table { width: 100%; margin-bottom: 20px; color: #bbb; background: transparent; }
.table th, .table td { padding: 8px; line-height: 20px; vertical-align: top; border-top: 2px solid #ddd; }
.table th { font-weight: normal; }
.table thead th { border-bottom: 2px solid #ddd; }
.table-bordered { border: 2px solid #ddd; border-radius: 0; }
.table-bordered th, .table-bordered td { border: 2px solid #ddd; }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table-hover tbody tr:hover { color: inherit; background: #555; }
.table-success, .table-success > th, .table-success > td { background: #000; color: #00aa00; }
.table-danger, .table-danger > th, .table-danger > td { background: #aa0000; color: #fff; }
.table-warning, .table-warning > th, .table-warning > td { background: #00aaaa; color: #000; }
.table-info, .table-info > th, .table-info > td { background: #000; color: #bbb; }

/* Alerts */
.alert { padding: 8px 35px 8px 14px; margin-bottom: 20px; color: #fff; background: #00aaaa; border: 1px solid #00aaaa; border-radius: 0; }
.alert-success { color: #00aa00; background: #000; border-color: #000; }
.alert-danger { color: #fff; background: #aa0000; border-color: #aa0000; }
.alert-warning { color: #fff; background: #00aaaa; border-color: #00aaaa; }
.alert-info { color: #bbb; background: #000; border-color: #000; }
.alert .close { color: #000; text-shadow: none; }

/* Navigation */
.nav { list-style: none; }
.nav-link { color: #000; border-radius: 0 !important; }
.nav-link::first-letter { color: #aa0000; }
.nav-link:hover, .nav-link:focus { color: #bbb; background: #000; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #bbb; background: #fefe54; }
.nav-tabs { border-bottom: .5em solid #bbb; }
.nav-tabs .nav-link { border: 0; color: #000; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { border: 0; background: #000; }
.nav-tabs .nav-link.active { color: #bbb; background: #000084; border: 0; }
.navbar .nav-button {
    appearance: none;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}
.navbar-form-inline {
    margin: 0;
}

.navbar .nav-button {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

/* Navbar: Bootstrap 4 markup, Bootstrap 2/DOS appearance */
.navbar { margin-bottom: 20px; padding: 0 12px; background: #bbb !important; border-radius: 0; }
.navbar-brand { padding: 0; margin-right: 20px; font-size: 18px; line-height: 20px; color: #000 !important; }
.navbar-nav { margin: 0; }
.navbar-nav .nav-link { padding: 0 10px !important; line-height: 20px; color: #000 !important; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { color: #bbb !important; background: #000; }
.navbar-nav .active > .nav-link, .navbar-nav .nav-link.active { color: #fff !important; background: #00aaaa; }
.navbar-toggler { padding: 0 10px; color: #000; background: #bbb; border: 0; border-radius: 0; }
.navbar-toggler-icon { width: 1em; height: 1em; background-image: none !important; }
.navbar-toggler-icon::before { content: "≡"; color: #000; }

/* Dropdowns */
.dropdown-menu { min-width: 160px; padding: 9px 4px; margin: 0; color: #000; background: #bbb; border: 1px solid #000; border-radius: 0; box-shadow: 0 0 0 5px #bbb; }
.dropdown-item { padding: 0 10px; font-size: 18px; line-height: 20px; color: #000; }
.dropdown-item:hover, .dropdown-item:focus { color: #bbb; background: #000; }
.dropdown-item.active, .dropdown-item:active { color: #000; background: #fefe54; }
.dropdown-divider { border-top: 1px solid #000; }

/* Cards replace Bootstrap 2 wells/panels */
.card {
    color: #bbbbbb;
    background-color: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

.card-header {
    color: #ffffff;
    background-color: transparent;
    border-color: transparent;
    border-radius: 0 !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-title {
    color: #ffffff;
}

.card-footer {
    color: #bbbbbb;
    background-color: transparent;
    border-color: transparent;
    border-radius: 0 !important;
}

/* Original BOOTSTRA.386 hero-unit, adapted for Bootstrap 4 */

.jumbotron,
.hero-card {
    color: #ffffff;
    background-color: #00aaaa;
    border: 4px double #ffffff;
    border-radius: 0;
    box-shadow: 0 0 0 4px #00aaaa;
    padding: 1rem;
}

.jumbotron h1,
.jumbotron h2,
.jumbotron h3,
.jumbotron h4,
.jumbotron h5,
.jumbotron h6,
.jumbotron .display-1,
.jumbotron .display-2,
.jumbotron .display-3,
.jumbotron .display-4,
.hero-card h1,
.hero-card h2,
.hero-card h3,
.hero-card h4,
.hero-card h5,
.hero-card h6 {
    color: #ffffff;
}

.jumbotron h1,
.hero-card h1 {
    text-align: center;
}

/* Badges / pagination / breadcrumbs */
.badge { font-size: 18px; font-weight: normal; border-radius: 0; color: #000; background: #bbb; }
.badge-success { background: #00aa00; }
.badge-danger { color: #fff; background: #aa0000; }
.badge-warning { background: #aa5500; }
.badge-info { background: #00aaaa; }
.pagination { border-radius: 0; }
.page-link { color: #fefe54; background: #000084; border: 0; border-radius: 0 !important; }
.page-link:hover { color: #bbb; background: #000; }
.page-item. active .page-link { color: #000; background: #fefe54; border-color: #fefe54; }
.page-item.disabled .page-link { color: #555; background: #000084; }
.breadcrumb { padding: 0; margin-bottom: 20px; background: transparent; border-radius: 0; }
.breadcrumb-item + .breadcrumb-item::before { color: #bbb; content: ">"; }

/* Modals/popovers/tooltips */
.modal-content { color: #bbb; background: #000084; border: 2px solid #bbb; border-radius: 0; box-shadow: 10px 10px 0 #000; }
.modal-header, .modal-footer { border-color: #bbb; }
.close { color: #fff; text-shadow: none; opacity: 1; }
.popover { font-family: inherit; font-size: 18px; color: #000; background: #bbb; border: 1px solid #000; border-radius: 0; box-shadow: 10px 10px 0 #000; }
.popover-header { color: #000; background: #00aaaa; border-radius: 0; }
.tooltip { font-family: inherit; font-size: 18px; }
.tooltip-inner { color: #bbb; background: #000; border-radius: 0; }

/* Progress/list groups */
.progress { height: 20px; background: #000; border-radius: 0; }
.progress-bar { color: #000; background: #00aaaa; }
/* List groups: terminal-style output */

.list-group {
    padding: 0;
    margin: 0;
    list-style: none;
}

.list-group-item {
    display: flex;
    align-items: baseline;
    gap: 1rem;

    padding: 0;
    margin: 0;

    color: #bbbbbb;
    background: transparent;
    border: 0;
    border-radius: 0 !important;
}

/* DOS prompt / list marker */
.list-group-item::before {
    content: "> ";
    flex: 0 0 auto;
    color: #ffffff;
}

/* Push secondary/trailing content toward the right */
.list-group-item > :last-child {
    margin-left: auto;
}

/* Linked list items */
a.list-group-item,
.list-group-item-action {
    color: #fefe54;
}

a.list-group-item:hover,
a.list-group-item:focus,
.list-group-item-action:hover,
.list-group-item-action:focus {
    color: #fefe54;
    background: #aa5500;
    text-decoration: none;
}

/* Active item */
.list-group-item.active {
    color: #ffffff;
    background: #00aaaa;
    border: 0;
}

/* Evennia conveniences */
.main-content { color: #bbb; flex: 1 0 auto; }
.footer { color: #bbb; background: #000084 !important; padding-bottom: 10px; }
.footer a { color: #fefe54 !important; }