/* RESET STYLES */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, article_column, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ul li{
	font-family: Georgia, serif;	
	list-style: disc ;
	color: #444;
}

ul a{
	font-family: Georgia, serif;
	color: #669;
}


/* BODY STYLES */

html {
	background-color: #f2f2f2;	
	height: 100%;	
	margin: 0;
	padding: 0;
}


body {
	background-color: #f2f2f2;	
	height: 100%;
	line-height: 1.5;
	margin: 10px auto;
	width: 75%;
}

header {
	margin: 25px auto 25px;
}

a {
	color: #449;
	font-weight: bold;
	font-size: 1em;
	text-decoration: none;    
}

a:hover {
	color: #822;
}

figure {
	float: right;
}

.clear { clear: both; } 

.article_column {
	height: 100%;
	margin: auto;
	margin-top: 60px;
	margin-bottom: 30px;
}

.article_column h1 {
	font-weight: bold;	
}

footer {
	clear: both;
	margin: auto;
	margin-top: 15px;
	background-color: #246;
	text-align: center;
	width: 100%;
}

/*

.grid-container2 {
	display: grid;
	grid-template-columns: auto auto;
	grid-column-gap: 50px;
	justify-content: center;
}

.grid-container3 {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-column-gap: 35px;
	justify-content: center;
}

*/

.flex-container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.flex-container > div {
	text-align: center;
	margin:  auto;
	padding: 10px;
}

/* the image item needs to have margin set to zero to allow centering of title */

.item  img{
	width: 200px;
	height: 200px;
	border: 1px solid #ccc;	
	margin: 0;
}
		/* width and height must be specified to avoid rendering differently */

.item{
	text-align: center;
}

.desc {
	color: #777;	
	font-family: Verdana, Arial, sans-serif;
	font-size: 0.8em;
	list-style-type: none;
	text-align: center;
}

.portnote {
	margin-top: 0;
	color: #567;	
	font-family: Verdana, Arial, sans-serif;
	font-size: 0.8em;
	list-style-type: none;
	text-align: center;	
}

img {
	float: right;
	border: 1px solid #bbb;	
	display: block;	
	margin: 0 0 5px 20px;	 	
	padding: 3px;
	max-width: 100%;
	height: auto;
}

nav {
	margin-top: 0px;
	float: right;
	padding-bottom: 10px;
}

nav ul {
	margin-top: 10px;
	text-align: center;
}

nav  ul li {
	display: inline;
	line-height: 1.5em;	
	list-style-type: none;

}

nav ul li a {
	color: #888;	
	font-family: Verdana, Arial, sans-serif;
	font-size: 0.9em;
	list-style-type: none;
	padding-right: 5px;
	padding-left: 8px;
}

li {
	color: #456;	
	font-family: Verdana, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.8em;
	list-style-type: none;
}

.portfolio {
	display: block;
	margin: 60px auto;
}

tr td {
	border: 1px solid #aaa;
	padding: 10px 20px;
}


/* TEXT STYLES */

blockquote {
	font-size: 1.1em;
	font-style: italic;
	margin: 1.2em;
	color: #400;
	margin-bottom: 25px;
}

em {
	font-weight: bold;
	font-style: italic;
	font-size:  1em;
	color: #733;
}

p {
	padding-bottom: 5px;
}

figcaption {
	color: #333;
	font-family: Palatino Linotype , serif;
	font-size:  1em;
	padding:  0 10px 10px 40px;
	text-align: center;
}

	/* CLASSES */
	
.bio {

	margin: 40px auto;
}

.content {
	margin-top: 40px;
}

.email{
	clear: both;
	margin-bottom: 50px;	
}

.link_site{
	font-family: Georgia, serif;
	font-size: 1em;
	line-height: 1.5em;
}
	

.centered_img {
	float: none;
	display: block;
	border: 3px solid silver;
	padding: 6px;
	margin: auto;	
	max-width: 100%;
}

.index_img {
	float: none;
	display: block;
	border: none;
	padding: 50px;
	margin: auto;	
	max-width: 100%;
}

.nameplate {
	border-bottom: 1px solid silver;	
	margin: 20px auto 0;
}

.nameplate h1 {
	color: #556;	
	font-family: Georgia, serif;
	font-size: 1.8em;
	font-variant: small-caps;
	padding: 0;
	letter-spacing: 4px;   
	text-align: left;
	text-shadow: 2px 2px 2px #bbb;
}

.nameplate h2 {
	margin-top: 10px;
	margin-bottom: 5px;
	color: #999;	
	font-family: Georgia, serif;
	font-size: .8em;
	font-style: normal;
	font-variant: normal;
	letter-spacing: 5px;
	text-align: left;
	text-shadow: 2px 2px 1px #ccc;
}

.text {
	color: #444;
	font-family: Georgia, serif;
	font-size: 1em;
	line-height: 1.5em;	
	margin-bottom: 10px;	
	margin-top: 5px;
}

.topic { 
	margin-top: 50px;
	border-bottom: 2px solid silver;	
	margin-bottom: 20px ;
}		/* used in resources.html to add borders to sections */


h1 {
	color: #369;	
	font-family: Georgia, serif;
	font-size: 1.4em;
	font-weight: normal;
	line-height: 25px;    
	padding: 0 0 15px 0;
	text-align: left;    
	text-shadow: 2px 2px 2px #ddd;
}

h2 {
	color: #666;	
	font-family: Georgia, serif;
	font-size: 1.2em;
	font-style: normal;
	letter-spacing: 1.3px;	
	text-shadow: 2px 2px 2px #ddd;
	text-transform: uppercase;
}

h3 {
	color: #633;	
	font-family: Georgia, serif;
	font-size: 1em;
	letter-spacing: 3px;    
	padding: 0;    
	text-shadow: 2px 2px 2px #ccc;    
	text-transform: uppercase;
	
}


h4 {
	color: #777;
	font-family: Georgia, serif;
	font-size: 1em;
	letter-spacing: 2px;    
	padding: 0px;
	text-shadow: 2px 2px 2px #ddd;    
	text-transform: none;

}

address {
	display: block;
	font-family: Verdana, Arial, sans-serif;
	font-size: 1em;	
	font-style: normal;	
	margin-bottom: 20px;
}

.index_copyright {
	color: #999;	
	font-size: .8em;    
	margin: auto;
	text-align: center;
}


.copyright {
	color: #999;	
	font-family: Verdana, Arial, sans-serif;
	font-size: 0.9em;
	padding: 25px;
	text-align: left;
}

/*Tables*/

th {
	padding-left: 20px;
	padding-right: 20px;
}

/* MEDIA QUERIES */

 @media (min-width: 992px) {
	.content {
	display: flex;
	justify-content: center;
	}
}

@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}