html, body {
    font-family: sans-serif;
    font-size: 12pt; line-height: 1.4em;

}

h1 {
    font-size: 24pt;
    line-height: 1.4em;
    margin: 0 0 0.5rem 0;
}

h2 {
    font-size: 18pt;
    line-height: 1.4em;
    margin: 1.5rem 0 1rem 0;
}

h3 {
    font-size: 14pt;
    line-height: 1.4em;
    margin: 1rem 0 0.5rem 0;
}

p { margin-bottom: 1em;}

input {
    font-family: sans-serif;
    font-size: 12pt; line-height: 1.4em;
}

button {
    font-family: sans-serif;
    font-size: 12pt; line-height: 1.4em;
}

sup {
    vertical-align: super;
    font-size: smaller;
}

option {
    font-family: sans-serif;
    font-size: 12pt; line-height: 1.4em;
}

ul {
    list-style-type: disc;
    list-style-position: outside;
    margin: 0 0 1rem 0;
    padding: 0 0 0 2rem;
}

ol {
    list-style-position: outside;
    margin: 0 0 2rem 0;
    padding: 0 0 0 1rem;
}

dl {
    margin: 0 0 2rem 0;
}
dt {
    font-style: italic;
}
dd {
    margin: 0 0 0.5rem 1rem;
}

.buttons { margin: 1rem 0; text-align: center;}
.button-main {
    padding: 0.3rem; border: solid 1px #00843d /*#9fc513*/; border-radius: 4px; background-color: #00843d; color: white;
    cursor: pointer;
}
.button {
    padding: 0.3rem; border: solid 1px #ddd; border-radius: 4px; background-color: #f0f0f0; color: #222;
    cursor: pointer;
}

.link {
    cursor: pointer;
    text-decoration: underline;
    color: darkblue;
}

.front-page-box { border: solid 1px #ddd; padding: 1rem}
.front-page-box h2 { margin: 0 0 1rem 0;}

header { max-width: 1024px; margin: 0 auto; padding: 24px 0 0 0; display: flex; border-bottom: solid 1px #ddd; align-items: baseline;}
header h1 { flex-grow: 1; font-size: 2rem; color: #00843d;}
header h1 a { text-decoration: none; color: #00843d;}
header h1 a:hover { text-decoration: underline;}
#menu-about h2 { display: none;}
#menu-about ul { list-style-type: none; margin: 0; padding: 0;}
#menu-about ul li { display: inline-block; margin: 0 0 0 0.4rem; padding: 0;}
#menu-about ul li a { color: black; text-decoration: none;}
#menu-about ul li a:hover { text-decoration: underline;}
#menu-about ul li.menu-button { padding: 0.3rem; border: solid 1px #00843d /*#9fc513*/; border-radius: 4px; background-color: #00843d; color: white;}
#menu-about ul li:hover { text-decoration: underline; cursor: pointer;}
#menu-user {max-width: 1024px; margin: 0 auto; padding: 0; border-bottom: solid 1px #ddd; display: flex; align-items: baseline; flex-direction: row; background-color: #f0f0f0;}
#menu-user dl { margin: 0.5rem 0 0.5rem 0.5rem;}
#menu-user h2 { display: none;}
#menu-user dt { display: inline-block; margin: 0; padding: 0; color: #777; font-style: normal;}
#menu-user dd { display: inline-block; margin: 0 12px 0 6px; padding: 0}
#menu-login { max-width: 1024px; margin: 0 auto; padding: 0; border-bottom: solid 1px #ddd; }
#menu-login > div { margin: 0.5em 0; padding: 0; display: flex; align-items: baseline; flex-direction: row;}
#logout-link { flex-grow: 1; text-align: right; margin-right: 0.5rem;}
#login-link { flex-grow: 1; text-align: right; margin-right: 0.5rem;}
main { max-width: 1024px; margin: 1em auto;}
#front-page-box-about { grid-row: 1; grid-column: 1/3;}
#front-page-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 24px;}
footer {max-width: 1024px; margin: 0 auto 1em auto; text-align: center; border-top: solid 1px #ddd; padding: 1rem 0;}
#breadcrumbs { max-width: 1024px; margin: 0 auto; padding: 0; border-bottom: solid 1px #ddd; display: flex; flex-direction: row; align-items: baseline;}
#breadcrumbs-path { margin: 0.5rem; flex-grow: 1;}

#attribution { border-top: solid 1px #ddd; margin-top: 2rem;}
#tacr { width: 1072px; padding: 0; margin: 1em auto; display: flex;}
#tacr-logo {}
#tacr-text { flex-grow: 1; padding-left: 2em;}
#partners { border-top: solid 1px #ddd; padding: 2em 0; margin: 0; text-align: center;}
#partners h2 { display: none;}
#partner-logos { padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;}
#partner-logos div { margin: 0; padding: 0 1em;}
#partner-logos img { height: 45px}

table.simple { border-collapse: collapse; width: 100%;}
table.simple th { border: dotted 1px #ddd; font-weight: bold; text-align: left; padding: 0.3rem;}
table.simple td { border: dotted 1px #ddd; padding: 0.3rem;}

table.listing { border-collapse: collapse; width: 100%;}
table.listing th { border-top: dotted 1px #ddd; border-bottom: dotted 1px #ddd; font-weight: bold; text-align: left; padding: 0.3rem;}
table.listing td { border-top: dotted 1px #ddd; border-bottom: dotted 1px #ddd; padding: 0.3rem;}

table.details { border-collapse: collapse; width: 100%;}
table.details th { border-top: dotted 1px #ddd; border-bottom: dotted 1px #ddd; border-right: dotted 1px #ddd; font-weight: bold; text-align: left; padding: 0.3rem; text-align: right; width: 15rem;}
table.details td { border-top: dotted 1px #ddd; border-bottom: dotted 1px #ddd; border-left: dotted 1px #ddd; padding: 0.3rem; text-align: left;}