/*
 * Variables / Configuration
 */

:root {
    --spacing: 10px;
}

/*
 * Miniaml CSS reset
 */

* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box;
}

/*
 * Body & Main
 */

body {
    background-color: #eee;
    color           : #333;
    font-family     : sans-serif;
    font-size       : 12px;
}

main {
    margin: var(--spacing);
}

/*
 * Headings
 */

h1 {
    margin-bottom: calc(var(--spacing) * 2);
}

/*
 * Anchors
 */

a {
    color          : #406080;
    font-weight    : bold;
    text-decoration: none;
}

/*
 * Tables
 */

table {
    border-collapse: collapse;
    width          : 100%;
}

tr {
    border-bottom: 1px dotted #ccc;
}

th {
    text-align: left;
}

th,
td {
    padding: var(--spacing);
}

th:first-child,
td:first-child {
    padding-left: 0;
}

th:last-child,
td:last-child {
    padding-right: 0;
}

td.error {
    background-color: #f0c0c0;
}

td.success {
    background-color: #c0f0c0;
}

/*
 * Forms
 */

button {
    font-style: bold;

}

/*
 * Messages
 */


div#messages > div {
    padding: var(--spacing);
}

div#messages div.success {
    background-color: #c0f0c0;
}

div#messages div.warning {
    background-color: #f0d090;
}

div#messages div.error {
    background-color: #f0c0c0;
}