body {width:100%; font-size: 16px; color: DimGrey; text-align: center; padding: 10px 10px 15px 10px; margin:0}
	body {font-family: Arial, Helvetica, Tahoma, sans-serif;}
	html {box-sizing: border-box}	/* include borders and padding in widths */
	*, *:before, *:after {box-sizing: border-box}	
	img {width: 100%; display: block}
	p {text-align: left}
	h1 {font-size: 3em; font-weight: normal; color: LimeGreen; margin: 0 0 5px 0}
	h2 {font-size: 1.2em; color: #888888}
	h3 {font-size: 1.2em; color: LimeGreen}
	h4 {font-size: 1em; padding:inherit; margin: inherit; font-weight: bold; line-height: 2em}
	input {cursor: pointer;}
	figure {width: 100%; margin: 0}
	figcaption {font-size: .8em; text-align: right; font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, serif; font-style: italic}
	
	a {text-decoration: none; cursor: pointer; color: inherit}
	a:link {color: inherit}
	a:visited {color: inherit}
	a:hover {color: #ff9900}
	a:active {color: inherit}
	.subpage a:hover {color: #ff9900}

	header h2 {margin: 0 0 0 0}
	.subpage {text-align: left}
	.subpage a {color: LimeGreen}
	.subpage h2 {font-size: 1.4em}
	.subpage h3 {font-size: 1.1em; font-style: bold; color: DimGrey}
	.subpage footer a {color: White}	/* why needed? */
	
	.rowbox {width: 100%; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between}
	#wrapper {max-width: 900px; width: 100%; margin: 0px auto 0px auto}
	main {padding: 0px 10px 0px 10px}
	
	#logobox {padding: 3px 10px 10px 12px; text-align: left}
	#hgheader {border-width: 0px; border-color: LimeGreen; border-style: solid; margin: 10px 0 0 0}
	#vitals {text-align: right; padding: 9px 9px 9px 9px; font-size: 1em; line-height: 1.5em; display:flex; align-items:center; justify-content:center}
	#vitalscontent {}
	
	footer {font-size: 1em; line-height: 2em; margin: 1em 0 0 0; padding: 0px 10px 0px 10px; display:flex; justify-content:space-between}
	footer {background-color: LimeGreen; color: White}
	footer a {color: White}
	
	.leftfoot {text-align: left}
	.rightfoot {text-align: right}
	
	.photobtn {height: 100%; position: relative; max-width: 100%; margin: 2em 0px 0px 0px; clear:both; overflow: hidden}
	.halfwidth {width: calc(50% - 1em)}
	.fullwidth {width: 100%}
	
	.btnimage {width: 100%; vertical-align: bottom}
	.toplabel {position: absolute; width: 100%; top: 0; left: 0; font-size: 1.2em; text-align:center; line-height:250%; color: White; background-color: rgba(155,155,155,0.7); font-style:italic}

	.botlabel {position: absolute; /*height: 100%;*/ margin: 0px; padding: 0px 10px 10px 10px; width: 100%; top: calc(100% - 2em); left: 0; font-size: 1em; text-align:center; color: White; background-color: rgba(155,155,155,0.7)}
	.botlabel {transition: top 1s, transform 1s, background-color 1s; pointer-events: none}
	.slideup {top: 50%; transform: translateY(-50%); background-color: rgba(99,99,99,0.8)} /* top:0 to slide all the way up */
	.botlabel p {font-weight: 300; font-size: .8em; position: relative; margin: 0px auto 5px auto; padding: 0 0 0 0; max-width: 40em}
	
	.learnmore {text-align: right; font-style: italic; pointer-events:all}
	
	.banner {background-color: LimeGreen; color: White; margin: 1em 0 0 0; line-height:100%; padding: 1em 1em 1em 1em}
	
	@media (max-width: 700px) 
	{
		body {font-size: 14px}
		.halfwidth {width: 100%}
		#vitals {width: 100%; text-align: center; padding: 0 0 0 0}
		#logobox {text-align: center; width: 100%}
	}
	
	@media (max-width: 450px) 
	{
		body {font-size: 13px}
		h1 {font-size: 2em}
		h2 {font-size: 1em}
		h3 {font-size: 1em}
		botlabel h4 {padding-bottom: 5px}
		figcaption {font-size: .7em}
	}
	
	@media (max-width: 300px) 
	{
		body {font-size: 12px}
		botlabel h4 {padding-bottom: 1px}
	}
	
	.stroked {text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}