/* © borism */

html {
    min-height: 100%;
    color: #c8c8c8;
    background: #444d53;
    background: linear-gradient(to bottom, #212121, #444d53);
}

header,
main {
    padding: .309em .609em;
}

header {
    margin-bottom: 1em;
}

body,
.pure-g .content-block,
.content-block .pure-g {
    font-family: 'Comfortaa';
}

h1 {
    font-family: 'Special Elite';
}

@media screen and (max-width: 30em) {
    header .bo-logo {
        font-size: 1em;
    }

    main {
        font-size: 133%;
    }

}

@media screen and (min-width: 30em) {

    body > header > * {
        display: inline-block;
        vertical-align: middle;
    }

    .content-block {
        margin-left: .5em;
        margin-right: .5em;
    }

    .pure-button.icon-small {
        padding: .25em;
    }

}

h1 {
    margin: 0 .306em;
}

header h1 {
    margin-top: .306em;
    color: #fafafa;
}

article > h1 {
    font-size: 1.25em;
}

header a
{
    text-decoration: none;
}

header nav {
    display: inline-flex;
    flex-wrap: wrap;
    margin-right: 3em;
}

.bo-logo {
    font-size: 1.5em;
    color: #c8c8c8;
    margin: 0;
}

button,
input,
optgroup,
select,
textarea
{
    color: #303030;
}

li {
    list-style: none;
}


td, th {
    padding: .25em 1em;
}

.content-block {
    border-radius: 4px;
    color: #303030;
    background-color: #dadada;
    text-align: left;
    margin-bottom: 1em;
    min-width: 12em;
    padding: 1em;
}

.content-block > h1 {
    border-bottom: 1pt solid #303030;
    margin-bottom: .5em;
}

.content-block pre {
    font-size: 75%;
    margin: 0;
}

.connect {
    position: absolute;
    top: .309em;
    right: .309em;
}

.connect img {
    width: 1.25em;
    height: 1.25em;
}

.inline {
    display: inline-block;
}

.invisible {
    display: none;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.no-wrap {
    word-break: keep-all;
    white-space: nowrap;
}

@keyframes fadeOut {
    0% { opacity: 1;}
    100% { opacity: 0; width: 0; height: 0;}
}

.flash-container {
    position: absolute;
    bottom: 2em;
    left: 2em;
    right: 2em;
    display: none;
}

.flash-notice,
.flash-error {
    text-align: center;
    color: white;
    padding: 1em;

}
.flash-notice {
    background-color: #466a46;
}

.flash-error {
    background-color: darkred;
}

.form-error {
    color: darkred;
}

.small {
    font-size: 70%;
}

.big {
    font-size: 130%;
}

.monospace {
    font-family: monospace;
}

.top-right-corner {
    text-align: right;
    margin: .5em .5em 0 0;
}

.edit-btn {
    position: relative;
    z-index: 99;
}

.link-list ul {
    padding: 0;
    margin: .5em 0 .25em 0;
}

.link-list li {
    margin-top: .5em;
}

/* pure-css extensions */

.pure-g [class*=pure-u] {
    font-family: inherit;
}

.pure-button,
.pure-button:visited,
.pure-menu-link:visited
{
    color: #e7e7e7;
    background-color: #595d5e;
    border: 1px solid #595d5e;
    border-radius: 2px;
    box-shadow: 2px 4px 8px -2px rgba(0,0,0,.6);
    display: inline-block;
    cursor: pointer;
    font-family: Comfortaa;
    color: #c8c8c8;
    padding: .638em 1em;
    box-sizing: border-box;
    text-decoration: none;
    margin: .309em;
}

.pure-button:hover,
.pure-menu-link:hover,
.pure-form button[type="submit"]:hover,
.pure-button:active,
.menu-current,
.button-active
{
    background-color: #787b7b;
}

.pure-button:active,
.button-active{
    box-shadow: 1px 2px 4px -2px #595d5e;
    transform: translate(1px, 2px);
}

.pure-button.icon-small {
    width: 1.25em;
    height: 1.25em;
    padding: .5em;
    margin: .125em;
    line-height: 1.25em;
    box-sizing: content-box;
}

html .pure-form-stacked .pure-no-stack input,
html .pure-form-stacked .pure-no-stack button,
html .pure-form-stacked .pure-no-stack select {
    display: inline-block;
    margin-left: .1545em;
    margin-right: .1545em;
}

html .pure-form .pure-button-group button {
    margin: 0;
}

.pure-form legend {
    color: #303030;
    border-bottom: 1px solid #303030;
}

.crud-actions button[type="submit"].pure-button,
.crud-actions .pure-button {
    display: inline-block;
    width: 2.5em;
    margin: .1545em;
}