/* nada */
* {
    box-sizing: border-box;
}

body {
    font-size: 16px;
    font-family: sans-serif;
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

/*
 * We use simple classes throughout, as we are not using any css
 * libraries and can assume no name clases.
 *
 *
 */

.http-only-site .page {
}

.http-only-site .body {
}

.header {
    flex: 0 0 auto;
    border-bottom: 1px gray solid;
    background-color: silver;
}

.header  table {
    width: 100%;
    height: 100%;
}

.header  td {
    padding: 16px;
}

.layout-table td.logo-column {
    width: 50%; 
    vertical-align: middle;
}

.layout-table td.logo-column .logo-text {
    font-weight: bold; 
    color: gray;
}

.layout-table td.nav-column {
    width: 50%; 
    text-align: right;
}

.layout-table td.nav-column a + a {
    padding-left: 8px;
}

.layout-table.horizontal-gutter {
    border-collapse: separate;
    border-spacing: 0 16px;
}
/*
    footer
*/

.footer {
    flex: 0 0 auto;
    /* margin-top: 16px; */
    padding: 16px;
    border-top: 1px gray solid;
    background-color: silver;
}

table.layout-table > tr > td.copyright-column {
    width: 50%;
}

table.layout-table > tr > td.nav-column {
    text-align: right;
}

table.layout-table > tr > td.nav-column a +  a {
    margin-left: 16px;
}

.footer form.authenticate-form {
    display: inline-block;
    margin-left: 16px;
}

/* layout table */

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

/* and the main page layout */

table.layout-table td.menu-area {
    vertical-align: top;
    width: 150px;
}

table.layout-table td.content-area {
    vertical-align: top;
    padding: 16px;
}

/* sidebar */

table.layout-table td.side-bar {
    width: 300px;
    vertical-align: top;
}

table.layout-table td.side-bar-section-header {
    margin: 10px;
    font-weight: bold;
}

/* site archive layout table */

table.layout-table.archive {
}

table.layout-table.archive th, table.layout-table.archive td {
    padding: 8px;
}

table.layout-table.archive > tbody > tr.archive-header-row {
    background-color: rgb(110, 129, 115);
    height: 40px;
}

table.layout-table.archive > tbody > tr.archive-header-row a {
    background-color: rgb(203, 203, 203);
    padding: 4px;
}

/* table.layout-table.archive > tbody > tr.archive-header-row > td {
    border: 1px red solid;
    padding: 8px;
} */

table.layout-table.archive > tbody > tr.archive-content-row {
    
}

table.layout-table.archive > tbody > tr.archive-content-row td.archive-left-col {
    width: 32px;
    background-color: rgb(110, 129, 115);
}

table.layout-table.archive > tbody > tr.archive-content-row > td.archive-content-col {
}

table.layout-table.archive > tbody > tr.archive-content-row > td.archive-content-col  {
    width: 800px;
    vertical-align: top;
    /* line-height: 20px; */
}

table.layout-table.archive > tbody > tr.archive-content-row > td.archive-metadata-col {
    /* max-width: 800px; */
    /* line-height: 20px; */
    vertical-align: top;
    padding-top: 60px;
}

table.layout-table.archive > tbody > tr.archive-content-row > td.archive-right-col {
    width: 32px;
    background-color: rgb(110, 129, 115);
}

table.layout-table.archive > tbody > tr.archive-footer-row {
    background-color: rgb(110, 129, 115);
    height: 32px;
}

/* Metadata table for the right column */

.metadata-table {
    border: 1px solid silver;
    font-size: 80%;
    width: 100%;
}

.metadata-table th, .metadata-table td {
    border: 1px solid silver;
    margin: 0;
    padding: 8px;
}


.metadata-table th {
   width: 110px;
}


.metadata-table th {
    text-align: right;
}

/* content area containers */

.page {
    margin: 16px;
}

/* */

table.layout-table td.home-content-column1 {
    width: 27%;
    vertical-align: top;
    padding-right: 16px;
}

table.layout-table td.home-content-column2 {
    width: 27%;
    vertical-align: top;

    padding-right: 16px;
}

/* home menu */

.main-menu {
    margin: 0;
    padding: 0;
}

.main-menu > .item {
    padding: 16px 0;
    font-size: 200%;
    width: 100%;
}

.main-menu > .item > a {
    padding: 16px;
    display: block;
}

.main-menu > .item > a:hover {
    background-color: silver;
}

.main-menu > .item.selected > a {
    background-color: gray;
    color: white;

}

/* sidebar menu */

.side-bar .section {
    border: 2px solid silver;
    padding: 8px;
    margin: 16px;
}

.side-bar .section > .title {
    font-weight: bold;
    color: gray;
    text-align: center;
}

.side-bar .section > .body {
   
}

.side-bar-menu-list {
    margin: 0;
    padding: 0;
}

.side-bar-menu-list .item + .item {
    /* margin-top: 16px; */
}

.side-bar-menu-list .item a {
    padding: 8px;
    display: block;
}

.side-bar-menu-list .item a:hover {
    background-color: silver;
}

/* general page */

/* an alert */

.alert {
    padding: 16px;
}


.alert.primary {
    border: 2px solid rgb(17, 37, 150);
}

.alert.info {
    border: 2px solid rgb(99, 99, 99);
}

.alert.warning {
    border: 2px solid rgb(229, 170, 42);
}

.alert.error {
    border: 2px solid red;
}

/* article */

.content-area > .article {
}

.content-area > .article > .article-title {
    font-weight: bold;
    font-size: 120%;
}

.content-area > .article > .article-created {
    font-style: italic;
    color: gray;
}

.content-area > .article > .article-abstract {
    /* font-style: italic; */
    color: gray;
}

.content-area > .article > .article-content {
    max-width: 600px;
}

/* sidebar article menu */

ul.side-bar-article-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.side-bar-article-list > .item {
    padding: 8px;
}

.side-bar-article-list > .item > .article-title {
    font-weight: bold;
}

.side-bar-article-list > .item > .article-created {
    font-style: italic;
    color: gray;
}

/* blog */

.content-area > .blog {
}

.content-area > .blog > .blog-title {
    font-weight: bold;
    font-size: 120%;
}

.content-area > .blog > .blog-abstract {
    color: gray;
}

.content-area > .blog > .blog-created {
    font-style: italic;
    color: gray;
}

.content-area > .blog > .blog-content {
    max-width: 600px;
}

/* sidebar blog menu */

ul.side-bar-blog-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.side-bar-blog-list li {
    padding: 10px;
}

.side-bar-blog-list .blog-title {
    font-weight: bold;
}

.side-bar-blog-list .blog-created {
    font-style: italic;
    color: gray;
}

/* editor */

.content-edit-layout {
    width: 100%;
    margin: 16px;
}

table.content-edit-layout-table {
    width: 100%;
    /* margin: 16px; */
}

table.content-edit-layout-table td {
    padding: 4px;
}

/* table.content-edit-layout-table td:nth-child(1) {
    width: 50px;
} */

table.content-edit-layout-table input {
    width: 100%;
}

table.content-edit-layout-table textarea {
    width: 100%;
    margin: 0;
}

/* Try to make some basic built-in components nicer */

/* nice buttons */

button {
    font-size: 16px;
    padding: 8px;
    background-color: rgb(230, 230, 230);
}

button:active {
    background-color: green;
}

/* Home page */

.preview-box {
    /* border: 1px solid silver; */
    width: 100%;
}

.preview-box > .title {
    border-bottom: 2px dashed silver;
    font-weight: bold;
    font-size: 120%;
    color: gray;
    padding: 8px;
}

.preview-box > .content {
    padding: 8px;
}

.preview-box .item > .title {
    font-weight: bold;
    color: gray;
}

.preview-box .item > .abstract {
    
}

.preview-box .item > .created {
    color: gray;
    font-style: italic;
}

.preview-box .item > .added {
    color: gray;
    font-style: italic;
}

.preview-box .item > .content {
    /* min-height: 100px; */
    max-height: 200px;
    overflow-y: auto;
    text-overflow: ellipsis;
}

.preview-box .item + .item {
    margin-top: 16px;
}

/* sites */

ul.side-bar-site-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.side-bar-site-list > li {
    padding: 10px;
}

ul.side-bar-site-list > li > .-title {
    font-weight: bold;
}

ul.side-bar-site-list > li > .-added {
    font-style: italic;
    color: gray;
}

ul.side-bar-site-list > li > .-abstract {
    color: gray;
}

/* links */

.site-title {
    font-weight: bold;
    /* color: gray; */
    font-size: 120%;
}
.site-url {
    font-family: monospace;
}
.site-added {
    font-style: italic;
}
.site-abstract {
    color: gray;
    font-style: italic;
}
.site-description {
    max-width: 600px;
}

.site-list-item {
    margin-bottom: 32px;
}

.site-list-header {
    border: 1px solid silver;
    padding: 8px;
    margin-bottom: 16px;
}

/* misc */

.margin {
    margin: 16px;
}

.padding {
    margin: 16px;
}

.margin-top {
    margin-top: 16px;
}

.padding-top {
    padding-top: 16px;
}

/* fucking markdown */

.rendered-markdown blockquote {
    margin: 0;
    padding: 16px;
    background-color: silver;
}

/* form */

input, select, option {
    font-size: 16px;
}

input {
    padding: 8px;
}

textarea {
    font-size: 16px;
}

/* editor */

.markdown-preview {
    height: 500px;
    overflow-y: auto;
}

.markdown-rendered {
    overflow-y: auto;
}

/* */

.main-content {
    padding: 16px;
}

/* nicer paragraphs */

/* If first in container, no top margin */

h1:nth-child(1) {
    margin-top: 0;
}