body {
    background-color: black;
    margin: 0;
}

div.page {
    background-color: #bdbfbc;
    color: black;
    width: 100%;
    /* Progressively more elaborate minimum height,
       in case browsers haven't implemented all the functions.
       In order to fill up the browser window, we want the body div to be
       the window size minus the height of the header and footer.
       But, we don't want the body div to grow any larger than the height of
       the background image (779px), if that is shorter. */
    min-height: 100vh;
    min-height: min(100vh, 152px + 779px + 98px);
    max-width: 1370px; /* width of background image */
    display: grid;
    grid-template-rows: 152px auto 98px;
    font-family: "Verdana", sans-serif;
    font-style: normal;
    font-weight: normal;
    margin: 0 auto;
} 

div.header {
    display: table;
    font-size: 12pt;
    height: 152px;
    width: 100%;
    margin: 0;
}

div.headerimages {
    display: table-cell;
}

div.headerimages ul {
    list-style-type: none;
    padding: 6px 4px 4px 14px;
    margin: 0;
}

div.headertitle {
    font-size: 86pt;
    display: table-cell;
    vertical-align: middle;
}
div.headertitle span {
    font-size: 12pt;
    font-weight: bold;
}

div.headerlinks {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    font-size: 12pt;
    width: 100%;
    padding-right: 10px;
}

div.headerlinks a {
    color: black;
    text-decoration: none;
}

span.headerlinktext {
    white-space: nowrap;
}

div.headeruserlinks {
    height: 35px;
    padding: 5px;
}

div.headerhomelinks {
    height: 36px;
    padding: 5px;
}

div.headerhelplinks {
    height: 35px;
    padding: 5px;
}

div.body {
    background: url('../images/body_bg.jpg') #bdbfbc no-repeat top left; /* 1370px x 779px */
    display: grid; /* grid within a grid (div.page) */
    width: 100%;
    align-items: center; /* centre everything within vertically by default */
}

div.body > h1, div.publistcontainer h1 {
    font-size: 16pt;
    font-weight: normal;
    margin: 0;
    padding: 20px;
    padding-bottom: 0;
}

div.body p {
    margin: 0;
}

div.footer {
    background-color: #bdbfbc;
    width: 100%;
    height: 98px;
    font-size: 18pt;
    display: table;
    position: relative;
    margin: 0;
}

div.footer a {
    text-decoration: none;
    color: black;
}

div.privacy {
    display: table;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(0, -100%); /* push over bottom of body div */
    font-size: 10pt;
    width: 100%;
}

div.privacyleft {
    display: table-cell;
    width: 50%;
    text-align: left;
    padding: 5px;
}

div.privacyright {
    display: table-cell;
    width: 50%;
    text-align: right;
    padding: 5px;
}

div.privacy a {
    color: #4f5cd6;
    text-decoration: none;
}

div.footerleft {
    width: 50%;
    text-align: right;
    vertical-align: middle;
    padding-right: 40px;
    display: table-cell;
}

div.footermiddle {
    width: 75px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

div.footerright {
    width: 50%;
    text-align: left;
    vertical-align: middle;
    padding-left: 40px;
    display: table-cell;
}

div.form {
    background-color: #bdbfbc;
    display: table;
    margin: 20px auto;
    padding: 20px;
    text-align: left;
    opacity: 0.8;
}

div.form td {
    padding: 12px;
    vertical-align: top;
}

div.form td.formheading {
    text-align: center;
    font-size: 14pt;
}

div.form td.formlabel {
    text-align: right;
    font-size: 12pt;
    white-space: nowrap;
}

div.form td.formbutton {
    text-align: center;
}

div.form td.formlinks {
    text-align: center;
    font-size: 11pt;
}

div.form td.formlinks a {
    color: #4f5cd6;
    text-decoration: none;
}

div.form td input {
    background: white;
    width: 240px;
}

button {
    color: #bdbfbc;
    background-color: black;
    font-size: 11pt;
    padding: 5px 12px 7px;
    text-align: center;
    vertical-align: middle;
    border: 0;
    cursor: pointer;
}

span.error {
    font-size: 12pt;
    color: #933;
}

div.publist {
    display: table;
    width: 100%;
    padding-bottom: 20px;
}

div.pubrow {
    display: table-row;
}

div.pub {
    display: table-cell;
    width: 33%;
    height: 150px;
    text-align: center;
    vertical-align: middle;
}

div.pub#uploadpub {
    display: inline-block;
    width: 100%;
    height: auto;
}

div.pub a {
    color: black;
    text-decoration: none;
}

div.pub p {
    font-size: 24pt;
    text-align: center;
    margin: 0;
    padding: 5px;
}

div.pub img {
    /* Make sure images are not too big on a narrow screen
       by limiting image width to a third of the screen.
       Hopefully there is a better way of doing it than this. */
    max-width: 33vw;
    height: auto;
}

div.pub#uploadpub img {
    margin: 0;
    padding: 0;
    padding-top: 15px;
    padding-bottom: 15px;
}

div.pub#uploadpub p {
    margin: 0;
    padding: 0;
    padding-top: 15px;
    padding-bottom: 15px;
}

div.uploadercontainer {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: auto min-content auto;
    align-items: center;
    height: 100%;
    padding: 0;
/*
    padding-bottom: 20px;
*/
    margin: 0 auto;
}

div.uploader {
    background-color: #bdbfbc;
    margin: 0;
/*
    padding: 10px;
*/
    text-align: center;
    opacity: 0.8;
}

div.uploaderinfo {
    padding: 10px;
}

div.uploader p {
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
    padding: 2px;
}

div.uploader p span {
    font-weight: normal;
}

div.uploadfooter {
    min-height: 20px;
}

div.dndupload {
    margin: 0 auto;
    position: relative;
    background-color: white;
    width: 140px;
    height: 137px;
    opacity: 1;
}

div.dndupload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

div#dialogBackground {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: #666;
    z-index: 1000;
    opacity: .7;
}
div#dialog {
    z-index: 1001;
    position: absolute;
    background-color: #fff;
    border: 1px solid #666;
    padding: 16px;
    font-family: "Verdana", sans-serif;
}
div#waiting {
    width: 32px;
    height: 32px;
    margin: 16px auto 0 auto;
    background: url('images/waiting.gif') no-repeat center;
}

div.infomessage {
    text-align: center;
    margin: 0 auto;
}

div.infomessage ul {
    margin: 8px 0 8px 16px;
    list-style-type: none;
}

div.infomessage > h1, div.infomessage p {
    font-size: 16pt;
    font-weight: normal;
    margin: 0;
    padding: 15px;
}
div.infomessage p {
    font-size: 14pt;
}

div.createSuccess > h1, div.createSuccess p {
    font-size: 14pt;
    font-weight: normal;
    margin: 0;
    padding: 5px;
    padding-bottom: 10px;
}
div.createSuccess p {
    font-size: 12pt;
}
div.createSuccess a {
    text-decoration: none;
    color: #4f5cd6;
}

div.bodyfaq {
    background-color: #e8e8e8;
    background-image: none; 
}

div.faq {
    background-color: #e8e8e8;
    text-align: left;
    padding: 10px 10px 25px 10px;
}

div.faq h1 {
    text-align: center;
    font-size: 14pt;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

div.faq h2 {
    font-size: 12pt;
    font-weight: normal;
    padding: 0;
    padding-top: 10px;
    margin: 0;
}

div.faq p {
    font-size: 10pt;
}

div.faq p span {
    color: #4f5cd6;
}

table.pubcodetable {
    border-collapse: collapse;
    margin-top: 10px;
}
table.pubcodetable td {
    border: 1px solid black;
    padding: 2px;
    vertical-align: top;
    white-space: nowrap;
    font-size: 10pt;
}
table.pubcodetable td.faqright {
    border: 0;
    white-space: normal;
    padding-left: 10px;
}
table.pubcodetable td.faqright h2 {
    padding-top: 0;
}
table.pubcodetable td.faqright a {
    text-decoration: none;
    color: #4f5cd6;
}