/* 
Title:     Grid css for Grow What You Eat
Author:    Terry Ettinger
Updated:   June 13, 2022
*/

html {
	box-sizing: border-box;
	font-size: 14px;
	}

@media screen and (min-width: 320px) {
  	html {
    		font-size: calc(14px + 6 * ((100vw - 320px) / 680));
  		}
		}

@media screen and (min-width: 1280px) {
  	html {
    		font-size: 20px;
  		}
		}

body {
	font-family: arial, sans-serif;
	line-height: 1.25em;
	background-color: #FAFAD2;		
	}

.wrapper {
	width: 100%;
    max-width:1280px;
	margin: 0 auto;
	}

.img {
    max-width: 100%;
    }



@media (min-width: 550px) {

.wrapper{
	display: grid;
	grid-gap: 20px;
    grid-template-columns: repeat(12, [col] 1fr);
	}
	}


/* link styles
---------------------------------------------------------- */

a:link  {color: #009900; text-decoration: none;}
		
a:visited {color: #009900; text-decoration: none;}
		
a:hover{ 
    color: #FAFAD2; 
    background-color: #006600;
	border-radius: 2px;
	}
		
a:active {text-decoration: underline; }

/* font styles
---------------------------------------------------------- */
h1   {color: #006600; font-family: times; font-size: 225%; line-height: 1em; margin-top: 0; margin-bottom: 0.05em; font-style: italic;}

h2   {color: #006600; font-family: times; font-weight: bold; font-size: 130%; line-height: 1.15em; margin-top: 0.05em; margin-bottom: 5px; font-style: italic;}

h3   {color: #006600; font-family: times; font-size: 150%; line-height: 1em; margin-top: 10px; margin-bottom: 5px; font-style: italic;}

h4   {color: #006600; font-family: times; font-size: 115%; padding-left: 1em; line-height: 1em; margin-top: 10px; margin-bottom: 5px; font-style: italic; font-weight: bold}

h5   {color: #006600; font-weight: normal; line-height: 0.6em; margin-top: 10px; margin-bottom: 5px;}

.coursedetails {color: #006600; font-size: 75%; font-weight: normal; line-height: 0.6em; margin-top: 10px; margin-bottom: 5px;}

.weekheader {color: #006600; font-size: 125%; font-weight: bold; line-height: 1em; margin-top: 10px; margin-bottom: 5px;}

.contentlink {color: #006600; font-size: 105%; font-weight: bold; text-align: center; line-height: 1em; margin-top: 10px; margin-bottom: 5px;}

.day {font-size: 110%; font-weight: 600; line-height: 1em; padding-left: 1em; margin-top: .4em; margin-bottom: .2em;}

.syllabuscontent {font-size: 90%; font-weight: normal; padding-left: 2em; line-height: 1.2em;}

.commentline {font-size: 90%; font-weight: normal; padding-left: 2em; line-height: 1.2em; margin-bottom: .4em;}

.referencecontent {font-size: 90%; font-weight: normal; padding-left: 3em; line-height: 1.2em;}

.colorreferencecontent {color: #006600; font-weight: normal; padding-left: 3em; line-height: 1.2em;}

.referencecontentindent {font-weight: normal; padding-left: 4em; line-height: 1.3em;}

.bigreferencecontentindent {font-size: 100%; font-weight: normal; padding-left: 4em; line-height: 1.3em;}

.referencecontentmaxindent {font-size: 90%; font-weight: normal; padding-left: 6em; line-height: 1.2em;}

.referencecontentultramaxindent {font-size: 90%; font-weight: normal; padding-left: 12em; line-height: 1.2em;}

.picturecaption {font-size: 70%; font-weight: normal; line-height: 1.1em;}

/* paragraph typography
---------------------------------------------------------- */
.breadcrumbs {
	color: #006600; 
	font-weight: normal; 
	font-size: 75%;
    margin-top: 1.5em; 
    margin-bottom: 1.5em;
	}

.breadcrumbs a:link {
	text-decoration: none;
	color: #006600;
	}

.breadcrumbs a:visited {
	text-decoration: none;
	color: #006600;
	}

.breadcrumbs a:hover{
	color: #FAFAD2;
	background-color: #006600;
	border-radius: 2px;
	}

.paddingleft {
    padding-left: 2em;
    }

.modpaddingleft {
    padding-left: 3em;
    }

.redpaddingleft {
    padding-left: 2em;
    color: red;
    }

/* main page structure
---------------------------------------------------------- */

.main_header {
	grid-column: col/span 12;
    grid-row: 1;
	}

.left_nav {
	grid-column: col/span 2;
    grid-row: 2;
	display: grid;
	grid-gap: 0.1em;
    align-self: start;
	}

.left_nav a:link, .left_nav a:visited{
	text-decoration: none;
	color: #006600;
	display: block;
	padding: 5px; 
	}

.left_nav a:hover{
	color: #FAFAD2;
	background-color: #006600;
	border-radius: 20px;
	}

/* left navigation bar structure
---------------------------------------------------------- */

.nav_coursehome {
	line-height: 1.1em;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	border-bottom: 1px solid #006600;
	border-top: 1px solid #006600;    
	}

.nav_coursesyllabus {
	line-height: 1.1em;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	border-bottom: 1px solid #006600;
	}

.nav_courseschedule {
	line-height: 1.1em;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	border-bottom: 1px solid #006600; 
	}

.nav_coursecontent {
	line-height: 1.1em;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	border-bottom: 1px solid #006600;
	}

.nav_coursenotices {
	line-height: 1.1em;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	border-bottom: 1px solid #006600;
	}

.nav_factoids {
	line-height: 1.1em;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	border-bottom: 1px solid #006600;
	}

.nav_weather {
	line-height: 1.1em;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	border-bottom: 1px solid #006600;
	}

.nav_gallery {
	line-height: 1.1em;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	border-bottom: 1px solid #006600;
	}

.nav_instructor {
	line-height: 1.1em;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	border-bottom: 1px solid #006600;
	}

.nav_contact {
	line-height: 1.1em;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	border-bottom: 1px solid #006600;
	}

/* Main content structure
---------------------------------------------------------- */

.main_content {
	grid-column: col 3/span 10;
    }

.cards {
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 225px));
    grid-gap: .5rem;
    }

.pic_cap {
    display: flex;
    flex-flow: column;
    padding: .1rem;    
}

/* Schedule page structure
---------------------------------------------------------- */
.weektwotofifteen {
	grid-column: col 3/span 10;
    grid-row: 3
    }

.weekcontent {
	grid-column: col 5/span 7;
    }

.week_1 {
	grid-column: col 3/span 3;
    }

.week_4 {
	grid-column: col 3/span 3;
    grid-row: 3;
    }

.week_5 {
	grid-column: col 6/span 3;
    }

.week_6 {
	grid-column: col 9/span 3;
    }

.week_7 {
	grid-column: col 3/span 3;
    grid-row: 4;
    }

.week_8 {
	grid-column: col 6/span 3;
    }

.week_9 {
	grid-column: col 9/span 3;
    }


/* Main footer structure
---------------------------------------------------------- */
.main_footer {
	grid-column: col/span 12;
    grid-row: 6;
	text-align: center;	
	}

.schedule_main {

	}

.homepage_question {
	grid-area: question;
	}

.homepage_weather {
	grid-area: weather;
	}

.homepage_news {
	grid-area: news;
	}


/* List styling
---------------------------------------------------------- */
.syllabuslist {font-size: 90%; font-weight: normal; padding-left: 1em; line-height: 1.2em; margin-bottom: .5em;}

.normalfontsizelist {padding-left: 3.5em; line-height: 1.4em; margin-bottom: .5em;}

.nodecsyllabuslist {font-size: 90%; font-weight: normal; padding-left: 2.1em; line-height: 2.5em; margin-bottom: .5em; list-style-type: none;}

/* images
---------------------------------------------------------- */

.imageright	{border: 1px solid #006600; margin-left: 5px; margin-top: 0px; margin-bottom: 5px;}