@font-face {
    font-family: FontAwasome;
    src: url("/wiki/fonts/awasome.woff");
}

body {
    color: #c4c4c4;
    background-color: #303841;
    font-family: Verdana, sans-serif;
    margin: 8px;
}

a {
    color: #589df6;
    text-decoration: none;
}

input, textarea, a.button, button.button, input[type=file]::file-selector-button {
    font-size: 13px;
    color: #c9c8b8;
    outline: none;
}

input { font-family: inherit; }

input[type=text], input[type=password] {
    padding: 4px 6px;
    background-color: #404552;
    border: 1px solid #2b2e39;
    border-radius: 2px;
}

input[type=submit], a.button, button.button, input[type=file]::file-selector-button {
    border: 1px solid #2b2e39;
    border-radius: 2px;
    background-color: #404552;
    padding: 6px 12px;
    cursor: pointer;
    min-width: 3em;
}

input[type=submit].active, a.button.active { background-color: #4c5863; }

input[type=submit] { box-sizing: content-box; }

textarea {
    background-color: #303841;
    border: 1px solid #4c5863;
    font-family: inherit;
}

textarea.content {
    width: 100%;
    height: calc(100vh - 58px);
    box-sizing: border-box;
}

div.message {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 16px 0;
    text-align: center;
    font-size: 15px;
}

div.controls {
    width: 100%;
    box-sizing: border-box;
    padding-top: 8px;
    text-align: center;
}

a.button, button.button, input[type=file]::file-selector-button {
    display: inline-block;
    text-align: center;
}

button.button { box-sizing: content-box; }

button.button span.small { font-size: 12px; }

#menu {
    float: right;
    min-height: 32px;
}

#content {
    clear: both;
    width: 80%;
    margin: 0 auto;
    font-size: 13px;
}

#content h1 {
    font-size: 24px;
    text-shadow: 0 1px 1px #171b1d;
}

#content pre {
    font-family: monospace;
    color: #8b9fab;
    padding-left: 8px;
    border-left: 2px solid #5e6b73;
}

#content p code,
#content li code {
    font-family: monospace;
    font-size: 11px;
    background-color: #3d4751;
    padding: 1px 4px;
    border-radius: 2px;
}

#content hr {
    width: 90%;
    height: 0;
    border-top: 1px solid #272d2f;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #393f41;
}

#content table, #content th, #content td {
    font-size: 13px;
    border: 1px solid #4c5863;
}

#content th, #content td { padding: 3px 6px; }

#content table { border-collapse: collapse }

#content th {
    text-shadow: 0 1px 0 #2e3436;
    background-color: #3d4751;
}

#content th sup { font-size: 10px; }

#content blockquote {
    border-left: 2px solid #8dac4b;
    margin-left: 0;
    padding-left: 8px;
    color: #a3c260;
}

#content ul, #content ol { padding-left: 24px; }

#content summary { cursor: pointer; }

#content ul.attachments { padding-left: 11px; }

#content ul.attachments li { padding-left: 6px; }

#content ul.attachments li::marker {
    font-family: FontAwasome;
    font-size: 90%;
    content: '';
}

#content ul.attachments li.restricted::marker { content: ''; }

#bookmarks {
    position: absolute;
    top: 0;
    left: 0;
}

#bookmarks .bookmark {
    position: relative;
    width: fit-content;
    min-width: 2em;
    margin: 4px 0;
    background-color: #202526;
}

#bookmarks .bookmark a {
    display: block;
    box-sizing: border-box;
    padding: 4px 6px;
    text-align: center;
    color: #777d7e;
    font-size: 13px;
    font-weight: bold;
}

#bookmarks .bookmark a span:nth-child(2),
#bookmarks .bookmark a:hover span:first-child {
    display: none;
}

#bookmarks .bookmark a:hover span:nth-child(2) {
    display: block;
    padding: 0 4px;
}

.inline { display: inline-block; }

.nowrap { white-space: nowrap; }

.left { text-align: left; }

.error,
.warning,
.info {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    font-weight: bold;
    font-size: 13px;
    padding: 20px 40px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.error {
    background-color: #de4f4f;
    color: white;
}

.warning {
    background-color: #f6a338;
    color:white;
}

.info {
    background-color: #457bc1;
    color: white;
}

.emphasis { font-style: italic; }

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    margin-top: -1px;
    padding: 0 4px;
    background-color: #404552;
    border: 1px solid #2b2e39;
    z-index: 1;
}

.dropdown-content.right { right: 0; }

.dropdown:hover .dropdown-content { display: block; }

.dropdown:hover .dropdown-content input[type=submit]:hover { color: #589df6; }

.dropdown .button {
    position: relative;
    z-index: 2;
}

.dropdown:hover .button {
    border-bottom: 1px solid #404552;
    display: block;
}

.dropdown-content input[type=submit] { border: none; }

.mini-button {
    display: inline-block;
    color: white;
    font-size: 8px;
    padding: 1px 3px !important;
    text-transform: uppercase;
    box-sizing: border-box !important;
}

.mini-button.regular { background-color: #525c5f !important; }

.mini-button.active { background-color: #457bc1 !important; }

a.mini-button {
    border: 1px solid #2b2e39;
    border-radius: 2px;
}

.symbolic {
    font-family: FontAwasome;
    font-size: 90%;
}

.icon-regular {
    width: 12px;
    height: 12px;
}

.details {
    color: #5e6b73;
    font-size: 11px;
    margin: -8px 0 16px 0;
}

.tooltip {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    top: -6px;
    left: 100%;
    margin-left: 8px;
    padding: 6px 8px;
    color: #8b9fab;
    background-color: #2b2e39;
    border-radius: 2px;
}

.has-tooltip {
    position: relative;
    display: inline-block;
}

.has-tooltip:hover .tooltip {
    visibility: visible;
    transition: visibility 0s linear 1s;
}

.has-tooltip .tooltip::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #2b2e39 transparent transparent;
}