* {
  box-sizing: border-box;
}

@media (width>= 992px) { /* bigger screens*/

.container {
		display: grid;
		grid-template-columns: 60% 40%;
		grid-template-areas:
		"space space"
		"menu menu"
		"header header"
		"content photos"
		"footer footer";
		column-gap: 2px;
		background-image: url(PhotoGray_bg_c-1.jpg);
		row-gap: 20px;
		position: relative;
		top: 0px;
		max-width: 53%;
		min-width: 0%;
		margin: auto;
	}
	.space{
		display: none;
/*		grid-area: space;
		grid-column: span 2;
		background-image: url(PhotoGray_bg_c-1.jpg);
		height: 20px;
		max-width: 100%;*/
	}
	.menu{
		grid-area: menu;
		grid-column: span 2;
		background-image: url(PhotoGray_nav_bg.jpg);
		border: solid 1px #999;
	}	

	.header{
		grid-area: header;
		grid-column: span 2;
	}

	.content {
	  grid-area: content;
	  grid-column: 1 / 1;
	}
	
	.content a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.content a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.content a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}

	.photos {
	  grid-area: photos;
	  display: flex;
	  flex-wrap: wrap;
	  flex-direction: column;
	  padding: 0% 2% 0% 2%;
	  grid-column: 2 / 2;
	  justify-content: space-between;
	}
	.footer {
	  grid-area: footer;
	  grid-column: span 2;
	}
	  /* for a fixed horizontal nav bar menu as George had it*/
	.navigation #myLinks {
		display: inline-block;
		position: relative;
	}
	.navigation {
		line-height: 30px;
		margin-top: 2px;
		margin-bottom: 2px;
		text-align: center;
}
	.navigation a:link{
		color: rgb(203, 203, 203);
		font-family: Futura, 'Trebuchet MS', sans-serif;
		text-transform: uppercase;
		font-size: 14px;
		text-decoration: none;
		text-align: center;
		padding: 0px 10px 0px 10px;
		display: inline-block;
	}
	.navigation a:visited{ /* overrides default lnk styling*/
		color: rgb(203, 203, 203);
		text-decoration: none;
	}
	.navigation a:hover{
		color: rgb(189, 37, 44);
		text-decoration: none;
	}

	/* Style the active link (or home/logo) */
/*	.active {
		color: black;
	}*/
/* Style the hamburger menu */
	.navigation a.icon {
		display: none;
		background: transparent;
		position: absolute;
		right: 0px;
		top: 0px;
	}
	
	.copyright{
		position: relative;
		top: 10px;
		margin: auto;
		padding: 2% 2% 0% 2%;
	}
}
@media (576px < width < 992px) { /* intermediate screens including cell phones on landscape*/

.container {
		display: grid;
		grid-template-columns: 60% 40%;
		grid-template-areas:
		"space space"
		"menu menu"
		"header header"
		"content photos"
		"footer footer";
		column-gap: 2px;
		background-image: url(PhotoGray_bg_c-1.jpg);
		row-gap: 20px;
		position: relative;
/*		top: 0px;*/
		max-width: 100%;
		min-width: 0%;
		margin: auto;
	}
	.space{
		display: none;
/*		grid-area: space;
		grid-column: span 2;
		background-image: url(PhotoGray_bg_c-1.jpg);
		height: 20px;
		max-width: 100%;*/
	}
	.menu{
		grid-area: menu;
		grid-column: span 2;
		background-image: url(PhotoGray_nav_bg.jpg);
		border: solid 1px #999;
	}	

	.header{
		grid-area: header;
		grid-column: span 2;
	}

	.content {
	  grid-area: content;
	  grid-column: 1 / 1;
	}
	.content a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.content a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.content a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}

	.photos {
	  grid-area: photos;
	  display: flex;
	  flex-wrap: wrap;
	  flex-direction: column;
	  padding: 0% 2% 0% 2%;
	  grid-column: 2 / 2;
	  justify-content: space-between;
	}
	.footer {
	  grid-area: footer;
	  grid-column: span 2;
	}
	  /* for a fixed horizontal nav bar menu as George had it*/
	.navigation #myLinks {
		display: inline-block;
		position: relative;
	}
	.navigation {
		line-height: 30px;
		margin-top: 2px;
		margin-bottom: 2px;
		text-align: center;
}
	.navigation a:link{
		color: rgb(203, 203, 203);
		font-family: Futura, 'Trebuchet MS', sans-serif;
		text-transform: uppercase;
		font-size: 14px;
		text-decoration: none;
		text-align: center;
		padding: 0px 10px 0px 10px;
		display: inline-block;
	}
	.navigation a:visited{ /* overrides default lnk styling*/
		color: rgb(203, 203, 203);
		text-decoration: none;
	}
	.navigation a:hover{
		color: rgb(189, 37, 44);
		text-decoration: none;
	}

	/* Style the active link (or home/logo) */
/*	.active {
		color: black;
	}*/
/* Style the hamburger menu */
	.navigation a.icon {
		display: none;
		background: transparent;
		position: absolute;
		right: 0px;
		top: 0px;
	}
	
	.copyright{
		position: relative;
		top: 10px;
		margin: auto;
		padding: 2% 2% 0% 2%;
	}
}
@media (width <= 576px) { /*phone screens*/

	.container {
		display: grid;
		grid-template-columns: 100%;
		grid-template-areas:
		"space"
		"menu"
		"header"
		"content"
		"footer"
		"photos";
		column-gap: 0px;
		background-image: url(PhotoGray_bg_c-1.jpg);
		row-gap: 20px;
		max-width: 90%;
		min-width: 0%;
		margin: auto;
	}
	.space{
		display: none;
	}
	.menu{
		grid-area: menu;
		grid-column: span 1;
		position: absolute;
		top: 0px;
		right: 0px;
	}
	.header{
		grid-area: header;
		grid-column: span 1;
	}

	.content {
	  grid-area: content;
	  grid-column: span 1;
	}
	.content a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.content a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.content a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}

	.photos {
		grid-area: photos;
		grid-column: span 1;
		display: none;
	}
	.footer {
	  grid-area: footer;
	  grid-column: span 1;
	}
	  /* for a vertical mobile hamburger menu*/
/* Hide the links inside the navigation menu (except for logo/home) */
	.navigation #myLinks {
		display: none;
	}
	.navigation {
		overflow: visible;
		background: rgb(100, 100, 100); /*the background for the links when displayed*/
		max-width: 25%;
		position: relative;
		z-index: 1;
		float: right; /*together, these lines make a right side, narrow menu*/
	}

/* Style navigation menu links */
	.navigation a:link {
		padding: 5px 5px; /*top and bottom then right and left*/
		text-decoration: none;
		font-family: Futura, 'Trebuchet MS', sans-serif;
		color: rgb(203, 203, 203);
		float: left;
		font-size: 14px;
		line-height: 15px;
		z-index: 1;
/*		display: block;*/
	}
	.navigation a:visited{ /* overrides default lnk styling*/
		color: rgb(203, 203, 203);
		text-decoration: none;
	}
	.navigation a:hover{
		color: rgb(189, 37, 44);
		text-decoration: none;
	}

	/* Style the active link (or home/logo) */
/*	.active {
		background: transparent;
		color: rgb(189, 37, 44);
	}*/

/* Style the hamburger menu */
	.navigation a.icon {
		background: transparent;
		display: block;
		position: absolute;
		right: 0px;
		top: 0px;
	}
	.copyright{
		position: relative;
		top: 10px;
		margin: auto;
		padding: 2% 2% 0% 2%;
	}
}

.copyright_style {
	color: rgb(255, 255, 255);
    font-family: 'Futura-MediumItalic', 'Futura', 'Trebuchet MS', sans-serif;
    font-size: 12px;
    font-stretch: normal;
    font-style: italic;
    font-variant: normal;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 16px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
}
.paragraph_style {/* Wildflowers of New Mexico Title Text*/
    color: rgb(255, 255, 255);
    font-family: 'Papyrus';
    font-size: 30px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 56px;
    margin-bottom: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.paragraph_style_1 {/* Family Names*/
    color: rgb(255, 255, 255);
    font-family: 'TrebuchetMS-Bold', 'Trebuchet MS', sans-serif;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 18px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: left;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
}
.paragraph_style_2 { /* Plant name links*/
    color: rgb(255, 255, 255);
    font-family: 'Trebuchet-BoldItalic', 'Trebuchet MS', sans-serif;
    font-size: 14px;
    font-stretch: normal;
    font-style: italic;
    font-variant: normal;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 16px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: left;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
}
.paragraph_style_3 {/* main page title*/
    color: rgb(255, 255, 255);
    font-family: 'Skia-Regular', 'Skia', 'Trebuchet MS', sans-serif;
    font-size: 24px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 29px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: left;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
}
.style_2 {/*used to bold family names in photo captions*/
    font-family: 'TrebuchetMS-Bold', 'Trebuchet MS', sans-serif;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
}
.style_3 {/*parenthetical plant names w/o italics*/
    font-family: 'TrebuchetMS', 'Trebuchet MS', sans-serif;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}
.style_4 {/*parenthetical plant names with italics*/
    font-family: 'TrebuchetMS-Italic', 'Trebuchet MS', sans-serif;
    font-size: 14px;
    font-stretch: normal;
    font-style: italic;
    font-weight: 400;
    line-height: 16px;
}
.paragraph_style_9 {/* used in captions - non italics*/
    color: rgb(255, 255, 255);
    font-family: 'Skia-Regular', 'Skia', 'Trebuchet MS', sans-serif;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 18px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: left;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
}
.style_8 {/* used in captions - adds italics*/
	font-family: 'Skia-Regular', 'Skia', 'Trebuchet MS', sans-serif;
/*    font-family: 'TrebuchetMS-Italic', 'Trebuchet MS', sans-serif;*/
    font-size: 14px;
    font-stretch: normal;
    font-style: italic;
    font-weight: 400;
    line-height: 18px;
}

.spacer {
    font-size: 1px;
    line-height: 1px;
}