@media screen and (max-width: 640px) {
    body{grid-template-rows:minmax(80px,1fr); grid-template-columns:1fr;}
    #content {display:grid; grid-column:1; grid-row:2;}
    #sidebar1 {display:grid; grid-column:1; grid-row:2; padding-right:1vw;}
    #login-form{position:absolute; z-index:10; top:20vh; left:5vw; width:90vw;}
}
@media screen and (min-width: 641px) and (max-width: 1024px){
    body{grid-template-rows:minmax(80px,1fr); grid-template-columns:2fr 4fr;}
    #content {display:grid; grid-column:2; grid-row:2;}
    #sidebar1 {display:grid; grid-column:1; grid-row:2; padding-right:1vw;}
    #login-form{position:absolute; z-index:10; top:20vh; left:25vw; width:50vw; max-width:25em;}
}
@media screen and (min-width: 1025px){
    body{display:grid; grid-template-rows:minmax(50px,1fr); grid-template-columns:3fr 7fr;}
    #content{display:grid; grid-column:2; grid-row:2;}
    #sidebar1 {display:grid; grid-column:1; grid-row:2;}
    #login-form{
        position:sticky; z-index:10; top:0; left:20px; max-width:25em;
        border:thin solid black;  background-color: #F2F3F4;        box-shadow:5px 8px 8px rgba(0,0,0,0.3);
    }
}

@media print {
    body{color:black; background-color:white; font-size:10pt;}
    a:visited,
    a{color:black; text-decoration:none;}
}

body{
    display:grid; place-items:start stretch;
    color:black; background-color:#F2F3F4; background-image:url(../Images/ConCreat-bgd.png); background-size:cover;
    font-family:sans-serif; line-height:1.3em; margin:1vh 1vw;
}

#dwtw,
#litl{display:grid; grid-column:1/-1; background-color:#841B2D; color:#FFE135; width:98%;}
#dwtw { box-shadow: 0 8px 8px rgba(0,0,0,0.3); }
#litl { box-shadow: 0 -8px 8px rgba(0,0,0,0.3); }
#login-form{ display:none; }

.link { cursor:pointer;  background-color:#E2E3E4;}
.link:hover{	background-color:#999999;
}
a{color:blue; text-decoration:none;}
a:hover{color:red; text-decoration:underline;}
div#validator-info{position:fixed; z-index:10; bottom:0; left:10px;}

div#dwtw p,
div#litl p{text-align:center; padding:0.1em; margin:0;}

.separator-block { width:100%; padding:0.5em 0.2em; }
.filler-block { width:100%; }
div.form-member { float:left; width:100%; padding:0; margin-bottom:0.2em; }
div.form-label { width:35%; float:left; text-align:right; padding-right:4px; }
div.form-entry { width:60%; float:left; text-align:left; }

.bounded{max-width:98%; border-radius:1vw; border:thin solid rgb(192,192,255); padding:2px 6px;}
.callout{max-width:99%; border:thin solid black; border-radius:8px; padding:2px; margin-bottom:2px;}
.standoff{box-shadow:5px 8px 8px rgba(0,0,0,0.3); background-color:rgba(0,0,0,0.1); padding:2px 6px; line-height:1.2em;}
div.left { float:left; clear:left; }
div.left2 { float:left; clear:left; width:65%; min-width:20em; }
div.ctr { float:left; }
div.right { float:right; clear:right; }
div.right2 { float:right; clear:right; width:65%; min-width:20em; }

div#content-main { padding-left:1em; }
div.info-block { width:16em; margin: 1em auto;}
h1, h2, h3 { text-align:center; padding:0.5em 3em 1em 3em; }
h1 { line-height: 1.5em; letter-spacing: 0.2em; }
p.standout { text-align:center; font-variant:small-caps; border-left:1px solid #090; border-bottom:2px solid #030; }

img{max-width:100%; border-radius:inherit;}
h1 span { font-variant: small-caps; }

div#liber-al-exam {
    display: block;
    width: 15em;
    float: right;
    font-size: smaller;
    text-align: center;
    color: #ff9;
}

div#footer {
    position: fixed;
    left: 120px;
    bottom: 5px;
}

p#info-msg {
    font-size: x-small;
    line-height: 1.5em;
    color: white;
}
p#info-msg a {
    color: #ff3;
}
p#today-is {
    display: block;
    text-align: center;
    width: 60%;
    min-width: 30em;
    margin: 0.2em auto;
}

div.mass-container {
    width: 20em;
    margin: 1em auto;
    padding: 0;
}
div#mass-list {
    width: 99%;
    background: rgba(0,0,0,0.3);
    margin: 0;
    border: 1px solid #FFC;
    padding: 0.5em;
}
div.m0:before, div.m1:before, div.m2:before,
div.m3:before, div.m4:before, div.m5:before {
    font-family: Courier, fixed;
    font-weight: normal;
    white-space: pre;
    padding-left: 8px;
}
div.m0:before { content: 'Date     : '; }
div.m1:before { content: 'Priest   : '; }
div.m2:before { content: 'Priestess: '; }
div.m3:before { content: 'Deacon   : '; }
div.m4:before { content: 'Positive : '; }
div.m5:before { content: 'Negative : '; }
div.m0, div.m1, div.m2, div.m3, div.m4, div.m5 {
    font-weight: bold;
    line-height: 1.5em;
}
div.m0 { border-bottom: 1px solid #FFC; margin-bottom: 0.2em; }
div.m1 { background-color: #FCC; color: black; }
div.m2 { background-color: #CCF; color: black; }
div.m3 { background-color: #FFC; color: black; }
div.m4 { background-color: #FFF; color: black; }
div.m6,
div.m5 { background-color: #EEE; color: black; }
div.m0 { color: #FFC; }
div#mass-history {
    width: 100%;
    padding: 0.5em;
    text-align: center;
}
div#mass-history img { display: inline; border: none; }
.intro-note {
    font-size: smaller;
    font-family: sans-serif;
}
.nowrap { white-space: nowrap; overflow: hidden; }