/* ------------------------------------- LAYOUT ------------------------------ */

body {
    color: #333;
    font-family: helvetica, arial, Verdana, sans-serif;
    font-size: 0.9em;
}

a {
    text-decoration: none;
    color: #1E76D4;
}

a:hover {
    color: maroon;
}


.hover-color1 a:hover {
    color: #1E76D4;
}

.container {
    width: 100%;
    margin: auto;
    max-width: 1024px;
}

.float-r {
    float: right;
}

img.float-r {
    margin: 0 0 20px 20px;
}

strong {
    font-weight: bold;
}

blockquote {
    margin-left: 30px;
    color: #777;
    border-left: 5px #f1f1f1 solid;
    padding-left: 10px;
    font-style: italic;
}


/* ----------------- header: breadcrumb links ---------------- */

nav.breadcrumbs {
    font-size: 0.9em;
    margin-top: 10px;
    margin-bottom: 0;
    padding-left: 2px;
}

nav.breadcrumbs, nav.breadcrumbs a {
    color: #999;
}

em {
    font-style: italic;
}


/* ----------------- header: site title ---------------- */

header.header-site {
    border-bottom: solid #DDD 5px;
    overflow: auto;
    margin-top: 15px;
    margin-bottom: 20px;
    padding-bottom: 5px;
}

header.header-site h1 {
    float: left;
    font-size: 2em;
}

header.header-site h1 a {
    color: #444;
}

header.header-site h2 {
    float: right;   
    color: #666;
    font-size: 1.5em;
    margin-top: 6px;
}


/* ----------------- content header ---------------- */

#content-header {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  justify-content: space-between;
  grid-gap: 60px;
  padding-bottom: 20px;
  border-bottom: solid #ddd 5px;
}

.center {
    text-align: center;
}


/* ----------------- main content ---------------- */

b {
    font-weight: bold;
}

.content {
    margin-bottom: 30px;
    overflow:auto;
}

.content p, .content li, .content br {
    line-height: 1.5;
}

.content p, .content table {
    margin: 1em 0 0 0;
}

.content ul, .content ol {
    margin: 10px 0 10px 25px;
}

.content ul {
    list-style: circle;
    margin-top: 0;
}

.content ol {
    list-style: decimal;
}

.content h3 {
    margin-top: 1.5em;
    font-size: 1.4em;
    font-weight: bold;
    color: #486E96;
}

.content h4, .content h5 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-size: 1.2em;
    font-weight: bold;
    color: #444;
}

.content h5 {
    color: #888;
}

.indent-10 {
    margin-left: 10px;
}

/*
.content a:visited {
    color: purple;
}

.content a:visited:hover {
    color: maroon;
}
*/


/* ----------------- footer ---------------- */

footer {
    border-top: solid #ddd 2px;
    padding-top: 4px;
    padding-bottom: 30px;
    font-size: 0.9em;
}

footer address {
    display: inline;
    margin-left: 10px;
}

footer a {
    color: #aaa;
}
   
.lastModified {
    float: right;
    color: #aaa;
}

    
/* ------------------------------------- CONTENT ------------------------------ */

.grid td {
    text-align: center;
}

.grid {
    border: 1px solid #666;
    border-collapse: collapse;
}

.grid th, .grid td {
    padding: 6px;
    border: 1px solid #999;
    line-height: 1.5;
}


.image1 {
    -webkit-box-shadow: 0px 0 5px #AAA;
    -moz-box-shadow: 0px 0 5px #AAA;
    box-shadow: 0px 0 5px #AAA;
    background: #FFF;
    padding: 5px;
}


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

table.schedule {
    width: 100%;
    border-left: 1px #ccc solid;
    border-right: 1px #ccc solid;
    margin-top: 25px;
}

table.schedule thead {
    background: #ccc;
    font-weight: bold;
    text-align: left;
}
 
table.schedule th, .schedule td {
    padding: 6px;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    line-height: 1.5;
}

/* week and date columns are center-aligned */
table.schedule thead th:nth-of-type(1),
table.schedule thead th:nth-of-type(2) {
    text-align: center;
}

/* 1st column: week */
table.schedule tr[class~=week] td:nth-of-type(1)  {
    text-align: center;
}  

/* 2nd column: date */
table.schedule tr.week td:nth-of-type(2),  
table.schedule tr:not(.week) td:nth-of-type(1)  {
    white-space: nowrap;
    text-align: right;
}

/* 5th column: homework */
table.schedule tr.week td:nth-of-type(6),  
table.schedule tr:not(.week) td:nth-of-type(5)  {
    white-space: nowrap;
}

/* 4th column: labs */
table.schedule tr.week td:nth-of-type(5),  
table.schedule tr:not(.week) td:nth-of-type(4)  {
    white-space: nowrap;
}

/* alternate weeks (2 rows) */
table.days-2 tr:nth-child(4n-1),  
table.days-2 tr:nth-child(4n) {
   background: #f1f1f1;
}

/* alternate weeks (3 rows) */
table.days-3 tr:nth-child(6n), 
table.days-3 tr:nth-child(6n-1), 
table.days-3 tr:nth-child(6n-2) {
   background: #f1f1f1;
}

table.schedule tr.break {
   background: #dff0d8; 
}

table.schedule td[rowspan] {
   vertical-align: middle;
}

a.hw {
    color: #1E76D4;
}

td.lab a {
    color: green;
}

td.lab a:hover, a.hw:hover {
    color: maroon;
}

/* -------------------------- end of course schedule ------------------------- */


/* -------------------------- miscellaneous settings ------------------------- */

a > code {
  background: inherit;
  color: inherit;
  border: none;
  padding: 0;
}

/*
    I am not sure if all of the rest are used in the course homepage.
    They may be used in his session pages or other content.
*/

.textbook {
    width: 200px;
    -webkit-box-shadow: 0px 0 5px #aaa;
    -moz-box-shadow: 0px 0 5px #aaa;
    box-shadow: 0px 0 5px #aaa;
    background: #fff;
    padding: 5px;
}

.float-left {
    float: left;
    margin-right: 20px;
}

.due {
    color: maroon;
}

pre.code, code {
    font-family: monospace;
    font-size: 1.2em;
    line-height: 1.2;
    color: navy;
    background: #f1f1f1;
    padding: 10px;
    border: 1px solid #ccc;
}

@media (max-width: 500px) {
    img.img-resp {
        margin: 0 0 0 0 ;
        float: none;
    }
}

.aside1 {
    float: right;
    border-left: 3px #f1f1f1 solid;
    padding: 0 0 0 10px;
    margin: 0 0 0 10px;
}

.aside1 ul {
    margin-left: 20px;
}

.indent1 {
    margin-left: 20px;
}

table.table1 td {
    padding: 0.3em;
}

.red {
    color: red;
}

.green {
    color: green;
}

table.grid th {
    background: #f1f1f1;
    font-weight: bold;
}

table.grid1 td {
    text-align: left;
}