/* Use the border box sizing, 
        where sizing properties 
            set the dimensions of the element’s border box, 
                which includes padding and borders. */

*,
::before,
::after {
    box-sizing : border-box;
    margin     : 0;
}
@media print {
    table.schedule-external {
        zoom: 60%;
    }
}
body {
    --background-color: beige;
    --hover-background-color: rgb( 200, 200, 200 );
    --border-color: brown;
    --border-thickness: .2em;
    --table-color: black;
    --table-thickness: .1em;
    font-family: arial, sans-serif;
    padding: 0;
    margin: 0;
}
hr.main {
    border: 0;
    height: var(--border-thickness);
    background: var(--border-color);
    margin: 0;
    padding: 0;
}
.page-banner {
    width: 100%;
    display: flex;
}
.banner-portrait {
    z-index: 1;
}
img {
    height: 100%;
}
.banner-caption {
    background-color: var(--background-color);
    padding-top: 1em;
    padding-left: 4em;
    padding-bottom: 1em;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}
.greetings {
    font-size: 140%;
    margin-bottom: .5em;
}
.page-owner {
    padding-top: .5em;
    padding-bottom: 2em;
}
.name {
    font-size: 200%;
    margin-bottom: -.1em;
}
.position {
    font-size: 90%;
    font-weight: bold;
}
.institution {
}
p {
    font-weight: normal;
    text-align: justify;
}
#timestamp {
    font-style: italic;
    color: var(--border-color);
    font-size: 60%;
    width: 100%;
    text-align: right;
    padding: 0;
    margin-left: -.3em;
}
.expanded-details {
    display: block;

    border: .2em inset;

    margin-top: 0;
    margin-bottom: 1em;
    margin-left: 2em;
    margin-right: 2em;

    padding-top: 0;
    padding-bottom: .5em;
    padding-left: 1em;
    padding-right: 1em;
    
    font-size: 90%;
    background-color: var(--background-color);
    text-align: justify;
}


/* ------------------------------------------------------------------ */
/* Remove the default styles from summaries */
/* ------------------------------------------------------------------ */
summary {
    /* remove the disclosure arrows */
    display: block;
    cursor: pointer;
    white-space: nowrap;

    margin: 0;
    padding-top: .3em;
    padding-bottom: .3em;
    padding-left: .5em;

    color: blue;
    font-size: 120%;
    text-decoration: underline;    
}
summary:hover {
    background-color: var(--hover-background-color);
}

/* ------------------------------------------------------------------ */
/* Remove the default styles from summaries - Safari-specific */
/* ------------------------------------------------------------------ */
summary::marker,
summary::-webkit-details-marker {

    /* remove the disclosure arrows in Safari;
        the two selectors cover different versions of the browser */
    display: none;
}
summary:focus {

    /* Safari shows a focus indicator around summaries, 
        even when using a pointer rather than keyboard navigation, 
            so we 1) remove the focus styling */
    outline: none;
}
summary:focus-visible{

    /* and then 2) use the :focus-visible pseudo-class 
        to add it back for visitors using keyboard navigation */
    outline: .2em dotted #000;
}

/* ------------------------------------------------------------------ */
/* materials */
/* ------------------------------------------------------------------ */

.project_header {}
.back_to_homepage {
    width: 100%;
    text-align: center;
    text-transform: lowercase;
    font-variant: small-caps;
    padding: 1em;
}
table.content {
    width: 100%;
    border-collapse: collapse;
    border-bottom: solid 
        var(--border-color) 
            var(--border-thickness);
}
td.left, td.right {
    padding: 1em;
    border: solid var(--table-color) var(--table-thickness);
}
td.page_header {
    padding: .5em;
    font-size: 1.5em;
    background-color: var(--background-color);
    text-align: center;
    border-right: solid black .1em;
    border-top: solid 
        var(--border-color) 
            var(--border-thickness);
}




td.left{ width: 40% }
td.right{ width: 60% }
div.course-numbers{}
div.course-title{ font-weight: bold }
div.course-schedule{ color: gray }
div.course-final-date{ color: red }

div.book-reference { margin-left: 2em; margin-bottom: 1em; }
span.book-authors{}
span.book-title{ font-style: italic; font-weight: bold; font-family: "Times New Roman"; font-size: 115% }
span.book-edition{}
span.book-publisher{}
span.book-isbn{}

div.final{ /* for the final statistics of the actual final */
    border: outset .2em;
    margin: 1em;
    padding: 1em;
    background: rgb( 255, 200, 200 );
}

/* ------------------------------------------------------------------ */
/* global */
/* ------------------------------------------------------------------ */
p {
    font-weight: normal;
    text-align: justify;
    margin-top: 1em;
    margin-bottom: 1em;
}
a:link {
    text-decoration: underline;
    color: blue;
}
/*
 * a:visited {
    text-decoration: underline;
    color: blue;
}
a:active {
    text-decoration: underline;
    color: yellow;
}
* */
a:hover {
    background-color: var(--hover-background-color);
}
li {
    padding: .2em;
}


/* ------------------------------------------------------------------ */
/* schedule */
/* ------------------------------------------------------------------ */

h1.instructor-card{
    margin: .5em;
}

table.schedule-external {
    margin: auto;
    padding:    0 !important;
    border-collapse: collapse;
}
tr.schedule-external  {
    /* the only row containing days of the week */
    padding: 0 !important;
    margin: 0 !important;
}
td.schedule-external  {
    /* single day of the week */
    border: solid var(--table-color) var(--border-thickness);
    vertical-align: top;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
}


table.schedule-internal {
    border-collapse: collapse;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}
tr.schedule-internal  {
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
}
td.schedule-internal-header {
    background-color: rgb( 190, 190, 190 );
    font-size: 150%;
    font-weight: bold;
    text-transform: capitalize;
    text-align: center;
    border-bottom: solid var(--table-color) var(--border-thickness);
    padding: 1em;
    margin: 0 !important;
}
/* ---------------------------------------------------
 * borders for the different types of appointments */
td.colorclass1,
td.colorclass2,
td.colorclass3,
td.colorclass4,
td.colorclass5,
td.colorclass6,
td.colorclass7,
td.colorclass8,
td.colorclass9,
td.colorclass10,
td.office,
td.meeting {
    padding-left: 1em;
    padding-right: 1em;
    border: solid black .1em;
}
td.schedule-internal-gap,
td.schedule-pre-gap,
td.schedule-post-gap { /* no border */ }

/* ---------------------------------------------------
 * colors for the different types of appointments */

td.colorclass1 { background-color: rgb( 204, 180, 143 ); }
td.colorclass2 { background-color: rgb( 192, 204, 143 ); }
td.colorclass3 { background-color: rgb( 155, 204, 143 ); }
td.colorclass4 { background-color: rgb( 143, 204, 167 ); }
td.colorclass5 { background-color: rgb( 143, 204, 204 ); }
td.colorclass6 { background-color: rgb( 143, 167, 204 ); }
td.colorclass7 { background-color: rgb( 155, 143, 204 ); }
td.colorclass8 { background-color: rgb( 192, 143, 204 ); }
td.colorclass9 { background-color: rgb( 204, 143, 180 ); }
td.colorclass10 { background-color: rgb( 204, 143, 143 ); }
td.office { background-color: rgb( 255, 200, 255 ); }
td.meeting { background-color: rgb( 150, 150, 150 ); }
td.schedule-internal-gap,
td.schedule-pre-gap,
td.schedule-post-gap {
    background-color: rgb( 220, 220, 220 );
}
/* ---------------------------------------------------
 * etc */
div.office-hours-duration {
    text-align: center;
    font-style: italic;
}
div.appointment-activity { font-weight: bold; }
span.appointment-time {}
span.appointment-duration { color: rgb( 100, 100, 100 ); }
div.appointment-location {}