@charset "UTF-8";
/* CSS Document responsive_plant.css */

/* ======================================================================== */


#responsiveMainPrimaryPlant hr {
	color: #faf3eb;
}
#responsiveMainSidebarPlant hr {
	color: burlywood;
}

#responsiveMainPrimaryPlant {
	width: 100%; 
	float: none;
	padding-top: 20px;
}
#responsiveMainPrimaryPlant p {
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	margin-bottom: .2em;
}
.responsiveMainPrimaryPlantContent {
	max-width: none;
}
#responsiveMainPrimaryPlant .smallType {
	font-size: 60%;	
}
#responsiveMainPrimaryPlant .smallTypeClade {  /* https://stackoverflow.com/questions/12851792/why-cant-i-decrease-the-line-height-of-this-text */
	font-size: 60%;	
	line-height: 1; 
	display: block;
}

#responsiveMainPrimaryPlant .smallTypeWHO {  /* 7 Dec 2022; 17 Feb 2022 https://stackoverflow.com/questions/12851792/why-cant-i-decrease-the-line-height-of-this-text */
	font-size: 60%;	
	line-height: 1.3; 
	display: block;
	margin-top: 1.6em;
}

.smallTypeWHO a { 
	font-weight: bold;  /* 29 July 2023 */
	text-transform: uppercase;  /* 15 Aug 2023 */
}

.uppercase {  /* 15 Aug 2023 */
	text-transform: uppercase;  
}

#readLink {
	float: right;
	width: 30%;  /* was 250px; */
	font-size: 70%;   
	color: #663;   
	padding-left: 10px;  
	z-index: 1;   /* this sends it to the top layer, added this 31 Jan 2022 */
}
#readLink p {
	padding-bottom: .4em;	
}

#synonymsTop .nameLatin { /*7 Dec 2022 added the ID so that font would be Times not Tahoma*/
	font-size: 118%;  /* 1 Jan 2023 was 120%; 19 Aug 2018 changed font-size from 115% to 130% */
	font-weight: bold;
	font-style: italic;
	font-family: "Times New Roman", Times, serif;
	color: #666;   /*16 May 2020 added this line to change font color from default black to dark gray */
}

.nameLatin {
	font-size: 118%;  /* 1 Jan 2023 was 120%; 19 Aug 2018 changed font-size from 115% to 130% */
	font-weight: bold;
	font-style: italic;
	font-family: "Times New Roman", Times, serif;
	color: #666;   /*16 May 2020 added this line to change font color from default black to dark gray */
}
.nameLatinPreferred, #preferredTop .nameLatinPreferred, #plantNamesBottom .nameLatinPreferred {  /*16 May 2020 added this class for the preferred Latin name; 2 Feb 2024 added the ID so that font would be Times not Tahoma */
	font-size: 130%;  
	font-weight: bold;
	font-style: italic;
	font-family: "Times New Roman", Times, serif;
	color: #000;   /*16 May 2020 added this line to change font color back to default black */
}

.nameFamily { /* 13 Apr 2022 turned into a "button" as follows */
	/* font-family: "Times New Roman", Times, serif; */
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	font-style: normal; 
	/* font-size: 90%; */
	display: inline-block; 
	color: black;
}	
.nameFamily a { 
	background-color: #fff5cc; /* was #fff0b3; */
	text-transform: uppercase;
	padding: .3em; 
	border-radius: 4px;
	text-decoration: none;
	font-size: 75%; /* 65%; 13 Nov 2022 */
		/* the following was copied from wimpybutton css */
	border-style: solid;
	border-width: 1px;
	border-color: #cbcbcb;
	margin-left: -1px;
	margin-top: -1px;
	box-shadow: 0px 1.65px 0px rgba(0,0,0,0.22837);
}
.nameFamily:hover a { 
	background-color: #ffe680; 
	text-decoration: none;
	color: black; 
}	

.linkKey { /* 2 Aug 2022 copied from nameFamily; turned into a "button" as follows */
	/* font-family: "Times New Roman", Times, serif; */
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	font-style: normal; 
	display: inline-block; 
	color: black;
}	
.linkKey a { 
	background-color: #d9ffb3; /* was #ecffb3; */
	text-transform: uppercase;
	padding: .3em; 
	border-radius: 4px;
	text-decoration: none;
	font-size: 75%; /* 65%; 13 Nov 2022 */
		/* the following was copied from wimpybutton css */
	border-style: solid;
	border-width: 1px;
	border-color: #cbcbcb;
	margin-left: -1px;
	margin-top: -1px;
	box-shadow: 0px 1.65px 0px rgba(0,0,0,0.22837);
}
.linkKey:hover a { 
	background-color: #c6ffb3; /* was #dfff80; */
	text-decoration: none;
	color: black; 
}	

#commonName {
	background-color: #e6e6e6;  /* was #CCC; */
	padding-left: 10px;  
	box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2); /* soft-edged transparent shadow copied/adjusted from the dropdown-content code */
}

/* CSS Missing Manual p210 suggests this technique (using inline-block and vertical-align) to display a gallery of varying heights, but it won't work on IE 6-7 or Firefox 2 or Safari 2 [#gallery] */
/* 15 Aug 2018 added newGallery to eliminate TN files from desktop pages */
#newGallery {
	margin-top: 20px;
	background-color: #FFF;
	font-size: 120%;  
}
#newGallery .thumbnail {
	margin: 4px;  
	width: 30%;  
	display: inline-block; 
	vertical-align: top;
}
#newGallery .thumbnail p {
	text-align: left;
	margin: 2px 0 0 0;
	font-size: 58%;  
}
#newGallery .thumbnail p.notesPublic {  /* 15 Aug 2018 I added this new rule to better control notes font-size */
	font-size: 65%;  
	font-style: italic;
	font-weight: bold;
}
#newGallery .photo img {
	border: 1px solid #666;
	background-color: #FFF;
	padding: 1%;  /* was 4px; */
	max-width: 98%; /* 27 Sept 2012 added this because I'm not using TNs */
}

/* --------------------------------------------------- 18 Mar 2012 */
.compare {
	color: #996666;	
}

.compareFlag {  /* 25 May 2014; on 13 Apr 2022 turned into a "button" */
	font-size: 120%; /* was 130%; all the following is new 2022 */
	background-color: #fff0b3; 
	text-transform: uppercase;
	padding: .3em; 
	border-radius: 4px;
	text-decoration: none;
		/* the following was copied from wimpybutton css */
	border-style: solid;
	border-width: 1px;
	border-color: #cbcbcb;
	margin-left: -1px;
	margin-top: -1px;
	box-shadow: 0px 1.65px 0px rgba(0,0,0,0.22837);
}	


/* ======================================================================================== SIDEBAR */
#responsiveMainSidebarPlant .smallType {
	font-size: 60%;	
}

#responsiveMainSidebarPlant #formSidebarName, #responsiveMainSidebarPlant #formSidebarNameTop {
	background-color: burlywood; 
	padding-top: 8px;
	padding-left: 6px;
	padding-bottom: 3px;
	overflow: visible;
}

#responsiveMainSidebarPlant #formSidebarNameTop {
	margin-bottom: .4em;
}

#responsiveMainSidebarPlant #formSidebarName p {
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	margin-bottom: 0;
}

#responsiveMainSidebarPlant #formSidebarNameTop p {
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	margin-bottom: 0;
	font-size: 70%;
}

.responsiveMainSidebarPlantContent {
	background-color: #d9d9d9;  /* was #CCC; */
	padding-top: .6em;
	padding-left: .4em;
	}
#responsiveMainSidebarPlant p, #responsiveMainSidebarPlant li {
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	font-size: 80%;
	margin-left: 3%;
	margin-right: 3%;
	}

#responsiveMainSidebarPlant ul {
	list-style-type: circle;
	list-style-position: outside;
}

#invasiveLoop li {
	font-style: italic;
	margin-bottom: .8em;	
}

#bookPages li {
	font-style: italic;
	margin-bottom: .8em;	
}

#footer #footerQuote {  
	font-size: 100%; 
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}

/* ======================================================================== MEDIA QUERIES */
/* ======================================================================== MEDIA QUERY MAX-WIDTH SMALLEST */
@media only screen and (max-width: 640px){
	#synonymsTop {
		display: none;
	}
	#readLink {
		float: none;
		width: 100%;
		/* font-size: 70%; */
	}
	#readLink p {
		text-align: center;
		padding-bottom: 1.2em;
	}
	#commonName {
		/* font-size: 100%; */
	}
	#plantNamesBottom {
		display: initial;
	}

	#plantNamesBottom .smallTypeBlock {  /* 17 Feb 2022 https://stackoverflow.com/questions/12851792/why-cant-i-decrease-the-line-height-of-this-text */
		font-size: 60%;	
		line-height: 1.3; 
		display: block;
		margin-top: 1.6em;
	}

	
}

/* ======================================================================== MEDIA QUERY MIN-WIDTH MIDDLE-SIZE */
@media only screen and (min-width: 641px){
	#synonymsTop {
		display: initial;
	}
	#plantNamesBottom {
		display: none;
	}
	
}

/* ======================================================================== MEDIA QUERY MAX-WIDTH SMALL */
@media only screen and (max-width: 800px){
	#responsiveMainPrimaryPlant {
		width: 100%;
		float: none;
		padding-right: 0; 
	}
	#responsiveMainSidebarPlant {
		width: 100%;
		float: none;
	}
	
	.responsiveMainSidebarPlantContent {
	}
	#responsiveMainSidebarPlant #formSidebarNameTop {
		display: none;
	} 
	
	#newGallery .thumbnail {
		width: 42%;  
	}
	#newGallery .photo img {
		padding: 1%; 
		max-width: 98%; 
	}
	#invasiveLoop li {
		margin-bottom: 1.2em;	
	}
	#bookPages li {
		margin-bottom: 1.2em;	
	}

}
	
/* ======================================================================== MEDIA QUERY MIN-WIDTH MIDDLE-SIZE & LARGER */
@media only screen and (min-width: 801px){
	#responsiveMainPrimaryPlant {
		width: 76%;
		float: right;
		padding-right: 0; 
	}
	.responsiveMainPrimaryPlantContent {	
		padding-left: 30px; 
	}
			
	#responsiveMainSidebarPlant {
		width: 24%;
		float: none;
	}
	.responsiveMainSidebarPlantContent {
	}
	
	#responsiveMainSidebarPlant #formSidebarName {
		display: none;
	} 
	
	#newGallery .thumbnail {
		width: 30%;  
	}
	#newGallery .photo img {
		padding: 1%; 
		max-width: 98%; 
	}	
	
}

/* ======================================================================== MEDIA QUERY MIN-WIDTH LARGEST 992px */
@media only screen and (min-width: 992px){
	#responsiveMainPrimaryPlant {
	padding-right: 0; 
	}
	
	
	
	
	
	
	#responsiveMainSidebarPlant {
		/* background-color: does not work here; why? */
	}
	
	.responsiveMainSidebarPlantContent {
	}
	
}