/* General look and feel of the web pages. */

:root {
 --Color--border      : #FEFFFA;  
 --Color--link        : #A24448;
 --Color--visited-link        : #620408; 
 
 --Color--white       : #FFFFFF;

 --Color--title       : #0F397D;
 --Color--title-background: #FEFFFA;
 --Color--background  : #FEFFFA;
 --Color--text        : #8B8077;   
 --Color--header      : #0F397D;   

 --Color--menu-bg     :  #F7F8F4;
 --Color--menu-fg     : #A69586;
 --Color--menu-fg-hover : #F7F8F4;
 --Color--menu-bg-hover : #A69586;

 --Color--section-bg  : #FEFFFA;
 --Color--section-fg  : #8B8077; 
 
 --Color--week1       : #FFFFFF;   
 --Color--week2       : #F7F8F4;   
 --Color--dimweek1    : #CCCCCC;   
 --Color--dimweek2    : #BBBBBB;
 --Color--dimhw       : #AAAAAA;
 --Color--date        : #8B8077;
 --Color--topic-fg    : #620408;
 
 --Color--note-bg     : #D1E1EB;
 --Color--note-border : #AED1EC;
 --Color--note-fg     : #620408;
 --Color--notice-fg   : #DE3A0D;
 
 --Color--code-fg     : #635C56;
 --Color--code-bg     : #FEFEFB;
 --Color--code-border : #A69586;
 --Color--code-error  : #A40000;

 --Color--hdr-bg      : #666666;
 --Color--hdr-fg      : #000000;
}

/********************************************/
/* COMMON SITE ELEMENT STYLES               */
/********************************************/


body {
    background-color: var(--Color--background);
    color: var(--Color--text);
    font-family: 'Roboto', sans-serif, Helvetica; 
}

#content {
  width: 80%;
  margin: 15px auto;
  padding: 5px;
  background-color: var(--Color--border);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}


h1 {
   font-family: 'Roboto';
   margin-left: -30px;
}

div.banner h1 {
   color: var(--Color--title);
}    

h2 {
   font-family: 'Roboto';
   margin-left: -30px;
   color: var(--Color--header);
}


h3 {
    font-family: 'Roboto';
    font-size: 25px;
    margin-left: -30px;
    color: var(--Color--header);
}

a {
    font-family: Helvetica;
    text-decoration: none;
}

a:link {
    color: var(--Color--link);
}

a:visited {
    color: var(--Color--visited-link);
}

a:hover {
    color: var(--Color--link);
    text-decoration: underline;
}

.banner {
   -webkit-border-top-left-radius: 5px;
   -webkit-border-top-right-radius: 5px;
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-topright: 5px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   background-color: var(--Color--title-background);
   padding: 5px 15px;
   padding-left: 50px;
   margin: 0px 0px;
}

/* For creating the "menu" at the top of the web pages */

.link {
  display: block;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  margin: 0px;
  background-color: var(--Color-menu-background);
  foreground-color: var(--Color-menu-foreground);
  font-family: Helvetica, 'Roboto', sans-serif, Helvetica;
}


#menu {
	background-color: var(--Color--menu-bg);
}

#menu a:link, #menu a:visited {
	display: block;
	border-top: 0px;
	font-family: Helvetica;
	background-color: var(--Color--menu-bg);
	padding: 2px 2px 2px 2px;
	color: var(--Color--menu-fg);
	text-decoration: none;
}

#menu a:hover{
	border-top: 0px;
	background-color: var(--Color--menu-bg-hover);
	color: var(--Color--menu-fg-hover);
	background-image: none;
	padding: 2px 2px 2px 2px;
	text-decoration: none;
}


/* The first section doesn't have rounded upper corners. */

.section1 {
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: var(--Color--section-bg);
    color: var(--Color-section-fg);
    padding: 5px 15px;
    padding-left: 50px;
    margin: 0px 0;
}


.section {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: var(--Color--section-bg);
    color: var(--Color--section-fg);
    padding: 5px 15px;
    padding-left: 50px;
    margin: 15px 0;
}

/* For adding notes to the web pages (usually in projects) */

.notice {
    color: var(--Color--notice-fg);
    font-weight: bold;
    font-size: 20px;
}

.tipt {
    font-weight: bold;
}

.hdr {
    background-color: var(--Color--hdr-bg);
    color: var(--Color--hdr-fg);
    padding: 2px 2px 2px 2px;
}

.note {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: var(--Color--note-bg);
    border: 1px solid var(--Color--note-border);
    color: var(--Color--note-fg);
    padding: 0px 10px;
    width: 80%;
    margin: 15px auto;
}

dd.spaced {
    position: relative;
    margin-left: 3ex;
    margin-bottom: 1em;
}    

tt {
    font-family: 'Roboto Mono', monospace;
}

/* For formatting code examples */

pre {
    font-family: 'Roboto Mono', monospace;
}    

pre.code {
    max-width: 80%;
    color: var(--Color--code-fg);
    background-color: var(--Color--code-bg);
    display: block;
    padding: 1ex 0px 0px 0px;
    border: 1px solid var(--Color--code-border);
}

pre.error {
    color: var(--Color--code-error);
}


/************** Lecture Table Styles *********/


/********************************************/
/* LECTURE TABLE STYLES                     */
/********************************************/

/*
   date
   topic
   notes
   homework
*/

.bright {
    color: var(--Color--white);
}

td.date {
    color: var(--Color--date);
}

div.hdr {
    color: var(--Color--white);
}


tr.week1 {
    background-color: var(--Color--week1);/*week1*/
}

tr.week2 {
    background-color: var(--Color--week2);;/*week2*/
}

tr.week1 > td.topic {
    color: var(--Color--topic-fg);/*week1*/
}

tr.week2 > td.topic {
    color: var(--Color--topic-fg);/*week2*/
}

tr.week1 > td.topic.hide {
    color: var(--Color--dimweek1);
}

tr.week2 > td.topic.hide {
    color: var(--Color--dimweek2);
}

td.notes.hide > a {
    display:none;
}

td.homework.hide > a {
    color: var(--Color--dimhw);
}


.hide > span.hideable {
    display:none;
}