:root {
    --dartgr: #00693e;
    --medigr: #00693ea0;
    --litegr: #00693e70;
    --dkgray: #7d7d7d;
    --ltgray: #ddd;
    --offwht: #eee;
    --link:   #36c;
    --hvlink: #ca1;
    --ltblue: #69cbf5;
}

body { 
    font-family: "Trebuchet MS", sans-serif;
    font-size: 14px;
    background: var(--ltgray);
    color: #000;
    margin: 0px;
}

a img { border: none; }

.pagebackground {
    background: var(--ltgray);
    margin: auto;
    padding: 20px;
    text-align: center;
}

@media screen and (min-width: 1000px) {
    /* adjust for width of scrollbar to eliminate jumps 
     * when switching subpages using the top menu */
    .pagebackground {
        margin-left: calc(100vw - 100%);
        margin-right: 0;
    }
}

.pagedecoration {
    background: var(--ltgray) repeat-y center; 
}

.pagedecorationbefore {
    background: var(--ltgray) no-repeat center bottom;
    height: 5px;
    margin-top:  0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.pagedecorationafter {
    background: var(--ltgray) no-repeat center top;
    height: 5px;
    margin-top:  0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.page { 
    background-color: #fff; 
    width: 900px; height: auto; 
    margin: auto; padding: 0; text-align: center; border: solid 1px black;
}

.header {
    width: auto; height: 95px;
    color: white; background-color: var(--dartgr);
    padding: 20px; margin: auto; text-align: left;
}

.archived {
    background: repeating-linear-gradient(
	45deg,
	var(--litegr), var(--litegr) 10px,
	var(--medigr) 10px, var(--medigr) 20px
    );
}

.header a { color: white; text-decoration: none; }

.header a:hover { color: #CCC511; }

.title { font-size: 28px; font-weight: bold; }

.subtitle { font-size: 20px; float: left; margin-top: 10px; }

.logo { float: right; border: 5px solid white; }

.navigation { width: auto; font-size: 18px; text-align: left; background-color: var(--dkgray); margin: 0; padding: 10px; }

.nav-active { background-color: #3e433c; position: relative; padding: 10px; margin: 0;}

.navigation a { color: var(--offwht); text-decoration: none; position: relative; padding: 10px; margin: 0;}

.navigation a:hover { color:#CCC511; }

.content { width: auto; background-color: #fff; text-align: left; font-size: 14px; padding: 20px 40px; }

.content a { text-decoration: underline dashed; color: var(--link); }

.content a:hover { text-decoration: underline dashed; color: var(--hvlink); }

h1 { font-size: 24px; text-align: left; }

h2 { font-size: 18px; font-style: italic; margin-top: 30px; border-top: 1px solid #7c8779; color: #7C7C7C; }

h3 { font-size: 14px; }

p { text-align: justify; margin-top: 10px; margin-bottom: 10px; }

.footer { background-color: #B33B3B; border-top: 1px solid #a1b3b3; }

dt { font-style: italic; }

dd { margin-left: 2em; }

table.schedule {
    width: 100%;
    border-style: solid;
    border-color: #fff;
    border-collapse: collapse;
    font-size: 12px;
}

table.grading {
    border-style: solid;
    border-color: #fff;
    border-collapse: collapse;
}

.grading td, .grading th {
    padding: 2px 10px;
    text-align: center;
}

#num, .num {
    text-align: right;
    width: 3%;
}

#date, .date {
    text-align: center;
    width: 11%;
}

#topics, .topics {
    text-align: left;
    width: 50%;
}

#refs, .refs {
    text-align: left;
    width: 36%;
}

.content .emph {
    text-align: center;
    margin: 30px;
    padding: 10px;
    background: #D9F2E8;
    font-weight: bolder;
    border: 5px solid var(--dartgr);
}

.content .hilite {
    color: white;
    background: var(--dartgr);
    padding: 0px 5px;
}

.schedule td {
    padding: 2px 10px;
    margin: 0px;
    border-style: none solid;
    border-width: 2px;
    border-color: #fff;
}

.schedule th {
    padding: 2px 10px 10px;
    font-weight: bold;
    margin: 0px;
    border-style: none solid;
    border-width: 2px;
    border-color: #fff;
}

.schedule tr, .grading tr {
    background-color: var(--offwht);
}

.schedule tr:hover, .grading tr:hover {
    background-color: white;
    border-color: var(--offwht);
}

.schedule tr.quiz, .schedule tr.subm {
    color: #2a2;
}

/* .schedule tr.xtra {
    color: #f33;
} */

.schedule tr.tent, tr.xtnt {
    color: #999;
}

ul {
    margin-top: 0pt;
}

ul.note, ol.note {
    padding-left: 1em;
    margin-left: 1em;
    list-style-type: square;
}

ul.note li, ol.note li {
    padding-bottom: 2pt;
}

ul.topsep:first-child, ol.topsep:first-child {
    padding-top:5pt;
}

ul.botsep:last-child, ol.botsep:last-child {
    padding-bottom:5pt;
}

dt {
    margin-top: 5px;
}

.tbd {
    color: #999;
    background-color: white;
}