:root {
    --banner-bkgrnd:     #ed820e;   /* "apricot" */
    --medi-gray:         #00693ea0;
    --lite-gray:         #00693e70;
    --navbg:             #b2560d;   /* "bronze" */
    --nav-active-bkgrnd: #f08f3c;   /* "apricot" lightened 10% */
    --nav-hover-frgrnd:  #bbd2ea;   /* "bronze" complemented and lightened 70% */
    --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(--banner-bkgrnd);
    padding: 20px; margin: auto; text-align: left;
}

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

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

.header a:hover { color: var(--nav-hover-frgrnd); }

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

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

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

.logo::before { background-color: white; display: block; content: ''; position: absolute; height: inherit; width: inherit }

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

.nav-active { background-color: var(--nav-active-bkgrnd); position: relative; padding: 10px; margin: 0;}

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

.navigation a:hover { color: var(--nav-hover-frgrnd); }

.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;
}

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

.content .hilite {
    color: white;
    background: var(--banner-bkgrnd);
    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: #3a3;
}

.schedule tr.xtra {
    color: #a33;
}

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

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

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

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

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

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

.tbl-banner {
    /* background-color: #ff8800; */
    background-color: #f6a96e;
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
}

.tbl-banner td {
    padding-bottom: 12px;
}


ul {
    margin-top: 0pt;
}

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

ol.note {
    padding-left: 1em;
    margin-left: 1em;
}

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;
}