html { 
	color: #222; /* 222 */
	background: #EEE9DB; /* EEE9DB */
}
::-moz-selection{background:#eee3c6;text-shadow:none;}/* #b3d4fc; change to match palette */
::selection{background:#eee3c6;text-shadow:none;}
main { box-shadow: 0 1px 0 rgba(0,0,0,0.2);
	background: #fff;
	/* padding-bottom: 1em; without padding here the lowermost contained element's bottom margin is ignored */
	border-bottom-left-radius: 2em;
}
h1, h3, h5 {
	color: #62583c; /* was originally #827A66; but not enough color contrast on white */
	/* text-shadow: 1px 1px 0 rgba(0,0,0,0.2);  */
}
h2, h4, h6 {
	color: #714929;
	/* text-shadow: 1px 1px 0 rgba(0,0,0,0.2);  */
}
a, a:link { /* putting transition here affects all styles of links regardless of later styling */
	color: #22d; /* = AAA-passed blue; or can be AAA-passed #22a; indigo */
	text-decoration: none;
	transition: all 0.3s ease;
}
/* http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/working-examples/G183/link-contrast.html */
a:visited {color: #80b;}/* = AAA-passed purple; #306; standard purple */
html body a:hover, 
html body a:focus, 
html body a:active {color: #c00 !important;} /* AAA-passed red; or #812 burgundy */
	/* using html body will over-ride the a:link, a:visited styles below
    but #banner a will over-ride the hover color above. So added  !important here.  */
main a:link, 
main a:visited,
#pagefoot p a:link, 
#pagefoot p a:visited {
	text-decoration: none; 
	padding-bottom: 1px; 
	border-bottom: 1px dotted;
}/*border color inherited, and the dotted focus box overlaps it. */
a[href^="http://"]:not([href*="mycoguide.com"]):before{ 
    content: url(external.png);
    padding-right: 0.2em;
}
a[href^="https://"]:not([href*="mycoguide.com"]):before{ 
    content: url(external.png);
    padding-right: 0.2em;
}
nav a:link, nav a:visited, nav strong {
	color: #615D19; /* 615D19; was 716D29; */
	padding-bottom: 0; 
	border-bottom: 0;
}/* cancel previous rule for main */
#breadcrumb { /* you are here navigation  */
	color: #615D19; /*  615D19  match color to the nav links */
  background: #ffff; /* while it is below the header nav */
}
#banner {
	color: #62583C;  /* 62583C */
	border-top: 1px solid #ACA97C; /* ACA97C */
}
#banner h1 a, 
nav#primary a {
	color: #62583C; /* 62583C */
}/* be careful not to over-ride the hover color */
nav#primary li.isOpen a {
	background: rgba(255,255,255,0.7); /* this 0.7 lets through some of the background color (brown) */
}
nav#primary li.isActive a {
	background: #fff;
}
nav#primary li a:hover,
nav#primary li a:focus,
nav#primary li a:active {
	background: #fff;/*fallback, IE8 etc*/
	background: rgba(255,255,255,0.55); 
}
nav#primary li.isOpen a:hover,
nav#primary li.isOpen a:focus,
nav#primary li.isOpen a:active {
	background: #fff;
}

nav#primary, nav#primary li {
	border-color: #ACA97C; /* ACA97C */
}

nav#primary .home a {
  /* have to set width to 21px for desktop  */
  background: url(home2.png) 13px 7px;
	background-repeat: no-repeat;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}
nav#primary .home a:hover {
    background: rgba(255,255,255,0.55) url(home2.png) 13px -22px;
	background-repeat: no-repeat;
}


main nav {
	border-right: 1px solid #ACA97C; /* ACA97C */
}
main nav li.guide a {
	border: solid #ACA97C; /* ACA97C */
	border-width: 1px 0 1px 0;
	background: #faf7ee; /* faf7ee */
}/* background: #faf7ee; matches exactly the 0.7 transparency on top of #eee3c6; */

main nav .isActive {
	color: #222;
	border-bottom: 3px solid #ACA97C; /* ACA97C */
}

main nav a:hover, main nav a:focus {
	background: #fff;/*fallback, IE8 etc*/
	background: rgba(255,255,255,0.3);
}/* transparent enough not to destroy rounded corners */



footer ul.utility {
	background: #EEEDDB; /* was faf7ee but this was not a caligatum color;  */
	font-weight: bold;
}
footer ul.utility, 
footer ul.utility li {
	border-color: #ACA97C; /* ACA97C */
}
footer a:link, footer a:visited {
	color: #615D19; /* 615D19; was 716D29; */
}
footer ul.utility a:hover, footer ul.utility a:focus {
	background: #fff;
}
.madewith em {
	color: #a00; /* AAA-rated red */
	font-size: 1.3em;
}
footer ul.utility span { /* this is for the h in humans.txt ; previously used an image */
	color: #EEEDDB;
	background: #a00; /* AAA-rated red */
	font-style: italic; /* don't change font type or it will change the line-height */
	padding: 0 0.1em;
}

/* ============== Media queries ==============  */

@media screen and (min-width: 32em) { /* 50em Two Columns */
  #banner {
		color: #62583C;  /* 62583C */
		background: #EEE3C6 url(triccali1100.jpg) left top no-repeat; /* EEE3C6 */
	}
	header input[type="search"] {
		background: #EEE9DB; /* EEE9DB */
		padding: 0.1em 0.3em;
		border-radius: 0.3em;
	}
	nav#primary {
		background: #EEE3C6;
		/* box-shadow: 2px 2px 0 rgba(0,0,0,0.2); why is shadow behind breadcrumb? */
	}

}