/* global font and body settings */
body {
    font-family: arial, helvetica, sans-serif;
    font-size: 10pt;
    background-color : #d3d6d9;
    padding: 0;
    color: #333333;
    margin: 0 0 3em 0;
}

article {
    display: block;
    position: relative;
    clear: both;
    background-color: #fff;
    border: 1px solid #999;
    padding: 3em;
    margin: 2em;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

header {
    display: block;
    position: relative;
    height: 5rem;
    background-color: #e7eaee;
    border: 1px solid #cccccc;
    border-bottom: none;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    margin: 1em 0 0 0;
}

header > h1 {
    position: relative;
    margin: 0 0 0 1em;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

header > img {
    float: right;
    display: block;
    position: relative;
    width: 135px;
    height: 40px;
    overflow: hidden;
    margin: 0 1em 0 0 ;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

footer {
    height: 2rem;
    margin-top: 2em;
    border-top: 0.5rem solid #335588;
    text-align: right;
    display: block;
    position: relative;
    background-color: #e7eaee;
    border-bottom: 1px solid #cccccc;
    border-bottom: none;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

footer p {
    color: #670e15;
    position: relative;
    margin: 0 1em 0 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

footer p a:link { color: #670e15; }
footer p a:visited { color: #670e15; }
footer p a:hover { color: #670e15; }
footer p nav a:active { color: #670e15; }

article > nav {
    display: block;
    position: relative;
    height: 2em;
    background-color: #335588;
    border: 1px solid #cccccc;
    border-top: none;
    color: #ffffff;
    font-size: 11px;
    line-height: 1.9em;
    padding: 0 0 0 0;
    margin: 0 0 2em 0;
    overflow: hidden;
}

article > nav a {
    margin: 0 0 0 2em;
}

article > nav a:link { color: #ffffff; }
article > nav a:visited { color: #ffffff; }
article > nav a:hover { color: #ffffff; }
article > nav a:active { color: #ffffff; }

article > section {
    margin-right: 2em;
    margin-left: 2em;
}

section > h3 {
    margin-left: 2em;
}

section > h4 {
    margin-left: 2.5em;
}

section > p {
    margin-left: 2.5em;
}

section > pre {
    margin-left: 5em;
}

section > dl {
    margin-left: 2.5em;
}

aside {
    width: 30%;
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin-left: 15px;
    float: right;
    font-style: italic;
    background-color: #e7eaee;
}

/* anchors */
a:link {
    color: #11568c;
}
a:visited {
    color: #571c8d;
}
a:hover {
    color: #7a1d42;
    text-decoration : underline;
}
a:active {
    color: #7a1d42;
}

/* headings */
h1 {
    display: block;
    position: relative;
    font-size : 1.7em;
    font-weight : bold;
    color: #670e15;
    padding: 0;
    margin: 2em 0 0 2em;
}
h2 {
    font-size : 1.3em;
    font-weight : bold;
    margin: 2em 0 1em 0;
    padding: 0;
    color: #335588;
}
h3 {
    font-size : 1.1em;
    font-weight : bold;
    margin: 2em 0 1em 0;
    padding: 0;
    color: #334466;
}
h4 {
    font-size : 1.0em;
    font-style: italic;
    margin: 2em 0 1em 0;
}



/* general elements */

pre, tt, code {
    font-family: monospace;
    font-size: 0.9em;
    font-weight: bold;
    color: #060;
}

ul, ol {
    margin: 1em;
}

li {
    margin: 0.4em 0;
}

dl {
    display: grid;
    grid-template-columns: max-content auto;
}

dt {
    grid-column-start: 1;
    font-weight: bold;
    color: #060;
    margin-bottom: 0.5em;
}

dd {
    grid-column-start: 2;
    margin-bottom: 0.5em;
}

hr {
    display: block;
    height: 1px;
    background-color: #999999;
    border: none;
    margin: 3em 0 2em 0;
}

figure {
    width: 90%;
    text-align: center;
    font-style: italic;
    font-size: smaller;
    text-indent: 0;
    margin: 0.5em;
    padding: 0.5em;
}

figure figcaption {
    margin-top: 0.5em;
}

figure.inline-right {
    float: right;
    width: 40%;
}

figure img {
    max-width: 95%;
    filter: drop-shadow(.1rem .1rem .1rem black);
}

fieldset pre {
    padding : 1em;
    margin : 0;
}
fieldset {
    margin-left : 2em;
    margin-right : 2em;
    border : 1px #ccc solid;
    -moz-border-radius : 5px;
    border-radius : 5px;
}



/* classes */
.short-tab {
    display: inline-block;
    width: 3.5em;
}
.comment {
    color : #666;
    font-style : italic;
}
.subheader {
    font-weight : bold;
}
.footer {
    font-size : 0.8em;
    color : #999;
    text-align : center;
    width : 100%;
    border-top : 1px #ccc solid;
    padding-top : 2px;
}
.code {
    display: block;
    width: auto;
    border : 1px #ccc solid;
    padding : 6px;
    margin : 1em 2em 1em 2em;
}
.note {
    font-family: verdana, serif;
    font-size : 0.85em;
    color : #600;
    text-decoration : none;
    font-weight : bold;
}
.disclaimer {
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin-left: 1.5em;
    font-style: italic;
}

.disclaimer strong {
    color : #600;
    font-weight : bold;
}

.nav, .nav a {
    font-family: verdana, serif;
    font-size : 0.85em;
    color : #600;
    text-decoration : none;
    font-weight : bold;
}
.nav {
    width : 100%;
    border-bottom : 1px #ccc solid;
    padding : 3px 3px 5px 1px;
}
.nav a:hover {
    text-decoration : underline;
}
.question {
    font-weight: 600;
}
.answer {
    font-weight: 300;
}
.toc {
    right: .5em;
}

table.general {
    margin-top: 3em;
    margin-left: 3em;
    border : 1px #ccc solid;
}

table.dbtable {
    margin-top: 3em;
    border : 1px #ccc solid;
    width : 600px;
}
table.dbtable td {
    vertical-align: top;
}
tr, th {
    border-bottom : 1px #ccc solid;
}
th, td {
    padding-right : 1em;
}
th {
    text-align : left;
    white-space : nowrap;
    background-color : #eee;
}

.primary-key {
    background-color : #ffc;
}