:root {

    /* colors */

    /* color names */
    --amber: #FFBF00;
    --dark-red: #8B0000;
    --debian: #C70036;
    --freebsd: #990000;
    --green: DarkSeaGreen;
    --grey: #f5f6f9;
    --raspberry: #E30B5D;
    --raspberry-pi2: #C23F3D;
    --raspberry-pi: #CD2356;
    --very-dark-grey: #404040;

    /* IBM 5250 terminal */
    --blue-5250: #0099FF;
    --green-5250: #00FF00;
    --pink-5250: #FF1493;
    --red-5250: #FF0000;
    --turquoise-5250: #AFEEEE;
    --yellow-5250: #FFFF00;

    /* main */
    --color: black;
    --bg-color: var(--grey);

    /* other */
    --alt-color: var(--dark-red);
    --block-bg-color: white;
    --block-color: var(--color);
    --block-header-color: var(--dark-red);
    --code-color: white;
    --code-bg-color: var(--very-dark-grey);
    --header-color: var(--dark-red);
    --table-cell-bg-color: white;
    --table-header-bg-color: #e1e1e1;

    /* width */

    /* absolute */
    --container-width: 70em;
    --code-width: 62em;

    /* relative */
    --block-width: 100%;
    --content-image-width: 25%;
    --content-width: 70%;
    --footer-width: 100%;
    --sidebar-width: 25%;
    --table-width: 90%;

    /* borders */
    --alt-border: 1px dotted black;
    --block-border: 1px dotted black;
    --border: 1px solid black;
    --img-border: 1px solid black;
    --menu-item-border: 1px solid black;
    --quote-border: 4px solid var(--alt-color);
}

body {
    margin: auto;
    padding-top: 1em;
    padding-right: 1em;
    padding-left: 1em;
    max-width: var(--container-width); 

    background-color: var(--bg-color);
    font-family: Calibri, Cantarell, sans-serif;
    font-size: 18px;
}

/*
 * id's
 */

#header {
    height: 150px;
    width: 100%;
    padding-top: 30px;
    border: var(--border);
    background-image: url('/static/img/header.jpg');
}

#menu {
    float: right;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    padding-left: 10px;
    text-align: center;
    font-size: 1em;
}

.menu-item {
    float: left;
    margin-right: 2px;
    padding-left: 10px;
    padding-right: 5px;
    border-left: var(--menu-item-border);
}

#container {
    max-width: var(--container-width); 
    margin-top: 20px;
    padding-top: 0;
    background-color: var(--bg-color);
}

#content {
    max-width: var(--content-width); 
    float: left;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1em;
    padding-right: 1em;
    font-family: Calibri, Cantarell, sans-serif;
    line-height: 150%;
    font-size: 1em;
}

#sidebar-left {
    max-width: var(--sidebar-width); 
    float: left;
    clear: left;
    margin-top: 5em;
    margin-right: 1em;
    font-family: Calibri, Cantarell, sans-serif;
}

#sidebar-right {
    max-width: var(--sidebar-width); 
    float: right;
    clear: right;
    margin-top: 5em;
    margin-left: 1em;
    font-family: Calibri, Cantarell, sans-serif;
}

#footer {
    clear: both;
    max-width: var(--footer-width);
    margin: auto;
    border-top: var(--border);
    padding: 1em;
    font-size: 1em;
}


/*
 * boxes
 */

#loginbox {
    width: 20%;
    padding-left: 55%;
}

#searchbox {
    max-width: var(--block-width);
    float: left;
    clear: left;
    padding: 1em;
}

.searchbox-field input {
    width: 70%;
    float: left;
    clear: left;
}

.searchbox-button input {
    width: auto;
    float: right;
    clear: right;
    text-align: center;
}

/*
 * blocks
 */

.sidebar-block, .sidebar-posts {
    max-width: var(--block-width);
    margin-top: 5em;
    padding: 1em;
    border-radius: 10px;

    font-size: 0.9em;
    color: var(--block-color);
    background-color: var(--block-bg-color);
    border: var(--block-border);
}

.sidebar-block-header {
    color: var(--block-header-color);
    text-align: left;
    font-size: 1em;
    font-weight: bold;
}

.block {
    max-width: var(--block-width);
    margin-top: 2em;
    padding: 1em;
    border-radius: 10px;

    font-size: 0.9em;
    color: var(--block-color);
    background-color: var(--block-bg-color);
    border: var(--block-border);
}

.block-header {
    color: var(--block-header-color);
    text-align: center;
    font-weight: bold;
}

.block-header2 {
    margin-top: 10px;
    font-style: italic;
}

/*
 * headers
 */

h1 {
    color: var(--header-color);
    text-align: center;
    font-size: 2.5em;
}

h2 {
    clear: left;
    color: var(--alt-color);
    font-size: 1.5em;
}

h3 {
    color: var(--color);
}

h4 {
    color: var(--alt-color);
    font-size: 0.8em;
}

/*
 * links
 */

a {
    text-decoration: none;
    color: var(--alt-color);
}


#header a {
    color: var(--header-color);
}

.sidebar-posts a, .sidebar-block  a {
    color: var(--color);
}

.result-title {
    font-weight: bold;
}

/*
 * images
 */
img {
    border: var(--img-border);
}

.img-no-border {
    border: none;
}

.content-image-left {
    float: left;
    clear: left;
    width: var(--content-image-width);
    display: block;
    margin: 5px;
    margin-right: 25px;
}

.content-image-left-text {
    float: left;
    clear: left;
    width: var(--content-image-width);
    display: block;
    margin-left: 10px;
    margin-right: 25px;
    margin-bottom: 25px;
    font-size: small;
    font-style: italic;
}

.content-image-right {
    float: right;
    clear: right;
    display: block;
    width: var(--content-image-width);
    margin: 5px;
    margin-left: 25px;
}

.content-image-right-text {
    float: right;
    clear: right;
    display: block;
    width: var(--content-image-width);
    margin-left: 25px;
    margin-bottom: 25px;
    font-size: 0.8em;
    font-style: italic;
}

.footer-image {
    height: 18px;
    border: none;
}

.flag-icon {
    width: 16px;
    height: 10px;
    margin: 2px;
    margin-right: 5px;
    vertical-align: middle;
}

/*
 * Messages
 */

#messagebox {
     margin-top: 20px;
     padding: 5px;
     padding-left: 20px;
}

#prevnextbox {
    float: right;
    clear: both;
    padding-bottom: 20px;
    font-size: 1em;
    font-style: italic;
}

.prevnext {
    width: 175px;
    margin-left: 5px;
    margin-right: 5px;
}

.alert {
    color: #5D8E5B;
    background-color: #DFF0D8;
    border-radius: 10px;
}

.warning {
    color: #8A6D3B;
    background-color: #FCF8C3;
    border-radius: 10px;
}

.error {
    color: #A94442;
    background-color: #F2DEDE;
    border-radius: 10px;
}

/*
 * tables
 */

table {
    table-layout: auto;
    width: var(--table-width);
    border-collapse: separate;
    border-spacing: 0;
    border: var(--border);
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    background-color: var(--bg-color);
    font-size: 0.9em;
}

th {
    height: 25px;
    margin: 0px;
    padding: 5px;
    background-color: var(--table-header-bg-color);
    text-align: left;
}

thead {
    border: var(--border);
}

td {
    padding: 3px;
    border-top: var(--alt-border);
    text-align: left;
    background-color: var(--table-cell-bg-color);
    vertical-align: center;
}

.table-footer {
    width: var(--table-width);
    margin-left: 25px;
    margin-bottom: 40px;
    font-size: 0.8em;
    font-style: italic;
}

/*
 * lists
 */

ol {
    list-style-position: inside;
}

ul {
    list-style-type: square;
    list-style-position: inside;
}

.sidebar-posts ul, .sidebar-block ul {
    list-style-position: inside;
}

.sidebar-posts li, .sidebar-block li {
    margin-left: -35px;
    margin-bottom: 3px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.float-none-clear {
    float: none;
    clear: both;
}

/*
 * other (allowed in content)
 */

.quote, blockquote {
    margin: 1em;
    padding-left: 1em;
    color: var(--alt-color);
    font-style: italic;
    font-weight: bold;
    border-left: var(--quote-border);
    }

.code {
    display: block;
    width: var(--code-width);
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    padding-top: 0em;

    font-family: monospace;
    white-space: pre-wrap;
    font-size: 0.7em;
    line-height: 1.75em;

    color: var(--code-color);
    background-color: var(--code-bg-color);
    border-radius: 10px;
}

left {
    text-align: left;
}

right {
    text-align: right;
}

center {
    text-align: center;
}